/* ═══════════════════════════════════════════════════════════════════════════
   MCA Platform — operator console styles
   ═══════════════════════════════════════════════════════════════════════════
   R95 (2026-04-26): the IRC Design System tokens now live in
   colors_and_type.css, which is linked BEFORE this file in app.html. That
   file owns the full :root + [data-theme="dark"] var blocks (canvas, ink,
   brand, accent, semantic, stage rainbow, type families, type scale,
   spacing, radii, shadows, motion). Keeping a duplicate here would have
   let the OLD saffron + cream values win the cascade.

   This file owns the COMPONENT styles (buttons, cards, tables, modals,
   sidebar, kanban, etc.) — all of which reference the tokens via var().

   If you need to override a token for the whole app, edit
   colors_and_type.css. If you need to override one in a single component,
   redeclare it on that selector.
   ═══════════════════════════════════════════════════════════════════════════ */


[data-theme="dark"] body {
  /* Subtle radial gradient on dark to add depth instead of flat black */
  background:
    radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(212, 168, 101, 0.04) 0%, transparent 50%),
    var(--bg-canvas);
  background-attachment: fixed;
}

[data-theme="dark"] ::selection {
  background: var(--accent-wash);
  color: var(--accent-ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-canvas);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent-wash); color: var(--ink-primary); }

/* ─── LOGIN SCREEN — Editorial split ───────────────────────────── */

/* ─── LOGIN SCREEN ─────────────────────────────────────────────────
   R150: redesigned. Single centered card on canvas, no editorial
   two-column hero, no Fraunces serif. Matches the rest of the app's
   Bricolage Grotesque productivity-tool aesthetic. The brand-mark
   element is kept (it's nice) but everything else is simplified. */

.login-view {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg-canvas);
  /* Subtle radial glow so the canvas doesn't feel completely flat —
     keeps the "premium product" texture without the editorial decoration. */
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-tint, rgba(124,58,237,0.04)) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, var(--bg-sunken) 0%, transparent 65%);
  padding: var(--sp-6);
  overflow: auto;
}

.login-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(15, 23, 42, 0.06));
  width: 100%;
  max-width: 420px;
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  flex-direction: column;
}

@media (max-width: 480px) {
  .login-card {
    padding: var(--sp-8) var(--sp-6);
    box-shadow: none;
    border: none;
    background: transparent;
  }
}

.login-header {
  margin-bottom: var(--sp-8);
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-on-brand, #fff);
  background: var(--accent-ink, var(--ink-primary));
  border-radius: var(--r, 10px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-5);
}
.brand-mark.sm {
  width: 32px;
  height: 32px;
  font-size: 14px;
  margin: 0;
}

.login-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--sp-2) 0;
  color: var(--ink-primary);
}

.login-header .sub {
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  margin: 0;
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* The form-field / form-label classes match the rest of the app's
   modal forms — same vocabulary, same spacing. */
.login-form .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.login-form .form-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-secondary);
  letter-spacing: 0;
  text-transform: none;
}

.login-form input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--ink-primary);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.login-form input::placeholder {
  color: var(--ink-muted);
}
.login-form input:focus {
  border-color: var(--accent-ink, var(--brand));
  box-shadow: 0 0 0 3px var(--accent-tint, rgba(124,58,237,0.12));
}

.login-error {
  color: var(--danger-ink, var(--danger));
  font-size: var(--fs-sm);
  min-height: 18px;
  /* Show errors in body font, not mono — they're for users, not devs. */
  font-family: var(--font-sans);
  margin-top: calc(-1 * var(--sp-1));
}

.btn-login {
  /* Slightly taller than default btn-accent for the primary action. */
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 500;
  margin-top: var(--sp-2);
  width: 100%;
  justify-content: center;
}

.login-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
}
.login-footer .dot { color: var(--ink-faded); }
.login-footer a {
  color: var(--ink-tertiary);
  transition: color 150ms;
  text-decoration: none;
}
.login-footer a:hover {
  color: var(--ink-primary);
  text-decoration: underline;
}

.login-footer a:hover { color: var(--ink-primary); }

/* ─── APP SHELL ────────────────────────────────────────────────── */

.app-view {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100vh;
}

.sidebar {
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.sidebar-brand {
  padding: var(--sp-6) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3);
  border-bottom: 1px solid var(--border);
  /* R102: now an <a> — clicking returns home. Hover hint keeps it
     subtle so it doesn't pretend to be a primary nav target. */
  text-decoration: none;
  color: inherit;
  transition: background 140ms ease;
}
.sidebar-brand:hover {
  background: var(--bg-hover);
}

.brand-text { line-height: var(--lh-snug); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 50, 'opsz' 18;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--ink-primary);
}
.brand-env {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-faded);
  text-transform: uppercase;
  margin-top: 1px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-3); }
.nav-section { margin-bottom: var(--sp-6); }

.nav-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* R102: was --ink-faded (lightest) which read as a ghost label.
     Bumped to --ink-tertiary + heavier weight so group headers
     actually anchor their groups visually. */
  color: var(--ink-tertiary);
  padding: 0 var(--sp-3);
  margin-bottom: var(--sp-3);
}

.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  font-weight: 450;
  transition: all 160ms var(--ease-out);
  position: relative;
  letter-spacing: 0.005em;
}

/* R95: SVG icons replacing the old Unicode glyphs. Same 20px slot,
   stroked in currentColor so they inherit the link's color state. */
.nav-item .nav-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--ink-tertiary);
  transition: color 160ms var(--ease-out);
}

/* Legacy span-based icon styling kept as a fallback in case any nav item
   in this codebase still renders one. Should be empty after R95. */
.nav-item .icon {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  color: var(--ink-faded);
  font-size: 13px;
  transition: color 160ms ease;
}

.nav-item:hover { background: var(--bg-hover); color: var(--ink-primary); }
.nav-item:hover .nav-icon { color: var(--brand); }
.nav-item:hover .icon     { color: var(--brand); }

.nav-item.active {
  background: var(--brand-wash);
  color: var(--brand-deep);
  font-weight: 600;
}
.nav-item.active .nav-icon { color: var(--brand); }
.nav-item.active .icon     { color: var(--brand); }
.nav-item.active::before {
  content: '';
  position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}

.sidebar-user {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-surface);
}

/* R101: clickable user-profile area opens Account & security in
   drawer. Wraps the avatar + name + role; logout/theme stay separate
   buttons next to it. Subtle hover so operators see it's clickable. */
.sidebar-user-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: transparent;
  border: 1px solid transparent;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  min-width: 0;
  transition: background 140ms ease, border-color 140ms ease;
}
.sidebar-user-info:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.sidebar-user-info .user-meta { flex: 1; min-width: 0; }
.user-menu-chevron {
  flex-shrink: 0;
  color: var(--ink-tertiary);
  transition: transform 160ms ease;
}
.sidebar-user-info[aria-expanded="true"] .user-menu-chevron {
  transform: rotate(180deg);
}

/* R102: user popover menu — small, focused, anchored above the user
   row in the sidebar footer. Three entries: Account & security,
   Notifications, Sign out. Two of those open the Settings drawer
   pre-routed; sign out hits the same logout flow as the icon button.
   Click-outside / Escape close. */
.user-menu-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: var(--sp-4);
  right: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10), 0 -2px 6px rgba(15, 23, 42, 0.06);
  padding: 6px;
  z-index: 60;
  animation: userMenuIn 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.user-menu-popover[hidden] { display: none; }
@keyframes userMenuIn {
  from { opacity: 0; transform: translateY(4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.user-menu-header {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.user-menu-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-items {
  display: flex;
  flex-direction: column;
}
.user-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-primary);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.user-menu-item:hover {
  background: var(--bg-hover);
}
.user-menu-item svg {
  color: var(--ink-tertiary);
  flex-shrink: 0;
}
.user-menu-item:hover svg {
  color: var(--brand);
}
.user-menu-item--danger { color: var(--danger-ink); }
.user-menu-item--danger:hover {
  background: var(--danger-wash);
}
.user-menu-item--danger svg { color: var(--danger); }
.user-menu-item--danger:hover svg { color: var(--danger); }
.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* sidebar-user needs position:relative for the popover to anchor */
.sidebar-user { position: relative; }

.user-avatar {
  width: 36px; height: 36px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-wash);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent-ink);
  flex-shrink: 0;
}

.user-meta { flex: 1; line-height: 1.25; overflow: hidden; }
.user-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role {
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.user-logout {
  color: var(--ink-tertiary);
  font-size: 15px;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  transition: all 160ms ease;
}
.user-logout:hover { color: var(--danger); background: var(--danger-wash); }

/* ─── MAIN CONTENT ─────────────────────────────────────────────── */

.main { overflow-y: auto; background: var(--bg-canvas); }

.loading-state {
  height: 100%;
  display: grid; place-items: center;
  color: var(--ink-faded);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.page-header {
  padding: var(--sp-12) var(--sp-12) var(--sp-8);
  border-bottom: 1px solid var(--border);
  background: var(--bg-canvas);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6);
}

.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 30, 'opsz' 96;
  font-size: var(--fs-3xl);
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  color: var(--ink-primary);
}

.page-subtitle {
  color: var(--ink-tertiary);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  letter-spacing: 0.01em;
}

.page-actions { display: flex; gap: var(--sp-3); align-items: center; }

.page-body { padding: var(--sp-10) var(--sp-12); }

/* ─── CARDS ────────────────────────────────────────────────────── */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  transition: box-shadow 200ms ease;
}

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5);
  gap: var(--sp-4);
}

.card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

/* ─── STATS ────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  transition: all 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Color band on top, derived from --stat-color (set inline) */
.stat-card[style*="--stat-color"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--stat-color);
  opacity: 0.85;
  transition: opacity 200ms ease, height 200ms ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--stat-color, var(--ink-primary)) 18%, transparent);
  border-color: color-mix(in srgb, var(--stat-color, var(--accent)) 35%, var(--border));
}
.stat-card[style*="--stat-color"]:hover::before {
  height: 4px;
  opacity: 1;
}

.stat-card[style*="--stat-color"] .stat-value {
  color: var(--stat-color);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: var(--sp-4);
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 30, 'opsz' 96;
  font-size: var(--fs-3xl);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-primary);
}

.stat-delta {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.02em;
}

/* ─── FUNNEL ───────────────────────────────────────────────────── */

.funnel-list { display: flex; flex-direction: column; gap: var(--sp-1); }

.funnel-row {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px dashed var(--border);
}
.funnel-row:last-child { border-bottom: none; }

.funnel-name {
  color: var(--ink-primary);
  display: flex; align-items: center;
  gap: var(--sp-3);
  font-weight: 450;
}
.funnel-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.funnel-bar {
  height: 8px;
  background: var(--bg-sunken);
  border-radius: 4px;
  overflow: hidden;
}

.funnel-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.funnel-count {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-align: right;
  color: var(--ink-primary);
}

/* ─── TABLE ────────────────────────────────────────────────────── */

.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.table-controls {
  display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.search-input {
  flex: 1;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-primary);
  font-size: var(--fs-sm);
  outline: none;
  max-width: 440px;
  transition: all 180ms ease;
}
.search-input::placeholder { color: var(--ink-faded); }
.search-input:focus {
  border-color: var(--border-focus);
  background: var(--bg-surface);
  box-shadow: var(--shadow-focus);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

thead {
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}

th {
  text-align: left;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

td {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  color: var(--ink-primary);
  vertical-align: middle;
}

tbody tr { transition: background 120ms ease; cursor: pointer; }
tbody tr:hover { background: var(--bg-hover); }

.td-mono {
  font-family: var(--font-mono);
  color: var(--ink-secondary);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
}

.td-title { display: flex; flex-direction: column; gap: 3px; }
.td-title-primary {
  color: var(--ink-primary);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.td-title-secondary {
  color: var(--ink-tertiary);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}

.empty-state {
  padding: var(--sp-20) var(--sp-6);
  text-align: center;
  /* R97: was --ink-faded (#CBD5E1, 2:1 contrast — fails AA). HANDOFF
     explicitly says ink-faded is for non-text only. Switched to
     --ink-secondary (7.2:1, AAA) for the body copy under the title.
     Title ("serif") class below was already on ink-secondary. */
  color: var(--ink-secondary);
}

.empty-state .serif {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'opsz' 60;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  margin-bottom: var(--sp-3);
}

/* ─── PAGINATION ───────────────────────────────────────────────── */

.pagination {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
}

.pagination-controls { display: flex; gap: var(--sp-2); }

.page-btn {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  transition: all 150ms ease;
}

.page-btn:hover:not(:disabled) {
  background: var(--bg-surface);
  color: var(--ink-primary);
  border-color: var(--border-focus);
}
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ─── KANBAN ───────────────────────────────────────────────────── */

.kanban-scroll {
  overflow-x: auto;
  padding: 0 var(--sp-12) var(--sp-12);
  margin: 0 calc(-1 * var(--sp-12));
  scroll-padding: var(--sp-12);
}

.kanban-board {
  display: flex;
  gap: var(--sp-4);
  min-height: calc(100vh - 300px);
  padding: 0 var(--sp-12);
}

/* Kanban columns: each column gets a saturated colored top band derived from
   its --stage-color (set inline as a CSS variable on the column element). */
.kanban-col {
  flex: 0 0 320px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 300px);
  overflow: hidden;
  position: relative;
}

.kanban-col-header {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border-radius: var(--r-md) var(--r-md) 0 0;
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

/* Saturated color band — sits on top of the column */
.kanban-col-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--stage-color, var(--accent));
}

/* Subtle bg tint matching the stage */
.kanban-col-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--stage-color, var(--accent)) 6%, var(--bg-surface)) 0%,
    var(--bg-surface) 100%
  );
}

.kanban-col-name {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-primary);
}

.kanban-col-name .funnel-dot {
  width: 12px; height: 12px;
  background: var(--stage-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color, var(--accent)) 18%, transparent);
}

.kanban-col-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-primary);
  background: color-mix(in srgb, var(--stage-color, var(--accent)) 14%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--stage-color, var(--accent)) 25%, transparent);
  padding: 3px var(--sp-2);
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kanban-col-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}

/* Card: thin colored top stripe matches the column's stage */
.kanban-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4);
  cursor: grab;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  /* R128: ensure sparse-data cards (no comms, no value, no EIN)
     still have visible breathing room. Without this, an opp with
     just a name renders as a thin line that looks broken. */
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.kanban-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--stage-color, var(--accent));
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.kanban-card:hover {
  border-color: color-mix(in srgb, var(--stage-color, var(--accent)) 50%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.kanban-card:hover::before { opacity: 1; height: 4px; }
.kanban-card:active { cursor: grabbing; }

.kanban-card-title {
  font-weight: 600;
  color: var(--ink-primary);
  line-height: var(--lh-snug);
  font-size: var(--fs-sm);
}

.kanban-card-sub {
  font-size: 11.5px;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.kanban-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
}

.kanban-card-amount {
  color: var(--ink-primary);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

/* Card icon row — calls / sms / notes / docs / tasks */
.kanban-card-icons {
  display: flex; gap: 6px;
  align-items: center;
  /* R128: sit at the bottom when the card has min-height */
  margin-top: auto;
}

.kc-icon {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  font-weight: 600;
}
.kc-icon.has-count {
  background: color-mix(in srgb, var(--info-bright) 12%, var(--bg-surface));
  color: var(--info-bright);
  border-color: color-mix(in srgb, var(--info-bright) 25%, transparent);
}
.kc-icon .kc-glyph {
  font-size: 11px;
  opacity: 0.85;
}

/* Mini avatar circle on cards */
.kanban-card-avatars {
  display: flex; gap: -4px; align-items: center;
}
.kc-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  border: 2px solid var(--bg-surface);
  margin-left: -6px;
}
.kc-avatar:first-child { margin-left: 0; }

.kanban-card-progress {
  height: 3px;
  background: var(--bg-sunken);
  border-radius: 2px;
  overflow: hidden;
}
.kanban-card-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 400ms ease;
}

/* ─── BUTTONS ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid transparent;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.btn-ghost {
  color: var(--ink-secondary);
  border-color: var(--border);
  background: var(--bg-surface);
}
.btn-ghost:hover {
  color: var(--ink-primary);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.btn-accent {
  background: var(--brand);
  color: var(--ink-on-brand);
  border-color: var(--brand);
}
.btn-accent:hover {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}
.btn-accent:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* R95: dark variant kept for places that genuinely want a black primary
   (auth screens, modal confirms in dangerous flows). */
.btn-dark {
  background: var(--ink-primary);
  color: var(--bg-canvas);
  border-color: var(--ink-primary);
}
.btn-dark:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ─── BADGE ────────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: none;
  background: var(--bg-sunken);
  color: var(--ink-secondary);
  border: 1px solid var(--border);
  font-weight: 600;
  line-height: 1.4;
}

.badge.success {
  color: var(--success-ink);
  background: var(--success-wash);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.badge.warn {
  color: var(--warn-ink);
  background: var(--warn-wash);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.badge.danger {
  color: var(--danger-ink);
  background: var(--danger-wash);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.badge.info {
  color: var(--info-ink);
  background: var(--info-wash);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
}
.badge.accent {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.badge.brand {
  color: var(--brand-deep);
  background: var(--brand-wash);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

/* R95: dark-theme badge text-colors are now driven by --*-ink tokens
   which the kit's colors_and_type.css adjusts per theme. No need to
   override here anymore. */
[data-theme="dark"] .badge.accent { color: var(--accent-ink); }
[data-theme="dark"] .badge.brand  { color: var(--brand-deep); }

/* ─── TOAST ────────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  top: var(--sp-6); right: var(--sp-6);
  z-index: 1000;
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  pointer-events: none;
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-5);
  min-width: 300px;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: toast-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  color: var(--ink-primary);
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── MODAL ────────────────────────────────────────────────────── */

.modal-root {
  position: fixed; inset: 0;
  z-index: 500;
  display: grid; place-items: center;
  padding: var(--sp-6);
}

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 24, 20, 0.35);
  backdrop-filter: blur(4px);
  animation: backdrop-in 200ms ease;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-panel {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  width: 600px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modal-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* R101: optional wide variants for content-dense modals (submission
   detail). The normal 600px is right for one-column flows; submission
   detail uses a 2-column grid + multi-doc list so it needs more room. */
.modal-panel--wide  { width: 960px; }
.modal-panel--xwide { width: 1140px; max-width: 96vw; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'opsz' 48;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: var(--ink-primary);
}
.modal-close {
  color: var(--ink-tertiary);
  font-size: 24px;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  transition: all 140ms ease;
}
.modal-close:hover {
  background: var(--bg-hover);
  color: var(--ink-primary);
}

.modal-body { padding: var(--sp-6) var(--sp-8); }
.modal-footer {
  padding: var(--sp-5) var(--sp-8);
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  background: var(--bg-sunken);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ─── FORMS ────────────────────────────────────────────────────── */

.form-grid { display: grid; gap: var(--sp-5); }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }

.form-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg-canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-primary);
  font-size: var(--fs-base);
  outline: none;
  transition: all 180ms ease;
  font-family: var(--font-body);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--border-focus);
  background: var(--bg-surface);
  box-shadow: var(--shadow-focus);
}

.form-field textarea { min-height: 96px; resize: vertical; }

/* R88: aliases for form classes used by gateway/SIM modals built in
   R82-R87 (Edit gateway, Test send, Identify SIM, Edit SIM). They
   used a different naming convention (form-group / form-label /
   form-input / form-hint) that wasn't styled — modals showed up with
   browser-default Helvetica and white backgrounds, looking out of
   place against the rest of the cream/serif design. Aliasing here
   instead of rewriting all the modals' markup. */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

input.form-input,
select.form-input,
textarea.form-input {
  background: var(--bg-canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-primary);
  font-size: var(--fs-base);
  outline: none;
  transition: all 180ms ease;
  font-family: var(--font-body);
}

input.form-input:focus,
select.form-input:focus,
textarea.form-input:focus {
  border-color: var(--border-focus);
  background: var(--bg-surface);
  box-shadow: var(--shadow-focus);
}

input.form-input:disabled,
select.form-input:disabled,
textarea.form-input:disabled {
  background: var(--bg-sunken);
  color: var(--ink-tertiary);
  cursor: not-allowed;
}

textarea.form-input { min-height: 60px; resize: vertical; }

.form-hint {
  font-size: 11.5px;
  color: var(--ink-tertiary);
  line-height: 1.5;
  margin-top: 2px;
}

.form-hint code {
  background: var(--bg-canvas);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10.5px;
}

/* ─── DETAIL ───────────────────────────────────────────────────── */

.detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-6);
}

.detail-list { display: flex; flex-direction: column; }
.detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
  font-family: var(--font-mono);
  color: var(--ink-tertiary);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.detail-value { color: var(--ink-primary); font-size: var(--fs-sm); }
.detail-value.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }

.timeline { display: flex; flex-direction: column; gap: var(--sp-3); }
.timeline-item {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  transition: border-color 150ms ease;
}
.timeline-item:hover { border-color: var(--border-strong); }

.timeline-header {
  display: flex; justify-content: space-between;
  margin-bottom: var(--sp-2);
  color: var(--ink-tertiary);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.timeline-type { color: var(--accent-ink); font-weight: 500; letter-spacing: 0.06em; }

/* ─── SCROLLBAR ────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 6px;
  border: 3px solid var(--bg-canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faded); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ─── UTILITIES ────────────────────────────────────────────────── */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
/* R97: .text-faded was using --ink-faded (#CBD5E1, 2:1 contrast — fails
   AA). Per HANDOFF.md ink-faded is for non-text only. The class is used
   39 places in app.js for things like "No documents yet" empty hints,
   placeholder text, secondary captions. Pointed to --ink-tertiary
   (#64748B in light mode, 4.6:1 — AA pass). The class name stays the
   same so nothing in app.js needs to change. */
.text-faded { color: var(--ink-tertiary); }
.text-tertiary { color: var(--ink-tertiary); }
.text-secondary { color: var(--ink-secondary); }
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-4); }
.hidden { display: none; }

/* ─── RESPONSIVE ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .app-view { grid-template-columns: 220px 1fr; }
  .page-header, .page-body { padding-left: var(--sp-8); padding-right: var(--sp-8); }
}

/* ─── MOBILE TOP BAR — visible <=768px ──────────────────────────── */
.mobile-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 90;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.mobile-hamburger {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-primary);
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 140ms ease;
}
.mobile-hamburger:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.mobile-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.mobile-brand-text {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* ─── MOBILE BREAKPOINT (<=768px) ───────────────────────────────── */
@media (max-width: 768px) {
  /* Top bar appears */
  .mobile-topbar { display: flex; }

  /* App shell: single column, sidebar becomes a drawer */
  .app-view {
    grid-template-columns: 1fr;
  }

  /* Sidebar is now an off-canvas drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;  /* override any prior 'display:none' */
  }

  /* When body has the open class: slide in + show backdrop */
  body.mobile-sidebar-open .sidebar { transform: translateX(0); }
  body.mobile-sidebar-open .sidebar-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-sidebar-open { overflow: hidden; }

  /* The desktop theme toggle inside sidebar still works for those who open it */

  /* Page chrome: tighter, single-column */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: var(--sp-6) var(--sp-5) var(--sp-4);
  }
  .page-header > div:first-child { width: 100%; }
  .page-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .page-actions .btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
  .page-body {
    padding: var(--sp-4) var(--sp-5);
  }
  .page-title { font-size: var(--fs-2xl); }

  /* Cards: tighter padding */
  .card { padding: 16px; }
  .card-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Forms — single column always */
  .form-grid.cols-2,
  .form-grid.cols-3,
  .form-grid.cols-4 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }

  /* Tables → horizontal scroll instead of cards. Keeps full data visible
     and matches what users expect from a CRM. The wrapper handles the
     overflow so the page doesn't grow horizontally. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table {
    min-width: 600px;  /* preserve column widths */
  }
  .table-wrap table th,
  .table-wrap table td {
    padding: 10px 12px;
    font-size: 12.5px;
  }

  /* Modals: full-screen on mobile so forms aren't cramped */
  .modal-root { padding: 0; }
  .modal-panel {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: 100vw;
    border-radius: 0;
    margin: 0;
  }
  .modal-body {
    max-height: calc(100vh - 130px) !important;
    max-height: calc(100dvh - 130px) !important;
  }
  .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
  }

  /* Stats grid: 2 columns on mobile, not 3+ */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-card { padding: 14px; }
  .stat-label { font-size: 10.5px; }
  .stat-value { font-size: 22px; }

  /* Funnel rows: more compact */
  .funnel-row { gap: 8px; }
  .funnel-name { font-size: 12.5px; }

  /* Login screen — stack the editorial hero */
  .login-view { grid-template-columns: 1fr; }
  .login-bg {
    display: none;  /* reclaim the screen on mobile */
  }
  .login-form-wrap { padding: var(--sp-6); }

  /* Bulk action bar: full-width minus margin */
  .bulk-bar {
    left: 16px;
    right: 16px;
    transform: none;
    bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }
  @keyframes bulk-bar-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .bulk-bar-actions {
    border-left: none;
    padding-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }
  .bulk-bar-actions .btn { flex: 1 1 auto; }

  /* Kanban — horizontal scroll, narrower columns */
  .kanban-board { gap: 12px; padding: 0 16px 16px; }
  .kanban-col { flex: 0 0 260px; max-width: 260px; }

  /* Task rows: more compact */
  .task-row { padding: 10px; }
  .task-meta { gap: 6px 10px; }

  /* Document/message templates table - same horizontal scroll */
  .doc-row { flex-wrap: wrap; }

  /* Workflow editor modal: account for tighter spacing */
  .step-row { padding: 10px 12px; }
  .step-config { padding-left: 0; }  /* drop the indent that aligned with circle on desktop */
  .condition-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Settings rows: stack label and control */
  .setting-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .setting-control {
    width: 100%;
    flex-wrap: wrap;
  }
  .setting-control input,
  .setting-control select {
    flex: 1 1 100%;
  }

  /* Hide the secondary nav items in the side toolbar that don't fit */
  .view-toggle .view-mode-btn { padding: 8px 10px; }
}

/* ─── EXTRA-SMALL (<=480px) — phone portrait ──────────────────────── */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-actions { flex-direction: column; }
  .page-actions .btn { width: 100%; }
  .table-wrap table { min-width: 480px; }

  /* Mobile topbar: smaller padding */
  .mobile-topbar { padding: 8px 12px; }
  .mobile-brand-text { font-size: 14px; }

  /* Modal footer always sticky */
  .modal-footer { padding: 12px 16px; }
  .modal-footer .btn { padding: 10px 14px; font-size: 13px; }

  /* Stage popover: full-width near bottom */
  .stage-popover {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0;
  }
}


/* ─── STAGE PICKER POPOVER ─────────────────────────────────────── */

.stage-popover {
  position: fixed;
  z-index: 200;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 220px;
  max-height: 360px;
  overflow-y: auto;
  animation: modal-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.stage-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink-primary);
  text-align: left;
  transition: background 140ms ease;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.stage-option:hover:not(:disabled) {
  background: var(--bg-hover);
}

.stage-option:disabled {
  opacity: 0.5;
  cursor: default;
}

.stage-pill {
  transition: all 180ms ease;
}
.stage-pill:hover { filter: brightness(0.95); }

/* ─── KANBAN DRAG STATES ──────────────────────────────────────── */

.kanban-card.dragging {
  opacity: 0.4;
  transform: rotate(1deg);
  cursor: grabbing;
}

.kanban-col.drop-target .kanban-col-body {
  background: var(--accent-tint);
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
  border-radius: 10px;
}

/* ─── NOTE ITEMS ──────────────────────────────────────────────── */

.note-item {
  transition: border-color 150ms ease;
}
.note-item:hover {
  border-color: var(--border-strong) !important;
}
.note-item.pinned:hover {
  border-color: var(--accent) !important;
}


/* ─── PERMISSION PICKER ──────────────────────────────────────── */
.perm-row:hover { background: var(--bg-hover); }
.perm-row input[type=checkbox] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-surface);
  cursor: pointer;
  flex-shrink: 0;
  display: grid; place-items: center;
  transition: all 120ms;
}
.perm-row input[type=checkbox]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.perm-row input[type=checkbox]:checked::after {
  content: '✓';
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.role-row { cursor: default; }
.role-row:hover { border-color: var(--border-strong); }


/* ─── ADMIN SETTINGS ─────────────────────────────────────────── */
.setting-row {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 360px);
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }

.setting-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setting-label {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-primary);
  line-height: 1.3;
}

.setting-hint {
  font-size: 13px;
  color: var(--ink-tertiary);
  line-height: 1.55;
  max-width: 560px;
}

.setting-key {
  font-size: 10.5px;
  color: var(--ink-faded);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.setting-control {
  display: flex;
  gap: 8px;
  align-items: center;
}

.setting-control input[type=text],
.setting-control input[type=number],
.setting-control select {
  flex: 1;
  background: var(--bg-canvas);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--ink-primary);
  font-size: 13.5px;
  font-family: var(--font-body);
  outline: none;
  transition: all 160ms ease;
}

.setting-control input[type=text]:focus,
.setting-control input[type=number]:focus,
.setting-control select:focus {
  border-color: var(--border-focus);
  background: var(--bg-surface);
  box-shadow: var(--shadow-focus);
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 12px;
  transition: background 180ms ease;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 1px 3px rgba(26, 24, 20, 0.2);
}
.toggle input:checked + .toggle-slider {
  background: var(--accent);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
.toggle input:focus-visible + .toggle-slider {
  box-shadow: var(--shadow-focus);
}

@media (max-width: 768px) {
  .setting-row { grid-template-columns: 1fr; }
}


/* ─── REPORTS — TREND CHART ──────────────────────────────────── */
.trend-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  height: 180px;
  align-items: end;
  padding: 0 4px 8px;
}

.trend-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
  cursor: default;
}

.trend-bar-fill {
  width: 100%;
  background: var(--border-strong);
  border-radius: 6px 6px 0 0;
  transition: all 200ms ease;
  min-height: 2px;
}

.trend-bar:hover .trend-bar-fill {
  background: var(--accent);
}

.trend-bar-fill.current {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash);
}

.trend-bar-label {
  font-size: 10px;
  color: var(--ink-faded);
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .trend-chart {
    grid-template-columns: repeat(6, 1fr);
    height: 140px;
  }
  .trend-bar:nth-child(odd) { display: none; }
}


/* ─── TAGS ────────────────────────────────────────────────────── */
.tag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 2px;
  align-items: center;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border: 1px solid;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  transition: all 140ms ease;
}

.tag-chip .tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 50%;
  transition: all 140ms ease;
}
.tag-chip .tag-remove:hover {
  opacity: 1;
  background: rgba(0,0,0,0.06);
}

.tag-add-btn {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: all 140ms ease;
}
.tag-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-tint);
}

.tag-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tag picker modal */
.tag-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}

.tag-picker-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--ink-primary);
  cursor: pointer;
  transition: all 140ms ease;
  font-family: var(--font-body);
}
.tag-picker-option:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

/* Color swatches */
.color-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 150ms ease;
  padding: 0;
}
.color-swatch:hover {
  transform: scale(1.1);
}
.color-swatch.selected {
  border-color: var(--ink-primary);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--ink-primary);
}

.color-custom {
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: transparent;
}
.color-custom::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.color-custom::-webkit-color-swatch { border: none; border-radius: 50%; }


/* ─── LINK MODAL ──────────────────────────────────────────────── */
.link-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-sunken);
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.link-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: all 160ms ease;
  font-family: var(--font-body);
}

.link-tab:hover {
  color: var(--ink-primary);
}

.link-tab.active {
  background: var(--bg-surface);
  color: var(--ink-primary);
  box-shadow: var(--shadow-xs);
}

.link-pane.hidden {
  display: none;
}

.link-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 12px;
}

.link-result {
  text-align: left;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 140ms ease;
  font-family: var(--font-body);
  color: var(--ink-primary);
  font-size: 13px;
  line-height: 1.4;
}

.link-result:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.link-result.selected {
  background: var(--accent-tint);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash);
}

.link-row { transition: background 140ms ease; }
.link-row:hover { background: var(--bg-hover); }


/* ─── BACKUP AUTH TABS ─────────────────────────────────────────── */
.auth-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-sunken);
  padding: 3px;
  border-radius: 8px;
  width: fit-content;
}
.auth-tab {
  background: transparent;
  border: none;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: all 160ms ease;
  font-family: var(--font-body);
}
.auth-tab:hover { color: var(--ink-primary); }
.auth-tab.active {
  background: var(--bg-surface);
  color: var(--ink-primary);
  box-shadow: var(--shadow-xs);
}
.auth-pane.hidden { display: none; }

.sftp-section.sftp-dimmed {
  opacity: 0.55;
}


/* ─── THEME TOGGLE BUTTON ────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: all 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--accent-ink);
  border-color: var(--border-strong);
  background: var(--bg-hover);
  transform: rotate(15deg);
}

/* Show only the relevant icon */
.theme-toggle .theme-icon-light { display: none; }
.theme-toggle .theme-icon-dark { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-dark { display: none; }

/* Logout button — match new icon button style */
.user-logout {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 7px;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: all 160ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.user-logout:hover {
  color: var(--danger);
  background: var(--danger-wash);
  border-color: var(--danger-wash);
}

.sidebar-user {
  gap: 8px;
}


/* ─── VIEW MODE TOGGLE ─────────────────────────────────────── */
.view-toggle {
  display: inline-flex;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 1px;
}

.view-mode-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 140ms ease;
  text-decoration: none;
  font-family: var(--font-body);
}
.view-mode-btn:hover {
  color: var(--ink-primary);
  background: var(--bg-hover);
}
.view-mode-btn.active {
  background: var(--bg-surface);
  color: var(--accent-ink);
  box-shadow: var(--shadow-xs);
}


/* ─── DOCUMENTS ──────────────────────────────────────────────── */
.doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 140ms ease;
}
.doc-row:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.doc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-meta {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.02em;
  margin-top: 2px;
}


/* ─── BULK SELECTION ──────────────────────────────────────── */
.checkbox-col {
  width: 38px;
  text-align: center;
  padding-right: 0 !important;
}
.checkbox-col input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  vertical-align: middle;
}
.selectable-table tbody tr.row-selected {
  background: var(--accent-tint);
}
.selectable-table tbody tr.row-selected:hover {
  background: var(--accent-wash);
}

/* Sticky bulk action bar at bottom */
.bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 18px;
  background: var(--ink-primary);
  color: var(--bg-canvas);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 13px;
  animation: bulk-bar-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme="dark"] .bulk-bar {
  background: var(--bg-elev);
  color: var(--ink-primary);
  border: 1px solid var(--border-strong);
}

@keyframes bulk-bar-rise {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.bulk-bar-count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.bulk-bar-count span {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
}
.bulk-bar-clear {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 18px;
  padding: 0 6px;
  border-radius: 4px;
  line-height: 1;
}
.bulk-bar-clear:hover {
  opacity: 1;
  background: rgba(255,255,255,0.08);
}

.bulk-bar-actions {
  display: flex;
  gap: 4px;
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: 16px;
}
[data-theme="dark"] .bulk-bar-actions {
  border-left-color: var(--border);
}

.bulk-bar-actions .btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--bg-canvas);
  font-size: 12.5px;
  padding: 7px 14px;
}
[data-theme="dark"] .bulk-bar-actions .btn {
  background: var(--bg-sunken);
  border-color: var(--border);
  color: var(--ink-primary);
}
.bulk-bar-actions .btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.25);
}
[data-theme="dark"] .bulk-bar-actions .btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.bulk-bar-actions .bulk-bar-danger {
  color: #ff8888;
}
[data-theme="dark"] .bulk-bar-actions .bulk-bar-danger {
  color: var(--danger);
}
.bulk-bar-actions .bulk-bar-danger:hover {
  background: rgba(255, 80, 80, 0.16);
  border-color: rgba(255, 80, 80, 0.35);
}

/* ─── WORKFLOW EDITOR — conditions + steps ──────────────────────── */
.condition-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.condition-row select,
.condition-row input {
  font-size: 12.5px;
  padding: 7px 10px;
}

.step-row {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 140ms ease;
}
.step-row:hover {
  border-color: var(--border-strong);
}

.step-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.step-row-header > select {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 10px;
}

.step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
[data-theme="dark"] .step-num {
  color: var(--ink-primary);
}

.step-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.step-delay {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-canvas);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
}
.step-delay input,
.step-delay select {
  padding: 4px 8px;
  font-size: 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink-primary);
}

.step-config {
  padding-left: 36px;  /* align with content past the step-num circle */
}
.step-config select,
.step-config input[type="text"],
.step-config input[type="number"] {
  width: 100%;
  font-size: 12.5px;
  padding: 7px 10px;
}
.step-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  margin-bottom: 4px;
}

/* ─── TASKS ──────────────────────────────────────────────────────── */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 140ms ease;
}
.task-row:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.task-check-wrap {
  flex-shrink: 0;
  padding-top: 2px;
}
.task-complete-cb {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.task-main {
  flex: 1;
  min-width: 0;
}

.task-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
}
.task-title {
  color: var(--ink-primary);
  font-weight: 500;
  word-break: break-word;
}
.task-title.done {
  text-decoration: line-through;
  color: var(--ink-tertiary);
}

.task-priority-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.task-desc {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 4px;
  line-height: 1.45;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-tertiary);
}
.task-due {
  font-family: var(--font-mono);
  font-size: 11px;
}
.task-due.overdue {
  color: var(--danger);
  font-weight: 600;
}
.task-assignee {
  font-size: 11.5px;
}
.task-opp-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 140ms ease;
}
.task-opp-link:hover {
  border-bottom-color: var(--accent-ink);
}

.task-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* Bucket dots in agenda card titles */
.bucket-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.bucket-danger  { background: var(--danger); }
.bucket-accent  { background: var(--accent); }
.bucket-info    { background: #5b8dba; }
.bucket-neutral { background: var(--ink-tertiary); }

/* ─── CUSTOM FIELDS — broker-facing card + admin editor ──────────── */
.cf-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cf-field-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.cf-field-row:last-child { border-bottom: none; }

.cf-field-label {
  font-size: 12.5px;
  color: var(--ink-secondary);
  font-weight: 500;
  padding-top: 6px;
}
.cf-field-hint {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 3px;
  font-weight: 400;
  line-height: 1.4;
}

.cf-field-control input.cf-input,
.cf-field-control textarea.cf-input,
.cf-field-control select.cf-input {
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-primary);
}
.cf-field-control input.cf-input:focus,
.cf-field-control textarea.cf-input:focus,
.cf-field-control select.cf-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.cf-bool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 0;
}
.cf-bool input { width: 16px; height: 16px; accent-color: var(--accent); }

.cf-multiselect {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.cf-checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-secondary);
  transition: all 140ms ease;
}
.cf-checkbox-pill:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.cf-checkbox-pill.checked {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}
.cf-checkbox-pill input { display: none; }

/* Admin: option editor rows */
.cf-option-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cf-option-row input {
  font-size: 12.5px;
  padding: 6px 10px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-primary);
}

/* Mobile: stack label and control */
@media (max-width: 768px) {
  .cf-field-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cf-field-label { padding-top: 0; }
}

/* ─── R48: TASK RECURRENCE CHIP + NOTIFICATION TOGGLES ──────────── */
.task-recurrence {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-ink);
  background: var(--accent-tint);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.notif-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.notif-toggle:last-of-type { border-bottom: none; }
.notif-toggle input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.notif-toggle .notif-title {
  font-size: 13.5px;
  color: var(--ink-primary);
  font-weight: 500;
  line-height: 1.4;
}
.notif-toggle .notif-desc {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 3px;
  line-height: 1.45;
}

/* ─── R52: TEMPLATE VARIABLES VIEW ──────────────────────────────────── */
.var-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.var-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.var-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.var-table tbody tr:last-child td { border-bottom: none; }
.var-table tbody tr:hover { background: var(--bg-sunken); }

.var-token {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  user-select: all;
  transition: background 120ms ease;
}
.var-token:hover {
  background: var(--accent-wash);
}

/* ─── R52: signature pad blocks (multiple per page) ─────────────────── */
.sig-block {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
}
.sig-block + .sig-block {
  margin-top: 16px !important;
}

/* ─── R51: RENEWAL VIEW + LINEAGE CARD ──────────────────────────────── */
.renewal-list {
  display: flex;
  flex-direction: column;
}
.renewal-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
.renewal-row:last-child { border-bottom: none; }
.renewal-row:hover { background: var(--bg-sunken); }
.renewal-main { flex: 1; min-width: 0; }
.renewal-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-primary);
  margin-bottom: 4px;
}
.renewal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-secondary);
  align-items: center;
}
.renewal-funded {
  color: var(--accent-ink);
  font-weight: 500;
}
.renewal-age { color: var(--ink-tertiary); }
.renewal-actions { flex-shrink: 0; }

.bucket-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.bucket-danger  { background: var(--danger, #DC4639); }
.bucket-accent  { background: var(--accent, #C09553); }
.bucket-neutral { background: var(--ink-tertiary); }

.lineage-card {
  border-left: 3px solid var(--accent);
}
.lineage-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.lineage-section:last-child { border-bottom: none; padding-bottom: 4px; }
.lineage-section:first-of-type { padding-top: 4px; }
.lineage-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 8px;
}
.lineage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
  margin-bottom: 6px;
}
.lineage-row:last-child { margin-bottom: 0; }
.lineage-row:hover { background: var(--bg-canvas); }
.lineage-row-main { flex: 1; min-width: 0; }
.lineage-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  margin-bottom: 4px;
}
.lineage-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-secondary);
  align-items: center;
}
.lineage-stage-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

/* ─── R57: DASHBOARD REDESIGN ───────────────────────────────────────── */

/* Toolbar — segmented toggles for scope + range */
.seg-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-sunken);
  border-radius: 6px;
  padding: 3px;
  margin-left: 8px;
}
.seg-toggle button {
  background: transparent;
  color: var(--ink-secondary);
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  font-family: inherit;
}
.seg-toggle button:hover { color: var(--ink-primary); }
.seg-toggle button.active {
  background: var(--bg-surface);
  color: var(--ink-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.dash-loading {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-tertiary);
  font-size: 14px;
}

/* KPI grid — 3 cols on desktop, collapsing as needed */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card {
  background: var(--bg-surface);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kpi-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.kpi-label {
  font-size: 11.5px;
  color: var(--ink-secondary);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kpi-value {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi-unit {
  font-size: 13px;
  color: var(--ink-tertiary);
}
.kpi-spark { height: 32px; }
.kpi-spark svg { display: block; }

.kpi-pill {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.kpi-pill-good {
  color: #2D7A55;
  background: #E6F4EC;
}
.kpi-pill-bad {
  color: #B5392E;
  background: #FCEBEB;
}
.kpi-pill-neutral {
  color: var(--ink-secondary);
  background: var(--bg-sunken);
}
.kpi-pill-accent {
  color: #8A6A35;
  background: #F5EDDC;
}

/* Dark mode — pills need different bg/fg combos */
[data-theme="dark"] .kpi-pill-good   { color: #6FD3A4; background: rgba(45,122,85,0.18); }
[data-theme="dark"] .kpi-pill-bad    { color: #F2A6A0; background: rgba(181,57,46,0.20); }
[data-theme="dark"] .kpi-pill-accent { color: #E0BC7E; background: rgba(192,149,83,0.18); }

/* Dashboard rows — flexible 2-3 column layouts */
.dash-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.dash-row:has(.dash-col-1:nth-of-type(3)) {
  grid-template-columns: repeat(3, 1fr);
}
.dash-row:has(.dash-col-1-5) {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1100px) {
  .dash-row { grid-template-columns: 1fr !important; }
}

.dash-col-1, .dash-col-2, .dash-col-1-5 { min-width: 0; }
.dash-col-2 { /* takes 2 fractional units in the parent grid */ }

/* Card-link — small text-button that lives inside card-header */
.card-link {
  font-size: 12px;
  color: var(--accent-ink, #8A6A35);
  text-decoration: none;
}
.card-link:hover { text-decoration: underline; }

/* Pipeline chart wrapper */
.pipeline-chart-wrap {
  width: 100%;
  height: 200px;
}

/* Funnel v2 — vertical, with conversion %s */
.funnel-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.funnel-row-v2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.funnel-bar-v2 {
  height: 6px;
  background: var(--bg-sunken);
  border-radius: 3px;
  overflow: hidden;
}
.funnel-fill-v2 {
  height: 100%;
  border-radius: 3px;
  transition: width 280ms ease;
}
.funnel-meta-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.funnel-name-v2 { flex: 1; color: var(--ink-secondary); }
.funnel-count-v2 {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-primary);
  font-weight: 500;
}
.funnel-conv {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 38px;
  text-align: center;
}

/* Empty mini for use inside cards */
.empty-state-mini {
  padding: 24px 4px;
  text-align: center;
  color: var(--ink-tertiary);
  font-size: 13px;
  font-style: italic;
}

/* ─── SETTINGS PAGE (R102) ──────────────────────────────────────────
   Inline two-pane page replacing the R99 settings drawer. Same shell
   pattern as the Messages page — left sub-nav rail + right content
   pane. The handler renderSettings() builds this shell and mounts
   the existing renderAdmin* / renderImports handlers into the right
   pane.

   The nested router parses #/settings/<sub> and #/admin/<sub>
   identically — both paths render the Settings shell with the
   matching sub mounted. Bookmarks for legacy admin/* URLs still
   work; they just get the new shell around them. */

.main--settings {
  overflow: hidden !important;
  display: flex !important;
  padding: 0 !important;
}

.settings-shell {
  flex: 1;
  display: flex;
  background: var(--bg-canvas);
  min-height: 0;
  overflow: hidden;
}

/* Left rail — sub-nav, fixed width */
.settings-rail {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-canvas);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.settings-rail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 16px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.settings-rail-group { margin-bottom: 14px; }

.settings-rail-label {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 4px;
}

.settings-rail-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 450;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  margin-bottom: 1px;
  transition: all 140ms ease;
}
.settings-rail-item:hover {
  background: var(--bg-hover);
  color: var(--ink-primary);
}
.settings-rail-item:hover svg { color: var(--brand); }
.settings-rail-item svg {
  flex-shrink: 0;
  color: var(--ink-tertiary);
  transition: color 140ms ease;
}
.settings-rail-item span { flex: 1; }
.settings-rail-item.active {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--ink-primary);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.settings-rail-item.active svg { color: var(--brand); }

/* Right pane — content area, flex-fill */
.settings-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-surface);
  overflow: hidden;
}

.settings-pane-header {
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
  /* R104: flex layout to host title block on the left and the
     lifted-in .page-actions on the right (Add user, Download
     template, etc.). Wraps cleanly on narrow widths. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.settings-pane-header .page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-pane-header .page-actions:empty { display: none; }

.settings-pane-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  line-height: 1.15;
}

.settings-pane-subtitle {
  font-size: 13px;
  color: var(--ink-tertiary);
  margin-top: 4px;
}

.settings-pane-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  background: var(--bg-canvas);
}

/* When existing route handlers render inside the settings pane, their
   own page-header is redundant with the settings-pane-header already
   above the content. Suppress + tighten body padding. */
.settings-pane-content .page-header { display: none; }
.settings-pane-content .page-body  { padding: 0; }
.settings-pane-content .card        { margin-bottom: var(--sp-6); }

/* Mobile: stack the rail above the content. */
@media (max-width: 760px) {
  .settings-rail {
    width: 100%;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .settings-shell { flex-direction: column; }
}

/* ─── ACCOUNT SLIDE-OVER (R102) ─────────────────────────────────────
   Compact 480px slide-over for personal settings (security + email
   notifications). Different surface from Settings — shorter, more
   focused. Opens from the user popover; closes on backdrop / X /
   Esc. Lives at body level so it overlays everything. */

.account-overlay {
  position: fixed; inset: 0;
  z-index: 95;
}
.account-overlay[hidden] { display: none; }

.account-overlay-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.32);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  animation: settingsDrawerFadeIn 200ms ease;
}

.account-overlay-panel {
  position: absolute;
  top: 0; right: 0;
  height: 100vh;
  width: 480px; max-width: 92vw;
  background: var(--bg-surface);
  box-shadow: -24px 0 64px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  animation: settingsDrawerSlideIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.account-overlay-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.account-overlay-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.account-overlay-subtitle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-overlay-header > div:first-child { flex: 1; min-width: 0; }
.account-overlay-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--ink-secondary);
  transition: all 140ms ease;
  flex-shrink: 0;
}
.account-overlay-close:hover {
  background: var(--bg-hover);
  color: var(--ink-primary);
  border-color: var(--border-strong);
}

.account-overlay-tabs {
  display: flex;
  padding: 0 16px;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.account-overlay-tab {
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: all 140ms ease;
  margin-bottom: -1px;
}
.account-overlay-tab:hover { color: var(--ink-primary); }
.account-overlay-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.account-overlay-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--bg-canvas);
}

/* Inner section card used inside the slide-over content */
.account-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.account-section-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.account-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
}
.account-section-body {
  padding: 16px;
}

/* Toggle row — full-width clickable label with checkbox on the right */
.account-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.account-toggle-row:last-child { border-bottom: none; }
.account-toggle-row:hover { background: var(--bg-hover); }
.account-toggle-text { flex: 1; }
.account-toggle-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-primary);
}
.account-toggle-hint {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 2px;
  line-height: 1.45;
}
.account-toggle-row input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Sidebar footer button helpers — kept since they're useful generally */
.nav-section--footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.nav-item--button {
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 450;
  cursor: pointer;
  text-align: left;
}

/* Animation keyframes used by both account-overlay and any leftover
   drawer-style components (keep them so animations don't 404). */
@keyframes settingsDrawerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes settingsDrawerSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ─── MESSAGES PAGE — two-pane inbox (R98) ────────────────────────
   Per kit's ui_kits/sms_inbox/index.html. Conversation list on the
   left (340px), thread pane on the right (flex). Replaces the old
   table-of-opps + modal-thread pattern. The modal thread (opened
   from inside an opportunity) still exists for context-aware reply.

   Layout note: the .main container normally just scrolls its inner
   content. For the messages page we need the panes themselves to
   scroll, not .main. The renderMessages() handler adds
   .main--messages to .main on render; route() strips it on every
   re-render, so other pages aren't affected. */
.main--messages {
  overflow: hidden !important;
  display: flex !important;
  padding: 0 !important;
}
.messages-shell {
  flex: 1;
  display: flex;
  background: var(--bg-canvas);
  min-height: 0;  /* lets children shrink to enable inner scroll */
  overflow: hidden;
}

/* ── Left rail: conversation list ── */
.messages-list {
  width: 340px;
  flex-shrink: 0;
  background: var(--bg-canvas);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.messages-list-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.messages-list-title {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.messages-list-title .messages-icon {
  width: 18px; height: 18px;
  color: var(--brand);
}
.messages-list-title span:first-of-type {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-primary);
}
.messages-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
}

.messages-search {
  width: 100%;
  padding: 9px 12px 9px 32px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-primary);
  background: var(--bg-sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  transition: all 160ms ease;
}
.messages-search:focus {
  background-color: var(--bg-surface);
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}

.messages-filter {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  background: var(--bg-sunken);
  padding: 3px;
  border-radius: 8px;
}
.messages-filter-btn {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 140ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.messages-filter-btn:hover {
  color: var(--ink-primary);
}
.messages-filter-btn.active {
  background: var(--bg-surface);
  color: var(--ink-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.messages-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 8px;
}

/* Unmatched-message banner — shown only when there are unmatched */
.messages-unmatched-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--warn-wash);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--warn-ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 160ms ease;
}
.messages-unmatched-banner:hover {
  background: color-mix(in srgb, var(--warn) 18%, var(--bg-surface));
}
.messages-banner-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--warn-ink);
}
.messages-banner-body {
  flex: 1;
}
.messages-banner-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warn-ink);
}
.messages-banner-sub {
  font-size: 11px;
  color: var(--warn-ink);
  opacity: 0.8;
  margin-top: 1px;
}
.messages-banner-arrow {
  color: var(--warn-ink);
  font-size: 14px;
}

/* Scrollable thread list */
.messages-threads {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-canvas);
}

/* Single thread row in the list */
.messages-thread-row {
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  font-family: inherit;
  transition: background 140ms ease;
}
.messages-thread-row:hover {
  background: var(--bg-hover);
}
.messages-thread-row.active {
  background: var(--brand-tint);
}
.messages-thread-marker {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
}

.messages-thread-avatar {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-wash);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.messages-thread-avatar.lg {
  width: 36px; height: 36px;
  font-size: 12.5px;
}

.messages-thread-body {
  flex: 1;
  min-width: 0;
}
.messages-thread-line1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}
.messages-thread-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.messages-thread-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  flex-shrink: 0;
}
.messages-thread-business {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messages-thread-line3 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.messages-thread-preview {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messages-thread-preview.unread {
  font-weight: 600;
  color: var(--ink-primary);
}
.messages-thread-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
}

/* Footer: gateway status */
.messages-list-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Right pane: thread ── */
.messages-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  min-width: 0;
}

.messages-pane-loading,
.messages-pane-empty {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--bg-surface);
}
.messages-pane-loading {
  color: var(--ink-tertiary);
  font-size: 13px;
}

.messages-thread-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.messages-thread-header-body {
  flex: 1;
  min-width: 0;
}
.messages-thread-header-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: -0.005em;
}
.messages-thread-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
}
.messages-thread-header-sep { opacity: 0.5; }

.messages-thread-sim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-sunken);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-secondary);
}

.messages-thread-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface);
}

/* Composer */
.messages-composer {
  padding: 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-canvas);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
}
.messages-composer-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  background: var(--bg-surface);
  color: var(--ink-primary);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.messages-composer-input:focus {
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}
.messages-composer-send {
  flex-shrink: 0;
}

/* R112: blocked thread visual treatment.
   - Row: dim avatar + name slightly so blocked threads recede from
     attention but stay legible if the user is in the Blocked filter
   - Pill: small inline 'blocked' badge in header + row
   - Banner: replaces the composer in the thread pane when blocked,
     so the broker is reminded WHY they can't send and isn't tempted
     to find a workaround */
.messages-thread-row.blocked .messages-thread-avatar { opacity: 0.5; }
.messages-thread-row.blocked .messages-thread-name { color: var(--ink-tertiary); }
.messages-thread-row.blocked .messages-thread-preview { color: var(--ink-tertiary); }
.messages-thread-blocked-pill {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(220, 70, 57, 0.1);
  color: var(--danger-ink);
  border-radius: 999px;
  vertical-align: middle;
}
.messages-thread-header.blocked .messages-thread-avatar { opacity: 0.6; }
.messages-blocked-banner {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: rgba(220, 70, 57, 0.04);
  color: var(--danger-ink);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  font-size: 13px;
}

/* Mobile collapse — show either list OR pane, never both */
@media (max-width: 760px) {
  .messages-list { width: 100%; }
  .messages-pane { display: none; }
  .messages-shell.has-selection .messages-list { display: none; }
  .messages-shell.has-selection .messages-pane { display: flex; }
}

/* ─── SMS THREAD BUBBLES (R97) ─────────────────────────────────
   Messenger-style asymmetric bubbles per the IRC kit's sms_inbox
   reference. Time + status live OUTSIDE the bubble as a caption,
   so the bubble visual mass is just the message content. */

.thread-row {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  gap: 3px;
}
/* R101: bubble-mode timeline item — strips the bordered-sunken card
   so the inner thread-row bubbles can render directly on the parent
   card background, just like the Messages page. Used for SMS
   communications inside the opp detail timeline. */
.timeline-item--bubble {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex;
  flex-direction: column;
}
.timeline-item--bubble .thread-row {
  max-width: 85%;
}

/* R101: tweak — outbound bubble lighter color for SMS inbox */
.thread-row.out {
  align-self: flex-end;
  align-items: flex-end;
}
.thread-row.in {
  align-self: flex-start;
  align-items: flex-start;
}

.thread-bubble {
  padding: 9px 13px;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--shadow-xs);
  /* radius is set inline per direction (asymmetric per-corner) */
}
.thread-row.out .thread-bubble {
  /* R102: restored to kit spec — solid violet outbound, white text.
     R101 had tried a soft tint, but the user feedback was clear:
     outbound and inbound looked too similar that way. The kit's
     intent is "outbound has a strong identity (violet), inbound is
     neutral" so the eye scans the conversation without effort. */
  background: var(--brand);
  color: var(--ink-on-brand);
  border: 1px solid var(--brand);
}
.thread-row.in .thread-bubble {
  background: var(--bg-sunken);
  color: var(--ink-primary);
  border: 1px solid var(--border);
}
.thread-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.thread-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
.thread-row.out .thread-meta { flex-direction: row-reverse; }
.thread-meta-sep { opacity: 0.5; }

.thread-status {
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.thread-status.delivered { color: var(--success-ink); }
.thread-status.sent      { color: var(--ink-tertiary); }
.thread-status.failed    { color: var(--danger-ink); }

/* Task rows — compact list inside dashboard cards */
.dash-task-list {
  display: flex;
  flex-direction: column;
}
.dash-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
.dash-task-row:last-child { border-bottom: none; }
.dash-task-row:hover { background: var(--bg-sunken); }
.dash-task-bucket {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.dash-task-overdue {
  background: rgba(181,57,46,0.10);
  color: #B5392E;
}
.dash-task-today {
  background: rgba(192,149,83,0.14);
  color: #8A6A35;
}
.dash-task-main { flex: 1; min-width: 0; }
.dash-task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-task-sub {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 1px;
}
.dash-task-due {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  flex-shrink: 0;
}

/* Activity feed */
.dash-activity-list {
  display: flex;
  flex-direction: column;
}
.dash-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
.dash-activity-row:last-child { border-bottom: none; }
.dash-activity-row:hover { background: var(--bg-sunken); }
.dash-activity-icon {
  font-size: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-sunken);
  border-radius: 4px;
  color: var(--ink-secondary);
  flex-shrink: 0;
  margin-top: 1px;
}
.dash-activity-main { flex: 1; min-width: 0; }
.dash-activity-text {
  font-size: 13px;
  color: var(--ink-primary);
  line-height: 1.4;
}
.dash-activity-meta {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 2px;
}

/* Recent comms */
.dash-comms-list {
  display: flex;
  flex-direction: column;
}
.dash-comms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
.dash-comms-row:last-child { border-bottom: none; }
.dash-comms-row:hover { background: var(--bg-sunken); }
.dash-comms-channel {
  font-size: 9.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 3px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.dash-comms-sms { background: rgba(43,108,196,0.10); color: #2B6CC4; }
.dash-comms-ema, .dash-comms-email { background: rgba(192,149,83,0.14); color: #8A6A35; }
.dash-comms-cal, .dash-comms-call  { background: rgba(45,122,85,0.10); color: #2D7A55; }
.dash-comms-main { flex: 1; min-width: 0; }
.dash-comms-preview {
  font-size: 13px;
  color: var(--ink-primary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-comms-meta {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 2px;
}

/* Generic dash-table — used for stuck deals, ripe renewals */
.dash-table {
  display: flex;
  flex-direction: column;
}
.dash-table-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
.dash-table-row:last-child { border-bottom: none; }
.dash-table-row:hover { background: var(--bg-sunken); }
.dash-table-main { flex: 1; min-width: 0; }
.dash-table-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  margin-bottom: 4px;
}
.dash-table-sub {
  font-size: 11px;
  color: var(--ink-tertiary);
}
.dash-table-right {
  text-align: right;
  flex-shrink: 0;
}
.dash-table-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
}

/* Page-actions flex so toolbar items align right */
.page-header .page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── R58: link styling ─────────────────────────────────────────────── */
.link-record,
.link-phone,
.link-email {
  color: var(--ink-primary);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.link-record:hover,
.link-phone:hover,
.link-email:hover {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}
.link-phone, .link-email {
  font-family: var(--font-mono);
}

/* ─── R58: Sidebar search trigger ──────────────────────────────────── */
.sidebar-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 8px 12px 4px;
  padding: 8px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-tertiary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 120ms ease, color 120ms ease;
}
.sidebar-search-btn:hover {
  border-color: var(--border-strong);
  color: var(--ink-secondary);
}
.sidebar-search-btn span { flex: 1; }
.sidebar-search-kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ─── R58: Command palette ─────────────────────────────────────────── */
.cmdk-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.45);
  backdrop-filter: blur(2px);
}
.cmdk-panel {
  position: relative;
  width: min(640px, calc(100% - 32px));
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cmdk-icon { color: var(--ink-tertiary); flex-shrink: 0; }
.cmdk-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--ink-primary);
  font-family: inherit;
}
.cmdk-esc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 3px;
}
.cmdk-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.cmdk-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-tertiary);
  font-size: 13px;
}
.cmdk-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding: 10px 12px 4px;
}
.cmdk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 80ms ease;
}
.cmdk-row-selected { background: var(--bg-sunken); }
.cmdk-row-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-secondary);
  flex-shrink: 0;
}
.cmdk-row-main { flex: 1; min-width: 0; }
.cmdk-row-primary {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-row-secondary {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-row-type {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

/* ─── R58: Filter bar (opp list) ───────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.filter-search {
  flex: 1 1 240px;
  min-width: 200px;
}
.filter-select {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-primary);
  cursor: pointer;
  max-width: 180px;
}
.filter-select:hover { border-color: var(--border-strong); }
.filter-select:focus {
  outline: none;
  border-color: var(--border-focus);
}
.filter-clear {
  font-size: 12px;
  color: var(--ink-secondary);
}

/* ─── R58: Kanban multi-select highlight ───────────────────────────── */
.kanban-card.kanban-card-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--accent-tint);
}

/* ─── R134: Saved views dropdown on opps list ──────────────────────── */
.views-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 0 0;
  margin-bottom: 4px;
}
.views-bar-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  font-family: inherit;
  min-width: 200px;
  max-width: 320px;
  transition: background 120ms ease, border-color 120ms ease;
}
.views-bar-trigger:hover {
  background: var(--bg-sunken);
  border-color: var(--border-strong, var(--ink-tertiary));
}
.views-bar-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.views-bar-badge {
  font-size: 9.5px;
  background: rgba(110, 73, 229, 0.12);
  color: var(--brand);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.views-bar-update,
.views-bar-clear {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink-secondary);
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease;
}
.views-bar-update:hover { background: var(--bg-sunken); color: var(--brand); }
.views-bar-clear:hover  { background: var(--bg-sunken); color: var(--danger-ink); }

.views-bar-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 280px;
  max-width: 360px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  max-height: 420px;
  overflow-y: auto;
}
.views-bar-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  padding: 6px 14px 4px;
  font-weight: 600;
}
.views-bar-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.views-bar-row-load {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-primary);
  font-family: inherit;
  text-align: left;
}
.views-bar-row-load:hover { background: var(--bg-sunken); }
.views-bar-row-edit {
  padding: 4px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-tertiary);
  margin-right: 4px;
  border-radius: 4px;
}
.views-bar-row-edit:hover { background: var(--bg-sunken); color: var(--ink-primary); }
.views-bar-mini-badge,
.views-bar-creator {
  font-size: 10px;
  color: var(--ink-tertiary);
  padding: 1px 6px;
  background: var(--bg-sunken);
  border-radius: 8px;
  letter-spacing: 0.02em;
}
.views-bar-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.views-bar-action {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--brand);
  font-family: inherit;
}
.views-bar-action:hover { background: var(--bg-sunken); }
.views-bar-empty {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink-tertiary);
  font-style: italic;
}

/* ─── R132: SMS rate-bypass — sitewide banner + card ─────────────── */
.rate-bypass-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.rate-bypass-banner-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.rate-bypass-banner-text {
  flex: 1;
  line-height: 1.45;
}
.rate-bypass-banner-action {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 120ms ease;
}
.rate-bypass-banner-action:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* The SMS-rules-page master-toggle card. Subtle by default; bold
   red border when limits are off so it's unmistakable. */
.rate-bypass-card.is-active {
  border: 2px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 4%, var(--bg-surface));
}

/* ─── R126: Select-all-matching banner on opps list ─────────────── */
.opp-select-all-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--brand-wash, rgba(110, 73, 229, 0.06));
  border: 1px solid var(--border);
  border-bottom: none;
  font-size: 13px;
  color: var(--ink-secondary);
  border-top-left-radius: var(--r);
  border-top-right-radius: var(--r);
}
.opp-select-all-banner .link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.opp-select-all-banner .link-btn:hover {
  color: var(--brand-deep, var(--brand));
}
.opp-select-all-banner .link-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ─── R127: Kanban column-header select-all checkbox ────────────────
   Per-card checkboxes were too noisy. Now there's one checkbox in
   each column header next to the count. Click toggles ALL cards in
   that column. Indeterminate state when only some are selected. */
.kanban-col-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kanban-col-select-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease;
}
.kanban-col-select-all:hover {
  background: var(--bg-sunken);
}
.kanban-col-cb {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ─── R60: Admin site-content page ──────────────────────────────────── */
.sc-row { display: block; margin-bottom: 16px; }
.sc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-primary);
}
.sc-toggle input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
}
.sc-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .sc-trust-grid { grid-template-columns: 1fr; }
}
.sc-trust-card {
  padding: 14px;
  background: var(--bg-sunken);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.sc-form { display: flex; flex-direction: column; }
.sc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 12px 0 4px;
}
.sc-trust-card .sc-label:first-child { margin-top: 0; }
.sc-input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-primary);
  transition: border-color 120ms ease;
}
.sc-input:focus {
  outline: none;
  border-color: var(--border-focus);
}
.sc-html-area {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-primary);
  line-height: 1.55;
  resize: vertical;
}
.sc-html-area:focus {
  outline: none;
  border-color: var(--border-focus);
}
.sc-warning {
  background: rgba(192, 149, 83, 0.10);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-secondary);
  margin-bottom: 14px;
  border-radius: 4px;
}
.sc-warning strong { color: var(--ink-primary); }
.sc-actions {
  position: sticky;
  bottom: 0;
  margin-top: 24px;
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-canvas) 30%);
}

/* ─── R60: Site content admin editor ───────────────────────────────── */
.sc-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.sc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-secondary);
  cursor: pointer;
}
.sc-toggle input[type="checkbox"] { cursor: pointer; }

.sc-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .sc-trust-grid { grid-template-columns: 1fr; } }

.sc-trust-card {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.sc-form { display: flex; flex-direction: column; gap: 4px; }

.sc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 4px;
  margin-top: 8px;
}
.sc-trust-card .sc-label:first-child,
.sc-form .sc-label:first-child { margin-top: 0; }

.sc-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-primary);
  margin-bottom: 8px;
  outline: none;
  transition: border-color 120ms ease;
}
.sc-input:focus { border-color: var(--border-focus); }

textarea.sc-input { resize: vertical; min-height: 60px; line-height: 1.5; }

.sc-html-area {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-primary);
  outline: none;
  resize: vertical;
}
.sc-html-area:focus { border-color: var(--border-focus); }

.sc-warning {
  background: #FCEBEB;
  border: 1px solid #F2C7BF;
  color: #8B2D24;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 14px;
}
[data-theme="dark"] .sc-warning {
  background: rgba(181, 57, 46, 0.16);
  border-color: rgba(181, 57, 46, 0.30);
  color: #F2A6A0;
}

.sc-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: sticky;
  bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

/* ─── R62: Custom recurrence pattern editor ────────────────────────── */
.recur-pattern-builder {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recur-pattern-builder > select {
  align-self: flex-start;
}
.recur-pattern-controls .recur-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-secondary);
}
.recur-pattern-controls .recur-row input[type="number"],
.recur-pattern-controls .recur-row select {
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--ink-primary);
}
.recur-weekdays {
  gap: 6px;
}
.recur-wd-chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.recur-wd-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.recur-wd-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--ink-secondary);
  transition: all 120ms ease;
}
.recur-wd-chip input:checked + span {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}
.recur-pattern-summary {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent-ink);
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  letter-spacing: 0.02em;
}

/* ─── R68: Notification bell + dropdown ─────────────────────────────── */
.notif-wrap {
  position: relative;
  padding: 8px 16px;
}
.notif-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-secondary);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: background 120ms;
}
.notif-btn:hover {
  background: var(--bg-sunken);
  color: var(--ink-primary);
}
.notif-btn.has-unread {
  color: var(--ink-primary);
}
.notif-label {
  flex: 1;
}
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0;
  line-height: 1;
}
.notif-badge[hidden] { display: none; }

.notif-panel {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 8px;
  right: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  z-index: 200;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-primary);
  background: var(--bg-sunken);
}
.notif-mark-all {
  background: transparent;
  border: 0;
  color: var(--accent-ink);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 6px;
}
.notif-mark-all:hover { text-decoration: underline; }

.notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 420px;
}
.notif-empty {
  padding: 24px 18px;
  font-size: 12.5px;
  color: var(--ink-tertiary);
  text-align: center;
}

.notif-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background 120ms;
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: var(--bg-sunken); }
.notif-row.unread { background: var(--accent-tint); }
.notif-row.unread:hover { background: var(--accent-muted); }

.notif-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-app);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--accent-ink);
  border: 1px solid var(--border);
}
.notif-row.unread .notif-icon {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.notif-body { flex: 1; min-width: 0; }
.notif-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-primary);
  margin-bottom: 2px;
  line-height: 1.3;
  word-wrap: break-word;
}
.notif-sub {
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.4;
  margin-bottom: 3px;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-time {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.notif-dismiss {
  background: transparent;
  border: 0;
  color: var(--ink-tertiary);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  line-height: 1;
  align-self: flex-start;
  opacity: 0;
  transition: opacity 120ms;
}
.notif-row:hover .notif-dismiss { opacity: 1; }
.notif-dismiss:hover { color: var(--ink-primary); }

/* R115: doc preview spinner */
.spinner-loader {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
  display: inline-block;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}