/* =================================================================
   forms.css - Champs de formulaire standardises
   ================================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--gap-md);
}

.field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  transition: var(--transition-norm);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elevated);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-comment);
}

/* Icone du selecteur date/heure : eclaircie pour etre visible sur fond sombre */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transition-norm);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

input[disabled],
select[disabled],
textarea[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.field-error {
  color: var(--error-text);
  font-size: 11px;
  margin-top: 4px;
}

.field input.error,
.field textarea.error,
.field select.error {
  border-color: var(--error);
}

/* === field-grid : layout grid pour aligner plusieurs fields sur une ligne ===
   Defini par defaut sur 4 colonnes egales. Surcharge inline avec
   grid-template-columns: 3fr 1.5fr 1.5fr 3fr 1fr; pour ratios custom.
   Pattern CRM (fiches denses). */
.field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
  align-items: end;
}

.field-grid .field {
  margin-bottom: 0;
}

/* Variante : label inline et input plus compact (pour fiches denses) */
.field.field-compact {
  margin-bottom: var(--gap-sm);
}
.field.field-compact label,
.field-compact .field-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 2px;
}
.field.field-compact input,
.field.field-compact select,
.field.field-compact textarea,
.field-compact .field-input {
  padding: 6px 10px;
  font-size: 12px;
}

/* Mode clair : l'icone native noire est juste assombrie, pas inversee */
body.theme-light input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-light input[type="time"]::-webkit-calendar-picker-indicator,
body.theme-light input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.35);
}