/* ============================================
   Système de Formulaires Standardisés
   ============================================ */

/* Labels */
.input-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.input-label-required::after {
  content: ' *';
  @apply text-red-600;
}

/* Champs de texte */
.input-field {
  @apply block w-full px-4 py-3 bg-white border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm text-gray-900 transition-all duration-200 placeholder-gray-400;
}

.input-field:hover {
  @apply border-gray-400;
}

.input-field:disabled {
  @apply bg-gray-100 text-gray-500 cursor-not-allowed border-gray-200;
}

.input-field:read-only {
  @apply bg-gray-50 border-gray-200;
}

/* États d'erreur */
.input-error {
  @apply border-red-500 focus:ring-red-500 focus:border-red-500;
}

.input-error:focus {
  @apply ring-red-200;
}

/* États de succès */
.input-success {
  @apply border-green-500 focus:ring-green-500 focus:border-green-500;
}

.input-success:focus {
  @apply ring-green-200;
}

/* Textarea */
.textarea-field {
  @apply input-field resize-y min-h-[100px];
}

.textarea-code {
  @apply textarea-field font-mono text-sm leading-relaxed;
}

/* Select */
.select-field {
  @apply input-field cursor-pointer bg-no-repeat bg-right pr-10;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-size: 1.5em 1.5em;
}

/* Checkbox et Radio */
.checkbox-field,
.radio-field {
  @apply w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer transition-colors;
}

.radio-field {
  @apply rounded-full;
}

/* Switch / Toggle */
.switch-field {
  @apply relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 cursor-pointer bg-gray-200 focus:ring-4 focus:ring-blue-300 focus:outline-none;
}

.switch-field:checked {
  @apply bg-blue-600;
}

.switch-field::after {
  content: '';
  @apply absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200 shadow-sm;
}

.switch-field:checked::after {
  @apply translate-x-5;
}

/* Messages d'aide */
.input-help {
  @apply text-xs text-gray-600 mt-1.5;
}

.input-help-error {
  @apply text-xs text-red-600 mt-1.5 flex items-center gap-1;
}

.input-help-error::before {
  content: '⚠';
}

.input-help-success {
  @apply text-xs text-green-600 mt-1.5 flex items-center gap-1;
}

.input-help-success::before {
  content: '✓';
}

/* Groupes de champs */
.input-group {
  @apply flex items-stretch;
}

.input-group-prepend,
.input-group-append {
  @apply inline-flex items-center px-4 py-3 bg-gray-50 border border-gray-300 text-gray-700 text-sm font-medium;
}

.input-group-prepend {
  @apply rounded-l-xl border-r-0;
}

.input-group-append {
  @apply rounded-r-xl border-l-0;
}

.input-group .input-field {
  @apply rounded-none;
}

.input-group>.input-field:first-child {
  @apply rounded-l-xl;
}

.input-group>.input-field:last-child {
  @apply rounded-r-xl;
}

/* Input avec icône */
.input-with-icon {
  @apply relative;
}

.input-with-icon .input-field {
  @apply pl-10;
}

.input-with-icon .input-icon {
  @apply absolute left-3 top-1/2 -translate-y-1/2 text-gray-400;
}

.input-with-icon .input-field:focus~.input-icon {
  @apply text-blue-600;
}

/* Compteur de caractères */
.input-counter {
  @apply text-xs text-gray-500 text-right mt-1;
}

.input-counter.warning {
  @apply text-orange-600 font-semibold;
}

.input-counter.danger {
  @apply text-red-600 font-bold;
}

/* Fieldset */
.fieldset {
  @apply border border-gray-200 rounded-xl p-4;
}

.fieldset-legend {
  @apply text-sm font-medium text-gray-900 px-2;
}

/* Form sections */
.form-section {
  @apply space-y-6;
}

.form-section-title {
  @apply text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200;
}

/* Input Grid */
.input-grid {
  @apply grid grid-cols-1 gap-6;
}

.input-grid-2 {
  @apply input-grid md:grid-cols-2;
}

.input-grid-3 {
  @apply input-grid md:grid-cols-3;
}

.input-grid-4 {
  @apply input-grid md:grid-cols-2 lg:grid-cols-4;
}

/* File upload */
.file-upload {
  @apply block w-full text-sm text-gray-900 border border-gray-300 rounded-xl cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 file:mr-4 file:py-3 file:px-4 file:rounded-l-xl file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition-colors;
}

/* Range slider */
.range-field {
  @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.range-field::-webkit-slider-thumb {
  @apply appearance-none w-5 h-5 bg-blue-600 rounded-full cursor-pointer hover:bg-blue-700 transition-colors shadow-md;
}

.range-field::-moz-range-thumb {
  @apply w-5 h-5 bg-blue-600 rounded-full cursor-pointer border-0 hover:bg-blue-700 transition-colors shadow-md;
}

/* Date picker */
.date-field {
  @apply input-field;
}

.date-field::-webkit-calendar-picker-indicator {
  @apply cursor-pointer opacity-60 hover:opacity-100 transition-opacity;
}

/* Color picker */
.color-field {
  @apply h-12 w-full rounded-xl border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors;
}