/* ==========================================================================
   App sidebar + the phone menu button ("sn")
   --------------------------------------------------------------------------
   The left menu used by owners, staff, partners and admins (#sidebar) and the
   round menu button on phones (#mobile-menu-fab). Loaded after app.css and the
   page files, before dropdowns.css. Every rule is scoped to #sidebar,
   #sidebar-overlay or #mobile-menu-fab, so the ID outranks the older sidebar
   rules spread through app.css without touching any page's own styles.

   - Each top-level entry and group carries data-sn-tone (index.php): its icon
     sits on a soft tile in that colour; the open page's tile turns solid.
   - The open group is a soft panel; its pages hang off a guide line, the open
     one marked by a dot in the group's colour. No coloured left bars.
   - Desktop icon rail (body.sidebar-collapsed) is restated here with the same
     ID weight, written as :not(:hover):not(:focus-within) so hovering or
     tabbing into the rail simply falls back to the full menu below.
   - Widths (--sidebar-w / --sidebar-w-collapsed) are untouched, so page
     content never moves.

   Primary text true black; secondary text no lighter than #475569.
   ========================================================================== */

#sidebar {
    --sn-line: #e7ebf1;
    --sn-soft: #f6f8fb;
    --sn-mute: #475569;
    --sn-ink-2: #1e293b;
    --sn-c: #475569;
    background: #fff;
    color: #000;
    border-right: 1px solid var(--sn-line);
}

/* ---- Tones ------------------------------------------------------------- */

#sidebar [data-sn-tone="emerald"] { --sn-c: #059669; }
#sidebar [data-sn-tone="orange"]  { --sn-c: #ea580c; }
#sidebar [data-sn-tone="blue"]    { --sn-c: #2563eb; }
#sidebar [data-sn-tone="indigo"]  { --sn-c: #4f46e5; }
#sidebar [data-sn-tone="pink"]    { --sn-c: #db2777; }
#sidebar [data-sn-tone="violet"]  { --sn-c: #7c3aed; }
#sidebar [data-sn-tone="slate"]   { --sn-c: #475569; }
#sidebar [data-sn-tone="teal"]    { --sn-c: #0d9488; }
#sidebar [data-sn-tone="cyan"]    { --sn-c: #0891b2; }
#sidebar [data-sn-tone="amber"]   { --sn-c: #d97706; }

/* ---- Search ------------------------------------------------------------ */

#sidebar .sidebar-nav {
    padding: 10px 6px 16px 12px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .32) transparent;
}
#sidebar .nav-menu-search { padding: 2px 0 6px; }
#sidebar .nav-menu-search > div { position: relative; }
#sidebar .nav-menu-search .bi-search {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    font-size: .82rem; color: var(--sn-mute); pointer-events: none;
}
#sidebar #nav-menu-search-input {
    width: 100%; height: 40px; margin: 0;
    padding: 0 12px 0 36px;
    border: 1px solid var(--sn-line); border-radius: 12px;
    background: var(--sn-soft); box-shadow: none;
    font: inherit; font-size: .84rem; font-weight: 600; color: #000;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#sidebar #nav-menu-search-input::placeholder { color: var(--sn-mute); font-weight: 600; opacity: 1; }
#sidebar #nav-menu-search-input:hover { border-color: #d5dbe4; }
#sidebar #nav-menu-search-input:focus,
#sidebar #nav-menu-search-input:focus-visible {
    outline: none; background: #fff; border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .16);
}

/* ---- Section headings ("Owner menu", "Profile", "Admin") ---------------- */

#sidebar .nav-section {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 2px 6px; padding: 0 6px;
    background: none;
    font-size: .66rem; font-weight: 800; letter-spacing: .1em; line-height: 1.2;
    text-transform: uppercase; color: var(--sn-mute);
}
#sidebar .nav-section::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--sn-line);
}
/* the first heading under the search box (partner or owner menu) */
#sidebar .nav-menu-search + .nav-section,
#sidebar .nav-section.owner-only { margin-top: 8px; }
#sidebar #admin-section { color: #3730a3; }
#sidebar #admin-section::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px;
    background: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
}
/* the headings carry their own hairline, so dividers are just breathing room */
#sidebar .nav-divider { height: 4px; margin: 0; background: none; }

/* ---- Rows: top-level pages and group headings ---------------------------- */

#sidebar .nav-item,
#sidebar .nav-group-summary {
    position: relative;
    display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    min-height: 42px; margin: 1px 0; padding: 6px 8px 6px 6px;
    border-radius: 12px; background: transparent; box-shadow: none;
    color: #000; font-size: .875rem; font-weight: 700; line-height: 1.2; letter-spacing: -.005em;
    text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, padding .26s var(--ease-out), gap .26s var(--ease-out);
}
#sidebar .nav-group-summary { list-style: none; }
#sidebar .nav-group-summary::-webkit-details-marker { display: none; }

/* the icon tile */
#sidebar .nav-item > i,
#sidebar .nav-group-summary > i:not(.nav-group-caret),
#sidebar .nav-mode-exit-btn > i,
#sidebar .sidebar-signout > i {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; opacity: 1; transform: none; box-shadow: none;
    font-size: .95rem; line-height: 1;
    color: var(--sn-c);
    background: #f1f5f9;
    background: color-mix(in srgb, var(--sn-c) 11%, #fff);
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

#sidebar .nav-item:hover,
#sidebar .nav-group-summary:hover { background: #f3f5f8; color: #000; box-shadow: none; }
#sidebar .nav-item:hover > i,
#sidebar .nav-group-summary:hover > i:not(.nav-group-caret) {
    transform: none;
    color: var(--sn-c);
    background: color-mix(in srgb, var(--sn-c) 17%, #fff);
}
#sidebar .nav-item:active,
#sidebar .nav-group-summary:active { background: #eceff4; transition-duration: .05s; }

/* the open page */
#sidebar .nav-item.active:not(.nav-subitem) {
    background: #ecfdf5;
    background: color-mix(in srgb, var(--sn-c) 9%, #fff);
    color: #000; font-weight: 800; box-shadow: none;
}
#sidebar .nav-item.active:not(.nav-subitem) > i,
#sidebar .nav-group.active-group > .nav-group-summary > i:not(.nav-group-caret) {
    background: var(--sn-c); color: #fff;
    box-shadow: 0 6px 14px -8px var(--sn-c);
}
#sidebar .nav-item.active::before { content: none; display: none; }

#sidebar .nav-item:focus-visible,
#sidebar .nav-group-summary:focus-visible,
#sidebar .nav-mode-exit-btn:focus-visible,
#sidebar .sidebar-signout:focus-visible,
#sidebar .sidebar-plan-btn:focus-visible,
#sidebar .sidebar-close:focus-visible {
    outline: 2px solid #047857; outline-offset: -2px;
}

/* badges (help tickets, orders) */
#sidebar .nav-badge {
    position: static; flex: 0 0 auto; margin-left: auto;
    min-width: 20px; width: auto; height: 20px; padding: 0 6px;
    align-items: center; justify-content: center;
    border-radius: 999px; background: #dc2626; color: #fff;
    font-size: .68rem; font-weight: 800; line-height: 1; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 3px 8px -3px rgba(220, 38, 38, .7);
}

/* ---- Groups ------------------------------------------------------------- */

#sidebar .nav-group {
    margin: 1px 0; overflow: hidden;
    border: 1px solid transparent; border-radius: 14px;
    background: transparent; box-shadow: none;
    transition: background-color .18s ease, border-color .18s ease;
}
#sidebar .nav-group[open] { background: var(--sn-soft); border-color: #edf0f4; box-shadow: none; }
#sidebar .nav-group.active-group,
#sidebar .nav-group.active-group[open] {
    background: var(--sn-soft);
    border-color: #e9edf2;
    box-shadow: none;
}
#sidebar .nav-group > .nav-group-summary { margin: 0; border-radius: 13px; }
#sidebar .nav-group[open] > .nav-group-summary { background: transparent; }
#sidebar .nav-group[open] > .nav-group-summary:hover { background: rgba(15, 23, 42, .04); }
#sidebar .nav-group.active-group > .nav-group-summary,
#sidebar .nav-group.active-group > .nav-group-summary span { color: #000; font-weight: 800; }

/* expand / collapse chevron */
#sidebar .nav-group-caret {
    margin-left: auto; flex: 0 0 24px;
    width: 24px !important; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: transparent; box-shadow: none; opacity: 1;
    color: var(--sn-mute); font-size: .7rem !important;
    transition: transform .22s var(--ease-out), background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
#sidebar .nav-group-summary:hover .nav-group-caret { background: #fff; color: #000; box-shadow: 0 0 0 1px var(--sn-line); }
#sidebar .nav-group[open] > .nav-group-summary .nav-group-caret { transform: rotate(180deg); color: #000; background: transparent; }
#sidebar .nav-group[open] > .nav-group-summary:hover .nav-group-caret { background: #fff; }

/* the pages inside a group hang off a guide line under the group's icon */
#sidebar .nav-group-body { position: relative; max-height: none; padding: 0 0 6px; }
#sidebar .nav-group-body::before {
    content: ""; position: absolute; left: 20px; top: 0; bottom: 18px; width: 2px;
    border-radius: 2px; background: #e2e8f0;
    background: color-mix(in srgb, var(--sn-c) 14%, #e2e8f0);
}
#sidebar .nav-subitem {
    height: auto; min-height: 34px; overflow: visible;
    margin: 1px 6px 1px 38px; padding: 7px 10px;
    gap: 8px; justify-content: flex-start;
    border-radius: 10px; background: transparent; box-shadow: none;
    color: var(--sn-ink-2); font-size: .835rem; font-weight: 650;
}
#sidebar .nav-subitem::before { content: none; display: none; }
/* A page that is a tab on another page (data-nav-tab, App._finTabs) keeps its
   link for permissions, menu choices and search, but is not listed. It shows
   while the menu is searched, and stands in for its page when that page is
   hidden from this login (.nav-tab-up, App._navTabsPromote). */
#sidebar-nav:not(.nav-searching) a.nav-item[data-nav-tab]:not(.nav-tab-up) { display: none !important; }
#sidebar .nav-subitem::after {
    content: ""; position: absolute; left: -21px; top: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: #94a3b8; box-shadow: 0 0 0 3px var(--sn-soft);
    opacity: 0; transform: translateY(-50%) scale(.5);
    transition: opacity .16s ease, transform .16s ease, background-color .16s ease;
}
#sidebar .nav-subitem:hover { background: #fff; color: #000; box-shadow: 0 0 0 1px var(--sn-line); }
#sidebar .nav-subitem:hover::after { opacity: 1; transform: translateY(-50%) scale(.75); }
#sidebar .nav-subitem.active {
    margin-left: 38px; background: #fff; color: #000; font-weight: 800;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px color-mix(in srgb, var(--sn-c) 24%, #e7ebf1);
}
#sidebar .nav-subitem.active::after {
    opacity: 1; transform: translateY(-50%) scale(1);
    background: var(--sn-c);
    box-shadow: 0 0 0 3px var(--sn-soft), 0 0 0 5px color-mix(in srgb, var(--sn-c) 18%, transparent);
}
#sidebar .nav-subitem i { display: none; }

/* ---- Workspace switch: "Become a Partner" / "Back to Business" ---------- */

#sidebar .nav-mode-exit,
#sidebar .nav-mode-switch { padding: 8px 0 4px; }
#sidebar .nav-mode-exit-btn {
    --sn-c: #475569;
    position: relative;
    display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    width: 100%; min-height: 46px; margin: 0; padding: 7px 34px 7px 7px;
    border: 1px solid var(--sn-line); border-radius: 14px;
    background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    color: #000; font: inherit; font-size: .855rem; font-weight: 800; line-height: 1.2; text-align: left;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, padding .26s var(--ease-out);
}
#sidebar .nav-mode-exit-btn::after {
    content: "\f285"; font-family: "bootstrap-icons"; font-weight: 400;
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    font-size: .72rem; line-height: 1; color: var(--sn-mute);
    transition: transform .16s ease;
}
#sidebar .nav-mode-exit-btn:hover { border-color: #d5dbe4; background: #fafbfc; box-shadow: 0 6px 16px -12px rgba(15, 23, 42, .5); }
#sidebar .nav-mode-exit-btn:hover::after { transform: translate(2px, -50%); }
#sidebar .nav-mode-exit-btn:active { background: #f3f5f8; }
#sidebar .nav-mode-exit-btn.is-enter {
    --sn-c: #059669;
    border-color: #cdeedd;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 55%, #eef6ff 100%);
}
#sidebar .nav-mode-exit-btn.is-enter:hover { border-color: #a7e3c6; background: linear-gradient(135deg, #e3faef 0%, #e8fbf7 55%, #e6f0ff 100%); }
#sidebar .nav-mode-exit-btn.is-enter > i {
    color: #fff;
    background: linear-gradient(135deg, #059669, #0d9488);
    box-shadow: 0 6px 14px -8px rgba(5, 150, 105, .9);
}

/* ---- Foot: plan + sign out ----------------------------------------------- */

#sidebar .sidebar-footer {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px calc(10px + var(--safe-b));
    border-top: 1px solid var(--sn-line);
    background: #fff;
}
#sidebar #sidebar-plan-chip:empty { display: none; }
#sidebar .sidebar-plan-row {
    display: flex; align-items: center; gap: 10px;
    min-height: 0; margin: 0; padding: 7px 7px 7px 7px;
    border: 1px solid #e4e1fb; border-radius: 14px;
    background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 60%, #f0f7ff 100%);
}
#sidebar .sn-plan-ic {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; color: #fff; font-size: .88rem;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .9);
}
#sidebar .sidebar-plan-name {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
    align-items: flex-start; text-align: left;
    color: #000; font-size: inherit;
}
#sidebar .sidebar-plan-name small {
    font-size: .64rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; color: var(--sn-mute);
}
#sidebar .sidebar-plan-name b {
    font-size: .84rem; font-weight: 800; line-height: 1.2; color: #000;
    overflow: hidden; text-overflow: ellipsis;
}
#sidebar .sidebar-plan-btn {
    flex: 0 0 auto; height: 30px; min-height: 30px; padding: 0 12px;
    border: 1px solid #d9d6fb; border-radius: 10px;
    background: #fff; color: #3730a3;
    font: inherit; font-size: .74rem; font-weight: 800; line-height: 1;
    cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
#sidebar .sidebar-plan-btn:hover { background: #f5f3ff; border-color: #c4bff7; }
#sidebar .is-free .sidebar-plan-btn { background: #4f46e5; border-color: #4f46e5; color: #fff; }
#sidebar .is-free .sidebar-plan-btn:hover { background: #4338ca; border-color: #4338ca; }
#sidebar .sidebar-plan-btn:active { transform: scale(.96); }

#sidebar .sidebar-signout {
    --sn-c: #dc2626;
    display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    width: 100%; min-height: 42px; margin: 0; padding: 6px 8px 6px 6px;
    border: 1px solid transparent; border-radius: 12px;
    background: transparent; box-shadow: none; transform: none;
    color: #000; font: inherit; font-size: .875rem; font-weight: 700; line-height: 1.2;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, padding .26s var(--ease-out), gap .26s var(--ease-out);
}
#sidebar .sidebar-signout > i { background: #fef2f2; }
#sidebar .sidebar-signout:hover { background: #fef2f2; color: #b91c1c; border-color: transparent; box-shadow: none; transform: none; }
#sidebar .sidebar-signout:hover > i { background: #fee2e2; }
#sidebar .sidebar-signout:active { background: #fee2e2; transform: none; box-shadow: none; }

/* ---- Touch: comfortable targets ----------------------------------------- */

@media (pointer: coarse) {
    #sidebar .nav-item:not(.nav-subitem),
    #sidebar .nav-group-summary,
    #sidebar .sidebar-signout { min-height: 46px; }
    #sidebar .nav-subitem { min-height: 38px; }
}

/* ---- Phones: the drawer --------------------------------------------------- */

@media (max-width: 767px) {
    #sidebar {
        width: min(76vw, 288px);
        opacity: 1;
        border-right: 0;
        border-radius: 0 24px 24px 0;
        box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .4);
    }
    #sidebar .sidebar-header {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        min-height: 0;
        padding: calc(12px + var(--safe-t)) 12px 10px 18px;
        border-bottom: 1px solid var(--sn-line);
        background: #fff;
    }
    #sidebar .sidebar-header::after { display: none; }
    #sidebar .sidebar-logo {
        min-width: 0; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #000;
    }
    #sidebar .sidebar-close {
        display: flex; align-items: center; justify-content: center; flex: 0 0 38px;
        width: 38px; height: 38px; padding: 0;
        border: 1px solid var(--sn-line); border-radius: 12px;
        background: var(--sn-soft); color: #000; font-size: .95rem;
        box-shadow: none; transform: none;
        transition: background-color .15s ease, transform .12s ease;
    }
    #sidebar .sidebar-close:hover { background: #eef1f5; transform: none; box-shadow: none; }
    #sidebar .sidebar-close:active { transform: scale(.94); background: #e6eaf0; }
    #sidebar .sidebar-nav { padding: 8px 12px 18px; }
    #sidebar #nav-menu-search-input { height: 42px; font-size: 16px; } /* no iOS focus-zoom */
    #sidebar .sidebar-footer { padding: 10px 12px calc(12px + var(--safe-b)); }

    #sidebar-overlay { background: rgba(15, 23, 42, .42); }
}

/* ---- Desktop: the collapsed icon rail ---------------------------------------
   Only while the rail is NOT hovered or focused; then the full menu above
   applies as the flyout (app.css widens the rail and adds the shadow). */

@media (min-width: 768px) {
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .sidebar-nav {
        padding: 10px 0 16px; scrollbar-gutter: auto; scrollbar-width: none;
    }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .sidebar-nav::-webkit-scrollbar { width: 0; height: 0; }

    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-menu-search,
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-section,
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-group-caret,
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) #sidebar-plan-chip { display: none; }

    /* a hairline between the menu's sections stands in for the hidden headings */
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-divider {
        display: block; height: 1px; margin: 8px 18px; background: var(--sn-line);
    }

    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-item,
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-group-summary,
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .sidebar-signout {
        justify-content: center; gap: 0;
        margin: 2px 11px; padding: 6px 0;
    }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .sidebar-signout { width: auto; }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-group {
        margin: 0; border-color: transparent; background: transparent;
    }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-group > .nav-group-summary { margin: 2px 11px; }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-group.active-group > .nav-group-summary {
        background: #ecfdf5;
        background: color-mix(in srgb, var(--sn-c) 9%, #fff);
    }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-group-body {
        max-height: 0; overflow: hidden; padding: 0;
    }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-group-body::before { display: none; }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-subitem {
        height: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden;
    }

    /* badges shrink to a dot on the icon's corner */
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-badge {
        position: absolute; top: 4px; right: 8px;
        width: 10px; min-width: 10px; height: 10px; padding: 0;
        font-size: 0; line-height: 0; border-radius: 50%;
        box-shadow: 0 0 0 2px #fff;
    }

    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-mode-exit,
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-mode-switch { padding: 6px 11px 2px; }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-mode-exit-btn {
        justify-content: center; gap: 0; min-height: 42px; padding: 5px 0;
        border-color: transparent; background: transparent; box-shadow: none;
    }
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-mode-exit-btn::after { display: none; }
    /* only the current page gets a solid tile on the rail; the partner CTA stays soft */
    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .nav-mode-exit-btn.is-enter > i {
        color: var(--sn-c);
        background: color-mix(in srgb, var(--sn-c) 13%, #fff);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sn-c) 26%, #fff);
    }

    body.sidebar-collapsed #sidebar:not(:hover):not(:focus-within) .sidebar-footer { padding: 8px 0 calc(10px + var(--safe-b)); }
}

/* ==========================================================================
   The phone menu button (#mobile-menu-fab)
   --------------------------------------------------------------------------
   Same size and height as the + button on the right, so the pair reads as one
   row above the bottom bar. Deep green so it does not compete with the bright
   + (an action); a white ring keeps it clear of whatever scrolls beneath.
   ui-kit.js still decides when it shows (phones, menu closed, no POS bar).
   ========================================================================== */

#mobile-menu-fab.menu-fab {
    left: calc(var(--fixed-btn-offset) + env(safe-area-inset-left, 0px));
    bottom: calc(var(--bnav-h) + var(--fixed-btn-offset) + var(--safe-b));
    width: var(--fixed-btn-size); height: var(--fixed-btn-size);
    padding: 0; border: 0; border-radius: 999px;
    align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #059669 0%, #047857 48%, #065f46 100%);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, .94),
        0 12px 26px -8px rgba(4, 95, 70, .6),
        0 3px 8px rgba(15, 23, 42, .16),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .18s var(--ease-out), box-shadow .18s ease, background .18s ease;
}
#mobile-menu-fab.menu-fab::after { content: none; display: none; }

/* three bars, the last one short — a calmer menu glyph than the icon font's */
#mobile-menu-fab .sn-fab-bars {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 18px; pointer-events: none;
}
#mobile-menu-fab .sn-fab-bars span {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    #mobile-menu-fab.menu-fab:hover {
        transform: translateY(-2px);
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, .94),
            0 16px 32px -8px rgba(4, 95, 70, .66),
            0 4px 10px rgba(15, 23, 42, .18),
            inset 0 1px 0 rgba(255, 255, 255, .22);
    }
}

/* pressed and open: sinks in, darker, bars even out */
#mobile-menu-fab.menu-fab:active,
#mobile-menu-fab.menu-fab[aria-expanded="true"] {
    transform: scale(.92);
    background: linear-gradient(145deg, #047857 0%, #065f46 60%, #064e3b 100%);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, .94),
        0 6px 14px -6px rgba(4, 95, 70, .6),
        inset 0 2px 4px rgba(0, 0, 0, .18);
    transition-duration: .06s;
}

#mobile-menu-fab.menu-fab:focus-visible {
    outline: 3px solid rgba(5, 150, 105, .55); outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    #mobile-menu-fab.menu-fab,
    #sidebar .nav-item,
    #sidebar .nav-group-summary,
    #sidebar .nav-group-caret,
    #sidebar .nav-subitem::after { transition: none; }
    #mobile-menu-fab.menu-fab:hover,
    #mobile-menu-fab.menu-fab:active { transform: none; }
}

/* Movable menu button (ui-kit.js): lifts while it is being dragged. */
#mobile-menu-fab.menu-fab.is-dragging {
    transform: scale(1.08);
    cursor: grabbing;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, .94),
        0 18px 34px -10px rgba(4, 95, 70, .7),
        0 6px 14px rgba(15, 23, 42, .2);
}


/* Long press on the menu button: colour picker (ui-kit.js). */
#mobile-menu-fab.menu-fab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#sn-fab-colors {
    position: fixed; z-index: 10050; width: 212px; padding: 12px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 18px;
    box-shadow: 0 22px 44px -18px rgba(15, 23, 42, .45), 0 4px 12px rgba(15, 23, 42, .1);
    font-family: inherit; color: #000;
    animation: snFcIn .16s cubic-bezier(.2, .7, .2, 1);
}
@keyframes snFcIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
#sn-fab-colors .sn-fc-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #000; }
#sn-fab-colors .sn-fc-x { width: 32px; height: 32px; border: 0; border-radius: 10px; background: #f1f5f9; color: #334155; display: grid; place-items: center; cursor: pointer; }
#sn-fab-colors .sn-fc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; }
#sn-fab-colors .sn-fc-sw {
    width: 48px; height: 48px; border-radius: 999px; border: 0; cursor: pointer; color: #fff;
    display: grid; place-items: center; font-size: 18px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e2e8f0, 0 6px 12px -6px rgba(15, 23, 42, .45);
}
#sn-fab-colors .sn-fc-sw i { opacity: 0; }
#sn-fab-colors .sn-fc-sw.is-on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000, 0 6px 12px -6px rgba(15, 23, 42, .45); }
#sn-fab-colors .sn-fc-sw.is-on i { opacity: 1; }
#sn-fab-colors .sn-fc-sw:focus-visible, #sn-fab-colors .sn-fc-reset:focus-visible { outline: 2px solid #059669; outline-offset: 3px; }
#sn-fab-colors .sn-fc-reset {
    display: block; width: 100%; margin-top: 12px; height: 40px; border: 1px solid #e2e8f0; border-radius: 12px;
    background: #fff; color: #000; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { #sn-fab-colors { animation: none; } }