/* ══════════════════════════════════════════════════════════════
   DASHBOARD v4.0 — Linear × Stripe × Mercury
   Scoped to .db — zero impact on other pages.
   Dense. Breathable. Data-forward. No noise.
══════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────── */
.db { display:flex; flex-direction:column; gap:20px; }

/* ── Section label ────────────────────────────────────────── */
.db-sec {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin:         0;
}

/* ── Card base ────────────────────────────────────────────── */
.db-card {
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-radius: 10px;
  overflow:      hidden;
  position:      relative;
  filter:        drop-shadow(0 4px 2px rgba(0,0,0,.24)) drop-shadow(0 10px 18px rgba(0,0,0,.16));
  transition:    filter .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
}
.db-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--card-accent, linear-gradient(90deg,#2563EB,#6366F1));
  border-radius: 10px 10px 0 0;
  transition: width .32s cubic-bezier(.4,0,.2,1);
  z-index: 2; pointer-events: none;
}
.db-card:hover {
  filter:    drop-shadow(0 8px 4px rgba(0,0,0,.30)) drop-shadow(0 20px 30px rgba(0,0,0,.22));
  transform: translateY(-4px) scale(1.008);
}
.db-card:hover::before { width: 100%; }
[data-theme="light"] .db-card {
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.07)) drop-shadow(0 8px 14px rgba(0,0,0,.09));
}
[data-theme="light"] .db-card:hover {
  filter: drop-shadow(0 6px 3px rgba(0,0,0,.10)) drop-shadow(0 16px 24px rgba(37,99,235,.13));
}

.db-card-ch {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 18px 12px;
  border-bottom:   1px solid var(--border-color);
  gap:             12px;
}
.db-card-hl { min-width:0; }
.db-card-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-primary);
  margin:      0;
  display:     flex;
  align-items: center;
  gap:         7px;
  line-height: 1.3;
}
.db-card-sub { font-size:12px; color:var(--text-muted); margin:3px 0 0; }

/* ── Compact buttons ──────────────────────────────────────── */
.db-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.db-btn {
  height:      32px;
  padding:     0 12px;
  font-size:   12px;
  font-weight: 500;
  color:       var(--text-primary);
  background:  var(--bg-surface);
  border:      1px solid var(--border-color);
  border-radius: 6px;
  cursor:      pointer;
  transition:  background 150ms, border-color 150ms, box-shadow 150ms;
  white-space: nowrap;
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-family: inherit;
}
.db-btn:hover {
  background:   var(--bg-elevated);
  border-color: rgba(37,99,235,.30);
  box-shadow:   0 1px 4px rgba(15,23,42,.06);
}
.db-btn.primary { background:#2563EB; color:white; border-color:#2563EB; }
.db-btn.primary:hover { background:#1D4ED8; border-color:#1D4ED8; }
.db-btn svg { flex-shrink:0; }

/* ── Overdue alert strip ──────────────────────────────────── */
.db-strip-alert {
  display:       flex;
  align-items:   center;
  gap:           10px;
  height:        44px;
  padding:       0 16px;
  background:    #FEF2F2;
  border:        1px solid #FECACA;
  border-left:   3px solid #DC2626;
  border-radius: 8px;
}
[data-theme="dark"] .db-strip-alert {
  background:         rgba(220,38,38,.08);
  border-color:       rgba(220,38,38,.18);
  border-left-color:  #DC2626;
}
.db-strip-alert-ic  { color:#DC2626; display:flex; flex-shrink:0; }
.db-strip-alert-txt { font-size:13px; font-weight:500; color:#991B1B; flex:1; }
[data-theme="dark"] .db-strip-alert-txt { color:#fca5a5; }
.db-strip-alert-btn {
  font-size:12px; font-weight:500; color:#DC2626;
  cursor:pointer; background:none; border:none; white-space:nowrap; font-family:inherit;
}
.db-strip-alert-btn:hover { text-decoration:underline; }

/* ── KPI Row ──────────────────────────────────────────────── */
.db-kpis {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   12px;
}
.db-kpi {
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-radius: 10px;
  padding:       16px 18px 14px;
  box-shadow:    0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  cursor:        pointer;
  transition:    box-shadow 150ms, transform 150ms;
  display:       flex;
  flex-direction:column;
}
[data-theme="dark"] .db-kpi { box-shadow:0 1px 3px rgba(0,0,0,.22); }
.db-kpi:hover { box-shadow:0 4px 12px rgba(15,23,42,.10); transform:translateY(-1px); }
[data-theme="dark"] .db-kpi:hover { box-shadow:0 4px 12px rgba(0,0,0,.40); }

.db-kpi-hd {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   10px;
}
.db-kpi-ic {
  width:           28px;
  height:          28px;
  border-radius:   6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.db-kpi-ic.red    { background:#FEE2E2; color:#DC2626; }
.db-kpi-ic.green  { background:#DCFCE7; color:#16A34A; }
.db-kpi-ic.blue   { background:#DBEAFE; color:#2563EB; }
.db-kpi-ic.purple { background:#EDE9FE; color:#7C3AED; }
[data-theme="dark"] .db-kpi-ic.red    { background:rgba(220,38,38,.12);  color:#fca5a5; }
[data-theme="dark"] .db-kpi-ic.green  { background:rgba(22,163,74,.12);  color:#86efac; }
[data-theme="dark"] .db-kpi-ic.blue   { background:rgba(37,99,235,.12);  color:#93c5fd; }
[data-theme="dark"] .db-kpi-ic.purple { background:rgba(124,58,237,.12); color:#c4b5fd; }

/* Trend pill */
.db-trend {
  display:     inline-flex;
  align-items: center;
  gap:         3px;
  padding:     2px 7px;
  border-radius: 99px;
  font-size:   11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.db-trend.up { background:#DCFCE7; color:#15803D; }
.db-trend.dn { background:#FEE2E2; color:#B91C1C; }
[data-theme="dark"] .db-trend.up { background:rgba(22,163,74,.12);  color:#86efac; }
[data-theme="dark"] .db-trend.dn { background:rgba(220,38,38,.12);  color:#fca5a5; }

/* Value */
.db-kpi-val {
  font-size:            22px;
  font-weight:          600;
  letter-spacing:       -.03em;
  color:                var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height:          1;
  margin-bottom:        4px;
}
.db-pkr {
  font-size:      12px;
  font-weight:    500;
  color:          var(--text-muted);
  letter-spacing: 0;
  margin-right:   4px;
  vertical-align: baseline;
  position:       relative;
  top:            -4px;
}

/* Label + sub */
.db-kpi-lbl {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin:         0 0 2px;
}
.db-kpi-sub { font-size:12px; color:var(--text-muted); margin:0 0 8px; }

/* Sparkline wrapper — fixed height so Chart.js responsive reads correctly */
.db-spark-wrap { position:relative; height:28px; width:100%; overflow:hidden; }
.db-spark-wrap canvas { position:absolute; inset:0; width:100% !important; height:100% !important; }

/* ── Inventory strip ──────────────────────────────────────── */
.db-inv {
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-radius: 10px;
  box-shadow:    0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  display:       flex;
  align-items:   center;
  height:        56px;
  overflow:      hidden;
}
[data-theme="dark"] .db-inv { box-shadow:0 1px 3px rgba(0,0,0,.22); }
.db-inv-item {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:            2px;
  height:         100%;
  padding:        0 12px;
  cursor:         pointer;
  transition:     background 150ms;
}
.db-inv-item:hover { background:rgba(37,99,235,.04); }
.db-inv-item.no-click { cursor:default; }
.db-inv-item.no-click:hover { background:none; }
.db-inv-div { width:1px; height:22px; background:var(--border-color); flex-shrink:0; }
.db-inv-n {
  font-size:            16px;
  font-weight:          600;
  color:                var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height:          1;
  display:              flex;
  align-items:          center;
  gap:                  5px;
}
.db-inv-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.db-inv-lbl {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

/* Circular % ring */
.db-inv-ring { position:relative; width:32px; height:32px; flex-shrink:0; }
.db-inv-ring svg { transform:rotate(-90deg); }
.db-inv-ring-txt {
  position:  absolute;
  inset:     0;
  display:   flex;
  align-items:     center;
  justify-content: center;
  font-size:   8.5px;
  font-weight: 700;
  color:       var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Portfolio fill bar */
.db-fill-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; }
.db-fill-bar { width:72px; height:5px; background:var(--border-color); border-radius:99px; overflow:hidden; }
.db-fill-inner { height:100%; background:#2563EB; border-radius:99px; transition:width .5s ease; }
.db-fill-pct { font-size:10px; font-weight:600; color:var(--text-primary); }

/* ── Grids ────────────────────────────────────────────────── */
.db-grid-r1 { display:grid; grid-template-columns:3fr 2fr; gap:12px; } /* 60% / 40% */
.db-grid-r2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.db-grid-r3 { display:grid; grid-template-columns:7fr 5fr; gap:12px; }

/* ── Chart range pills ────────────────────────────────────── */
.db-pills { display:flex; gap:3px; }
.db-pill {
  padding:     3px 10px;
  border-radius: 6px;
  font-size:   11px;
  font-weight: 500;
  color:       var(--text-muted);
  background:  none;
  border:      none;
  cursor:      pointer;
  transition:  background 120ms, color 120ms;
  font-family: inherit;
}
.db-pill:hover { background:var(--border-color); color:var(--text-primary); }
.db-pill.on { background:#EFF6FF; color:#2563EB; }
[data-theme="dark"] .db-pill.on { background:rgba(37,99,235,.12); color:#93c5fd; }

/* Chart canvas wrappers */
.db-chart-wrap { padding:0 18px 16px; }
.db-chart-wrap canvas { display:block; }

/* Donut layout */
.db-donut-body { padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.db-donut-center {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
}
.db-donut-n   { font-size:22px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.db-donut-lbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.db-legend { display:flex; flex-direction:column; gap:8px; }
.db-legend-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.db-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.db-legend-lbl { flex:1; color:var(--text-muted); }
.db-legend-n   { font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }

/* ── List rows ────────────────────────────────────────────── */
.db-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     11px 18px;
  border-bottom: 1px solid var(--border-color);
  cursor:      pointer;
  transition:  background 120ms;
}
.db-row:last-child { border-bottom:none; }
.db-row:hover { background:#F8FAFC; }
[data-theme="dark"] .db-row:hover { background:rgba(255,255,255,.025); }

.db-row-rk {
  width:           20px; height:20px; border-radius:50%;
  background:      var(--bg-elevated);
  border:          1px solid var(--border-color);
  font-size:       10px; font-weight:600; color:var(--text-muted);
  display:         flex; align-items:center; justify-content:center; flex-shrink:0;
}
.db-row-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.db-row-i   { flex:1; min-width:0; }
.db-row-nm {
  font-size:     13px; font-weight:500; color:var(--text-primary);
  white-space:   nowrap; overflow:hidden; text-overflow:ellipsis;
}
.db-row-sb  { font-size:11px; color:#DC2626; margin-top:1px; }
.db-row-sb.warn { color:#D97706; }
.db-row-sb.ok   { color:#16A34A; }
.db-row-amt {
  font-size:            13px; font-weight:600; color:var(--text-primary);
  font-variant-numeric: tabular-nums; white-space:nowrap; flex-shrink:0;
}
.db-ch-ic {
  width:           28px; height:28px; border-radius:6px;
  background:      var(--bg-elevated); border:1px solid var(--border-color);
  display:         flex; align-items:center; justify-content:center;
  font-size:       12px; flex-shrink:0;
}

/* ── Client health cells ──────────────────────────────────── */
.db-health-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px 18px; }
.db-hcell { border-radius:8px; padding:14px; cursor:pointer; transition:opacity 150ms; }
.db-hcell:hover { opacity:.85; }
.db-hcell.platinum { background:#F0FDF4; }
.db-hcell.good     { background:#EFF6FF; }
.db-hcell.at-risk  { background:#FFFBEB; }
.db-hcell.critical { background:#FEF2F2; }
[data-theme="dark"] .db-hcell.platinum { background:rgba(22,163,74,.07);  }
[data-theme="dark"] .db-hcell.good     { background:rgba(37,99,235,.07);  }
[data-theme="dark"] .db-hcell.at-risk  { background:rgba(217,119,6,.07);  }
[data-theme="dark"] .db-hcell.critical { background:rgba(220,38,38,.07);  }
.db-hcell-hd  { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.db-hcell-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.db-hcell-lbl { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.db-hcell-n   { font-size:18px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; line-height:1; }
.db-hcell-amt { font-size:11px; color:var(--text-muted); margin-top:3px; }
.db-hcell.platinum .db-hcell-dot { background:#16A34A; }
.db-hcell.platinum .db-hcell-lbl { color:#166534; }
.db-hcell.good     .db-hcell-dot { background:#2563EB; }
.db-hcell.good     .db-hcell-lbl { color:#1D4ED8; }
.db-hcell.at-risk  .db-hcell-dot { background:#D97706; }
.db-hcell.at-risk  .db-hcell-lbl { color:#92400E; }
.db-hcell.critical .db-hcell-dot { background:#DC2626; }
.db-hcell.critical .db-hcell-lbl { color:#991B1B; }
[data-theme="dark"] .db-hcell.platinum .db-hcell-lbl { color:#86efac; }
[data-theme="dark"] .db-hcell.good     .db-hcell-lbl { color:#93c5fd; }
[data-theme="dark"] .db-hcell.at-risk  .db-hcell-lbl { color:#fcd34d; }
[data-theme="dark"] .db-hcell.critical .db-hcell-lbl { color:#fca5a5; }

/* ── Widget alert banners ─────────────────────────────────── */
.db-walert {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  padding:         10px 14px;
  border-radius:   8px;
  border:          1px solid;
  margin-bottom:   12px;
  flex-wrap:       wrap;
}
.db-walert.red    { background:#FEF2F2; border-color:#FECACA; }
.db-walert.orange { background:#FFF7ED; border-color:#FED7AA; }
[data-theme="dark"] .db-walert.red    { background:rgba(220,38,38,.08);  border-color:rgba(220,38,38,.20);  }
[data-theme="dark"] .db-walert.orange { background:rgba(249,115,22,.08); border-color:rgba(249,115,22,.20); }
.db-walert-bd { display:flex; align-items:center; gap:10px; }
.db-walert-bd svg { flex-shrink:0; }
.db-walert.red    .db-walert-bd svg { color:#DC2626; }
.db-walert.orange .db-walert-bd svg { color:#EA580C; }
.db-walert-title  { font-size:13px; font-weight:600; }
.db-walert.red    .db-walert-title { color:#991B1B; }
.db-walert.orange .db-walert-title { color:#9A3412; }
[data-theme="dark"] .db-walert.red    .db-walert-title { color:#fca5a5; }
[data-theme="dark"] .db-walert.orange .db-walert-title { color:#fdba74; }
.db-walert-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.db-walert-body { display:flex; flex-direction:column; }

/* ── Widget cat cells (paylinks) ──────────────────────────── */
.db-wcats { display:flex; gap:10px; flex-wrap:wrap; }
.db-wcat  { flex:1; min-width:110px; padding:14px 16px; border-radius:8px; border:1px solid; cursor:pointer; transition:transform 150ms; }
.db-wcat:hover { transform:translateY(-1px); }
.db-wcat-hd  { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.db-wcat-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.db-wcat-lbl { font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background:transparent; }
.db-wcat-n   { font-size:20px; font-weight:700; color:var(--text-primary); line-height:1; font-variant-numeric:tabular-nums; }
.db-wcat-s   { font-size:10px; color:var(--text-muted); margin-top:3px; }
.db-wcat.green  { background:rgba(34,197,94,.06);  border-color:rgba(34,197,94,.18);  }
.db-wcat.blue   { background:rgba(59,130,246,.06);  border-color:rgba(59,130,246,.18); }
.db-wcat.amber  { background:rgba(245,158,11,.06);  border-color:rgba(245,158,11,.18); }
.db-wcat.red    { background:rgba(239,68,68,.06);   border-color:rgba(239,68,68,.18);  }
.db-wcat.orange { background:rgba(249,115,22,.06);  border-color:rgba(249,115,22,.18); }
.db-wcat.blue { background:rgba(37,99,235,.06);  border-color:rgba(37,99,235,.18); }
.db-wcat.green  .db-wcat-lbl, .db-wcat.green  .db-wcat-dot { color:#16a34a; background:#16a34a; }
.db-wcat.blue   .db-wcat-lbl, .db-wcat.blue   .db-wcat-dot { color:#2563eb; background:#2563eb; }
.db-wcat.amber  .db-wcat-lbl, .db-wcat.amber  .db-wcat-dot { color:#d97706; background:#d97706; }
.db-wcat.red    .db-wcat-lbl, .db-wcat.red    .db-wcat-dot { color:#dc2626; background:#dc2626; }
.db-wcat.orange .db-wcat-lbl, .db-wcat.orange .db-wcat-dot { color:#ea580c; background:#ea580c; }
.db-wcat-lbl { background:transparent !important; }

/* ── Payments table ───────────────────────────────────────── */
.db-tbl-wrap { overflow-x:auto; }
.db-tbl { width:100%; border-collapse:collapse; }
.db-tbl thead th {
  padding:        9px 18px;
  font-size:      10.5px;
  font-weight:    500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--text-muted);
  background:     var(--bg-elevated);
  border-bottom:  1px solid var(--border-color);
  text-align:     left;
  white-space:    nowrap;
}
.db-tbl thead th:last-child { text-align:right; }
.db-tbl tbody tr { border-bottom:1px solid var(--border-color); transition:background 120ms; cursor:pointer; }
.db-tbl tbody tr:last-child { border-bottom:none; }
.db-tbl tbody tr:nth-child(even)  { background:#FAFAFA; }
[data-theme="dark"] .db-tbl tbody tr:nth-child(even) { background:rgba(255,255,255,.018); }
.db-tbl tbody tr:hover { background:#F0F4FF; }
[data-theme="dark"] .db-tbl tbody tr:hover { background:rgba(37,99,235,.05); }
.db-tbl td { padding:10px 18px; font-size:13px; color:var(--text-primary); vertical-align:middle; }
.db-tbl td:last-child { text-align:right; }

.db-unit-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size:   11px; font-weight:600;
  padding:     2px 7px;
  background:  #F1F5F9;
  border:      1px solid var(--border-color);
  border-radius: 4px; white-space:nowrap;
}
[data-theme="dark"] .db-unit-chip { background:var(--bg-elevated); }

.db-meth-badge { font-size:10.5px; font-weight:500; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.db-meth-badge.cash   { background:#DCFCE7; color:#15803D; }
.db-meth-badge.cheque { background:#DBEAFE; color:#1D4ED8; }
.db-meth-badge.pdc    { background:#EDE9FE; color:#6D28D9; }
.db-meth-badge.bank   { background:#DBEAFE; color:#1D4ED8; }
.db-meth-badge.other  { background:#F1F5F9; color:#64748B; }
[data-theme="dark"] .db-meth-badge.cash   { background:rgba(22,163,74,.12);   color:#86efac; }
[data-theme="dark"] .db-meth-badge.cheque { background:rgba(37,99,235,.12);   color:#93c5fd; }
[data-theme="dark"] .db-meth-badge.pdc    { background:rgba(109,40,217,.12);  color:#c4b5fd; }
[data-theme="dark"] .db-meth-badge.bank   { background:rgba(37,99,235,.12);   color:#93c5fd; }
[data-theme="dark"] .db-meth-badge.other  { background:rgba(255,255,255,.06); color:#94a3b8; }

.db-tbl-mute { color:var(--text-muted); }
.db-tbl-amt  { font-weight:600; color:#16A34A; font-variant-numeric:tabular-nums; }
[data-theme="dark"] .db-tbl-amt { color:#86efac; }

/* ── Recovery Radar rows ──────────────────────────────────── */
.db-radar-row {
  padding:       10px 18px;
  border-bottom: 1px solid var(--border-color);
  cursor:        pointer;
  transition:    background 120ms;
}
.db-radar-row:last-child { border-bottom:none; }
.db-radar-row:hover { background:#F8FAFC; }
[data-theme="dark"] .db-radar-row:hover { background:rgba(255,255,255,.025); }
.db-radar-top { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.db-radar-rk  {
  width:20px; height:20px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border-color);
  font-size:10px; font-weight:600; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.db-radar-nm  { font-size:13px; font-weight:500; color:var(--text-primary); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-radar-sc  { font-size:13px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; flex-shrink:0; }
.db-radar-sub { font-size:11px; color:var(--text-muted); margin-bottom:5px; padding-left:28px; }
.db-radar-bar { height:4px; background:var(--border-color); border-radius:99px; overflow:hidden; margin-left:28px; }
.db-radar-bar-fill { height:100%; border-radius:99px; transition:width .4s ease; }
.db-radar-bar-fill.green { background:#16A34A; }
.db-radar-bar-fill.amber { background:#D97706; }
.db-radar-bar-fill.red   { background:#DC2626; }

.db-radar-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 18px;
  border-top:      1px solid var(--border-color);
  font-size:       12px;
}
.db-radar-total   { color:var(--text-muted); }
.db-radar-total b { color:var(--text-primary); font-weight:600; }
.db-radar-lnk {
  color:#2563EB; font-weight:500; cursor:pointer;
  background:none; border:none; font-size:12px; padding:0; font-family:inherit;
}
[data-theme="dark"] .db-radar-lnk { color:#93c5fd; }
.db-radar-lnk:hover { text-decoration:underline; }

/* ── More link ────────────────────────────────────────────── */
.db-more {
  display:    block;
  width:      100%;
  padding:    9px 18px;
  font-size:  12px;
  font-weight:500;
  color:      #2563EB;
  cursor:     pointer;
  background: none;
  border:     none;
  border-top: 1px solid var(--border-color);
  text-align: center;
  transition: background 120ms;
  font-family: inherit;
}
[data-theme="dark"] .db-more { color:#93c5fd; }
.db-more:hover { background:rgba(37,99,235,.04); }

/* ── Empty state ──────────────────────────────────────────── */
.db-empty    { display:flex; align-items:center; gap:8px; justify-content:center; padding:32px 20px; }
.db-empty-ic { color:var(--border-color); display:flex; }
.db-empty-tx { font-size:12px; color:var(--text-muted); }

/* ── Promises strip ───────────────────────────────────────── */
.db-promises {
  display:       flex;
  align-items:   center;
  gap:           12px;
  height:        40px;
  padding:       0 16px;
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-radius: 8px;
  font-size:     12px;
  color:         var(--text-muted);
  box-shadow:    0 1px 2px rgba(15,23,42,.04);
}
.db-promises-item { display:flex; align-items:center; gap:5px; }
.db-promises-n    { font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.db-promises-div  { width:1px; height:14px; background:var(--border-color); }

/* ── Skeleton ─────────────────────────────────────────────── */
@keyframes db-shimmer {
  0%   { background-position:-800px 0 }
  100% { background-position: 800px 0 }
}
.db-skel { display:flex; flex-direction:column; gap:20px; }
.db-sb {
  background:      linear-gradient(90deg, var(--bg-elevated) 25%, var(--border-color) 50%, var(--bg-elevated) 75%);
  background-size: 1600px 100%;
  animation:       db-shimmer 1.5s infinite linear;
  border-radius:   8px;
  display:         block;
}
.db-sk-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.db-sk-kpi  { height:130px; border-radius:10px; }
.db-sk-r1   { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.db-sk-r2   { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.db-sk-r3   { display:grid; grid-template-columns:7fr 5fr; gap:12px; }
.db-sk-col  { border-radius:10px; }

/* ── Role dashboard header ────────────────────────────────── */
.db-hd {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding-bottom: 4px;
}
.db-hd-title {
  font-size:   22px;
  font-weight: 700;
  color:       var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.db-hd-sub {
  font-size:  13px;
  color:      var(--text-muted);
  font-weight:400;
}

/* ── Quick-link cards ─────────────────────────────────────── */
.db-ql {
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            6px;
  text-align:     left;
  transition:     transform 120ms ease, box-shadow 120ms ease;
}
.db-ql:hover {
  transform:  translateY(-2px);
  box-shadow: 0 4px 16px rgba(15,23,42,.10);
}
.db-ql-lbl {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
}
.db-ql-sub {
  font-size:  12px;
  color:      var(--text-muted);
  line-height:1.4;
}
.db-ql-ic {
  width:       36px;
  height:      36px;
  border-radius:8px;
  display:     flex;
  align-items: center;
  justify-content:center;
  background:  var(--bg-elevated);
  margin-bottom:2px;
}
.db-ql-ic svg { width:18px; height:18px; stroke:var(--accent,#2563EB); stroke-width:1.8; fill:none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1280px) {
  .db-kpis    { grid-template-columns:repeat(2,1fr); }
  .db-sk-kpis { grid-template-columns:repeat(2,1fr); }
  .db-grid-r1 { grid-template-columns:1fr; }
  .db-sk-r1   { grid-template-columns:1fr; }
}
@media (max-width:1024px) {
  .db-grid-r3 { grid-template-columns:1fr; }
  .db-sk-r3   { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .db-kpis    { grid-template-columns:1fr 1fr; }
  .db-grid-r2 { grid-template-columns:1fr; }
  .db-sk-r2   { grid-template-columns:1fr; }
  .db-inv     { height:auto; }
  .db-inv-item { height:auto; min-height:48px; padding:8px; }
  .db-xs-hide { display:none !important; }
}
@media (max-width:520px) {
  .db-kpis { grid-template-columns:1fr; }
}

/* ── TODAY PANEL ──────────────────────────────────────────── */
.db-today-panel {
  display:       flex;
  align-items:   center;
  gap:           16px;
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-radius: 10px;
  padding:       14px 18px;
  flex-wrap:     wrap;
}
.db-today-left {
  display:     flex;
  flex-direction: column;
  gap:         2px;
  min-width:   80px;
}
.db-today-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--brand, #2563EB);
}
.db-today-date {
  font-size:   12px;
  color:       var(--text-muted);
  white-space: nowrap;
}
.db-today-chips {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
  flex:      1;
}
.db-today-chip {
  display:       flex;
  align-items:   center;
  gap:           10px;
  flex:          1;
  min-width:     150px;
  padding:       10px 14px;
  background:    var(--bg-elevated, #f8fafc);
  border:        1px solid var(--border-color);
  border-radius: 8px;
  cursor:        pointer;
  transition:    background 150ms, border-color 150ms;
  color:         var(--text-muted);
}
.db-today-chip:hover { border-color:rgba(37,99,235,.25); background:var(--bg-surface); }
.db-today-chip.green { border-color:rgba(22,163,74,.3); background:rgba(22,163,74,.05); color:#166534; }
.db-today-chip.amber { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.05); color:#92400e; }
.db-today-chip.red   { border-color:rgba(220,38,38,.3);  background:rgba(220,38,38,.05);  color:#991b1b; }
.db-today-chip-body  { display:flex; flex-direction:column; gap:1px; min-width:0; }
.db-today-chip-val   { font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.2; }
.db-today-chip-lbl   { font-size:10px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-today-chip.green .db-today-chip-val { color:#166534; }
.db-today-chip.amber .db-today-chip-val { color:#92400e; }
.db-today-chip.red   .db-today-chip-val { color:#991b1b; }
[data-theme="dark"] .db-today-chip        { background:rgba(255,255,255,.04); }
[data-theme="dark"] .db-today-chip.green  { background:rgba(22,163,74,.08); }
[data-theme="dark"] .db-today-chip.amber  { background:rgba(245,158,11,.08); }
[data-theme="dark"] .db-today-chip.red    { background:rgba(220,38,38,.08);  }

@media (max-width:640px) {
  .db-today-panel { flex-direction:column; align-items:flex-start; }
  .db-today-chip  { min-width:calc(50% - 4px); flex:unset; }
}

/* ── Priority Accounts strip ──────────────────────────────── */
.db-priority-strip {
  background:    var(--bg-surface);
  border:        1px solid rgba(220,38,38,.18);
  border-radius: 10px;
  overflow:      hidden;
}
.db-priority-hd {
  display:      flex;
  align-items:  center;
  gap:          8px;
  padding:      10px 16px;
  border-bottom:1px solid var(--border-color);
  font-size:    12px;
  font-weight:  600;
  color:        #DC2626;
}
.db-priority-hd svg { flex-shrink:0; }
.db-priority-sub {
  font-size:   11px;
  font-weight: 400;
  color:       var(--text-muted);
  margin-left: 2px;
}
.db-priority-cards {
  display:  flex;
  flex-direction: column;
}
.db-priority-card {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 16px;
  border-left:   3px solid transparent;
  border-bottom: 1px solid var(--border-color);
  cursor:        pointer;
  transition:    background 120ms;
}
.db-priority-card:last-child { border-bottom: none; }
.db-priority-card:hover { filter: brightness(0.97); }
[data-theme="dark"] .db-priority-card:hover { filter: brightness(1.06); }
.db-priority-rank {
  width:         20px;
  height:        20px;
  border-radius: 50%;
  background:    var(--border-color);
  color:         var(--text-muted);
  font-size:     11px;
  font-weight:   700;
  display:       flex;
  align-items:   center;
  justify-content:center;
  flex-shrink:   0;
}
.db-priority-info { flex:1; min-width:0; }
.db-priority-name {
  font-size:     13px;
  font-weight:   600;
  color:         var(--text-primary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.db-priority-meta {
  font-size:  11px;
  margin-top: 1px;
}
.db-priority-amt {
  font-size:   13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── KPI accent borders (left-stripe per card) ────────────── */
.db-kpi.db-kpi-accent-red    { border-left:4px solid #DC2626; }
.db-kpi.db-kpi-accent-green  { border-left:4px solid #16A34A; }
.db-kpi.db-kpi-accent-blue   { border-left:4px solid #2563EB; }
.db-kpi.db-kpi-accent-amber  { border-left:4px solid #D97706; }

/* Row-1 KPI cards: compact + capped at 90px per spec (white bg, subtle border) */
.db-kpi.db-kpi-accent-red,
.db-kpi.db-kpi-accent-green,
.db-kpi.db-kpi-accent-blue,
.db-kpi.db-kpi-accent-amber {
  max-height: 90px;
  padding:    12px 16px;
  justify-content: center;
  overflow:   hidden;
}
/* Keep each line single-row so height stays predictable under 90px */
.db-kpi-accent-red  .db-kpi-sub,
.db-kpi-accent-green .db-kpi-sub,
.db-kpi-accent-blue  .db-kpi-sub,
.db-kpi-accent-amber .db-kpi-sub {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* (duplicate removed — final block at end of file is authoritative) */

/* Amber icon variant (was missing) */
.db-kpi-ic.amber { background:#FEF3C7; color:#D97706; }
[data-theme="dark"] .db-kpi-ic.amber { background:rgba(217,119,6,.12); color:#fcd34d; }

/* Compact horizontal KPI layout (icon + text side-by-side, max ~90px card) */
.db-kpi-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex:        1;
}
.db-kpi-body {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1;
  min-width:      0;
}
.db-kpi-val-sm {
  font-size:            18px;
  font-weight:          700;
  letter-spacing:       -.02em;
  color:                var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height:          1.1;
  white-space:          nowrap;
  overflow:             hidden;
  text-overflow:        ellipsis;
}
/* Compact KPI card — shrink padding so total height ≤ 90px */
.db-kpi.db-kpi-compact { padding:12px 14px; }
/* Remove sparkline-gap on sub-label when inside horizontal row */
.db-kpi-row .db-kpi-sub { margin-bottom:0; }
/* Skeleton for compact KPI row */
.db-sk-kpi.compact { height:88px; }

/* ── Today's Follow-ups rows (Right panel Row 2) ──────────── */
.db-fu-row2 {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 16px;
  border-bottom: 1px solid var(--border-color);
  transition:    background 120ms;
}
.db-fu-row2:last-child { border-bottom:none; }
.db-fu-row2:hover { background:#F8FAFC; }
[data-theme="dark"] .db-fu-row2:hover { background:rgba(255,255,255,.025); }
.db-fu2-body  { flex:1; min-width:0; }
.db-fu2-name  { font-size:13px; font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-fu2-unit  { font-size:11px; color:var(--text-muted); margin-top:1px; }
.db-fu2-amt   { font-size:12px; font-weight:600; color:#DC2626; font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
[data-theme="dark"] .db-fu2-amt { color:#fca5a5; }
.db-fu2-call  {
  height:      26px;
  padding:     0 10px;
  font-size:   11px;
  font-weight: 600;
  color:       #2563EB;
  background:  #EFF6FF;
  border:      1px solid #BFDBFE;
  border-radius:5px;
  cursor:      pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition:  background 120ms;
}
.db-fu2-call:hover { background:#DBEAFE; }
[data-theme="dark"] .db-fu2-call { background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.25); color:#93c5fd; }
[data-theme="dark"] .db-fu2-call:hover { background:rgba(37,99,235,.20); }

/* ── AI Radar inline strip (Below Row 3) ─────────────────── */
.db-radar-inline-strip {
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-radius: 10px;
  padding:       14px 16px;
  box-shadow:    0 1px 2px rgba(15,23,42,.04);
}
[data-theme="dark"] .db-radar-inline-strip { box-shadow:0 1px 3px rgba(0,0,0,.22); }
.db-radar-strip-label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin:         0 0 10px;
  display:        flex;
  align-items:    center;
  gap:            6px;
}
.db-radar-strip-cards {
  display: flex;
  gap:     10px;
  flex-wrap: wrap;
}

/* Inline radar card */
.db-radar-inline-card {
  flex:          1;
  min-width:     180px;
  border-radius: 8px;
  border:        1px solid var(--border-color);
  border-left:   4px solid var(--border-color);
  padding:       10px 12px;
  cursor:        pointer;
  transition:    box-shadow 120ms, transform 120ms;
  background:    var(--bg-elevated, #f8fafc);
}
.db-radar-inline-card:hover { box-shadow:0 2px 8px rgba(15,23,42,.08); transform:translateY(-1px); }
[data-theme="dark"] .db-radar-inline-card { background:rgba(255,255,255,.03); }
[data-theme="dark"] .db-radar-inline-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.3); }
.db-radar-inline-card.red    { border-left-color:#DC2626; }
.db-radar-inline-card.amber  { border-left-color:#D97706; }
.db-radar-inline-card.blue   { border-left-color:#2563EB; }
.db-ric-top   { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.db-ric-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.db-radar-inline-card.red   .db-ric-label { color:#DC2626; }
.db-radar-inline-card.amber .db-ric-label { color:#D97706; }
.db-radar-inline-card.blue  .db-ric-label { color:#2563EB; }
[data-theme="dark"] .db-radar-inline-card.red   .db-ric-label { color:#fca5a5; }
[data-theme="dark"] .db-radar-inline-card.amber .db-ric-label { color:#fcd34d; }
[data-theme="dark"] .db-radar-inline-card.blue  .db-ric-label { color:#93c5fd; }
.db-ric-amt   { font-size:13px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.db-ric-name  { font-size:13px; font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-ric-meta  { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ── Hide aurora footer ticker permanently ────────────────── */
.aurora-foot          { display:none !important; }
.aurora-foot-ticker   { display:none !important; }
.scr-dashboard .aurora-foot { display:none !important; }

/* ── Responsive additions ─────────────────────────────────── */
@media (max-width:1280px) {
  .db-radar-strip-cards { flex-direction:column; }
  .db-radar-inline-card { min-width:unset; }
}
@media (max-width:768px) {
  .db-radar-strip-cards { flex-direction:column; }
  .db-fu-row2 { flex-wrap:wrap; }
  .db-fu2-amt { order:3; width:100%; text-align:right; }
}

/* ══════════════════════════════════════════════════════════════
   COMMAND-CENTER COHESION (2026-05-27)
   Ties the dashboard surface to the elevated Aurora command navigator:
   lit card edges, leading section dash, live KPI depth. Scoped to .db,
   additive + reversible. Blue-600 system preserved (no recolour).
══════════════════════════════════════════════════════════════ */

/* Section labels echo the mega-menu group headers (leading accent dash) */
.db .db-sec {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
}
.db .db-sec::before {
  content:       '';
  width:         14px;
  height:        2px;
  border-radius: 2px;
  background:    linear-gradient(90deg, #2563EB, transparent);
  flex-shrink:   0;
}

/* Cards gain a faint lit top edge on hover — the command-center signature */
.db .db-card { position: relative; transition: box-shadow 160ms ease, border-color 160ms ease; }
.db .db-card::before {
  content:        '';
  position:       absolute;
  top: 0; left: 0; right: 0;
  height:         1px;
  background:     linear-gradient(90deg, transparent, rgba(37,99,235,.55) 40%, rgba(96,165,250,.45) 60%, transparent);
  opacity:        0;
  transition:     opacity 220ms ease;
  pointer-events: none;
  z-index:        1;
}
.db .db-card:hover {
  border-color: rgba(37,99,235,.22);
  box-shadow:   0 6px 20px rgba(15,23,42,.08);
}
[data-theme="dark"] .db .db-card:hover {
  border-color: rgba(37,99,235,.30);
  box-shadow:   0 6px 20px rgba(0,0,0,.40);
}
.db .db-card:hover::before { opacity: 1; }

/* (duplicate removed — final block at end of file is authoritative) */

/* ══════════════════════════════════════════════════════════════
   PREMIUM TEMPLATE POLISH (2026-05-27)
   Compact page header · tight section labels · card tints
══════════════════════════════════════════════════════════════ */


/* ── Tight section label (replaces rb-section-eyebrow) ────── */
.db-sec-lbl {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin:         0;
  padding:        2px 0;
}

/* ── KPI grid: tighter gap ───────────────────────────────── */
.db .db-kpis { gap: 10px; }

/* ── Tinted card backgrounds — inline style on element overrides these ── */
[data-theme="dark"] .db-kpi.db-kpi-accent-red   { background: rgba(220,38,38,.08); }
[data-theme="dark"] .db-kpi.db-kpi-accent-green { background: rgba(22,163,74,.08);  }
[data-theme="dark"] .db-kpi.db-kpi-accent-blue  { background: rgba(37,99,235,.08);  }
[data-theme="dark"] .db-kpi.db-kpi-accent-amber { background: rgba(217,119,6,.08);  }

/* ── Value: slightly bigger, tighter letter-spacing ─────── */
.db .db-kpi-val-sm {
  font-size:      20px;
  font-weight:    700;
  letter-spacing: -.03em;
}

/* ── KPI card hover — lift + accent border + deeper shadow ── */
.db-kpi.db-kpi-accent-red,
.db-kpi.db-kpi-accent-green,
.db-kpi.db-kpi-accent-blue,
.db-kpi.db-kpi-accent-amber {
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.db-kpi.db-kpi-accent-red:hover   { transform:translateY(-2px); box-shadow:0 0 0 2px rgba(220,38,38,.30),  0 8px 24px rgba(220,38,38,.22); border-color:rgba(220,38,38,.50); }
.db-kpi.db-kpi-accent-green:hover { transform:translateY(-2px); box-shadow:0 0 0 2px rgba(22,163,74,.30),  0 8px 24px rgba(22,163,74,.22);  border-color:rgba(22,163,74,.50);  }
.db-kpi.db-kpi-accent-blue:hover  { transform:translateY(-2px); box-shadow:0 0 0 2px rgba(37,99,235,.30),  0 8px 24px rgba(37,99,235,.22);  border-color:rgba(37,99,235,.50);  }
.db-kpi.db-kpi-accent-amber:hover { transform:translateY(-2px); box-shadow:0 0 0 2px rgba(217,119,6,.30),  0 8px 24px rgba(217,119,6,.22);  border-color:rgba(217,119,6,.50);  }
[data-theme="dark"] .db-kpi.db-kpi-accent-red:hover   { box-shadow:0 0 0 2px rgba(220,38,38,.50),  0 8px 28px rgba(220,38,38,.38); }
[data-theme="dark"] .db-kpi.db-kpi-accent-green:hover { box-shadow:0 0 0 2px rgba(22,163,74,.50),  0 8px 28px rgba(22,163,74,.38);  }
[data-theme="dark"] .db-kpi.db-kpi-accent-blue:hover  { box-shadow:0 0 0 2px rgba(37,99,235,.50),  0 8px 28px rgba(37,99,235,.38);  }
[data-theme="dark"] .db-kpi.db-kpi-accent-amber:hover { box-shadow:0 0 0 2px rgba(217,119,6,.50),  0 8px 28px rgba(217,119,6,.38);  }

/* ── Card polish: crisper border + better shadow ────────── */
.db .db-card {
  border-color: var(--border-color);
  box-shadow:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
}
[data-theme="dark"] .db .db-card { box-shadow: 0 1px 4px rgba(0,0,0,.28); }

/* Card headers */
.db .db-card-ch    { padding: 14px 18px 12px; }
.db .db-card-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }

/* ════════════════════════════════════════════════════════════
   COMMAND CENTER v2 — animated premium landing, THEME-AWARE.
   Blue #2563EB / Purple #7C3AED / Pink #F472B6 accents.
   All rules scoped to #pg-dashboard.cc-active (dashboard.js adds the
   class on entry, removes it when a role card is clicked) so nothing
   leaks to other pages and no global theme class is touched.
   DARK theme = deep-navy canvas (default rules below).
   LIGHT theme = light surfaces (the [data-theme="light"] override
   block near the end). The screen follows the user's chosen theme.
════════════════════════════════════════════════════════════ */
#pg-dashboard.cc-active { background:#070B18 !important; color:#E2E8F0 !important; }

#pg-dashboard.cc-active .cc {
  display:flex; flex-direction:column; gap:16px;
  background:#070B18 !important; color:#E2E8F0 !important;
  padding:20px; border-radius:18px; min-height:calc(100vh - 150px);
}
.cc-roleview { display:flex; flex-direction:column; gap:12px; }

/* skeleton */
#pg-dashboard.cc-active .cc-skel { display:flex; flex-direction:column; }
#pg-dashboard.cc-active .cc-sb { background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04)) !important;
  background-size:200% 100%; border-radius:14px; animation:ccShimmer 1.3s linear infinite; }
@keyframes ccShimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* section entrance (stagger via inline animation-delay) */
#pg-dashboard.cc-active .cc-top,
#pg-dashboard.cc-active .cc-chips,
#pg-dashboard.cc-active .cc-roles,
#pg-dashboard.cc-active .cc-main,
#pg-dashboard.cc-active .cc-bottom { opacity:0; animation:ccFade .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes ccFade { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ── §1 TOP BAR ──────────────────────────────────────────── */
#pg-dashboard.cc-active .cc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
#pg-dashboard.cc-active .cc-greet {
  font-size:26px; font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(90deg,#2563EB,#7C3AED,#F472B6) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
#pg-dashboard.cc-active .cc-status { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12px; font-weight:500; color:#64748B !important; }
#pg-dashboard.cc-active .cc-live-dot { width:8px; height:8px; border-radius:50%; background:#10B981 !important; animation:ccPulseDot 1.8s ease-out infinite; }
@keyframes ccPulseDot { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 70%{box-shadow:0 0 0 7px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }
#pg-dashboard.cc-active .cc-top-r { text-align:right; display:flex; flex-direction:column; align-items:flex-end; }
#pg-dashboard.cc-active .cc-analog { display:block; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
#pg-dashboard.cc-active .cc-clock-date { font-size:11.5px; color:#64748B !important; margin-top:6px; }

/* ── §2 ALERT CHIPS ──────────────────────────────────────── */
#pg-dashboard.cc-active .cc-chips { display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
#pg-dashboard.cc-active .cc-chips::-webkit-scrollbar { display:none; }
#pg-dashboard.cc-active .cc-chip {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px; font-size:12px; font-weight:600;
  cursor:pointer; white-space:nowrap; border:1px solid; font-family:inherit;
  opacity:0; transform:translateX(-16px); animation:ccChipIn .45s cubic-bezier(.16,1,.3,1) forwards;
  transition:filter .15s ease, transform .15s ease;
}
@keyframes ccChipIn { to{opacity:1;transform:translateX(0)} }
#pg-dashboard.cc-active .cc-chip:hover { filter:brightness(1.18); transform:translateY(-1px); }
#pg-dashboard.cc-active .cc-chip.red   { color:#FCA5A5 !important; border-color:rgba(239,68,68,.35) !important;  background:rgba(239,68,68,.10) !important; }
#pg-dashboard.cc-active .cc-chip.amber { color:#FCD34D !important; border-color:rgba(245,158,11,.35) !important; background:rgba(245,158,11,.10) !important; }
#pg-dashboard.cc-active .cc-chip.blue  { color:#93C5FD !important; border-color:rgba(37,99,235,.35) !important;  background:rgba(37,99,235,.10) !important; }
#pg-dashboard.cc-active .cc-chip.green { color:#6EE7B7 !important; border-color:rgba(16,185,129,.35) !important; background:rgba(16,185,129,.10) !important; }

/* ── §3 ROLE CARDS ───────────────────────────────────────── */
#pg-dashboard.cc-active .cc-roles { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
#pg-dashboard.cc-active .cc-role {
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:16px; border-radius:16px; background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.07) !important;
  cursor:pointer; text-align:left; overflow:hidden; font-family:inherit;
  opacity:0; animation:ccFade .5s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
#pg-dashboard.cc-active .cc-role::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#2563EB,#7C3AED); transform:scaleY(0); transform-origin:top; transition:transform .25s ease; }
#pg-dashboard.cc-active .cc-role:hover::before { transform:scaleY(1); }
#pg-dashboard.cc-active .cc-role:hover { transform:translateY(-3px); background:rgba(255,255,255,.05) !important; border-color:rgba(37,99,235,.4) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(37,99,235,.2); backdrop-filter:blur(8px); }
#pg-dashboard.cc-active .cc-role-ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--rc,#2563EB) !important; color:#fff !important; margin-bottom:8px; }
#pg-dashboard.cc-active .cc-role:hover .cc-role-ic { animation:ccFloat 1.4s ease-in-out infinite; }
@keyframes ccFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
#pg-dashboard.cc-active .cc-role-lb { font-size:13px; font-weight:500; color:#E2E8F0 !important; }
#pg-dashboard.cc-active .cc-role-sub { font-size:10px; color:#64748B !important; }
#pg-dashboard.cc-active .cc-role-badge { position:absolute; top:12px; right:12px; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:#EF4444 !important; color:#fff !important; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  animation:ccPulseDot 1.8s ease-out infinite; }
#pg-dashboard.cc-active .cc-role-wa { position:absolute; top:13px; left:13px; padding:2px 7px; border-radius:8px;
  background:rgba(16,185,129,.15) !important; color:#6EE7B7 !important; font-size:9px; font-weight:800; letter-spacing:.05em; border:1px solid rgba(16,185,129,.3); }

/* shared card */
#pg-dashboard.cc-active .cc-main { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
#pg-dashboard.cc-active .cc-card { background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:16px; padding:18px;
  display:flex; flex-direction:column; gap:12px; transition:background .2s ease, border-color .2s ease; }
#pg-dashboard.cc-active .cc-card:hover { background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.12) !important; backdrop-filter:blur(8px); }
#pg-dashboard.cc-active .cc-card-ttl { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#64748B !important; }
#pg-dashboard.cc-active .cc-card-foot { font-size:10.5px; color:#64748B !important; margin-top:auto; }
#pg-dashboard.cc-active .cc-empty { font-size:12px; color:#64748B !important; padding:14px 2px; }

/* ── §4 CARD A — Collection Pulse ────────────────────────── */
#pg-dashboard.cc-active .cc-pulse-top { display:flex; align-items:center; gap:18px; }
#pg-dashboard.cc-active .cc-gauge { position:relative; flex-shrink:0; width:132px; height:132px; }
#pg-dashboard.cc-active #cc-gauge-arc { transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1); }
#pg-dashboard.cc-active .cc-gauge-ctr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
#pg-dashboard.cc-active .cc-gauge-ctr .cc-count { font-size:24px; font-weight:800; color:#E2E8F0 !important; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-gauge-ctr small { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#64748B !important; }
#pg-dashboard.cc-active .cc-pulse-stats { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
#pg-dashboard.cc-active .cc-mini { display:flex; flex-direction:column; gap:1px; padding:6px 10px; border-left:2px solid transparent;
  border-radius:0 8px 8px 0; transition:background .15s ease, border-color .15s ease; }
#pg-dashboard.cc-active .cc-mini:hover { background:rgba(255,255,255,.04); border-left-color:#2563EB; }
#pg-dashboard.cc-active .cc-mini-lb { font-size:10px; color:#64748B !important; }
#pg-dashboard.cc-active .cc-mini-v { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:#E2E8F0 !important; }
#pg-dashboard.cc-active .cc-mini-v.green { color:#10B981 !important; }
#pg-dashboard.cc-active .cc-mini-v.red { color:#EF4444 !important; }
#pg-dashboard.cc-active .cc-mini-v.blue { color:#60A5FA !important; }
#pg-dashboard.cc-active .cc-spark { display:flex; align-items:flex-end; gap:5px; height:46px; }
#pg-dashboard.cc-active .cc-spark-bar { flex:1; min-height:6px; border-radius:4px 4px 0 0; transform-origin:bottom;
  background:linear-gradient(180deg,#2563EB,#7C3AED); animation:ccGrow .6s cubic-bezier(.16,1,.3,1) backwards;
  transition:filter .15s ease; }
#pg-dashboard.cc-active .cc-spark-bar:hover { filter:brightness(1.35); }
@keyframes ccGrow { from{transform:scaleY(0)} to{transform:scaleY(1)} }
#pg-dashboard.cc-active .cc-spark-bar:nth-child(1){animation-delay:.10s} #pg-dashboard.cc-active .cc-spark-bar:nth-child(2){animation-delay:.15s}
#pg-dashboard.cc-active .cc-spark-bar:nth-child(3){animation-delay:.20s} #pg-dashboard.cc-active .cc-spark-bar:nth-child(4){animation-delay:.25s}
#pg-dashboard.cc-active .cc-spark-bar:nth-child(5){animation-delay:.30s} #pg-dashboard.cc-active .cc-spark-bar:nth-child(6){animation-delay:.35s}
#pg-dashboard.cc-active .cc-spark-bar:nth-child(7){animation-delay:.40s}

/* ── §4 CARD B — Radar + Health ──────────────────────────── */
#pg-dashboard.cc-active .cc-card-rh { gap:8px; }
#pg-dashboard.cc-active .cc-rh-radar { display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.07); }
#pg-dashboard.cc-active .cc-radar-stage { position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
#pg-dashboard.cc-active .cc-pulse-ring { position:absolute; inset:0; border-radius:50%; border:2px solid #7C3AED; opacity:0; animation:ccRing 2.2s ease-out infinite; }
#pg-dashboard.cc-active .cc-pulse-ring.r2 { animation-delay:.6s; border-color:#2563EB; }
@keyframes ccRing { 0%{transform:scale(.5);opacity:.7} 100%{transform:scale(1.3);opacity:0} }
#pg-dashboard.cc-active .cc-radar-core { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(124,58,237,.25), rgba(7,11,24,.4));
  border:2px solid var(--rcol,#10B981); box-shadow:0 0 24px -4px var(--rcol,#10B981); }
#pg-dashboard.cc-active .cc-radar-core .cc-count { font-size:30px; font-weight:800; color:var(--rcol,#10B981) !important; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-radar-trend { font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
#pg-dashboard.cc-active .cc-radar-trend.up { color:#10B981 !important; background:rgba(16,185,129,.12); }
#pg-dashboard.cc-active .cc-radar-trend.dn { color:#EF4444 !important; background:rgba(239,68,68,.12); }
#pg-dashboard.cc-active .cc-radar-trend.muted { color:#64748B !important; background:rgba(255,255,255,.04); }
#pg-dashboard.cc-active .cc-rh-health { display:flex; align-items:center; gap:14px; padding-top:2px; }
#pg-dashboard.cc-active .cc-donut-svg { flex-shrink:0; }
#pg-dashboard.cc-active .cc-donut-leg { display:flex; flex-direction:column; gap:5px; }
#pg-dashboard.cc-active .cc-leg { font-size:11px; color:#64748B !important; display:flex; align-items:center; gap:7px; }
#pg-dashboard.cc-active .cc-leg b { color:#E2E8F0 !important; font-weight:700; }
#pg-dashboard.cc-active .cc-leg-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }

/* ── §4 CARD C — Units + WhatsApp ────────────────────────── */
#pg-dashboard.cc-active .cc-units-big { display:flex; align-items:baseline; gap:6px; }
#pg-dashboard.cc-active .cc-units-big .cc-count { font-size:40px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,#2563EB,#7C3AED) !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; }
#pg-dashboard.cc-active .cc-units-tot { font-size:18px; font-weight:600; color:#64748B !important; }
#pg-dashboard.cc-active .cc-bar { height:8px; border-radius:6px; background:rgba(255,255,255,.06) !important; overflow:hidden; }
#pg-dashboard.cc-active .cc-bar-fill { height:100%; border-radius:6px; position:relative; overflow:hidden; transition:width 1s cubic-bezier(.4,0,.2,1); }
#pg-dashboard.cc-active .cc-bar-fill.grad { background:linear-gradient(90deg,#2563EB,#7C3AED); }
#pg-dashboard.cc-active .cc-bar-fill.green { background:linear-gradient(90deg,#10B981,#34D399); }
#pg-dashboard.cc-active .cc-bar-fill::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:ccShine 2.4s ease-in-out infinite; }
@keyframes ccShine { to { transform:translateX(100%); } }
#pg-dashboard.cc-active .cc-wa { margin-top:6px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:7px; }
#pg-dashboard.cc-active .cc-wa-hd { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#E2E8F0 !important; }
#pg-dashboard.cc-active .cc-wa-sub { font-size:10.5px; color:#64748B !important; }

/* ── §5 BOTTOM ROW ───────────────────────────────────────── */
#pg-dashboard.cc-active .cc-bottom { display:grid; grid-template-columns:1fr 2fr 1fr; gap:14px; }
#pg-dashboard.cc-active .cc-acts { display:flex; flex-direction:column; gap:3px; }
#pg-dashboard.cc-active .cc-act-row { display:flex; align-items:center; gap:10px; padding:7px 2px; opacity:0; animation:ccFade .4s cubic-bezier(.16,1,.3,1) forwards; }
#pg-dashboard.cc-active .cc-act-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
#pg-dashboard.cc-active .cc-act-dot.green { background:#10B981; } #pg-dashboard.cc-active .cc-act-dot.amber { background:#F59E0B; }
#pg-dashboard.cc-active .cc-act-dot.rec { background:#60A5FA; } #pg-dashboard.cc-active .cc-act-dot.red { background:#EF4444; }
#pg-dashboard.cc-active .cc-act-desc { flex:1; min-width:0; font-size:12px; color:#E2E8F0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pg-dashboard.cc-active .cc-act-ts { flex-shrink:0; font-size:10px; color:#64748B !important; }
#pg-dashboard.cc-active .cc-card-ticker { overflow:hidden; }
#pg-dashboard.cc-active .cc-ticker { position:relative; flex:1; display:flex; align-items:center; min-height:42px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
#pg-dashboard.cc-active .cc-ticker-track { display:flex; gap:34px; white-space:nowrap; animation:ccMarquee 26s linear infinite; }
#pg-dashboard.cc-active .cc-ticker:hover .cc-ticker-track { animation-play-state:paused; }
@keyframes ccMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
#pg-dashboard.cc-active .cc-tick-item { font-size:12.5px; font-weight:500; color:#94A3B8 !important; }
#pg-dashboard.cc-active .cc-qa { display:flex; flex-direction:column; gap:7px; }
#pg-dashboard.cc-active .cc-qa-btn { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; font-size:12.5px; font-weight:600;
  cursor:pointer; text-align:left; font-family:inherit; color:#E2E8F0 !important;
  background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.07) !important;
  transition:transform .15s ease, background .15s ease, border-color .15s ease; }
#pg-dashboard.cc-active .cc-qa-btn:hover { transform:translateX(3px); }
#pg-dashboard.cc-active .cc-qa-btn.blue:hover { background:rgba(37,99,235,.14) !important; border-color:rgba(37,99,235,.4) !important; }
#pg-dashboard.cc-active .cc-qa-btn.green:hover { background:rgba(16,185,129,.14) !important; border-color:rgba(16,185,129,.4) !important; }
#pg-dashboard.cc-active .cc-qa-badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#EF4444 !important;
  color:#fff !important; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* back button (role view — uses the normal app theme; NOT under the forced class) */
.cc-back { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px;
  font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  background:var(--surface,#fff); border:1px solid var(--border-color,rgba(15,23,42,.1)); color:var(--text-primary,#334155);
  transition:border-color .15s ease, color .15s ease; }
[data-theme="dark"] .cc-back { background:var(--x-surface,#1A1D2E); border-color:var(--x-border,rgba(255,255,255,.08)); color:var(--x-text,#E5E7EB); }
.cc-back:hover { border-color:#2563EB; color:#2563EB; }

/* ── Priority sections (Action Required · Today's Numbers · System) ── */
#pg-dashboard.cc-active .cc-sec-lbl { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748B; margin:4px 0 -6px; }
#pg-dashboard.cc-active .cc-chip.allclear { cursor:default; }

/* Card A — Today's Collections */
#pg-dashboard.cc-active .cc-today-num { font-size:34px; font-weight:800; letter-spacing:-.03em; color:#10B981; font-variant-numeric:tabular-nums; margin-top:2px; }
#pg-dashboard.cc-active .cc-today-delta { font-size:12px; font-weight:700; }
#pg-dashboard.cc-active .cc-today-delta.up { color:#10B981; }
#pg-dashboard.cc-active .cc-today-delta.dn { color:#EF4444; }

/* Card B — This Month vs Target (circular progress) */
#pg-dashboard.cc-active .cc-prog-card { align-items:center; }
#pg-dashboard.cc-active .cc-prog { position:relative; width:124px; height:124px; align-self:center; }
#pg-dashboard.cc-active #cc-prog-arc { transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
#pg-dashboard.cc-active .cc-prog-ctr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
#pg-dashboard.cc-active .cc-prog-ctr .cc-count { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-prog-ctr small { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#64748B; }
#pg-dashboard.cc-active .cc-prog-sub { font-size:12px; color:#94A3B8; text-align:center; margin-top:auto; }

/* Card C — Overdue aging bars */
#pg-dashboard.cc-active .cc-aging-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
#pg-dashboard.cc-active .cc-aging-total { font-size:24px; font-weight:800; letter-spacing:-.02em; color:#EF4444; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-aging-sub { font-size:11px; color:#64748B; }
#pg-dashboard.cc-active .cc-aging-bars { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
#pg-dashboard.cc-active .cc-aging-row { display:flex; align-items:center; gap:10px; }
#pg-dashboard.cc-active .cc-aging-lb { width:72px; flex-shrink:0; font-size:11px; color:#94A3B8; }
#pg-dashboard.cc-active .cc-aging-bar { flex:1; height:8px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden; }
#pg-dashboard.cc-active .cc-aging-fill { display:block; height:100%; border-radius:5px; transition:width 1s cubic-bezier(.4,0,.2,1); }
#pg-dashboard.cc-active .cc-aging-amt { width:80px; flex-shrink:0; text-align:right; font-size:11.5px; font-weight:700; color:#E2E8F0; font-variant-numeric:tabular-nums; }

/* System status ticker card (full width) */
#pg-dashboard.cc-active .cc-card-ticker { padding:14px 18px; }

/* ════════════════════════════════════════════════════════════
   MISSION CONTROL cockpit — Action Radar · Intake dial · Goal
════════════════════════════════════════════════════════════ */
#pg-dashboard.cc-active .cc-cockpit { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; align-items:stretch; opacity:0; animation:ccFade .5s cubic-bezier(.16,1,.3,1) forwards; }
#pg-dashboard.cc-active .cc-cockpit .cc-card { animation:none; opacity:1; min-height:230px; padding:15px !important; }
/* Action Radar container resized to the uniform card (markup + sweep animation untouched) */
#pg-dashboard.cc-active .cc-radarcard .cc-radar-wrap { flex-direction:column; align-items:center; gap:8px; }

/* — Action Radar — */
#pg-dashboard.cc-active .cc-radar-wrap { display:flex; align-items:center; gap:16px; flex:1; }
#pg-dashboard.cc-active .cc-scope { position:relative; width:200px; height:200px; flex-shrink:0; }
#pg-dashboard.cc-active .cc-scope-svg { width:200px; height:200px; display:block; }
#pg-dashboard.cc-active .cc-ring-o { fill:rgba(37,99,235,.04); stroke:rgba(37,99,235,.30); stroke-width:1.5; }
#pg-dashboard.cc-active .cc-ring-i { fill:none; stroke:rgba(37,99,235,.16); stroke-width:1; }
#pg-dashboard.cc-active .cc-cross  { stroke:rgba(37,99,235,.16); stroke-width:1; }
#pg-dashboard.cc-active .cc-sweep {
  position:absolute; inset:6px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(37,99,235,0) 0deg, rgba(37,99,235,.30) 38deg, rgba(124,58,237,.12) 70deg, rgba(37,99,235,0) 90deg);
  animation:ccSpin 3.4s linear infinite;
}
#pg-dashboard.cc-active .cc-scope-ctr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
#pg-dashboard.cc-active .cc-scope-ctr .cc-count { font-size:30px; font-weight:800; color:#E2E8F0; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-scope-ctr small { font-size:8.5px; letter-spacing:.14em; color:#64748B; font-weight:700; }
#pg-dashboard.cc-active .cc-blip {
  position:absolute; width:22px; height:22px; transform:translate(-50%,-50%); border:none; cursor:pointer;
  border-radius:50%; background:var(--bc); color:#fff; font:inherit; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 0 var(--bc); animation:ccBlip 1.8s ease-out infinite;
}
#pg-dashboard.cc-active .cc-blip b { font-size:11px; font-weight:800; }
#pg-dashboard.cc-active .cc-blip:hover { filter:brightness(1.15); }
#pg-dashboard.cc-active .cc-rleg-list { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
#pg-dashboard.cc-active .cc-rleg { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 9px; padding:7px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); cursor:pointer; text-align:left; font:inherit; transition:background .15s, border-color .15s; }
#pg-dashboard.cc-active .cc-rleg:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
#pg-dashboard.cc-active .cc-rleg-dot { width:9px; height:9px; border-radius:50%; }
#pg-dashboard.cc-active .cc-rleg-lb { font-size:12.5px; font-weight:600; color:#E2E8F0; }
#pg-dashboard.cc-active .cc-rleg-n { font-size:15px; font-weight:800; grid-row:1/3; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-rleg-sub { grid-column:2; font-size:10.5px; color:#64748B; }
#pg-dashboard.cc-active .cc-rleg-clear { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#10B981; padding:10px 4px; }

/* — Today's Intake needle dial — */
#pg-dashboard.cc-active .cc-dial { position:relative; }
#pg-dashboard.cc-active .cc-dial-svg { width:100%; height:auto; display:block; }
#pg-dashboard.cc-active .cc-dial-rim { fill:none; stroke:rgba(255,255,255,.10); stroke-width:3; }
#pg-dashboard.cc-active .cc-dtick { stroke:rgba(255,255,255,.22); stroke-width:1.5; }
#pg-dashboard.cc-active .cc-dtick.maj { stroke:rgba(255,255,255,.45); stroke-width:2; }
#pg-dashboard.cc-active .cc-needle { stroke:#EF4444; stroke-width:3; stroke-linecap:round; transform-box:view-box; transform-origin:100px 110px; transition:transform 1.4s cubic-bezier(.34,1.25,.45,1); }
#pg-dashboard.cc-active .cc-needle-hub { fill:#EF4444; }
#pg-dashboard.cc-active .cc-dial-val { text-align:center; margin-top:-6px; }
#pg-dashboard.cc-active .cc-dial-val .cc-count { font-size:22px; font-weight:800; color:#E2E8F0; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-dial-delta { text-align:center; font-size:11.5px; font-weight:700; margin-top:2px; }
#pg-dashboard.cc-active .cc-dial-delta.up { color:#10B981; } #pg-dashboard.cc-active .cc-dial-delta.dn { color:#EF4444; }
#pg-dashboard.cc-active .cc-ekg { width:100%; height:30px; margin-top:8px; display:block; }
#pg-dashboard.cc-active .cc-ekg-line { fill:none; stroke:#2563EB; stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; animation:ccEkgDraw 1.6s ease .3s forwards; }

/* — Monthly Goal ring + slider — */
#pg-dashboard.cc-active .cc-goalcard { align-items:center; }
#pg-dashboard.cc-active .cc-goal-ring { position:relative; width:120px; height:120px; align-self:center; }
#pg-dashboard.cc-active .cc-goal-track { fill:none; stroke:rgba(255,255,255,.08); stroke-width:9; }
#pg-dashboard.cc-active #cc-goal-arc { transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1), stroke .25s; }
#pg-dashboard.cc-active .cc-goal-ctr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#pg-dashboard.cc-active .cc-goal-ctr span { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-goal-ctr small { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#64748B; }
#pg-dashboard.cc-active .cc-goal-read { font-size:12.5px; color:#94A3B8; text-align:center; margin-top:2px; }
#pg-dashboard.cc-active .cc-goal-slider { margin-top:10px; }
#pg-dashboard.cc-active .cc-goal-slider input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px; outline:none; background:linear-gradient(90deg,#2563EB var(--fill,0%), rgba(255,255,255,.12) var(--fill,0%)); }
#pg-dashboard.cc-active .cc-goal-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#2563EB; border:2px solid #0D1424; cursor:pointer; box-shadow:0 2px 6px rgba(37,99,235,.55); }
#pg-dashboard.cc-active .cc-goal-slider input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#2563EB; border:2px solid #0D1424; cursor:pointer; }
#pg-dashboard.cc-active .cc-goal-slabels { display:flex; justify-content:space-between; margin-top:7px; font-size:10.5px; color:#64748B; }
#pg-dashboard.cc-active .cc-goal-slabels #cc-goal-amt { color:#2563EB; font-weight:700; }

@keyframes ccSpin { to { transform:rotate(360deg); } }
@keyframes ccBlip { 0%{box-shadow:0 0 0 0 var(--bc);} 70%{box-shadow:0 0 0 11px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@keyframes ccEkgDraw { to { stroke-dashoffset:0; } }
@keyframes ccPing { 0%{transform:scale(.55);opacity:.9} 100%{transform:scale(1.95);opacity:0} }

/* ── Cockpit refinements (depth · zones · ping · glow · projection) ── */
#pg-dashboard.cc-active .cc-cockpit .cc-card { position:relative; overflow:hidden; animation:ccFade .55s cubic-bezier(.16,1,.3,1) both;
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .2s ease; }
#pg-dashboard.cc-active .cc-cockpit .cc-card:nth-child(1){animation-delay:.10s}
#pg-dashboard.cc-active .cc-cockpit .cc-card:nth-child(2){animation-delay:.18s}
#pg-dashboard.cc-active .cc-cockpit .cc-card:nth-child(3){animation-delay:.26s}
#pg-dashboard.cc-active .cc-cockpit .cc-card:nth-child(4){animation-delay:.34s}
#pg-dashboard.cc-active .cc-cockpit .cc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#2563EB,#7C3AED,#F472B6); opacity:.55; }
#pg-dashboard.cc-active .cc-cockpit .cc-card:hover { transform:translateY(-3px); box-shadow:0 18px 44px rgba(0,0,0,.5); border-color:rgba(37,99,235,.32); }

#pg-dashboard.cc-active .cc-sec-lbl { display:flex; align-items:center; gap:8px; }
#pg-dashboard.cc-active .cc-sec-lbl::before { content:''; width:14px; height:2px; border-radius:2px; background:linear-gradient(90deg,#2563EB,#7C3AED); }

#pg-dashboard.cc-active .cc-scope { border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(37,99,235,.08), transparent 70%);
  box-shadow:inset 0 0 0 2px rgba(37,99,235,.18), inset 0 0 22px rgba(37,99,235,.12), 0 0 26px rgba(37,99,235,.10); }
#pg-dashboard.cc-active .cc-scope-ctr .cc-count { text-shadow:0 0 14px rgba(37,99,235,.5); }
#pg-dashboard.cc-active .cc-blip-ping { position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--bc); animation:ccPing 1.8s ease-out infinite; }
#pg-dashboard.cc-active .cc-blip { transition:transform .2s ease, box-shadow .2s ease; }
#pg-dashboard.cc-active .cc-blip.hot { transform:translate(-50%,-50%) scale(1.4); box-shadow:0 0 0 5px rgba(255,255,255,.14); z-index:4; }
#pg-dashboard.cc-active .cc-rleg.hot { background:rgba(37,99,235,.14); border-color:rgba(37,99,235,.4); }

#pg-dashboard.cc-active .cc-zone { fill:none; stroke-width:5; stroke-linecap:butt; opacity:.6; }
#pg-dashboard.cc-active .cc-zone.z-red   { stroke:#EF4444; }
#pg-dashboard.cc-active .cc-zone.z-amber { stroke:#F59E0B; }
#pg-dashboard.cc-active .cc-zone.z-green { stroke:#10B981; }
#pg-dashboard.cc-active .cc-needle { filter:drop-shadow(0 0 4px rgba(239,68,68,.6)); }

#pg-dashboard.cc-active .cc-goal-proj { font-size:11px; color:#94A3B8; text-align:center; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:5px; }
#pg-dashboard.cc-active .cc-goal-proj b { color:#E2E8F0; font-weight:700; }
#pg-dashboard.cc-active .cc-goal-proj .up { color:#10B981; }
#pg-dashboard.cc-active .cc-goal-proj .dn { color:#EF4444; }

/* auto-fit handles 4-up → 2x2 → stacked by width; only stack radar internals on very narrow */
@media (max-width:560px) { #pg-dashboard.cc-active .cc-radar-wrap { flex-direction:column; } }

/* ── Role card: who runs each dashboard ──────────────────── */
#pg-dashboard.cc-active .cc-role-users { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#94A3B8; margin-top:1px; }
#pg-dashboard.cc-active .cc-role-users svg { opacity:.7; flex-shrink:0; }

/* ── Needs Your Decision — approvals inbox + attention ───── */
#pg-dashboard.cc-active .cc-decide { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
#pg-dashboard.cc-active .cc-decide-col { display:flex; flex-direction:column; gap:14px; }
#pg-dashboard.cc-active .cc-ap-hd { display:flex; align-items:baseline; gap:9px; }
#pg-dashboard.cc-active .cc-ap-total { font-size:30px; font-weight:800; color:#EF4444; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-ap-sub { font-size:11.5px; color:#94A3B8; }
#pg-dashboard.cc-active .cc-aprows { display:flex; flex-direction:column; gap:2px; margin-top:2px; }
#pg-dashboard.cc-active .cc-aprow { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:9px; transition:background .15s ease; }
#pg-dashboard.cc-active .cc-aprow:hover { background:rgba(255,255,255,.04); }
#pg-dashboard.cc-active .cc-aprow-ic { width:26px; height:26px; flex-shrink:0; border-radius:7px; display:flex; align-items:center; justify-content:center; background:rgba(37,99,235,.12); color:#60A5FA; }
#pg-dashboard.cc-active .cc-aprow-lb { flex:1; min-width:0; font-size:12.5px; color:#E2E8F0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pg-dashboard.cc-active .cc-aprow-amt { font-size:11px; color:#94A3B8; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-aprow-n { min-width:22px; text-align:center; font-size:13px; font-weight:800; color:#E2E8F0; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-ap-go { margin-top:10px; align-self:flex-start; display:inline-flex; align-items:center; gap:5px; padding:8px 13px; border-radius:9px; border:1px solid rgba(37,99,235,.4); background:transparent; color:#60A5FA; font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:background .15s ease, color .15s ease; }
#pg-dashboard.cc-active .cc-ap-go:hover { background:#2563EB; color:#fff; border-color:#2563EB; }
#pg-dashboard.cc-active .cc-ap-zero { display:flex; align-items:center; gap:12px; padding:16px 6px; color:#10B981; }
#pg-dashboard.cc-active .cc-ap-zero div { display:flex; flex-direction:column; }
#pg-dashboard.cc-active .cc-ap-zero b { font-size:14px; color:#E2E8F0; }
#pg-dashboard.cc-active .cc-ap-zero span { font-size:11.5px; color:#94A3B8; }
#pg-dashboard.cc-active .cc-attn { flex-direction:row; align-items:center; gap:12px; cursor:pointer; text-align:left; font:inherit; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
#pg-dashboard.cc-active .cc-attn:hover { transform:translateY(-2px); border-color:rgba(37,99,235,.3); }
#pg-dashboard.cc-active .cc-attn-ic { width:38px; height:38px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:var(--ac,#94A3B8); }
#pg-dashboard.cc-active .cc-attn-meta { flex:1; min-width:0; display:flex; flex-direction:column; }
#pg-dashboard.cc-active .cc-attn-n { font-size:22px; font-weight:800; color:#E2E8F0; line-height:1; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-attn.on .cc-attn-n { color:var(--ac); }
#pg-dashboard.cc-active .cc-attn-lb { font-size:11px; color:#94A3B8; margin-top:3px; }
#pg-dashboard.cc-active .cc-attn-go { color:#64748B; opacity:0; transition:opacity .15s ease; }
#pg-dashboard.cc-active .cc-attn:hover .cc-attn-go { opacity:1; }
@media (max-width:760px) { #pg-dashboard.cc-active .cc-decide { grid-template-columns:1fr; } }

/* ── Team Activity (per-user, today) ─────────────────────── */
#pg-dashboard.cc-active .cc-team { gap:8px; }
#pg-dashboard.cc-active .cc-tscroll { overflow-x:auto; }
#pg-dashboard.cc-active .cc-thead, #pg-dashboard.cc-active .cc-trow { display:grid; grid-template-columns:minmax(160px,1.8fr) .9fr 1fr .8fr 1.1fr; align-items:center; gap:10px; min-width:520px; }
#pg-dashboard.cc-active .cc-thead { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#64748B; padding:0 10px 8px; border-bottom:1px solid rgba(255,255,255,.07); }
#pg-dashboard.cc-active .cc-thead span:not(:first-child), #pg-dashboard.cc-active .cc-trow .cc-tc { text-align:right; }
#pg-dashboard.cc-active .cc-trows { display:flex; flex-direction:column; margin-top:2px; }
#pg-dashboard.cc-active .cc-trow { padding:9px 10px; border-radius:9px; transition:background .15s ease; }
#pg-dashboard.cc-active .cc-trow:hover { background:rgba(255,255,255,.04); }
#pg-dashboard.cc-active .cc-tmember { display:flex; align-items:center; gap:10px; min-width:0; }
#pg-dashboard.cc-active .cc-tav { position:relative; width:30px; height:30px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(135deg,#2563EB,#7C3AED); }
#pg-dashboard.cc-active .cc-ton { position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:#10B981; border:2px solid #0D1424; animation:ccPulseDot 1.8s ease-out infinite; }
#pg-dashboard.cc-active .cc-tname { display:flex; flex-direction:column; min-width:0; }
#pg-dashboard.cc-active .cc-tname b { font-size:12.5px; font-weight:600; color:#E2E8F0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pg-dashboard.cc-active .cc-tname small { font-size:10px; color:#64748B; }
#pg-dashboard.cc-active .cc-tc { font-size:12.5px; color:#E2E8F0; font-variant-numeric:tabular-nums; }
#pg-dashboard.cc-active .cc-team-go { margin-top:6px; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:9px; border:1px solid rgba(255,255,255,.1); background:transparent; color:#94A3B8; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
#pg-dashboard.cc-active .cc-team-go:hover { border-color:#2563EB; color:#60A5FA; }
/* expandable row → today's contacted clients */
#pg-dashboard.cc-active .cc-trow.exp { cursor:pointer; }
#pg-dashboard.cc-active .cc-tc-ct { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; }
#pg-dashboard.cc-active .cc-tc-ct svg { color:#64748B; transition:transform .2s ease; }
#pg-dashboard.cc-active .cc-twrap.open { background:rgba(255,255,255,.03); border-radius:9px; }
#pg-dashboard.cc-active .cc-twrap.open .cc-tc-ct svg { transform:rotate(180deg); color:#60A5FA; }
#pg-dashboard.cc-active .cc-tdetail { display:none; padding:2px 12px 10px 52px; }
#pg-dashboard.cc-active .cc-twrap.open .cc-tdetail { display:block; animation:ccFade .3s ease; }
#pg-dashboard.cc-active .cc-tdrow { display:flex; flex-direction:column; gap:1px; padding:6px 0; border-top:1px solid rgba(255,255,255,.05); }
#pg-dashboard.cc-active .cc-tdrow:first-child { border-top:none; }
#pg-dashboard.cc-active .cc-tdcli { font-size:12px; font-weight:600; color:#E2E8F0; }
#pg-dashboard.cc-active .cc-tdmeta { font-size:10.5px; color:#94A3B8; }
#pg-dashboard.cc-active .cc-tload { font-size:11.5px; color:#64748B; padding:6px 0; }

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — Command Center follows the app's light theme.
   Overrides only surfaces/text/strokes; the gradient accents,
   clock face, gauge/donut/spark colours stay (they read well on
   light too). Higher specificity ([data-theme="light"] + id +
   class) + !important beats the dark defaults above.
════════════════════════════════════════════════════════════ */
[data-theme="light"] #pg-dashboard.cc-active { background:#F1F5F9 !important; color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc { background:#F1F5F9 !important; color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-card,
[data-theme="light"] #pg-dashboard.cc-active .cc-role,
[data-theme="light"] #pg-dashboard.cc-active .cc-qa-btn { background:#FFFFFF !important; border-color:rgba(15,23,42,.08) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-card:hover,
[data-theme="light"] #pg-dashboard.cc-active .cc-role:hover { background:#F8FAFC !important; border-color:rgba(37,99,235,.4) !important; box-shadow:0 12px 30px rgba(37,99,235,.12) !important; }
/* primary text → dark */
[data-theme="light"] #pg-dashboard.cc-active .cc-role-lb,
[data-theme="light"] #pg-dashboard.cc-active .cc-gauge-ctr .cc-count,
[data-theme="light"] #pg-dashboard.cc-active .cc-mini-v,
[data-theme="light"] #pg-dashboard.cc-active .cc-wa-hd,
[data-theme="light"] #pg-dashboard.cc-active .cc-act-desc,
[data-theme="light"] #pg-dashboard.cc-active .cc-qa-btn,
[data-theme="light"] #pg-dashboard.cc-active .cc-leg b { color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-mini-v.green { color:#059669 !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-mini-v.red   { color:#DC2626 !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-mini-v.blue  { color:#2563EB !important; }
/* dividers / tracks → dark-on-light */
[data-theme="light"] #pg-dashboard.cc-active .cc-rh-radar { border-bottom-color:rgba(15,23,42,.08) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-wa { border-top-color:rgba(15,23,42,.08) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-bar { background:rgba(15,23,42,.09) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-mini:hover { background:rgba(15,23,42,.04) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-radar-trend.muted { color:#64748B !important; background:rgba(15,23,42,.05) !important; }
/* alert chips → darker text for contrast on light */
[data-theme="light"] #pg-dashboard.cc-active .cc-chip.red   { color:#B91C1C !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-chip.amber { color:#B45309 !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-chip.blue  { color:#1D4ED8 !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-chip.green { color:#047857 !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-tick-item { color:#475569 !important; }
/* SVG track/ring strokes + donut centre text → visible on light */
[data-theme="light"] #pg-dashboard.cc-active .cc-gauge svg circle:first-of-type { stroke:rgba(15,23,42,.10) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-donut-svg circle:first-of-type { stroke:rgba(15,23,42,.08) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-donut-svg text { fill:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-radar-core { background:radial-gradient(circle at 50% 40%, rgba(124,58,237,.10), rgba(255,255,255,0)) !important; }
/* analogue clock → light face on light theme (2nd circle = face, ticks = id-less lines, hour/min hands → dark; second hand + cap stay blue) */
[data-theme="light"] #pg-dashboard.cc-active .cc-analog circle:nth-of-type(2) { fill:#FFFFFF !important; stroke:rgba(15,23,42,.10) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-analog line:not([id]) { stroke:rgba(15,23,42,.32) !important; }
[data-theme="light"] #pg-dashboard.cc-active #cc-hand-h,
[data-theme="light"] #pg-dashboard.cc-active #cc-hand-m { stroke:#0F172A !important; }
/* Priority-2 cards on light theme */
[data-theme="light"] #pg-dashboard.cc-active .cc-prog svg circle:first-of-type { stroke:rgba(15,23,42,.10) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-aging-bar { background:rgba(15,23,42,.08) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-aging-amt { color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-aging-lb,
[data-theme="light"] #pg-dashboard.cc-active .cc-prog-sub { color:#475569 !important; }
/* Mission Control cockpit on light theme */
[data-theme="light"] #pg-dashboard.cc-active .cc-ring-o { fill:rgba(37,99,235,.05) !important; stroke:rgba(37,99,235,.28) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-ring-i,
[data-theme="light"] #pg-dashboard.cc-active .cc-cross { stroke:rgba(37,99,235,.18) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-scope-ctr .cc-count { color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-rleg { background:#F8FAFC !important; border-color:rgba(15,23,42,.08) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-rleg:hover { background:#EEF2F7 !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-rleg-lb { color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-dial-rim { stroke:rgba(15,23,42,.12) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-dtick { stroke:rgba(15,23,42,.25) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-dtick.maj { stroke:rgba(15,23,42,.45) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-dial-val .cc-count { color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-goal-track { stroke:rgba(15,23,42,.10) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-goal-read { color:#475569 !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-goal-slider input[type=range] { background:linear-gradient(90deg,#2563EB var(--fill,0%), rgba(15,23,42,.12) var(--fill,0%)) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-goal-slider input[type=range]::-webkit-slider-thumb { border-color:#FFFFFF !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-cockpit .cc-card:hover { box-shadow:0 16px 36px rgba(37,99,235,.14) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-goal-proj { color:#64748B !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-goal-proj b { color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-blip.hot { box-shadow:0 0 0 5px rgba(37,99,235,.14) !important; }
/* Needs Your Decision + role-user names on light */
[data-theme="light"] #pg-dashboard.cc-active .cc-aprow:hover { background:rgba(15,23,42,.04) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-aprow-lb,
[data-theme="light"] #pg-dashboard.cc-active .cc-aprow-n,
[data-theme="light"] #pg-dashboard.cc-active .cc-ap-zero b,
[data-theme="light"] #pg-dashboard.cc-active .cc-attn-n { color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-aprow-ic { background:rgba(37,99,235,.10) !important; color:#2563EB !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-attn-ic { background:rgba(15,23,42,.05) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-ap-go { color:#2563EB !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-role-users { color:#64748B !important; }
/* Team Activity on light */
[data-theme="light"] #pg-dashboard.cc-active .cc-thead { border-bottom-color:rgba(15,23,42,.08) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-trow:hover { background:rgba(15,23,42,.04) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-tname b,
[data-theme="light"] #pg-dashboard.cc-active .cc-tc { color:#0F172A !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-ton { border-color:#FFFFFF !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-twrap.open { background:rgba(15,23,42,.03) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-tdrow { border-top-color:rgba(15,23,42,.06) !important; }
[data-theme="light"] #pg-dashboard.cc-active .cc-tdcli { color:#0F172A !important; }

@media (max-width:1000px) { #pg-dashboard.cc-active .cc-main { grid-template-columns:1fr; } #pg-dashboard.cc-active .cc-bottom { grid-template-columns:1fr; } }
@media (max-width:640px)  { #pg-dashboard.cc-active .cc-roles { grid-template-columns:repeat(2,1fr); } #pg-dashboard.cc-active .cc-greet { font-size:21px; } #pg-dashboard.cc-active .cc-pulse-top { flex-direction:column; } }
@media (prefers-reduced-motion: reduce) { #pg-dashboard.cc-active .cc *, #pg-dashboard.cc-active .cc { animation:none !important; } #pg-dashboard.cc-active #cc-gauge-arc, #pg-dashboard.cc-active .cc-bar-fill, #pg-dashboard.cc-active #cc-ring-arc, #pg-dashboard.cc-active .cc-fc-bar { transition:none !important; } }

.db .db-card-sub   { font-size: 11.5px; margin-top: 2px; }

/* ═══ Mission Control intelligence cards — Recovery Health · Smart Insights · Inflow 90 din ═══ */
#pg-dashboard.cc-active .cc-intel .cc-intel-body { display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; margin-top:6px; }
#pg-dashboard.cc-active .cc-intel-na { margin:auto; color:#64748B; font-size:22px; font-weight:600; }
/* skeletons */
@keyframes ccSkel { 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.5} }
#pg-dashboard.cc-active .cc-skel, #pg-dashboard.cc-active .cc-skel-lines span,
#pg-dashboard.cc-active .cc-skel-total, #pg-dashboard.cc-active .cc-skel-bars span { background:rgba(148,163,184,.16); border-radius:6px; animation:ccSkel 1.1s ease-in-out infinite; }
#pg-dashboard.cc-active .cc-skel-ring { width:64px; height:64px; border-radius:50%; }
#pg-dashboard.cc-active .cc-skel-lines { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
#pg-dashboard.cc-active .cc-skel-lines span { height:11px; width:100%; }
#pg-dashboard.cc-active .cc-skel-lines.full span:nth-child(even){ width:72%; }
#pg-dashboard.cc-active .cc-skel-total { width:55%; height:20px; }
#pg-dashboard.cc-active .cc-skel-bars { display:flex; gap:12px; align-items:flex-end; flex:1; margin-top:8px; }
#pg-dashboard.cc-active .cc-skel-bars span { flex:1; }
#pg-dashboard.cc-active .cc-skel-bars span:nth-child(1){ height:70%; }
#pg-dashboard.cc-active .cc-skel-bars span:nth-child(2){ height:45%; }
#pg-dashboard.cc-active .cc-skel-bars span:nth-child(3){ height:90%; }
/* Recovery Health */
#pg-dashboard.cc-active .cc-health-top { display:flex; align-items:center; gap:14px; }
#pg-dashboard.cc-active .cc-ring { position:relative; width:72px; height:72px; flex-shrink:0; }
#pg-dashboard.cc-active .cc-ring-trk { fill:none; stroke:rgba(148,163,184,.18); stroke-width:7; }
#pg-dashboard.cc-active #cc-ring-arc { transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1); }
#pg-dashboard.cc-active .cc-ring-ctr { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#pg-dashboard.cc-active .cc-ring-ctr b { font-size:22px; font-weight:800; }
#pg-dashboard.cc-active .cc-health-meta { display:flex; flex-direction:column; gap:4px; }
#pg-dashboard.cc-active .cc-health-lbl { font-size:15px; font-weight:700; letter-spacing:.2px; }
#pg-dashboard.cc-active .cc-health-delta { font-size:11px; font-weight:600; }
#pg-dashboard.cc-active .cc-health-delta.up { color:#10B981; }
#pg-dashboard.cc-active .cc-health-delta.dn { color:#EF4444; }
#pg-dashboard.cc-active .cc-health-tbl { display:flex; flex-direction:column; gap:6px; margin-top:auto; }
#pg-dashboard.cc-active .cc-htrow { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:5px 9px; border-radius:7px; background:rgba(255,255,255,.03); }
#pg-dashboard.cc-active .cc-htrow span { color:#94A3B8; }
#pg-dashboard.cc-active .cc-htrow b { color:#E2E8F0; font-weight:700; }
#pg-dashboard.cc-active .cc-htrow b.hot { color:#EF4444; }
/* Smart Insights */
@keyframes ccInsIn { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
#pg-dashboard.cc-active .cc-insight-list { display:flex; flex-direction:column; gap:7px; }
#pg-dashboard.cc-active .cc-insight { display:flex; align-items:center; gap:9px; text-align:left; width:100%; padding:9px 10px; border-radius:9px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); cursor:pointer; color:inherit; font:inherit; opacity:1; transform:none; animation:ccInsIn .4s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d,0ms); transition:background .15s, border-color .15s; }
#pg-dashboard.cc-active .cc-insight:hover { background:rgba(255,255,255,.06); border-color:rgba(37,99,235,.32); }
#pg-dashboard.cc-active .cc-insight-ic { flex-shrink:0; display:flex; }
#pg-dashboard.cc-active .cc-insight-msg { font-size:12px; line-height:1.35; color:#CBD5E1; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#pg-dashboard.cc-active .cc-insight.danger  .cc-insight-ic { color:#EF4444; }
#pg-dashboard.cc-active .cc-insight.warning .cc-insight-ic { color:#F59E0B; }
#pg-dashboard.cc-active .cc-insight.success .cc-insight-ic { color:#10B981; }
#pg-dashboard.cc-active .cc-insight.danger { border-color:rgba(239,68,68,.22); }
/* Inflow 90 din */
#pg-dashboard.cc-active .cc-fc-total { font-size:20px; font-weight:800; color:#E2E8F0; letter-spacing:.3px; }
#pg-dashboard.cc-active .cc-fc-bars { display:flex; align-items:flex-end; gap:14px; flex:1; min-height:0; margin-top:6px; }
#pg-dashboard.cc-active .cc-fc-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
#pg-dashboard.cc-active .cc-fc-val { font-size:10.5px; font-weight:700; color:#93C5FD; }
#pg-dashboard.cc-active .cc-fc-track { width:100%; max-width:46px; flex:1; display:flex; align-items:flex-end; background:rgba(148,163,184,.10); border-radius:7px 7px 0 0; overflow:hidden; min-height:30px; }
#pg-dashboard.cc-active .cc-fc-bar { width:100%; height:0; background:var(--bc,#3B82F6); border-radius:7px 7px 0 0; transition:height .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); }
#pg-dashboard.cc-active .cc-fc-mon { font-size:11px; font-weight:600; color:#94A3B8; }
/* light theme overrides */
[data-theme="light"] #pg-dashboard.cc-active .cc-htrow { background:rgba(15,23,42,.03); }
[data-theme="light"] #pg-dashboard.cc-active .cc-htrow span { color:#64748B; }
[data-theme="light"] #pg-dashboard.cc-active .cc-htrow b { color:#0F172A; }
[data-theme="light"] #pg-dashboard.cc-active .cc-insight { background:rgba(15,23,42,.02); border-color:rgba(15,23,42,.08); }
[data-theme="light"] #pg-dashboard.cc-active .cc-insight:hover { background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.25); }
[data-theme="light"] #pg-dashboard.cc-active .cc-insight-msg { color:#334155; }
[data-theme="light"] #pg-dashboard.cc-active .cc-fc-total { color:#0F172A; }
[data-theme="light"] #pg-dashboard.cc-active .cc-fc-val { color:#2563EB; }
[data-theme="light"] #pg-dashboard.cc-active .cc-fc-track { background:rgba(15,23,42,.06); }
[data-theme="light"] #pg-dashboard.cc-active .cc-fc-mon { color:#64748B; }
[data-theme="light"] #pg-dashboard.cc-active .cc-ring-trk { stroke:rgba(15,23,42,.10); }
[data-theme="light"] #pg-dashboard.cc-active .cc-intel-na { color:#94A3B8; }
[data-theme="light"] #pg-dashboard.cc-active .cc-skel, [data-theme="light"] #pg-dashboard.cc-active .cc-skel-lines span,
[data-theme="light"] #pg-dashboard.cc-active .cc-skel-total, [data-theme="light"] #pg-dashboard.cc-active .cc-skel-bars span { background:rgba(15,23,42,.07); }