/* Palette-aware chrome: shared by desktop, collapsed sidebar and mobile drawer. */
:root { --palette-hue:160; }
html[data-palette="emerald"] { --palette-hue:160; }
html[data-palette="indigo"] { --palette-hue:244; }
html[data-palette="amber"] { --palette-hue:35; }
html[data-palette="ocean"] { --palette-hue:205; --primary:#0284c7; --primary-2:#38bdf8; --link:#0369a1; }
html[data-palette="rose"] { --palette-hue:335; --primary:#be185d; --primary-2:#f472b6; --link:#9d174d; }
html[data-theme] {
  --shell-accent:hsl(var(--palette-hue) 62% 32%);
  --shell-icon:hsl(var(--palette-hue) 52% 38%);
  --shell-bg:hsl(var(--palette-hue) 26% 96%);
  --shell-ink:hsl(var(--palette-hue) 30% 20%);
  --shell-muted:hsl(var(--palette-hue) 18% 40%);
  --shell-line:hsl(var(--palette-hue) 22% 87%);
  --shell-hover:hsl(var(--palette-hue) 36% 91%);
  --shell-active:hsl(var(--palette-hue) 44% 87%);
  --shell-active-ink:hsl(var(--palette-hue) 62% 25%);
  --shell-submenu:hsl(var(--palette-hue) 20% 99%);
  --shell-header-start:hsl(var(--palette-hue) 48% 19%);
  --shell-header-end:hsl(var(--palette-hue) 48% 29%);
  --shell-header-line:#ffffff25;
  --shell-header-hover:#ffffff16;
  --shell-header-muted:#e1eaf3;
  --workspace-navy:var(--shell-header-start);
  --workspace-cyan:var(--shell-icon);
  --workspace-submenu:var(--shell-submenu);
  --workspace-submenu-active:var(--shell-active);
}
html[data-theme="dark"] {
  --shell-accent:hsl(var(--palette-hue) 66% 70%);
  --shell-icon:hsl(var(--palette-hue) 64% 70%);
  --shell-bg:hsl(var(--palette-hue) 24% 11%);
  --shell-ink:hsl(var(--palette-hue) 22% 93%);
  --shell-muted:hsl(var(--palette-hue) 20% 72%);
  --shell-line:hsl(var(--palette-hue) 20% 25%);
  --shell-hover:hsl(var(--palette-hue) 28% 19%);
  --shell-active:hsl(var(--palette-hue) 32% 25%);
  --shell-active-ink:hsl(var(--palette-hue) 70% 83%);
  --shell-submenu:hsl(var(--palette-hue) 22% 14%);
  --shell-header-start:hsl(var(--palette-hue) 32% 12%);
  --shell-header-end:hsl(var(--palette-hue) 38% 20%);
}
.workspace-shell .app-sidebar {
  --nav-closed-bg:hsl(var(--palette-hue) 43% 21%);
  --nav-closed-hover:hsl(var(--palette-hue) 43% 27%);
  background:var(--nav-closed-bg);
  color:#f8fafc;
  border-inline-end:1px solid var(--shell-line);
}
.workspace-shell :is(.app-header,.sidebar-top) {
  background:linear-gradient(115deg,var(--shell-header-start),var(--shell-header-end));
  border-bottom-color:var(--shell-header-line);
  color:#f8fafc;
}
.workspace-shell .sidebar-top { padding-block:18px 16px; }
.workspace-shell .app-header { box-shadow:0 3px 14px #0000000c; }
.workspace-shell :is(.brand-kicker,.brand-subtitle,.brand-meta-chip) { color:var(--shell-header-muted); }
.workspace-shell :is(.side-link,.side-group-toggle) {
  border-bottom-color:var(--shell-line);
  color:var(--shell-ink);
}
.workspace-shell :is(.side-link,.side-group-toggle):hover {
  background:var(--shell-hover);
  color:var(--shell-active-ink);
}
.workspace-shell :is(.side-link.active,.side-group-toggle.active),
.workspace-shell .side-group.is-open > .side-group-toggle {
  background:var(--shell-active);
  color:var(--shell-active-ink);
}
.workspace-shell :is(.side-link-icon,.side-group-icon),
.workspace-shell .side-submenu .side-link-icon { color:var(--shell-icon); }
.workspace-shell .side-group-caret { color:var(--shell-muted); }
.workspace-shell .side-submenu .side-submenu-link {
  background:var(--shell-submenu);
  color:var(--shell-ink);
  border-bottom-color:var(--shell-line);
}
.workspace-shell .side-submenu :is(.side-submenu-link:hover,.side-submenu-link.active) {
  background:var(--shell-active);
  color:var(--shell-active-ink);
}
.workspace-shell .side-submenu .side-submenu-link.active {
  box-shadow:inset -3px 0 0 var(--shell-accent);
}
/* Closed sections recede into the selected palette; expanded content stays distinct. */
.workspace-shell .app-sidebar .side-group:not(.is-open) > .side-group-toggle,
.workspace-shell .app-sidebar .side-direct-link:not(.active) {
  background:var(--nav-closed-bg);
  color:#f8fafc;
  border-bottom-color:#ffffff20;
}
.workspace-shell .app-sidebar .side-group:not(.is-open) > .side-group-toggle:hover,
.workspace-shell .app-sidebar .side-direct-link:not(.active):hover {
  background:var(--nav-closed-hover);
  color:#fff;
}
.workspace-shell .app-sidebar .side-group:not(.is-open) > .side-group-toggle :is(.side-group-icon,.side-group-caret),
.workspace-shell .app-sidebar .side-direct-link:not(.active) .side-link-icon { color:#e4f0f5; }
.workspace-shell .app-sidebar .workspace-sidebar-tools { background:var(--nav-closed-bg); border-top-color:#ffffff25; }
.workspace-shell .app-sidebar .workspace-sidebar-tool { color:#f8fafc; border-color:#ffffff35; }
.workspace-shell .app-sidebar .workspace-sidebar-tool:hover { background:var(--nav-closed-hover); color:#fff; }
html[data-theme="dark"] .workspace-shell .app-sidebar { --nav-closed-bg:hsl(var(--palette-hue) 32% 10%); --nav-closed-hover:hsl(var(--palette-hue) 32% 17%); }
/* Expanded navigation stays visibly light in dark mode. Scope these colors to
   the sidebar so the workspace, header and closed sections retain dark mode. */
html[data-theme="dark"] .workspace-shell .app-sidebar {
  --nav-open-bg:hsl(var(--palette-hue) 20% 91%);
  --nav-open-heading:hsl(var(--palette-hue) 30% 80%);
  --nav-open-active:hsl(var(--palette-hue) 38% 76%);
  --nav-open-ink:hsl(var(--palette-hue) 44% 17%);
  --nav-open-line:hsl(var(--palette-hue) 20% 76%);
  --nav-open-marker:hsl(var(--palette-hue) 62% 28%);
}
html[data-theme="dark"] .workspace-shell .app-sidebar .side-group.is-open > .side-group-toggle {
  background:var(--nav-open-heading);color:var(--nav-open-ink);border-bottom-color:var(--nav-open-line);
}
html[data-theme="dark"] .workspace-shell .app-sidebar .side-group.is-open > .side-submenu,
html[data-theme="dark"] .workspace-shell .app-sidebar .side-group.is-open .side-submenu-link {
  background:var(--nav-open-bg);color:var(--nav-open-ink);border-bottom-color:var(--nav-open-line);
}
html[data-theme="dark"] .workspace-shell .app-sidebar .side-group.is-open .side-submenu-link:is(:hover,.active) {
  background:var(--nav-open-active);color:var(--nav-open-ink);
}
html[data-theme="dark"] .workspace-shell .app-sidebar .side-group.is-open :is(.side-group-icon,.side-group-caret,.side-link-icon) {color:var(--nav-open-ink);}
html[data-theme="dark"] .workspace-shell .app-sidebar .side-group.is-open .side-submenu-link.active {box-shadow:inset -3px 0 0 var(--nav-open-marker);}
.workspace-shell .side-nav { scrollbar-color:var(--shell-line) transparent; }
.workspace-shell .workspace-sidebar-tools { border-top-color:var(--shell-line); background:var(--shell-bg); }
.workspace-shell .workspace-sidebar-tool { color:var(--shell-ink); border-color:var(--shell-line); border-radius:7px; }
.workspace-shell .workspace-sidebar-tool:hover { background:var(--shell-hover); color:var(--shell-active-ink); }
.workspace-shell :is(.collapse-btn,.workspace-menu-toggle) { border-color:var(--shell-header-line); color:#f8fafc; border-radius:7px; }
.workspace-shell :is(.collapse-btn,.workspace-menu-toggle):hover { background:var(--shell-header-hover); border-color:#ffffff66; }
html[data-theme] .workspace-shell :is(#btn-sidebar,#btn-sidebar-top),
html[data-theme] .workspace-shell :is(#btn-sidebar,#btn-sidebar-top) svg {
  color:#fff;
}
html[data-theme] .workspace-shell :is(#btn-sidebar,#btn-sidebar-top) svg {
  stroke:#fff;
  fill:none;
  stroke-width:2;
}
.workspace-shell .app-header :is(.workspace-shortcut,.header-select,.btn,.header-toggle,.app-profile-trigger,.btn-logout) {
  border-inline-start-color:var(--shell-header-line);
  color:#f8fafc;
}
.workspace-shell .app-header :is(button,a,select):hover { background:var(--shell-header-hover); color:#fff; }
.workspace-shell .app-header .workspace-system-name:hover { background:transparent; }
.workspace-shell .app-header :is(.header-select,.workspace-expiry),
.workspace-shell .header-switcher label { color:var(--shell-header-muted); }
.workspace-shell .app-header .workspace-expiry svg { color:#d5f5e9; }
.workspace-shell .page-context-badge { border-color:#ffffff50; color:var(--shell-header-muted); border-radius:6px; }
.workspace-shell .app-header .btn-logout { color:#fecdd3; }
.workspace-shell :is(button,a,input,select):focus-visible { outline-color:var(--shell-accent); }
.workspace-shell .app-header :is(button,a,select):focus-visible { outline-color:#fff; outline-offset:-4px; }
html[data-theme] body.workspace-admin { --admin-accent:var(--shell-accent); }
@media (prefers-reduced-motion:no-preference) {
  .workspace-shell :is(.side-link,.side-group-toggle,.workspace-sidebar-tool) { transition:background-color .16s ease,color .16s ease; }
}