/* ══════════════════════════════════════════════════════════════
   DASHBOARD.CSS — Scout Command Center
   Single source of truth for #view-dashboard.
   Loads LAST. Scoped under #view-dashboard so nothing leaks.
   Design: Cool navy accent, white cards, light gray ground.
   Amber reserved for resume badge + overdue only.
══════════════════════════════════════════════════════════════ */

/* ── 1. Foundation ──────────────────────────────────────────── */
#view-dashboard {
  background: #F8F9FB;
  min-height: 100vh;
  font-family: 'Bricolage Grotesque', sans-serif;
  color: #111827;
  padding: 0 !important;
  margin: 0;
}

#view-dashboard.active {
  display: flex;
  flex-direction: column;
}

#view-dashboard .view-header { display: none; }

/* ── 2. Briefing Bar (two rows: greeting + chips) ────────── */
#view-dashboard .cc-briefing-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E5EA;
  padding: 10px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  max-height: 200px;
  overflow: hidden;
}

#view-dashboard .cc-briefing-bar.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0 28px;
  pointer-events: none;
  border-bottom: none;
}

/* Expand button — visible ONLY when briefing bar is collapsed */
#view-dashboard .cc-bf-expand {
  display: none;
  position: sticky;
  top: 0;
  z-index: 200;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E5EA;
  padding: 4px 28px;
  cursor: pointer;
  text-align: center;
}
#view-dashboard .cc-bf-expand button {
  background: none;
  border: none;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  cursor: pointer;
  padding: 2px 12px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
#view-dashboard .cc-bf-expand button:hover {
  color: #4B5563;
  background: rgba(30,58,95,.04);
}
#view-dashboard .cc-briefing-bar.collapsed + .cc-bf-expand {
  display: block;
}

/* Row 1: greeting + resume + controls */
#view-dashboard .cc-bf-row1 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 22px;
}

/* Greeting — prominent */
#view-dashboard .cc-bf-greeting {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Row 2: chips + collapse chevron */
#view-dashboard .cc-bf-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
}

#view-dashboard .cc-bf-row2 .cc-bf-collapse {
  margin-left: auto;
}

/* Briefing chips container — wraps to fit */
#view-dashboard .cc-bf-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* Briefing chip styling (new + legacy compat) */
#view-dashboard .cc-bf-chip,
#view-dashboard .dk-bf-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F0F1F3;
  border-radius: 12px;
  padding: 3px 10px 3px 7px;
  font-size: 11px;
  color: #4B5563;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
  flex-shrink: 0;
}
#view-dashboard .cc-bf-chip:hover,
#view-dashboard .dk-bf-line:hover { background: #E5E7EB; }

#view-dashboard .dk-bf-line b {
  color: #111827;
  font-weight: 600;
}

#view-dashboard .dk-bf-icon {
  font-size: 12px;
  flex-shrink: 0;
}

/* Urgency tiers — urgent chips get red tint, warn gets amber tint */
#view-dashboard .cc-bf-urgent {
  background: rgba(163,24,24,.08);
  color: #A31818;
  font-weight: 600;
}
#view-dashboard .cc-bf-urgent:hover { background: rgba(163,24,24,.14); }
#view-dashboard .cc-bf-urgent b { color: #A31818; }

#view-dashboard .cc-bf-warn {
  background: rgba(180,83,9,.08);
  color: #92400E;
  font-weight: 600;
}
#view-dashboard .cc-bf-warn:hover { background: rgba(180,83,9,.14); }
#view-dashboard .cc-bf-warn b { color: #92400E; }


/* Nav group — right side of row 1 */
#view-dashboard .cc-bf-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Nav link style — shared by resume + analytics */
#view-dashboard .cc-bf-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1E3A5F;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid #E2E5EA;
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
#view-dashboard .cc-bf-nav-link:hover {
  border-color: #1E3A5F;
  background: rgba(30,58,95,.04);
}

/* Resume link — amber variant (hidden via inline style, shown by JS) */
#view-dashboard .cc-bf-resume a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #C2710C;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid rgba(194,113,12,.2);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
#view-dashboard .cc-bf-resume a:hover {
  border-color: #C2710C;
  background: rgba(194,113,12,.06);
}

/* Collapse toggle */
#view-dashboard .cc-bf-collapse {
  background: none;
  border: none;
  cursor: pointer;
  color: #6B7280;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
#view-dashboard .cc-bf-collapse:hover {
  background: rgba(30,58,95,.04);
  color: #111827;
}



/* ── 4. KPI Cards Row ──────────────────────────────────────── */
#view-dashboard .cc-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px 28px 0;
}

#view-dashboard .cc-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E2E5EA;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s, box-shadow 0.2s;
  animation: cc-cardIn 0.35s ease both;
}

#view-dashboard .cc-kpi-card:nth-child(1) { animation-delay: 0ms; }
#view-dashboard .cc-kpi-card:nth-child(2) { animation-delay: 60ms; }
#view-dashboard .cc-kpi-card:nth-child(3) { animation-delay: 120ms; }
#view-dashboard .cc-kpi-card:nth-child(4) { animation-delay: 180ms; }

#view-dashboard .cc-kpi-card:hover {
  transform: translateY(-1px);
  border-color: #C5CAD1;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* KPI icon container */
#view-dashboard .cc-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* KPI content */
#view-dashboard .cc-kpi-content {
  flex: 1;
  min-width: 0;
}

#view-dashboard .cc-kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

#view-dashboard .cc-kpi-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6B7280;
  margin-top: 2px;
}

/* Smart context line below KPI label */
#view-dashboard .cc-kpi-ctx {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #9CA3AF;
  margin-top: 3px;
  text-transform: none;
  letter-spacing: 0;
}

/* KPI progress bar (calls goal) */
#view-dashboard .cc-kpi-progress {
  margin-top: 8px;
  height: 4px;
  border-radius: 2px;
  background: #E2E5EA;
  overflow: hidden;
}

#view-dashboard .cc-kpi-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: #1E3A5F;
  transition: width 0.4s ease;
}

#view-dashboard .cc-kpi-progress-fill.cc-goal-hit {
  background: #15803D;
}

/* ── 5. Project Card Grid ──────────────────────────────────── */
#view-dashboard .cc-card-area {
  padding: 20px 28px 60px;
  flex: 1;
  overflow-y: auto;
}

#view-dashboard .cc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

/* ── 6. Client Group Headers (collapsible at scale) ────────── */
#view-dashboard .cc-client-hdr {
  grid-column: 1 / -1;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4B5563;
  padding: 24px 0 10px;
  border-bottom: 1px solid #D1D5DB;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s;
}
#view-dashboard .cc-client-hdr:hover { color: #6B7280; }
#view-dashboard .cc-client-hdr:first-child { padding-top: 0; }

#view-dashboard .cc-client-hdr .cc-client-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
#view-dashboard .cc-client-hdr.cc-collapsed .cc-client-chevron {
  transform: rotate(-90deg);
}

#view-dashboard .cc-client-hdr .cc-client-summary {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  margin-left: 6px;
  letter-spacing: 0;
  text-transform: none;
}

#view-dashboard .cc-client-hdr .cc-client-overdue {
  color: #A31818;
  font-weight: 600;
}

#view-dashboard .cc-client-group { display: contents; }
#view-dashboard .cc-client-group.cc-group-collapsed .cc-card { display: none; }

/* ── 7. Card Base ──────────────────────────────────────────── */
#view-dashboard .cc-card {
  background: #FFFFFF;
  border: 1px solid #E2E5EA;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s;
  animation: cc-cardIn 0.4s ease both;
  animation-delay: calc(var(--card-i, 0) * 50ms + 240ms);
}

#view-dashboard .cc-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  border-color: #C5CAD1;
}

/* ── 7a. Formation Band (::before) ─────────────────────────── */
#view-dashboard .cc-card::before {
  content: '';
  display: block;
  height: 6px;
  background: color-mix(in oklch, var(--proj-color, #6B7280) 25%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--proj-color, #6B7280) 35%, transparent);
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
  transition: height 0.2s ease, background 0.2s ease;
}

#view-dashboard .cc-card:hover::before {
  height: 8px;
  background: color-mix(in oklch, var(--proj-color, #6B7280) 35%, transparent);
}

#view-dashboard .cc-card.cc-resume {
  border-left: 2px solid color-mix(in oklch, var(--proj-color, #C2710C) 50%, transparent);
}

#view-dashboard .cc-card.cc-resume::before {
  height: 10px;
  background: color-mix(in oklch, var(--proj-color, #C2710C) 35%, transparent);
}

#view-dashboard .cc-card.cc-paused::before {
  background: #E2E5EA;
  border-bottom-color: #D1D5DB;
}

#view-dashboard .cc-card.cc-empty::before {
  background: #E2E5EA;
  border-bottom-style: dashed;
  border-bottom-color: #D1D5DB;
}

/* ── 7b. Card Zone A — Identity (Header) ──────────────────── */
#view-dashboard .cc-card-header {
  padding: 14px 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#view-dashboard .cc-card-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 3px;
}

#view-dashboard .cc-card-hdr-text {
  flex: 1;
  min-width: 0;
}

#view-dashboard .cc-card-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

#view-dashboard .cc-card-county {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  margin-top: 1px;
}

/* Stats line (below title, still in Zone A) */
#view-dashboard .cc-card-stats {
  padding: 6px 16px 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

#view-dashboard .cc-card-stats span {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
}

/* Reached % color coding */
#view-dashboard .cc-stat-good { color: #15803D !important; }
#view-dashboard .cc-stat-mid  { color: #B45309 !important; }
#view-dashboard .cc-stat-low  { color: #A31818 !important; }

/* Badge — RESUME / PAUSED */
#view-dashboard .cc-badge {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.4;
}

#view-dashboard .cc-badge-resume {
  color: #C2710C;
  background: rgba(194,113,12,.1);
}

#view-dashboard .cc-badge-paused {
  color: #6B7280;
  background: rgba(107,114,128,.08);
}


/* Menu button */
#view-dashboard .cc-card-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #9CA3AF;
  font-size: 18px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
  line-height: 1;
}
#view-dashboard .cc-card-menu-btn:hover {
  background: #F0F1F3;
  color: #4B5563;
}

/* Card menu dropdown */
#view-dashboard .cc-card-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E5EA;
  border-radius: 8px;
  padding: 4px 0;
  min-width: 180px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  animation: cc-fadeIn 0.12s ease;
}
#view-dashboard .cc-card-menu.open { display: block; }
#view-dashboard .cc-card-menu div {
  padding: 8px 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  color: #4B5563;
  cursor: pointer;
  transition: background 0.1s;
}
#view-dashboard .cc-card-menu div:hover {
  background: #F3F4F6;
  color: #111827;
}

/* ── 7c. Card Zone B — Pipeline Data ─────────────────────── */
#view-dashboard .cc-card-data {
  padding: 10px 16px;
  border-top: 1px solid #F0F1F3;
}

/* Pipeline mini-bar */
#view-dashboard .cc-card-pipeline {
  margin-bottom: 6px;
}

#view-dashboard .cc-card-pipeline-bar {
  display: flex;
  gap: 1px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #E8EDF2;
}

#view-dashboard .cc-card-pipeline-bar .cc-pipe-seg {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 0;
  position: relative;
  cursor: default;
}

/* Segment status colors */
#view-dashboard .cc-pipe-seg.seg-new          { background: var(--color-new); }
#view-dashboard .cc-pipe-seg.seg-no-answer    { background: var(--color-no-answer); }
#view-dashboard .cc-pipe-seg.seg-answered     { background: var(--color-answered); }
#view-dashboard .cc-pipe-seg.seg-callback     { background: var(--color-callback-status); }
#view-dashboard .cc-pipe-seg.seg-under-neg    { background: var(--color-under-neg); }
#view-dashboard .cc-pipe-seg.seg-under-psa    { background: var(--color-under-psa); }
#view-dashboard .cc-pipe-seg.seg-completed    { background: var(--color-completed); }
#view-dashboard .cc-pipe-seg.seg-skip         { background: var(--color-skip); }

/* Segment tooltip */
#view-dashboard .cc-pipe-seg .cc-pipe-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #111827;
  color: #F9FAFB;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 10;
}

#view-dashboard .cc-pipe-seg:hover .cc-pipe-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Pipeline counts */
#view-dashboard .cc-card-pipeline-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

#view-dashboard .cc-card-pipeline-counts span {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
}

#view-dashboard .cc-pipe-count {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
}

#view-dashboard .cc-pipe-dot {
  color: #B0B5BC;
  font-size: 10px;
}

/* Last activity (inside Zone B) */
#view-dashboard .cc-card-activity {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 400;
  color: #9CA3AF;
}

/* ── 7d. Card Zone C — Urgency + Actions (stacked layout) ── */
#view-dashboard .cc-card-actions-zone {
  padding: 10px 16px;
  border-top: 1px solid #F0F1F3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Alert pills — top row, full width */
#view-dashboard .cc-alert-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#view-dashboard .cc-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Bricolage Grotesque', sans-serif;
  min-width: 0;
}

#view-dashboard .cc-alert-pill.cc-pill-overdue {
  background: rgba(163,24,24,.10);
  color: #A31818;
}

#view-dashboard .cc-alert-pill.cc-pill-hot {
  background: rgba(168,55,10,.10);
  color: #A8370A;
}

#view-dashboard .cc-alert-pill.cc-pill-callback {
  background: rgba(29,78,216,.10);
  color: #1D4ED8;
}

#view-dashboard .cc-alert-pill.cc-pill-closed {
  background: rgba(13,90,43,.10);
  color: #0D5A2B;
}

/* Action buttons — bottom row, right-aligned */
#view-dashboard .cc-card-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#view-dashboard .cc-btn-open {
  background: #1E3A5F;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Bricolage Grotesque', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
#view-dashboard .cc-btn-open:hover { background: #15304F; }

#view-dashboard .cc-btn-call {
  background: none;
  border: 1px solid #1E3A5F;
  color: #1E3A5F;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Bricolage Grotesque', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
#view-dashboard .cc-btn-call:hover { background: rgba(30,58,95,.04); }

#view-dashboard .cc-btn-import {
  background: none;
  border: none;
  color: #6B7280;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Bricolage Grotesque', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
#view-dashboard .cc-btn-import:hover {
  color: #4B5563;
  text-decoration: underline;
}

/* ── 7e. Card Expandable Owner List ──────────────────────── */
#view-dashboard .cc-card-expand {
  border-top: 1px solid #E2E5EA;
  max-height: 280px;
  overflow-y: auto;
  animation: cc-slideUp 0.2s ease;
}

#view-dashboard .cc-expand-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 1;
}

#view-dashboard .cc-expand-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9CA3AF;
}

#view-dashboard .cc-expand-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
}

#view-dashboard .cc-expand-list {
  padding: 0 8px 8px;
}

#view-dashboard .cc-expand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
#view-dashboard .cc-expand-row:hover {
  background: #F3F4F6;
}

#view-dashboard .cc-expand-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #111827;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-dashboard .cc-expand-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: #6B7280;
  text-transform: capitalize;
  flex-shrink: 0;
}

#view-dashboard .cc-expand-status.cc-es-under-psa { color: var(--color-under-psa); }
#view-dashboard .cc-expand-status.cc-es-under-negotiation { color: var(--color-under-neg); }
#view-dashboard .cc-expand-status.cc-es-callback { color: var(--color-callback-status); }
#view-dashboard .cc-expand-status.cc-es-answered { color: var(--color-answered); }
#view-dashboard .cc-expand-status.cc-es-no-answer { color: var(--color-no-answer); }
#view-dashboard .cc-expand-status.cc-es-completed { color: var(--color-completed); }

#view-dashboard .cc-expand-offer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-completed);
  flex-shrink: 0;
}

/* Expand sections divider */
#view-dashboard .cc-expand-section + .cc-expand-section {
  border-top: 1px solid #E2E5EA;
}

/* Wells/properties section */
#view-dashboard .cc-expand-wells {
  padding: 0 8px 8px;
}

#view-dashboard .cc-expand-county {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 2px;
}

#view-dashboard .cc-expand-county-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #4B5563;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#view-dashboard .cc-expand-county-wells {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
}

#view-dashboard .cc-expand-well {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: #6B7280;
  padding: 2px 8px 2px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-dashboard .cc-expand-well-more {
  color: #9CA3AF;
  font-style: italic;
}

/* Hot lead indicator */
#view-dashboard .cc-expand-hot {
  font-size: 10px;
  flex-shrink: 0;
}

/* NRA on owner rows */
#view-dashboard .cc-expand-nra {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  flex-shrink: 0;
}

#view-dashboard .cc-expand-more {
  padding: 6px 16px 10px;
  font-size: 11px;
  color: #9CA3AF;
  text-align: center;
}
#view-dashboard .cc-expand-more a {
  color: #1E3A5F;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
#view-dashboard .cc-expand-more a:hover { text-decoration: underline; }

/* ── 7f. Card Empty Message ──────────────────────────────── */
#view-dashboard .cc-card-empty-msg {
  padding: 20px 16px;
  font-size: 13px;
  color: #9CA3AF;
  flex: 1;
  line-height: 1.5;
}

/* ── 8. Card Variants ──────────────────────────────────────── */
#view-dashboard .cc-card.cc-paused { opacity: 0.65; }
#view-dashboard .cc-card.cc-empty { border-style: dashed; }

/* ── 9. Empty State (no projects) ──────────────────────────── */
#view-dashboard .cc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  text-align: center;
}

#view-dashboard .cc-empty-icon {
  margin-bottom: 24px;
  opacity: 0.6;
}

#view-dashboard .cc-empty-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
}

#view-dashboard .cc-empty-desc {
  font-size: 13px;
  color: #6B7280;
  margin: 0 0 24px;
  max-width: 360px;
}

#view-dashboard .cc-empty-actions { display: flex; gap: 12px; }

#view-dashboard .cc-primary-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #1E3A5F;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.15s;
}
#view-dashboard .cc-primary-btn:hover { background: #15304F; }

#view-dashboard .cc-secondary-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #4B5563;
  background: #FFFFFF;
  border: 1px solid #E2E5EA;
  border-radius: 8px;
  padding: 10px 24px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#view-dashboard .cc-secondary-btn:hover {
  border-color: #C5CAD1;
  color: #111827;
}

/* ── 10. Activity Ticker (bottom strip — elevated) ───────── */
#view-dashboard .cc-ticker {
  position: sticky;
  bottom: 0;
  z-index: 150;
  background: #FFFFFF;
  border-top: 1px solid #E2E5EA;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 42px;
  overflow-x: auto;
  white-space: nowrap;
  box-shadow: 0 -2px 8px rgba(0,0,0,.03);
}

#view-dashboard .cc-ticker-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9CA3AF;
  flex-shrink: 0;
}

#view-dashboard .cc-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #4B5563;
  flex-shrink: 0;
}

#view-dashboard .cc-ticker-item b {
  color: #111827;
  font-weight: 600;
}

/* Status dot before each ticker item */
#view-dashboard .cc-ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

#view-dashboard .cc-ticker-item .cc-ticker-ago {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #9CA3AF;
}

#view-dashboard .cc-ticker-link {
  margin-left: auto;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1E3A5F;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid #E2E5EA;
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
#view-dashboard .cc-ticker-link:hover {
  border-color: #1E3A5F;
  background: rgba(30,58,95,.04);
  text-decoration: none;
}
#view-dashboard .cc-ticker-empty { color: #C5CAD1; font-style: italic; }
#view-dashboard .cc-ticker-sep { color: #D1D5DB; font-size: 14px; margin: 0 2px; }

/* ── 11. Top Action Buttons (above card grid) ────────────── */
#view-dashboard .cc-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

#view-dashboard .cc-ghost-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  background: #FFFFFF;
  border: 1px solid #E2E5EA;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#view-dashboard .cc-ghost-btn:hover {
  border-color: #C5CAD1;
  color: #4B5563;
}

/* ── 12. Archived Projects Section ───────────────────────── */
#view-dashboard .cc-archived-section {
  grid-column: 1 / -1;
  margin-top: 12px;
}

#view-dashboard .cc-archived-section summary,
#view-dashboard .cc-archived-toggle {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #9CA3AF;
  cursor: pointer;
  padding: 8px 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
#view-dashboard .cc-archived-toggle:hover,
#view-dashboard .cc-archived-section summary:hover { color: #6B7280; }

#view-dashboard .cc-archived-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

#view-dashboard .cc-archived-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  color: #9CA3AF;
  transition: background 0.12s;
}
#view-dashboard .cc-archived-row:hover { background: rgba(30,58,95,.04); }

#view-dashboard .cc-archived-row .cc-arch-name,
#view-dashboard .cc-archived-name {
  font-weight: 500;
  color: #6B7280;
}

#view-dashboard .cc-archived-row .cc-arch-county {
  font-weight: 400;
  color: #9CA3AF;
}

#view-dashboard .cc-archived-row .cc-arch-date {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #D1D5DB;
}

#view-dashboard .cc-archived-meta {
  font-size: 11px;
  color: #9CA3AF;
}

#view-dashboard .cc-archived-restore {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1E3A5F;
  background: none;
  border: 1px solid #E2E5EA;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  margin-left: auto;
  transition: border-color 0.15s, background 0.15s;
}
#view-dashboard .cc-archived-restore:hover {
  border-color: #1E3A5F;
  background: rgba(30,58,95,.04);
}


/* ── 14. Animations (@keyframes) ────────────────────────── */
@keyframes cc-cardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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


/* ── 15. Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  #view-dashboard .cc-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Briefing bar compact */
  #view-dashboard .cc-briefing-bar { padding: 0 12px; }

  /* KPI cards 2x2 */
  #view-dashboard .cc-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 12px 0;
    gap: 10px;
  }
  #view-dashboard .cc-kpi-value { font-size: 20px; }

  /* Card grid single column */
  #view-dashboard .cc-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #view-dashboard .cc-card-area { padding: 12px 12px 72px; }

  /* Ticker hidden */
  #view-dashboard .cc-ticker { display: none; }

}

@media (max-width: 480px) {
  #view-dashboard .cc-kpi-row {
    grid-template-columns: 1fr;
    padding: 8px 8px 0;
  }
  #view-dashboard .cc-kpi-card { padding: 12px 16px; }
  #view-dashboard .cc-kpi-value { font-size: 18px; }
  #view-dashboard .cc-card-area { padding: 8px 8px 64px; }

  /* Briefing collapses */
  #view-dashboard .cc-bf-inline { display: none; }
}

/* ── 16. Print / Reduced Motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #view-dashboard .cc-card,
  #view-dashboard .cc-kpi-card { animation: none; }
  #view-dashboard .cc-card:hover,
  #view-dashboard .cc-kpi-card:hover { transform: none; }
  #view-dashboard .cc-pipe-seg .cc-pipe-tip { transition: none; }
}