/* ==========================================================================
   ModSys Ops Dashboard — design system
   Premium dark (Linear/Vercel-flavoured), on-brand monochrome + indigo accent.
   Dark is default; [data-theme="light"] overrides. Tokens drive everything.
   ========================================================================== */

@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/inter-var.woff2') format('woff2');
}

:root {
  /* surfaces */
  --bg:            #0a0a0b;
  --bg-grad:       radial-gradient(1200px 600px at 78% -8%, #171728 0%, rgba(23,23,40,0) 60%),
                   radial-gradient(900px 500px at 0% 0%, #12121b 0%, rgba(18,18,27,0) 55%);
  --surface:       #121215;
  --surface-2:     #17171b;
  --surface-hover: #1c1c22;
  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.13);
  --hairline:      rgba(255,255,255,.05);

  /* ink */
  --text:          #f4f4f6;
  --text-muted:    #a1a1ab;
  --text-subtle:   #6f6f7a;

  /* accent (indigo/violet) */
  --accent:        #8b93f8;
  --accent-strong: #6366f1;
  --accent-ink:    #c7cbff;
  --accent-glow:   rgba(124,131,248,.18);
  --accent-line:   #818cf8;

  /* status */
  --ok:      #34d399;   --ok-bg:      rgba(52,211,153,.13);   --ok-ring:      rgba(52,211,153,.30);
  --warn:    #fbbf24;   --warn-bg:    rgba(251,191,36,.13);   --warn-ring:    rgba(251,191,36,.30);
  --crit:    #fb7185;   --crit-bg:    rgba(251,113,133,.13);  --crit-ring:    rgba(251,113,133,.30);
  --unknown: #8a8a95;   --unknown-bg: rgba(138,138,149,.13);  --unknown-ring: rgba(138,138,149,.28);

  /* chart */
  --chart-line: var(--accent-line);
  --chart-fill-0: rgba(129,140,248,.28);
  --chart-fill-1: rgba(129,140,248,.02);
  --chart-grid: rgba(255,255,255,.05);
  --chart-axis: #6f6f7a;

  /* geometry */
  --r-sm: 9px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 6px 24px -8px rgba(0,0,0,.55), 0 1px 0 0 var(--hairline) inset;
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7);
  --ring: 0 0 0 3px var(--accent-glow);

  --font: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --maxw: 1140px;
}

:root[data-theme="light"] {
  --bg:            #fafafb;
  --bg-grad:       radial-gradient(1100px 560px at 80% -10%, #eef0ff 0%, rgba(238,240,255,0) 60%),
                   radial-gradient(800px 460px at 0% 0%, #f3f4f8 0%, rgba(243,244,248,0) 55%);
  --surface:       #ffffff;
  --surface-2:     #f7f7f9;
  --surface-hover: #f1f1f5;
  --border:        rgba(11,11,20,.09);
  --border-strong: rgba(11,11,20,.16);
  --hairline:      rgba(11,11,20,.04);

  --text:          #0c0c11;
  --text-muted:    #55555f;
  --text-subtle:   #8b8b95;

  --accent:        #5b57f0;
  --accent-strong: #4f46e5;
  --accent-ink:    #4338ca;
  --accent-glow:   rgba(99,102,241,.16);
  --accent-line:   #6366f1;

  --ok:      #059669;   --ok-bg:      rgba(5,150,105,.11);    --ok-ring:      rgba(5,150,105,.24);
  --warn:    #d97706;   --warn-bg:    rgba(217,119,6,.11);    --warn-ring:    rgba(217,119,6,.24);
  --crit:    #e11d48;   --crit-bg:    rgba(225,29,72,.10);    --crit-ring:    rgba(225,29,72,.22);
  --unknown: #6b7280;   --unknown-bg: rgba(107,114,128,.11);  --unknown-ring: rgba(107,114,128,.22);

  --chart-line: var(--accent-line);
  --chart-fill-0: rgba(99,102,241,.24);
  --chart-fill-1: rgba(99,102,241,.01);
  --chart-grid: rgba(11,11,20,.06);
  --chart-axis: #8b8b95;

  --shadow-sm: 0 1px 2px rgba(16,16,40,.06);
  --shadow:    0 8px 24px -12px rgba(16,16,40,.14), 0 1px 0 0 var(--hairline) inset;
  --shadow-lg: 0 24px 60px -22px rgba(16,16,40,.22);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: 'cv05','ss03','tnum';
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); }
h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
.mono { font-family: var(--mono); font-feature-settings: 'tnum'; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }

/* ---------- app shell ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.4rem 4rem; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .7rem 1.4rem;
  display: flex; align-items: center; gap: .5rem;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 680; letter-spacing: -.02em; color: var(--text); }
.brand .logo {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent-strong), #a855f7);
  box-shadow: 0 4px 14px -4px var(--accent-glow), 0 0 0 1px var(--border-strong) inset;
  color: #fff; font-size: .8rem;
}
.brand small { color: var(--text-subtle); font-weight: 500; letter-spacing: .02em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.nav a {
  color: var(--text-muted); font-size: .875rem; font-weight: 500;
  padding: .42rem .7rem; border-radius: var(--r-pill); transition: .15s;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.active { color: var(--accent-ink); background: var(--accent-glow); }
.nav .sep { width: 1px; height: 20px; background: var(--border); margin: 0 .35rem; }

.iconbtn {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  cursor: pointer; transition: .15s;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.iconbtn svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
.theme-toggle .sun  { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: block; }
:root[data-theme="light"] .theme-toggle .sun  { display: none; }

/* ---------- page header ---------- */
.page-head { display: flex; align-items: center; gap: .8rem; margin: 2rem 0 1.4rem; }
.page-head h1 { font-size: 1.5rem; }
.page-head .crumb { color: var(--text-subtle); font-size: .9rem; }
.page-head .spacer { margin-left: auto; }
.backlink { color: var(--text-muted); font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; }
.backlink:hover { color: var(--text); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.05rem 1.2rem; box-shadow: var(--shadow-sm);
}
.tile::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}
.tile .n { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .l { color: var(--text-subtle); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; margin-top: .3rem; font-weight: 600; }
.tile .n.ok { color: var(--ok); } .tile .n.warn { color: var(--warn); } .tile .n.crit { color: var(--crit); }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.15rem 1.3rem; margin-bottom: 1rem; box-shadow: var(--shadow);
  transition: border-color .18s, transform .18s;
}
.card.hover:hover { border-color: var(--border-strong); }
.card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.card-head h2 { font-size: .95rem; font-weight: 620; letter-spacing: -.01em; }
.card-head .eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-subtle); font-weight: 600; }
.card-head .spacer { margin-left: auto; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .55rem .9rem; }
.card-sub { color: var(--text-muted); font-size: .85rem; }
.section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-subtle); font-weight: 650; margin: 1.9rem 0 .7rem; }

.row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.row.line { padding: .55rem 0; border-top: 1px solid var(--hairline); }
.row.line:first-child { border-top: 0; }
.grow { flex: 1; } .push { margin-left: auto; }
.linkcard { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .85rem 1rem; text-decoration: none; }
.linkcard .td-name { color: var(--text); transition: color .15s; }
.linkcard:hover .td-name { color: var(--accent-ink); }
.linkcard .mono { color: var(--text-subtle); font-size: .8rem; }

/* ---------- status pill / dot ---------- */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; position: relative; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg), 0 0 10px -1px var(--ok); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg), 0 0 10px -1px var(--warn); }
.dot.crit { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg), 0 0 12px -1px var(--crit); animation: pulse 2s infinite; }
.dot.unknown { background: var(--unknown); box-shadow: 0 0 0 3px var(--unknown-bg); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--crit-bg), 0 0 12px -1px var(--crit); } 50% { box-shadow: 0 0 0 5px transparent, 0 0 4px -1px var(--crit); } }

.pill {
  display: inline-flex; align-items: center; gap: .38rem; font-size: .74rem; font-weight: 600;
  padding: .2rem .55rem .2rem .45rem; border-radius: var(--r-pill); letter-spacing: .01em; white-space: nowrap;
}
.pill .pd { width: 6px; height: 6px; border-radius: 50%; }
.pill.ok { color: var(--ok); background: var(--ok-bg); box-shadow: 0 0 0 1px var(--ok-ring) inset; }
.pill.ok .pd { background: var(--ok); }
.pill.warn { color: var(--warn); background: var(--warn-bg); box-shadow: 0 0 0 1px var(--warn-ring) inset; }
.pill.warn .pd { background: var(--warn); }
.pill.crit { color: var(--crit); background: var(--crit-bg); box-shadow: 0 0 0 1px var(--crit-ring) inset; }
.pill.crit .pd { background: var(--crit); }
.pill.unknown { color: var(--unknown); background: var(--unknown-bg); box-shadow: 0 0 0 1px var(--unknown-ring) inset; }
.pill.unknown .pd { background: var(--unknown); }

/* ---------- tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; padding: .55rem .5rem; color: var(--text-subtle); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; border-bottom: 1px solid var(--border); }
.tbl td { padding: .62rem .5rem; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl a { color: var(--accent); font-weight: 550; }
.tbl .td-name { color: var(--text); font-weight: 550; }

/* ---------- buttons / actions ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 550; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: .28rem .6rem; transition: .14s;
}
.btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.btn.accent { color: var(--accent-ink); background: var(--accent-glow); border-color: transparent; }
.btn.accent:hover { box-shadow: var(--ring); }
form.inline { display: inline; }

/* ---------- key/value + records ---------- */
.kv { font-size: .87rem; line-height: 1.75; }
.kv .k { color: var(--text-subtle); display: inline-block; min-width: 3rem; font-weight: 550; }
.match { color: var(--ok); font-weight: 550; }
.drift { color: var(--crit); font-weight: 600; }
.tag-ok { color: var(--text-muted); }
.tag-miss { color: var(--warn); }
.chip { display: inline-block; padding: .05rem .4rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; margin: 0 .15rem .15rem 0; }

/* ---------- charts ---------- */
.chart { width: 100%; position: relative; }
.chart-wrap { margin-top: .7rem; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: .8rem; }
.metric .mlabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); font-weight: 600; margin-bottom: .25rem; display: flex; align-items: baseline; gap: .4rem; }
.metric .mval { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.spark { height: 46px; }
.chart-lg { height: 180px; }
/* uPlot theming hooks */
.u-tooltip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 9px;
  padding: .4rem .55rem; font-size: .76rem; box-shadow: var(--shadow-lg); white-space: nowrap;
  transform: translate(-50%, -120%); transition: opacity .1s; opacity: 0;
}
.u-tooltip .tv { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.u-tooltip .tt { color: var(--text-subtle); font-size: .68rem; margin-top: .1rem; }
.uplot, .uplot *, .uplot *::before, .uplot *::after { box-sizing: border-box; }
.u-axis { color: var(--chart-axis); }

/* ---------- flash / empty / footer ---------- */
.flash {
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent-strong);
  border-radius: var(--r-sm); padding: .7rem 1rem; margin: 1.2rem 0; font-size: .9rem; box-shadow: var(--shadow-sm);
}
.empty { color: var(--text-subtle); font-size: .9rem; padding: .4rem 0; }
.allok { display: inline-flex; align-items: center; gap: .5rem; color: var(--ok); font-weight: 550; }
.foot { margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--hairline); color: var(--text-subtle); font-size: .78rem; display: flex; align-items: center; gap: .6rem; }
.foot .push { margin-left: auto; }

/* ---------- login ---------- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.login-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2rem 1.8rem; box-shadow: var(--shadow-lg); }
.login-card .brand { justify-content: center; margin-bottom: 1.4rem; font-size: 1.05rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .35rem; font-weight: 550; }
.input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem; transition: .15s;
}
.input:focus { outline: none; border-color: var(--accent-strong); box-shadow: var(--ring); }
.btn-primary {
  width: 100%; cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem; color: #fff;
  background: linear-gradient(140deg, var(--accent-strong), #7c3aed); border: 0; border-radius: 10px; padding: .65rem; transition: .15s;
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 26px -8px var(--accent-glow); }
.login-err { color: var(--crit); font-size: .82rem; background: var(--crit-bg); border-radius: 8px; padding: .5rem .7rem; margin-bottom: 1rem; }

@media (max-width: 640px) {
  .page-head h1 { font-size: 1.25rem; }
  .nav a { padding: .4rem .5rem; }
  .brand small { display: none; }
}