/*
  ----------------------------------------
  UI Components
  ----------------------------------------
*/

@layer styles {
    /* Buttons
  ---------------------------------- */
    .ui-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--space-sm);
        line-height: 2.2;
        border-radius: var(--rounded);
        border: var(--border) solid var(--white);
        box-shadow: var(--shadow-sm);
        background: var(--white);
        font-weight: 600;
        color: var(--darker);
        transition: all 70ms ease;
        cursor: pointer;
        background: var(--lighter);
        text-decoration: none;
        transition: all 200ms ease;
        margin: 0;

        &:hover {
            filter: brightness(1.1);
            box-shadow: var(--shadow);
        }

        &:active {
            transform: translateY(0.5px);
            box-shadow: none;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &.ui-brand-1 {
            background: var(--brand-1);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-brand-2 {
            background: var(--brand-2);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-brand-3 {
            background: var(--brand-3);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-brand-4 {
            background: var(--brand-4);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-neutral {
            background: var(--midtone);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-info {
            background: var(--info);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-success {
            background: var(--success);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-warning {
            background: var(--warning);
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-error {
            background: var(--error);
            color: var(--white);
            border-color: var(--white);
        }
    }

    /* Buttons mini-round */
    .ui-button-mini-round {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        background: var(--lighter);
        color: var(--brand-1);
        box-shadow: var(--shadow-sm);
        transition: all 250ms ease;

        &:hover {
            background: var(--brand-1);
            color: var(--lighter);
        }
    }

    /* Hamburger Button
  ---------------------------------- */
    .ui-hamburger-button {
        --button-width: 30px;
        --button-height: 24px;
        --line-thickness: 3px;
        --line-color: var(--darker);
        --line-radius: 2px;
        --number-of-spins: 5;
        --duration: 0.15s;
        --focus-color: rgba(0, 0, 0, 0.2);

        position: relative;
        display: block;
        width: var(--button-width);
        height: var(--button-height);
        cursor: pointer;
        outline: none;

        .line-1,
        .line-2,
        .line-3 {
            position: absolute;
            display: block;
            width: 100%;
            height: var(--line-thickness);
            background-color: var(--line-color);
            border-radius: var(--line-radius);
            transition: all var(--duration) ease-in-out;
        }

        .line-2 {
            top: calc(50% - var(--line-thickness) / 2);
        }

        .line-3 {
            bottom: 0;
        }

        /* Hamburger animate */
        [data-ui-hamburger-open-value="true"] & {
            .line-1 {
                transform: translateY(
                        calc(
                            var(--button-height) / 2 - var(--line-thickness) / 2
                        )
                    )
                    rotate(calc(-1 * 45deg * var(--number-of-spins)));
            }
            .line-2 {
                opacity: 0;
            }
            .line-3 {
                transform: translateY(
                        calc(
                            -1 *
                                (
                                    var(--button-height) / 2 -
                                        var(--line-thickness) / 2
                                )
                        )
                    )
                    rotate(calc(45deg * var(--number-of-spins)));
            }
        }
    }

    /* Hamburger Menu
    ---------------------------------- */
    .ui-hamburger-menu {
        position: fixed;
        right: 0;
        top: 4rem;
        bottom: 0;
        z-index: 90;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        transition:
            transform 120ms ease-in-out,
            visibility 0s 120ms;
        transform: translateX(100%);
        overflow-y: auto;
        visibility: hidden;

        /* Show menu when hamburger is open */
        [data-ui-hamburger-open-value="true"] & {
            visibility: visible;
            transform: translateX(0);
            transition:
                transform 120ms ease-in-out,
                visibility 0s 0s;
        }
    }

    /* Avatar
  ---------------------------------- */
    .ui-avatar {
        &[data-size="sm"] {
            --avatar-size: 1.5rem;
            --initials-font-size: 0.7rem;
        }

        /* Medium is the default */
        &[data-size="md"] {
            --avatar-size: 2.5rem;
            --initials-font-size: 1rem;
        }

        &[data-size="lg"] {
            --avatar-size: 7.5rem;
            --initials-font-size: 3rem;
        }

        width: var(--avatar-size);
        height: var(--avatar-size);
        border-radius: 9999px;
        outline: var(--border-lg) solid var(--white);
        background: var(--brand-1);
        color: var(--white);
        overflow: hidden;
        box-shadow: var(--shadow);

        .initials {
            font-size: var(--initials-font-size);
            line-height: 1;
        }
    }

    /* Toast
  ---------------------------------- */
    .ui-toast {
        position: fixed;
        display: flex;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        align-items: center;
        gap: var(--space-xs);
        min-width: 24rem;
        padding: var(--space-sm) var(--space-sm);
        border-radius: var(--rounded);
        box-shadow: var(--shadow);
        background: var(--darker);
        color: var(--light);
        border-left: 6px solid;
        animation: ephemeral 8s both;

        svg {
            flex-shrink: 0;
            border-radius: 50%;
        }

        span {
            flex: 1;
        }

        .ui-toast-close {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 100%;
            width: 1.6rem;
            height: 1.6rem;

            &:hover {
                color: var(--white);
                background-color: var(--black);
            }
        }

        &.ui-toast-success {
            border-left-color: var(--success);

            svg.icon {
                color: var(--success);
            }
        }

        &.ui-toast-error {
            border-left-color: var(--error);

            svg.icon {
                color: var(--error);
            }
        }
    }

    /* Dropdown
  ---------------------------------- */
    .ui-dropdown {
        position: relative;
        display: inline-block;

        menu,
        ul {
            position: absolute;
            top: 100%;
            right: 0;
            z-index: 100;
            min-width: 12rem;
            margin-top: var(--space-2xs);
            padding: var(--space-2xs);
            background: var(--white);
            border-radius: var(--rounded);
            box-shadow: var(--shadow);
            list-style: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition:
                opacity 150ms ease-in-out,
                transform 150ms ease-in-out,
                visibility 0s 150ms;

            li {
                margin: 0;
            }

            a,
            button {
                display: flex;
                align-items: center;
                gap: var(--space-2xs);
                width: 100%;
                padding: var(--space-2xs) var(--space-xs);
                border-radius: var(--rounded-sm);
                text-decoration: none;
                color: var(--darker);
                background: transparent;
                border: none;
                cursor: pointer;
                transition: background-color 100ms ease;

                &:hover {
                    background-color: var(--lighter);
                }

                svg {
                    flex-shrink: 0;
                }
            }
        }

        /* Show menu when dropdown is open */
        &.is-open menu,
        &.is-open ul {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition:
                opacity 150ms ease-in-out,
                transform 150ms ease-in-out,
                visibility 0s 0s;
        }
    }


    /* Dropdown (Inline)
  ---------------------------------- */
    .ui-dropdown.ui-dropdown-inline {
        display: block;
        width: 100%;

        menu,
        ul {
            position: static;
            min-width: 0;
            margin-top: var(--space-2xs);
            padding: 0 0 0 var(--space-sm);
            background: transparent;
            box-shadow: none;
            display: none;
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: none;
        }

        &.is-open menu,
        &.is-open ul {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
        }
    }

    /* Auth Verify OTP Input
  ---------------------------------- */
    .ui-auth-verify {
        display: flex;
        justify-content: center;

        .ui-auth-verify-digits {
            display: flex;
            gap: var(--space-xs);

            input {
                width: 3rem;
                height: 3.5rem;
                padding: 0;
                font-size: 1.5rem;
                font-weight: 700;
                text-align: center;
                border: var(--border-lg) solid var(--light);
                border-radius: var(--rounded);
                background: var(--white);
                color: var(--darker);
                transition:
                    border-color 150ms ease,
                    box-shadow 150ms ease;

                &:focus {
                    outline: none;
                    border-color: var(--brand-1);
                    box-shadow: 0 0 0 3px
                        color-mix(in srgb, var(--brand-1) 20%, transparent);
                }

                &::placeholder {
                    color: var(--midtone);
                }
            }
        }
    }

    /* Review queue workspace (responsive split + focused mobile detail)
  ---------------------------------- */
    /* The workspace panel (white surface, light border, rounded, clipped) and
       each surface's padding are Prewind utilities on the markup. Only the
       desktop split (a grid, which Prewind has no utilities for), the reusable
       row/status/tab rules and the selected-row accent live here. */

    /* Group separation and the selected-row accent. The rows keep their own
       Prewind `border-b`; a custom drop of the last row's bottom border cannot
       win against that same-element utility in the prewind layer, so no such
       rule is kept. */
    .ui-review-group + .ui-review-group {
        border-top: var(--border) solid var(--light);
    }

    .ui-review-row.is-selected {
        background: var(--lighter);
        box-shadow: inset 3px 0 0 var(--queue-review);
    }

    .ui-status {
        display: inline-flex;
        align-items: center;
        padding: 0 var(--space-2xs);
        border-radius: 9999px;
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        line-height: 1.9;
        white-space: nowrap;
        background: var(--lighter);
        color: var(--midtone);
    }

    .ui-status-review {
        background: var(--queue-review-light);
        color: var(--queue-review);
    }

    .ui-status-info,
    .ui-status-callback {
        background: var(--warning-light);
        color: var(--warning);
    }

    .ui-status-waiting {
        background: var(--lighter);
        color: var(--midtone);
    }

    .ui-status-done {
        background: var(--success-light);
        color: var(--success);
    }

    /* Urgent is a separate operator flag, not a workflow status. It always
       carries the visible word "Urgent" so urgency is never conveyed by color
       alone. */
    .ui-status-urgent {
        background: var(--error-light);
        color: var(--error);
    }

    .ui-status-dot {
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 9999px;
        background: var(--midtone);
        flex-shrink: 0;
    }

    .ui-status-dot-review {
        background: var(--queue-review);
    }

    .ui-status-dot-info,
    .ui-status-dot-callback {
        background: var(--warning);
    }

    .ui-status-dot-done {
        background: var(--success);
    }

    /* Reusable tab link with a count badge, used by the ticket workspace's
       Review / All active / Archived switch. Ordinary links with an active
       state, so no widget JavaScript is required; the tab row's layout is the
       flex utilities on the markup. */
    .ui-tab {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3xs);
        padding: var(--space-3xs) var(--space-sm);
        border-radius: var(--rounded);
        border: var(--border) solid transparent;
        font-weight: var(--font-semibold);
        color: var(--midtone);
        text-decoration: none;
        white-space: nowrap;
    }

    .ui-tab:hover {
        background: var(--lighter);
        color: var(--darker);
    }

    .ui-tab.is-active {
        background: var(--white);
        color: var(--brand-1);
        border-color: var(--light);
    }

    .ui-tab-count {
        display: inline-grid;
        place-items: center;
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 var(--space-3xs);
        border-radius: 9999px;
        background: var(--light);
        color: var(--midtone);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        font-variant-numeric: tabular-nums;
    }

    .ui-tab.is-active .ui-tab-count {
        background: var(--queue-review-light);
        color: var(--queue-review);
    }

    /* Section navigation (top segmented strip)
  ---------------------------------- */
    /* Real navigation links, not ARIA tabs: the current destination carries
       aria-current="page" and the active pill uses the theme's brand blue. The
       secondary variant (nested task sections) is quieter than the primary
       strip so the hierarchy reads at a glance. */
    .ui-section-nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3xs);
        padding: var(--space-3xs);
        background: var(--lighter);
        border: var(--border) solid var(--light);
        border-radius: var(--rounded-lg);
    }

    .ui-section-nav-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3xs);
        padding: var(--space-3xs) var(--space-sm);
        border-radius: var(--rounded);
        color: var(--midtone);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        text-decoration: none;
        white-space: nowrap;
        transition:
            color 150ms ease,
            background-color 150ms ease;
    }

    .ui-section-nav-link:hover {
        background: var(--white);
        color: var(--darker);
    }

    .ui-section-nav-link[aria-current="page"] {
        background: var(--brand-1);
        color: var(--white);
    }

    .ui-section-nav.is-secondary {
        padding: 0;
        background: transparent;
        border: 0;
    }

    .ui-section-nav.is-secondary .ui-section-nav-link {
        padding: var(--space-3xs) var(--space-xs);
    }

    .ui-section-nav.is-secondary .ui-section-nav-link[aria-current="page"] {
        background: var(--brand-1-light);
        color: var(--brand-2);
    }

    /* Staff top bar
  ---------------------------------- */
    /* One reusable header for every staff page. Layout that Prewind already
       provides (sticky, z-index, background, border, flex, gap, spacing) stays
       as utility classes in the markup; only the two values Prewind has no
       utility for live here. */
    .ui-topbar-inner {
        min-height: 4rem;
    }

    .ui-topbar-logo {
        width: 13rem;
    }

    /* Separator inside the mobile hamburger menu, between the destination
       links and the account controls. */
    .ui-hamburger-menu-rule {
        width: 60%;
        margin: var(--space-sm) 0;
        border: 0;
        border-top: var(--border) solid rgba(255, 255, 255, 0.25);
    }

    /* A quieter nested destination inside the mobile menu (Call intake under
       Tasks). A component variant that refines the global `.mobile .nav-link`
       rule, so it carries its own spacing rather than a same-specificity
       utility override. */
    .ui-hamburger-menu .nav-link.is-secondary {
        padding-top: var(--space-2xs);
        padding-bottom: var(--space-2xs);
        margin-left: var(--space-md);
        font-size: var(--text-base);
        color: var(--light);
    }

    /* Desktop keeps one continuous surface: a compact grouped queue beside the
       wider review pane. Prewind has no grid or fraction utilities, so the
       one-third / two-thirds split lives here. The split is only applied when
       an item is selected, so an empty queue stays one full-width surface.
       Narrow screens show the queue by default: choosing a row sets the item
       param and the markup carries responsive display utilities
       (`hidden lg:block`) so the queue hides and the full-width detail opens. */
    @media (min-width: 1024px) {
        .ui-review-workspace.is-split {
            display: grid;
            grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr);
            align-items: stretch;
        }

        .ui-review-workspace.is-split > .ui-review-queue {
            border-right: var(--border) solid var(--light);
        }
    }

    /* Review ownership. The row has three variants (mine / another admin /
       available) that the widget shows one at a time by toggling the Prewind
       `hidden` utility, so it never rebuilds markup. The row, each variant and
       the notice are composed from utilities on the markup; only the variant
       hint's flex basis is not a Prewind utility. */
    .ui-owner-hint {
        flex: 1 1 16rem;
    }

    /* Internal notes and the staff-only composer are composed entirely from
       Prewind utilities on the markup, so no custom rules are needed. */

    /* Activity: shared by the selected ticket's history and the global log. The
       date/body grid and the dropped divider on the first row are the only parts
       Prewind cannot express; the rest is utilities on the markup. */
    .ui-activity {
        display: grid;
        grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
        gap: var(--space-3xs) var(--space-sm);
        padding: var(--space-2xs) 0;
        border-top: var(--border) solid var(--lighter);
    }

    .ui-activity:first-child {
        border-top: 0;
    }

    @media (max-width: 560px) {
        .ui-activity {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* Native dialogs for the deliberate takeover confirmation and the inactivity
       warning. Hidden until the widget calls `showModal()`. The fluid width, the
       height cap and the reset UA border are not Prewind utilities; the surface,
       padding and shadow are utilities on the markup. */
    .ui-dialog {
        width: min(32rem, 100%);
        max-height: 90vh;
        border: none;
    }

    .ui-dialog::backdrop {
        background: rgb(24 24 27 / 0.45);
    }
}