/* ================================================================
   OpenClaw Portal — Design System CSS  v2.0
   Warm dark theme — aligned with Remote Reports landing page.
   Landing page: warm cream (#fbf9f8) + lime (#CFFE27) + Fustat.
   Portal translation: warm dark equivalent, same brand universe.
   ================================================================ */

/* ----------------------------------------------------------------
   1. CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {
  /* ── Surfaces — warm dark ──────────────────────────────────────
     Landing page: #fbf9f8 (warm cream). Dark equivalent: warm near-blacks.
     NOT blue-tinted. Warm browns/neutrals = same brand temperature.
  */
  --color-surface-0:      #0D0C0B;   /* page background */
  --color-surface-1:      #141310;   /* sidebar, shell */
  --color-surface-2:      #1B1A17;   /* cards, panels */
  --color-surface-3:      #222018;   /* hover states */
  --color-border:         #2B2924;   /* borders */
  --color-border-subtle:  #181612;   /* dividers */

  /* ── Text — warm off-whites ────────────────────────────────────
     Mirrors landing page warmth (#1b1c1c inverted to warm off-white)
  */
  --color-text-primary:   #EDEAE3;   /* warm near-white */
  --color-text-secondary: #9E9890;   /* warm mid-gray */
  --color-text-muted:     #5A5550;   /* warm muted */

  /* ── Accent — brand lime ───────────────────────────────────────
     Direct from landing page: --color-primary-container: #CFFE27
  */
  --color-accent:         #CFFE27;
  --color-accent-on:      #0C0B0A;
  --color-accent-dim:     rgba(207, 254, 39, 0.07);
  --color-accent-border:  rgba(207, 254, 39, 0.18);
  --color-accent-glow:    rgba(207, 254, 39, 0.12);

  /* ── Functional blue (links, avatar-c1) ─────────────────────── */
  --color-blue:           #4F80FF;
  --color-blue-dim:       #1A2540;

  /* ── Shadows ───────────────────────────────────────────────────
     Warm-tinted shadows (not pure black) — softer, more premium
  */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.35), 0 12px 40px rgba(0,0,0,0.2);
  --shadow-elevated:   0 20px 60px rgba(0,0,0,0.55);

  /* ── Typography ────────────────────────────────────────────────
     Fustat: landing page headline font (Fustat 700/800, tracking-tight)
     Inter: landing page body font
  */
  --font-headline: "Fustat", "Manrope", sans-serif;
  --font-body:     "Inter", system-ui, -apple-system, sans-serif;

  /* ── Status colors (warmer backgrounds) ────────────────────────
     Previous backgrounds were blue-tinted. Now warm-dark.
  */
  --color-status-green:      #22C55E;
  --color-status-yellow:     #F59E0B;
  --color-status-red:        #EF4444;
  --color-status-gray:       #6B7280;
  --color-status-green-bg:   #071509;
  --color-status-yellow-bg:  #160E00;
  --color-status-red-bg:     #160404;
  --color-status-gray-bg:    #141310;

  /* ── Chart palette ─────────────────────────────────────────────
     chart-1 = lime (brand) for productivity bars
  */
  --chart-1: #CFFE27;
  --chart-2: #F59E0B;
  --chart-3: #22C55E;
  --chart-4: #A78BFA;
  --chart-5: #EF4444;

  /* ── Type scale ─────────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   24px;
  --text-xl:   36px;
  --text-2xl:  52px;

  /* ── Spacing ────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  24px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --sidebar-width:  260px;
  --topbar-height:  56px;
  --content-max:    1320px;
}

/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  height: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ----------------------------------------------------------------
   3. APP SHELL LAYOUT
   ---------------------------------------------------------------- */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ----------------------------------------------------------------
   4. SIDEBAR
   ---------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sidebar__logo-mark {
  width: 38px;
  height: 38px;
  background: var(--color-accent);
  color: var(--color-accent-on);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.03em;
  flex-shrink: 0;
  font-family: var(--font-headline);
  box-shadow: 0 4px 16px rgba(207,254,39,0.25);
}

.sidebar__logo-name {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.04em;
}

.sidebar__client {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 1px;
}

.sidebar__nav {
  flex: 1;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__nav-item { display: block; }

.sidebar__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}

.sidebar__nav-link:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  text-decoration: none;
}

.sidebar__nav-link.is-active {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-weight: 600;
  border: 1px solid var(--color-accent-border);
}

.sidebar__nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

.sidebar__nav-link.is-active .sidebar__nav-icon { opacity: 1; }

.sidebar__section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: block;
  opacity: 0.6;
}

.sidebar__footer {
  padding: var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-surface-0);
}

.sidebar__footer-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-2);
}

/* ----------------------------------------------------------------
   5. MAIN CONTENT AREA
   ---------------------------------------------------------------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ----------------------------------------------------------------
   6. TOPBAR
   ---------------------------------------------------------------- */
.topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-7);
  background: rgba(20, 19, 16, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.topbar__breadcrumb a {
  color: var(--color-text-muted);
}

.topbar__breadcrumb a:hover { color: var(--color-text-secondary); }

.topbar__breadcrumb-sep {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.topbar__breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: 600;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ----------------------------------------------------------------
   7. PAGE CONTENT SCROLL AREA
   ---------------------------------------------------------------- */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-10) var(--space-9);
  position: relative;
}

/* Subtle background glow — mirrors landing page radial accent */
.page-content::before {
  content: '';
  position: fixed;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(207, 254, 39, 0.035) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.page-content-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------------
   8. PAGE HEADER
   ---------------------------------------------------------------- */
.page-header {
  margin-bottom: var(--space-8);
}

.page-header__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.page-header__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.page-header__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ----------------------------------------------------------------
   9. SECTION HEADINGS
   ---------------------------------------------------------------- */
.section-heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ----------------------------------------------------------------
   9b. SECTION HEADER (admin pages)
   ---------------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.section-header__title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.04em;
}

.section-header__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.section-gap { margin-bottom: var(--space-8); }

/* ----------------------------------------------------------------
   10. CARD BASE
   ---------------------------------------------------------------- */
.card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.card:hover { background: var(--color-surface-3); }

.card--no-hover:hover { background: var(--color-surface-2); }

/* ----------------------------------------------------------------
   11. BADGE
   ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--green  { background: var(--color-status-green-bg);  color: var(--color-status-green); }
.badge--yellow { background: var(--color-status-yellow-bg); color: var(--color-status-yellow); }
.badge--red    { background: var(--color-status-red-bg);    color: var(--color-status-red); }
.badge--gray   { background: var(--color-status-gray-bg);   color: var(--color-text-muted); }
.badge--blue   { background: var(--color-blue-dim);         color: var(--color-blue); }

/* ----------------------------------------------------------------
   12. KPI CARD
   ---------------------------------------------------------------- */
.kpi-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 100px;
  box-shadow: var(--shadow-card);
  transition: border-top-color 0.2s;
}

.kpi-card:hover {
  border-top-color: var(--color-accent);
}

.kpi-card__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.kpi-card__value {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
}

.kpi-card__value--muted { color: var(--color-text-muted); }

/* Unit suffix (e.g. the "%" after a productivity score) */
.kpi-card__value-unit {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.kpi-card__context {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.kpi-card__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   13. KPI ROW GRID
   ---------------------------------------------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   14. INITIALS AVATAR
   ---------------------------------------------------------------- */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
  border-radius: 14px;
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

/* Deterministic color variants based on name hash */
.avatar--c1 { background: #1E2E52; color: #4F80FF; }
.avatar--c2 { background: #1A2D1E; color: #22C55E; }
.avatar--c3 { background: #2D1B00; color: #F59E0B; }
.avatar--c4 { background: #1E1A2D; color: #A78BFA; }
.avatar--c5 { background: #2D0707; color: #EF4444; }

/* ----------------------------------------------------------------
   15. EMPLOYEE CARD (dashboard)
   ---------------------------------------------------------------- */
.employee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1200px) {
  .employee-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .employee-grid { grid-template-columns: 1fr; }
}

.employee-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: background 0.15s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
}

.employee-card:hover {
  background: var(--color-surface-3);
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.employee-card--empty {
  opacity: 0.6;
  cursor: default;
}

.employee-card--empty:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.employee-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.employee-card__meta { flex: 1; min-width: 0; }

.employee-card__name {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

.employee-card__week {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.employee-card__metrics {
  display: flex;
  gap: var(--space-6);
}

.employee-card__metric-item { min-width: 0; }

.employee-card__metric-value {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.employee-card__metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-top: 2px;
}

.employee-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.employee-card__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

.employee-card__empty-msg {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ----------------------------------------------------------------
   16. DAY STATUS ROW (5 pills: Ma–Vr)
   ---------------------------------------------------------------- */
.day-status-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

.day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.day-pill__label {
  font-size: 9px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.day-pill__dot {
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-status-gray-bg);
}

.day-pill--green  .day-pill__dot { background: var(--color-status-green); }
.day-pill--yellow .day-pill__dot { background: var(--color-status-yellow); }
.day-pill--red    .day-pill__dot { background: var(--color-status-red); }
.day-pill--gray   .day-pill__dot { background: var(--color-status-gray-bg); border: 1px solid var(--color-border); }

/* ----------------------------------------------------------------
   17. DAY CARD (in week grid)
   ---------------------------------------------------------------- */
.day-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (max-width: 1100px) {
  .day-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .day-grid { grid-template-columns: repeat(2, 1fr); }
}

.day-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-status-gray);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 150px;
  box-shadow: var(--shadow-card);
}

.day-card--green  { border-left-color: var(--color-status-green); }
.day-card--yellow { border-left-color: var(--color-status-yellow); }
.day-card--red    { border-left-color: var(--color-status-red); }
.day-card--gray   { border-left-color: var(--color-status-gray); }

.day-card--empty {
  opacity: 0.5;
}

.day-card__header { }

.day-card__dayname {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.day-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.day-card__metrics {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.day-card__metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
}

.day-card__metric-label { color: var(--color-text-muted); }

.day-card__metric-value {
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.day-card__empty-msg {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.day-card__footer {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.day-card__link {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
}

.day-card__link--disabled {
  color: var(--color-text-muted);
  pointer-events: none;
  cursor: default;
}

/* ----------------------------------------------------------------
   18. PIPELINE STATUS BAR
   ---------------------------------------------------------------- */
.pipeline-bar {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.pipeline-bar--warn {
  background: var(--color-status-gray-bg);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.pipeline-bar--fail {
  background: var(--color-status-red-bg);
  color: var(--color-status-red);
  border-bottom: 1px solid #3D0E0E;
}

.pipeline-bar__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   19. WEEK NAVIGATOR
   ---------------------------------------------------------------- */
.week-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  box-shadow: var(--shadow-card);
}

.week-nav__btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 14px;
  transition: background 0.1s, color 0.1s;
  text-decoration: none;
}

.week-nav__btn:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
  text-decoration: none;
}

.week-nav__btn--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.week-nav__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  padding: 0 var(--space-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------
   20. CHART CONTAINERS
   ---------------------------------------------------------------- */
.chart-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

@media (max-width: 900px) {
  .chart-section { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  /* no overflow:hidden — must not clip canvas */
}

.chart-card__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.chart-card__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-4);
}

/* Chart canvas wrap — explicit sizing required for Chart.js responsive mode */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  /* must not have overflow:hidden */
}

.chart-canvas-wrap canvas {
  display: block; /* Chart.js manages width/height — do not override */
}

/* ----------------------------------------------------------------
   21. WEEK NARRATIVE PANEL
   ---------------------------------------------------------------- */
.narrative-panel {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-card);
}

.narrative-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
}

.narrative-panel__header:hover { background: var(--color-surface-3); }

.narrative-panel__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.narrative-panel__toggle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: transform 0.2s;
}

.narrative-panel__body {
  padding: var(--space-6);
}

.narrative-panel__empty {
  padding: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.narrative-text {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  max-width: 68ch;
}

.narrative-day-header {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.narrative-day-header:first-child { margin-top: 0; }

/* ----------------------------------------------------------------
   22. DATA QUALITY NOTICE
   ---------------------------------------------------------------- */
.data-notice {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-1);
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   23. DOWNLOAD BAR
   ---------------------------------------------------------------- */
.download-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-card);
}

.download-bar__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.12s, opacity 0.12s, transform 0.1s, box-shadow 0.12s;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-on);
  box-shadow: 0 4px 16px rgba(207,254,39,0.2);
}

.btn--primary:hover {
  background: #d4e822;
  color: var(--color-accent-on);
  box-shadow: 0 6px 24px rgba(207,254,39,0.3);
}

.btn--secondary {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-text-muted);
  background: var(--color-surface-3);
}

.btn--disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
}

/* ----------------------------------------------------------------
   24. EMPTY STATE
   ---------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
}

.empty-state__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.empty-state__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------
   25. ERROR BANNER
   ---------------------------------------------------------------- */
.error-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-status-red-bg);
  border: 1px solid #3D0E0E;
  border-radius: 8px;
  font-size: var(--text-sm);
  color: var(--color-status-red);
  margin-bottom: var(--space-6);
}

/* ----------------------------------------------------------------
   26. EMPLOYEE WEEK HEADER
   ---------------------------------------------------------------- */
.emp-week-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.emp-week-header__info { flex: 1; min-width: 0; }

.emp-week-header__name {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.04em;
  margin-bottom: var(--space-1);
}

.emp-week-header__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.emp-week-header__sep { opacity: 0.4; }

/* ----------------------------------------------------------------
   27. DASHBOARD HEADER
   ---------------------------------------------------------------- */
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.dashboard-header__left {}

.dashboard-header__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dashboard-header__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.dashboard-header__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.dashboard-header__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------
   28. UTILITIES
   ---------------------------------------------------------------- */
.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary   { color: var(--color-text-primary); }
.text-accent    { color: var(--color-accent); }
.text-blue      { color: var(--color-blue); }
.text-green     { color: var(--color-status-green); }
.text-yellow    { color: var(--color-status-yellow); }
.text-red       { color: var(--color-status-red); }
.text-xs        { font-size: var(--text-xs); }
.text-sm        { font-size: var(--text-sm); }

.font-mono {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
}

.tabular { font-variant-numeric: tabular-nums; }

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-6) 0;
}

.flex-row {
  display: flex;
  align-items: center;
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* ----------------------------------------------------------------
   29. RESPONSIVE TOPBAR / SIDEBAR (tablet/mobile stubs)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sidebar { width: 64px; }
  .sidebar__logo-name,
  .sidebar__client,
  .sidebar__nav-link span,
  .sidebar__section-label,
  .sidebar__footer-label { display: none; }
  .sidebar__nav-link { justify-content: center; padding: var(--space-2); }
  .sidebar__header { justify-content: center; padding: var(--space-4) 0; }
  .page-content { padding: var(--space-6) var(--space-6); }
}

@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: var(--topbar-height); flex-direction: row; }
  .page-content { padding: var(--space-4); }
}

/* ----------------------------------------------------------------
   30. REPORT VIEWER PAGE
   ---------------------------------------------------------------- */

/* Narrow single-column reading layout */
.report-page {
  max-width: 720px;
}

/* ── Report meta bar ── */
.report-meta-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.report-meta-bar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.report-meta-bar__back:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-text-muted);
  text-decoration: none;
}

.report-meta-bar__identity { flex: 1; min-width: 0; }

.report-meta-bar__name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-meta-bar__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.report-meta-bar__avatar {
  display: inline-flex;
  width: 24px;
  height: 24px;
  font-size: 10px;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}

/* ── Compact day metrics strip ── */
.report-day-metrics {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.report-day-metric { display: flex; flex-direction: column; gap: 2px; }

.report-day-metric__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.report-day-metric__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.report-day-metric__value-unit {
  font-size: var(--text-sm);
  font-weight: 400;
  margin-left: 1px;
}

.report-day-metrics .data-notice {
  align-self: flex-end;
  flex-basis: 100%;
}

/* ── Idle summary notice bar ── */
.idle-summary-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-status-yellow-bg);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  margin-bottom: var(--space-5);
  color: var(--color-status-yellow);
}

.idle-summary-bar__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.idle-summary-bar__content { flex: 1; }

.idle-summary-bar__title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.idle-summary-bar__streaks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.idle-streak-pill {
  font-size: var(--text-xs);
  padding: 2px 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.idle-streak-pill--significant {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
  font-weight: 600;
}

/* ── Report card — always white, regardless of dark theme ── */
.report-card {
  background: #FFFFFF;
  border-radius: 10px;
  padding: var(--space-8) var(--space-10);
  border: 1px solid #E5E7EB;
}

.report-card--partial {
  border-top: 3px solid var(--color-status-yellow);
}

.report-card--failed,
.report-card--empty,
.report-card--encoding-error {
  border-top: 3px solid var(--color-status-red);
}

.report-card__parse-notice {
  font-size: var(--text-xs);
  font-style: italic;
  color: #6B7280;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid #E5E7EB;
}

/* ── Report section ── */
.report-section {
  margin-bottom: var(--space-8);
}

.report-section:last-child {
  margin-bottom: 0;
}

.report-section__title {
  font-size: 17px;
  font-weight: 600;
  color: #111318;
  margin-bottom: 4px;
}

.report-section__divider {
  height: 1px;
  background: #E5E7EB;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.report-section__body {
  font-size: 15px;
  line-height: 1.75;
  color: #374151;
  max-width: 68ch;
}

.report-section__empty {
  font-size: 14px;
  color: #9CA3AF;
  font-style: italic;
}

/* Raw fallback for failed parse */
.report-raw {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #374151;
  white-space: pre-wrap;
  background: #F9FAFB;
  padding: var(--space-4);
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  max-width: 68ch;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .report-card { padding: var(--space-5); }
  .report-day-metrics { gap: var(--space-4); }
}

/* ===========================================================================
   Team overview
   =========================================================================== */

.team-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.team-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-card);
}

a.team-row:hover {
  border-color: var(--color-accent-border);
  background: var(--color-surface-2);
  box-shadow: 3px 0 0 var(--color-accent) inset, var(--shadow-card-hover);
}

.team-row__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
}

.team-row__badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-row__delta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-width: 4.5rem;
  text-align: right;
}

.team-notice {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 600px) {
  .team-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .team-row__badges { justify-content: flex-start; }
  .team-row__delta  { text-align: left; }
}