/* dashboard.css — Rovvi admin brand layer.
 *
 * Loaded AFTER tokens.css so it (a) re-skins the shared design tokens to the Rovvi
 * identity — teal-led, warm paper, Fraunces + Figtree — and (b) gives the dashboard
 * its component classes (.bk-card/.bk-table/…) real, considered definitions. The
 * dashboard builds most of its DOM via innerHTML, so these MUST be global (a page
 * <style> is scoped and would never reach injected rows). Because the page's inline
 * styles reference tokens (var(--accent), var(--text-muted)…), re-skinning the tokens
 * here re-themes the whole surface without touching every element. */

/* ── Brand fonts (self-hosted) ───────────────────────────────────────────── */
@font-face { font-family: 'Figtree';  src: url('/fonts/figtree-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree';  src: url('/fonts/figtree-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree';  src: url('/fonts/figtree-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree';  src: url('/fonts/figtree-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ── Palette — LIGHT (warm paper + Rovvi teal, gold as the quiet second) ───── */
:root {
  --bg-page:      #F5F1E8;
  --bg-surface:   #FFFDF9;
  --bg-elevated:  #FFFFFF;
  --bg-inset:     #EFE9DC;

  --text-primary:   #211D16;
  --text-secondary: #5A5347;
  --text-muted:     #8B8474;
  --text-inverse:   #FFFFFF;

  --border:        #E7E0D0;
  --border-strong: #D5CCB8;

  --accent:       #0E7C74;  /* Rovvi teal */
  --accent-hover: #0A605A;
  --accent-text:  #FFFFFF;
  --accent-soft:  #E2EFEC;  /* teal wash for chips/hover */

  --gold:    #B8862B;
  --good:    #1F8A54;
  --warn:    #B87914;
  --crit:    #BB4128;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-md: 0.5rem;
  --radius-lg: 0.85rem;

  --shadow-sm: 0 1px 2px rgb(60 50 30 / 0.06);
  --shadow-md: 0 2px 4px rgb(60 50 30 / 0.05), 0 8px 20px -8px rgb(60 50 30 / 0.12);
  --shadow-lg: 0 12px 32px -10px rgb(40 34 20 / 0.22);

  --surface-2: var(--bg-inset);
}

/* ── Palette — DARK (warm charcoal). This project toggles a `.dark` class on
 *  <html> (see tokens.css `:root.dark` + ThemeToggle); match that exactly. ───── */
:root.dark {
  --bg-page: #17140E; --bg-surface: #211D15; --bg-elevated: #2A251B; --bg-inset: #100E09;
  --text-primary: #F4EFE3; --text-secondary: #CAC2B1; --text-muted: #948C7B; --text-inverse: #17140E;
  --border: #332E23; --border-strong: #463F31;
  --accent: #2FB3A8; --accent-hover: #4FC8BD; --accent-text: #10221F; --accent-soft: #1C302D;
  --gold: #E0B04A; --good: #43B87B; --warn: #D9982F; --crit: #DE6B52;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 10px 24px -10px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 14px 40px -12px rgb(0 0 0 / 0.7);
  --surface-2: #2A251B;
}

/* ── Base typography ───────────────────────────────────────────────────────── */
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--bg-page); color: var(--text-primary); }
h1, h2, h3, .bk-h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; color: var(--text-primary); }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.bk-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.bk-card + .bk-card { margin-top: var(--space-4); }

/* ── Tables (dense, legible, numeric) ──────────────────────────────────────── */
.bk-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bk-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-surface);
  text-align: left; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.55rem 0.7rem; border-bottom: 1.5px solid var(--border-strong); white-space: nowrap;
}
.bk-table tbody td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; color: var(--text-primary); vertical-align: middle; }
.bk-table tbody tr:last-child td { border-bottom: 0; }
.bk-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.bk-table code { font-family: var(--font-mono); font-size: 0.82em; color: var(--text-secondary); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.bk-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.5rem 0.95rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--text-primary);
  transition: border-color .12s ease, background .12s ease, transform .05s ease;
}
.bk-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.bk-btn:active { transform: translateY(1px); }
.bk-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Chips / hints ─────────────────────────────────────────────────────────── */
.bk-chip { display: inline-flex; align-items: center; gap: .3rem; padding: 0.28rem 0.66rem; border-radius: 999px; background: var(--bg-inset); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.bk-chip strong { color: var(--text-primary); }
.bk-hint { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; margin: 0.4rem 0 0; }

/* ── Tab bar ───────────────────────────────────────────────────────────────── */
#tabs { gap: 0.15rem; }
.tabbtn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.6rem 1rem; border: 0; background: none;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0; transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.tabbtn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tabbtn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── KPI stat cards (Overview) ─────────────────────────────────────────────── */
.kpi { border-radius: var(--radius-lg); }
.kpi-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.kpi-num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; margin-top: 0.15rem; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.kpi-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }

/* Inputs pick up the warm surface + teal focus. */
input, select, textarea { font: inherit; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
