/* ==========================================================================
   Material Design Form Primitives
   Shared form styles for all Material-rendered Django forms.
   Loads after iata-tokens.css and material-theme.css.
   ========================================================================== */

/* --- Form layout --- */

.iata-form {
    display: flex;
    flex-direction: column;
    gap: var(--iata-gap-l);
}

.iata-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--iata-gap-xs);
}

.iata-form__field > md-outlined-text-field,
.iata-form__field > md-outlined-select,
.iata-form__field > md-filled-text-field,
.iata-form__field > md-filled-select {
    width: 100%;
}

/* The resting outline, in one place. Material paints an outlined field's
   outline only on hover and focus, so every control that does not get this
   block renders with a 0px border and no ground — which is what the OORR
   questionnaire measured before `registry.css` grew its own copy of the list.
   The copy is gone; the questionnaire's selectors are named here instead.
   It stays a rule rather than moving to `:root`, unlike the focus ring in
   `material-theme.css`: promoting it app-wide would hand an outline to the 14
   templates that hand-roll a control and today deliberately have none. That is
   a design change, not this one. */
.iata-form__field > md-outlined-text-field,
.iata-form__field > md-outlined-select,
.ssp-questionnaire-stack--oorr md-outlined-text-field.iata-form-field,
.ssp-questionnaire-stack--oorr md-outlined-select.iata-form-field {
    border-radius: var(--iata-radius-form);

    --md-outlined-text-field-container-shape: var(--iata-radius-form);
    --md-outlined-text-field-outline-color: var(--iata-grey-95);
    --md-outlined-text-field-hover-outline-color: var(--iata-grey-80);
    --md-outlined-text-field-outline-width: 1px;
    --md-outlined-text-field-hover-outline-width: 1px;

    --md-outlined-select-text-field-container-shape: var(--iata-radius-form);
    --md-outlined-select-text-field-container-color: transparent;
    --md-outlined-select-text-field-outline-color: var(--iata-grey-95);
    --md-outlined-select-text-field-hover-outline-color: var(--iata-grey-80);
    --md-outlined-select-text-field-outline-width: 1px;
    --md-outlined-select-text-field-hover-outline-width: 1px;
}

/* --- Field surface (Figma "UI 2026", ARMIP-157) ---
   Grey02 ground inside the outline above, label and supporting text in Grey06,
   and the label switching to brand blue on focus. Material has no
   container-colour token for an outlined field, so the fill is painted on the
   host; that only lines up because `_field_text.html` moved the supporting and
   error lines out of the component (see the comment there). The questionnaire
   shares the outline but not this: its frame fills white, not Grey02, and it
   leaves the label and input colours to Material. */
.iata-form__field > md-outlined-text-field,
.iata-form__field > md-outlined-select {
    background: var(--iata-grey-99);

    --md-outlined-text-field-label-text-color: var(--iata-grey-60);
    --md-outlined-text-field-hover-label-text-color: var(--iata-grey-60);
    --md-outlined-text-field-focus-label-text-color: var(--iata-focus-color);
    --md-outlined-text-field-input-text-color: var(--iata-grey-40);

    --md-outlined-select-text-field-label-text-color: var(--iata-grey-60);
    --md-outlined-select-text-field-hover-label-text-color: var(--iata-grey-60);
    --md-outlined-select-text-field-focus-label-text-color: var(--iata-focus-color);
    --md-outlined-select-text-field-input-text-color: var(--iata-grey-40);
}

/* An errored field keeps the fill and swaps the outline, rather than Material's
   default of an error-coloured everything. */
.iata-form__field > md-outlined-text-field[error],
.iata-form__field > md-outlined-select[error] {
    --md-outlined-text-field-outline-color: var(--iata-error);
    --md-outlined-text-field-hover-outline-color: var(--iata-error);
    --md-outlined-select-text-field-outline-color: var(--iata-error);
    --md-outlined-select-text-field-hover-outline-color: var(--iata-error);
}

/* A dropdown is sized by its content, not by the card it sits on. Same intent as
   `.iata-select--compact` below, for a field that keeps the outlined surface
   (ARMIP-195: Select Company on the admin user page). */
.iata-form__field--auto {
    align-self: flex-start;
}

.iata-form__field--auto > md-outlined-select,
.iata-form__field--auto > md-outlined-text-field {
    width: auto;
    min-width: 320px;
}

/* Material gives these hosts an intrinsic minimum width; inside a table cell
   that makes them overhang the column. */
.iata-table .iata-form__field > md-outlined-text-field,
.iata-table .iata-form__field > md-outlined-select,
.iata-table .iata-form__field > md-filled-text-field,
.iata-table .iata-form__field > md-filled-select {
    min-width: 0;
}

/* Long-form question labels. A Material text field ellipsises its own label to a
   single line inside shadow DOM, so anything wider than the field is unreadable
   and two long questions can render identical text. Set the question here and
   pass the field an aria-label instead. */
.iata-form__field-label {
    display: block;
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    font-weight: var(--iata-txt-weight-medium);
    color: var(--iata-grey-10);
    text-wrap: pretty;
}

/* Required marker. Figma asks for a red asterisk on every required field; this
   covers the labels the app renders itself. The asterisk a Material field draws
   inside its own floating label is a single shadow-DOM text node ("Label*") and
   cannot be coloured separately — see ARMIP-157 evidence README. */
.iata-form__field-required {
    color: var(--iata-error);
    margin-left: 2px;
}

/* --- Checkbox row --- */

.iata-form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--iata-gap-s);
}

/* A flex item shrinks below its intrinsic size by default, so a long label
   squashes the control itself into a sliver. */
.iata-form__checkbox md-checkbox,
.iata-form__radio md-radio {
    flex: 0 0 auto;
}

.iata-form__checkbox label {
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    color: var(--iata-grey-10);
    cursor: pointer;
}

/* --- Radio group --- */

.iata-form__radio-group {
    border: none;
    padding: 0;
    margin: 0;
}

.iata-form__radio-group legend {
    font-size: var(--iata-txt-l-size);
    font-weight: var(--iata-txt-weight-medium);
    line-height: var(--iata-txt-l-line-height);
    margin-bottom: var(--iata-gap-s);
    color: var(--iata-grey-10);
}

.iata-form__radio {
    display: flex;
    align-items: center;
    gap: var(--iata-gap-s);
}

.iata-form__radio + .iata-form__radio {
    margin-top: var(--iata-gap-xs);
}

/* `touch-target="wrapper"` gives the 20px control a 14px block margin, so each
   option occupied a 48px row and the group read as white space (ARMIP-165).
   6px keeps a 32px target — Material's densest radio — over a 20px control. */
.iata-form__radio md-radio {
    margin-block: 6px;
}

/* Matches the 16px used by the checkbox row and field labels — the ARMIP-157
   18px sizing read too large next to the rest of the page (ARMIP-165 sprint
   test feedback). */
.iata-form__radio label {
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    font-weight: var(--iata-txt-weight-regular);
    color: var(--iata-grey-40);
    cursor: pointer;
}

/* --- Error and help text --- */

.iata-form__error {
    display: block;
    font-size: var(--iata-txt-s-size);
    line-height: var(--iata-txt-s-line-height);
    color: var(--iata-error);
}

.iata-form__help {
    display: block;
    font-size: var(--iata-txt-s-size);
    line-height: var(--iata-txt-s-line-height);
    color: var(--iata-grey-60);
}

/* --- Actions row --- */

.iata-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iata-gap-s);
    align-items: center;
    margin-top: var(--iata-gap-m);
}

/* --- Filled fields ---
   Material's default filled container is surface-container-highest (grey-90),
   noticeably darker than the design system's field fill. Figma specs these as
   Tertiary/Grey02 on Corner Radius/4. */

md-filled-text-field,
md-filled-select {
    --md-filled-field-container-color: var(--iata-grey-99);
    --md-filled-text-field-container-color: var(--iata-grey-99);
    --md-filled-text-field-container-shape: var(--iata-radius-form);
    --md-filled-select-text-field-container-color: var(--iata-grey-99);
    --md-filled-select-text-field-container-shape: var(--iata-radius-form);
}

/* A filled field that fills the width it is given rather than sitting at
   Material's intrinsic ~210px. */
.iata-field--block {
    width: 100%;
}

/* --- Compact dropdown ---
   Figma's default select (ARMIP-156): the same Grey02 ground as every other
   filled field, but with no active-indicator underline and short enough to sit
   inside a table cell next to a row of buttons. */

md-filled-select.iata-select--compact {
    /* A dropdown is sized by its content, so it must not be stretched to the
       card width by `.iata-form__field`'s column layout or by a table cell. */
    align-self: flex-start;
    width: auto;
    min-width: 320px;
    --md-filled-select-text-field-active-indicator-height: 0px;
    --md-filled-select-text-field-hover-active-indicator-height: 0px;
    --md-filled-select-text-field-focus-active-indicator-height: 0px;
    --md-filled-select-text-field-hover-state-layer-opacity: 0;
    --md-filled-select-text-field-input-text-size: var(--iata-txt-m-size);
    --md-filled-select-text-field-input-text-line-height: 18px;
    --md-filled-select-text-field-input-text-color: var(--iata-grey-30);
    --md-filled-select-text-field-label-text-size: var(--iata-txt-s-size);
    --md-filled-select-text-field-label-text-line-height: 1rem;
    --md-filled-select-text-field-label-text-color: var(--iata-grey-60);
    --md-filled-field-with-label-top-space: 8px;
    --md-filled-field-with-label-bottom-space: 6px;
    --md-filled-field-top-space: 10px;
    --md-filled-field-bottom-space: 10px;
}

/* Inside a data table the column, not the dropdown, decides the width. */
.iata-table md-filled-select.iata-select--compact {
    width: 100%;
    min-width: 0;
}

/* --- Outlined fields inside a data table (ARMIP-164, Figma 1782-36428) ---
   The Capabilities & Partners Review draws a select and a date field inside
   52px table rows. A label-less outlined field defaults to Material's 56px
   height, which forces the row open and leaves the control looking nothing
   like the frame. Same intent as `.iata-select--compact` above, for the
   outlined pair; scoped to `.iata-table` so the user questionnaire's
   full-height fields are untouched. */
.iata-table .iata-form__field > md-outlined-select,
.iata-table .iata-form__field > md-outlined-text-field {
    --md-outlined-field-top-space: 8px;
    --md-outlined-field-bottom-space: 8px;
    --md-outlined-select-text-field-input-text-size: var(--iata-txt-m-size);
    --md-outlined-select-text-field-input-text-line-height: 18px;
    --md-outlined-text-field-input-text-size: var(--iata-txt-m-size);
    --md-outlined-text-field-input-text-line-height: 18px;
}

/* A switch in a table row is chrome beside 14px text and 24px icons, and MD3's
   default 52x32 track stands taller than either (ARMIP-164 sprint testing:
   "could we make the toggle buttons a bit smaller? They appear oversized
   compared to the other text and icons on the tables"). Every measurement is
   the MD3 default at 0.75, so the handle still centres in the track and the
   selected/pressed growth stays proportional. */
.iata-table td md-switch {
    --md-switch-track-width: 39px;
    --md-switch-track-height: 24px;
    --md-switch-handle-width: 12px;
    --md-switch-handle-height: 12px;
    --md-switch-selected-handle-width: 18px;
    --md-switch-selected-handle-height: 18px;
    --md-switch-pressed-handle-width: 21px;
    --md-switch-pressed-handle-height: 21px;
    --md-switch-state-layer-size: 30px;
    --md-switch-icon-size: 12px;
    --md-switch-selected-icon-size: 12px;
}

/* Text fields that sit alongside those selects lose the underline too, so a
   form reads as one set of controls. */
md-filled-text-field.iata-field--flat {
    --md-filled-text-field-active-indicator-height: 0px;
    --md-filled-text-field-hover-active-indicator-height: 0px;
    --md-filled-text-field-focus-active-indicator-height: 0px;
    --md-filled-text-field-hover-state-layer-opacity: 0;
}

/* A filled field marks focus with a bottom active indicator and nothing else,
   and both rules above switch that indicator off at every height to get Figma's
   flat control -- leaving these two the only fields a keyboard user could land
   on with no visible change at all. Give them the outlined fields' ring.

   An `outline` rather than a border: Material sizes these inside its shadow
   root, so a 2px border on the host adds 4px and shifts the row on focus. An
   outline never takes layout, so it costs nothing either way. The radius has to
   be on the host for the ring to round with the control; the host is
   transparent, so it changes nothing at rest.

   The offset is 0, not the inward `-2px` it started as. Both of these controls
   fill their whole host with an opaque `.background` div inside the shadow root
   (#f2f2f2), and a shadow child paints over the host's own outline — so an
   inset ring measured 2px solid #1e32fa in `getComputedStyle` and drew nothing
   at all. That is the "field has no focused state" the ARMIP-192 review reports
   on Optional Remarks. */
md-filled-select.iata-select--compact:focus-within,
md-filled-text-field.iata-field--flat:focus-within {
    border-radius: var(--iata-radius-form);
    outline: var(--iata-focus-width) solid var(--iata-focus-color);
    outline-offset: 0;
}

@media (max-width: 768px) {
    .iata-form {
        gap: var(--iata-gap-m);
    }
}

/* --------------------------------------------------------------------------
   File picker (main/material/forms/_file_input.html)
   -------------------------------------------------------------------------- */

.iata-file-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--iata-gap-s);
    flex-wrap: wrap;
}

/* Clipped, not display:none -- see the include's comment: a hidden `required`
   input is unfocusable, and Chrome then blocks submit with no visible reason. */
.iata-file-input input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The keyboard lands on the clipped native input, but what is on screen is the
   button beside it, which never receives focus and so never drew a ring.
   `:has()` on the wrapper puts the ring where the user is looking.
   `:focus-visible`, not `:focus`, so clicking Choose file does not leave the
   button ringed afterwards. */
.iata-file-input:has(input[type="file"]:focus-visible) md-outlined-button {
    outline: var(--iata-focus-width) solid var(--iata-focus-color);
    outline-offset: var(--iata-focus-width);
    border-radius: var(--iata-radius-form);
}

.iata-file-input__name {
    color: var(--iata-grey-40);
    font-size: 0.875rem;
}