/*
    ממשק חדש / ממשק ישן in the legacy header — see
    app/directives/uiModeSwitch.js.

    Deliberately NOT in next-theme.css: that file is the new SKIN and is inert
    unless html.hsv-skin-next, and this control has to be visible to someone who
    has never turned anything new on. That is its whole job.

    The colours are the design system's own (heshev-design-system/
    colors_and_type.css) written out as hex: the legacy page does not load the
    token sheet, and four literal values are cheaper than pulling it in for one
    control.

    The look is SegmentedControl's 'switch' variant, the same one the top strip
    renders (web/src/ui/SegmentedControl.tsx) — sunken track, white elevated
    chip — so the control a user meets here is recognisably the one they find
    over there.
*/

/*
    WHERE IT SITS
    -------------
    Last in .header-left, immediately after the profile — beside the user's own
    name rather than among the grey tool icons.

    ROOM FOR IT
    -----------
    main.css reserves a fixed 430px of the header for that cluster
    (.header-right is calc(100% - 430px), floated) and the cluster already
    overspends it: .controls 180 + .profile 260 + padding, with .header-left's
    overflow:hidden quietly clipping the difference. Drop a 190px pill in
    without widening the reservation and the inline-blocks wrap instead — the
    icons land on a second line nobody can see. So the search area gives up the
    width.

    ONLY when the pill is there: uiModeSwitch.js puts hsv-ui-switch on <html>
    when it decides to render, so anyone who never sees the control keeps every
    pixel of their search box.

    <html>, not <body>: the body's class attribute is an Angular interpolation
    that every theme digest rewrites wholesale, silently wiping anything added
    imperatively. See the same note in services/nextPreferenceService.js.
*/
html.hsv-ui-switch .header .header-right {
    width: calc(100% - 645px);   /* 430 reserved + 215 for this control */
}

@media (max-width: 1400px) {
    /* main.css narrows its own reservation to 390px here, as .controls drops
       to 140px. Same 215 on top. */
    html.hsv-ui-switch .header .header-right {
        width: calc(100% - 605px);
    }
}

/*
    The custom element is unknown to the browser, so it starts out inline with
    no box of its own; .header-left > div (inline-block, middle-aligned) does
    not reach it either, being a child selector.

    Middle-aligned like everything else in this cluster, rather than offset by
    hand: the header is 60px tall above 1400px and 40px below (main.css), so any
    computed offset is right at one width and wrong at the other. 12px each
    side, which the reservation above accounts for.
*/
.header .header-left > ui-mode-switch {
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px;
}

.ui-mode-switch-track {
    display: inline-flex;
    align-items: center;
    /* The header's left cluster lays out LTR (only .header-right declares
       rtl), which would put the first segment on the left — the mirror of
       where the top strip's copy puts it. Declared here so the two controls
       keep the same physical order and only the white chip moves when the
       page reloads into the other interface. */
    direction: rtl;
    gap: 2px;
    padding: 2px;
    border-radius: 4px;          /* --radius-sm */
    background-color: #F4F5FB;   /* --bg-sunken */
}

.ui-mode-switch-option {
    /* A <button>, so the browser's own defaults have to go before anything
       else lands. */
    appearance: none;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0 12px;
    height: 28px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    white-space: nowrap;
    color: #4A4A6B;              /* --fg-2 */
    cursor: pointer;
    transition: background-color .12s linear, color .12s linear;
}

    .ui-mode-switch-option:hover {
        color: #2D2D87;          /* --brand-navy */
    }

    .ui-mode-switch-option.is-on {
        background-color: #FFFFFF;
        color: #2D2D87;
        box-shadow: 0 1px 2px rgba(45, 45, 135, 0.06);   /* --shadow-1 */
        cursor: default;
    }

    .ui-mode-switch-option:focus-visible {
        outline: 2px solid #2D2D87;
        outline-offset: 1px;
    }

/*
    Below this the header is already shedding controls of its own (main.css
    hides the tour trigger and משימות, and cuts the left reservation to 180px
    for the hamburger layout). A 190px pill is the first thing that should go,
    not the last: the switch is a convenience, and Settings still carries it.
*/
@media (max-width: 992px) {
    .header .header-left > ui-mode-switch {
        display: none;
    }

    html.hsv-ui-switch .header .header-right {
        width: calc(100% - 180px);
    }
}