/**
 * Elite Tactician Design System - Forms v3.1
 * Boxed inputs: white fill, 1px hairline border, navy focus ring
 *
 * CANONICAL input definition — earlier layers (forms.css,
 * universal-components/forms.css, components.css, per-page CSS)
 * are overridden by this file, which loads last in every layout.
 *
 * Version: 3.1
 * Date: July 2026
 */

/* =========================================
   BASE INPUT - Boxed, subtle fill
   ========================================= */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    background-color: var(--et-surface-container-lowest);
    border: 1px solid var(--et-input-border);
    border-radius: var(--radius-lg, 0.5rem);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

/* Focus state - navy border + soft ring */
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--et-primary);
    box-shadow: var(--state-focus-ring-input);
    background-color: var(--et-surface-container-lowest);
}

/* Hover state */
.form-input:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled),
.form-textarea:hover:not(:focus):not(:disabled),
input[type="text"]:hover:not(:focus):not(:disabled),
input[type="email"]:hover:not(:focus):not(:disabled),
input[type="password"]:hover:not(:focus):not(:disabled),
input[type="number"]:hover:not(:focus):not(:disabled),
input[type="tel"]:hover:not(:focus):not(:disabled),
input[type="url"]:hover:not(:focus):not(:disabled),
input[type="search"]:hover:not(:focus):not(:disabled),
input[type="date"]:hover:not(:focus):not(:disabled),
input[type="time"]:hover:not(:focus):not(:disabled),
input[type="datetime-local"]:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--et-input-border-hover);
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--et-surface-container);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* =========================================
   LABELS - Body font, muted
   ========================================= */
.form-label {
    font-family: var(--font-body);
    color: var(--et-on-surface-variant);
}

/* =========================================
   VALIDATION STATES
   ========================================= */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid,
.is-valid .form-input,
.is-valid .form-select,
.is-valid .form-textarea {
    border-color: var(--et-success);
}

.form-input.is-valid:focus,
.form-select.is-valid:focus,
.form-textarea.is-valid:focus,
.is-valid .form-input:focus,
.is-valid .form-select:focus,
.is-valid .form-textarea:focus {
    border-color: var(--et-success);
    box-shadow: var(--state-focus-ring-success);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
.is-invalid .form-input,
.is-invalid .form-select,
.is-invalid .form-textarea {
    border-color: var(--et-error);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus,
.is-invalid .form-input:focus,
.is-invalid .form-select:focus,
.is-invalid .form-textarea:focus {
    border-color: var(--et-error);
    box-shadow: var(--state-focus-ring-error);
}

/* =========================================
   CHECKBOX & RADIO - Crimson checked state
   ========================================= */
.form-check-input:checked {
    background-color: var(--et-secondary);
    border-color: var(--et-secondary);
}

.form-check-input:focus {
    border-color: var(--et-secondary);
    box-shadow: 0 0 0 3px rgba(182, 21, 46, 0.15);
}

/* =========================================
   TOGGLE SWITCH - Crimson checked
   ========================================= */
.form-switch-input:checked {
    background-color: var(--et-secondary);
}

.form-switch-input:focus {
    box-shadow: 0 0 0 3px rgba(182, 21, 46, 0.15);
}

/* =========================================
   FIELDSET - Ghost border
   ========================================= */
.form-fieldset {
    border: var(--ghost-border);
}

/* =========================================
   INPUT ADDON - Surface hierarchy
   ========================================= */
.input-addon {
    background: var(--et-surface-container-low);
    border: 1px solid var(--et-input-border);
}

/* iOS Safari zoom-on-focus prevention: 16px input floor on mobile.
   !important is required — later-loaded section CSS (vault/perform
   descendant selectors) and Tailwind text-sm utilities on bare inputs
   otherwise win. Non-text input types excluded to preserve control chrome. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]),
  select,
  textarea,
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
  }

  /* iOS date/time inputs have an intrinsic min-width (overflow narrow
     columns), collapse in height when empty, and centre their value. */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    min-width: 0;
    max-width: 100%;
    min-height: 2.75rem;
    text-align: left;
  }

  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
  }
}