/*
 * ClientSwitcher — the study head's client name, opened into a searchable picker.
 *
 * A plain positioned panel rather than MudPopover: the panel is a DOM child of the trigger, so
 * bunit and Playwright both find it exactly where the markup puts it, and closing on an outside
 * click needs no JS interop — a fixed, transparent backdrop behind the panel does that with
 * @onclick, and @onclick:stopPropagation keeps a click inside the panel from reaching it.
 */
@layer spec.components {
    .client-switcher {
        position: relative;
        display: inline-flex;
        min-width: 0;
    }

    .client-switcher__trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        min-width: 0;
        /*
         * The hover target bleeds 4px past the name on each side so the wash does not clip the
         * text, and the negative margin pulls that bleed back out of the layout so the row's
         * rhythm is unchanged.
         *
         * No `max-width: 100%` here, and that is the whole fix for the name that kept arriving
         * ellipsised with free space beside it: a negative horizontal margin is subtracted from
         * the trigger's shrink-to-fit contribution, so `.client-switcher` — and the study head's
         * client slot above it — sized themselves 8px narrower than the trigger's own border
         * box. `max-width: 100%` then clamped the trigger back into that 8px deficit, and the
         * name lost its last characters to `text-overflow: ellipsis` at every viewport width,
         * however short the name. Without the clamp the bleed hangs outside its parent, which is
         * what a negative margin is for.
         *
         * Shrinking is unaffected: the trigger is a flex item of `.client-switcher` with
         * `flex-shrink: 1` and `min-width: 0`, so a row too narrow for the name still ellipsises
         * it — which is the only time it should.
         */
        padding: 2px 4px;
        margin: -2px -4px;
        border: 1px solid transparent;
        background: transparent;
        cursor: pointer;
        touch-action: manipulation;
    }

    .client-switcher__trigger:hover {
        background: var(--wash-ink-4);
    }

    .client-switcher__chevron {
        flex: none;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
    }

    /* A transparent full-viewport catcher: clicking anywhere outside the panel closes it. */
    .client-switcher__backdrop {
        position: fixed;
        inset: 0;
        z-index: 39;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: default;
    }

    .client-switcher__panel {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 40;
        display: flex;
        flex-direction: column;
        width: 420px;
        max-width: min(420px, calc(100vw - 2 * var(--gutter)));
        border: 1px solid var(--color-neutral-400);
        border-radius: 0;
        background: var(--spec-surface);
        box-shadow: var(--shadow-md);
    }

    .client-switcher__search {
        display: block;
        width: calc(100% - 2 * var(--sp-2));
        height: var(--control-h);
        min-height: var(--control-h);
        margin: var(--sp-2);
        margin-bottom: 0;
        padding: 0 var(--sp-3);
        border: 1px solid var(--color-neutral-400);
        border-radius: 0;
        background: var(--spec-field);
        color: var(--spec-ink);
        font: var(--weight-regular) var(--text-base) / var(--control-h) var(--font-body);
        box-sizing: border-box;
    }

    .client-switcher__search:focus-visible {
        outline-offset: calc(-1 * var(--spec-focus-width));
    }

    .client-switcher__search::placeholder {
        color: var(--color-neutral-600);
    }

    .client-switcher__list {
        max-height: 360px;
        margin-top: var(--sp-2);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .client-switcher__kicker {
        padding: var(--sp-3) var(--sp-3) var(--sp-1);
        border-top: 1px solid var(--color-divider);
    }

    .client-switcher__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        min-height: var(--tap-target);
        padding: var(--sp-2) var(--sp-3);
        border-left: 3px solid transparent;
        cursor: pointer;
        touch-action: manipulation;
        transition: background-color var(--dur-fast) var(--ease-standard),
                    border-left-color var(--dur-fast) var(--ease-standard);
    }

    .client-switcher__row.is-highlighted {
        background: var(--color-accent-100);
        border-left-color: var(--color-accent);
    }

    .client-switcher__row-main {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0 var(--sp-3);
        min-width: 0;
        overflow: hidden;
    }

    .client-switcher__row-name {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--font-body);
        font-size: var(--text-base);
        font-weight: var(--weight-regular);
        color: var(--spec-ink);
    }

    .client-switcher__row.is-current .client-switcher__row-name {
        font-weight: var(--weight-semibold);
    }

    .client-switcher__row-vat {
        flex: none;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .client-switcher__row-legal {
        flex: none;
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .client-switcher__row-tag {
        flex: none;
        padding: 1px 5px;
        border: 1px solid var(--color-neutral-400);
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--color-neutral-700);
    }

    .client-switcher__row-count {
        flex: none;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .client-switcher__empty {
        padding: var(--sp-6) var(--sp-3);
        text-align: center;
    }

    .client-switcher__empty-text {
        margin: 0 0 var(--sp-2);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .client-switcher__clear {
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--color-accent-700);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        cursor: pointer;
    }

    .client-switcher__clear:hover {
        color: var(--color-accent-900);
        text-decoration: underline;
    }

    .client-switcher__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        margin-top: var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
        border-top: 1px solid var(--color-divider);
        background: var(--color-neutral-100);
    }

    .client-switcher__new {
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        color: var(--color-accent-700);
        text-decoration: none;
        white-space: nowrap;
    }

    .client-switcher__new:hover {
        color: var(--color-accent-900);
        text-decoration: underline;
    }

    .client-switcher__count {
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        white-space: nowrap;
    }
}