* { box-sizing: border-box; }

:root {
  --surface-1: #ffffff;
  --page-plane: #f5f6f8; /* Monday/ClickUp-style flat light gray canvas */
  --text-primary: #0f172a;
  --text-secondary: #52525b;
  --muted: #94a3b8;
  --gridline: #e2e8f0;
  --border: rgba(15, 23, 42, 0.08);

  /* Primary brand accent — purple, ClickUp-inspired. Replaces the old navy. */
  --primary: #7b68ee;
  --primary-dark: #5a4fcf;
  --primary-tint: rgba(123, 104, 238, 0.1);
  --primary-ink: #ffffff;

  /* Dark sidebar surface — separate from the light content plane. */
  --sidebar-bg: #0f172a;
  --sidebar-bg-dark: #0a0f1c;

  /* Fixed categorical order — same hue always means the same category. */
  --cat-operations: #0086f0;
  --cat-legal: #00c875;
  --cat-finance: #a25ddc;
  --cat-sales: #fdab3d;

  /* Reserved status colors — never reused for categories. */
  --status-good: #00c875;
  --status-warning: #fdab3d;
  --status-critical: #e2445c;
  --status-serious: #f2762e;

  /* Solid Monday-style status pill palette — task status is a free-text,
     admin-editable list (see Settings), so this is a small fixed set that
     STATUS_CLASS in app.js maps names onto, with a neutral fallback for any
     custom status an admin adds. */
  --pill-blue: var(--cat-operations);
  --pill-teal: #00b8d9;
  --pill-orange: var(--cat-sales);
  --pill-red: var(--status-critical);
  --pill-green: var(--status-good);
  --pill-purple: var(--cat-finance);
  --pill-gray: #94a3b8;
  --pill-slate: #64748b;

  /* Sequential (magnitude) hues for the dashboard's bar charts — reuses the
     first two categorical slots per the palette's own convention, but only
     ever appears in chart contexts, never alongside the category badges. */
  --seq-blue: var(--cat-operations);
  --seq-aqua: var(--cat-legal);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #1a1a22;
    --page-plane: #101018;
    --text-primary: #f4f4f6;
    --text-secondary: #c3c2cf;
    --muted: #8a8a9a;
    --gridline: #2c2c38;
    --border: rgba(255, 255, 255, 0.1);

    --primary: #9384ff;
    --primary-dark: #7b68ee;
    --sidebar-bg: #0a0a12;
    --sidebar-bg-dark: #05050a;

    --cat-operations: #3fa0ff;
    --cat-legal: #2bdb94;
    --cat-finance: #bb85ea;
    --cat-sales: #ffbb5c;
  }
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  color: var(--text-primary);
  background: var(--page-plane);
}

a { color: inherit; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }

/* .inline-dropdown-toggle's default background/color live here (rather
   than with the rest of its rule further down) so they're declared before
   the colored badge/pill classes combined onto the same button for
   Category/Status/Priority cells (.cat-operations, .status-pill-*,
   .priority-cell.prio-*) — equal specificity (all single classes), so
   source order decides, and those need to win for the actual hue. Without
   this split, the toggle's own neutral background/color (declared later,
   alongside its padding/border/cursor chrome) would win instead, washing
   every colored dropdown out to a plain gray box — this is exactly what
   happened to the Lead Status pills (Hot/Warm/Cold) until this was split
   out. Plain-select and priority (no colored background of its own) still
   fall back to this default correctly, since nothing later overrides it
   for them. */
.inline-dropdown-toggle { background: var(--page-plane); color: var(--text-primary); }

/* ---------- Shell: full-height sidebar (brand + nav) + content column (topbar + main) ---------- */

.app-shell { display: flex; flex-direction: row; min-height: 100vh; }

/* Sidebar spans the full viewport height, brand mark included at its top —
   the topbar to the right only ever covers the content column, never the
   sidebar, so the brand reads as anchoring the whole app rather than
   floating in a separate strip above everything. */
.sidebar-shell {
  display: flex;
  flex-direction: column;
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-dark));
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  flex-shrink: 0;
}
.sidebar-brand .logo-wrap {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  line-height: 0;
  box-shadow: var(--shadow-sm);
}
.sidebar-brand .logo { height: 34px; width: auto; display: block; }
.sidebar-brand .brand { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: #ffffff; }

.content-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 28px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--gridline);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}

.sidebar-toggle {
  display: none;
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
}

.acting-as { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.acting-as-avatar { width: 30px; height: 30px; }
.acting-as-select {
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 600;
}
.acting-as-select option { color: var(--text-primary); }
.acting-as-label { font-weight: 600; font-size: 0.86rem; color: var(--text-primary); }
.logout-btn { padding: 5px 12px; font-size: 0.78rem; }

.sidebar {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }

.sidebar-group { margin-bottom: 22px; padding: 0 10px; }
.sidebar-group h3 {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 10px 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-sm);
}

.sidebar-link:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.sidebar-link.active { background: var(--primary); box-shadow: 0 8px 20px -6px var(--primary); font-weight: 700; color: #ffffff; }
.sidebar-link .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sidebar-link .label { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-link .count { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; font-weight: 700; background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 1px 7px; }
.sidebar-link.active .count { color: #ffffff; background: rgba(255, 255, 255, 0.2); }

.sidebar-backdrop { display: none; }

.page { flex: 1; padding: 16px 32px 28px; max-width: 1280px; }
.page h1 { font-size: 1.4rem; margin: 0 0 12px; }
.page-subtitle { margin: -8px 0 12px; color: var(--text-secondary); font-size: 0.88rem; max-width: 640px; }

/* ---------- Category color system ---------- */
/* One fixed hue per category, used consistently everywhere (sidebar dot,
   badges, summary grid) — never reassigned, never reused for status. */

.cat-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cat-operations-dot { background: var(--cat-operations); }
.cat-legal-dot { background: var(--cat-legal); }
.cat-finance-dot { background: var(--cat-finance); }
.cat-sales-dot { background: var(--cat-sales); }

.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.cat-operations { background: color-mix(in srgb, var(--cat-operations) 14%, var(--surface-1)); color: var(--cat-operations); }
.cat-legal { background: color-mix(in srgb, var(--cat-legal) 14%, var(--surface-1)); color: var(--cat-legal); }
.cat-finance { background: color-mix(in srgb, var(--cat-finance) 14%, var(--surface-1)); color: var(--cat-finance); }
.cat-sales { background: color-mix(in srgb, var(--cat-sales) 14%, var(--surface-1)); color: var(--cat-sales); }
.cat-none { background: var(--page-plane); color: var(--muted); }

/* ---------- Status color system (reserved — never used for categories) ---------- */

.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; }
.status-dot.good { background: var(--status-good); }
.status-dot.warning { background: var(--status-warning); }
.status-dot.critical { background: var(--status-critical); }
.status-dot.neutral { background: var(--muted); }

.status-text { display: inline-flex; align-items: center; font-weight: 700; }
.status-text.critical-text { color: var(--status-critical); }
.status-text.warning-text { color: #9a6a00; } /* darkened for contrast on light surface */
.status-text.good-text { color: var(--status-good); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--gridline);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge-closed { background: color-mix(in srgb, var(--status-good) 16%, var(--surface-1)); color: var(--status-good); }
.badge-status-active { background: color-mix(in srgb, var(--status-good) 16%, var(--surface-1)); color: var(--status-good); }
.badge-status-paused { background: color-mix(in srgb, #9a6a00 16%, var(--surface-1)); color: #9a6a00; }
.badge-good { background: color-mix(in srgb, var(--status-good) 16%, var(--surface-1)); color: var(--status-good); }
.badge-bad { background: color-mix(in srgb, var(--status-critical) 14%, var(--surface-1)); color: var(--status-critical); }

/* Solid, filled status pill (task status column) — bold color-fill instead
   of a tinted-outline badge, deliberately loud so state is scannable at a
   glance in a dense table. STATUS_CLASS in app.js maps status names to the
   modifier classes below; unmapped/custom statuses fall back to neutral. */
.status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ffffff;
  white-space: nowrap;
}
.status-pill.pill-closed { opacity: 0.55; }
.status-pill-blue { background: var(--pill-blue); }
.status-pill-teal { background: var(--pill-teal); }
.status-pill-orange { background: var(--pill-orange); }
.status-pill-red { background: var(--pill-red); }
.status-pill-green { background: var(--pill-green); }
.status-pill-purple { background: var(--pill-purple); }
.status-pill-slate { background: var(--pill-slate); }
.status-pill-gray { background: var(--pill-gray); }

/* ---------- Priority flag (editable <select>, reskinned to read as a
   colored flag+label rather than a plain dropdown) ---------- */

.priority-cell {
  font-weight: 700;
  font-size: 0.82rem;
}
.priority-cell::before { content: "\2691  "; } /* ⚑ flag glyph, no icon font/CDN needed */
.priority-cell.prio-red { color: var(--pill-red); }
.priority-cell.prio-orange { color: var(--pill-orange); }
.priority-cell.prio-gray { color: var(--muted); }

/* ---------- Avatar stack (assignees) ---------- */

.avatar-stack { display: flex; align-items: center; }
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}
.avatar-stack .avatar:not(:first-child) { margin-left: -8px; }
.avatar.avatar-more { background: var(--gridline); color: var(--text-secondary); }

/* ---------- Executive summary grid ---------- */

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

.summary-card {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

.summary-card h4 { margin: 0 0 10px; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; }
.summary-card .metrics { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.summary-metric { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); }
.summary-metric strong { font-size: 0.95rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.summary-metric.behind strong { color: var(--status-critical); }

.summary-card.cat-operations { border-left-color: var(--cat-operations); }
.summary-card.cat-legal { border-left-color: var(--cat-legal); }
.summary-card.cat-finance { border-left-color: var(--cat-finance); }
.summary-card.cat-sales { border-left-color: var(--cat-sales); }

/* ---------- Stat tiles + dashboard sections ---------- */

.stat-tiles { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px 26px;
  text-align: center;
  min-width: 130px;
}
.stat-tile .value { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary); }
.stat-tile .label { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; font-weight: 700; }
.stat-tile .sub { font-size: 0.72rem; color: var(--muted); margin-top: 4px; font-weight: 600; text-transform: none; letter-spacing: normal; }

/* Dashboard numbers double as links into their filtered detail view (see
   statTile/goal cards in dashboard.js) — same look as the plain version,
   plus a hover lift so it reads as clickable. */
a.stat-tile, a.goal-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
a.stat-tile:hover, a.goal-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--primary);
}

/* Tasks-by-Category metric lines (Not started/In progress/.../Behind
   target) link into that category+status combo — the card itself isn't a
   link, the sidebar already jumps to a category/project (see categoryCard
   in dashboard.js). */
a.summary-metric {
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.12s ease;
}
a.summary-metric:hover { background: var(--page-plane); }
a.summary-metric:hover strong { color: var(--primary); }

.dashboard-section { margin-bottom: 32px; }
.dashboard-section h2 { font-size: 1.02rem; margin: 0 0 14px; }

/* ---------- Weekly goal cards (Social Media Campaign) ---------- */

.goal-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.goal-card {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  min-width: 180px;
  flex: 1 1 180px;
}
.goal-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.goal-card-name { font-weight: 700; font-size: 0.92rem; }
.goal-card-count { font-size: 0.92rem; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.goal-card-count.met { color: var(--status-good); }
.goal-progress-track { height: 8px; border-radius: 999px; background: var(--gridline); margin: 10px 0 12px; overflow: hidden; }
.goal-progress-fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.2s ease; }
.goal-progress-fill.met { background: var(--status-good); }
.goal-card .btn { width: 100%; }
.goal-cell { font-variant-numeric: tabular-nums; color: var(--muted); }
.goal-cell.met { color: var(--status-good); font-weight: 600; }

/* Two-per-row layout for the Sales zone's funnel/breakdown charts — shrinks
   each card so the whole zone fits in one screenshot instead of stacking 4
   full-width charts. Falls back to 1 column on narrow viewports. */
.dashboard-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.dashboard-2col .dashboard-section { margin-bottom: 0; }
.dashboard-2col .bar-label { width: 130px; font-size: 0.78rem; }
@media (max-width: 860px) {
  .dashboard-2col { grid-template-columns: 1fr; }
}

/* Divides the dashboard into Task metrics (above) and Sales metrics
   (below) — bigger and uppercase so it reads as a zone break, not just
   another section title. */
.dashboard-zone-heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 8px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--gridline);
}

/* ---------- Bar charts (status breakdown / lead funnel) ---------- */

.bar-chart { display: flex; flex-direction: column; gap: 10px; background: var(--surface-1); border: 1px solid var(--gridline); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label { width: 190px; flex-shrink: 0; font-size: 0.82rem; color: var(--text-secondary); text-align: right; }
.bar-track { flex: 1; background: var(--page-plane); border-radius: 999px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--seq-blue); transition: width 0.2s ease; }
.bar-fill.funnel { background: var(--seq-aqua); }
.bar-fill.status.closed { opacity: 0.4; }
.bar-count { width: 34px; flex-shrink: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dashboard bar rows link into the detail view filtered to that row (see
   hrefFor in dashboard.js's barChart) — plain link reset plus a hover
   highlight so it reads as clickable without disturbing the layout. */
a.bar-row.clickable {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.12s ease;
}
a.bar-row.clickable:hover { background: var(--page-plane); }
a.bar-row.clickable:hover .bar-label { color: var(--primary); font-weight: 600; }

/* ---------- Trend sparkline (Campaigns page, 30-day daily opens) ---------- */

.trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.trend-bar { flex: 1; min-width: 3px; background: var(--seq-blue); border-radius: 3px 3px 0 0; min-height: 2px; }
.trend-bar-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-top: 8px; }

/* ---------- Filter controls (Campaigns page date-range/campaign pickers) ---------- */

.control-group { display: flex; flex-direction: column; gap: 4px; }
.control-group label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.control-group select, .control-group input { min-width: 190px; }
.date-pair { display: flex; align-items: center; gap: 8px; }
.date-pair .date-sep { font-size: 0.82rem; color: var(--muted); }
.date-pair input[type="date"]:disabled { background: color-mix(in srgb, var(--muted) 14%, var(--surface-1)); color: var(--muted); opacity: 1; cursor: default; }
.table-note { font-size: 0.82rem; color: var(--muted); margin: -6px 0 10px; }

/* ---------- Collapsible section (repeat openers) ---------- */

details.expand { background: var(--surface-1); border: 1px solid var(--gridline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
details.expand summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; user-select: none; }
details.expand summary::-webkit-details-marker { display: none; }
details.expand summary .arrow { font-size: 0.7rem; color: var(--muted); transition: transform 0.15s ease; }
details.expand[open] summary .arrow { transform: rotate(90deg); }
details.expand summary:hover { background: var(--page-plane); }
details.expand .expand-body { padding: 0 18px 18px; }
details.expand .data-table { box-shadow: none; }

/* ---------- Toolbar / filters / table (shared across pages) ---------- */

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 6px 8px;
}

select, input, textarea {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 7px 10px;
  border: 1px solid var(--gridline);
  border-radius: var(--radius-sm);
  background: var(--page-plane);
  color: var(--text-primary);
}

/* ---------- Custom inline dropdown (replaces native <select> in table
   cells — see inlineDropdown() in app.js for why) ---------- */
.inline-dropdown { position: relative; width: 100%; }
.inline-dropdown-toggle {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 7px 10px;
  border: 1px solid var(--gridline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
}
.inline-dropdown-panel {
  /* fixed, not absolute — .table-scroll's overflow:auto clips an absolutely-
     positioned descendant once it would render outside the scroll
     container's own bounds (that's what made this panel disappear/require
     scrolling on rows near the bottom of the table); fixed positioning
     escapes that clip, at the cost of needing its top/left set from JS
     instead of flowing under the toggle — see positionPanel() in
     inlineDropdown() (app.js). */
  position: fixed;
  z-index: 40;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  max-width: 280px;
  max-height: 280px;
  overflow-y: auto;
}
.inline-dropdown-panel[hidden] { display: none; }
.inline-dropdown-item {
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
}
.inline-dropdown-item:hover { background: var(--page-plane); }
.inline-dropdown-item.selected { font-weight: 700; }

.btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
}

.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); box-shadow: 0 8px 20px -8px var(--primary); }
.btn-secondary { background: var(--surface-1); }
.btn-danger { background: var(--status-critical); color: #fff; border-color: var(--status-critical); }
.btn:hover { opacity: 0.9; }

/* Behind Target toolbar toggle (Tasks page) — same red as the Dashboard's
   "Behind Target" stat tile when active, so the two read as the same signal. */
.behind-target-toggle.active { background: var(--status-critical); color: #fff; border-color: var(--status-critical); }

/* Sort-by toolbar dropdown (Tasks/Projects/Leads/Prospects/Referral
   Partners/Archive) — a plain 2-option <select> styled to match the other
   toolbar buttons rather than the smaller inline .plain-select used in
   table cells. */
.sort-select {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 26px 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gridline);
  background-color: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-1);
}

.data-table th, .data-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gridline);
  font-size: 0.88rem;
  vertical-align: top;
}

.data-table th {
  background: var(--surface-1);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 3;
}
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--page-plane); }

/* Table gets the "card" treatment: rounded + shadowed wrapper. Corner
   radius is applied to the first/last header/footer cells individually
   rather than `overflow: hidden` on the table — that would also clip any
   absolutely-positioned dropdown (e.g. the per-row assignee picker) that
   needs to extend past the table's own box. */
.data-table { border: 1px solid var(--gridline); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.data-table thead tr:first-child th { border-top: none; }
.data-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-lg); }
.data-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-lg); }
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.data-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }

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

/* ---------- Resizable columns (all CRM tables) ---------- */
/* Every table cell always wraps rather than truncating — narrowing a
   column (drag the handle in the header) never hides data, it just makes
   the row taller. This also matters structurally: an earlier version used
   `overflow: hidden` here, which silently clipped the per-row assignee
   picker's dropdown panel since it's an absolutely-positioned child of the
   cell — wrapping instead of clipping fixed that as a side effect. */
.resizable-table { table-layout: fixed; }
.resizable-table th, .resizable-table td { overflow-wrap: break-word; white-space: normal; }
/* No position: relative here — .data-table th already sets position: sticky
   (to freeze the header row on scroll), which equally establishes the
   containing block the absolutely-positioned .col-resize-handle needs.
   Setting relative here would win the cascade (same specificity, declared
   later) and silently cancel the sticky header. */

.wrap-cell { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word; }

/* Interactive controls placed directly in a table cell (the due-date input,
   the assignee picker toggle, the inline dropdown toggle) are capped to the
   cell's width so narrowing a column (drag the resize handle) shrinks the
   control instead of letting it spill into the next column — but their text
   wraps rather than getting cut off/ellipsized, same as plain text cells, so
   narrowing a column never hides data. Their popups (.inline-dropdown-panel,
   .multiselect-panel) are unaffected — those escape this overflow because
   they aren't laid out as part of the closed control's own box. */
.resizable-table td > select,
.resizable-table td > input:not([type="checkbox"]),
.resizable-table td > .multiselect,
.resizable-table td > .inline-dropdown {
  max-width: 100%;
  box-sizing: border-box;
}
.resizable-table td > .multiselect > .assignee-toggle {
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
}

/* Row-selection checkbox column — fixed width, not resizable. */
.select-col { text-align: center; }
.select-col input[type="checkbox"] { cursor: pointer; }

/* ---------- Frozen first column + frozen header (Tasks/Leads/Prospects/
   Referral Partners/Archive) ---------- */
/* Scroll container for the table itself (rather than the whole page/sidebar
   scrolling horizontally) — required so `left` below has a stable scrollport
   to stick against. Per the CSS overflow spec, once overflow-x is anything
   but `visible`, overflow-y is forced to become a scroll container too (it
   gets promoted from `visible` to `auto` even if authored as `visible`
   explicitly — there's no way to make one axis scroll and the other stay a
   true non-scrolling `visible`). That means `.data-table th`'s
   `position: sticky; top: 0` inside this element can only freeze against
   *this* element's own scrolling — not the outer page — so max-height below
   is load-bearing: without it .table-scroll just grows to fit its content
   and never itself scrolls, so the sticky header has nothing to stick
   against and silently stops freezing (exactly what happened when this
   wrapper was added for the frozen-first-column feature). The precise pixel
   value is set by fitTableScrollHeight() in app.js to exactly fill the
   viewport below the table on each page; this is just a same-ballpark
   fallback in case JS hasn't run yet. */
.table-scroll { overflow: auto; max-height: 75vh; }

/* Columns 1-2 (the select checkbox, always 36px, then whichever data column
   renders first — Task/Lead name — see taskColumns()/leadColumns() in
   app.js/tasks.js) stay pinned to the left edge while the rest of the row
   scrolls underneath, so the record's identity never scrolls out of view —
   e.g. while scrolling right to reach the Notes column. An opaque background
   is required on sticky cells so scrolled-under column content doesn't show
   through; the hover/header rules below keep that background in sync with
   the same states the rest of the row already has. */
.resizable-table th:nth-child(1),
.resizable-table td:nth-child(1),
.resizable-table th:nth-child(2),
.resizable-table td:nth-child(2) {
  position: sticky;
  background: var(--surface-1);
}
.resizable-table th:nth-child(1),
.resizable-table td:nth-child(1) { left: 0; z-index: 2; }
.resizable-table th:nth-child(2),
.resizable-table td:nth-child(2) { left: 36px; z-index: 2; border-right: 1px solid var(--gridline); }
/* Header cells are already `position: sticky; top: 0` (see .data-table th)
   — the frozen header corner needs to out-stack both the frozen body cells
   below it and the rest of the sticky header row while scrolling. */
.resizable-table th:nth-child(1),
.resizable-table th:nth-child(2) { z-index: 4; }
.resizable-table tbody tr:hover td:nth-child(1),
.resizable-table tbody tr:hover td:nth-child(2) { background: var(--page-plane); }

/* ---------- Inline-editable colored selects (category/status, in-table) ---------- */
/* Reuses the existing .cat-operations/.cat-legal/.../.status-pill-* color
   classes (already defined above) for background/color — these two classes
   just add select-specific chrome (padding, radius, no native arrow box). */

/* No background/color here on purpose — .cat-select/.status-select are
   combined on the same element with a color class (.cat-operations,
   .status-pill-blue, ...) which must win for the actual hue. Declaring
   color here too would out-cascade those since this rule is defined later
   in the file at equal specificity. */
.cat-select, .status-select {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 22px 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px;
}
.cat-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>"); }
.status-select {
  color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
}
.status-select option { color: var(--text-primary); background: var(--surface-1); }

.plain-select {
  appearance: none;
  border: 1px solid var(--gridline);
  border-radius: var(--radius-sm);
  padding: 5px 22px 5px 8px;
  font-size: 0.85rem;
  background-color: var(--page-plane);
  color: var(--text-primary);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px;
}

/* Inline due-date input — colored left border carries the same
   overdue/due-soon/on-track signal the old badge had; the date text itself
   is always the primary, legible signal (never color alone). */
.due-input {
  border-left: 4px solid var(--gridline);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 5px 8px;
  cursor: pointer;
}
.due-input.due-critical { border-left-color: var(--status-critical); color: var(--status-critical); }
.due-input.due-warning { border-left-color: var(--status-warning); color: #9a6a00; }
.due-input.due-good { border-left-color: var(--status-good); }

/* Compact per-row multiselect toggle (assignees) — reuses .multiselect-panel
   styling, just a smaller pill-shaped toggle instead of the filter bar's
   text button. */
.assignee-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px dashed var(--gridline);
  border-radius: 999px;
  background: var(--surface-1);
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
}
.assignee-toggle:hover { border-color: var(--primary); color: var(--primary); }
.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  transform: translateX(50%);
  z-index: 2;
}
.col-resize-handle:hover, .col-resize-handle.resizing { background: var(--primary); opacity: 0.6; }

/* ---------- Multi-select status filter ---------- */

.multiselect { position: relative; }
.multiselect-toggle { min-width: 150px; text-align: left; }
.multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
}
.multiselect-panel label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: normal; white-space: nowrap; }
.multiselect-panel[hidden] { display: none; }

/* "Select all"/"Deselect all" row at the top of every filter panel — long
   lists (Category, Stage, People) were slow to narrow to one value by
   unchecking everything else box by box. */
.multiselect-actions { display: flex; gap: 12px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--gridline); }
.multiselect-actions .link-btn { font-size: 0.78rem; white-space: nowrap; }

/* Convert-to menu (Lead detail modal) — reuses .multiselect/.multiselect-panel
   positioning, but plain click-to-act menu items instead of checkboxes. */
.convert-menu { padding: 6px; min-width: 220px; }
.convert-menu-item {
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.convert-menu-item:hover { background: var(--page-plane); }

/* ---------- Inline notes column ---------- */

.notes-cell {
  width: 100%;
  min-width: 160px;
  font-size: 0.82rem;
  border-color: transparent;
  background: transparent;
}
.notes-cell:hover, .notes-cell:focus { border-color: var(--gridline); background: var(--page-plane); }

/* ---------- Next Action inline cell (click-to-edit — see inlineTextInput()
   in app.js) ---------- */
.next-action-cell { width: 100%; }
.next-action-display {
  min-height: 1.5em;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  cursor: text;
}
.next-action-display:hover, .next-action-display:focus { border-color: var(--gridline); background: var(--page-plane); outline: none; }
.next-action-display.next-action-empty { color: var(--muted); }
.next-action-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.82rem;
  border-color: transparent;
  background: transparent;
}
.next-action-input:hover, .next-action-input:focus { border-color: var(--gridline); background: var(--page-plane); }

.next-action-wrap { display: flex; align-items: flex-start; gap: 4px; width: 100%; }
.next-action-wrap .next-action-cell { flex: 1; min-width: 0; }
.next-action-done-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--gridline);
  border-radius: 50%;
  background: var(--page-plane);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}
.next-action-done-btn:hover { border-color: var(--status-good); color: var(--status-good); }
.next-action-done-btn:disabled { opacity: 0.5; cursor: default; }

.notes-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Focus states (previously entirely absent) ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.data-table tbody tr:focus-visible { outline-offset: -2px; background: var(--primary-tint); }

/* ---------- Modal — slide-in right panel ---------- */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: stretch; justify-content: flex-end;
  z-index: 100;
}

.modal {
  position: relative;
  background: var(--surface-1);
  border-radius: 0;
  padding: 28px;
  width: 100%;
  max-width: 560px;
  height: 100%;
  overflow-y: auto;
  box-shadow: -20px 0 50px rgba(15, 23, 42, 0.18);
  animation: modal-slide-in 0.22s ease;
}
@keyframes modal-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@media (max-width: 640px) {
  .modal { max-width: 100%; }
}

.modal h2 { margin-top: 0; padding-right: 32px; }

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.modal-close-btn:hover { background: var(--page-plane); color: var(--text-primary); }

.form-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.form-row input, .form-row select, .form-row textarea { width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.checkbox-list { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-list label { font-weight: normal; display: flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--text-primary); text-transform: none; }

.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Detail-modal summary — pills row up top, then a two-column card of
   label/value facts. renderInfoGrid() (app.js) drops any field with no
   value instead of printing "Label: —", so a sparse record shows a short
   tidy card instead of a wall of dashes. */
.detail-header-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }

.detail-section { margin-top: 18px; }
.detail-section h3 { margin-bottom: 8px; }

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  padding: 14px 16px;
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.info-item { min-width: 0; }
.info-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 2px; }
.info-value { font-size: 0.88rem; color: var(--text-primary); word-break: break-word; }
.info-value a { color: var(--primary); }
@media (max-width: 480px) {
  .info-grid { grid-template-columns: 1fr; }
}

.import-warnings { max-height: 240px; overflow-y: auto; margin: 8px 0; padding-left: 20px; font-size: 0.85rem; color: var(--text-secondary); }
.import-warnings li { margin-bottom: 4px; }

.activity-feed { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border-top: 1px solid var(--gridline); margin-top: 8px; }
.activity-feed li { padding: 10px 0; border-bottom: 1px solid var(--gridline); font-size: 0.85rem; }
.activity-feed .meta { color: var(--muted); font-size: 0.75rem; }
.activity-feed li pre { white-space: pre-wrap; font-family: inherit; margin: 4px 0 0; }

.error-text { color: var(--status-critical); font-size: 0.85rem; }

.attachment-upload-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.attachment-upload-row input[type="file"] { flex: 1; font-size: 0.85rem; }

.placeholder { max-width: 640px; margin: 15vh auto; text-align: center; }

/* ---------- Settings page ---------- */

.settings-page { max-width: 720px; }
.settings-section { background: var(--surface-1); border: 1px solid var(--gridline); border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
/* Safety net: an unwrapped .data-table (Settings, Campaigns) that ends up
   wider than its card (e.g. a long badge in a new column) scrolls inside
   the card instead of spilling past its border, at any screen width — not
   just the <640px fallback below. */
.settings-section .data-table:not(.resizable-table) { display: block; overflow-x: auto; }

/* People now has 6 columns (Name/Email/Active/Notify/Gmail/Delete) — wider
   than .settings-page's 720px cap (chosen for the simpler 2-3 column lookup
   lists elsewhere on this page), so it needs its own explicit width to fit
   without the overflow-x scrollbar above kicking in on a normal desktop
   screen. A fixed width, not just a higher max-width, is required here:
   without one this section still only computes to 720px (max-width alone
   never forces a box wider than its container allows). */
.settings-section-wide { width: 900px; max-width: none; }
@media (max-width: 900px) {
  .settings-section-wide { width: 100%; }
}
.settings-section h2 { margin-top: 0; font-size: 1.05rem; }
.settings-section .hint { color: var(--muted); font-size: 0.82rem; margin-top: -8px; }
.inline-add-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.inline-add-form input { flex: 1; min-width: 140px; }
.num-input { width: 64px; text-align: center; }
.data-table input[type="text"], .data-table input[type="email"] { font-size: 0.85rem; padding: 4px 6px; }
.link-btn { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; font-size: 0.85rem; padding: 0; }
.link-btn.danger { color: var(--status-critical); }

.reorder-cell { white-space: nowrap; width: 1%; }
.reorder-btn { background: none; border: 1px solid var(--gridline); border-radius: var(--radius-sm, 4px); color: var(--primary); cursor: pointer; font-size: 0.7rem; line-height: 1; padding: 3px 5px; }
.reorder-btn + .reorder-btn { margin-left: 4px; }
.reorder-btn:hover:not(:disabled) { background: var(--page-plane); }
.reorder-btn:disabled { color: var(--muted); opacity: 0.4; cursor: default; }

/* Toggle-switch look for boolean columns (Active/Closed) — scoped to this
   class rather than all checkboxes, so multiselect/checkbox-list groups
   elsewhere keep normal compact checkboxes. */
.bool-toggle {
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--gridline);
  border: none;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
  vertical-align: middle;
}
.bool-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  transition: transform 0.15s ease;
}
.bool-toggle:checked { background: var(--primary); }
.bool-toggle:checked::after { transform: translateX(16px); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .sidebar-toggle { display: inline-block; }

  .sidebar-shell {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar-shell.open { transform: translateX(0); }

  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 80;
  }

  .page { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Tasks/Leads/Prospects/Referral Partners/Archive already scroll via their
     own `.table-scroll` wrapper (see the frozen-first-column rules above) at
     every width — `display: block` here would break that table's column
     layout (and the sticky-column positioning that depends on it), so this
     fallback is scoped to the other, unwrapped `.data-table`s (Settings,
     Campaigns) that can still overflow a narrow phone screen. */
  .data-table:not(.resizable-table) { display: block; overflow-x: auto; }
}

/* ---------- Toolbar action group (view toggle / export / new) ---------- */

.toolbar-actions { display: flex; gap: 8px; align-items: center; }

.view-toggle { display: flex; border: 1px solid var(--gridline); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle-btn {
  border: none;
  border-radius: 0;
  background: var(--surface-1);
  color: var(--text-secondary);
}
.view-toggle-btn.active { background: var(--primary); color: var(--primary-ink); }
.view-toggle-btn:not(:last-child) { border-right: 1px solid var(--gridline); }

/* Standalone priority flag color (Kanban cards) — same palette as the
   inline .priority-cell select, just not tied to a <select> element. */
.prio-flag { font-weight: 700; font-size: 0.78rem; }
.prio-flag::before { content: "\2691  "; }
.prio-flag.prio-red { color: var(--pill-red); }
.prio-flag.prio-orange { color: var(--pill-orange); }
.prio-flag.prio-gray { color: var(--muted); }

/* ---------- Kanban board (Tasks / Leads / Prospects) ---------- */

.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}

.kanban-column {
  flex: 0 0 280px;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
}

.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--gridline);
  flex-shrink: 0;
}

.kanban-column-count {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.kanban-column-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 60px;
}

.kanban-column-body.drag-over { background: var(--primary-tint); }

.kanban-card {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 12px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kanban-card.dragging { opacity: 0.4; }
.kanban-card-title { font-weight: 600; font-size: 0.86rem; color: var(--text-primary); }
.kanban-card-meta { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-secondary); flex-wrap: wrap; }

@media (max-width: 640px) {
  .kanban-column { flex-basis: 240px; }
}

/* Login page (multi-tenant Phase 2) — the only page rendered outside the
   .app-shell sidebar layout, so it gets its own small centered-card block
   rather than reusing .settings-section etc. */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.login-card .logo-wrap { max-width: 200px; }
.login-card .logo { max-width: 100%; height: auto; }
.login-card .brand { font-size: 1.2rem; font-weight: 700; }
.login-card form { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.login-card input { width: 100%; }
.login-card .btn { width: 100%; margin-top: 4px; }

/* Settings > Users admin screen — inline checkboxes in the add-user form. */
.inline-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; white-space: nowrap; }
.inline-checkbox-label input { width: auto; }
.org-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.org-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 999px;
  padding: 2px 10px 2px 12px;
  font-size: 0.8rem;
}
.org-chip .remove-org { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 0.9rem; padding: 0; }
.org-chip .remove-org:hover { color: var(--status-critical); }

/* Multi-tenant Phase 4: per-org module checkboxes, shown under each
   company's chip in the Users admin screen. */
.org-membership { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.module-check-row { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 4px; }
.module-check { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.module-check input { width: auto; margin: 0; }

/* Control Center (admin.html) — Portfolio company cards. */
.portfolio-list { display: flex; flex-wrap: wrap; gap: 14px; }
.portfolio-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 10px;
  padding: 16px;
}
.portfolio-card-name { font-weight: 700; font-size: 1.05rem; }
.portfolio-card-modules { display: flex; flex-wrap: wrap; gap: 6px; }
.module-tag {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--gridline);
  border-radius: 999px;
  padding: 2px 8px;
}