/* ==========================================================================
   Valere2Web — visual shell
   Modern SaaS admin: dark navy sidebar with SVG group icons, white content,
   deep blue accent, generous spacing, tight typography. No third-party CSS.
   ========================================================================== */

:root {
  --brand-500:   #1f4fd6;
  --brand-600:   #1b46bd;
  --brand-100:   #e6efff;
  --brand-50:    #f0f5ff;

  --nav-bg:      #0f172a;
  --nav-bg-hover:#1e293b;
  --nav-fg:      #cbd5e1;
  --nav-fg-dim:  #64748b;
  --nav-fg-hot:  #ffffff;
  --nav-accent:  #3b82f6;

  --bg:          #f6f8fb;
  --panel:       #ffffff;
  --border:      #e5e9f0;
  --border-hot:  #cfd6e2;

  --text:        #1e293b;
  --text-dim:    #64748b;
  --text-mute:   #94a3b8;

  --ok:          #16a34a;
  --warn:        #d97706;
  --err:         #dc2626;

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;

  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:      0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 10px 40px rgba(15, 23, 42, 0.12);

  --topbar-h:    56px;
  --sidebar-w:   268px;

  --font:        -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --font-size:   14px;
  --sidebar-shadow: none;
  --card-bg:     var(--panel);
  --brand-grad:  linear-gradient(135deg, var(--brand-500), #7c3aed);
  /* Section-header chip background — themes override for their palette. */
  --nav-label-bg:      rgba(255,255,255,0.05);
  --nav-label-fg:      var(--nav-fg-dim);
  --nav-label-shadow:  none;
  --group-op:    #38bdf8;  /* per-group accent overrides for themes */
  --group-bl:    #4ade80;
  --group-dv:    #c084fc;
  --group-mt:    #fb923c;
  --group-cm:    #22d3ee;
  --group-pr:    #f472b6;
  --group-fn:    #facc15;
  --group-gl:    #22c55e;  /* Goals — grass green, distinct + growth-y */
}

/* =========================================================================
   Theme: Oragen Default (Light) — Radiant blue/slate palette lifted from
   the Radiant_Icon_1 sun-burst mark (blue ring #1E7BB0 + dark-slate rays
   #2E3E52). This is the DEFAULT for Oragen2Web.
   ========================================================================= */
[data-theme="light"] {
  /* Section-header chip: cool grey lifted from the icon's neutral tones */
  --nav-label-bg:      linear-gradient(180deg, #eef2f6 0%, #e0e6ec 100%);
  --nav-label-fg:      #46586c;
  --nav-label-shadow:  inset 0 -1px 0 rgba(46,62,82,0.08);

  --brand-500:   #1E7BB0;   /* Radiant blue — ring of the sun mark */
  --brand-600:   #185f8a;   /* deeper blue for hovers */
  --brand-100:   #cfe4f2;
  --brand-50:    #eaf3fa;

  /* Light sidebar with a cool blue-grey tint */
  --nav-bg:      #f6f9fc;
  --nav-bg-hover:#e6eff8;
  --nav-fg:      #2E3E52;   /* Radiant dark slate — the ray color */
  --nav-fg-dim:  #64748b;
  --nav-fg-hot:  #185f8a;   /* deep blue on hover */
  --nav-accent:  #1E7BB0;   /* Radiant blue active bar */

  --bg:          #f2f5f8;
  --panel:       #ffffff;
  --border:      #dde4ec;
  --border-hot:  #c5d0dc;

  --text:        #2E3E52;   /* Radiant dark slate for body text */
  --text-dim:    #4a5a6e;
  --text-mute:   #94a3b8;

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;

  --brand-grad:  linear-gradient(135deg, #1E7BB0, #2E3E52);
  --sidebar-shadow: 1px 0 0 rgba(30,123,176,0.12);

  /* Group accents — variations along a blue/teal/slate axis so groups stay
     visually distinct while all reading as "Radiant blue" family. */
  --group-op:    #1E7BB0;   /* Radiant blue primary */
  --group-bl:    #185f8a;   /* deep blue */
  --group-dv:    #2E3E52;   /* slate */
  --group-mt:    #3a97c5;   /* mid blue */
  --group-cm:    #0ea5e9;   /* sky */
  --group-pr:    #0369a1;   /* navy */
  --group-fn:    #06b6d4;   /* cyan */
  --group-gl:    #38bdf8;   /* Goals — bright sky (aspirational) */
}

/* Light-theme sidebar structural overrides — tuned for the blue-slate palette. */
[data-theme="light"] .side-group-label { color: #46586c; }
[data-theme="light"] .side-group-label:hover { color: #185f8a; }
[data-theme="light"] .side-group-label { border-bottom-color: rgba(30,123,176,0.12); }
[data-theme="light"] .side-actions { border-bottom-color: rgba(30,123,176,0.12); }
[data-theme="light"] .side-action-btn { color: #64748b; border-color: rgba(30,123,176,0.15); }
[data-theme="light"] .side-action-btn:hover { color: #185f8a; background: #eaf3fa;
                                              border-color: rgba(30,123,176,0.30); }
[data-theme="light"] .side-list a { color: #2E3E52; }
[data-theme="light"] .side-list a:hover { background: #eaf3fa; color: #185f8a; }
[data-theme="light"] .side-list li.active a { background: #eaf3fa; color: #185f8a; }
[data-theme="light"] .side-list li.unlinked .muted { color: #94a3b8; }
[data-theme="light"] .sidebar { border-right: 1px solid #dfe6ed; }

/* =========================================================================
   Theme: Valere Dark — CANONICAL per Braden's Valére Brand Guidelines
                        (email 2026-09-01, message #4332).
   Palette: Mint #00E297 (signal), Sea Blue #00E5D4 (secondary/gradient),
            Dark Slate #3D3D3D (never true black), White.
   Surfaces: --surface-mid #111111 (nav), --surface-dark #0A0A0A (topbar),
             mint-tinted borders rgba(0,226,151,0.15). Mint is scarce by
             design — it fires on active states + CTAs only, not everywhere.
   Body text = Inter; display type would be Jost (loaded in base.html).
   ========================================================================= */
[data-theme="dark"] {
  /* Section-header chip: subtle mint-tinted panel on the dark surface */
  --nav-label-bg:      linear-gradient(180deg, rgba(0,226,151,0.06) 0%, rgba(0,229,212,0.02) 100%);
  --nav-label-fg:      rgba(255,255,255,0.55);
  --nav-label-shadow:  inset 0 -1px 0 rgba(0,226,151,0.18);

  --brand-500:   #00E297;   /* Mint — the signal color */
  --brand-600:   #00c082;   /* deeper mint for hovers */
  --brand-100:   #b7f5df;
  --brand-50:    rgba(0,226,151,0.08);

  /* Sidebar = surface-mid; navbar text high-contrast white with mint dim */
  --nav-bg:      #111111;   /* --surface-mid */
  --nav-bg-hover:#1a1a1a;
  --nav-fg:      #f4f4f4;
  --nav-fg-dim:  rgba(255,255,255,0.45);
  --nav-fg-hot:  #00E297;   /* mint pop on hover */
  --nav-accent:  #00E297;

  /* Content area stays light per "dark-first immersion, light for content
     clarity" — Section 6 of the brand guide. */
  --bg:          #F8F8F8;   /* --surface-light */
  --panel:       #ffffff;
  --border:      #e2e2e2;
  --border-hot:  #d0d0d0;

  --text:        #1A1A1A;   /* --body-text per §3 carve-out */
  --text-dim:    #3D3D3D;   /* Dark Slate */
  --text-mute:   #6b7280;

  /* Signature gradient — Mint → Sea Blue, 135deg, per §3 */
  --brand-grad:  linear-gradient(135deg, #00E297, #00E5D4);
  --sidebar-shadow: 1px 0 0 rgba(0,0,0,0.40);

  /* Group icons — restrict to the brand palette. Mint is primary; Sea Blue
     is the natural companion in the gradient. Everything else is a shade
     interpolated on the Mint→Sea-Blue axis. Keeps mint scarce for
     active/hover states while still differentiating groups. */
  --group-op:    #00E297;   /* Mint */
  --group-bl:    #00E5D4;   /* Sea Blue */
  --group-dv:    #4dd1c2;   /* mid-teal (mint→sea gradient midpoint) */
  --group-mt:    #6ee7b7;   /* pale mint */
  --group-cm:    #00c082;   /* deep mint */
  --group-pr:    #33ecc0;   /* light mint */
  --group-fn:    #00b5a8;   /* deep sea */
  --group-gl:    #00E297;   /* Goals — mint (aspirational) */
}

/* Dark theme structural overrides — enforce brand palette everywhere */
[data-theme="dark"] .side-list a { color: var(--nav-fg); }
[data-theme="dark"] .side-list a:hover {
  background: rgba(0,226,151,0.10);
  color: #00E297;
}
[data-theme="dark"] .side-list li.active a {
  background: rgba(0,226,151,0.18);
  color: #00E297;
  box-shadow: inset 3px 0 0 #00E297;   /* mint left-bar on active */
}
[data-theme="dark"] .sidebar { border-right: 1px solid rgba(0,226,151,0.15); }

/* Top-bar goes even darker (--surface-dark) for that "immersive" feel */
[data-theme="dark"] .topbar {
  background: #0A0A0A;
  border-bottom: 1px solid rgba(0,226,151,0.15);
  color: #f4f4f4;
}
[data-theme="dark"] .topbar .brand,
[data-theme="dark"] .topbar .user-chip-name { color: #f4f4f4; }
[data-theme="dark"] .topbar .user-chip-roles { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .user-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .top-pills {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,226,151,0.15);
}
[data-theme="dark"] .top-pill { color: rgba(255,255,255,0.60); }
[data-theme="dark"] .top-pill:hover { background: rgba(0,226,151,0.12); color: #00E297; }
[data-theme="dark"] .top-pill.active {
  background: linear-gradient(135deg, #00E297, #00E5D4);
  color: #0A0A0A;
  font-weight: 700;
}
[data-theme="dark"] .omni-trigger {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
}
[data-theme="dark"] .omni-trigger:hover {
  background: rgba(0,226,151,0.12);
  border-color: rgba(0,226,151,0.35);
  color: #00E297;
}
[data-theme="dark"] .omni-kbd,
[data-theme="dark"] .user-chip .avatar { color: #0A0A0A; }
[data-theme="dark"] .user-chip .avatar { background: linear-gradient(135deg, #00E297, #00E5D4); }
[data-theme="dark"] .sidebar-toggle {
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.15);
  background: transparent;
}
[data-theme="dark"] .sidebar-toggle:hover {
  background: rgba(0,226,151,0.12);
  border-color: rgba(0,226,151,0.35);
  color: #00E297;
}
[data-theme="dark"] .theme-picker {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .theme-picker button { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .theme-picker button:hover { color: #f4f4f4; }
[data-theme="dark"] .theme-picker button.active {
  background: linear-gradient(135deg, #00E297, #00E5D4);
  color: #0A0A0A;
}
[data-theme="dark"] .nav-logout button {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .nav-logout button:hover {
  background: rgba(0,226,151,0.12);
  border-color: rgba(0,226,151,0.35);
  color: #00E297;
}
[data-theme="dark"] .topbar .nav .nav-item { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .topbar .nav .nav-item:hover { background: rgba(0,226,151,0.12); color: #00E297; }

/* Side-actions row (Collapse-all / Expand-all) */
[data-theme="dark"] .side-actions { border-bottom-color: rgba(0,226,151,0.15); }
[data-theme="dark"] .side-action-btn {
  color: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .side-action-btn:hover {
  background: rgba(0,226,151,0.12);
  border-color: rgba(0,226,151,0.35);
  color: #00E297;
}

/* Section-header labels get uppercase + Jost per the brand guide */
[data-theme="dark"] .side-group-label {
  font-family: "Jost", "Century Gothic", "AppleGothic", "Trebuchet MS", sans-serif;
  letter-spacing: 0.10em;
}

/* =========================================================================
   Theme: Valere Verdant — MORE color, MORE brand presence.
   Mint-washed sidebar, emerald-tinted section chips, saturated active state.
   Rounded/soft chrome. For when you want the brand to sing.
   ========================================================================= */
[data-theme="verdant"] {
  --nav-label-bg:      linear-gradient(180deg, #d4f2e3 0%, #b6e7d0 100%);
  --nav-label-fg:      #0f5a3f;
  --nav-label-shadow:  inset 0 -1px 0 rgba(13,143,102,0.14);

  --brand-500:   #10a074;   /* emerald primary */
  --brand-600:   #0d8f66;
  --brand-100:   #cff2e2;
  --brand-50:    #ecfbf4;

  --nav-bg:      #eafaf3;   /* soft mint wash */
  --nav-bg-hover:#d8f2e3;
  --nav-fg:      #0f5a3f;
  --nav-fg-dim:  #4a7863;
  --nav-fg-hot:  #0d8f66;
  --nav-accent:  #059669;

  --bg:          #f0faf5;
  --panel:       #ffffff;
  --border:      #cfe8dc;
  --border-hot:  #a8d4c1;

  --text:        #1c2530;
  --text-dim:    #4a5568;
  --text-mute:   #94a3b8;

  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;

  --brand-grad:  linear-gradient(135deg, #10a074, #059669);
  --sidebar-shadow: 1px 0 0 rgba(16,160,116,0.14);

  /* Saturated Valere-green group palette */
  --group-op:    #059669;
  --group-bl:    #047857;
  --group-dv:    #0f766e;
  --group-mt:    #4d7c0f;
  --group-cm:    #10b981;
  --group-pr:    #14532d;
  --group-fn:    #65a30d;
  --group-gl:    #16a34a;   /* Goals — deep growth green */
}

[data-theme="verdant"] .side-list a { color: #1c2530; }
[data-theme="verdant"] .side-list a:hover { background: #d4f2e3; color: #0d8f66; }
[data-theme="verdant"] .side-list li.active a { background: linear-gradient(90deg, #b6e7d0 0%, #d4f2e3 100%);
                                                 color: #0f5a3f; font-weight: 600; }
[data-theme="verdant"] .side-actions { border-bottom-color: rgba(13,143,102,0.18); }
[data-theme="verdant"] .side-action-btn { color: #4a7863; border-color: rgba(13,143,102,0.20); }
[data-theme="verdant"] .side-action-btn:hover { color: #0d8f66; background: #d4f2e3;
                                                 border-color: rgba(13,143,102,0.35); }
[data-theme="verdant"] .sidebar { border-right: 1px solid #cfe8dc; }

/* =========================================================================
   Theme: Valere Serif — softer, warmer, editorial.
   Cream sidebar, serif headings, generous padding, quiet emerald accents.
   Think Stripe docs / long-read comfort. For dashboards you stare at all day.
   ========================================================================= */
[data-theme="serif"] {
  --nav-label-bg:      #efece2;
  --nav-label-fg:      #4a5240;
  --nav-label-shadow:  inset 0 -1px 0 rgba(0,0,0,0.05);

  --brand-500:   #10a074;   /* Valere emerald — kept as accent */
  --brand-600:   #0d8f66;
  --brand-100:   #cff2e2;
  --brand-50:    #ecfbf4;

  --nav-bg:      #faf9f5;   /* warm cream (green-tinted, not amber) */
  --nav-bg-hover:#efece2;
  --nav-fg:      #2d332b;
  --nav-fg-dim:  #6b7365;
  --nav-fg-hot:  #0d8f66;
  --nav-accent:  #10a074;

  --bg:          #fbfaf5;
  --panel:       #ffffff;
  --border:      #e5e2d6;
  --border-hot:  #cfcbb9;

  --text:        #22271f;
  --text-dim:    #4a5240;
  --text-mute:   #8a8f7d;

  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;

  --font:        "Charter", "Iowan Old Style", "Iowan", Georgia, "Times New Roman",
                 serif;
  --font-size:   15px;
  --sidebar-shadow: 1px 0 0 rgba(0,0,0,0.03);
  --brand-grad:  linear-gradient(135deg, #10a074, #0d8f66);

  /* Muted, earthy Valere-green group palette */
  --group-op:    #0d8f66;
  --group-bl:    #047857;
  --group-dv:    #115e59;
  --group-mt:    #4d7c0f;
  --group-cm:    #059669;
  --group-pr:    #14532d;
  --group-fn:    #6b7d3a;
  --group-gl:    #365314;   /* Goals — earthy dark green */
}

[data-theme="serif"] .side-list a { color: #2d332b; }
[data-theme="serif"] .side-list a:hover { background: #efece2; color: #0d8f66; }
[data-theme="serif"] .side-list li.active a { background: #ecfbf4; color: #0d8f66; }
[data-theme="serif"] .side-actions { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="serif"] .side-action-btn { color: #6b7365; border-color: rgba(0,0,0,0.08); }
[data-theme="serif"] .side-action-btn:hover { color: #0d8f66; background: #ecfbf4;
                                               border-color: rgba(13,143,102,0.30); }
[data-theme="serif"] .sidebar { border-right: 1px solid #e5e2d6; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
             font-family: var(--font); font-size: var(--font-size); line-height: 1.5;
             -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
             transition: background-color .2s, color .2s; }
a { color: var(--brand-500); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h);
          background: var(--panel); border-bottom: 1px solid var(--border);
          box-shadow: var(--shadow-sm); }
.topbar-inner { height: 100%; display: flex; align-items: center;
                gap: 20px; padding: 0 20px; }

.sidebar-toggle { display: inline-flex; align-items: center; justify-content: center;
                   width: 32px; height: 32px; padding: 0; margin-right: -4px;
                   background: transparent; border: 1px solid var(--border);
                   color: var(--text-dim); border-radius: 6px; cursor: pointer;
                   transition: all .12s; }
.sidebar-toggle:hover { background: var(--brand-50); color: var(--brand-600);
                         border-color: var(--brand-500); }
.sidebar-toggle svg { display: block; transition: transform .18s; }
[data-sidebar-collapsed="true"] .sidebar-toggle svg { transform: rotate(180deg); }
[data-sidebar-collapsed="true"] .layout { grid-template-columns: 1fr; }
[data-sidebar-collapsed="true"] .sidebar { display: none; }
.topbar .brand { display: inline-flex; align-items: center; gap: 10px;
                 font-size: 16px; font-weight: 700; color: var(--text);
                 text-decoration: none; }
.topbar .brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 32px; width: auto; object-fit: contain; }

.topbar .nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.topbar .nav .nav-item { padding: 7px 12px; font-size: 13px; font-weight: 500;
                          color: var(--text-dim); border-radius: 6px; }
.topbar .nav .nav-item:hover { background: var(--brand-50); color: var(--brand-600);
                                text-decoration: none; }

.topbar .spacer { flex: 1; }

.user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px;
             border-radius: 999px; border: 1px solid var(--border); background: var(--bg); }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%;
                     background: var(--brand-grad);
                     color: #fff; display: inline-flex; align-items: center;
                     justify-content: center; font-size: 12px; font-weight: 700; }
.user-chip .who { display: flex; flex-direction: column; line-height: 1.15; }
.user-chip .user-chip-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.user-chip .user-chip-roles { font-size: 10.5px; color: var(--text-mute);
                              text-transform: uppercase; letter-spacing: 0.04em; }

.nav-logout { margin: 0; }
.nav-logout button { padding: 7px 12px; font-size: 12.5px; font-weight: 600;
                     background: var(--panel); color: var(--text-dim);
                     border: 1px solid var(--border); border-radius: 6px;
                     cursor: pointer; transition: all .15s; }
.nav-logout button:hover { background: var(--brand-50); color: var(--brand-600);
                            border-color: var(--brand-500); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.content { min-height: calc(100vh - var(--topbar-h)); padding: 0; }
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr;
          min-height: calc(100vh - var(--topbar-h)); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { background: var(--nav-bg); color: var(--nav-fg); padding: 12px 0 24px;
           border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto;
           height: calc(100vh - var(--topbar-h)); position: sticky; top: var(--topbar-h); }
.side-actions { display: flex; gap: 6px; padding: 8px 16px 10px;
                border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 6px; }
.side-action-btn { flex: 1; padding: 5px 8px; font-size: 10px; font-weight: 600;
                    text-transform: uppercase; letter-spacing: 0.06em;
                    background: transparent; color: var(--nav-fg-dim);
                    border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
                    cursor: pointer; transition: all .12s; }
.side-action-btn:hover { color: var(--nav-fg-hot); background: var(--nav-bg-hover);
                          border-color: rgba(255,255,255,0.15); }

.side-group { padding: 2px 12px 6px; }
.side-group-label { display: flex; align-items: center; gap: 10px; width: 100%;
                    font-family: inherit;
                    font-size: 12px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.08em; color: var(--nav-label-fg);
                    padding: 10px 12px 9px; margin: 6px 0 5px;
                    background: var(--nav-label-bg); border: 0; text-align: left;
                    cursor: pointer; border-radius: 6px;
                    box-shadow: var(--nav-label-shadow); transition: background .12s; }
.side-group-label:hover { color: var(--nav-fg-hot); filter: brightness(0.98); }
.side-group-name { flex: 1; }
.side-chevron { color: var(--nav-fg-dim); transition: transform .18s ease;
                margin-left: auto; }
.side-group.collapsed .side-chevron { transform: rotate(-90deg); }
.side-group.collapsed .side-list { display: none; }
.side-group-icon { display: inline-flex; align-items: center; justify-content: center;
                    color: var(--nav-accent); opacity: 1; }
.side-group-icon svg { display: block; }

/* Per-group icon color — makes the sidebar feel less monochrome. */
.side-group[data-group="Operations"]  .side-group-icon { color: var(--group-op); }
.side-group[data-group="Billing"]     .side-group-icon { color: var(--group-bl); }
.side-group[data-group="Development"] .side-group-icon { color: var(--group-dv); }
.side-group[data-group="Maintenance"] .side-group-icon { color: var(--group-mt); }
.side-group[data-group="Compliance"]  .side-group-icon { color: var(--group-cm); }
.side-group[data-group="Provider"]    .side-group-icon { color: var(--group-pr); }
.side-group[data-group="Finance"]     .side-group-icon { color: var(--group-fn); }
.side-group[data-group="Goals"]       .side-group-icon { color: var(--group-gl); }
.side-group[data-group="Admin"]       .side-group-icon { color: var(--text-dim); }

.side-group[data-group="Operations"]  .side-group-label { border-left: 3px solid var(--group-op); }
.side-group[data-group="Billing"]     .side-group-label { border-left: 3px solid var(--group-bl); }
.side-group[data-group="Development"] .side-group-label { border-left: 3px solid var(--group-dv); }
.side-group[data-group="Maintenance"] .side-group-label { border-left: 3px solid var(--group-mt); }
.side-group[data-group="Compliance"]  .side-group-label { border-left: 3px solid var(--group-cm); }
.side-group[data-group="Provider"]    .side-group-label { border-left: 3px solid var(--group-pr); }
.side-group[data-group="Finance"]     .side-group-label { border-left: 3px solid var(--group-fn); }
.side-group[data-group="Goals"]       .side-group-label { border-left: 3px solid var(--group-gl); }
.side-group[data-group="Admin"]       .side-group-label { border-left: 3px solid #94a3b8; }
.side-group .side-group-label { padding-left: 12px; border-radius: 0 4px 4px 0; }

.side-group[data-group="Operations"]  .side-list a:hover .side-dot,
.side-group[data-group="Operations"]  li.active .side-dot { background: var(--group-op); }
.side-group[data-group="Billing"]     .side-list a:hover .side-dot,
.side-group[data-group="Billing"]     li.active .side-dot { background: var(--group-bl); }
.side-group[data-group="Development"] .side-list a:hover .side-dot,
.side-group[data-group="Development"] li.active .side-dot { background: var(--group-dv); }
.side-group[data-group="Maintenance"] .side-list a:hover .side-dot,
.side-group[data-group="Maintenance"] li.active .side-dot { background: var(--group-mt); }
.side-group[data-group="Compliance"]  .side-list a:hover .side-dot,
.side-group[data-group="Compliance"]  li.active .side-dot { background: var(--group-cm); }
.side-group[data-group="Provider"]    .side-list a:hover .side-dot,
.side-group[data-group="Provider"]    li.active .side-dot { background: var(--group-pr); }
.side-group[data-group="Finance"]     .side-list a:hover .side-dot,
.side-group[data-group="Finance"]     li.active .side-dot { background: var(--group-fn); }
.side-group[data-group="Goals"]       .side-list a:hover .side-dot,
.side-group[data-group="Goals"]       li.active .side-dot { background: var(--group-gl); }

.side-group li.active a { border-left-color: var(--nav-accent) !important; }

/* Theme picker */
/* ── Native maintenance pages ────────────────────────────────────────────── */
.maint-header { display: flex; align-items: flex-start; justify-content: space-between;
                gap: 20px; margin-bottom: 16px; }
.maint-header h1 { margin: 4px 0 6px; font-size: 22px; font-weight: 700; }
.maint-header .muted { color: var(--text-dim); font-size: 13px; margin: 0; max-width: 60ch; }
.maint-actions { display: flex; gap: 8px; flex-shrink: 0; }

.maint-tbl { width: 100%; border-collapse: collapse; }
.maint-tbl thead th { padding: 12px 16px; text-align: left; background: var(--bg);
                      border-bottom: 1px solid var(--border);
                      font-size: 11px; font-weight: 700; text-transform: uppercase;
                      letter-spacing: 0.06em; color: var(--text-mute); }
.maint-tbl thead th.num, .maint-tbl tbody td.num { text-align: right; }
.maint-tbl tbody td { padding: 10px 16px; border-bottom: 1px solid var(--border);
                       font-size: 14px; }
.maint-tbl tbody tr:last-child td { border-bottom: none; }
.maint-tbl tbody tr:hover { background: var(--brand-50); }
.maint-tbl tbody tr.dirty { background: #fffbea; }
.maint-tbl tbody tr.dirty:hover { background: #fff5d0; }
.cell-input { width: 140px; padding: 6px 10px; font-size: 14px; font-family: inherit;
              border: 1px solid var(--border); border-radius: 4px; text-align: right;
              background: var(--panel); color: var(--text); outline: none;
              font-variant-numeric: tabular-nums;
              transition: border-color .12s, box-shadow .12s; }
.cell-input:focus { border-color: var(--brand-500);
                    box-shadow: 0 0 0 3px var(--brand-50); }

.maint-status { margin-top: 12px; font-size: 13px; font-weight: 600; min-height: 20px; }
.maint-status.ok  { color: var(--ok); }
.maint-status.err { color: var(--err); }

/* User table extras */
.user-name { font-weight: 600; color: var(--text); font-family: ui-monospace, monospace; font-size: 13px; }
.row-actions { display: flex; gap: 6px; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.danger { background: var(--panel); color: var(--err); border-color: #fecaca; }
.btn.danger:hover { background: #fef2f2; color: var(--err); border-color: var(--err); }

.role-chip { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
              border-radius: 999px; margin-right: 4px; background: var(--bg);
              color: var(--text-dim); border: 1px solid var(--border); }
.role-chip.role-administrator { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
.role-chip.role-corporate     { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
.role-chip.role-office-manager{ background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.role-chip.role-billing       { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.role-chip.role-analyst       { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }

.auth-chip { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
              border-radius: 999px; }
.auth-chip.auth-hashed { background: #dcfce7; color: #166534; }
.auth-chip.auth-plain  { background: #fef3c7; color: #92400e; }

/* Modal system */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55);
                   z-index: 150; display: flex; align-items: flex-start;
                   justify-content: center; padding: 12vh 20px 20px;
                   backdrop-filter: blur(3px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: 100%; max-width: 520px; background: var(--panel);
         border: 1px solid var(--border); border-radius: 12px;
         box-shadow: 0 20px 60px rgba(15,23,42,0.30); overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
              padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-close { background: transparent; border: 0; font-size: 22px; line-height: 1;
                color: var(--text-mute); cursor: pointer; padding: 0 6px; }
.modal-close:hover { color: var(--text); }
.modal form { padding: 20px; }
.modal .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal .field label { font-size: 12px; font-weight: 600; color: var(--text-dim);
                       text-transform: uppercase; letter-spacing: 0.04em; }
.modal .field input[type=text], .modal .field input[type=password] {
  padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); outline: none; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.modal .field input:focus { border-color: var(--brand-500);
                             box-shadow: 0 0 0 3px var(--brand-50); }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px;
               padding-top: 8px; border-top: 1px solid var(--border); margin: 8px -20px -20px;
               padding: 14px 20px; }

.role-checks { display: flex; flex-direction: column; gap: 8px; }
.role-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
               border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
               transition: background .12s, border-color .12s; }
.role-check:hover { background: var(--brand-50); border-color: var(--brand-500); }
.role-check input { margin-top: 3px; }
.role-check-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.role-check-desc { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pw-hint { color: var(--text-mute); font-size: 12px; margin-top: 6px; font-style: italic; }

/* Filter row (procedures + future maintenance grids) */
.filter-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.filter-cell { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.filter-cell label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
                      font-weight: 700; color: var(--text-mute); }
.filter-cell input, .filter-cell select {
  padding: 8px 12px; font-size: 13.5px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); color: var(--text); outline: none;
  font-family: inherit; min-width: 160px;
  transition: border-color .12s, box-shadow .12s;
}
.filter-cell input:focus, .filter-cell select:focus { border-color: var(--brand-500);
                                                       box-shadow: 0 0 0 3px var(--brand-50); }
.filter-cell-search input { min-width: 280px; }
.filter-cell-count { min-width: 90px; text-align: right; }
.filter-count { padding: 8px 12px; font-size: 15px; font-weight: 700; color: var(--brand-600);
                background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 6px;
                font-variant-numeric: tabular-nums; text-align: right; }

/* Two-column grid for modal fields */
.modal .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .grid-2 .field-span2 { grid-column: 1 / -1; }

/* ── Top pills (quick-access dashboards) ────────────────────────────────── */
.top-pills { display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
             margin-left: 12px; padding: 3px; background: var(--bg);
             border: 1px solid var(--border); border-radius: 999px; }
.top-pill  { padding: 5px 12px; font-size: 12px; font-weight: 600;
             color: var(--text-dim); border-radius: 999px;
             text-decoration: none; white-space: nowrap; transition: all .12s; }
.top-pill:hover { background: var(--brand-50); color: var(--brand-600);
                   text-decoration: none; }
.top-pill.active { background: var(--brand-500); color: #fff; }
.top-pill.active:hover { background: var(--brand-600); color: #fff; }

/* Adaptive: on narrower viewports drop the outer pill border so it looks
   less crowded next to the brand. */
@media (max-width: 1200px) {
  .top-pills { border: 0; background: transparent; padding: 0; }
}

/* ── Omnibox search ─────────────────────────────────────────────────────── */
.omni-trigger { display: inline-flex; align-items: center; gap: 8px;
                padding: 6px 10px 6px 12px; font-size: 12.5px; color: var(--text-dim);
                background: var(--bg); border: 1px solid var(--border);
                border-radius: 999px; cursor: pointer; margin-right: 8px;
                transition: all .12s; font-family: inherit; }
.omni-trigger:hover { background: var(--brand-50); color: var(--brand-600);
                       border-color: var(--brand-500); }
.omni-trigger-label { font-weight: 500; }
.omni-kbd { display: inline-flex; align-items: center; padding: 1px 6px;
             font-size: 10px; font-weight: 600; color: var(--text-mute);
             background: var(--panel); border: 1px solid var(--border);
             border-radius: 4px; font-family: ui-monospace, monospace; margin-left: 4px; }

.omni-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45);
                  z-index: 100; display: flex; align-items: flex-start;
                  justify-content: center; padding: 12vh 20px 20px;
                  backdrop-filter: blur(3px); }
.omni-backdrop[hidden] { display: none; }
.omni-panel { width: 100%; max-width: 620px; background: var(--panel);
              border: 1px solid var(--border); border-radius: 12px;
              box-shadow: 0 20px 60px rgba(15,23,42,0.30); overflow: hidden; }
.omni-input-row { display: flex; align-items: center; gap: 10px;
                   padding: 14px 16px; border-bottom: 1px solid var(--border);
                   color: var(--text-dim); }
.omni-input-row input { flex: 1; padding: 0; border: 0; outline: 0;
                         font-size: 15px; font-family: inherit; color: var(--text);
                         background: transparent; }
.omni-input-row input::placeholder { color: var(--text-mute); }
.omni-kbd-hint { margin-left: auto; }

.omni-results { max-height: 45vh; overflow-y: auto; padding: 6px; }
.omni-item { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; padding: 9px 12px; border-radius: 6px;
             color: var(--text); text-decoration: none; cursor: pointer; }
.omni-item:hover, .omni-item.active { background: var(--brand-50); text-decoration: none;
                                       color: var(--brand-600); }
.omni-item-label { font-weight: 500; font-size: 13.5px; }
.omni-item-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.06em; color: var(--text-mute);
                    padding: 3px 7px; background: var(--bg); border-radius: 4px; }
.omni-item.active .omni-item-group { background: var(--brand-100); color: var(--brand-600); }
.omni-empty { padding: 32px 16px; text-align: center; color: var(--text-mute); font-size: 13px; }
.omni-footer { display: flex; justify-content: center; gap: 20px;
                padding: 10px 14px; border-top: 1px solid var(--border);
                background: var(--bg); font-size: 11px; color: var(--text-mute); }
.omni-footer kbd { padding: 1px 5px; font-family: ui-monospace, monospace;
                   background: var(--panel); border: 1px solid var(--border);
                   border-radius: 3px; font-size: 10px; margin: 0 2px; }

.theme-picker { display: inline-flex; align-items: center; gap: 4px; padding: 3px;
                background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
                margin-right: 8px; }
.theme-picker button { padding: 4px 10px; font-size: 11px; font-weight: 600;
                       color: var(--text-dim); background: transparent; border: 0;
                       border-radius: 999px; cursor: pointer; transition: all .12s;
                       letter-spacing: 0.02em; }
.theme-picker button:hover { color: var(--text); }
.theme-picker button.active { background: var(--brand-500); color: #fff; }
[data-theme="serif"]   .theme-picker button.active { background: var(--brand-600); }
[data-theme="verdant"] .theme-picker button.active { background: var(--brand-500); }
[data-theme="dark"]    .theme-picker button.active { background: var(--brand-500); color: #fff; }

.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { margin: 2px 0; }
.side-list a, .side-list .muted {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 12px; font-size: 14px; color: var(--nav-fg);
  border-radius: 6px; text-decoration: none; transition: background .12s, color .12s;
  border-left: 3px solid transparent;
}
.side-list .side-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
                        background: currentColor; opacity: 0.35; transition: opacity .12s; }
.side-list a:hover { background: var(--nav-bg-hover); color: var(--nav-fg-hot);
                     text-decoration: none; }
.side-list a:hover .side-dot { opacity: 0.75; }
.side-list li.active a { background: var(--nav-bg-hover); color: var(--nav-fg-hot);
                          border-left-color: var(--nav-accent); font-weight: 600; }
.side-list li.active .side-dot { background: var(--nav-accent); opacity: 1; }
.side-list li.unlinked .muted { color: var(--nav-fg-dim); font-style: italic; cursor: default; }
.side-list li.unlinked .side-dot { opacity: 0.15; }

/* ── Workspace ───────────────────────────────────────────────────────────── */
.workspace { padding: 24px 32px; }
.workspace-iframe { padding: 0; display: flex; flex-direction: column;
                    height: calc(100vh - var(--topbar-h)); }

.iframe-header { display: flex; align-items: center; justify-content: space-between;
                 padding: 10px 20px; border-bottom: 1px solid var(--border);
                 background: var(--panel); }
.iframe-header.slim { padding: 8px 20px; }
.iframe-crumb { font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
                text-transform: uppercase; color: var(--text-dim); }

.dashboard-frame { flex: 1; width: 100%; border: 0; background: var(--panel); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: var(--shadow-sm);
        padding: 24px 26px; }
.card.welcome h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.card.welcome > .muted { color: var(--text-dim); font-size: 13px; margin: 0 0 22px; }

.section-h { font-size: 11px; font-weight: 700; text-transform: uppercase;
             letter-spacing: 0.08em; color: var(--text-mute);
             margin: 22px 0 10px; }

/* Landing quicklinks */
.quicklinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
              gap: 10px; }
.quicklink { padding: 14px 16px; font-size: 13.5px; font-weight: 600;
             color: var(--text); background: var(--brand-50);
             border: 1px solid var(--brand-100); border-radius: var(--radius-sm);
             text-decoration: none; transition: all .15s; }
.quicklink:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500);
                    text-decoration: none; }

/* Landing group grid */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
              gap: 14px; }
.group-card { background: var(--panel); border: 1px solid var(--border);
              border-radius: var(--radius-sm); padding: 14px 16px 12px; }
.group-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.08em; color: var(--brand-600);
                    padding-bottom: 8px; margin-bottom: 8px;
                    border-bottom: 1px solid var(--border); }
.group-card ul { list-style: none; margin: 0; padding: 0; }
.group-card li { padding: 4px 0; font-size: 13px; }
.group-card li a { color: var(--text); }
.group-card li a:hover { color: var(--brand-600); text-decoration: none; }
.group-card li.muted { color: var(--text-mute); font-style: italic; }

.card.muted-card { background: var(--brand-50); border-color: var(--brand-100); }
.card.muted-card h2 { margin: 0 0 8px; font-size: 16px; color: var(--brand-600); }
.card.muted-card p { color: var(--text-dim); font-size: 13px; margin: 6px 0; }

.btn { display: inline-flex; align-items: center; gap: 6px;
       padding: 8px 14px; font-size: 13px; font-weight: 600;
       color: #fff; background: var(--brand-500); border: 1px solid var(--brand-500);
       border-radius: 6px; cursor: pointer; text-decoration: none;
       transition: all .15s; }
.btn:hover { background: var(--brand-600); border-color: var(--brand-600);
             text-decoration: none; color: #fff; }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn.secondary { background: var(--panel); color: var(--text);
                 border-color: var(--border); }
.btn.secondary:hover { background: var(--brand-50); color: var(--brand-600);
                       border-color: var(--brand-500); }

/* ── Auth pages ──────────────────────────────────────────────────────────── */
.auth-page { background: linear-gradient(135deg, #d5dae0 0%, #6b7684 100%); }
[data-theme="light"]   .auth-page { background: linear-gradient(135deg, #d5dae0 0%, #1c2530 100%); }
[data-theme="dark"]    .auth-page { background: linear-gradient(135deg, #1c2530 0%, #0d8f66 100%); }
[data-theme="verdant"] .auth-page { background: linear-gradient(135deg, #eafaf3 0%, #059669 100%); }
[data-theme="serif"]   .auth-page { background: linear-gradient(135deg, #faf9f5 0%, #0d8f66 100%); }
.auth-page .topbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); }
.auth-page .content { display: flex; align-items: center; justify-content: center;
                       min-height: calc(100vh - var(--topbar-h)); padding: 20px; }
.auth-shell { max-width: 440px; width: 100%; margin: 0; padding: 40px 40px 36px;
              background: var(--panel); border: 1px solid var(--border);
              border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.auth-logo { text-align: center; margin: 0 0 24px; }
.auth-logo img { display: inline-block; max-width: 240px; max-height: 90px;
                 width: auto; height: auto; border-radius: var(--radius-sm); }
.auth-shell h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; text-align: center; }
.auth-shell .subtitle { color: var(--text-dim); font-size: 13.5px; margin: 0 0 24px;
                        text-align: center; }
.auth-shell .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-shell label { font-size: 12px; font-weight: 600; color: var(--text-dim);
                    text-transform: uppercase; letter-spacing: 0.05em; }
.auth-shell input[type=text],
.auth-shell input[type=password],
.auth-shell input { padding: 10px 12px; font-size: 14px; border: 1px solid var(--border);
                    border-radius: 6px; background: var(--panel); color: var(--text);
                    outline: none; transition: border-color .15s, box-shadow .15s; }
.auth-shell input:focus { border-color: var(--brand-500);
                          box-shadow: 0 0 0 3px var(--brand-50); }
.auth-shell button[type=submit] { width: 100%; padding: 11px 16px; font-size: 14px;
                                   font-weight: 600; color: #fff;
                                   background: var(--brand-500); border: 0;
                                   border-radius: 6px; cursor: pointer;
                                   margin-top: 6px; transition: background .15s; }
.auth-shell button[type=submit]:hover { background: var(--brand-600); }
.auth-shell .error { padding: 10px 12px; margin-bottom: 14px;
                     background: #fef2f2; color: var(--err); font-size: 13px;
                     border-radius: 6px; border: 1px solid #fecaca; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.muted { color: var(--text-mute); }