/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE REQUIRED-FIELD REFUSAL — W-ZORUNLU-ALAN-KALAN (owner 2026-09-25: "tusa basinca coktan kirmizi
   olup oraya gelmeli ... bootstrap'in required'i gibi" + "popup tarzi ... ustte").
   The appearance half of `wwwroot/js/required-field.js`: the red box (the popup is tm-toast.css).

   🔴 NO COLOUR IS WRITTEN HERE. The file is linked by the agency portal, the storefront and the
   supplier portal, and each already owns a "bad" tone in its own vocabulary: the portals read
   `--ag-bad-*` (travelmean-tokens.css), the storefront `--tm-tone-bad*` (storefront-base.css), the
   storefront account pages (_ConsumerLayout, Bootstrap only) Bootstrap's `--bs-danger-*`. The
   `--rq-*` names below alias whichever the shell defines — a var() fallback is taken only when the
   first name is not defined at all — and they are declared ON the elements that use them, not on
   :root, because the storefront declares its own tokens below :root. Dark mode follows for free.
   The admin shell links this file for ONE rule (the select2 face below): its own fields already
   paint `.is-invalid` (Bootstrap) and its popup is appToast.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:is(.sf-formfield, .sf-field, .sf-consent-item, .sp-body) :is(input, select, textarea)[aria-invalid="true"] {
    --rq-bad-ink: var(--ag-bad-ink, var(--tm-tone-bad, var(--bs-danger-text-emphasis)));
    --rq-bad-bg: var(--ag-bad-bg, var(--tm-tone-bad-bg, var(--bs-danger-bg-subtle)));
    --rq-bad-rule: var(--ag-bad-rule, var(--tm-tone-bad, var(--bs-danger-border-subtle)));
}

/* The storefront's field (`.sf-formfield input`, 0,1,1) has no error appearance of its own; this is
   it — the border and a one-pixel inner ring in the shell's bad tone, the Bootstrap `.is-invalid`
   shape. The supplier portal's Bootstrap fields keep Bootstrap's own `.is-invalid`. */
:is(.sf-formfield, .sf-field) :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--rq-bad-rule);
    box-shadow: 0 0 0 1px var(--rq-bad-rule);
}

/* The supplier portal's own field atoms (.sp-input / .sp-select) have no error appearance either;
   the same border + ring, in the portal's bad tone (travelmean-tokens.css --ag-bad-rule). */
.sp-body :is(.sp-input, .sp-select)[aria-invalid="true"] {
    border-color: var(--rq-bad-rule);
    box-shadow: 0 0 0 1px var(--rq-bad-rule);
}

/* W-GOZ4-DUZELT (owner 2026-09-26: "zorunlu alanlari duzgun isaretledigine emin ol") - THE STOREFRONT
   SEARCH BOX. `.sf-field` is the control's only boundary (storefront-base.css: the input and select
   inside carry `border: 0`), and the destination's control is a hidden <select> behind a combobox
   face (storefront-combobox.js). Measured on deploy-32: the toast said "the fields marked in red" and
   the box stayed #e6eaf0 - the red went to a control nobody sees. So the BOX turns red whenever
   anything inside it is refused. `!important` on the border colour only: every skin re-declares the
   resting border at up to (0,4,1) (sf-vitrin.css home card), and a refusal must outrank all of them
   without this file knowing each skin's selector. */
.sf-field:has(.is-invalid, [aria-invalid="true"]) {
    --rq-bad-rule: var(--ag-bad-rule, var(--tm-tone-bad, var(--bs-danger-border-subtle)));
    border-color: var(--rq-bad-rule) !important;
    box-shadow: 0 0 0 1px var(--rq-bad-rule);
}
/* ...and when the caret is sent into it, the skin's brand focus halo (measured: a 3px BLUE ring
   around the red edge on the home card) takes the bad tone instead - one colour per refusal. */
.sf-field:has(.is-invalid, [aria-invalid="true"]):focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rq-bad-rule) 22%, transparent) !important;
}
.sf-field :is(input, select, textarea)[aria-invalid="true"],
.sf-field .sf-combo .is-invalid {
    box-shadow: none;
}

/* The focused refused box keeps ONE colour. Measured (live, 1440): the storefront's keyboard ring is a
   3px BLUE outline and it sat outside the red border of the very field the caret was sent to. */
:is(.sf-formfield, .sf-field) :is(input, select, textarea)[aria-invalid="true"]:focus {
    outline-color: var(--rq-bad-rule);
}

/* The admin shell (and the portals' Bootstrap fields): the ring is painted from the declared seam
   --tm-focus-ring (travelmean-autofill.css), and a custom property resolves on the ELEMENT - so the
   refused field paints its own ring in the portals' bad ink (travelmean-tokens.css :root, #991b1b light /
   #fca5a5 dark), the A732 answer the agency shell already gives its own invalid fields. Measured before:
   a 3px TEAL ring around the red border of the focused refused box. */
:is(.form-control, .form-select).is-invalid:focus:is(:valid, :invalid, :read-only):not(:is(:-webkit-autofill)) {
    box-shadow: 0 0 0 3px var(--ag-bad-ink, var(--bs-form-invalid-border-color)) !important;
}

/* A consent box that must be ticked: the box itself, ringed. */
.sf-consent-item input[type="checkbox"][aria-invalid="true"] {
    outline: 2px solid var(--rq-bad-rule);
    outline-offset: 2px;
}

/* The popup at the top is THE corner toast (tm-toast.css / tm-toast.js, W-UYARI-TOAST, A1059):
   the `rq-toast` this file drew for the shells without appToast was a second toast; it is gone. */

/* A <select> a widget replaced (the admin shell's select2): the hidden control carries `.is-invalid`,
   the face the reader sees does not paint it by itself. required-field.js mirrors the class onto the
   face; this is the Bootstrap `.is-invalid` shape on it, in Bootstrap's own invalid token. */
.select2-container .select2-selection.is-invalid {
    border-color: var(--bs-form-invalid-border-color, var(--bs-danger));
    box-shadow: 0 0 0 1px var(--bs-form-invalid-border-color, var(--bs-danger));
}

/* W-UYARI-TOAST (A1059, owner 2026-09-26: "zorunlu alanlari duzgun isaretledigine emin ol") - THE MARK
   BEFORE THE REFUSAL: required-field.js marks the label of every asked control; this draws the
   design's red " *" after it (the agency payment designs, otel-odeme-tasarim.html and its siblings: .xfl .req::after), in the
   shell's own bad ink (no colour written here, as above). */
.rq-required-label::after {
    content: " *";
    color: var(--ag-bad-ink, var(--tm-tone-bad, var(--bs-danger, currentColor)));
    font-weight: 600;
}