/* ================================================================
   Smart Logger — greymatters branded dashboard
   Tokens from GMKB (brand.grey-matters.com)
   ================================================================ */

@import url('https://brand.grey-matters.com/gm-base.css');

/* Inter — tool body font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Smart Logger tool tokens ── */
:root {
  --gm-logo-height: var(--gm-logo-height-header);

  /* Tool typography: Inter body, Cousine mono for UI chrome, display for titles only */
  --font-tool-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-tool-ui:   var(--font-mono);

  /* Sub-scale type sizes (below --type-xs: 11px) for dense tool UI */
  --type-2xs:       10px;
  --type-3xs:       9px;

  /* App layout */
  --sl-content-max: 1400px;
  --sl-header-height: var(--gm-header-height);

  /* ── Tool UI palette (Tailwind defaults) ──
     For graphs, charts, badges, status indicators, data tables.
     NOT for brand/editorial — use --gm-* / --st-* / --ca-* there. */
  --tool-green:      #22c55e;  --tool-green-bg:   #dcfce7;
  --tool-red:        #ef4444;  --tool-red-bg:     #fee2e2;
  --tool-amber:      #f59e0b;  --tool-amber-bg:   #fef3c7;
  --tool-blue:       #3b82f6;  --tool-blue-bg:    #dbeafe;
  --tool-gray:       #6b7280;  --tool-gray-bg:    #f3f4f6;
  --tool-purple:     #a855f7;  --tool-purple-bg:  #f3e8ff;
  --tool-teal:       #14b8a6;  --tool-teal-bg:    #ccfbf1;
  --tool-rose:       #f43f5e;  --tool-rose-bg:    #ffe4e6;
  --tool-orange:     #f97316;  --tool-orange-bg:  #ffedd5;

  /* ── UI surface layer (light mode — mirrors GMKB) ──
     All components reference --ui-* tokens, never --gm-* directly.
     Dark mode remaps these in .dark {} below. */
  --ui-bg:             #F5F4F2;
  --ui-surface:        #FFFFFF;
  --ui-surface-hover:  #F0EEEB;
  --ui-elevated:       #FFFFFF;
  --ui-text:           #27251F;
  --ui-text-secondary: #58595B;
  --ui-text-muted:     #A7A9AC;
  --ui-text-subtle:    #E5E3DF;
  --ui-border:         #E5E3DF;
  --ui-border-strong:  #A7A9AC;
  --ui-divider:        #E5E3DF;
  --ui-accent:         #27251F;
  --ui-accent-text:    #FFFFFF;
  --ui-input-bg:       #FFFFFF;
  --ui-input-border:   #E5E3DF;
  --ui-input-text:     #27251F;
  --ui-shadow:         0 2px 8px rgba(0,0,0,0.04);
}

/* ── Dark mode ── */
.dark {
  --ui-bg:             #141414;
  --ui-surface:        #1E1E1E;
  --ui-surface-hover:  #2A2A2A;
  --ui-elevated:       #242424;
  --ui-text:           #E5E5E5;
  --ui-text-secondary: #BBBBBB;
  --ui-text-muted:     #777777;
  --ui-text-subtle:    #444444;
  --ui-border:         #2E2E2E;
  --ui-border-strong:  #3A3A3A;
  --ui-divider:        #2E2E2E;
  --ui-accent:         #E5E5E5;
  --ui-accent-text:    #141414;
  --ui-input-bg:       #1E1E1E;
  --ui-input-border:   #3A3A3A;
  --ui-input-text:     #E5E5E5;
  --ui-shadow:         0 2px 8px rgba(0,0,0,0.3);

  /* Tool palette — slightly desaturated for dark backgrounds */
  --tool-green:      #4ade80;  --tool-green-bg:   #14532d;
  --tool-red:        #f87171;  --tool-red-bg:     #450a0a;
  --tool-amber:      #fbbf24;  --tool-amber-bg:   #451a03;
  --tool-blue:       #60a5fa;  --tool-blue-bg:    #1e3a5f;
  --tool-gray:       #9ca3af;  --tool-gray-bg:    #1f2937;
  --tool-purple:     #c084fc;  --tool-purple-bg:  #3b0764;
  --tool-teal:       #2dd4bf;  --tool-teal-bg:    #134e4a;
  --tool-rose:       #fb7185;  --tool-rose-bg:    #4c0519;
  --tool-orange:     #fb923c;  --tool-orange-bg:  #431407;
}

/* Reset inherited from gm-base.css */

body {
  font-family: var(--font-tool-body);
  background: var(--ui-bg);
  color: var(--ui-text);
  min-height: 100vh;
  transition: background-color var(--duration-slow), color var(--duration-slow);
}
/* marble overlay removed — clean bg */


/* ================================================================
   APP HEADER
   ================================================================ */

.app-header {
  background: var(--ui-accent);
  color: var(--ui-accent-text);
  height: var(--sl-header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  position: relative;
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--sl-content-max);
  margin: 0 auto;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.brand-logo {
  height: var(--gm-logo-height);
  width: auto;
  display: block;
  opacity: 0.9;
}

.app-header-divider {
  width: 1px;
  height: var(--gm-logo-height-header);
  background: var(--ui-accent-text);
  opacity: 0.25;
}

.brand-app-name {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ui-accent-text);
  opacity: 0.85;
}

/* Theme toggle — light/dark */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--duration-base);
  padding: var(--space-xs);
  margin: calc(-1 * var(--space-xs));
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle-icon {
  color: var(--ui-accent-text);
  display: flex;
}
.theme-toggle-icon svg {
  width: var(--gm-logo-height-header);
  height: var(--gm-logo-height-header);
}

/* Dark mode: header stays dark (elevated surface), not inverted */
.dark .app-header { background: var(--ui-elevated); border-bottom: 1px solid var(--ui-border); }
.dark .app-header .brand-app-name { color: var(--ui-text-muted); }
.dark .app-header .theme-toggle-icon { color: var(--ui-text-muted); }
.dark .app-header-divider { background: var(--ui-text-muted); }
.dark thead tr { background: var(--ui-elevated); }


/* ================================================================
   FOOTER
   ================================================================ */

.app-footer {
  border-top: 1px solid var(--ui-border);
  min-height: var(--gm-footer-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
}

.app-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--sl-content-max);
  margin: 0 auto;
}

.app-footer-left {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-tool-ui);
  font-size: var(--type-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ui-text-muted);
}

.app-footer-sep {
  margin: 0 var(--space-xs);
  opacity: 0.5;
}

.app-footer-left a {
  color: var(--ui-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
.app-footer-left a:hover {
  color: var(--ui-text-secondary);
}

.brand-logo-footer {
  height: var(--gm-logo-height-footer);
  width: auto;
  opacity: 0.4;
  filter: var(--logo-filter, none);
}

.dark .app-footer { border-color: var(--ui-border); }
.dark .brand-logo-footer { filter: invert(1); opacity: 0.3; }

/* ================================================================
   CONTENT WRAPPER
   ================================================================ */

.content {
  padding: 40px 60px 60px;
  max-width: var(--sl-content-max);
  margin: 0 auto;
  animation: fadeIn var(--duration-slow) var(--ease-default);
}


/* ================================================================
   HEADER — date nav
   ================================================================ */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.header h1 {
  font-family: var(--font-body);
  font-size: var(--type-2xl);
  font-weight: var(--weight-semibold);
  color: var(--ui-text);
  letter-spacing: var(--tracking-normal);
}

.header h1 span {
  font-weight: var(--weight-regular);
  color: var(--ui-text-muted);
  margin-left: 8px;
  font-size: var(--type-base);
}

.date-nav { display: flex; align-items: center; gap: var(--space-xs); }

.date-btn {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-size: var(--type-base);
  color: var(--ui-text-secondary);
  font-family: var(--font-tool-ui);
  transition: all var(--duration-fast);
}
.date-btn:hover { background: var(--ui-surface-hover); border-color: var(--ui-border-strong); }

.date-btn:disabled,
.date-btn-disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.date-btn:disabled:hover,
.date-btn-disabled:hover { background: var(--ui-surface); border-color: var(--ui-border); }

.date-current { font-size: var(--type-base); font-weight: var(--weight-semibold); color: var(--ui-text); }
.date-time { font-size: var(--type-sm); color: var(--ui-text-muted); margin-left: 4px; }


/* ================================================================
   SEARCH
   ================================================================ */

.search-bar { position: relative; }

.search-input {
  padding: 6px 12px 6px 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border);
  font-size: var(--type-sm);
  color: var(--ui-text-secondary);
  background: var(--ui-surface);
  width: 200px;
  font-family: var(--font-tool-ui);
  transition: border-color var(--duration-fast);
}
.search-input:focus { outline: none; border-color: var(--ui-accent); }

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--ui-text-muted);
  display: none;
  transition: color var(--duration-fast);
}
.search-clear:hover { color: var(--ui-text); }
.search-clear.visible { display: flex; }

/* ── Disabled tab overlay ── */
.tab-disabled {
  position: relative;
  pointer-events: none;
  user-select: none;
}
.tab-disabled::after {
  content: 'Coming in Phase 2';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(245, 244, 242, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ui-text-secondary);
  z-index: 10;
  border-radius: var(--radius-sm);
}
/* Settings tab — unlocked for demo */

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ui-text-muted);
}


/* ================================================================
   GAUGE + CARDS ROW
   ================================================================ */

.top-row { display: flex; gap: var(--space-lg); margin-bottom: 32px; align-items: stretch; }

/* Gauge card */
.gauge-card {
  background: var(--ui-surface);
  border-radius: var(--radius-sm);
  padding: 32px;
  border: 1px solid var(--ui-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  animation: fadeUp var(--duration-slower) var(--ease-default) both;
}

.gauge-number { font-size: var(--type-4xl); font-weight: var(--weight-bold); color: var(--ui-text); line-height: 1; }
.gauge-number .slash { color: var(--ui-text-subtle); font-weight: var(--weight-light); margin: 0 4px; }
.gauge-number .expected { color: var(--ui-text-muted); font-weight: var(--weight-light); font-size: var(--type-4xl); }

.gauge-label {
  font-size: var(--type-xs);
  color: var(--ui-text-muted);
  margin-top: 8px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.gauge-bar {
  width: 100%;
  height: 6px;
  background: var(--ui-border);
  border-radius: var(--radius-sm);
  margin-top: 16px;
  overflow: hidden;
}

.gauge-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--tool-red) 0%, var(--tool-amber) 40%, var(--tool-green) 70%, var(--tool-green) 100%);
  transition: width var(--duration-slow) var(--ease-default);
}

.gauge-subtitle {
  font-size: var(--type-sm);
  color: var(--ui-text-secondary);
  margin-top: 8px;
  text-align: center;
  font-weight: var(--weight-regular);
}


/* ================================================================
   FILTER CARDS
   ================================================================ */

.cards-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-md); flex: 1; }

.filter-card {
  background: var(--ui-surface);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  border: 1px solid var(--ui-border);
  cursor: pointer;
  text-align: center;
  transition: all var(--duration-slow) var(--ease-default);
  user-select: none;
}
.filter-card:hover {
  border-color: var(--ui-border-strong);
  box-shadow: var(--ui-shadow);
}
.filter-card.active {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow);
}

.filter-card .card-count { font-size: var(--type-3xl); font-weight: var(--weight-bold); line-height: 1; }
.filter-card .card-label {
  font-size: var(--type-2xs);
  color: var(--ui-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: 6px;
  font-weight: var(--weight-semibold);
}
.filter-card .card-sub { font-size: var(--type-2xs); color: var(--ui-text-muted); margin-top: 2px; }

.card-icon { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.card-count-row { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); }

/* Card accent colors — monochrome for all except Issues */
.card-late .card-icon svg,
.card-late .card-count { color: var(--ui-text); }
.card-holiday .card-icon svg,
.card-holiday .card-count { color: var(--ui-text); }
.card-trip .card-icon svg,
.card-trip .card-count { color: var(--ui-text); }
.card-sick .card-icon svg,
.card-sick .card-count { color: var(--ui-text); }
.card-wfh .card-icon svg,
.card-wfh .card-count { color: var(--ui-text); }

/* Issues card keeps red */
.card-issues .card-icon svg,
.card-issues .card-count { color: var(--tool-red); }

/* Card entrance stagger */
.filter-card:nth-child(1) { animation: fadeUp var(--duration-slow) var(--ease-default) calc(var(--stagger-base) * 1) both; }
.filter-card:nth-child(2) { animation: fadeUp var(--duration-slow) var(--ease-default) calc(var(--stagger-base) * 2) both; }
.filter-card:nth-child(3) { animation: fadeUp var(--duration-slow) var(--ease-default) calc(var(--stagger-base) * 3) both; }
.filter-card:nth-child(4) { animation: fadeUp var(--duration-slow) var(--ease-default) calc(var(--stagger-base) * 4) both; }
.filter-card:nth-child(5) { animation: fadeUp var(--duration-slow) var(--ease-default) calc(var(--stagger-base) * 5) both; }
.filter-card:nth-child(6) { animation: fadeUp var(--duration-slow) var(--ease-default) calc(var(--stagger-base) * 6) both; }


/* ================================================================
   FILTER BAR
   ================================================================ */

.filter-bar { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 16px; }

.team-filter {
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: var(--type-2xs);
  color: var(--ui-text-secondary);
  background: transparent;
  cursor: pointer;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-family: var(--font-tool-ui);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A7A9AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 16px;
}
.team-filter:hover,
.team-filter:focus { outline: none; color: var(--ui-text); }

/* Team filter inside dark table header */
thead .team-filter {
  color: var(--ui-text-muted);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wider);
}
thead .team-filter:hover,
thead .team-filter:focus { color: var(--ui-accent-text); }

/* Dropdown options — dark text on white, brand-colored highlight */
.team-filter option {
  color: var(--ui-text);
  background: var(--ui-surface);
  font-family: var(--font-tool-ui);
  padding: 4px 8px;
}
.team-filter option:checked,
.team-filter option:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

.clear-filter {
  display: none;
  font-size: var(--type-sm);
  color: var(--ui-text);
  cursor: pointer;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: center;
}
.clear-filter.visible { display: inline-block; }
.clear-filter:hover { color: var(--ui-text-secondary); }

.pill-filters { display: none; gap: var(--space-xs); }
.pill-filters.visible { display: flex; }

.pill {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--type-2xs);
  font-weight: var(--weight-semibold);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-tool-ui);
}
.pill:hover { background: var(--ui-surface-hover); }
.pill.active {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-text);
}


/* ================================================================
   TABLE
   ================================================================ */

.table-container {
  background: var(--ui-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border);
  overflow: hidden;
  animation: fadeUp var(--duration-slower) var(--ease-default) calc(var(--stagger-base) * 3) both;
}

table { width: 100%; border-collapse: collapse; font-family: var(--font-tool-ui); font-size: var(--type-sm); table-layout: fixed; }

thead tr { background: var(--ui-accent); }
th {
  text-align: left;
  padding: 10px 16px;
  font-weight: var(--weight-semibold);
  color: var(--ui-text-muted);
  font-size: var(--type-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
th.center { text-align: center; }

td { padding: 14px 16px; border-bottom: 1px solid var(--ui-bg); }
td.center { text-align: center; }
tr:last-child td { border-bottom: none; }

tr.expandable { cursor: pointer; transition: background var(--duration-slow) var(--ease-default); }
tr.expandable:hover { background: var(--ui-surface-hover); }

/* Active parent row — connected to its expand content */
tr.expandable.active {
  background: var(--ui-surface);
}
tr.expandable.active td {
  border-bottom: none;
}
tr.expandable.active td:first-child {
  box-shadow: inset 3px 0 0 var(--tool-blue);
}

.emp-name { font-family: var(--font-tool-body); font-weight: var(--weight-semibold); color: var(--ui-text); }
.emp-full { font-family: var(--font-tool-body); font-size: var(--type-xs); color: var(--ui-text-muted); font-weight: var(--weight-regular); }
.emp-role {
  font-size: var(--type-3xs);
  color: var(--ui-text-secondary);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-left: 6px;
}
.emp-role.founder { color: var(--ui-text); }
.team { color: var(--ui-text-secondary); }

/* Director rows */
tr.director td.dir-hidden { color: var(--ui-border); font-size: var(--type-xs); }
tr.director .expand-lock { font-size: var(--type-xs); color: var(--ui-text-muted); font-style: italic; }

/* Inline color helpers (for use in HTML data attributes) */
.clr-late { color: var(--tool-amber); font-weight: var(--weight-semibold); }
.clr-issue { color: var(--tool-red); font-weight: var(--weight-semibold); }
.clr-overtime { color: var(--tool-orange); font-weight: var(--weight-semibold); }
.clr-muted { color: var(--ui-text-subtle); }
.clr-early-out { color: var(--tool-amber); }


/* ================================================================
   STATUS BADGES — warm, muted
   ================================================================ */

.badge {
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--type-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.badge-in         { background: var(--tool-green-bg);  color: var(--tool-green); }
.badge-late       { background: var(--tool-amber-bg);  color: var(--tool-amber); }
.badge-not-arrived { background: var(--tool-gray-bg);  color: var(--tool-gray); }
.badge-over-break { background: var(--tool-red-bg);    color: var(--tool-red); }
.badge-short-day  { background: var(--tool-amber-bg);  color: var(--tool-amber); }
.badge-overtime   { background: var(--tool-orange-bg); color: var(--tool-orange); }
.badge-holiday    { background: var(--tool-purple-bg); color: var(--tool-purple); }
.badge-trip       { background: var(--tool-blue-bg);   color: var(--tool-blue); }
.badge-half-sick  { background: var(--tool-rose-bg);   color: var(--tool-rose); }
.badge-sick       { background: var(--tool-rose-bg);   color: var(--tool-rose); }
.badge-wfh        { background: var(--tool-teal-bg);   color: var(--tool-teal); }


/* ================================================================
   EXPAND ROWS
   ================================================================ */

.expand-row td {
  background: var(--ui-surface);
  padding: 0;
  border-bottom: none;
}
.expand-row.open td {
  border-bottom: 1px solid var(--ui-border);
}
.expand-row.open td:first-child {
  box-shadow: inset 3px 0 0 var(--tool-blue-bg);
}

/* Grid trick for smooth height animation */
.expand-inner {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-default);
}
.expand-row.open .expand-inner {
  grid-template-rows: 1fr;
}
.expand-content {
  overflow: hidden;
  padding: 0 24px 0 16px;
  transition: padding var(--duration-slow) var(--ease-default);
}
td:first-child > .expand-inner > .expand-content {
  padding-left: 40px;
}
.expand-row.open .expand-content {
  padding: 20px 24px 20px 16px;
}
.expand-row.open td:first-child .expand-content {
  padding-left: 40px;
}

.leave-info { display: flex; align-items: center; gap: 16px 24px; font-size: var(--type-sm); color: var(--ui-text-secondary); flex-wrap: wrap; }
.leave-info .leave-item { display: flex; align-items: center; gap: var(--space-2xs); }
.leave-info .leave-label { color: var(--ui-text-muted); }

.leave-bar {
  width: 60px;
  height: 5px;
  background: var(--ui-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.leave-bar-fill { height: 100%; border-radius: var(--radius-xs); }
.leave-bar-fill.sick { background: var(--tool-rose); }
.leave-bar-fill.paid { background: var(--tool-blue); }
.leave-bar-fill.warning { background: var(--tool-amber); }
.leave-bar-fill.critical { background: var(--tool-red); }

.leave-warn { color: var(--tool-amber); font-weight: var(--weight-semibold); }
.leave-crit { color: var(--tool-red); font-weight: var(--weight-semibold); }

/* Greyed-out absent rows */
tr.absent td { color: var(--ui-text-muted); }
tr.absent .emp-name { color: var(--ui-text-muted); }

/* Sick leave rows — subtle diagonal dashed stripes */
tr.absent-sick td {
  color: var(--ui-text-muted);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(167, 169, 172, 0.10) 6px,
    rgba(167, 169, 172, 0.10) 7px
  );
}
tr.absent-sick .emp-name { color: var(--ui-text-muted); }


/* ================================================================
   HOLIDAYS
   ================================================================ */

.holidays {
  margin-top: 24px;
  background: var(--ui-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border);
  padding: 20px;
  animation: fadeUp var(--duration-slower) var(--ease-default) calc(var(--stagger-base) * 5) both;
}

.holidays h3 {
  font-size: var(--type-2xs);
  font-weight: var(--weight-bold);
  color: var(--ui-text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.holiday-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.holiday-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--type-sm);
  color: var(--ui-text-secondary);
  background: var(--ui-surface-hover);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border);
}

.holiday-date { font-weight: var(--weight-bold); color: var(--ui-text); min-width: 50px; }


/* ================================================================
   LEGEND
   ================================================================ */

.legend {
  margin-top: 16px;
  display: flex;
  gap: var(--space-lg);
  font-size: var(--type-xs);
  color: var(--ui-text-muted);
  flex-wrap: wrap;
}
.legend strong { color: var(--ui-text-secondary); }


/* ================================================================
   TABS
   ================================================================ */

.tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--ui-border);
}

.tab {
  padding: 10px 24px;
  font-family: var(--font-tool-ui);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ui-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.tab:hover { color: var(--ui-text-secondary); }
.tab.active {
  color: var(--ui-text);
  border-bottom-color: var(--ui-accent);
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn var(--duration-slow) var(--ease-default); }


/* ================================================================
   ACHIEVEMENTS — Summary cards
   ================================================================ */

.ach-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: 24px;
}

.ach-summary-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeUp var(--duration-slow) var(--ease-default) both;
}
.ach-summary-card:nth-child(2) { animation-delay: calc(var(--stagger-base) * 1); }
.ach-summary-card:nth-child(3) { animation-delay: calc(var(--stagger-base) * 2); }

.ach-summary-number {
  font-size: var(--type-4xl);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
  line-height: 1;
}

.ach-summary-icon {
  font-size: var(--type-4xl);
  line-height: 1;
  color: var(--ui-text);
}

.ach-summary-label {
  font-size: var(--type-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ui-text-secondary);
  margin-top: 8px;
}

.ach-summary-name {
  font-size: var(--type-xl);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
  margin-top: 4px;
}

.ach-summary-sub {
  font-size: var(--type-xs);
  color: var(--ui-text-muted);
  margin-top: 4px;
}

.ach-agent-grey {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow);
}


/* ================================================================
   ACHIEVEMENTS — Employee cards grid
   ================================================================ */

.ach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.ach-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 20px;
  animation: fadeUp var(--duration-slow) var(--ease-default) both;
}
.ach-card:nth-child(1) { animation-delay: calc(var(--stagger-base) * 1); }
.ach-card:nth-child(2) { animation-delay: calc(var(--stagger-base) * 2); }
.ach-card:nth-child(3) { animation-delay: var(--duration-fast); }
.ach-card:nth-child(4) { animation-delay: calc(var(--stagger-base) * 4); }
.ach-card:nth-child(5) { animation-delay: calc(var(--stagger-base) * 5); }
.ach-card:nth-child(6) { animation-delay: calc(var(--stagger-base) * 6); }

/* Highlight card when navigated to from "See achievements" */
.ach-card.highlighted {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent), var(--ui-shadow);
}

.ach-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ach-card-name {
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
}

.ach-card-full {
  font-size: var(--type-xs);
  color: var(--ui-text-muted);
  margin-left: 8px;
}

.ach-card-points {
  font-size: var(--type-base);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
  background: var(--ui-surface-hover);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ach-card-team {
  font-size: var(--type-2xs);
  color: var(--ui-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  margin-top: 4px;
}

.ach-card-stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: 0;
  padding-top: 14px;
}

.ach-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.ach-stat-value {
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
}

.ach-stat-label {
  font-size: var(--type-3xs);
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-semibold);
  margin-top: 2px;
}

.ach-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

.ach-badge {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--type-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: default;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ach-badge-icon { display: inline-flex; align-items: center; }
.ach-badge-icon svg { width: 12px; height: 12px; stroke-width: 2.5; }

.ach-badge-gold {
  background: var(--ui-accent);
  color: var(--ui-accent-text);
}

.ach-badge-green {
  background: var(--tool-green-bg);
  color: var(--tool-green);
}

.ach-badge-amber {
  background: var(--tool-amber-bg);
  color: var(--tool-amber);
}

.ach-badge-red {
  background: var(--tool-red-bg);
  color: var(--tool-red);
}


/* ================================================================
   ACHIEVEMENTS — Points breakdown bars
   ================================================================ */

.ach-breakdown {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

.ach-breakdown-title {
  font-size: var(--type-3xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ui-text-secondary);
  margin-bottom: 10px;
}

.ach-breakdown-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.ach-br-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ach-br-label {
  font-size: var(--type-2xs);
  color: var(--ui-text-secondary);
  min-width: 100px;
  flex-shrink: 0;
}

.ach-br-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--ui-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ach-br-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--ui-accent);
  transition: width var(--duration-slow) var(--ease-default);
}

.ach-br-bar-accent {
  background: var(--ui-text-secondary);
}

.ach-br-bar-gold {
  background: var(--ui-accent);
}

.ach-br-val {
  font-size: var(--type-3xs);
  color: var(--ui-text-muted);
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}

.ach-br-pts {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
}

.ach-br-bonus .ach-br-label {
  font-weight: var(--weight-semibold);
  color: var(--ui-text);
}

.ach-br-no-bonus {
  font-weight: var(--weight-light);
  color: var(--ui-text-muted);
  font-size: var(--type-2xs);
}

.ach-breakdown-total {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-border);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}


/* ================================================================
   ACHIEVEMENTS — "See achievements" link in expand rows
   ================================================================ */

.expand-cell-empty {
  background: var(--ui-surface-hover);
}

.ach-link-cell {
  background: var(--ui-surface-hover);
  text-align: center;
  vertical-align: middle;
}

.ach-link {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  font-family: var(--font-tool-ui);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.ach-link:hover {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-text);
}
.ach-link:active {
  transform: scale(var(--active-scale));
}
.ach-link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}


/* ================================================================
   ANIMATIONS
   ================================================================ */

/* ================================================================
   GROWTH TAB — Split expand, step bars, scores
   ================================================================ */

.review-period-dropdown {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  color: var(--ui-text);
  background: var(--ui-surface);
  font-family: var(--font-tool-ui);
  cursor: pointer;
}
.review-period-dropdown:focus { outline: none; border-color: var(--ui-accent); }

/* Sortable headers */
.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast);
}
.sortable:hover { color: var(--ui-accent-text); }
.sortable.active-sort { color: var(--ui-accent-text); }

.sort-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border: 4px solid transparent;
}
.sort-arrow.sort-desc {
  border-top: 5px solid currentColor;
  border-bottom: none;
  margin-bottom: 2px;
}
.sort-arrow.sort-asc {
  border-bottom: 5px solid currentColor;
  border-top: none;
  margin-top: 2px;
}

/* Rank number */
.growth-rank {
  font-size: var(--type-base);
  font-weight: var(--weight-bold);
  color: var(--ui-text-muted);
}

/* Overall score badges */
.growth-score {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--type-base);
  font-weight: var(--weight-bold);
  min-width: 36px;
  text-align: center;
}
/* 0–100 continuous: blue > green > yellow > orange > red > violet */
.growth-score-blue   { background: var(--tool-blue-bg);   color: var(--tool-blue); }
.growth-score-green  { background: var(--tool-green-bg);  color: var(--tool-green); }
.growth-score-yellow { background: var(--tool-amber-bg);  color: var(--tool-amber); }
.growth-score-orange { background: var(--tool-orange-bg); color: var(--tool-orange); }
.growth-score-red    { background: var(--tool-red-bg);    color: var(--tool-red); }
.growth-score-violet { background: var(--tool-purple-bg); color: var(--tool-purple); }

/* Split expand layout */
.growth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  padding: 20px 8px;
}

.growth-left,
.growth-right {
  padding: 4px 0;
}

.growth-panel-title {
  font-size: var(--type-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ui-text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-border);
}

/* Divider between left and right */
.growth-right {
  border-left: 1px solid var(--ui-border);
  padding-left: 40px;
}


/* ================================================================
   5-STEP SEGMENTED BARS
   ================================================================ */

.step-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.step-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.step-label {
  font-size: var(--type-xs);
  color: var(--ui-text-secondary);
  min-width: 110px;
  flex-shrink: 0;
}

.step-bar {
  display: flex;
  align-items: flex-end;
  gap: 0;
  flex: 1;
  max-width: 280px;
  height: 40px;
  /* BG Lines — 5 horizontal bars, 7px each, 1px gap */
  background: repeating-linear-gradient(to bottom,
    var(--tool-gray-bg) 0px, var(--tool-gray-bg) 7px,
    transparent 7px, transparent 8px);
}

.step-seg {
  flex: 1;
  border: none;
  background: transparent;
}

/* Staircase heights per position */
.step-seg:nth-child(1) { height: 8px; }
.step-seg:nth-child(2) { height: 16px; }
.step-seg:nth-child(3) { height: 24px; }
.step-seg:nth-child(4) { height: 32px; }
.step-seg:nth-child(5) { height: 40px; }

/* On/Auto fills — solid Figma colors + noise */
.step-on { filter: url(#grain); }
/* Step graduation: 5 distinct colors per position */
.step-on:nth-child(1) { background: var(--tool-red); }
.step-on:nth-child(2) { background: var(--tool-orange); }
.step-on:nth-child(3) { background: var(--tool-amber); }
.step-on:nth-child(4) { background: var(--tool-green); }
.step-on:nth-child(5) { background: var(--tool-blue); }

.step-text {
  font-size: var(--type-2xs);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
  white-space: nowrap;
}

/* Auto tag pill — subtle, monochrome */
.review-dim-tag {
  font-size: var(--type-3xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ui-text-muted);
  background: var(--ui-surface-hover);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

/* Manager notes in growth expand */
.review-notes {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border);
}

.review-notes-label {
  font-size: var(--type-3xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ui-text-secondary);
  margin-bottom: 6px;
}

.review-notes-text {
  font-family: var(--font-tool-body);
  font-size: var(--type-sm);
  color: var(--ui-text-secondary);
  line-height: 1.6;
}

.review-meta {
  margin-top: 10px;
  font-size: var(--type-2xs);
  color: var(--ui-text-muted);
}


/* ================================================================
   SETTINGS TAB
   ================================================================ */

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.settings-section {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 20px;
  animation: fadeUp var(--duration-slow) var(--ease-default) both;
}
.settings-section:nth-child(1) { animation-delay: calc(var(--stagger-base) * 1); }
.settings-section:nth-child(2) { animation-delay: calc(var(--stagger-base) * 2); }
.settings-section:nth-child(3) { animation-delay: var(--duration-fast); }
.settings-section:nth-child(4) { animation-delay: calc(var(--stagger-base) * 4); }

.settings-section-title {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ui-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.settings-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--ui-bg);
}
.settings-row:last-child { border-bottom: none; }

.settings-row-header {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ui-border);
}
.settings-row-header .settings-label,
.settings-row-header .settings-value {
  font-size: var(--type-3xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ui-text-muted);
}

.settings-row-total {
  padding-top: 8px;
  border-top: 1px solid var(--ui-border);
  border-bottom: none;
}

.settings-row-divider {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--ui-border);
}

.settings-label {
  font-size: var(--type-sm);
  color: var(--ui-text-secondary);
  flex-shrink: 0;
}

.settings-value {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--type-sm);
  color: var(--ui-text);
}

.settings-input {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  color: var(--ui-text);
  background: var(--ui-surface-hover);
  font-family: var(--font-tool-ui);
  width: fit-content;
  text-align: center;
  line-height: 1.4;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
}
.settings-input::-webkit-outer-spin-button,
.settings-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.settings-input::-webkit-calendar-picker-indicator {
  display: none;
}
.settings-input[type="time"]::-webkit-date-and-time-value {
  text-align: center;
}
.settings-input:focus {
  outline: none;
  border-color: var(--ui-accent);
}

.settings-input-sm {
  width: fit-content;
}

.settings-hint {
  font-size: var(--type-2xs);
  color: var(--ui-text-muted);
  font-style: italic;
}

.settings-source {
  font-size: var(--type-3xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ui-text-muted);
  background: var(--ui-surface-hover);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

.settings-actions {
  margin-top: 24px;
  display: flex;
  gap: var(--space-sm);
}

.settings-btn {
  padding: 8px 24px;
  border-radius: var(--radius-sm);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-family: var(--font-tool-ui);
  cursor: pointer;
  transition: all var(--duration-fast);
  border: 1px solid var(--ui-border);
}

.settings-btn-save {
  background: var(--ui-accent);
  color: var(--ui-accent-text);
  border-color: var(--ui-accent);
}
.settings-btn-save:hover {
  background: var(--ui-text-secondary);
  border-color: var(--ui-text-secondary);
}

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

/* Toast */
#sl-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 10px 20px;
  border-radius: var(--radius-sm, 6px);
  background: var(--ui-text);
  color: var(--ui-bg);
  font: 500 var(--type-sm, 13px)/1.4 var(--font-body, Inter, sans-serif);
  letter-spacing: var(--ls-tight, -0.01em);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9000;
}
#sl-toast.sl-toast-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ================================================================
   ANIMATIONS
   ================================================================ */

/* ================================================================
   OVERVIEW TAB — Public landing, aggregate stats
   ================================================================ */

.overview-range-toggle {
  display: flex;
  gap: var(--space-2xs);
  margin-right: var(--space-md);
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
}

.overview-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  animation: fadeUp var(--duration-slow) var(--ease-default) both;
}

.overview-card-wide {
  grid-column: span 2;
}

.overview-card-title {
  font-family: var(--font-tool-ui);
  font-size: var(--type-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ui-text-secondary);
  margin-bottom: var(--space-md);
}

.overview-stat-number {
  font-family: var(--font-tool-ui);
  font-size: var(--type-4xl);
  font-weight: var(--weight-bold);
  color: var(--ui-text);
  line-height: var(--leading-none);
}

.overview-stat-label {
  font-family: var(--font-tool-ui);
  font-size: var(--type-xs);
  color: var(--ui-text-muted);
  margin-top: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
}

.overview-stat-sub {
  font-family: var(--font-tool-ui);
  font-size: var(--type-xs);
  color: var(--ui-text-secondary);
  margin-top: var(--space-2xs);
}

.overview-pie-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.overview-pie-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.overview-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-tool-ui);
  font-size: var(--type-xs);
  color: var(--ui-text-secondary);
}

.overview-legend-dot {
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.overview-legend-value {
  font-weight: var(--weight-bold);
  color: var(--ui-text);
  margin-left: auto;
  padding-left: var(--space-md);
}

/* Stagger the cards */
.overview-card:nth-child(1) { animation-delay: calc(var(--stagger-base) * 1); }
.overview-card:nth-child(2) { animation-delay: calc(var(--stagger-base) * 2); }
.overview-card:nth-child(3) { animation-delay: calc(var(--stagger-base) * 3); }
.overview-card:nth-child(4) { animation-delay: calc(var(--stagger-base) * 4); }
.overview-card:nth-child(5) { animation-delay: calc(var(--stagger-base) * 5); }
.overview-card:nth-child(6) { animation-delay: calc(var(--stagger-base) * 6); }
.overview-card:nth-child(7) { animation-delay: calc(var(--stagger-base) * 7); }


/* ================================================================
   ANIMATIONS
   ================================================================ */

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

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


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet — ≤ 768px */
@media (max-width: 768px) {
  .app-header { padding: 0 var(--space-md); }

  .header {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .header h1 { width: 100%; }

  .date-nav { flex-wrap: wrap; }

  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .overview-grid {
    grid-template-columns: 1fr 1fr;
  }
  .overview-card-wide {
    grid-column: span 2;
  }

  .cards-row {
    grid-template-columns: 1fr 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  table { font-size: var(--type-sm); }
}

/* Mobile — ≤ 480px */
@media (max-width: 480px) {
  .app-header { padding: 0 var(--space-sm); }
  .brand-logo { height: 18px; }
  .brand-app-name { font-size: var(--type-xs); }

  .content { padding: var(--space-sm); }

  .header h1 { font-size: var(--type-lg); }
  .header h1 span { display: block; margin-left: 0; margin-top: var(--space-2xs); }

  .date-nav { gap: var(--space-2xs); }
  .date-btn { padding: 4px 8px; font-size: var(--type-xs); }

  .tab-bar { gap: 0; }
  .tab { padding: 8px 12px; font-size: var(--type-xs); }

  .overview-grid {
    grid-template-columns: 1fr;
  }
  .overview-card-wide {
    grid-column: span 1;
  }
  .overview-card { padding: var(--space-md); }

  .cards-row {
    grid-template-columns: 1fr;
  }
  .filter-card { padding: var(--space-md); }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .settings-value { width: 100%; }

  .settings-actions {
    flex-direction: column;
  }
  .settings-btn { width: 100%; }
}