/* Shared application focus policy. The early layer intentionally wins over
   legacy module focus rings, including their unlayered !important rules. */
:root {
    --control-focus-border: color-mix(in srgb, var(--os-color-primary, #5547ed) 60%, var(--os-color-border, #d9dce5));
    --control-focus-brightness: .88;
}
html[data-theme="dark"] { --control-focus-brightness: 1.2; }

@layer sovado-control-focus {
    /* Links and other keyboard targets retain a fine outline by default. */
    :focus-visible:not([tabindex="-1"]) {
        outline: 1px solid var(--control-focus-border) !important;
        outline-offset: 2px !important;
    }
    [tabindex="-1"]:focus { outline: none !important; }

    /* Input focus uses the existing border, without a second outer halo. */
    :is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"], [type="range"], [type="color"]), select, textarea):focus {
        border-color: var(--control-focus-border) !important;
        outline: none !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
    }
    :is(input, select, textarea)[aria-invalid="true"]:focus {
        border-color: var(--os-color-danger, #c23b36) !important;
    }
    :is([contenteditable="true"], [contenteditable="plaintext-only"]):focus {
        outline: none !important;
        box-shadow: inset 0 -1px var(--control-focus-border) !important;
    }

    /* Composite inputs own their border; borderless inner inputs stay borderless. */
    :is(
        .dashboard-search, .agenda-search, .booking-search, .agenda-create-customer-search,
        .customers-search, .catalog-search, .catalog-directory-search, .catalog-directory-filter,
        .service-organizer-search, .product-organizer-search, .apps-directory-search,
        .support-search, .marketing-directory-search, .giftcards-search, .giftcards-status-filter,
        .pos-search, .pos-list-search, .pos-customer-search, .pos-session-money-input,
        .pos-sale-meta label, .setup-price-input, .online-domain-change-field, .public-phone-control
    ):focus-within {
        border-color: var(--control-focus-border) !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Action controls use a tone change for keyboard focus, not a selection ring. */
    :is(
        button, [role="button"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], summary,
        input[type="button"], input[type="submit"], input[type="reset"], input[type="image"],
        input[type="checkbox"], input[type="radio"],
        a.btn, a.os-btn, a.button, a[class*="-button"], a[class*="-btn"],
        .addon-primary-action, .platform-modal-close, [data-addon-close], [data-close-dialog]
    ):focus {
        outline: none !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
    }
    :is(
        button, [role="button"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], summary,
        input[type="button"], input[type="submit"], input[type="reset"], input[type="image"],
        input[type="checkbox"], input[type="radio"],
        a.btn, a.os-btn, a.button, a[class*="-button"], a[class*="-btn"], .addon-primary-action
    ):focus-visible {
        filter: brightness(var(--control-focus-brightness)) !important;
    }
    :is(.platform-modal-close, [data-addon-close], [data-close-dialog], button[aria-label*="sluiten" i], button[data-modal-close-control]):focus-visible {
        border-color: var(--os-color-border, #d9dce5) !important;
    }

    /* Custom choices often draw their ring on a sibling or surrounding card. */
    :is(input[type="checkbox"], input[type="radio"]):focus-visible + :is(span, i, div),
    .customer-inline-preference > input:focus-visible ~ .customer-inline-toggle,
    .setup-plan-choice:focus-visible + .setup-plan-card-inner,
    .setup-industry-card > input:focus-visible + .setup-industry-option .setup-industry-icon,
    label:has(:is(input[type="checkbox"], input[type="radio"]):focus-visible),
    :is(
        .os-choice-card, .settings-theme-option, .settings-choice, .booking-choice-card,
        .loyalty-choice, .product-wizard-stock-toggle, .product-section-stock-toggle,
        .agenda-repeat-toggle, .ai-voice-card, .ai-style-card, .ai-number-choice,
        .ai-test-scenario, .ai-transfer-rule, .ai-capability-card, .ww-choice, .ww-page-choice,
        .campaign-preset-card, .nb-format-color
    ):focus-within {
        outline: none !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
    }
    :is(input[type="checkbox"], input[type="radio"]):focus-visible + :is(span, i, div),
    .customer-inline-preference > input:focus-visible ~ .customer-inline-toggle {
        filter: brightness(var(--control-focus-brightness)) !important;
    }

    /* Respect operating-system high-contrast colors while keeping the fine cue. */
    @media (forced-colors: active) {
        :is(input, select, textarea):focus { border-color: Highlight !important; }
        :is(button, [role="button"], summary, a.btn):focus-visible {
            color: HighlightText !important;
            background: Highlight !important;
        }
    }
}