/* KSE Dashboard: brand tokens from the kingdomstructural.com redesign (charcoal / gold / cream, Public Sans + Geist Mono). */
:root {
  --ink: #1A1309; --gold: #D5A658; --gold-t: #8C6829; --cream: #FAF9F5; --paper: #FFFFFF;
  --line: #E6E0D2; --mut: #6B6457; --ok: #3F7D4E; --warn: #B7791F; --bad: #A33A2B;
  --side: #1A1309; --side-t: #E9E2D2;
  --r: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F1ECE0; --cream: #14100A; --paper: #1D1810; --line: #2E271C; --mut: #A79E8C; --gold-t: #D5A658; --side: #0E0B06;
  }
}
:root[data-theme="dark"] { --ink: #F1ECE0; --cream: #14100A; --paper: #1D1810; --line: #2E271C; --mut: #A79E8C; --gold-t: #D5A658; --side: #0E0B06; }

* { box-sizing: border-box }
html, body { margin: 0; background: var(--cream); color: var(--ink); font: 15px/1.5 "Public Sans", system-ui, sans-serif }
a { color: inherit }
.mono { font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 11px }

/* shell */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh }
.side { background: var(--side); color: var(--side-t); padding: 22px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 6px 22px; text-decoration: none }
.brand svg { width: 26px; height: 32px }
.brand b { font-weight: 700; letter-spacing: .02em; color: #fff }
.brand span { display: block; color: var(--gold) }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); text-decoration: none; color: var(--side-t); opacity: .82 }
.nav a:hover { opacity: 1; background: rgba(255,255,255,.05) }
.nav a.on { opacity: 1; background: rgba(213,166,88,.14); color: #fff; box-shadow: inset 2px 0 0 var(--gold) }
.nav .grp { margin: 16px 10px 6px; color: var(--gold); opacity: .8 }
.side .me { margin-top: auto; padding: 12px 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px }
.side .me small { display: block; color: var(--gold) }
.main { padding: 26px clamp(16px, 3vw, 40px) 60px; min-width: 0 }
.top { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px }
.top h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.01em }
.top .fresh { color: var(--mut) }
.filters { display: flex; gap: 8px; flex-wrap: wrap }
.filters select, .filters input { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; font: inherit; font-size: 13px }

/* tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 18px }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 14px; position: relative; overflow: hidden }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold) }
.kpi .v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums }
.kpi .s { color: var(--mut); font-size: 12px; margin-top: 2px }
.kpi.bad::before { background: var(--bad) } .kpi.ok::before { background: var(--ok) }

/* panels */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; min-width: 0 }
.card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
.card h2 .mono { color: var(--gold-t) }
.c12 { grid-column: span 12 } .c8 { grid-column: span 8 } .c6 { grid-column: span 6 } .c4 { grid-column: span 4 }
.chart { height: 280px; width: 100% } .chart.tall { height: 360px }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px }
.tbl th { text-align: left; font-weight: 600; color: var(--mut); border-bottom: 1px solid var(--line); padding: 8px 8px; white-space: nowrap; position: sticky; top: 0; background: var(--paper); cursor: pointer }
.tbl td { border-bottom: 1px solid var(--line); padding: 8px 8px; vertical-align: top }
.tbl tr:hover td { background: rgba(213,166,88,.07) }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.scroll { max-height: 460px; overflow: auto }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--line); white-space: nowrap }
.pill.ok { color: var(--ok); border-color: currentColor } .pill.warn { color: var(--warn); border-color: currentColor } .pill.bad { color: var(--bad); border-color: currentColor }
.note { color: var(--mut); font-size: 12.5px; margin-top: 10px }
.banner { background: rgba(213,166,88,.12); border: 1px solid rgba(213,166,88,.45); border-radius: var(--r); padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--side); color: #fff; padding: 16px }
.login .box { width: min(420px, 100%); text-align: center }
.login h1 { font-weight: 700; margin: 18px 0 6px }
.login p { color: #cfc6b3 }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--gold); color: #1A1309; border: 0; border-radius: var(--r); padding: 12px 18px; font: 600 15px "Public Sans", sans-serif; text-decoration: none; cursor: pointer }
.btn.ghost { background: transparent; color: inherit; border: 1px solid var(--line) }

@media (max-width: 1000px) { .c8, .c6, .c4 { grid-column: span 12 } }
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px }
  .brand { margin: 0 auto 0 0 } .nav { display: flex; gap: 2px; flex-wrap: wrap } .nav .grp, .side .me { display: none }
  .main { padding: 18px 16px 48px }
}