/* ═══════════════════════════════════════════════════════════════
   Wali Dashboard — oladoc Fit Branding Guidelines v1.0 (2026)
   Light theme only. Solid colours, no gradients, no shadows on charts.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Core brand */
  --navy:        #004181;
  --amber:       #DC8F1B;

  /* Text & supporting */
  --ink:         #1A1A1A;
  --muted:       #787677;
  --soft-blue:   #6C90B4;

  /* Surfaces & tints */
  --white:       #FFFFFF;
  --canvas:      #F0F0F0;
  --amber-tint:  #F9EDD7;
  --blue-tint:   #DFEBF7;
  --border:      #E2E5EA;

  /* Status */
  --good:        #2E7D32;
  --warn:        #DC8F1B;
  --bad:         #C62828;

  --radius: 6px;
  --gap: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", Calibri, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────── */
.topbar {
  background: var(--navy);
  color: var(--white);
  min-height: 50px;
}
.topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar__brand { display: flex; align-items: center; gap: 12px; }
.topbar__mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: var(--radius);
  font-weight: 700; font-size: 16px; letter-spacing: .5px;
}
.topbar__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.topbar__sub   { margin: 1px 0 0; font-size: 11px; color: rgba(255,255,255,.72); font-weight: 400; }
.topbar__meta  { text-align: right; }
.topbar__label {
  display: block; font-size: 9px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
.topbar__stamp { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Layout ─────────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 16px; }

/* ── Banner ─────────────────────────────────────────────────── */
.banner {
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  background: var(--amber-tint);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: var(--gap);
  font-size: 13px;
}
.banner--error { border-left-color: var(--bad); background: #FBEAEA; }
.banner code {
  display: inline-block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
.banner b { display: block; margin-bottom: 4px; }

/* ── Slicer row ─────────────────────────────────────────────── */
.slicer {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: var(--gap);
}
.slicer__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* `display: flex` beats the browser's default [hidden] rule — restore it. */
.slicer__row[hidden] { display: none; }
.slicer__row--inputs {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.slicer__label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.slicer__group { display: flex; gap: 6px; flex-wrap: wrap; }
.slicer__hint { font-size: 11px; color: var(--muted); margin-left: auto; }

/* date / month pickers */
.field { display: flex; align-items: center; gap: 6px; }
.field > span {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.field input {
  font: inherit; font-size: 12px;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  color-scheme: light;
}
.field select {
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 28px 5px 10px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23787677' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 180px;
}
.field select:hover { border-color: var(--soft-blue); }
.field--select > span { color: var(--navy); }
.field input:focus-visible,
.field select:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.field input:disabled { background: var(--canvas); color: var(--muted); }
.field__note { font-size: 11px; color: var(--muted); }
.field__note.is-bad { color: var(--bad); font-weight: 600; }

.chip {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { background: var(--blue-tint); border-color: var(--soft-blue); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.chip--ghost { border-radius: 4px; padding: 4px 10px; font-size: 11.5px; }
.chip--ghost:disabled { opacity: .45; cursor: default; background: var(--white); border-color: var(--border); }

/* ── KPI cards ──────────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 8 KPIs => a clean 4x2, no orphan row */
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.kpi {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 12px 14px 10px;
  min-width: 0;
}
.kpi__label {
  margin: 0; font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.kpi__value {
  margin: 6px 0 2px;
  font-size: 28px; font-weight: 700; line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi__foot { margin: 0; font-size: 11px; color: var(--muted); }
/* KPIs from the other data sources — marked so nobody reads them as chat data.
   amber = MySQL (mcp_db), soft blue = BigQuery (GA4). */
.kpi--alt { border-top-color: var(--amber); }
.kpi--ga4 { border-top-color: var(--soft-blue); }
.src-tag { color: var(--muted); }
.src-tag code {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
}
.kpi__foot .up   { color: var(--good); font-weight: 700; }
.kpi__foot .down { color: var(--bad);  font-weight: 700; }
.kpi__foot .flat { color: var(--muted); font-weight: 600; }

/* ── Chart cards ────────────────────────────────────────────── */
/* LAYOUT RULE: one chart per row. Never put two charts side by side —
   data labels need the horizontal room, and half-width bars crowd them. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  min-width: 0;
}
.card--wide { grid-column: 1 / -1; }
.card__title { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.card__sub   { margin: 2px 0 12px; font-size: 11px; color: var(--muted); }
.card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.card__actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Full-width rows: a little more height, and top padding so the data
   labels above the tallest bar/point are not clipped. */
.card__canvas { position: relative; height: 420px; padding-top: 6px; }
.card--wide .card__canvas { height: 440px; }

/* ── Table ──────────────────────────────────────────────────── */
.table-scroll { max-height: 380px; overflow: auto; border: 1px solid var(--border); border-radius: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table thead th {
  position: sticky; top: 0;
  background: var(--navy); color: var(--white);
  font-weight: 700; font-size: 11px;
  text-align: left; padding: 8px 10px; white-space: nowrap;
}
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tbody tr:nth-child(even) { background: var(--blue-tint); }
.table tbody tr:nth-child(even) td { border-bottom-color: #D3E2F2; }
.table td.empty { text-align: center; color: var(--muted); padding: 24px; }

/* ── Footer ─────────────────────────────────────────────────── */
.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 24px;
  font-size: 11px; color: var(--muted);
}
.foot code { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi__value { font-size: 24px; }
  .slicer__hint { margin-left: 0; width: 100%; }
  .card__canvas, .card--wide .card__canvas { height: 320px; }
}

@media print {
  body { background: var(--white); }
  .slicer, .chip { display: none; }
  .card, .kpi { break-inside: avoid; }
}