/* ── DESIGN TOKENS (Phase 1, 2026-05-10) ─────────────────────────────────── */
/* Single source of truth for color, radius, shadow, spacing, typography.
 * Council-approved (Rams + Torvalds + Taleb + Meadows, unanimous). Pairs
 * with scripts/lint-no-raw-styles.sh which blocks new raw hex / inline
 * style="" / .style. writes from entering admin/. The two land together —
 * tokens without enforcement rot in weeks.
 *
 * Existing rules below this block still use literal values; that's by
 * design. Phase 2 (Help Desk drawer prototype) is the first surface to
 * convert. Phase 3 sweeps the remaining 121 PHP + 88 JS inline styles plus
 * the legacy hex literals in style.css.
 *
 * Values were grep-ranked from actual usage — top hex frequencies became
 * the surface stack; brand greens lifted from V-Label header copy.
 */
:root {
  /* Brand */
  --brand-vlabel-green:        #004236;
  --brand-vlabel-green-bright: #6cc24a;
  --brand-vlabel-green-deep:   #55A524;

  /* Surfaces — light mode (operator's day-mode default per soak) */
  --surface-0: #ffffff;        /* page background */
  --surface-1: #f6f8fa;        /* card / panel */
  --surface-2: #eef1f5;        /* row hover, hd-col bg */
  --surface-3: #e4e6eb;        /* divider/border */
  --text-primary:   #1f2937;
  --text-secondary: #555555;
  --text-muted:     #888888;
  --text-dim:       #9ca3af;   /* low-emphasis gray — inactive status dots (2026-06-03 #20) */
  --border-soft:    #e5e7eb;
  --border-mid:     #c0c8d4;
  --border-strong:  #b0b7c3;   /* one step stronger than --border-mid (2026-06-03 #20) */
  --audit-flash-bg: #fde68a;   /* security deep-link row-flash highlight (2026-06-03 #20) */

  /* Semantic accent pairs — bg + fg, two-tone, AA-contrast.
   * Use bg for filled pills, fg for the text-on-pill or the icon color
   * on a neutral card. Light-mode values; dark-mode overrides below. */
  --accent-success-bg: #d5f5e3;  --accent-success-fg: #1e8449;
  --accent-warn-bg:    #fde68a;  --accent-warn-fg:    #78350f;
  --accent-danger-bg:  #fdecea;  --accent-danger-fg:  #c0392b;
  --accent-info-bg:    #dbeafe;  --accent-info-fg:    #1e40af;
  --accent-neutral-bg: #e4e6eb;  --accent-neutral-fg: #555555;

  /* Soft warn pair — paler than --accent-warn-* above. Used by the drawer
   * warn banner. Border is the saturated orange anchor; bg/fg sit inside it. */
  --accent-warn-soft-bg:     #fff8e1;
  --accent-warn-soft-fg:     #6d4c00;
  --accent-warn-soft-border: #f39c12;

  /* Radii — 4 + 50%. Tags 2, badges/inputs 4, cards/buttons 6, large 10, pill */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Shadows — three tiers grep-ranked from actual usage */
  --shadow-low:  0 1px 4px rgba(0, 0, 0, .08);
  --shadow-mid:  0 3px 10px rgba(0, 0, 0, .12);
  --shadow-high: 0 8px 32px rgba(0, 0, 0, .18);

  /* Spacing — 4px base. Use these instead of inventing 7px / 14px ad-hoc. */
  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;   --space-6: 24px;   --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;   --space-10: 64px;  --space-11: 80px; --space-12: 96px;

  /* Typography scale — 4 sizes only (caption / body / heading / display).
   * Resist a fifth. Line-height + tracking bundled where it matters. */
  --text-caption:   11px;
  --text-body:      13px;
  --text-heading:   18px;
  --text-display:   24px;
  --font-stack:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark-mode overrides — primary mode for the IT operator. */
body.dark {
  --surface-0: #15181d;
  --surface-1: #1f232a;
  --surface-2: #2a2f38;
  --surface-3: #353b46;
  --text-primary:   #e4e6eb;
  --text-secondary: #c0c8d4;
  --text-muted:     #9ba3af;
  --text-dim:       #6b7280;   /* low-emphasis gray — inactive status dots (2026-06-03 #20) */
  --border-soft:    #2a2f38;
  --border-mid:     #353b46;
  --border-strong:  #454c5a;   /* one step stronger than --border-mid (2026-06-03 #20) */
  --audit-flash-bg: #78350f;   /* security deep-link row-flash highlight, dark (2026-06-03 #20) */

  --accent-success-bg: rgba(46, 204, 113, .15);  --accent-success-fg: #6cc24a;
  --accent-warn-bg:    rgba(243, 156, 18, .15);  --accent-warn-fg:    #f4a261;
  --accent-danger-bg:  rgba(192, 57, 43, .18);   --accent-danger-fg:  #ff7b6e;
  --accent-info-bg:    rgba(52, 152, 219, .18);  --accent-info-fg:    #58a6ff;
  --accent-neutral-bg: #2a2f38;                  --accent-neutral-fg: #c0c8d4;

  --accent-warn-soft-bg:     #3a2f0a;
  --accent-warn-soft-fg:     #ffd166;
  --accent-warn-soft-border: #d4912a;
}

/* ── LOGIN PAGE ──────────────────────────────────────────────────────────── */
/* Used only when rendering the login form. No conflicts with dashboard styles. */

.login-box { background: var(--surface-0); border-radius: 10px; padding: 40px;
             box-shadow: 0 4px 20px rgba(0,0,0,.1); width: 100%; max-width: 380px; }
.logo { text-align: center; margin-bottom: 28px; }
.logo h1 { font-size: 22px; color: var(--brand-vlabel-green); font-weight: 700; }
.logo p  { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
input[type=password] { width: 100%; padding: 10px 14px; border: 1px solid #ddd;
                       border-radius: 6px; font-size: 15px; outline: none; }
input[type=password]:focus { border-color: var(--brand-vlabel-green); }
button[type=submit] { width: 100%; padding: 11px; background: var(--brand-vlabel-green); color: #fff;
                      border: none; border-radius: 6px; font-size: 15px; font-weight: 500;
                      cursor: pointer; margin-top: 16px; }
button[type=submit]:hover { background: #003028; }
/* The sign-in code step (R13, 2026-10-20): each label sits above its field, and the verification code field is as wide, as tall and as padded as the
   Sign in button, in the light and the dark sign-in alike (the dark block below only paints it). The password field and the button share the height. */
.login-box label { display: block; margin-bottom: 6px; }
.login-box label[for=totp] { margin-top: 14px; }
.login-box input[type=text] { display: block; width: 100%; height: 44px; padding: 11px; border: 1px solid var(--border-mid); border-radius: 6px; font-size: 15px; }
.login-box input[type=text]:focus { border-color: var(--brand-vlabel-green); }
.login-box input[type=password] { height: 44px; }
.login-box button[type=submit] { height: 44px; }
.error { background: var(--accent-danger-bg); color: var(--accent-danger-fg); border-radius: 6px;
         padding: 9px 12px; font-size: 13px; margin-bottom: 16px; }
/* Center the login card (was pinned to the top-left corner). The login <body>
   carries .login-page; the dashboard <body> never does, so this is isolated. */
body.login-page { display: flex; min-height: 100vh; min-height: 100dvh;
                  align-items: center; justify-content: center; padding: 24px; }

/* ── LOGIN PAGE, DARK ────────────────────────────────────────────────────── */
/* The sign-in page follows the saved panel theme. The server renders <html class="dark">; a
   small inline script in the login <head> removes the class when localStorage "theme" is
   "light". Every rule below is scoped to html.dark body.login-page, so the light sign-in and
   the dashboard are untouched. Colours are the React panel's dark palette. */
html.dark:has(> body.login-page) { color-scheme: dark; }   /* dark scrollbar and overscroll */
html.dark body.login-page {
  color-scheme: dark;
  --login-page:         #0e1014;
  --login-card:         #1a1e24;
  --login-field:        #121519;
  --login-text:         #e3e6ea;
  --login-muted:        #969ea8;
  --login-line:         #2e333b;
  --login-accent:       #3fa84e;
  --login-accent-hover: #52b160;
  --login-on-accent:    #0e1014;   /* dark text on the green button, white would be too faint */
  --login-error:        #f97066;
  --login-error-bg:     rgba(249, 112, 102, .12);
  --login-error-line:   rgba(249, 112, 102, .32);
  background: var(--login-page);
  color: var(--login-text);
}
html.dark body.login-page .login-box {
  background: var(--login-card);
  box-shadow: 0 0 0 1px var(--login-line), 0 8px 32px rgba(0, 0, 0, .4);
}
html.dark body.login-page .logo h1 { color: var(--login-accent); }
html.dark body.login-page .logo p  { color: var(--login-muted); }
html.dark body.login-page .login-box input[type=password],
html.dark body.login-page .login-box input[type=text] {
  background: var(--login-field); color: var(--login-text); caret-color: var(--login-text);
  border: 1px solid var(--login-line);
}
/* The code field, the labels and the Sign in button take their size, padding and layout from the base rules above, so both themes match. */
html.dark body.login-page .login-box input::placeholder { color: var(--login-muted); opacity: 1; }
/* Focus: accent border plus a ring. The light password field removes its outline, dark keeps one. */
html.dark body.login-page .login-box input:focus { border-color: var(--login-accent); }
html.dark body.login-page .login-box input:focus-visible,
html.dark body.login-page .login-box button[type=submit]:focus-visible {
  outline: 2px solid var(--login-accent); outline-offset: 2px;
}
/* Browser autofill paints a pale field. Keep it on the dark field colour. */
html.dark body.login-page .login-box input:-webkit-autofill,
html.dark body.login-page .login-box input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--login-text); caret-color: var(--login-text);
  box-shadow: 0 0 0 1000px var(--login-field) inset;
}
html.dark body.login-page button[type=submit] { background: var(--login-accent); color: var(--login-on-accent); }
html.dark body.login-page button[type=submit]:hover { background: var(--login-accent-hover); }
html.dark body.login-page .error {
  background: var(--login-error-bg); color: var(--login-error);
  box-shadow: inset 0 0 0 1px var(--login-error-line);
}

/* ── RESET & BASE ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: #f0f2f5; color: #333; font-size: 14px; overflow-y: scroll; }
/* Override the legacy body{overflow-y:scroll} above without editing that hex-bearing
   line (keeps the raw-style lint clean). auto + stable gutter = a scrollbar only when
   content overflows, with no layout shift. (2026-06-06) */
body { overflow-y: auto; scrollbar-gutter: stable; }

/* Keyboard focus ring (a11y). Shows on keyboard navigation, not mouse clicks.
   --accent-success-fg flips light↔dark green so it stays visible in both themes. */
:focus-visible { outline: 2px solid var(--accent-success-fg); outline-offset: 2px; border-radius: 3px; }

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; width: 220px; height: 100vh; height: 100dvh;
  background: var(--brand-vlabel-green); color: #fff; display: flex; flex-direction: column;
  z-index: 100; overflow-y: auto;
}
.sidebar-header {
  padding: 18px 16px 12px; display: flex; align-items: center;
  justify-content: space-between; flex-shrink: 0;
}
.sidebar-logo       { font-size: 15px; font-weight: 700; line-height: 1.2; }
.sidebar-logo span  { display: block; font-size: 11px; font-weight: 400; opacity: .7; margin-top: 2px; }
.sidebar-nav        { flex: 1; padding: 4px 8px; }
.sidebar-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8);
  text-decoration: none; margin-bottom: 2px; transition: background .15s;
}
.sidebar-item:hover  { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-item.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 700; }
.sidebar-badge {
  background: #e74c3c; color: #fff; border-radius: 10px;
  font-size: 10px; font-weight: 700; padding: 1px 6px; margin-left: auto;
}
.sidebar-footer { padding: 12px 12px 16px; border-top: 1px solid rgba(255,255,255,.1); flex-shrink: 0; }
.sidebar-clock { display: block; font-size: 11px; opacity: .65; margin: 8px 0; }
.sidebar-signout {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; padding: 6px 14px; border-radius: 5px; cursor: pointer;
  font-size: 12px; width: 100%;
}
.sidebar-signout:hover { background: rgba(255,255,255,.2); }

/* Hamburger (mobile only) */
.hamburger-open {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 200;
  background: var(--brand-vlabel-green); color: #fff; border: none; border-radius: 6px;
  width: 38px; height: 38px; font-size: 18px; cursor: pointer;
}
.hamburger-close {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 20px; cursor: pointer; padding: 0; line-height: 1; display: none;
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99;
}

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
.main-content { margin-left: 220px; min-height: 100vh; min-height: 100dvh; }

#automation-banner {
  background: #fff3cd; color: #856404; padding: 10px 24px;
  font-size: 13px; font-weight: 500; border-bottom: 2px solid #ffc107; display: none;
  margin: 0;
}
#automation-banner.is-active { display: block; }

.view         { display: none; padding: 20px 24px; max-width: 1300px; }
.view.active  { display: block; }
.view-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.view-title   { font-size: 20px; font-weight: 700; color: var(--brand-vlabel-green); margin: 0; }
.section      { margin-bottom: 24px; }
.section-h3   { font-size: 14px; font-weight: 700; color: var(--brand-vlabel-green); margin-bottom: 10px;
                padding-bottom: 6px; border-bottom: 2px solid #deefd8; }
.view-all-link { font-size: 12px; font-weight: 500; color: var(--brand-vlabel-green-deep); cursor: pointer; float: right; margin-top: 2px; }
.view-all-link:hover { text-decoration: underline; }

/* ── OVERVIEW COUNTERS ───────────────────────────────────────────────────── */
.overview-counters { display: flex; gap: 12px; flex-wrap: wrap; }
.ov-counter { background: var(--surface-0); border-radius: 8px; padding: 16px 20px;
              box-shadow: var(--shadow-low); flex: 1; min-width: 120px;
              border-left: 4px solid #ccc; cursor: pointer; transition: box-shadow .15s; }
.ov-counter:hover { box-shadow: var(--shadow-mid); }
.ov-counter .ov-num   { font-size: 36px; font-weight: 700; line-height: 1; }
.ov-counter .ov-label { font-size: 12px; color: #777; margin-top: 5px; }
.ov-counter.c-users    { border-color: #27ae60; } .ov-counter.c-users .ov-num    { color: #27ae60; }
.ov-counter.c-onboard  { border-color: #e67e22; } .ov-counter.c-onboard .ov-num  { color: #e67e22; }
.ov-counter.c-offboard { border-color: #c0392b; } .ov-counter.c-offboard .ov-num { color: #c0392b; }
.ov-counter.c-ilm      { border-color: #3498db; } .ov-counter.c-ilm .ov-num      { color: #3498db; }

/* ── OVERVIEW STATUS BAR ─────────────────────────────────────────────────── */
.ov-status { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 4px;
             cursor: pointer; white-space: nowrap; }
.ov-status.ok  { background: #eafaf1; color: #27ae60; border: 1px solid #a9dfbf; }
.ov-status.err { background: #fdf2f2; color: #c0392b; border: 1px solid #f5b7b1; }
/* Dark overrides (2026-06-06) — the light pastels above were a light island in
   dark mode; out-specify with body.dark + token pairs. */
body.dark .ov-status.ok  { background: var(--accent-success-bg); color: var(--accent-success-fg); border-color: transparent; }
body.dark .ov-status.err { background: var(--accent-danger-bg);  color: var(--accent-danger-fg);  border-color: transparent; }

/* Access-reviews feature-flag pill (#ar-flag-pill) — tokenized class (was an
   inline gray default + JS .style writes that pinned light colors in dark mode). */
.ar-flag-pill     { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; background: var(--surface-2); }
.ar-flag-pill.on  { background: var(--accent-success-bg); color: var(--accent-success-fg); }
.ar-flag-pill.off { background: var(--accent-danger-bg);  color: var(--accent-danger-fg); }
/* Shape + glyph prefix so colour-blind users can distinguish ok / err
   without relying on the red/green hue alone (WCAG 1.4.1). */
.ov-status.ok::before  { content: "\2713\2002"; font-weight: 700; }
.ov-status.err::before { content: "\2715\2002"; font-weight: 700; }

/* Flush-margin variant of .btn-close (e.g., ticket-detail header). */
.btn-close--flush { margin: 0; }

/* ── RECENT ACTIVITY FEED ────────────────────────────────────────────────── */
.activity-tier-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #aaa; margin-bottom: 2px; }
.event-feed { display: flex; flex-direction: column; gap: 0; }
.event-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 0;
              border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.event-item:last-child { border-bottom: none; }
.event-time  { color: #aaa; font-size: 11px; white-space: nowrap; min-width: 96px; }
.event-name  { font-weight: 500; color: #333; white-space: nowrap; }
.event-action { color: #555; }
.event-by    { color: #aaa; font-size: 11px; }

/* ── STAT CARDS ──────────────────────────────────────────────────────────── */
.stats-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-card  { background: #fff; border-radius: 8px; padding: 14px 18px;
              box-shadow: 0 1px 4px rgba(0,0,0,.08); min-width: 130px; flex: 1;
              border-left: 4px solid #ccc; cursor: pointer; transition: box-shadow .15s; }
.stat-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.stat-card .count { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-card .label { font-size: 12px; color: #777; margin-top: 4px; }
.stat-sparkline    { margin-top: 6px; height: 18px; line-height: 0;
                     color: inherit; pointer-events: none; }
.stat-sparkline svg { display: block; }
.stat-card.intake      { border-color: #3498db; } .stat-card.intake .count      { color: #3498db; }
.stat-card.prov        { border-color: #e67e22; } .stat-card.prov .count        { color: #e67e22; }
.stat-card.provconf    { border-color: #27ae60; } .stat-card.provconf .count    { color: #27ae60; }
.stat-card.provcont    { border-color: #f39c12; } .stat-card.provcont .count    { color: #f39c12; }
.stat-card.qm          { border-color: #9b59b6; } .stat-card.qm .count          { color: #9b59b6; }
.stat-card.specialized { border-color: #1abc9c; } .stat-card.specialized .count { color: #1abc9c; }
.stat-card.complete    { border-color: #27ae60; } .stat-card.complete .count    { color: #27ae60; }
.stat-card.legacy      { border-color: #95a5a6; } .stat-card.legacy .count      { color: #95a5a6; }

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge             { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.b-intake          { background: #deefd8; color: #004236; }
.b-prov            { background: #fdebd0; color: #ca6f1e; }
.b-provconf        { background: #d5f5e3; color: #1e8449; }
.b-provcont        { background: #fef9e7; color: #9a7d0a; }
.b-qm              { background: #e8daef; color: #6c3483; }
.b-specialized     { background: #d1f2eb; color: #0e6655; }
.b-complete        { background: #d5f5e3; color: #1e8449; }
.b-legacy          { background: #eaecee; color: #616a6b; }
.b-offboarding     { background: #fdecea; color: #c0392b; }
.mode-auto         { background: #d5f5e3; color: #1e8449; }
.mode-manual       { background: #fdebd0; color: #ca6f1e; font-weight: 700; }
.sc-active         { background: #d5f5e3; color: #1e8449; }
.sc-inactive       { background: #fdecea; color: #c0392b; }
.sc-unknown        { background: #eaecee; color: #616a6b; }

/* ── TABLES ──────────────────────────────────────────────────────────────── */
.table-wrap        { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow-x: auto; }
table              { width: 100%; border-collapse: collapse; }
th                 { background: #f5f7fa; text-align: left; padding: 10px 12px;
                     font-size: 12px; font-weight: 700; color: #555; border-bottom: 1px solid #e5e8ec; white-space: nowrap; }
th.sortable        { cursor: pointer; }
th.sortable:hover  { background: #eceef2; }
td                 { padding: 9px 12px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
tr:last-child td   { border-bottom: none; }
tr:hover td        { background: #fafbfc; }
.name              { font-weight: 500; }
.sub               { font-size: 12px; color: #888; }
td.actions         { white-space: nowrap; }
.log-notes         { max-width: 320px; white-space: normal; word-break: break-word; line-height: 1.4; font-size: 12px; color: #666; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn         { display: inline-block; padding: 5px 12px; border-radius: 5px; font-size: 12px;
               font-weight: 500; border: none; cursor: pointer;
               transition: background-color 120ms, transform 80ms, opacity 120ms; }
.btn:hover   { opacity: .9; }
.btn:active  { transform: scale(0.97); }
.btn:disabled{ opacity: .55; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
  color: #fff;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-blue    { background: var(--brand-vlabel-green-deep); color: #fff; }
.btn-green   { background: #27ae60; color: #fff; }
.btn-orange  { background: #e67e22; color: #fff; }
.btn-gray    { background: #bdc3c7; color: #fff; }
.btn-run     { background: var(--brand-vlabel-green); color: #fff; }
.btn-red     { background: var(--accent-danger-fg); color: #fff; }
.btn-cancel  { background: #eaecee; color: var(--text-secondary); }
.btn-cancel:hover { background: #d5d8dc; }
.btn-sm      { padding: 3px 9px; font-size: 11px; }
.btn-close   { background: none; border: none; font-size: 20px; cursor: pointer; color: #aaa; padding: 2px 6px; line-height: 1; }
.btn-close:hover { color: var(--text-secondary); }
.btn-advance { display: flex; flex-direction: column; align-items: flex-start; padding: 5px 10px; line-height: 1.3; }
.btn-advance .adv-stage { font-size: 11px; font-weight: 700; }
.btn-advance .adv-desc  { font-size: 10px; font-weight: 400; opacity: .85; }

/* Automation pill */
.auto-pill      { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700;
                  cursor: pointer; transition: background .2s; user-select: none; border: none; }
.auto-pill.on   { background: #27ae60; color: #fff; }
.auto-pill.off  { background: #c0392b; color: #fff; }
.auto-pill:hover{ opacity: .85; }

/* ── ACTION ITEMS (overview) ─────────────────────────────────────────────── */
.action-items        { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.action-item {
  background: #fff; border-radius: 8px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); cursor: pointer; border-left: 4px solid #e67e22;
  transition: box-shadow .15s;
}
.action-item:hover   { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.action-item.warn    { border-color: #c0392b; }
.action-item.info    { border-color: #55A524; }
.action-item-text    { font-size: 13px; font-weight: 500; }
.action-item-sub     { font-size: 12px; color: #888; }
.action-item-none    { background: #fff; border-radius: 8px; padding: 14px 16px;
                       font-size: 13px; color: #27ae60; font-weight: 500;
                       box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ── DRIVES VIEW (F3) ────────────────────────────────────────────────────── */
.drv-drive-head    { padding: 10px 14px; background: #f5f7fa; border: 1px solid #e3e7ee;
                     border-radius: 6px; margin-bottom: 10px; }
body.dark .drv-drive-head { background: #1f2229; border-color: #2c313c; }
.drv-section       { background: #fff; border: 1px solid #e3e7ee; border-radius: 6px;
                     padding: 10px 14px; margin-bottom: 10px; }
body.dark .drv-section { background: #1a1d24; border-color: #2c313c; }
.drv-section-h     { font-size: 11px; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .04em; color: #777; margin-bottom: 8px; }
body.dark .drv-section-h { color: #9aa1ad; }
.drv-perms         { list-style: none; margin: 0 0 6px; padding: 0; }
.drv-perm          { padding: 3px 0; font-size: 12px; }
.drv-perm-who      { font-weight: 500; }
.drv-folder        { padding: 6px 0; border-left: 2px solid #eef2f7; padding-left: 8px;
                     margin-top: 4px; }
body.dark .drv-folder { border-left-color: #2c313c; }
.drv-folder-head   { font-size: 13px; font-weight: 500; }
.drv-folder-name   { color: #2c3e50; }
body.dark .drv-folder-name { color: #c8d3df; }
.drv-perm-group-tag { display: inline-block; background: #fef3c7; color: #92400e;
                      padding: 1px 6px; border-radius: 8px; font-size: 10px;
                      font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
body.dark .drv-perm-group-tag { background: #78350f; color: #fef3c7; }
.drv-perm-group   { margin: 4px 0 2px 18px; }
.drv-perm-group summary { cursor: pointer; font-size: 11px; }
.drv-perm-members { list-style: none; margin: 4px 0 0; padding-left: 14px; font-size: 12px; }
.drv-perm-members li { padding: 1px 0; color: #2c3e50; }
body.dark .drv-perm-members li { color: #c8d3df; }
.drv-perm-int     { display: inline-block; padding: 0 5px; border-radius: 8px; font-size: 10px;
                    background: #d1fae5; color: #065f46; }
.drv-perm-ext     { display: inline-block; padding: 0 5px; border-radius: 8px; font-size: 10px;
                    background: #fee2e2; color: #991b1b; }
body.dark .drv-perm-int { background: #064e3b; color: #d1fae5; }
body.dark .drv-perm-ext { background: #7f1d1d; color: #fee2e2; }

/* F3 Drives — list-row external badge + clickable permission rows */
.drv-ext-badge      { display: inline-block; padding: 1px 7px; border-radius: 10px;
                      background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 600; }
body.dark .drv-ext-badge { background: #7f1d1d; color: #fee2e2; }
.drv-perm-clickable { cursor: pointer; border-bottom: 1px dashed transparent; transition: background .12s, border-color .12s; }
.drv-perm-clickable:hover {
    background: #eef5ff;
    border-bottom-color: #3b82f6;
}
body.dark .drv-perm-clickable:hover { background: #1c2738; border-bottom-color: #60a5fa; }

/* F3 audit / security view ─────────────────────────────────────────────── */
.drawer.wide        { width: min(1100px, 70vw); }
@media (max-width: 1100px) { .drawer.wide { width: 100vw; } }

.drv-act-subbar     { display: flex; gap: 4px; padding: 8px 14px 0;
                      border-bottom: 1px solid #eee; }
body.dark .drv-act-subbar { border-bottom-color: #2a2f38; }
.drv-act-subtab     { background: transparent; border: 0; padding: 6px 12px;
                      cursor: pointer; font-size: 12px; color: #555;
                      border-bottom: 2px solid transparent; }
.drv-act-subtab.active { color: #004236; font-weight: 600;
                         border-bottom-color: #004236; }
body.dark .drv-act-subtab        { color: #aab1be; }
body.dark .drv-act-subtab.active { color: #6ee7b7; border-bottom-color: #6ee7b7; }

.audit-table                 { width: 100%; font-size: 12px; border-collapse: collapse; }
.audit-table th, .audit-table td { padding: 6px 8px; text-align: left; vertical-align: top; }
.audit-table thead th        { color: #777; font-weight: 600; border-bottom: 1px solid #e3e7ee; }
body.dark .audit-table thead th { color: #9aa1ad; border-bottom-color: #2c313c; }
.audit-table tbody tr        { border-top: 1px solid #f1f3f7; }
body.dark .audit-table tbody tr { border-top-color: #1f242c; }
.audit-table-tile            { min-width: 0; }

/* Sticky-head, scoped-scroll wrapper for Security view + drive drawer.
   Pairs with table-layout: fixed + colgroup so wide cells truncate with
   ellipsis instead of forcing the page to scroll horizontally. */
.audit-table-host             { max-height: calc(100dvh - 250px); overflow: auto;
                                border: 1px solid #eef0f4; border-radius: 4px; }
body.dark .audit-table-host   { border-color: #2c313c; }
.audit-table-host .audit-table { table-layout: fixed; }
.audit-table-host thead th    { position: sticky; top: 0; z-index: 1; background: #fff; }
body.dark .audit-table-host thead th { background: #161a20; }
.audit-table .cell-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-row[data-clickable="1"]       { cursor: pointer; }
.audit-row[data-clickable="1"]:hover { background: #f6f8fb; }
body.dark .audit-row[data-clickable="1"]:hover { background: #1c2027; }

.audit-pill                  { display: inline-block; padding: 1px 7px; border-radius: 8px;
                               font-size: 10px; font-weight: 600; background: #e5e7eb; color: #374151; }
.audit-pill-drive            { background: #dbeafe; color: #1e40af; }
.audit-pill-login            { background: #fde68a; color: #92400e; }
.audit-pill-admin            { background: #fbcfe8; color: #831843; }
.audit-pill-token            { background: #c7d2fe; color: #3730a3; }
.audit-pill-groups           { background: #d1fae5; color: #065f46; }
.audit-pill-groups_enterprise{ background: #d1fae5; color: #065f46; }
body.dark .audit-pill        { background: #2c313c; color: #c8d3df; }
body.dark .audit-pill-drive  { background: #1e3a8a; color: #dbeafe; }
body.dark .audit-pill-login  { background: #78350f; color: #fde68a; }
body.dark .audit-pill-admin  { background: #831843; color: #fbcfe8; }
body.dark .audit-pill-token  { background: #3730a3; color: #c7d2fe; }
body.dark .audit-pill-groups, body.dark .audit-pill-groups_enterprise { background: #064e3b; color: #d1fae5; }
/* Semantic status modifiers (2026-06-06) — token-based so they auto-adapt to
   dark. The body.dark variants exist only to out-specify `body.dark .audit-pill`
   (2 classes); they resolve to the same dark token values. Replaces inline
   background/color on OOO / stale-deputy / snoozed / not-synced badges. */
.audit-pill-warn { background: var(--accent-warn-bg);   color: var(--accent-warn-fg); }
.audit-pill-err  { background: var(--accent-danger-bg); color: var(--accent-danger-fg); }
.audit-pill-info { background: var(--accent-info-bg);   color: var(--accent-info-fg); }
.audit-pill-neutral { background: var(--accent-neutral-bg); color: var(--accent-neutral-fg); }
body.dark .audit-pill-warn { background: var(--accent-warn-bg);   color: var(--accent-warn-fg); }
body.dark .audit-pill-err  { background: var(--accent-danger-bg); color: var(--accent-danger-fg); }
body.dark .audit-pill-info { background: var(--accent-info-bg);   color: var(--accent-info-fg); }
body.dark .audit-pill-neutral { background: var(--accent-neutral-bg); color: var(--accent-neutral-fg); }

.security-pill               { display: inline-block; padding: 3px 10px; border-radius: 14px;
                               border: 1px solid #ccd1d9; background: #fff; cursor: pointer;
                               font-size: 12px; color: #555; transition: all .15s; }
.security-pill:hover         { background: #eef5ff; border-color: #3b82f6; }
.security-pill.active        { background: #004236; color: #fff; border-color: #004236; }
body.dark .security-pill     { background: #1f2229; border-color: #2c313c; color: #c8d3df; }
body.dark .security-pill.active { background: #6ee7b7; color: #064e3b; border-color: #6ee7b7; }

.btn-xs                      { padding: 1px 6px; font-size: 11px; line-height: 1.5; }

/* drill-down clickable cells in audit table */
.audit-link                  { color: #1d4ed8; cursor: pointer; border-bottom: 1px dashed transparent; }
.audit-link:hover            { border-bottom-color: #1d4ed8; }
body.dark .audit-link        { color: #93c5fd; }
body.dark .audit-link:hover  { border-bottom-color: #93c5fd; }

/* deep-link flash highlight (?security_event=N → row scroll-into-view + flash) */
/* Single keyframes; the flash color is the --audit-flash-bg token so dark mode
   just overrides the token (the old `body.dark @keyframes …` was invalid CSS —
   a selector can't prefix an at-rule — so the dark flash never applied).
   2026-06-03, #20. */
@keyframes audit-flash {
  0%, 100% { background: transparent; }
  10%, 70% { background: var(--audit-flash-bg); }
}
.audit-row-flash             { animation: audit-flash 4s ease-in-out 1; }

/* ── ORG EDITOR (modal form for organizations + multi-country) ───────────── */
.oe-wrap         { text-align: left; padding-right: 4px; }
.oe-top          { background: #f5f7fa; border: 1px solid #e3e7ee; border-radius: 6px;
                   padding: 10px 12px; margin-bottom: 10px; }
body.dark .oe-top { background: #1f2229; border-color: #2c313c; }
.oe-pk           { font-size: 13px; color: #333; }
body.dark .oe-pk { color: #e2e2e2; }
.oe-sub          { font-size: 12px; color: #777; margin-top: 2px; }
.oe-siblings     { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; align-items: center; }
.oe-chip-wrap    { display: inline-flex; align-items: stretch; border-radius: 12px;
                   overflow: hidden; border: 1px solid #d4dbe5; background: #eef2f7; }
body.dark .oe-chip-wrap { background: #25303d; border-color: #36404e; }
.oe-chip         { padding: 3px 10px; background: transparent; border: 0;
                   cursor: pointer; font-size: 12px; color: #2c3e50; transition: background .12s; }
.oe-chip-wrap:hover .oe-chip { background: #dde4ed; }
body.dark .oe-chip { color: #c8d3df; }
body.dark .oe-chip-wrap:hover .oe-chip { background: #2e3947; }
.oe-chip-x       { padding: 0 8px; background: transparent; border: 0; border-left: 1px solid #d4dbe5;
                   cursor: pointer; font-size: 14px; color: #888; line-height: 1; transition: all .12s; }
.oe-chip-x:hover { background: #f5dada; color: #c0392b; }
body.dark .oe-chip-x { border-left-color: #36404e; color: #aaa; }
body.dark .oe-chip-x:hover { background: #4a2424; color: #ff8a80; }
.oe-actions      { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.oe-sec          { margin-top: 14px; margin-bottom: 6px; }
.oe-fields       { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
                   margin-bottom: 4px; }
@media (max-width: 768px) { .oe-fields { grid-template-columns: 1fr; } }
.oe-row          { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oe-row-full     { grid-column: 1 / span 2; }
.oe-label        { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
                   font-weight: 600; color: #777; }
body.dark .oe-label { color: #9aa1ad; }
.oe-input        { padding: 6px 8px; border: 1px solid #ccd1da; border-radius: 4px;
                   font-size: 13px; font-family: inherit; background: #fff; color: #222;
                   outline: none; box-sizing: border-box; width: 100%; }
.oe-input:focus  { border-color: #55A524; }
body.dark .oe-input { background: #1a1d24; color: #e2e2e2; border-color: #2c313c; }
body.dark .oe-input:focus { border-color: #55A524; }
textarea.oe-input { resize: vertical; min-height: 56px; }
.oe-user         { padding: 5px 0; border-bottom: 1px solid #f0f2f5; font-size: 13px; }
body.dark .oe-user { border-bottom-color: #2c313c; }

/* ── USERS VIEW CONTROLS ─────────────────────────────────────────────────── */
.users-controls  { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.users-search-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.preset-select   { padding: 7px 10px; border: 1px solid #ddd; border-radius: 6px; background: #fff;
                   font-size: 13px; color: #333; cursor: pointer; max-width: 220px; outline: none; }
.preset-select:focus { border-color: #55A524; }
body.dark .preset-select { background: #1f2229; border-color: #2c313c; color: #e2e2e2; }
.user-search     { width: 100%; max-width: 340px; padding: 8px 12px; border: 1px solid #ddd;
                   border-radius: 6px; font-size: 14px; outline: none; background: #fff; }
.user-search:focus { border-color: #55A524; }
.filter-tabs     { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-tab      { padding: 5px 12px; border-radius: 16px; font-size: 12px; font-weight: 500;
                   border: 1px solid #ddd; background: #fff; color: #555; cursor: pointer; transition: all .15s; }
.filter-tab:hover  { border-color: #004236; color: #004236; }
.filter-tab.active { background: #004236; color: #fff; border-color: #004236; }
.webhook-pending   { display: inline-block; background: #fff3cd; color: #856404; border: 1px solid #ffc107;
                     border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: 700;
                     margin-left: 4px; vertical-align: middle; }

/* ── SCENARIO CONTROL ────────────────────────────────────────────────────── */
.triggers-grid       { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.trigger-card        { background: #fff; border-radius: 8px; padding: 14px 16px;
                       box-shadow: 0 1px 4px rgba(0,0,0,.08); display: flex;
                       align-items: center; justify-content: space-between; gap: 10px; }
.trigger-card .t-name{ font-size: 13px; font-weight: 500; }
.trigger-card .t-id  { font-size: 11px; color: #aaa; }
.trigger-card .t-desc{ font-size: 11px; color: #888; margin-top: 2px; }
.trigger-card.disabled{ opacity: .5; }
.trigger-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
                       letter-spacing: .06em; color: #aaa; margin: 12px 0 6px; }
.trigger-group-label:first-child { margin-top: 0; }

/* ── MANAGE USER DRAWER ──────────────────────────────────────────────────── */
/* P2 (2026-05-10): drawer shell tokenized. Base rules use semantic tokens;
 * dark-mode overrides for header/tabs-bar/note/tab-color removed because the
 * tokens already redefine themselves under body.dark. Per-tab inline styles
 * (198 in render functions) deferred to Phase 3 sweep — this prototype only
 * converts the drawer chrome. */
.drawer-backdrop      { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; }
.drawer-backdrop.open { display: block; }
.drawer {
  position: fixed; top: 0; right: -760px; width: 720px; max-width: 100vw;
  height: 100vh; height: 100dvh; background: var(--surface-0); z-index: 201;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
  transition: right 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer.open         { right: 0; }
/* The Drive drawer can grow to .wide on the Activity tab (~1100px). The base
   right:-760px hide is sized for the 720px default, so a wide drawer leaves a
   ~340px strip visible when "closed". Hide it via transform instead so the close
   state is correct at ANY width (mirrors the pulse-mode drawer fix above). */
#drive-drawer        { right: 0; transform: translateX(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); }
#drive-drawer.open   { transform: translateX(0); }
.drawer-header       { padding: 18px 20px 14px; border-bottom: 1px solid var(--border-soft);
                       display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
.drawer-name         { font-size: 17px; font-weight: 700; color: var(--brand-vlabel-green); margin-bottom: 5px; }
.drawer-tabs-bar     { display: flex; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; padding: 0 20px; overflow-x: auto; }
.drawer-tab          { padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--text-muted);
                       background: none; border: none; border-bottom: 3px solid transparent;
                       cursor: pointer; transition: color .15s; margin-bottom: -1px;
                       white-space: nowrap; flex-shrink: 0; }
.drawer-tab:hover    { color: var(--brand-vlabel-green); }
.drawer-tab.active   { color: var(--brand-vlabel-green); border-bottom-color: var(--brand-vlabel-green); }
.drawer-body         { overflow-y: auto; flex: 1; padding: 20px; min-height: 0; overscroll-behavior: contain; }
.drawer-tab-panel    { display: none; }
.drawer-tab-panel.active { display: block; }
.drawer-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                        color: var(--brand-vlabel-green); margin: 20px 0 10px; padding-bottom: 4px; border-bottom: 1px solid #deefd8; }
.drawer-section-title:first-child { margin-top: 0; }
.drawer-save-row     { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.drawer-note         { font-size: 11px; color: var(--text-muted); flex: 1; line-height: 1.5; }
.action-stage-card   { background: var(--surface-1); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.action-stage-label  { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.action-stage-name   { font-size: 15px; font-weight: 700; color: var(--brand-vlabel-green); margin: 4px 0; }
.action-stage-desc   { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.drawer-action-row   { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.drawer-sheet-link   { display: inline-block; font-size: 12px; color: var(--brand-vlabel-green-deep); margin-top: 16px; }
.drawer-sheet-link:hover { text-decoration: underline; }

/* ── HISTORY / TIMELINE ──────────────────────────────────────────────────── */
.timeline {
  display: flex; flex-wrap: wrap; gap: 0; margin: 16px 0; position: relative;
}
.timeline::before {
  content: ''; position: absolute; top: 16px; left: 16px; right: 16px;
  height: 2px; background: var(--border-soft); z-index: 0;
}
.tl-step {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 80px; position: relative; z-index: 1; padding: 0 4px;
}
.tl-dot {
  width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 14px;
  font-weight: 700; border: 2px solid #ddd; background: #fff;
  margin-bottom: 6px; flex-shrink: 0;
}
.tl-step.done    .tl-dot { background: #55A524; border-color: #55A524; color: #fff; }
.tl-step.current .tl-dot { background: #fff; border-color: #e67e22; color: #e67e22; font-size:10px; }
.tl-step.future  .tl-dot { background: #f5f5f5; border-color: #ddd; color: #bbb; }
.tl-label {
  font-size: 10px; text-align: center; color: #888; line-height: 1.3; max-width: 72px;
}
.tl-step.done    .tl-label { color: #55A524; font-weight: 500; }
.tl-step.current .tl-label { color: #e67e22; font-weight: 700; }

.checklist { display: flex; flex-direction: column; gap: 6px; }
.cl-item {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 5px 10px; background: #f9f9f9; border-radius: 6px;
}
.cl-item.done    { background: #f0faf0; }
.cl-item.pending { background: #fff8e1; }
.cl-item.error   { background: #fdecea; }
.cl-item.na      { background: #f5f5f5; }
.cl-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
          display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.cl-item.done    .cl-dot { background: #55A524; color: #fff; }
.cl-item.pending .cl-dot { background: #f39c12; color: #fff; }
.cl-item.error   .cl-dot { background: #c0392b; color: #fff; }
.cl-item.na      .cl-dot { background: #bdc3c7; color: #fff; }
.cl-key { font-weight: 500; color: #444; min-width: 120px; }
.cl-val { color: #666; font-size: 12px; }
.cl-item.error .cl-val { color: #c0392b; font-weight: 500; }
.history-log-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.history-log-table th { background: #f5f8f0; padding: 6px 8px; text-align: left;
                        font-size: 11px; color: #666; border-bottom: 1px solid #e8e8e8; }
.history-log-table td { padding: 6px 8px; border-bottom: 1px solid #f5f5f5; vertical-align: top; }
.history-log-table tr:last-child td { border-bottom: none; }
.hl-notes { max-width: 260px; white-space: normal; word-break: break-word; line-height: 1.4; }

/* ── ACTIVE USERS TABLE ──────────────────────────────────────────────────── */
tr.user-row { cursor: pointer; }
tr.user-row:hover td { background: #f0faf0; }

/* ── EDIT FIELDS (shared: drawer + add user modal) ───────────────────────── */
.edit-field-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.edit-field label    { display: block; font-size: 12px; font-weight: 500; color: #555; margin-bottom: 4px; }
.edit-field input, .edit-field select, .edit-field textarea {
  width: 100%; padding: 7px 10px; border: 1px solid #ddd; border-radius: 5px;
  font-size: 13px; font-family: inherit; box-sizing: border-box; }
.edit-field input:focus, .edit-field select:focus, .edit-field textarea:focus {
  outline: none; border-color: #55A524; }
.edit-field input[readonly] { background: #f5f7fa; color: #888; cursor: default; }
.edit-field.full     { grid-column: 1 / -1; }

/* ── ADD USER MODAL ──────────────────────────────────────────────────────── */
.role-checkboxes     { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.role-cb-label       { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; padding: 3px 0; }
.role-cb-label input { width: auto; }
.modal-inline-error  { color: #c0392b; font-size: 12px; margin-top: 8px; }

/* ── MODAL (confirm) ─────────────────────────────────────────────────────── */
.modal-overlay       { position: fixed; inset: 0; background: rgba(0,0,0,.45);
                       display: flex; align-items: center; justify-content: center;
                       z-index: 1000; opacity: 0; transition: opacity .2s; pointer-events: none; }
.modal-overlay.open  { opacity: 1; pointer-events: all; }
.modal-box           { background: #fff; border-radius: 10px; padding: 28px 28px 22px;
                       max-width: 420px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,.18);
                       transform: translateY(-12px); transition: transform .2s;
                       max-height: 90vh; overflow-y: auto; }
/* Wide variant for form editors (org / vacation), opt-in via showModal's boxClass.
   The box scrolls itself (max-height above) — no inner scrollers. (2026-06-06) */
.modal-box-wide      { max-width: 600px; }
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-box h3        { font-size: 16px; color: #004236; margin-bottom: 10px; }
.modal-box p         { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 6px; }
.modal-box .modal-what { background: #f0f4f8; border-radius: 6px; padding: 8px 12px;
                          font-size: 12px; color: #444; margin: 10px 0 18px; }
.modal-actions       { display: flex; gap: 10px; justify-content: flex-end; }

/* Ticket detail modal pieces (Step 6). Light defaults; dark overrides below. */
.td-modal-box       { max-width: clamp(640px, 80vw, 1100px); }
.td-body-pre        { background: var(--surface-1); color: var(--text-primary); border-radius: 6px;
                       padding: 12px; font-size: 13px; white-space: pre-wrap;
                       margin-bottom: 14px; }
.td-events-header   { font-weight: 600; font-size: 12px; color: var(--text-secondary);
                       margin-bottom: 6px; }
.td-events-list     { border-top: 1px solid var(--border-soft); }
.td-event-row       { padding: 8px 4px; border-bottom: 1px solid #f1f1f1; font-size: 12px; }
.td-event-line      {  }
.td-event-ts        { font-size: 11px; opacity: 0.85; }
.td-event-summary   { font-size: 12px; padding: 4px 0 0 0; opacity: 0.92; line-height: 1.4; }
.td-event-summary code { background: rgba(108,194,74,0.12); padding: 1px 5px;
                         border-radius: 3px; font-size: 11px;
                         font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
body.dark .td-body-pre        { background: var(--surface-2); color: var(--text-secondary); }
body.dark .td-events-header   { color: var(--text-muted); }
body.dark .td-events-list     { border-top-color: var(--surface-2); }
body.dark .td-event-row       { border-bottom-color: var(--surface-2); }
body.dark .td-event-summary code { background: rgba(108,194,74,0.18); color: #9bd17a; }

/* Help Desk kanban (Step 6). Light defaults; dark overrides below. */
.hd-col          { flex: 1; min-width: 240px; background: var(--surface-1);
                   border-radius: 6px; padding: 8px; }
.hd-col-header   { font-weight: 600; font-size: 12px; margin-bottom: 8px; }
.hd-col-count    { font-weight: 400; }
.hd-col-empty    { font-size: 11px; padding: 8px; text-align: center; }
.hd-card         { background: var(--surface-0); border: 1px solid #e1e4e8; border-radius: 5px;
                   padding: 8px; margin-bottom: 6px; cursor: pointer; font-size: 12px;
                   color: var(--text-primary); }
.hd-card:hover   { border-color: var(--brand-vlabel-green-bright); }
.hd-card-row     { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.hd-card-id      { font-weight: 600; color: var(--brand-vlabel-green); }
.hd-card-pri     { color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; }
.hd-card-title   { margin: 4px 0 6px; line-height: 1.3; }
.hd-card-meta    { font-size: 10px; }
body.dark .hd-col       { background: #1f2329; }
body.dark .hd-col-empty { color: #6b7280; }
body.dark .hd-card      { background: var(--surface-2); border-color: #3a3f48; color: var(--text-secondary); }
body.dark .hd-card:hover { border-color: var(--brand-vlabel-green-bright); }
body.dark .hd-card-id   { color: var(--brand-vlabel-green-bright); }
.hd-card-bottom         { display: flex; justify-content: space-between; align-items: center;
                          gap: 6px; margin-top: 6px; }
.hd-card-quick          { display: flex; gap: 4px; }
.hd-card-action         { font-size: 10px; padding: 2px 7px; border-radius: 10px;
                          background: var(--brand-vlabel-green-bright); color: #fff; border: 0; cursor: pointer;
                          line-height: 1.4; font-weight: 500; }
.hd-card-action:hover   { background: #5aae3c; }
body.dark .hd-card-action       { background: var(--brand-vlabel-green-bright); color: #1f2329; }
body.dark .hd-card-action:hover { background: #9bd17a; }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
#toast { position: fixed; bottom: 24px; right: 24px; background: var(--brand-vlabel-green); color: #fff;
         padding: 10px 18px; border-radius: 7px; font-size: 13px; font-weight: 500;
         box-shadow: 0 4px 12px rgba(0,0,0,.2); opacity: 0; transition: opacity .3s;
         pointer-events: none; z-index: 999; }
#toast.show  { opacity: 1; }
#toast.error { background: var(--accent-danger-fg); }

/* ── MISC ────────────────────────────────────────────────────────────────── */
.loading { text-align: center; color: #aaa; padding: 24px; font-size: 13px; }
.empty   { text-align: center; color: #bbb; padding: 20px; font-size: 13px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar              { left: -220px; transition: left .25s; }
  .sidebar.mobile-open  { left: 0; }
  .sidebar-overlay.mobile-open { display: block; }
  .hamburger-open       { display: flex; align-items: center; justify-content: center; }
  .hamburger-close      { display: block; }
  .main-content         { margin-left: 0; padding-top: 52px; }
  .drawer               { width: 100vw; }
  .edit-field-grid      { grid-template-columns: 1fr; }
}

/* Manual-Bypass Safety: per-system "filled outside automation" indicator */
.badge-manual {
  display: inline-block;
  background: #e5e5e5;
  color: #555;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
}

/* Testing-mode pill in sidebar footer */
.testing-pill {
  display: inline-block;
  padding: 4px 10px;
  margin: 4px 0;
  border-radius: 10px;
  font-size: 11px;
  letter-spacing: 0.5px;
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  width: fit-content;
}
.btn-red {
  background: #c0392b;
  color: #fff;
}

/* ── MILESTONE A: STICKY TABLE HEADERS ─────────────────────────────────── */
.table-wrap { max-height: calc(100dvh - 140px); overflow-y: auto; }
.table-wrap thead th {
  position: sticky; top: 0; z-index: 10;
  background: #f7f8fa;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* ── SPOTLIGHT GLOBAL SEARCH ─────────────────────────────────────────────── */
#spotlight { position: fixed; inset: 0; z-index: 1000; display: none; }
#spotlight.open { display: block; }
#spotlight .sp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
#spotlight .sp-panel {
  position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
  width: 92%; max-width: 640px; background: #fff;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
}
#spotlight #sp-input {
  width: 100%; padding: 18px 20px; border: none; outline: none;
  font-size: 17px; border-bottom: 1px solid #eee; background: transparent;
}
#spotlight .sp-results { max-height: 60vh; overflow-y: auto; }
#spotlight .sp-empty { padding: 24px; text-align: center; color: #888; font-size: 13px; }
#spotlight .sp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #f0f2f5;
}
#spotlight .sp-row.sel, #spotlight .sp-row:hover { background: #f0f4f8; }
#spotlight .sp-icon  { font-size: 14px; width: 20px; text-align: center; color: #888; }
#spotlight .sp-text  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#spotlight .sp-title { font-size: 14px; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spotlight .sp-sub   { font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spotlight .sp-kind  { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #888;
                       background: #eaecee; padding: 2px 7px; border-radius: 10px; letter-spacing: .04em; }
#spotlight .sp-foot  { padding: 8px 16px; font-size: 11px; color: #888; border-top: 1px solid #f0f2f5; background: #fafbfc; }

body.dark #spotlight .sp-panel  { background: #1f232a; box-shadow: 0 20px 60px rgba(0,0,0,.6); border: 1px solid #2a2f38; }
body.dark #spotlight #sp-input  { color: #e4e6eb; border-bottom-color: #2a2f38; }
body.dark #spotlight .sp-row    { border-bottom-color: #262b33; }
body.dark #spotlight .sp-row.sel,
body.dark #spotlight .sp-row:hover { background: #262b33; }
body.dark #spotlight .sp-title  { color: #e4e6eb; }
body.dark #spotlight .sp-sub, body.dark #spotlight .sp-icon { color: #9ba3af; }
body.dark #spotlight .sp-kind   { background: #353b46; color: #c0c8d4; }
body.dark #spotlight .sp-foot   { background: #1b1f26; color: #9ba3af; border-top-color: #2a2f38; }
body.dark #spotlight .sp-empty  { color: #9ba3af; }

/* ── HISTORY DIFF CARD (#12) ────────────────────────────────────────────── */
.diff-card { display: flex; flex-direction: column; gap: 3px;
             background: #f8f9fb; border: 1px solid #e8eaf0; border-radius: 4px;
             padding: 6px 8px; font-size: 12px; }
.diff-col-name { font-weight: 500; color: #444; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.diff-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.diff-from { background: #fdecea; color: #c0392b; padding: 1px 6px; border-radius: 3px;
             text-decoration: line-through; opacity: 0.85; }
.diff-to   { background: #d5f5e3; color: #1e8449; padding: 1px 6px; border-radius: 3px; font-weight: 500; }
.diff-arrow { color: #888; font-weight: 700; }
body.dark .diff-card  { background: #2a2f38; border-color: #353b46; }
body.dark .diff-col-name { color: #c0c8d4; }
body.dark .diff-from  { background: #4a201a; color: #ff8a7a; }
body.dark .diff-to    { background: #1d3a26; color: #6cc24a; }
body.dark .diff-arrow { color: #9ba3af; }

/* ── COMPLETENESS PILL (#16) ───────────────────────────────────────────── */
.cmp-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
            font-size: 10px; font-weight: 700; }
.cmp-pill.cmp-full     { background: #d5f5e3; color: #1e8449; }
.cmp-pill.cmp-mid-high { background: #d4efdf; color: #196f3d; }
.cmp-pill.cmp-mid      { background: #fef9e7; color: #9a7d0a; }
.cmp-pill.cmp-low      { background: #fdecea; color: #c0392b; }
body.dark .cmp-pill.cmp-full     { background: #1e8449; color: #d5f5e3; }
body.dark .cmp-pill.cmp-mid-high { background: #196f3d; color: #d4efdf; }
body.dark .cmp-pill.cmp-mid      { background: #9a7d0a; color: #fef9e7; }
body.dark .cmp-pill.cmp-low      { background: #8e2c22; color: #fdecea; }

/* ── SKIP-PLAN CARD (advance-pipeline & offboarding modal) ─────────────── */
.skip-plan-card { background: #f0f4f8; border-left: 3px solid #4a90e2; border-radius: 4px; }
.skip-plan-card .skip-arrow { color: #888; }

/* ── DRAWER WARN BANNER (used in profile + shared-access tabs) ─────────── */
/* P3 (2026-05-10): tokenized via the warn-soft pair. Dark-mode override
 * removed since the token redefines under body.dark. */
.drawer-warn {
  background: var(--accent-warn-soft-bg); color: var(--accent-warn-soft-fg);
  border-left: 3px solid var(--accent-warn-soft-border);
  padding: 8px 12px; border-radius: 4px;
  font-size: 12px; margin-bottom: 16px;
}

/* ── MILESTONE A: DARK MODE ────────────────────────────────────────────── */
/* Palette:
   bg      #15181d  (body)
   panel   #1f232a  (cards/tables/drawer/modal)
   panel-2 #2a2f38  (header rows, hover, sidebar)
   border  #353b46
   text    #e4e6eb  (primary)
   muted   #9ba3af  (secondary)
   accent  #6cc24a  (V-Label green, brightened for dark bg)
*/
body.dark { background: var(--surface-0); color: var(--text-primary); }

/* Sidebar — dark slate, no clash with body. The base bg literal is one-off
 * (sits between --surface-0 and --surface-1); kept until a future sweep
 * adds a dedicated --sidebar-bg token if it earns reuse. */
body.dark .sidebar           { background: #1b1f26; border-right: 1px solid var(--surface-2); }
body.dark .sidebar-item      { color: rgba(228,230,235,0.7); }
body.dark .sidebar-item:hover{ background: rgba(255,255,255,0.06); color: #fff; }
body.dark .sidebar-item.active { background: rgba(108,194,74,0.18); color: #fff; }
body.dark .sidebar-footer    { border-top-color: var(--surface-2); }
body.dark .sidebar-clock     { color: var(--text-muted); }
body.dark .sidebar-signout   { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--text-primary); }
body.dark .sidebar-signout:hover { background: rgba(255,255,255,0.12); }

/* Headings — brand green is invisible on dark; brighten via the
 * --brand-vlabel-green-bright token. */
body.dark .view-title,
body.dark .section-h3,
body.dark .drawer-name,
body.dark .drawer-tab.active,
body.dark .drawer-tab:hover,
body.dark .drawer-section-title,
body.dark .action-stage-name,
body.dark .filter-tab:hover { color: var(--brand-vlabel-green-bright); }
body.dark .section-h3       { border-bottom-color: var(--surface-2); }
body.dark .drawer-tab       { color: var(--text-muted); }
body.dark .drawer-tab.active{ border-bottom-color: var(--brand-vlabel-green-bright); }
body.dark .filter-tab       { background: var(--surface-1); color: var(--text-secondary); border-color: var(--surface-3); }
body.dark .filter-tab.active{ background: var(--brand-vlabel-green-bright); color: var(--surface-0); border-color: var(--brand-vlabel-green-bright); }
body.dark .filter-tab:hover { border-color: var(--brand-vlabel-green-bright); }

/* Cards / panels / tables / modals / drawer.
 *
 * P3 (2026-05-10): the shared dark-surface bg now reads from the
 * --surface-1 token (which resolves to the same value in dark mode).
 * The shadow stays literal — it's a darker drop than --shadow-low
 * carries, and a dedicated --shadow-card-dark token would be bloat
 * for one site. This rule still bundles 11 selectors for compactness;
 * future direction is one rule per surface but not yet.
 */
body.dark .stat-card,
body.dark .ov-counter,
body.dark .table-wrap,
body.dark .modal-content,
body.dark .modal-box,
body.dark .drawer,
body.dark .trigger-card,
body.dark .action-item,
body.dark .action-item-none,
body.dark .panel,
body.dark .action-stage-card { background: var(--surface-1); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
body.dark .modal-box h3 { color: var(--brand-vlabel-green-bright); }
body.dark .modal-box p  { color: var(--text-secondary); }
body.dark .modal-box .modal-what { background: var(--surface-2); color: var(--text-secondary); }
body.dark .modal-inline-error { color: #ff8a7a; }
body.dark .skip-plan-card    { background: #1d2c3a; border-left-color: #4a90e2; color: var(--text-secondary); }
body.dark .skip-plan-card .skip-arrow { color: var(--text-muted); }
body.dark .action-stage-card { background: var(--surface-2); }
body.dark .action-stage-desc { color: var(--text-secondary); }
body.dark .action-stage-label{ color: var(--text-muted); }
body.dark .modal-overlay     { background: rgba(0,0,0,0.7); }

/* Tables */
body.dark table              { background: var(--surface-1); color: var(--text-primary); }
body.dark th                 { background: var(--surface-2) !important; color: var(--text-secondary) !important; border-bottom-color: var(--surface-3); }
body.dark th.sortable:hover  { background: var(--surface-3) !important; }
body.dark td                 { border-bottom-color: var(--surface-2); }
body.dark tr:hover td        { background: #262b33; }
body.dark .name              { color: var(--text-primary); }
body.dark .sub               { color: var(--text-muted); }
body.dark .empty, body.dark .loading { color: var(--text-muted); }
body.dark .log-notes         { color: var(--text-secondary); }
body.dark .event-name        { color: var(--text-primary); }
body.dark .event-action      { color: var(--text-secondary); }
body.dark .event-time, body.dark .event-by { color: var(--text-muted); }
body.dark .event-item        { border-bottom-color: var(--surface-2); }
body.dark .activity-tier-title, body.dark .trigger-group-label { color: var(--text-muted); }

/* Inputs */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="date"],
body.dark input[type="search"],
body.dark input[type="password"],
body.dark input[type="number"],
body.dark select,
body.dark textarea,
body.dark .user-search,
body.dark #log-search {
  background: var(--surface-0) !important; color: var(--text-primary) !important; border-color: var(--surface-3) !important;
}
body.dark .user-search:focus,
body.dark input:focus, body.dark select:focus, body.dark textarea:focus { border-color: var(--brand-vlabel-green-bright) !important; }
body.dark ::placeholder      { color: #6b7380; }

/* Drawer / modal chrome — most overrides removed in P2 (2026-05-10) since
 * the base rules now use tokens that auto-cascade under body.dark.
 * Section-title kept because its base border is a brand-soft tint that
 * doesn't have a dark equivalent. */
body.dark .drawer-section-title { border-bottom-color: var(--surface-2); }
body.dark .btn-close         { color: var(--text-muted); }
body.dark .btn-close:hover   { color: var(--text-primary); }
body.dark .btn-cancel        { background: var(--surface-3); color: var(--text-primary); }
body.dark .btn-cancel:hover  { background: #424956; }
body.dark .btn-gray          { background: #4a5260; color: var(--text-primary); }
body.dark .btn-gray:hover    { background: #5a6371; }
body.dark .btn-advance       { background: var(--surface-2); color: var(--text-primary); }
body.dark .btn-advance:hover { background: var(--surface-3); }
body.dark .btn-advance .adv-desc { opacity: 0.75; color: var(--text-secondary); }
body.dark .btn-blue          { background: var(--brand-vlabel-green-bright); color: var(--surface-0); }
body.dark .btn-blue:hover    { background: #8ed16e; }
body.dark .btn-orange        { background: #d4912a; color: var(--surface-0); }
body.dark .btn-run           { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--brand-vlabel-green-bright); }
body.dark .btn-red           { background: #8e2c22; color: #fff; }

/* Pipeline pills — brighten so they pop on dark bg */
body.dark .badge { filter: brightness(1.05); }
body.dark .b-intake      { background: #1e8449; color: #d5f5e3; }
body.dark .b-prov        { background: #ca6f1e; color: #fdebd0; }
body.dark .b-provconf    { background: #1e8449; color: #d5f5e3; }
body.dark .b-provcont    { background: #9a7d0a; color: #fef9e7; }
body.dark .b-qm          { background: #6c3483; color: #e8daef; }
body.dark .b-specialized { background: #0e6655; color: #d1f2eb; }
body.dark .b-complete    { background: #1e8449; color: #d5f5e3; }
body.dark .b-legacy      { background: #4a5260; color: #d5d8dc; }
body.dark .b-offboarding { background: #8e2c22; color: #fdecea; }
body.dark .mode-auto     { background: #1e8449; color: #d5f5e3; }
body.dark .mode-manual   { background: #ca6f1e; color: #fff; }
body.dark .sc-active     { background: #1e8449; color: #d5f5e3; }
body.dark .sc-inactive   { background: #8e2c22; color: #fdecea; }
body.dark .sc-unknown    { background: #4a5260; color: #d5d8dc; }
body.dark .modal-content,
body.dark .drawer            { border: 1px solid var(--surface-2); }

/* Counters / stat numbers — keep accent colors but soften so they read on dark */
body.dark .ov-counter .ov-label,
body.dark .stat-card .label,
body.dark .action-item-sub,
body.dark .trigger-card .t-id,
body.dark .trigger-card .t-desc { color: var(--text-muted); }
body.dark .ov-counter, body.dark .stat-card,
body.dark .action-item       { border-left-color: var(--surface-3); }

/* Misc */
body.dark .badge-manual      { background: var(--surface-3); color: var(--text-secondary); }
body.dark hr, body.dark .divider { border-color: #2a2f38; }
body.dark a                  { color: #6cc24a; }
body.dark a:hover            { color: #8ed16e; }
body.dark .drawer-sheet-link { color: #6cc24a; }
body.dark .view-all-link     { color: #6cc24a; }

/* Auto-pill in dark — keep status colors readable */
body.dark .auto-pill.on      { background: #2d6e3a; }
body.dark .auto-pill.off     { background: #8e2c22; }

/* Automation banner */
body.dark #automation-banner { background: #3a2f0a; color: #ffd166; border-bottom-color: #6b5418; }

/* Drawer warn banner */
/* drawer-warn dark override removed in P3 — base rule uses warn-soft tokens
 * which auto-cascade under body.dark. */
body.dark .webhook-pending { background: #3a2f0a; color: #ffd166; border-color: #d4912a; }

/* Edit-field labels were dark text on white — invisible in dark */
body.dark .edit-field label { color: #c0c8d4; }
body.dark .edit-field input[readonly] { background: #2a2f38 !important; color: #9ba3af !important; }
body.dark code              { background: #2a2f38; color: #e4e6eb; padding: 1px 5px; border-radius: 3px; }

/* Provisioning checklist (drawer → History tab) */
body.dark .cl-item            { background: #2a2f38; }
body.dark .cl-item.done       { background: #1d2e23; }
body.dark .cl-item.pending    { background: #3a2f0a; }
body.dark .cl-item.error      { background: #3a1f1a; }
body.dark .cl-item.na         { background: #2a2f38; }
body.dark .cl-key             { color: #e4e6eb; }
body.dark .cl-val             { color: #9ba3af; }
body.dark .cl-item.error .cl-val { color: #ff8a7a; }
body.dark .cl-item.na .cl-dot { background: #4a5260; }

/* History tab activity-log table */
body.dark .history-log-table th { background: #2a2f38; color: #c0c8d4; border-bottom-color: #353b46; }
body.dark .history-log-table td { border-bottom-color: #2a2f38; color: #e4e6eb; }
body.dark .hl-notes              { color: #c0c8d4; }

/* Timeline labels */
body.dark .tl-step.future .tl-dot { background: #2a2f38; border-color: #353b46; color: #6b7380; }
body.dark .tl-step.current .tl-dot { background: #15181d; }
body.dark .tl-label               { color: #9ba3af; }
body.dark .timeline::before       { background: #2a2f38; }

/* ── Mode bar (#4 Kahneman + Rams synthesis) ──────────────────────────────────
   Sticky banner that surfaces TEST/LIVE + automation + PHP-email/DM toggles +
   manual-user count above every view. Single source of operator truth. */
.mode-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 14px;
  background: #fff8e6;
  border-bottom: 1px solid #f5e0a7;
  font-size: 12px;
  font-weight: 500;
}
.mode-bar[data-live="1"] {
  background: #fde2e0;
  border-bottom-color: #f5b7b1;
}
.mode-bar-pill {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mode-bar-pill-on     { background: #d1f2eb; color: #145a32; border-color: #a3e4d7; }
.mode-bar-pill-off    { background: #f4f6f7; color: #6c757d; border-color: #dde2e5; }
.mode-bar-pill-danger { background: #fadbd8; color: #922b21; border-color: #f5b7b1; }
.mode-bar-attn        { background: #fef3c7; color: #92400e; border-color: #fde68a;
                        font-weight: 600; transition: background .15s; }
.mode-bar-attn:hover  { background: #fde68a; }
.mode-bar-attn-zero   { background: #f4f6f7; color: #6c757d; border-color: #dde2e5;
                        font-weight: 400; opacity: 0.7; }
body.dark .mode-bar             { background: #2a221a; border-bottom-color: #4a3a25; }
body.dark .mode-bar[data-live="1"] { background: #3a1a1a; border-bottom-color: #5a2a2a; }
body.dark .mode-bar-pill-on     { background: #1f3d33; color: #a7f0d0; border-color: #2c5a48; }
body.dark .mode-bar-pill-off    { background: #2a2f38; color: #99a1b0; border-color: #3a3f48; }
body.dark .mode-bar-pill-danger { background: #4a1f1f; color: #f5b7b1; border-color: #6a2f2f; }
body.dark .mode-bar-attn        { background: #4a3a1a; color: #fde68a; border-color: #6a5230; }
body.dark .mode-bar-attn:hover  { background: #5a4623; }
body.dark .mode-bar-attn-zero   { background: #2a2f38; color: #99a1b0; border-color: #3a3f48; }

/* Sync / long-running operation status strips */
.sync-status {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--text-caption);
}
.sync-status.is-hidden { display: none; }
.sync-status-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
}
.sync-status-elapsed {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.sync-status-sub {
  margin-top: 4px;
  color: var(--text-secondary);
}
.sync-status-meta {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.sync-status-bar {
  position: relative;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}
.sync-status-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-info-fg);
  transition: width .25s ease;
}
.sync-status[data-indeterminate="1"] .sync-status-fill {
  width: 34%;
  animation: sync-status-slide 1.25s ease-in-out infinite;
}
.sync-status[data-mode="done"] {
  border-color: var(--accent-success-fg);
  background: var(--accent-success-bg);
}
.sync-status[data-mode="done"] .sync-status-fill { background: var(--accent-success-fg); }
.sync-status[data-mode="warn"] {
  border-color: var(--accent-warn-soft-border);
  background: var(--accent-warn-soft-bg);
}
.sync-status[data-mode="warn"] .sync-status-fill { background: var(--accent-warn-soft-border); }
.sync-status[data-mode="error"] {
  border-color: var(--accent-danger-fg);
  background: var(--accent-danger-bg);
}
.sync-status[data-mode="error"] .sync-status-fill { background: var(--accent-danger-fg); }
body.dark .sync-status {
  border-color: var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
}
body.dark .sync-status-sub,
body.dark .sync-status-elapsed,
body.dark .sync-status-meta { color: var(--text-muted); }
body.dark .sync-status-bar { background: var(--surface-3); }
body.dark .sync-status[data-mode="done"] {
  border-color: var(--accent-success-fg);
  background: var(--accent-success-bg);
}
body.dark .sync-status[data-mode="warn"] {
  border-color: var(--accent-warn-soft-border);
  background: var(--accent-warn-soft-bg);
}
body.dark .sync-status[data-mode="error"] {
  border-color: var(--accent-danger-fg);
  background: var(--accent-danger-bg);
}
.sync-status[data-progress="0"] .sync-status-fill { width: 0; }
.sync-status[data-progress="5"] .sync-status-fill { width: 5%; }
.sync-status[data-progress="10"] .sync-status-fill { width: 10%; }
.sync-status[data-progress="15"] .sync-status-fill { width: 15%; }
.sync-status[data-progress="20"] .sync-status-fill { width: 20%; }
.sync-status[data-progress="25"] .sync-status-fill { width: 25%; }
.sync-status[data-progress="30"] .sync-status-fill { width: 30%; }
.sync-status[data-progress="35"] .sync-status-fill { width: 35%; }
.sync-status[data-progress="40"] .sync-status-fill { width: 40%; }
.sync-status[data-progress="45"] .sync-status-fill { width: 45%; }
.sync-status[data-progress="50"] .sync-status-fill { width: 50%; }
.sync-status[data-progress="55"] .sync-status-fill { width: 55%; }
.sync-status[data-progress="60"] .sync-status-fill { width: 60%; }
.sync-status[data-progress="65"] .sync-status-fill { width: 65%; }
.sync-status[data-progress="70"] .sync-status-fill { width: 70%; }
.sync-status[data-progress="75"] .sync-status-fill { width: 75%; }
.sync-status[data-progress="80"] .sync-status-fill { width: 80%; }
.sync-status[data-progress="85"] .sync-status-fill { width: 85%; }
.sync-status[data-progress="90"] .sync-status-fill { width: 90%; }
.sync-status[data-progress="95"] .sync-status-fill { width: 95%; }
.sync-status[data-progress="100"] .sync-status-fill { width: 100%; }
@keyframes sync-status-slide {
  0%   { transform: translateX(-120%); }
  50%  { transform: translateX(120%); }
  100% { transform: translateX(300%); }
}

/* ── Roles chip picker (drawer Profile tab) ──────────────────────────────────
   Light + dark mode contrast for the multi-select. Active = saturated green
   pill on light, brighter green on dark; inactive = subtle outlined pill. */
.roles-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.roles-chip {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #cbd5e0;
  background: #fff;
  color: #4a5568;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.roles-chip:hover { border-color: #94a3b8; color: #1f2937; }
.roles-chip.active {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.roles-chip.active:hover { background: #15803d; border-color: #166534; }
.roles-chip.legacy { background: #f59e0b; border-color: #b45309; color: #fff; }
.roles-chip.legacy:hover { background: #b45309; }

body.dark .roles-chip {
  background: #1f2937;
  border-color: #4b5563;
  color: #cbd5e0;
}
body.dark .roles-chip:hover { border-color: #94a3b8; color: #e5e7eb; }
body.dark .roles-chip.active {
  background: #22c55e;
  border-color: #16a34a;
  color: #062c14;
}
body.dark .roles-chip.active:hover { background: #16a34a; color: #fff; }
body.dark .roles-chip.legacy {
  background: #d97706;
  border-color: #b45309;
  color: #fff;
}

/* U6: mode-bar elevation when scrolled */
.mode-bar.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.10); }
body.dark .mode-bar.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.45); }

/* U4: skeleton placeholders */
.skeleton, .skeleton-row {
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
}
@keyframes skeleton-shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
body.dark .skeleton, body.dark .skeleton-row {
  background: linear-gradient(90deg, #2a2f38 0%, #3a3f48 50%, #2a2f38 100%);
  background-size: 200% 100%;
}

/* U13: density toggle (compact / comfortable) */
body.density-compact .view { padding: 14px 18px; }
body.density-compact table.standard-table th,
body.density-compact table.standard-table td { padding: 5px 8px; font-size: 12px; }
body.density-compact .stat-card  { padding: 10px 14px; min-width: 110px; }
body.density-compact .ov-counter { padding: 12px 16px; }
body.density-compact .ov-counter .ov-num { font-size: 28px; }
body.density-compact .stat-card .count   { font-size: 22px; }

/* U10: pipeline timeline stepper */
.pipeline-stepper { display: flex; align-items: center; gap: 0; margin: 14px 0 8px; flex-wrap: wrap; }
.pipeline-step { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 11px; color: #888; }
.pipeline-step .dot { width: 9px; height: 9px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; }
.pipeline-step.done .dot { background: #16a34a; }
.pipeline-step.current .dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.25); animation: step-pulse 1.5s ease-in-out infinite; }
.pipeline-step.current { color: #b45309; font-weight: 700; }
.pipeline-step.done { color: #15803d; }
.pipeline-step .arrow { color: #cbd5e0; margin: 0 4px; }
@keyframes step-pulse { 0%,100%{box-shadow:0 0 0 3px rgba(245,158,11,.25);} 50%{box-shadow:0 0 0 6px rgba(245,158,11,.10);} }
body.dark .pipeline-step .dot { background: #4b5563; }
body.dark .pipeline-step.done .dot { background: #22c55e; }
body.dark .pipeline-step.current { color: #fbbf24; }
body.dark .pipeline-step.done    { color: #86efac; }

/* U16: search match highlighting */
mark.search-hit { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
body.dark mark.search-hit { background: #92580c; color: #fde68a; }

/* U17: toast undo button */
.toast .undo-btn {
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4);
  color: inherit; padding: 2px 10px; border-radius: 4px; margin-left: 12px;
  font-size: 12px; font-weight: 500; cursor: pointer;
}

/* U9: keyboard shortcuts modal */
.shortcuts-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 13px; }
.shortcuts-modal kbd { display: inline-block; padding: 1px 7px; border-radius: 4px;
  background: #f1f5f9; border: 1px solid #cbd5e0; font-family: monospace; font-size: 11px;
  color: #1f2937; box-shadow: 0 1px 0 #cbd5e0; }
body.dark .shortcuts-modal kbd { background: #2a2f38; border-color: #4b5563; color: #e5e7eb; box-shadow: 0 1px 0 #1f2937; }

/* U14: sparklines */
.spark-svg { width: 60px; height: 18px; vertical-align: middle; margin-left: 8px; }
.spark-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* U15: row context menu */
.row-context-menu { position: fixed; z-index: 1000; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 4px 0; min-width: 180px;
  font-size: 13px; }
.row-context-menu button { display: block; width: 100%; padding: 7px 14px; text-align: left;
  border: none; background: transparent; cursor: pointer; color: #1f2937; }
.row-context-menu button:hover { background: #f1f5f9; }
.row-context-menu .sep { height: 1px; background: #e5e7eb; margin: 4px 0; }
body.dark .row-context-menu { background: #1f2937; border-color: #4b5563; }
body.dark .row-context-menu button { color: #e5e7eb; }
body.dark .row-context-menu button:hover { background: #2a2f38; }

/* F7 universal search — external systems section */
.sp-external { padding: 6px 8px 0; }
.sp-ext-loading { padding: 6px 10px; font-size: 11px; color: #6b7280; }
.sp-ext-section { padding: 6px 0; border-top: 1px solid #f1f5f9; }
.sp-ext-section:first-child { border-top: none; }
.sp-ext-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #6b7280; padding: 2px 4px; margin-bottom: 2px; }
.sp-ext-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 4px 8px; border-radius: 4px; font-size: 12px; }
.sp-ext-row:hover { background: #f8fafc; }
.sp-ext-name { font-weight: 500; color: #1f2937; }
.sp-ext-meta { font-size: 11px; }
.sp-ext-tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.sp-ext-tag.warn { background: #fef3c7; color: #92400e; }
body.dark .sp-ext-section { border-top-color: #2a2f38; }
body.dark .sp-ext-row:hover { background: #2a2f38; }
body.dark .sp-ext-name { color: #e5e7eb; }
body.dark .sp-ext-tag.warn { background: #78350f; color: #fef3c7; }

/* ── F3 — Drive ownership rescue pill ──────────────────────────────────── */
.rescue-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rescue-pill.pending  { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.rescue-pill.prog     { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.rescue-pill.wait     { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.rescue-pill.done     { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.rescue-pill.fail     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
body.dark .rescue-pill.pending { background: #2a2f38; color: #9ca3af; border-color: #374151; }
body.dark .rescue-pill.prog    { background: #1e3a8a; color: #bfdbfe; border-color: #2563eb; }
body.dark .rescue-pill.wait    { background: #78350f; color: #fef3c7; border-color: #b45309; }
body.dark .rescue-pill.done    { background: #065f46; color: #d1fae5; border-color: #047857; }
body.dark .rescue-pill.fail    { background: #7f1d1d; color: #fee2e2; border-color: #991b1b; }

/* ── Reassign popover (C3 — dark-mode aware) ───────────────────────── */
.td-reassign-popover {
  position: fixed; z-index: 9000;
  background: #fff; color: #1f2328;
  border: 1px solid #d0d7de; border-radius: 6px;
  padding: 8px;
  display: flex; gap: 6px; align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 280px;
}
.td-reassign-popover select {
  flex: 1; padding: 5px 8px; font-size: 12px;
  background: #fff; color: #1f2328; border: 1px solid #d0d7de; border-radius: 4px;
}
body.dark .td-reassign-popover {
  /* G3 (plan v2): align background with .modal-box (#1f232a) so the popover
     reads as the same surface family as the modal it sits within instead of
     a darker mismatched panel. Heavier shadow signals elevation. */
  background: #1f232a; color: #e6edf3;
  border-color: #30363d;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
body.dark .td-reassign-popover select {
  background: #2a2f38; color: #e6edf3; border-color: #30363d;
}

/* ── Ticket detail meta — 3-line header (C2 plan v2) ──────────────── */
.td-meta-line1 { font-size: 13px; margin-bottom: 4px; }
.td-meta-line2 { font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-meta-line3 { font-size: 11px; line-height: 1.5; }
.td-id-name { font-weight: 600; color: #1f2328; }
.td-no-slack { font-size: 11px; opacity: 0.6; }
.td-dm-btn {
  font-size: 12px; padding: 3px 10px;
  background: #f6f8fa; color: #1f2328;
  border: 1px solid #d0d7de; border-radius: 5px;
  cursor: pointer;
}
.td-dm-btn:hover { background: #e7ecf1; }
body.dark .td-id-name { color: #e6edf3; }
body.dark .td-dm-btn  {
  background: #21262d; color: #e6edf3; border-color: #30363d;
}
body.dark .td-dm-btn:hover { background: #30363d; }

/* ── Overview reshape — Option A (2026-05-09) ─────────────────────────────── */
/* Compact counters strip — User lifecycle stats demoted post-ops-center pivot */
.overview-counters.compact { gap: 8px; }
.overview-counters.compact .ov-counter { padding: 8px 12px; }
.overview-counters.compact .ov-counter .ov-num   { font-size: 22px; }
.overview-counters.compact .ov-counter .ov-label { font-size: 11px; margin-top: 2px; }

/* Help Desk summary strip on Overview */
.hd-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.hd-strip .hd-tile {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 10px 14px; cursor: pointer; min-width: 110px;
  transition: box-shadow 120ms;
}
.hd-strip .hd-tile:hover { box-shadow: 0 3px 10px rgba(0,0,0,.10); }
.hd-strip .hd-tile-num   { font-size: 24px; font-weight: 700; line-height: 1; }
.hd-strip .hd-tile-label { font-size: 11px; color: #777; margin-top: 4px; }
/* P0 fix A: "N mine" affordance inside the tile label, slightly muted so
   the total stays the dominant figure. */
.hd-strip .hd-tile-label .hd-tile-mine { color: #3498db; font-weight: 600; }
body.dark .hd-strip .hd-tile-label .hd-tile-mine { color: #58a6ff; }
.hd-strip .hd-tile.open    .hd-tile-num { color: #f1c40f; }
.hd-strip .hd-tile.claim   .hd-tile-num { color: #27ae60; }
.hd-strip .hd-tile.waiting .hd-tile-num { color: #e67e22; }
body.dark .hd-strip .hd-tile {
  background: #21262d; border-color: #30363d;
}
body.dark .hd-strip .hd-tile-label { color: #9ca3af; }

/* P0 fix E: list-view summary bar above the table — same data the kanban
   exposes in column headers. */
.hd-list-summary {
  padding: 6px 8px 10px;
  font-size: 12px;
}

/* Utility class — only one in the file. Phase 1 of Ops Center redesign uses
 * this in place of inline style="display:none;" to satisfy lint-no-raw-styles
 * on new code. Existing inline display:none usages are not swept here. */
.is-hidden { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════════
   PULSE MODE — Phase 2 of Ops Center redesign (2026-05-16)
   ────────────────────────────────────────────────────────────────────────────
   Layered chrome that activates when body.pulse-mode is set (via ?pulse=1 or
   the persisted localStorage flag). Hides the legacy 15-item sidebar and
   replaces it with: top bar of KPIs + alerts + spotlight + machine dot,
   left icon rail of 5 sections, optional right machine rail on Pulse,
   universal right-drawer, and a Cmd-K spotlight overlay.

   All section content lives in the existing view containers; pulse mode
   just rewires nav + adds the new shell on top.
   ════════════════════════════════════════════════════════════════════════════ */

/* Activation switches. */
body.pulse-mode .sidebar          { display: none !important; }
body.pulse-mode .hamburger-open   { display: none !important; }
body.pulse-mode .sidebar-overlay  { display: none !important; }
body.pulse-mode .main-content     {
  margin-left: 56px;
  padding: 52px var(--space-5) var(--space-5);
  max-width: none;
}
/* In pulse mode the legacy "automation banner" still applies; tuck it. */
body.pulse-mode #automation-banner { margin-left: 0; display: none !important; }
/* The legacy mode-bar collapses; pulse provides its own status strip. */
body.pulse-mode #mode-bar { display: none !important; }
/* ── Phase 3: hide the entire legacy chrome (DOM kept for ?pulse=0 rollback). */
body.pulse-mode #sidebar,
body.pulse-mode #sidebar-overlay,
body.pulse-mode .hamburger-open,
body.pulse-mode #view-overview,
body.pulse-mode #view-users,
body.pulse-mode #view-onboarding,
body.pulse-mode #view-offboarding,
body.pulse-mode #view-scenarios,
body.pulse-mode #view-sharedaccounts,
body.pulse-mode #view-organizations,
body.pulse-mode #view-accessreviews,
body.pulse-mode #view-settings,
body.pulse-mode #view-offboardboard,
body.pulse-mode #view-insights,
body.pulse-mode #view-drives,
body.pulse-mode #view-security,
body.pulse-mode #view-helpdesk,
body.pulse-mode #view-log { display: none !important; }
/* (2026-05-18 removed: this rule wiped the rail/topbar clearance above, so
   non-Pulse views — People / Tickets / Drive / Trust / Settings — rendered
   behind the fixed 44px top bar + 56px left rail. Clearance lives only on
   the rule above now.) */
/* Drop the 1300px view cap in pulse-mode so content fills the available
   width (operator preference 2026-05-18). */
body.pulse-mode .view { max-width: none; }
.p-inline-form { display: inline; }

/* Default: pulse chrome is hidden in legacy mode. */
.p-topbar, .p-rail,
.p-drawer-overlay, .p-drawer,
.p-spotlight-overlay,
.p-alerts-pop, .p-qa-menu          { display: none; }
body.pulse-mode .p-topbar          { display: flex; }
body.pulse-mode .p-rail            { display: flex; }
/* The Pulse landing view is hidden in legacy mode (legacy users never see it). */
.view#view-pulse-home              { display: none; }
body.pulse-mode .view#view-pulse-home.active { display: block; }

/* ── TOP BAR ─────────────────────────────────────────────────────────────── */
.p-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 44px;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-soft);
  z-index: 50;
  align-items: center;
  padding: 0 var(--space-3);
  gap: var(--space-3);
  font-size: var(--text-body);
}
.p-brand {
  display: flex; align-items: center; gap: var(--space-2);
  padding-right: var(--space-3);
  border-right: 1px solid var(--border-soft);
}
.p-brand-mark {
  width: 22px; height: 22px;
  border-radius: var(--radius-md);
  background: var(--brand-vlabel-green);
  color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
}
.p-brand-name {
  font-weight: 600; letter-spacing: -0.01em;
  font-size: var(--text-body);
}
.p-brand-name span {
  color: var(--text-muted); font-weight: 400;
}
.p-kpi-strip {
  display: flex; align-items: center;
  flex: 1; overflow: hidden;
}
.p-kpi {
  display: flex; flex-direction: column;
  padding: var(--space-1) var(--space-3);
  border-right: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.12s;
  min-width: 0; flex-shrink: 0;
}
.p-kpi:hover { background: var(--surface-1); }
.p-kpi-label {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600;
}
.p-kpi-value {
  font-size: var(--text-body); font-weight: 600;
  color: var(--text-primary);
  display: flex; align-items: baseline; gap: var(--space-1);
}
.p-kpi-delta { font-size: 10px; font-weight: 500; color: var(--text-muted); }
.p-kpi-delta.up   { color: var(--accent-success-fg); }
.p-kpi-delta.down { color: var(--accent-danger-fg); }
.p-top-actions { display: flex; align-items: center; gap: var(--space-1); }
.p-topbtn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 5px var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 12px;
  background: none; border: none; cursor: pointer;
  transition: all 0.12s;
}
.p-topbtn:hover { background: var(--surface-1); color: var(--text-primary); }
.p-topbtn.alert { color: var(--accent-warn-fg); }
.p-topbtn .p-badge {
  background: var(--accent-danger-fg); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: var(--radius-pill);
  line-height: 1.2;
}
.p-topbtn .p-kbd {
  border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  padding: 0 5px; font-size: 10px; color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ── LEFT ICON RAIL ──────────────────────────────────────────────────────── */
.p-rail {
  position: fixed; top: 44px; left: 0; bottom: 0;
  width: 56px;
  background: var(--surface-0);
  border-right: 1px solid var(--border-soft);
  z-index: 49;
  flex-direction: column;
  padding: var(--space-2) 0;
}
.p-rail-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px; margin: 1px 6px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s;
  position: relative;
  background: none; border: none;
}
.p-rail-item:hover { background: var(--surface-1); color: var(--text-primary); }
.p-rail-item.active {
  color: var(--text-primary); background: var(--surface-2);
}
.p-rail-item.active::before {
  content: ""; position: absolute;
  left: -6px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--brand-vlabel-green);
  border-radius: var(--radius-sm);
}
.p-rail-icon { font-size: 16px; line-height: 1; margin-bottom: 4px; }
.p-rail-label { font-size: 10px; font-weight: 500; }
.p-rail-spacer { flex: 1; }
.p-rail-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--accent-danger-fg); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 0 4px; border-radius: var(--radius-pill);
  line-height: 1.4;
}


/* ── PULSE LANDING — TILES ───────────────────────────────────────────────── */
.p-pulse-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.p-pulse-title {
  font-size: var(--text-heading); font-weight: 600;
  letter-spacing: -0.015em;
}
.p-pulse-sub {
  color: var(--text-muted);
  font-size: 12px; margin-top: 2px;
}
.p-pulse-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.p-tile {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 108px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.p-tile:hover {
  border-color: var(--border-mid);
  background: var(--surface-1);
}
.p-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.p-tile-name {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.p-tile-icon { color: var(--text-muted); font-size: 14px; }
.p-tile-main {
  font-size: var(--text-display); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--text-primary);
}
.p-tile-main .p-unit {
  font-size: 13px; color: var(--text-muted);
  margin-left: var(--space-1); font-weight: 500;
}
.p-tile-sub {
  font-size: 11px; color: var(--text-muted);
  margin-top: var(--space-2);
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.p-tile-sub .p-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: var(--radius-sm);
  background: var(--accent-neutral-bg); color: var(--accent-neutral-fg);
  font-size: 10px; font-weight: 500;
}
.p-tile-sub .p-pill.warn    { background: var(--accent-warn-bg);    color: var(--accent-warn-fg); }
.p-tile-sub .p-pill.bad     { background: var(--accent-danger-bg);  color: var(--accent-danger-fg); }
.p-tile-sub .p-pill.good    { background: var(--accent-success-bg); color: var(--accent-success-fg); }
.p-tile-sub .p-pill.info    { background: var(--accent-info-bg);    color: var(--accent-info-fg); }
.p-tile.alert::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--accent-warn-fg);
}
.p-tile.critical::before { background: var(--accent-danger-fg); }
.p-tile-spark { margin-top: auto; height: 22px; }

/* "Needs you today" panel */
.p-needs-panel {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.p-needs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.p-needs-title { font-size: 12px; font-weight: 600; }
.p-needs-row {
  display: grid;
  grid-template-columns: 100px 90px 1fr auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}
.p-needs-row:last-child { border-bottom: none; }
.p-needs-row:hover { background: var(--surface-1); }
.p-needs-row .p-needs-time {
  color: var(--text-muted); font-family: var(--font-mono); font-size: 11px;
}

/* ── UNIVERSAL DRAWER ───────────────────────────────────────────────────── */
.p-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
}
.p-drawer-overlay.open { opacity: 1; pointer-events: auto; display: block; }
.p-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px;
  background: var(--surface-0);
  border-left: 1px solid var(--border-soft);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  z-index: 101;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-high);
}
.p-drawer.open { transform: translateX(0); display: flex; }
.p-drawer-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.p-drawer-eyebrow {
  font-size: 11px; color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.p-drawer-title {
  font-size: var(--text-heading); font-weight: 600;
  letter-spacing: -0.015em;
  display: flex; align-items: center; gap: var(--space-2);
}
.p-drawer-pills {
  display: flex; gap: var(--space-1); margin-top: var(--space-2);
  flex-wrap: wrap;
}
.p-drawer-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-size: 18px; color: var(--text-muted);
  padding: 4px 8px; border-radius: var(--radius-md);
  background: none; border: none; cursor: pointer;
}
.p-drawer-close:hover { background: var(--surface-1); color: var(--text-primary); }
.p-drawer-tabs {
  display: flex; border-bottom: 1px solid var(--border-soft);
  padding: 0 var(--space-2);
  overflow-x: auto;
}
.p-drawer-tab {
  padding: 9px 14px; font-size: 12px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none; border-top: none; border-left: none; border-right: none;
  white-space: nowrap; flex: 0 0 auto;
}
.p-drawer-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--brand-vlabel-green);
}
.p-drawer-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: var(--space-4) var(--space-5);
}
.p-drawer-field {
  display: flex; padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}
.p-drawer-field:last-of-type { border-bottom: none; }
.p-drawer-field-k {
  width: 140px; color: var(--text-muted);
  flex-shrink: 0;
}
.p-drawer-field-v {
  flex: 1; color: var(--text-primary);
  overflow-wrap: anywhere;
}
.p-drawer-actions {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-soft);
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.p-drawer-section-title {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
}
.p-drawer-loading {
  padding: var(--space-5); text-align: center;
  color: var(--text-muted); font-size: 12px;
}
.p-drawer-pre {
  font-size: 12px;
  color: var(--text-primary);
  white-space: pre-wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  margin-top: var(--space-1);
  max-height: 240px; overflow-y: auto;
}
.p-drawer-stage-card {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.p-drawer-stage-label {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
  font-weight: 600;
}
.p-drawer-stage-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary); margin-top: 2px;
}
.p-drawer-stage-desc {
  font-size: 11px; color: var(--text-muted);
  margin-top: var(--space-2); line-height: 1.4;
}
.p-drawer-row-buttons {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.p-drawer-textarea {
  width: 100%;
  font-family: inherit; font-size: 12px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  resize: vertical;
}
.p-drawer-section-title.p-danger {
  color: var(--accent-danger-fg);
}
.p-drawer-input {
  width: 100%;
  font-family: inherit; font-size: 12px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* Bulk-select bar inside Directory */
.p-bulk-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  position: sticky; top: 100px; z-index: 30;
}
.p-bulk-count {
  font-weight: 600; font-size: 12px;
  color: var(--text-primary);
}
.p-bulk-actions {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.p-bulk-cb {
  cursor: pointer;
}

/* Directory search */
.p-dir-search {
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-2) 0;
}
.p-dir-search .p-drawer-input {
  flex: 1; margin: 0;
}
.p-dir-search-meta {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap;
}

/* Sortable column headers */
.p-th-sort {
  cursor: pointer;
  user-select: none;
}
.p-th-sort:hover {
  background: var(--surface-1);
}

/* Drawer edit form */
.p-edit-form {
  padding: var(--space-2) 0;
}
.p-edit-field {
  margin-bottom: var(--space-2);
}
.p-edit-label {
  display: block;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.p-edit-input {
  width: 100%;
  font-family: inherit; font-size: 13px;
  padding: 6px 10px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.p-edit-input:focus {
  outline: none;
  border-color: var(--accent-info-fg);
}

/* ── SPOTLIGHT ──────────────────────────────────────────────────────────── */
.p-spotlight-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  z-index: 200;
  padding-top: 12vh;
}
.p-spotlight-overlay.open { display: block; }
.p-spotlight {
  width: 600px; max-width: 92vw; margin: 0 auto;
  background: var(--surface-0);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-high);
}
.p-sp-input-wrap {
  display: flex; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  gap: var(--space-3);
}
.p-sp-icon-lead {
  color: var(--text-muted); font-size: 11px;
  font-family: var(--font-mono);
}
.p-sp-input {
  flex: 1; font-size: 15px;
  background: none; border: none; outline: none;
  color: var(--text-primary);
}
.p-sp-results {
  max-height: 440px; overflow-y: auto;
}
.p-sp-group { padding: var(--space-1) 0; }
.p-sp-group-title {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 18px; font-weight: 600;
}
.p-sp-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 18px; cursor: pointer;
  font-size: 13px;
}
.p-sp-item:hover, .p-sp-item.focused {
  background: var(--surface-1);
}
.p-sp-item-icon {
  width: 22px; height: 22px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: 11px; flex-shrink: 0;
  color: var(--text-secondary);
}
.p-sp-item-meta {
  color: var(--text-muted); font-size: 11px; margin-left: auto;
}
.p-sp-footer {
  padding: 8px 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 10px; color: var(--text-muted);
  display: flex; gap: var(--space-3);
}
.p-sp-empty {
  padding: var(--space-5); text-align: center;
  color: var(--text-muted); font-size: 12px;
}

/* ── ALERTS POPOVER ──────────────────────────────────────────────────────── */
.p-alerts-pop {
  position: fixed; top: 48px; right: 12px;
  width: 380px;
  background: var(--surface-0);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-high);
  z-index: 90;
  overflow: hidden;
}
.p-alerts-pop.open { display: block; }
.p-alerts-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px; font-weight: 600;
  display: flex; justify-content: space-between;
}
.p-alert-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.p-alert-item:last-child { border-bottom: none; }
.p-alert-item:hover { background: var(--surface-1); }
.p-alert-row {
  display: flex; gap: var(--space-2); align-items: flex-start;
}
.p-alert-row-icon {
  width: 22px; height: 22px;
  border-radius: var(--radius-circle);
  display: grid; place-items: center;
  font-size: 12px; flex-shrink: 0;
}
.p-alert-row-icon.warn   { background: var(--accent-warn-bg);    color: var(--accent-warn-fg); }
.p-alert-row-icon.danger { background: var(--accent-danger-bg);  color: var(--accent-danger-fg); }
.p-alert-row-icon.info   { background: var(--accent-info-bg);    color: var(--accent-info-fg); }
.p-alert-row-body { flex: 1; }
.p-alert-row-title { font-size: 12px; font-weight: 500; }
.p-alert-row-sub {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.p-alerts-empty {
  padding: var(--space-5); text-align: center;
  color: var(--text-muted); font-size: 12px;
}

/* ── QUICK ACTIONS MENU ──────────────────────────────────────────────────── */
.p-qa-menu {
  position: fixed; top: 48px; right: 220px;
  width: 240px;
  background: var(--surface-0);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-high);
  padding: 6px;
  z-index: 90;
}
.p-qa-menu.open { display: block; }
.p-qa-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; text-align: left;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-primary);
  background: none; border: none;
  cursor: pointer;
}
.p-qa-item:hover { background: var(--surface-1); }
/* In dark+pulse the menu bg is itself --surface-1, so bump the hover one step
   lighter or the hover feedback is invisible. */
body.dark.pulse-mode .p-qa-item:hover { background: var(--surface-2); }
.p-qa-icon {
  width: 22px; height: 22px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: 12px;
}
.p-qa-divider {
  height: 1px; background: var(--border-soft);
  margin: 4px 6px;
}

/* ── PULSE SECTION TAB STRIP ─────────────────────────────────────────────── */
/* When user clicks a left-rail section, we show a thin tab strip that
   delegates to the underlying legacy views. */
.p-section-tabs {
  display: none;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-4);
}
body.pulse-mode .p-section-tabs { display: flex; }
.p-tab {
  padding: 8px 14px;
  color: var(--text-muted);
  font-size: 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none; border-top: none; border-left: none; border-right: none;
  display: flex; align-items: center; gap: var(--space-1);
  white-space: nowrap; flex: 0 0 auto;
}
.p-tab:hover { color: var(--text-primary); }
.p-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--brand-vlabel-green);
}
.p-tab-count {
  background: var(--surface-2); color: var(--text-muted);
  font-size: 10px; padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* In pulse mode, the legacy view-header is hidden inside any view-pulse-* container,
   replaced by the pulse section bar. */
body.pulse-mode .view#view-pulse-home .view-header { display: none; }

/* Dark mode tuning — most styles inherit via tokens, but a few brand spots
 * want explicit re-tunes. */
body.dark.pulse-mode .p-tile,
body.dark.pulse-mode .p-needs-panel {
  background: var(--surface-1);
}
body.dark.pulse-mode .p-topbar { background: var(--surface-0); }
body.dark.pulse-mode .p-rail   { background: var(--surface-0); }
body.dark.pulse-mode .p-drawer { background: var(--surface-0); }
body.dark.pulse-mode .p-spotlight { background: var(--surface-1); }
body.dark.pulse-mode .p-alerts-pop { background: var(--surface-1); }
body.dark.pulse-mode .p-qa-menu { background: var(--surface-1); }

/* Small helper classes that replaced inline styles for lint compliance. */
.p-alerts-count-meta { font-weight: 400; color: var(--text-muted); }
.p-kbd-faint { font-size: 10px; color: var(--text-muted); }
.p-badge {
  background: var(--accent-danger-fg); color: white;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: var(--radius-pill);
  line-height: 1.2;
}

/* ── BESPOKE SECTION ROWS (People / Tickets / Drive / Trust) ─────────── */
body.pulse-mode .view#view-pulse-people,
body.pulse-mode .view#view-pulse-tickets,
body.pulse-mode .view#view-pulse-drive,
body.pulse-mode .view#view-pulse-trust,
body.pulse-mode .view#view-pulse-settings { display: none; }
body.pulse-mode .view#view-pulse-people.active,
body.pulse-mode .view#view-pulse-tickets.active,
body.pulse-mode .view#view-pulse-drive.active,
body.pulse-mode .view#view-pulse-trust.active,
body.pulse-mode .view#view-pulse-settings.active { display: block; }

.p-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: var(--text-body);
  transition: background 0.1s;
}
.p-row:hover { background: var(--surface-1); }
.p-row-avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-circle);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.p-av-0 { background: var(--p-av-grad-0); }
.p-av-1 { background: var(--p-av-grad-1); }
.p-av-2 { background: var(--p-av-grad-2); }
.p-av-3 { background: var(--p-av-grad-3); }
.p-av-4 { background: var(--p-av-grad-4); }
.p-av-5 { background: var(--p-av-grad-5); }
/* Avatar palette tokens — keep hex on `--` lines for lint compliance. */
:root {
  --p-av-grad-0: linear-gradient(135deg, #3b82f6, #a78bfa);
  --p-av-grad-1: linear-gradient(135deg, #f97316, #ef4444);
  --p-av-grad-2: linear-gradient(135deg, #22c55e, #14b8a6);
  --p-av-grad-3: linear-gradient(135deg, #ec4899, #a78bfa);
  --p-av-grad-4: linear-gradient(135deg, #eab308, #f97316);
  --p-av-grad-5: linear-gradient(135deg, #06b6d4, #3b82f6);
  --p-purple-fg: #7c3aed;
  --p-purple-fg-dark: #c4b5fd;
}
.p-row-primary {
  flex: 1; min-width: 0;
}
.p-row-title {
  font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-row-sub {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.p-row-col {
  flex: 0 0 140px; min-width: 0;
  color: var(--text-secondary); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-row-time {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
}
.p-row-mono {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary);
  flex: 0 0 100px;
}
.p-row-actions {
  flex: 0 0 90px;
  text-align: right;
}

.p-thead {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-1);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600;
}
.p-th { flex: 1; }
.p-th:first-child { flex: 0 0 32px; }

.p-section-h {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  font-weight: 600;
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-top: 1px solid var(--border-soft);
}
.p-section-h:first-child { border-top: none; }

.p-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  background: var(--surface-1);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}
.p-empty-warn {
  color: var(--accent-warn-fg);
  background: var(--accent-warn-bg);
}
.p-home-freshness {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.p-home-freshness:empty {
  display: none;
}
.p-home-freshness .p-empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

/* ── PILL EXTRAS ─────────────────────────────────────────────────────── */
.p-pill.purple {
  background: rgba(167,139,250,0.13); color: var(--p-purple-fg);
}
body.dark .p-pill.purple {
  background: rgba(167,139,250,0.18); color: var(--p-purple-fg-dark);
}

/* ── ONBOARDING KANBAN ─────────────────────────────────────────────────── */
.p-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.p-kanban-lane {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.p-kanban-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-2);
}
.p-kanban-title {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 600;
  color: var(--text-secondary);
}
.p-kanban-count {
  font-size: 11px; color: var(--text-muted);
  background: var(--surface-2);
  padding: 1px 7px; border-radius: var(--radius-pill);
}
.p-kcard {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: all 0.1s;
}
.p-kcard:hover {
  border-color: var(--border-mid);
}
.p-kcard-name {
  font-size: 12px; font-weight: 500;
  color: var(--text-primary);
}
.p-kcard-meta {
  font-size: 11px; color: var(--text-muted);
  margin-top: 4px;
}

/* ── INSIGHTS CARDS ─────────────────────────────────────────────────── */
.p-insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.p-insight-card {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.p-insight-title {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  font-weight: 600;
}
.p-insight-num {
  font-size: var(--text-display); font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: var(--space-2);
  color: var(--text-primary);
}
.p-insight-unit {
  font-size: 11px; font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 2px;
}
.p-insight-sub {
  font-size: 10px; color: var(--text-muted);
  margin-top: var(--space-1);
  font-family: var(--font-mono);
}
.p-insight-row {
  margin-top: var(--space-2);
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.p-trend {
  font-size: 11px; font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-neutral-bg);
  color: var(--accent-neutral-fg);
  margin-left: 6px;
}
.p-trend.up   { background: var(--accent-success-bg); color: var(--accent-success-fg); }
.p-trend.down { background: var(--accent-danger-bg);  color: var(--accent-danger-fg); }
.p-insight-spark {
  display: block;
  margin-top: var(--space-2);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.p-insight-spark-empty {
  font-size: 10px; color: var(--text-muted);
  text-align: center;
  padding: var(--space-3) 0;
}
.p-spark-bar {
  fill: var(--accent-info-fg);
  opacity: 0.75;
}
.p-spark-bar-peak {
  fill: var(--accent-warn-fg);
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   PULSE 2.5 — Activity strip · Hero (session + OAuth bars) · Runs · Transcript
                · AI Ask · Monitors
   ════════════════════════════════════════════════════════════════════════════ */

/* Activity strip — 24h hourly heatmap */
.p-activity-strip {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-3);
  height: 26px;
}
.p-act-empty {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 12px;
}
.p-act-cell {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
}
.p-act-step-0 { background: var(--surface-2); }
.p-act-step-1 { background: rgba(34,197,94,0.18); }
.p-act-step-2 { background: rgba(34,197,94,0.32); }
.p-act-step-3 { background: rgba(234,179,8,0.40); }
.p-act-step-4 { background: rgba(239,68,68,0.50); }
button.p-act-cell {
  border: none;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 80ms ease, filter 80ms ease;
}
button.p-act-cell:hover {
  transform: scaleY(1.08);
  filter: brightness(1.1);
}
.p-act-h {
  font-size: 9px; font-weight: 600;
  color: var(--text-muted);
  position: absolute; bottom: 2px;
  font-family: var(--font-mono);
}

/* Hero row — active session + OAuth bars */
.p-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* Hero (signals-only) — full-width row of "Needs you" signals. The Claude
   session + plan-utilization columns were removed 2026-06-06 (Claude → VS Code).
   Title spans all columns; the 5 signals sit one-per-column beneath it. */
.p-hero.p-hero-signals-only {
  display: block;
  margin-bottom: var(--space-4);
}
.p-hero-signals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.p-hero-signals .p-hero-section-title { grid-column: 1 / -1; }
.p-signal {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 6px 8px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background 120ms, border-color 120ms;
  font-family: inherit;
  color: var(--text-primary);
}
.p-signal:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.p-signal-num {
  font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 32px; text-align: right;
  color: var(--text-primary);
}
.p-signal.alert .p-signal-num { color: var(--accent-danger-fg); }
.p-signal.warn  .p-signal-num { color: var(--accent-warn-fg); }
.p-signal-lbl {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── PULSE-MODE OVERRIDES for the legacy #user-drawer ─────────────────────
   Council recommendation: keep the rich 9-tab editor (it's the spine of
   user ops), but match its visual to the pulse aesthetic so the operator
   doesn't feel they've stepped into an older app. */
body.pulse-mode .drawer {
  background: var(--surface-0);
  border-left: 1px solid var(--border-soft);
  /* 720px base forces horizontal scroll on the 9-tab strip; bump to 920. */
  width: 920px;
  /* Base rule hides via right: -760px (sized for 720). With 920 width the
     extra 160px poked into the viewport when closed. Use transform-based
     hide so the close-state is correct regardless of width. */
  right: 0;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
body.pulse-mode .drawer.open { transform: translateX(0); }
body.pulse-mode .drawer-header {
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--space-3) var(--space-4) var(--space-2);
}
body.pulse-mode .drawer-name {
  font-size: var(--text-heading); font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
body.pulse-mode .drawer-tabs-bar {
  background: var(--surface-0);
  padding: 0 var(--space-4);
  overflow-x: auto;
  scrollbar-width: thin;
}
body.pulse-mode .drawer-tab {
  padding: 10px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  border-bottom-width: 2px;
}
body.pulse-mode .drawer-tab:hover {
  color: var(--text-primary);
}
body.pulse-mode .drawer-tab.active {
  color: var(--accent-info-fg);
  border-bottom-color: var(--accent-info-fg);
}
body.pulse-mode .drawer-section-title {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: none;
  padding-bottom: 0;
  margin: var(--space-4) 0 var(--space-2);
}
body.pulse-mode .action-stage-card {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
body.pulse-mode .action-stage-name {
  color: var(--text-primary);
  font-size: 14px; font-weight: 600;
}
body.pulse-mode .drawer-body {
  padding: var(--space-3) var(--space-4);
}
/* Make the bottom Save row sticky so it stays visible while editing
   long forms (Systems tab in particular). */
body.pulse-mode .drawer-save-row {
  position: sticky; bottom: 0;
  background: var(--surface-0);
  border-top: 1px solid var(--border-soft);
  margin: var(--space-3) calc(var(--space-4) * -1) calc(var(--space-3) * -1);
  padding: var(--space-2) var(--space-4);
  z-index: 3;
}

/* Systems tab v2: Detect-all action row + provisioning summary pills */
.dtab-sys-actions {
  display: flex; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dtab-sys-summary {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
/* Group each drawer-section-title + edit-field-grid as a visual card. */
body.pulse-mode #dtab-systems .edit-field-grid {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Status banner — shown above the activity strip when there's a hot situation */
.p-status-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  font-size: 13px;
  background: var(--surface-1);
  animation: p-status-slide 220ms ease-out;
}
.p-status-banner.is-hidden { display: none; }
.p-status-banner.critical {
  background: var(--accent-danger-bg);
  border-color: var(--accent-danger-fg);
  color: var(--accent-danger-fg);
}
.p-status-banner.warn {
  background: var(--accent-warn-bg);
  border-color: var(--accent-warn-fg);
  color: var(--accent-warn-fg);
}
.p-status-banner.info {
  background: var(--accent-info-bg);
  border-color: var(--accent-info-fg);
  color: var(--accent-info-fg);
}
.p-status-icon {
  font-size: 16px;
}
.p-status-msg {
  flex: 1;
  font-weight: 500;
}
@keyframes p-status-slide {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Subtle entrance animation for pulse home — runs once per page load. */
@keyframes p-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.pulse-mode #view-pulse-home.active .p-hero,
body.pulse-mode #view-pulse-home.active #p-pulse-tiles,
body.pulse-mode #view-pulse-home.active .p-split,
body.pulse-mode #view-pulse-home.active .p-activity-strip {
  animation: p-fade-up 280ms ease-out backwards;
}
body.pulse-mode #view-pulse-home.active .p-activity-strip { animation-delay: 40ms; }
body.pulse-mode #view-pulse-home.active .p-hero           { animation-delay: 80ms; }
body.pulse-mode #view-pulse-home.active #p-pulse-tiles    { animation-delay: 120ms; }
body.pulse-mode #view-pulse-home.active .p-split          { animation-delay: 160ms; }
/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  body.pulse-mode #view-pulse-home.active .p-hero,
  body.pulse-mode #view-pulse-home.active #p-pulse-tiles,
  body.pulse-mode #view-pulse-home.active .p-split,
  body.pulse-mode #view-pulse-home.active .p-activity-strip { animation: none !important; }
}

/* Pipeline stage bars (Pulse tile) */
.p-tile-pipeline-bars {
  display: flex; gap: 3px;
  height: 24px;
  align-items: flex-end;
  padding: 0;
}
.p-pipe-bar {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--surface-2);
  border-radius: 2px;
  min-height: 4px;
}
.p-pipe-bar-fill {
  display: block;
  background: var(--accent-info-fg);
  border-radius: 2px;
  min-height: 2px;
}

/* Monospace code/payload block (webhook detail modals, etc.). Tokenized so it
   stays readable in dark mode — was an inline light-gray hex bg with no color
   set, so in dark the near-white --text-primary fell on a light bg = invisible. */
.code-block {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-2);
  color: var(--text-primary);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE — Pulse chrome (2026-06-06)
   The only prior breakpoint (@media max-width:800px, ~line 731) styled LEGACY
   chrome only; the default Pulse (.p-*) UI had zero responsive treatment.
   This block makes Pulse usable on a phone: side rails → bottom tab bar,
   home grids reflow to one column, the detail drawer fills the screen.
   MUST live after all .p-* base rules — @media does not raise specificity, so
   source order decides ties; the layout-critical rail hide uses !important to
   beat the body.pulse-mode activation toggle.
   ════════════════════════════════════════════════════════════════════════════ */
.p-bottomnav { display: none; }   /* hidden on desktop + in legacy mode */

@media (max-width: 768px) {
  /* Drop the side rail; the bottom tab bar replaces it. */
  body.pulse-mode .p-rail    { display: none !important; }
  body.pulse-mode .main-content {
    margin-left: 0 !important;
    padding: 52px var(--space-3) 72px;   /* bottom pad clears the 56px tab bar */
  }

  /* Bottom tab bar (mirrors the rail; reuses .p-rail-item). */
  body.pulse-mode .p-bottomnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 56px;
    background: var(--surface-0);
    border-top: 1px solid var(--border-soft);
    z-index: 50;
  }
  .p-bottomnav .p-rail-item {
    flex: 1; margin: 0; padding: 6px 2px;
    border-radius: 0; justify-content: center;
    min-height: 44px;                    /* tap target */
  }
  /* --accent-success-fg flips light→dark green; --brand-vlabel-green has NO dark
     override (stays dark green) → unreadable on the near-black dark bottom-nav. */
  .p-bottomnav .p-rail-item.active        { background: none; color: var(--accent-success-fg); }
  .p-bottomnav .p-rail-item.active::before { display: none; }  /* kill rail's left accent bar */

  /* Top bar: reclaim width on a 44px bar — drop KPIs, desktop-only buttons, kbd hints.
     (KPIs remain available as Pulse-home tiles.) */
  body.pulse-mode .p-kpi-strip { display: none; }
  #p-shortcuts { display: none; }
  .p-topbtn .p-kbd { display: none; }

  /* Reflow Pulse-home grids to a single column on phones. */
  .p-pulse-tiles,
  .p-split,
  .p-needs-row { grid-template-columns: 1fr; }
  /* The signals hero shows 2-up instead of 5-up on a narrow screen. */
  .p-hero-signals { grid-template-columns: 1fr 1fr; }

  /* Detail drawer fills the screen (was a fixed 520px → overflowed the phone). */
  .p-drawer { width: 100vw; }
  .p-drawer-close { padding: 10px 14px; font-size: 22px; }

  /* Stop mobile focus-zoom (base form-control font is 13px < 16px threshold). */
  input, select, textarea { font-size: 16px; }

  /* List rows (audit / suspicious / directory) use fixed-width columns
     (140/100/90px) that overflow a phone. Let the row wrap and the secondary
     columns shrink to content so nothing scrolls sideways; keep name/title wide. */
  .p-row { flex-wrap: wrap; row-gap: 2px; }
  .p-row-primary { flex: 1 1 55%; min-width: 0; }
  .p-row-col, .p-row-mono, .p-row-time { flex: 0 1 auto; }
  .p-row-actions { flex: 0 0 auto; margin-left: auto; }
}