/* ClinicOS Stage 2 — application shell v2 (white sidebar + workspace top bar).
   OPT-IN: every rule is scoped to `html body.cos-shell-on`, which js/shell_v2.js adds only when the shell switch is on.
   With the switch off this file has no effect and the classic shell renders exactly as before.
   Specificity note: the classic CSS (css/app.css, the style block injected by navigation_2026.js) styles the sidebar with
   !important at up to (0,3,0). To win without touching those files, rules here use the `html body.cos-shell-on` prefix
   (+ !important only where the legacy rule is !important). Documented, unavoidable, scoped. Tokens: css/ds/tokens.css. */

html body.cos-shell-on { background: transparent; font-family: var(--cos-font); }

/* ── Global mosaic background (approved image, assets/bg/clinicos-mosaic.webp) ─────────────────────────────────────────
   One fixed layer behind the whole workspace: it never moves, restarts or resizes when the page changes, and the content scrolls over it.
   Pure CSS (no script, no animation, no parallax). The base colour lives on the layer itself, so navigation, cards, tables, forms and
   dialogs keep their own surfaces and nothing else changes. The veil tones the image down: light mode keeps it restrained,
   dark mode lets only a faint trace through so no bright area ever sits behind dark content. Height uses the *large* viewport so the
   mobile address bar showing/hiding cannot rescale it. */
html body.cos-shell-on {
  --cos-mosaic-img: url("../assets/bg/clinicos-mosaic.webp");
  --cos-mosaic-left: var(--cos-sidebar-w, 248px);            /* the mosaic fills the workspace beside the sidebar, so its edges are visible, not hidden under it */
  --cos-mosaic-base: var(--bg, var(--cos-color-bg-app));   /* the page colour the legacy shell already paints, so nothing shifts */
  --cos-mosaic-veil: color-mix(in srgb, var(--cos-mosaic-base) var(--cos-mosaic-veil-alpha, 76%), transparent);                       /* reading area (centre) */
  --cos-mosaic-veil-edge: color-mix(in srgb, var(--cos-mosaic-base) var(--cos-mosaic-veil-alpha-edge, 40%), transparent);             /* screen edges: the mosaic shows strongest here, where there is little text */
  --cos-mosaic-veil-narrow: color-mix(in srgb, var(--cos-mosaic-base) var(--cos-mosaic-veil-alpha-narrow, 74%), transparent);          /* narrow screens: text spans the full width, so the mosaic is a little softer */
  --cos-mosaic-veil-layer: radial-gradient(ellipse 95% 90% at 50% 45%, var(--cos-mosaic-veil) 0%, var(--cos-mosaic-veil) 30%, var(--cos-mosaic-veil-edge) 100%);
}
html body.cos-shell-on::before,
html body.cos-shell-on::after {
  content: ""; position: fixed; top: 0; left: var(--cos-mosaic-left); right: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
  background-color: var(--cos-mosaic-base);
  background-image: var(--cos-mosaic-veil-layer), var(--cos-mosaic-img);
  /* layer 1 = veil (repeats so a fractional-pixel edge can never expose the un-veiled image), layer 2 = the mosaic */
  background-size: 100% 100%, cover; background-position: 0 0, center; background-repeat: repeat, no-repeat;
}
html body.cos-shell-on::after { display: none; }
@media (min-width: 769px) and (max-width: 1279px) { html body.cos-shell-on { --cos-mosaic-left: 72px; } }   /* icon rail */
@media (max-width: 768px) { html body.cos-shell-on { --cos-mosaic-left: 0px; } }                            /* sidebar is an overlay */
/* The legacy shell paints the page colour on body, #app, .main and .content (several !important): make those transparent so the layer shows through.
   Cards, tables, forms, the sidebar, the top bar and dialogs keep their own surfaces. */
html body.cos-shell-on,
html body.cos-shell-on #app,
html body.cos-shell-on .main,
html body.cos-shell-on .content { background: transparent !important; }
/* Narrow / portrait screens: "cover" would crop to the white centre, so the left edge of the mosaic fills the left half and the right edge fills the right half;
   each half fades into the page colour towards the middle (no transform, no hard seam). */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  html body.cos-shell-on::before,
  html body.cos-shell-on::after { width: calc((100% - var(--cos-mosaic-left)) / 2); background-size: 100% 100%, 100% 100%, auto 100%; background-repeat: repeat, repeat, no-repeat; background-position: 0 0, 0 0, left center; }
  html body.cos-shell-on::before { right: auto;
    background-image: linear-gradient(var(--cos-mosaic-veil-narrow), var(--cos-mosaic-veil-narrow)), linear-gradient(to right, transparent 45%, var(--cos-mosaic-base) 100%), var(--cos-mosaic-img); }
  html body.cos-shell-on::after { display: block; left: auto; right: 0; background-position: 0 0, 0 0, right center;
    background-image: linear-gradient(var(--cos-mosaic-veil-narrow), var(--cos-mosaic-veil-narrow)), linear-gradient(to left, transparent 45%, var(--cos-mosaic-base) 100%), var(--cos-mosaic-img); }
}
@media print, (prefers-contrast: more) {
  html body.cos-shell-on::before, html body.cos-shell-on::after { display: none; }
  html body.cos-shell-on, html body.cos-shell-on #app, html body.cos-shell-on .main, html body.cos-shell-on .content { background: var(--cos-mosaic-base) !important; }
}

/* ── Layout ─────────────────────────────────────────────── */
html body.cos-shell-on .layout { background: transparent; }
html body.cos-shell-on .layout > .sidebar,
html body.cos-shell-on .sidebar.nav-2026,
html body.cos-shell-on .sidebar {
  flex: 0 0 var(--cos-sidebar-w) !important; width: var(--cos-sidebar-w) !important; min-width: 0;
  background: var(--cos-sidebar-bg, var(--cos-color-bg-surface)) !important; color: var(--cos-color-text-primary) !important;
  border-right: 1px solid var(--cos-color-border-subtle) !important; box-shadow: none !important;
  scrollbar-width: thin; scrollbar-color: var(--cos-color-border) transparent;
}
@media (min-width: 769px) {
  html body.cos-shell-on .layout > .sidebar { position: sticky; top: 0; height: 100dvh; align-self: flex-start; }
}

/* ── Brand ──────────────────────────────────────────────── */
html body.cos-shell-on .sidebar .sb-brand { padding: var(--cos-space-5) var(--cos-space-5) var(--cos-space-3) !important; border: 0 !important; }
html body.cos-shell-on .sidebar .sb-mark { gap: var(--cos-space-3); align-items: center; }
html body.cos-shell-on .sidebar .sb-logo-img { width: 34px !important; height: 34px !important; border-radius: 0 !important; box-shadow: none !important; }
html body.cos-shell-on .sidebar .sb-name { color: var(--cos-color-text-primary) !important; font: var(--cos-weight-bold) 1.375rem/1 var(--cos-font) !important; letter-spacing: -.03em !important; text-shadow: none !important; }
html body.cos-shell-on .sidebar .sb-tagline { display: none !important; }
html body.cos-shell-on .sidebar .sb-office-pill { display: none !important; }   /* office context lives in the top bar (mirrors #sb-office) */
html body.cos-shell-on .sidebar #sb-greeting { display: none !important; }

/* ── Navigation ─────────────────────────────────────────── */
html body.cos-shell-on .sidebar .sb-nav { padding: var(--cos-space-2) var(--cos-space-3) var(--cos-space-4) !important; }
html body.cos-shell-on .sidebar .sb-sect {
  display: flex !important; align-items: center; min-height: 28px;
  margin: var(--cos-space-4) 0 var(--cos-space-1) !important; padding: 0 var(--cos-space-3) !important;
  color: var(--cos-color-text-muted) !important; font: var(--cos-weight-semibold) 11px/1.3 var(--cos-font) !important; letter-spacing: .08em !important; text-transform: uppercase;
}
html body.cos-shell-on .sidebar .sb-section-toggle { color: var(--cos-color-text-muted) !important; background: transparent !important; width: 24px; height: 24px; }
html body.cos-shell-on .sidebar .sb-section-toggle:hover { background: var(--cos-color-bg-hover) !important; color: var(--cos-color-text-primary) !important; }
html body.cos-shell-on .sidebar .sb-link {
  position: relative; display: flex; align-items: center; gap: var(--cos-space-3);
  width: 100% !important; min-height: 40px; margin: 1px 0 !important; padding: 0 var(--cos-space-3) 0 var(--cos-space-4) !important;
  border: 0 !important; border-radius: var(--cos-radius-md) !important; box-shadow: none !important; transform: none !important;
  background: transparent !important; color: var(--cos-color-text-secondary) !important;
  font: var(--cos-weight-medium) 0.875rem/1.2 var(--cos-font) !important; text-align: left;
  transition: background-color var(--cos-nav-transition, 160ms) var(--cos-ease), color var(--cos-nav-transition, 160ms) var(--cos-ease);
}
html body.cos-shell-on .sidebar .sb-link:hover { background: var(--cos-nav-hover-bg, var(--cos-color-bg-hover)) !important; color: var(--cos-color-text-primary) !important; }
html body.cos-shell-on .sidebar .sb-link:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: -2px; }
html body.cos-shell-on .sidebar .sb-link.active,
html body.cos-shell-on .sidebar .sb-link[aria-current="page"] {
  background: var(--cos-nav-active-bg, var(--cos-color-bg-selected)) !important; color: var(--cos-color-text-primary) !important; font-weight: var(--cos-weight-semibold) !important;
}
html body.cos-shell-on .sidebar .sb-link.active::before,
html body.cos-shell-on .sidebar .sb-link[aria-current="page"]::before {
  content: "" !important; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; height: auto; border-radius: 0 3px 3px 0; background: var(--cos-color-brand-accent);
}
/* Legacy emoji stays in the DOM (hotfixes read link text) but is not shown; the line icon replaces it. */
html body.cos-shell-on .sidebar .sb-link .icon { display: none !important; }
html body.cos-shell-on .sidebar .sb-link .cos-nav-ico { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--cos-nav-icon, var(--cos-color-text-muted)); }
html body.cos-shell-on .sidebar .sb-link .cos-nav-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html body.cos-shell-on .sidebar .sb-link.active .cos-nav-ico,
html body.cos-shell-on .sidebar .sb-link[aria-current="page"] .cos-nav-ico { color: var(--cos-nav-icon-active, var(--cos-color-brand-primary)); }
/* the classic hotfix rules that hide collapsed / searched-out / redundant links must keep working */
html body.cos-shell-on .nav-2026 .section-collapsed,
html body.cos-shell-on .nav-2026 .search-hidden,
html body.cos-shell-on .nav-2026 .sb-redundant-route { display: none !important; }
html body.cos-shell-on .nav-2026 .is-searching .section-collapsed:not(.search-hidden) { display: flex !important; }

/* ── Sidebar foot: user card ────────────────────────────── */
html body.cos-shell-on .sidebar .sb-user {
  position: sticky; bottom: 0; margin: var(--cos-space-2) var(--cos-space-3) var(--cos-space-3) !important; padding: var(--cos-space-3) !important;
  background: var(--cos-color-bg-surface) !important; border: 1px solid var(--cos-color-border-subtle) !important; border-radius: var(--cos-radius-md) !important; box-shadow: var(--cos-shadow-1) !important;
}
html body.cos-shell-on .sidebar .sb-avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; background: var(--cos-tone-teal-soft) !important; color: var(--cos-tone-teal-ink) !important; font: var(--cos-weight-semibold) 12px/1 var(--cos-font) !important; box-shadow: none !important; }
html body.cos-shell-on .sidebar .sb-uname { color: var(--cos-color-text-primary) !important; font: var(--cos-weight-semibold) 0.8125rem/1.2 var(--cos-font) !important; }
html body.cos-shell-on .sidebar .sb-urole { color: var(--cos-color-text-muted) !important; font: 0.75rem/1.2 var(--cos-font) !important; }
html body.cos-shell-on .sidebar .sb-logout { font-size: 0 !important; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--cos-radius-sm); color: var(--cos-color-text-muted) !important; }
html body.cos-shell-on .sidebar .sb-logout svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html body.cos-shell-on .sidebar .sb-logout:hover { background: var(--cos-color-danger-bg) !important; color: var(--cos-color-danger) !important; }
html body.cos-shell-on .sidebar > div:last-child:not(.sb-user):not(.sb-nav) { color: var(--cos-color-text-muted) !important; }

/* ── Top bar ────────────────────────────────────────────── */
html body.cos-shell-on .topbar {
  height: 68px !important; padding: 0 var(--cos-page-gutter, 28px) !important; gap: var(--cos-space-4);
  background: var(--cos-color-bg-app) !important; backdrop-filter: none !important; border-bottom: 1px solid var(--cos-color-border-subtle) !important;
}
html body.cos-shell-on .topbar-title { color: var(--cos-color-text-primary) !important; font: var(--cos-weight-semibold) 1.0625rem/1.2 var(--cos-font) !important; letter-spacing: -.02em !important; white-space: nowrap; }
html body.cos-shell-on #sb-toggle { display: none !important; }            /* replaced by the labelled #cos-menu-btn */
html body.cos-shell-on .topbar-home-btn,
html body.cos-shell-on .topbar #v346d-home-btn,
html body.cos-shell-on .topbar .topbar-actions .topbar-home-btn,
html body.cos-shell-on .topbar .topbar-actions #v346d-home-btn { display: none !important; }
/* hotfix v346D writes an inline `display:inline-flex !important`, which no stylesheet can beat — so collapse it instead. Home stays first in the navigation. */
html body.cos-shell-on #v346d-home-btn, html body.cos-shell-on .topbar-home-btn { visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; pointer-events: none !important; }
html body.cos-shell-on #cos-topbar-tools { display: flex; align-items: center; gap: var(--cos-space-3); flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
html body.cos-shell-on #cos-search-slot { flex: 1 1 320px; max-width: 480px; min-width: 0; }
html body.cos-shell-on #cos-search-slot .sb-finder {
  height: var(--cos-control-lg); margin: 0 !important; padding: 0 var(--cos-space-4) !important; gap: var(--cos-space-2);
  background: var(--cos-color-bg-hover) !important; border: 1px solid transparent !important; border-radius: var(--cos-radius-pill) !important; box-shadow: none !important;
}
html body.cos-shell-on #cos-search-slot .sb-finder:focus-within { background: var(--cos-color-bg-surface) !important; border-color: var(--cos-color-focus) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cos-color-focus) 25%, transparent) !important; }
html body.cos-shell-on #cos-search-slot .sb-finder input { color: var(--cos-color-text-primary) !important; font-size: 0.8125rem !important; }
html body.cos-shell-on #cos-search-slot .sb-finder input::placeholder { color: var(--cos-color-text-muted) !important; }
html body.cos-shell-on #cos-search-slot .sb-finder kbd { color: var(--cos-color-text-muted) !important; background: var(--cos-color-bg-surface) !important; border: 1px solid var(--cos-color-border-subtle) !important; border-radius: var(--cos-radius-sm) !important; }
html body.cos-shell-on #cos-search-slot .sb-finder > span { color: var(--cos-color-text-muted) !important; }

html body.cos-shell-on #cos-office-ctx {
  display: inline-flex; align-items: center; gap: var(--cos-space-2); height: var(--cos-control-md); padding: 0 var(--cos-space-4) 0 var(--cos-space-3);
  background: var(--cos-color-bg-surface); border: 1px solid var(--cos-color-border-subtle); border-radius: var(--cos-radius-pill); box-shadow: var(--cos-shadow-1);
  color: var(--cos-color-text-primary); font: var(--cos-weight-medium) 0.8125rem/1 var(--cos-font); white-space: nowrap; max-width: 260px; cursor: default;
}
html body.cos-shell-on #cos-office-scope{position:relative;min-width:0}
html body.cos-shell-on #cos-office-ctx{cursor:pointer;font:inherit}
html body.cos-shell-on #cos-office-ctx:focus-visible{outline:3px solid color-mix(in srgb,var(--cos-color-brand-primary) 35%,transparent);outline-offset:2px}
html body.cos-shell-on #cos-office-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:230px;max-width:min(340px,calc(100vw - 24px));padding:8px;border:1px solid var(--cos-color-border-subtle);border-radius:14px;background:var(--cos-color-bg-surface);box-shadow:0 18px 48px rgba(15,23,42,.18)}
html body.cos-shell-on #cos-office-menu[hidden]{display:none}
html body.cos-shell-on #cos-office-menu button{display:flex;width:100%;align-items:center;gap:9px;padding:10px 11px;border:0;border-radius:9px;background:transparent;color:var(--cos-color-text-primary);font:inherit;font-weight:650;text-align:left;cursor:pointer}
html body.cos-shell-on #cos-office-menu button:hover,html body.cos-shell-on #cos-office-menu button:focus-visible{background:var(--cos-color-surface-hover);outline:none}
html body.cos-shell-on #cos-office-menu button[aria-checked="true"]{background:color-mix(in srgb,var(--cos-color-brand-primary) 11%,transparent);color:var(--cos-color-brand-primary)}
html body.cos-shell-on #cos-office-menu button[aria-checked="true"]::before{content:'✓';font-weight:900}
html body.cos-shell-on #cos-office-menu .empty{padding:10px;color:var(--cos-color-text-muted);font-size:.82rem}
html body.cos-shell-on #cos-office-ctx .lbl { overflow: hidden; text-overflow: ellipsis; }
html body.cos-shell-on #cos-office-ctx .cap { color: var(--cos-color-text-muted); font-weight: var(--cos-weight-regular); }
html body.cos-shell-on #cos-office-ctx svg,
html body.cos-shell-on #cos-menu-btn svg,
html body.cos-shell-on #cos-account-menu svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html body.cos-shell-on #cos-office-ctx svg { color: var(--cos-color-brand-primary); }

html body.cos-shell-on #cos-menu-btn { display: none; align-items: center; gap: var(--cos-space-2); height: var(--cos-control-md); padding: 0 var(--cos-space-3); border: 1px solid var(--cos-color-border); border-radius: var(--cos-radius-md); background: var(--cos-color-bg-surface); color: var(--cos-color-text-primary); font: var(--cos-weight-medium) 0.8125rem/1 var(--cos-font); cursor: pointer; }
html body.cos-shell-on #cos-menu-btn:focus-visible,
html body.cos-shell-on #cos-account-btn:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: 2px; }

html body.cos-shell-on #cos-account { position: relative; }
html body.cos-shell-on #cos-account-btn { display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 4px;border:1px solid var(--cos-color-border-subtle);border-radius:var(--cos-radius-pill);background:var(--cos-color-bg-surface);color:var(--cos-color-text-primary);font:var(--cos-weight-semibold) .8125rem/1 var(--cos-font);cursor:pointer;max-width:190px}
html body.cos-shell-on #cos-account-btn .avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cos-color-brand-navy);color:#fff;flex:none}
html body.cos-shell-on #cos-account-btn .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body.cos-shell-on #cos-account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 300; width: 280px; padding: var(--cos-space-2);
  background: var(--cos-color-bg-surface); border: 1px solid var(--cos-color-border-subtle); border-radius: var(--cos-radius-lg); box-shadow: var(--cos-shadow-2);
}
html body.cos-shell-on #cos-account-menu[hidden] { display: none; }
html body.cos-shell-on #cos-account-menu .who { display:block;width:100%;height:auto;padding:var(--cos-space-3);border:0;border-bottom:1px solid var(--cos-color-border-subtle);border-radius:0;background:none;margin-bottom:var(--cos-space-2);text-align:left;cursor:pointer; }
html body.cos-shell-on #cos-account-menu .who b { display: block; color: var(--cos-color-text-primary); font-weight: var(--cos-weight-semibold); }
html body.cos-shell-on #cos-account-menu .who span { color: var(--cos-color-text-muted); font-size: 0.75rem; }
html body.cos-shell-on #cos-account-menu .row { display: flex; align-items: center; justify-content: space-between; gap: var(--cos-space-3); padding: var(--cos-space-2) var(--cos-space-3); color: var(--cos-color-text-secondary); font-size: 0.8125rem; }
html body.cos-shell-on #cos-account-menu button.item { display: flex; align-items: center; gap: var(--cos-space-3); width: 100%; height: 38px; padding: 0 var(--cos-space-3); border: 0; border-radius: var(--cos-radius-md); background: none; color: var(--cos-color-text-primary); font: var(--cos-weight-medium) 0.8125rem/1 var(--cos-font); text-align: left; cursor: pointer; }
html body.cos-shell-on #cos-account-menu button.item:hover { background: var(--cos-color-bg-hover); }
html body.cos-shell-on #cos-account-menu button.item:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: -2px; }
html body.cos-shell-on #cos-account-menu button.item.danger { color: var(--cos-color-danger); }
html body.cos-shell-on #cos-account-menu .theme-select { min-width: 110px; }
html body.cos-shell-on .topbar-actions { min-width: 0 !important; }
html body.cos-shell-on #cos-notif-slot[hidden] { display: none; }               /* reserved for a future notifications feature — nothing renders today */

/* content area breathes like the mockup */
html body.cos-shell-on .content { padding-left: var(--cos-page-gutter, 28px); padding-right: var(--cos-page-gutter, 28px); }

/* ── Stage 3: module navigation (replaces the visible classic link list; the classic list stays in the DOM, hidden, for setupSidebar and hotfixes) ── */
html body.cos-shell-on.cos-nav2 .sidebar .sb-nav { display: none !important; }
html body.cos-shell-on #cos-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--cos-space-2) var(--cos-space-3) var(--cos-space-4); scrollbar-width: thin; }
html body.cos-shell-on #cos-nav .cos-mod { margin: 1px 0; }
html body.cos-shell-on #cos-nav .cos-mod-row { display: flex; align-items: center; }
html body.cos-shell-on #cos-nav .cos-mod-row .cos-mod-btn { flex: 1 1 auto; min-width: 0; }
html body.cos-shell-on #cos-nav .cos-mod-btn,
html body.cos-shell-on #cos-nav .cos-item {
  position: relative; display: flex; align-items: center; gap: var(--cos-space-3); width: 100%; min-height: 40px; padding: 0 var(--cos-space-3) 0 var(--cos-space-4);
  border: 0; border-radius: var(--cos-radius-md); background: transparent; color: var(--cos-color-text-secondary); text-align: left; cursor: pointer;
  font: var(--cos-weight-medium) 0.875rem/1.2 var(--cos-font); transition: background-color var(--cos-nav-transition, 160ms) var(--cos-ease), color var(--cos-nav-transition, 160ms) var(--cos-ease);
}
html body.cos-shell-on #cos-nav .cos-item { min-height: 34px; padding-left: calc(var(--cos-space-4) + 20px + var(--cos-space-3)); font-size: 0.8125rem; color: var(--cos-color-text-secondary); }
html body.cos-shell-on #cos-nav .cos-mod-btn:hover,
html body.cos-shell-on #cos-nav .cos-item:hover { background: var(--cos-nav-hover-bg, var(--cos-color-bg-hover)); color: var(--cos-color-text-primary); }
html body.cos-shell-on #cos-nav button:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: -2px; }
html body.cos-shell-on #cos-nav .cos-nav-ico { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--cos-nav-icon, var(--cos-color-text-muted)); }
html body.cos-shell-on #cos-nav .cos-nav-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html body.cos-shell-on #cos-nav .cos-chev { margin-left: auto; display: inline-grid; color: var(--cos-color-text-muted); transition: transform var(--cos-duration-fast) var(--cos-ease); }
html body.cos-shell-on #cos-nav .cos-chev svg,
html body.cos-shell-on #cos-nav .cos-mod-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body.cos-shell-on #cos-nav .cos-mod.is-open > .cos-mod-btn .cos-chev,
html body.cos-shell-on #cos-nav .cos-mod.is-open > .cos-mod-row .cos-mod-toggle svg { transform: rotate(180deg); }
html body.cos-shell-on #cos-nav .cos-mod-toggle { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--cos-radius-sm); background: none; color: var(--cos-color-text-muted); cursor: pointer; }
html body.cos-shell-on #cos-nav .cos-mod-toggle:hover { background: var(--cos-color-bg-hover); color: var(--cos-color-text-primary); }
html body.cos-shell-on #cos-nav .cos-sub { padding: 2px 0 var(--cos-space-2); }
html body.cos-shell-on #cos-nav .cos-sub[hidden] { display: none; }
html body.cos-shell-on #cos-nav .cos-group-label { margin: var(--cos-space-3) 0 2px calc(var(--cos-space-4) + 20px + var(--cos-space-3)); color: var(--cos-color-text-muted); font: var(--cos-weight-semibold) 10.5px/1.3 var(--cos-font); letter-spacing: .08em; text-transform: uppercase; }
html body.cos-shell-on #cos-nav [aria-current="page"] { background: var(--cos-nav-active-bg, var(--cos-color-bg-selected)); color: var(--cos-color-text-primary); font-weight: var(--cos-weight-semibold); }
html body.cos-shell-on #cos-nav .cos-mod-btn[aria-current="page"]::before,
html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-btn::before,
html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-row > .cos-mod-btn::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cos-color-brand-accent); }
html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-btn,
html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-row > .cos-mod-btn { color: var(--cos-color-text-primary); font-weight: var(--cos-weight-semibold); }
html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-btn .cos-nav-ico,
html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-row .cos-nav-ico,
html body.cos-shell-on #cos-nav [aria-current="page"] .cos-nav-ico { color: var(--cos-nav-icon-active, var(--cos-color-brand-primary)); }
html body.cos-shell-on #cos-nav .cos-nav-foot { margin-top: var(--cos-space-3); padding-top: var(--cos-space-3); border-top: 1px solid var(--cos-color-border-subtle); }

/* breadcrumb (replaces the plain title; #topbar-title stays in the DOM for hotfixes) */
html body.cos-shell-on #topbar-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body.cos-shell-on #cos-crumb ol { display: flex; align-items: center; gap: var(--cos-space-2); margin: 0; padding: 0; list-style: none; font: var(--cos-weight-medium) 0.9375rem/1.2 var(--cos-font); color: var(--cos-color-text-muted); white-space: nowrap; }
html body.cos-shell-on #cos-crumb li + li::before { content: "\203A"; margin-right: var(--cos-space-2); color: var(--cos-color-text-muted); }
html body.cos-shell-on #cos-crumb { min-width: 0; flex: 0 1 auto; }
html body.cos-shell-on #cos-crumb li { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
html body.cos-shell-on #cos-crumb li:not([aria-current="page"]) { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 769px) { html body.cos-shell-on #cos-crumb li.cos-crumb-parent { flex-shrink: 0; } }
/* RC1 audit: on tablets (769–1279px) the left block (menu + trail) must not shrink below its content, or the current page label runs under the search box (iPad portrait clipped “Inventory” to “Inventor”). The search slot and office chip give way instead. */
@media (min-width: 769px) and (max-width: 1279px) { html body.cos-shell-on .topbar > div:first-child { flex-shrink: 0; } }
@media (min-width: 769px) and (max-width: 899px) { html body.cos-shell-on #cos-crumb li:not([aria-current="page"]):not(.cos-crumb-parent) { display: none; } html body.cos-shell-on #cos-crumb li.cos-crumb-parent::before { content: none; } }   /* narrow tablets: parent › page only (deep Administration trails drop their middle level) */
/* the top-bar crumb is the one breadcrumb in Shell 2: the legacy in-page trail would repeat it */
html body.cos-shell-on .page > .clinic-breadcrumb { display: none !important; }
html body.cos-shell-on #cos-crumb li[aria-current="page"] { flex: 0 0 auto; max-width: 100%; }   /* the current page label is never the one that shrinks */
html body.cos-shell-on #cos-crumb li[aria-current="page"] { color: var(--cos-color-text-primary); font-weight: var(--cos-weight-semibold); letter-spacing: -.01em; }

/* finder (Stage 3) */
html body.cos-shell-on #cos-find { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--cos-space-2); height: var(--cos-control-lg); padding: 0 var(--cos-space-4); background: var(--cos-color-bg-hover); border: 1px solid transparent; border-radius: var(--cos-radius-pill); }
html body.cos-shell-on #cos-find:focus-within { background: var(--cos-color-bg-surface); border-color: var(--cos-color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cos-color-focus) 25%, transparent); }
html body.cos-shell-on #cos-find .ico { display: grid; color: var(--cos-color-text-muted); }
html body.cos-shell-on #cos-find .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }
html body.cos-shell-on #cos-find input { min-width: 0; width: 100%; height: 100%; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--cos-color-text-primary) !important; font: 0.8125rem/1 var(--cos-font) !important; padding: 0 !important; }
html body.cos-shell-on #cos-find input::placeholder { color: var(--cos-color-text-muted); }
html body.cos-shell-on #cos-find kbd { font: var(--cos-weight-medium) 11px/1 var(--cos-font); padding: 3px 6px; border: 1px solid var(--cos-color-border-subtle); border-radius: var(--cos-radius-sm); background: var(--cos-color-bg-surface); color: var(--cos-color-text-muted); }
html body.cos-shell-on #cos-find-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 350; margin: 0; padding: var(--cos-space-2); list-style: none; max-height: 60vh; overflow-y: auto; background: var(--cos-color-bg-surface); border: 1px solid var(--cos-color-border-subtle); border-radius: var(--cos-radius-lg); box-shadow: var(--cos-shadow-2); }
html body.cos-shell-on #cos-find-list[hidden] { display: none; }
html body.cos-shell-on #cos-find-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cos-space-3); padding: 9px var(--cos-space-3); border-radius: var(--cos-radius-md); cursor: pointer; color: var(--cos-color-text-primary); font-size: 0.8125rem; }
html body.cos-shell-on #cos-find-list li[aria-selected="true"], html body.cos-shell-on #cos-find-list li:hover { background: var(--cos-color-bg-selected); }
html body.cos-shell-on #cos-find-list .t { font-weight: var(--cos-weight-medium); }
html body.cos-shell-on #cos-find-list .p { color: var(--cos-color-text-muted); font-size: 0.75rem; white-space: nowrap; }
html body.cos-shell-on #cos-find-list .none { color: var(--cos-color-text-muted); cursor: default; }
html body.cos-shell-on #cos-find-list .dir { margin-top: 4px; border-top: 1px solid var(--cos-color-border-subtle); border-radius: 0 0 var(--cos-radius-md) var(--cos-radius-md); color: var(--cos-color-brand-primary); }

/* Page Directory */
html body.cos-shell-on #cos-directory { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: var(--cos-space-4); background: var(--cos-color-bg-overlay); }
html body.cos-shell-on #cos-directory[hidden] { display: none; }
html body.cos-shell-on #cos-directory .box { display: flex; flex-direction: column; width: min(980px, 100%); max-height: min(760px, 100%); background: var(--cos-color-bg-surface); color: var(--cos-color-text-primary); border-radius: var(--cos-radius-lg); box-shadow: var(--cos-shadow-3); overflow: hidden; font-family: var(--cos-font); }
html body.cos-shell-on #cos-directory .hd { display: flex; justify-content: space-between; gap: var(--cos-space-4); padding: var(--cos-space-5) var(--cos-space-6) var(--cos-space-3); }
html body.cos-shell-on #cos-directory h2 { margin: 0; font: var(--cos-weight-semibold) 1.25rem/1.25 var(--cos-font); letter-spacing: -.02em; color: var(--cos-color-text-primary); }
html body.cos-shell-on #cos-directory p { margin: 4px 0 0; color: var(--cos-color-text-muted); font-size: 0.8125rem; }
html body.cos-shell-on #cos-directory .x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--cos-radius-md); background: none; color: var(--cos-color-text-muted); cursor: pointer; }
html body.cos-shell-on #cos-directory .x:hover { background: var(--cos-color-bg-hover); }
html body.cos-shell-on #cos-directory .x svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; }
html body.cos-shell-on #cos-directory .ctl { display: flex; align-items: center; gap: var(--cos-space-4); flex-wrap: wrap; padding: 0 var(--cos-space-6) var(--cos-space-3); }
html body.cos-shell-on #cos-directory #cos-dir-q { flex: 1 1 260px; height: var(--cos-control-md); padding: 0 var(--cos-space-3); border: 1px solid var(--cos-color-border-strong); border-radius: var(--cos-radius-md); background: var(--cos-color-bg-surface); color: var(--cos-color-text-primary); font: 0.8125rem var(--cos-font); }
html body.cos-shell-on #cos-directory .chk { display: inline-flex; align-items: center; gap: var(--cos-space-2); font-size: 0.8125rem; color: var(--cos-color-text-secondary); }
html body.cos-shell-on #cos-directory .tbl { overflow: auto; border-top: 1px solid var(--cos-color-border-subtle); }
html body.cos-shell-on #cos-directory table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
html body.cos-shell-on #cos-directory th { position: sticky; top: 0; padding: var(--cos-space-2) var(--cos-space-4); text-align: left; background: var(--cos-color-bg-surface); color: var(--cos-color-text-muted); font: var(--cos-weight-semibold) 11px/1.3 var(--cos-font); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--cos-color-border-strong); }
html body.cos-shell-on #cos-directory td { padding: var(--cos-space-2) var(--cos-space-4); border-bottom: 1px solid var(--cos-color-border-subtle); vertical-align: middle; }
html body.cos-shell-on #cos-directory td small { display: block; color: var(--cos-color-text-muted); font-size: 0.75rem; }
html body.cos-shell-on #cos-directory code { font: 0.75rem var(--cos-font-mono); color: var(--cos-color-text-secondary); }
html body.cos-shell-on #cos-directory tr.na td { color: var(--cos-color-text-muted); }
html body.cos-shell-on #cos-directory .st { display: inline-block; padding: 2px 10px; border-radius: var(--cos-radius-pill); font-size: 0.75rem; font-weight: var(--cos-weight-medium); }
html body.cos-shell-on #cos-directory .st.ok { background: var(--cos-color-success-bg); color: var(--cos-color-success); }
html body.cos-shell-on #cos-directory .st.no { background: var(--cos-color-neutral-bg); color: var(--cos-color-neutral); }
html body.cos-shell-on #cos-directory td.o { text-align: right; white-space: nowrap; }
html body.cos-shell-on #cos-directory td.o button { height: 30px; padding: 0 var(--cos-space-3); border: 1px solid var(--cos-color-border-strong); border-radius: var(--cos-radius-md); background: var(--cos-color-bg-surface); color: var(--cos-color-text-primary); font: var(--cos-weight-medium) 0.75rem var(--cos-font); cursor: pointer; }
html body.cos-shell-on #cos-directory td.o button:hover { background: var(--cos-color-bg-hover); }
html body.cos-shell-on #cos-directory button:focus-visible, html body.cos-shell-on #cos-directory input:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: 2px; }
html body.cos-shell-on #cos-directory .ft { padding: var(--cos-space-3) var(--cos-space-6); color: var(--cos-color-text-muted); font-size: 0.75rem; border-top: 1px solid var(--cos-color-border-subtle); }
html body.cos-shell-on #cos-directory .none { text-align: center; color: var(--cos-color-text-muted); padding: var(--cos-space-8); }
html body.cos-shell-on .cos-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Responsive ─────────────────────────────────────────── */
/* Laptop / iPad landscape and portrait (769–1279): icon rail with title tooltips; labelled Menu button expands it as an overlay. */
@media (min-width: 769px) and (max-width: 1279px) {
  html body.cos-shell-on { --cos-page-gutter: 24px; }
  html body.cos-shell-on #cos-menu-btn { display: inline-flex; }
  html body.cos-shell-on .layout > .sidebar { flex-basis: 72px !important; width: 72px !important; overflow-x: hidden; }
  html body.cos-shell-on .sidebar .sb-name,
  html body.cos-shell-on .sidebar .sb-sect,
  html body.cos-shell-on .sidebar .sb-section-toggle,
  html body.cos-shell-on .sidebar .sb-uname,
  html body.cos-shell-on .sidebar .sb-urole,
  html body.cos-shell-on .sidebar .sb-logout,
  html body.cos-shell-on .sidebar > div:last-child:not(.sb-user):not(.sb-nav) { display: none !important; }
  html body.cos-shell-on .sidebar .sb-brand { padding: var(--cos-space-4) 0 var(--cos-space-2) !important; }
  html body.cos-shell-on .sidebar .sb-mark { justify-content: center; }
  html body.cos-shell-on .sidebar .sb-nav { padding: var(--cos-space-2) !important; }
  html body.cos-shell-on .sidebar .sb-link { justify-content: center; padding: 0 !important; }
  html body.cos-shell-on .sidebar .sb-link .cos-nav-label { display: none !important; }
  html body.cos-shell-on .sidebar .sb-link.active::before { left: -8px; }
  html body.cos-shell-on .sidebar .sb-user { justify-content: center; padding: var(--cos-space-2) !important; margin: var(--cos-space-2) !important; }
  /* expanded overlay */
  html body.cos-shell-on.cos-nav-open .layout > .sidebar { position: fixed; top: 0; left: 0; z-index: 400; width: var(--cos-sidebar-w) !important; flex-basis: auto !important; height: 100dvh; box-shadow: var(--cos-shadow-3) !important; overflow-y: auto; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-name,
  html body.cos-shell-on.cos-nav-open .sidebar .sb-sect,
  html body.cos-shell-on.cos-nav-open .sidebar .sb-uname,
  html body.cos-shell-on.cos-nav-open .sidebar .sb-urole { display: block !important; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-sect { display: flex !important; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-section-toggle { display: grid !important; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-logout { display: grid !important; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-link { justify-content: flex-start; padding: 0 var(--cos-space-3) 0 var(--cos-space-4) !important; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-link .cos-nav-label { display: inline !important; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-brand { padding: var(--cos-space-5) var(--cos-space-5) var(--cos-space-3) !important; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-mark { justify-content: flex-start; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-link.active::before { left: 0; }
  html body.cos-shell-on.cos-nav-open .sidebar .sb-user { justify-content: flex-start; padding: var(--cos-space-3) !important; margin: var(--cos-space-2) var(--cos-space-3) var(--cos-space-3) !important; }
}
/* Small (≤768): reuse the classic off-canvas drawer (toggleSidebar/#sb-overlay), restyled white; menu button is labelled. */
@media (max-width: 768px) {
  html body.cos-shell-on { --cos-page-gutter: 16px; }
  html body.cos-shell-on #cos-menu-btn { display: inline-flex; }
  html body.cos-shell-on .topbar { height: 60px !important; padding: 0 var(--cos-space-3) !important; gap: var(--cos-space-2); }
  html body.cos-shell-on #cos-search-slot { display: none; }        /* search moves into the drawer on phones (classic finder position) */
  html body.cos-shell-on #cos-office-ctx { max-width: 140px; padding: 0 var(--cos-space-3) 0 var(--cos-space-2); }
  html body.cos-shell-on #cos-office-ctx .cap { display: none; }
  html body.cos-shell-on #cos-account-btn{width:40px;padding:0 4px}
  html body.cos-shell-on #cos-account-btn .name{display:none}
  html body.cos-shell-on .topbar-title { display: none; }
  html body.cos-shell-on .sidebar.open { box-shadow: var(--cos-shadow-3) !important; }
}
@media (prefers-reduced-motion: reduce) { html body.cos-shell-on .sidebar .sb-link { transition: none; } }
html body.cos-shell-on #cos-nav-scrim { position: fixed; inset: 0; z-index: 399; background: var(--cos-color-bg-overlay); }
html body.cos-shell-on #cos-nav-scrim[hidden] { display: none; }

@media (min-width: 769px) and (max-width: 1279px) {
  html body.cos-shell-on #cos-nav { padding: var(--cos-space-2); }
  html body.cos-shell-on #cos-nav .cos-mod-btn { justify-content: center; padding: 0; }
  html body.cos-shell-on #cos-nav .cos-nav-label,
  html body.cos-shell-on #cos-nav .cos-chev,
  html body.cos-shell-on #cos-nav .cos-mod-toggle,
  html body.cos-shell-on #cos-nav .cos-sub { display: none !important; }
  html body.cos-shell-on #cos-nav .cos-mod-row { display: block; }
  html body.cos-shell-on #cos-nav [aria-current="page"]::before,
  html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-btn::before,
  html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-row > .cos-mod-btn::before { left: -8px; }
  html body.cos-shell-on #cos-search-slot { flex-basis: 220px; flex-shrink: 1; }
  html body.cos-shell-on #cos-crumb li:first-child:not([aria-current="page"]) { display: none; }   /* tablet: Home leaves first (one tap away in the sidebar) so Module › Page always fits */
  html body.cos-shell-on #cos-crumb li:first-child:not([aria-current="page"]) + li::before { content: none; }
  html body.cos-shell-on.cos-nav-open #cos-nav { padding: var(--cos-space-2) var(--cos-space-3) var(--cos-space-4); }
  html body.cos-shell-on.cos-nav-open #cos-nav .cos-mod-btn { justify-content: flex-start; padding: 0 var(--cos-space-3) 0 var(--cos-space-4); }
  html body.cos-shell-on.cos-nav-open #cos-nav .cos-nav-label { display: inline !important; }
  html body.cos-shell-on.cos-nav-open #cos-nav .cos-chev { display: inline-grid !important; }
  html body.cos-shell-on.cos-nav-open #cos-nav .cos-mod-toggle { display: grid !important; }
  html body.cos-shell-on.cos-nav-open #cos-nav .cos-sub:not([hidden]) { display: block !important; }
  html body.cos-shell-on.cos-nav-open #cos-nav .cos-mod-row { display: flex; }
}
@media (max-width: 768px) {
  html body.cos-shell-on #cos-crumb li:not([aria-current="page"]):not(.cos-crumb-parent) { display: none; }
  html body.cos-shell-on #cos-crumb li.cos-crumb-parent { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
  html body.cos-shell-on #cos-crumb li.cos-crumb-parent .cos-crumb-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body.cos-shell-on .sidebar #cos-find { margin: var(--cos-space-2) var(--cos-space-3); }
  html body.cos-shell-on .sidebar #cos-find-list { position: static; margin-top: 6px; }
}

/* ── Sidebar refinement (quiet, module-first) ─────────────────────────────────────────────
   Modules only at rest; the active module reveals its pages; chevrons only on hover/focus; utilities and account recede. Presentation only. */
html body.cos-shell-on #cos-nav { display: flex; flex-direction: column; padding: var(--cos-space-2) var(--cos-space-3) var(--cos-space-3); }
html body.cos-shell-on #cos-nav .cos-mod { margin: 0; }
html body.cos-shell-on #cos-nav .cos-mod-btn { min-height: 38px; gap: var(--cos-space-3); border-radius: var(--cos-radius-md); font-size: 0.875rem; font-weight: var(--cos-weight-medium); color: var(--cos-color-text-secondary); }
html body.cos-shell-on #cos-nav .cos-chev { opacity: 0; transition: opacity var(--cos-duration-fast) var(--cos-ease); }
html body.cos-shell-on #cos-nav .cos-mod-btn:hover .cos-chev,
html body.cos-shell-on #cos-nav .cos-mod-btn:focus-visible .cos-chev { opacity: .55; }
html body.cos-shell-on #cos-nav .cos-mod.is-open > .cos-mod-btn .cos-chev { opacity: 0; }
html body.cos-shell-on #cos-nav .cos-mod.is-open > .cos-mod-btn:hover .cos-chev { opacity: .55; }
html body.cos-shell-on #cos-nav .cos-sub { padding: 2px 0 var(--cos-space-2); }
html body.cos-shell-on #cos-nav .cos-item { min-height: 32px; font-size: 0.8125rem; border-radius: var(--cos-radius-sm); color: var(--cos-color-text-muted); }
html body.cos-shell-on #cos-nav .cos-item:hover { color: var(--cos-color-text-primary); background: var(--cos-color-bg-hover); }
html body.cos-shell-on #cos-nav .cos-group-label { margin-top: var(--cos-space-2); font-size: 10px; opacity: .8; }

/* active state: slim teal indicator, faint tint, stronger text — not a button */
html body.cos-shell-on #cos-nav [aria-current="page"] { background: color-mix(in srgb, var(--cos-color-brand-accent) 9%, var(--cos-color-bg-surface)); color: var(--cos-color-brand-primary); font-weight: var(--cos-weight-semibold); }
html body.cos-shell-on #cos-nav .cos-item[aria-current="page"] { background: transparent; color: var(--cos-color-brand-primary); box-shadow: none; }
html body.cos-shell-on #cos-nav .cos-item[aria-current="page"]::before { content: ""; position: absolute; left: calc(var(--cos-space-4) + 9px); top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--cos-color-brand-accent); }
html body.cos-shell-on #cos-nav .cos-mod-btn[aria-current="page"]::before,
html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-btn::before { left: 0; top: 9px; bottom: 9px; width: 3px; }
html body.cos-shell-on #cos-nav .cos-mod.is-active-mod > .cos-mod-btn:not([aria-current="page"]) { color: var(--cos-color-text-primary); }

/* utilities: "All pages" is a quiet safety net, set apart by space, not a module */
html body.cos-shell-on #cos-nav .cos-nav-foot { margin-top: auto; padding-top: var(--cos-space-6); border-top: 0; }
html body.cos-shell-on #cos-nav #cos-dir-open { min-height: 30px; font-size: 0.75rem; font-weight: var(--cos-weight-regular); color: var(--cos-color-text-muted); padding-left: var(--cos-space-4); }
html body.cos-shell-on #cos-nav #cos-dir-open .cos-nav-ico, html body.cos-shell-on #cos-nav #cos-dir-open .cos-nav-ico svg { width: 16px; height: 16px; }
html body.cos-shell-on #cos-nav #cos-dir-open:hover { color: var(--cos-color-text-primary); background: transparent; text-decoration: underline; text-underline-offset: 3px; }

/* account: an unboxed row */
html body.cos-shell-on .sidebar .sb-user { position: static; margin: 0 var(--cos-space-3) var(--cos-space-2) !important; padding: var(--cos-space-2) var(--cos-space-3) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: var(--cos-radius-md) !important; }
html body.cos-shell-on .sidebar .sb-user:hover { background: var(--cos-color-bg-hover) !important; }
html body.cos-shell-on .sidebar .sb-avatar { width: 30px !important; height: 30px !important; font-size: 11px !important; }
html body.cos-shell-on .sidebar .sb-logout { opacity: .6; }
html body.cos-shell-on .sidebar .sb-logout:hover { opacity: 1; }
html body.cos-shell-on .sidebar > div:last-child:not(.sb-user):not(.sb-nav) { padding-top: 0 !important; opacity: .7; }
@media (min-width: 769px) and (max-width: 1279px) {
  html body.cos-shell-on #cos-nav .cos-nav-foot { padding-top: var(--cos-space-4); }
  html body.cos-shell-on .sidebar .sb-user { margin: 0 var(--cos-space-2) var(--cos-space-2) !important; }
}

/* fold-away groups (Administration: People / Organization / Access) */
html body.cos-shell-on #cos-nav .cos-group-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 2px 0 0; padding: 6px var(--cos-space-3) 6px calc(var(--cos-space-4) + 20px + var(--cos-space-3)); border: 0; border-radius: var(--cos-radius-sm); background: none; color: var(--cos-color-text-muted); font: var(--cos-weight-semibold) 10.5px/1.3 var(--cos-font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
html body.cos-shell-on #cos-nav .cos-group-btn:hover { color: var(--cos-color-text-primary); }
html body.cos-shell-on #cos-nav .cos-group-btn[aria-expanded="true"] { color: var(--cos-color-text-secondary); }
html body.cos-shell-on #cos-nav .cos-group-btn .cos-chev { opacity: 0; } html body.cos-shell-on #cos-nav .cos-group-btn:hover .cos-chev, html body.cos-shell-on #cos-nav .cos-group-btn:focus-visible .cos-chev { opacity: .6; }
html body.cos-shell-on #cos-nav .cos-group-btn[aria-expanded="true"] .cos-chev svg { transform: rotate(180deg); }
html body.cos-shell-on #cos-nav .cos-grp[hidden] { display: none; }
html body.cos-shell-on #cos-nav .cos-group-btn:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: -2px; }
@media (min-width: 769px) and (max-width: 1279px) { html body.cos-shell-on:not(.cos-nav-open) #cos-nav .cos-group-btn, html body.cos-shell-on:not(.cos-nav-open) #cos-nav .cos-grp { display: none !important; } }
/* lighter, less button-like active state (module rows) */
html body.cos-shell-on #cos-nav [aria-current="page"] { background: color-mix(in srgb, var(--cos-color-brand-accent) 6%, var(--cos-color-bg-surface)); border-radius: var(--cos-radius-sm); }
@media (max-width: 480px) {
  html body.cos-shell-on #cos-crumb li:not([aria-current="page"]) { display: none; }
  html body.cos-shell-on #cos-crumb li[aria-current="page"]::before { content: none; }
}