:root {
  --navy: #1a3c5e;
  --orange: #e8762a;
  --good-bg: #e2f0d9;
  --good-text: #2e7d32;
  --attention-bg: #fce9da;
  --attention-text: #b75c10;
  --critical-bg: #fadbd9;
  --critical-text: #b03a2e;

  /* Dashboard-shell surface tokens — the report/print design system above (navy,
     orange, kpi-card) stays fixed on purpose and does not use these. */
  --body-bg: #f5f6f8;
  --body-text: #262626;
  --surface: #fff;
  --border: #e6e6e6;
  --border-soft: #eee;
  --muted: #777;
  --muted-soft: #999;
  --input-bg: #fff;
  --input-border: #ccc;
  --input-text: #262626;
  --hover-bg: #f5f6f8;
  --callout-bg: #fbf1e8;
  --overlay-bg: rgba(20, 24, 31, 0.5);

  /* Spacing/radius scale — used by newer dashboard-shell components below.
     Existing hand-authored pixel values elsewhere are left as-is. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Icon-badge accent palette — purely decorative (KPI card icons, sidebar accents),
     not a data-encoding categorical scale, so reuse across unrelated cards is fine. */
  --icon-purple-bg: #ede9fe; --icon-purple: #7c3aed;
  --icon-green-bg: #dcfce7; --icon-green: #16a34a;
  --icon-blue-bg: #dbeafe; --icon-blue: #2563eb;
  --icon-orange-bg: #ffedd5; --icon-orange: #ea580c;
  --icon-pink-bg: #fce7f3; --icon-pink: #db2777;
  --icon-cyan-bg: #cffafe; --icon-cyan: #0e7490;

  /* App sidebar — always a fixed dark "premium" panel, independent of the
     light/dark mode toggle (same idea as the topbar's fixed navy). */
  --sidebar-bg: #13161d;
  --sidebar-border: #23272f;
  --sidebar-text: #e8eaed;
  --sidebar-muted: #9aa1ad;
  --sidebar-muted-soft: #6b7280;
  --sidebar-hover-bg: #1e222a;
  --sidebar-active-bg: #262b34;
}

[data-theme="dark"] {
  --body-bg: #14181f;
  --body-text: #e2e4e9;
  --surface: #1d222b;
  --border: #2b313d;
  --border-soft: #262c37;
  --muted: #9aa1ad;
  --muted-soft: #6b7280;
  --input-bg: #1a1f27;
  --input-border: #3a4150;
  --input-text: #e2e4e9;
  --hover-bg: #242b36;
  --callout-bg: #2a2113;
  --overlay-bg: rgba(0, 0, 0, 0.65);
  --good-bg: #1e3324;
  --good-text: #7fd88f;
  --attention-bg: #3a2a14;
  --attention-text: #f0a355;
  --critical-bg: #3a1c1c;
  --critical-text: #f28b82;

  --icon-purple-bg: rgba(124, 58, 237, 0.18); --icon-purple: #b39bfa;
  --icon-green-bg: rgba(22, 163, 74, 0.18); --icon-green: #6ee0a0;
  --icon-blue-bg: rgba(37, 99, 235, 0.2); --icon-blue: #7fb0f7;
  --icon-orange-bg: rgba(234, 88, 12, 0.2); --icon-orange: #f5a468;
  --icon-pink-bg: rgba(219, 39, 119, 0.2); --icon-pink: #ee8bc0;
  --icon-cyan-bg: rgba(14, 116, 144, 0.22); --icon-cyan: #5fd4e8;
}

* { box-sizing: border-box; }

body {
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  color: var(--body-text);
  background: var(--body-bg);
  margin: 0;
}

a { color: var(--navy); }
[data-theme="dark"] a { color: #6fa8dc; }

.topbar {
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-weight: bold; }
.topbar .brand .accent { color: var(--orange); }

/* .theme-toggle is now just a JS selector hook (public/js/app.js) — its visual
   style comes entirely from the shared .topbar-icon-btn class in the markup. */

.palette-trigger {
  flex: 1;
  max-width: 460px;
  margin: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s ease;
}
.palette-trigger:hover { background: rgba(255, 255, 255, 0.22); }
.palette-trigger-icon { font-size: 13px; opacity: 0.8; }
.palette-trigger-text { flex: 1; text-align: left; }
.palette-trigger-kbd {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: monospace;
}
@media (max-width: 900px) { .palette-trigger { display: none; } }

.topbar-icon-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.topbar-icon-btn:hover { background: rgba(255, 255, 255, 0.22); }
.topbar-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--critical-text);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1.4;
}

.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-summary { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 999px; transition: background 0.15s ease; }
.user-summary:hover { background: rgba(255, 255, 255, 0.14); }
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  flex-shrink: 0;
}
.user-summary-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.user-summary-email { font-size: 13px; font-weight: bold; color: #fff; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-summary-role { font-size: 11px; color: rgba(255, 255, 255, 0.7); text-transform: capitalize; }
@media (max-width: 900px) { .user-summary-text { display: none; } }

.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  color: var(--body-text);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 12px 14px;
  min-width: 200px;
  z-index: 1001;
}
.user-menu-dropdown a { display: block; font-size: 13px; padding: 4px 0; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

.card {
  background: var(--surface);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--navy); color: #fff; }

.status-good { background: var(--good-bg); color: var(--good-text); font-weight: bold; padding: 2px 10px; border-radius: 3px; }
.status-attention { background: var(--attention-bg); color: var(--attention-text); font-weight: bold; padding: 2px 10px; border-radius: 3px; }
.status-critical { background: var(--critical-bg); color: var(--critical-text); font-weight: bold; padding: 2px 10px; border-radius: 3px; }

.btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
}
.btn.secondary { background: var(--navy); }

.kpi-row { display: flex; gap: 12px; flex-wrap: wrap; }
.kpi-card {
  flex: 1;
  min-width: 140px;
  background: var(--navy);
  color: #fff;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}
.kpi-card .value { font-size: 28px; font-weight: bold; display: block; }
.kpi-card .label { color: var(--orange); font-weight: bold; font-size: 13px; }

.callout {
  border-left: 5px solid var(--orange);
  background: var(--callout-bg);
  padding: 10px 16px;
  margin: 12px 0;
}
.callout h4 { margin: 0 0 4px 0; color: var(--navy); }

.section-empty-note { font-style: italic; color: var(--muted); margin-top: 20px; }

.grid-svg-wrap { text-align: center; }

form label { display: block; margin: 10px 0 4px; font-weight: bold; }
form input, form select, form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
}

.error { color: var(--critical-text); }
.muted { color: var(--muted); font-size: 13px; }

/* ===== App dashboard shell (sidebar + working UI) =====
   Distinct from the generated-report classes above (.kpi-card etc. stay navy —
   that's the client-facing report design system, untouched). Dashboard pages use
   white stat-tiles on the existing light-gray body. */

.app-layout { display: flex; align-items: flex-start; }

.app-main { flex: 1; padding: 24px; min-width: 0; }
.app-main .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.app-main .page-header h2 { margin: 0; }

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-tile {
  flex: 1;
  min-width: 160px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stat-tile:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10); transform: translateY(-1px); }
.stat-tile .stat-value { font-size: 26px; font-weight: bold; color: var(--navy); display: block; line-height: 1.2; }
[data-theme="dark"] .stat-tile .stat-value { color: #6fa8dc; }
.stat-tile .stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: bold; }
.stat-tile .stat-delta { font-size: 13px; font-weight: bold; margin-left: 6px; }
.stat-tile .stat-delta.up { color: var(--good-text); }
.stat-tile .stat-delta.down { color: var(--critical-text); }

.stat-tile-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-3); }
.stat-tile-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.stat-tile-icon.purple { background: var(--icon-purple-bg); color: var(--icon-purple); }
.stat-tile-icon.green { background: var(--icon-green-bg); color: var(--icon-green); }
.stat-tile-icon.blue { background: var(--icon-blue-bg); color: var(--icon-blue); }
.stat-tile-icon.orange { background: var(--icon-orange-bg); color: var(--icon-orange); }
.stat-tile-icon.pink { background: var(--icon-pink-bg); color: var(--icon-pink); }
.stat-tile-icon.cyan { background: var(--icon-cyan-bg); color: var(--icon-cyan); }

.gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gauge-wrap .gauge-value { font-size: 22px; font-weight: bold; color: var(--navy); }
[data-theme="dark"] .gauge-wrap .gauge-value { color: #6fa8dc; }
.gauge-wrap .gauge-label { font-size: 12px; color: var(--muted); text-align: center; }

.bucket-row { display: flex; gap: 16px; flex-wrap: wrap; }
.bucket-row .gauge-wrap { flex: 1; min-width: 110px; }

.crawl-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--border-soft); margin: 8px 0; }
.crawl-bar span { height: 100%; }
.crawl-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.crawl-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

.issue-list .issue-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.issue-list .issue-row:last-child { border-bottom: none; }
.issue-count { background: var(--critical-bg); color: var(--critical-text); font-weight: bold; padding: 2px 10px; border-radius: 10px; font-size: 12px; }

.rank-up { color: var(--good-text); font-weight: bold; }
.rank-down { color: var(--critical-text); font-weight: bold; }
.rank-flat { color: var(--muted-soft); }

.sparkline-wrap { cursor: pointer; display: block; }
.sparkline-line { stroke: var(--navy); }
[data-theme="dark"] .sparkline-line { stroke: #6fa8dc; }
.sparkline-area { fill: var(--navy); opacity: 0.08; }
[data-theme="dark"] .sparkline-area { fill: #6fa8dc; opacity: 0.14; }

/* Per-instance accent override for KPI-card sparklines — same palette as the
   stat-tile icon badges, so each card's chart matches its icon color. */
.sparkline-line.purple { stroke: var(--icon-purple); }
.sparkline-area.purple { fill: var(--icon-purple); opacity: 0.12; }
.sparkline-line.green { stroke: var(--icon-green); }
.sparkline-area.green { fill: var(--icon-green); opacity: 0.12; }
.sparkline-line.blue { stroke: var(--icon-blue); }
.sparkline-area.blue { fill: var(--icon-blue); opacity: 0.12; }
.sparkline-line.orange { stroke: var(--icon-orange); }
.sparkline-area.orange { fill: var(--icon-orange); opacity: 0.12; }
.sparkline-line.pink { stroke: var(--icon-pink); }
.sparkline-area.pink { fill: var(--icon-pink); opacity: 0.12; }
.sparkline-line.cyan { stroke: var(--icon-cyan); }
.sparkline-area.cyan { fill: var(--icon-cyan); opacity: 0.12; }

/* ===== Overview dashboard ===== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: start;
}
.dashboard-panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dashboard-panel h3 {
  margin: 0 0 var(--space-3) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}
.dashboard-panel h3 a { font-size: 12px; font-weight: normal; }
.stat-tile-sparkline { margin-top: var(--space-2); }

.activity-list { display: flex; flex-direction: column; gap: 2px; }
.activity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
.activity-row:last-child { border-bottom: none; }
.activity-row .activity-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-row .activity-time { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.empty-note { color: var(--muted); font-style: italic; font-size: 13px; padding: var(--space-2) 0; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); font-size: 14px; border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--navy); font-weight: bold; border-bottom-color: var(--orange); }
[data-theme="dark"] .tabs a.active { color: #6fa8dc; }

/* ===== Command palette & shortcuts modal ===== */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 1000;
}
.overlay-backdrop[hidden] { display: none; }

.palette-box, .shortcuts-box {
  background: var(--surface);
  color: var(--body-text);
  width: 100%;
  max-width: 560px;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.palette-box input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 16px;
  font-size: 16px;
  background: var(--surface);
  color: var(--body-text);
}
.palette-box input:focus { outline: none; }
.palette-results { max-height: 320px; overflow-y: auto; }
.palette-results .palette-item {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--body-text);
  font-size: 14px;
  cursor: pointer;
}
.palette-results .palette-item .palette-hint { color: var(--muted); font-size: 12px; float: right; }
.palette-results .palette-item.active, .palette-results .palette-item:hover { background: var(--hover-bg); }
.palette-empty { padding: 16px; color: var(--muted); font-size: 14px; }

.shortcuts-box { padding: 20px; }
.shortcuts-box h3 { margin-top: 0; }
.shortcuts-box dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.shortcuts-box dt { font-family: monospace; background: var(--hover-bg); border-radius: 4px; padding: 2px 8px; justify-self: start; }
.shortcuts-box dd { margin: 0; align-self: center; }

/* ===== App sidebar (global, categorized, collapsible) ===== */
.mobile-sidebar-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.app-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  min-height: calc(100vh - 53px);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
}

.sidebar-collapse-toggle {
  align-self: flex-end;
  margin: 0 12px 8px;
  background: none;
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  color: var(--sidebar-muted);
  cursor: pointer;
  padding: 2px 9px;
  font-size: 13px;
}

.sidebar-nav { flex: 1; overflow-y: auto; }

.sidebar-toplevel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 2px;
  padding: 9px 14px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  border-radius: var(--radius-md);
}
.sidebar-toplevel-item:hover { background: var(--sidebar-hover-bg); }
.sidebar-toplevel-item.active { background: var(--orange); color: #fff; box-shadow: 0 2px 8px rgba(232, 118, 42, 0.35); }
body.sidebar-collapsed .app-sidebar .sidebar-toplevel-item { justify-content: center; margin: 0 6px 2px; }

.sidebar-group { margin-bottom: 2px; }
.sidebar-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sidebar-muted-soft);
  text-align: left;
  font-family: inherit;
}
.sidebar-group-header:hover { color: var(--sidebar-text); }
.sidebar-group-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-group-label { flex: 1; }
.sidebar-chevron { font-size: 10px; transition: transform 0.15s ease; }
.sidebar-group.collapsed .sidebar-chevron { transform: rotate(-90deg); }
.sidebar-group.collapsed .sidebar-group-items { display: none; }

.sidebar-group-items { padding-bottom: 6px; }
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px 7px 30px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.sidebar-item:hover { background: var(--sidebar-hover-bg); border-radius: var(--radius-sm); }
.sidebar-item.active { border-left-color: var(--orange); background: var(--sidebar-active-bg); color: #fff; font-weight: bold; border-radius: var(--radius-sm); }

.sidebar-badge { margin-left: auto; padding: 1px 7px; font-size: 11px; }
.sidebar-badge.status-critical { background: #e5484d; color: #fff; }

.sidebar-hint { padding: 4px 16px 12px; color: var(--sidebar-muted); font-size: 13px; font-style: italic; }

.sidebar-workspace-divider {
  margin: 10px 16px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--sidebar-border);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-muted-soft);
}

.sidebar-nested-label {
  margin: 8px 16px 2px 30px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sidebar-muted-soft);
}

/* A sidebar-group nested inside another group's items (Client Management's
   per-client SEO tool categories) — indent its header so the hierarchy reads
   clearly, and its own items get the normal item indent again on top of that. */
.sidebar-group .sidebar-group .sidebar-group-header { padding-left: 30px; font-size: 11px; }
.sidebar-group .sidebar-group .sidebar-item { padding-left: 44px; }

.sidebar-soon-badge {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sidebar-muted);
  background: var(--sidebar-hover-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  flex-shrink: 0;
}

/* Collapsed (icon-only) mode */
body.sidebar-collapsed .app-sidebar { width: 56px; }
body.sidebar-collapsed .app-sidebar .sidebar-group-label,
body.sidebar-collapsed .app-sidebar .sidebar-chevron,
body.sidebar-collapsed .app-sidebar .sidebar-group-items,
body.sidebar-collapsed .app-sidebar .sidebar-hint,
body.sidebar-collapsed .app-sidebar .sidebar-badge,
body.sidebar-collapsed .app-sidebar .sidebar-workspace-divider,
body.sidebar-collapsed .app-sidebar .sidebar-nested-label {
  display: none;
}
body.sidebar-collapsed .app-sidebar .sidebar-group-header { justify-content: center; }
body.sidebar-collapsed .sidebar-collapse-toggle { align-self: center; transform: rotate(180deg); }

/* Mobile: off-canvas sidebar */
@media (max-width: 900px) {
  .mobile-sidebar-toggle { display: inline-block; }
  .app-sidebar {
    position: fixed;
    top: 53px;
    left: 0;
    bottom: 0;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    width: 260px !important;
  }
  body.sidebar-mobile-open .app-sidebar { transform: translateX(0); }
  .app-sidebar .sidebar-group-label,
  .app-sidebar .sidebar-chevron,
  .app-sidebar .sidebar-hint,
  .app-sidebar .sidebar-workspace-divider,
  .app-sidebar .sidebar-nested-label {
    display: revert;
  }
  .app-sidebar .sidebar-group-items { display: revert; }
  .app-sidebar .sidebar-group.collapsed .sidebar-group-items { display: none; }
  .app-main { width: 100%; min-width: 0; }
}

/* ===== Topbar client switcher ===== */
.topbar-client-switcher {
  margin-left: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  max-width: 180px;
}
.topbar-client-switcher option { color: var(--body-text); }
@media (max-width: 900px) { .topbar-client-switcher { display: none; } }

/* ===== Premium dashboard: hero, KPI hero cards, empty states, micro-interactions =====
   CSS/vanilla-JS only — this app is server-rendered EJS with no build step, so
   every effect below is native CSS animation/transition, no framework added. */

@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
body.page-dashboard { animation: page-fade-in 0.35s ease; }

.dashboard-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  margin-bottom: 24px;
  background:
    radial-gradient(620px 320px at 78% 15%, rgba(124, 58, 237, 0.35), transparent 65%),
    radial-gradient(520px 280px at 28% 95%, rgba(37, 99, 235, 0.32), transparent 65%),
    linear-gradient(135deg, var(--navy) 0%, #0d1f30 100%);
  isolation: isolate;
}
.hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.32;
  will-change: transform;
  animation: orb-drift 18s ease-in-out infinite;
}
.hero-orb-1 { width: 320px; height: 320px; background: var(--orange); top: -80px; left: 10%; }
.hero-orb-2 { width: 260px; height: 260px; background: var(--icon-purple); bottom: -100px; left: 45%; animation-delay: -6s; }
.hero-orb-3 { width: 220px; height: 220px; background: var(--icon-cyan); top: 10%; right: 8%; animation-delay: -12s; }
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.08); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}
.hero-content { position: relative; z-index: 1; color: #fff; }
.hero-greeting { margin: 0 0 4px; font-size: 26px; }
.hero-subtitle { margin: 0 0 20px; color: rgba(255, 255, 255, 0.75); font-size: 14px; }

/* Inline "Analyze Now" bar — posts straight into the existing POST /audits flow */
.hero-analyze {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin-bottom: 16px;
  padding: 6px 6px 6px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hero-analyze:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(232, 118, 42, 0.25);
}
.hero-analyze-icon { opacity: 0.7; font-size: 14px; }
.hero-analyze input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  outline: none;
}
.hero-analyze input::placeholder { color: rgba(255, 255, 255, 0.55); }
.hero-analyze-btn {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, #c2571a 100%);
  box-shadow: 0 4px 14px rgba(232, 118, 42, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.hero-analyze-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 6px 18px rgba(232, 118, 42, 0.5); }
.hero-analyze-btn:active { transform: translateY(0); }

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hero-chip:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); transform: translateY(-1px); }

.kpi-hero-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.kpi-hero-card {
  flex: 1;
  min-width: 160px;
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: card-materialize 0.5s ease backwards;
  overflow: hidden;
}
.kpi-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--tone-color, var(--navy)) 0%, transparent 60%);
  opacity: 0.06;
  pointer-events: none;
}
.kpi-hero-card[data-tone="navy"] { --tone-color: var(--navy); }
.kpi-hero-card[data-tone="blue"] { --tone-color: var(--icon-blue); }
.kpi-hero-card[data-tone="purple"] { --tone-color: var(--icon-purple); }
.kpi-hero-card[data-tone="green"] { --tone-color: var(--icon-green); }
.kpi-hero-card[data-tone="cyan"] { --tone-color: var(--icon-cyan); }
.kpi-hero-card[data-tone="orange"] { --tone-color: var(--orange); }
.kpi-hero-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); }
.kpi-hero-card.glow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 24px 0 var(--tone-color); }
.kpi-hero-card.glow:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 32px 2px var(--tone-color); }
.kpi-hero-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kpi-hero-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 15px;
  background: color-mix(in srgb, var(--tone-color, var(--navy)) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-color, var(--navy)) 25%, transparent);
}
.kpi-hero-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: bold; color: var(--muted); }
.kpi-hero-value { display: block; font-size: 28px; font-weight: bold; color: var(--tone-color, var(--navy)); line-height: 1.15; }
.kpi-hero-suffix { font-size: 15px; font-weight: normal; color: var(--muted); }
.kpi-hero-caption { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

@keyframes card-materialize { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.kpi-hero-row .kpi-hero-card:nth-child(1) { animation-delay: 0.03s; }
.kpi-hero-row .kpi-hero-card:nth-child(2) { animation-delay: 0.06s; }
.kpi-hero-row .kpi-hero-card:nth-child(3) { animation-delay: 0.09s; }
.kpi-hero-row .kpi-hero-card:nth-child(4) { animation-delay: 0.12s; }
.kpi-hero-row .kpi-hero-card:nth-child(5) { animation-delay: 0.15s; }
.kpi-hero-row .kpi-hero-card:nth-child(6) { animation-delay: 0.18s; }

/* Engaging empty states — icon + heading + one-line copy + a real CTA */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 16px; gap: 4px; }
.empty-state-icon { font-size: 32px; margin-bottom: 4px; opacity: 0.7; }
.empty-state-title { margin: 0; font-weight: bold; color: var(--body-text); font-size: 14px; }
.empty-state-copy { margin: 0 0 12px; color: var(--muted); font-size: 13px; max-width: 320px; }

.table-compact th, .table-compact td { padding: 6px 8px; font-size: 13px; }
.table-compact td:first-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-panel-wide { grid-column: span 2; }
@media (max-width: 900px) { .dashboard-panel-wide { grid-column: span 1; } }

.health-detail-rows { display: flex; justify-content: center; gap: 16px; margin-top: 12px; font-size: 13px; }
.health-detail-row { display: flex; align-items: center; gap: 6px; }

/* Main column + right rail (AI Visibility / Alerts / Upcoming Reports) */
.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-5);
}
.dashboard-main-col { min-width: 0; }
.dashboard-rail { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 16px; }
@media (max-width: 1100px) {
  .dashboard-columns { grid-template-columns: 1fr; }
  .dashboard-rail { position: static; }
}

.ai-bar-list { display: flex; flex-direction: column; gap: 14px; }
.ai-bar-row { display: flex; flex-direction: column; gap: 6px; }
.ai-bar-top { display: flex; justify-content: space-between; align-items: baseline; }
.ai-bar-label { font-size: 13px; font-weight: bold; color: var(--body-text); }
.ai-bar-track { height: 8px; border-radius: 4px; background: var(--border-soft); overflow: hidden; }
.ai-bar-fill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--icon-purple), var(--icon-blue)); transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); }
.ai-bar-value { font-size: 13px; font-weight: bold; color: var(--muted); }
.ai-report-btn {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: #fff !important;
  background: linear-gradient(135deg, var(--icon-purple), var(--icon-blue));
  border: none;
}

/* Sparkline draw-in — a generous fixed dasharray comfortably exceeds any real
   sparkline's path length in this app's dimensions, so no per-instance JS
   path-length calculation is needed. */
.sparkline-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: sparkline-draw 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes sparkline-draw { to { stroke-dashoffset: 0; } }

/* Brief shimmer before an animated counter resolves — data is already present
   at render time (server-rendered), so this isn't simulating a real fetch;
   it's a deliberate, brief "materializing" polish, matched by public/js/app.js's
   ~280ms delay before starting the count-up. */
.value-loading {
  color: transparent !important;
  background: linear-gradient(90deg, var(--border-soft) 25%, var(--hover-bg) 50%, var(--border-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer-sweep 0.9s ease-in-out;
  border-radius: 4px;
  display: inline-block;
  min-width: 2em;
}
@keyframes shimmer-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Broader micro-interactions — shared classes, so this reaches every page */
.card, .dashboard-panel { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.card:hover, .dashboard-panel:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); }
.btn { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.btn:active { transform: translateY(0); filter: brightness(0.98); }
.sidebar-item, .sidebar-toplevel-item { transition: background 0.15s ease, transform 0.15s ease; }
.sidebar-item:hover, .sidebar-toplevel-item:hover { transform: translateX(2px); }

/* Deep-navy dark theme for every app page (scoped via :has(.app-layout) so the
   client-facing report pages — which have no app sidebar — keep their fixed look).
   A navy space-field with faint blue/purple glows, matching Design System 2.0. */
[data-theme="dark"] body:has(.app-layout) {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(91, 92, 235, 0.14), transparent 60%),
    radial-gradient(760px 440px at 8% 5%, rgba(0, 194, 255, 0.08), transparent 60%),
    #0b1220;
  background-attachment: fixed;
}
[data-theme="dark"] body:has(.app-layout) .dashboard-panel,
[data-theme="dark"] body:has(.app-layout) .kpi-hero-card,
[data-theme="dark"] body:has(.app-layout) .stat-tile,
[data-theme="dark"] body:has(.app-layout) .app-main .card {
  background: linear-gradient(180deg, #151c2e 0%, #111827 100%);
  border: 1px solid rgba(139, 160, 216, 0.10);
}
[data-theme="dark"] body:has(.app-layout) .hero-orb { opacity: 0.45; }
[data-theme="dark"] body:has(.app-layout) .ai-bar-track { background: rgba(139, 160, 216, 0.14); }

@media (prefers-reduced-motion: reduce) {
  .hero-orb, .kpi-hero-card, .sparkline-line, .value-loading, body.page-dashboard {
    animation: none !important;
  }
  .sparkline-line { stroke-dashoffset: 0; }
  .card:hover, .dashboard-panel:hover, .btn:hover, .kpi-hero-card:hover, .sidebar-item:hover, .sidebar-toplevel-item:hover {
    transform: none;
  }
}

@media (max-width: 700px) {
  .dashboard-hero { padding: 28px 20px; }
  .hero-greeting { font-size: 21px; }
  .hero-analyze { flex-wrap: wrap; padding: 8px; }
  .hero-analyze input { flex-basis: 100%; padding: 6px 8px; }
  .hero-analyze-btn { width: 100%; }
}

/* ============================================================================
   DESIGN SYSTEM 2.0 — app-shell layer (see DESIGN_SYSTEM.md)
   One design language for every app page. Everything here is scoped to the app
   shell (.app-main / body:has(.app-layout) / chrome classes) so the frozen
   client-facing report design system above is never affected.
   ========================================================================= */

:root {
  --primary: #FF7A18;
  --primary-strong: #E2660C;
  --secondary: #5B5CEB;
  --accent: #00C2FF;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --ink: #0F172A;

  --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.14);

  /* Cooler app-shell neutrals (report classes use --navy/--orange, untouched) */
  --body-bg: #F8FAFC;
  --border: #E2E8F0;
  --border-soft: #EEF2F7;
  --hover-bg: #F1F5F9;
}

[data-theme="dark"] {
  --body-bg: #0B1220;
  --surface: #131C2E;
  --border: #23304A;
  --border-soft: #1D2941;
  --muted: #8FA0BC;
  --muted-soft: #64748B;
  --body-text: #E2E8F0;
  --input-bg: #0F1830;
  --input-border: #2B3A58;
  --input-text: #E2E8F0;
  --hover-bg: #1B2740;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.5);

  --sidebar-bg: #0D1526;
  --sidebar-border: #1B2740;
  --sidebar-hover-bg: #16213A;
  --sidebar-active-bg: #1B2740;
}

/* --- App shell base: typography + aurora background + page fade --- */
body:has(.app-layout) {
  font-family: Inter, 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(91, 92, 235, 0.06), transparent 60%),
    radial-gradient(720px 420px at 5% 8%, rgba(0, 194, 255, 0.05), transparent 60%),
    var(--body-bg);
  background-attachment: fixed;
  animation: page-fade-in 0.35s ease;
  -webkit-font-smoothing: antialiased;
}

.lucide-icon { vertical-align: -2px; flex-shrink: 0; }

/* --- Topbar: ink chrome instead of report-navy --- */
body:has(.app-layout) .topbar {
  background: linear-gradient(180deg, #111A2E 0%, var(--ink) 100%);
  border-bottom: 1px solid rgba(139, 160, 216, 0.12);
  padding: 12px 24px;
}
body:has(.app-layout) .topbar .brand .accent { color: var(--primary); }
body:has(.app-layout) .user-avatar { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); }

/* --- Sidebar refinements ---
   Every row (group header, top-level item, sub-item) shares the same left
   margin/padding so all icons sit in ONE straight vertical column. */
.app-sidebar { font-family: inherit; }
.sidebar-toplevel-item { border-radius: var(--radius-lg); margin: 0 8px 2px; padding: 9px 10px; gap: 9px; }
.sidebar-toplevel-item.active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow: 0 0 18px 0 color-mix(in srgb, var(--primary) 22%, transparent);
}
.sidebar-group-header { margin: 0 8px; padding: 9px 10px; width: calc(100% - 16px); gap: 9px; border-radius: var(--radius-md); }
.sidebar-group-header:hover { background: var(--sidebar-hover-bg); }
.sidebar-item { border-radius: var(--radius-md); margin: 0 8px 1px; padding: 7px 10px; gap: 9px; border-left: none; }
.sidebar-item.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--primary);
}
.sidebar-group-icon, .sidebar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
}
.sidebar-item-icon { color: var(--sidebar-muted); }
.sidebar-item:hover .sidebar-item-icon, .sidebar-item.active .sidebar-item-icon { color: var(--primary); }
.sidebar-group-header:hover .sidebar-group-icon { color: var(--primary); }
.sidebar-hint { padding-left: 37px; }
.sidebar-nested-label { margin-left: 37px; }
/* Nested groups (per-client tool categories) keep a small extra indent for hierarchy */
.sidebar-group .sidebar-group .sidebar-group-header { padding-left: 24px; }
.sidebar-group .sidebar-group .sidebar-item { padding-left: 24px; }
body.sidebar-collapsed .app-sidebar .sidebar-group-header { padding: 9px 0; }

/* --- Page headers: title + description + actions --- */
.app-main .page-header { margin-bottom: var(--space-5); align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.app-main .page-header h2, .app-main > h2 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.page-header-text { display: flex; flex-direction: column; gap: 2px; }
.page-sub { margin: 0; color: var(--muted); font-size: 13px; }
.page-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--radius-lg);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.3;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}
.btn:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 38%, transparent); }
.btn.secondary {
  background: var(--surface);
  color: var(--body-text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn.secondary:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--body-text) 25%, var(--border)); }
.btn.danger { background: linear-gradient(135deg, var(--danger), #C93030); box-shadow: 0 2px 8px color-mix(in srgb, var(--danger) 30%, transparent); }

/* --- Filter pills (status filter rows on Projects/Tasks/etc.) --- */
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all 0.15s ease;
}
.filter-pill:hover { color: var(--body-text); border-color: color-mix(in srgb, var(--body-text) 20%, var(--border)); transform: translateY(-1px); }
.filter-pill.active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-color: transparent;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* --- Inputs: comfortable, rounded, focus glow --- */
.app-main form input, .app-main form select, .app-main form textarea,
.app-main input[type="text"], .app-main input[type="date"], .app-main input[type="number"],
.app-main input[type="email"], .app-main input[type="password"], .app-main input[type="url"],
.app-main select, .app-main textarea {
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--input-border);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-main form input:focus, .app-main form select:focus, .app-main form textarea:focus,
.app-main input:focus, .app-main select:focus, .app-main textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.app-main form label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 14px 0 6px; }
.app-main input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); padding: 0; }

/* --- Cards & panels: 16px radius, soft border, layered shadow --- */
.app-main .card, .dashboard-panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.app-main .card:hover, .dashboard-panel:hover { box-shadow: var(--shadow-md); }
.app-main .card { padding: var(--space-5); }

/* --- Tables: modern SaaS style (app pages only; report tables untouched) --- */
.app-main table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  margin-top: var(--space-3);
}
.app-main table th {
  background: var(--hover-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.app-main table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.app-main table tr:last-child td { border-bottom: none; }
.app-main table tbody tr { transition: background 0.12s ease; }
.app-main table tbody tr:hover td { background: color-mix(in srgb, var(--hover-bg) 60%, transparent); }
.app-main .table-compact th { padding: 8px 10px; }
.app-main .table-compact td { padding: 7px 10px; font-size: 13px; }

/* --- Status pills (app scope) --- */
.app-main .status-good, .app-main .status-attention, .app-main .status-critical {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.app-main .status-good { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.app-main .status-attention { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.app-main .status-critical { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
[data-theme="dark"] .app-main .status-good { color: #4ADE80; }
[data-theme="dark"] .app-main .status-attention { color: #FBBF24; }
[data-theme="dark"] .app-main .status-critical { color: #F87171; }

/* --- Entity cards (Projects / Clients grids) --- */
.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.entity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: card-materialize 0.4s ease backwards;
}
.entity-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--secondary) 25%, var(--border-soft));
}
.entity-grid .entity-card:nth-child(2) { animation-delay: 0.04s; }
.entity-grid .entity-card:nth-child(3) { animation-delay: 0.08s; }
.entity-grid .entity-card:nth-child(4) { animation-delay: 0.12s; }
.entity-grid .entity-card:nth-child(5) { animation-delay: 0.16s; }
.entity-grid .entity-card:nth-child(6) { animation-delay: 0.2s; }
.entity-card-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.entity-card-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
}
.entity-card-chip.orange { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.entity-card-title { min-width: 0; flex: 1; }
.entity-card-title a { font-size: 15px; font-weight: 650; color: var(--body-text); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-card-title a:hover { color: var(--primary); }
.entity-card-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-card-status { flex-shrink: 0; }
.entity-meta { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.entity-meta-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.entity-meta-row .k { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.entity-meta-row .v { font-weight: 600; text-align: right; }
.entity-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.entity-card-actions .btn { padding: 7px 12px; font-size: 12.5px; flex: 1; }

/* --- Reports timeline --- */
.timeline { position: relative; margin-top: var(--space-4); padding-left: 26px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--secondary), color-mix(in srgb, var(--accent) 55%, transparent));
  opacity: 0.35;
}
.timeline-item { position: relative; margin-bottom: var(--space-4); animation: card-materialize 0.4s ease backwards; }
.timeline-item:nth-child(2) { animation-delay: 0.04s; }
.timeline-item:nth-child(3) { animation-delay: 0.08s; }
.timeline-item:nth-child(4) { animation-delay: 0.12s; }
.timeline-item:nth-child(5) { animation-delay: 0.16s; }
.timeline-dot {
  position: absolute;
  left: -24px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 22%, transparent);
}
.timeline-dot.good { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.timeline-dot.critical { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.timeline-dot.attention { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
.timeline-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.timeline-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.timeline-card-main { flex: 1; min-width: 200px; }
.timeline-card-title { font-weight: 650; font-size: 14px; }
.timeline-card-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* --- Tasks: Linear-style rows --- */
.task-list { display: flex; flex-direction: column; margin-top: var(--space-3); }
.task-row {
  border-bottom: 1px solid var(--border-soft);
  padding: 11px 8px;
  border-radius: var(--radius-md);
  transition: background 0.12s ease;
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: color-mix(in srgb, var(--hover-bg) 60%, transparent); }
.task-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-title { font-weight: 600; font-size: 14px; }
.task-title.done { text-decoration: line-through; color: var(--muted-soft); font-weight: 500; }
.task-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; }
.priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.priority-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.priority-pill.high { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.priority-pill.medium { color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, transparent); }
.priority-pill.low { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.task-edit summary { color: var(--muted); font-size: 12.5px; cursor: pointer; margin-top: 4px; }
.task-edit summary:hover { color: var(--body-text); }

/* --- Section titles inside cards --- */
.app-main .card h3, .dashboard-panel h3 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.app-main .card h3 .lucide-icon, .dashboard-panel h3 .lucide-icon { color: var(--secondary); margin-right: 2px; }
/* Leading icons are separate flex children — keep them glued to the title and
   push only the trailing link/annotation to the right edge. */
.app-main .card h3, .dashboard-panel h3 { justify-content: flex-start; gap: 7px; }
.app-main .card h3 > a:last-child, .dashboard-panel h3 > a:last-child,
.app-main .card h3 > .muted:last-child, .dashboard-panel h3 > .muted:last-child { margin-left: auto; }

/* --- Project workspace: quick-action tiles + mini stats --- */
.qa-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 14px 0 8px;
}
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.qa-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none !important;
  color: var(--body-text) !important;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.qa-tile .lucide-icon { color: var(--secondary); }
.qa-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-soft));
}
.qa-tile:hover .lucide-icon { color: var(--primary); }
.qa-count {
  margin-left: auto;
  background: var(--hover-bg);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
[data-theme="dark"] .qa-tile { background: transparent; }

.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-bottom: var(--space-3); }
.mini-stat { display: flex; flex-direction: column; gap: 2px; }
.mini-stat-value { font-size: 21px; font-weight: 700; line-height: 1.2; }
.mini-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* --- Dashboard: fixed two-column panel grid (tidy rows, no ragged auto-fit) ---
   Scoped to .dashboard-grid-two only (the main dashboard) — the project
   workspace's plain .dashboard-grid keeps its own top-aligned sizing. */
.dashboard-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.dashboard-grid-two .dashboard-panel { display: flex; flex-direction: column; }
.dashboard-grid-two .dashboard-panel .empty-state { flex: 1; justify-content: center; }
.dashboard-grid-two .dashboard-panel .gauge-wrap { flex: 1; justify-content: center; }
@media (max-width: 900px) { .dashboard-grid-two { grid-template-columns: 1fr; } }

/* --- AI Assistant chat (/assistant) --- */
.chat-shell { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 420px; }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; }
.chat-row { display: flex; }
.chat-row.user { justify-content: flex-end; }
.chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  animation: card-materialize 0.25s ease;
}
.chat-row.user .chat-bubble {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-row.model .chat-bubble {
  background: var(--hover-bg);
  color: var(--body-text);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}
.chat-typing { color: var(--muted); animation: chat-pulse 1s ease-in-out infinite; }
@keyframes chat-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.chat-input-bar { display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.chat-input-bar input { flex: 1; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.chat-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--body-text);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: reduce) { .chat-bubble, .chat-typing { animation: none !important; } }

/* --- Theme toggle: CSS decides which of the two inline SVGs shows --- */
.theme-toggle .theme-icon-moon, .theme-toggle .theme-icon-sun { display: inline-flex; align-items: center; }
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline-flex; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }

/* --- Reduced motion for DS2 additions --- */
@media (prefers-reduced-motion: reduce) {
  .entity-card, .timeline-item, body:has(.app-layout) { animation: none !important; }
  .entity-card:hover, .timeline-card:hover, .filter-pill:hover { transform: none; }
}