/* ============================================================
   IBEX CRM - Comprehensive Styles
   ============================================================ */

:root {
  /* Ibex Associates Brand Colors: Black, Gold, White */
  --primary-dark: #000000;
  --primary: #111111;
  --primary-light: #2A2A2A;
  --accent: #C9A227;
  --accent-light: #E8C55A;
  --accent-dark: #A07D18;
  --sidebar-bg: #0A0A0A;
  --sidebar-text: #CCCCCC;
  --sidebar-active-bg: rgba(201, 162, 39, 0.15);
  --sidebar-active: #C9A227;

  /* ── Global design tokens ── */
  --bg:             #F5F5F5;   /* page / layout background */
  --surface:        #FFFFFF;   /* card / panel background */
  --surface-2:      #F3F4F6;   /* slightly elevated surface (table headers, hover fills) */
  --white:          #FFFFFF;   /* alias — kept for legacy components */
  --text:           #1A1A1A;   /* legacy alias for --text-primary */
  --text-primary:   #111827;   /* high-contrast primary body text */
  --text-secondary: #374151;   /* readable subordinate text */
  --text-muted:     #6B7280;   /* labels, placeholders, hints */
  --border:         #E0E0E0;   /* dividers and outlines */
  --input-bg:       #FFFFFF;   /* form control fill */
  --input-text:     #111827;   /* form control text */
  --item-hover:     rgba(0,0,0,0.04);  /* list-row hover */
  --hover-bg:       rgba(0,0,0,0.04);  /* generic element hover fill */
  --accent-subtle:  rgba(201,162,39,0.10); /* tinted accent fill for active states */
  --card-bg:        #FFFFFF;   /* card/panel surfaces (used as inline style fallback) */
  --bg-subtle:      #F8FAFC;   /* slightly elevated surface — table rows, sidebar blocks */

  --success: #2E7D32;
  --warning: #E65100;
  --danger: #C62828;
  --info: #1565C0;
  --header-bg: #FFFFFF;
  --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --sidebar-width: 240px;
  --header-height: 60px;
  --transition: all 0.2s ease;

  /* ══════════════════════════════════════════════════════════════
     IBEX DESIGN TOKEN SYSTEM  v1.0
     Single source of truth for all surfaces, text, borders,
     brand color, semantic states, and interactive states.
     All components MUST reference these tokens — no hardcoded colors.
     Default values: dark theme (Ibex primary theme)
     Light theme overrides: html.theme-ibex-light block below.
     ══════════════════════════════════════════════════════════════ */

  /* ── Surfaces ── */
  --ibx-bg:         #0b0b0c;        /* app shell / page background */
  --ibx-surface-1:  #121213;        /* primary panel / card */
  --ibx-surface-2:  #18181a;        /* elevated panel / table header / strip */
  --ibx-surface-3:  #202024;        /* hover / selected surface */
  --ibx-surface-4:  #2a2a30;        /* strongest elevated fill */

  /* Brand tint fills */
  --ibx-tint-1:     rgba(212,160,23,0.06);
  --ibx-tint-2:     rgba(212,160,23,0.10);
  --ibx-tint-3:     rgba(212,160,23,0.16);

  /* ── Text ── */
  --ibx-text-1:       #f5f2ea;      /* primary text */
  --ibx-text-2:       #c9c1b3;      /* secondary text */
  --ibx-text-3:       #9f9788;      /* muted / helper text */
  --ibx-text-4:       #746d61;      /* disabled / very muted */
  --ibx-text-inverse: #111111;      /* text on gold backgrounds */

  /* ── Brand ── */
  --ibx-gold:         #d4a017;      /* main brand gold */
  --ibx-gold-strong:  #e0b63a;      /* hover / emphasized gold */
  --ibx-gold-soft:    rgba(212,160,23,0.16);
  --ibx-gold-softer:  rgba(212,160,23,0.10);
  --ibx-gold-border:  rgba(212,160,23,0.32);

  /* ── Borders / Lines ── */
  --ibx-border-1:  rgba(255,255,255,0.08);   /* default subtle */
  --ibx-border-2:  rgba(255,255,255,0.14);   /* stronger separation */
  --ibx-border-3:  rgba(255,255,255,0.22);   /* focused / emphasized */
  --ibx-divider:   rgba(212,160,23,0.12);    /* branded divider */

  /* ── Semantic States ── */
  --ibx-success:    #2fb36d;
  --ibx-success-bg: rgba(47,179,109,0.16);
  --ibx-warning:    #d4881e;
  --ibx-warning-bg: rgba(212,136,30,0.16);
  --ibx-warning-tint:           rgba(212,136,30,0.07);
  --ibx-warning-border:         rgba(212,136,30,0.28);
  --ibx-warning-border-hover:   rgba(212,136,30,0.50);
  --ibx-danger:              #d94b45;
  --ibx-danger-bg:           rgba(217,75,69,0.16);
  --ibx-danger-tint:         rgba(217,75,69,0.07);
  --ibx-danger-border:       rgba(217,75,69,0.25);
  --ibx-danger-border-hover: rgba(217,75,69,0.45);
  --ibx-info:       #4d8fd6;
  --ibx-info-bg:    rgba(77,143,214,0.16);

  /* ── Pipeline Stage Colors ── */
  --ibx-stage-draft:         var(--ibx-text-3);
  --ibx-stage-draft-bg:      rgba(255,255,255,0.08);
  --ibx-stage-progress:      #5aabff;
  --ibx-stage-progress-bg:   rgba(52,130,246,0.20);
  --ibx-stage-quoted:        var(--ibx-gold);
  --ibx-stage-quoted-bg:     var(--ibx-gold-border);
  --ibx-stage-submitted:     var(--ibx-success);
  --ibx-stage-submitted-bg:  var(--ibx-success-bg);
  --ibx-stage-new-lead:      #b0b0b0;
  --ibx-stage-new-lead-bg:   rgba(255,255,255,0.09);

  /* ── Status Indicator Semantic Tokens ── */
  /* All state colors alias back to semantic ibx tokens — no hardcoded hex here. */
  --ibx-status-connected:    var(--ibx-success);
  --ibx-status-loading:      var(--ibx-warning);
  --ibx-status-disconnected: var(--ibx-danger);
  --ibx-status-error:        var(--ibx-danger);
  --ibx-status-success:      var(--ibx-success);
  --ibx-status-warning:      var(--ibx-warning);
  --ibx-status-active:       var(--ibx-gold);
  --ibx-status-inactive:     var(--ibx-text-3);

  /* ── Interactive ── */
  --ibx-hover-overlay:  rgba(255,255,255,0.04);
  --ibx-active-overlay: rgba(255,255,255,0.07);
  --ibx-focus-ring:     0 0 0 2px rgba(212,160,23,0.34);
  --ibx-shadow-1:       0 8px 24px rgba(0,0,0,0.28);
  --ibx-shadow-2:       0 14px 34px rgba(0,0,0,0.36);

  /* ── Controls ── */
  --ibx-control-bg:           #171719;
  --ibx-control-bg-hover:     #1d1d21;
  --ibx-control-bg-active:    #25252a;
  --ibx-control-border:       rgba(255,255,255,0.10);
  --ibx-control-border-hover: rgba(212,160,23,0.28);

  /* ── Toggle track (OFF state — visible dark neutral) ── */
  --ibx-toggle-track-off: #3a3a42;
  --ibx-toggle-track-on:  var(--ibx-info);  /* blue = universally readable as enabled; gold reserved for nav/focus */
  --ibx-toggle-thumb:     #f7f7f8;

  /* ── Tables ── */
  --ibx-table-head:       #1a1a1d;
  --ibx-table-row:        transparent;
  --ibx-table-row-hover:  rgba(212,160,23,0.06);
  --ibx-table-row-active: rgba(212,160,23,0.10);

  /* ── Radii ── */
  --ibx-radius-sm: 8px;
  --ibx-radius-md: 12px;
  --ibx-radius-lg: 16px;

  /* ── Transitions ── */
  --ibx-speed-fast: 140ms;
  --ibx-speed-med:  180ms;

  /* ── Display Palette ─────────────────────────────────────────
     Vibrant accent colors used by KPI tiles, analytics tables,
     fuq-buckets, and ws-panel header tints.  These are NOT
     semantic tokens — they carry no implied meaning.  Semantic
     usage (danger, warning, success) should use --ibx-danger /
     --ibx-warning / --ibx-success instead.
     Light theme overrides in html.theme-ibex-light block below.
     ── */
  --ibx-palette-green:        #4ade80;
  --ibx-palette-red:          #f87171;
  --ibx-palette-blue:         #60a5fa;
  --ibx-palette-blue-bright:  #93c5fd;
  --ibx-palette-yellow:       #fbbf24;
  --ibx-palette-purple:       #c084fc;
  --ibx-palette-orange:       #fb923c;
}

/* ============================================================
   DARK MODE — html.dark-mode variable overrides
   Applied to <html> (not body) so the early-init <script> in
   <head> can set the class before body renders — preventing any
   flash of the light theme on page load.
   All component CSS uses these tokens, so the dark theme is
   automatic for most of the portal. Targeted overrides below
   handle the handful of hardcoded literal colors.
   ============================================================ */

html.dark-mode {
  /* ── Surface palette ── */
  --bg:              #111111;   /* page / content background */
  --surface:         #1C1C1C;   /* card / panel background */
  --surface-2:       #252525;   /* elevated surface — table headers, selected rows */
  --white:           #1C1C1C;   /* legacy alias */
  --text:            #E0E0E0;   /* legacy alias for --text-primary */
  --text-primary:    #E8E8E8;   /* high-contrast primary text */
  --text-secondary:  #B8B8B8;   /* readable subordinate text */
  --text-muted:      #888888;   /* labels, placeholders */
  --border:          #2E2E2E;   /* dividers and borders */
  --input-bg:        #252525;   /* form control fill */
  --input-text:      #E8E8E8;   /* form control text */
  --item-hover:      rgba(255,255,255,0.05); /* list-row hover */
  --hover-bg:        rgba(255,255,255,0.06); /* generic element hover fill */
  --accent-subtle:   rgba(201,162,39,0.12);  /* tinted accent fill for active states */
  --card-bg:         #1C1C1C;   /* card/panel surfaces */
  --bg-subtle:       rgba(255,255,255,0.04); /* slightly elevated fill */

  /* ── Chrome ── */
  --header-bg:       #141414;   /* top bar */

  /* ── Shadows (heavier in dark for depth) ── */
  --shadow:          0 1px 3px rgba(0,0,0,0.55);
  --shadow-md:       0 4px 8px rgba(0,0,0,0.55);
  --shadow-lg:       0 10px 20px rgba(0,0,0,0.65);

  /* ── Panel system tokens ── */
  --cc-panel-bg:     #1C1C1C;
  --cc-panel-border: #2E2E2E;
  --cc-dock-bg:      #0E0E0E;   /* darker than --bg for stronger command surface */
}

/* ── Inputs and form controls — dark mode ── */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.dark-mode textarea {
  background: var(--input-bg, #252525) !important;
  color: var(--ibx-text-2) !important;   /* was --input-text / #E8E8E8 — too bright */
  border-color: var(--border) !important;
}
html.dark-mode select {
  background: var(--input-bg, #252525) !important;
  color: var(--ibx-text-2) !important;   /* normal selected-value colour */
  border-color: var(--border) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: var(--ibx-text-3) !important; }

/* ── Select placeholder state ─────────────────────────────────────
   .ibx-placeholder is toggled by JS (_initPlaceholders) whenever
   a <select>'s value is '' (the "— Select —" or "All types" option).
   Specificity is enough to beat the dark-mode select rule above
   because this declaration comes after it in the cascade.
   ── */
select.ibx-placeholder {
  color: var(--ibx-text-3) !important;   /* muted — matches input ::placeholder */
}

/* ── Top search bar ── */
html.dark-mode .topbar-search-input { background: #252525; color: var(--text); }

/* ── Top header ── */
html.dark-mode .top-header {
  background: var(--header-bg);
  border-bottom-color: var(--border);
}

/* ── User menu dropdown ── */
html.dark-mode .user-menu-dropdown { background: #1E1E1E; border-color: var(--border); }
html.dark-mode .user-menu-header   { background: #252525; }
html.dark-mode .user-menu-item:hover { background: #2A2A2A; }
html.dark-mode .user-menu-divider  { background: var(--border); }

/* ── Summary tiles ── */
html.dark-mode .summary-tile { background: var(--ibx-surface-1); border-color: var(--ibx-border-1); }

/* ── Dash cards (old-style) ── */
html.dark-mode .dash-card { background: var(--white); border-color: var(--border); }
html.dark-mode .dash-card-header { border-bottom-color: var(--border); }
html.dark-mode .dash-list-item:hover { background: rgba(255,255,255,0.04); }
html.dark-mode .dash-empty { color: var(--text-muted); }

/* ── Tables ── */
html.dark-mode th { background: #252525; color: var(--text); border-color: var(--border); }
html.dark-mode td { border-color: var(--border); }
html.dark-mode tr:nth-child(even) { background: rgba(255,255,255,0.025); }
html.dark-mode tr.clickable:hover { background: rgba(255,255,255,0.05); }
html.dark-mode .dash-renewal-table tbody tr:hover { background: rgba(255,255,255,0.05); }

/* ── Links and linked record names ──────────────────────────────────────────
   --primary is #111111 (near-black) and has no dark-mode override. On dark
   surfaces (#111111 page / #1C1C1C panels) this produces near-zero contrast.
   Override anchor elements and all inline style="color:var(--primary)" spans
   with gold — high contrast on dark backgrounds and on-brand. */
html.dark-mode a                                  { color: #C9A227; }
html.dark-mode a:hover                            { color: #E8C55A; }
html.dark-mode a:visited                          { color: #B8911F; }
html.dark-mode a:focus                            { color: #E8C55A; outline-color: #C9A227; }
/* Catch-all for inline-styled linked names (client list, contact list, etc.)
   style="color:var(--primary)" is used throughout — impossible to re-theme via
   the variable alone because --primary is also used as button/badge backgrounds. */
html.dark-mode [style*="color:var(--primary)"]    { color: #C9A227 !important; }

/* ── Pipeline stages ── */
html.dark-mode .pipeline-stages { background: var(--white); }
html.dark-mode .pipeline-stage { background: #252525; border-color: var(--border); color: var(--text); }
html.dark-mode .pipeline-stage:hover { background: #2A2A2A; }
html.dark-mode .pipeline-count { color: var(--text); }
html.dark-mode .pipeline-label { color: var(--text-muted); }
html.dark-mode .pipeline-premium { color: var(--text-muted); }

/* ── Expiry cards ── */
html.dark-mode .expiry-card { background: #252525; border-color: var(--border); }

/* ── Activity feed ── */
html.dark-mode .activity-item { border-bottom-color: var(--border); }
html.dark-mode .activity-item.clickable:hover { background: rgba(255,255,255,0.04); }

/* ── Stage mini badges ── */
html.dark-mode .stage-mini-badge.new_lead   { background: rgba(30,64,175,0.3);   color: #93c5fd; }
html.dark-mode .stage-mini-badge.submitted  { background: rgba(180,83,9,0.3);    color: #fcd34d; }
html.dark-mode .stage-mini-badge.quoted     { background: rgba(109,40,217,0.3);  color: #c084fc; }
html.dark-mode .stage-mini-badge.bound      { background: rgba(21,128,61,0.3);   color: #6ee7b7; }
html.dark-mode .stage-mini-badge.lost       { background: rgba(185,28,28,0.25);  color: #fca5a5; }

/* ── Modals ── */
html.dark-mode .modal-overlay { background: rgba(0,0,0,0.75); }
html.dark-mode .modal-content,
html.dark-mode .modal-body    { background: var(--surface, #1C1C1C); border-color: var(--border); }
html.dark-mode .modal-header  { border-bottom-color: var(--border); }
html.dark-mode .modal-footer  { border-top-color: var(--border); }

/* ── Client detail panels ── */
html.dark-mode .client-detail-sticky { background: var(--bg); }
html.dark-mode .detail-tab-bar { border-bottom-color: var(--border); }
html.dark-mode .detail-tab.active { border-bottom-color: var(--accent); }

/* ── Renewal forecast bar ── */
html.dark-mode .renewal-forecast-bar { background: #252525; border-color: var(--border); }
html.dark-mode .forecast-divider     { background: var(--border); }

/* ── Topbar icon buttons ── */
html.dark-mode .topbar-icon-btn:hover { background: #252525; }

/* ============================================================
   IBEX LIGHT THEME — html.theme-ibex-light
   Clean, neutral palette with gold accents. No dark-mode class.
   ============================================================ */
html.theme-ibex-light {
  /* ── ibx token overrides for light theme ── */
  --ibx-bg:         #f5f5f5;
  --ibx-surface-1:  #ffffff;
  --ibx-surface-2:  #f3f4f6;
  --ibx-surface-3:  #e8e9eb;
  --ibx-surface-4:  #dcdde0;
  --ibx-tint-1:     rgba(201,162,39,0.06);
  --ibx-tint-2:     rgba(201,162,39,0.10);
  --ibx-tint-3:     rgba(201,162,39,0.16);
  --ibx-text-1:       #111111;
  --ibx-text-2:       #374151;
  --ibx-text-3:       #6b7280;
  --ibx-text-4:       #9ca3af;
  --ibx-text-inverse: #ffffff;
  --ibx-border-1:  rgba(0,0,0,0.08);
  --ibx-border-2:  rgba(0,0,0,0.14);
  --ibx-border-3:  rgba(0,0,0,0.22);
  --ibx-divider:   rgba(201,162,39,0.15);
  --ibx-hover-overlay:  rgba(0,0,0,0.04);
  --ibx-active-overlay: rgba(0,0,0,0.07);
  --ibx-focus-ring:     0 0 0 2px rgba(201,162,39,0.40);
  --ibx-shadow-1:       0 8px 24px rgba(0,0,0,0.10);
  --ibx-shadow-2:       0 14px 34px rgba(0,0,0,0.14);
  --ibx-control-bg:           #f0f0f2;
  --ibx-control-bg-hover:     #e5e5e8;
  --ibx-control-bg-active:    #d8d8dc;
  --ibx-control-border:       rgba(0,0,0,0.12);
  --ibx-control-border-hover: rgba(201,162,39,0.40);
  --ibx-toggle-track-off: #b0b0b8;
  --ibx-table-head:       #f3f4f6;
  --ibx-table-row-hover:  rgba(201,162,39,0.06);
  --ibx-table-row-active: rgba(201,162,39,0.10);

  /* Display Palette — light theme (higher-contrast equivalents) */
  --ibx-palette-green:        #15803d;
  --ibx-palette-red:          #b91c1c;
  --ibx-palette-blue:         #1d4ed8;
  --ibx-palette-blue-bright:  #1d4ed8;
  --ibx-palette-yellow:       #b45309;   /* amber-700 — normalized from the former #854d0e/b45309 split */
  --ibx-palette-purple:       #6d28d9;
  --ibx-palette-orange:       #c2410c;

  --bg:              #F5F5F5;
  --surface:         #FFFFFF;
  --surface-2:       #F3F4F6;
  --white:           #FFFFFF;
  --text:            #1A1A1A;
  --text-primary:    #111827;
  --text-secondary:  #374151;
  --text-muted:      #6B7280;
  --border:          #E0E0E0;
  --input-bg:        #FFFFFF;
  --input-text:      #111827;
  --item-hover:      rgba(0,0,0,0.04);
  --hover-bg:        rgba(0,0,0,0.04);
  --accent-subtle:   rgba(201,162,39,0.09);
  --header-bg:       #FFFFFF;
  --shadow:          0 1px 3px rgba(0,0,0,0.10);
  --shadow-md:       0 4px 8px rgba(0,0,0,0.12);
  --shadow-lg:       0 10px 20px rgba(0,0,0,0.15);
  --cc-panel-bg:     #FFFFFF;
  --cc-panel-border: #E0E0E0;
  --cc-dock-bg:      #EFEFEF;
  /* Dock tokens — light dock needs dark text */
  --dock-bg:         #EFEFEF;
  --dock-border:     rgba(0,0,0,0.10);
  --dock-hdr-bg:     rgba(0,0,0,0.05);
  --dock-text:       #1A1A1A;
  --dock-muted:      #5A5A5A;
  --dock-item-hover: rgba(0,0,0,0.06);
  /* Keep gold accent */
  --accent:          #C9A227;
  --primary:         #C9A227;
}

html.theme-ibex-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.theme-ibex-light select,
html.theme-ibex-light textarea {
  background: var(--input-bg, #FFFFFF) !important;
  color: var(--input-text, #111827) !important;
  border-color: var(--border, #D1D5DB) !important;
}
html.theme-ibex-light input::placeholder,
html.theme-ibex-light textarea::placeholder { color: var(--text-muted, #9CA3AF) !important; }

/* ── Submission workspace is always dark — exempt from light-theme input override ──
   Specificity (0,2,1) beats the rule above (0,1,1), restoring dark workspace fills
   even when the surrounding portal is in light theme.                               */
html.theme-ibex-light .sw2-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.theme-ibex-light .sw2-shell select,
html.theme-ibex-light .sw2-shell textarea {
  background: var(--sw-surf3, #242018) !important;
  color: var(--sw-text, #E8E4DC) !important;
  border-color: var(--sw-border, #2C2820) !important;
}
html.theme-ibex-light .sw2-shell input::placeholder,
html.theme-ibex-light .sw2-shell textarea::placeholder { color: var(--sw-muted-dim, #504A40) !important; }

html.theme-ibex-light .top-header {
  background: #FFFFFF;
  border-bottom-color: #E5E7EB;
}
html.theme-ibex-light .nav-rail {
  background: #1A1A1A;
  border-right-color: rgba(201,162,39,0.25);
}
html.theme-ibex-light .dock-panel {
  background: #EFEFEF;
  border-right-color: #DADADA;
}
html.theme-ibex-light .dock-section-hdr { background: rgba(0,0,0,0.05); }
html.theme-ibex-light .dock-section-hdr:hover { background: rgba(0,0,0,0.08); }
html.theme-ibex-light .dock-search-wrap { background: #FFF; border-color: #D1D5DB; }
html.theme-ibex-light .dock-search-input { color: #1A1A1A !important; }
html.theme-ibex-light .dock-search-input::placeholder { color: #9CA3AF !important; }
html.theme-ibex-light a { color: #B8911F; }
html.theme-ibex-light a:hover { color: #C9A227; }
html.theme-ibex-light .modal-overlay { background: rgba(0,0,0,0.45); }
html.theme-ibex-light .modal-content,
html.theme-ibex-light .modal-body { background: var(--surface, #FFFFFF); color: var(--text-primary, #111827); border-color: var(--border, #E0E0E0); }
html.theme-ibex-light .modal-header { border-bottom-color: var(--border, #E5E7EB); color: var(--text-primary, #111827); }
html.theme-ibex-light .modal-footer { border-top-color: var(--border, #E5E7EB); background: var(--surface-2, #F3F4F6); }
html.theme-ibex-light th { background: #F3F4F6; color: #1A1A1A; border-color: #E5E7EB; }
html.theme-ibex-light td { border-color: #E5E7EB; }
html.theme-ibex-light tr.clickable:hover { background: rgba(0,0,0,0.03); }
html.theme-ibex-light .user-menu-dropdown { background: #FFFFFF; border-color: #E5E7EB; }
html.theme-ibex-light .user-menu-header   { background: #F9FAFB; }
html.theme-ibex-light .user-menu-item:hover { background: #F3F4F6; }

/* ============================================================
   IBEX CLASSIC THEME — html.dark-mode.theme-ibex-classic
   Warm dark palette: deep brown-black, warm amber tones.
   Inherits dark-mode variables then overrides selectively.
   ============================================================ */
html.dark-mode.theme-ibex-classic {
  --bg:              #181410;
  --surface:         #221E19;
  --surface-2:       #2A2420;
  --white:           #221E19;
  --text:            #DDD5C8;
  --text-primary:    #DDD5C8;
  --text-secondary:  #AA9980;
  --text-muted:      #7D7163;
  --border:          #362E25;
  --input-bg:        #2A2420;
  --input-text:      #DDD5C8;
  --item-hover:      rgba(255,255,255,0.04);
  --hover-bg:        rgba(255,255,255,0.05);
  --accent-subtle:   rgba(212,168,50,0.14);
  --header-bg:       #1C1814;
  --cc-panel-bg:     #221E19;
  --cc-panel-border: #362E25;
  --cc-dock-bg:      #131008;
  /* Warmer gold accent */
  --accent:          #D4A832;
  --primary:         #D4A832;
}
html.dark-mode.theme-ibex-classic .nav-rail {
  background: #0E0B07;
  border-right-color: rgba(212,168,50,0.18);
}
html.dark-mode.theme-ibex-classic .dock-panel {
  background: var(--cc-dock-bg);
  border-right-color: rgba(212,168,50,0.12);
}
html.dark-mode.theme-ibex-classic .top-header {
  background: #1C1814;
  border-bottom-color: #2E2620;
}
html.dark-mode.theme-ibex-classic input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.dark-mode.theme-ibex-classic select,
html.dark-mode.theme-ibex-classic textarea {
  background: var(--input-bg, #2A2420) !important;
  color: var(--input-text, #DDD5C8) !important;
  border-color: var(--border, #36302A) !important;
}
html.dark-mode.theme-ibex-classic input::placeholder,
html.dark-mode.theme-ibex-classic textarea::placeholder { color: var(--text-muted, #7D7163) !important; }
html.dark-mode.theme-ibex-classic a { color: #D4A832; }
html.dark-mode.theme-ibex-classic a:hover { color: #E8C55A; }

/* ============================================================
   HIGH CONTRAST THEME — html.theme-ibex-hc
   WCAG AA/AAA target: black surface, pure white text, gold accent.
   Minimum 7:1 contrast ratio for primary text.
   ============================================================ */
html.theme-ibex-hc {
  --bg:              #000000;
  --surface:         #0A0A0A;
  --surface-2:       #111111;
  --white:           #0A0A0A;
  --text:            #FFFFFF;
  --text-primary:    #FFFFFF;
  --text-secondary:  #EEEEEE;
  --text-muted:      #BBBBBB;
  --border:          #555555;
  --input-bg:        #111111;
  --input-text:      #FFFFFF;
  --item-hover:      rgba(255,255,255,0.10);
  --hover-bg:        rgba(255,255,255,0.12);  /* strong enough to see on pure black */
  --accent-subtle:   rgba(255,215,0,0.18);    /* gold-tint bg for active state */
  --header-bg:       #0A0A0A;
  --cc-panel-bg:     #111111;
  --cc-panel-border: #444444;
  --cc-dock-bg:      #000000;
  --accent:          #FFD700;   /* pure gold — high visibility */
  --primary:         #FFD700;
}
html.theme-ibex-hc .nav-rail {
  background: #000000;
  border-right: 2px solid #FFD700;
}
html.theme-ibex-hc .nav-rail .rail-item           { color: #FFFFFF; }
html.theme-ibex-hc .nav-rail .rail-item:hover      { background: rgba(255,255,255,0.12); color: #FFFFFF; }
html.theme-ibex-hc .nav-rail .rail-item--active    { color: #FFD700; }
html.theme-ibex-hc .nav-rail .rail-item--active:hover { color: #FFD700; background: rgba(255,215,0,0.15); }
html.theme-ibex-hc .dock-panel  { background: #0A0A0A; border-right: 2px solid #444444; }
html.theme-ibex-hc .top-header  { background: #0A0A0A; border-bottom: 2px solid #444444; }
html.theme-ibex-hc .status-strip { background: #000000; border-bottom: 2px solid #444444; }
html.theme-ibex-hc a            { color: #FFD700; text-decoration: underline; }
html.theme-ibex-hc a:hover      { color: #FFF176; }
html.theme-ibex-hc input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.theme-ibex-hc select,
html.theme-ibex-hc textarea {
  background: var(--input-bg, #111111) !important;
  border: 2px solid var(--border, #555555) !important;
  color: var(--input-text, #FFFFFF) !important;
}
html.theme-ibex-hc input::placeholder,
html.theme-ibex-hc textarea::placeholder { color: var(--text-muted, #BBBBBB) !important; }
html.theme-ibex-hc button:focus-visible,
html.theme-ibex-hc a:focus-visible,
html.theme-ibex-hc input:focus-visible,
html.theme-ibex-hc select:focus-visible,
html.theme-ibex-hc textarea:focus-visible,
html.theme-ibex-hc .btn:focus-visible,
html.theme-ibex-hc [tabindex]:focus-visible {
  outline: 3px solid #FFD700 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255,215,0,0.18) !important;
}
/* ============================================================
   COLOR-SAFE THEME — html.theme-ibex-cb
   Optimised for deuteranopia/protanopia (red-green color blindness).
   Uses blue accent instead of gold; avoids red/green signal meaning.
   Status dots use shape + pattern cues via box-shadow/border.
   ============================================================ */
html.theme-ibex-cb {
  --bg:              #0F1117;
  --surface:         #161B27;
  --surface-2:       #1A2035;
  --white:           #161B27;
  --text:            #E8EAF0;
  --text-primary:    #E8EAF0;
  --text-secondary:  #C5CAD8;
  --text-muted:      #8892A4;
  --border:          #2A3248;
  --input-bg:        #1A2035;
  --input-text:      #E8EAF0;
  --item-hover:      rgba(255,255,255,0.05);
  --hover-bg:        rgba(255,255,255,0.08);  /* readable against dark blue surfaces */
  --accent-subtle:   rgba(77,158,255,0.18);   /* blue-tint bg for active state */
  --header-bg:       #161B27;
  --cc-panel-bg:     #1A2035;
  --cc-panel-border: #2A3248;
  --cc-dock-bg:      #0D1020;
  --accent:          #4D9EFF;   /* blue — safe across all CVD types */
  --primary:         #4D9EFF;
}
html.theme-ibex-cb .nav-rail {
  background: #0D1020;
  border-right-color: rgba(77,158,255,0.2);
}
html.theme-ibex-cb .nav-rail .rail-item           { color: rgba(232,234,240,0.82); }
html.theme-ibex-cb .nav-rail .rail-item:hover      { background: rgba(255,255,255,0.07); color: #E8EAF0; }
html.theme-ibex-cb .nav-rail .rail-item--active    { color: #4D9EFF; }
html.theme-ibex-cb .nav-rail .rail-item--active:hover { color: #4D9EFF; background: rgba(77,158,255,0.14); }
html.theme-ibex-cb .dock-panel  { background: #0D1020; border-right-color: rgba(77,158,255,0.12); }
html.theme-ibex-cb .top-header  { background: #161B27; border-bottom-color: #2A3248; }
html.theme-ibex-cb .status-strip { background: #0D1020; border-bottom-color: #2A3248; }
html.theme-ibex-cb a            { color: #4D9EFF; }
html.theme-ibex-cb a:hover      { color: #7DBFFF; }
html.theme-ibex-cb input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.theme-ibex-cb select,
html.theme-ibex-cb textarea {
  background: var(--input-bg, #1A2035) !important;
  color: var(--input-text, #E8EAF0) !important;
  border-color: var(--border, #2A3248) !important;
}
html.theme-ibex-cb input::placeholder,
html.theme-ibex-cb textarea::placeholder { color: var(--text-muted, #8892A4) !important; }
/* Color-safe status dots use shape differentiation — not just hue */
html.theme-ibex-cb .conn-dot--connected    { background: #4D9EFF; box-shadow: 0 0 5px rgba(77,158,255,0.7); }
html.theme-ibex-cb .conn-dot--offline      { background: #FF7043; border: 2px solid #FF3D00; }
html.theme-ibex-cb .conn-dot--degraded     { background: #FF9800; border: 2px dashed #E65100; }
html.theme-ibex-cb .conn-dot--reconnecting { background: #FFD740; }
/* ── CB focus states — blue outline + shadow (non-color depth cue) ──────────
   CB had no focus-visible rules at all. Add the complete set here.
   box-shadow extends beyond outline-offset so keyboard nav is unambiguous
   even for users with reduced color sensitivity.
   ─────────────────────────────────────────────────────────────────────────── */
html.theme-ibex-cb button:focus-visible,
html.theme-ibex-cb a:focus-visible,
html.theme-ibex-cb input:focus-visible,
html.theme-ibex-cb select:focus-visible,
html.theme-ibex-cb textarea:focus-visible,
html.theme-ibex-cb .btn:focus-visible,
html.theme-ibex-cb [tabindex]:focus-visible {
  outline: 3px solid #4D9EFF !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(77,158,255,0.20) !important;
}

/* ============================================================
   CUSTOM THEME — html.theme-ibex-custom
   Reads CSS custom properties injected by App.applyCustomTheme().
   Tokens: --custom-accent, --custom-surface, --custom-text, --custom-muted
   ============================================================ */
html.theme-ibex-custom {
  /* Defaults match ibex-dark so custom starts from a good baseline */
  --bg:              var(--custom-surface, #111111);
  --surface:         var(--custom-surface, #1A1A1A);
  --surface-2:       var(--custom-surface, #222222);
  --white:           var(--custom-surface, #1A1A1A);
  --text:            var(--custom-text,    #E8E8E8);
  --text-primary:    var(--custom-text,    #E8E8E8);
  --text-secondary:  var(--custom-muted,   #B0B0B0);
  --text-muted:      var(--custom-muted,   #777777);
  --border:          rgba(255,255,255,0.1);
  --input-bg:        var(--custom-surface, #252525);
  --input-text:      var(--custom-text,    #E8E8E8);
  --item-hover:      rgba(255,255,255,0.05);
  --hover-bg:        rgba(255,255,255,0.06);
  --accent-subtle:   rgba(255,255,255,0.08);
  --accent:          var(--custom-accent,  #C9A227);
  --primary:         var(--custom-accent,  #C9A227);
  --header-bg:       var(--custom-surface, #1A1A1A);
  --cc-panel-bg:     var(--custom-surface, #1A1A1A);
  --cc-panel-border: rgba(255,255,255,0.08);
  --cc-dock-bg:      var(--custom-surface, #111111);
}
html.theme-ibex-custom .nav-rail .rail-item        { color: var(--custom-text, rgba(255,255,255,0.85)); }
html.theme-ibex-custom .nav-rail .rail-item--active { color: var(--custom-accent, #C9A227); }
html.theme-ibex-custom a                            { color: var(--custom-accent, #C9A227); }

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* #app is a flex column. Only cmd-bar (36px) is full-width fixed — it spans
   the entire viewport. mode-bar and subnav-bar are also fixed but start
   AFTER the left panel zone (nav-rail + dock-panel) via --dock-panel-width.
   padding-top:36px clears only cmd-bar; left panels start immediately below it.
   .main-area carries its own padding-top:60px (mode-bar 32px + subnav-bar 28px)
   to push workspace content below the two remaining shell rows.
   Use 100vh directly — more robust than height:100% in all browsers. */
#app {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 36px;  /* cmd-bar only — left panels clear cmd-bar, not mode/subnav */
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
}

/* ── Global form control reset: dark Ibex surface, no browser-default white fills ── */
/*    These rules are the single authoritative baseline for ALL inputs, selects,     */
/*    textareas, and buttons in the portal. Approved variant classes override these.  */
/*    checkbox / radio / range are excluded — they rely on appearance + accent-color. */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  font-family: inherit;
  font-size: 13px;
  background: var(--ibx-control-bg, #171719);
  color: var(--ibx-text-1, #f5f2ea);
  border: 1px solid var(--ibx-control-border, rgba(255,255,255,0.10));
  border-radius: var(--ibx-radius-sm, 4px);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ibx-control-border-hover, rgba(212,160,23,0.28));
  box-shadow: 0 0 0 2px rgba(201,162,39,0.10);
}
input:not([type="checkbox"]):not([type="radio"])::placeholder,
textarea::placeholder { color: var(--ibx-text-2, #857e72); }

button {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

a {
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-dark);
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ── Browser autofill background override ──────────────────────────────
   WebKit / Chrome applies its own painted background on autofilled fields
   (including type="email") that cannot be removed with background: !important.
   The only reliable cross-browser fix is:
     1. Fake the background with an inset box-shadow (autofill does not
        override box-shadow).
     2. Set -webkit-text-fill-color explicitly (autofill overrides `color`
        but not -webkit-text-fill-color).
   var(--input-bg) and var(--input-text) resolve to the correct per-theme
   values because CSS variable resolution inherits the cascade normally.
   ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #FFFFFF) inset !important;
  -webkit-text-fill-color: var(--input-text, #1A1A1A) !important;
  caret-color: var(--input-text, #1A1A1A);
  /* Delay the browser's own background-color transition so it never shows */
  transition: background-color 9999s ease-in-out 0s;
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-logo {
  text-align: center;
  color: white;
}

.logo-icon {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.logo-icon svg, .logo-icon img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.logo-text {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.loading-sub {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 30px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(201, 162, 39, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

/* ── Login page — dark luxury theme ─────────────────────── */

.login-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #050505;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(212,175,55,0.15), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(212,175,55,0.06), transparent 35%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.login-card {
  background: rgba(18,18,18,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 18px;
  padding: 48px 44px 40px;
  width: 100%;
  max-width: 420px;
  animation: slideUp 0.35s ease;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  /* Override light-theme text variables so inline var(--text) / var(--text-muted)
     used by the forgot-password and check-email screens render correctly
     on this dark card instead of resolving to near-black #1A1A1A / #666666. */
  --text: #e5e7eb;
  --text-muted: #d1d5db;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-header {
  text-align: center;
  margin-bottom: 36px;
}

.login-logo {
  margin: 0 auto 0;
  display: flex;
  justify-content: center;
}

.login-logo img {
  width: 175px !important;
  filter: drop-shadow(0 0 18px rgba(212,175,55,0.35));
}

.login-header h1 {
  display: none;
}

.login-header p {
  display: none;
}

.login-form {
  margin-bottom: 8px;
}

.login-form .form-group {
  margin-bottom: 20px;
}

.login-form label {
  display: block;
  font-weight: 500;
  color: #d1d5db;
  margin-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 14px;
  color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.login-form input::placeholder {
  color: rgba(255,255,255,0.2);
}

.login-form input:focus {
  outline: none;
  border-color: #D4AF37;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
  background: rgba(255,255,255,0.06);
}

/* Sign In button */
.login-form .btn-primary.btn-full {
  background: linear-gradient(135deg, #D4AF37, #C9A227);
  border: none;
  color: #0a0a0a;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 13px 0;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: 0 4px 18px rgba(212,175,55,0.25);
  margin-top: 4px;
}

.login-form .btn-primary.btn-full:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(212,175,55,0.38);
  filter: brightness(1.06);
}

.login-form .btn-primary.btn-full:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Error message — dark red glass */
.login-form .alert-danger {
  background: rgba(120,20,20,0.25) !important;
  border: 1px solid rgba(255,80,80,0.3) !important;
  color: #ffb3b3 !important;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon input {
  padding-right: 42px;
}

.btn-icon {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: color 0.15s ease;
}

.btn-icon:hover {
  color: #D4AF37;
}

/* Forgot password link */
.login-form > div > button[onclick="Auth.showForgotPassword()"],
.login-form > div > button[onclick*="showForgotPassword"] {
  background: none !important;
  border: none !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.15s ease;
  padding: 0 !important;
}

.login-form > div > button[onclick*="showForgotPassword"]:hover {
  color: #D4AF37 !important;
}

.login-hint {
  display: none;
}

.login-footer {
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  padding: 20px;
  letter-spacing: 0.02em;
}

/* ============================================================
   APP SHELL LAYOUT
   3-column: Nav Rail | Dock Panel | Main Workspace
   (Full definition is in the TOS layout section near end of file.
    This rule is intentionally minimal — do not add layout here.)
   ============================================================ */

.app-shell {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
  /* min-height floor = full viewport minus cmd-bar (36px).
     Prevents flex:1 from collapsing to 0 if parent height calc fails. */
  min-height: calc(100vh - 36px);
  overflow: hidden;
  position: relative;   /* anchors .dock-edge-tab absolutely within the shell */
}

/* LEGACY SIDEBAR REMOVED — nav-rail system only */

/* ── Removed: .nav-logout (duplicate of user-dropdown Sign Out) ── */
/* Legacy styles kept here for reference — the sidebar logout button was removed. */
.nav-logout {
  display: none;  /* hidden — Sign Out is accessible via the user menu top-right */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--danger);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px;
  font-weight: 500;
}

.nav-logout:hover {
  background: rgba(220, 38, 38, 0.1);
}

/* ── Collapsible Nav Groups ── */
.nav-group {
  margin-bottom: 2px;
}

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px 7px 14px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  margin: 6px 6px 2px;
}

.nav-group-header:hover {
  background: rgba(255,255,255,0.05);
}

.nav-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.35);
}

.nav-group-arrow {
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  transition: color 0.15s;
  line-height: 1;
}

.nav-group-header:hover .nav-group-arrow,
.nav-group-header:hover .nav-group-label {
  color: rgba(255,255,255,0.6);
}

.nav-group-items {
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}

.nav-group-items.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.nav-group-items .nav-item {
  padding-left: 22px;
}

/* Main Area — workspace column to the right of nav-rail + dock-panel.
   padding-top: 60px clears mode-bar (32px) + subnav-bar (28px), which are
   fixed but offset to start after the left panel zone. Left panels do NOT
   need this padding because mode-bar/subnav-bar don't overlay the left zone. */
.main-area {
  flex: 1;
  min-width: 0;           /* prevent flex item from overflowing sidebar on narrow viewports */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  padding-top: 60px;      /* mode-bar(32) + subnav-bar(28) — clears right-zone shell rows */
}


/* ── Top Header — collapsed; content moved to .cmd-bar ── */
.top-header {
  height: 0;
  min-height: 0;
  padding: 0;
  border: none;
  overflow: visible;
  flex-shrink: 0;
  position: relative;
  z-index: 60;
}

/* Logo in topbar */
.topbar-logo {
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 40px;
  padding-right: 10px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
}
.topbar-logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
}
.topbar-logo-fallback {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 2px;
}

/* Global search */
.topbar-search {
  flex: 1;
  min-width: 350px;
  max-width: 500px;
  position: relative;
}
.topbar-search-wrap {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0 12px;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.topbar-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.1);
  background: var(--white);
}
.topbar-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}
.topbar-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  padding: 8px 0;
  outline: none;
}
.topbar-search-input::placeholder { color: #aaa; }
.topbar-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}
.topbar-search-clear:hover { color: var(--text); }

/* Search results dropdown */
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  z-index: 200;
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
}
.search-results.hidden { display: none; }
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(201,162,39,0.06); }
.search-result-icon { font-size: 16px; flex-shrink: 0; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-label { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-sub { font-size: 11px; color: var(--text-muted); }
.search-result-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); background: rgba(201,162,39,0.1); padding: 2px 7px; border-radius: 10px; flex-shrink: 0; }
.search-no-results { padding: 16px 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* Spacer */
.topbar-spacer { flex: 1; }

/* + New button */
.topbar-new-wrap { position: relative; flex-shrink: 0; }
.topbar-new-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--primary-dark);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.topbar-new-btn:hover { background: var(--accent); color: #000; }
.new-menu {
  position: fixed;       /* escaped from all overflow/stacking-context containers */
  top: auto;             /* set by JS via getBoundingClientRect() */
  right: auto;           /* set by JS via getBoundingClientRect() */
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  z-index: 9999;         /* above modal-overlay (200) and everything else */
  min-width: 180px;
  overflow: hidden;
}
.new-menu.hidden { display: none; }
.new-menu-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); padding: 10px 14px 6px; }
.new-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.new-menu-item:hover { background: rgba(201,162,39,0.07); color: var(--accent-dark); }
.new-menu-item svg { color: var(--text-muted); flex-shrink: 0; }
.new-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Topbar icon buttons (bell) */
.topbar-icon-btn {
  flex-shrink: 0;
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.topbar-icon-btn:hover { background: var(--bg); color: var(--text); }

/* Home button — gold accent on hover; slightly brighter at rest to signal primary nav */
.topbar-home-btn { color: var(--text-secondary, var(--text-muted)); }
.topbar-home-btn:hover {
  background: rgba(201, 162, 39, 0.12);
  color: var(--accent);
}

/* Quick Intake button — gold accent on hover to distinguish from plain icon buttons */
.topbar-quick-intake:hover {
  background: rgba(201, 162, 39, 0.12);
  color: var(--accent);
}

/* Notification dropdown */
/* notif-dropdown — positioning handled by JS via getBoundingClientRect (see toggleNotifDropdown) */
.notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }

/* User menu enhancements */
.user-menu { position: relative; flex-shrink: 0; }
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.user-menu-btn:hover { background: var(--bg); border-color: var(--border); }
.user-name-label { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  z-index: 200;
  min-width: 220px;
  overflow: hidden;
}
.user-menu-dropdown.hidden { display: none; }
.user-menu-header { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--bg); }
.user-menu-divider { height: 1px; background: var(--border); }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: var(--transition);
}
.user-menu-item:hover { background: var(--bg); }
.user-menu-item.logout { color: var(--danger); }

/* keep page-title accessible to JS but invisible */
.page-title { display: none; }

.user-menu {
  position: relative;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.user-menu-btn:hover {
  background: var(--bg);
  border-color: var(--accent);
}

.user-avatar {
  width: 28px;
  height: 28px;
  background: #000000;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: bold;
}

.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 180px;
  margin-top: 8px;
  overflow: hidden;
}

.user-menu-dropdown.hidden {
  display: none;
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: var(--transition);
  border-bottom: 1px solid var(--border);
}

.user-menu-item:last-child {
  border-bottom: none;
}

.user-menu-item:hover {
  background: var(--bg);
}

.user-menu-item.logout {
  color: var(--danger);
}

/* Content Area */
.content {
  flex: 1;
  min-height: 0;                /* CRITICAL: without this, flex item expands beyond its
                                   allocated height to fit content. min-height:auto (the
                                   flex default) lets .content grow to match .dashboard's
                                   full height, killing overflow-y scroll. min-height:0
                                   caps .content at its flex allocation so overflow-y:auto
                                   can fire. */
  overflow-y: auto;
  overflow-anchor: none;        /* prevent browser scroll-anchor from adjusting scrollTop
                                   when sticky header height changes on collapse/expand,
                                   which would re-trigger onScroll and cause jitter */
  padding: 12px 30px 30px 30px; /* top reduced from 30px → 12px globally */
  background: var(--bg);        /* solid bg prevents sticky bleed-through */
}

/* Sticky Account Hub header — summary card + command bar + quick links.
   Negative margins pull the element into .content's padding on top/sides so
   no content can bleed through the gap above or beside the sticky bar.
   Matching padding restores the inner spacing. top:-12px makes it stick at
   the visual top edge of .content (matching the reduced 12px padding-top). */
.client-detail-sticky {
  position: sticky;
  top: -12px;
  z-index: 50;
  background: var(--bg);
  margin: -12px -30px 4px -30px;
  padding: 12px 30px 4px 30px;
  transition: box-shadow 0.15s;
}

/* Shadow appears when content scrolls behind the sticky bar */
.client-detail-sticky.is-collapsed {
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}

/* Compact identity bar: hidden at top of page */
.sticky-compact-bar {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 4px 6px;
}

/* Show compact bar and hide full summary when scrolled */
.client-detail-sticky.is-collapsed .sticky-compact-bar {
  display: flex;
}
.client-detail-sticky.is-collapsed .sticky-full-summary {
  display: none;
}

/* Full summary wrapper — no extra spacing needed (snapshotHtml has its own margin) */
.sticky-full-summary {
  display: block;
}

/* Tighter spacing for command bar and quick links when inside the sticky header */
.client-detail-sticky .client-command-bar {
  margin-bottom: 6px;
  padding: 8px 14px;
}
.client-detail-sticky .client-quick-links {
  margin-bottom: 0;
  padding: 7px 12px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.content-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}

.content-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

/* ══ Command Center — Panel design system ══════════════════════════════════
   .cc-panel is the base container for every Command Center section.
   Using shared tokens here means any section can later become a draggable
   or floating panel by changing only layout — data and render logic stay
   identical.  Design tokens are defined on :root so a future panel manager
   can override them per-panel or globally without touching component CSS.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --cc-panel-radius:  8px;
  --cc-panel-border:  var(--border, #e0e0e0);
  --cc-panel-bg:      var(--white, #ffffff);
  --cc-panel-padding: 12px 14px;     /* reduced from 14px 16px for tighter panels */
  --cc-panel-gap:     12px;          /* reduced from 16px */
  --cc-hdr-size:      12px;          /* tighter header labels */
  --cc-hdr-weight:    700;
  --cc-dock-bg:       #EBEBEB;       /* sticky command dock background (slightly darker than --bg #F5F5F5) */
}

/* Base panel shell — every Command Center section inherits this */
.cc-panel {
  background: var(--cc-panel-bg);
  border: 1px solid var(--cc-panel-border);
  border-radius: var(--cc-panel-radius);
  padding: var(--cc-panel-padding);
  margin-bottom: var(--cc-panel-gap);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);  /* subtle lift — each panel is its own instrument */
  /* No position:relative yet — added when panels become draggable */
}

/* "View All →" link inside panel headers */
.cc-panel-view-all {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.13s;
}
.cc-panel-view-all:hover { opacity: 0.75; }

/* Standard panel header: title left, controls right */
.cc-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--cc-panel-border);
}

.cc-panel-title {
  font-size: var(--cc-hdr-size);
  font-weight: var(--cc-hdr-weight);
  color: var(--text);
  line-height: 1;
}

/* Right-side controls area (refresh, collapse, etc.) */
.cc-panel-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Small icon button used for refresh / collapse inside panel headers */
.cc-panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
  flex-shrink: 0;
}

.cc-panel-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

.cc-panel-btn svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* Collapsed state: body hidden, header border removed */
.cc-panel--collapsed .cc-panel-body {
  display: none;
}
.cc-panel--collapsed .cc-panel-hdr {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Collapse chevron rotates when panel opens */
.cc-collapse-icon { transition: transform 0.18s; }
.cc-panel--collapsed .cc-collapse-icon { transform: rotate(-90deg); }

/* ── Command Center — Continue Work (resume last-touched records) ──────── */
.cc-resume {
  /* No extra margin — handled by .cc-panel */
}

.cc-resume-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-resume-card {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 220px;
  background: var(--surface-2, #252525);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-resume-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--accent);
}

/* Light theme — tinted surface, matches .kpi-tile language */
html.theme-ibex-light .cc-resume-card {
  background: #F8F9FA;
  border-color: rgba(0,0,0,0.10);
}
html.theme-ibex-light .cc-resume-card:hover {
  background: rgba(0,0,0,0.03);
  border-color: var(--accent);
}

.cc-resume-type {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
  width: fit-content;
}


.cc-resume-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cc-resume-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-resume-ago {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.7;
}

/* ── Command Center — Action Queue (banded urgency card) ───────────────── */
/* Base shell delegated to .cc-panel — only AQ-specific overrides live here */
.aq-card { /* composited with .cc-panel in markup */ }

/* aq-hdr and aq-title kept for backward compat but now alias panel tokens */
.aq-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cc-panel-border);
}

.aq-title {
  font-size: var(--cc-hdr-size);
  font-weight: var(--cc-hdr-weight);
  color: var(--text);
}

.aq-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.aq-empty {
  text-align: center;
  padding: 12px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.aq-band {
  margin-bottom: 12px;
}

.aq-band:last-child {
  margin-bottom: 0;
}

.aq-band-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.aq-band-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.aq-band-ct {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  /* Color is set by semantic modifier class below — never by inline style */
}

/* ── Action-queue band count badge — semantic dark-theme modifiers ──────────
   These replace the old hardcoded inline background/color values in dashboard.js.
   All use the Ibex dark-theme token family (16–20% opacity on color, bright text).
   ─────────────────────────────────────────────────────────────────────────── */
.aq-band-ct--overdue { background: rgba(217,  75,  69, 0.20); color: #f87171; border: 1px solid rgba(217,  75,  69, 0.32); }
.aq-band-ct--today   { background: rgba(212, 136,  30, 0.20); color: #fbbf24; border: 1px solid rgba(212, 136,  30, 0.32); }
.aq-band-ct--risk    { background: rgba(255, 255, 255, 0.11); color: var(--text-muted, #94a3b8); border: 1px solid rgba(255, 255, 255, 0.16); }

.aq-band-body {
  /* sub-sections from _section() render inside here */
}

/* ── Command Center — Sticky Command Dock ──────────────────────────────── */
/* The Quick Access bar is the topmost element of the dashboard content area.
   It uses position:sticky to remain anchored below the global top-header as
   the user scrolls. Negative margins cancel .dashboard padding and .content
   side padding so the dock spans the full content width like a toolbar.
   The card treatment (.cc-panel) is overridden — no border-radius, no card
   shadow. Instead: a stronger background + bottom shadow signals authority. */
.cmd-quick-access {
  /* ── Sticky positioning ── */
  position: sticky;
  top: -12px;    /* matches .content's 12px top padding — flush with content top */
  z-index: 49;   /* below .top-header (z:60) and .client-detail-sticky (z:50) */

  /* ── Override .cc-panel card treatment ── */
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 2px 14px rgba(0,0,0,0.10);
  margin-bottom: 0;

  /* ── Bleed to .content edges ── cancel .dashboard padding (0 — removed) + .content padding (30px sides, 12px top) */
  margin-left: -30px;
  margin-right: -30px;
  margin-top: -12px;
  padding: 10px 30px 10px 30px;

  /* ── Command surface appearance ── */
  background: var(--cc-dock-bg, #EBEBEB);
}

/* Horizontal bar of groups separated by dividers */
.cmd-quick-nav {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}

/* Vertical separator between groups */
.cmd-quick-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 0 12px;
  flex-shrink: 0;
}

/* One functional group (CRM, Submissions, Operations, Analytics) */
.cmd-quick-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cmd-quick-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 2px;
  white-space: nowrap;
}

.cmd-quick-group-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Individual module tile */
.cmd-quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 72px;
  min-height: 62px;
  padding: 8px 6px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s, transform 0.13s, box-shadow 0.13s;
  color: var(--text);
  font-family: inherit;
}

.cmd-quick-tile:hover {
  border-color: var(--accent);
  background: rgba(201, 162, 39, 0.09);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

.cmd-quick-tile-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.13s;
}

.cmd-quick-tile:hover .cmd-quick-tile-icon {
  color: var(--accent);
}

.cmd-quick-tile-label {
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.2;
  transition: color 0.13s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

.cmd-quick-tile:hover .cmd-quick-tile-label {
  color: var(--accent);
}

/* ── Command Center section labels ─────────────────────────────────────── */
/* Lightweight zone headers that give the page clear visual hierarchy
   without adding heavy frames around each section. */
.dash-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 8px;
  padding-left: 1px;
}
/* Inside Main Grid columns, top label has no extra top margin */
.cc-main-col > .dash-section-label:first-child { margin-top: 0; }
/* Section label inside snapshot row (above grid) — tighter top */
.dashboard > .dash-section-label { margin-top: 20px; }

/* First section label should have less top margin */
.dashboard .dash-section-label:first-of-type {
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────── */

.dashboard {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.welcome-banner {
  background: #000000;
  border-radius: var(--radius-lg);
  padding: 30px;
  color: var(--white);
  margin-bottom: 30px;
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--accent);
  position: relative;
  overflow: hidden;
}

.welcome-banner::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.welcome-message {
  font-size: 18px;
  margin-bottom: 8px;
}

.welcome-date {
  font-size: 13px;
  opacity: 0.9;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border-top: 3px solid var(--accent);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ── Semantic stat card variants — top border + number color only ── */
.stat-card--info    { border-top-color: var(--ibx-info,    #4d8fd6); }
.stat-card--warning { border-top-color: var(--ibx-warning, #d4881e); }
.stat-card--success { border-top-color: var(--ibx-success, #2fb36d); }
.stat-card--info    .stat-value { color: var(--ibx-info,    #4d8fd6); }
.stat-card--warning .stat-value { color: var(--ibx-warning, #d4881e); }
.stat-card--success .stat-value { color: var(--ibx-success, #2fb36d); }

.stat-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--text);
  margin-bottom: 8px;
}

.stat-change {
  font-size: 12px;
  color: var(--success);
}

.stat-change.down {
  color: var(--danger);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}

.quick-action-btn {
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.open-tasks-widget {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}

.widget-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text);
}

.task-item {
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition);
}

.task-item:hover {
  background: var(--white);
  border-left-color: var(--accent-dark);
  box-shadow: var(--shadow);
}

.task-item.high {
  border-left-color: var(--danger);
}

.task-item.medium {
  border-left-color: var(--warning);
}

.task-item.low {
  border-left-color: var(--success);
}

.task-priority {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.task-priority.high {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

.task-priority.medium {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warning);
}

.task-priority.low {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
}

.task-content {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}

.task-duedate {
  font-size: 11px;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.empty-message {
  font-size: 14px;
  margin-bottom: 20px;
}

.empty-action {
  font-size: 13px;
}

/* ============================================================
   TABLES
   ============================================================ */

.table-container {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.table-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--white);
}

.table-header-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-bar {
  width: 300px;
  min-width: 200px;
  flex-shrink: 0;
}

.search-bar input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--white);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.15);
}

.filter-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.filter-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.filter-group select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--white);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead {
  background: var(--bg);
}

/* When .table-header is used on a <tr> inside a <table> (e.g. appetite table),
   restore table-row display so the flex override from the filter-bar usage
   does not collapse header cells into a vertical stack. */
.table thead tr.table-header {
  display: table-row !important;
}

.table th {
  padding: 12px 15px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
}

.table td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.table tbody tr {
  transition: var(--transition);
  cursor: pointer;
}

.table tbody tr:hover {
  background: var(--bg);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

.btn-table-action {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.pagination {
  padding: 15px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  gap: 8px;
  background: var(--bg);
}

.pagination-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  transition: var(--transition);
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination-btn.active {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.2s ease;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--surface, var(--white, #FFFFFF));
  color: var(--text-primary, var(--text, #1A1A1A));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 620px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
  position: relative; /* positioning context for .fp-resize-handle */
}

/* ── Modal size variants ────────────────────────────────────────
   Pass as 4th arg to App.openModal():
     App.openModal(title, body, footer, 'modal-lg')
   ─────────────────────────────────────────────────────────────*/
.modal.modal-sm  { max-width: 420px;  }
.modal.modal-md  { max-width: 660px;  }
.modal.modal-lg  { max-width: 860px;  }
.modal.modal-xl  { max-width: 1040px; }

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close-btn:hover {
  color: var(--text);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--bg);
}

/* Tabs in Modal */
.modal-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin: 0 -20px 20px;
  padding: 0 20px;
}

.modal-tab {
  padding: 12px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
}

.modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.modal-tab-content {
  display: none;
}

.modal-tab-content.active {
  display: block;
}

/* ============================================================
   FORMS
   ============================================================ */

.form-group {
  margin-bottom: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-row.full {
  grid-template-columns: 1fr;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-group label.required::after {
  content: ' *';
  color: var(--danger);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  min-height: 40px;
  border: 1px solid var(--ibx-control-border, rgba(255,255,255,0.10));
  border-radius: var(--ibx-radius-sm, 4px);
  font-size: 13px;
  background: var(--ibx-control-bg, #171719);
  color: var(--ibx-text-1, #f5f2ea);
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--ibx-control-border-hover, rgba(212,160,23,0.28));
  box-shadow: 0 0 0 2px rgba(201,162,39,0.10);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

.form-group.error input,
.form-group.error textarea,
.form-group.error select {
  border-color: var(--danger);
}

.form-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}

.checkbox-group,
.radio-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.checkbox-item,
.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-item input,
.radio-item input {
  width: auto;
  cursor: pointer;
}

.checkbox-item label,
.radio-item label {
  margin-bottom: 0;
  cursor: pointer;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  /* ── Dark-system defaults: prevent browser-default white chrome ── */
  background: var(--ibx-control-bg, #171719);
  color: var(--ibx-text-2, #c9c1b3);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--ibx-gold);
  color: var(--ibx-text-inverse);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--ibx-radius-sm);
  transition:
    background var(--ibx-speed-fast),
    box-shadow var(--ibx-speed-fast),
    transform var(--ibx-speed-fast);
}

.btn-primary:hover:not(:disabled) {
  background: var(--ibx-gold-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,160,23,0.32);
}

.btn-primary:focus-visible {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
}

.btn-secondary {
  background: var(--ibx-control-bg);
  color: var(--ibx-text-2);
  border: 1px solid var(--ibx-control-border);
  border-radius: var(--ibx-radius-sm);
  transition:
    background var(--ibx-speed-fast),
    border-color var(--ibx-speed-fast),
    color var(--ibx-speed-fast);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--ibx-control-bg-hover);
  border-color: var(--ibx-control-border-hover);
  color: var(--ibx-text-1);
}

.btn-secondary:focus-visible {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
}

/* ── btn-outline: legacy alias — visually identical to btn-secondary ── */
.btn-outline {
  background: var(--ibx-control-bg);
  color: var(--ibx-text-2);
  border: 1px solid var(--ibx-control-border);
  border-radius: var(--ibx-radius-sm);
  transition:
    background var(--ibx-speed-fast),
    border-color var(--ibx-speed-fast),
    color var(--ibx-speed-fast);
}
.btn-outline:hover:not(:disabled) {
  background: var(--ibx-control-bg-hover);
  border-color: var(--ibx-control-border-hover);
  color: var(--ibx-text-1);
}
.btn-outline:focus-visible {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
}

.btn-success {
  background: var(--success);
  color: var(--white);
}

.btn-success:hover:not(:disabled) {
  background: #047857;
}

.btn-warning {
  background: var(--warning);
  color: var(--white);
}

.btn-warning:hover:not(:disabled) {
  background: #b45309;
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.btn-accent {
  background: #000000;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn-accent:hover:not(:disabled) {
  background: rgba(201, 162, 39, 0.1);
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-full {
  width: 100%;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   BADGES & TAGS
   ============================================================ */

/* ── Unified pill system ──────────────────────────────────────
   Base class + semantic modifier classes.
   All backgrounds use rgba() so they adapt to both light and
   dark surfaces without extra media queries.
   Usage: <span class="pill pill--submission">Submission</span>
   ──────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}
/* Semantic modifiers — self-contained colour tokens: work with or without .pill base.
   border shorthand is intentional — lets them apply correctly as standalone modifiers
   (e.g. on .cc-resume-type chips) without inheriting .pill's shape/padding. */
/* Semantic pill modifiers — dark-theme calibrated.
   Opacity 0.16–0.20 ensures visibility against dark surfaces; bright palette text
   reads cleanly without inversion. --accent-dark (#92400e) removed — it is a
   light-theme brown that renders as near-invisible on dark backgrounds.
   Use var(--ibx-gold, #d4a017) for gold/amber pills instead.             */
.pill--submission { background: rgba( 99, 102, 241, 0.16); color: #818cf8;                     border: 1px solid rgba( 99, 102, 241, 0.28); }
.pill--renewal    { background: rgba(201, 162,  39, 0.16); color: var(--ibx-gold, #d4a017);    border: 1px solid rgba(201, 162,  39, 0.30); }
.pill--policy     { background: rgba(  5, 150, 105, 0.16); color: var(--success, #2fb36d);     border: 1px solid rgba(  5, 150, 105, 0.28); }
.pill--quote      { background: rgba( 29,  78, 216, 0.16); color: #60a5fa;                     border: 1px solid rgba( 29,  78, 216, 0.28); }
.pill--document   { background: rgba(124,  58, 237, 0.16); color: #a78bfa;                     border: 1px solid rgba(124,  58, 237, 0.28); }
.pill--client     { background: rgba(201, 162,  39, 0.14); color: var(--ibx-gold, #d4a017);    border: 1px solid rgba(201, 162,  39, 0.26); }
.pill--urgent     { background: rgba(217,  75,  69, 0.20); color: #f87171;                     border: 1px solid rgba(217,  75,  69, 0.35); }
.pill--attention  { background: rgba(212, 136,  30, 0.20); color: #fbbf24;                     border: 1px solid rgba(212, 136,  30, 0.35); }
.pill--success    { background: rgba(  5, 150, 105, 0.16); color: var(--success, #2fb36d);     border: 1px solid rgba(  5, 150, 105, 0.28); }
.pill--neutral    { background: rgba(255, 255, 255, 0.10); color: var(--text-muted, #94a3b8);  border: 1px solid rgba(255, 255, 255, 0.16); }

/* ── Canonical Ibex pill ─────────────────────────────────────────────────────
   Gold-tinted, consistent across all dark/light themes.
   Use .ibex-pill instead of .pill .pill--neutral for any new UI.
   ─────────────────────────────────────────────────────────────────────────── */
.ibex-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  line-height: 1.5;
  background: rgba(201, 162, 39, 0.12);
  color: var(--accent-dark, #d4a017);
  border: 1px solid rgba(201, 162, 39, 0.28);
}

/* ── Force legacy pill/tag/badge/chip to match Ibex design system ────────────
   Kills the default browser white-box appearance on any element that uses
   these older class names (e.g. Audit History Zip, City, Deleted At labels).
   !important required to override inline styles and specificity clashes.
   ─────────────────────────────────────────────────────────────────────────── */
.pill:not([class*="pill--"]):not(.ibex-pill),
.tag,
.chip {
  background: rgba(201, 162, 39, 0.12) !important;
  color: var(--accent-dark, #d4a017) !important;
  border: 1px solid rgba(201, 162, 39, 0.28) !important;
  border-radius: 10px !important;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  /* Default gold-tint — dark-theme safe. Modifier classes override color as needed.
     --accent-dark fallback changed from #92400e (dark brown, light-mode only) to
     #d4a017 (gold, readable on dark surfaces). */
  background: rgba(201, 162, 39, 0.12);
  color: var(--accent-dark, #d4a017);
  border: 1px solid rgba(201, 162, 39, 0.22);
}

.badge-primary {
  background: rgba(201, 162, 39, 0.12);
  color: #8a6a10;
}

.badge-success {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
}

.badge-warning {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warning);
}

.badge-danger {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

.badge-accent {
  background: rgba(200, 151, 43, 0.1);
  color: var(--accent);
}

.badge-gray {
  background: rgba(115, 115, 115, 0.10);
  color: var(--text-muted);
}

.badge-info {
  background: rgba(115, 115, 115, 0.10);
  color: #737373;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-active {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
}

.status-inactive {
  background: rgba(115, 115, 115, 0.10);
  color: var(--text-muted);
}

.status-pending {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warning);
}

.status-cancelled {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

.status-expired {
  background: rgba(115, 115, 115, 0.10);
  color: var(--text-muted);
}

.status-non-renewed {
  background: rgba(115, 115, 115, 0.10);
  color: var(--text-muted);
}

.status-in-force {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
}

.status-bound {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
}

.status-lost {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

.status-marketed {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warning);
}

.status-quoted {
  background: rgba(201, 162, 39, 0.12);
  color: #C9A227;
}

.status-draft {
  background: rgba(115, 115, 115, 0.10);
  color: var(--text-muted);
}

/* Note/Task status colors */
.status-open {
  background: rgba(201, 162, 39, 0.12);
  color: #C9A227;
}

.status-completed {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
}

.status-reviewed {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warning);
}

.status-resolved {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
}

/* Note collaboration badges */
.note-internal-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  color: #4F46E5;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.note-mention-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   ALERTS & TOASTS
   ============================================================ */

.alert {
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 15px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.alert.hidden {
  display: none;
}

.alert-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.alert-danger {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.alert-success {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.alert-warning {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warning);
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.alert-info {
  background: rgba(37, 99, 168, 0.1);
  color: var(--primary);
  border: 1px solid rgba(37, 99, 168, 0.2);
}

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9000;
  pointer-events: none;
}

.toast {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 300px;
  animation: slideInRight 0.3s ease;
  pointer-events: auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(400px); }
  to { opacity: 1; transform: translateX(0); }
}

.toast.hide {
  animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideOutRight {
  to { opacity: 0; transform: translateX(400px); }
}

.toast-icon {
  flex-shrink: 0;
  font-size: 20px;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.toast-message {
  font-size: 12px;
  color: var(--text-muted);
}

.toast-success {
  border-left: 4px solid var(--success);
}

.toast-success .toast-icon {
  color: var(--success);
}

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

.toast-error .toast-icon {
  color: var(--danger);
}

.toast-warning {
  border-left: 4px solid var(--warning);
}

.toast-warning .toast-icon {
  color: var(--warning);
}

.toast-info {
  border-left: 4px solid var(--primary);
}

.toast-info .toast-icon {
  color: var(--primary);
}

/* ============================================================
   CONFIRM DIALOG
   ============================================================ */

.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
}

.confirm-overlay.hidden {
  display: none;
}

.confirm-dialog {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: slideUp 0.3s ease;
}

.confirm-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.confirm-message {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 25px;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.detail-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.detail-item {
  width: 100%;
  background: var(--bg);
  padding: 15px;
  border-radius: var(--radius-sm);
}

.detail-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.detail-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

/* ============================================================
   UPLOAD AREA
   ============================================================ */

.upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  background: var(--bg);
  cursor: pointer;
  transition: var(--transition);
}

.upload-area:hover {
  border-color: var(--accent);
  background: rgba(201, 162, 39, 0.05);
}

.upload-area.active {
  border-color: var(--accent);
  background: rgba(201, 162, 39, 0.1);
}

.upload-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.upload-text {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.upload-input {
  display: none;
}

/* ── Document panel drag-and-drop highlight ─────────────────
   Applied by populatePanel() when a file is dragged over any
   document panel. Gives clear visual feedback without a modal.
   ─────────────────────────────────────────────────────────── */
.doc-panel-drag-over {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  background: rgba(37, 99, 168, 0.04) !important;
  border-radius: var(--radius);
  transition: background 0.15s ease, outline 0.15s ease;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 60px;
  }

  .sidebar-logo-text,
  .nav-item span {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding: 12px;
  }

  .sidebar-header {
    flex-direction: column;
    padding: 15px;
    justify-content: center;
  }

  .search-bar {
    max-width: none;
  }

  /* Mobile: .content padding shrinks to 8px — match sticky offsets */
  .client-detail-sticky {
    top: -8px;
    margin: -8px -15px 4px -15px;
    padding: 8px 15px 4px 15px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .table {
    font-size: 12px;
  }

  .table th,
  .table td {
    padding: 8px 10px;
  }

  .modal,
  .modal.modal-sm,
  .modal.modal-md,
  .modal.modal-lg,
  .modal.modal-xl {
    max-width: 95vw;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 8px 15px 15px 15px;
  }

  /* Match sticky dock margins to the reduced .content side padding (15px → -15px) */
  .cmd-quick-access {
    top: -8px;
    margin-top: -8px;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .top-header {
    padding: 0 15px;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .content-actions {
    width: 100%;
  }

  .content-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .modal,
  .modal.modal-sm,
  .modal.modal-md,
  .modal.modal-lg,
  .modal.modal-xl {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
  }

  .toast {
    min-width: calc(100vw - 40px);
  }
}

/* ============================================================
   PHASE 2 - KANBAN BOARD STYLES
   ============================================================ */

.kanban-board {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 0;
  width: 100%;
}

.kanban-column {
  min-width: 280px;
  background: var(--surface-2, #f9f9f9);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.kanban-column-header {
  padding: 12px 15px;
  background: var(--white, #fff);
  border-bottom: 2px solid var(--accent);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stage-count {
  background: var(--accent-light);
  color: var(--primary-dark);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.kanban-column-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  border-left: 3px solid transparent;
}

.kanban-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

.kanban-card-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.priority-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.priority-high {
  background: var(--danger);
}

.priority-medium {
  background: var(--warning);
}

.priority-low {
  background: var(--success);
}

/* ── Submission card priority pill — replaces 8px dot ─────────────────────
   Labels: HIGH · MED · LOW. Soft tinted background, no glow (cards already
   lift on hover; pills here stay flat for hierarchy clarity).
   ─────────────────────────────────────────────────────────────────────────── */
.sub-priority-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 1px 6px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
.sub-priority-pill.priority-high   { background: rgba(254, 232, 232, 0.70); color: #c53030; }
.sub-priority-pill.priority-medium { background: rgba(217, 119, 6, 0.12);   color: #92400e; }
.sub-priority-pill.priority-low    { background: rgba(115,115,115,0.12);     color: #737373; }

/* ── Next Action focal band on submission Kanban cards ─────────────────────
   Full-width tinted strip between the client row and the controls row.
   color + background are set inline per-card via nba.color.
   border-left is a structural non-color cue: currentColor links the bar
   to the inline text color without requiring a second CSS variable.
   ─────────────────────────────────────────────────────────────────────────── */
.sub-card-action {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 4px 8px 4px 10px;
  margin: 8px 0 4px;
  border-radius: 5px;
  border-left: 3px solid currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-header strong {
  font-size: 12px;
  color: var(--text-muted);
}

.kanban-card-client {
  margin-bottom: 8px;
}

.kanban-card-client a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 500;
  font-size: 13px;
}

.kanban-card-target {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.kanban-card-agent {
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* ============================================================
   CARRIER GRID & CARDS
   ============================================================ */

.carrier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.carrier-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.carrier-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--accent);
}

.carrier-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.carrier-header h4 {
  margin: 0;
  font-size: 16px;
  flex: 1;
}

.rating-badge {
  background: var(--accent-light);
  color: var(--primary-dark);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 8px;
}

.carrier-lobs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* ── Legacy alias — kept for any callers still using .lob-tag ── */
.lob-tag {
  background: var(--ibx-gold-softer);
  color: var(--ibx-text-2);
  border: 1px solid var(--ibx-gold-border);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

/* ── ibx-tag: shared type / category label ────────────────────────
   Subtle readable label for content classification.  Visually distinct
   from status pills — same size, different purpose.  No solid fills.
   ── */
.ibx-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--ibx-surface-2, rgba(255,255,255,0.06));
  color: var(--ibx-text-2);
  border: 1px solid var(--ibx-border-1);
}

/* --type variant: soft gold tint, on-brand but not overpowering.
   appetite / supplemental / guidelines / marketing all use this. */
.ibx-tag--type {
  background: var(--ibx-gold-softer);
  color: var(--ibx-text-2);
  border: 1px solid var(--ibx-gold-border);
}

/* ── ibx-badge: canonical shared badge system ─────────────────────────────
   Use for all stage / state / priority indicators across modules.
   Existing module-specific badge classes (dm-badge, wp-badge, dna-badge)
   reference the same ibx tokens and are treated as visual aliases.

   Base shape:   display:inline-flex, pill geometry, 11px/600 text
   Modifiers:    semantic state  → --critical / --warn / --ok / --info / --active
                 pipeline stage  → --stage-draft / --stage-in_progress /
                                   --stage-quoted / --stage-submitted / --stage-new_lead
                 priority        → --priority-high / --priority-medium / --priority-low

   Usage:  <span class="ibx-badge ibx-badge--warn">Overdue</span>
           <span class="ibx-badge ibx-badge--stage-quoted">Quoted</span>
   ── */
.ibx-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}

/* Semantic state modifiers */
.ibx-badge--critical  { background: var(--ibx-danger-bg);       color: var(--ibx-danger); }
.ibx-badge--warn      { background: var(--ibx-warning-bg);      color: var(--ibx-warning); }
.ibx-badge--ok        { background: var(--ibx-stage-draft-bg);  color: var(--ibx-text-3); }
.ibx-badge--neutral   { background: var(--ibx-stage-draft-bg);  color: var(--ibx-text-3); }
.ibx-badge--info      { background: var(--ibx-info-bg);         color: var(--ibx-info); }
.ibx-badge--active    { background: var(--ibx-tint-2);          color: var(--ibx-gold); }

/* Priority modifiers (uses display palette for vibrance) */
.ibx-badge--priority-high   { background: var(--ibx-danger-bg);      color: var(--ibx-palette-red); }
.ibx-badge--priority-medium { background: var(--ibx-warning-bg);     color: var(--ibx-palette-yellow); }
.ibx-badge--priority-low    { background: var(--ibx-stage-draft-bg); color: var(--ibx-text-3); }

/* Pipeline stage modifiers — canonical stage tokens */
.ibx-badge--stage-draft       { background: var(--ibx-stage-draft-bg);    color: var(--ibx-stage-draft); }
.ibx-badge--stage-in_progress { background: var(--ibx-stage-progress-bg); color: var(--ibx-stage-progress); }
.ibx-badge--stage-quoted      { background: var(--ibx-gold-border);        color: var(--ibx-gold); }
.ibx-badge--stage-submitted   { background: var(--ibx-stage-submitted-bg); color: var(--ibx-stage-submitted); }
.ibx-badge--stage-new_lead    { background: var(--ibx-stage-new-lead-bg);  color: var(--ibx-stage-new-lead); }

.carrier-info {
  font-size: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  line-height: 1.4;
}

.info-item .label {
  font-weight: 600;
  color: var(--text);
  margin-right: 8px;
}

.info-item span {
  color: var(--text-muted);
}

/* ============================================================
   ACORD FORM STYLES
   ============================================================ */

.form-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.form-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.form-card h4 {
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 18px;
}

.form-card h5 {
  margin: 10px 0 12px 0;
  font-size: 14px;
}

.form-card p {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 15px;
}

.acord-form {
  background: var(--white);
  padding: 30px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
}

.acord-header {
  text-align: center;
  margin-bottom: 25px;
  border-bottom: 2px solid var(--primary-dark);
  padding-bottom: 15px;
}

.acord-header h2 {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 900;
}

.acord-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.acord-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}

.acord-table tr {
  border: 1px solid var(--primary-dark);
}

.acord-table td {
  padding: 8px;
  border: 1px solid var(--primary-dark);
}

.acord-table .label {
  font-weight: 600;
  width: 35%;
  background: #f5f5f5;
}

.acord-table .field {
  font-family: Arial, sans-serif;
}

@media print {
  .sidebar,
  .topbar,
  .content-header,
  #toast-container,
  .modal-overlay,
  .confirm-overlay,
  .btn:not(.btn-print) {
    display: none !important;
  }

  .acord-form {
    padding: 0;
    background: white;
    font-size: 10px;
  }

  body {
    background: white;
    margin: 0;
    padding: 0;
  }
}

/* ============================================================
   PROPERTY SCHEDULE STYLES
   ============================================================ */

.tabs-header {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: var(--transition);
  margin-bottom: -2px;
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-btn:hover {
  color: var(--text);
}

.sov-table {
  width: 100%;
  border-collapse: collapse;
}

.sov-table th,
.sov-table td {
  padding: 12px;
  border: 1px solid var(--border);
  text-align: right;
}

.sov-table th {
  background: var(--primary-light);
  color: var(--white);
  font-weight: 600;
  text-align: left;
}

.sov-table th:first-child,
.sov-table td:first-child {
  text-align: left;
}

.sov-totals {
  background: var(--accent-light);
  font-weight: 600;
  border-top: 2px solid var(--accent);
}

.schedule-detail {
  padding: 10px 0;
}

.totals-row {
  background: #f0f0f0;
  font-weight: 600;
  border-top: 2px solid var(--primary-dark);
}

/* ============================================================
   COI TRACKING STYLES
   ============================================================ */

.badge-active {
  display: inline-block;
  background: var(--success);
  color: var(--white);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}

.badge-expiring {
  display: inline-block;
  background: var(--warning);
  color: var(--white);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}

.badge-expired {
  display: inline-block;
  background: var(--danger);
  color: var(--white);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}

.submission-detail {
  padding: 10px 0;
}

.detail-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.detail-section:last-child {
  border-bottom: none;
}

.detail-section h4 {
  margin-bottom: 12px;
  font-size: 14px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.detail-grid div {
  font-size: 13px;
}

.detail-grid strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.carrier-detail {
  padding: 10px 0;
}

/* ============================================================
   UTILITY STYLES
   ============================================================ */

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}

.checkbox-label input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}

.table-sm {
  font-size: 12px;
}

.table-sm th,
.table-sm td {
  padding: 6px 10px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ── btn-xs: extra-small size modifier ── */
.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
}

/* ── Removed duplicate .btn-accent override that produced bright yellow fills.
   The canonical .btn-accent definition lives above (dark bg + gold border). ── */

/* ============================================================
   PORTAL STYLES
   ============================================================ */
.portal-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

.portal-topbar {
  background: var(--primary-dark);
  color: var(--white);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-logo {
  height: 40px;
  font-weight: 900;
  color: var(--accent);
  font-size: 24px;
}

.portal-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
}

.portal-nav-tab {
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  color: var(--text);
  transition: all 0.2s;
}

.portal-nav-tab:hover {
  background: var(--bg);
}

.portal-nav-tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.portal-content {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 24px;
  width: 100%;
}

/* ============================================================
   AUTOMATION STYLES
   ============================================================ */
.automation-container {
  padding: 20px;
}

.rule-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
}

.rule-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ══════════════════════════════════════════════════════════════
   TOGGLE SWITCH — .toggle-switch / .toggle-slider
   Refactored to use ibx tokens. Larger size, clear ON/OFF state,
   hover + focus-visible ring for keyboard accessibility.
   OFF: dark neutral track, light thumb (visible against dark surfaces)
   ON:  ibx-gold track, white thumb (instant brand recognition)
   ══════════════════════════════════════════════════════════════ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--ibx-toggle-track-off);
  border: 1px solid var(--ibx-border-2);
  border-radius: 999px;
  transition:
    background var(--ibx-speed-fast) ease,
    border-color var(--ibx-speed-fast) ease,
    box-shadow var(--ibx-speed-fast) ease;
}

/* Thumb */
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ibx-toggle-thumb);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.40);
  transition:
    left var(--ibx-speed-fast) ease,
    background var(--ibx-speed-fast) ease;
}

/* ON state — gold track, white thumb */
input:checked + .toggle-slider {
  background: var(--ibx-toggle-track-on);
  border-color: transparent;
}

input:checked + .toggle-slider:before {
  left: calc(100% - 23px);
  background: #ffffff;
}

/* Hover — slight brightness lift */
.toggle-switch:hover .toggle-slider {
  filter: brightness(1.10);
}

/* Focus-visible — gold glow ring for keyboard navigation */
input:focus-visible + .toggle-slider {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
}

/* ============================================================
   REPORTS STYLES
   ============================================================ */
.reports-container {
  padding: 20px;
}

.reports-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.report-tab-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);   /* explicit — buttons don't reliably inherit in all browsers */
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

/* Scoped typography inside report sections */
.report-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px 0;
  letter-spacing: 0.01em;
}
.report-section p {
  color: var(--text-muted);
  font-size: 13px;
}

.report-tab-btn:hover {
  border-color: var(--accent);
}

.report-tab-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 600;
}

.chart-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.chart-label {
  width: 160px;
  font-size: 13px;
  text-align: right;
  color: var(--text-muted);
}

.chart-bar-track {
  flex: 1;
  background: var(--bg);
  border-radius: 4px;
  height: 22px;
  overflow: hidden;
}

.chart-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.5s ease;
  min-width: 4px;
}

.chart-value {
  width: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.report-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.report-actions {
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
}

.metric-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.metric-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent);
}

.esign-document-preview {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

/* ============================================================
   MVR STYLES
   ============================================================ */

/* ============================================================
   NOTIFICATION BELL STYLES
   ============================================================ */
.notif-bell {
  position: relative;
  cursor: pointer;
  padding: 8px;
  margin-right: 16px;
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.notif-dropdown {
  /* position:fixed — top/right set by JS in toggleNotifDropdown() via getBoundingClientRect.
     Escapes top-header overflow and any other stacking-context ancestor.             */
  position: fixed;
  width: 320px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  z-index: 500;
  max-height: 360px;
  overflow-y: auto;
}
.notif-dropdown.hidden { display: none; }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .sidebar,
  .top-header,
  .portal-topbar,
  .portal-nav,
  .modal-overlay,
  .confirm-overlay,
  .toast-container,
  .btn-secondary,
  .btn-danger,
  .report-actions {
    display: none;
  }

  .portal-content {
    margin: 0;
    padding: 0;
  }

  body.printing {
    background: white;
  }

  .main-area,
  .portal-layout {
    margin: 0;
    padding: 0;
  }

  .content,
  .portal-content {
    padding: 0;
  }
}

/* ============================================================
   PHASE 4: QUOTE COMPARISON STYLES
   ============================================================ */

.quote-comparison-page {
  padding: 24px;
}

.quote-comparison-header {
  margin-bottom: 24px;
}

.quote-comparison-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.comparison-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 20px 0;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  display: table;
}

.comparison-table th {
  background: var(--primary-dark);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  min-width: 180px;
  position: sticky;
  top: 0;
  font-weight: 600;
  font-size: 13px;
}

.comparison-table th:first-child {
  background: #1a1a1a;
  min-width: 200px;
  position: sticky;
  left: 0;
  z-index: 2;
}

.comparison-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 13px;
}

.comparison-table td:first-child {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  position: sticky;
  left: 0;
  z-index: 1;
}

.comparison-table tr.section-header td {
  background: #f0f0f0;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 6px 14px;
}

.comparison-table .action-row td {
  padding: 12px 14px;
  text-align: center;
}

.col-highlight {
  border-left: 3px solid var(--accent) !important;
}

.col-highlight td,
.comparison-table tbody tr > :nth-child(2).col-highlight,
.comparison-table tbody tr > :nth-child(3).col-highlight,
.comparison-table tbody tr > :nth-child(4).col-highlight,
.comparison-table tbody tr > :nth-child(5).col-highlight {
  background: rgba(201,162,39,0.04);
}

.comparison-val-good {
  color: var(--success);
  font-weight: 600;
}

.comparison-val-warn {
  color: var(--warning);
  font-weight: 600;
}

.comparison-val-bad {
  color: var(--danger);
  font-weight: 600;
}

.submission-info {
  margin-top: 12px;
}

.submission-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 13px;
}

.meta-item {
  color: var(--text-muted);
}

/* ============================================================
   PHASE 4: UNDERWRITING STYLES
   ============================================================ */

/* ── UW Intelligence: strip .content padding while shell is active ── */
/* Mirrors body.cmd-active pattern used by DNA Engine.                  */
/* MutationObserver in underwriting.js removes uw-active on nav away.  */
body.uw-active .content {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── UW Intelligence persistent shell ──────────────────────── */
.uw-shell {
  display: flex;
  flex-direction: column;
  flex: 1;          /* fills the flex column .content creates while uw-active */
  min-height: 0;    /* prevents flex blowout */
}

/* Sticky header row: title + mode tabs */
.uw-shell-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  height: 46px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.uw-shell-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Mode tabs inside the shell header */
.uw-mode-tabs {
  display: flex;
  gap: 2px;
}

.uw-mode-tab {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.uw-mode-tab:hover {
  color: var(--primary);
  background: rgba(0,0,0,0.03);
  border-color: var(--border);
}

.uw-mode-tab--active {
  color: var(--accent);
  background: rgba(var(--accent-rgb, 0,119,200), 0.07);
  border-color: var(--accent);
}

/* Scrollable work area below the sticky header */
.uw-work-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Breadcrumb bar inside work area ──────────────────────── */
.uw-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex-wrap: wrap;
}

.uw-crumb {
  color: var(--text-muted);
}

.uw-crumb--link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uw-crumb--link:hover {
  color: var(--primary);
}

.uw-crumb--current {
  color: var(--text);
  font-weight: 600;
}

.uw-crumb-sep {
  color: var(--border);
  font-size: 14px;
  line-height: 1;
}

/* Back button sits at the right end of the breadcrumb */
.uw-back-btn {
  margin-left: auto !important;
}

.uw-loading {
  padding: 40px 24px;
  color: var(--text-muted);
  font-size: 13px;
}

.underwriting-page {
  padding: 24px;
}

.underwriting-header {
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.uw-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.uw-tab-btn {
  padding: 10px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  font-size: 13px;
}

.uw-tab-btn:hover {
  color: var(--primary);
  background: rgba(0,0,0,0.02);
}

.uw-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.uw-tab-content {
  min-height: 400px;
}

.readiness-container {
  padding: 20px 0;
}

.readiness-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.readiness-score {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1;
}

.readiness-status-badge {
  text-align: center;
  min-width: 80px;
}

.readiness-score-bar {
  height: 12px;
  border-radius: 6px;
  background: var(--border);
  overflow: hidden;
  margin: 8px 0;
}

.readiness-score-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s ease;
}

.readiness-complete .readiness-score-fill {
  background: var(--success);
}

.readiness-review .readiness-score-fill {
  background: var(--warning);
}

.readiness-missing .readiness-score-fill {
  background: var(--danger);
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}

.checklist-item.met {
  background: rgba(46,125,50,0.06);
}

.checklist-item.warning {
  background: rgba(230,81,0,0.06);
}

.checklist-item.missing {
  background: rgba(198,40,40,0.06);
}

.checklist-icon {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
  font-weight: 600;
}

.checklist-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin: 16px 0 6px;
}

.appetite-container {
  padding: 20px 0;
}

.filter-btn {
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.appetite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.appetite-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
}

.appetite-card:hover {
  box-shadow: var(--shadow);
}

.appetite-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.appetite-card-header h4 {
  margin: 0;
  font-size: 14px;
}

.fit-likely {
  background: rgba(46,125,50,0.1);
  color: var(--success);
  border: 1px solid rgba(46,125,50,0.3);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.fit-possible {
  background: rgba(230,81,0,0.1);
  color: var(--warning);
  border: 1px solid rgba(230,81,0,0.3);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.fit-unlikely {
  background: rgba(198,40,40,0.1);
  color: var(--danger);
  border: 1px solid rgba(198,40,40,0.3);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.appetite-score-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
  margin: 6px 0;
}

.appetite-score-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
}

.appetite-reason {
  font-size: 12px;
  color: var(--text-muted);
  margin: 3px 0;
}

.appetite-reason.good {
  color: var(--success);
}

.appetite-reason.bad {
  color: var(--danger);
}

.appetite-reason.warn {
  color: var(--warning);
}

.questions-container {
  padding: 20px 0;
}

.uw-question-section {
  margin-bottom: 24px;
}

.uw-section-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.uw-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
  font-size: 13px;
}

.flags-container {
  padding: 20px 0;
}

.flags-summary {
  display: flex;
  gap: 24px;
  padding: 16px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
  font-size: 13px;
}

.risk-flag-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 4px solid;
}

.risk-flag-card.HIGH {
  border-left-color: var(--danger);
  background: rgba(198,40,40,0.03);
}

.risk-flag-card.MEDIUM {
  border-left-color: var(--warning);
  background: rgba(230,81,0,0.03);
}

.risk-flag-card.INFO {
  border-left-color: #1565C0;
  background: rgba(21,101,192,0.03);
}

.risk-flag-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.risk-flag-title {
  font-weight: 700;
  font-size: 14px;
}

.risk-flag-message {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.risk-flag-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.flag-type-gap {
  background: #FFEBEE;
  color: var(--danger);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.flag-type-warning {
  background: #FFF3E0;
  color: var(--warning);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.flag-type-missing {
  background: #E3F2FD;
  color: #1565C0;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

/* ============================================================
   UW COMMAND CENTER  (Phase 4 — Unified Command Center)
   Namespace: .uwcc-*
   All command center elements live inside .uw-command-center
   which is rendered into #uw-work-area (the scrollable shell body)
   ============================================================ */

/* ── Root container ────────────────────────────────────────── */
.uw-command-center {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  background: var(--bg);
}

/* ── Command Bar ────────────────────────────────────────────── */
.uwcc-command-bar {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 24px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
}

.uwcc-brand {
  flex-shrink: 0;
  min-width: 200px;
}

.uwcc-brand__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.uwcc-brand__sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.uwcc-search-col {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uwcc-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.uwcc-search-icon {
  position: absolute;
  left: 10px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.5;
}

.uwcc-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--input-text);
  background: var(--input-bg);
  transition: border-color 0.15s ease;
  outline: none;
}

.uwcc-search-input:focus {
  border-color: var(--accent);
}

/* Quick-filter chips */
.uwcc-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.uwcc-chip {
  padding: 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.uwcc-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.uwcc-chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.uwcc-chip--clear {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  font-size: 11px;
}

.uwcc-chip--clear:hover {
  background: rgba(198,40,40,0.08);
  border-color: var(--danger);
  color: var(--danger);
}

.uwcc-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ── KPI Summary Row ────────────────────────────────────────── */
.uwcc-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.uwcc-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px;
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
  position: relative;
}

.uwcc-kpi-card:last-child { border-right: none; }

.uwcc-kpi-card:hover {
  background: var(--accent-subtle);
}

.uwcc-kpi-card--active {
  background: var(--accent-subtle);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.uwcc-kpi-card--danger .uwcc-kpi__value  { color: var(--danger); }
.uwcc-kpi-card--warning .uwcc-kpi__value { color: var(--warning); }

.uwcc-kpi__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.uwcc-kpi__value {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}

.uwcc-kpi__meta {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Main 2-column grid ─────────────────────────────────────── */
.uwcc-main-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  flex: 1;
  min-height: 0;
}

.uwcc-main-grid__primary {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  min-height: 0;
}

.uwcc-main-grid__side {
  overflow-y: auto;
  min-height: 0;
}

/* Shared panel container */
.uwcc-panel {
  height: 100%;
}

.uwcc-panel__hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 3;
}

.uwcc-panel__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.uwcc-panel__sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.uwcc-filter-badge {
  display: inline-block;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid rgba(201,162,39,0.3);
}

/* ── List controls row (scope tabs + sort) ──────────────────── */
.uwcc-list-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uwcc-scope-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px;
}

.uwcc-scope {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.uwcc-scope:hover { color: var(--text-primary); background: rgba(0,0,0,0.05); }

.uwcc-scope--active {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.uwcc-sort-select {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--input-bg);
  cursor: pointer;
  outline: none;
}

/* ── Work card list ─────────────────────────────────────────── */
.uwcc-work-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px;
}

.uwcc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.uwcc-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.uwcc-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.uwcc-card__identity { flex: 1; }

.uwcc-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.uwcc-card__badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.uwcc-card__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.uwcc-card__meta span::before { content: ''; }

.uwcc-card__risk {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}

.uwcc-card__actions {
  display: flex;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* ── Score badge ────────────────────────────────────────────── */
.uwcc-score-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.uwcc-score--risk-low,
.uwcc-score--low {
  background: rgba(46,125,50,0.1);
  color: var(--success);
  border: 1px solid rgba(46,125,50,0.25);
}

.uwcc-score--risk-med,
.uwcc-score--med {
  background: rgba(230,81,0,0.1);
  color: var(--warning);
  border: 1px solid rgba(230,81,0,0.25);
}

.uwcc-score--risk-high,
.uwcc-score--high {
  background: rgba(198,40,40,0.1);
  color: var(--danger);
  border: 1px solid rgba(198,40,40,0.25);
}

/* ── Appetite badge ─────────────────────────────────────────── */
.uwcc-appetite-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.uwcc-appetite--fit {
  background: rgba(46,125,50,0.1);
  color: var(--success);
  border: 1px solid rgba(46,125,50,0.25);
}

.uwcc-appetite--review {
  background: rgba(230,81,0,0.08);
  color: var(--warning);
  border: 1px solid rgba(230,81,0,0.2);
}

.uwcc-appetite--conflict {
  background: rgba(198,40,40,0.1);
  color: var(--danger);
  border: 1px solid rgba(198,40,40,0.3);
}

/* ── Flag chips ─────────────────────────────────────────────── */
.uwcc-flag-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.uwcc-flag-chip--miss {
  background: rgba(21,101,192,0.08);
  color: var(--info);
  border-color: rgba(21,101,192,0.2);
}

/* ── Empty state ────────────────────────────────────────────── */
.uwcc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Intelligence panel ─────────────────────────────────────── */
.uwcc-intel-widget {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}

.uwcc-intel-widget:last-child { border-bottom: none; }

.uwcc-intel-widget__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.uwcc-intel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 12px;
  transition: background 0.12s ease;
  margin-bottom: 2px;
  gap: 8px;
}

.uwcc-intel-row:hover { background: var(--hover-bg); }

.uwcc-intel-row--static { cursor: default; }
.uwcc-intel-row--static:hover { background: transparent; }

.uwcc-intel-row__label {
  flex: 1;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.uwcc-intel-row__count {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
  flex-shrink: 0;
}

.uwcc-intel-row__risk {
  font-size: 10px;
  font-weight: 700;
  color: var(--danger);
  background: rgba(198,40,40,0.08);
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
}

.uwcc-intel-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 8px;
  font-style: italic;
}

/* ── Carrier appetite snapshot ─────────────────────────────── */
.uwcc-stat-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uwcc-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.uwcc-stat-row--good { background: rgba(46,125,50,0.06);  color: var(--success); }
.uwcc-stat-row--warn { background: rgba(230,81,0,0.06);   color: var(--warning); }
.uwcc-stat-row--bad  { background: rgba(198,40,40,0.06);  color: var(--danger); }

.uwcc-stat-row strong { font-size: 15px; font-weight: 800; }

/* ── badge-outline variant (missing from core) ───────────────── */
.badge-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ── badge-accent variant ────────────────────────────────────── */
.badge-accent {
  background: var(--accent-subtle);
  border: 1px solid rgba(201,162,39,0.3);
  color: var(--accent-dark);
}

/* ── Responsive collapse ─────────────────────────────────────── */
@media (max-width: 900px) {
  .uwcc-main-grid {
    grid-template-columns: 1fr;
  }
  .uwcc-main-grid__side {
    border-top: 1px solid var(--border);
    overflow-y: unset;
  }
  .uwcc-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .uwcc-command-bar {
    position: static;
  }
  .uwcc-panel__hdr {
    position: static;
  }
}

@media (max-width: 600px) {
  .uwcc-kpi-row { grid-template-columns: 1fr 1fr; }
  .uwcc-kpi__value { font-size: 22px; }
  .uwcc-command-bar { padding: 12px 16px; }
}

/* ============================================================
   PHASE 4: PROPOSAL DOCUMENT STYLES
   ============================================================ */

.proposal-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px;
  background: var(--white);
  font-family: Georgia, serif;
}

.proposal-header {
  border-bottom: 3px solid var(--accent);
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.proposal-agency-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 2px;
}

.proposal-subtitle {
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 1px;
  margin-top: 4px;
}

.proposal-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-dark);
  border-left: 4px solid var(--accent);
  padding-left: 12px;
  margin: 24px 0 12px;
}

.proposal-recommendation {
  background: rgba(201,162,39,0.08);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.submission-selector {
  padding: 24px;
}

.submission-selector h2 {
  margin-bottom: 20px;
}

.submission-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.submission-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.submission-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

.submission-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.submission-card-header strong {
  font-size: 13px;
}

.submission-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

@media print {
  .proposal-page,
  .loading-screen {
    padding: 20px;
    max-width: 100%;
  }
  .sidebar,
  .topbar,
  .content-header,
  #toast-container,
  .btn:not(.btn-print),
  .proposal-back-btn,
  .uw-tabs,
  .uw-tab-btn,
  .quote-comparison-toolbar {
    display: none !important;
  }
  .proposal-page,
  .risk-flag-card {
    box-shadow: none;
    border: none;
  }
}

.checkbox-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ============================================================
   DASHBOARD — Command Center
   ============================================================ */

.dashboard {
  display: flex;
  flex-direction: column;
  width: 100%;        /* fill .content's content area so the sticky dock's -30px margins
                         always bleed to the correct edges regardless of sidebar state */
  gap: 0;             /* section spacing handled by cc-panel margin-bottom and explicit margins */
  padding: 0;         /* .content padding (12px top, 30px sides) provides all inset */
  padding-bottom: 20px;
  /* max-width removed: was capping at 1600px with no margin:auto, leaving dead space
     on the right at wide viewports (≥1720px) — especially visible with collapsed sidebar */
  box-sizing: border-box;
}

/* ── Work Strip: 2-column layout (Continue Work | Immediate Attention) ── */
/* First scrollable section after the sticky dock. Left = resume last work;
   Right = urgency-banded action items. Both are independent panels that can
   be detached or rearranged in a future panel manager without code changes. */
/* ── Work Strip: Action Queue (dominant 2/3) + Continue Work (1/3) ─────────
   The work strip is the primary action surface. Action Queue gets a gold
   accent top-border to signal it as the highest-priority element on the page,
   above the calmer analytics panels below. */
.cc-work-strip {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 10px;
}
.cc-work-col            { min-width: 0; }
.cc-work-col--dominant  { min-width: 0; }
.cc-work-col--secondary { min-width: 0; }
.cc-work-strip .cc-panel { margin-bottom: 0; }

/* Gold top accent on the Action Queue panel — signals dominant importance */
.cc-work-col--dominant > .cc-panel {
  border-top: 3px solid var(--ibx-gold);
}

/* ── Main Work Grid: 2-column drill-down panels ── */
.cc-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}
.cc-main-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── KPI Band: single compact row ─────────────────────────────────────────
   5 base tiles + 1 conditional (Receivables when Invoices module loaded).
   auto-fit collapses empty tracks so tiles expand evenly across full width.
   Row labels removed — they added heading weight without adding value. */
.dash-kpi-band  { margin-top: 10px; width: 100%; }
.dash-kpi-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* auto-fit (not auto-fill): collapses empty tracks so tiles always stretch
     to fill the full container width. auto-fill would create invisible empty
     columns after the last tile, producing dead space on the right. */
  gap: 8px;
}

/* ── KPI Tiles ── */
.summary-tile {
  background: var(--ibx-surface-1);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border: 1px solid var(--ibx-border-1);
  border-top: 3px solid;
  transition: box-shadow 0.18s, transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  min-height: 0;
}
.summary-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.10); transform: translateY(-1px); }

/* Color tokens — operational */
.summary-tile.tile-submissions     { border-top-color: var(--primary-dark); }
.summary-tile.tile-quotes          { border-top-color: #7B5EA7; }   /* category purple — no ibx semantic equiv */
.summary-tile.tile-renewals-urgent { border-top-color: var(--ibx-danger); }
.summary-tile.tile-renewals-ok    { border-top-color: var(--ibx-success); }
.summary-tile.tile-tasks           { border-top-color: var(--ibx-gold); }
.summary-tile.tile-mini-pipeline   { border-top-color: #0288D1; }   /* category blue */
.summary-tile.tile-at-risk         { border-top-color: var(--ibx-danger); }
.summary-tile.tile-at-risk-clear   { border-top-color: var(--ibx-text-3); }

/* Color tokens — financial */
.summary-tile.tile-bound           { border-top-color: #2E7D32; }
.summary-tile.tile-coi             { border-top-color: #1565C0; }
.summary-tile.tile-receivables     { border-top-color: #0277BD; }
.summary-tile.tile-pipeline        { border-top-color: #00796B; }

/* Color tokens — Admin Control Center tiles (same component, admin-specific accents) */
.summary-tile.tile-acc-intake      { border-top-color: var(--ibx-gold); }             /* intake queue — gold = needs action */
.summary-tile.tile-acc-review      { border-top-color: var(--ibx-warning); }          /* needs review — amber */
.summary-tile.tile-acc-fail        { border-top-color: var(--ibx-danger); }           /* filing failures — red */
.summary-tile.tile-acc-archived    { border-top-color: var(--ibx-text-3); }           /* archived — muted */
.summary-tile.tile-acc-aiparse     { border-top-color: #b91c1c; }                  /* AI parse errors — deep red */
.summary-tile.tile-acc-carrier     { border-top-color: #7B5EA7; }                  /* carrier issues — purple (matches quotes) */
.summary-tile.tile-acc-reviews     { border-top-color: #0288D1; }                  /* inspection reviews — blue (matches pipeline) */

/* Typography */
.summary-tile-value { font-size: 20px; font-weight: 800; color: var(--ibx-text-1); line-height: 1; }
.summary-tile-label { font-size: 10px; font-weight: 600; color: var(--ibx-text-2); margin-top: 3px; }
.summary-tile-sub   { font-size: 10px; color: var(--ibx-text-3); margin-top: 1px; }

/* Mini Pipeline tile — inline stage count badges */
.mini-pipeline-bar { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 20px; }
.mpb-seg {
  font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  color: #fff; line-height: 1.4;
}
.mpb-draft    { background: #737373; }             /* neutral gray — draft */
.mpb-marketed { background: var(--ibx-gold); }         /* gold — actively marketed */
.mpb-quoted   { background: #7c3aed; }
.mpb-bound    { background: #16a34a; }
.mp-empty     { color: var(--ibx-text-3); font-size: 12px; }

/* Receivables dual-value display */
.recvb-vals   { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.recvb-total  { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1; }
.recvb-overdue{ font-size: 10px; font-weight: 700; color: var(--ibx-danger); }

/* Panel stat badges — inline in cc-panel-hdr */
.cc-panel-stat {
  font-size: 11px; font-weight: 600; color: var(--ibx-text-3);
  background: var(--ibx-surface-2); border: 1px solid var(--ibx-border-1);
  padding: 1px 7px; border-radius: 99px;
}
.cc-panel-stat--red {
  color: var(--danger, #C62828);
  background: rgba(198,40,40,0.06);
  border-color: rgba(198,40,40,0.20);
}

/* Overdue badge on task rows */
.item-badge-overdue {
  flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--danger, #C62828);
  background: rgba(198,40,40,0.08); border: 1px solid rgba(198,40,40,0.18);
  padding: 1px 5px; border-radius: 3px; margin-left: auto;
}

/* Full-width row */
.dash-full-row { }

.dash-card {
  background: var(--white);
  border: 1px solid var(--ibx-border-1);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  overflow: hidden;
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--ibx-border-1);
}
.dash-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.dash-view-all {
  font-size: 12px;
  color: var(--ibx-gold);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.dash-view-all:hover { text-decoration: underline; }

/* Renewal Forecast Bar */
.renewal-forecast-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 20px;
  background: #000;
  border-bottom: 1px solid #222;
}
.forecast-metric { flex: 1; text-align: center; padding: 4px 0; }
.forecast-value { font-size: 26px; font-weight: 800; color: var(--ibx-gold); }
.forecast-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.7); margin-top: 3px; }
.forecast-sub { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.forecast-divider { width: 1px; background: rgba(255,255,255,0.15); align-self: stretch; margin: 4px 0; }

/* Renewal Table */
.dash-renewal-table { width: 100%; border-collapse: collapse; }
.dash-renewal-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--ibx-text-3); padding: 8px 12px;
  text-align: left; border-bottom: 1px solid var(--ibx-border-1); background: var(--bg);
}
.dash-renewal-table td { padding: 9px 12px; font-size: 13px; border-bottom: 1px solid var(--ibx-border-1); vertical-align: middle; }
.renewal-row { cursor: pointer; transition: background 0.1s; }
.renewal-row:hover td { background: rgba(201,162,39,0.05); }
.renewal-row:last-child td { border-bottom: none; }
.fw-600 { font-weight: 600; }
.days-cell { font-weight: 700; font-size: 12px; }
.days-cell.urgency-red { color: var(--danger); }
.days-cell.urgency-yellow { color: var(--warning); }
.days-cell.urgency-green { color: var(--success); }

/* Urgency dots */
.urgency-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.urgency-dot.red { background: var(--danger); }
.urgency-dot.yellow { background: var(--warning); }
.urgency-dot.green { background: var(--success); }


/* Row 3: Four columns */
.dash-four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dash-list-body { padding: 3px 0; }

.dash-list-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dash-list-item:last-child { border-bottom: none; }
.dash-list-item:hover { background: rgba(201,162,39,0.05); }
.dash-list-item.no-hover { cursor: default; }
.dash-list-item.no-hover:hover { background: none; }
.item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.item-meta { font-size: 11px; color: var(--ibx-text-3); white-space: nowrap; flex-shrink: 0; }

/* Priority dots */
.item-priority-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.item-priority-dot.high { background: var(--danger); }
.item-priority-dot.medium { background: var(--warning); }
.item-priority-dot.low { background: var(--success); }

/* Stage mini badges in submissions column */
.stage-mini-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 8px; flex-shrink: 0; letter-spacing: 0.4px;
}
.stage-mini-badge.new_lead  { background: rgba(115, 115, 115, 0.10); color: var(--ibx-text-3);       border: 1px solid rgba(115, 115, 115, 0.18); }
.stage-mini-badge.submitted { background: rgba( 29,  78, 216, 0.10); color: #60a5fa;                 border: 1px solid rgba( 29,  78, 216, 0.20); }
.stage-mini-badge.quoted    { background: rgba(201, 162,  39, 0.12); color: var(--ibx-gold);      border: 1px solid rgba(201, 162,  39, 0.22); }
.stage-mini-badge.bound     { background: rgba(  5, 150, 105, 0.10); color: var(--success);          border: 1px solid rgba(  5, 150, 105, 0.20); }

/* COI status minis */
.coi-status-mini {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 8px; flex-shrink: 0;
}
.coi-status-mini.pending    { background: rgba(201, 162,  39, 0.12); color: var(--ibx-gold); border: 1px solid rgba(201, 162,  39, 0.22); }
.coi-status-mini.processing { background: rgba( 29,  78, 216, 0.10); color: #60a5fa;            border: 1px solid rgba( 29,  78, 216, 0.20); }
.coi-status-mini.issued     { background: rgba(  5, 150, 105, 0.10); color: var(--success);     border: 1px solid rgba(  5, 150, 105, 0.20); }

.dash-card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--ibx-border-1);
  text-align: center;
}
.dash-empty { padding: 12px 14px; text-align: center; color: var(--ibx-text-3); font-size: 12px; }
.dash-empty.success { color: var(--success); font-weight: 600; }

/* Row 4: Activity Timeline */
.activity-list { padding: 2px 0; }
.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background 0.1s;
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: rgba(201,162,39,0.04); }
.activity-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; }
.activity-body { flex: 1; min-width: 0; }
.activity-label { font-size: 12px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-meta { font-size: 10px; color: var(--ibx-text-3); margin-top: 1px; }
.activity-type-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 10px; flex-shrink: 0; letter-spacing: 0.4px;
}
.activity-type-badge.note,
.activity-type-badge.task       { background: rgba(201, 162,  39, 0.10); color: var(--ibx-gold);  border: 1px solid rgba(201, 162,  39, 0.20); }
.activity-type-badge.submission { background: rgba( 99, 102, 241, 0.10); color: #818cf8;             border: 1px solid rgba( 99, 102, 241, 0.20); }
.activity-type-badge.policy     { background: rgba(  5, 150, 105, 0.10); color: var(--success);      border: 1px solid rgba(  5, 150, 105, 0.20); }
.activity-type-badge.document   { background: rgba(124,  58, 237, 0.10); color: #a78bfa;             border: 1px solid rgba(124,  58, 237, 0.20); }
.activity-type-badge.quote      { background: rgba( 29,  78, 216, 0.10); color: #60a5fa;             border: 1px solid rgba( 29,  78, 216, 0.20); }
.activity-type-badge.client     { background: rgba(201, 162,  39, 0.10); color: var(--ibx-gold);  border: 1px solid rgba(201, 162,  39, 0.20); }
.activity-type-badge.renewal    { background: rgba(201, 162,  39, 0.12); color: var(--ibx-gold);  border: 1px solid rgba(201, 162,  39, 0.24); }
/* Clickable activity items */
.activity-item.clickable { cursor: pointer; }
.activity-item.clickable:hover { background: rgba(201,162,39,0.07); }

/* ============================================================
   30 / 60 / 90 DAY EXPIRY SUMMARY CARDS
   ============================================================ */
.dash-expiry-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 0;  /* spacing handled by parent (.cc-panel-body or .cc-main-col gap) */
}
/* When used standalone (outside cc-panel), restore original spacing */
.dashboard > .dash-expiry-row { margin-bottom: 0; }
.expiry-card {
  background: var(--white);
  border: 1px solid var(--ibx-border-1);
  border-left: 3px solid var(--ibx-border-1);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.expiry-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.10); transform: translateY(-1px); }
.expiry-30 { border-left-color: var(--danger); }
.expiry-60 { border-left-color: var(--warning); }
.expiry-90 { border-left-color: var(--success); }
.expiry-card-count { font-size: 20px; font-weight: 700; line-height: 1; }
.expiry-30 .expiry-card-count { color: var(--danger); }
.expiry-60 .expiry-card-count { color: var(--warning); }
.expiry-90 .expiry-card-count { color: var(--success); }
.expiry-card-label { font-size: 11px; font-weight: 600; color: var(--text); margin-top: 2px; }
.expiry-card-sub   { font-size: 10px; color: var(--ibx-text-3); }

/* ============================================================
   QUOTE PIPELINE WIDGET
   ============================================================ */
.pipeline-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--ibx-border-1);
  border-radius: 8px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.pipeline-stage {
  background: var(--white);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.pipeline-stage:hover { background: rgba(201,162,39,0.06); }
.pipeline-count   { font-size: 28px; font-weight: 700; line-height: 1; color: var(--text); }
.pipeline-label   { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ibx-text-3); }
.pipeline-premium { font-size: 12px; color: var(--ibx-text-3); font-weight: 500; }
.pipeline-stage.pipeline-draft    .pipeline-count { color: var(--ibx-text-3); }
.pipeline-stage.pipeline-marketed .pipeline-count { color: var(--warning); }
.pipeline-stage.pipeline-quoted   .pipeline-count { color: var(--ibx-gold); }
.pipeline-stage.pipeline-bound    .pipeline-count { color: var(--success); }
.pipeline-stage.pipeline-lost     .pipeline-count { color: var(--danger); }

/* ============================================================
   SEARCH KEYBOARD NAVIGATION
   ============================================================ */
.search-result-item.active {
  background: rgba(201,162,39,0.08);
  outline: none;
}

/* ============================================================
   CLIENT QUICK LINKS ROW
   ============================================================ */
.client-quick-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--radius);
}

.quick-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ibx-text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  line-height: 1.5;
}

.quick-link:hover:not(:disabled) {
  background: rgba(201,162,39,0.09);
  border-color: rgba(201,162,39,0.3);
  color: var(--ibx-gold);
}

.quick-link-disabled,
.quick-link:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ============================================================
   CLIENT DOCUMENT LIBRARY
   ============================================================ */
.client-doc-search-wrap {
  display: flex;
  align-items: center;
}

.client-doc-search {
  width: 220px;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.client-doc-search:focus {
  outline: none;
  border-color: var(--ibx-gold);
  box-shadow: 0 0 0 2px rgba(201,162,39,0.15);
}

.doc-lib-row {
  cursor: pointer;
  transition: background 0.1s;
}

.doc-lib-row:hover {
  background: rgba(201,162,39,0.05);
}

/* ============================================================
   SMART SUBMISSION BUILDER
   ============================================================ */

.sb-wizard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--ibx-border-1);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  min-height: 600px;
  margin: 0 24px 24px;
}

.sb-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ibx-border-1);
  background: #000;
  border-radius: 12px 12px 0 0;
}
.sb-title { font-size: 16px; font-weight: 700; color: var(--ibx-gold); flex: 0 0 auto; }

/* Progress steps */
.sb-progress { display: flex; align-items: center; gap: 0; flex: 1; justify-content: center; }
.sb-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 500;
  padding: 0 12px;
}
.sb-step.active { color: var(--ibx-gold); }
.sb-step.done { color: rgba(255,255,255,0.7); }
.sb-step-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.sb-step.active .sb-step-dot { background: var(--ibx-gold); color: #000; }
.sb-step.done .sb-step-dot { background: rgba(201,162,39,0.3); color: var(--ibx-gold); }
.sb-step-line { width: 30px; height: 2px; background: rgba(255,255,255,0.1); }
.sb-step-line.done { background: rgba(201,162,39,0.4); }

.sb-body { flex: 1; padding: 28px 32px; overflow-y: auto; }
.sb-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--ibx-border-1);
  background: var(--bg);
  border-radius: 0 0 12px 12px;
}

/* Step 1: LOB grid */
.lob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.lob-card {
  border: 2px solid var(--ibx-border-1); border-radius: 10px;
  padding: 16px 12px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  background: var(--white);
}
.lob-card:hover { border-color: var(--ibx-gold); background: rgba(201,162,39,0.04); transform: translateY(-2px); }
.lob-card.selected { border-color: var(--ibx-gold); background: rgba(201,162,39,0.08); box-shadow: 0 0 0 3px rgba(201,162,39,0.15); }
.lob-icon { font-size: 26px; margin-bottom: 8px; }
.lob-label { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }

/* Step 3: Questions */
.sb-question-section { margin-bottom: 24px; }
.sb-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ibx-text-3); padding-bottom: 8px; border-bottom: 1px solid var(--ibx-border-1); margin-bottom: 14px; }
.sb-question-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sb-q-full { grid-column: 1/-1; }
.sb-progress-bar-wrap { background: var(--bg); border: 1px solid var(--ibx-border-1); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.sb-progress-track { flex: 1; height: 8px; background: var(--ibx-border-1); border-radius: 4px; overflow: hidden; }
.sb-progress-fill { height: 100%; background: var(--ibx-gold); border-radius: 4px; transition: width 0.3s; }
.sb-progress-text { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.yesno-group { display: flex; gap: 16px; }
.yesno-group label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* Step 4: Carrier match */
.sb-step4-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sb-readiness-score { font-size: 52px; font-weight: 900; line-height: 1; }
.sb-readiness-score.green { color: var(--success); }
.sb-readiness-score.yellow { color: var(--warning); }
.sb-readiness-score.red { color: var(--danger); }
.sb-readiness-label { font-size: 14px; font-weight: 600; margin-top: 4px; }
.sb-carrier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sb-carrier-card {
  border: 2px solid var(--ibx-border-1); border-radius: 8px; padding: 12px;
  cursor: pointer; transition: border-color 0.15s;
}
.sb-carrier-card:hover { border-color: var(--ibx-gold); }
.sb-carrier-card.selected { border-color: var(--ibx-gold); background: rgba(201,162,39,0.05); }
.sb-carrier-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sb-carrier-name { font-size: 12px; font-weight: 700; color: var(--text); }
.sb-carrier-rating { font-size: 11px; color: var(--ibx-text-3); margin-bottom: 6px; }
.sb-carrier-score-bar { height: 4px; background: var(--ibx-border-1); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.sb-carrier-score-fill { height: 100%; border-radius: 2px; }
.sb-missing-item { font-size: 12px; color: var(--danger); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.sb-missing-item::before { content: "✗"; font-weight: 700; }

/* Step 5: Package */
.sb-package-summary { background: var(--bg); border: 1px solid var(--ibx-border-1); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; }
.sb-package-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 13px; }
.sb-package-row:last-child { border-bottom: none; }
.sb-package-row-label { color: var(--ibx-text-3); font-weight: 500; }
.sb-package-row-val { font-weight: 600; color: var(--text); }
.sb-package-contents { list-style: none; padding: 0; margin: 0 0 20px; }
.sb-package-contents li { padding: 7px 0; border-bottom: 1px solid var(--ibx-border-1); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.sb-package-contents li:last-child { border-bottom: none; }
.sb-carrier-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sb-carrier-chip { background: #000; color: var(--ibx-gold); border: 1px solid var(--ibx-gold); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sb-carrier-chip-remove { cursor: pointer; color: rgba(201,162,39,0.6); }
.sb-carrier-chip-remove:hover { color: var(--ibx-gold); }
.sb-action-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* Print package */
.sb-print-package { display: none; }
@media print {
  .sb-wizard, .sidebar, .top-header, #toast-container { display: none !important; }
  .sb-print-package { display: block !important; padding: 20px; font-family: Arial, sans-serif; }
}

/* ============================================================
   Smart Builder v2 — Entry screen & path cards
   ============================================================ */
.sb-entry-body { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; }
.sb-entry-intro { max-width: 600px; text-align: center; margin-bottom: 36px; }
.sb-entry-heading { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.sb-entry-sub { font-size: 13px; color: var(--ibx-text-3); line-height: 1.6; }
.sb-entry-paths { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 680px; }
.sb-path-card {
  display: flex; align-items: flex-start; gap: 18px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--ibx-border-1); border-radius: 10px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sb-path-card:hover {
  border-color: rgba(201,162,39,0.5); transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.sb-path-icon { color: var(--ibx-gold); flex-shrink: 0; padding-top: 2px; }
.sb-path-content { flex: 1; min-width: 0; }
.sb-path-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sb-path-desc { font-size: 13px; color: var(--ibx-text-3); line-height: 1.55; margin-bottom: 8px; }
.sb-path-examples { font-size: 11px; color: var(--ibx-gold); opacity: 0.8; font-style: italic; }
.sb-path-arrow { font-size: 18px; color: var(--ibx-gold); opacity: 0.6; padding-top: 4px; flex-shrink: 0; transition: opacity 0.15s; }
.sb-path-card:hover .sb-path-arrow { opacity: 1; }

/* Path badge in wizard header */
.sb-path-badge {
  display: inline-flex; align-items: center;
  margin-left: 10px; padding: 2px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ibx-gold); background: rgba(201,162,39,0.1);
  border: 1px solid rgba(201,162,39,0.25); border-radius: 20px;
  text-transform: uppercase;
}

/* ── Step content layout ── */
.sb-step-content { display: flex; flex-direction: column; gap: 0; }
.sb-step-header { margin-bottom: 20px; }
.sb-step-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sb-step-sub { font-size: 13px; color: var(--ibx-text-3); line-height: 1.5; }

.sb-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sb-col { display: flex; flex-direction: column; gap: 0; }
.sb-field { margin-bottom: 14px; }
.sb-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ibx-text-3); margin-bottom: 5px; }
.sb-input  { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--ibx-border-1); border-radius: 6px; font-size: 13px; color: var(--text); box-sizing: border-box; }
.sb-select { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--ibx-border-1); border-radius: 6px; font-size: 13px; color: var(--text); box-sizing: border-box; }
.sb-textarea { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--ibx-border-1); border-radius: 6px; font-size: 13px; color: var(--text); resize: vertical; box-sizing: border-box; }
.sb-input:focus, .sb-select:focus, .sb-textarea:focus { outline: none; border-color: rgba(201,162,39,0.5); }
.sb-field-hint { font-size: 11px; color: var(--ibx-text-3); margin-top: 4px; }

/* ── ClientPicker dark-theme styling ────────────────────────── */
.cp-results-panel {
  background: var(--ibx-surface-1); border: 1px solid var(--ibx-border-2);
  border-top: none; border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.cp-row {
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid var(--ibx-border-1);
  transition: background 0.1s;
}
.cp-row:last-child { border-bottom: none; }
.cp-row:hover, .cp-row--active {
  background: var(--ibx-surface-3) !important;
}
.cp-row-name { font-size: 13px; font-weight: 600; color: var(--ibx-text-1); }
.cp-row-sub  { font-size: 11px; color: var(--ibx-text-3); margin-top: 2px; }
.cp-row-empty {
  padding: 12px 16px; font-size: 13px; color: var(--ibx-text-3);
  cursor: default;
}
.cp-row-empty:hover { background: transparent !important; }
.cp-row-create {
  border-top: 2px solid var(--ibx-border-2) !important;
  border-bottom: none !important;
  background: var(--ibx-surface-2);
  font-size: 13px; font-weight: 700;
  color: var(--ibx-gold);
}
.cp-row-create:hover {
  background: var(--ibx-surface-3) !important;
  color: var(--ibx-gold-bright, var(--ibx-gold));
}
.cp-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--ibx-surface-2);
  border: 1px solid var(--ibx-border-1); border-radius: 6px;
}
.cp-chip-name {
  flex: 1; font-size: 13px; font-weight: 600; color: var(--ibx-text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-chip-clear {
  background: none; border: none; cursor: pointer;
  color: var(--ibx-text-3); font-size: 17px; line-height: 1;
  padding: 0 2px; flex-shrink: 0;
}
.cp-chip-clear:hover { color: var(--danger, #ef4444); }

/* NAICS combobox — prevent selected-value clipping */
.naics-combobox-container { position: relative; width: 100%; }
.naics-combobox-container .naics-input {
  width: 100%; padding: 8px 10px; background: var(--bg);
  border: 1px solid var(--ibx-border-1); border-radius: 6px;
  font-size: 13px; color: var(--text); box-sizing: border-box;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.naics-combobox-container .naics-input:focus {
  outline: none; border-color: rgba(201,162,39,0.5);
  white-space: normal; overflow: visible; text-overflow: unset;
}
.naics-combobox-container .naics-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 120;
  max-height: 240px; overflow-y: auto; background: var(--bg);
  border: 1px solid var(--ibx-border-1); border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.naics-combobox-container .naics-option {
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--ibx-border-1);
}
.naics-combobox-container .naics-option:last-child { border-bottom: none; }
.naics-combobox-container .naics-option:hover,
.naics-combobox-container .naics-option.selected {
  background: rgba(201,162,39,0.08);
}
.naics-combobox-container .naics-no-results {
  padding: 12px; font-size: 12px; color: var(--ibx-text-3); text-align: center;
}
.sb-field-group { }
.sb-field-group-label {
  font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sb-field-group-hint {
  font-size: 11px; color: var(--ibx-text-3); margin-bottom: 10px; line-height: 1.4;
}
.sb-field-sep {
  height: 1px; background: var(--ibx-border-1); margin: 14px 0;
}
.sb-field--error .sb-input,
.sb-field--error .sb-select,
.sb-field--error .sb-textarea { border-color: var(--danger); }
.sb-field-error { font-size: 11px; color: var(--danger); margin-top: 4px; }
.sb-field-error { font-size: 11px; color: #f87171; margin-top: 4px; }
.sb-field--error .sb-input,
.sb-field--error .sb-select,
.sb-field--error .sb-textarea { border-color: rgba(248,113,113,0.5); }

/* Priority radio row */
.sb-priority-row { display: flex; gap: 8px; }
.sb-priority-opt {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border: 1px solid var(--ibx-border-1); border-radius: 6px;
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ibx-text-3);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.sb-priority-opt input[type="radio"] { display: none; }
.sb-priority-opt:hover { border-color: rgba(201,162,39,0.3); color: var(--text); }
.sb-priority-opt.active { border-color: rgba(201,162,39,0.6); color: var(--ibx-gold); background: rgba(201,162,39,0.07); }

/* ── Profile banner (business path step 2) ── */
.sb-profile-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 12px;
  background: rgba(201,162,39,0.06); border: 1px solid rgba(201,162,39,0.2); border-radius: 8px;
}
.sb-profile-icon { font-size: 26px; flex-shrink: 0; }
.sb-profile-type { font-size: 15px; font-weight: 700; color: var(--text); }
.sb-profile-basis { font-size: 11px; color: var(--ibx-text-3); margin-top: 2px; }
.sb-profile-change { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--ibx-gold); background: none; border: 1px solid rgba(201,162,39,0.3); border-radius: 5px; padding: 4px 10px; cursor: pointer; transition: background 0.12s; }
.sb-profile-change:hover { background: rgba(201,162,39,0.08); }
.sb-profile-note { font-size: 12px; color: var(--ibx-text-3); background: var(--bg); border: 1px solid var(--ibx-border-1); border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; line-height: 1.5; }

/* ── Section labels ── */
.sb-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ibx-text-3); margin-bottom: 8px; }
.sb-section-hint { font-size: 11px; color: var(--ibx-text-3); margin-bottom: 10px; line-height: 1.4; }

/* ── LOB row list ── */
.sb-lob-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sb-lob-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--ibx-border-1); border-radius: 7px;
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.sb-lob-row:hover { border-color: rgba(201,162,39,0.3); }
.sb-lob-row.selected { border-color: rgba(201,162,39,0.45); background: rgba(201,162,39,0.04); }
.sb-lob-check { flex-shrink: 0; margin-top: 2px; accent-color: var(--ibx-gold); }
.sb-lob-row-content { flex: 1; min-width: 0; }
.sb-lob-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.sb-lob-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-lob-reason { font-size: 11px; color: var(--ibx-text-3); line-height: 1.4; }
.sb-lob-conf { font-size: 10px; color: var(--ibx-text-3); padding: 2px 6px; border: 1px solid var(--ibx-border-1); border-radius: 4px; }

/* LOB priority badges */
.sb-lob-req { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: var(--ibx-gold); background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.25); text-transform: uppercase; letter-spacing: 0.03em; }
.sb-lob-rec { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); text-transform: uppercase; letter-spacing: 0.03em; }
.sb-lob-ifa { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; color: var(--ibx-text-3); background: transparent; border: 1px solid var(--ibx-border-1); text-transform: uppercase; letter-spacing: 0.03em; }

/* Add extra LOB row */
.sb-add-lob-wrap { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.sb-add-lob-btn { white-space: nowrap; flex-shrink: 0; }

/* Missing items list */
.sb-missing-list { display: flex; flex-direction: column; gap: 6px; }
.sb-missing-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ibx-text-3); line-height: 1.4; }
.sb-missing-dot { color: var(--ibx-gold); opacity: 0.6; flex-shrink: 0; font-size: 10px; padding-top: 2px; }

/* ── Document upload (doc path step 1) ── */
.sb-dropzone {
  border: 2px dashed var(--ibx-border-1); border-radius: 8px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sb-dropzone:hover, .sb-dropzone.drag-over { border-color: rgba(201,162,39,0.5); background: rgba(201,162,39,0.03); }
.sb-dz-icon { color: var(--ibx-text-3); margin-bottom: 10px; }
.sb-dz-text { font-size: 13px; color: var(--ibx-text-3); margin-bottom: 4px; }
.sb-dz-link { color: var(--ibx-gold); cursor: pointer; font-weight: 600; text-decoration: underline; }
.sb-dz-hint { font-size: 11px; color: var(--ibx-text-3); opacity: 0.7; }

/* File list */
.sb-file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 0; }
.sb-file-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--ibx-border-1); font-size: 12px;
}
.sb-file-row:last-child { border-bottom: none; }
.sb-file-icon { font-size: 16px; flex-shrink: 0; }
.sb-file-info { flex: 1; min-width: 0; }
.sb-file-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.sb-file-type-sel { font-size: 11px; color: var(--ibx-text-3); background: transparent; border: 1px solid var(--ibx-border-1); border-radius: 4px; padding: 2px 5px; }
.sb-file-remove { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--ibx-text-3); padding: 4px; flex-shrink: 0; line-height: 1; }
.sb-file-remove:hover { color: var(--danger); }

/* ── Document extraction loading (doc path step 2) ── */
.sb-extract-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 32px; text-align: center;
}
.sb-extract-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(201,162,39,0.2);
  border-top-color: var(--ibx-gold);
  animation: sbSpin 0.8s linear infinite;
  margin-bottom: 20px;
}
@keyframes sbSpin { to { transform: rotate(360deg); } }
.sb-extract-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.sb-extract-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.sb-extract-files { display: flex; flex-direction: column; gap: 6px; }
.sb-extract-file-row { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.sb-extract-file-dot { color: var(--accent); animation: sbPulse 1.2s ease-in-out infinite; }
@keyframes sbPulse { 0%,100% { opacity:0.4; } 50% { opacity:1; } }

.sb-extract-error { padding: 14px 16px; background: rgba(220,50,50,0.08); border: 1px solid rgba(220,50,50,0.2); border-radius: 8px; margin-bottom: 16px; }
.sb-extract-error-title { font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 4px; }
.sb-extract-error-body { font-size: 12px; color: var(--text-muted); }
.sb-extract-header { margin-bottom: 4px; }

/* Prefill grid */
.sb-prefill-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sb-prefill-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; }
.sb-prefill-key { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.sb-prefill-val { font-size: 12px; }

/* Empty state */
.sb-empty-state { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 8px 0; }

/* ── Review / launch step (step 3, both paths) ── */
.sb-review-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: flex-start; }
.sb-review-main { display: flex; flex-direction: column; gap: 14px; }
.sb-review-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.sb-review-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sb-review-rows { display: flex; flex-direction: column; gap: 0; }
.sb-review-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.sb-review-row:last-child { border-bottom: none; }
.sb-review-key { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.sb-review-val { color: var(--text); font-weight: 500; text-align: right; }

/* LOB chips in review */
.sb-lob-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sb-lob-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: rgba(201,162,39,0.08);
  border: 1px solid rgba(201,162,39,0.25); border-radius: 20px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.sb-lob-chip-remove { cursor: pointer; color: var(--text-muted); font-size: 11px; line-height: 1; }
.sb-lob-chip-remove:hover { color: var(--danger); }

/* Review side panel */
.sb-review-side { display: flex; flex-direction: column; gap: 12px; }
.sb-review-issues { }
.sb-review-issues-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.sb-review-note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11px; color: var(--text-muted);
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; line-height: 1.45;
}

/* ============================================================
   Client Snapshot Panel
   ============================================================ */
.client-snapshot-panel {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.snapshot-card {
  background: var(--white, #fff);
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 18px;
  flex: 1;
  min-width: 110px;
  text-align: center;
  transition: box-shadow 0.2s;
}

.snapshot-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.snapshot-card-wide {
  flex: 2;
  min-width: 180px;
}

.snapshot-card-warning {
  border-color: #F59E0B;
  background: #FFFBEB;
}

.snapshot-card-warning .snapshot-value {
  color: #B45309;
}

.snapshot-card-alert {
  border-color: #EF4444;
  background: #FEF2F2;
}

.snapshot-card-alert .snapshot-value {
  color: #B91C1C;
}

.snapshot-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.2;
  margin-bottom: 4px;
}

.snapshot-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ============================================================
   Client Command Bar
   ============================================================ */
.client-command-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.cmd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s, box-shadow 0.13s;
  white-space: nowrap;
  line-height: 1.4;
}

/* SVG icons inside cmd-btn inherit the button's current color */
.cmd-btn svg {
  flex-shrink: 0;
  color: inherit;
}

.cmd-btn:hover {
  background: var(--primary-dark);
  color: #fff;
  border-color: var(--primary-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}

.cmd-btn:hover svg {
  color: #fff;
}

.cmd-btn-primary {
  background: var(--primary-dark);
  color: var(--accent);
  border-color: var(--primary-dark);
  font-weight: 600;
}

.cmd-btn-primary svg {
  color: var(--accent);
}

.cmd-btn-primary:hover {
  background: #1a1a1a;
  color: var(--accent);
  border-color: #1a1a1a;
}

/* Legacy emoji icon spans — kept for backward compat, hidden by default */
.cmd-icon {
  font-size: 13px;
  line-height: 1;
}

/* ── Combobox / Searchable Autocomplete ──────────────────────────────────── */
/* Wraps a text input + hidden value input + floating list.                   */
/* The .combobox-input inherits .form-group input styles automatically.       */

.combobox-wrap {
  position: relative;
}

/* The dropdown list floats below the input */
.combobox-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  max-height: 240px;
  overflow-y: auto;
  z-index: 9500;
  display: none;        /* hidden by default */
}

.combobox-list.cb-open {
  display: block;
}

/* Individual options */
.combobox-option {
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combobox-option:hover,
.combobox-option.cb-kb {
  background: rgba(201,162,39,0.09);
  color: var(--text);
}

/* Empty-state message */
.combobox-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-light);
  font-style: italic;
}

/* Inline highlight of the matching substring */
.cb-hl {
  background: rgba(201,162,39,0.30);
  border-radius: 2px;
  font-style: normal;
  padding: 0 1px;
}

/* Validation state */
.cb-invalid .combobox-input {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.12) !important;
}

/* NAIC badge shown after selecting an underwriting paper */
.naic-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.35);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* LEGACY SIDEBAR 3-STATE SYSTEM REMOVED */

/* Active input style when dropdown is open */
.combobox-wrap:focus-within .combobox-input {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* ============================================================
   MODAL WORKSPACE — draggable / resizable / undockable panels
   ============================================================ */

/* Header becomes a drag cursor when the workspace is active */
.modal-header {
  cursor: move;
  user-select: none;
}

/* When the modal is in workspace-active state (dragged or resized):
   flex-column so .modal-body can scroll independently. */
.modal.modal-workspace-active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.modal-workspace-active .modal-body {
  flex: 1;
  overflow-y: auto;
}
.modal.modal-workspace-active .modal-footer {
  flex-shrink: 0;
}

/* Pop-out / Dock-back icon button in modal header */
.modal-undock-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: var(--transition);
  flex-shrink: 0;
  padding: 0;
}
.modal-undock-btn:hover {
  background: var(--bg);
  color: var(--text);
}

/* Resize grip — bottom-right corner of both docked and floating */
.fp-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  z-index: 2;
  /* subtle three-line grip graphic */
  background-image:
    linear-gradient(135deg,
      transparent 33%, var(--border) 33%, var(--border) 44%, transparent 44%,
      transparent 55%, var(--border) 55%, var(--border) 66%, transparent 66%,
      transparent 77%, var(--border) 77%, var(--border) 88%, transparent 88%);
  border-radius: 0 0 var(--radius-lg) 0;
  opacity: 0.7;
}
.fp-resize-handle:hover {
  opacity: 1;
}

/* ── Floating panels (undocked state) ─────────────────────── */
.floating-panel {
  position: fixed;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 56px rgba(0,0,0,0.26), 0 0 0 1px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 320px;
  min-height: 200px;
  /* Smooth appearance */
  animation: slideUp 0.2s ease;
}

/* Floating panel gets a stronger shadow when active (topmost) */
.floating-panel.fp-active {
  box-shadow: 0 24px 72px rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.12);
}

/* Header drag handle inside floating panel */
.floating-panel .modal-header {
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  /* Distinct accent on left edge to signal it's undocked */
  border-left: 3px solid var(--accent);
}

/* Body scrolls independently inside the floating panel */
.floating-panel .modal-body {
  flex: 1;
  overflow-y: auto;
}

.floating-panel .modal-footer {
  flex-shrink: 0;
}

/* ── Dock zone drop-preview overlay ──────────────────────────── */
#fp-dock-preview {
  background: rgba(59, 130, 246, 0.10);
  border: 2px dashed rgba(59, 130, 246, 0.52);
  border-radius: 4px;
  pointer-events: none;
  /* Preview fades in quickly so it feels responsive but not jumpy */
  transition: opacity 0.1s ease;
}

/* ── Zone-docked panel: shared rules ─────────────────────────── */
.floating-panel.fp-zone-docked {
  border-radius: 0;
  /* Override the float-open animation — docking should snap, not slide */
  animation: none;
  /* Smooth snap transition when geometry is set by _snapToZone */
  transition: left 0.14s ease, top 0.14s ease,
              width 0.14s ease, height 0.14s ease;
}

/* Edge-specific shadows so the panel reads as attached to its wall */
.floating-panel.fp-zone-docked[data-zone="left"] {
  box-shadow:  4px 0 20px rgba(0,0,0,0.14);
  border-right: 1px solid var(--border);
}
.floating-panel.fp-zone-docked[data-zone="right"] {
  box-shadow: -4px 0 20px rgba(0,0,0,0.14);
  border-left:  1px solid var(--border);
}
.floating-panel.fp-zone-docked[data-zone="top"] {
  box-shadow:  0  4px 20px rgba(0,0,0,0.14);
  border-bottom: 1px solid var(--border);
}
.floating-panel.fp-zone-docked[data-zone="bottom"] {
  box-shadow:  0 -4px 20px rgba(0,0,0,0.14);
  border-top: 1px solid var(--border);
}

/* Header: keep existing left-edge accent; disable move cursor
   because dragging from a docked zone is blocked */
.floating-panel.fp-zone-docked .modal-header {
  cursor: default;
}

/* Resize grip is irrelevant when zone-docked */
.floating-panel.fp-zone-docked .fp-resize-handle {
  display: none;
}

/* Float-only controls (reset / maximize / dock-back-to-modal)
   are hidden when the panel is zone-docked */
.floating-panel.fp-zone-docked .fp-float-only {
  display: none !important;
}

/* Dock-only control (release-to-floating) is hidden normally
   and revealed only when the panel is zone-docked */
.floating-panel .fp-dock-only {
  display: none;
}
.floating-panel.fp-zone-docked .fp-dock-only {
  display: flex !important;
}

/* ── Account History ──────────────────────────────────────────── */

/* Year accordion item */
.acct-history-year {
  border-bottom: 1px solid var(--border);
}
.acct-history-year:last-child {
  border-bottom: none;
}

/* Clickable year header row */
.acct-history-year-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  background: var(--white);
  transition: background 0.15s;
}
.acct-history-year-header:hover {
  background: #fafaf9;
}

/* Collapse/expand arrow */
.acct-year-arrow {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  width: 14px;
  text-align: center;
}

/* Edit/delete buttons grouped together */
.acct-year-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Expandable body beneath a year header */
.acct-history-year-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafaf9;
  border-top: 1px solid var(--border);
}

/* Card wrapping each sub-section (Summary / Lines / Notes) */
.acct-history-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

/* Section heading inside a card */
.acct-history-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* Responsive grid for the Annual Summary data points */
.acct-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.acct-summary-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Small uppercase label (reused for narrative section headers too) */
.acct-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Data value under a label */
.acct-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Narrative / free-text block (market summary, overall notes) */
.acct-narrative {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  white-space: pre-wrap;
}

/* Individual note card */
.acct-note-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s;
}
.acct-note-card:hover {
  border-color: var(--accent-light);
}

/* Year-over-year premium comparison block */
.acct-yoy-block {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
}

.acct-yoy-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 100px;
}

/* Large current-year premium figure */
.acct-yoy-primary {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* Smaller prior-year figure */
.acct-yoy-secondary {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Change amount (+/-) */
.acct-yoy-change {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

/* Arrow separator between columns */
.acct-yoy-arrow {
  font-size: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Vertical rule before change column */
.acct-yoy-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

/* Individual key-change card */
.acct-change-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s;
}
.acct-change-card:hover {
  border-color: var(--accent-light);
}

/* Responsive: tighten grids on small screens */
@media (max-width: 768px) {
  .acct-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .acct-history-year-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .acct-yoy-block {
    gap: 12px;
  }
  .acct-yoy-primary {
    font-size: 18px;
  }
}

/* ── Carrier Match Status Pills ────────────────────────────────────────────
   Reusable pill components for carrier match and state eligibility status.
   Four semantic variants: target (green), acceptable (blue),
   not-allowed (red), unknown (gray outline).

   Usage:  <span class="match-pill match-pill--target">Target</span>
   ────────────────────────────────────────────────────────────────────────── */

.match-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  vertical-align: middle;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.match-pill:hover {
  transform: translateY(-1px);
}

/* Target — green */
.match-pill--target {
  background: rgba(220, 252, 231, 0.90);
  color: #15803d;
  box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.22);
}
.match-pill--target:hover {
  box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.35),
              0 2px 6px rgba(21, 128, 61, 0.12);
}

/* Acceptable — blue */
.match-pill--acceptable {
  background: rgba(219, 234, 254, 0.90);
  color: #1d4ed8;
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.22);
}
.match-pill--acceptable:hover {
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.35),
              0 2px 6px rgba(29, 78, 216, 0.12);
}

/* Not Allowed — red */
.match-pill--not-allowed {
  background: rgba(254, 226, 226, 0.90);
  color: #b91c1c;
  box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.22);
}
.match-pill--not-allowed:hover {
  box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.35),
              0 2px 6px rgba(185, 28, 28, 0.12);
}

/* Unknown — transparent fill, outline only */
.match-pill--unknown {
  background: transparent;
  color: #737373;
  box-shadow: 0 0 0 1.5px rgba(115, 115, 115, 0.30);
}
.match-pill--unknown:hover {
  box-shadow: 0 0 0 1.5px rgba(115, 115, 115, 0.48),
              0 2px 5px rgba(115, 115, 115, 0.10);
}




/* ============================================================
   WORKBAR — Daily Operating Layer (outer container)
   Entry form delegated to NoteComposer below.
   ============================================================ */

.wb-container {
  margin-top: 10px;
  margin-bottom: 8px;
}

/* ============================================================
   NOTE COMPOSER — Unified Note & Task Form
   Used everywhere: workbar (inline) and modals.
   ============================================================ */

/* ── Form wrapper ────────────────────────────────────────────── */
.nc-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Type toggle ─────────────────────────────────────────────── */
.nc-type-toggle {
  display: flex;
  gap: 4px;
}
.nc-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nc-type-btn:hover { background: var(--hover-bg, #f5f5f5); color: var(--text); }
.nc-type-btn.nc-type-btn-active {
  background: var(--accent-subtle, #fef9ec);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Fields ──────────────────────────────────────────────────── */
.nc-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nc-field-grow { flex: 1; }
.nc-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nc-textarea {
  width: 100%;
  min-height: 64px;
  max-height: 200px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.45;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--input-bg, var(--bg));
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.nc-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.12);
}
.nc-textarea::placeholder { color: var(--text-muted); }

.nc-select, .nc-input {
  height: 32px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.15s;
}
.nc-select:focus, .nc-input:focus {
  outline: none;
  border-color: var(--accent);
}
input[type="date"].nc-input { cursor: pointer; }

.nc-checkbox { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }

/* ── Entity row: 69 / 31 split — left is dominant, right is stable ──── */
/* Use grid so the right column never auto-shrinks to content.           */
/* minmax(120px, 31%) = right column holds its proportion but won't     */
/* collapse below 120px on narrow containers.                            */
.nc-entity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 31%);
  gap: 10px;
  align-items: end;
}

/* ── Locked client pill (context-locked client) ─────────────── */
.nc-locked-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--accent-subtle, #fef9ec);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  height: 32px;
  box-sizing: border-box;
}

/* ── Multi-field rows ────────────────────────────────────────── */
.nc-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
/* Proportional fixed columns in 3-col rows — mirrors entity-row right-column width */
.nc-row-3 { }
.nc-row-3 > .nc-field:not(.nc-field-grow) { flex: 0 0 29%; min-width: 110px; max-width: 155px; }

/* Single field in its own row (e.g. task Status row):
   constrain to the same right-column proportion so it doesn't
   stretch full-width and looks mismatched against the entity row. */
.nc-row > .nc-field:only-child {
  flex: 0 0 31%;
  min-width: 120px;
  max-width: 220px;
}

/* ── Internal-only checkbox row ─────────────────────────────── */
.nc-internal-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  color: var(--text);
}
.nc-hint-inline {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

/* ── Hints ───────────────────────────────────────────────────── */
.nc-hint, .nc-mention-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Edit metadata ───────────────────────────────────────────── */
.nc-edit-meta {
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.nc-reassign-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 3px;
}

/* ── Actions (inline mode only, modal uses footer) ───────────── */
.nc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.nc-save-btn { min-width: 90px; }

/* ── Dark mode ───────────────────────────────────────────────── */
.dark-mode .nc-form {
  background: var(--cc-panel-bg);
  border-color: var(--cc-panel-border);
}
.dark-mode .nc-textarea,
.dark-mode .nc-select,
.dark-mode .nc-input {
  background: #111;
  border-color: var(--cc-panel-border);
  color: var(--text);
}
.dark-mode .nc-type-btn {
  background: #111;
  border-color: var(--cc-panel-border);
  color: var(--text-muted);
}
.dark-mode .nc-type-btn:hover { background: rgba(255,255,255,0.06); }
.dark-mode .nc-type-btn.nc-type-btn-active {
  background: rgba(201,162,39,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.dark-mode .nc-locked-pill { border-color: var(--accent); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nc-entity-row { grid-template-columns: 1fr; }  /* stack vertically on mobile */
  .nc-row { flex-wrap: wrap; }
  .nc-row-3 > .nc-field:not(.nc-field-grow) { flex: 1 1 120px; max-width: none; }
  .nc-row > .nc-field:only-child { flex: 1 1 auto; max-width: none; }
}


/* ── My Day section ─────────────────────────────────────────── */
.wb-myday-section {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

.wb-myday-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.wb-myday-hdr:hover { background: var(--hover-bg, #f5f5f5); }
.wb-myday-hdr-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.wb-myday-hdr-meta {
  flex: 1;
  font-size: 11px;
  display: flex;
  gap: 6px;
}
.wb-meta-red  { color: var(--danger, #dc2626); font-weight: 700; }
.wb-meta-gold { color: var(--accent); font-weight: 700; }
.wb-myday-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  display: flex;
  align-items: center;
}
.wb-chevron-up   { transform: rotate(0deg);    transition: transform 0.18s; }
.wb-chevron-down { transform: rotate(180deg);  transition: transform 0.18s; }

/* Board */
.wb-myday-board  { padding: 10px 12px; }
.wb-myday-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  min-height: 80px;
}

/* Columns */
.wb-myday-col { display: flex; flex-direction: column; min-width: 0; }

.wb-myday-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 5px 5px 0 0;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
}
.wb-col-overdue  { border-left-color: var(--danger, #dc2626); background: rgba(220,38,38,0.06); }
.wb-col-today    { border-left-color: var(--accent);           background: var(--accent-subtle, #fef9ec); }
.wb-col-waiting  { border-left-color: #9ca3af;                 background: rgba(156,163,175,0.08); }
.wb-col-upcoming { border-left-color: #22c55e;                 background: rgba(34,197,94,0.06); }

.wb-myday-col-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.wb-myday-col-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--border);
  color: var(--text);
}
.wb-col-overdue .wb-myday-col-count {
  background: rgba(220,38,38,0.14);
  color: var(--danger, #dc2626);
}
.wb-col-today .wb-myday-col-count {
  background: rgba(201,162,39,0.18);
  color: var(--accent);
}

.wb-myday-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.wb-myday-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 8px;
  font-style: italic;
}

/* Task cards */
.wb-task-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  transition: box-shadow 0.12s;
}
.wb-task-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.wb-task-card.wb-task-ovd {
  border-left: 2px solid var(--danger, #dc2626);
  background: rgba(220,38,38,0.03);
}
.wb-task-card.wb-task-waiting {
  opacity: 0.7;
}
.wb-task-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.wb-task-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, background 0.12s;
  margin-top: 1px;
}
.wb-task-check:hover { border-color: var(--accent); background: var(--accent-subtle, #fef9ec); }
.wb-task-text {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.wb-task-priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger, #dc2626);
  flex-shrink: 0;
  margin-top: 4px;
}
.wb-task-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  padding-left: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-task-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  padding-left: 24px;
}
.wb-task-act {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
.wb-task-act:hover { border-color: var(--accent); color: var(--accent); }
.wb-task-act.wb-task-act-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle, #fef9ec);
}

/* ── Dark mode — Workbar ─────────────────────────────────────── */
.dark-mode .wb-entry-bar { background: var(--cc-panel-bg); border-color: var(--cc-panel-border); }
.dark-mode .wb-myday-section { background: var(--cc-panel-bg); border-color: var(--cc-panel-border); }
.dark-mode .wb-myday-hdr { background: rgba(255,255,255,0.03); border-bottom-color: var(--cc-panel-border); }
.dark-mode .wb-myday-hdr:hover { background: rgba(255,255,255,0.06); }
.dark-mode .wb-input { background: #111; border-color: var(--cc-panel-border); color: var(--text); }
.dark-mode .wb-type-btn.active { background: rgba(201,162,39,0.12); }
.dark-mode .wb-task-card { background: #111; border-color: var(--cc-panel-border); }
.dark-mode .wb-link-picker { background: #1C1C1C; border-color: var(--cc-panel-border); }
.dark-mode .wb-link-picker-item:hover { background: rgba(255,255,255,0.06); }
.dark-mode .wb-link-picker-input { background: #111; color: var(--text); border-color: var(--cc-panel-border); }
.dark-mode .wb-due-input,
.dark-mode .wb-priority-select { background: #111; color: var(--text); border-color: var(--cc-panel-border); }
.dark-mode .wb-col-overdue  { background: rgba(220,38,38,0.08); }
.dark-mode .wb-col-today    { background: rgba(201,162,39,0.08); }
.dark-mode .wb-col-waiting  { background: rgba(156,163,175,0.05); }
.dark-mode .wb-col-upcoming { background: rgba(34,197,94,0.06); }

/* ── Responsive — Workbar ────────────────────────────────────── */
@media (max-width: 960px) {
  .wb-myday-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wb-entry-bar { flex-wrap: wrap; }
  .wb-myday-cols { grid-template-columns: 1fr; }
  .wb-due-wrap, .wb-priority-wrap { display: none !important; }
}


/* ============================================================
   PINNED CLIENTS — Focus Clients Section
   Compact card row for user-curated account tracking
   ============================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.pc-section {
  margin-bottom: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}
.pc-section.pc-section-empty {
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--border);
}

/* Empty hint */
.pc-empty-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Header */
.pc-section-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pc-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.pc-section-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--border);
}

/* Card scroll row */
.pc-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.pc-cards::-webkit-scrollbar { height: 4px; }
.pc-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Individual card */
.pc-card {
  flex-shrink: 0;
  width: 150px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  transition: box-shadow 0.14s, border-color 0.14s;
  position: relative;
}
.pc-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-color: var(--accent);
}
.pc-card.pc-card-urgent {
  border-left: 2px solid var(--danger, #dc2626);
}

/* Card header */
.pc-card-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 3px;
}
.pc-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pc-unpin-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.12s;
}
.pc-unpin-btn:hover { opacity: 1; color: var(--danger, #dc2626); }

/* Premium */
.pc-card-premium {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

/* Stats row */
.pc-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.pc-stat {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--border);
  color: var(--text);
}
.pc-stat-subs   { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.pc-stat-pols   { background: rgba(22, 163, 74, 0.1);   color: #16a34a; }
.pc-stat-tasks  { background: var(--border); color: var(--text-muted); }
.pc-stat-urgent { background: rgba(220,38,38,0.1); color: var(--danger, #dc2626); }

/* Timestamp */
.pc-card-ago {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Inline pin button (for use on client detail pages etc.) */
.pc-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.pc-pin-btn:hover { border-color: var(--accent); color: var(--accent); }
.pc-pin-btn.pc-pin-btn-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle, #fef9ec);
}

/* ── Dark mode — Pinned Clients ──────────────────────────────── */
.dark-mode .pc-section { background: var(--cc-panel-bg); border-color: var(--cc-panel-border); }
.dark-mode .pc-section.pc-section-empty { border-color: var(--cc-panel-border); }
.dark-mode .pc-card { background: #111; border-color: var(--cc-panel-border); }
.dark-mode .pc-card:hover { border-color: var(--accent); }
.dark-mode .pc-stat-subs   { background: rgba(201,162,39,0.12); color: #C9A227; }
.dark-mode .pc-stat-pols   { color: #4ade80; }

/* ============================================================
   TOS-STYLE STATUS STRIP
   Full-width thin bar above the app shell.
   Always dark (charcoal) regardless of light/dark theme — matches
   TOS aesthetic where the status bar is a fixed dark command surface.
   ============================================================ */

.status-strip {
  display: flex;
  align-items: center;
  height: 27px;
  min-height: 27px;
  flex-shrink: 0;
  background: #111111;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  z-index: 70;   /* above .top-header (60) */
  overflow: hidden;
  white-space: nowrap;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

/* Connection dot */
.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 5px;
}
.conn-dot--connected    { background: var(--ibx-status-connected);    box-shadow: 0 0 5px var(--ibx-status-connected); }
.conn-dot--connecting   { background: var(--ibx-status-loading);      animation: conn-pulse 1.4s ease-in-out infinite; }
.conn-dot--reconnecting { background: var(--ibx-status-loading);      animation: conn-pulse 1.0s ease-in-out infinite; }
.conn-dot--degraded     { background: var(--ibx-status-warning);      box-shadow: 0 0 5px var(--ibx-status-warning); }
.conn-dot--offline      { background: var(--ibx-status-disconnected); }

@keyframes conn-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ══════════════════════════════════════════════════════════════
   IBX STATUS INDICATOR — Shared status component
   The single canonical pattern for all state/status indicators.

   Usage:
     <span class="ibx-status ibx-status--connected">
       <span class="ibx-status-dot"></span>
       <span class="ibx-status-label">Connected</span>
     </span>

   Sizes:   (default) standard | ibx-status--compact (cmd-bar / dense rows)
   States:  --connected | --loading | --disconnected | --error
            --success   | --warning | --active        | --inactive

   Rules:
   - No hardcoded colors — all state colors alias to --ibx-status-* tokens
   - No blinking animations — smooth opacity pulse only
   - Label inherits color from state class via currentColor
   - Future states: add --ibx-status-{state} token first, then add class here
   ══════════════════════════════════════════════════════════════ */

/* Base layout */
.ibx-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ibx-text-2);
  white-space: nowrap;
}

/* Compact variant — cmd-bar, dense rows */
.ibx-status--compact {
  gap: var(--space-1);
  font-size: 11px;
}

/* Status dot */
.ibx-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  transition: background var(--ibx-speed-fast);
}
.ibx-status--compact .ibx-status-dot {
  width: 6px;
  height: 6px;
}

/* Label inherits color from parent state class */
.ibx-status-label {
  color: inherit;
  white-space: nowrap;
}

/* Sub-label (optional secondary text) */
.ibx-status-sub {
  color: var(--ibx-text-3);
  font-size: 0.9em;
  font-weight: 400;
}

/* ── State variants ── */

.ibx-status--connected {
  color: var(--ibx-status-connected);
}
.ibx-status--connected .ibx-status-dot {
  box-shadow: 0 0 5px var(--ibx-status-connected);
}

.ibx-status--loading {
  color: var(--ibx-status-loading);
}
.ibx-status--loading .ibx-status-dot {
  animation: ibx-status-pulse 1.4s ease-in-out infinite;
}

.ibx-status--disconnected {
  color: var(--ibx-status-disconnected);
}

.ibx-status--error {
  color: var(--ibx-status-error);
}

.ibx-status--success {
  color: var(--ibx-status-success);
}
.ibx-status--success .ibx-status-dot {
  box-shadow: 0 0 4px var(--ibx-status-success);
}

.ibx-status--warning {
  color: var(--ibx-status-warning);
}
.ibx-status--warning .ibx-status-dot {
  animation: ibx-status-pulse 2s ease-in-out infinite;
}

.ibx-status--active {
  color: var(--ibx-status-active);
}
.ibx-status--active .ibx-status-dot {
  box-shadow: 0 0 4px var(--ibx-status-active);
}

.ibx-status--inactive {
  color: var(--ibx-status-inactive);
}
.ibx-status--inactive .ibx-status-dot {
  opacity: 0.55;
}

/* Shared pulse animation (loading / warning states) — smooth, no blink */
@keyframes ibx-status-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.30; }
}

/* Contrast bumped: sub-labels and secondary items must be comfortably readable */
.conn-label { font-weight: 700; color: rgba(255,255,255,0.92); font-size: 11px; margin-right: 2px; }
.conn-sub   { color: rgba(255,255,255,0.65); font-size: 11px; margin-left: 2px; }
.conn-clock {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.3px;
}
.status-agency {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
}

/* Thin vertical separator */
.status-div {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.12);
  margin: 0 9px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Right side quick-links */
.status-right {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.status-link {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 36px;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.07);
  background: none;
  color: rgba(255,255,255,0.68);   /* was 0.5 — bumped for readability */
  font-size: 11px;
  cursor: pointer;
  transition: color 0.13s, background 0.13s;
  white-space: nowrap;
}
.status-link:hover         { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.06); }
.status-link--dim          { cursor: default; color: rgba(255,255,255,0.38); }  /* was 0.25 */
.status-link--dim:hover    { background: none; color: rgba(255,255,255,0.38); }

/* ── Status-bar user name display ──────────────────────────── */
.status-username {
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
  height: 36px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,0.07);
  letter-spacing: 0.01em;
  user-select: none;
}

/* ── Status-bar settings cog + dropdown ────────────────────── */
.status-settings-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 4px;
}
.status-settings-btn {
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 3px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  padding: 0;
}
.status-settings-btn:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
}
.status-settings-dropdown {
  /* position:fixed escapes .status-strip { overflow:hidden }.
     top/right are set programmatically by toggleSettingsDropdown(). */
  position: fixed;
  width: 220px;   /* widened from 180px to fit 5 theme buttons */
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  z-index: 500;
  padding: 8px 0;
}
.status-settings-dropdown.hidden { display: none; }

/* ── Settings dropdown: user identity header ─────────────── */
.ssd-user-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 8px;
}
.ssd-user-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssd-user-email {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ssd-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.3);
  padding: 4px 12px 6px;
}
.ssd-theme-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 6px;
}
.ssd-theme-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ssd-theme-btn:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.9);
}
.ssd-theme-btn.active {
  border-color: #C9A227;
  color: #C9A227;
  background: rgba(201,162,39,0.10);
}
/* Accessibility-tier buttons get a slightly distinct treatment */
.ssd-theme-btn[data-theme="ibex-hc"].active { border-color: #FFD700; color: #FFD700; background: rgba(255,215,0,0.10); }
.ssd-theme-btn[data-theme="ibex-cb"].active  { border-color: #4D9EFF; color: #4D9EFF; background: rgba(77,158,255,0.10); }
.ssd-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 0;
}
.ssd-action-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  font-size: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ssd-action-btn:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
}
.ssd-logout:hover { color: #ff6b6b; }

/* ============================================================
   SIDEBAR PANEL SHARED CHROME
   Used by both the DNA snapshot and Watchlist panels.
   ============================================================ */

/* Panel section header — matches TOS watchlist/account-info headers */
.sp-header {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 12px 0 14px;
  cursor: pointer;
  user-select: none;
  background: var(--dock-hdr-bg, rgba(0,0,0,0.25));
  border-bottom: 1px solid var(--dock-border, rgba(255,255,255,0.05));
  border-top: 1px solid var(--dock-border, rgba(255,255,255,0.05));
  transition: background 0.12s;
  flex-shrink: 0;
}
.sp-header:hover    { background: var(--dock-item-hover, rgba(255,255,255,0.04)); }
.sp-header-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dock-muted, rgba(255,255,255,0.45));
  flex: 1;
}
.sp-header-count {
  font-size: 10px;
  color: var(--dock-muted, rgba(255,255,255,0.25));
  opacity: 0.7;
  margin-right: 6px;
}
.sp-chevron {
  color: var(--dock-muted, rgba(255,255,255,0.3));
  flex-shrink: 0;
  transition: transform 0.2s;
}
.sp-chevron--up { transform: rotate(-90deg); }

/* Collapsible body */
.sp-body--collapsed { max-height: 0 !important; overflow: hidden; }

/* ============================================================
   DNA SNAPSHOT PANEL
   Compact 5-metric glance scoreboard at top of sidebar.
   No charts, no interaction — read-only awareness surface.
   ============================================================ */

.dna-panel {
  flex-shrink: 0;
  overflow: hidden;
}

.dna-body {
  max-height: 160px;
  overflow: hidden;
  transition: max-height 0.22s ease;
  padding: 4px 0 4px;
}

.dna-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 14px 3px 14px;
  height: 22px;
}
.dna-row:hover { background: var(--ibx-hover-overlay); }

.dna-label {
  font-size: 11px;
  color: var(--ibx-text-3);
  white-space: nowrap;
  flex: 1;
}
.dna-val {
  font-size: 11px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  color: var(--ibx-text-2);
  text-align: right;
  flex-shrink: 0;
  min-width: 28px;
}
.dna-val--danger { color: var(--ibx-danger); }
.dna-val--warn   { color: var(--ibx-warning); }
.dna-val--accent { color: var(--ibx-gold); }
.dna-val--ok     { color: var(--ibx-text-4); }

/* DNA clickable rows */
.dna-row--clickable { cursor: pointer; }
.dna-row--clickable:hover { background: var(--ibx-active-overlay); }
.dna-row-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dna-drill-chev { color: var(--ibx-text-4); flex-shrink: 0; transition: opacity 0.12s, color 0.12s; }
.dna-row--clickable:hover .dna-drill-chev { color: var(--ibx-gold); opacity: 1; }

/* DNA drill-down modal list */
.dna-drill-list { display: flex; flex-direction: column; gap: 0; }
.dna-drill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--ibx-border-1);
}
.dna-drill-row:last-child { border-bottom: none; }
.dna-drill-row:hover { background: var(--ibx-tint-1); }
.dna-drill-main { flex: 1; min-width: 0; }
.dna-drill-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ibx-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dna-drill-meta {
  font-size: 11px;
  color: var(--ibx-text-3);
  margin-top: 2px;
}
/* dna-drill-badge: visual alias of ibx-badge — uses same token values */
.dna-drill-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.dna-badge--critical        { background: var(--ibx-danger-bg);          color: var(--ibx-danger); }
.dna-badge--warn            { background: var(--ibx-warning-bg);         color: var(--ibx-warning); }
.dna-badge--ok              { background: var(--ibx-stage-draft-bg);     color: var(--ibx-text-3); }
.dna-badge--stage-draft       { background: var(--ibx-stage-draft-bg);    color: var(--ibx-stage-draft); }
.dna-badge--stage-in_progress { background: var(--ibx-stage-progress-bg); color: var(--ibx-stage-progress); }
.dna-badge--stage-quoted      { background: var(--ibx-gold-border);        color: var(--ibx-gold); }
.dna-drill-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ibx-text-3);
}
/* Group section header inside DNA drill-down lists */
.dna-drill-group-hdr {
  padding: 6px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ibx-text-4);
  border-top: 1px solid var(--ibx-border-1);
  margin-top: 2px;
}
.dna-drill-group-hdr:first-child { border-top: none; margin-top: 0; }
/* Light theme inherits correct values via ibx token overrides in html.theme-ibex-light —
   no per-element color overrides needed for these rules. */

/* Hide DNA panel in collapsed sidebar (no room) */
.sidebar-mode-collapsed .dna-panel,
.sidebar-mode-collapsed .wl-panel  { display: none; }

/* ============================================================
   WATCHLIST PANEL
   TOS-style dense client table: Client | Renew | Last | Tasks
   ============================================================ */

.wl-panel {
  flex-shrink: 0;
  overflow: hidden;
}

.wl-body {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: max-height 0.22s ease;
}

/* Scrollbar inside watchlist — very subtle */
.wl-body::-webkit-scrollbar        { width: 3px; }
.wl-body::-webkit-scrollbar-track  { background: transparent; }
.wl-body::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Dense TOS-style table */
.wl-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.wl-th {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dock-muted, rgba(255,255,255,0.25));
  padding: 3px 6px;
  background: var(--dock-hdr-bg, rgba(0,0,0,0.3));
  border-bottom: 1px solid var(--dock-border, rgba(255,255,255,0.05));
  text-align: right;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.wl-th-name         { text-align: left; width: 40%; padding-left: 14px; }
.wl-th:not(.wl-th-name) { width: 20%; }

/* Data rows */
.wl-row {
  cursor: pointer;
  border-bottom: 1px solid var(--dock-border, rgba(255,255,255,0.03));
  transition: background 0.1s;
  border-left: 2px solid transparent;
}
.wl-row:hover         { background: rgba(201,162,39,0.10); }
.wl-row--urgent       { border-left-color: #ef4444; }

.wl-td {
  padding: 4px 6px;
  font-size: 11px;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--dock-muted, rgba(255,255,255,0.55));
}
.wl-td-name {
  text-align: left;
  padding-left: 12px;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--dock-text, rgba(255,255,255,0.82));
  font-size: 11px;
}
.wl-td-num { min-width: 0; }

/* Value color tokens */
.wl-danger { color: #ef4444; font-weight: 700; }
.wl-warn   { color: #f59e0b; }
.wl-accent { color: #C9A227; }
.wl-muted  { color: var(--dock-muted, rgba(255,255,255,0.25)); }

/* Empty state */
.wl-empty {
  padding: 12px 14px;
  font-size: 11px;
  color: var(--dock-muted, rgba(255,255,255,0.3));
  text-align: center;
  line-height: 1.6;
}
.wl-empty-sub { font-size: 10px; color: var(--dock-muted, rgba(255,255,255,0.2)); opacity: 0.7; }

/* ── Pin button (client detail pages) ────────────────────── */
.wl-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.wl-pin-btn:hover          { border-color: var(--accent); color: var(--accent); background: rgba(201,162,39,0.08); }
.wl-pin-btn--active        { border-color: var(--accent); color: var(--accent); background: rgba(201,162,39,0.10); }
.wl-pin-btn--active:hover  { background: rgba(201,162,39,0.18); }

/* ── Dark mode: status-strip is always dark; panels inherit sidebar bg ── */
html.dark-mode .status-strip { background: #0a0a0a; }
html.dark-mode .sp-header    { background: rgba(0,0,0,0.4); }
html.dark-mode .sp-header:hover { background: rgba(255,255,255,0.03); }

/* ============================================================
   THINKÓRSWIM-STYLE 3-COLUMN LAYOUT
   Nav Rail · Dock Panel · Main Workspace
   (.app-shell base definition is in APP SHELL LAYOUT section above)
   ============================================================ */

/* ============================================================
   NAVIGATION RAIL
   Far-left column — fixed width, icon-only, no resize
   ============================================================ */
.nav-rail {
  width: 52px;
  flex-shrink: 0;
  background: #060606;
  border-right: 1px solid rgba(201,162,39,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  z-index: 60;
  user-select: none;
}

/* Scrollable nav items */
.rail-nav {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  scrollbar-width: none;
}
.rail-nav::-webkit-scrollbar { display: none; }

/* Individual nav item */
.rail-item {
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin: 1px 6px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;   /* clip any label overflow in icon mode */
}
.rail-item svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Icon wrapper — always visible, sized consistently */
.rail-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}

/* Label — hidden by default; shown only in nav-full mode */
.rail-item-label {
  display: none;
}
.rail-item:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,1.0);
}
.rail-item--active {
  background: rgba(201,162,39,0.16);
  color: #C9A227;
  box-shadow: inset 2px 0 0 #C9A227;
}

/* High-specificity overrides to beat html.dark-mode a { color: #C9A227 }
   and html.theme-ibex-light a { color: #B8911F } which would otherwise
   paint all <a>-based rail items gold by default.
   Specificity: (0,2,0) beats the blanket a rules at (0,1,2). */
.nav-rail .rail-item                { color: rgba(255,255,255,0.85); }
.nav-rail .rail-item:hover          { background: rgba(255,255,255,0.07); color: rgba(255,255,255,1.0); }
.nav-rail .rail-item:focus          { color: rgba(255,255,255,0.85); outline: none; }
.nav-rail .rail-item--active        { color: #C9A227; }
.nav-rail .rail-item--active:hover  { color: #C9A227; background: rgba(201,162,39,0.16); }

/* Group separator */
.rail-sep {
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 5px 0 3px;
  flex-shrink: 0;
}

/* Group label (ultra-compact) */
.rail-grp-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.25);   /* visible but clearly subordinate */
  text-transform: uppercase;
  margin: 0 0 2px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}

/* Rail footer — 3-mode group */
.rail-footer {
  flex-shrink: 0;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
  gap: 4px;
}

/* 3-button mode selector group */
.rail-mode-group {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 2px;
}
.rail-mode-btn {
  width: 26px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.rail-mode-btn:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.80);
}
.rail-mode-btn--active {
  background: rgba(201,162,39,0.18);
  color: #C9A227;
}
.rail-mode-btn--active:hover {
  background: rgba(201,162,39,0.24);
  color: #C9A227;
}


/* ============================================================
   DOCK PANEL
   Primary resizable workspace column, right of nav rail.
   Contains: Search · DNA Snapshot · Tasks · Watchlist
   ============================================================ */

:root {
  --dock-min:        180px;
  --dock-max:        560px;
  --dock-bg:         #0D0D0D;
  --dock-border:     rgba(201,162,39,0.10);
  --dock-hdr-bg:     rgba(0,0,0,0.35);
  --dock-text:       #D2D2D2;      /* primary dock text — readable on dark dock */
  --dock-muted:      #888888;      /* secondary dock text */
  --dock-item-hover: rgba(255,255,255,0.06); /* dock row hover */
}

.dock-panel {
  /* Width controlled by JS / inline style */
  min-width: var(--dock-min);
  max-width: var(--dock-max);
  flex-shrink: 0;
  background: var(--dock-bg);
  border-right: 1px solid var(--dock-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;   /* anchors resize handle */
  z-index: 50;
  transition: width 0.22s ease, min-width 0.22s ease;
}

/* Sections within the dock panel */
.dock-section {
  flex-shrink: 0;
  border-bottom: 1px solid var(--dock-border);
}

/* Section header row */
.dock-section-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--dock-hdr-bg);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.dock-section-hdr:hover { background: var(--dock-item-hover, rgba(255,255,255,0.04)); }

.dock-section-icon {
  color: var(--dock-muted);
  flex-shrink: 0;
}

.dock-section-title {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dock-text, rgba(255,255,255,0.72));
}

/* Chevron */
.dock-chev {
  color: var(--dock-muted);
  flex-shrink: 0;
  transition: transform 0.18s ease;
  transform: rotate(180deg);   /* default: pointing down = collapsed */
}
.dock-chev-open {
  transform: rotate(0deg);     /* pointing up = expanded */
}

/* Section body */
.dock-section-body {
  overflow: hidden;
}

/* ── Watchlist panel and DNA panel wrappers ──────────────────── */
/* These render their own internal headers; strip extra padding */
.dock-dna-wrap  { overflow: hidden; }
.dock-wl-wrap   { flex: 1; overflow-y: auto; min-height: 0; }
.dock-wl-wrap::-webkit-scrollbar { width: 4px; }
.dock-wl-wrap::-webkit-scrollbar-track { background: transparent; }
.dock-wl-wrap::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.3); border-radius: 2px; }

/* DNA panel inherits sidebar styling — keep its headers consistent */
.dock-dna-wrap .dna-panel  { border-bottom: none; }
.dock-dna-wrap .sp-header  { padding: 7px 10px; }
.dock-dna-wrap .dna-body   { padding: 4px 0; }
.dock-dna-wrap .dna-row    { padding: 3px 12px; }

/* Watchlist panel — keep consistent */
.dock-wl-wrap .wl-panel    { border-top: none; }
.dock-wl-wrap .sp-header   { padding: 7px 10px; }

/* ── Global Search ──────────────────────────────────────────── */
.dock-section--search .dock-section-body {
  padding: 8px 10px 10px;
  /* No position:relative needed — results use position:fixed and escape all ancestors */
}

.dock-search-wrap {
  display: flex;
  align-items: center;
  background: rgba(128,128,128,0.12);
  border: 1px solid var(--dock-border, rgba(255,255,255,0.09));
  border-radius: 5px;
  padding: 0 8px;
  gap: 6px;
  transition: border-color 0.15s;
}
.dock-search-wrap:focus-within {
  border-color: rgba(201,162,39,0.5);
  background: rgba(255,255,255,0.08);
}

.dock-search-icon  { color: rgba(255,255,255,0.45); flex-shrink: 0; }  /* was #555 */

.dock-search-input {
  flex: 1;
  background: none !important;
  border: none !important;
  outline: none;
  color: #EBEBEB !important;     /* was #DDD — slightly brighter */
  font-size: 12px;
  padding: 7px 0;
  min-width: 0;
}
.dock-search-input::placeholder { color: rgba(255,255,255,0.35); font-size: 12px; }  /* was #555 */

.dock-search-clear {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);  /* was #666 */
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.12s;
}
.dock-search-clear:hover { color: #C9A227; }
.dock-search-clear.hidden { display: none; }

/* Search results dropdown
   Uses position:fixed to escape dock-panel { overflow:hidden } and any other
   stacking-context ancestor. top/left/width are set in JS via getBoundingClientRect. */
.search-results {
  position: fixed;
  z-index: 500;   /* above dock sections (50), status strip (70), nav-rail (200) */
  background: #1A1A1A;
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.65);
  max-height: 340px;
  overflow-y: auto;
}
.search-results.hidden { display: none; }

/* ── Dock Density — data-density attribute on .dock-panel ───────
   "comfortable" is the default (no attribute needed).
   "compact" tightens rows; "large" gives breathing room.           */

/* Compact */
.dock-panel[data-density="compact"] .dock-section-hdr     { padding: 4px 10px; }
.dock-panel[data-density="compact"] .dock-section-title   { font-size: 9px; }
.dock-panel[data-density="compact"] .dock-section-icon    { width: 10px; height: 10px; }
.dock-panel[data-density="compact"] .dock-section-body    { font-size: 11px; }
.dock-panel[data-density="compact"] .dock-search-input    { padding: 4px 0; font-size: 11px; }
.dock-panel[data-density="compact"] .dock-search-wrap     { padding: 0 6px; }
.dock-panel[data-density="compact"] .dock-task-row        { padding: 3px 8px; }
.dock-panel[data-density="compact"] .dock-tasks-group-lbl { padding: 2px 8px; }
.dock-panel[data-density="compact"] .sp-header            { height: 22px; padding: 0 8px; }
.dock-panel[data-density="compact"] .dna-row              { padding: 2px 8px; font-size: 11px; }

/* Large */
.dock-panel[data-density="large"] .dock-section-hdr       { padding: 10px 14px; }
.dock-panel[data-density="large"] .dock-section-title     { font-size: 11px; letter-spacing: 0.09em; }
.dock-panel[data-density="large"] .dock-section-icon      { width: 14px; height: 14px; }
.dock-panel[data-density="large"] .dock-section-body      { font-size: 13px; }
.dock-panel[data-density="large"] .dock-search-input      { padding: 10px 0; font-size: 13px; }
.dock-panel[data-density="large"] .dock-search-wrap       { padding: 0 10px; }
.dock-panel[data-density="large"] .dock-task-row          { padding: 8px 14px; font-size: 13px; }
.dock-panel[data-density="large"] .dock-tasks-group-lbl   { padding: 4px 14px; font-size: 10px; }
.dock-panel[data-density="large"] .sp-header              { height: 32px; padding: 0 14px; font-size: 12px; }
.dock-panel[data-density="large"] .dna-row                { padding: 5px 14px; font-size: 13px; }

/* ── Dock Tasks Section ──────────────────────────────────────── */
.dock-section-body #dock-tasks-mount {
  padding: 4px 0 6px;
}

.dock-tasks-body  { display: flex; flex-direction: column; }
.dock-tasks-empty {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--dock-muted);
  font-style: italic;
}

.dock-tasks-group { padding: 4px 0; }

.dock-tasks-group-lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 12px 3px;
  color: rgba(255,255,255,0.52);  /* was #555 — readable secondary label */
}
.dock-tg-overdue  { color: #c0392b; }
.dock-tg-today    { color: #C9A227; }
.dock-tg-upcoming { color: #5a8a5a; }

.dock-tasks-count {
  font-size: 9px;
  font-weight: 700;
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 1px 5px;
  color: inherit;
}

/* Individual task row */
.dock-task-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  transition: background 0.1s;
}
.dock-task-row:hover { background: rgba(255,255,255,0.04); }
.dock-task-row.dock-task-ovd .dock-task-text { color: #e57373; }

.dock-task-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: none;
  border: 1px solid #444;
  border-radius: 3px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.12s, background 0.12s;
}
.dock-task-check:hover { border-color: #C9A227; color: #C9A227; }

.dock-task-text {
  flex: 1;
  font-size: 11px;
  color: var(--dock-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  cursor: default;
}

.dock-tasks-more {
  font-size: 10px;
  color: #555;
  padding: 2px 12px;
  cursor: pointer;
  transition: color 0.12s;
}
.dock-tasks-more:hover { color: #C9A227; }

.dock-tasks-footer {
  padding: 4px 12px 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
}
.dock-tasks-seeall {
  background: none;
  border: none;
  font-size: 10px;
  color: #666;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
  text-decoration: none;
  display: inline-block;
}
.dock-tasks-seeall:hover { color: #C9A227; }

/* ============================================================
   DOCK SLOT FRAMEWORK — Phase 1
   Stacked workspace modules with headers, drag-resize,
   per-module menus, and bottom + controls.
   ============================================================ */

/* ── Slot wrapper ─────────────────────────────────────────── */
.dock-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-sizing: border-box;
}
/* Collapsed: slot shrinks to header-only height.
   Both flex AND min-height are !important so they beat any inline style
   set during an earlier render or resize session.
   The JS toggle also rewrites the inline style directly for belt-and-suspenders. */
.dock-slot--collapsed {
  flex:       0 0 auto !important;
  min-height: 0        !important;
}
/* Body content hidden via CSS as well as via JS — double guarantee. */
.dock-slot--collapsed .dock-slot-body { display: none !important; }

/* ── Slot header bar ─────────────────────────────────────── */
.dock-slot-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 10px;
  background: var(--dock-hdr-bg, rgba(0,0,0,0.35));
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: background 0.12s;
  min-height: 32px;
}
.dock-slot-hdr:hover { background: var(--dock-item-hover, rgba(255,255,255,0.04)); }

.dock-slot-icon {
  color: var(--dock-muted, #888);
  flex-shrink: 0;
}

.dock-slot-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dock-text, rgba(255,255,255,0.72));
  white-space: nowrap;
  flex-shrink: 0;
}

/* Summary: compact story shown in collapsed AND expanded headers */
.dock-slot-summary {
  flex: 1;
  font-size: 10px;
  color: var(--dock-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  padding-right: 4px;
}

/* ⋮ per-module menu trigger */
.dock-slot-menu-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--dock-muted, #888);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: color 0.12s, background 0.12s;
  line-height: 1;
}
.dock-slot-menu-btn:hover {
  color: var(--dock-text, rgba(255,255,255,0.8));
  background: var(--dock-item-hover, rgba(255,255,255,0.06));
}

/* Collapse chevron */
.dock-slot-chev {
  color: var(--dock-muted, #888);
  flex-shrink: 0;
  transition: transform 0.18s ease;
  transform: rotate(180deg);   /* default = pointing down = collapsed */
}
.dock-slot-chev--open {
  transform: rotate(0deg);     /* pointing up = expanded */
}

/* ── Slot body ───────────────────────────────────────────── */
.dock-slot-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
/* Hide internal sp-headers from DNA / Watchlist panels —
   the outer dock-slot-hdr is the canonical header now. */
.dock-slot-body .sp-header { display: none !important; }
/* Force DNA and Watchlist body content always visible when
   the slot is expanded (outer slot controls collapse). */
.dock-slot-body .dna-body  { display: block !important; }
.dock-slot-body .wl-body   { display: block !important; }

/* Scrollbar — thin and consistent */
.dock-slot-body::-webkit-scrollbar { width: 3px; }
.dock-slot-body::-webkit-scrollbar-track { background: transparent; }
.dock-slot-body::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.25); border-radius: 2px; }

/* ── Between-slot resize handle ─────────────────────────── */
/* A thin draggable divider between adjacent modules.        */
.dock-slot-resize-hdl {
  flex-shrink: 0;
  height: 5px;
  background: rgba(255,255,255,0.04);
  cursor: row-resize;
  transition: background 0.15s;
  position: relative;
  z-index: 5;
}
.dock-slot-resize-hdl::after {
  /* Widen hit area without growing visual footprint */
  content: '';
  position: absolute;
  inset: -4px 0;
  cursor: row-resize;
}
.dock-slot-resize-hdl:hover,
.dock-slot-resize-hdl.is-dragging {
  background: rgba(201,162,39,0.4);
}

/* ── Zone 1: scrollable module stack ────────────────────────
   Takes all available space between the dock top and footer.
   The last .dock-slot inside uses flex:1 to fill remaining
   height within this container.                             */
.dock-slots-stack {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.dock-slots-stack::-webkit-scrollbar { width: 3px; }
.dock-slots-stack::-webkit-scrollbar-track { background: transparent; }
.dock-slots-stack::-webkit-scrollbar-thumb { background: var(--ibx-gold-border); border-radius: 2px; }

/* ── Zone 2: system footer — always pinned at dock bottom ───
   flex-shrink:0 means the stack above takes space first,
   then this footer is always fully visible below it.        */
.dock-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: var(--dock-hdr-bg, rgba(0,0,0,0.25));
  z-index: 10;
}
.dock-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
  color: var(--dock-muted, #888);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  user-select: none;
  letter-spacing: 0.03em;
}
.dock-add-btn:hover {
  background: var(--ibx-gold-softer);
  border-color: var(--ibx-gold-border);
  color: var(--ibx-gold);
}

/* ── Per-module popup menu ─────────────────────────────────── */
/* position:fixed to escape dock overflow:hidden */
.dock-slot-menu-popup {
  position: fixed;
  z-index: 600;
  background: var(--ibx-surface-2);
  border: 1px solid var(--ibx-border-2);
  border-radius: var(--ibx-radius-sm);
  box-shadow: var(--ibx-shadow-2);
  padding: var(--space-1);
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dsm-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--ibx-radius-sm);
  color: var(--ibx-text-1);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--ibx-speed-fast), color var(--ibx-speed-fast);
}
.dsm-item:hover:not(:disabled) { background: var(--ibx-gold-softer); color: var(--ibx-gold); }
.dsm-item--disabled,
.dsm-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dsm-coming {
  font-size: 10px;
  color: var(--ibx-text-3);
  font-weight: 400;
  margin-left: auto;
}
.dsm-item--danger:hover:not(:disabled) { background: var(--ibx-danger-tint) !important; color: var(--ibx-danger) !important; }
.dsm-divider {
  border: none;
  border-top: 1px solid var(--ibx-border-1);
  margin: var(--space-1) 0;
}

/* ── Module chooser overlay (inside dock panel) ─────────────── */
.dock-module-chooser {
  position: absolute;
  bottom: 44px;           /* above the dock-footer */
  left: 8px;
  right: 8px;
  z-index: 400;
  background: var(--ibx-surface-2);
  border: 1px solid var(--ibx-border-2);
  border-radius: var(--ibx-radius-sm);
  box-shadow: var(--ibx-shadow-2);
  overflow: hidden;
  max-height: 340px;
  display: flex;
  flex-direction: column;
}
.dmc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--ibx-border-1);
  flex-shrink: 0;
}
.dmc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ibx-text-3);
}
.dmc-close {
  background: none;
  border: none;
  color: var(--ibx-text-3);
  font-size: 16px;
  cursor: pointer;
  padding: 0 var(--space-1);
  line-height: 1;
  transition: color var(--ibx-speed-fast);
}
.dmc-close:hover { color: var(--ibx-text-1); }
.dmc-list {
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dmc-list::-webkit-scrollbar { width: 3px; }
.dmc-list::-webkit-scrollbar-thumb { background: var(--ibx-gold-border); border-radius: 2px; }
.dmc-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
  width: 100%;
}
.dmc-row:hover,
.dmc-row--active { background: var(--ibx-gold-softer); }
.dmc-row--active .dmc-label { color: var(--ibx-gold); }
.dmc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ibx-text-1);
}
.dmc-desc {
  font-size: 10px;
  color: var(--ibx-text-3);
}

/* ── Settings: slot list in Layout tab ─────────────────────── */
.settings-slot-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--ibx-radius-sm);
  background: var(--ibx-surface-2);
  border: 1px solid var(--ibx-border-1);
  margin-bottom: var(--space-1);
}
.settings-slot-idx {
  font-size: 10px;
  color: var(--ibx-text-3);
  font-weight: 700;
  width: 14px;
  flex-shrink: 0;
}
.settings-slot-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--ibx-text-1);
}
.settings-slot-remove {
  background: none;
  border: none;
  color: var(--ibx-text-3);
  font-size: 14px;
  cursor: pointer;
  padding: 0 var(--space-1);
  line-height: 1;
  border-radius: 3px;
}
.settings-slot-remove:hover { color: var(--ibx-danger); background: var(--ibx-danger-bg); }

/* ══════════════════════════════════════════════════════════════
   SETTINGS LAYOUT — MODULE STACKS (smod-*)
   Two sub-tabs inside Settings > Layout: Left Rail | Workspace.
   All add/remove/toggle flows happen inside this settings panel;
   no popups open outside the modal.
   ══════════════════════════════════════════════════════════════ */

/* Segmented tab bar */
.smod-tabs {
  display: flex;
  gap: 2px;
  background: var(--ibx-surface-3);
  border-radius: var(--ibx-radius-sm);
  padding: 3px;
  margin-bottom: var(--space-3);
}
/* ── Sub-tabs (Left Rail / Workspace) ── */
.smod-tab {
  flex: 1;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--ibx-radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ibx-text-3);
  cursor: pointer;
  transition: background var(--ibx-speed-fast), color var(--ibx-speed-fast);
}
.smod-tab:hover { color: var(--ibx-text-1); background: var(--ibx-hover-overlay); }
.smod-tab--active {
  background: var(--ibx-surface-3);
  color: var(--ibx-text-1);
}

/* Tab body container */
.smod-tab-body {}

/* Module list */
.smod-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-1) 0;
}

/* ── Single module row — standard settings row pattern ── */
.smod-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ibx-border-1);
  transition: background var(--ibx-speed-fast);
}
.smod-row:last-child { border-bottom: none; }
.smod-row:hover { background: var(--ibx-hover-overlay); }
.smod-row-icon {
  flex-shrink: 0;
  opacity: 0.55;
  display: flex;
  align-items: center;
}
.smod-row-label {
  flex: 1;
  font-size: 13px;
  color: var(--ibx-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   SMOD ROW STATE — active row gets a subtle gold left accent;
   inactive row keeps full visibility with muted text/handles.
   ══════════════════════════════════════════════════════════════ */
.smod-row--active {
  border-left: 2px solid var(--ibx-gold-border);
  padding-left: calc(var(--space-4) - 2px);
}
.smod-row--inactive .smod-row-label {
  color: var(--ibx-text-3);
}
.smod-row--inactive .smod-drag-handle,
.smod-row--inactive .smod-row-icon {
  opacity: 0.35;
}

/* ══════════════════════════════════════════════════════════════
   SMOD TOGGLE — Settings > Layout module pill control
   Replaced slide-switch with pill button matching the segmented
   settings-mode-btn system already used in this layout tab.
   ON  = gold-tinted pill  (matches settings-mode-btn.active)
   OFF = neutral quiet pill (matches settings-mode-btn default)
   Checkbox mechanism preserved; only visual changed.
   ══════════════════════════════════════════════════════════════ */
.smod-toggle {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.smod-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.smod-toggle-track {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--ibx-radius-sm);
  border: 1px solid var(--ibx-control-border);
  background: var(--ibx-control-bg);
  color: var(--ibx-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background var(--ibx-speed-fast) ease,
    border-color var(--ibx-speed-fast) ease,
    color var(--ibx-speed-fast) ease;
}
.smod-toggle-track::after { content: 'Off'; }
.smod-toggle-thumb { display: none; } /* thumb not used in pill style */

/* ON state — gold pill matching settings-mode-btn.active */
.smod-toggle input:checked ~ .smod-toggle-track {
  background: var(--ibx-gold-softer);
  border-color: var(--ibx-gold-border);
  color: var(--ibx-gold-strong);
}
.smod-toggle input:checked ~ .smod-toggle-track::after { content: 'On'; }

/* Hover — generic (OFF state) */
.smod-toggle:hover .smod-toggle-track {
  border-color: var(--ibx-control-border-hover);
  color: var(--ibx-text-1);
}
/* ON state always wins over generic hover — placed after */
.smod-toggle input:checked ~ .smod-toggle-track {
  background: var(--ibx-gold-softer);
  border-color: var(--ibx-gold-border);
  color: var(--ibx-gold-strong);
}
.smod-toggle input:focus-visible ~ .smod-toggle-track {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
}
/* Light mode: all handled by --ibx-* token overrides in html.theme-ibex-light block.
   No additional hardcoded color overrides needed. */
html.theme-ibex-light .smod-row {
  background: transparent;
}
html.theme-ibex-light .smod-row:hover {
  background: var(--ibx-hover-overlay);
}
html.theme-ibex-light .smod-row-label {
  color: var(--ibx-text-2);
}
html.theme-ibex-light .smod-empty {
  border-color: var(--ibx-border-2);
  color: var(--ibx-text-3);
}
html.theme-ibex-light .smod-section-divider {
  color: var(--ibx-text-3);
}
html.theme-ibex-light .smod-section-divider::before,
html.theme-ibex-light .smod-section-divider::after {
  background: var(--ibx-border-2);
}
html.theme-ibex-light .smod-drag-handle {
  color: var(--ibx-text-3);
}
html.theme-ibex-light .smod-drag-handle:hover {
  color: var(--ibx-text-1);
}
html.theme-ibex-light .smod-reorder-btn {
  color: var(--ibx-text-3);
}
html.theme-ibex-light .smod-reorder-btn:hover:not(:disabled) {
  color: var(--ibx-text-1);
  background: var(--ibx-hover-overlay);
}

/* Add Module button at foot of list */
.smod-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--ibx-radius-sm);
  font-size: 11px;
  color: var(--ibx-text-3);
  cursor: pointer;
  transition: color var(--ibx-speed-fast), border-color var(--ibx-speed-fast);
}
.smod-add-btn:hover {
  color: var(--ibx-text-1);
  border-color: var(--ibx-gold-border);
}

/* Area hint — description line above module list */
.smod-area-hint {
  margin: 0 0 var(--space-3);
  font-size: 10px;
  color: var(--ibx-text-3);
  line-height: 1.4;
}

/* Locked row — last active module, cannot be toggled off */
.smod-row--locked {
  opacity: 0.55;
}
.smod-row-hint {
  font-size: 10px;
  color: var(--ibx-text-3);
  font-style: italic;
  white-space: nowrap;
}

/* Empty state when no workspace modules are active */
.smod-empty {
  padding: var(--space-3) var(--space-4);
  font-size: 11px;
  color: var(--ibx-text-3);
  border: 1px dashed var(--ibx-border-2);
  border-radius: var(--ibx-radius-sm);
  text-align: center;
  margin-top: var(--space-1);
  line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS LAYOUT: MODULE AREA SECTIONS — ibx token normalization
   Dock Modules / Workspace Modules use band layout matching the
   rest of the settings panel. No hardcoded colors.
   ══════════════════════════════════════════════════════════════ */

.settings-module-area {
  background: var(--ibx-surface-1);
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--ibx-radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
  /* .settings-content is a column flex with overflow-y:auto; without
     flex-shrink:0, this box shrinks below its natural height and the
     overflow:hidden above clips the lower module rows. */
  flex-shrink: 0;
}
.settings-module-area:last-child { margin-bottom: 0; }

/* Header band — acts as collapse toggle */
.settings-module-area-hdr {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ibx-text-2);
  padding: var(--space-2) var(--space-4);
  background: var(--ibx-surface-2);
  border-bottom: 1px solid var(--ibx-border-1);
  cursor: pointer;
  user-select: none;
  transition:
    background var(--ibx-speed-fast),
    color var(--ibx-speed-fast);
  min-height: 38px;
}
.settings-module-area-hdr:hover {
  background: var(--ibx-surface-3);
  color: var(--ibx-gold);
}
.settings-module-area-hdr svg {
  flex-shrink: 0;
  opacity: 0.65;
}

/* Chevron at right */
.settings-module-area-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--ibx-speed-med);
  color: var(--ibx-text-3);
  display: flex;
  align-items: center;
}
.settings-module-area-chevron--open { transform: rotate(180deg); }
.settings-module-area-body { padding-bottom: var(--space-1); }

.settings-module-area-sub {
  font-size: 11px;
  color: var(--ibx-text-3);
  margin-bottom: var(--space-2);
  margin-top: 0;
  line-height: 1.45;
  padding: var(--space-2) var(--space-4) 0;
}

/* Divider between module area blocks */
.settings-module-area-divider {
  height: 1px;
  background: var(--ibx-border-1);
  margin: var(--space-2) 0;
}

/* Lock hint inside an active-but-locked row */
.smod-row-hint--lock {
  font-size: 10px;
  color: var(--ibx-text-3);
  white-space: nowrap;
  font-style: italic;
}

/* Remove button inside workspace module-stack panel rows */
.wp-row-remove-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: var(--ibx-radius-sm);
  color: var(--ibx-text-3);
  cursor: pointer;
  transition: color var(--ibx-speed-fast), background var(--ibx-speed-fast);
}
.wp-row-remove-btn:hover {
  color: var(--ibx-danger);
  background: var(--ibx-danger-bg);
}

/* ── Settings Layouts tab ──────────────────────────────────── */

.layout-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.layout-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ibx-radius-sm);
  background: var(--ibx-surface-2);
  border: 1px solid var(--ibx-border-1);
  flex-wrap: wrap;
  transition: background var(--ibx-speed-fast);
}
.layout-item:hover { background: var(--ibx-surface-3); }
.layout-item--active {
  border-color: var(--ibx-gold-border);
  background: var(--ibx-tint-1);
}
.layout-item-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.layout-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ibx-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-item-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px var(--space-1);
  border-radius: var(--ibx-radius-sm);
}
.layout-item-badge--default {
  background: var(--ibx-gold-soft);
  color: var(--ibx-gold);
}
.layout-item-badge--active {
  background: var(--ibx-hover-overlay);
  color: var(--ibx-text-3);
}
.layout-item-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.layout-btn {
  height: 22px;
  padding: 0 var(--space-2);
  background: none;
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--ibx-radius-sm);
  font-size: 10px;
  color: var(--ibx-text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.layout-btn:hover {
  color: var(--ibx-text-1);
  border-color: var(--ibx-gold-border);
}
.layout-btn--danger {
  color: var(--ibx-text-3);
  border-color: var(--ibx-border-2);
}
.layout-btn--danger:hover {
  color: var(--ibx-danger);
  border-color: var(--ibx-danger-border-hover);
  background: var(--ibx-danger-bg);
}
.layout-global-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Save button with unsaved-changes indicator */
.layout-btn--dirty {
  border-color: var(--ibx-gold-border) !important;
  color: var(--ibx-gold) !important;
}
.layout-btn--dirty:hover {
  background: var(--ibx-gold-softer) !important;
}

/* Toast confirmation inside the Layouts tab */
.layout-toast {
  font-size: 11px;
  color: var(--ibx-gold);
  min-height: 18px;
  margin-bottom: var(--space-2);
  opacity: 0;
  transition: opacity 0.2s;
}
.layout-toast--show { opacity: 1; }

/* ── Drag-and-drop reordering ──────────────────────────────── */

/* Grip handle icon */
.smod-drag-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 20px;
  color: var(--ibx-text-3);
  cursor: grab;
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity var(--ibx-speed-fast), color var(--ibx-speed-fast);
  user-select: none;
  -webkit-user-select: none;
}
.smod-drag-handle:hover {
  opacity: 1;
  color: var(--ibx-text-1);
}
.smod-drag-handle:active { cursor: grabbing; }

/* Inactive handle (module not in active stack — can't be reordered) */
.smod-drag-handle--inactive {
  opacity: 0.18;
  cursor: default;
  pointer-events: none;
}

/* Row being dragged — ghost style */
.smod-row--dragging {
  opacity: 0.38;
  background: var(--ibx-tint-1) !important;
  border-color: var(--ibx-gold-border) !important;
}

/* Drop target: top half → insert above */
.smod-row--drop-above {
  border-top: 2px solid var(--ibx-gold) !important;
  background: var(--ibx-tint-1) !important;
}

/* Drop target: bottom half → insert below */
.smod-row--drop-below {
  border-bottom: 2px solid var(--ibx-gold) !important;
  background: var(--ibx-tint-1) !important;
}

/* Up / Down arrow buttons */
.smod-reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.smod-reorder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 12px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 2px;
  color: var(--ibx-text-3);
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--ibx-speed-fast), background var(--ibx-speed-fast);
}
.smod-reorder-btn:hover:not(:disabled) {
  color: var(--ibx-text-1);
  background: var(--ibx-hover-overlay);
}
.smod-reorder-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

/* Divider between active and inactive module sections */
.smod-section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-2);
  color: var(--ibx-text-4);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.smod-section-divider::before,
.smod-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ibx-border-1);
}

/* ── Collapsible "Available to Add" section ────────────────── */
.smod-avail-hdr {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin: var(--space-2) 0 0;
  cursor: pointer;
  user-select: none;
  color: var(--ibx-text-4);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--ibx-speed-fast);
}
.smod-avail-hdr:hover { color: var(--ibx-text-2); }
.smod-avail-hdr::before,
.smod-avail-hdr::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ibx-border-1);
}
.smod-avail-chevron {
  flex-shrink: 0;
  transition: transform var(--ibx-speed-fast);
  display: flex;
  align-items: center;
}
.smod-avail-chevron--open { transform: rotate(180deg); }
.smod-avail-body { margin-top: var(--space-1); }

/* ── Live dock slot drag handle ────────────────────────────── */
.dock-slot-drag-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: grab;
  color: var(--ibx-text-3);
  opacity: 0;
  transition: opacity var(--ibx-speed-fast);
  padding: 0 5px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: element;
  border-radius: 2px;
}
/* SVG children must not capture pointer events — parent span owns the drag */
.dock-slot-drag-handle svg,
.wp-drag-handle svg,
.smod-drag-handle svg { pointer-events: none; }
.dock-slot:hover .dock-slot-drag-handle { opacity: 0.5; }
.dock-slot-drag-handle:hover { opacity: 1 !important; }
.dock-slot-drag-handle:active { cursor: grabbing; opacity: 1 !important; }

/* ── Live workspace panel drag handle ──────────────────────── */
.wp-drag-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: grab;
  color: var(--ibx-text-3);
  opacity: 0;
  transition: opacity var(--ibx-speed-fast);
  padding: 0 6px 0 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: element;
  border-radius: 2px;
}
.wp-panel:hover .wp-drag-handle { opacity: 0.4; }
.wp-drag-handle:hover { opacity: 0.85 !important; }
.wp-drag-handle:active { cursor: grabbing; opacity: 1 !important; }

/* ── Drag states for live dock slots ───────────────────────── */
.dock-slot.smod-row--dragging {
  opacity: 0.4;
  background: var(--ibx-tint-1) !important;
}
.dock-slot.smod-row--drop-above .dock-slot-hdr {
  border-top: 2px solid var(--ibx-gold) !important;
  background: var(--ibx-tint-1) !important;
}
.dock-slot.smod-row--drop-below .dock-slot-hdr {
  border-bottom: 2px solid var(--ibx-gold) !important;
  background: var(--ibx-tint-1) !important;
}

/* ── Drag states for live workspace panels ─────────────────── */
.wp-panel.smod-row--dragging {
  opacity: 0.4;
}
.wp-panel.smod-row--drop-above {
  border-top: 2px solid var(--ibx-gold) !important;
  box-shadow: 0 -1px 0 0 var(--ibx-gold-softer);
}
.wp-panel.smod-row--drop-below {
  border-bottom: 2px solid var(--ibx-gold) !important;
  box-shadow: 0 1px 0 0 var(--ibx-gold-softer);
}



/* ── Settings: auto-save footer note ───────────────────────── */
.settings-autosave-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0;
}
.settings-autosave-note svg { flex-shrink: 0; opacity: 0.7; }

/* ── Dock Module content rows (.dm-*) ────────────────────────
   Shared namespace for the rich module bodies: Notes, Today,
   Renewals, Submissions, Notifications.
   Fully ibx-token normalized. No legacy fallbacks.
   ──────────────────────────────────────────────────────────── */
.dm-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dm-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background var(--ibx-speed-fast);
  border-left: 2px solid transparent;
  min-height: 32px;
}
.dm-row:hover { background: var(--ibx-hover-overlay); }
.dm-row--critical {
  border-left-color: var(--ibx-danger);
  background: var(--ibx-danger-tint);
}
.dm-row--critical:hover { background: var(--ibx-danger-bg); }
.dm-row--urgent {
  border-left-color: var(--ibx-warning);
  background: var(--ibx-warning-tint);
}
.dm-row--urgent:hover { background: var(--ibx-warning-bg); }
.dm-row--mention {
  border-left-color: var(--ibx-gold);
  background: var(--ibx-tint-1);
}
.dm-row--mention:hover { background: var(--ibx-tint-2); }
.dm-row--read { opacity: 0.45; pointer-events: none; }
.dm-row-main { flex: 1; min-width: 0; }
.dm-row-label {
  font-size: 11.5px;
  color: var(--ibx-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.dm-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 1px;
}
.dm-row-client {
  font-size: 10.5px;
  color: var(--ibx-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.dm-row-age {
  font-size: 10px;
  color: var(--ibx-text-3);
}
.dm-section-hdr {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ibx-text-3);
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--ibx-border-1);
}
.dm-section-hdr:first-child { border-top: none; }
.dm-section-hdr--critical { color: var(--ibx-danger); }
.dm-section-hdr--urgent   { color: var(--ibx-warning); }
.dm-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-1);
  border-radius: var(--ibx-radius-sm);
  font-size: 9.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.dm-badge--critical { background: var(--ibx-danger-bg);  color: var(--ibx-danger); }
.dm-badge--urgent   { background: var(--ibx-warning-bg); color: var(--ibx-warning); }
.dm-badge--dim      { background: var(--ibx-stage-draft-bg); color: var(--ibx-text-3); }
/* Submission stage badges — canonical stage tokens */
.dm-badge--stage-draft       { background: var(--ibx-stage-draft-bg);    color: var(--ibx-stage-draft); }
.dm-badge--stage-in_progress { background: var(--ibx-stage-progress-bg); color: var(--ibx-stage-progress); }
.dm-badge--stage-quoted      { background: var(--ibx-gold-border);        color: var(--ibx-gold); }
/* @mention indicator dot */
.dm-mention-badge {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ibx-gold);
  color: var(--ibx-text-inverse);
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Submission stage breakdown bar */
.dm-stage-bar {
  display: flex;
  height: 4px;
  margin: var(--space-2) var(--space-3) var(--space-1);
  border-radius: 2px;
  overflow: hidden;
  gap: 1px;
}
.dm-stage-chip {
  height: 100%;
  border-radius: 1px;
  font-size: 0;
  transition: flex var(--ibx-speed-med);
}
.dm-stage-chip--draft       { background: var(--ibx-stage-draft); }
.dm-stage-chip--in_progress { background: var(--ibx-stage-progress); }
.dm-stage-chip--quoted      { background: var(--ibx-stage-quoted); }
/* Module footer row (action button + view-all link) */
.dm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3) var(--space-2);
  border-top: 1px solid var(--ibx-border-1);
  margin-top: auto;
  flex-shrink: 0;
}
.dm-action-btn {
  font-size: 10.5px;
  padding: var(--space-1) var(--space-2);
  background: var(--ibx-hover-overlay);
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--ibx-radius-sm);
  color: var(--ibx-text-2);
  cursor: pointer;
  transition: background var(--ibx-speed-fast);
}
.dm-action-btn:hover { background: var(--ibx-active-overlay); }
.dm-view-all {
  font-size: 10.5px;
  color: var(--ibx-gold);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--ibx-speed-fast);
}
.dm-view-all:hover { opacity: 1; }
.dm-empty {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  font-size: 11px;
  color: var(--ibx-text-3);
}

/* ══════════════════════════════════════════════════════════════
   WORKSPACE PANEL SYSTEM  (.wp-*)
   Main-area execution environment — independent from the dock.
   State: ibex_workspace_v1  |  Registry: App._workspacePanelRegistry
   ══════════════════════════════════════════════════════════════ */

/* ── Workspace Area container ─────────────────────────────── */
.wp-area {
  margin-bottom: var(--space-5);
}
.wp-area-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.wp-area-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ibx-text-3);
  margin: 0;
}
.wp-area-controls { display: flex; align-items: center; gap: var(--space-2); }
.wp-add-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--ibx-radius-sm);
  color: var(--ibx-text-3);
  cursor: pointer;
  transition: background var(--ibx-speed-fast), color var(--ibx-speed-fast), border-color var(--ibx-speed-fast);
}
.wp-add-btn:hover {
  background: var(--ibx-gold-softer);
  border-color: var(--ibx-gold-border);
  color: var(--ibx-gold);
}

/* ── Renewals page modular layout area ────────────────────── */
/* Mirrors .wp-area / .wp-panels; reuses all .wp-panel* rules. */
.rl-area  { margin-bottom: var(--space-5); }
.rl-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Pinned panels (renewal_kpis) have a subtle top accent to signal non-movability */
.rl-panel--pinned .wp-panel-hdr {
  background: var(--ibx-tint-1);
}

/* ── Panel stack — single column, vertically stacked ─────── */
/* All panels are always full-width. No grids, no half-width, no splitting. */
.wp-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* All panels expand to full container width */
.wp-panel { width: 100%; }
/* Collapse is handled via display:none on .wp-panel-body */

/* ── Individual Panel ─────────────────────────────────────── */
.wp-panel {
  background: var(--ibx-surface-1);
  color: var(--ibx-text-1);
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--ibx-radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: box-shadow var(--ibx-speed-fast);
}
.wp-panel:hover { box-shadow: var(--ibx-shadow-1); }

/* ── Panel Header ─────────────────────────────────────────── */
/* Left padding matches .wp-row (14px) so header title and row content align. */
.wp-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px var(--space-2) 9px var(--space-4);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--ibx-border-1);
  background: var(--ibx-surface-2);
  transition: background var(--ibx-speed-fast);
  min-height: 38px;
}
.wp-panel-hdr:hover { background: var(--ibx-tint-1); }
.wp-panel--collapsed .wp-panel-hdr { border-bottom: none; }
.wp-panel-hdr-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.wp-panel-icon {
  display: flex;
  align-items: center;
  color: var(--ibx-text-3);
  flex-shrink: 0;
}
.wp-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ibx-text-2);
  white-space: nowrap;
}
.wp-panel-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--ibx-gold);
  color: var(--ibx-text-inverse);
  flex-shrink: 0;
}
.wp-panel-hdr-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.wp-panel-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--ibx-radius-sm);
  color: var(--ibx-text-3);
  cursor: pointer;
  transition: background var(--ibx-speed-fast), color var(--ibx-speed-fast);
}
.wp-panel-btn:hover { background: var(--ibx-gold-softer); color: var(--ibx-text-1); }
.wp-collapse-icon { transition: transform var(--ibx-speed-med); }
.wp-collapse-icon--collapsed { transform: rotate(180deg); }

/* ── Panel Body ───────────────────────────────────────────── */
/* No overflow clip or fixed heights — panels expand naturally with content.
   The single page scroll is on .content; panels must not create nested scrolls. */
.wp-panel-body {
  /* no overflow, no max-height — content expands freely */
}
.wp-panel--collapsed .wp-panel-body { display: none; }
.wp-body-inner {
  display: flex;
  flex-direction: column;
}

/* ── Embedded cc-panel resets ─────────────────────────────── */
/* When Action Queue / Continue Work render inside .wp-panel-body,
   neutralise the outer cc-panel wrapper (header, border, shadow). */
.wp-panel-body > .cc-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.wp-panel-body > .cc-panel > .cc-panel-hdr { display: none !important; }
.wp-panel-body > .cc-panel > .cc-panel-body {
  padding: 0 !important;
  background: transparent !important;
}
/* Continue Work cc-resume grid — override max-height set by old layout */
.wp-panel-body .cc-resume-grid { max-height: none !important; }
.wp-panel-body .cc-resume { background: transparent !important; border: none !important; box-shadow: none !important; }
.wp-panel-body .cc-resume > .cc-panel-hdr { display: none !important; }

/* ── Shared row styles (wp-row) ───────────────────────────── */
/* 14px horizontal padding matches panel header — all content aligns to a single left edge. */
.wp-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--ibx-speed-fast);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--ibx-border-1);
  min-height: 38px;
  background: transparent;
}
.wp-row:last-child { border-bottom: none; }
.wp-row:hover { background: var(--ibx-hover-overlay); }
.wp-row--critical { border-left-color: var(--ibx-danger);  background: var(--ibx-danger-tint); }
.wp-row--critical:hover { background: var(--ibx-danger-bg); }
.wp-row--urgent   { border-left-color: var(--ibx-warning); background: var(--ibx-warning-tint); }
.wp-row--urgent:hover { background: var(--ibx-warning-bg); }
.wp-row--mention  { border-left-color: var(--ibx-gold);    background: var(--ibx-tint-1); }
.wp-row--mention:hover { background: var(--ibx-tint-2); }
.wp-row-main  { flex: 1; min-width: 0; }
.wp-row-label {
  font-size: 12px;
  color: var(--ibx-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.wp-row-meta  { display: flex; align-items: center; gap: var(--space-2); margin-top: 1px; }
.wp-row-client {
  font-size: 11px;
  color: var(--ibx-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.wp-row-age { font-size: 11px; color: var(--ibx-text-3); }

/* ── Submissions panel: filter toggle + extra meta cells ─── */
.wp-sub-filter {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--ibx-border-1);
  background: var(--ibx-surface-2);
}

/* ── Submissions stage filter dots ────────────────────────────────────────
   Small colored circles shown inline with Mine/All for quick stage filtering.
   Colors are set inline from App._subsStageMeta so this block is style-only. */
.sub-stage-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--ibx-border-2);
}
.sub-stage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.28;
  flex-shrink: 0;
  transition: opacity var(--ibx-speed-fast), transform var(--ibx-speed-fast);
}
.sub-stage-dot--active {
  opacity: 1 !important;
  transform: scale(1.15);
  /* Surface-color ring creates a "selected" halo */
  box-shadow: 0 0 0 1.5px var(--ibx-surface-2);
}
/* Wrapper that keeps each dot + count tightly coupled.
   Hover is wired at the group level so cursor anywhere in the group
   (dot or count number) lifts both elements together as a unified atom. */
.sub-stage-dot-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.sub-stage-dot-group:hover .sub-stage-dot:not(.sub-stage-dot--active) {
  opacity: 0.62;
  transform: scale(1.2);
}
/* Small count number rendered next to each stage dot.
   Uses pre-stage-filter data so all counts are always visible.
   Default opacity is slightly higher than the dot so digits remain
   legible at rest, while still reading as a muted pair. */
.sub-stage-count {
  font-size: 10px;
  line-height: 1;
  color: var(--ibx-text-muted, #7A7060);
  font-variant-numeric: tabular-nums;
  min-width: 10px;
  text-align: left;
  pointer-events: none;
  user-select: none;
  opacity: 0.40;
  transition: opacity var(--ibx-speed-fast), color var(--ibx-speed-fast);
}
.sub-stage-dot-group:hover .sub-stage-count { opacity: 0.82; }
.sub-stage-count--active {
  color: var(--ibx-text-2, #C9A227);
  opacity: 1;
}
/* Board controls bar scope toggle — sits in sub-controls-right alongside other filters */
.sub-scope-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 10px;
  border-right: 1px solid var(--ibx-border-1);
  margin-right: 2px;
}
.wp-sub-filter-btn {
  padding: 2px 9px;
  border-radius: var(--ibx-radius-sm);
  border: 1px solid var(--ibx-border-2);
  background: transparent;
  color: var(--ibx-text-2);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ibx-speed-fast), color var(--ibx-speed-fast),
              border-color var(--ibx-speed-fast);
  line-height: 1.6;
}
.wp-sub-filter-btn:hover {
  background: var(--ibx-hover-overlay);
  color: var(--ibx-text-1);
}
.wp-sub-filter-btn--active {
  background: var(--ibx-gold);
  border-color: var(--ibx-gold);
  color: #000;
}
.wp-row-sub-num {
  font-size: 10px;
  color: var(--ibx-text-3);
  font-variant-numeric: tabular-nums;
}
.wp-row-lobs {
  font-size: 10px;
  color: var(--ibx-text-2);
  white-space: nowrap;
}

.wp-section-hdr {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ibx-text-3);
  padding: var(--space-2) var(--space-4) var(--space-1);
  border-top: 1px solid var(--ibx-border-1);
}
.wp-section-hdr:first-child { border-top: none; }
.wp-section-hdr--critical { color: var(--ibx-danger); }
.wp-section-hdr--urgent   { color: var(--ibx-warning); }
.wp-mention-badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ibx-gold);
  color: var(--ibx-text-inverse);
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--ibx-radius-sm);
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Severity badges */
.wp-badge--critical { background: var(--ibx-danger-bg);  color: var(--ibx-danger); }
.wp-badge--urgent   { background: var(--ibx-warning-bg); color: var(--ibx-warning); }
/* Pipeline stage badges — canonical stage tokens, consistent with dm-badge--stage-* */
.wp-badge--stage-draft       { background: var(--ibx-stage-draft-bg);      color: var(--ibx-stage-draft); }
.wp-badge--stage-in_progress { background: var(--ibx-stage-progress-bg);   color: var(--ibx-stage-progress); }
.wp-badge--stage-quoted      { background: var(--ibx-gold-border);          color: var(--ibx-gold); }
.wp-badge--stage-submitted   { background: var(--ibx-stage-submitted-bg);   color: var(--ibx-stage-submitted); }
.wp-badge--stage-new_lead    { background: var(--ibx-stage-new-lead-bg);    color: var(--ibx-stage-new-lead); }
.wp-stage-bar {
  display: flex;
  height: 4px;
  margin: var(--space-2) var(--space-4) var(--space-2);
  border-radius: 2px;
  overflow: hidden;
  gap: 2px;
}
/* Stage chips — same token mapping as dm-stage-chip-* */
.wp-stage-chip { height: 100%; border-radius: 1px; transition: flex var(--ibx-speed-med); }
.wp-stage-chip--draft       { background: var(--ibx-stage-draft); }
.wp-stage-chip--in_progress { background: var(--ibx-stage-progress); }
.wp-stage-chip--quoted      { background: var(--ibx-stage-quoted); }
.wp-stage-chip--submitted   { background: var(--ibx-stage-submitted); }
.wp-stage-chip--new_lead    { background: var(--ibx-stage-new-lead); }

/* ── Panel Footer row ─────────────────────────────────────── */
.wp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid var(--ibx-border-1);
  margin-top: auto;
  flex-shrink: 0;
}
.wp-action-btn {
  font-size: 11px;
  padding: var(--space-1) var(--space-3);
  background: var(--ibx-hover-overlay);
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--ibx-radius-sm);
  color: var(--ibx-text-2);
  cursor: pointer;
  transition: background var(--ibx-speed-fast);
}
.wp-action-btn:hover { background: var(--ibx-active-overlay); }
.wp-view-all {
  font-size: 11.5px;
  color: var(--ibx-gold);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--ibx-speed-fast);
}
.wp-view-all:hover { opacity: 1; }
.wp-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: 12px;
  color: var(--ibx-text-3);
  line-height: 1.5;
}

/* ── ⋮ Panel context menu popup ───────────────────────────── */
.wp-panel-menu-popup {
  position: fixed;
  z-index: 600;
  background: var(--ibx-surface-2);
  border: 1px solid var(--ibx-border-2);
  border-radius: var(--ibx-radius-sm);
  box-shadow: var(--ibx-shadow-2);
  padding: var(--space-1);
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wpm-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--ibx-radius-sm);
  color: var(--ibx-text-1);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--ibx-speed-fast), color var(--ibx-speed-fast);
}
.wpm-item:hover:not(:disabled) { background: var(--ibx-gold-softer); color: var(--ibx-gold); }
.wpm-item--danger:hover:not(:disabled) { background: var(--ibx-danger-tint) !important; color: var(--ibx-danger) !important; }
.wpm-item:disabled { opacity: 0.38; cursor: not-allowed; }
.wpm-coming { font-size: 10px; color: var(--ibx-text-3); font-weight: 400; margin-left: auto; }

/* ── Module chooser overlay ───────────────────────────────── */
.wp-panel-chooser {
  /* Elevated panel surface — token handles dark/light automatically */
  background: var(--ibx-surface-2);
  border: 1px solid var(--ibx-border-2);
  border-radius: var(--ibx-radius-md);
  box-shadow: var(--ibx-shadow-2);
  overflow: hidden;
  width: 290px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
}
.wpc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--ibx-border-1);
  flex-shrink: 0;
}
.wpc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ibx-text-3);
}
.wpc-close {
  background: none;
  border: none;
  color: var(--ibx-text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 0 var(--space-1);
  line-height: 1;
  transition: color var(--ibx-speed-fast);
}
.wpc-close:hover { color: var(--ibx-text-1); }
.wpc-list {
  overflow-y: auto;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wpc-list::-webkit-scrollbar { width: 3px; }
.wpc-list::-webkit-scrollbar-thumb { background: var(--ibx-gold-border); border-radius: 2px; }
.wpc-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--ibx-radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--ibx-speed-fast);
  width: 100%;
}
.wpc-row:hover { background: var(--ibx-gold-softer); }
.wpc-row--active { background: var(--ibx-tint-1); }
.wpc-row--active .wpc-label { color: var(--ibx-gold); }
.wpc-icon { flex-shrink: 0; color: var(--ibx-text-3); }
.wpc-info { flex: 1; min-width: 0; }
.wpc-label { font-size: 12px; font-weight: 600; color: var(--ibx-text-1); }
.wpc-desc  { font-size: 10.5px; color: var(--ibx-text-3); margin-top: 1px; }
.wpc-check {
  flex-shrink: 0;
  color: var(--ibx-gold);
  font-size: 13px;
  font-weight: 700;
}
/* Add Panel button in topbar */
.topbar-add-panel-btn:hover {
  background: var(--ibx-gold-softer);
  color: var(--ibx-gold);
}

/* Light theme adjustments — most surface/row/border overrides are redundant;
   ibx tokens resolve correctly for light theme automatically.
   Keep only shadow overrides that need light-specific softening. */
.theme-ibex-light .wp-panel { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.theme-ibex-light .wp-panel-menu-popup { box-shadow: 0 4px 20px rgba(0,0,0,0.18); }

/* ── Density overrides (slot variants) ─────────────────────── */
.dock-panel[data-density="compact"] .dock-slot-hdr   { padding: 4px 6px 4px 8px; min-height: 26px; }
.dock-panel[data-density="compact"] .dock-slot-title { font-size: 9px; }
.dock-panel[data-density="compact"] .dock-slot-summary { font-size: 9px; }
.dock-panel[data-density="large"]   .dock-slot-hdr   { padding: 10px 10px 10px 14px; min-height: 38px; }
.dock-panel[data-density="large"]   .dock-slot-title { font-size: 11px; letter-spacing: 0.09em; }
.dock-panel[data-density="large"]   .dock-slot-summary { font-size: 11px; }

/* ── Dock Resize Handle ──────────────────────────────────────── */
.dock-resize-handle {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 70;
  background: transparent;
  transition: background var(--ibx-speed-fast);
}
.dock-resize-handle:hover,
.dock-resize-handle.is-dragging {
  background: var(--ibx-gold-border);
}

/* (.main-area is fully defined in the main layout section above — no duplicate needed) */

/* ============================================================
   NAV RAIL — LAYOUT MODES
   Applied as classes on .app-shell:
     nav-off   → rail fully hidden, zero reserved space (master toggle OFF)
     nav-icon  → 52px, icons only (default)
     nav-full  → 200px, icons + labels visible
   ============================================================ */

/* --- OFF (master toggle disabled) ---
   Rail is fully gone; --nav-rail-width is set to 0 by JS so
   mode-bar and subnav-bar extend all the way to the left edge. */
.app-shell.nav-off .nav-rail {
  display: none;
}

/* --- ICON (default) --- */
/* .app-shell.nav-icon .nav-rail already matches base .nav-rail styles */
.app-shell.nav-icon .rail-item {
  width: 40px;
  justify-content: center;
}
.app-shell.nav-icon .rail-item-label { display: none; }
.app-shell.nav-icon .rail-grp-label  { display: block; }  /* keep tiny group tags */

/* --- FULL --- */
.app-shell.nav-full .nav-rail {
  width: 200px;
  align-items: stretch;
}
.app-shell.nav-full .rail-nav {
  align-items: stretch;
  padding: 4px 6px;
}
.app-shell.nav-full .rail-item {
  width: 100%;
  height: 34px;
  margin: 1px 0;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px;
  border-radius: 6px;
}
.app-shell.nav-full .rail-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
}
.app-shell.nav-full .rail-item-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-shell.nav-full .rail-item--active .rail-item-label { color: #C9A227; }
.app-shell.nav-full .rail-sep {
  width: 100%;
  margin: 4px 0 2px;
}
.app-shell.nav-full .rail-grp-label {
  font-size: 9px;
  text-align: left;
  padding: 2px 10px 1px;
  color: rgba(255,255,255,0.3);  /* nav-rail is always dark — this is correct */
}
/* Footer layout unchanged in full mode — base styles apply */


/* ── Dock Edge Tab — whole-panel collapse / expand ──────────────
   Lives OUTSIDE the dock panel as a sibling in .app-shell.
   Position: absolute, anchored at the dock / main-area boundary.
   left tracks --dock-panel-width so it slides with the panel on
   collapse/expand.  Visually distinct from in-panel section arrows:
   pill shape on the panel edge vs. inline chevrons inside modules.  */
.dock-edge-tab {
  position: absolute;
  /* sits flush against the dock's right border */
  left: calc(var(--nav-rail-width, 52px) + var(--dock-panel-width, 280px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 75;   /* above dock (50) and resize handle (70) */

  width: 12px;
  height: 44px;
  padding: 0;
  background: var(--dock-bg, #141414);
  border: 1px solid var(--dock-border, rgba(255,255,255,0.10));
  border-left: none;          /* merges flush with dock right border */
  border-radius: 0 6px 6px 0; /* flat left, rounded right — tab shape */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.30);

  /* slides with the dock width transition */
  transition: left 0.22s ease, background 0.12s, color 0.12s, border-color 0.12s;
}
.dock-edge-tab:hover {
  background: rgba(201,162,39,0.13);
  border-color: rgba(201,162,39,0.32);
  color: #C9A227;
}
.dock-edge-tab svg {
  display: block;
  pointer-events: none;
}

/* ── Rail (collapsed) mode ──────────────────────────────────────
   dock-panel shrinks to a 36px rail; edge tab slides left with it.
   The tab icon swaps to ›  in JS (toggleDock).                    */
.app-shell.dock-hidden .dock-panel {
  min-width: 36px !important;
  /* width set to 36px by JS so the CSS width transition fires cleanly */
}
/* Hide all panel content in rail mode — the dark 36px strip + edge tab
   communicate "collapsed panel" clearly without any additional UI.     */
.app-shell.dock-hidden .dock-slots-stack,
.app-shell.dock-hidden .dock-footer,
.app-shell.dock-hidden .dock-resize-handle,
.app-shell.dock-hidden .search-results {
  display: none !important;
}

/* Settings cog button in top header */
.topbar-settings-btn {
  margin-right: 2px;
}

/* ── Dark mode overrides for dock ───────────────────────────── */
html.dark-mode .nav-rail          { background: #050505; border-right-color: rgba(201,162,39,0.10); }
html.dark-mode .dock-panel        { background: var(--cc-dock-bg, #0E0E0E); }
html.dark-mode .dock-section-hdr  { background: rgba(0,0,0,0.45); }
html.dark-mode .dock-section-hdr:hover { background: rgba(255,255,255,0.03); }
html.dark-mode .dock-search-wrap  { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); }
html.dark-mode .dock-search-input { color: var(--dock-text, #DDD) !important; }
html.dark-mode .dock-tasks-seeall,
html.dark-mode .dock-tasks-more   { color: #555; }
html.dark-mode .dock-tasks-seeall:hover,
html.dark-mode .dock-tasks-more:hover { color: #C9A227; }

/* ── Light theme dock — override dock tokens for light surface ── */
html.theme-ibex-light .dock-search-input { color: var(--dock-text, #1A1A1A) !important; }
html.theme-ibex-light .dock-search-input::placeholder { color: var(--dock-muted, #5A5A5A) !important; }
html.theme-ibex-light .dock-search-wrap { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.14); }
html.theme-ibex-light .dock-search-wrap:focus-within { border-color: rgba(154,122,16,0.5); }
html.theme-ibex-light .dna-row:hover { background: rgba(0,0,0,0.05); }
html.theme-ibex-light .dock-tasks-seeall,
html.theme-ibex-light .dock-tasks-more   { color: #888; }
html.theme-ibex-light .dock-tasks-seeall:hover,
html.theme-ibex-light .dock-tasks-more:hover { color: #9a7a10; }

/* ── Fallback for themes with no explicit dock class (rare edge case) ── */
:root:not(html.dark-mode):not(html.theme-ibex-light):not(html.theme-ibex-hc):not(html.theme-ibex-cb):not(html.theme-ibex-custom) .nav-rail {
  background: #111111;
  border-right-color: rgba(201,162,39,0.15);
}
:root:not(html.dark-mode):not(html.theme-ibex-light):not(html.theme-ibex-hc):not(html.theme-ibex-cb):not(html.theme-ibex-custom) .dock-panel {
  background: #141414;
  border-right-color: rgba(0,0,0,0.15);
}
:root:not(html.dark-mode):not(html.theme-ibex-light):not(html.theme-ibex-hc):not(html.theme-ibex-cb):not(html.theme-ibex-custom) .dock-search-input { color: #CCC !important; }
:root:not(html.dark-mode):not(html.theme-ibex-light):not(html.theme-ibex-hc):not(html.theme-ibex-cb):not(html.theme-ibex-custom) .dock-search-input::placeholder { color: #666; }

/* ============================================================
   SETTINGS MODAL — TOS-style two-pane layout
   Sidebar (tabs) + Content (form area)
   ============================================================ */
/* ══════════════════════════════════════════════════════════════
   SETTINGS PANEL — Full ibx token normalization
   Section band layout. No floating sections. No hardcoded colors.
   All three toggle systems unified: .toggle-switch, .smod-toggle,
   .ui-toggle all use the same --ibx-toggle-* tokens.
   ══════════════════════════════════════════════════════════════ */

/* ── Settings modal — scroll containment ── */
.modal.modal--settings {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 90vh;        /* definite height — without this, flex children cannot resolve heights */
}
.modal.modal--settings .modal-header,
.modal.modal--settings .modal-footer { flex-shrink: 0; }
.modal.modal--settings .modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;       /* .settings-modal must be a flex child to use flex:1 correctly */
  flex-direction: column;
}

.settings-modal {
  display: flex;
  flex: 1;             /* fill .modal-body as a flex child — height:100% is unreliable here */
  min-height: 0;
  max-height: none;
}

/* ── Sidebar nav ── */
.settings-sidebar {
  width: 152px;
  flex-shrink: 0;
  border-right: 1px solid var(--ibx-border-1);
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-2);
  gap: 2px;
  background: var(--ibx-surface-1);
  overflow-y: auto;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ibx-radius-sm);
  border: none;
  background: transparent;
  color: var(--ibx-text-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition:
    background var(--ibx-speed-fast),
    color var(--ibx-speed-fast);
}
.settings-nav-item:hover {
  background: var(--ibx-hover-overlay);
  color: var(--ibx-text-1);
}
.settings-nav-item.active {
  background: var(--ibx-tint-2);
  color: var(--ibx-gold);
}
.settings-nav-item svg { flex-shrink: 0; opacity: 0.65; }
.settings-nav-item.active svg { opacity: 1; }
.settings-nav-item:focus-visible {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
}

/* ── Sidebar section divider label ── */
.settings-nav-divider {
  padding: var(--space-3) var(--space-3) var(--space-1);
  margin-top: var(--space-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ibx-text-3);
  border-top: 1px solid var(--ibx-border-1);  /* --ibx-border-1 is defined; --ibx-border-subtle is not */
}

/* ── Content area ── */
.settings-content {
  flex: 1;
  min-height: 0;       /* required: flex child with overflow-y must be able to shrink */
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--ibx-bg);
}

/* ── Section band layout ──────────────────────────────────────
   Each .settings-section is a bordered panel.
   .settings-section-label becomes a dark header band using
   negative horizontal margins to bleed edge-to-edge (the parent
   has overflow:hidden + border-radius to clip cleanly).
   ── */
.settings-section {
  background: var(--ibx-surface-1);
  border: 1px solid var(--ibx-border-1);
  border-radius: var(--ibx-radius-sm);
  overflow: hidden;
  margin-bottom: 0; /* gap handled by flexbox on .settings-content */
  padding: 0 var(--space-4) var(--space-4);
  /* Prevent column-flex shrinking from clipping content inside overflow:hidden */
  flex-shrink: 0;
}
.settings-section:last-child { margin-bottom: 0; }

/* Dark header band — extends full-width via negative h-margins */
.settings-section-label {
  display: block;
  margin: 0 calc(-1 * var(--space-4)) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--ibx-surface-2);
  border-bottom: 1px solid var(--ibx-border-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ibx-text-3);
}

/* Sub-description just below the label band */
.settings-section-sub {
  font-size: 12px;
  color: var(--ibx-text-3);
  margin-bottom: var(--space-3);
  margin-top: calc(-1 * var(--space-2));
  line-height: 1.5;
}

/* ── Theme Picker Cards ── */
.theme-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  min-width: 110px;
  position: relative;
}
.theme-card:hover {
  border-color: rgba(201,162,39,0.45);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.theme-card--active {
  border-color: rgba(201,162,39,0.7);
  box-shadow: 0 0 0 1px rgba(201,162,39,0.18), 0 2px 8px rgba(0,0,0,0.28);
}
.theme-card--active:hover { transform: none; }
.theme-card-active-badge {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #C9A227;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}
.theme-card--active .theme-card-active-badge { display: flex; }
.theme-card-active-badge svg { flex-shrink: 0; }
.theme-card-swatch {
  width: 100%;
  height: 52px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(255,255,255,0.06);
}
.theme-card-swatch .swatch-rail  { width: 18px; flex-shrink: 0; }
.theme-card-swatch .swatch-dock  { width: 28px; flex-shrink: 0; }
.theme-card-swatch .swatch-main  { flex: 1; }

/* Ibex Dark swatch */
.theme-swatch-ibex-dark .swatch-rail { background: #060606; }
.theme-swatch-ibex-dark .swatch-dock { background: #0D0D0D; }
.theme-swatch-ibex-dark .swatch-main { background: #111111; }

/* Ibex Light swatch */
.theme-swatch-ibex-light .swatch-rail { background: #1A1A1A; }
.theme-swatch-ibex-light .swatch-dock { background: #EFEFEF; }
.theme-swatch-ibex-light .swatch-main { background: #F5F5F5; }

/* Ibex Classic swatch */
.theme-swatch-ibex-classic .swatch-rail { background: #0E0B07; }
.theme-swatch-ibex-classic .swatch-dock { background: #131008; }
.theme-swatch-ibex-classic .swatch-main { background: #181410; }

/* High Contrast swatch */
.theme-swatch-ibex-hc .swatch-rail { background: #000000; border-right: 2px solid #FFD700; }
.theme-swatch-ibex-hc .swatch-dock { background: #000000; }
.theme-swatch-ibex-hc .swatch-main { background: #0A0A0A; }

/* Color-Safe swatch */
.theme-swatch-ibex-cb .swatch-rail { background: #0D1020; }
.theme-swatch-ibex-cb .swatch-dock { background: #1A2035; }
.theme-swatch-ibex-cb .swatch-main { background: #0F1117; }

/* Custom swatch — uses current custom token or neutral placeholder */
.theme-swatch-ibex-custom .swatch-rail { background: #222; }
.theme-swatch-ibex-custom .swatch-dock { background: #2a2a2a; background-image: repeating-linear-gradient(45deg, rgba(201,162,39,0.15) 0px, rgba(201,162,39,0.15) 2px, transparent 2px, transparent 8px); }
.theme-swatch-ibex-custom .swatch-main { background: #333; }

/* Custom theme panel within settings */
.custom-theme-panel {
  margin-top: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
}
.custom-token-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.custom-token-row:last-child { margin-bottom: 0; }
.custom-token-label {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
}
.custom-token-label small {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  margin-top: 1px;
}
.custom-token-swatch {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.custom-token-swatch:hover { border-color: rgba(255,255,255,0.4); }
.custom-contrast-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.custom-contrast-badge--pass { background: rgba(34,197,94,0.18); color: #22c55e; }
.custom-contrast-badge--warn { background: rgba(251,191,36,0.18); color: #f59e0b; }
.custom-contrast-badge--fail { background: rgba(239,68,68,0.18);  color: #ef4444; }
.custom-contrast-note {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-top: 10px;
  line-height: 1.5;
}

.theme-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.theme-card-desc {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Appearance: Interface Toggles ── */
/* ══════════════════════════════════════════════════════════════
   UI-TOGGLE — interface preference toggle (Appearance tab)
   Fully aligned with .toggle-switch using ibx tokens.
   Same size (48×28px), same track colors, same thumb, same
   hover/focus treatment. Zero visual difference between the two.
   JS keeps using .ui-toggle--on class — CSS handles the rest.
   ══════════════════════════════════════════════════════════════ */

.ui-toggles-section {
  margin-top: 0; /* gap handled by .settings-content flexbox */
}

.ui-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  min-height: 44px;
  border-bottom: 1px solid var(--ibx-border-1);
}
.ui-toggle-row:last-child { border-bottom: none; }

.ui-toggle-label {
  font-size: 13px;
  color: var(--ibx-text-2);
  line-height: 1.3;
}
.ui-toggle-label small {
  display: block;
  font-size: 11px;
  color: var(--ibx-text-3);
  margin-top: 2px;
  font-weight: 400;
}

/* Button container — matches .toggle-switch dimensions exactly */
.ui-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* Track — same visual as .toggle-slider */
.ui-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ibx-toggle-track-off);
  border: 1px solid var(--ibx-border-2);
  box-sizing: border-box;
  transition:
    background var(--ibx-speed-fast) ease,
    border-color var(--ibx-speed-fast) ease,
    box-shadow var(--ibx-speed-fast) ease;
}

.ui-toggle:hover .ui-toggle-track { filter: brightness(1.10); }

.ui-toggle:focus-visible .ui-toggle-track {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
}

/* ON state — gold track */
.ui-toggle--on .ui-toggle-track {
  background: var(--ibx-toggle-track-on);
  border-color: transparent;
}

/* Thumb — same as .toggle-slider:before */
.ui-toggle-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ibx-toggle-thumb);
  box-shadow: 0 1px 4px rgba(0,0,0,0.40);
  transition: left var(--ibx-speed-fast) ease;
  z-index: 1; /* above track */
}

/* ON: thumb slides right */
.ui-toggle--on .ui-toggle-knob {
  left: calc(100% - 23px);
  background: #ffffff;
}

/* ── Appearance: Reset / Default buttons ── */
.appearance-reset-row {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.appearance-ghost-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--ibx-radius-sm);
  border: 1px solid var(--ibx-border-2);
  background: transparent;
  color: var(--ibx-text-3);
  font-size: 11px;
  cursor: pointer;
  transition: border-color var(--ibx-speed-fast), color var(--ibx-speed-fast);
}
.appearance-ghost-btn:hover {
  border-color: var(--ibx-gold-border);
  color: var(--ibx-text-1);
}
.appearance-restore-row {
  padding-top: var(--space-3);
  border-top: 1px solid var(--ibx-border-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0; /* gap handled by .settings-content */
}
.appearance-restore-label {
  font-size: 11px;
  color: var(--ibx-text-4);
}
.appearance-restore-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--ibx-radius-sm);
  border: 1px solid var(--ibx-danger-border);
  background: transparent;
  color: var(--ibx-danger);
  font-size: 11px;
  cursor: pointer;
  transition: border-color var(--ibx-speed-fast), color var(--ibx-speed-fast);
}
.appearance-restore-btn:hover {
  border-color: var(--ibx-danger-border-hover);
  background: var(--ibx-danger-bg);
  color: var(--ibx-danger);
}

/* ── Layout Tab Controls ── */
.settings-mode-group {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
}

/* Segmented button group: Icon Only / Full Navigation / Compact / Comfortable / Large */
.settings-mode-btn {
  flex: 1;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--ibx-radius-sm);
  border: 1px solid var(--ibx-control-border);
  background: var(--ibx-control-bg);
  color: var(--ibx-text-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition:
    background var(--ibx-speed-fast),
    border-color var(--ibx-speed-fast),
    color var(--ibx-speed-fast);
}
.settings-mode-btn:hover {
  background: var(--ibx-control-bg-hover);
  border-color: var(--ibx-control-border-hover);
  color: var(--ibx-text-1);
}
.settings-mode-btn.active {
  background: var(--ibx-gold-softer);
  border-color: var(--ibx-gold-border);
  color: var(--ibx-gold-strong);
}
.settings-mode-btn:focus-visible {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
}

/* Settings row with checkbox (Show nav rail / Show dock panel) */
.settings-check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--ibx-text-2);
  cursor: pointer;
  padding: var(--space-2) 0;
}
.settings-check-row input[type="checkbox"] {
  accent-color: var(--ibx-gold);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── Account Tab ── */
.settings-profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.settings-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ibx-gold-soft);
  color: var(--ibx-gold);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-profile-name  { font-size: 14px; font-weight: 600; color: var(--ibx-text-1); }
.settings-profile-email { font-size: 12px; color: var(--ibx-text-3); margin-top: 2px; }
.settings-profile-role  { font-size: 11px; color: var(--ibx-text-3); margin-top: 2px; }

/* ── Theme card refinements ── */
.theme-card {
  background: var(--ibx-surface-1);
  border-color: var(--ibx-border-1);
}
.theme-card:hover {
  border-color: var(--ibx-gold-border);
}
.theme-card--active {
  border-color: var(--ibx-gold);
  box-shadow: 0 0 0 1px var(--ibx-gold-softer), 0 2px 8px rgba(0,0,0,0.28);
}
.theme-card-active-badge { color: var(--ibx-gold); }

/* ── REMOVED: old dark-mode overrides (now handled by ibx tokens) ──
   html.dark-mode .settings-sidebar / .settings-content overrides
   are no longer needed — ibx tokens handle both themes automatically. ── */


/* ============================================================
   WORKSTATION PANEL / MODULE SYSTEM  (Thinkorswim-style)
   ── ws-panel: unified dark module shell for all content areas
   ── kpi-tile: dark KPI card with color identity via top border
   ── analytics-tbl: dark table, divider-only rows
   ── fuq-bucket: follow-up queue summary buckets
   ============================================================ */

/* ── Panel Shell ─────────────────────────────────────────────── */
.ws-panel {
  margin-bottom: 14px;
  background: var(--ibx-surface-1);
  border: 1px solid var(--ibx-border-1);
  border-radius: 6px;
  overflow: hidden;
}

/* ── Panel Header Band ───────────────────────────────────────── */
.ws-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: var(--ibx-surface-2);
  border-bottom: 1px solid var(--ibx-border-1);
  gap: 8px;
}
.ws-panel-hdr-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ibx-text-2);
}
.ws-panel-hdr-title--green   { color: var(--ibx-palette-green); }
.ws-panel-hdr-title--red     { color: var(--ibx-palette-red); }
.ws-panel-hdr-title--blue    { color: var(--ibx-palette-blue); }
.ws-panel-hdr-title--yellow  { color: var(--ibx-palette-yellow); }
.ws-panel-hdr-title--purple  { color: var(--ibx-palette-purple); }
.ws-panel-hdr-title--orange  { color: var(--ibx-palette-orange); }
.ws-panel-hdr-title--muted   { color: var(--ibx-text-3); }
.ws-panel-hdr-sub {
  font-size: 10px;
  color: var(--ibx-text-3);
  margin-left: 6px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Panel collapse toggle ───────────────────────────────────── */
.ws-panel-hdr[data-collapse] { cursor: pointer; }
.ws-panel-hdr[data-collapse]:hover { background: var(--ibx-hover-overlay); }
.ws-panel-collapse-chev {
  color: var(--ibx-text-3);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.ws-panel--collapsed .ws-panel-collapse-chev { transform: rotate(-90deg); }
.ws-panel--collapsed .ws-panel-body { display: none; }

/* ── Panel Body ──────────────────────────────────────────────── */
.ws-panel-body {
  padding: 0;
}
.ws-panel-body--padded {
  padding: 10px 14px;
}

/* ── KPI Tile Row ────────────────────────────────────────────── */
.kpi-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.kpi-tile {
  flex: 1 1 110px;
  padding: 11px 14px 10px;
  background: var(--ibx-surface-1);
  border: 1px solid var(--ibx-border-1);
  border-top: 2px solid var(--kpi-border-color, var(--ibx-border-1));
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.1s;
  min-width: 90px;
}
.kpi-tile:hover { background: var(--ibx-hover-overlay); }
.kpi-tile--green  { --kpi-border-color: var(--ibx-palette-green); }
.kpi-tile--red    { --kpi-border-color: var(--ibx-palette-red); }
.kpi-tile--blue   { --kpi-border-color: var(--ibx-palette-blue); }
.kpi-tile--yellow { --kpi-border-color: var(--ibx-palette-yellow); }
.kpi-tile--purple { --kpi-border-color: var(--ibx-palette-purple); }
.kpi-tile--gray   { --kpi-border-color: var(--ibx-text-3); cursor: default; }
.kpi-tile--gray:hover { background: var(--ibx-surface-1); }

.kpi-tile-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ibx-text-3);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-tile-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ibx-text-1);
  line-height: 1;
  margin-bottom: 3px;
}
.kpi-tile--green  .kpi-tile-value { color: var(--ibx-palette-green); }
.kpi-tile--red    .kpi-tile-value { color: var(--ibx-palette-red); }
.kpi-tile--blue   .kpi-tile-value { color: var(--ibx-palette-blue-bright); }
.kpi-tile--yellow .kpi-tile-value { color: var(--ibx-palette-yellow); }
.kpi-tile--purple .kpi-tile-value { color: var(--ibx-palette-purple); }
.kpi-tile-sub {
  font-size: 11px;
  color: var(--ibx-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Analytics Table ─────────────────────────────────────────── */
.analytics-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.analytics-tbl thead tr {
  background: var(--ibx-surface-2);
  border-bottom: 1px solid var(--ibx-border-1);
}
.analytics-tbl thead th {
  padding: 6px 12px;
  font-weight: 600;
  color: var(--ibx-text-3);
  text-align: left;
  white-space: nowrap;
}
.analytics-tbl thead th.tc { text-align: center; }
.analytics-tbl tbody tr {
  border-bottom: 1px solid var(--ibx-border-1);
  cursor: pointer;
  transition: background 0.08s;
}
.analytics-tbl tbody tr:last-child { border-bottom: none; }
.analytics-tbl tbody tr:hover { background: var(--ibx-hover-overlay); }
.analytics-tbl tbody tr.no-click { cursor: default; }
.analytics-tbl td {
  padding: 5px 12px;
  color: var(--ibx-text-2);
}
.analytics-tbl td.tc { text-align: center; }
.analytics-tbl td.td-name {
  color: var(--ibx-text-1);
  font-weight: 500;
}
.analytics-tbl td.td-won   { color: var(--ibx-palette-green);  font-weight: 600; }
.analytics-tbl td.td-red   { color: var(--ibx-palette-red); }
.analytics-tbl td.td-warn  { color: var(--ibx-palette-yellow); }
.analytics-tbl td.td-blue   { color: var(--ibx-palette-blue); }
.analytics-tbl td.td-orange { color: var(--ibx-palette-orange); }
.analytics-tbl td.td-purple { color: var(--ibx-palette-purple); }
.analytics-tbl td.td-muted  { color: var(--ibx-text-3); }
.analytics-tbl td.td-italic { font-style: italic; color: var(--ibx-text-3); }

/* ── Follow-up Queue Buckets ─────────────────────────────────── */
.fuq-buckets {
  display: flex;
  border-bottom: 1px solid var(--ibx-border-1);
}
.fuq-bucket {
  flex: 1;
  padding: 10px 14px;
  cursor: pointer;
  border-right: 1px solid var(--ibx-border-1);
  transition: background 0.1s;
}
.fuq-bucket:last-child { border-right: none; }
.fuq-bucket:hover { background: var(--ibx-hover-overlay); }
.fuq-bucket-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.fuq-bucket-label--red    { color: var(--ibx-palette-red); }
.fuq-bucket-label--yellow { color: var(--ibx-palette-yellow); }
.fuq-bucket-label--blue   { color: var(--ibx-palette-blue); }
.fuq-bucket-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--ibx-text-3);
}
.fuq-bucket-value--active   { color: var(--ibx-text-1); }
.fuq-bucket-value--red      { color: var(--ibx-palette-red); }
.fuq-bucket-value--yellow   { color: var(--ibx-palette-yellow); }
.fuq-bucket-value--blue     { color: var(--ibx-palette-blue); }

/* ── Side-by-side panel row ──────────────────────────────────── */
.ws-panel-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ws-panel-row > .ws-panel {
  flex: 1 1 300px;
  margin-bottom: 0;
}

/* ── Light-theme overrides ───────────────────────────────────── */
/* Color overrides (kpi-tile-value variants, analytics td, fuq-bucket-value,
   ws-panel-hdr-title tints) are now eliminated — they are all driven by
   --ibx-palette-* and --ibx-text-* tokens overridden in the
   html.theme-ibex-light { } block.  Only structural surface/border
   overrides that differ from the ibx-surface token values are kept here. */
html.theme-ibex-light .ws-panel {
  background: var(--ibx-surface-1);   /* #ffffff */
  border-color: var(--ibx-border-2);  /* rgba(0,0,0,0.14) — slightly stronger than default */
}
html.theme-ibex-light .ws-panel-hdr {
  background: rgba(0,0,0,0.03);       /* near-transparent tint, lighter than ibx-surface-2 */
  border-bottom-color: var(--ibx-border-1);
}
html.theme-ibex-light .kpi-tile {
  background: var(--ibx-surface-2);   /* #f3f4f6 */
  border-color: var(--ibx-border-1);
}
/* analytics-tbl structural */
html.theme-ibex-light .analytics-tbl thead tr { background: rgba(0,0,0,0.03); }
html.theme-ibex-light .analytics-tbl tbody tr { border-bottom-color: var(--ibx-border-1); }
/* fuq-bucket structural */
html.theme-ibex-light .fuq-buckets  { border-bottom-color: var(--ibx-border-1); }
html.theme-ibex-light .fuq-bucket   { border-right-color: var(--ibx-border-1); }

/* ── HC / CB overrides ───────────────────────────────────────── */
html.theme-ibex-hc .ws-panel  { background: #111; border-color: rgba(255,255,255,0.15); }
html.theme-ibex-hc .ws-panel-hdr { background: #000; border-bottom-color: rgba(255,255,255,0.15); }
html.theme-ibex-hc .kpi-tile  { background: #111; border-color: rgba(255,255,255,0.15); }
html.theme-ibex-cb .ws-panel  { background: #1a2035; border-color: rgba(255,255,255,0.10); }
html.theme-ibex-cb .ws-panel-hdr { background: rgba(0,0,0,0.3); }
html.theme-ibex-cb .kpi-tile  { background: #1a2035; border-color: rgba(255,255,255,0.10); }

/* ============================================================
   LOADING SCREEN REDESIGN  — premium workstation loader
   ============================================================ */

.loading-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #060606;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 36px;
}

.loading-logo-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  display: block;
  margin-bottom: 20px;
  opacity: 0.95;
}

.loading-logo-fallback {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 40px;
  font-weight: 900;
  color: #C9A227;
  letter-spacing: 2px;
}

.loading-brand-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #C9A227;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 5px;
}

.loading-brand-sub {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}

.loading-progress-track {
  width: 180px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 40px;
}

.loading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, #C9A227 50%, transparent 100%);
  animation: loading-sweep 1.6s ease-in-out infinite;
  width: 60%;
}

@keyframes loading-sweep {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(350%); }
}

.loading-support {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Remove old loading child styles that conflict */
.loading-logo { display: contents; }
.logo-icon    { display: none; }
.logo-text    { display: none; }
.loading-sub  { display: none; }
.loading-spinner { display: none; }

/* ============================================================
   DARK MODE — KANBAN BOARD OVERRIDES
   Converts the white/light-gray kanban surface to the unified
   dark workstation look (same surface family as ws-panel).
   ============================================================ */
html.dark-mode .kanban-column {
  background: var(--surface-2, #1e1e1e);
  border-color: var(--border, #2e2e2e);
}
html.dark-mode .kanban-column-header {
  background: rgba(0,0,0,0.30);
  border-bottom-color: var(--accent, #C9A227);
  color: var(--text-primary, #e8e8e8);
}
html.dark-mode .kanban-column-header select {
  background: transparent;
  color: var(--text-muted, #888);
}
html.dark-mode .stage-count {
  background: rgba(201,162,39,0.15);
  color: #C9A227;
}
html.dark-mode .kanban-card {
  background: var(--surface-3, #252525);
  border-color: var(--border, #2e2e2e);
  box-shadow: none;
}
html.dark-mode .kanban-card:hover {
  background: var(--item-hover, rgba(255,255,255,0.04));
  border-left-color: var(--accent, #C9A227);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
html.dark-mode .kanban-card-client a {
  color: #60a5fa;
}
html.dark-mode .kanban-card-header strong,
html.dark-mode .kanban-card-target,
html.dark-mode .kanban-card-agent {
  color: var(--text-muted, #888);
}
html.dark-mode .kanban-card-agent {
  border-top-color: var(--border, #2e2e2e);
}
/* Priority pills — dark tints instead of light pastels */
html.dark-mode .sub-priority-pill.priority-high   {
  background: rgba(239,68,68,0.18);
  color: #f87171;
}
html.dark-mode .sub-priority-pill.priority-medium {
  background: rgba(251,191,36,0.16);
  color: #fbbf24;
}
html.dark-mode .sub-priority-pill.priority-low    {
  background: rgba(115,115,115,0.18);
  color: #a3a3a3;
}
/* Ibex-light theme keeps original light fills */
html.theme-ibex-light .kanban-column        { background: #f9f9f9; }
html.theme-ibex-light .kanban-column-header { background: #fff; }
html.theme-ibex-light .kanban-card          { background: var(--white, #fff); }

/* ============================================================
   HIGH-CONTRAST (HC) — KANBAN / BOARD OVERRIDES
   Replaces the hardcoded #f9f9f9 / #fff base values with the
   pure-black HC surfaces. Contrast is increased via thicker
   borders, not white fills.
   ============================================================ */
html.theme-ibex-hc .kanban-column {
  background: #111111;
  border: 2px solid #555555;
}
html.theme-ibex-hc .kanban-column-header {
  background: #000000;
  border-bottom: 2px solid #FFD700;
  color: #FFFFFF;
}
html.theme-ibex-hc .kanban-card {
  background: #111111;
  border: 1px solid #555555;
  box-shadow: none;
}
html.theme-ibex-hc .kanban-card:hover {
  background: rgba(255,255,255,0.08);
  border-left-color: #FFD700;
  border-color: #777777;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  transform: translateY(-1px);
}
html.theme-ibex-hc .stage-count {
  background: rgba(255,215,0,0.18);
  color: #FFD700;
}
html.theme-ibex-hc .kanban-card-header strong,
html.theme-ibex-hc .kanban-card-target,
html.theme-ibex-hc .kanban-card-agent { color: #BBBBBB; }
html.theme-ibex-hc .kanban-card-client a { color: #FFD700; }
html.theme-ibex-hc .kanban-card-agent   { border-top-color: #555555; }
html.theme-ibex-hc .sub-priority-pill.priority-high   { background: rgba(239,68,68,0.25); color: #ff8080; }
html.theme-ibex-hc .sub-priority-pill.priority-medium { background: rgba(255,215,0,0.20); color: #FFD700; }

/* HC snapshot / dashboard cards */
html.theme-ibex-hc .snapshot-card {
  background: #111111;
  border: 1px solid #555555;
}
html.theme-ibex-hc .snapshot-card:hover { background: #1a1a1a; }

/* ============================================================
   COLOR-SAFE / COLOR-BLIND (CB) — KANBAN / BOARD OVERRIDES
   Blue-shifted dark surfaces. Accent is #4D9EFF.
   ============================================================ */
html.theme-ibex-cb .kanban-column {
  background: #1A2035;
  border: 1px solid #2A3248;
}
html.theme-ibex-cb .kanban-column-header {
  background: #0D1020;
  border-bottom: 2px solid #4D9EFF;
  color: #E8EAF0;
}
html.theme-ibex-cb .kanban-card {
  background: #161B27;
  border: 1px solid #2A3248;
  box-shadow: none;
}
html.theme-ibex-cb .kanban-card:hover {
  background: rgba(77,158,255,0.06);
  border-left-color: #4D9EFF;
  box-shadow: 0 4px 14px rgba(0,0,0,0.40);
  transform: translateY(-1px);
}
html.theme-ibex-cb .stage-count {
  background: rgba(77,158,255,0.15);
  color: #4D9EFF;
}
html.theme-ibex-cb .kanban-card-header strong,
html.theme-ibex-cb .kanban-card-target,
html.theme-ibex-cb .kanban-card-agent { color: #8892A4; }
html.theme-ibex-cb .kanban-card-client a { color: #4D9EFF; }
html.theme-ibex-cb .kanban-card-agent   { border-top-color: #2A3248; }
html.theme-ibex-cb .sub-priority-pill.priority-high   { background: rgba(239,68,68,0.18); color: #ff7070; }
html.theme-ibex-cb .sub-priority-pill.priority-medium { background: rgba(255,152,0,0.18);  color: #ffab40; }

/* CB snapshot / dashboard cards */
html.theme-ibex-cb .snapshot-card {
  background: #161B27;
  border: 1px solid #2A3248;
}
html.theme-ibex-cb .snapshot-card:hover { background: #1A2035; }

/* ============================================================
   KANBAN — PRIORITY HIERARCHY  (all themes)
   Left-border weight + color communicates urgency.
   Width alone differentiates without relying on hue: 4px ≠ 3px ≠ 2px.
   Uses --ibx- semantic tokens so dark / HC / CB all benefit.
   ============================================================ */

/* Card left-border — urgency signal */
.kanban-card-priority-high   { border-left-width: 4px; border-left-color: var(--ibx-danger,  #d94b45); }
.kanban-card-priority-medium { border-left-width: 3px; border-left-color: var(--ibx-warning, #d4881e); }
.kanban-card-priority-low    { border-left-width: 2px; border-left-color: var(--ibx-border-1, rgba(255,255,255,0.08)); }

/* Next Action band — left-bar is a structural non-color cue ("action needed") */
.sub-card-action { border-left: 3px solid currentColor; }

/* ── Column stage top accent (requires data-stage on .kanban-column in JS) ── */
/* Uses --ibx-stage-* tokens defined in :root; all dark themes inherit them.  */
.kanban-column[data-stage="draft"]       .kanban-column-header { border-bottom-color: var(--ibx-stage-draft,     #9f9788); }
.kanban-column[data-stage="in_progress"] .kanban-column-header { border-bottom-color: var(--ibx-stage-progress,  #5aabff); }
.kanban-column[data-stage="quoted"]      .kanban-column-header { border-bottom-color: var(--ibx-stage-quoted,    #d4a017); }
.kanban-column[data-stage="won"]         .kanban-column-header { border-bottom-color: var(--ibx-success,         #2fb36d); }
.kanban-column[data-stage="lost"]        .kanban-column-header { border-bottom-color: var(--ibx-danger,          #d94b45); }
.kanban-column[data-stage="withdrawn"]   .kanban-column-header { border-bottom-color: var(--ibx-text-4,          #746d61); }

/* ============================================================
   HC — PRIORITY & HIERARCHY ENHANCEMENTS
   Stronger borders, wider weight gaps, glow on HOT cards.
   Action row: larger text + wider left bar for scanability.
   Density: tighter vertical spacing (more cards on screen).
   ============================================================ */

/* HC card left-border — bolder weight, glow on high */
html.theme-ibex-hc .kanban-card-priority-high {
  border-left-width: 5px;
  border-left-color: #ff6b6b;
  box-shadow: -3px 0 10px rgba(255,107,107,0.22);
}
html.theme-ibex-hc .kanban-card-priority-medium { border-left-width: 4px; border-left-color: #FFD700; }
html.theme-ibex-hc .kanban-card-priority-low    { border-left-width: 2px; border-left-color: #444444; }

/* HC priority pill: add border + slightly larger text for non-color cue */
html.theme-ibex-hc .sub-priority-pill.priority-high   { font-size: 10px; border: 1px solid rgba(255,107,107,0.50); }
html.theme-ibex-hc .sub-priority-pill.priority-medium { border: 1px solid rgba(255,215,0,0.40); }
html.theme-ibex-hc .sub-priority-pill.priority-low    { border: 1px solid rgba(255,255,255,0.15); }

/* HC action band: stronger left bar, larger text */
html.theme-ibex-hc .sub-card-action {
  border-left-width: 4px;
  font-size: 13px;
  letter-spacing: 0.01em;
  font-weight: 700;
}

/* HC density: tighter packing — more cards visible at once */
html.theme-ibex-hc .kanban-card            { padding: 8px 10px; }
html.theme-ibex-hc .kanban-column-body     { gap: 7px; padding: 8px; }
html.theme-ibex-hc .kanban-column-header   { padding: 9px 12px; }

/* ============================================================
   CB — PRIORITY & HIERARCHY ENHANCEMENTS
   Structure-first: label text (HIGH/MED/LOW) + border + width.
   Hue is secondary — CB users may not distinguish red from orange.
   ============================================================ */

/* CB card left-border */
html.theme-ibex-cb .kanban-card-priority-high   { border-left-width: 5px; border-left-color: #ff7070; }
html.theme-ibex-cb .kanban-card-priority-medium { border-left-width: 3px; border-left-color: #ffab40; }
html.theme-ibex-cb .kanban-card-priority-low    { border-left-width: 2px; border-left-color: #2A3248; }

/* CB priority pill: heavier weight + border (not just hue) */
html.theme-ibex-cb .sub-priority-pill             { font-weight: 800; letter-spacing: 0.08em; }
html.theme-ibex-cb .sub-priority-pill.priority-high   { font-size: 10px; border: 1px solid rgba(255,112,112,0.45); }
html.theme-ibex-cb .sub-priority-pill.priority-medium { border: 1px solid rgba(255,171,64,0.40); }
html.theme-ibex-cb .sub-priority-pill.priority-low    { border: 1px solid rgba(77,158,255,0.25); color: #8892A4; }

/* ============================================================
   KANBAN — SCORE BADGE  (urgency signal: hot / active / warm)
   Replaces inline styles so HC/CB themes can override properly.
   Class: sub-score-badge  +  modifier: sub-score-badge--{level}
   ============================================================ */

.sub-score-badge {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.sub-score-badge--hot    { background: rgba(239,68,68,0.18);  color: #f87171; }
.sub-score-badge--active { background: var(--ibx-warning-bg, rgba(212,136,30,0.14)); color: var(--ibx-warning, #d4881e); }
.sub-score-badge--warm   { background: rgba(96,165,250,0.15); color: #60a5fa; }

/* HC: bolder contrast, structured border */
html.theme-ibex-hc .sub-score-badge--hot {
  background: rgba(255,80,80,0.22);
  color: #ff6b6b;
  border: 1px solid rgba(255,80,80,0.40);
  font-weight: 800;
}
html.theme-ibex-hc .sub-score-badge--active {
  background: rgba(255,215,0,0.18);
  color: #FFD700;
  border: 1px solid rgba(255,215,0,0.35);
  font-weight: 800;
}
html.theme-ibex-hc .sub-score-badge--warm {
  background: rgba(120,180,255,0.18);
  color: #78b4ff;
  border: 1px solid rgba(120,180,255,0.30);
}

/* CB: shape-reinforced, no hue reliance alone */
html.theme-ibex-cb .sub-score-badge--hot {
  background: rgba(239,68,68,0.20);
  color: #ff7070;
  border: 1px solid rgba(239,68,68,0.38);
  font-weight: 800;
  letter-spacing: 0.06em;
}
html.theme-ibex-cb .sub-score-badge--active {
  background: rgba(255,152,0,0.18);
  color: #ffab40;
  border: 1px solid rgba(255,152,0,0.35);
  font-weight: 800;
}
html.theme-ibex-cb .sub-score-badge--warm {
  background: rgba(77,158,255,0.16);
  color: #4D9EFF;
  border: 1px solid rgba(77,158,255,0.28);
}

/* ============================================================
   KANBAN — CARD INLINE SELECTS  (stage / agent dropdowns)
   Replaces inline styles so theme tokens can control state color.
   ============================================================ */

.sub-card-sel {
  font-size: 11px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  color: var(--ibx-text-3, #857e72);
}
.sub-card-sel--agent   { max-width: 130px; }
.sub-card-sel--stage   { max-width: 90px; }

/* Agent: unassigned = warning signal */
.sub-card-sel--unassigned { color: var(--ibx-warning, #d4881e); font-weight: 600; }

/* Stage state colors */
.sub-card-sel--stage-won        { color: var(--ibx-success,  #2fb36d); font-weight: 600; }
.sub-card-sel--stage-lost       { color: var(--ibx-danger,   #d94b45); }
.sub-card-sel--stage-withdrawn  { color: var(--ibx-text-4,   rgba(255,255,255,0.28)); }
.sub-card-sel--stage-draft,
.sub-card-sel--stage-in_progress,
.sub-card-sel--stage-quoted     { color: var(--ibx-text-3,   #857e72); }

/* HC: stronger state contrast */
html.theme-ibex-hc .sub-card-sel                   { color: #AAAAAA; }
html.theme-ibex-hc .sub-card-sel--unassigned        { color: #FFD700; font-weight: 700; }
html.theme-ibex-hc .sub-card-sel--stage-won         { color: #44dd88; font-weight: 700; }
html.theme-ibex-hc .sub-card-sel--stage-lost        { color: #ff6b6b; }
html.theme-ibex-hc .sub-card-sel--stage-withdrawn   { color: #555555; }

/* CB: accessible state colors */
html.theme-ibex-cb .sub-card-sel                   { color: #8892A4; }
html.theme-ibex-cb .sub-card-sel--unassigned        { color: #ffab40; font-weight: 700; }
html.theme-ibex-cb .sub-card-sel--stage-won         { color: #4DCC88; font-weight: 700; }
html.theme-ibex-cb .sub-card-sel--stage-lost        { color: #ff7070; }
html.theme-ibex-cb .sub-card-sel--stage-withdrawn   { color: #3A4258; }

/* ============================================================
   UNIFIED COMMAND BAR — replaces separate .status-strip +
   .top-header action area with one 36px horizontal strip.
   ============================================================ */

.cmd-bar {
  display: flex;
  align-items: center;
  height: 36px;
  min-height: 36px;
  flex-shrink: 0;
  background: #111111;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 10px 0 14px;
  gap: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  /* Fixed at top — locked control band (cmd-bar + action-bar never scroll) */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  overflow: visible;   /* allow dropdowns (.new-menu, notif-dropdown, etc.) to escape */
  white-space: nowrap;
}

/* Left cluster: conn status + agency label */
.cmd-bar-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

/* Center: global search pill */
.cmd-bar-search-wrap {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 1 300px;
  min-width: 160px;
  margin: 0 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  height: 24px;
  padding: 0 6px;
  transition: border-color 0.12s, background 0.12s;
}
.cmd-bar-search-wrap:focus-within {
  border-color: rgba(201,162,39,0.45);
  background: rgba(255,255,255,0.08);
}
.cmd-bar-search-icon {
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
  margin-right: 4px;
  pointer-events: none;
}
.cmd-bar-search-input {
  background: none;
  border: none;
  outline: none;
  color: rgba(255,255,255,0.88);
  font-size: 11.5px;
  width: 100%;
  min-width: 0;
}
.cmd-bar-search-input::placeholder { color: rgba(255,255,255,0.28); }
.cmd-bar-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.38);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.cmd-bar-search-clear:hover { color: rgba(255,255,255,0.75); }
.cmd-bar-search-clear.hidden { display: none; }

/* Right cluster: buttons + nav links + user */
.cmd-bar-right {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Thin vertical separator inside cmd-bar */
.cmd-bar-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
  margin: 0 5px;
  flex-shrink: 0;
}

/* Theme overrides for cmd-bar */
html.theme-ibex-hc    .cmd-bar { background: #000000; border-bottom: 2px solid #444444; }
html.theme-ibex-cb    .cmd-bar { background: #0D1020; border-bottom-color: #2A3248; }
html.theme-ibex-light .cmd-bar { background: #ffffff; border-bottom-color: #E5E7EB; }
html.theme-ibex-light .cmd-bar,
html.theme-ibex-light .cmd-bar .conn-label,
html.theme-ibex-light .cmd-bar .conn-sub,
html.theme-ibex-light .cmd-bar .conn-clock,
html.theme-ibex-light .cmd-bar .status-agency { color: #374151; }
html.theme-ibex-light .cmd-bar .status-link   { color: #4B5563; border-left-color: #E5E7EB; }
html.theme-ibex-light .cmd-bar .status-link:hover { color: #111827; background: rgba(0,0,0,0.04); }
html.theme-ibex-light .cmd-bar .cmd-bar-search-wrap {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
}
html.theme-ibex-light .cmd-bar .cmd-bar-search-input { color: #111827; }
html.theme-ibex-light .cmd-bar .cmd-bar-search-input::placeholder { color: rgba(0,0,0,0.30); }
html.theme-ibex-light .cmd-bar .status-username { color: #4B5563; border-left-color: #E5E7EB; }
html.theme-ibex-light .cmd-bar .status-settings-btn { color: #6B7280; }
html.theme-ibex-light .cmd-bar .cmd-bar-sep { background: rgba(0,0,0,0.12); }
html.theme-ibex-light .cmd-bar-bell { color: #1a1a1a; opacity: 0.85; }
html.theme-ibex-light .cmd-bar-bell:hover { background: rgba(0,0,0,0.06); color: #111827; opacity: 1; }

/* ============================================================
   ACTION BAR — second row below .cmd-bar.
   Contains: +New · Endorsement · Quick Intake · Add Panel · Bell
   Right-aligned. Tight vertical padding. Overflow visible for
   dropdown menus (.new-menu, .notif-dropdown).
   ============================================================ */

.action-bar {
  display: flex;
  justify-content: space-between;  /* left cluster ←→ right cluster */
  align-items: center;
  gap: 0;
  padding: 4px 14px;
  background: #141414;
  border-bottom: 1px solid #222222;
  flex-shrink: 0;
  /* Fixed directly beneath .cmd-bar */
  position: fixed;
  top: 36px; left: 0; right: 0;
  z-index: 195;
  overflow: visible;   /* dropdowns must escape */
  white-space: nowrap;
}

/* Left cluster: creation actions (+New, Endorsement, Quick Intake) */
.action-bar-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Right cluster: bell + Add Module (far right anchor) */
.action-bar-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Add Module — labeled dark-surface button, far-right anchor */
.action-add-module-btn {
  display: none;   /* shown only on dashboard via JS */
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 27px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted, #888);
  font-size: 11px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.action-add-module-btn:hover {
  background: rgba(201,162,39,0.10);
  border-color: rgba(201,162,39,0.28);
  color: var(--accent, #C9A227);
}
/* When shown (JS sets display:flex directly) */
.action-add-module-btn.visible { display: flex; }

/* Theme overrides for cmd-bar (fixed) */
html.theme-ibex-hc    .cmd-bar { background: #000; border-bottom: 2px solid #444; }
html.theme-ibex-cb    .cmd-bar { background: #0a0d1c; border-bottom-color: #2A3248; }
html.theme-ibex-light .cmd-bar { background: #f0f0f0; border-bottom-color: #E5E7EB; }

/* Theme overrides for action-bar (fixed) */
html.theme-ibex-hc    .action-bar { background: #000; border-bottom: 2px solid #444; }
html.theme-ibex-cb    .action-bar { background: #0a0d1c; border-bottom-color: #2A3248; }
html.theme-ibex-light .action-bar { background: #f5f5f5; border-bottom-color: #E5E7EB; }
html.theme-ibex-light .action-add-module-btn {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #555;
}
html.theme-ibex-light .action-add-module-btn:hover {
  background: rgba(201,162,39,0.10); border-color: rgba(201,162,39,0.35); color: #9a7818;
}

/* ============================================================
   ANALYTICS / REPORTS — DARK MODE THEME CORRECTIONS
   Replaces hardcoded light-mode fills on badges, pills, tier
   chips, esign states, and MVR tiers so every analytics
   component matches the neutral dark workspace palette.
   Rule: color is accent-only. No blue tints on text or fills.
   ============================================================ */

/* ── Missing base definition — badge-secondary (used in Activity Log) ── */
.badge-secondary {
  background: rgba(255,255,255,0.07);
  color: var(--text-muted);
}

/* ── Reports container — explicit dark typography ── */
html.dark-mode .reports-container { color: var(--text-primary, #e8e8e8); }
html.dark-mode .report-tab-btn    { color: var(--text); background: var(--surface, #1c1c1c); }
html.dark-mode .report-tab-btn:hover { border-color: var(--accent); color: var(--text); }
html.dark-mode .report-tab-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
html.dark-mode .report-section    { background: var(--surface, #1c1c1c); border-color: var(--border, #2e2e2e); }
html.dark-mode .report-section h3 { color: var(--text-primary, #e8e8e8); }
html.dark-mode .report-section p  { color: var(--text-muted, #888); }
html.dark-mode .chart-label       { color: var(--text-muted, #888); }
html.dark-mode .chart-value       { color: var(--text, #e0e0e0); }
html.dark-mode .chart-bar-track   { background: rgba(255,255,255,0.05); }
html.dark-mode .metric-card       { background: var(--surface, #1c1c1c); border-color: var(--border, #2e2e2e); }
html.dark-mode .metric-label      { color: var(--text-muted, #888); }
html.dark-mode .metric-value      { color: var(--accent, #C9A227); }
html.dark-mode .stat-card         { background: var(--surface, #1c1c1c); }
html.dark-mode .stat-label        { color: var(--text-muted, #888); }
html.dark-mode .stat-value        { color: var(--text, #e0e0e0); }

/* ── badge-info — was hard blue #2563EB ── */
html.dark-mode .badge-info        { background: rgba(255,255,255,0.08); color: #a3a3a3; }

/* ── badge-primary — dark gold tone ── */
html.dark-mode .badge-primary     { background: rgba(201,162,39,0.14);  color: #C9A227; }

/* ── badge-secondary ── */
html.dark-mode .badge-secondary   { background: rgba(255,255,255,0.07); color: #a3a3a3; }

/* ── Table headers inside reports ── */
html.dark-mode .reports-container th {
  background: var(--surface-2, #252525);
  color: var(--text-muted, #888);
  border-color: var(--border, #2e2e2e);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html.dark-mode .reports-container td { color: var(--text, #e0e0e0); border-color: var(--border, #2e2e2e); }
html.dark-mode .reports-container tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* ── Empty states inside report tables ── */
html.dark-mode .reports-container .empty-state,
html.dark-mode .reports-container [style*="text-align: center"] { color: var(--text-muted, #888); }

/* note mention badge — @mention chips in notes */
html.dark-mode .note-mention-badge        { background: rgba(201,162,39,0.12);  color: #C9A227; }

/* COI status — processing state */
html.dark-mode .coi-status-mini.processing { background: rgba(255,255,255,0.07); color: #a3a3a3; }

/* risk flag INFO card — muted border, neutral tint */
html.dark-mode .risk-flag-card.INFO {
  border-left-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.02);
}

/* ══════════════════════════════════════════════════════════════
   MODE BAR — Row 2 of the fixed operating shell
   ThinkOrSwim-style mode tabs: CRM · Submissions · Operations · Analytics
   ══════════════════════════════════════════════════════════════ */
.mode-bar {
  display: flex;
  align-items: stretch;
  height: 32px;
  flex-shrink: 0;
  background: #111111;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0;
  position: fixed;
  top: 36px;
  left: calc(var(--nav-rail-width, 52px) + var(--dock-panel-width, 280px));  /* tracks live rail + dock widths */
  right: 0;
  z-index: 195;
  overflow: visible;
  white-space: nowrap;
}

/* Mode tab cluster — left */
.mode-tab-group {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}

/* Individual mode tab */
.mode-tab {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.42);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.13s, border-color 0.13s, background 0.13s;
  white-space: nowrap;
  height: 100%;
  position: relative;
}
.mode-tab:hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.04);
}
.mode-tab.mode-tab--active {
  color: #C9A227;
  border-bottom-color: #C9A227;
  font-weight: 600;
}

/* Action cluster — right side of mode bar */
.mode-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.06);
}

/* Compact +New button */
.mode-new-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  height: 22px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  color: rgba(255,255,255,0.70);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
  white-space: nowrap;
  position: relative;
}
.mode-new-btn:hover {
  background: rgba(201,162,39,0.14);
  border-color: rgba(201,162,39,0.35);
  color: #C9A227;
}

/* Compact Endorsement button */
.mode-endorse-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  height: 22px;
  background: rgba(201,162,39,0.08);
  border: 1px solid rgba(201,162,39,0.18);
  border-radius: 4px;
  color: rgba(201,162,39,0.75);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
  white-space: nowrap;
}
.mode-endorse-btn:hover {
  background: rgba(201,162,39,0.18);
  border-color: rgba(201,162,39,0.45);
  color: #C9A227;
}

/* Quick Intake icon in mode bar */
.mode-intake-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,0.40);
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.mode-intake-btn:hover {
  background: rgba(201,162,39,0.10);
  color: #C9A227;
}

/* Theme overrides — mode-bar */
html.theme-ibex-hc    .mode-bar { background: #000; border-bottom: 1px solid #333; }
html.theme-ibex-cb    .mode-bar { background: #0a0d1c; border-bottom-color: #2A3248; }
html.theme-ibex-light .mode-bar { background: #f0f0f0; border-bottom-color: #ddd; }
html.theme-ibex-light .mode-tab { color: rgba(0,0,0,0.42); }
html.theme-ibex-light .mode-tab:hover { color: rgba(0,0,0,0.75); background: rgba(0,0,0,0.04); }
html.theme-ibex-light .mode-tab.mode-tab--active { color: #9a7818; border-bottom-color: #9a7818; }
html.theme-ibex-light .mode-new-btn { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: #333; }
html.theme-ibex-light .mode-endorse-btn { background: rgba(201,162,39,0.10); border-color: rgba(201,162,39,0.30); color: #7a5f10; }
html.theme-ibex-light .mode-actions { border-left-color: rgba(0,0,0,0.08); }

/* ══════════════════════════════════════════════════════════════
   SUBNAV BAR — Row 3 of the fixed operating shell
   Contextual navigation for the active mode
   ══════════════════════════════════════════════════════════════ */
.subnav-bar {
  display: flex;
  align-items: stretch;
  height: 28px;
  flex-shrink: 0;
  background: #0d0d0d;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0 10px;
  position: fixed;
  top: 68px;
  left: calc(var(--nav-rail-width, 52px) + var(--dock-panel-width, 280px));  /* tracks live rail + dock widths */
  right: 0;
  z-index: 190;
  overflow: visible;
  white-space: nowrap;
}

.subnav-items {
  display: flex;
  align-items: stretch;
  flex: 1;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}

.subnav-item {
  display: flex;
  align-items: center;
  padding: 0 11px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.13s, border-color 0.13s;
  white-space: nowrap;
  height: 100%;
}
.subnav-item:hover { color: rgba(255,255,255,0.65); }
.subnav-item.subnav-item--active {
  color: rgba(255,255,255,0.85);
  border-bottom-color: rgba(201,162,39,0.55);
}

/* Subnav right cluster — Add Module (dashboard only) */
.subnav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
}

/* Theme overrides — subnav-bar */
html.theme-ibex-hc    .subnav-bar { background: #000; border-bottom: 1px solid #222; }
html.theme-ibex-cb    .subnav-bar { background: #070a18; border-bottom-color: #1E2840; }
html.theme-ibex-light .subnav-bar { background: #ebebeb; border-bottom-color: #d5d5d5; }
html.theme-ibex-light .subnav-item { color: rgba(0,0,0,0.40); }
html.theme-ibex-light .subnav-item:hover { color: rgba(0,0,0,0.70); }
html.theme-ibex-light .subnav-item.subnav-item--active { color: rgba(0,0,0,0.85); border-bottom-color: rgba(155,125,24,0.65); }

/* Bell button in cmd-bar */
.cmd-bar-bell {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.cmd-bar-bell:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); }

/* wp-badge type variants for activity panel — canonical ibx tokens */
.wp-badge--type-note       { background: var(--ibx-tint-2);            color: var(--ibx-gold); }
.wp-badge--type-task       { background: var(--ibx-success-bg);        color: var(--ibx-success); }
.wp-badge--type-document   { background: var(--ibx-stage-draft-bg);    color: var(--ibx-text-3); }
.wp-badge--type-submission { background: var(--ibx-tint-2);            color: var(--ibx-gold); }
.wp-badge--type-policy     { background: var(--ibx-success-bg);        color: var(--ibx-success); }
.wp-badge--type-client     { background: var(--ibx-stage-new-lead-bg); color: var(--ibx-text-3); }

/* wp-badge neutral variant */
.wp-badge--neutral { background: var(--ibx-stage-draft-bg); color: var(--ibx-text-3); }

/* ══════════════════════════════════════════════════════════════
   QUICK LAUNCHER MODULE (.ql-*)
   ══════════════════════════════════════════════════════════════ */
.ql-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
.ql-group {
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.ql-group-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.ql-group-hdr:hover { background: rgba(201,162,39,0.06); }
.ql-group-icon { color: var(--accent, #C9A227); flex-shrink: 0; }
.ql-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.ql-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px 8px;
}
.ql-item {
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: left;
}
.ql-item:hover { background: rgba(201,162,39,0.08); color: var(--accent, #C9A227); }

/* ══════════════════════════════════════════════════════════════
   NOTE / TASK COMPOSER MODULE (.nc-*)
   ══════════════════════════════════════════════════════════════ */
.nc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 12px;
}
.nc-type-row {
  display: flex;
  gap: 4px;
}
.nc-type-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nc-type-btn--active {
  background: rgba(201,162,39,0.12);
  border-color: rgba(201,162,39,0.30);
  color: var(--accent, #C9A227);
}
.nc-client-select {
  width: 100%;
  background: var(--surface-2, #252525);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
}
.nc-client-select:focus { border-color: rgba(201,162,39,0.40); outline: none; }
.nc-textarea {
  width: 100%;
  background: var(--surface-2, #252525);
  border: 1px solid var(--ibx-border-1);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 7px 10px;
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
  font-family: inherit;
}
.nc-textarea:focus { border-color: rgba(201,162,39,0.40); outline: none; }
.nc-task-fields { display: flex; gap: 6px; }
.nc-date-input {
  flex: 1;
  background: var(--surface-2, #252525);
  border: 1px solid var(--ibx-border-1);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
}
.nc-date-input:focus { border-color: rgba(201,162,39,0.40); outline: none; }
.nc-footer { display: flex; justify-content: flex-end; }
.nc-submit-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.28);
  border-radius: 4px;
  color: var(--ibx-gold);
  cursor: pointer;
  transition: background 0.12s;
}
.nc-submit-btn:hover { background: rgba(201,162,39,0.22); }

/* ══════════════════════════════════════════════════════════════
   KPI BAND MODULE (.kpi-*)
   ══════════════════════════════════════════════════════════════ */
.kpi-module-row {
  display: flex;
  gap: 1px;
  background: var(--ibx-border-1);
  padding: 0;
}
/* Note: .kpi-tile base shape/layout rules are here; color tokens inherit from
   the canonical .kpi-tile rules defined in the ws-panel section above. */
.kpi-tile {
  flex: 1;
  background: var(--ibx-surface-1);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kpi-tile-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ibx-text-1);
  line-height: 1.1;
}
.kpi-tile-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ibx-text-3);
}
.kpi-tile-hint {
  font-size: 10px;
  color: var(--ibx-text-4);
  margin-top: 1px;
}
.kpi-tile.kpi-gold .kpi-tile-value { color: var(--ibx-gold); }
.kpi-tile.kpi-warn .kpi-tile-value { color: var(--ibx-warning); }
.kpi-tile.kpi-red  .kpi-tile-value { color: var(--ibx-danger); }

/* ── Navigable KPI tile — adds click affordance + focus ring ── */
.kpi-tile--nav {
  cursor: pointer;
  transition: background 0.1s, box-shadow 0.12s;
  user-select: none;
  -webkit-user-select: none;
}
.kpi-tile--nav:hover {
  background: rgba(201, 162, 39, 0.08);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.28);
}
.kpi-tile--nav:focus-visible {
  outline: 2px solid var(--ibx-gold, #d4a017);
  outline-offset: -2px;
}

/* ══════════════════════════════════════════════════════════════
   SUBMISSION RISK FLAGS  (.sw2-rf-*)
   Rendered by SubmissionRiskFlags.render() via stage-overview.js
   ══════════════════════════════════════════════════════════════ */

/* Empty state */
.sw2-rf-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.sw2-rf-empty-check {
  font-size: 14px;
  color: var(--sw-success, #4ade80);
}
.sw2-rf-empty-text {
  font-size: 12px;
  color: var(--sw-muted, #94a3b8);
}

/* Summary count chips (critical/warning/info) */
.sw2-rf-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.sw2-rf-count {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.sw2-rf-count--critical {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}
.sw2-rf-count--warning {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.sw2-rf-count--info {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
}

/* Flag list */
.sw2-rf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual flag item */
.sw2-rf-item {
  padding: 9px 11px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.1s;
}
.sw2-rf-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Flag header row: dot + badge + title + fix button */
.sw2-rf-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

/* Severity dot */
.sw2-rf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sw2-rf-dot--critical { background: #f87171; box-shadow: 0 0 4px rgba(248,113,113,0.5); }
.sw2-rf-dot--warning  { background: #fbbf24; box-shadow: 0 0 4px rgba(251,191,36,0.4);  }
.sw2-rf-dot--info     { background: #94a3b8; }

/* Severity badge */
.sw2-rf-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.sw2-rf-badge--critical {
  background: rgba(248, 113, 113, 0.20);
  color: #f87171;
}
.sw2-rf-badge--warning {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}
.sw2-rf-badge--info {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
}

/* Classification chip (blocking / advisory) */
.sw2-rf-cls {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.sw2-rf-cls--blocking {
  background: rgba(248, 113, 113, 0.10);
  color: rgba(248, 113, 113, 0.75);
  border: 1px solid rgba(248, 113, 113, 0.18);
}
.sw2-rf-cls--advisory {
  background: rgba(148, 163, 184, 0.08);
  color: rgba(148, 163, 184, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.14);
}

/* Flag title */
.sw2-rf-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--sw-text, #e2e8f0);
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

/* Fix button */
.sw2-rf-fix-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--sw-muted, #94a3b8);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  white-space: nowrap;
}
.sw2-rf-fix-btn:hover {
  color: var(--sw-gold, #d4a017);
  border-color: rgba(212, 160, 23, 0.35);
  background: rgba(212, 160, 23, 0.07);
}

/* Detail text */
.sw2-rf-detail {
  font-size: 11px;
  color: var(--sw-muted, #94a3b8);
  line-height: 1.45;
  margin-bottom: 4px;
}

/* Recommended action */
.sw2-rf-action {
  font-size: 11px;
  color: var(--sw-text, #e2e8f0);
  opacity: 0.75;
  line-height: 1.4;
  display: flex;
  gap: 5px;
  align-items: flex-start;
}
.sw2-rf-action-icon {
  flex-shrink: 0;
  color: var(--sw-gold, #d4a017);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   MODULE STACK DOCK SLOT (.ms-*)
   ══════════════════════════════════════════════════════════════ */
.ms-body {
  display: flex;
  flex-direction: column;
}
.ms-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.ms-row:hover { background: rgba(255,255,255,0.03); }
.ms-row-num {
  font-size: 10px;
  color: var(--ibx-text-3);
  width: 14px;
  text-align: right;
  flex-shrink: 0;
}
.ms-row-icon { color: var(--ibx-text-3); flex-shrink: 0; }
.ms-row-label {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-remove-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  transition: color 0.1s, background 0.1s;
  flex-shrink: 0;
}
.ms-remove-btn:hover { color: #e05252; background: rgba(224,82,82,0.1); }
.ms-footer {
  padding: 6px 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ms-add-btn {
  font-size: 11px;
  font-weight: 600;
  background: rgba(201,162,39,0.08);
  border: 1px solid rgba(201,162,39,0.18);
  border-radius: 4px;
  color: rgba(201,162,39,0.8);
  padding: 4px 10px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: background 0.12s;
}
.ms-add-btn:hover { background: rgba(201,162,39,0.16); }
.ms-empty {
  padding: 14px 10px;
  font-size: 12px;
  color: var(--ibx-text-3);
  text-align: center;
  line-height: 1.6;
}

/* action-bar retired — replaced by .mode-bar + .subnav-bar */
#action-bar { display: none !important; }


/* ══════════════════════════════════════════════════════════════
   SUBMISSION WORKSPACE  (Phase 1)
   Full-page workspace for working a single submission.
   Layout: fixed left context panel + scrollable main panels.
   ══════════════════════════════════════════════════════════════ */

/* ── Shell ──────────────────────────────────────────────────── */
.sw-shell {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

/* ── Left context panel ─────────────────────────────────────── */
.sw-left {
  flex-shrink: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border-right: 1px solid var(--ibx-border-1);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 24px;
}

.sw-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px 8px;
  background: none;
  border: none;
  color: var(--ibx-text-3);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
  border-bottom: 1px solid var(--ibx-border-1);
  margin-bottom: 4px;
}
.sw-back-btn:hover { color: var(--text); }

.sw-left-section {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--ibx-border-1);
}
.sw-left-section:last-child { border-bottom: none; }

/* Identity */
.sw-insured-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px;
  word-break: break-word;
}
.sw-sub-number {
  font-size: 11px;
  color: var(--ibx-text-3);
  margin-bottom: 6px;
  font-family: monospace;
}
.sw-lob-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.sw-lob-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--ibx-tint-2);
  color: var(--ibx-gold);
  border: 1px solid var(--ibx-gold-border);
  white-space: nowrap;
}
.sw-priority-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.sw-priority-badge--high   { background: var(--ibx-danger-bg);      color: var(--ibx-palette-red); }
.sw-priority-badge--medium { background: var(--ibx-warning-bg);     color: var(--ibx-palette-yellow); }
.sw-priority-badge--low    { background: var(--ibx-stage-draft-bg); color: var(--ibx-text-3); }

/* Status */
.sw-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sw-stage-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.sw-days-in {
  font-size: 10px;
  color: var(--ibx-text-3);
  margin-left: auto;
  white-space: nowrap;
}
.sw-advance-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  background: var(--ibx-tint-1);
  border: 1px solid var(--ibx-gold-border);
  border-radius: var(--radius, 6px);
  color: var(--ibx-gold);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sw-advance-btn:hover {
  background: var(--ibx-tint-2);
  border-color: var(--ibx-gold-strong);
}

/* Section label */
.sw-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ibx-text-3);
  margin-bottom: 8px;
}

/* Meta grid */
.sw-meta-grid { display: flex; flex-direction: column; gap: 5px; }
.sw-meta-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.sw-meta-label {
  font-size: 10px;
  color: var(--ibx-text-3);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}
.sw-meta-value {
  font-size: 12px;
  color: var(--ibx-text-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sw-meta-value--premium {
  font-weight: 600;
  color: var(--ibx-palette-green);
}

/* Quick actions */
.sw-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sw-action-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sw-action-btn:hover {
  color: var(--text);
  border-color: var(--border-hover, rgba(255,255,255,0.2));
  background: var(--surface-hover, rgba(255,255,255,0.04));
}

/* ── Main workspace ─────────────────────────────────────────── */
.sw-main {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 32px;
  min-width: 0;
}
.sw-panels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
}

/* ── Details panel body ─────────────────────────────────────── */
.sw-details-body {
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sw-detail-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sw-detail-group-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.sw-detail-group--meta { margin-top: 4px; opacity: 0.65; }

.sw-detail-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 22px;
}
.sw-detail-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 120px;
  flex-shrink: 0;
}
.sw-detail-value {
  font-size: 12px;
  color: var(--text);
  min-width: 0;
  word-break: break-word;
}
.sw-detail-notes {
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  border-radius: var(--radius, 6px);
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.sw-detail-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

/* Loss history table */
.sw-loss-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sw-loss-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 8px 6px 0;
  border-bottom: 1px solid var(--border);
}
.sw-loss-table td {
  padding: 5px 8px 5px 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.sw-loss-table tr:last-child td { border-bottom: none; }

.sw-inline-action {
  background: none;
  border: none;
  color: var(--accent, #C9A227);
  font-size: 11px;
  cursor: pointer;
  padding: 6px 0 0;
  text-align: left;
}
.sw-inline-action:hover { text-decoration: underline; }

/* ── Documents panel body ───────────────────────────────────── */
.sw-docs-body {
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sw-docs-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius, 6px);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.sw-docs-upload-zone:hover,
.sw-docs-upload-zone--hover {
  border-color: var(--accent, #C9A227);
  background: rgba(201,162,39,0.04);
  color: var(--text);
}
.sw-docs-upload-hint {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ── Not-found state ────────────────────────────────────────── */
.sw-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Light mode overrides ───────────────────────────────────── */
html.theme-ibex-light .sw-left {
  background: #f8f9fa;
  border-right-color: rgba(0,0,0,0.1);
}
html.theme-ibex-light .sw-left-section {
  border-bottom-color: rgba(0,0,0,0.08);
}
html.theme-ibex-light .sw-action-btn {
  border-color: rgba(0,0,0,0.12);
  color: #555;
}
html.theme-ibex-light .sw-action-btn:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.2);
  color: #222;
}
html.theme-ibex-light .sw-detail-notes {
  background: #f0f2f5;
  border-color: rgba(0,0,0,0.1);
}
html.theme-ibex-light .sw-docs-upload-zone {
  border-color: rgba(0,0,0,0.15);
}
html.theme-ibex-light .sw-meta-value--premium {
  color: #15803d;
}

/* ── Submissions page workflow layout ─────────────────────────────────────── */

/* Controls bar: action buttons left, filters right */
.sub-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2, #1e1e1e);
  border: 1px solid var(--border, #2e2e2e);
  border-radius: var(--radius, 6px);
  margin-bottom: 14px;
}
.sub-controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sub-controls-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.sub-controls-right .filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sub-controls-right .search-bar {
  margin: 0;
}

/* Pipeline Overview panel — remove bottom margin from kpi-row inside it */
.sub-pipeline-panel .wp-panel-body { padding: 14px 16px; }
.sub-pipeline-panel .kpi-row { margin-bottom: 0; }

/* Active Submissions panel — zero padding so kanban columns touch the walls */
.sub-board-body { padding: 12px 14px !important; }

/* Side-by-side analytics panels (Lost / Withdrawn) */
.sub-analytics-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.sub-analytics-row > .wp-panel {
  flex: 1 1 320px;
  min-width: 0;
}

/* Light mode adjustments */
html.theme-ibex-light .sub-controls-bar {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
}

/* ── Risk Profile section (client detail) ─────────────────── */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
@media (max-width: 760px) {
  .rp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .rp-grid { grid-template-columns: 1fr; }
}
.rp-tile {
  background: var(--surface);
  padding: 18px 20px 16px;
}
.rp-tile-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.rp-tile-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rp-tile-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Supporting documents sub-section inside Risk Profile */
.rp-docs-section {
  border-top: 1px solid var(--border);
}
.rp-docs-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 20px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.rp-docs-hint {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: .7;
}
.rp-docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.rp-doc-th {
  text-align: left;
  padding: 6px 20px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rp-doc-row {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.rp-doc-row:last-child { border-bottom: none; }
.rp-doc-row:hover { background: var(--surface, #f9f9f9); }
.rp-doc-td {
  padding: 9px 20px;
  vertical-align: middle;
  color: var(--text);
}
.rp-doc-name {
  font-weight: 600;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-doc-cat {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.rp-doc-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.rp-doc-size {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rp-doc-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  font-style: italic;
}

/* ============================================================
   DNA COACHING OUTPUT ENGINE — .cch-* components
   Used in: DNA Engine overview tab · Workspace "Today's Focus"
            panel · Agent DNA coaching panel clickable actions
            · Owner team coaching card
   Pill system: uses existing .pill .pill--* classes only.
   No new badge/dot/circle helpers.
   ============================================================ */

/* ── Coaching card (DNA engine dark context) ────────────────── */
.cch-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 6px;
}
.cch-card--light {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

.cch-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cch-identity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cch-identity {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.cch-identity--wp {
  font-size: 13.5px;
  font-weight: 800;
}
.cch-header-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cmd-muted, rgba(255,255,255,0.4));
  white-space: nowrap;
  flex-shrink: 0;
}

.cch-issue {
  font-size: 12px;
  font-weight: 500;
  color: var(--cmd-text, rgba(255,255,255,0.75));
  margin-bottom: 10px;
  line-height: 1.45;
}

/* ── Signals ─────────────────────────────────────────────────── */
.cch-signals {
  display: flex;
  flex-direction: column;
  gap: 6px;          /* was 4px — slightly more breathing room */
  margin-bottom: 12px;
}
.cch-signals--compact { margin-bottom: 10px; }

.cch-signal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--cmd-muted, rgba(255,255,255,0.5));
  line-height: 1.4;
  padding: 2px 4px 2px 2px;  /* room for hover background */
  border-radius: 4px;
}
.cch-signal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cmd-muted, rgba(255,255,255,0.3));
  flex-shrink: 0;
}
/* Stage 4A: clickable signal — routes to exact records */
.cch-signal--link {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cch-signal--link:hover {
  background: rgba(201,162,39,0.13);
  color: var(--accent-dark, #c9a227);
}
.cch-signal--link:hover .cch-signal-dot { background: var(--accent-dark, #c9a227); }
.cch-signal-arrow {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.3;      /* visible at rest, brighter on hover */
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.cch-signal--link:hover .cch-signal-arrow { opacity: 1; color: var(--accent-dark, #c9a227); }
.dna-theme-light .cch-signal--link:hover { background: rgba(201,162,39,0.10); color: #92730d; }

/* ── Action buttons ─────────────────────────────────────────── */
.cch-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cch-action-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--cmd-text, rgba(255,255,255,0.8));
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cch-action-btn:hover {
  background: rgba(201,162,39,0.1);
  border-color: rgba(201,162,39,0.3);
  color: var(--cmd-accent, #C9A227);
}
/* Primary action — highest impact, visually prominent */
.cch-action-btn--primary {
  padding: 9px 12px;
  background: rgba(201,162,39,0.14);
  border-color: rgba(201,162,39,0.40);
  font-weight: 600;
  font-size: 12.5px;
}
.cch-action-btn--primary:hover {
  background: rgba(201,162,39,0.26);
  border-color: rgba(201,162,39,0.65);
  color: var(--cmd-accent, #C9A227);
}
.cch-action-btn--wp {
  border-color: rgba(0,0,0,0.07);
  background: rgba(0,0,0,0.02);
  color: var(--text, rgba(255,255,255,0.8));
}
.cch-action-btn--wp:hover {
  background: rgba(201,162,39,0.08);
  border-color: rgba(201,162,39,0.25);
  color: #C9A227;
}
.cch-action-btn--wp.cch-action-btn--primary {
  background: rgba(201,162,39,0.10);
  border-color: rgba(201,162,39,0.32);
  font-weight: 600;
}
.cch-action-btn--wp.cch-action-btn--primary:hover {
  background: rgba(201,162,39,0.20);
  border-color: rgba(201,162,39,0.55);
  color: #b8881e;
}

.cch-action-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  opacity: 0.55;
  transition: opacity 0.12s;
}
.cch-action-btn:hover .cch-action-icon { opacity: 1; }

/* ── Stage 4B: Effectiveness feedback ──────────────────────── */
.cch-feedback {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.20);
  border-radius: 7px;
}
.cch-feedback--wp {
  margin: 6px 0 10px;
}
.cch-feedback-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #4ade80;
  font-weight: 500;
  line-height: 1.35;
}
.cch-feedback-icon {
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0.9;
}
.dna-theme-light .cch-feedback       { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.20); }
.dna-theme-light .cch-feedback-row   { color: #16a34a; }

/* ── Today's Focus panel header label ───────────────────────── */
.cch-wp-header-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.35));
  margin-bottom: 6px;
}
/* workpanel identity row — increased spacing (full definitions below in workspace overrides) */

/* ── DNA engine coaching panel — action buttons ─────────────── */
.dna-cch-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dna-cch-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--cmd-border, rgba(255,255,255,0.08));
  border-radius: 6px;
  background: transparent;
  color: var(--cmd-text, rgba(255,255,255,0.8));
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dna-cch-action-btn:hover {
  background: rgba(201,162,39,0.08);
  border-color: rgba(201,162,39,0.3);
  color: var(--cmd-accent, #C9A227);
}
.dna-cch-action-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  opacity: 0.5;
  transition: opacity 0.12s;
}
.dna-cch-action-btn:hover .dna-cch-action-icon { opacity: 1; }

/* ── Workspace panel specific overrides ─────────────────────── */
.cch-wp-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
/* Role pill in Today's Focus: subordinate to identity, not equal weight */
.cch-wp-top .pill {
  font-size: 9px;
  opacity: 0.65;
  font-weight: 500;
}
.cch-wp-issue {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, rgba(255,255,255,0.6));
  margin-bottom: 12px;
  line-height: 1.45;
}
.cch-wp-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.4));
  margin-bottom: 8px;
}

/* ── Pairing suggestions ────────────────────────────────────── */
.cch-pairing {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: var(--cmd-muted, rgba(255,255,255,0.6));
  line-height: 1.4;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cch-pairing:last-child { border-bottom: none; }
.cch-pairings { margin-top: 4px; }

/* ── Team coaching card (owner overview) ───────────────────── */
.cch-team-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 14px 16px;
}
.cch-team-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cch-team-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--cmd-text, rgba(255,255,255,0.85));
  letter-spacing: 0.01em;
}
.cch-team-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cmd-muted, rgba(255,255,255,0.4));
  margin-bottom: 6px;
}
.cch-team-rows { display: flex; flex-direction: column; gap: 2px; }
.cch-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
}
.cch-team-row:hover { background: rgba(255,255,255,0.05); }
.cch-team-row-main { flex: 1; min-width: 0; }
.cch-team-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cmd-text, rgba(255,255,255,0.85));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cch-team-meta {
  display: block;
  font-size: 11px;
  color: var(--cmd-muted, rgba(255,255,255,0.45));
  margin-top: 1px;
}
.cch-team-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cch-team-view-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cmd-accent, #C9A227);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.12s;
}
.cch-team-view-btn:hover { opacity: 1; }

/* ── Light theme overrides ──────────────────────────────────── */
.dna-theme-light .cch-card {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.09);
}
.dna-theme-light .cch-header-eyebrow { color: rgba(0,0,0,0.38); }
.dna-theme-light .cch-issue          { color: #374151; }
.dna-theme-light .cch-signal         { color: #6b7280; }
.dna-theme-light .cch-signal-dot     { background: #9ca3af; }
.dna-theme-light .cch-action-btn {
  border-color: rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.02);
  color: #374151;
}
.dna-theme-light .cch-action-btn:hover {
  background: rgba(154,122,16,0.07);
  border-color: rgba(154,122,16,0.25);
  color: #9a7a10;
}
.dna-theme-light .dna-cch-action-btn   { color: #1a1a1a; }
.dna-theme-light .dna-cch-action-btn:hover {
  background: rgba(154,122,16,0.07);
  border-color: rgba(154,122,16,0.28);
  color: #9a7a10;
}
.dna-theme-light .cch-team-card     { background: #fafafa; border-color: rgba(0,0,0,0.08); }
.dna-theme-light .cch-team-title    { color: #111; }
.dna-theme-light .cch-team-name     { color: #1a1a1a; }
.dna-theme-light .cch-team-meta     { color: #6b7280; }
.dna-theme-light .cch-team-row:hover { background: rgba(0,0,0,0.04); }
.dna-theme-light .cch-team-footer   { border-top-color: rgba(0,0,0,0.07); }
.dna-theme-light .cch-team-view-btn { color: #9a7a10; }
.dna-theme-light .cch-pairing       { color: #6b7280; border-bottom-color: rgba(0,0,0,0.06); }

/* ── Portal light-theme overrides (workspace panel) ─────────── */
html.theme-ibex-light .cch-action-btn--wp {
  border-color: rgba(0,0,0,0.09);
  background: rgba(0,0,0,0.02);
  color: #374151;
}
html.theme-ibex-light .cch-action-btn--wp:hover {
  background: rgba(154,122,16,0.06);
  border-color: rgba(154,122,16,0.2);
  color: #9a7a10;
}
html.theme-ibex-light .cch-wp-issue   { color: #555; }
html.theme-ibex-light .cch-wp-section { color: #9ca3af; }
html.theme-ibex-light .cch-pairing    { color: #6b7280; }
html.theme-ibex-light .cch-identity--wp { /* inherit color from inline style */ }

/* ══════════════════════════════════════════════════════════
   STAGE 3A — GOAL PACING BLOCK  (.cch-goal-*)
   ══════════════════════════════════════════════════════════ */
.cch-goal-block {
  margin: 8px 0 6px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Badge row */
.cch-goal-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Inline status badge — color applied via inline style */
.cch-goal-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  line-height: 1.5;
}

/* Plain-language coaching lines */
.cch-goal-line {
  font-size: 12px;
  color: var(--cmd-text, rgba(255,255,255,0.80));
  line-height: 1.45;
}

/* Low-confidence disclaimer */
.cch-goal-confidence {
  font-size: 10.5px;
  color: var(--cmd-muted, rgba(255,255,255,0.40));
  font-style: italic;
  margin-top: 2px;
}

/* Warn label variant for team card (Behind Goal Pace) */
.cch-team-section-label--warn {
  color: #ef4444;
}

/* Light-theme overrides */
.cch-card--light .cch-goal-block,
html.theme-ibex-light .cch-goal-block {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.07);
}
.cch-card--light .cch-goal-line,
html.theme-ibex-light .cch-goal-line {
  color: #374151;
}
.cch-card--light .cch-goal-confidence,
html.theme-ibex-light .cch-goal-confidence {
  color: #9ca3af;
}

/* ══ STAGE 5A — LEADER DESIGNED FOCUS (Today's Focus panel) ═══ */
/* Renders at the top of the workbar Today's Focus block.         */
/* Visually distinct from system-generated coaching content.      */
.cch-leader-focus {
  background: rgba(201,162,39,0.07);
  border: 1px solid rgba(201,162,39,0.25);
  border-left: 3px solid #c9a227;
  border-radius: 0 7px 7px 0;
  padding: 9px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cch-leader-focus-hdr {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c9a227;
  margin-bottom: 2px;
  opacity: 0.85;
}
.cch-lf-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.cch-lf-icon {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}
.cch-lf-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  flex: 1;
  min-width: 0;
}
.cch-lf-nav {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #c9a227;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background 0.12s;
  font-family: inherit;
  white-space: nowrap;
}
.cch-lf-nav:hover {
  background: rgba(201,162,39,0.15);
}
.cch-lf-target {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11.5px;
}
.cch-lf-target-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c9a227;
  opacity: 0.8;
  flex-shrink: 0;
}
.cch-lf-target-text {
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  font-style: italic;
}
.cch-lf-pair {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.65);
}
.cch-lf-pair strong {
  color: rgba(255,255,255,0.88);
  font-weight: 600;
}
/* Light-theme overrides */
html.theme-ibex-light .cch-leader-focus,
.cch-card--light .cch-leader-focus {
  background: rgba(201,162,39,0.06);
  border-color: rgba(201,162,39,0.22);
  border-left-color: #b8920f;
}
html.theme-ibex-light .cch-lf-text,
.cch-card--light .cch-lf-text {
  color: #1f2937;
}
html.theme-ibex-light .cch-lf-target-text,
.cch-card--light .cch-lf-target-text {
  color: #374151;
}
html.theme-ibex-light .cch-lf-pair,
.cch-card--light .cch-lf-pair {
  color: #6b7280;
}
html.theme-ibex-light .cch-lf-pair strong,
.cch-card--light .cch-lf-pair strong {
  color: #111827;
}

/* ── Stage 5B: Effectiveness line in Today's Focus widget ── */
.cch-eff-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 4px 8px;
  background: rgba(107,114,128,0.06);
  border: 1px solid rgba(107,114,128,0.14);
  border-radius: 5px;
  font-size: 10.5px;
}
.cch-eff-label {
  color: var(--text-muted, #6b7280);
  font-size: 10.5px;
}
.cch-eff-state {
  font-weight: 700;
  font-size: 10.5px;
  white-space: nowrap;
}
/* Light theme */
html.theme-ibex-light .cch-eff-line,
.cch-card--light .cch-eff-line {
  background: rgba(107,114,128,0.05);
  border-color: rgba(107,114,128,0.18);
}
html.theme-ibex-light .cch-eff-label,
.cch-card--light .cch-eff-label {
  color: #6b7280;
}

/* ============================================================
   Property Management — Location-level section
   Visible only for Habitational / Lessor's Risk profiles.
   Visibility is controlled by _showPropertyManagers(sid) in
   stage-locations.js — not by any manual toggle.
   ============================================================ */

.sw2-pm-section {
  border-top: 1px solid var(--border, #2C2820);
  padding: 0 0 4px;
}

/* Section header bar */
.sw2-pm-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 6px;
}
.sw2-pm-bar-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #857E72);
}
.sw2-pm-count {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted, #857E72);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1px 7px;
}

/* List container */
.sw2-pm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 6px;
}

/* Empty state */
.sw2-pm-empty {
  font-size: 11px;
  color: var(--text-dim, #504A40);
  font-style: italic;
  padding: 2px 4px;
}

/* Individual manager entry */
.sw2-pm-entry {
  background: var(--surface-2, #1E1B13);
  border: 1px solid var(--border, #2C2820);
  border-radius: 6px;
  overflow: hidden;
}

.sw2-pm-entry-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sw2-pm-entry-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim, #504A40);
  flex: 1;
}

/* ── sw2-pm-primary-badge: remapped to shared pill--neutral designation style ── */
.sw2-pm-primary-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  background: rgba(115,115,115,0.10);
  color: var(--text-muted, #857E72);
  border: 1px solid rgba(115,115,115,0.18);
}
/* ── sw2-pm-make-primary: dark-surface button (no ghost/transparent) ── */
.sw2-pm-make-primary {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #857E72);
  background: var(--sw-surf2, #1E1B13);
  border: 1px solid var(--sw-border, #2C2820);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  transition: color .1s, border-color .1s, background .1s;
}
.sw2-pm-make-primary:hover {
  color: var(--accent, #C9A227);
  border-color: rgba(201,162,39,0.3);
  background: var(--sw-accent-bg, rgba(201,162,39,0.07));
}
.sw2-pm-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim, #504A40);
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 3px;
  transition: color .1s;
}
.sw2-pm-remove:hover { color: var(--danger, #F87171); }

/* Field grid — 4-up, Notes spans full row */
.sw2-pm-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px 10px;
  padding: 8px 10px 10px;
}
.sw2-pm-field-notes {
  grid-column: 1 / -1;
}

/* Light theme overrides */
html.theme-ibex-light .sw2-pm-entry {
  background: #f9f7f4;
  border-color: #e0dbd2;
}
html.theme-ibex-light .sw2-pm-entry-hdr {
  background: rgba(0,0,0,0.02);
  border-bottom-color: rgba(0,0,0,0.05);
}
html.theme-ibex-light .sw2-pm-bar-title,
html.theme-ibex-light .sw2-pm-entry-label {
  color: #6b5e48;
}
html.theme-ibex-light .sw2-pm-empty { color: #9e9589; }

/* ── Light theme: Ibex brand always uses dark buttons (black + gold) ──
   Override the near-white ibx-control-bg that the light theme injects so
   btn-secondary / btn-outline / bare .btn never render as white fills.    ── */
html.theme-ibex-light .btn {
  background: #23232a;
  color: #d8d3c8;
}
html.theme-ibex-light .btn:hover:not(:disabled) {
  background: #2d2d36;
}
html.theme-ibex-light .btn-primary {
  background: var(--ibx-gold, #d4a017);
  color: #111111;
}
html.theme-ibex-light .btn-primary:hover:not(:disabled) {
  background: var(--ibx-gold-strong, #e0b63a);
}
html.theme-ibex-light .btn-secondary,
html.theme-ibex-light .btn-outline {
  background: #23232a;
  border-color: rgba(255,255,255,0.14);
  color: #c9c3b9;
}
html.theme-ibex-light .btn-secondary:hover:not(:disabled),
html.theme-ibex-light .btn-outline:hover:not(:disabled) {
  background: #2d2d36;
  border-color: rgba(212,160,23,0.30);
  color: #f0ead8;
}


/* =============================================================
   CLIENT WORKSPACE — Phase 1
   Modular, drag-reorderable, collapsible layout for client pages.
   Prefix: cw-*
   Mirrors Workspace card/spacing language (table-container base).
   ============================================================= */

/* ── Workspace container ────────────────────────────────────── */
.cw-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 32px;
}

/* ── Module card ─────────────────────────────────────────────── */
/* Same visual as .table-container but owns collapse + drag chrome */
.cw-module {
  background:    var(--white);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow);
  overflow:      hidden;
  transition:    border-color 0.15s, box-shadow 0.15s;
  /* display:block is the natural state for elements inside a block container.
     Explicitly setting it prevents Chrome from treating draggable elements as
     inline (the root cause of the horizontal-columns layout bug). */
  display:       block;
  width:         100%;
  box-sizing:    border-box;
  /* Vertical gap between modules — replaces flex gap on parent since parent is now block */
  margin-bottom: var(--space-2);
}
.cw-module:last-child {
  margin-bottom: 0;
}

/* ── Module header ───────────────────────────────────────────── */
.cw-mod-hdr {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         12px 16px;
  background:      var(--white);
  border-bottom:   1px solid var(--border);
  cursor:          default;
  user-select:     none;
  min-height:      46px;
}

/* Title text */
.cw-mod-label {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  flex:        1;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* Muted count badge — e.g. "(5)" in title */
.cw-mod-count {
  font-size:   13px;
  font-weight: 400;
  color:       var(--text-muted);
  margin-left: 4px;
}

/* Action buttons region (right of title, left of collapse) */
.cw-mod-hdr-actions {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}

/* ── Drag handle ─────────────────────────────────────────────── */
.cw-drag-handle {
  display:      flex;
  align-items:  center;
  padding:      4px 2px;
  color:        var(--text-muted);
  opacity:      0.45;
  cursor:       grab;
  flex-shrink:  0;
  border-radius: 4px;
  transition:   opacity 0.15s;
}
.cw-drag-handle:hover       { opacity: 0.85; }
.cw-drag-handle:active      { cursor: grabbing; }

/* ── Collapse button ─────────────────────────────────────────── */
.cw-collapse-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  padding:         0;
  background:      transparent;
  border:          none;
  border-radius:   6px;
  color:           var(--text-muted);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background 0.15s, color 0.15s;
}
.cw-collapse-btn:hover {
  background: var(--surface-2);
  color:      var(--text-primary);
}

/* Chevron rotates to indicate open/closed state */
.cw-chevron {
  transition: transform 0.18s ease;
  display:    block;
}
.cw-mod--collapsed .cw-chevron {
  transform: rotate(-90deg);
}

/* ── Module body ─────────────────────────────────────────────── */
.cw-mod-body {
  /* Body is visible by default; height collapse animates cleanly */
  display:  block;
  overflow: hidden;
}

/* Collapsed state — hide body, remove header border */
.cw-mod--collapsed .cw-mod-body {
  display: none;
}
.cw-mod--collapsed .cw-mod-hdr {
  border-bottom: none;
}

/* ── Drag states ─────────────────────────────────────────────── */
.cw-mod--dragging {
  opacity:    0.45;
  box-shadow: none;
}

.cw-mod--drag-over {
  border-color: var(--accent);
  box-shadow:   0 0 0 2px var(--accent-subtle);
}

/* ── Dark / Ibex Classic theme overrides ─────────────────────── */
html.theme-ibex-classic .cw-module,
html.theme-ibex-classic .cw-mod-hdr {
  background: var(--surf);
}
html.theme-ibex-classic .cw-module {
  border-color: var(--border);
}
html.theme-ibex-classic .cw-mod-hdr {
  border-bottom-color: var(--border);
}
html.theme-ibex-classic .cw-collapse-btn:hover {
  background: var(--surf2);
  color:      var(--text);
}
html.theme-ibex-classic .cw-mod--drag-over {
  border-color: var(--accent);
  box-shadow:   0 0 0 2px rgba(201,162,39,0.15);
}


/* ══════════════════════════════════════════════════════════════
   TABLE ROW ACTION BUTTONS + ROW-ACTION ICON SYSTEM
   Token-driven. Quiet by default, emphasis on hover.
   .btn-table-action — legacy class, maintained for compatibility
   .row-action       — canonical class per ibx design system
   ══════════════════════════════════════════════════════════════ */

.table-actions {
  display:     flex;
  gap:         4px;
  align-items: center;
}

/* ── Shared base for both naming conventions ── */
.btn-table-action,
.row-action {
  width:  30px;
  height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  border-radius: var(--ibx-radius-sm, 8px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ibx-text-3);
  opacity: 0.45;
  cursor: pointer;
  transition:
    background var(--ibx-speed-fast, 140ms),
    color var(--ibx-speed-fast, 140ms),
    border-color var(--ibx-speed-fast, 140ms),
    opacity var(--ibx-speed-fast, 140ms),
    box-shadow var(--ibx-speed-fast, 140ms);
}

/* Row hover → reveal */
tr:hover .btn-table-action,
tr:hover .row-action,
.table-row-hover .btn-table-action,
.table-row-hover .row-action {
  opacity: 0.80;
}

/* Button hover → full visibility */
.btn-table-action:hover,
.row-action:hover {
  opacity: 1;
  background: var(--ibx-hover-overlay);
  color: var(--ibx-text-1);
}

/* Edit / primary — gold tint */
.btn-table-action.btn-primary:hover,
.row-action.edit:hover {
  background:   var(--ibx-gold-softer);
  border-color: var(--ibx-gold-border);
  color:        var(--ibx-gold-strong);
}

/* Delete / danger — red tint */
.btn-table-action.btn-danger:hover,
.row-action.delete:hover {
  background:   var(--ibx-danger-bg);
  border-color: var(--ibx-danger-border-hover);
  color:        var(--ibx-danger);
}

/* Focus-visible ring */
.btn-table-action:focus-visible,
.row-action:focus-visible {
  box-shadow: var(--ibx-focus-ring);
  outline: none;
  opacity: 1;
}

/* Disabled */
.btn-table-action:disabled,
.row-action:disabled {
  opacity: 0.20;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Star / primary-contact button ────────────────────────────────────────
   Bare icon — no box, no border, no background tint.
   State is communicated by glyph (★ vs ☆) and color alone.
   --ibex-gold-strong: #D4AF37 — premium gold, slightly brighter than --accent.
   ───────────────────────────────────────────────────────────────────────── */
:root { --ibex-gold-strong: #D4AF37; }

/* Base: bare transparent button, muted outline star */
.star-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  opacity: 1;
  transform-origin: center;
  transition: transform 0.15s ease, color 0.15s ease, text-shadow 0.15s ease;
}

/* Primary: bright premium gold, filled star, subtle size lift + soft glow */
.star-btn--primary {
  color: var(--ibex-gold-strong) !important;
  opacity: 1 !important;
  transform: scale(1.15);
  text-shadow: 0 0 4px rgba(212, 175, 55, 0.35);
}

/* Hover: gold preview + gentle scale for non-primary */
.star-btn:hover {
  color: var(--ibex-gold-strong) !important;
  opacity: 1 !important;
  transform: scale(1.1);
}

/* Hover: primary gets a hair more lift + glow intensifies slightly */
.star-btn--primary:hover {
  transform: scale(1.18);
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
}

/* Never let row-hover opacity dim the star */
tr:hover .star-btn {
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   SPACING SCALE — ibx token system
   All spacing in core UI must reference these tokens.
   No arbitrary pixel values outside this scale.
   ══════════════════════════════════════════════════════════════ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
}


/* ══════════════════════════════════════════════════════════════
   CLIENT WORKSPACE — PHASE 2
   Dock zone · Module picker · Toolbar · Cross-zone drag
   All colors via --ibx-* tokens.
   ══════════════════════════════════════════════════════════════ */

/* ── Root & layout ── */
.cw-root {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cw-layout {
  display: block;
  width: 100%;
}

.cw-main-zone {
  display: block;
  width: 100%;
}

/* ── Toolbar ── */
.cw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--ibx-surface-2, var(--surface-2));
  border: 1px solid var(--ibx-border-1, var(--border));
  border-radius: var(--ibx-radius-sm, 8px);
  margin-bottom: var(--space-2);
}

.cw-toolbar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ibx-text-3, var(--text-muted));
}

.cw-customize-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--ibx-control-bg, transparent);
  border: 1px solid var(--ibx-control-border, var(--border));
  border-radius: var(--ibx-radius-sm, 8px);
  color: var(--ibx-text-2, var(--text-muted));
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ibx-speed-fast, 140ms);
}
.cw-customize-btn:hover {
  background: var(--ibx-control-bg-hover);
  border-color: var(--ibx-control-border-hover);
  color: var(--ibx-text-1);
}

/* ── Dock zone ── */
.cw-dock-zone {
  width: 260px;
  flex-shrink: 0;
  background: var(--ibx-surface-1, var(--surface));
  border: 1px solid var(--ibx-border-1, var(--border));
  border-radius: var(--ibx-radius-sm, 8px);
  overflow: hidden;
  position: sticky;
  top: 72px; /* below fixed header */
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: thin;
  transition: border-color var(--ibx-speed-fast);
}

.cw-dock-zone.cw-zone--drag-over {
  border-color: var(--ibx-gold, var(--accent));
  box-shadow: 0 0 0 2px var(--ibx-gold-softer);
}

.cw-dock-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--ibx-surface-2, var(--surface-2));
  border-bottom: 1px solid var(--ibx-border-1, var(--border));
  position: sticky;
  top: 0;
  z-index: 1;
}

.cw-dock-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ibx-text-3);
}

.cw-dock-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--ibx-gold-soft);
  color: var(--ibx-gold-strong);
  min-width: 18px;
  text-align: center;
}

.cw-dock-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
}

/* Docked module — compact version */
.cw-mod--docked {
  border-radius: var(--ibx-radius-sm, 8px);
}

.cw-mod--docked .cw-mod-hdr {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ibx-radius-sm, 8px);
}

.cw-mod--docked .cw-mod-label {
  font-size: 12px;
}

/* Docked body: collapsed by default */
.cw-mod--docked .cw-mod-body {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ── Dock button in module header ── */
.cw-dock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ibx-radius-sm, 8px);
  color: var(--ibx-text-3);
  cursor: pointer;
  opacity: 0;
  transition: all var(--ibx-speed-fast);
  flex-shrink: 0;
}

.cw-mod-hdr:hover .cw-dock-btn,
.cw-mod--docked .cw-dock-btn {
  opacity: 0.6;
}

.cw-dock-btn:hover {
  opacity: 1 !important;
  background: var(--ibx-gold-softer);
  border-color: var(--ibx-gold-border);
  color: var(--ibx-gold);
}

/* ── Module picker overlay ── */
.cw-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--space-6) var(--space-4) var(--space-6) var(--space-4);
}

.cw-picker-panel {
  width: 340px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: var(--ibx-surface-1, var(--surface));
  border: 1px solid var(--ibx-border-2, var(--border));
  border-radius: var(--ibx-radius-md, 12px);
  box-shadow: var(--ibx-shadow-2);
  overflow: hidden;
}

.cw-picker-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--ibx-border-1, var(--border));
  background: var(--ibx-surface-2, var(--surface-2));
}

.cw-picker-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ibx-text-1);
}

.cw-picker-close {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ibx-radius-sm, 8px);
  color: var(--ibx-text-3);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--ibx-speed-fast);
}
.cw-picker-close:hover {
  background: var(--ibx-danger-bg);
  color: var(--ibx-danger);
  border-color: var(--ibx-danger-border);
}

.cw-picker-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cw-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ibx-radius-sm, 8px);
  transition: background var(--ibx-speed-fast);
}
.cw-picker-row:hover {
  background: var(--ibx-surface-3, var(--hover-bg));
}

.cw-picker-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.cw-picker-label { flex: 1; font-size: 13px; color: var(--ibx-text-2); font-weight: 500; }

.cw-picker-zones {
  display: flex;
  gap: 3px;
}

.cw-picker-zone-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--ibx-border-1);
  background: transparent;
  color: var(--ibx-text-3);
  cursor: pointer;
  transition: all var(--ibx-speed-fast);
}
.cw-picker-zone-btn:hover {
  background: var(--ibx-surface-3);
  color: var(--ibx-text-1);
}
.cw-picker-zone-btn.cw-picker-zone--active {
  background: var(--ibx-gold-soft);
  border-color: var(--ibx-gold-border);
  color: var(--ibx-gold-strong);
}
.cw-picker-zone-btn.cw-picker-zone--hidden.cw-picker-zone--active {
  background: var(--ibx-surface-3);
  border-color: var(--ibx-border-2);
  color: var(--ibx-text-3);
}

.cw-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--ibx-border-1, var(--border));
  background: var(--ibx-surface-2, var(--surface-2));
}

.cw-picker-reset {
  font-size: 12px;
  color: var(--ibx-text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--ibx-speed-fast);
}
.cw-picker-reset:hover { color: var(--ibx-gold); }


/* ══════════════════════════════════════════════════════════════
   GLOBAL WORKSPACE LAYOUT SYSTEM
   Continuous workspace bands. No floating card islands.
   Section = header band + body. Tight spacing throughout.
   ══════════════════════════════════════════════════════════════ */

/* ── Section band structure ── */
.ws-section {
  background: var(--ibx-surface-1, var(--surface));
  border: 1px solid var(--ibx-border-1, var(--border));
  border-radius: var(--ibx-radius-sm, 8px);
  overflow: hidden;
  /* No margin — sections stack flush with gap-based spacing */
}

.ws-section-hdr {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--ibx-surface-2, var(--surface-2));
  border-bottom: 1px solid var(--ibx-border-1, var(--border));
  min-height: 42px;
}

.ws-section-title {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ibx-text-2, var(--text-secondary));
}

.ws-section-body {
  padding: var(--space-4);
}

/* ── Table inside workspace section ── */
.ws-section .table-container {
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--ibx-border-1, var(--border));
}

.ws-section table th {
  background: var(--ibx-table-head, var(--surface-2));
  color: var(--ibx-text-2, var(--text-secondary));
  border-bottom: 1px solid var(--ibx-border-2, var(--border));
  padding: var(--space-2) var(--space-4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ws-section table td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--ibx-border-1, var(--border));
  color: var(--ibx-text-2, var(--text-secondary));
}

.ws-section table tr:hover td {
  background: var(--ibx-table-row-hover, var(--hover-bg));
}

/* ── KPI strip ── */
.ws-kpi-strip {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ibx-border-1, var(--border));
}

.ws-kpi-item {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--ibx-border-1, var(--border));
}
.ws-kpi-item:last-child { border-right: none; }

.ws-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ibx-text-1, var(--text-primary));
  line-height: 1.2;
}
.ws-kpi-label {
  font-size: 11px;
  color: var(--ibx-text-3, var(--text-muted));
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Workspace container (page-level) ── */
.ws-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* ── Page toolbar (top strip with actions) ── */
.ws-page-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--ibx-surface-2, var(--surface-2));
  border: 1px solid var(--ibx-border-1, var(--border));
  border-radius: var(--ibx-radius-sm, 8px);
}

.ws-page-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ibx-text-1, var(--text-primary));
  flex: 1;
}

/* ── Section divider (horizontal rule replacement) ── */
.ws-divider {
  height: 1px;
  background: var(--ibx-border-1, var(--border));
  margin: var(--space-1) 0;
}

/* ── Responsive: dock zone stacks on narrow ── */
@media (max-width: 900px) {
  .cw-dock-zone {
    width: 100%;
    position: static;
    max-height: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MARKET READY GATE
   Overview banner (.sw2-mr-banner) + topbar pill (.sw2-mr-pill)
   ─────────────────────────────────────────────────────────────
   Three states:
     --ready    → green  (zero blocking flags)
     --blocked  → amber  (blocking warnings, no critical)
     --critical → red    (at least one critical blocking flag)
   ═══════════════════════════════════════════════════════════════ */

/* ── Overview banner ─────────────────────────────────────── */
.sw2-mr-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 9px 16px;
  border-radius: 6px;
  margin: 12px 16px 0;
  font-size: 12px;
  border: 1px solid transparent;
}

.sw2-mr-banner--ready {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.22);
  color: rgba(134, 239, 172, 0.9);
}
.sw2-mr-banner--blocked {
  background: rgba(251, 191, 36, 0.07);
  border-color: rgba(251, 191, 36, 0.20);
  color: rgba(253, 224, 71, 0.85);
}
.sw2-mr-banner--critical {
  background: rgba(248, 113, 113, 0.09);
  border-color: rgba(248, 113, 113, 0.22);
  color: rgba(252, 165, 165, 0.9);
}

.sw2-mr-banner svg {
  flex-shrink: 0;
}

.sw2-mr-banner-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.sw2-mr-banner-sub {
  font-size: 11px;
  opacity: 0.75;
  flex: 1;
}

.sw2-mr-banner-count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
}

.sw2-mr-banner-flags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  margin-left: auto;
}

.sw2-mr-banner-flag {
  cursor: pointer;
  opacity: 0.80;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: opacity 0.1s;
}
.sw2-mr-banner-flag:hover { opacity: 1; }
.sw2-mr-banner-flag--more {
  text-decoration: none;
  font-style: italic;
  cursor: default;
}
.sw2-mr-banner-flag-sep {
  opacity: 0.35;
  font-size: 10px;
}

.sw2-mr-banner-action {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 4px;
  color: rgba(134, 239, 172, 0.9);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
  transition: background 0.15s;
}
.sw2-mr-banner-action:hover {
  background: rgba(34, 197, 94, 0.20);
}

/* ── Topbar pill ─────────────────────────────────────────── */
.sw2-mr-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.sw2-mr-pill:hover { opacity: 0.8; }

.sw2-mr-pill--ready {
  background: rgba(34, 197, 94, 0.10);
  color: rgba(134, 239, 172, 0.9);
  border-color: rgba(34, 197, 94, 0.22);
}
.sw2-mr-pill--blocked {
  background: rgba(248, 113, 113, 0.10);
  color: rgba(252, 165, 165, 0.90);
  border-color: rgba(248, 113, 113, 0.22);
}


/* ═══════════════════════════════════════════════════════════════
   QUICK EVALUATE DRAWER  — Phase 1
   ═══════════════════════════════════════════════════════════════ */

/* ── Backdrop + Wrapper ──────────────────────────────────── */
.qe-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  backdrop-filter: blur(2px);
}

#qe-wrapper {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
}
#qe-wrapper .qe-backdrop {
  pointer-events: all;
}

/* ── Drawer Shell ─────────────────────────────────────────── */
.qe-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 96vw);
  background: var(--surface, #1a1a1a);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 1101;
  pointer-events: all;
  transform: translateX(110%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}
.qe-drawer--open {
  transform: translateX(0);
}

/* ── Drawer Header ────────────────────────────────────────── */
.qe-drawer__hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.2);
}
.qe-drawer__icon {
  font-size: 20px;
  line-height: 1;
}
.qe-drawer__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  flex: 1;
  letter-spacing: -0.01em;
}
.qe-drawer__subtitle {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-top: 1px;
}
.qe-drawer__hdr-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.qe-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.qe-icon-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-primary, #fff);
}

/* ── Drawer Body ──────────────────────────────────────────── */
.qe-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
}
.qe-drawer__body::-webkit-scrollbar { width: 4px; }
.qe-drawer__body::-webkit-scrollbar-track { background: transparent; }
.qe-drawer__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }

/* ── Drawer Footer ────────────────────────────────────────── */
.qe-drawer__footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 14px 20px;
  background: rgba(0,0,0,0.15);
}
.qe-footer-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.qe-footer-bar .btn {
  font-size: 13px;
  padding: 7px 16px;
}
.qe-footer-bar .btn-accent {
  background: var(--accent, #c9a84c);
  color: #000;
  font-weight: 700;
  border: none;
}
.qe-footer-bar .btn-accent:hover {
  opacity: 0.88;
}
.qe-footer-bar--left {
  margin-right: auto;
}

/* ── Collapsible Section ─────────────────────────────────── */
.qe-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.qe-section__hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.qe-section__hdr:hover {
  background: rgba(255,255,255,0.03);
}
.qe-section__chevron {
  font-size: 11px;
  color: var(--text-muted, #888);
  transition: transform 0.2s;
  margin-left: auto;
  flex-shrink: 0;
}
.qe-section--collapsed .qe-section__chevron {
  transform: rotate(-90deg);
}
.qe-section__icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.qe-section__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
}
.qe-section__meta {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-left: 4px;
}
.qe-section__body {
  padding: 4px 20px 18px;
  display: grid;
  gap: 14px;
}
.qe-section--collapsed .qe-section__body {
  display: none;
}

/* ── Form Fields ─────────────────────────────────────────── */
.qe-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .qe-grid2 { grid-template-columns: 1fr; }
}
.qe-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qe-field--full {
  grid-column: 1 / -1;
}
.qe-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qe-input,
.qe-textarea,
.qe-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.qe-input:focus,
.qe-textarea:focus,
.qe-select:focus {
  outline: none;
  border-color: var(--accent, #c9a84c);
  background: rgba(255,255,255,0.07);
}
.qe-input::placeholder,
.qe-textarea::placeholder {
  color: rgba(255,255,255,0.25);
}
.qe-textarea {
  resize: vertical;
  min-height: 72px;
}
.qe-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.qe-select option {
  background: #1a1a1a;
  color: #fff;
}

/* ── LOB Checkbox Grid ────────────────────────────────────── */
.qe-lob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.qe-lob-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #fff);
}
.qe-lob-item input[type="checkbox"] {
  accent-color: var(--accent, #c9a84c);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}
.qe-lob-item:has(input:checked) {
  border-color: var(--accent, #c9a84c);
  background: rgba(201, 168, 76, 0.08);
  color: var(--accent, #c9a84c);
}
.qe-lob-item:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
}

/* ── Radio Groups ─────────────────────────────────────────── */
.qe-radio-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qe-radio-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted, #888);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.qe-radio-item input[type="radio"] {
  accent-color: var(--accent, #c9a84c);
  cursor: pointer;
}
.qe-radio-item:has(input:checked) {
  border-color: var(--accent, #c9a84c);
  background: rgba(201, 168, 76, 0.08);
  color: var(--accent, #c9a84c);
  font-weight: 600;
}

/* ── File Upload Tiles ────────────────────────────────────── */
.qe-upload-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.qe-upload-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 80px;
}
.qe-upload-tile:hover {
  border-color: var(--accent, #c9a84c);
  background: rgba(201, 168, 76, 0.04);
}
.qe-file-inp {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.qe-upload-icon {
  font-size: 20px;
  line-height: 1;
}
.qe-upload-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
}
.qe-upload-tile--loaded {
  border-color: var(--success, #22c55e);
  background: rgba(34, 197, 94, 0.05);
}
.qe-upload-tile--loaded .qe-upload-lbl {
  color: rgba(134, 239, 172, 0.9);
}

/* ── Results: Summary Strip ───────────────────────────────── */
.qe-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
@media (max-width: 500px) {
  .qe-summary-strip { grid-template-columns: repeat(2, 1fr); }
}
.qe-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.07);
  gap: 3px;
}
.qe-stat-pill:last-child { border-right: none; }
.qe-stat-pill__val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.qe-stat-pill__lbl {
  font-size: 10px;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.qe-win--high .qe-stat-pill__val { color: #4ade80; }
.qe-win--med  .qe-stat-pill__val { color: var(--accent, #c9a84c); }
.qe-win--low  .qe-stat-pill__val { color: #f87171; }
.qe-fit--strong   .qe-stat-pill__val { color: #4ade80; }
.qe-fit--selective .qe-stat-pill__val { color: var(--accent, #c9a84c); }
.qe-fit--limited  .qe-stat-pill__val { color: #f87171; }
.qe-stat-pill__val--neutral { color: var(--text-primary, #fff); }

/* ── Results: Meta Bar ────────────────────────────────────── */
.qe-results-meta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.qe-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  color: var(--text-muted, #888);
  font-weight: 500;
}
.qe-meta-tag b {
  color: var(--text-primary, #fff);
  font-weight: 700;
}
.qe-revise-btn {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent, #c9a84c);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qe-revise-btn:hover { opacity: 0.75; }
.qe-meta-naics-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Results: Section Blocks ─────────────────────────────── */
.qe-result-section {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.qe-result-section:last-child { border-bottom: none; }
.qe-result-section__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #888);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qe-result-section__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

/* ── Package Markets Section ─────────────────────────────── */
.qe-package-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qe-pkg-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.qe-pkg-card:hover {
  border-color: rgba(255,255,255,0.14);
}
.qe-pkg-card--rank1 {
  border-color: rgba(201, 168, 76, 0.35);
  background: rgba(201, 168, 76, 0.04);
}
.qe-pkg-card--rank1:hover {
  border-color: rgba(201, 168, 76, 0.55);
}
.qe-pkg-card__hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.qe-pkg-rank {
  font-size: 11px;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text-muted, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qe-pkg-card--rank1 .qe-pkg-rank {
  background: var(--accent, #c9a84c);
  color: #000;
}
.qe-pkg-carrier {
  flex: 1;
  min-width: 0;
}
.qe-pkg-carrier__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qe-pkg-carrier__writing {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 1px;
}
.qe-pkg-scores {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.qe-score-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.qe-score-chip--pkg {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent, #c9a84c);
  border: 1px solid rgba(201, 168, 76, 0.25);
}
.qe-score-chip--comp-strong {
  background: rgba(74, 222, 128, 0.10);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.qe-score-chip--comp-mod {
  background: rgba(251, 191, 36, 0.10);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.qe-score-chip--comp-limited {
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.2);
}
.qe-pkg-card__body {
  padding: 10px 14px;
}
.qe-pkg-reasons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qe-pkg-reason {
  font-size: 12px;
  color: var(--text-muted, #888);
  line-height: 1.5;
  display: flex;
  gap: 6px;
}
.qe-pkg-reason::before {
  content: '›';
  color: var(--accent, #c9a84c);
  font-weight: 700;
  flex-shrink: 0;
}
.qe-pkg-lobs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.qe-pkg-lob-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  color: var(--text-muted, #888);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Per-Line Rankings Section ───────────────────────────── */
.qe-line-blocks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qe-line-block {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  overflow: hidden;
}
.qe-line-block__hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.20);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.qe-line-block__name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.qe-line-block__mode {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(201, 168, 76, 0.10);
  color: var(--accent, #c9a84c);
  font-weight: 600;
  margin-left: auto;
}
.qe-line-carrier-list {
  display: flex;
  flex-direction: column;
}
.qe-line-carrier-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.qe-line-carrier-row:last-child { border-bottom: none; }
.qe-line-carrier-row:hover { background: rgba(255,255,255,0.02); }
.qe-line-rank {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted, #888);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  padding-top: 2px;
}
.qe-line-rank--1 { color: var(--accent, #c9a84c); }
.qe-line-carrier-info {
  flex: 1;
  min-width: 0;
}
.qe-line-carrier-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.qe-line-writing-co {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 1px;
}
.qe-line-reason {
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  margin-top: 3px;
  line-height: 1.4;
}
.qe-line-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.qe-fit-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.qe-fit-chip--strong {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}
.qe-fit-chip--good {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent, #c9a84c);
}
.qe-fit-chip--moderate {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}
.qe-fit-chip--limited {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}
.qe-comp-chip {
  font-size: 10px;
  color: var(--text-muted, #888);
  white-space: nowrap;
}

/* ── Carrier Direction (legacy flat list) ─────────────────── */
.qe-carrier-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qe-carrier-group__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 2px;
}
.qe-carrier-group--best .qe-carrier-group__label { color: #4ade80; }
.qe-carrier-group--maybe .qe-carrier-group__label { color: var(--accent, #c9a84c); }
.qe-carrier-group--avoid .qe-carrier-group__label { color: #f87171; }
.qe-carrier-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}
.qe-carrier-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  flex: 1;
}
.qe-carrier-reasons {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.qe-carrier-reason {
  font-size: 11px;
  color: var(--text-muted, #888);
  line-height: 1.4;
}
.qe-score-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.qe-score-pill--best  { background: rgba(74,222,128,0.12); color: #4ade80; }
.qe-score-pill--maybe { background: rgba(201,168,76,0.12); color: var(--accent,#c9a84c); }
.qe-score-pill--avoid { background: rgba(248,113,113,0.12); color: #f87171; }

/* ── Coverage Gaps ────────────────────────────────────────── */
.qe-gap-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qe-gap-card {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  border-left: 3px solid transparent;
  background: rgba(255,255,255,0.03);
  align-items: flex-start;
}
.qe-gap-card--critical {
  border-left-color: #f87171;
  background: rgba(248, 113, 113, 0.04);
}
.qe-gap-card--warning {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.04);
}
.qe-gap-card--info {
  border-left-color: rgba(255,255,255,0.18);
}
.qe-gap-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.qe-gap-content {
  flex: 1;
}
.qe-gap-text {
  font-size: 13px;
  color: var(--text-primary, #fff);
  font-weight: 600;
  line-height: 1.4;
}
.qe-gap-rec {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 3px;
  line-height: 1.4;
}

/* ── UW Concerns ──────────────────────────────────────────── */
.qe-concern-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qe-concern-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}
.qe-concern-row--critical { background: rgba(248,113,113,0.05); }
.qe-concern-row--warning  { background: rgba(251,191,36,0.05); }
.qe-concern-sev {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.qe-concern-sev--critical { background: rgba(248,113,113,0.15); color: #f87171; }
.qe-concern-sev--warning  { background: rgba(251,191,36,0.15); color: #fbbf24; }
.qe-concern-sev--info     { background: rgba(255,255,255,0.08); color: var(--text-muted,#888); }
.qe-concern-text {
  font-size: 12px;
  color: var(--text-primary, #fff);
  line-height: 1.5;
}

/* ── Sales Angle ──────────────────────────────────────────── */
.qe-sales-angle {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary, #fff);
  padding: 12px 16px;
  border-radius: 7px;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.15);
}

/* ── What We Still Need ───────────────────────────────────── */
.qe-need-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qe-need-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #888);
  line-height: 1.5;
}
.qe-need-row::before {
  content: '☐';
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  line-height: 1.3;
}

/* ── Empty / No Results ───────────────────────────────────── */
.qe-empty-state {
  text-align: center;
  padding: 20px;
  color: var(--text-muted, #888);
  font-size: 12px;
  font-style: italic;
}

/* ── Confidence Bar ───────────────────────────────────────── */
.qe-confidence-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted, #888);
}
.qe-conf-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.qe-conf-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent, #c9a84c);
  transition: width 0.4s ease;
}

/* ── Phase indicator ──────────────────────────────────────── */
.qe-phase-note {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  padding: 8px 20px 14px;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════
   QE + UW DARK ENFORCEMENT — NO BACKGROUND IMAGES
   Explicit solid backgrounds for all QE drawer + UW shell
   surfaces. Overrides token-based values to ensure the
   underwriting tool always renders as a dark decision platform.
   ═══════════════════════════════════════════════════════════════ */

/* ── Global input focus (QE context) ─────────────────────── */
.qe-drawer input:focus,
.qe-drawer textarea:focus,
.qe-drawer select:focus {
  outline: none;
  border-color: var(--accent, #c9a84c) !important;
  box-shadow: 0 0 0 1px var(--accent, #c9a84c) !important;
}

/* ── UW shell surfaces ───────────────────────────────────── */
.uw-shell,
.uw-work-area,
.uw-command-center {
  background: #0f1115 !important;
  background-image: none !important;
}

.uw-shell-header {
  background: #0b0d11 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.uwcc-command-bar {
  background: #0b0d11 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ── QE drawer shell ─────────────────────────────────────── */
.qe-drawer {
  background: #0f1115 !important;
  background-image: none !important;
}

.qe-drawer__hdr {
  background: #0b0d11 !important;
  background-image: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

.qe-drawer__footer {
  background: #0b0d11 !important;
  background-image: none !important;
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

.qe-drawer__body {
  background: #0f1115 !important;
  background-image: none !important;
}

/* ── Form section blocks ─────────────────────────────────── */
.qe-section {
  background: transparent !important;
  background-image: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* PRIMARY FIX: the <button> element gets browser-default light background
   without this rule — the source of all white section-header boxes.        */
.qe-section__hdr {
  background: #161a20 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  outline-offset: -2px !important;
}

.qe-section__hdr:hover {
  background: rgba(255, 255, 255, 0.028) !important;
}

.qe-section__hdr:focus-visible {
  outline: 2px solid rgba(201, 168, 76, 0.55) !important;
}

/* Number badge  */
.qe-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.40) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0;
}

/* Section title text */
.qe-section__title {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

/* "optional" badge inside section title */
.qe-section__title .qe-opt {
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.30) !important;
  margin-left: 4px;
}

/* Chevron arrow */
.qe-section__chevron {
  color: rgba(255, 255, 255, 0.30) !important;
}

.qe-section__body {
  background: transparent !important;
}

/* ── Form inputs ─────────────────────────────────────────── */
.qe-input,
.qe-textarea,
.qe-select {
  background: #161a20 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.qe-input::placeholder,
.qe-textarea::placeholder {
  color: rgba(255, 255, 255, 0.22) !important;
}

.qe-input:focus,
.qe-textarea:focus,
.qe-select:focus {
  background: #1c2028 !important;
  border-color: var(--accent, #c9a84c) !important;
  box-shadow: 0 0 0 1px var(--accent, #c9a84c) !important;
}

/* Select arrow stays dark-friendly */
.qe-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* ── LOB checkboxes ──────────────────────────────────────── */
.qe-lob-item {
  background: #161a20 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.qe-lob-item:hover {
  background: #1c2028 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.qe-lob-item:has(input:checked) {
  background: rgba(201, 168, 76, 0.08) !important;
  border-color: var(--accent, #c9a84c) !important;
  color: var(--accent, #c9a84c) !important;
}

/* ── Radio items ─────────────────────────────────────────── */
.qe-radio-item {
  background: #161a20 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.qe-radio-item:has(input:checked) {
  background: rgba(201, 168, 76, 0.08) !important;
  border-color: var(--accent, #c9a84c) !important;
  color: var(--accent, #c9a84c) !important;
}

/* ── Upload tiles ────────────────────────────────────────── */
.qe-upload-tile {
  background: #161a20 !important;
  background-image: none !important;
  border: 1px dashed rgba(255, 255, 255, 0.10) !important;
}

.qe-upload-tile:hover {
  background: #1c2028 !important;
  border-color: var(--accent, #c9a84c) !important;
}

.qe-upload-tile--loaded {
  background: rgba(34, 197, 94, 0.06) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ── Results: summary strip ──────────────────────────────── */
.qe-summary-strip {
  background: #0b0d11 !important;
  background-image: none !important;
}

.qe-stat-pill {
  background: transparent !important;
}

/* ── Results: meta bar ───────────────────────────────────── */
.qe-results-meta-bar {
  background: #0f1115 !important;
  background-image: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Result sections ─────────────────────────────────────── */
.qe-result-section {
  background: transparent !important;
  background-image: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── Package market cards ────────────────────────────────── */
.qe-pkg-card {
  background: #161a20 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.qe-pkg-card:hover {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

.qe-pkg-card--rank1 {
  background: #161a20 !important;
  border-color: rgba(201, 168, 76, 0.30) !important;
}

.qe-pkg-card--rank1:hover {
  border-color: rgba(201, 168, 76, 0.50) !important;
}

.qe-pkg-card__hdr {
  background: #0f1115 !important;
  background-image: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.qe-pkg-card__body {
  background: transparent !important;
}

/* ── Per-line blocks ─────────────────────────────────────── */
.qe-line-block {
  background: #161a20 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.qe-line-block__hdr {
  background: #0f1115 !important;
  background-image: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.qe-line-carrier-row {
  background: transparent !important;
}

.qe-line-carrier-row:hover {
  background: rgba(255, 255, 255, 0.018) !important;
}

/* ── Gap cards ───────────────────────────────────────────── */
.qe-gap-card {
  background: #161a20 !important;
  background-image: none !important;
}

.qe-gap-card--critical,
.qe-gap-card--high {
  background: rgba(248, 113, 113, 0.05) !important;
  border-left-color: #f87171 !important;
}

.qe-gap-card--warning,
.qe-gap-card--warn {
  background: rgba(251, 191, 36, 0.05) !important;
  border-left-color: #fbbf24 !important;
}

.qe-gap-card--info {
  background: #161a20 !important;
  border-left-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Concern rows ────────────────────────────────────────── */
.qe-concern-row {
  background: #161a20 !important;
  background-image: none !important;
}

.qe-concern-row--critical {
  background: rgba(248, 113, 113, 0.06) !important;
}

.qe-concern-row--warning {
  background: rgba(251, 191, 36, 0.05) !important;
}

/* ── Sales angle block ───────────────────────────────────── */
.qe-sales-angle {
  background: rgba(201, 168, 76, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(201, 168, 76, 0.12) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ── Carrier rows (legacy flat list) ─────────────────────── */
.qe-carrier-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.qe-carrier-group {
  background: transparent !important;
}

/* ── Text readability enforcement ────────────────────────── */
.qe-label,
.qe-section__label,
.qe-result-section__title,
.qe-line-block__name,
.qe-drawer__title {
  color: rgba(255, 255, 255, 0.88) !important;
}

.qe-pkg-carrier__writing,
.qe-line-writing-co,
.qe-line-reason,
.qe-pkg-reason,
.qe-carrier-reason,
.qe-gap-rec,
.qe-concern-text,
.qe-need-row,
.qe-meta-tag,
.qe-drawer__subtitle {
  color: rgba(255, 255, 255, 0.50) !important;
}

.qe-pkg-carrier__name,
.qe-line-carrier-name,
.qe-carrier-name,
.qe-gap-text {
  color: #ffffff !important;
}

/* ── Phase note ──────────────────────────────────────────── */
.qe-phase-note {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.20) !important;
}

/* ── Empty state ─────────────────────────────────────────── */
.qe-empty-state {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.30) !important;
}


/* ═══════════════════════════════════════════════════════════════
   QE LOB PICKER — fast pill selector + searchable dropdown
   ═══════════════════════════════════════════════════════════════ */

/* ── Picker root ─────────────────────────────────────────── */
.qe-lob-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Selected LOB tags row ───────────────────────────────── */
.qe-lob-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: #0f1115;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  min-height: 38px;
  align-items: center;
}

.qe-lob-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 10px;
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #c9a84c);
  white-space: nowrap;
  line-height: 1;
}

.qe-lob-tag__txt {
  pointer-events: none;
}

.qe-lob-tag__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: transparent;
  border: none;
  color: rgba(201, 168, 76, 0.6);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.qe-lob-tag__x:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

/* ── Core LOB pills row ──────────────────────────────────── */
.qe-lob-core-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qe-lob-core-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  background: #161a20;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
  user-select: none;
}

.qe-lob-core-pill:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: #1c2028;
  color: rgba(255, 255, 255, 0.88);
}

.qe-lob-core-pill--active {
  background: rgba(201, 168, 76, 0.10) !important;
  border-color: var(--accent, #c9a84c) !important;
  color: var(--accent, #c9a84c) !important;
}

.qe-lob-core-pill--active:hover {
  background: rgba(201, 168, 76, 0.15) !important;
}

/* ── "Add Additional Coverages" button ───────────────────── */
.qe-lob-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.40);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
  align-self: flex-start;
}

.qe-lob-add-btn:hover {
  border-color: rgba(201, 168, 76, 0.40);
  color: rgba(201, 168, 76, 0.80);
  background: rgba(201, 168, 76, 0.04);
}

.qe-lob-add-btn__icon {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}

/* ── Searchable dropdown panel ───────────────────────────── */
.qe-lob-dropdown {
  background: #0f1115;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.qe-lob-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: #0b0d11;
}

.qe-lob-search-icon {
  font-size: 13px;
  opacity: 0.4;
  flex-shrink: 0;
  pointer-events: none;
}

.qe-lob-search-inp {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: #ffffff;
  font-family: inherit;
  min-width: 0;
}

.qe-lob-search-inp::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* ── Dropdown option list ────────────────────────────────── */
.qe-lob-opt-list {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.qe-lob-opt-list::-webkit-scrollbar { width: 4px; }
.qe-lob-opt-list::-webkit-scrollbar-track { background: transparent; }
.qe-lob-opt-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }

.qe-lob-opt-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background 0.10s, color 0.10s;
  font-family: inherit;
}

.qe-lob-opt-item:hover {
  background: rgba(201, 168, 76, 0.07);
  color: var(--accent, #c9a84c);
}

.qe-lob-opt-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
  font-style: italic;
  text-align: center;
}

/* Suppress old checkbox grid if any residual markup */
.qe-lob-grid { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   QE LOB SUGGESTIONS — NAICS-driven coverage recommendations
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────── */
.qe-lob-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: #0b0d11;
  border: 1px solid rgba(201, 168, 76, 0.14);
  border-radius: 7px;
  animation: qe-suggest-fadein 0.18s ease;
}

@keyframes qe-suggest-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header row ──────────────────────────────────────────── */
.qe-lob-suggestions__hdr {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qe-lob-suggestions__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(201, 168, 76, 0.65);
}

.qe-lob-suggestions__industry {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(201, 168, 76, 0.08);
  color: rgba(201, 168, 76, 0.55);
  border: 1px solid rgba(201, 168, 76, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Pill list ───────────────────────────────────────────── */
.qe-lob-suggestions__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Individual suggestion pill ──────────────────────────── */
.qe-lob-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
  user-select: none;
  position: relative;
}

/* Subtle spark/suggest indicator */
.qe-lob-suggestion::before {
  content: '↳';
  font-size: 10px;
  opacity: 0.35;
  color: var(--accent, #c9a84c);
  flex-shrink: 0;
}

.qe-lob-suggestion:hover {
  border-color: rgba(201, 168, 76, 0.30);
  background: rgba(201, 168, 76, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

.qe-lob-suggestion:hover::before {
  opacity: 0.7;
}

/* ── Selected / active state ─────────────────────────────── */
.qe-lob-suggestion--active {
  background: rgba(201, 168, 76, 0.10) !important;
  border-color: var(--accent, #c9a84c) !important;
  color: var(--accent, #c9a84c) !important;
}

.qe-lob-suggestion--active::before {
  content: '✓';
  opacity: 1;
  color: var(--accent, #c9a84c);
}

.qe-lob-suggestion--active:hover {
  background: rgba(201, 168, 76, 0.14) !important;
}


/* ═══════════════════════════════════════════════════════════════
   QE — CONFIDENCE BADGES + AUTO-SELECT INDICATORS
   ═══════════════════════════════════════════════════════════════ */

/* ── Confidence badge ────────────────────────────────────── */
.qe-conf-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.qe-conf-badge--high {
  background: rgba(74, 222, 128, 0.10);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.22);
}

.qe-conf-badge--medium {
  background: rgba(201, 168, 76, 0.10);
  color: var(--accent, #c9a84c);
  border: 1px solid rgba(201, 168, 76, 0.20);
}

/* ── Document source tag ─────────────────────────────────── */
.qe-lob-suggestions__source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(99, 179, 237, 0.10);
  color: rgba(147, 210, 255, 0.80);
  border: 1px solid rgba(99, 179, 237, 0.18);
  white-space: nowrap;
}

/* ── Suggestion pill — auto-mark dot ─────────────────────── */
/* Subtle indicator that this pill is in the "auto-select" tier */
.qe-lob-suggestion--automark {
  border-color: rgba(201, 168, 76, 0.16) !important;
}

.qe-lob-suggestion__auto-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent, #c9a84c);
  opacity: 0.55;
  flex-shrink: 0;
  margin-left: 4px;
  vertical-align: middle;
}

/* When auto-mark pill is active, dot is brighter */
.qe-lob-suggestion--active .qe-lob-suggestion__auto-dot {
  opacity: 1;
}

/* ── Auto-selected tag (⚡ in selected row) ──────────────── */
.qe-lob-tag--auto {
  background: rgba(201, 168, 76, 0.12) !important;
  border-color: rgba(201, 168, 76, 0.35) !important;
}

.qe-lob-tag__icon {
  font-size: 10px;
  line-height: 1;
  opacity: 0.70;
  flex-shrink: 0;
  pointer-events: none;
}

/* Fade auto indicator slightly so it doesn't compete with the label */
.qe-lob-tag--auto .qe-lob-tag__txt {
  color: var(--accent, #c9a84c);
}

/* Hover on auto tag: show it can be manually removed */
.qe-lob-tag--auto:hover {
  border-color: rgba(201, 168, 76, 0.50) !important;
}

/* Tooltip-style visual when auto tag is about to be removed */
.qe-lob-tag--auto .qe-lob-tag__x:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

/* ── Package posture badge on cards ─────────────────────────── */
.qe-pkg-posture {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.qe-pkg-posture__icon { font-size: 12px; flex-shrink: 0; }
.qe-pkg-posture__label { color: rgba(255,255,255,0.55); }
.qe-pkg-posture__label b { color: rgba(255,255,255,0.88); font-weight: 600; }
.qe-pkg-posture__reason { color: rgba(255,255,255,0.38); font-style: italic; }

.qe-pkg-posture--bop {
  background: rgba(34,197,94,0.05) !important;
  border-color: rgba(34,197,94,0.18) !important;
}
.qe-pkg-posture--bop .qe-pkg-posture__label b { color: #4ade80 !important; }

.qe-pkg-posture--mixed {
  background: rgba(251,191,36,0.05) !important;
  border-color: rgba(251,191,36,0.15) !important;
}
.qe-pkg-posture--mixed .qe-pkg-posture__label b { color: #fbbf24 !important; }

.qe-pkg-posture--package {
  background: rgba(96,165,250,0.05) !important;
  border-color: rgba(96,165,250,0.15) !important;
}
.qe-pkg-posture--package .qe-pkg-posture__label b { color: #60a5fa !important; }

.qe-pkg-posture--monoline {
  background: rgba(167,139,250,0.05) !important;
  border-color: rgba(167,139,250,0.15) !important;
}
.qe-pkg-posture--monoline .qe-pkg-posture__label b { color: #a78bfa !important; }

/* ── Summary strip posture pill ─────────────────────────────── */
.qe-posture--bop      .qe-stat-pill__val { color: #4ade80 !important; }
.qe-posture--mixed    .qe-stat-pill__val { color: #fbbf24 !important; }
.qe-posture--package  .qe-stat-pill__val { color: #60a5fa !important; }
.qe-posture--monoline .qe-stat-pill__val { color: #a78bfa !important; }

/* ══════════════════════════════════════════════════════════════
   BROAD SAFETY NET — catches any remaining light surfaces inside
   #qe-wrapper that browser defaults or global styles could set.
   Applied last so specificity wins over all prior rules.
   ══════════════════════════════════════════════════════════════ */

/* Every button used as an accordion/tab header inside QE */
#qe-wrapper button.qe-section__hdr,
#qe-wrapper .accordion-header,
#qe-wrapper .qe-step-header,
#qe-wrapper .qe-block-header {
  background: #161a20 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Any leftover white wrappers / panels inside the drawer */
#qe-wrapper .card,
#qe-wrapper .panel,
#qe-wrapper .well,
#qe-wrapper .box,
#qe-wrapper fieldset,
#qe-wrapper legend {
  background: #161a20 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  box-shadow: none !important;
}

/* Kill any lingering white text-field backgrounds */
#qe-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#qe-wrapper textarea,
#qe-wrapper select {
  background: #161a20 !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Ensure no white showing through on the outer #qe-wrapper itself */
#qe-wrapper {
  background: transparent !important;
  background-image: none !important;
}

/* ── Hard-reset ALL buttons inside QE drawer ────────────────
   Kills browser-default grey background / border / appearance
   so class-based styles (qe-icon-btn, btn, etc.) are in full
   control.  Must come AFTER the section-header overrides.
   ─────────────────────────────────────────────────────────── */
#qe-wrapper button {
  background:          none !important;
  background-image:    none !important;
  border:              none !important;
  -webkit-appearance:  none !important;
  appearance:          none !important;
  box-shadow:          none !important;
}

/* Re-apply styled classes that need their own border/bg */
#qe-wrapper button.qe-icon-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           28px !important;
  height:          28px !important;
  border-radius:   6px !important;
  background:      transparent !important;
  border:          1px solid rgba(255,255,255,0.10) !important;
  color:           rgba(255,255,255,0.55) !important;
  cursor:          pointer !important;
  transition:      background 0.15s, border-color 0.15s, color 0.15s !important;
  flex-shrink:     0 !important;
}
#qe-wrapper button.qe-icon-btn:hover {
  background:    rgba(255,255,255,0.07) !important;
  border-color:  rgba(255,255,255,0.22) !important;
  color:         #fff !important;
}
#qe-wrapper button.qe-icon-btn svg {
  width:  14px;
  height: 14px;
  display: block;
  pointer-events: none;
}

/* btn classes used inside QE footer need border/bg restored */
#qe-wrapper button.btn {
  border:     1px solid transparent !important;
}
#qe-wrapper button.btn-accent {
  background:   var(--accent, #3b82f6) !important;
  border-color: var(--accent, #3b82f6) !important;
  color:        #fff !important;
}
#qe-wrapper button.btn-secondary {
  background:   rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color:        rgba(255,255,255,0.75) !important;
}
#qe-wrapper button.btn-secondary:hover {
  background:   rgba(255,255,255,0.10) !important;
  color:        #fff !important;
}

/* ── QE → Submission provenance banner ──────────────────────
   Uses app tokens (--border-subtle, --text-muted, --accent)
   so it follows theme changes automatically.
   Dismiss is session-only — no stored state.
   ─────────────────────────────────────────────────────────── */
.qe-import-banner {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       10px 14px;
  margin-bottom: 16px;
  border-radius: 8px;
  background:    rgba(var(--accent-rgb, 59 130 246) / 0.06);
  border:        1px solid rgba(var(--accent-rgb, 59 130 246) / 0.18);
  color:         var(--text-secondary, rgba(255,255,255,0.70));
}
.qe-import-banner__icon {
  font-size:   16px;
  flex-shrink: 0;
  margin-top:  2px;
  opacity:     0.75;
}
.qe-import-banner__body {
  flex:      1;
  min-width: 0;
}
.qe-import-banner__title {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--accent, #60a5fa);
  margin-bottom:  5px;
}
.qe-import-banner__meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px 12px;
  font-size: 12px;
  color:     var(--text-muted, rgba(255,255,255,0.50));
}
.qe-import-banner__meta strong {
  color:       var(--text-primary, #fff);
  font-weight: 600;
}
/* Posture label color follows existing posture token classes */
.qe-import-banner--posture-bop      .qe-import-banner__posture strong { color: var(--color-success,  #4ade80); }
.qe-import-banner--posture-mixed    .qe-import-banner__posture strong { color: var(--color-warning,  #fbbf24); }
.qe-import-banner--posture-package  .qe-import-banner__posture strong { color: var(--color-info,     #60a5fa); }
.qe-import-banner--posture-monoline .qe-import-banner__posture strong { color: var(--color-purple,   #a78bfa); }
.qe-import-banner__notes {
  margin-top:  5px;
  font-size:   11px;
  color:       var(--text-muted, rgba(255,255,255,0.38));
  font-style:  italic;
  line-height: 1.5;
}
/* Dismiss — session-only, no permanent stored state */
.qe-import-banner__dismiss {
  flex-shrink:  0;
  background:   none;
  border:       none;
  appearance:   none;
  font-size:    10px;
  line-height:  1;
  padding:      3px 5px;
  border-radius: 3px;
  color:        var(--text-muted, rgba(255,255,255,0.28));
  cursor:       pointer;
}
.qe-import-banner__dismiss:hover {
  color:       var(--text-secondary, rgba(255,255,255,0.60));
  background:  rgba(255,255,255,0.06);
}

/* ── QE footer bar layout ───────────────────────────────────── */
.qe-footer-bar {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}
.qe-footer-bar .btn-accent {
  margin-right: auto;
}

/* ================================================================
   PRE-SUBMISSION ANALYSIS
   Decision-first screen between Smart Builder and Submission Workspace
   ================================================================ */

.psa-page {
  max-width: 1060px; margin: 0 auto; padding: 0 24px 40px;
}

/* Header */
.psa-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; margin-bottom: 8px; border-bottom: 1px solid var(--ibx-border-1);
}
.psa-header-left {
  display: flex; align-items: center; gap: 10px;
}
.psa-title {
  font-size: 16px; font-weight: 700; color: var(--text);
}

/* ── Section chrome ─────────────────────────────────────────── */
.psa-section {
  margin-top: 20px;
}
.psa-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ibx-text-3); margin-bottom: 10px;
}
.psa-empty {
  font-size: 13px; color: var(--ibx-text-3); padding: 18px; text-align: center;
  border: 1px dashed var(--ibx-border-1); border-radius: 8px;
}

/* ── Decision block (top of page) ───────────────────────────── */
.psa-decision {
  border-radius: 10px; padding: 20px 24px; margin-top: 16px;
  border: 1.5px solid var(--ibx-border-1); background: var(--ibx-surface-2);
}
.psa-decision--go      { border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.04); }
.psa-decision--partial { border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.04); }
.psa-decision--info    { border-color: rgba(234,179,8,0.4);  background: rgba(234,179,8,0.04); }
.psa-decision--hold    { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.04); }

.psa-decision-top {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 16px;
}
.psa-decision-label {
  font-size: 18px; font-weight: 800; color: var(--text);
  white-space: nowrap; flex-shrink: 0; line-height: 1.3;
}
.psa-decision-bullets {
  list-style: disc; margin: 0; padding-left: 18px; font-size: 13px;
  color: var(--ibx-text-2); line-height: 1.55;
}
.psa-decision-bullets li + li { margin-top: 2px; }

.psa-decision-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.psa-action-btn {
  font-size: 13px !important; padding: 8px 18px !important;
}
.psa-action-btn--muted {
  opacity: 0.65;
}
.psa-action-btn--muted:hover { opacity: 1; }

/* ── Targets strip (Most Competitive / Best Available) ──────── */
.psa-targets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px;
}
@media (max-width: 700px) { .psa-targets { grid-template-columns: 1fr; } }

.psa-target-card {
  background: var(--ibx-surface-2); border: 1px solid var(--ibx-border-1);
  border-radius: 10px; padding: 16px 18px;
}
.psa-target-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.psa-target-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ibx-text-3);
}
.psa-target-score {
  font-size: 10px; font-weight: 700; color: var(--ibx-text-3);
  background: var(--ibx-surface-3); padding: 2px 8px; border-radius: 4px;
}
.psa-target-carrier {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.psa-target-name {
  font-size: 15px; font-weight: 800; color: var(--text);
}
.psa-target-meta {
  display: flex; gap: 10px; font-size: 11px; color: var(--ibx-text-3);
  margin-bottom: 8px;
}
.psa-target-access { font-weight: 600; }
.psa-target-access--direct  { color: #22c55e; }
.psa-target-access--mga     { color: #3b82f6; }
.psa-target-access--limited { color: #eab308; }
.psa-target-access--none    { color: #ef4444; }
.psa-target-sub {
  font-size: 11px; color: var(--ibx-text-3); margin-top: 8px;
  line-height: 1.4;
}
.psa-target-gap {
  font-size: 11px; color: #eab308; margin-top: 6px;
  padding: 5px 8px; background: rgba(234,179,8,0.06);
  border-radius: 4px; border: 1px solid rgba(234,179,8,0.15);
  line-height: 1.4;
}
.psa-targets--single {
  grid-template-columns: 1fr;
}
.psa-targets--single .psa-target-card {
  border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.03);
}

/* ── Section subtitle ───────────────────────────────────────── */
.psa-section-sub {
  font-size: 12px; color: var(--ibx-text-3); margin-top: -6px; margin-bottom: 10px;
}

/* ── Intelligence notice ────────────────────────────────────── */
.psa-intel-notice {
  font-size: 12px; color: var(--ibx-text-3); padding: 10px 14px;
  background: rgba(59,130,246,0.05); border: 1px solid rgba(59,130,246,0.15);
  border-radius: 6px; margin-bottom: 12px; line-height: 1.45;
}

/* ── Confidence badges ──────────────────────────────────────── */
.psa-conf {
  font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
  line-height: 1.4;
}
.psa-conf--high      { color: #22c55e; background: rgba(34,197,94,0.12); }
.psa-conf--medium    { color: #eab308; background: rgba(234,179,8,0.12); }
.psa-conf--low       { color: var(--ibx-text-3); background: var(--ibx-surface-3); }
.psa-conf--benchmark { color: #3b82f6; background: rgba(59,130,246,0.12); }

/* ── Carrier evidence gaps ──────────────────────────────────── */
.psa-carrier-gaps {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ibx-border-1);
}
.psa-gap {
  font-size: 11px; color: var(--ibx-text-3); line-height: 1.4;
  padding: 1px 0; opacity: 0.8;
}
.psa-gap::before {
  content: '\25CB '; /* ○ */
  font-size: 9px;
}

/* ── Carrier attack board ───────────────────────────────────── */
.psa-carrier-board {
  display: flex; flex-direction: column; gap: 14px;
}
.psa-carrier-tier { }
.psa-tier-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 6px; padding-left: 2px;
}
.psa-tier--primary   { color: #22c55e; }
.psa-tier--secondary { color: #eab308; }
.psa-tier--avoid     { color: #ef4444; }

.psa-carrier-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px;
}

.psa-carrier-card {
  background: var(--ibx-surface-2); border: 1px solid var(--ibx-border-1);
  border-radius: 8px; padding: 12px 14px;
}
.psa-carrier-top {
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
}
.psa-carrier-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.psa-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}
.psa-dot--green { background: #22c55e; }
.psa-dot--amber { background: #eab308; }
.psa-dot--red   { background: #ef4444; }

.psa-rating {
  font-size: 10px; font-weight: 700; color: var(--ibx-text-3);
  background: var(--ibx-surface-3); padding: 1px 6px; border-radius: 4px;
  flex-shrink: 0;
}
.psa-carrier-meta {
  display: flex; gap: 8px; font-size: 11px; color: var(--ibx-text-3); margin-bottom: 6px;
}
.psa-carrier-access { }
.psa-carrier-lobs   { }

.psa-carrier-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.psa-carrier-tag {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  line-height: 1.4; white-space: nowrap;
}
.psa-carrier-tag--pos {
  color: #22c55e; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2);
}
.psa-carrier-tag--neg {
  color: #ef4444; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.18);
}
.psa-carrier-tag--warn {
  color: #eab308; background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.18);
}
.psa-carrier-tag--info {
  color: #3b82f6; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.18);
}

/* Rank badge */
.psa-rank {
  font-size: 11px; font-weight: 800; color: var(--ibx-text-3);
  background: var(--ibx-surface-3); border-radius: 4px;
  padding: 1px 6px; flex-shrink: 0; min-width: 24px; text-align: center;
}

/* ── Coverage + gaps table ──────────────────────────────────── */
.psa-cov-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.psa-cov-table th {
  text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ibx-text-3); padding: 6px 8px;
  border-bottom: 2px solid var(--ibx-border-1);
}
.psa-cov-table td {
  padding: 8px; border-bottom: 1px solid var(--ibx-border-1); vertical-align: middle;
}
.psa-cov-table tr:last-child td { border-bottom: none; }

.psa-cov-status { width: 28px; text-align: center; }
.psa-cov-check  { color: #22c55e; font-weight: 700; font-size: 14px; }
.psa-cov-gap    { color: #eab308; font-size: 14px; }
.psa-cov-dash   { color: var(--ibx-text-3); }
.psa-cov-name   { font-weight: 600; color: var(--text); white-space: nowrap; }
.psa-cov-pri    { white-space: nowrap; }
.psa-cov-reason { color: var(--ibx-text-3); font-size: 12px; }

.psa-cov-row--gap td { background: rgba(234,179,8,0.04); }

.psa-pri {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.psa-pri--req   { color: var(--ibx-gold); background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.25); }
.psa-pri--rec   { color: #3b82f6; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); }
.psa-pri--ifa   { color: var(--ibx-text-3); background: var(--ibx-surface-3); border: 1px solid var(--ibx-border-1); }
.psa-pri--added { color: #8b5cf6; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); }

/* ── Risk flags ─────────────────────────────────────────────── */
.psa-flags {
  margin-top: 12px; display: flex; flex-direction: column; gap: 6px;
}
.psa-flag {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  border-radius: 6px; border: 1px solid var(--ibx-border-1); font-size: 12px;
}
.psa-flag--high { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.04); }
.psa-flag--med  { border-color: rgba(234,179,8,0.3);  background: rgba(234,179,8,0.04); }
.psa-flag--low  { border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.04); }

.psa-flag-sev {
  font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 3px;
  white-space: nowrap; flex-shrink: 0; margin-top: 1px;
}
.psa-flag--high .psa-flag-sev { color: #ef4444; background: rgba(239,68,68,0.12); }
.psa-flag--med  .psa-flag-sev { color: #eab308; background: rgba(234,179,8,0.12); }
.psa-flag--low  .psa-flag-sev { color: #3b82f6; background: rgba(59,130,246,0.12); }

.psa-flag-body  { flex: 1; min-width: 0; }
.psa-flag-title  { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.psa-flag-detail { color: var(--ibx-text-3); line-height: 1.4; }

/* ── Account snapshot ───────────────────────────────────────── */
.psa-snapshot { }
.psa-snap-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--ibx-surface-2);
  border: 1px solid var(--ibx-border-1); border-radius: 8px; font-size: 13px;
}
.psa-snap-item {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.psa-snap-icon  { font-size: 16px; }
.psa-snap-label { font-weight: 600; color: var(--text); }
.psa-snap-val   { color: var(--ibx-text-2); }
.psa-snap-sep   { width: 1px; height: 16px; background: var(--ibx-border-1); flex-shrink: 0; }
.psa-snap-ops   {
  font-size: 12px; color: var(--ibx-text-3); margin-top: 8px;
  padding: 0 16px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Line selector modal (partial attack) ───────────────────── */
.psa-line-check {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--text); cursor: pointer;
}
.psa-line-check input { margin: 0; }