/* Hallmark · genre: modern-minimal · macrostructure: Workbench(app-shell) · theme: Cobalt-dark
 * enrichment: hand-built SVG charts · nav: N3 side-rail · footer: none(app)
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 * Bảng điều khiển vận hành + đánh giá cho StockFlow AI Engine. Instrument-panel dev-tool.
 */
:root {
  /* Cobalt-dark: giấy nền tối lạnh, một tín hiệu cobalt, neutrals tint xanh lạnh */
  --paper:       oklch(15% 0.018 260);   /* nền app */
  --paper-2:     oklch(18% 0.020 260);   /* panel */
  --paper-3:     oklch(22% 0.022 260);   /* panel nổi / hover */
  --rule:        oklch(30% 0.018 260);   /* viền hairline */
  --rule-2:      oklch(38% 0.020 260);
  --neutral:     oklch(64% 0.014 260);   /* chữ phụ */
  --muted:       oklch(52% 0.012 260);
  --ink:         oklch(96% 0.006 260);   /* chữ chính */
  --accent:      oklch(64% 0.17 255);    /* cobalt tín hiệu */
  --accent-2:    oklch(70% 0.15 255);
  --focus:       oklch(70% 0.17 255);
  --up:          oklch(72% 0.15 165);    /* xanh tăng */
  --down:        oklch(64% 0.20 25);     /* đỏ giảm */
  --warn:        oklch(76% 0.15 85);     /* vàng cảnh báo */

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px;
  --space-6:24px; --space-7:32px; --space-8:48px; --space-9:64px;
  --text-xs:11px; --text-sm:13px; --text-base:14px; --text-lg:17px;
  --text-xl:22px; --text-2xl:30px; --text-3xl:44px; --text-4xl:60px;
  --radius:10px; --radius-sm:7px; --radius-lg:16px;
  --rule-w:1px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur:.18s;
  --rail-w:224px;
}

* { box-sizing:border-box; }
html,body { overflow-x:clip; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; font-style:normal;
  letter-spacing:-0.02em; margin:0; }

/* ---------------------------------------------------------------- app shell */
.app { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh; }

/* N3 side-rail nav */
.rail {
  background:var(--paper-2); border-right:var(--rule-w) solid var(--rule);
  padding:var(--space-6) var(--space-5); position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:var(--space-7);
}
.brand { font-family:var(--font-display); font-weight:700; font-size:var(--text-lg);
  letter-spacing:-0.01em; display:flex; align-items:center; gap:var(--space-3); }
.brand b { color:var(--accent); }
.brand .tag { display:block; font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--muted); font-weight:400; letter-spacing:0; margin-top:2px; }
.rail nav { display:flex; flex-direction:column; gap:2px; }
.rail nav a {
  display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-4);
  border-radius:var(--radius-sm); color:var(--neutral); font-weight:500; font-size:var(--text-sm);
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.rail nav a svg { width:17px; height:17px; flex:none; opacity:.85; }
.rail nav a:hover { background:var(--paper-3); color:var(--ink); }
.rail nav a.active { background:color-mix(in oklch,var(--accent) 16%,transparent);
  color:var(--accent-2); }
.rail nav a.active svg { opacity:1; }
.rail .foot { margin-top:auto; font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--muted); line-height:1.7; }
.rail .foot .dot { width:7px; height:7px; border-radius:50%; background:var(--up);
  display:inline-block; margin-right:6px; box-shadow:0 0 0 3px color-mix(in oklch,var(--up) 25%,transparent); }

/* main */
.main { padding:var(--space-7) var(--space-8); max-width:1280px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-6); margin-bottom:var(--space-7); flex-wrap:wrap; }
.page-head h1 { font-size:var(--text-2xl); }
.page-head p { color:var(--neutral); margin:6px 0 0; font-size:var(--text-sm); max-width:60ch; }

/* ---------------------------------------------------------------- KPI cards */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-5); margin-bottom:var(--space-8); }
.kpi { background:var(--paper-2); border:var(--rule-w) solid var(--rule);
  border-radius:var(--radius); padding:var(--space-6); position:relative; overflow:hidden; }
.kpi .k-label { font-size:var(--text-xs); color:var(--muted); text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; }
.kpi .k-value { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:600;
  letter-spacing:-0.03em; margin-top:var(--space-4); line-height:1; }
.kpi .k-sub { font-size:var(--text-xs); color:var(--neutral); margin-top:var(--space-3);
  font-family:var(--font-mono); }
.kpi .k-accent { position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.kpi.good .k-accent { background:var(--up); }
.kpi.warn .k-accent { background:var(--warn); }

/* ---------------------------------------------------------------- sections */
.section-head { display:flex; align-items:baseline; gap:var(--space-4); margin:var(--space-8) 0 var(--space-5); }
.section-head h2 { font-size:var(--text-lg); }
.section-head .meta { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted); }
.section-head .spacer { flex:1; }

/* ---------------------------------------------------------------- table */
.panel { background:var(--paper-2); border:var(--rule-w) solid var(--rule);
  border-radius:var(--radius); overflow:hidden; }
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
th,td { padding:var(--space-4) var(--space-5); text-align:left; white-space:nowrap;
  border-bottom:var(--rule-w) solid var(--rule); }
thead th { background:var(--paper-3); color:var(--muted); font-weight:600;
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em;
  position:sticky; top:0; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background var(--dur) var(--ease-out); }
tbody tr:hover td { background:var(--paper-3); }
td.num,th.num { text-align:right; font-family:var(--font-mono); }
td .mono { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--neutral); }

/* badges + chips */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px;
  font-size:var(--text-xs); font-weight:600; font-family:var(--font-body); }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.ok { color:var(--up); background:color-mix(in oklch,var(--up) 14%,transparent); }
.badge.no { color:var(--down); background:color-mix(in oklch,var(--down) 14%,transparent); }
.badge.warn { color:var(--warn); background:color-mix(in oklch,var(--warn) 14%,transparent); }
.badge.idle { color:var(--neutral); background:var(--paper-3); }
.chip { display:inline-block; font-family:var(--font-mono); font-size:var(--text-xs);
  background:var(--paper-3); border:var(--rule-w) solid var(--rule-2); border-radius:5px;
  padding:2px 7px; margin:1px 2px 1px 0; color:var(--ink); }
.chip.up { color:var(--up); border-color:color-mix(in oklch,var(--up) 40%,var(--rule-2)); }
.chip.down { color:var(--down); border-color:color-mix(in oklch,var(--down) 40%,var(--rule-2)); }

/* ---------------------------------------------------------------- run form */
.toolbar { display:flex; gap:var(--space-4); align-items:flex-end; flex-wrap:wrap;
  background:var(--paper-2); border:var(--rule-w) solid var(--rule); border-radius:var(--radius);
  padding:var(--space-6); }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:var(--text-xs); color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; }
input,select { background:var(--paper); color:var(--ink); border:var(--rule-w) solid var(--rule-2);
  border-radius:var(--radius-sm); padding:9px 12px; font-size:var(--text-sm); font-family:inherit;
  transition:border-color var(--dur) var(--ease-out); }
input:focus,select:focus { outline:none; border-color:var(--focus);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--focus) 25%,transparent); }
.check { flex-direction:row; align-items:center; gap:var(--space-3); }
.check input { width:16px; height:16px; accent-color:var(--accent); }
.check label { text-transform:none; letter-spacing:0; font-size:var(--text-sm); color:var(--ink);
  font-weight:400; }
button.run { background:var(--accent); color:oklch(15% 0.02 260); font-weight:600;
  border:none; border-radius:var(--radius-sm); padding:10px 20px; font-size:var(--text-sm);
  font-family:var(--font-body); cursor:pointer; transition:filter var(--dur) var(--ease-out),transform var(--dur) var(--ease-out); }
button.run:hover { filter:brightness(1.08); }
button.run:active { transform:translateY(1px); }
button.run:disabled { opacity:.5; cursor:not-allowed; }
.hint { color:var(--muted); font-size:var(--text-xs); margin:var(--space-4) 0 0;
  font-family:var(--font-mono); }
#run-status { font-size:var(--text-sm); }

/* ---------------------------------------------------------------- charts */
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:var(--space-5); }
.chart { background:var(--paper-2); border:var(--rule-w) solid var(--rule);
  border-radius:var(--radius); padding:var(--space-6); }
.chart h3 { font-size:var(--text-sm); font-weight:600; color:var(--ink); margin-bottom:2px; }
.chart .c-sub { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted);
  margin-bottom:var(--space-5); }
.chart svg { width:100%; height:auto; display:block; }
.bar-row-label { fill:var(--neutral); font-size:12px; font-family:var(--font-mono); }
.bar-row-val { fill:var(--ink); font-size:12px; font-family:var(--font-mono); font-weight:500; }

/* legend */
.legend { display:flex; gap:var(--space-6); flex-wrap:wrap; margin-top:var(--space-5);
  font-size:var(--text-xs); color:var(--neutral); font-family:var(--font-mono); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }

.empty { color:var(--muted); padding:var(--space-8); text-align:center; font-family:var(--font-mono);
  font-size:var(--text-sm); }
.gauge-wrap { display:flex; align-items:center; gap:var(--space-6); }

/* resource gauges */
.gauges { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-5); }
.gauge { background:var(--paper-2); border:var(--rule-w) solid var(--rule);
  border-radius:var(--radius); padding:var(--space-6); }
.gauge .g-top { display:flex; align-items:baseline; justify-content:space-between; }
.gauge .g-label { font-size:var(--text-xs); color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; }
.gauge .g-val { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600;
  letter-spacing:-0.02em; }
.gauge .track { height:6px; background:var(--paper); border-radius:6px; overflow:hidden;
  margin-top:var(--space-5); }
.gauge .fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:6px; transition:width .5s var(--ease-out); }
.gauge .fill.hot { background:linear-gradient(90deg,var(--warn),var(--down)); }
.gauge .g-sub { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--neutral);
  margin-top:var(--space-4); }

/* ---------------------------------------------------------------- Logfire waterfall (Gantt) */
.trace-split { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:340px; }
.trace-list { border-right:var(--rule-w) solid var(--rule); max-height:520px; overflow-y:auto; }
.trace-item { display:block; width:100%; text-align:left; background:none; border:none;
  border-bottom:var(--rule-w) solid var(--rule); padding:var(--space-5); cursor:pointer;
  color:var(--ink); transition:background var(--dur) var(--ease-out); }
.trace-item:hover { background:var(--paper-3); }
.trace-item.active { background:color-mix(in oklch,var(--accent) 14%,transparent);
  box-shadow:inset 3px 0 0 var(--accent); }
.ti-top { display:flex; justify-content:space-between; align-items:baseline; }
.ti-root { font-family:var(--font-display); font-weight:600; font-size:var(--text-sm); }
.ti-dur { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--accent-2); }
.ti-sub { font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:3px; }
.trace-detail { padding:var(--space-5) var(--space-6); overflow-x:auto; }
.gantt-head { display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:var(--space-5); gap:var(--space-4); flex-wrap:wrap; }
.gantt-axis { display:flex; margin-bottom:var(--space-4); }
.gantt-axis-label { width:180px; flex:none; }
.gantt-axis-ticks { flex:1; display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:10px; color:var(--muted);
  border-top:var(--rule-w) solid var(--rule); padding-top:3px; }
.gantt-row { display:flex; align-items:center; height:26px; }
.gantt-row:hover { background:var(--paper-3); }
.gantt-label { width:180px; flex:none; font-family:var(--font-mono); font-size:12px;
  color:var(--neutral); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-right:var(--space-4); }
.gantt-tree { color:var(--muted); margin-right:4px; }
.gantt-track { flex:1; position:relative; height:100%; border-left:var(--rule-w) solid var(--rule); }
.gantt-bar { position:absolute; top:50%; transform:translateY(-50%); height:15px;
  border-radius:3px; min-width:3px; display:flex; align-items:center; }
.gantt-bar.root { background:var(--accent); }
.gantt-bar.agent { background:var(--accent-2); opacity:.85; }
.gantt-bar.kiem { background:var(--warn); opacity:.85; }
.gantt-bar.err { background:var(--down); }
.gantt-ms { font-family:var(--font-mono); font-size:10px; color:var(--ink);
  margin-left:calc(100% + 6px); white-space:nowrap; }

@media (max-width:820px){
  .app { grid-template-columns:1fr; }
  .rail { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap;
    gap:var(--space-5); }
  .rail nav { flex-direction:row; flex-wrap:wrap; }
  .rail .foot { display:none; }
  .main { padding:var(--space-6) var(--space-5); }
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;} }