/* ============================================================================
   A-EZ Command — Wave 8 design system
   "Refined Institutional Command Center" — warm-neutral dark theme with
   editorial typography, considered spacing, and one signature element
   (a numbered section rule under every w2-page-head + every w2-section h2).

   Legacy --bg / --panel / --w2-* tokens are kept and remapped to the new
   palette so every existing surface inherits the new aesthetic without
   touching any other CSS rule. All ~3000 existing lines below this header
   continue to apply; this block + the @media + utility blocks at the
   bottom of the file are the only Wave 8 additions/changes.
   ============================================================================ */

:root {
  /* === Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) ============== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* === Type scale + families =========================================== */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-1: 11px;
  --fs-2: 12px;
  --fs-3: 13px;
  --fs-4: 14px;
  --fs-5: 16px;
  --fs-6: 20px;
  --fs-7: 26px;
  --fs-8: 34px;
  --fs-9: 48px;

  /* === Warm-neutral dark palette ("ink and parchment after midnight") === */
  /* Bases — slight warm tilt so it never reads as flat-cool gray. */
  --bg: #14110f;              /* page bg — near-black with brown undertone */
  --bg-2: #1b1814;            /* one step lighter — section beds */
  --bg-3: #221d18;            /* two steps — hover/raised */
  --surface: #1f1b16;         /* primary card / modal surface */
  --surface-2: #2a241d;       /* nested surface inside cards */
  --surface-3: #332b22;       /* table row hover, tooltip */

  --border: #2e2820;          /* hairline */
  --border-2: #3d3528;        /* stronger separator */
  --border-strong: #4a4032;   /* used by inputs when not focused */

  --text: #f4ece0;            /* primary — warm parchment */
  --text-2: #c9bfae;          /* secondary copy */
  --text-3: #8c8474;          /* muted captions, labels */
  --text-strong: #fbf6ec;     /* page titles + key numerals */

  /* Accent — refined gold/amber, NOT cliched purple/electric-blue. */
  --accent: #d4a347;          /* primary accent (gold) */
  --accent-2: #e6b85a;        /* hover / focus ring */
  --accent-3: #f0c97a;        /* pressed / highlight */
  --accent-soft: rgba(212, 163, 71, 0.12);
  --accent-soft-2: rgba(212, 163, 71, 0.20);

  /* Semantic — desaturated so they sit in the dark surface gracefully. */
  --success: #5fa872;
  --success-soft: rgba(95, 168, 114, 0.14);
  --warning: #d49a52;
  --warning-soft: rgba(212, 154, 82, 0.14);
  --danger: #d4604c;
  --danger-soft: rgba(212, 96, 76, 0.14);
  --info: #6aa6c4;
  --info-soft: rgba(106, 166, 196, 0.14);

  /* === Legacy aliases (everything below this :root reads these) ========= */
  /* We remap rather than rename, so the 3000+ lines of existing CSS pick
     up the new theme without an edit. */
  --panel: var(--surface);
  --panel-2: var(--bg-2);
  --text-muted: var(--text-3);
  --muted: var(--text-3);
  --accent-2-hover: var(--accent-2);
  --purple: var(--accent);
  --purple-soft: var(--accent-soft);
  --teal: var(--info);

  --warn: var(--warning);
  --critical: var(--danger);

  /* Top bar (legacy — only the old/pre-w2 topbar uses this) */
  --topbar-bg: #1a1612;
  --topbar-bg-2: #14110f;
  --topbar-text: var(--text-strong);
  --topbar-muted: var(--text-3);
  --topbar-accent: var(--accent);

  /* KPI tile pastels — re-tinted for the warm dark surface.
     bg = tinted darkness; fg = soft tinted accent.
     Each pair reads ~AA against the page bg. */
  --tile-pink-bg: rgba(212, 119, 134, 0.13);    --tile-pink-fg: #e8a3b2;
  --tile-yellow-bg: rgba(212, 163, 71, 0.13);   --tile-yellow-fg: #e6b85a;
  --tile-purple-bg: rgba(165, 137, 196, 0.13);  --tile-purple-fg: #c4a8d8;
  --tile-green-bg: rgba(95, 168, 114, 0.13);    --tile-green-fg: #8fc99c;
  --tile-red-bg: rgba(212, 96, 76, 0.13);       --tile-red-fg: #e89380;
  --tile-cyan-bg: rgba(106, 166, 196, 0.13);    --tile-cyan-fg: #93c0d6;
  --tile-blue-bg: rgba(124, 152, 196, 0.13);    --tile-blue-fg: #a8bee0;
  --tile-orange-bg: rgba(212, 154, 82, 0.13);   --tile-orange-fg: #e3b07a;
  --tile-gray-bg: rgba(255, 255, 255, 0.04);    --tile-gray-fg: var(--text-2);

  /* === Motion ========================================================== */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);     /* "ease-out-quint-ish" */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;

  /* === Elevation ======================================================= */
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;

  /* Mobile nav drawer */
  --drawer-w: 280px;
}

/* === Body grain texture ============================================== */
/* A very faint SVG noise overlay so the dark surface doesn't read as flat.
   Encoded as a data URI to avoid the network request. Opacity is 0.02 —
   barely perceptible, but it kills the "PowerPoint dark theme" feel. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.87  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
.app, main, .sidebar, .modal-backdrop, .chat-panel { position: relative; z-index: 2; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: 'ss01', 'cv11';  /* Inter Tight stylistic alts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button { cursor: pointer; font-family: inherit; font-feature-settings: inherit; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Display family for page titles + section heads. Slight optical adjustment
   so the serif sits in like a magazine headline, not a Times-New-Roman dump. */
h1, .w2-page-head h1, .dash-header h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 64, 'SOFT' 30;
  color: var(--text-strong);
}
h2, h3 { font-family: var(--font-body); }

/* === Tabular numerics — every money/integer column ==================== */
/* When the font supports it the runtime swap is free; we still set the
   class on all monetary columns/values so legacy fallback fonts honour it. */
.daily-take-kpi-value,
.daily-take-kpi .value,
.w2-kpi .value,
.kpi-tile .kpi-value,
.list-totals .total-item .value,
.stat .value,
.bond-amount .amt,
.bond-amount .premium,
.def-stat .v,
.action-row .countdown,
.alert-banner .alert-cd .num,
.bbi-counter b,
.time-clock-timer,
.audit li,
.time-clock-table .duration-cell,
.daily-take-table td,
.daily-take-table th,
#commission-table td,
#commission-table th,
.data-table td.num,
.data-table .money,
.activity-item .when,
.tl-item .t,
.w2-stage .count,
.w2-stage .val,
.cmdk-recent,
code {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum', 'cv11';
}

/* === Selection + focus ring =========================================== */
::selection { background: var(--accent-soft-2); color: var(--text-strong); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible { outline-offset: 3px; }

/* === Signature element: numbered section markers + serif rule =========
   Every w2-section h2 gets a refined small-caps Roman-numeral marker (auto-
   incremented across the page). Every w2-page-head gets a 2-stroke serif
   rule beneath the title — one long hairline, then a short accented gold
   marker. It's a single editorial gesture that ties the whole product
   together without being a logo lockup. */
main { counter-reset: w2section; }
.w2-section h2 { counter-increment: w2section; position: relative; }
.w2-section h2::before {
  content: counter(w2section, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-variation-settings: 'opsz' 14;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-right: var(--space-3);
  opacity: 0.85;
  vertical-align: 0.05em;
}
.w2-page-head {
  position: relative;
  padding-bottom: var(--space-4);
  border-bottom: none;
}
.w2-page-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--border-2) 0,
    var(--border-2) calc(100% - 92px),
    transparent calc(100% - 92px),
    transparent calc(100% - 88px),
    var(--accent) calc(100% - 88px),
    var(--accent) calc(100% - 60px),
    transparent calc(100% - 60px)
  );
}
.dash-header {
  position: relative;
}
.dash-header::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0,
    var(--border-2) 40px,
    var(--border-2) calc(100% - 92px),
    transparent calc(100% - 92px),
    transparent calc(100% - 88px),
    var(--accent) calc(100% - 88px),
    var(--accent) calc(100% - 60px),
    transparent calc(100% - 60px)
  );
}

/* === Top bar ============================================================ */

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  background: linear-gradient(180deg, var(--topbar-bg) 0%, var(--topbar-bg-2) 100%);
  border-bottom: 1px solid var(--topbar-bg-2);
  color: var(--topbar-text);
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  height: 30px;
  width: auto;
  background: #ffffff;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.brand-product {
  font-size: 15px;
  font-weight: 600;
  color: var(--topbar-text);
  letter-spacing: 0.04em;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
}

/* Login page logo: card is white, logo renders natively */
.login-brand {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
}
.login-logo {
  width: 220px;
  max-width: 100%;
  height: auto;
}
.login-product {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Tabs strip — BailBooks-style horizontal icon-tabs, wraps on overflow.
   Lives in the dark top bar but renders as light "chips" with icon + label. */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  align-items: center;
}
.tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--topbar-muted);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tabs button:hover {
  color: var(--topbar-text);
  background: rgba(255, 255, 255, 0.10);
}
.tabs button.active {
  color: var(--topbar-bg);
  background: var(--topbar-text);
  border-color: var(--topbar-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.tabs button::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}

.health {
  margin-left: auto;
  color: var(--topbar-muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.user-menu {
  display: flex; align-items: center; gap: 10px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.user-name {
  color: var(--topbar-text);
  font-size: 12.5px;
  font-weight: 600;
}
.user-menu button.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--topbar-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.user-menu button.secondary:hover { background: rgba(255, 255, 255, 0.16); }
.health.ok { color: #86efac; }
.health.bad { color: #fca5a5; }

/* === Layout ============================================================= */

main { padding: 20px 24px 60px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 4px; color: var(--text-strong); font-weight: 600; }
h2 { font-size: 14px; margin: 24px 0 10px; color: var(--muted); font-weight: 600;
     text-transform: uppercase; letter-spacing: 0.06em; }
.hint { color: var(--muted); margin: 0 0 12px; font-size: 13px; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Dashboard 2-col layout: Common Tasks sidebar + main content */
.dash-shell {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .dash-shell { grid-template-columns: 1fr; } }

/* Dashboard header strip */
.dash-header {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.dash-header .title-block h1 { margin: 0; }
.dash-header .title-block .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.dash-header .actions { display: flex; gap: 8px; }

/* === Common Tasks sidebar (BailBooks purple style) ====================== */

.task-sidebar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  position: sticky; top: 70px;
}
.task-sidebar h3 {
  font-size: 12px; margin: 0 0 10px;
  color: var(--purple);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--purple-soft);
}
.task-btn-group { display: flex; flex-direction: column; gap: 6px; }
.task-btn {
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--purple-soft);
  color: var(--purple);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.task-btn:hover {
  background: var(--purple-soft);
  border-color: var(--purple);
}

.todo-panel {
  margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.todo-panel h3 {
  font-size: 12px; margin: 0 0 10px;
  color: var(--purple);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--purple-soft);
}
.todo-row { display: flex; gap: 6px; margin-bottom: 8px; }
.todo-row input {
  flex: 1; min-width: 0;
  padding: 6px 8px; font-size: 12.5px;
}
.todo-row button {
  padding: 6px 12px;
  background: var(--purple);
  color: #fff;
  border: none; border-radius: 6px;
  font-weight: 600; font-size: 12px;
}
.todo-row button:hover { filter: brightness(1.05); }
.todo-list { list-style: none; padding: 0; margin: 0; }
.todo-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12.5px;
}
.todo-list li:last-child { border-bottom: none; }
.todo-list li input[type=checkbox] { margin: 0; flex-shrink: 0; }
.todo-list li.done span { text-decoration: line-through; color: var(--muted); }
.todo-list li button.del {
  margin-left: auto;
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 14px;
  padding: 0 4px;
}
.todo-list li button.del:hover { color: var(--danger); }

/* === KPI grid ("What's Happening Today") =============================== */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.kpi-tile {
  background: var(--tile-gray-bg);
  color: var(--tile-gray-fg);
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid transparent;
  transition: transform 0.08s, box-shadow 0.12s;
  cursor: pointer;
  position: relative;
}
.kpi-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.kpi-tile .kpi-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: currentColor;
}
.kpi-tile .kpi-label {
  font-size: 11.5px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  opacity: 0.85;
}
.kpi-tile.pink   { background: var(--tile-pink-bg);   color: var(--tile-pink-fg); }
.kpi-tile.yellow { background: var(--tile-yellow-bg); color: var(--tile-yellow-fg); }
.kpi-tile.purple { background: var(--tile-purple-bg); color: var(--tile-purple-fg); }
.kpi-tile.green  { background: var(--tile-green-bg);  color: var(--tile-green-fg); }
.kpi-tile.red    { background: var(--tile-red-bg);    color: var(--tile-red-fg); }
.kpi-tile.cyan   { background: var(--tile-cyan-bg);   color: var(--tile-cyan-fg); }
.kpi-tile.blue   { background: var(--tile-blue-bg);   color: var(--tile-blue-fg); }
.kpi-tile.orange { background: var(--tile-orange-bg); color: var(--tile-orange-fg); }

/* === Recents (Last 15 Clients You Opened) =============================== */

.recents-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.recents-panel h3 {
  font-size: 12px; margin: 0 0 10px;
  color: var(--text-strong);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.recents-list { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; }
.recents-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
  display: flex; justify-content: space-between; gap: 8px;
}
.recents-list li:last-child { border-bottom: none; }
button.linkish {
  background: none; border: none; padding: 0;
  color: var(--accent); font-weight: 600; font-size: 13px;
  text-align: left;
  cursor: pointer;
}
button.linkish:hover { text-decoration: underline; background: none; }
.recents-list li .when { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.recents-empty { color: var(--muted); font-size: 12px; padding: 12px 0; }

/* === Existing stat tiles (legacy support) =============================== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px;
}
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.stat .value { font-size: 22px; margin-top: 4px; color: var(--text-strong); font-weight: 700; }

/* === List views (BailBooks-style sidebar + table) ====================== */

.list-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .list-shell { grid-template-columns: 1fr; } }

.list-sidebar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  position: sticky; top: 70px;
}
.list-sidebar h3 {
  font-size: 11px; margin: 0 0 8px;
  color: var(--text-strong);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.list-sidebar .cat-list {
  list-style: none; padding: 0; margin: 0 0 14px;
}
.list-sidebar .cat-list li { margin: 1px 0; }
.list-sidebar .cat-btn {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.1s, color 0.1s;
}
.list-sidebar .cat-btn:hover {
  background: var(--panel-2);
}
.list-sidebar .cat-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.list-sidebar .cat-btn .count {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 700;
}
.list-sidebar .cat-btn:not(.active) .count {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
}

.list-totals {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
}
.list-totals .total-item .label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.list-totals .total-item .value {
  font-size: 22px; font-weight: 700; color: var(--text-strong); line-height: 1.1;
}
.list-totals .total-item.primary .value { color: var(--accent-2); }

.filter-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  align-items: center;
}
.filter-row label { margin: 0; }
.filter-row input, .filter-row select {
  padding: 6px 8px; font-size: 12.5px;
}
.filter-row .filter-search {
  grid-column: span 2;
}

.stage-chip, .label-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.stage-chip.lead          { background: var(--tile-gray-bg);   color: var(--tile-gray-fg); }
.stage-chip.intake        { background: var(--tile-blue-bg);   color: var(--tile-blue-fg); }
.stage-chip.underwriting  { background: var(--tile-purple-bg); color: var(--tile-purple-fg); }
.stage-chip.documents_out { background: var(--tile-cyan-bg);   color: var(--tile-cyan-fg); }
.stage-chip.posted        { background: var(--tile-orange-bg); color: var(--tile-orange-fg); }
.stage-chip.on_bond       { background: var(--tile-green-bg);  color: var(--tile-green-fg); }
.stage-chip.at_risk       { background: var(--tile-yellow-bg); color: var(--tile-yellow-fg); }
.stage-chip.forfeiture    { background: var(--tile-red-bg);    color: var(--tile-red-fg); }
.stage-chip.resolved      { background: var(--tile-gray-bg);   color: var(--tile-gray-fg); }

.label-chip.fta           { background: var(--tile-red-bg);    color: var(--tile-red-fg); }
.label-chip.custody       { background: var(--tile-orange-bg); color: var(--tile-orange-fg); }
.label-chip.balance       { background: var(--tile-yellow-bg); color: var(--tile-yellow-fg); }
.label-chip.exonerated    { background: var(--tile-green-bg);  color: var(--tile-green-fg); }

/* === Wave 7.B.UI — Bond Labels ======================================== */

/* Bond detail chip row (sits between stage subheader and tab strip). */
.bond-labels-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.bond-labels-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bond-labels-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.bond-label-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 4px 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.bond-label-chip-x {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.65;
  border-radius: 50%;
}
.bond-label-chip-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.bond-labels-add { position: relative; }
.bond-labels-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.bond-label-pick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 10px;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
}
.bond-label-pick-item:hover { background: var(--panel-2); }
.bond-label-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Bond-list filter chip row (above the table). */
.bond-labels-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
}
.bond-labels-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.bond-labels-filter .bond-label-chip {
  cursor: pointer;
  user-select: none;
  opacity: 0.55;
  transition: opacity 0.12s;
  padding: 3px 10px;
}
.bond-labels-filter .bond-label-chip:hover { opacity: 0.85; }
.bond-labels-filter .bond-label-chip.active { opacity: 1; outline: 2px solid currentColor; outline-offset: -2px; }
.bond-labels-filter-clear {
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  text-decoration: underline;
}
.bond-labels-filter-clear:hover { color: var(--danger); }

/* Settings → Bond Labels admin table. */
.bond-labels-admin-table .swatch-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bond-labels-admin-table .swatch-cell .bond-label-swatch {
  width: 16px; height: 16px;
  border: 1px solid var(--border);
}

/* === Wave 7.A.UI — Time Clock widget ================================== */
.time-clock-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.time-clock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.time-clock-btn.in {
  background: var(--accent-2);
  color: #fff;
}
.time-clock-btn.in:hover { background: var(--accent-2-hover); }
.time-clock-btn.out {
  background: var(--danger);
  color: #fff;
}
.time-clock-btn.out:hover { background: var(--critical); }
.time-clock-timer {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}

/* /time-clock page table */
.time-clock-table { width: 100%; }
.time-clock-table .duration-cell { font-variant-numeric: tabular-nums; }
.time-clock-page-head {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.time-clock-page-head label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  gap: 4px;
}
.time-clock-page-head input,
.time-clock-page-head select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  font-family: inherit;
}

.list-empty {
  background: var(--panel);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 36px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.list-empty strong { color: var(--text-strong); display: block; margin-bottom: 4px; font-size: 14px; }

/* === Calendar (month view) ============================================ */

.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav button { padding: 6px 12px; }

.cal-toggles { list-style: none; padding: 0; margin: 0; }
.cal-toggles li { margin: 4px 0; font-size: 12.5px; }
.cal-toggles label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); margin: 0; }
.cal-toggles input { margin: 0; }
.cal-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.cal-swatch.cal-court      { background: var(--tile-blue-fg); }
.cal-swatch.cal-balance    { background: var(--tile-yellow-fg); }
.cal-swatch.cal-forfeit    { background: var(--tile-red-fg); }
.cal-swatch.cal-collateral { background: var(--tile-purple-fg); }

.cal-grid {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-grid .cal-dow {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.cal-grid .cal-day {
  min-height: 96px;
  padding: 6px 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}
.cal-grid .cal-day:nth-child(7n) { border-right: none; }
.cal-grid .cal-day.cal-other-month {
  background: var(--panel-2);
  color: var(--muted);
}
.cal-grid .cal-day.cal-today {
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-grid .cal-day:hover { background: var(--panel-2); }
.cal-grid .cal-day .cal-date-num {
  font-size: 12px; font-weight: 600;
  color: var(--text-strong);
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.cal-grid .cal-day.cal-other-month .cal-date-num { color: var(--muted); }
.cal-grid .cal-day .cal-count {
  font-size: 10px;
  color: var(--muted);
}
.cal-event {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid currentColor;
}
.cal-event.cal-court      { background: var(--tile-blue-bg);   color: var(--tile-blue-fg); }
.cal-event.cal-balance    { background: var(--tile-yellow-bg); color: var(--tile-yellow-fg); }
.cal-event.cal-forfeit    { background: var(--tile-red-bg);    color: var(--tile-red-fg); }
.cal-event.cal-collateral { background: var(--tile-purple-bg); color: var(--tile-purple-fg); }
.cal-more {
  font-size: 10px; color: var(--muted); font-weight: 600;
  margin-top: 2px;
}

/* === Data tables ======================================================= */

.data-table {
  width: 100%; border-collapse: collapse; margin-top: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
}
.data-table th, .data-table td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; vertical-align: top;
}
.data-table th {
  color: var(--muted); font-weight: 600;
  background: var(--panel-2);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--panel-2); }

/* === Audit log ========================================================= */

.audit { list-style: none; padding: 0; margin: 0;
         background: var(--panel); border: 1px solid var(--border);
         border-radius: 8px; overflow: hidden; }
.audit li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  padding: 6px 12px; border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.audit li:last-child { border-bottom: none; }
.audit li b { color: var(--text-strong); }

/* === Pipeline toolbar + view toggle ==================================== */

.pipeline-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
  flex-wrap: wrap;
}
.pipeline-stats {
  font-size: 12px; color: var(--muted); display: flex; gap: 14px;
}
.pipeline-stats b { color: var(--text-strong); font-size: 13px; }
#pipeline-search {
  max-width: 320px; min-width: 200px;
  padding: 6px 10px; font-size: 13px;
}

.view-toggle {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
}
.view-toggle button {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.1s, color 0.1s;
}
.view-toggle button:hover { color: var(--text-strong); background: transparent; }
.view-toggle button.active {
  background: var(--panel);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* === Pipeline kanban =================================================== */

.pipeline {
  display: grid; grid-template-columns: repeat(9, minmax(220px, 1fr)); gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pipeline .col {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; min-height: 200px;
}
.pipeline .col h3 {
  font-size: 11px; color: var(--muted); margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}
.pipeline .col h3 .n {
  color: var(--text-strong); font-weight: 700;
  background: var(--panel); padding: 1px 6px; border-radius: 10px;
  font-size: 11px; border: 1px solid var(--border);
}

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 10px; margin-bottom: 6px; font-size: 12px;
  position: relative;
}
.card .name { font-weight: 600; color: var(--text-strong); }
.card .meta { color: var(--muted); margin-top: 2px; }
.card.stuck::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}
.card .row-2 {
  display: flex; gap: 8px; align-items: center; margin-top: 6px;
  font-size: 11px; color: var(--muted);
}
.card .age { white-space: nowrap; font-weight: 600; }
.card .age.warn { color: var(--warn); }
.card .age.bad  { color: var(--danger); }
.card .next-action {
  font-size: 11px; color: var(--text); margin-top: 6px;
  border-left: 3px solid var(--accent); padding-left: 8px;
  background: var(--panel-2); border-radius: 0 4px 4px 0;
  padding: 4px 8px;
}
.card .balance-wrap { margin-top: 6px; }
.card.clickable { cursor: grab; transition: border-color 0.1s, box-shadow 0.1s, opacity 0.1s; }
.card.clickable:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}
.card.clickable:active { cursor: grabbing; }
.card.dragging {
  opacity: 0.4;
  border-style: dashed;
}

.pipeline .col.drop-target {
  background: #eff6ff;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.25);
}
.pipeline .col.drop-target.invalid {
  background: #fef2f2;
  border-color: var(--danger);
  box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.25);
}
.pipeline .col .col-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 24px 8px;
  text-align: center;
}

.pipeline .col .col-foot {
  font-size: 11px; color: var(--muted); border-top: 1px solid var(--border);
  margin-top: 8px; padding-top: 8px;
  display: flex; justify-content: space-between;
  font-weight: 600;
}

/* === Badges ============================================================ */

.badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px;
         font-weight: 600; }
.badge.low      { background: var(--tile-green-bg);  color: var(--tile-green-fg); }
.badge.moderate { background: var(--tile-yellow-bg); color: var(--tile-yellow-fg); }
.badge.elevated { background: var(--tile-orange-bg); color: var(--tile-orange-fg); }
.badge.high     { background: var(--tile-red-bg);    color: var(--tile-red-fg); }

/* === Forms ============================================================= */

textarea,
input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=date],
input[type=tel],
input[type=search],
select {
  width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  transition: border-color 0.1s, box-shadow 0.1s;
}
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
label input[type=checkbox] { width: auto; margin-left: 8px; }
.row { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 160px; }

/* Primary CTA — Pipedrive-style green */
button {
  background: var(--accent-2);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.1s;
}
button:hover { background: var(--accent-2-hover); }
button.secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
button.secondary:hover { background: var(--panel-2); }

/* === Output blocks ===================================================== */

.output {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
}

/* === Chat =============================================================== */

.chat-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.chat-history { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.chat-msg { padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; font-size: 13px; }
.chat-msg.user { background: var(--panel-2); border: 1px solid var(--border); }
.chat-msg.assistant {
  background: #eff6ff;
  border-left: 3px solid var(--accent);
  border: 1px solid #dbeafe;
}
.chat-msg .who {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

details summary { cursor: pointer; color: var(--muted); margin-top: 8px; }

/* === Charts ============================================================ */

.charts-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px; margin: 8px 0 20px;
}
.chart-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px;
}
.chart-card h3 {
  font-size: 12px; color: var(--muted); margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.chart-body { display: flex; align-items: center; gap: 14px; }
.chart-body svg { flex-shrink: 0; }

.legend { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 0; }
.legend li {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 2px 0;
  color: var(--text);
}
.legend .swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
.legend b { color: var(--text-strong); margin-left: auto; padding-left: 6px; font-weight: 600; }
.legend .legend-pct { color: var(--muted); font-size: 11px; min-width: 36px; text-align: right; }

.progress-bar {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; width: 100%;
}
.progress-paid {
  height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--teal));
}

/* === Modal ============================================================= */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
  display: none; align-items: flex-start; justify-content: center; z-index: 100;
  overflow-y: auto; padding: 40px 16px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  width: 100%; max-width: 800px; padding: 20px 22px; color: var(--text);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
}
.modal h2 { margin: 0 0 4px; font-size: 18px; color: var(--text-strong); }
.modal .modal-sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.modal .modal-close {
  float: right; background: transparent; color: var(--muted); border: none;
  font-size: 22px; cursor: pointer; padding: 0; line-height: 1;
}
.modal .modal-close:hover { color: var(--danger); }
.modal .modal-section { margin-top: 16px; }
.modal .modal-section h4 {
  margin: 0 0 8px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.modal .kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; font-size: 13px; }
.modal .kv .k { color: var(--muted); }
.modal .timeline {
  list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border);
  padding-left: 14px;
}
.modal .timeline li { font-size: 12px; padding: 4px 0; position: relative; }
.modal .timeline li::before {
  content: ''; position: absolute; left: -19px; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}
.modal .timeline li .when { color: var(--muted); margin-right: 8px; }

code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 3px;
  font-size: 12px; color: var(--text-strong);
  border: 1px solid var(--border);
}

/* --- Paperwork (A-EZ paper forms) ----------------------------------- */
.paperwork-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.paperwork-table th,
.paperwork-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.paperwork-table th {
  background: var(--panel-2);
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.paperwork-table .hint { color: var(--muted); font-size: 11px; }
.pw-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.pw-badge.done   { background: var(--tile-green-bg);  color: var(--tile-green-fg);  border-color: var(--tile-green-fg); }
.pw-badge.draft  { background: var(--tile-yellow-bg); color: var(--tile-yellow-fg); border-color: var(--tile-yellow-fg); }
.pw-badge.empty  { background: var(--tile-gray-bg);   color: var(--tile-gray-fg); }

.pw-header { margin-bottom: 10px; }
.pw-header h2 { margin: 4px 0 2px; }
.pw-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 12px 0;
}
.pw-field { display: flex; flex-direction: column; gap: 3px; }
.pw-field-wide { grid-column: 1 / -1; }
.pw-field label { font-size: 12px; color: var(--muted); font-weight: 600; }
.pw-field input,
.pw-field select,
.pw-field textarea {
  font: inherit; font-size: 13px;
  padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--panel);
}
.pw-field textarea { resize: vertical; }
.pw-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.pw-actions button.ghost {
  background: var(--panel);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
}
.pw-actions button.primary {
  background: var(--accent-2);
  color: white;
}

/* --- Cmd+K modal (Wave 1.5) -------------------------------------------- */
#cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh;
  z-index: 100;
}
#cmdk-backdrop[hidden] { display: none; }
#cmdk-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
  width: 100%; max-width: 620px;
  display: flex; flex-direction: column;
  max-height: 70vh;
  overflow: hidden;
}
#cmdk-input {
  width: 100%; padding: 16px 18px;
  font-size: 15px; border: 0; outline: 0;
  border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text);
}
#cmdk-filters {
  display: flex; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
#cmdk-filters .cmdk-chip {
  font-size: 11.5px; padding: 4px 10px;
  border: 1px solid var(--border);
  background: transparent; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
#cmdk-filters .cmdk-chip.active {
  background: var(--accent-2); color: white; border-color: var(--accent-2);
}
#cmdk-results {
  list-style: none; margin: 0; padding: 6px 0;
  overflow-y: auto;
}
#cmdk-results .cmdk-empty,
#cmdk-results .cmdk-header {
  font-size: 11.5px; color: var(--muted);
  padding: 6px 16px; text-transform: uppercase; letter-spacing: 0.5px;
}
#cmdk-results .cmdk-recent {
  padding: 6px 16px; cursor: pointer; font-size: 13px;
}
#cmdk-results .cmdk-recent:hover { background: var(--row-hover, #f1f5f9); }
#cmdk-results .cmdk-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; font-size: 13.5px;
}
#cmdk-results .cmdk-result.selected,
#cmdk-results .cmdk-result:hover {
  background: var(--row-hover, #f1f5f9);
}
#cmdk-results .cmdk-icon { font-size: 18px; }
#cmdk-results .cmdk-body { flex: 1; min-width: 0; }
#cmdk-results .cmdk-title {
  font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cmdk-results .cmdk-sub { font-size: 11.5px; color: var(--muted); }
#cmdk-results .cmdk-type {
  font-size: 11px; color: var(--muted);
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px;
}
#cmdk-footer {
  display: flex; gap: 14px; padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
}

/* === Wave 2 design tokens (Wave 8 remap to the warm-dark palette) ====== */
/* These --w2-* tokens are used by hundreds of declarations below. We
   remap them to the Wave 8 base tokens so every Wave 2/3/4/5/6/7 surface
   reads the new theme without any further edit. */
:root {
  --w2-bg: var(--bg);
  --w2-panel: var(--surface);
  --w2-panel-2: var(--bg-2);
  --w2-nav: #0d0b09;             /* deepest tone for the sidebar */
  --w2-nav-hover: var(--bg-3);
  --w2-border: var(--border);
  --w2-text: var(--text);
  --w2-text-2: var(--text-2);
  --w2-text-3: var(--text-3);
  --w2-text-on-dark: var(--text-strong);
  --w2-text-on-dark-2: var(--text-3);
  --w2-brand: var(--accent);
  --w2-brand-2: var(--accent-2);
  --w2-ok: var(--success);
  --w2-warn: var(--warning);
  --w2-danger: var(--danger);
  --w2-info: var(--info);
  --w2-purple: var(--accent);
}

/* === Wave 2 app shell (sidebar + main column) ========================= */
body { background: var(--bg); }
.app {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}
.sidebar {
  width: 220px;
  background: var(--w2-nav);
  color: var(--w2-text-on-dark);
  padding: 16px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 16px;
  border-bottom: 1px solid #1F2937;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand .logo {
  width: 30px;
  height: 30px;
  background: var(--w2-brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.sidebar-brand .name { font-weight: 700; font-size: 15px; line-height: 1.1; }
.sidebar-brand .sub { font-size: 10px; opacity: 0.55; margin-top: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--w2-text-on-dark);
  text-decoration: none;
  cursor: pointer;
  font-size: 13.5px;
  user-select: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  line-height: 1.2;
}
.nav-item:hover { background: var(--w2-nav-hover); color: var(--w2-text-on-dark); }
.nav-item.active { background: var(--w2-brand); color: #fff; }
.nav-item .icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-item .label { flex: 1; min-width: 0; }
.nav-item .badge {
  margin-left: auto;
  background: var(--w2-danger);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.4;
}
.nav-item .badge.ok { background: var(--w2-ok); }
.nav-item .nav-kbd {
  background: #1F2937;
  border: 1px solid #374151;
  color: #9CA3AF;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, monospace;
  margin-left: auto;
}
.nav-item .nav-caret {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
  transition: transform 0.15s;
}
.nav-item[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* AI Tools dropdown — nested nav-children indent under their parent.
 * Specificity guard: the [hidden] attribute must override the display:flex
 * rule below, otherwise the collapse button is a no-op. */
.nav-children[hidden] { display: none !important; }
.nav-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 18px;
  margin: 2px 0 4px;
  border-left: 1px solid #1F2937;
  margin-left: 14px;
}
.nav-children .nav-child {
  font-size: 12.5px;
  padding: 6px 10px;
  opacity: 0.85;
}
.nav-children .nav-child:hover { opacity: 1; }
.nav-children .nav-child .icon { font-size: 12px; width: 16px; }
.nav-children .nav-child.active { background: var(--w2-brand); opacity: 1; }
.nav-section {
  padding: 12px 10px 4px;
  font-size: 10px;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #1F2937;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-footer .who { min-width: 0; flex: 1; }
.sidebar-footer .who-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--w2-text-on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-footer .who-role { font-size: 10.5px; opacity: 0.6; }
.sidebar-footer .sign-out {
  background: transparent;
  color: var(--w2-text-on-dark-2);
  border: 1px solid #374151;
  border-radius: 6px;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}
.sidebar-footer .sign-out:hover {
  background: var(--w2-nav-hover);
  color: var(--w2-text-on-dark);
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #2563EB);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* The main column lives next to the sidebar.
   Override the Wave-1 <main> centering so the flex layout works. */
.app > main {
  flex: 1;
  padding: var(--space-5) var(--space-6) var(--space-7);
  min-width: 0;
  background: var(--bg);
  max-width: none;
  margin: 0;
}

/* Wave 2 in-main topbar (breadcrumb + search + health + user actions) */
.w2-topbar {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.w2-topbar .crumb { color: var(--w2-text-2); font-size: 13px; }
.w2-topbar .crumb b { color: var(--w2-text); font-weight: 600; }
.w2-topbar .search {
  flex: 1;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--w2-border);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--w2-text-3);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}
.w2-topbar .search:hover { border-color: var(--w2-brand); }
.w2-topbar .search .kbd {
  background: var(--w2-panel-2);
  border: 1px solid var(--w2-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--w2-text-2);
  font-family: ui-monospace, Menlo, monospace;
  margin-left: auto;
}
.w2-topbar .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--w2-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  position: relative;
  color: var(--w2-text);
}
.w2-topbar .icon-btn .dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--w2-danger);
  border: 2px solid #fff;
}
.w2-topbar .health-pill {
  font-size: 11px;
  color: var(--w2-text-2);
  background: #fff;
  border: 1px solid var(--w2-border);
  border-radius: 6px;
  padding: 6px 10px;
}
.w2-topbar .health-pill.ok { color: var(--w2-ok); }
.w2-topbar .health-pill.bad { color: var(--w2-danger); border-color: var(--w2-danger); }

/* === Wave 2.2: action-first Dashboard sections ========================= */

.w2-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.w2-page-head h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--w2-text);
}
.w2-page-head .sub {
  color: var(--w2-text-2);
  font-size: 13px;
  margin-top: 4px;
}
.w2-page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Wave 2 buttons (.btn / .btn.ghost / .btn.danger / .btn.primary). Scoped
   to .w2-page-head + .w2-section to avoid collisions with Wave 1 buttons. */
.w2-page-head .btn,
.w2-section .btn {
  border: none;
  background: var(--w2-brand);
  color: #fff;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.w2-page-head .btn:hover,
.w2-section .btn:hover { background: var(--w2-brand-2); }
.w2-page-head .btn.ghost,
.w2-section .btn.ghost {
  background: #fff;
  color: var(--w2-text);
  border: 1px solid var(--w2-border);
}
.w2-page-head .btn.ghost:hover,
.w2-section .btn.ghost:hover { background: var(--w2-panel-2); }
.w2-page-head .btn.primary { background: var(--w2-brand); }
.w2-page-head .btn.danger,
.w2-section .btn.danger { background: var(--w2-danger); }
.w2-page-head .btn.warn,
.w2-section .btn.warn { background: var(--w2-warn); }

.w2-section {
  background: var(--w2-panel);
  border: 1px solid var(--w2-border);
  border-radius: 12px;
  padding: 16px 20px 20px;
  margin-bottom: 18px;
}
.w2-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--w2-text-2);
  margin: 0 0 14px;
}
.w2-section h2 .count {
  background: var(--w2-text);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 8px;
  margin-left: auto;
}
.w2-section h2 .count.danger { background: var(--w2-danger); }

/* Action rows (Today You Must / Tonight's Risk) */
.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-row {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--w2-border);
  background: #fff;
  gap: 14px;
  transition: all 0.15s;
  cursor: pointer;
}
.action-row:hover { border-color: var(--w2-brand); transform: translateX(2px); }
.action-row .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--w2-danger);
  box-shadow: 0 0 0 0 rgba(220, 38, 38, .7);
  animation: w2-pulse 1.8s infinite;
  flex-shrink: 0;
}
.action-row .pulse.warn {
  background: var(--w2-warn);
  box-shadow: 0 0 0 0 rgba(217, 119, 6, .7);
  animation-name: w2-pulse-warn;
}
.action-row .pulse.ok { background: var(--w2-ok); animation: none; }
@keyframes w2-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@keyframes w2-pulse-warn {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}
.action-row .body { flex: 1; min-width: 0; }
.action-row .who { font-weight: 600; color: var(--w2-text); }
.action-row .what { color: var(--w2-text-2); font-size: 12.5px; margin-top: 1px; }
.action-row .meta { margin-left: auto; text-align: right; flex-shrink: 0; }
.action-row .meta .countdown { font-weight: 700; color: var(--w2-danger); font-size: 13px; }
.action-row .meta .countdown.warn { color: var(--w2-warn); }
.action-row .meta .label { font-size: 11px; color: var(--w2-text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.action-row .actions { display: flex; gap: 6px; flex-shrink: 0; }
.action-row-empty {
  text-align: center;
  padding: 24px 14px;
  color: var(--w2-text-3);
  font-size: 13px;
  border: 1px dashed var(--w2-border);
  border-radius: 10px;
}

.micro-btn {
  background: var(--w2-panel-2);
  border: 1px solid var(--w2-border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--w2-text);
}
.micro-btn:hover { background: var(--w2-brand); color: #fff; border-color: var(--w2-brand); }
.micro-btn.danger { color: var(--w2-danger); border-color: #FECACA; }
.micro-btn.danger:hover { background: var(--w2-danger); color: #fff; }
.micro-btn.warn { color: var(--w2-warn); border-color: #FED7AA; }
.micro-btn.warn:hover { background: var(--w2-warn); color: #fff; }

/* This Week So Far KPI tiles (4-up) */
.w2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .w2-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.w2-kpi {
  background: #fff;
  border: 1px solid var(--w2-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.w2-kpi .label {
  font-size: 11px;
  color: var(--w2-text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.w2-kpi .value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--w2-text);
}
.w2-kpi .delta { font-size: 12px; margin-top: 6px; }
.w2-kpi .delta.up   { color: var(--w2-ok); }
.w2-kpi .delta.down { color: var(--w2-danger); }
.w2-kpi .delta.neutral { color: var(--w2-text-3); }

/* Pipeline Snapshot 5-stage tiles */
.w2-pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 900px) { .w2-pipeline { grid-template-columns: repeat(2, 1fr); } }
.w2-stage {
  background: var(--w2-panel-2);
  border: 1px solid var(--w2-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.w2-stage:hover { background: #fff; border-color: var(--w2-brand); }
.w2-stage .name {
  font-size: 11px;
  font-weight: 600;
  color: var(--w2-text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.w2-stage .count {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--w2-text);
}
.w2-stage .val { font-size: 11px; color: var(--w2-text-3); }

/* Recent Activity feed */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--w2-border);
  font-size: 13px;
}
.activity-item:last-child { border-bottom: none; }
.activity-item .when {
  color: var(--w2-text-3);
  font-size: 11px;
  width: 80px;
  flex-shrink: 0;
  padding-top: 2px;
}
.activity-item .body { color: var(--w2-text); }
.activity-item .body b { font-weight: 600; }
.activity-empty {
  text-align: center;
  padding: 18px 8px;
  color: var(--w2-text-3);
  font-size: 13px;
}

/* === Wave 2.1+: sub-tab strip (Money, Bond detail, etc.) =============== */
.w2-subtabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--w2-border);
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.w2-subtab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--w2-text-2);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.w2-subtab:hover { color: var(--w2-text); }
.w2-subtab.active { color: var(--w2-brand); border-bottom-color: var(--w2-brand); }
.w2-subtab .badge {
  background: var(--w2-text-3);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  padding: 1px 6px;
}
.w2-subtab .badge.danger { background: var(--w2-danger); }
.w2-subtab.active .badge { background: var(--w2-brand); }

/* === Wave 2.5: Defendant 360 view ====================================== */
.def-header {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 700px) {
  .def-header { grid-template-columns: 1fr; text-align: center; }
}
.def-header .mug {
  width: 120px;
  height: 140px;
  background-image: linear-gradient(135deg, #4B5563, #1F2937);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border: 3px solid rgba(255, 255, 255, .15);
  color: #fff;
  font-weight: 700;
}
.def-header h1 { margin: 0; font-size: 28px; color: var(--w2-text); }
.def-header .def-meta {
  color: var(--w2-text-2);
  margin-top: 4px;
  font-size: 13px;
}
.def-header .tags {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tags .pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.tags .pill.ok     { background: #ECFDF5; color: var(--w2-ok); }
.tags .pill.warn   { background: #FFFBEB; color: var(--w2-warn); }
.tags .pill.danger { background: #FEF2F2; color: var(--w2-danger); }
.tags .pill.info   { background: #ECFEFF; color: var(--w2-info); }
.tags .pill.gray   { background: var(--w2-panel-2); color: var(--w2-text-2); }

.def-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}
@media (max-width: 700px) { .def-grid { grid-template-columns: repeat(2, 1fr); } }
.def-stat {
  background: var(--w2-panel-2);
  border: 1px solid var(--w2-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.def-stat .l {
  font-size: 11px;
  color: var(--w2-text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.def-stat .v {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
  color: var(--w2-text);
}
.def-stat .v.danger { color: var(--w2-danger); }

.tl {
  padding-left: 20px;
  border-left: 2px solid var(--w2-border);
  margin-left: 8px;
  margin-top: 8px;
}
.tl-item {
  padding: 6px 0 10px;
  position: relative;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--w2-brand);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--w2-border);
}
.tl-item.danger::before { background: var(--w2-danger); }
.tl-item.ok::before     { background: var(--w2-ok); }
.tl-item.warn::before   { background: var(--w2-warn); }
.tl-item .t { font-size: 11px; color: var(--w2-text-3); }
.tl-item .e { font-weight: 600; color: var(--w2-text); }
.tl-item .d { font-size: 12px; color: var(--w2-text-2); }

.def-two-col {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 900px) { .def-two-col { grid-template-columns: 1fr; } }
.def-two-col .w2-section { margin-bottom: 0; }

/* === Wave 2.3: Bond Detail Command Center ============================== */
.bond-header {
  background: linear-gradient(135deg, #1E293B, #0F172A);
  color: var(--w2-text-on-dark);
  border-radius: 14px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.bond-header.fta { background: linear-gradient(135deg, #7F1D1D, #450A0A); }
.bond-grid {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  align-items: center;
}
@media (max-width: 700px) {
  .bond-grid { grid-template-columns: 1fr; }
}
.bond-grid .mug {
  width: 100px;
  height: 120px;
  background-image: linear-gradient(135deg, #4B5563, #1F2937);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border: 3px solid rgba(255, 255, 255, .15);
}
.bond-header h2 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
}
.bond-header .meta-line {
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 8px;
}
.bond-header .badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge-pill {
  background: rgba(255, 255, 255, .12);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .18);
}
.badge-pill.danger { background: rgba(220, 38, 38, .85); border-color: rgba(255, 255, 255, .2); }
.badge-pill.warn   { background: rgba(217, 119, 6, .85); border-color: rgba(255, 255, 255, .2); }
.badge-pill.ok     { background: rgba(5, 150, 105, .85); border-color: rgba(255, 255, 255, .2); }

.bond-amount {
  text-align: right;
}
.bond-amount .amt { font-size: 28px; font-weight: 700; }
.bond-amount .surety { font-size: 11px; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.5px; }
.bond-amount .premium { font-size: 12px; margin-top: 6px; opacity: 0.85; }
.bond-amount .premium .owed { color: #FCA5A5; font-weight: 700; }

.alert-banner {
  margin-top: 18px;
  background: rgba(220, 38, 38, .15);
  border: 1px solid rgba(252, 165, 165, .4);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.alert-banner .alert-icon { font-size: 24px; }
.alert-banner .alert-title { font-weight: 700; font-size: 14px; }
.alert-banner .alert-sub { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.alert-banner .alert-cd {
  margin-left: auto;
  text-align: right;
}
.alert-banner .alert-cd .num { font-size: 22px; font-weight: 700; color: #FCA5A5; }
.alert-banner .alert-cd .label { font-size: 10px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 18px;
}
@media (max-width: 700px) { .quick-actions { grid-template-columns: repeat(3, 1fr); } }
.qa-btn {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  padding: 12px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.qa-btn:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.qa-btn .ic { font-size: 20px; }
.qa-btn.primary { background: var(--w2-brand); border-color: var(--w2-brand); }

/* Responsive: collapse sidebar to icon-rail on narrow screens */
@media (max-width: 900px) {
  .sidebar { width: 64px; padding: 12px 8px; }
  .sidebar-brand { justify-content: center; padding: 6px 0 12px; }
  .sidebar-brand > div:not(.logo) { display: none; }
  .nav-item { justify-content: center; padding: 10px 0; position: relative; }
  .nav-item .label, .nav-item .nav-kbd, .nav-item .nav-caret { display: none; }
  .nav-item .badge { position: absolute; top: 4px; right: 4px; padding: 0 5px; font-size: 9px; }
  .nav-children { display: none; }
  .sidebar-footer .who, .sidebar-footer .sign-out { display: none; }
  .sidebar-footer { justify-content: center; }
  .app > main { padding: 16px 18px 60px; }
  .w2-topbar .search { font-size: 12px; }
  .w2-topbar .health-pill { display: none; }
  .w2-page-head h1 { font-size: 18px; }
  .action-row { flex-wrap: wrap; }
  .action-row .meta { margin-left: 0; text-align: left; }
}

/* === Wave 2.4: mobile polish + PWA ergonomics ========================= */

/* Honour the device safe-area (iPhone notch / home-indicator) so the
   sidebar + main don't get clipped by the status bar or the gesture bar
   when the app is added to Home Screen / opened in standalone mode. */
@supports (padding: max(0px)) {
  .sidebar { padding-top: max(16px, env(safe-area-inset-top)); }
  .app > main {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(60px, env(safe-area-inset-bottom));
  }
}

/* Tactile press feedback. Buttons that already have transitions are
   refined here; new selectors get a default. The transform fires on
   :active so it only happens during a real tap, not on hover. */
.btn, .qa-btn, .micro-btn, .task-btn, .nav-item, .action-row, .w2-stage {
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .qa-btn:active, .micro-btn:active, .task-btn:active,
.nav-item:active, .action-row:active, .w2-stage:active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

/* Apple HIG: minimum 44x44pt tap target. Bump small buttons on touch
   devices so the operator's thumb hits reliably. We use hover: none +
   pointer: coarse to detect touch-first viewports without breaking
   trackpad-driven Macs. */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn.ghost, .qa-btn, .micro-btn, .task-btn { min-height: 44px; }
  .nav-item { min-height: 44px; }
  .action-row { min-height: 56px; }
  .data-table td { padding: 14px 12px; }
  /* The Cmd+K kbd hint isn't reachable on touch — hide so it doesn't
     occupy a tap-target's worth of real estate. */
  .nav-kbd, .w2-topbar .kbd { display: none; }
}

/* Modal becomes a bottom-sheet on phone-sized viewports for thumb
   reachability. The backdrop drops its outer padding so the sheet sits
   flush to the bottom edge of the viewport. */
/* === Wave 5.E.UI.2 — eSignature page =================================== */
.esign-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-top: 8px;
}
.esign-tab {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}
.esign-tab:hover { color: var(--text); background: var(--panel-2); }
.esign-tab.active {
  background: var(--panel);
  color: var(--text-strong);
  border-color: var(--border);
  border-bottom-color: var(--panel);
  margin-bottom: -1px;
}
.esign-tab .count {
  display: inline-block; margin-left: 6px;
  background: var(--panel-2); color: var(--muted);
  font-size: 11px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border);
}
.esign-tab.active .count { background: var(--tile-blue-bg); color: var(--tile-blue-fg); border-color: var(--tile-blue-fg); }

.esign-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.esign-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }

.micro-btn.warn { background: var(--tile-orange-bg); color: var(--tile-orange-fg); border-color: var(--tile-orange-fg); }

/* New-request modal pieces */
.esign-bond-picker { position: relative; }
.esign-bond-picker input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--panel); font-size: 13px;
}
.esign-bond-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 0 0 6px 6px; max-height: 240px; overflow-y: auto;
  z-index: 5; box-shadow: 0 6px 20px rgba(15,23,42,0.08);
}
.esign-bond-result {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--text); border: none;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.esign-bond-result:last-child { border-bottom: none; }
.esign-bond-result:hover { background: var(--panel-2); }
.esign-bond-r-name { display: block; font-weight: 600; color: var(--text-strong); }
.esign-bond-r-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.esign-bond-empty { padding: 8px 12px; color: var(--muted); font-size: 12px; }
.esign-bond-chosen {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 8px 10px;
  background: var(--tile-blue-bg); color: var(--tile-blue-fg);
  border-radius: 6px; font-size: 13px;
}
.esign-bond-chosen .esign-bond-clear {
  margin-left: auto;
  background: transparent; color: var(--tile-blue-fg);
  border: 1px solid var(--tile-blue-fg);
  border-radius: 4px; padding: 2px 8px; font-size: 11px;
}

.esign-block-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 4px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 4px;
}
.esign-block-kind {
  font-weight: 700; font-size: 11px;
  color: var(--tile-purple-fg); background: var(--tile-purple-bg);
  padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  min-width: 80px; text-align: center;
}
.esign-block-label {
  flex: 1; padding: 4px 8px; font-size: 12px;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--panel);
}
.esign-block-required-label {
  font-size: 11px; color: var(--muted); margin: 0; white-space: nowrap;
}
.esign-block-adders {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px;
}
.esign-block-adders .micro-btn { background: var(--panel); color: var(--text); }

/* Detail view */
.esign-doc-body {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px;
  white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 13px; color: var(--text);
  max-height: 400px; overflow-y: auto;
}
.esign-blocks-readonly .esign-block-readonly {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0; font-size: 13px;
}
.esign-capture-card {
  margin-bottom: 14px; padding: 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-2);
}
.esign-capture-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; margin-bottom: 6px;
}
.esign-capture-text {
  background: var(--panel); border: 1px dashed var(--border-strong);
  border-radius: 4px; padding: 8px 12px; font-size: 14px; color: var(--text);
}

/* === Wave 5.E.UI — eSignature canvas widget ============================ */
.sig-canvas-wrap {
  display: inline-block;
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #ffffff;
  padding: 0;
  position: relative;
}
.sig-canvas-wrap.readonly { border-style: dashed; }
.sig-canvas-svg {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;     /* let pointermove fire on touch without scrolling */
  cursor: crosshair;
  border-radius: 6px 6px 0 0;
}
.sig-canvas-wrap.readonly .sig-canvas-svg { cursor: default; }
.sig-canvas-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 0 0 6px 6px;
}
.sig-canvas-clear {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 10px;
  font-weight: 500;
}
.sig-canvas-clear:hover { background: var(--panel-2); }
.sig-canvas-check {
  margin-left: auto;
  color: #16a34a;
  font-size: 16px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.18s ease-in-out;
  pointer-events: none;
}
.sig-canvas-check.visible { opacity: 1; }

/* === Wave 6.OC.UI — Office Chat panel =================================== */
.chat-toggle-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  color: var(--topbar-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.chat-toggle-btn:hover { background: rgba(255, 255, 255, 0.16); }
.chat-toggle-icon { font-size: 16px; line-height: 1; }
.chat-toggle-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 999px;
  min-width: 16px; text-align: center;
  border: 1px solid #fff;
}

.chat-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.10);
  z-index: 80;
  display: flex; flex-direction: column;
}
.chat-panel[hidden] { display: none; }
.chat-panel-head {
  display: flex; align-items: center;
  padding: 10px 14px;
  background: var(--topbar-bg); color: var(--topbar-text);
  border-bottom: 1px solid var(--topbar-bg-2);
}
.chat-panel-title { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.chat-panel-actions { margin-left: auto; display: flex; gap: 6px; }
.chat-panel-newbtn,
.chat-panel-closebtn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--topbar-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  width: 28px; height: 28px; padding: 0;
  font-size: 16px; line-height: 1;
}
.chat-panel-newbtn:hover,
.chat-panel-closebtn:hover { background: rgba(255, 255, 255, 0.18); }

.chat-panel-body {
  display: grid;
  grid-template-columns: 160px 1fr;
  flex: 1;
  min-height: 0;
}
.chat-sidebar {
  background: var(--panel-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-section { padding: 8px 6px; }
.chat-section-title {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  padding: 4px 8px;
}
.chat-channel-list {
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.chat-channel-row {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  background: transparent; color: var(--text);
  border: none;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12.5px; font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.chat-channel-row:hover { background: var(--panel); }
.chat-channel-row.active { background: var(--accent-2); color: #fff; }
.chat-channel-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-channel-unread {
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
.chat-channel-row.active .chat-channel-unread { background: #fff; color: var(--danger); }
.chat-status {
  margin-top: auto;
  padding: 8px 12px;
  font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.chat-ws-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.chat-ws-dot.ws { background: var(--accent-2); }
.chat-ws-dot.poll { background: var(--warn); }
.chat-ws-dot.connecting { background: var(--muted); animation: chat-ws-pulse 1s infinite ease-in-out; }
@keyframes chat-ws-pulse { 50% { opacity: 0.4; } }

.chat-thread {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.chat-thread-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.chat-thread-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  position: relative;
}
.chat-thread-titles { flex: 1; min-width: 0; }
.chat-thread-name {
  font-size: 14px; font-weight: 700; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-thread-topic {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-thread-actions { display: flex; align-items: center; gap: 8px; }
.chat-thread-member-count { font-size: 11px; color: var(--muted); }
.chat-thread-settings-btn {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 4px; width: 28px; height: 28px; padding: 0;
  font-size: 16px; line-height: 1;
}
.chat-thread-settings-btn:hover { background: var(--panel-2); color: var(--text); }
.chat-thread-settings-pop {
  position: absolute; top: 100%; right: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px; z-index: 5;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10);
  min-width: 180px;
}
.chat-thread-settings-item {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--text);
  border: none; padding: 6px 10px; font-size: 12.5px;
  border-radius: 4px; cursor: pointer;
}
.chat-thread-settings-item:hover { background: var(--panel-2); }
.chat-thread-settings-item.danger { color: var(--danger); }

.chat-msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;
}
.chat-msg {
  display: flex; gap: 10px;
  padding: 6px 0;
  position: relative;
}
.chat-msg-grouped {
  display: flex; gap: 10px;
  padding: 1px 0 1px 50px;
  position: relative;
}
.chat-msg-grouped .chat-msg-time {
  font-size: 10px; color: var(--muted);
  width: 40px; text-align: right; padding-right: 6px;
  visibility: hidden;
  flex-shrink: 0;
}
.chat-msg-grouped:hover .chat-msg-time { visibility: visible; }
.chat-msg-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-msg-body { flex: 1; min-width: 0; }
.chat-msg-head {
  display: flex; align-items: baseline; gap: 6px;
}
.chat-msg-author { font-weight: 700; color: var(--text-strong); font-size: 13px; }
.chat-msg-time { font-size: 11px; color: var(--muted); }
.chat-msg-text {
  font-size: 13px; color: var(--text);
  word-wrap: break-word; overflow-wrap: break-word;
}
.chat-msg-tools {
  display: none;
  position: absolute; top: 4px; right: 6px;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px;
}
.chat-msg:hover .chat-msg-tools,
.chat-msg-grouped:hover .chat-msg-tools { display: flex; }
.chat-msg-tool {
  background: transparent; color: var(--muted);
  border: none; padding: 2px 6px;
  font-size: 11px; cursor: pointer; border-radius: 3px;
}
.chat-msg-tool:hover { background: var(--panel-2); color: var(--text); }
.chat-msg-tool.danger { color: var(--danger); }

.chat-compose {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.chat-compose-input {
  flex: 1;
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 8px 10px;
  font: inherit; font-size: 13px;
  resize: none;
  min-height: 34px; max-height: 160px;
  line-height: 1.4;
}
.chat-compose-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.chat-compose-send {
  background: var(--accent-2); color: #fff;
  border: none; border-radius: 6px;
  padding: 8px 14px; font-weight: 600; font-size: 13px;
}
.chat-compose-send:hover { background: var(--accent-2-hover); }

/* Create channel modal — member picker */
.chat-create-members-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 220px; overflow-y: auto;
  padding-top: 4px;
}
.chat-create-member {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font-size: 12px;
  cursor: pointer;
}
.chat-create-member:hover { background: var(--panel-2); }
.chat-create-member.picked {
  background: var(--accent-2); color: #fff;
  border-color: var(--accent-2);
}
.chat-create-member-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-create-member.picked .chat-create-member-avatar {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

@media (max-width: 700px) {
  .chat-panel { width: 100vw; }
  .chat-panel-body { grid-template-columns: 1fr; }
  .chat-sidebar { display: none; }
  .chat-panel.show-sidebar .chat-sidebar { display: flex; }
  .chat-panel.show-sidebar .chat-thread { display: none; }
}

/* === Wave 5.E.UI.3 — public signing page (sign.html) =================== */
.sign-page-body {
  background: var(--bg);
  min-height: 100vh;
  margin: 0;
}
.sign-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.sign-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.sign-brand {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.sign-logo { height: 36px; width: auto; border-radius: 6px; }
.sign-brand-name {
  font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sign-title {
  font-size: 22px; color: var(--text-strong);
  margin: 0 0 6px;
}
.sign-meta { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.sign-body-text {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  white-space: pre-wrap; word-break: break-word;
  font-size: 14px; line-height: 1.55; color: var(--text);
  max-height: 400px; overflow-y: auto;
  margin-bottom: 24px;
}
.sign-section-title {
  font-size: 12px; color: var(--muted); margin: 14px 0 10px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.sign-block-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}
.sign-block-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.sign-block-label { font-size: 13px; color: var(--text-strong); font-weight: 600; }
.sign-req { color: var(--danger); margin-left: 2px; }
.sign-text-input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--panel); font-size: 15px; color: var(--text);
}
.sign-text-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.sign-actions {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
}
.sign-actions .btn {
  padding: 12px 24px; font-size: 14px; font-weight: 600;
  border-radius: 6px; border: none; cursor: pointer;
}
.sign-actions .btn.primary { background: var(--accent-2); color: #fff; }
.sign-actions .btn.primary:hover:not(:disabled) { background: var(--accent-2-hover); }
.sign-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sign-error {
  background: var(--tile-red-bg); color: var(--tile-red-fg);
  border: 1px solid var(--tile-red-fg);
  border-radius: 6px; padding: 10px 14px; font-size: 13px;
  margin-top: 14px;
}

.sign-success {
  text-align: center; padding: 30px 20px;
}
.sign-success-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent-2); color: #fff;
  font-size: 36px; line-height: 1;
  margin-bottom: 16px;
}
.sign-success h1 {
  color: var(--accent-2); font-size: 26px; margin: 0 0 12px;
}
.sign-success p { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.sign-success .btn.primary {
  background: var(--accent-2); color: #fff;
  border: none; border-radius: 6px; padding: 10px 22px; font-size: 13px; font-weight: 600;
}

@media (max-width: 700px) {
  .sign-page { padding: 20px 12px 60px; }
  .sign-card { padding: 20px; border-radius: 8px; }
}

@media (max-width: 700px) {
  #bond-modal.show, #pay-modal.show {
    align-items: flex-end;
    padding: 0;
  }
  #bond-modal.show .modal,
  #pay-modal.show .modal {
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  /* Quick actions row collapses 6 → 3-up on phone so labels stay
     readable; primary action stays in the visible row. */
  .quick-actions { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .qa-btn { padding: 14px 6px; font-size: 11px; }
}

/* === Wave 7.C.UI — Daily Take Report dashboard ========================= */
.daily-take-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--w2-panel);
  border: 1px solid var(--w2-border);
  border-radius: 10px;
}
.daily-take-filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--w2-text-2);
}
.daily-take-filters input[type="date"],
.daily-take-filters select {
  padding: 6px 8px;
  border: 1px solid var(--w2-border);
  border-radius: 6px;
  background: #fff;
  color: var(--w2-text);
  font-size: 13px;
}
.daily-take-toggle {
  cursor: pointer;
  user-select: none;
}
.daily-take-toggle input { margin-right: 4px; }
.daily-take-asof {
  margin-left: auto;
  font-size: 11px;
  color: var(--w2-text-3);
}
.daily-take-kpis .w2-kpi .value { font-size: 32px; }
.daily-take-kpis .w2-kpi .delta { font-size: 12px; font-weight: 500; }
.daily-take-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1000px) {
  .daily-take-tables { grid-template-columns: 1fr; }
}
.daily-take-table-wrap { margin: 0; }
.daily-take-table { width: 100%; }
.daily-take-table th[data-sort]:hover { color: var(--w2-brand); }
.daily-take-table tbody tr:hover { background: var(--w2-panel-2); }


/* Wave 4.7.UI — BailBooks Importer admin page ----------------------------
 * Five module cards in a responsive grid + a streaming progress panel that
 * unhides when a run is in flight. Card visual states track scrape status:
 *   - ready (default): light border, neutral background
 *   - running: brand-color animated border-pulse
 *   - success: green-tinted border + check icon
 *   - error: red-tinted border + warning icon
 */
.bbi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.bbi-card {
  border: 1px solid var(--w2-border, #e5e7eb);
  background: var(--w2-panel, #fff);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bbi-card.bbi-running {
  border-color: var(--w2-brand, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.bbi-card.bbi-success { border-color: #16a34a; }
.bbi-card.bbi-error   { border-color: #dc2626; }
.bbi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bbi-card-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--w2-text, #111827);
}
.bbi-card-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--w2-panel-2, #f3f4f6);
  color: var(--w2-text-2, #6b7280);
}
.bbi-card-status.bbi-status-running { background: #dbeafe; color: #1d4ed8; }
.bbi-card-status.bbi-status-success { background: #dcfce7; color: #15803d; }
.bbi-card-status.bbi-status-error   { background: #fee2e2; color: #b91c1c; }
.bbi-card-meta {
  font-size: 12px;
  color: var(--w2-text-2, #6b7280);
  line-height: 1.55;
}
.bbi-card-meta b {
  color: var(--w2-text, #111827);
  font-weight: 600;
}
.bbi-card-actions {
  display: flex;
  gap: 8px;
}
.bbi-card-actions .btn { flex: 1; }

.bbi-stream {
  margin-top: 20px;
  border: 1px solid var(--w2-border, #e5e7eb);
  background: var(--w2-panel, #fff);
  border-radius: 10px;
  padding: 16px;
}
.bbi-stream-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bbi-stream-title {
  font-weight: 600;
  font-size: 15px;
}
.bbi-progressbar {
  height: 8px;
  background: var(--w2-panel-2, #f3f4f6);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.bbi-progressbar-fill {
  height: 100%;
  background: var(--w2-brand, #2563eb);
  transition: width 0.4s ease;
}
.bbi-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.bbi-counter {
  font-size: 12px;
  color: var(--w2-text-2, #6b7280);
}
.bbi-counter b {
  display: block;
  font-size: 20px;
  color: var(--w2-text, #111827);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bbi-counter.bbi-counter-error b { color: #b91c1c; }
.bbi-log {
  max-height: 240px;
  overflow-y: auto;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
  background: var(--w2-panel-2, #f9fafb);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--w2-border, #e5e7eb);
}
.bbi-log-line { white-space: pre-wrap; }
.bbi-log-line.bbi-log-error { color: #b91c1c; }
.bbi-log-line.bbi-log-progress { color: var(--w2-text-2, #6b7280); }
.bbi-log-line.bbi-log-complete { color: #15803d; font-weight: 600; }

/* Wave 7.F.UI — AI Photo Entry --------------------------------------- */
.pe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px) { .pe-grid { grid-template-columns: 1fr; } }

.pe-upload {
  border: 2px dashed var(--w2-border, #d1d5db);
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--w2-panel, #fff);
  transition: border-color 0.15s, background 0.15s;
}
.pe-upload:hover { border-color: var(--w2-brand, #2563eb); }
.pe-upload.pe-dragover {
  border-color: var(--w2-brand, #2563eb);
  background: rgba(37, 99, 235, 0.04);
}
.pe-upload.pe-uploading {
  opacity: 0.5;
  pointer-events: none;
}
.pe-upload-icon { font-size: 36px; margin-bottom: 8px; }
.pe-upload-title { font-weight: 600; font-size: 16px; color: var(--w2-text, #111827); }
.pe-upload-hint { font-size: 12px; color: var(--w2-text-2, #6b7280); margin-top: 4px; }

.pe-recent {
  border: 1px solid var(--w2-border, #e5e7eb);
  background: var(--w2-panel, #fff);
  border-radius: 10px;
  padding: 12px 16px;
}
.pe-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pe-recent-title { font-weight: 600; font-size: 14px; }
.pe-recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.pe-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--w2-border, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  background: var(--w2-panel-2, #f9fafb);
  font-size: 13px;
}
.pe-recent-row:hover { border-color: var(--w2-brand, #2563eb); background: var(--w2-panel, #fff); }
.pe-recent-row b { font-weight: 600; }
.pe-recent-row .pe-status-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--w2-panel, #fff);
}
.pe-recent-row .pe-status-pending  { color: #6b7280; }
.pe-recent-row .pe-status-extracted { color: #1d4ed8; background: #dbeafe; }
.pe-recent-row .pe-status-draft_created { color: #15803d; background: #dcfce7; }
.pe-recent-row .pe-status-failed   { color: #b91c1c; background: #fee2e2; }
.pe-recent-row .pe-status-discarded { color: #6b7280; background: #f3f4f6; }

.pe-review {
  margin-top: 16px;
  border: 1px solid var(--w2-border, #e5e7eb);
  background: var(--w2-panel, #fff);
  border-radius: 12px;
  padding: 20px;
}
.pe-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pe-review-title { font-weight: 600; font-size: 16px; }
.pe-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.pe-review-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--w2-text-2, #6b7280);
  margin-bottom: 4px;
}
.pe-review-field input,
.pe-review-field textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--w2-border, #e5e7eb);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.pe-review-field .pe-confidence {
  font-size: 10px;
  color: var(--w2-text-2, #6b7280);
  margin-top: 2px;
}
.pe-review-field.pe-low-confidence input { border-color: #f59e0b; }
.pe-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--w2-border, #e5e7eb);
}
.pe-cost-note {
  font-size: 11px;
  color: var(--w2-text-2, #6b7280);
  font-family: ui-monospace, "SF Mono", monospace;
}

/* ============================================================================
   Wave 8 — refined component layer (sits ABOVE all earlier rules so it
   overrides without specificity tricks).
   ============================================================================ */

/* === Sidebar polish on the warm-dark theme =========================== */
.sidebar {
  background: linear-gradient(180deg, #0d0b09 0%, #14110f 100%);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-3);
  gap: 2px;
}
.sidebar-brand .logo {
  background: var(--accent);
  color: #14110f;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.04em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sidebar-brand .name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 24, 'SOFT' 30;
  color: var(--text-strong);
}
.sidebar-brand .sub {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-top: 4px;
  opacity: 1;
}
.sidebar-brand { border-bottom-color: var(--border); }
.nav-item {
  color: var(--text-2);
  font-weight: 500;
  font-size: 13.5px;
  padding: 9px 10px;
  border-radius: 6px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item:hover {
  background: var(--bg-3);
  color: var(--text-strong);
}
.nav-item.active {
  background: var(--accent-soft-2);
  color: var(--accent);
  position: relative;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.nav-item .icon {
  filter: saturate(0.85);
  opacity: 0.92;
}
.nav-item.active .icon { opacity: 1; }
.nav-item .nav-kbd {
  background: var(--bg-3);
  border-color: var(--border-2);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.nav-section {
  color: var(--text-3);
  letter-spacing: 0.14em;
  font-weight: 700;
  opacity: 0.65;
}
.nav-children {
  border-left-color: var(--border);
  margin-left: 16px;
  padding-left: 14px;
}
.sidebar-footer {
  border-top-color: var(--border);
  padding-top: var(--space-3);
}
.sidebar-footer .who-name { color: var(--text-strong); font-weight: 600; }
.sidebar-footer .who-role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.avatar {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  color: #14110f;
  font-weight: 700;
  font-family: var(--font-body);
}
.sidebar-footer .sign-out {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text-3);
}
.sidebar-footer .sign-out:hover {
  background: var(--bg-3);
  color: var(--text-strong);
  border-color: var(--accent);
}

/* === Topbar polish =================================================== */
.w2-topbar { gap: var(--space-3); margin-bottom: var(--space-5); }
.w2-topbar .crumb {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-3);
  font-variation-settings: 'opsz' 18;
}
.w2-topbar .crumb b {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.w2-topbar .search {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-3);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.w2-topbar .search:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text-2);
}
.w2-topbar .search .kbd {
  background: var(--bg-3);
  border-color: var(--border-2);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.w2-topbar .icon-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.w2-topbar .icon-btn:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text-strong);
}
.w2-topbar .health-pill {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-3);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.w2-topbar .health-pill.ok { color: var(--success); }
.w2-topbar .health-pill.bad { color: var(--danger); border-color: var(--danger); }
.search-icon { font-size: 14px; line-height: 1; }
.search-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
}

/* Mobile hamburger — hidden on desktop. */
.mobile-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.mobile-nav-toggle:hover { border-color: var(--accent); background: var(--surface-2); }
.mobile-nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-strong);
  border-radius: 1px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
body.sidebar-open .mobile-nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.sidebar-open .mobile-nav-toggle-bar:nth-child(2) { opacity: 0; }
body.sidebar-open .mobile-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Scrim sits behind the drawer at z 30 (drawer is 31). */
.sidebar-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}
body.sidebar-open .sidebar-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* === Mobile breakpoints =============================================== */
/* ≤ 900px — sidebar becomes a slide-in drawer (NOT the old icon-rail). */
@media (max-width: 900px) {
  .mobile-nav-toggle { display: inline-flex; }

  /* Override the legacy icon-rail rules from Wave 2.4 so the sidebar can
     be a full drawer. We use !important sparingly because of how many
     prior @media rules target the same selectors. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: var(--drawer-w) !important;
    padding: var(--space-4) var(--space-3) !important;
    z-index: 31;
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }

  /* Restore full content on every nav row — undo the icon-rail collapse. */
  .sidebar-brand { justify-content: flex-start; padding: 6px 8px 16px; }
  .sidebar-brand > div:not(.logo) { display: block !important; }
  .nav-item {
    justify-content: flex-start !important;
    padding: 11px 12px !important;
    min-height: 44px;
  }
  .nav-item .label,
  .nav-item .nav-kbd,
  .nav-item .nav-caret { display: inline !important; }
  .nav-item .label { flex: 1; min-width: 0; }
  .nav-item .badge {
    position: static !important;
    margin-left: auto;
    padding: 1px 7px !important;
    font-size: 10px !important;
  }
  .nav-children { display: flex !important; }
  .nav-children[hidden] { display: none !important; }
  .sidebar-footer .who,
  .sidebar-footer .sign-out { display: flex !important; }
  .sidebar-footer .who { display: block !important; flex: 1; min-width: 0; }
  .sidebar-footer { justify-content: flex-start; gap: 10px; }

  /* Main column expands to fill the viewport since the sidebar is fixed. */
  .app { display: block; }
  .app > main {
    padding: var(--space-4) var(--space-4) var(--space-7);
    background: var(--bg);
  }

  /* Topbar reflow */
  .w2-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    flex-wrap: nowrap;
    gap: var(--space-3);
  }
  .w2-topbar .crumb {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .w2-topbar .crumb b { font-size: 15px; }
  .w2-topbar .search {
    flex: 0 0 auto;
    max-width: none;
    padding: 9px 12px;
  }
  .w2-topbar .health-pill { display: none; }
  .w2-page-head h1 { font-size: 22px; }
}

@media (max-width: 720px) {
  /* Search collapses to icon-only on phones; tapping still triggers Cmd+K. */
  .w2-topbar .search {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 8px;
  }
  .w2-topbar .search .search-text,
  .w2-topbar .search .kbd { display: none; }
  /* Time-clock widget shrinks to icon-only. */
  .time-clock-widget .time-clock-btn { padding: 7px 10px; font-size: 0; }
  .time-clock-widget .time-clock-btn::before {
    content: '⏱';
    font-size: 18px;
    margin-right: 0;
  }
  .time-clock-timer { display: none; }
  /* Chat toggle keeps icon only, badge stays. */
  .chat-toggle-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
}

/* === Touch targets ≥ 44px on touch viewports ========================== */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .nav-item,
  .nav-child,
  .cat-btn,
  .task-btn,
  .micro-btn,
  .btn,
  .qa-btn,
  .esign-tab,
  .esign-row-actions .micro-btn,
  .chat-channel-row,
  .modal-close,
  .data-table td .micro-btn {
    min-height: 44px;
  }
  .modal-close { min-width: 44px; }
  .nav-child { min-height: 40px; }
  .data-table th, .data-table td { padding: 12px 14px; }
}

/* ===========================================================================
   Wave 8.3 — Responsive tables + KPI reflow
   =========================================================================== */

/* KPI tile grids — single-col at ≤ 720, 2-col 720-1024, 3-col ≥ 1024.
   This applies to w2-kpi-grid (Wave 2 4-up), daily-take-kpis (3-up),
   commission KPIs (3-up), and bbi-grid (auto-fill 280px). */
@media (max-width: 720px) {
  .w2-kpi-grid,
  .daily-take-kpis,
  .bbi-grid,
  .w2-pipeline,
  .quick-actions,
  .def-grid,
  .pe-review-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }
  #daily-take-kpis[style] { grid-template-columns: 1fr !important; }
  .daily-take-tables { grid-template-columns: 1fr !important; gap: var(--space-3); }
  .pe-grid { grid-template-columns: 1fr !important; gap: var(--space-3); }
}
@media (min-width: 721px) and (max-width: 1023px) {
  .w2-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .daily-take-kpis,
  #daily-take-kpis[style] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .w2-pipeline { grid-template-columns: repeat(3, 1fr); }
  .quick-actions { grid-template-columns: repeat(3, 1fr); }
}

/* Bonds + Money + Defendants list-shell layout: at ≤ 900px the category
   sidebar drops above the table instead of beside it. Already partially
   done — bumping the breakpoint for consistency. */
@media (max-width: 900px) {
  .list-shell { grid-template-columns: 1fr; gap: var(--space-3); }
  .list-sidebar { position: static; }
  .dash-shell { grid-template-columns: 1fr; }
  .task-sidebar { position: static; }

  /* The dash-header (Pipeline, Bonds list) becomes column-stacked on phones. */
  .dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .dash-header .actions, .dash-header .cal-nav, .dash-header .view-toggle {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .w2-page-head {
    align-items: flex-start;
  }
  .w2-page-head .page-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* === Stacked-card data-table at ≤ 720px =============================== */
/* Pattern: hide <thead>, turn each <tr> into a card, each <td> becomes a
   labeled row using the <th>'s text via data-label OR JS-stamped before
   text. The renderer can stamp data-label on every <td> via the parent
   table's column index; existing tables that don't stamp the attribute
   still render — they just lose the labels and stack as plain text. */
@media (max-width: 720px) {
  .data-table,
  .paperwork-table {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .data-table thead,
  .paperwork-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .data-table tr,
  .paperwork-table tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-1);
  }
  .data-table tr:hover td,
  .data-table tr:hover { background: var(--surface); }
  .data-table td,
  .paperwork-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13.5px;
    text-align: right;
    color: var(--text);
  }
  .data-table tr td:last-child,
  .paperwork-table tr td:last-child { border-bottom: none; padding-bottom: 0; }
  .data-table tr td:first-child,
  .paperwork-table tr td:first-child { padding-top: 0; }
  /* Pull the column label from data-label OR ::before content. */
  .data-table td::before,
  .paperwork-table td::before {
    content: attr(data-label);
    color: var(--text-3);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: left;
    flex: 0 0 auto;
    margin-right: var(--space-3);
  }
  /* Tables that haven't stamped data-label (e.g. court / collateral) still
     stack readably — first cell is the headline, rest stack underneath. */
  .data-table td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .data-table td:not([data-label])::before { content: ''; margin: 0; }

  /* "First cell" treatment: pad bigger so it reads as the card headline. */
  .data-table tr td:first-child { font-size: 14.5px; font-weight: 600; color: var(--text-strong); padding: 0 0 var(--space-2); border-bottom: 1px solid var(--border-2); margin-bottom: var(--space-2); }
  .data-table tr td:first-child::before { display: none; }
}

/* === Filter row reflow ================================================ */
@media (max-width: 720px) {
  .filter-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .filter-row .filter-search { grid-column: 1; }
  .list-totals {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .pipeline-toolbar { flex-direction: column; align-items: flex-start; }
  #pipeline-search { max-width: 100%; width: 100%; }
}

/* ===========================================================================
   Wave 8.4 — Component polish
   Buttons + inputs + modals + skeletons + empty states.
   These rules sit AFTER every earlier definition so they win without
   !important. Where an earlier rule is more specific (e.g. .w2-page-head
   .btn), we match the same specificity here.
   =========================================================================== */

/* === Buttons ========================================================== */
/* The generic <button> rule in the file targets the green CTA color from
   Wave 1. We re-skin it now: dark surface, accent text, gold on hover. */
button {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 14px;
  font-weight: 500;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform 80ms var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
button:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--text-strong);
}
button:active { transform: scale(0.98); }
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft-2);
  border-color: var(--accent);
}
button[disabled],
.btn[disabled],
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
button.secondary {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-2);
}
button.secondary:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--accent);
}

/* w2 + scoped .btn variants */
.w2-page-head .btn,
.w2-section .btn,
.btn {
  background: var(--surface);
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  font-family: inherit;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform 80ms var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.w2-page-head .btn:hover,
.w2-section .btn:hover,
.btn:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--text-strong);
}
.w2-page-head .btn.primary,
.w2-section .btn.primary,
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #14110f;
}
.w2-page-head .btn.primary:hover,
.w2-section .btn.primary:hover,
.btn.primary:hover {
  background: var(--accent-3);
  border-color: var(--accent-3);
  color: #14110f;
}
.w2-page-head .btn.ghost,
.w2-section .btn.ghost,
.btn.ghost {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text-2);
}
.w2-page-head .btn.ghost:hover,
.w2-section .btn.ghost:hover,
.btn.ghost:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--accent);
}
.w2-page-head .btn.danger,
.w2-section .btn.danger,
.btn.danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.w2-page-head .btn.danger:hover,
.w2-section .btn.danger:hover,
.btn.danger:hover {
  background: var(--danger);
  color: #14110f;
}
.w2-page-head .btn.warn,
.w2-section .btn.warn,
.btn.warn {
  background: transparent;
  border-color: var(--warning);
  color: var(--warning);
}
.btn:active,
.w2-page-head .btn:active,
.w2-section .btn:active {
  transform: scale(0.98);
}

.micro-btn {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.micro-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* Loading state — wrap the button text in .btn-loading-text, the shimmer
   bar replaces visible content while .is-loading is set. */
.btn.is-loading,
button.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn.is-loading::after,
button.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-soft-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: w8-spin 0.7s linear infinite;
}
@keyframes w8-spin { to { transform: rotate(360deg); } }

/* === Inputs ========================================================== */
textarea,
input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=date],
input[type=tel],
input[type=search],
input[type=time],
input[type=datetime-local],
select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 7px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
textarea::placeholder,
input::placeholder { color: var(--text-3); opacity: 1; }
textarea:hover,
input:hover,
select:hover { border-color: var(--border-strong); }
textarea:focus,
input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
select { cursor: pointer; }
label {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* === Modals ========================================================== */
.modal-backdrop {
  background: rgba(10, 8, 6, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  color: var(--text);
  padding: var(--space-5) var(--space-5);
}
.modal h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 36;
  color: var(--text-strong);
  font-size: 22px;
}
.modal .modal-sub { color: var(--text-3); font-size: 13px; }
.modal .modal-close {
  color: var(--text-3);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.modal .modal-close:hover {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger);
}
.modal .modal-section h4 {
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 11.5px;
  text-transform: none;
}
.modal .kv .k { color: var(--text-3); font-style: italic; }

/* Modal: slide up from bottom on mobile (already partly done — refine). */
@media (max-width: 720px) {
  .modal-backdrop.show {
    align-items: flex-end;
    padding: 0;
  }
  .modal-backdrop.show .modal {
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
    animation: w8-sheet-up var(--t-slow) var(--ease);
  }
  @keyframes w8-sheet-up {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  /* Visual handle on top of the sheet so it reads as draggable. */
  .modal-backdrop.show .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    margin: 0 auto var(--space-3);
  }
}

/* === Toasts ========================================================== */
.w8-toast-stack {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 360px;
}
.w8-toast {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: w8-toast-in var(--t-slow) var(--ease);
}
.w8-toast.success { border-left-color: var(--success); }
.w8-toast.warn,
.w8-toast.warning { border-left-color: var(--warning); }
.w8-toast.danger,
.w8-toast.error { border-left-color: var(--danger); }
.w8-toast .w8-toast-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-strong);
  margin-bottom: 2px;
  font-size: 13.5px;
}
.w8-toast .w8-toast-body { color: var(--text-2); font-size: 12.5px; }
@keyframes w8-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 720px) {
  .w8-toast-stack {
    top: var(--space-3);
    bottom: auto;
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
  }
  @keyframes w8-toast-in {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* === Loading skeletons =============================================== */
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: w8-shimmer 1.4s linear infinite;
  border-radius: 4px;
  color: transparent;
  height: 14px;
  width: 100%;
}
.skeleton.line-sm { height: 10px; }
.skeleton.line-md { height: 18px; }
.skeleton.line-lg { height: 28px; border-radius: 6px; }
.skeleton.line-xl { height: 40px; border-radius: 8px; }
.skeleton.w-25 { width: 25%; }
.skeleton.w-40 { width: 40%; }
.skeleton.w-60 { width: 60%; }
.skeleton.w-80 { width: 80%; }
.skeleton-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--border);
}
.skeleton-row .skeleton { flex: 1; }
.skeleton-row:last-child { border-bottom: none; }
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@keyframes w8-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Empty states ==================================================== */
.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: 12px;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-3);
}
.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.empty-state-icon svg { width: 28px; height: 28px; }
.empty-state-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-strong);
  font-size: 18px;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 24;
}
.empty-state-body {
  font-family: var(--font-body);
  color: var(--text-3);
  font-size: 13px;
  max-width: 380px;
  line-height: 1.55;
}
.empty-state-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* Reskin the existing list-empty / action-row-empty / activity-empty
   so they pick up the Wave 8 treatment without any DOM changes. */
.list-empty,
.action-row-empty,
.activity-empty {
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: 12px;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 18;
  letter-spacing: 0.01em;
}
.list-empty strong {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-1);
}

/* === Section + KPI surface refinements =============================== */
.w2-section {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
  padding: var(--space-4) var(--space-5) var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-1);
}
.w2-section h2 {
  color: var(--text-3);
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
}
.w2-section h2 .count {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
}
.w2-section h2 .count.danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

.w2-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.w2-kpi:hover {
  border-color: var(--accent);
}
.w2-kpi .label {
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.w2-kpi .value {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 64;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  line-height: 1.05;
  margin-top: var(--space-1);
}
.w2-kpi .delta.up { color: var(--success); }
.w2-kpi .delta.down { color: var(--danger); }
.w2-kpi .delta.neutral { color: var(--text-3); }

.daily-take-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
}
.daily-take-kpi-label {
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}
.daily-take-kpi-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 64;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  line-height: 1.05;
  margin-top: var(--space-1);
}

.list-totals {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4) var(--space-5);
}
.list-totals .total-item .label {
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.list-totals .total-item .value {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 36;
  font-size: 22px;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.list-totals .total-item.primary .value { color: var(--accent); }

/* === Data table refinements ========================================== */
.data-table {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
  font-size: 13px;
}
.data-table th {
  color: var(--text-3);
  background: transparent;
  letter-spacing: 0.12em;
  font-size: 10.5px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
}
.data-table td {
  border-bottom-color: var(--border);
  padding: 12px 14px;
  color: var(--text);
}
.data-table tr:hover td { background: var(--surface-2); }

/* === Action rows + cards ============================================ */
.action-row {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease), background var(--t-fast) var(--ease);
}
.action-row:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateX(2px);
}
.action-row .who { color: var(--text-strong); }
.action-row .what { color: var(--text-3); }
.action-row .meta .countdown { color: var(--danger); }
.action-row .meta .label { color: var(--text-3); }

.w2-stage {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
}
.w2-stage:hover { background: var(--surface-2); border-color: var(--accent); }
.w2-stage .name { color: var(--text-3); }
.w2-stage .count {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 36;
  font-size: 24px;
  color: var(--text-strong);
}
.w2-stage .val { color: var(--text-3); }

/* === Pipeline cards ================================================== */
.pipeline .col {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 10px;
}
.card {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
}
.card .name { color: var(--text-strong); }
.card .meta { color: var(--text-3); }
.card.clickable:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(212, 163, 71, 0.15);
}
.card .next-action {
  background: var(--surface-2);
  border-left-color: var(--accent);
  color: var(--text-2);
}

/* === Calendar refinements ============================================ */
.cal-grid {
  background: var(--surface);
  border-color: var(--border);
}
.cal-grid .cal-dow {
  background: var(--bg-2);
  color: var(--text-3);
  border-bottom-color: var(--border);
}
.cal-grid .cal-day {
  background: var(--surface);
  border-color: var(--border);
}
.cal-grid .cal-day.cal-other-month {
  background: var(--bg-2);
  color: var(--text-3);
}
.cal-grid .cal-day.cal-today {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-grid .cal-day:hover { background: var(--surface-2); }
.cal-grid .cal-day .cal-date-num { color: var(--text-strong); }
.cal-grid .cal-day .cal-count { color: var(--text-3); }

/* === Output blocks + code =========================================== */
.output {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
  font-family: var(--font-mono);
}
code {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
  font-family: var(--font-mono);
}
.audit {
  background: var(--surface);
  border-color: var(--border);
}
.audit li {
  font-family: var(--font-mono);
  color: var(--text-3);
  border-bottom-color: var(--border);
}
.audit li b { color: var(--text-strong); }

/* === Forms — pw / paperwork polish ================================== */
.paperwork-table th {
  background: transparent;
  color: var(--text-3);
}
.pw-field input,
.pw-field select,
.pw-field textarea {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}
.pw-badge {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-2);
}

/* === Chat refinements ================================================ */
.chat-panel {
  background: var(--surface);
  border-left-color: var(--border-2);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.5);
}
.chat-panel-head {
  background: var(--bg);
  color: var(--text-strong);
  border-bottom-color: var(--border);
}
.chat-panel-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 24;
  letter-spacing: 0;
  font-size: 16px;
}
.chat-sidebar { background: var(--bg-2); border-right-color: var(--border); }
.chat-section-title { color: var(--text-3); }
.chat-channel-row { color: var(--text-2); }
.chat-channel-row:hover { background: var(--bg-3); color: var(--text-strong); }
.chat-channel-row.active {
  background: var(--accent-soft-2);
  color: var(--accent);
}
.chat-channel-row.active .chat-channel-unread {
  background: var(--accent);
  color: #14110f;
}
.chat-thread-head { border-bottom-color: var(--border); }
.chat-thread-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 24;
  color: var(--text-strong);
}
.chat-thread-topic { color: var(--text-3); }
.chat-msg-author { color: var(--text-strong); }
.chat-msg-text { color: var(--text); }
.chat-msg-time { color: var(--text-3); }
.chat-compose {
  background: var(--bg-2);
  border-top-color: var(--border);
}
.chat-compose-input {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}
.chat-compose-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-compose-send {
  background: var(--accent);
  color: #14110f;
  font-weight: 600;
}
.chat-compose-send:hover { background: var(--accent-3); }

/* === Pipedrive-style sidebar in list-shell (Bonds / Money / Settings) === */
.list-sidebar {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
  padding: var(--space-3);
}
.list-sidebar h3 {
  color: var(--text-3);
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
}
.list-sidebar .cat-btn {
  color: var(--text-2);
  border-radius: 6px;
  padding: 8px 12px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.list-sidebar .cat-btn:hover { background: var(--bg-3); color: var(--text-strong); }
.list-sidebar .cat-btn.active {
  background: var(--accent-soft-2);
  color: var(--accent);
  font-weight: 600;
}
.list-sidebar .cat-btn .count {
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.list-sidebar .cat-btn.active .count {
  background: var(--accent);
  color: #14110f;
  border-color: transparent;
}

/* === Sub-tabs + esign tabs =========================================== */
.w2-subtabs { border-bottom-color: var(--border); }
.w2-subtab { color: var(--text-3); }
.w2-subtab:hover { color: var(--text); }
.w2-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }

.esign-tabs { border-bottom-color: var(--border); }
.esign-tab { color: var(--text-3); }
.esign-tab:hover { color: var(--text); background: var(--surface-2); }
.esign-tab.active {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border);
  border-bottom-color: var(--surface);
}
.esign-tab .count {
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.esign-tab.active .count {
  background: var(--accent-soft-2);
  color: var(--accent);
  border-color: transparent;
}

/* === Bond detail header — refine the dark gradient =================== */
.bond-header {
  background: linear-gradient(135deg, #1a1612 0%, #0d0b09 100%);
  border: 1px solid var(--border-2);
  color: var(--text-strong);
}
.bond-header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 56;
  letter-spacing: -0.015em;
}
.bond-header.fta { background: linear-gradient(135deg, #2a1612 0%, #1a0a08 100%); border-color: rgba(212, 96, 76, 0.4); }
.bond-amount .amt {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 64;
  letter-spacing: -0.015em;
}

/* === Defendant header / mug + defendant grid ========================= */
.def-header h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 72;
}
.def-stat {
  background: var(--surface);
  border-color: var(--border);
}
.def-stat .v {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 36;
  color: var(--text-strong);
}
.tl { border-left-color: var(--border-2); }
.tl-item::before { background: var(--accent); border-color: var(--surface); box-shadow: 0 0 0 1px var(--border-2); }

/* === BBI cards ======================================================= */
.bbi-card {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
}
.bbi-card.bbi-running { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bbi-card.bbi-success { border-color: var(--success); }
.bbi-card.bbi-error { border-color: var(--danger); }
.bbi-card-title { color: var(--text-strong); font-family: var(--font-display); font-weight: 500; }
.bbi-card-status { background: var(--bg-2); color: var(--text-3); }
.bbi-card-status.bbi-status-running { background: var(--accent-soft); color: var(--accent); }
.bbi-card-status.bbi-status-success { background: var(--success-soft); color: var(--success); }
.bbi-card-status.bbi-status-error { background: var(--danger-soft); color: var(--danger); }
.bbi-card-meta { color: var(--text-3); }
.bbi-card-meta b { color: var(--text); }
.bbi-stream { background: var(--surface); border-color: var(--border); border-radius: 12px; }
.bbi-stream-title { color: var(--text-strong); }
.bbi-progressbar { background: var(--bg-2); }
.bbi-progressbar-fill { background: var(--accent); }
.bbi-counter { color: var(--text-3); }
.bbi-counter b { color: var(--text-strong); font-family: var(--font-display); font-weight: 500; }
.bbi-log { background: var(--bg); border-color: var(--border); color: var(--text-3); }
.bbi-log-line.bbi-log-error { color: var(--danger); }
.bbi-log-line.bbi-log-complete { color: var(--success); }

/* === Photo Entry refinements ========================================= */
.pe-upload {
  background: var(--surface);
  border-color: var(--border-2);
  border-radius: 14px;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.pe-upload:hover { border-color: var(--accent); background: var(--surface-2); }
.pe-upload.pe-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.pe-upload-title { color: var(--text-strong); font-family: var(--font-display); font-weight: 500; font-variation-settings: 'opsz' 24; }
.pe-upload-hint { color: var(--text-3); }
.pe-recent {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
}
.pe-recent-row {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
}
.pe-recent-row:hover { background: var(--surface-2); border-color: var(--accent); }
.pe-recent-row .pe-status-pill { background: var(--bg-3); color: var(--text-3); }
.pe-recent-row .pe-status-extracted { background: var(--info-soft); color: var(--info); }
.pe-recent-row .pe-status-draft_created { background: var(--success-soft); color: var(--success); }
.pe-recent-row .pe-status-failed { background: var(--danger-soft); color: var(--danger); }
.pe-review {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 14px;
}
.pe-review-field input,
.pe-review-field textarea {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}
.pe-review-field.pe-low-confidence input { border-color: var(--warning); }

/* === Daily Take filters bar ========================================== */
.daily-take-filters {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
}
.daily-take-filters input[type="date"],
.daily-take-filters select {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}

/* === Esign + sign page ============================================== */
.esign-doc-body { background: var(--bg-2); border-color: var(--border); color: var(--text); }
.esign-capture-card { background: var(--bg-2); border-color: var(--border); }
.esign-capture-text { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.esign-block-row { background: var(--bg-2); border-color: var(--border); }
.esign-bond-chosen { background: var(--accent-soft); color: var(--accent); }
.esign-bond-chosen .esign-bond-clear { border-color: var(--accent); color: var(--accent); }
.esign-bond-results { background: var(--surface); border-color: var(--border-2); }
.esign-bond-result { color: var(--text); border-bottom-color: var(--border); }
.esign-bond-result:hover { background: var(--bg-3); }
.esign-bond-r-name { color: var(--text-strong); }
.esign-bond-r-meta { color: var(--text-3); }

/* === Cmd+K modal ===================================================== */
#cmdk-backdrop {
  background: rgba(10, 8, 6, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#cmdk-panel {
  background: var(--surface);
  border-color: var(--border-2);
  box-shadow: var(--shadow-3);
}
#cmdk-input {
  color: var(--text);
  border-bottom-color: var(--border);
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 24;
}
#cmdk-input::placeholder { color: var(--text-3); }
#cmdk-filters { border-bottom-color: var(--border); }
#cmdk-filters .cmdk-chip {
  border-color: var(--border-2);
  color: var(--text-2);
}
#cmdk-filters .cmdk-chip.active {
  background: var(--accent);
  color: #14110f;
  border-color: var(--accent);
}
#cmdk-results .cmdk-empty,
#cmdk-results .cmdk-header { color: var(--text-3); }
#cmdk-results .cmdk-result { color: var(--text); }
#cmdk-results .cmdk-result.selected,
#cmdk-results .cmdk-result:hover { background: var(--bg-3); }
#cmdk-results .cmdk-title { color: var(--text-strong); }
#cmdk-results .cmdk-sub { color: var(--text-3); }
#cmdk-results .cmdk-type { color: var(--text-3); border-color: var(--border-2); }
#cmdk-footer { border-top-color: var(--border); color: var(--text-3); }

/* === Time clock widget ============================================== */
.time-clock-btn.in { background: var(--success); color: #0d0b09; border: 1px solid var(--success); }
.time-clock-btn.in:hover { background: #6dc486; border-color: #6dc486; }
.time-clock-btn.out { background: var(--danger); color: #14110f; border: 1px solid var(--danger); }
.time-clock-btn.out:hover { background: #e07a68; }
.time-clock-timer {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
  font-family: var(--font-mono);
}

/* === Chat toggle (topbar) =========================================== */
.chat-toggle-btn {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.chat-toggle-btn:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--accent);
}
.chat-toggle-badge { background: var(--danger); border-color: var(--surface); color: #14110f; font-weight: 700; }

/* === Tags + chips polish ============================================ */
.tags .pill.ok { background: var(--success-soft); color: var(--success); }
.tags .pill.warn { background: var(--warning-soft); color: var(--warning); }
.tags .pill.danger { background: var(--danger-soft); color: var(--danger); }
.tags .pill.info { background: var(--info-soft); color: var(--info); }
.tags .pill.gray { background: var(--bg-2); color: var(--text-2); }
.badge-pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: var(--text-strong); }
.qa-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--text-strong);
  border-radius: 10px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.qa-btn:hover { background: rgba(212, 163, 71, 0.12); border-color: var(--accent); transform: translateY(-1px); }
.qa-btn.primary { background: var(--accent); color: #14110f; border-color: var(--accent); }
.qa-btn.primary:hover { background: var(--accent-3); }

/* === Stage chips (lead/intake/etc.) — desaturate for dark =========== */
.stage-chip, .label-chip {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.todo-list li { border-bottom-color: var(--border); }
.todo-list li.done span { color: var(--text-3); }
.todo-row input { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.todo-row button { background: var(--accent); color: #14110f; }
.todo-row button:hover { background: var(--accent-3); }
.dash-header { background: var(--surface); border-color: var(--border); border-radius: 12px; padding: var(--space-4) var(--space-5); }
.dash-header .title-block .sub {
  color: var(--text-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-variation-settings: 'opsz' 18;
}
.task-sidebar { background: var(--surface); border-color: var(--border); border-radius: 12px; }
.task-sidebar h3 { color: var(--accent); border-bottom-color: var(--border); }
.task-btn { background: var(--bg-2); border-color: var(--border); color: var(--text); }
.task-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.todo-panel { background: var(--surface); border-color: var(--border); border-radius: 12px; }
.todo-panel h3 { color: var(--accent); border-bottom-color: var(--border); }
.recents-panel { background: var(--surface); border-color: var(--border); border-radius: 12px; }
.recents-panel h3 { color: var(--text-3); letter-spacing: 0.14em; border-bottom-color: var(--border); }
.recents-list li { border-bottom-color: var(--border); }
.recents-list li .when { color: var(--text-3); font-family: var(--font-mono); }
.kpi-tile { border-radius: 10px; padding: var(--space-3) var(--space-4); }
.kpi-tile .kpi-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 56;
  letter-spacing: -0.015em;
}
.kpi-tile .kpi-label { letter-spacing: 0.12em; }

/* Alert banner inside bond-header */
.alert-banner {
  background: var(--danger-soft);
  border-color: rgba(212, 96, 76, 0.35);
}
.alert-banner .alert-cd .num { color: var(--danger); font-family: var(--font-display); font-weight: 500; }
.alert-banner .alert-title { color: var(--text-strong); }

/* h1 unify */
h1 {
  font-size: 28px;
  letter-spacing: -0.015em;
}
.w2-page-head h1 { font-size: 30px; }
@media (max-width: 720px) {
  .w2-page-head h1 { font-size: 22px; }
  h1 { font-size: 22px; }
}

/* ===========================================================================
   Wave 8.5 — Page-specific refinements
   =========================================================================== */

/* === Bond detail label chip polish ==================================== */
.bond-label-chip {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 4px 6px 4px 12px;
  border-radius: 14px;
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  font-family: var(--font-body);
}
.bond-label-chip:hover { transform: translateY(-1px); }
.bond-labels-filter .bond-label-chip {
  padding: 4px 12px;
  letter-spacing: 0.06em;
}
.bond-labels-filter .bond-label-chip.active {
  outline: 1.5px solid currentColor;
  outline-offset: -1.5px;
}
.bond-labels-empty {
  color: var(--text-3);
  font-family: var(--font-display);
  font-style: italic;
}
.bond-labels-picker {
  background: var(--surface);
  border-color: var(--border-2);
  box-shadow: var(--shadow-2);
  border-radius: 10px;
}
.bond-label-pick-item { color: var(--text); border-radius: 6px; }
.bond-label-pick-item:hover { background: var(--bg-3); }
.bond-labels-filter-label {
  color: var(--text-3);
  letter-spacing: 0.14em;
  font-family: var(--font-body);
}
.bond-labels-filter-clear {
  color: var(--text-3);
  font-style: italic;
  font-family: var(--font-display);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
}
.bond-labels-filter-clear:hover { color: var(--danger); border-bottom-color: var(--danger); }

/* === Photo Entry — refined idle state ================================ */
.pe-upload {
  padding: var(--space-6) var(--space-4);
  position: relative;
  overflow: hidden;
}
.pe-upload::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at top, var(--accent-soft) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}
.pe-upload:hover::before, .pe-upload.pe-dragover::before { opacity: 1; }
.pe-upload-icon {
  margin: 0 auto var(--space-3);
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 32px;
  position: relative;
  z-index: 1;
}
.pe-upload-title {
  font-size: 20px;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 28;
  position: relative;
  z-index: 1;
}
.pe-upload-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

/* Review form: 2-col grid on desktop, 1-col on mobile. */
.pe-review-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3) var(--space-4);
}
.pe-review-field label {
  color: var(--text-3);
  letter-spacing: 0.1em;
  font-weight: 600;
}
.pe-review-field .pe-confidence {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  margin-top: 4px;
  position: relative;
}
/* Crisp confidence bar — refined visual. */
.pe-review-field .pe-confidence::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(to right, var(--accent) var(--w8-conf, 100%), var(--bg-3) 0);
  margin-top: 2px;
  border-radius: 1px;
}
.pe-review-field.pe-low-confidence .pe-confidence { color: var(--warning); }
.pe-review-field.pe-low-confidence .pe-confidence::after {
  background: linear-gradient(to right, var(--warning) var(--w8-conf, 100%), var(--bg-3) 0);
}

/* === Office Chat — refined messages =================================== */
.chat-msg-list { padding: var(--space-3) var(--space-4); gap: 2px; }
.chat-msg-avatar {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.chat-msg-text { font-size: 13.5px; line-height: 1.55; }
.chat-msg-author { font-weight: 600; font-family: var(--font-body); }
.chat-msg-tools {
  background: var(--surface);
  border-color: var(--border-2);
  box-shadow: var(--shadow-1);
}
.chat-msg-tool { color: var(--text-3); }
.chat-msg-tool:hover { background: var(--bg-3); color: var(--text); }
.chat-msg-tool.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* Channel headers in panel — refined Fraunces */
.chat-section-title {
  font-family: var(--font-body);
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 10px;
}

/* === Compose box: generous height + spacing =========================== */
.chat-compose-input {
  padding: 12px 14px;
  font-size: 13.5px;
  min-height: 44px;
  line-height: 1.5;
}
.chat-compose-send {
  padding: 12px 18px;
  border-radius: 8px;
  letter-spacing: 0.01em;
}

/* === Dashboard hero stat row — typographic anchor ==================== */
/* The first .w2-section on the dashboard (Money rhythm row) gets a richer
   treatment so it reads as the visual anchor: Fraunces section header
   in italic with a horizontal rule. */
#dash-row-money {
  background: var(--surface);
  border-radius: 16px;
  padding: var(--space-4) var(--space-5) var(--space-5);
}
#dash-row-money h2 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 28;
  letter-spacing: 0;
  font-size: 17px;
  font-weight: 500;
  text-transform: none;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
#dash-row-money h2::before {
  font-family: var(--font-display);
  color: var(--accent);
  margin-right: var(--space-2);
  vertical-align: 0;
  font-style: italic;
  font-size: 13px;
}
#dash-row-money h2 .hint { color: var(--text-3); font-style: normal; font-size: 12px; }

/* Dashboard greeting larger + softer */
#dash-greeting {
  font-size: 36px;
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
  font-weight: 400;
  letter-spacing: -0.02em;
}
#dash-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--text-3);
  font-variation-settings: 'opsz' 18;
}
@media (max-width: 720px) {
  #dash-greeting { font-size: 26px; }
  #dash-subtitle { font-size: 13px; }
}

/* === Sign-out + sidebar Account refinement =========================== */
.sidebar-brand .name { font-size: 16px; }

/* === Settings + Inventory page typography ============================= */
#tab-settings h1, #tab-bonds h1, #tab-defendants h1 {
  font-size: 30px;
}

/* === Daily Take + Commission tables — give numerals room ============= */
.daily-take-table td[style*="text-align:right"],
#commission-table td[style*="text-align:right"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-family: var(--font-body);
}

/* === Bond header + bond detail tab strip ============================= */
.w2-subtab {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 12px 16px;
}
.w2-subtab.active {
  font-weight: 600;
}

/* === Calendar header strong color ==================================== */
#cal-month-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--text-strong);
}
.cal-grid .cal-day .cal-date-num { font-family: var(--font-body); font-weight: 600; }

/* === Login page (so the auth flow matches the theme) ================ */
body.sign-page-body { background: var(--bg); }
.sign-page { color: var(--text); }
.sign-card { background: var(--surface); border-color: var(--border); }
.sign-brand-name { color: var(--text-3); letter-spacing: 0.14em; }
.sign-title { color: var(--text-strong); font-family: var(--font-display); }
.sign-meta { color: var(--text-3); }
.sign-body-text { background: var(--bg-2); border-color: var(--border); color: var(--text); }
.sign-section-title { color: var(--text-3); letter-spacing: 0.12em; }
.sign-block-card { background: var(--bg-2); border-color: var(--border); }
.sign-text-input { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.sign-actions .btn.primary { background: var(--accent); color: #14110f; }
.sign-actions .btn.primary:hover:not(:disabled) { background: var(--accent-3); }
.sign-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.sign-success-mark { background: var(--success); color: #0a0907; }
.sign-success h1 { color: var(--success); font-family: var(--font-display); }
.sign-success p { color: var(--text-3); }
.sign-success .btn.primary { background: var(--accent); color: #14110f; }

/* === Settings sidebar refinement ===================================== */
#settings-content { background: transparent; }

/* === Reduced-motion — respect the user's pref ======================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Wave 10.A.UI — Floating Copilot widget ===========================
   Slide-in right-side panel, similar in geometry to .chat-panel but
   with a one-column main thread (no channel grid) and a sticky compose
   box. Streamed SSE renders chips for tool_call / tool_result inline.
   At ≤ 720px the panel goes full-viewport and the back arrow shows. */

/* Top-bar toggle */
.copilot-toggle {
  position: relative;
  background: rgba(212, 163, 71, 0.14);
  color: var(--topbar-text);
  border: 1px solid rgba(212, 163, 71, 0.45);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.copilot-toggle:hover {
  background: rgba(212, 163, 71, 0.24);
  border-color: var(--accent);
}
.copilot-toggle .copilot-spark {
  color: var(--accent-3);
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(240, 201, 122, 0.45));
}
.copilot-toggle-label { letter-spacing: 0.02em; }

/* Panel container */
.copilot-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
  z-index: 85;
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform var(--t-med, 220ms) var(--ease);
}
.copilot-panel[hidden] { display: none; }
.copilot-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-2);
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
}
.copilot-panel-backbtn {
  background: transparent; color: var(--text-2);
  border: none; padding: 4px 8px;
  font-size: 18px; line-height: 1; cursor: pointer;
  border-radius: 4px;
  display: none; /* shown only at mobile breakpoint */
}
.copilot-panel-backbtn:hover { background: var(--bg-3); color: var(--text-strong); }
.copilot-panel-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em;
}
.copilot-panel-title .copilot-spark {
  color: var(--accent);
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(240, 201, 122, 0.4));
}
.copilot-panel-actions { margin-left: auto; display: flex; gap: 6px; }
.copilot-panel-newbtn {
  background: var(--accent-soft);
  color: var(--accent-3);
  border: 1px solid rgba(212, 163, 71, 0.4);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.copilot-panel-newbtn:hover { background: var(--accent-soft-2); border-color: var(--accent); }
.copilot-panel-closebtn {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  width: 28px; height: 28px; padding: 0;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.copilot-panel-closebtn:hover { background: var(--bg-3); color: var(--text-strong); }

.copilot-panel-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  flex: 1;
  min-height: 0;
}

/* Sidebar with conversation history */
.copilot-sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 10px 8px;
}
.copilot-section-title {
  font-size: 10px; color: var(--muted, var(--text-3));
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  padding: 4px 6px 8px;
}
.copilot-history {
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; min-height: 0;
}
.copilot-history-row {
  display: flex; flex-direction: column;
  gap: 2px;
  background: transparent; color: var(--text);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.copilot-history-row:hover {
  background: var(--surface);
  border-color: var(--border);
}
.copilot-history-row.active {
  background: var(--accent-soft);
  border-color: rgba(212, 163, 71, 0.5);
}
.copilot-history-row-title {
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.copilot-history-row-meta {
  font-size: 10.5px;
  color: var(--text-3);
}

/* Main column — thread + compose */
.copilot-main {
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.copilot-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Empty-state seed cards */
.copilot-empty {
  display: flex; flex-direction: column; gap: 18px;
  height: 100%;
  align-items: stretch;
  justify-content: center;
}
.copilot-empty-hello { text-align: center; padding: 0 8px; }
.copilot-spark-big {
  font-size: 36px;
  color: var(--accent);
  filter: drop-shadow(0 0 16px rgba(240, 201, 122, 0.6));
  margin-bottom: 6px;
}
.copilot-empty-hello h3 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  margin: 4px 0 6px;
  color: var(--text-strong);
}
.copilot-empty-hello p { margin: 0; }
.copilot-seeds {
  display: grid; gap: 8px;
}
.copilot-seed {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px; text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.copilot-seed:hover {
  background: var(--surface-2);
  border-color: rgba(212, 163, 71, 0.45);
}
.copilot-seed:active { transform: translateY(1px); }
.copilot-seed-icon { font-size: 18px; line-height: 1.1; flex: none; }

/* Bubbles */
.copilot-msg { display: flex; flex-direction: column; gap: 6px; }
.copilot-msg-user .copilot-bubble {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid rgba(212, 163, 71, 0.4);
  color: var(--text-strong);
  max-width: 85%;
}
.copilot-msg-assistant .copilot-bubble {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  max-width: 100%;
}
.copilot-bubble {
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
}
.copilot-bubble p { margin: 0 0 8px; }
.copilot-bubble p:last-child { margin-bottom: 0; }
.copilot-bubble ul, .copilot-bubble ol { margin: 4px 0 8px; padding-left: 22px; }
.copilot-bubble li { margin: 2px 0; }
.copilot-bubble code {
  background: var(--bg);
  padding: 1px 5px; border-radius: 3px;
  font-size: 12px;
  border: 1px solid var(--border);
}
.copilot-bubble pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
}
.copilot-bubble strong { color: var(--text-strong); }

/* Inline thinking + tool blocks (live inside an assistant bubble) */
.copilot-thinking {
  margin-top: 4px;
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
}
.copilot-thinking summary {
  cursor: pointer; font-style: normal;
  color: var(--text-2); font-weight: 600;
  list-style: none;
}
.copilot-thinking summary::before {
  content: "▸ ";
  color: var(--muted, var(--text-3));
}
.copilot-thinking[open] summary::before { content: "▾ "; }
.copilot-thinking-body { margin-top: 4px; white-space: pre-wrap; }

.copilot-tool {
  margin-top: 8px;
  border-left: 2px solid rgba(212, 163, 71, 0.5);
  padding-left: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.copilot-tool-call {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft);
  border: 1px solid rgba(212, 163, 71, 0.45);
  color: var(--accent-3);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  width: fit-content;
}
.copilot-tool-call-name { font-family: var(--font-mono, ui-monospace, Menlo, monospace); }
.copilot-tool-call-input {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  color: var(--text-3);
  font-weight: 400;
  font-size: 11px;
  word-break: break-all;
}
.copilot-tool-result {
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
.copilot-tool-result-count {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.copilot-tool-cards {
  display: flex; flex-direction: column; gap: 4px;
}
.copilot-tool-card {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.copilot-tool-card:hover {
  background: var(--surface-2);
  border-color: rgba(212, 163, 71, 0.45);
}
.copilot-tool-card-type {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-3);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 3px;
  flex: none;
}
.copilot-tool-card-label {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-strong);
}
.copilot-tool-card-meta {
  font-size: 11px;
  color: var(--text-3);
  flex: none;
}

/* Citation chip — inline in assistant prose */
.copilot-cite {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--accent-soft);
  border: 1px solid rgba(212, 163, 71, 0.4);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 11px;
  color: var(--accent-3);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.copilot-cite:hover { background: var(--accent-soft-2); }
.copilot-cite-type {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* Spinner / typing dot for in-flight assistant turn */
.copilot-msg-loading .copilot-bubble {
  color: var(--text-3);
}
.copilot-typing {
  display: inline-flex; gap: 3px; align-items: center;
}
.copilot-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  animation: copilot-typing-pulse 1.2s infinite ease-in-out;
}
.copilot-typing span:nth-child(2) { animation-delay: 0.15s; }
.copilot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes copilot-typing-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: scale(0.9); }
  30% { opacity: 1; transform: scale(1.05); }
}

/* Cost / round footer */
.copilot-msg-footer {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* Error bubble */
.copilot-msg-error .copilot-bubble {
  background: var(--danger-soft, rgba(239, 68, 68, 0.12));
  border-color: var(--danger);
  color: var(--danger);
}
.copilot-retry-btn {
  margin-top: 6px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.copilot-retry-btn:hover { filter: brightness(1.08); }

/* Compose box */
.copilot-compose {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.copilot-compose textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 48px;
  max-height: 200px;
}
.copilot-compose textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.copilot-compose-actions {
  display: flex; align-items: center; gap: 10px;
}
.copilot-compose-hint {
  font-size: 11px;
  color: var(--text-3);
  flex: 1;
}
.copilot-compose .btn.primary { padding: 6px 14px; font-size: 12.5px; }
.copilot-compose .btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Mobile breakpoint ============================================ */
@media (max-width: 720px) {
  .copilot-toggle-label { display: none; }
  .copilot-toggle { padding: 6px 8px; }

  .copilot-panel {
    width: 100vw;
    border-left: none;
  }
  .copilot-panel-body {
    grid-template-columns: 1fr;
  }
  /* Sidebar swaps in as a stacked view above the thread; shown only
     when the panel is in 'history-mode'. Default mobile state is thread. */
  .copilot-panel:not(.history-mode) .copilot-sidebar { display: none; }
  .copilot-panel.history-mode .copilot-main { display: none; }
  .copilot-panel-backbtn { display: inline-flex; }
}

/* ===== Notes search section in Cmd+K (Wave 7.E.UI) ================= */
.cmdk-section[data-section="notes"] .cmdk-result-label mark {
  background: var(--accent-soft-2);
  color: var(--accent-3);
  padding: 0 2px; border-radius: 2px;
  font-weight: 600;
}
.cmdk-result.cmdk-result-note .cmdk-result-icon {
  background: var(--accent-soft);
  color: var(--accent-3);
}
.cmdk-result.cmdk-result-note .cmdk-result-sub {
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ============================================================================
   Wave 9 — Premium Enterprise Command Center
   Token refresh, sidebar grouping, 3-zone topbar, Executive Snapshot
   dashboard, CRM pipeline cards, and component canon. Everything below
   this block is additive and overrides anything earlier with the same
   selector via cascade order. No deletions to Wave 8.
   ============================================================================ */

:root {
  /* Wave 9 base palette — refined enterprise dark, cooler than Wave 8. */
  --bg:           #0e0f12;
  --bg-subtle:    #121419;
  --bg-2:         #121419;
  --bg-3:         #1c1f25;
  --surface:      #16181d;
  --surface-1:    #16181d;
  --surface-2:    #1c1f25;
  --surface-3:    #22262d;
  --border:       #2a2d35;
  --border-2:     #2a2d35;
  --border-strong:#3a3f48;

  --text:         #e7e9ee;
  --text-strong:  #f3f5fa;
  --text-2:       #9aa0aa;
  --text-3:       #5e6470;

  /* Refined gold — primary action only. */
  --accent:       #d4a347;
  --accent-2:     #b88830;
  --accent-3:     #e6b85a;
  --accent-soft:  rgba(212, 163, 71, 0.12);
  --accent-soft-2:rgba(212, 163, 71, 0.20);

  --success:      #3fb56b;
  --success-soft: rgba(63, 181, 107, 0.12);
  --warning:      #d68e2a;
  --warning-soft: rgba(214, 142, 42, 0.12);
  --danger:       #dc4848;
  --danger-soft:  rgba(220, 72, 72, 0.12);
  --info:         #5b8def;
  --info-soft:    rgba(91, 141, 239, 0.12);

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

  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.03) inset;

  --font-display: 'Geist', 'Inter Tight', system-ui, sans-serif;
  --font-serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] { color-scheme: dark; }

/* Re-tilt Wave-2 alias tokens onto the Wave 9 base. */
:root {
  --w2-bg: var(--bg);
  --w2-panel: var(--surface-1);
  --w2-panel-2: var(--bg-subtle);
  --w2-nav: #0a0b0e;
  --w2-nav-hover: var(--surface-2);
  --w2-border: var(--border);
  --w2-text: var(--text);
  --w2-text-2: var(--text-2);
  --w2-text-3: var(--text-3);
  --w2-text-on-dark: var(--text);
  --w2-text-on-dark-2: var(--text-3);
  --w2-brand: var(--accent);
  --w2-brand-2: var(--accent-2);
  --w2-ok: var(--success);
  --w2-warn: var(--warning);
  --w2-danger: var(--danger);
  --w2-info: var(--info);
}

/* Body grain — kill the warm overlay; subtler, cooler. */
body::before { opacity: 0; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* Pull back the Wave-8 signature numbered marker so the dashboard reads
   like an enterprise command center, not a magazine. */
.w2-section h2::before { content: none; }
.w2-page-head::after,
.dash-header::after { background: none; }

/* Display family — Geist for everything titled. Fraunces is reserved for
   three brand surfaces (added selectively below). */
h1, h2, h3, .w2-page-head h1, .dash-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: normal;
  color: var(--text-strong);
}

/* === Sidebar — Wave 9 ================================================ */
.sidebar {
  width: 232px;
  background: var(--w2-nav);
  border-right: 1px solid var(--border);
  padding: 14px 10px 12px;
  gap: 1px;
  background-image: none;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.sidebar-brand .brand-mark {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(212, 163, 71, 0.30);
}
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar-brand .brand-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.sidebar-brand .brand-sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-transform: none;
}
/* Drop the old gold-square logo styling from Wave 8 (no .logo in new markup). */

.nav-section {
  padding: 14px 10px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.85;
}
.nav-section:first-of-type { padding-top: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast, 120ms) ease, color var(--t-fast, 120ms) ease;
  position: relative;
}
.nav-item .label { flex: 1; min-width: 0; line-height: 1.2; }
.nav-item i[data-lucide],
.nav-item svg.lucide {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-3);
  stroke-width: 1.5;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-strong); }
.nav-item:hover i[data-lucide],
.nav-item:hover svg.lucide { color: var(--text-2); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-item.active i[data-lucide],
.nav-item.active svg.lucide { color: var(--accent); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.nav-item .badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.nav-item .badge.ok { background: var(--success); }
.nav-item .nav-kbd {
  margin-left: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-family: var(--font-mono);
}

/* Sidebar footer (account + sign-out) — refined dimensions. */
.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-footer .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #14110f;
  font-weight: 700;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.sidebar-footer .who-name { color: var(--text-strong); font-size: 12.5px; font-weight: 600; }
.sidebar-footer .who-role {
  font-family: var(--font-body);
  font-style: normal;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0;
}
.sidebar-footer .sign-out {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  width: 30px; height: 30px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.sidebar-footer .sign-out i[data-lucide] { width: 14px; height: 14px; }
.sidebar-footer .sign-out:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

/* === Topbar (3 zones) — Wave 9 ======================================== */
.w2-topbar.topbar-v9 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  margin: -24px -24px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 25;
}
.topbar-v9 .tb-left,
.topbar-v9 .tb-center,
.topbar-v9 .tb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-v9 .tb-right { gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }

/* Crumb — eyebrow + page title */
.topbar-v9 .crumb {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.topbar-v9 .crumb-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
  font-weight: 600;
}
.topbar-v9 .crumb b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  font-style: normal;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center search */
.topbar-v9 .search-v9 {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color var(--t-fast, 120ms) ease, background var(--t-fast, 120ms) ease;
}
.topbar-v9 .search-v9 i[data-lucide],
.topbar-v9 .search-v9 svg.lucide {
  width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0;
}
.topbar-v9 .search-v9 .search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-v9 .search-v9 .kbd {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 4px;
}
.topbar-v9 .search-v9:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
  color: var(--text-2);
}

/* Right-zone pills + icon buttons */
.topbar-v9 .tb-pill,
.topbar-v9 .tb-icon-btn {
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--t-fast, 120ms) ease, background var(--t-fast, 120ms) ease, color var(--t-fast, 120ms) ease;
  position: relative;
  white-space: nowrap;
}
.topbar-v9 .tb-icon-btn {
  width: 36px;
  justify-content: center;
  padding: 0;
}
.topbar-v9 .tb-pill { padding: 0 12px; gap: 8px; }
.topbar-v9 .tb-pill i[data-lucide],
.topbar-v9 .tb-pill svg.lucide,
.topbar-v9 .tb-icon-btn i[data-lucide],
.topbar-v9 .tb-icon-btn svg.lucide {
  width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0;
}
.topbar-v9 .tb-pill:hover,
.topbar-v9 .tb-icon-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
  color: var(--text-strong);
}
.topbar-v9 .tb-pill:hover i[data-lucide],
.topbar-v9 .tb-pill:hover svg.lucide,
.topbar-v9 .tb-icon-btn:hover i[data-lucide],
.topbar-v9 .tb-icon-btn:hover svg.lucide { color: var(--text-2); }
.topbar-v9 .tb-caret { width: 12px !important; height: 12px !important; opacity: 0.8; }

.topbar-v9 .copilot-toggle-v9 {
  background: var(--accent-soft);
  border-color: rgba(212, 163, 71, 0.30);
  color: var(--accent-3);
}
.topbar-v9 .copilot-toggle-v9 i[data-lucide],
.topbar-v9 .copilot-toggle-v9 svg.lucide { color: var(--accent); }
.topbar-v9 .copilot-toggle-v9:hover {
  background: var(--accent-soft-2);
  border-color: var(--accent);
  color: var(--accent-3);
}
.topbar-v9 .copilot-toggle-v9 .tb-kbd {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 163, 71, 0.30);
  color: var(--accent-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}

.topbar-v9 .tb-icon-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Office switcher dropdown */
.office-switcher-menu {
  position: absolute;
  top: 64px;
  right: 200px;
  min-width: 220px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.office-switcher-menu[hidden] { display: none; }
.office-switcher-menu .office-opt {
  background: transparent;
  border: 0;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.office-switcher-menu .office-opt:hover { background: var(--surface-3); }
.office-switcher-menu .office-opt.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* User menu */
.topbar-v9 .tb-user-menu {
  height: 36px;
  width: 44px;
  padding: 0 4px 0 4px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.topbar-v9 .tb-user-menu:hover { border-color: var(--border-strong); }
.topbar-v9 .tb-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #14110f;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-v9 .tb-user-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--surface-2);
}
.tb-user-dot--ok { background: var(--success); }
.tb-user-dot--bad { background: var(--danger); }

.tb-user-menu-pop {
  position: absolute;
  top: 64px;
  right: 20px;
  min-width: 240px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tb-user-menu-pop[hidden] { display: none; }
.tb-user-menu-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tb-user-menu-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.tb-user-menu-role { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.tb-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
}
.tb-user-menu-item i[data-lucide],
.tb-user-menu-item svg.lucide { width: 14px; height: 14px; color: var(--text-3); }
.tb-user-menu-item:hover { background: var(--surface-3); }
.tb-user-menu-item--danger:hover { color: var(--danger); }
.tb-user-menu-item--danger:hover i[data-lucide],
.tb-user-menu-item--danger:hover svg.lucide { color: var(--danger); }
.tb-user-menu-health {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.tb-user-menu-health.ok { color: var(--success); }
.tb-user-menu-health.bad { color: var(--danger); }

/* === Page head pattern (Wave 9) ======================================== */
.page-head-v9 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 0 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.page-head-v9::after { display: none; }
.page-head-v9 .page-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.page-head-v9 .page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  margin: 0;
  font-variation-settings: normal;
  font-style: normal;
}
.page-head-v9 .page-sub {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 14px;
}
.page-head-v9 .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* === Executive KPI row (5 tiles, weighted) ============================ */
.exec-kpi-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.exec-kpi {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  overflow: hidden;
}
.exec-kpi:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.exec-kpi .exec-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
}
.exec-kpi .exec-kpi-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
  line-height: 1.05;
}
.exec-kpi-hero .exec-kpi-value { font-size: 40px; }
.exec-kpi .exec-kpi-delta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.exec-kpi .exec-kpi-delta.up { color: var(--success); }
.exec-kpi .exec-kpi-delta.down { color: var(--danger); }
.exec-kpi .exec-kpi-spark {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 80px;
  height: 20px;
  color: var(--text-3);
  opacity: 0.6;
}
.exec-kpi-hero .exec-kpi-spark { color: var(--accent); opacity: 0.8; }

@media (max-width: 1100px) {
  .exec-kpi-row { grid-template-columns: 1fr 1fr 1fr; }
  .exec-kpi-hero { grid-column: span 3; }
}
@media (max-width: 720px) {
  .exec-kpi-row { grid-template-columns: 1fr 1fr; }
  .exec-kpi-hero { grid-column: span 2; }
}

/* === Dashboard cards ================================================== */
.dash-row {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}
.dash-row-attention { grid-template-columns: 2fr 1fr; }
.dash-row-money     { grid-template-columns: 1fr 1fr; }
.dash-row-perf      { grid-template-columns: 1fr 1fr; }

@media (max-width: 1000px) {
  .dash-row-attention,
  .dash-row-money,
  .dash-row-perf { grid-template-columns: 1fr; }
}

.card-elevated.dash-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-1);
}
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.dash-card-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  margin: 0;
  text-transform: none;
}
.dash-card-title-display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--text-strong);
  font-variation-settings: 'opsz' 24;
}
.dash-card-meta {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.dash-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--accent);
}
.dash-card-link i[data-lucide],
.dash-card-link svg.lucide { width: 12px; height: 12px; }
.dash-card-link:hover { color: var(--accent-3); }
.dash-card-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Attention queue rows */
.attention-queue { display: flex; flex-direction: column; gap: 1px; }
.attention-queue-item {
  display: grid;
  grid-template-columns: 28px 1fr auto 12px;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 100ms ease;
}
.attention-queue-item + .attention-queue-item { border-top: 1px solid var(--border); }
.attention-queue-item:hover { background: var(--surface-2); }
.attention-queue-item .aq-icon {
  width: 28px; height: 28px;
  background: var(--surface-2);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.attention-queue-item .aq-icon i[data-lucide],
.attention-queue-item .aq-icon svg.lucide {
  width: 14px; height: 14px; color: var(--text-2); stroke-width: 1.5;
}
.attention-queue-item.kind-fta .aq-icon { background: var(--danger-soft); }
.attention-queue-item.kind-fta .aq-icon i[data-lucide],
.attention-queue-item.kind-fta .aq-icon svg.lucide { color: var(--danger); }
.attention-queue-item.kind-court .aq-icon { background: var(--warning-soft); }
.attention-queue-item.kind-court .aq-icon i[data-lucide],
.attention-queue-item.kind-court .aq-icon svg.lucide { color: var(--warning); }
.attention-queue-item.kind-payment .aq-icon { background: var(--accent-soft); }
.attention-queue-item.kind-payment .aq-icon i[data-lucide],
.attention-queue-item.kind-payment .aq-icon svg.lucide { color: var(--accent); }
.attention-queue-item.kind-lead .aq-icon { background: var(--info-soft); }
.attention-queue-item.kind-lead .aq-icon i[data-lucide],
.attention-queue-item.kind-lead .aq-icon svg.lucide { color: var(--info); }

.attention-queue-item .aq-body { min-width: 0; }
.attention-queue-item .aq-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attention-queue-item .aq-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attention-queue-item .aq-when {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.attention-queue-item .aq-chevron {
  color: var(--text-3);
  width: 12px;
  height: 12px;
}
.attention-queue-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 12px;
  color: var(--text-3);
  text-align: center;
  gap: 8px;
}
.attention-queue-empty i[data-lucide],
.attention-queue-empty svg.lucide { width: 28px; height: 28px; color: var(--success); }

/* Daily Brief bullets */
.daily-brief {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.daily-brief li {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  padding-left: 14px;
  position: relative;
}
.daily-brief li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Aging table */
.data-table-aging { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table-aging th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-align: left;
  padding: 6px 8px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.data-table-aging th.num,
.data-table-aging td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table-aging td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.data-table-aging tr:last-child td { border-bottom: 0; }
.data-table-aging .bucket-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.data-table-aging .bucket-90 .bucket-dot { background: var(--danger); }
.data-table-aging .bucket-60 .bucket-dot { background: var(--warning); }
.data-table-aging .bucket-30 .bucket-dot { background: var(--accent); }
.data-table-aging .bucket-0  .bucket-dot { background: var(--success); }

/* Court watch list */
.court-watch { display: flex; flex-direction: column; gap: 1px; }
.court-watch-day {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 8px;
  border-left: 2px solid var(--info);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.court-watch-day:last-child { border-bottom: 0; }
.court-watch-day.is-today { border-left-color: var(--danger); }
.court-watch-day.is-tomorrow { border-left-color: var(--warning); }
.court-watch-day .cw-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}
.court-watch-day .cw-def {
  flex: 1;
  font-size: 13.5px;
  color: var(--text-strong);
  font-weight: 500;
}
.court-watch-day .cw-court {
  font-size: 12px;
  color: var(--text-3);
}

/* Recent bonds + payments rows (shared compact style) */
.recent-bonds, .dash-payments { display: flex; flex-direction: column; gap: 1px; }
.recent-bond-row, .dash-payment-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 100ms ease;
}
.recent-bond-row:last-child, .dash-payment-row:last-child { border-bottom: 0; }
.recent-bond-row:hover, .dash-payment-row:hover { background: var(--surface-2); }
.recent-bond-row .rb-power,
.dash-payment-row .pay-method {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.recent-bond-row .rb-def,
.dash-payment-row .pay-def {
  font-size: 13.5px;
  color: var(--text-strong);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-bond-row .rb-amount,
.dash-payment-row .pay-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.recent-bond-row .rb-agent,
.dash-payment-row .pay-agent {
  font-size: 11px;
  color: var(--text-3);
}

/* Office + agent perf */
.office-perf, .agent-perf { display: flex; flex-direction: column; gap: 8px; }
.perf-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
}
.perf-row .perf-label { color: var(--text-2); }
.perf-row .perf-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.perf-row .perf-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 3px;
}
.perf-row .perf-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  font-size: 13px;
}

/* Hide the v2 / classic dashboard blocks so Wave 9 view is the default.
   The "Classic view" toggle in app.js still flips visibility via dash-toggle-
   classic which inverts these. */
#tab-dashboard #dash-v2-wrap,
#tab-dashboard #dash-classic-wrap { display: none; }
body.dash-classic #tab-dashboard #dash-v2-wrap { display: block; }
body.dash-classic .exec-kpi-row,
body.dash-classic .dash-row,
body.dash-classic .dash-court-watch,
body.dash-classic .recent-bonds-section { display: none; }

/* === Pipeline cards — Wave 9 ========================================== */
.pipeline { gap: 14px; }
.pipeline .col {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pipeline .col h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 4px;
  padding: 0 4px;
}
.pipeline .col h3 .n {
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.pipeline .card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.pipeline .card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.pipeline .card.stuck { border-left: 2px solid var(--danger); }
.pipeline .card .name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipeline .card .meta {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.pipeline .card .row-2 {
  display: inline-flex;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
  align-items: center;
}
.pipeline .card .row-2 .age {
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pipeline .card .row-2 .age.warn { background: var(--warning-soft); color: var(--warning); }
.pipeline .card .row-2 .age.bad  { background: var(--danger-soft);  color: var(--danger); }
.pipeline .card .next-action {
  font-size: 11.5px;
  color: var(--text-2);
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
}
.pipeline .col-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 20px 12px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}
.pipeline .col-foot {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* === Component canon: buttons ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease, color 120ms ease;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text-strong); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn i[data-lucide], .btn svg.lucide { width: 14px; height: 14px; stroke-width: 1.75; }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #14110f;
}
.btn.primary:hover { background: var(--accent-3); border-color: var(--accent-3); color: #14110f; }
.btn.primary:active { background: var(--accent-2); }

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn.ghost:hover { background: var(--surface-2); color: var(--text-strong); border-color: var(--border); }

.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: #c43d3d; border-color: #c43d3d; }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 4px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }
.btn-count {
  margin-left: 2px;
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* === Pills (canonical status set) ===================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-body);
}
.pill.success { background: var(--success-soft); color: var(--success); }
.pill.warning { background: var(--warning-soft); color: var(--warning); }
.pill.danger  { background: var(--danger-soft);  color: var(--danger); }
.pill.info    { background: var(--info-soft);    color: var(--info); }
.pill.accent  { background: var(--accent-soft);  color: var(--accent-3); }
.pill.neutral { background: var(--surface-3);    color: var(--text-2); }

/* === Form inputs ====================================================== */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  height: 38px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 120ms ease, background 120ms ease;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Data table baseline ============================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  background: var(--bg-subtle);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  height: 36px;
  vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--surface-2); }
.data-table tbody td.num,
.data-table tbody td.money { font-variant-numeric: tabular-nums; text-align: right; }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* === Mobile (≤ 720px) topbar reflow ================================== */
@media (max-width: 720px) {
  .w2-topbar.topbar-v9 {
    grid-template-columns: auto 1fr auto;
    height: 56px;
    padding: 0 12px;
    margin: -16px -16px 16px;
    gap: 8px;
  }
  .topbar-v9 .crumb { display: none; }
  .topbar-v9 .search-v9 .search-text,
  .topbar-v9 .search-v9 .kbd { display: none; }
  .topbar-v9 .search-v9 { padding: 0; width: 36px; height: 36px; justify-content: center; }
  .topbar-v9 .office-switcher,
  .topbar-v9 #notifications-btn,
  .topbar-v9 .copilot-toggle-v9 .copilot-toggle-label,
  .topbar-v9 .copilot-toggle-v9 .tb-kbd { display: none; }
  .topbar-v9 .copilot-toggle-v9 { width: 36px; padding: 0; justify-content: center; }
  .exec-kpi .exec-kpi-spark { display: none; }
  .page-head-v9 .page-title { font-size: 26px; }
}

/* === Hide legacy emoji-heavy section headlines on Wave 9 dashboard ====== */
#tab-dashboard #dash-v2-wrap h2,
#tab-dashboard #dash-classic-wrap h2 { /* untouched */ }

/* End Wave 9 ============================================================== */