/*
 * Casey unified controls
 *
 * The search control is the visual reference for every boxed control. Native
 * elements retain their platform behaviour; this layer owns only their Casey
 * shell, density and interaction states.
 */

/* Browser autofill paints an !important background over the normal field fill.
 * An inset fill preserves Casey's theme without disabling browser suggestions.
 * Keep this in a layer so the important fill survives unlayered focus rules
 * that remove box shadows; keyboard focus is drawn separately with outlines.
 */
@layer components {
    :is(input, textarea)::placeholder {
        color: var(--casey-text-secondary);
        opacity: 1;
    }

    @media (forced-colors: none) {
        :is(input, textarea):is(:autofill, :-webkit-autofill) {
            box-shadow: inset 0 0 0 1000px var(--casey-autofill-bg, var(--casey-input-bg)) !important;
            -webkit-text-fill-color: var(--casey-text);
            caret-color: var(--casey-text);
        }

        :is(input, textarea):is(:autofill, :-webkit-autofill)[readonly] {
            --casey-autofill-bg: var(--casey-surface-raised);
        }

        /* A text-fill override also affects selected autofilled text. Set both
         * foreground properties so selection remains legible in either theme.
         */
        :is(input, textarea)::selection {
            background-color: var(--casey-blue);
            color: var(--casey-on-accent);
            -webkit-text-fill-color: var(--casey-on-accent);
        }
    }

    @media (forced-colors: active) {
        :is(input, textarea)::selection {
            background-color: Highlight;
            color: HighlightText;
            -webkit-text-fill-color: HighlightText;
        }
    }
}

:is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea) {
        box-sizing: border-box;
        min-height: var(--casey-control-height);
        padding: 0.55rem 0.6rem;
        border: 1px solid var(--casey-control-border-strong);
        border-radius: var(--casey-radius-sm);
        background: var(--casey-input-bg);
        box-shadow: none;
        color: var(--casey-text);
        font-size: 0.875rem;
        line-height: 1.25;
        transition:
            border-color 150ms ease,
            background 150ms ease,
            box-shadow 180ms ease;
    }

/* Legacy native fields without Bootstrap classes use the same shell. */
:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    select:not(.form-select),
    textarea:not(.form-control)):not(.casey-search-box input):not(.casey-global-search input) {
    box-sizing: border-box;
    min-height: var(--casey-control-height);
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--casey-control-border-strong);
    border-radius: var(--casey-radius-sm);
    background-color: var(--casey-input-bg);
    box-shadow: none;
    color: var(--casey-text);
    font-size: 0.875rem;
    line-height: 1.25;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 180ms ease;
}

:where(select:not(.form-select), textarea:not(.form-control),
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])):not(.casey-search-box input):not(.casey-global-search input):hover:not(:disabled):not([readonly]) {
    border-color: var(--casey-control-border-strong);
    background-color: var(--casey-input-bg);
    box-shadow: none;
}

:where(select:not(.form-select), textarea:not(.form-control),
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])):not(.casey-search-box input):not(.casey-global-search input):focus-visible {
    border-color: var(--casey-focus);
    background-color: var(--casey-input-bg);
    outline: var(--casey-focus-ring-width) solid var(--casey-focus);
    outline-offset: var(--casey-focus-ring-offset);
    box-shadow: none;
}

:where(select:not(.form-select), textarea:not(.form-control),
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])):not(.casey-search-box input):not(.casey-global-search input)[readonly] {
    background: var(--casey-surface-raised);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--casey-text) 6%, transparent);
}

:where(select:not(.form-select), textarea:not(.form-control),
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])):not(.casey-search-box input):not(.casey-global-search input):is(.is-invalid, [aria-invalid="true"]) {
    border-color: var(--casey-error);
}

:where(select:not(.form-select), textarea:not(.form-control),
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])):not(.casey-search-box input):not(.casey-global-search input):disabled {
    opacity: 0.58;
    box-shadow: none;
    cursor: not-allowed;
}

:where(textarea:not(.form-control)) {
    height: auto;
    min-height: 6rem;
    padding-block: 0.55rem;
    resize: vertical;
}

    :is(.form-control, .form-select):not(textarea):not([multiple]) {
        min-height: var(--casey-control-height);
    }

    :is(.form-control-sm, .form-select-sm) {
        min-height: var(--casey-control-compact-height);
        padding-block: 0.125rem;
        padding-inline: var(--casey-control-compact-padding-inline);
        border-radius: var(--casey-control-compact-radius);
        font-size: 0.8125rem;
    }

    :is(textarea.form-control, .casey-field textarea) {
        min-height: 6rem;
        padding-block: 0.55rem;
        resize: vertical;
    }

    :is(.form-select[multiple], .form-select[size]:not([size="1"])) {
        height: auto;
        min-height: 6rem;
        padding-block: 0.4rem;
    }

    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea):hover:not(:disabled):not([readonly]) {
        border-color: var(--casey-control-border-strong);
        background-color: var(--casey-input-bg);
        box-shadow: none;
    }

    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea):focus-visible {
        border-color: var(--casey-focus);
        background-color: var(--casey-input-bg);
        outline: var(--casey-focus-ring-width) solid var(--casey-focus);
        outline-offset: var(--casey-focus-ring-offset);
        box-shadow: none;
    }

    :is(.form-control, .form-select, .casey-control)[aria-expanded="true"],
    :is(.form-control, .form-select, .casey-control)[aria-pressed="true"],
    :is(.form-control, .form-select, .casey-control)[aria-selected="true"] {
        background-color: var(--casey-input-bg);
    }

    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea)[readonly] {
        background: var(--casey-surface-raised);
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--casey-text) 6%, transparent);
        color: var(--casey-text);
        cursor: text;
    }

    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea).is-invalid,
    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea)[aria-invalid="true"] {
        border-color: var(--casey-error);
    }

    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea).is-invalid:focus-visible,
    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea)[aria-invalid="true"]:focus-visible {
        border-color: var(--casey-error);
        background-color: var(--casey-input-bg);
        outline: var(--casey-focus-ring-width) solid var(--casey-focus);
        outline-offset: var(--casey-focus-ring-offset);
        box-shadow: none;
    }

    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea):disabled,
    :is(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea)[aria-disabled="true"] {
        opacity: 0.58;
        box-shadow: none;
        cursor: not-allowed;
    }

    :is(select:not([multiple]), .form-select:not([multiple])) {
        appearance: none;
        padding-right: 2rem;
        background-image:
            var(--casey-control-chevron-image),
            linear-gradient(var(--casey-input-bg), var(--casey-input-bg));
        background-position: right 0.6rem center, 0 0;
        background-repeat: no-repeat, no-repeat;
        background-size: 0.75rem 0.75rem, 100% 100%;
    }

    :is(select:not([multiple]), .form-select:not([multiple])):hover:not(:disabled) {
        background-image:
            var(--casey-control-chevron-image),
            linear-gradient(var(--casey-input-bg), var(--casey-input-bg));
        background-position: right 0.6rem center, 0 0;
        background-repeat: no-repeat, no-repeat;
        background-size: 0.75rem 0.75rem, 100% 100%;
    }

    :is(select:not([multiple]), .form-select:not([multiple])):focus {
        background-image:
            var(--casey-control-chevron-image),
            linear-gradient(var(--casey-input-bg), var(--casey-input-bg));
        background-position: right 0.6rem center, 0 0;
        background-repeat: no-repeat, no-repeat;
        background-size: 0.75rem 0.75rem, 100% 100%;
    }

    .casey-control-chevron {
        display: inline-block;
        width: 0.75rem;
        height: 0.75rem;
        flex: 0 0 0.75rem;
        background-image: var(--casey-control-chevron-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .dropdown-toggle-split::after {
        width: 0.75rem;
        height: 0.75rem;
        margin: 0;
        border: 0;
        background-image: var(--casey-control-chevron-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        vertical-align: middle;
    }

    .form-control[type="file"] {
        padding: 0;
        overflow: hidden;
    }

    .form-control[type="file"]::file-selector-button {
        height: calc(var(--casey-control-height) - 2px);
        margin: 0 0.6rem 0 0;
        padding: 0 var(--casey-control-padding-inline);
        border: 0;
        border-right: 1px solid var(--casey-border);
        background: color-mix(in srgb, var(--casey-blue) 6%, var(--casey-surface-raised));
        color: var(--casey-text);
        font: inherit;
        cursor: pointer;
    }

    .form-control-sm[type="file"]::file-selector-button {
        height: calc(var(--casey-control-compact-height) - 2px);
        padding-inline: var(--casey-control-compact-padding-inline);
    }

    :where(.btn:not(.btn-link), .casey-action-plate) {
        display: inline-flex;
        min-height: var(--casey-button-tall-height);
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: var(--casey-button-primary-padding-block) var(--casey-button-primary-padding-inline);
        border-radius: var(--casey-radius-control);
        box-shadow: none;
        font-size: var(--casey-button-primary-font-size);
        font-weight: 720;
        line-height: 1.1;
        white-space: nowrap;
        transition:
            border-color 150ms ease,
            background 150ms ease,
            box-shadow 180ms ease,
            color 150ms ease;
    }

    .btn-sm:not(.btn-link),
    .casey-button-primary-compact,
    .casey-button-secondary-compact {
        min-height: var(--casey-button-compact-height);
        gap: 0.45rem;
        padding: var(--casey-button-secondary-padding-block) var(--casey-button-secondary-padding-inline);
        border-radius: var(--casey-control-compact-radius);
        font-size: var(--casey-button-secondary-font-size);
    }

    .casey-button-primary-tall,
    .casey-button-secondary-tall,
    .casey-page-heading-actions .btn:not(.btn-link) {
        min-height: var(--casey-button-tall-height);
    }

    .casey-action-plate {
        display: inline-grid;
        width: var(--casey-button-tall-height);
        min-width: var(--casey-button-tall-height);
        height: var(--casey-button-tall-height);
        padding: 0;
        border: 1px solid var(--casey-button-secondary-border);
        place-items: center;
    }

    .casey-button-control-peer,
    .input-group > .btn {
        align-self: stretch;
        min-height: 0;
    }

    :where(.btn-secondary, .btn-light, .btn-outline-secondary, .casey-button-secondary-tall, .casey-button-secondary-compact, .casey-action-plate) {
        border-color: var(--casey-button-secondary-border);
        background: var(--casey-button-secondary-bg);
        color: var(--casey-button-secondary-label);
    }

    :where(.btn-secondary, .btn-light, .btn-outline-secondary, .casey-button-secondary-tall, .casey-button-secondary-compact, .casey-action-plate):hover:not(:disabled) {
        border-color: var(--casey-button-secondary-hover-border);
        background: var(--casey-button-secondary-hover-bg);
        box-shadow: none;
        color: var(--casey-button-secondary-label);
    }

    :where(.btn-primary, .casey-button-primary-tall, .casey-button-primary-compact) {
        border-color: var(--casey-primary-button-bg);
        background: var(--casey-primary-button-bg);
        box-shadow: none;
        color: var(--casey-button-primary-label);
    }

    :where(.btn-primary, .casey-button-primary-tall, .casey-button-primary-compact):hover:not(:disabled) {
        border-color: var(--casey-primary-button-hover-bg);
        background: var(--casey-primary-button-hover-bg);
        box-shadow: none;
        color: var(--casey-button-primary-label);
    }

    :where(.btn-danger, .btn-outline-danger) {
        border-color: var(--casey-error);
        background:
            linear-gradient(115deg, var(--casey-input-bg), var(--casey-surface-raised));
        color: var(--casey-error);
    }

    :where(.btn-danger, .btn-outline-danger):hover:not(:disabled),
    :where(.btn-danger, .btn-outline-danger):active:not(:disabled) {
        border-color: var(--casey-error);
        background: color-mix(in srgb, var(--casey-error) 10%, var(--casey-input-bg));
        box-shadow: none;
        color: var(--casey-error);
    }

    :where(.btn, .casey-action-plate)[aria-expanded="true"],
    :where(.btn, .casey-action-plate)[aria-pressed="true"] {
        border-color: var(--casey-button-secondary-hover-border);
        background: var(--casey-button-secondary-hover-bg);
        box-shadow: none;
    }

    :where(.btn-primary, .casey-button-primary-tall, .casey-button-primary-compact):is([aria-expanded="true"], [aria-pressed="true"]) {
        border-color: var(--casey-primary-button-active-bg);
        background: var(--casey-primary-button-active-bg);
        color: var(--casey-button-primary-label);
    }

    .btn-outline-primary:is(:hover, :focus-visible, :active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
        border-color: var(--casey-primary-button-hover-bg);
        background: var(--casey-primary-button-hover-bg);
        color: var(--casey-button-primary-label);
    }

    :where(.btn, .casey-action-plate):disabled,
    :where(.btn, .casey-action-plate)[aria-disabled="true"] {
        opacity: 0.58;
        box-shadow: none;
        cursor: not-allowed;
    }

    :where(input[type="checkbox"], input[type="radio"]):not(.casey-toggle-input):not([role="switch"]) {
        box-sizing: border-box;
        width: 14px;
        height: 14px;
        margin: 0;
        appearance: none;
        border: 1px solid var(--casey-checkbox-border);
        background:
            linear-gradient(115deg, var(--casey-checkbox-bg), var(--casey-surface-raised));
        box-shadow: var(--casey-control-shadow);
        cursor: pointer;
        transition:
            border-color 150ms ease,
            background 150ms ease,
            box-shadow 180ms ease;
    }

    input[type="checkbox"]:not(.casey-toggle-input):not([role="switch"]) {
        border-radius: 4px;
    }

    input[type="radio"]:not(.casey-toggle-input):not([role="switch"]) {
        border-radius: 50%;
    }

    :where(input[type="checkbox"], input[type="radio"]):not(.casey-toggle-input):not([role="switch"]):hover:not(:disabled) {
        border-color: var(--casey-blue);
        box-shadow: var(--casey-control-hover-shadow);
    }

    input[type="checkbox"]:not(.casey-toggle-input):not([role="switch"]):checked {
        border-color: var(--casey-blue);
        background-color: var(--casey-blue);
        background-image: var(--casey-control-checkmark-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10px 10px;
        box-shadow: 0 0 0 1px var(--casey-checkbox-checked-outline);
    }

    input[type="radio"]:not(.casey-toggle-input):not([role="switch"]):checked {
        border: 2px solid var(--casey-blue);
        background:
            radial-gradient(circle, var(--casey-on-accent) 0 2.5px, transparent 3px),
            var(--casey-blue);
        box-shadow: 0 0 0 1px var(--casey-checkbox-checked-outline);
    }

    :where(input[type="checkbox"], input[type="radio"]):not(.casey-toggle-input):not([role="switch"]):focus-visible {
        border-color: var(--casey-blue);
        outline: var(--casey-focus-ring-width) solid var(--casey-focus);
        outline-offset: var(--casey-focus-ring-offset);
        box-shadow: none !important;
    }

    :where(input[type="checkbox"], input[type="radio"]):not(.casey-toggle-input):not([role="switch"]):disabled {
        opacity: 0.58;
        cursor: not-allowed;
    }

    .form-switch .form-check-input,
    .form-check-input[role="switch"] {
        position: relative;
        width: 32px;
        height: 20px;
        margin: 0;
        appearance: none;
        border: 0;
        border-radius: 999px;
        background: var(--casey-control-border-strong);
        background-image: none;
        box-shadow: inset 0 1px 3px rgba(15, 31, 54, .2);
        cursor: pointer;
        transition: background 150ms ease, box-shadow 180ms ease;
    }

    .form-switch .form-check-input::after,
    .form-check-input[role="switch"]::after {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--casey-panel-solid);
        box-shadow: 0 1px 3px rgba(15, 31, 54, .24);
        content: "";
        transition: transform 150ms ease;
    }

    .form-switch .form-check-input:checked,
    .form-check-input[role="switch"]:checked {
        background: var(--casey-blue);
    }

    .form-switch .form-check-input:checked::after,
    .form-check-input[role="switch"]:checked::after {
        transform: translateX(12px);
        background: var(--casey-on-accent);
    }

    :where(.form-switch-sm, .casey-switch-compact) .form-check-input,
    .form-check-input.casey-switch-compact {
        width: 26px;
        height: 14px;
    }

    :where(.form-switch-sm, .casey-switch-compact) .form-check-input::after,
    .form-check-input.casey-switch-compact::after {
        width: 10px;
        height: 10px;
    }

    :where(.form-switch-sm, .casey-switch-compact) .form-check-input:checked::after,
    .form-check-input.casey-switch-compact:checked::after {
        transform: translateX(12px);
    }

    .casey-toggle-slider {
        width: 32px;
        height: 20px;
        border-radius: 999px;
        background: var(--casey-control-border-strong);
    }

    .casey-toggle-input:checked + .casey-toggle-slider {
        background: var(--casey-blue);
    }

    .casey-toggle-slider::after {
        background: var(--casey-panel-solid);
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
    }

    .casey-toggle-input:checked + .casey-toggle-slider::after {
        transform: translateX(12px);
        background: var(--casey-on-accent);
    }

    .casey-toggle-compact .casey-toggle-slider {
        width: 26px;
        height: 14px;
    }

    .casey-toggle-compact .casey-toggle-slider::after {
        width: 10px;
        height: 10px;
    }

    .casey-toggle-compact .casey-toggle-input:checked + .casey-toggle-slider::after {
        transform: translateX(12px);
    }

.casey-pill {
    border: 1px solid currentColor;
}

.casey-priority {
    --casey-priority-outline: color-mix(
        in srgb,
        var(--pill-color, var(--casey-blue)) 72%,
        var(--casey-text) 28%);
    border: 1px solid var(--casey-priority-outline);
    background: color-mix(in srgb, var(--pill-color, var(--casey-blue)) 12%, var(--casey-panel-solid));
    color: var(--casey-priority-outline);
}

@media (prefers-reduced-motion: reduce) {
    :where(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea, .btn, .casey-action-plate, .form-check-input, .casey-toggle-slider, .casey-toggle-slider::after) {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    :where(.form-control, .form-select, .casey-control, .casey-field input, .casey-field textarea):focus,
    :where(.btn, .casey-action-plate):focus-visible,
    :where(.form-check-input, .casey-toggle-input):focus-visible {
        border-color: Highlight;
        outline: 2px solid Highlight !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }
}