/* ==========================================================================
   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;
}

/* =========================================================================
   Theme: Valere Light — brand palette from the customer logo. DEFAULT.
   Near-white sidebar + emerald accents + charcoal text.
   ========================================================================= */
[data-theme="light"] {
  /* Section-header chip: soft silver tone lifted from the logo background */
  --nav-label-bg:      linear-gradient(180deg, #eef2f4 0%, #e2e7ea 100%);
  --nav-label-fg:      #4a5568;
  --nav-label-shadow:  inset 0 -1px 0 rgba(28,37,48,0.06);

  --brand-500:   #10a074;   /* emerald from the leaf mark */
  --brand-600:   #0d8f66;
  --brand-100:   #cff2e2;
  --brand-50:    #ecfbf4;

  /* Light editorial-style sidebar with green tint */
  --nav-bg:      #f8faf9;
  --nav-bg-hover:#eaf4ef;
  --nav-fg:      #1c2530;   /* Valere charcoal — legible on light bg */
  --nav-fg-dim:  #64748b;
  --nav-fg-hot:  #0d8f66;   /* deep emerald on hover */
  --nav-accent:  #10a074;   /* emerald active bar */

  --bg:          #f4f6f8;
  --panel:       #ffffff;
  --border:      #dfe4ea;
  --border-hot:  #c8d0d8;

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

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

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

  /* All group accents in the Valere green family — distinct shades so groups
     stay visually differentiated, but they all read as "Valere". */
  --group-op:    #10a074;   /* emerald primary */
  --group-bl:    #059669;   /* forest */
  --group-dv:    #0d9488;   /* teal */
  --group-mt:    #65a30d;   /* olive/sage */
  --group-cm:    #34d399;   /* mint */
  --group-pr:    #166534;   /* dark forest */
  --group-fn:    #84cc16;   /* lime */
}

/* Under the Valere theme, sidebar internals need a couple of light-mode tweaks
   because the base rules were tuned for a dark navy background. */
[data-theme="light"] .side-group-label { color: #4a5568; }
[data-theme="light"] .side-group-label:hover { color: #0d8f66; }
[data-theme="light"] .side-group-label { border-bottom-color: rgba(16,160,116,0.10); }
[data-theme="light"] .side-actions { border-bottom-color: rgba(16,160,116,0.10); }
[data-theme="light"] .side-action-btn { color: #64748b; border-color: rgba(16,160,116,0.15); }
[data-theme="light"] .side-action-btn:hover { color: #0d8f66; background: #ecfbf4;
                                              border-color: rgba(16,160,116,0.30); }
[data-theme="light"] .side-list a { color: #1c2530; }
[data-theme="light"] .side-list a:hover { background: #ecfbf4; color: #0d8f66; }
[data-theme="light"] .side-list li.active a { background: #ecfbf4; color: #0d8f66; }
[data-theme="light"] .side-list li.unlinked .muted { color: #94a3b8; }
[data-theme="light"] .sidebar { border-right: 1px solid #e5eae7; }

/* =========================================================================
   Theme: Valere Dark — same brand DNA, flipped chrome.
   Charcoal (logo bottom) sidebar with emerald pops. Content stays white.
   Feels like a "data terminal" — good for long staring sessions.
   ========================================================================= */
[data-theme="dark"] {
  --nav-label-bg:      linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  --nav-label-fg:      #94a3b8;
  --nav-label-shadow:  inset 0 -1px 0 rgba(16,160,116,0.15);

  --brand-500:   #10a074;   /* emerald from the leaf mark */
  --brand-600:   #0d8f66;
  --brand-100:   #cff2e2;
  --brand-50:    #ecfbf4;

  --nav-bg:      #1c2530;   /* Valere charcoal — from logo bottom */
  --nav-bg-hover:#2a3542;
  --nav-fg:      #cbd5e1;   /* legible slate on charcoal */
  --nav-fg-dim:  #64748b;
  --nav-fg-hot:  #34d399;   /* mint pop on hover for contrast */
  --nav-accent:  #10a074;

  --bg:          #f6f8fa;
  --panel:       #ffffff;
  --border:      #e2e8ee;
  --border-hot:  #cbd4dd;

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

  --brand-grad:  linear-gradient(135deg, #10a074, #0d8f66);
  --sidebar-shadow: 1px 0 0 rgba(0,0,0,0.10);

  /* Group accents brightened for dark bg — same green family, more punch */
  --group-op:    #34d399;   /* bright mint */
  --group-bl:    #10b981;   /* emerald */
  --group-dv:    #2dd4bf;   /* teal-mint */
  --group-mt:    #a3e635;   /* lime */
  --group-cm:    #6ee7b7;   /* pale mint */
  --group-pr:    #4ade80;   /* leaf */
  --group-fn:    #bef264;   /* chartreuse */
}

/* Dark theme structural overrides — force emerald active state on dark bg */
[data-theme="dark"] .side-list a { color: var(--nav-fg); }
[data-theme="dark"] .side-list a:hover { background: rgba(16,160,116,0.12); color: var(--nav-fg-hot); }
[data-theme="dark"] .side-list li.active a { background: rgba(16,160,116,0.18); color: #6ee7b7; }
[data-theme="dark"] .sidebar { border-right: 1px solid #0f1620; }

/* =========================================================================
   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;
}

[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;
}

[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="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 .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 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); }