/* ══════════════════════════════════════════════════════════════════════════════
   STAMINA Tools — Theme v2 · "Quiet Pro"
   Loaded LAST on every page: overrides the per-page inline styles.
   Design tokens + sidebar + shared components. One file to rule the look.
   ══════════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* Neutrals — slightly deeper, calmer than v1 */
  --bg:        #0e1014;
  --surface:   #14171d;
  --surface2:  #191d25;
  --border:    #23272f;
  --border2:   #2c313b;

  /* Brand */
  --accent:    #00c4a7;
  --accent2:   #00a88e;
  --accent-bg: rgba(0,196,167,.10);

  --yellow:    #f5c800;  --yellow-bg: rgba(245,200,0,.10);
  --orange:    #f97316;  --orange-bg: rgba(249,115,22,.10);
  --green:     #22c55e;
  --red:       #ef4444;
  --purple:    #a855f7;
  --blue:      #5b8def;

  /* Text — muted lifted for legibility (was the "everything grey" culprit) */
  --text:      #e8eaf0;
  --muted:     #8a91a4;
  --muted2:    #a6adc0;

  /* Sidebar category hues */
  --cat-overview: var(--accent);
  --cat-team:     var(--blue);
  --cat-comp:     var(--yellow);
  --cat-admin:    var(--orange);

  --radius:    8px;
  --sidebar-w: 232px;
}

/* ── Base type ─────────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .page-title, .greeting, .planning-title, .card-title {
  letter-spacing: -0.01em;
}
.kpi-val, .stitle-count, td.num, .stat-num { font-variant-numeric: tabular-nums; }

/* ── Sidebar v2 ────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.sidebar-logo {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.nav-links.nav-v2 {
  padding: 10px 10px 12px;
  display: flex; flex-direction: column; gap: 1px;
}

/* Section separators + labels: the categories finally read as categories */
.nav-v2 .nav-sep {
  height: 1px; background: var(--border);
  margin: 12px 2px 10px;
}
.nav-v2 .nav-section-label {
  padding: 0 10px 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.nav-v2 .nav-section-label.cat-team  { color: var(--cat-team); }
.nav-v2 .nav-section-label.cat-comp  { color: var(--cat-comp); }
.nav-v2 .nav-section-label.cat-admin { color: var(--cat-admin); }

/* Links: thin mono icons, quiet by default */
.nav-v2 .nav-link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-v2 .nav-link .nav-ic {
  width: 16px; height: 16px; flex-shrink: 0;
  opacity: .75;
}
.nav-v2 .nav-link:hover { background: var(--surface2); color: var(--text); }
.nav-v2 .nav-link:hover .nav-ic { opacity: 1; }

/* Active: tinted in the section's hue + 2px rail — the one loud thing */
.nav-v2 .nav-link.active { font-weight: 600; }
.nav-v2 .nav-link.active::before {
  content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px; background: currentColor;
}
.nav-v2 .nav-link.cat-overview.active { color: var(--cat-overview); background: rgba(0,196,167,.10); }
.nav-v2 .nav-link.cat-team.active     { color: var(--cat-team);     background: rgba(91,141,239,.10); }
.nav-v2 .nav-link.cat-comp.active     { color: var(--cat-comp);     background: rgba(245,200,0,.10); }
.nav-v2 .nav-link.cat-admin.active    { color: var(--cat-admin);    background: rgba(249,115,22,.10); }
.nav-v2 .nav-link.active .nav-ic { opacity: 1; }

/* Identity block */
.nav-identity { border-top: 1px solid var(--border); }
.id-role { color: var(--muted); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.card-header {
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.card-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted2);
}
.card-link { color: var(--accent); font-weight: 600; }

/* KPI cards: quieter, values do the talking */
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.kpi-lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

/* ── Controls ──────────────────────────────────────────────────────────────── */
button, input, select, textarea { font-family: inherit; }
input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,196,167,.15);
}
.btn-primary { background: var(--accent); color: #06231e; font-weight: 600; }
.btn-primary:hover { background: var(--accent2); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Scrollbar / motion ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}