/* ============================================================================
   ATS-NMS design tokens (System Refactoring spec, Phase 3 — 2026-09-22)

   One file, loaded right after tailwind.css, that (1) documents and completes the
   token CONTRACT every theme must fill, and (2) adds the "Lapis & Brass" theme taken
   from the Hadaanat Identity artifact, Option B.

   The contract (Tailwind maps these in tailwind.config.js, so bg-surface, text-ink,
   border-subtle… follow the theme automatically):

     Surfaces   --bg-page  --bg-surface  --bg-elevated  --bg-solid  --bg-thead  --bg-sidebar
     Text       --text-primary  --text-muted  --text-on-brand
     Brand      --color-primary  --color-primary-hover  --color-accent
                --a1 / --a2  (brand gradient: header bands, active nav)
     Lines      --border-subtle  --focus-ring
     Depth      --shadow-card  --shadow-elevated
     Status     --status-{success,warning,danger,info}-{fg,bg}   (meaning, not brand)
     Charts     --chart-1 … --chart-6, --chart-grid, --chart-text
     Type       --font-body  --font-display
     Shape      --radius-sm  --radius-md  --radius-lg

   Status colours carry meaning (red = absent, green = present) and stay the same
   hue in every theme; only their tints move for contrast. Glass tints keep their
   inline definitions in views/layouts/main.ejs; this file adds what they lacked.
   ============================================================================ */

:root {
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --focus-ring: rgb(37 99 235 / 0.45);

    --status-success-fg: #166534; --status-success-bg: #dcfce7;
    --status-warning-fg: #92400e; --status-warning-bg: #fef3c7;
    --status-danger-fg:  #991b1b; --status-danger-bg:  #fee2e2;
    --status-info-fg:    #1e40af; --status-info-bg:    #dbeafe;

    /* Chart palette: distinguishable categories, first two = the brand pair. */
    --chart-1: var(--color-primary, #2563eb);
    --chart-2: var(--color-accent, #f59e0b);
    --chart-3: #0d9488;
    --chart-4: #7c3aed;
    --chart-5: #db2777;
    --chart-6: #64748b;
    --chart-grid: rgb(100 116 139 / 0.18);
    --chart-text: var(--text-muted, #6b7280);

    /* Tone = status meaning for KPI numbers and chart slices named Present / Late / Absent.
       Light values meet 4.5:1 on white; the dark set below is lighter for dark surfaces. */
    --tone-ok:   #047857;
    --tone-warn: #b45309;
    --tone-bad:  #dc2626;
}
html[data-mode="dark"] { --tone-ok: #34d399; --tone-warn: #fbbf24; --tone-bad: #f87171; }

/* ─── Lapis & Brass (Hadaanat Identity · Option B) ───────────────────────────────
   Palette from the artifact: lapis #1F3A93 · brass #B8860B · cool white #F4F6FA ·
   slate #4E5A75 · ink #182033. Type: Libre Baskerville (display) + Source Sans 3 (body).
   Contrast (WCAG): lapis on white 10.1:1 · ink on page 15:1 · slate on white 6.9:1.
   Brass on white is only 3.25:1, so brass is a FILL (with ink text on it, 5.0:1) or
   a rule/border — never text on white. Brass-coloured text uses --brass-ink #8A6408
   (5.4:1). On the lapis sidebar the brass accent lightens to #E8C66A (6.1:1).
   ─────────────────────────────────────────────────────────────────────────────── */
html[data-theme="lapis"] {   /* html + attribute beats the layout's inline :root block (same specificity otherwise, and it loads later) */
    --lapis: #1F3A93;
    --lapis-deep: #162C72;
    --brass: #B8860B;
    --brass-ink: #8A6408;
    --brass-light: #E8C66A;
    --slate: #4E5A75;
    --ink: #182033;

    --bg-page:        #F4F6FA;
    --bg-surface:     #FFFFFF;
    --bg-elevated:    #F8F9FC;
    --bg-solid:       #FFFFFF;
    --bg-thead:       #E6EAF3;
    --bg-sidebar:     linear-gradient(180deg, #1F3A93 0%, #182F7A 100%);
    --text-primary:   #182033;
    --text-muted:     #4E5A75;
    --text-on-brand:  #FFFFFF;
    --color-primary:  #1F3A93;
    --color-primary-hover: #162C72;
    --color-accent:   #B8860B;
    --border-subtle:  #D8DDE8;
    --focus-ring:     rgb(184 134 11 / 0.55);
    --shadow-card:    0 1px 2px rgb(24 32 51 / 0.06), 0 2px 8px -2px rgb(24 32 51 / 0.08);
    --shadow-elevated:0 14px 36px -12px rgb(24 32 51 / 0.28);
    --a1: #1F3A93;
    --a2: #3A56B8;

    /* The Tailwind blue/indigo classes used across 200+ views, remapped to lapis (see below). */
    --lp-tint:    #EEF1FA;   /* bg-blue-50 / indigo-50 */
    --lp-tint-2:  #E3E8F7;   /* bg-blue-100 / indigo-100 */
    --lp-line:    #C9D2EC;   /* border-blue-100…300 */
    --lp-fg:      #1F3A93;   /* text-blue-500/600, indigo-500/600 */
    --lp-fg-deep: #162C72;   /* text-blue-700…900, indigo-700/800 */
    --lp-btn:     #1F3A93;   /* bg-blue-500/600, indigo-500/600 */
    --lp-btn-hover: #162C72; /* bg-blue-700…900, hover states */
    --lp-sidebar-sub: linear-gradient(180deg, #1F3A93 0%, #182F7A 100%);

    --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

    --status-info-fg: #1F3A93; --status-info-bg: #E3E8F7;
    /* Chart colours (A54, owner 2026-10-19 "Lapis Theam color: please fix it."): lapis, brass, jade, orchid, sky -
       every pair tells apart with normal and colour-blind vision (dataviz validator, all pairs, on white): the old
       steel blue / violet (3 / 4) were too close and the deep lapis too dark for a chart line. 6 stays the neutral slate. */
    --chart-1: #2F5BB7;
    --chart-2: #B8860B;
    --chart-3: #0B7A5E;
    --chart-4: #C86FA8;
    --chart-5: #3E9BD6;
    --chart-6: #4E5A75;
    --chart-grid: rgb(78 90 117 / 0.16);
    --chart-text: #4E5A75;
}
html[data-theme="lapis"] { background: var(--bg-page); }

/* Lapis — DARK (premium light/dark toggle, html[data-mode="dark"]). Same identity at night: a deep
   lapis-navy page, lapis surfaces one step lighter, brass-light as the accent, and every blue class
   lifted to a lighter lapis so text and buttons keep their contrast (>= 4.5:1 on --bg-surface).
   Before 2026-09-23 Lapis had no dark set, so the toggle changed only the pieces that read the
   generic dark rules and left the rest light: the "offset" colours the owner saw. */
html[data-theme="lapis"][data-mode="dark"] {
    --bg-page:        #0D1322;
    --bg-surface:     #151D33;
    --bg-elevated:    #1B2542;
    --bg-solid:       #1B2542;
    --bg-thead:       #22305A;
    --bg-sidebar:     linear-gradient(180deg, #11265F 0%, #0A1740 100%);
    --text-primary:   #E6EAF4;
    --text-muted:     #A3AECB;
    --text-on-brand:  #FFFFFF;
    --color-primary:  #4B68CC;
    --color-primary-hover: #5E7AD8;
    --color-accent:   #E8C66A;
    --border-subtle:  #2C3858;
    --focus-ring:     rgb(232 198 106 / 0.55);
    --shadow-card:    0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -12px rgb(0 0 0 / 0.55);
    --shadow-elevated:0 24px 60px -20px rgb(0 0 0 / 0.75);

    --lp-tint:    rgb(143 168 240 / 0.10);
    --lp-tint-2:  rgb(143 168 240 / 0.16);
    --lp-line:    rgb(143 168 240 / 0.30);
    --lp-fg:      #9DB3F2;
    --lp-fg-deep: #C4D1F7;
    --lp-btn:     #3A56B8;
    --lp-btn-hover: #4B68CC;
    --lp-sidebar-sub: linear-gradient(180deg, #11265F 0%, #0A1740 100%);

    --status-success-fg: #6EE7A8; --status-success-bg: rgb(52 211 153 / 0.14);
    --status-warning-fg: #FCD27A; --status-warning-bg: rgb(251 191 36 / 0.14);
    --status-danger-fg:  #FCA5A5; --status-danger-bg:  rgb(248 113 113 / 0.15);
    --status-info-fg:    #A9BCF5; --status-info-bg:    rgb(143 168 240 / 0.14);

    /* A54: the same five families for the dark surface (#151D33), validated there, all pairs. */
    --chart-1: #585FC0;
    --chart-2: #B57809;
    --chart-3: #4CA375;
    --chart-4: #B3497F;
    --chart-5: #1F9AD3;
    --chart-6: #A3AECB;
    --chart-grid: rgb(163 174 203 / 0.14);
    --chart-text: #A3AECB;
    color-scheme: dark;
}
/* The layout body carries bg-gray-50; in Lapis dark it is the page, not a card. */
html[data-theme="lapis"][data-mode="dark"] body.bg-gray-50 { background-color: var(--bg-page) !important; }
/* Brass as a fill keeps ink text in both modes; brass as text lightens at night. */
html[data-theme="lapis"][data-mode="dark"] .text-accent { color: var(--brass-light) !important; }
html[data-theme="lapis"][data-mode="dark"] :is(input, select, textarea):focus { border-color: #7B96EA !important; box-shadow: 0 0 0 3px rgb(123 150 234 / 0.25) !important; }
html[data-theme="lapis"],
html[data-theme="lapis"] body { font-family: var(--font-body); color: var(--text-primary); }

/* Typography: the display serif carries page titles and report headings. */
[data-theme="lapis"] h1,
[data-theme="lapis"] .display,
[data-theme="lapis"] h1.display,
[data-theme="lapis"] h2.display { font-family: var(--font-display); letter-spacing: -0.005em; }
[data-theme="lapis"] h2,
[data-theme="lapis"] h3 { font-family: var(--font-body); }

/* Links and the legacy blue utility classes → lapis. */
[data-theme="lapis"] :is(.text-blue-500, .text-blue-600, .text-indigo-500, .text-indigo-600) { color: var(--lp-fg) !important; }
[data-theme="lapis"] :is(.text-blue-700, .text-blue-800, .text-blue-900, .text-indigo-700, .text-indigo-800) { color: var(--lp-fg-deep) !important; }
[data-theme="lapis"] :is(.hover\:text-blue-600, .hover\:text-blue-700, .hover\:text-blue-800):hover { color: var(--lp-fg-deep) !important; }
[data-theme="lapis"] :is(.bg-blue-50, .bg-indigo-50, .hover\:bg-blue-50:hover) { background-color: var(--lp-tint) !important; }
[data-theme="lapis"] :is(.bg-blue-100, .bg-indigo-100, .hover\:bg-blue-100:hover) { background-color: var(--lp-tint-2) !important; }
[data-theme="lapis"] :is(.border-blue-100, .border-blue-200, .border-blue-300, .border-indigo-200) { border-color: var(--lp-line) !important; }
[data-theme="lapis"] .border-blue-600 { border-color: var(--lp-btn) !important; }
[data-theme="lapis"] :is(.focus\:ring-blue-400, .focus\:ring-blue-500, .focus\:ring-indigo-400, .focus\:ring-indigo-500):focus { --tw-ring-color: rgb(58 86 184 / 0.45) !important; }

/* Buttons: primary = lapis; brass = the "achievement" button (ink text on brass). */
[data-theme="lapis"] :is(.bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600, .bg-primary) { background-color: var(--lp-btn) !important; color: #fff; }
[data-theme="lapis"] :is(.bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-indigo-700) { background-color: var(--lp-btn-hover) !important; color: #fff; }
[data-theme="lapis"] :is(.hover\:bg-blue-600, .hover\:bg-blue-700, .hover\:bg-blue-800, .hover\:bg-indigo-700, .hover\:bg-primary-hover):hover { background-color: var(--lp-btn-hover) !important; }
[data-theme="lapis"] a.bg-blue-600,
[data-theme="lapis"] button.bg-blue-600 { border-radius: var(--radius-md); box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 1px 2px rgb(24 32 51 / 0.18); }
[data-theme="lapis"] .bg-accent,
[data-theme="lapis"] .btn-brass { background-color: var(--brass) !important; color: var(--ink) !important; }
[data-theme="lapis"] .text-accent { color: var(--brass-ink) !important; }
[data-theme="lapis"] .bg-green-600 { background-color: #1E7B4F !important; }

/* Focus: a visible brass ring on every interactive control (keyboard users). */
[data-theme="lapis"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brass); outline-offset: 2px; box-shadow: 0 0 0 4px rgb(184 134 11 / 0.18);
}

/* Form fields */
[data-theme="lapis"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) {
    border-color: var(--border-subtle); background-color: var(--bg-solid); color: var(--text-primary); border-radius: var(--radius-sm);
}
[data-theme="lapis"] :is(input, select, textarea):focus { border-color: var(--lapis) !important; box-shadow: 0 0 0 3px rgb(31 58 147 / 0.15) !important; outline: none; }
[data-theme="lapis"] input[type=checkbox], [data-theme="lapis"] input[type=radio] { accent-color: var(--lapis); }

/* Cards and panels */
[data-theme="lapis"] .bg-surface { background-color: var(--bg-surface); }
[data-theme="lapis"] .shadow-sm, [data-theme="lapis"] .shadow-card { box-shadow: var(--shadow-card) !important; }
[data-theme="lapis"] .rounded-xl { border-radius: var(--radius-lg); }

/* Tables: opaque lapis-tinted header with a brass underline; calm row hover. */
[data-theme="lapis"] table thead th,
[data-theme="lapis"] .bg-thead { background-color: var(--bg-thead) !important; color: var(--text-primary); }
[data-theme="lapis"] table thead { border-bottom: 2px solid rgb(184 134 11 / 0.55); }
[data-theme="lapis"] [data-responsive-table].rs-zebra tbody tr:hover > td { background-color: color-mix(in srgb, var(--lp-fg) 6%, transparent); }

/* Modals, drawers, popovers */
[data-theme="lapis"] :is(dialog, .modal-panel, .frost-pop) { background: var(--bg-solid) !important; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-elevated); border-radius: var(--radius-lg); }

/* Sidebar: lapis panel, white text (base #sidebar rules), brass marks the active item. */
[data-theme="lapis"] #sidebar a:hover,
[data-theme="lapis"] #sidebar .nav-section-trigger:hover { background-color: rgb(255 255 255 / 0.10); }
/* Menu links carry hover:bg-blue-50 (server brandNavHover), which Lapis turns into the near-white --lp-tint with
   !important — that beat the rule above, so second-level rows hovered almost white under white text. Every row now
   hovers like the section rows; the active row keeps its brass (owner 2026-09-25). */
[data-theme="lapis"] #sidebar a:not(.is-active):hover { background-color: rgb(255 255 255 / 0.10) !important; }
[data-theme="lapis"] #sidebar a.is-active,
[data-theme="lapis"] #sidebar .nav-section-trigger.is-active {
    background: rgb(255 255 255 / 0.12) !important; box-shadow: inset 3px 0 0 var(--brass-light);
}
[data-theme="lapis"] #sidebar a.is-active i,
[data-theme="lapis"] #sidebar .nav-section-trigger.is-active i { color: var(--brass-light) !important; }
[data-theme="lapis"] #sidebar .nav-sublevel { background: var(--lp-sidebar-sub); }
/* The logo band carries bg-blue-600 (server brandBg); in Lapis the sidebar gradient is the band. */
[data-theme="lapis"] #sidebar .sidebar-brand { background: transparent !important; border-color: rgb(255 255 255 / 0.12); }

/* Brand gradient bands (report headers, page headers) read as lapis → a lighter lapis,
   with a brass rule under them — the Option B "gold marks achievement" note. */
[data-theme="lapis"] .brand-band { border-bottom: 3px solid var(--brass); }

/* Status badges: literal colours stay (meaning) — nothing to override. */

/* ─── Contextual help drawer + breadcrumbs (Phase 1/2 chrome, all themes) ──── */
.help-fab {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 999px; font-size: 1.15rem;
    background: var(--color-primary); color: #fff; box-shadow: var(--shadow-elevated);
    border: 0; cursor: pointer;
}
.help-fab:hover { background: var(--color-primary-hover); }
[data-theme="lapis"] .help-fab { box-shadow: 0 0 0 2px var(--brass), var(--shadow-elevated); }
@media print { .help-fab, .help-drawer, .help-backdrop, .crumbs, .report-actions { display: none !important; } }
.help-backdrop { position: fixed; inset: 0; background: rgb(15 23 42 / 0.32); z-index: 55; }
.help-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(28rem, 100vw); z-index: 60;
    background: var(--bg-solid, #fff); color: var(--text-primary); box-shadow: var(--shadow-elevated);
    transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column;
}
.help-drawer.is-open { transform: translateX(0); }
.help-drawer header { padding: 1rem 1.25rem; color: #fff; background: linear-gradient(135deg, var(--a1, #1e3a8a), var(--a2, #2563eb)); }
.help-drawer .help-body { padding: 1rem 1.25rem 2rem; overflow-y: auto; font-size: .92rem; line-height: 1.55; }
.help-drawer h4 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 1.1rem 0 .3rem; font-weight: 700; }
.help-drawer dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: 0; }
.help-drawer dt { font-weight: 600; }
.help-drawer dd { margin: 0; color: var(--text-muted); }
/* Step-by-step tasks in the drawer: one fold per task, numbered steps. */
.help-drawer details.help-steps { border: 1px solid var(--border-subtle); border-radius: .5rem; padding: .45rem .75rem; margin: .4rem 0; }
.help-drawer details.help-steps > summary { cursor: pointer; font-weight: 600; }
.help-drawer details.help-steps[open] > summary { margin-bottom: .35rem; }
.crumbs { font-size: .8rem; color: var(--text-muted); margin: 0 0 .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.crumbs a { color: var(--color-primary); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { opacity: .5; }

/* Report charts panel (master report template) */
.report-charts { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 900px) { .report-charts.cols-2 { grid-template-columns: 1fr 1fr; } .report-charts.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.report-chart { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: .9rem 1rem; box-shadow: var(--shadow-card); }
.report-chart h3 { font-size: .85rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .5rem; font-family: var(--font-body); }
.report-chart .chart-box { position: relative; height: 220px; }
.kpi-trend { font-size: .72rem; font-weight: 700; margin-left: .35rem; }
.kpi-trend.up { color: var(--status-success-fg); } .kpi-trend.down { color: var(--status-danger-fg); } .kpi-trend.flat { color: var(--text-muted); }

/* Premium mode (org setting) paints the active nav item with the --a1→--a2 gradient; on a lapis
   sidebar that would be lapis-on-lapis. Lapis marks the active item in brass with ink text (5.0:1). */
html[data-theme="lapis"] { --m1: 31 58 147; --m2: 58 86 184; --m3: 184 134 11; }
[data-theme="lapis"][data-premium] #sidebar a.nav-link.is-active,
[data-theme="lapis"][data-premium] #sidebar .nav-section-trigger.is-active,
[data-theme="lapis"][data-premium] .nav-hlink.is-active {
    background-image: none !important; background-color: var(--brass) !important;
    border: 1px solid rgb(232 198 106 / 0.6) !important; box-shadow: 0 10px 24px -12px rgb(184 134 11 / 0.7) !important;
}
[data-theme="lapis"][data-premium] #sidebar a.nav-link.is-active :is(span, i),
[data-theme="lapis"][data-premium] #sidebar .nav-section-trigger.is-active :is(span, i),
[data-theme="lapis"][data-premium] .nav-hlink.is-active :is(span, i) { color: var(--ink) !important; }
[data-theme="lapis"][data-premium] #sidebar a.nav-link.is-active,
[data-theme="lapis"] #sidebar a.is-active { box-shadow: none; }

/* ─── Sidebar dock (owner ask 2026-09-22): Help · Theme · Layout · Profile · Logout in one row ── */
/* The corner help button is only needed where the sidebar is not pinned (phones, horizontal layout). */
@media (min-width: 1024px) { body:not([data-navmode="horizontal"]) .help-fab { display: none; } }
.sidebar-dock .dock-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.sidebar-dock .dock-panel { margin-bottom: .35rem; }
#sidebar .dock-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    min-height: 2.75rem; padding: .35rem .1rem; border: 0; border-radius: .55rem; cursor: pointer;
    font-size: .64rem; font-weight: 600; line-height: 1; letter-spacing: .01em; text-decoration: none;
    /* Links in #sidebar take --text-on-brand; buttons must too, or their currentColor tint differs. */
    color: var(--text-on-brand) !important; background: color-mix(in srgb, currentColor 9%, transparent);
    transition: background-color .12s ease, transform .12s ease;
}
#sidebar .dock-btn i { font-size: .95rem; margin: 0; }
#sidebar .dock-btn:hover, #sidebar .dock-btn.is-open { background: color-mix(in srgb, currentColor 18%, transparent); }
#sidebar .dock-btn:focus-visible { outline: 2px solid var(--color-accent, #f59e0b); outline-offset: 2px; }
/* Profile and Logout are solid buttons with white text in every theme (Profile was white-on-white). */
#sidebar .dock-btn.dock-profile { background: var(--color-primary, #2563eb); }
#sidebar .dock-btn.dock-profile:hover { background: var(--color-primary-hover, #1d4ed8); transform: translateY(-1px); }
#sidebar .dock-btn.dock-logout { background: #ef4444; }
#sidebar .dock-btn.dock-logout:hover { background: #dc2626; transform: translateY(-1px); }
#sidebar .dock-btn.dock-profile, #sidebar .dock-btn.dock-profile :is(span, i),
#sidebar .dock-btn.dock-logout, #sidebar .dock-btn.dock-logout :is(span, i) { color: #fff !important; }
/* Lapis: the sidebar is already lapis, so Profile takes the brass (white on brass-ink, 5.2:1). */
[data-theme="lapis"] #sidebar .dock-btn.dock-profile { background: var(--brass-ink, #8A6408); }
[data-theme="lapis"] #sidebar .dock-btn.dock-profile:hover { background: #6F5006; }
/* Glass: Profile gets the same frosted treatment as the red Logout, in blue. */
[data-theme^="glass"] #sidebar .dock-btn.dock-profile {
    background-image: linear-gradient(135deg, rgb(96 165 250 / 0.92), rgb(37 99 235 / 0.92));
    background-color: rgb(37 99 235 / 0.90);
    border: 1px solid rgb(255 255 255 / 0.35);
    box-shadow: 0 8px 20px -10px rgb(37 99 235 / 0.60), inset 0 1px 0 rgb(255 255 255 / 0.45);
}
[data-theme^="glass"] #sidebar .sidebar-foot a.dock-logout { border-radius: .55rem; }