/* =====================================================================
   iOS 26 sidebar navigation
   ---------------------------------------------------------------------
   Replaces the accordion left menu with an iOS-style navigation stack:
   grouped inset cards, tinted icon tiles, hairline separators that start
   at the label, and pages that slide in from the right when you drill into
   a group and back out to the right when you go back.

   Scoped to `.nz-sb26` (markup in app/Views/includes/left_menu_ios26.php,
   rendered by assets/js/sidebar-ios26.js from the workspace's saved left
   menu, via App\Libraries\Sidebar_menu_builder). The classic `.sidebar` wrapper
   is kept around it so the app's own toggle, the left_menu_minimized
   cookie, the .page-container offset and the mobile off-canvas keep
   working untouched — this file only neutralises the classic *inner*
   styling via `body.nz-sb26-on`.

   Two states:
     - expanded  : 250px, full navigation stack
     - collapsed : 70px icon rail  (body.sidebar-toggled, desktop only —
                   on mobile that same class means "drawer is open")

   Dark mode is NIZU's body.color-1E202D theme, not a prefers-color-scheme
   media query.
   ===================================================================== */

.nz-sb26 {
    /* geometry */
    --sb26-bar-h: 64px;
    --sb26-gutter: 10px;
    --sb26-card-radius: 15px;
    --sb26-row-h: 40px;
    --sb26-tile: 27px;
    --sb26-tile-radius: 7px;
    --sb26-inset: 46px;
    /* where the hairline separator starts */

    /* motion — the iOS push/pop curve */
    --sb26-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --sb26-dur: 380ms;

    /* ink */
    --sb26-ink: #1d1d1f;
    --sb26-ink-2: #3c3c43;
    --sb26-ink-dim: rgba(60, 60, 67, 0.6);
    --sb26-chev: rgba(60, 60, 67, 0.32);

    /* material */
    --sb26-bg: #f2f2f7;
    --sb26-bar: rgba(248, 248, 250, 0.72);
    --sb26-card: #ffffff;
    --sb26-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.045);
    --sb26-hairline: rgba(60, 60, 67, 0.13);
    --sb26-row-press: rgba(0, 0, 0, 0.055);
    --sb26-orb: rgba(255, 255, 255, 0.82);
    --sb26-orb-ring: rgba(0, 0, 0, 0.07);
    --sb26-accent: #007aff;
    --sb26-accent-soft: rgba(0, 122, 255, 0.11);
    --sb26-blur: saturate(180%) blur(20px);

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--sb26-bg);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------- host reset --- */

/* the classic sidebar chrome must not fight the new one */
body.nz-sb26-on .sidebar.nz-sb26-host {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 0;
    background: var(--sb26-bg, #f2f2f7);
}

body.nz-sb26-on .sidebar.nz-sb26-host .sidebar-brand,
body.nz-sb26-on .sidebar.nz-sb26-host .sidebar-scroll,
body.nz-sb26-on .sidebar.nz-sb26-host>.sidebar-toggle-btn {
    display: none !important;
}

/* toggleLeftMenu() puts a perfect-scrollbar on #left-menu-toggle-mask, our own
   wrapper. On a phone the drawer covers the screen, so its rails would float
   on top of the menu. (The gesture side of that scrollbar is handled in
   assets/js/sidebar-ios26.js.) Desktop keeps them: the collapsed rail relies
   on the mask to scroll the page. */
@media (max-width: 990px) {

    body.nz-sb26-on.sidebar-toggled>#left-menu-toggle-mask>.ps__rail-x,
    body.nz-sb26-on.sidebar-toggled>#left-menu-toggle-mask>.ps__rail-y {
        display: none !important;
    }
}

/* ------------------------------------------------------------ top bar --- */

.nz-sb26__bar {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    height: var(--sb26-bar-h);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: var(--sb26-bar);
    -webkit-backdrop-filter: var(--sb26-blur);
    backdrop-filter: var(--sb26-blur);
    border-bottom: 1px solid transparent;
    transition: border-color 180ms linear;
}

/* the hairline only appears once the page underneath has scrolled */
.nz-sb26.is-scrolled .nz-sb26__bar {
    border-bottom-color: var(--sb26-hairline);
}

/* circular glass button, the two in the screenshot */
.nz-sb26__orb {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--sb26-orb-ring);
    border-radius: 50%;
    background: var(--sb26-orb);
    -webkit-backdrop-filter: var(--sb26-blur);
    backdrop-filter: var(--sb26-blur);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: var(--sb26-ink);
    cursor: pointer;
    transition: transform 180ms var(--sb26-ease), background-color 180ms linear;
}

.nz-sb26__orb:hover {
    background: #fff;
}

.nz-sb26__orb:active {
    transform: scale(0.92);
}

.nz-sb26__orb-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 15px;
    line-height: 1;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    transition: opacity 160ms linear, transform 220ms var(--sb26-ease);
}

/* lead button: hamburger at the root, back arrow once you have drilled in */
.nz-sb26:not(.is-nested) .nz-sb26__orb-icon--menu,
.nz-sb26.is-nested .nz-sb26__orb-icon--back,
.nz-sb26:not(.is-searching) .nz-sb26__orb-icon--search,
.nz-sb26.is-searching .nz-sb26__orb-icon--close {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.nz-sb26.is-nested .nz-sb26__orb-icon--back {
    color: var(--sb26-accent);
}

/* ---------------------------------------------------------- bar title --- */

.nz-sb26__titles {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
    min-width: 0;
}

.nz-sb26__title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sb26-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform var(--sb26-dur) var(--sb26-ease), opacity 260ms linear;
}

.nz-sb26__title.is-current {
    transform: translateX(0);
    opacity: 1;
}

/* the outgoing title drifts and fades the way a UINavigationBar title does */
.nz-sb26__title.is-behind {
    transform: translateX(-46%);
    opacity: 0;
}

.nz-sb26__title.is-ahead {
    transform: translateX(46%);
    opacity: 0;
}

.nz-sb26__brand {
    display: flex;
    align-items: center;
    max-width: 100%;
}

.nz-sb26__brand img,
.nz-sb26__brand .dashboard-image {
    max-height: 26px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* the favicon shown instead of the logo in the collapsed rail */
.nz-sb26__minibrand {
    display: none;
    flex: 0 0 auto;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.nz-sb26__minibrand img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* ----------------------------------------------------------- search ---- */

.nz-sb26__searchbar {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 7px;
    margin: 0 var(--sb26-gutter) 8px var(--sb26-gutter);
    padding: 0 10px;
    height: 32px;
    border-radius: 10px;
    background: rgba(118, 118, 128, 0.12);
    color: var(--sb26-ink-dim);
}

.nz-sb26.is-searching .nz-sb26__searchbar {
    display: flex;
}

.nz-sb26__searchbar i {
    font-size: 13px;
}

.nz-sb26__searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--sb26-ink);
}

.nz-sb26__searchbar input::placeholder {
    color: var(--sb26-ink-dim);
}

/* ------------------------------------------------- the page stack ------ */

.nz-sb26__stack {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.nz-sb26__page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* contain stops a swipe that runs out of list from turning into a page
       scroll; pan-y tells the compositor this is a vertical scroller from the
       first frame instead of after the gesture is classified */
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 22px 0;
    background: var(--sb26-bg);
    /* deliberately no `will-change: transform` — the pages live for the whole
       session, so the hint costs a permanent compositor layer each, and the
       browser promotes them for the duration of the transition anyway. It also
       makes this scroll container behave oddly for programmatic scrolling. */
    transition: transform var(--sb26-dur) var(--sb26-ease), opacity var(--sb26-dur) var(--sb26-ease);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.nz-sb26__page::-webkit-scrollbar {
    width: 7px;
}

.nz-sb26__page::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 7px;
    background-clip: content-box;
    background-color: rgba(0, 0, 0, 0.16);
}

.nz-sb26__page.is-current {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* the parent page slides a third of the way out and dims — iOS parallax */
.nz-sb26__page.is-behind {
    transform: translateX(-32%);
    opacity: 0;
    pointer-events: none;
}

.nz-sb26__page.is-ahead {
    transform: translateX(100%);
    opacity: 1;
    pointer-events: none;
}

/* first paint must not animate in from the right — the stack is restored to
   the page the current screen lives on, and that restore should look like it
   was always there */
.nz-sb26__page.no-anim,
.nz-sb26__title.no-anim {
    transition: none !important;
}

/* ----------------------------------------------------- grouped cards --- */

.nz-sb26__group {
    margin: 0 0 16px 0;
}

.nz-sb26__grouptitle {
    padding: 10px var(--sb26-gutter) 6px calc(var(--sb26-gutter) + 6px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--sb26-ink-dim);
    text-transform: capitalize;
}

.nz-sb26__card {
    margin: 0 var(--sb26-gutter);
    border-radius: var(--sb26-card-radius);
    background: var(--sb26-card);
    box-shadow: var(--sb26-card-shadow);
    overflow: hidden;
}

/* ------------------------------------------------------------- rows ---- */

.nz-sb26__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--sb26-row-h);
    padding: 6px 10px 6px 9px;
    border: 0;
    background: transparent;
    /* a group row is a <button>, which would otherwise pick up the UA font */
    font: inherit;
    color: var(--sb26-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms linear;
}

.nz-sb26__row:hover,
.nz-sb26__row:focus-visible {
    background: var(--sb26-row-press);
    color: var(--sb26-ink);
    text-decoration: none;
}

.nz-sb26__row:active {
    background: rgba(0, 0, 0, 0.09);
}

/* hairline between rows, inset so it starts where the label starts */
.nz-sb26__row+.nz-sb26__row::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--sb26-inset);
    right: 0;
    height: 1px;
    background: var(--sb26-hairline);
}

.nz-sb26__row.is-active {
    background: var(--sb26-accent-soft);
}

.nz-sb26__row.is-active .nz-sb26__label {
    color: var(--sb26-accent);
    font-weight: 600;
}

.nz-sb26__tile {
    flex: 0 0 auto;
    width: var(--sb26-tile);
    height: var(--sb26-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sb26-tile-radius);
    background: var(--sb26-tint, #8e8e93);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.nz-sb26__tile i {
    font-size: 13px;
    line-height: 1;
}

.nz-sb26__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--sb26-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nz-sb26__row .badge {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
}

.nz-sb26__chev {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--sb26-chev);
}

/* the path taken to reach the current page keeps a quiet marker */
.nz-sb26__row.is-trail .nz-sb26__label {
    color: var(--sb26-accent);
}

/* A row with no icon: the Settings entries. No tile, so the separator starts
   at the text instead of where the tile would have ended. */
.nz-sb26__row--plain {
    padding-left: 14px;
}

.nz-sb26__row--plain+.nz-sb26__row--plain::before {
    left: 14px;
}

@media (max-width: 990px) {
    .nz-sb26__row--plain {
        padding-left: 16px;
    }

    .nz-sb26__row--plain+.nz-sb26__row--plain::before {
        left: 16px;
    }
}

/* in the collapsed rail a text row has nothing to show, so it is hidden —
   the rail is an icon strip and Settings lives one page in anyway */
@media (min-width: 991px) {
    body.nz-sb26-on.sidebar-toggled .nz-sb26__row--plain {
        display: none;
    }
}

/* =====================================================================
   Settings pages
   ---------------------------------------------------------------------
   The accordion that used to fill the left column of every settings page
   is now a drill-down in the sidebar, so app/Views/settings/tabs.php
   emits only `.nz-settings-menu-moved`. Reclaim the column it sat in:
   hide it, and give the content beside it the full width. Done here
   rather than in 50-odd page views, none of which needed to change.
   ===================================================================== */

body.nz-sb26-on .row>[class*="col-"]:has(> .nz-settings-menu-moved) {
    display: none !important;
}

body.nz-sb26-on .row>[class*="col-"]:has(> .nz-settings-menu-moved)+[class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------ empty search --- */

.nz-sb26__empty {
    padding: 26px var(--sb26-gutter);
    text-align: center;
    font-size: 13px;
    color: var(--sb26-ink-dim);
}

/* the "in Sales › Documents" breadcrumb under a search hit */
.nz-sb26__path {
    display: block;
    font-size: 11px;
    color: var(--sb26-ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nz-sb26__row--result .nz-sb26__label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}

/* ------------------------------------------------------------ tints ---- */

.nz-sb26 [data-tint="blue"],
.nz-order [data-tint="blue"] {
    --sb26-tint: #007aff;
}

.nz-sb26 [data-tint="indigo"],
.nz-order [data-tint="indigo"] {
    --sb26-tint: #5856d6;
}

.nz-sb26 [data-tint="purple"],
.nz-order [data-tint="purple"] {
    --sb26-tint: #af52de;
}

.nz-sb26 [data-tint="pink"],
.nz-order [data-tint="pink"] {
    --sb26-tint: #ff2d55;
}

.nz-sb26 [data-tint="red"],
.nz-order [data-tint="red"] {
    --sb26-tint: #ff3b30;
}

.nz-sb26 [data-tint="orange"],
.nz-order [data-tint="orange"] {
    --sb26-tint: #ff9500;
}

.nz-sb26 [data-tint="yellow"],
.nz-order [data-tint="yellow"] {
    --sb26-tint: #f0b400;
}

.nz-sb26 [data-tint="green"],
.nz-order [data-tint="green"] {
    --sb26-tint: #34c759;
}

.nz-sb26 [data-tint="mint"],
.nz-order [data-tint="mint"] {
    --sb26-tint: #00c7be;
}

.nz-sb26 [data-tint="teal"],
.nz-order [data-tint="teal"] {
    --sb26-tint: #30b0c7;
}

.nz-sb26 [data-tint="cyan"],
.nz-order [data-tint="cyan"] {
    --sb26-tint: #32ade6;
}

.nz-sb26 [data-tint="brown"],
.nz-order [data-tint="brown"] {
    --sb26-tint: #a2845e;
}

.nz-sb26 [data-tint="gray"],
.nz-order [data-tint="gray"] {
    --sb26-tint: #8e8e93;
}

/* =====================================================================
   Collapsed rail — desktop only. On mobile `.sidebar-toggled` means the
   drawer is open, which is the opposite intent, so this whole block is
   media-query scoped.
   ===================================================================== */

@media (min-width: 991px) {

    body.nz-sb26-on.sidebar-toggled .nz-sb26__bar {
        justify-content: center;
        padding: 0 6px;
        height: 52px;
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26__titles,
    body.nz-sb26-on.sidebar-toggled .nz-sb26__search-btn,
    body.nz-sb26-on.sidebar-toggled .nz-sb26__searchbar,
    body.nz-sb26-on.sidebar-toggled .nz-sb26__grouptitle,
    body.nz-sb26-on.sidebar-toggled .nz-sb26__label,
    body.nz-sb26-on.sidebar-toggled .nz-sb26__chev {
        display: none !important;
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26__minibrand {
        display: flex;
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26 {
        --sb26-gutter: 8px;
        --sb26-card-radius: 13px;
    }

    /* the rail always shows the root page, whatever the stack was on */
    body.nz-sb26-on.sidebar-toggled .nz-sb26__group {
        margin-bottom: 10px;
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26__row {
        justify-content: center;
        padding: 7px 0;
        gap: 0;
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26__row+.nz-sb26__row::before {
        left: 10px;
        right: 10px;
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26__tile {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26__row .badge {
        position: absolute;
        top: 3px;
        right: 6px;
        padding: 2px 5px;
        font-size: 9px;
    }

    /* label as a floating tooltip, since there is no room for it inline */
    body.nz-sb26-on.sidebar-toggled .nz-sb26__row[data-tip]::after {
        content: attr(data-tip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) scale(0.94);
        transform-origin: left center;
        padding: 5px 9px;
        border-radius: 8px;
        background: rgba(28, 28, 30, 0.92);
        -webkit-backdrop-filter: var(--sb26-blur);
        backdrop-filter: var(--sb26-blur);
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        z-index: 40;
        transition: opacity 140ms linear, transform 180ms var(--sb26-ease);
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26__row[data-tip]:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    /* the rail must let the tooltip escape */
    body.nz-sb26-on.sidebar-toggled .sidebar.nz-sb26-host,
    body.nz-sb26-on.sidebar-toggled .nz-sb26,
    body.nz-sb26-on.sidebar-toggled .nz-sb26__stack,
    body.nz-sb26-on.sidebar-toggled .nz-sb26__page {
        overflow: visible !important;
    }

    body.nz-sb26-on.sidebar-toggled .nz-sb26__page {
        overflow-y: auto !important;
    }
}

/* =====================================================================
   Mobile / touch — native list metrics
   ---------------------------------------------------------------------
   Below 991px the sidebar is an off-canvas drawer, not a rail, and the
   250px desktop metrics are far too small for it: a phone list read as a
   shrunken copy of the real thing next to a native iOS one.

   The numbers below are measured off a native inset-grouped list with
   icons, normalised to points (the reference screenshot is a 440pt-wide
   device at 3x):

       row pitch   ~51pt      label      17pt
       icon tile   ~28pt      side inset ~16pt

   17pt on the label matters twice over: it is the native size, and it is
   also the threshold under which mobile Safari zooms the page in when a
   text field next to it takes focus.
   ===================================================================== */

@media (max-width: 990px) {
    .nz-sb26 {
        --sb26-row-h: 50px;
        --sb26-tile: 29px;
        --sb26-tile-radius: 8px;
        /* 12 padding + 29 tile + 12 gap: the separator starts at the label */
        --sb26-inset: 53px;
        --sb26-gutter: 16px;
        --sb26-card-radius: 16px;
    }

    .nz-sb26__row {
        padding: 8px 12px;
        gap: 12px;
    }

    .nz-sb26__label {
        font-size: 17px;
    }

    .nz-sb26__tile i {
        font-size: 15px;
    }

    .nz-sb26__chev {
        font-size: 13px;
    }

    .nz-sb26__row .badge {
        font-size: 11px;
        padding: 4px 7px;
    }

    .nz-sb26__grouptitle {
        font-size: 13px;
        padding-left: calc(var(--sb26-gutter) + 4px);
    }

    /* fingers, not a mouse: the orbs get the full 44px too */
    .nz-sb26__orb {
        width: 44px;
        height: 44px;
    }

    .nz-sb26__orb-icon {
        font-size: 17px;
    }

    .nz-sb26__searchbar {
        height: 36px;
        border-radius: 10px;
    }

    .nz-sb26__searchbar i {
        font-size: 15px;
    }

    .nz-sb26__searchbar input {
        height: 34px;
        font-size: 17px;
    }
}

@media (max-width: 575.98px) {

    /* The open drawer sits at z-index 1050 and #mobile-bottom-menu at 99, so
       the bottom bar is *behind* the sidebar, not over it — nothing needs to
       be reserved for it. Only the home indicator does. */
    .nz-sb26__page {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .nz-sb26__bar {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(var(--sb26-bar-h) + env(safe-area-inset-top, 0px));
    }
}

/* ------------------------------------------- the moved topbar buttons --- */

/* Below `sm` the app relocates its own topbar buttons into this container
   (moveTopbarButtonsToLeftMenu in app.all.js). It lives in the bar's right
   slot so the drawer has one chrome band rather than two, and the buttons —
   which arrive wearing `.p20` — are re-laid as 44px tap targets.

   The container ships with Bootstrap's `.d-block .d-sm-none`, and `.d-block`
   is !important, so the row layout needs !important too, inside the
   breakpoint where `.d-sm-none` is not the one talking. Above `sm` the
   buttons stay in the real topbar and `.d-sm-none` hides this. */
@media (max-width: 575.98px) {
    .nz-sb26__mobilebtns {
        display: flex !important;
    }

    /* the search field is shown inline below `sm`, so the orb would be a
       second identical magnifier in the same bar */
    .nz-sb26__search-btn {
        display: none !important;
    }

    /* With a 44px lead orb on the left and three app buttons on the right,
       only ~214px of the bar is free and its middle is nowhere near the bar's
       middle — a "centred" logo just floats at 38% and reads as misaligned.
       Anchor it to the lead orb instead. */
    .nz-sb26__title {
        justify-content: flex-start;
        padding-left: 2px;
    }

    .nz-sb26__searchbar {
        display: flex !important;
        margin-top: 8px;
    }
}

.nz-sb26__mobilebtns {
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    /* holds the slot open when a workspace has no topbar buttons, so the logo
       stays optically centred against the lead orb */
    min-width: 44px;
}

.nz-sb26__mobilebtns>* {
    float: none !important;
    margin: 0 !important;
}

.nz-sb26__mobilebtns .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50%;
    color: var(--sb26-ink);
}

.nz-sb26__mobilebtns .nav-link:active {
    background: var(--sb26-row-press);
}

/* the dropdowns these buttons open must not be clipped by the drawer */
.nz-sb26__mobilebtns .dropdown-menu {
    z-index: 1060;
}

/* ================================================================ RTL === */

[dir="rtl"] .nz-sb26__row {
    text-align: right;
}

[dir="rtl"] .nz-sb26__row+.nz-sb26__row::before {
    left: 0;
    right: var(--sb26-inset);
}

/* the back arrow is centred by a translate, the row chevron is not — so the
   mirroring has to be written twice rather than shared */
[dir="rtl"] .nz-sb26.is-nested .nz-sb26__orb-icon--back {
    transform: translate(-50%, -50%) scaleX(-1);
}

[dir="rtl"] .nz-sb26__chev {
    transform: scaleX(-1);
}

/* pages come in from the left instead */
[dir="rtl"] .nz-sb26__page.is-behind {
    transform: translateX(32%);
}

[dir="rtl"] .nz-sb26__page.is-ahead {
    transform: translateX(-100%);
}

[dir="rtl"] .nz-sb26__title.is-behind {
    transform: translateX(46%);
}

[dir="rtl"] .nz-sb26__title.is-ahead {
    transform: translateX(-46%);
}

@media (min-width: 991px) {
    [dir="rtl"] body.nz-sb26-on.sidebar-toggled .nz-sb26__row[data-tip]::after {
        left: auto;
        right: calc(100% + 12px);
        transform-origin: right center;
    }
}

/* ============================================================== dark === */
/* NIZU dark = body.color-1E202D (theme stylesheet), not html.dark        */

body.color-1E202D .nz-sb26 {
    --sb26-ink: #f2f2f7;
    --sb26-ink-2: #d8d8de;
    --sb26-ink-dim: rgba(235, 235, 245, 0.6);
    --sb26-chev: rgba(235, 235, 245, 0.32);

    --sb26-bg: #15171f;
    --sb26-bar: rgba(30, 32, 45, 0.72);
    --sb26-card: #1e202d;
    --sb26-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sb26-hairline: rgba(235, 235, 245, 0.12);
    --sb26-row-press: rgba(255, 255, 255, 0.06);
    --sb26-orb: rgba(70, 74, 92, 0.6);
    --sb26-orb-ring: rgba(255, 255, 255, 0.1);
    --sb26-accent: #0a84ff;
    --sb26-accent-soft: rgba(10, 132, 255, 0.18);
}

body.color-1E202D.nz-sb26-on .sidebar.nz-sb26-host {
    background: #15171f;
}

body.color-1E202D .nz-sb26__orb {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.color-1E202D .nz-sb26__orb:hover {
    background: rgba(86, 90, 110, 0.72);
}

body.color-1E202D .nz-sb26__searchbar {
    background: rgba(118, 118, 128, 0.24);
}

body.color-1E202D .nz-sb26__page::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
}

/* the theme stylesheet paints .badge/.form-control with !important */
body.color-1E202D .nz-sb26__searchbar input {
    background: transparent !important;
    color: #f2f2f7 !important;
}

/* ================================================== reduced motion ===== */

@media (prefers-reduced-motion: reduce) {

    .nz-sb26__page,
    .nz-sb26__title,
    .nz-sb26__orb,
    .nz-sb26__orb-icon {
        transition-duration: 1ms !important;
    }
}


/* =====================================================================
   Left-menu order editor  (Settings -> Left menu, and a user's own tab)
   ---------------------------------------------------------------------
   The sidebar drawn flat, every list drag-sortable. It borrows the tint
   swatches above so the rows read as the same objects, but it is a form
   control, not the sidebar: everything is expanded at once, and nesting
   is shown by indentation instead of by pushing a page.

   Markup: app/Views/left_menu/order_tree.php
   Wiring: app/Views/left_menu/helper_js.php
   ===================================================================== */

.nz-order {
    --order-ink: #1d1d1f;
    --order-ink-dim: rgba(60, 60, 67, 0.6);
    --order-hairline: rgba(60, 60, 67, 0.13);
    --order-card: #fff;
    --order-radius: 12px;

    font-size: 14px;
    text-align: left;
}

.nz-order__group {
    margin-bottom: 16px;
}

.nz-order__grouptitle {
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--order-ink-dim);
    text-transform: capitalize;
}

.nz-order__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* a nested list is the page you would push into; show it as an indent */
.nz-order__row .nz-order__list {
    margin: 4px 0 6px 22px;
    padding-left: 10px;
    border-left: 2px solid var(--order-hairline);
}

.nz-order__row {
    list-style: none;
}

.nz-order__bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--order-hairline);
    border-radius: var(--order-radius);
    background: var(--order-card);
    color: var(--order-ink);
}

.nz-order__grip {
    flex: 0 0 auto;
    cursor: grab;
    color: var(--order-ink-dim);
    font-size: 13px;
    line-height: 1;
    padding: 4px 2px;
}

.nz-order__grip:active {
    cursor: grabbing;
}

.nz-order__tile {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--sb26-tint, #8e8e93);
    color: #fff;
    font-size: 12px;
}

/* a text row (the Settings entries) keeps the column without a swatch */
.nz-order__tile--none {
    background: transparent;
}

.nz-order__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nz-order__chev {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--order-ink-dim);
}

.nz-order .sortable-ghost>.nz-order__bar {
    opacity: 0.35;
}

.nz-order .sortable-chosen>.nz-order__bar {
    border-color: #007aff;
    box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------- dark --- */

body.color-1E202D .nz-order {
    --order-ink: #f2f2f7;
    --order-ink-dim: rgba(235, 235, 245, 0.6);
    --order-hairline: rgba(235, 235, 245, 0.14);
    --order-card: #262936;
}