/* ============================================================================
   DealDashboard — design system, phase 1
   ============================================================================
   Professional financial-tool aesthetic (Linear / Attio / Koyfin references,
   not marketing SaaS). Loaded AFTER styles.css so these rules win the
   cascade at equal specificity — most of the legacy UI already reads its
   colors/fonts from CSS custom properties, so redefining the tokens below
   repaints the whole app without touching every legacy rule. New structural
   pieces (sidebar shell, topbar, restyled data tables) are defined here in
   full. Legacy ad-hoc CSS is deleted from styles.css as each view migrates —
   this phase migrates the shell + every table.companies data grid.
   ============================================================================ */

/* -------------------------------- tokens -------------------------------- */
:root {
  --bg:           #FAFAF7;   /* warm off-white */
  --panel:        #F3F1EA;
  --sidebar:      #F3F1EA;
  --card:         #FFFFFF;
  --border:       #E7E5E0;
  --text:         #111318;   /* ink */
  --text-dim:     #6B6D76;
  --muted:        #6B6D76;
  --accent:       #1A7F5A;   /* deep green — the ONE accent for primary actions */
  --accent-ink:   #FFFFFF;
  --accent-soft:  #E5F2EB;
  --pos:          #1A7F5A;
  --warn:         #B4620A;
  --neg:          #B3261E;
  --row-hover:    #F3F1EA;
  --row-selected: #E5F2EB;

  --badge-pos-text:  #146245;
  --badge-info-text: #3F4451;   /* neutral ink, not blue — kept for legacy tier/stage badges */
  --badge-warn-text: #8A4B08;
  --badge-neg-text:  #8F1D17;
  --badge-mid-text:  #3F4451;   /* was violet — replaced with neutral ink */
  --badge-dark-text: #5B5D66;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius:       6px;
  --sidebar-w:    228px;
  --topbar-h:     52px;
}

[data-theme="dark"] {
  --bg:           #15161B;
  --panel:        #1B1C22;
  --sidebar:      #131418;
  --card:         #1B1C22;
  --border:       #2B2C33;
  --text:         #F2F1EC;
  --text-dim:     #9A9BA4;
  --muted:        #9A9BA4;
  --accent:       #2FA579;
  --accent-ink:   #08130F;
  --accent-soft:  #12261F;
  --pos:          #2FA579;
  --warn:         #D08A3E;
  --neg:          #E0635A;
  --row-hover:    #1F2027;
  --row-selected: #16281F;

  --badge-pos-text:  #4FC79A;
  --badge-info-text: #C7C8D1;
  --badge-warn-text: #E0AA63;
  --badge-neg-text:  #F09B93;
  --badge-mid-text:  #C7C8D1;
  --badge-dark-text: #ABACB5;
}

/* ------------------------------ base type -------------------------------- */
html, body { background: var(--bg); }
body, button, input, select, textarea { font-family: var(--font-sans); }
.mono, .cell-money, .cell-num, .cell-score, code, pre, kbd, samp { font-family: var(--font-mono); }

/* ------------------------------ app shell -------------------------------- */
.app-shell {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.sidebar-brand i, .sidebar-brand svg { width: 18px; height: 18px; color: var(--accent); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 10px;
}
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.sidebar-nav .nav-link i, .sidebar-nav .nav-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sidebar-nav .nav-link:hover {
  background: var(--row-hover);
  color: var(--text);
  border-color: transparent;
}
.sidebar-nav .nav-link.nav-link--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.sidebar-nav .nav-link.nav-link--active i { color: var(--accent); }

.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  opacity: 0.75;
  padding: 14px 12px 6px;
}

.sidebar-tools {
  margin-top: auto;
  padding: 8px 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-tool-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
}
.sidebar-tool-link i, .sidebar-tool-link svg { width: 13px; height: 13px; }
.sidebar-tool-link:hover { background: var(--row-hover); color: var(--text); }

/* ------------------------------- main column ------------------------------ */
.app-main {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  flex: 0 0 var(--topbar-h);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Flex row so the icon, the director/company mode pill (inserted by app.js
   right before #global-search) and the input all sit on one line — the
   legacy .header-search block lays these out in normal flow, which wraps
   once the input's width:100% collides with the pill's own width. */
.topbar-search.header-search {
  margin: 0;
  flex: 0 1 420px;
  max-width: 420px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 10px;
}
.topbar-search-icon {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  flex: 0 0 auto;
  pointer-events: none;
}
.topbar-search .search-mode-pill { margin: 0; flex: 0 0 auto; }
.topbar-search input[type="search"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 7px 0;
}
.topbar-search input[type="search"]:focus { outline: none; border: none; }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.credits-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: default;
}
.credits-chip i, .credits-chip svg { width: 13px; height: 13px; }

.theme-toggle {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

.user-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
}
.user-menu-btn i, .user-menu-btn svg { width: 16px; height: 16px; }
.user-menu-btn:hover { color: var(--text); border-color: var(--accent); }

/* dropdown built by static/auth.js */
.user-menu-pop {
  position: fixed;
  z-index: 4000;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(17, 19, 24, .12);
  padding: 6px;
}
.user-menu-pop .user-menu-email {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-pop .user-menu-logout {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  color: var(--neg);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.user-menu-pop .user-menu-logout:hover { background: var(--row-hover); }

/* --------------------------- settings sub-nav ------------------------------ */
.settings-subnav {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.settings-subnav .subnav-link {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius);
  cursor: pointer;
}
.settings-subnav .subnav-link:hover { background: var(--row-hover); color: var(--text); }
.settings-subnav .subnav-link.subnav-link--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ------------------------------ view viewport ------------------------------ */
.view-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.view-viewport > main { height: 100%; overflow: auto; }
.view-viewport > main.layout { display: flex; overflow: hidden; height: 100%; }
.view-viewport > main[hidden] { display: none; }

/* ================================ HOME VIEW ================================ */
.home-area { padding: 24px 28px; overflow-y: auto; height: 100%; }
.home-head h2 { margin: 0 0 2px; font-size: 18px; }
.home-head .muted { font-size: 12.5px; }

.home-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin: 20px 0 28px;
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
}
.home-card:hover { border-color: var(--accent); }
.home-card--accent { background: var(--accent-soft); border-color: var(--accent-soft); }
.home-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-weight: 600;
}
.home-card-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}
.home-card--accent .home-card-value { color: var(--accent); }
.home-card-sub { font-size: 11.5px; color: var(--text-dim); }

.home-section { margin-bottom: 24px; max-width: 720px; }
.home-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-weight: 600;
  margin: 0 0 8px;
}
.home-breakdown { display: flex; flex-direction: column; gap: 6px; }
.home-breakdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.home-breakdown-row .hbr-label { flex: 0 0 110px; color: var(--text-dim); text-transform: capitalize; }
.home-breakdown-row .hbr-bar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.home-breakdown-row .hbr-bar-fill { height: 100%; background: var(--accent); }
.home-breakdown-row .hbr-count { flex: 0 0 34px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.home-list { display: flex; flex-direction: column; }
.home-list-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.home-list-row:last-child { border-bottom: none; }
.home-list-row .hlr-date { flex: 0 0 78px; color: var(--text-dim); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.home-list-row .hlr-name { flex: 1 1 auto; color: var(--text); }
.home-empty { color: var(--text-dim); font-style: italic; font-size: 12.5px; }

/* ============================ DATA TABLES (shared) ========================= */
/* Every table.companies grid (Companies / Pipeline / Gazette / Letters /
   Jobs / Tier Settings / Roll-up members) picks this up in one pass. */
table.companies {
  font-size: 12.5px;
}
table.companies thead {
  background: var(--card);
}
table.companies th {
  height: 32px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
table.companies td {
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
}
table.companies tbody tr:hover { background: var(--row-hover); }
table.companies tbody tr.row--selected {
  background: var(--row-selected);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Numeric columns: mono, tabular figures, right-aligned */
.cell-money, .cell-num, .cell-score {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cell-bool { text-align: center; }

/* Score / motivation chips — semantic red/amber/green only */
.sc-hi   { color: var(--pos);  background: var(--accent-soft); }
.sc-mid  { color: var(--warn); background: #FBF0DF; }
.sc-lo   { color: var(--warn); background: #FBEADF; }
.sc-vlo  { color: var(--neg);  background: #FBE6E4; }
[data-theme="dark"] .sc-mid { background: #2C2419; }
[data-theme="dark"] .sc-lo  { background: #2C2119; }
[data-theme="dark"] .sc-vlo { background: #2C1D1B; }

.mot-hi  { background: var(--pos); }
.mot-mid { background: var(--warn); }
.mot-lo  { background: var(--text-dim); }

/* ============================= FLAT CARD SURFACES =========================== */
.table-area, .filters, .detail, .top-filter-region {
  background: var(--card);
}
.table-area { border-right: 0; }
.filters { background: var(--panel); }

/* The sidebar claims ~228px of horizontal room that the old top-nav shell
   didn't — a few legacy toolbars assumed the full viewport width and
   overflow without wrapping now. Low-risk fix: let them wrap. */
.rollups-controls { flex-wrap: wrap; }

/* Section headers as 11px uppercase tracked labels (detail panel, cards) */
.detail-body h3, .home-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Buttons — the deep green accent is the ONLY accent for primary actions */
button.primary, .btn-flat.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
button.primary:hover:not(:disabled), .btn-flat.primary:hover { filter: brightness(1.08); }

.btn-toggle.active, .priority-btn.active, .tier-btn.active,
.view-mode-btn--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.view-mode-btn--active:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); }

/* Pipeline-mode banner (Companies table filtered to in_pipeline=true) was
   hardcoded indigo — retint to the single accent. */
body.app-mode-pipeline .top-filter-bar { border-top-color: var(--accent); }
body.app-mode-pipeline .top-filter-bar::before {
  color: var(--accent);
  background: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}

/* Legend: keep [hidden] semantics from styles.css intact — no override here. */

/* ============================================================================
   Phase 2 — Company Profile (header tags / stat row / tabs / action rail)
   ============================================================================ */

.detail-header { flex-wrap: wrap; row-gap: 8px; }
.dp-headtitle { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.dp-headtags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dp-num { color: var(--text-dim); font-size: 12px; }

.dp-score-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 12px; background: var(--panel); color: var(--text-dim);
}
.dp-status-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--panel); color: var(--text-dim); border: 1px solid var(--border);
}
.dp-status-badge.dp-status--active { color: var(--pos); border-color: var(--accent-soft); background: var(--accent-soft); }
.dp-status-badge.dp-status--neg    { color: var(--neg); }
.dp-tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px;
  font-size: 11px; font-weight: 500; background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
}
.dp-tag--niche { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

/* Stat row — mono, right-aligned figures, em-dash for nulls (set by app.js) */
.dp-statrow {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  margin: 0 16px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
}
.dp-stat {
  flex: 1 1 0; min-width: 84px; min-height: 52px; padding: 8px 12px; box-sizing: border-box;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 2px;
}
.dp-stat:last-child { border-right: 0; }
.dp-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); align-self: stretch; text-align: right; }
.dp-stat-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

/* Row split: tab content + action rail. Single column in the compact side
   panel (unchanged from before this restructure); becomes a row only in
   fullpage-detail-mode, where the rail is also revealed. */
.dp-content-row { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dp-content-row .detail-body { flex: 1 1 auto; }
.dp-rail { display: none; }

body.fullpage-detail-mode .dp-content-row { flex-direction: row; gap: 28px; align-items: flex-start; }
body.fullpage-detail-mode .dp-content-row .detail-body { flex: 1 1 auto; min-width: 0; }
body.fullpage-detail-mode .dp-rail {
  display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 216px; position: sticky; top: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); padding: 14px;
}
/* The rail replaces these inline header actions in fullpage mode. */
body.fullpage-detail-mode .detail-header > .ai-research-btn { display: none; }

.dp-rail-section { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.dp-rail-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); font-weight: 600; }
.dp-rail-status { font-size: 11px; color: var(--text-dim); min-height: 14px; }
.dp-rail-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 12.5px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.dp-rail-btn i, .dp-rail-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.dp-rail-btn:hover { border-color: var(--accent); color: var(--accent); }
.dp-rail-btn.dp-rail-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dp-rail-btn.dp-rail-btn--primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
.dp-rail-btn.dp-rail-btn--on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }

/* Detail tabs (built by app.js only in fullpage-detail-mode) — retint from
   the legacy hardcoded blue to the single accent. */
#detail-tab-bar { border-bottom-color: var(--border); background: var(--bg); }
.dtab { color: var(--text-dim); font-family: var(--font-sans); }
.dtab--active { color: var(--accent); border-bottom-color: var(--accent); }

/* Ratio grid — always-visible formula captions instead of hover-only title
   tooltips (each row already carries its formula in the title attribute). */
.ratios-table tbody tr[title] .lab::after {
  content: attr(title);
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-dim);
  margin-top: 1px;
}
.ratios-table .lab { white-space: normal; max-width: 220px; }

/* Quick Valuation / Deal Financial Model — flat-card restyle, figures in mono */
.qv-panel, .dfm-panel {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  padding: 4px 12px; margin: 10px 0;
}
.qv-panel > summary, .dfm-panel > summary { font-size: 13px; font-weight: 600; padding: 8px 0; cursor: pointer; }
.qv-output, .dfm-output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.qv-row label, .dfm-grid-3 label, .dfm-grid-4 label { font-size: 11px; color: var(--text-dim); }
.qv-row input, .dfm-grid-3 input, .dfm-grid-4 input {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right;
}
.dfm-table td:not(:first-child), .dfm-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================================
   Phase 2 — Pipeline Kanban board
   ============================================================================ */
.kanban-area { padding: 16px 20px 20px; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.kanban-toolbar { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex: 0 0 auto; }
.kanban-toolbar h2 { margin: 0; font-size: 16px; }

.kanban-board {
  display: flex; gap: 12px; align-items: flex-start;
  flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; min-height: 0;
}
.kanban-col {
  flex: 0 0 260px; width: 260px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  max-height: 100%; overflow: hidden;
}
.kanban-col--collapsed { flex-basis: 56px; width: 56px; }
.kanban-col--collapsed .kanban-col-body { display: none; }
.kanban-col--collapsed .kanban-col-head { writing-mode: vertical-rl; text-orientation: mixed; height: 100%; justify-content: flex-start; gap: 10px; padding: 12px 0; }
.kanban-col--rejected { border-style: dashed; }

.kanban-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; flex: 0 0 auto;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); border-bottom: 1px solid var(--border); background: var(--card);
}
.kanban-col-count {
  font-size: 11px; font-weight: 700; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center;
}

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

.kanban-card {
  display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; cursor: grab; text-decoration: none; color: var(--text);
}
.kanban-card:hover { border-color: var(--accent); }
.kanban-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kanban-card--ghost { opacity: 0.4; }
.kc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.kc-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.kc-amber-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: var(--warn); margin-top: 3px; }
.kc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.kc-cn { font-size: 10.5px; color: var(--text-dim); }
.kc-score { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.kc-next { margin-top: 6px; font-size: 11px; color: var(--text); background: var(--accent-soft); border-radius: 4px; padding: 3px 6px; }
.kc-days { margin-top: 6px; font-size: 10.5px; }

.kanban-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: var(--text); color: var(--bg); padding: 8px 16px; border-radius: var(--radius);
  font-size: 12.5px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 4000;
}
.kanban-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.kanban-toast--error { background: var(--neg); color: #fff; }

/* ============================================================================
   Phase 2 — Find Companies: collapsible grouped filters rail
   ============================================================================ */

/* .view-companies was a column (top bar + body); it's now a row: the rail
   on the left, then the existing table+detail body filling the rest. */
.view-companies { flex-direction: row; }
.filters-rail {
  flex: 0 0 260px; width: 260px; min-width: 260px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border-right: 1px solid var(--border);
  overflow-y: auto; padding: 12px 12px 16px;
  box-sizing: border-box;
}
.filters-rail-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.filters-rail-top .tfb-group { display: flex; align-items: center; gap: 8px; }
.filters-rail-top .tfb-label { flex: 0 0 46px; }
.filters-rail-top .btn-group { flex: 1 1 auto; }
.filters-rail-top .btn-toggle { flex: 1 1 0; }

.filter-group {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  margin-bottom: 8px; overflow: hidden;
}
.filter-group > summary {
  padding: 8px 10px; cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); display: flex; align-items: center; gap: 6px;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::before { content: '›'; display: inline-block; transition: transform .12s; font-size: 13px; }
.filter-group[open] > summary::before { transform: rotate(90deg); }
.filter-group[open] > summary { border-bottom: 1px solid var(--border); }
.filter-group-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.fg-full { width: 100%; box-sizing: border-box; }
.fg-row { display: flex; flex-direction: column; gap: 4px; }
.fg-row--buttons { flex-direction: row; gap: 6px; }
.fg-row--buttons button { flex: 1 1 0; }
.fg-range { display: flex; flex-direction: column; gap: 4px; }
.fg-range-inputs { display: flex; align-items: center; gap: 6px; }
.fg-range-inputs input { flex: 1 1 0; min-width: 0; }
.filter-group-body select,
.filter-group-body input[type="number"],
.filter-group-body input[type="search"] {
  background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 8px; font-size: 12.5px; color: var(--text);
}
.filter-group-body .tfb-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.filter-group-body .tfb-subscores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.filter-group-body .tfb-field { display: flex; align-items: center; gap: 4px; }
.filter-group-body .tfb-field input { width: 48px; }

.filters-rail-foot { display: flex; gap: 6px; margin-top: 4px; }
.filters-rail-foot button { flex: 1 1 0; }

/* Active-filter chips — now inside the rail, above the collapsible groups */
.filters-rail .filter-chips { margin-bottom: 10px; }

/* Table toolbar (view-mode / page size / CSV) — moved out of the old top bar */
.table-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-bottom: 1px solid var(--border); background: var(--card);
}

/* Fullpage company-profile mode hides the filters rail too (it hid the old
   .top-filter-region by that class name — renamed here to .filters-rail). */
body.fullpage-detail-mode .filters-rail { display: none !important; }

/* ============================================================================
   Phase 2 — Empty states + loading skeletons
   ============================================================================ */
.dd-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 48px 24px; text-align: center; color: var(--text-dim);
}
.dd-empty-state i, .dd-empty-state svg { width: 32px; height: 32px; color: var(--text-dim); opacity: .6; margin-bottom: 6px; }
.dd-empty-state h3 { margin: 0; font-size: 14px; color: var(--text); }
.dd-empty-state p { margin: 0; font-size: 12.5px; max-width: 320px; }
.dd-empty-state .dd-empty-cta { margin-top: 8px; }

@keyframes skeleton-shimmer { 0% { background-position: -260px 0; } 100% { background-position: calc(260px + 100%) 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--border) 37%, var(--panel) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.3s ease infinite;
  border-radius: 4px;
}
.skeleton-bar { height: 11px; width: 100%; }
table.companies tbody tr.skeleton-row:hover { background: transparent; }
table.companies tbody tr.skeleton-row td { cursor: default; }

.kanban-col.skeleton-col .kanban-col-body { gap: 8px; }
.kanban-col.skeleton-col .kanban-card-skel {
  height: 74px; border: 1px solid var(--border); border-radius: var(--radius);
}