/* ==========================================================================
   RTLS Survey — design system (contract C8)
   Light default, [data-theme=dark] override. No external fonts/CDN.
   ========================================================================== */

:root {  /* light */
  --page:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink-2:#52514e;
  --muted:#898781; --grid:#e1e0d9; --border:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#1baf7a; --s3:#eda100; --s4:#008300;  /* 시리즈 고정 순서 */
  --s5:#4a3aa7; --s6:#e34948; --s7:#e87ba4; --s8:#eb6834;  /* 시리즈 5~8 */
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;

  /* derived (non-contract) */
  --shadow:0 1px 2px rgba(11,11,11,.05), 0 1px 1px rgba(11,11,11,.03);
  --sb-bg:#16171b; --sb-ink:#d6d5cf; --sb-ink-dim:#8b8a86; --sb-active:#24252b;
  --accent:var(--s1);
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --good-bg:rgba(12,163,12,.10); --warn-bg:rgba(250,178,25,.14); --critical-bg:rgba(208,59,59,.10);
}
[data-theme=dark] { --page:#0d0d0d; --surface:#1a1a19; --ink:#fff; --ink-2:#c3c2b7;
  --grid:#2c2c2a; --border:rgba(255,255,255,.10); --s1:#3987e5; --s2:#199e70; --s3:#c98500;
  --s5:#9085e9; --s6:#e66767; --s7:#d55181; --s8:#d95926;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --sb-bg:#121316; --sb-active:#26272c;
  --good-bg:rgba(12,163,12,.16); --warn-bg:rgba(250,178,25,.16); --critical-bg:rgba(208,59,59,.18);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:var(--font); font-size:14px; line-height:1.45;
  color:var(--ink); background:var(--page);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { margin:0; font-weight:600; }
a { color:var(--accent); text-decoration:none; }
button { font-family:inherit; }
::selection { background:rgba(42,120,214,.25); }

/* --------------------------------------------------------------------------
   App shell: dark sidebar + topbar + content
   -------------------------------------------------------------------------- */
.shell { display:flex; min-height:100vh; }

.sidebar {
  width:212px; flex:0 0 212px; background:var(--sb-bg); color:var(--sb-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand {
  display:flex; align-items:center; gap:10px;
  padding:18px 18px 16px; font-size:15px; font-weight:700; color:#fff;
  letter-spacing:.2px;
}
.brand-mark {
  width:26px; height:26px; border-radius:7px; flex:0 0 26px;
  background:linear-gradient(135deg,#2a78d6,#1baf7a);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff;
}
.sidebar nav { display:flex; flex-direction:column; gap:2px; padding:6px 10px; }
.sidebar nav a {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px; color:var(--sb-ink-dim);
  font-size:13.5px; font-weight:500;
}
.sidebar nav a:hover { background:rgba(255,255,255,.05); color:var(--sb-ink); }
.sidebar nav a.active { background:var(--sb-active); color:#fff; }
.sidebar nav a .nav-ico { width:16px; text-align:center; opacity:.85; font-size:13px; }
.sidebar-foot {
  margin-top:auto; padding:14px 18px; font-size:11.5px; color:var(--sb-ink-dim);
  border-top:1px solid rgba(255,255,255,.07);
}

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  display:flex; align-items:center; gap:14px;
  padding:0 22px; height:52px; flex:0 0 52px;
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.topbar h1 { font-size:15px; font-weight:600; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.content { padding:20px 22px 32px; flex:1; }

/* connection badge */
.badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:3px 11px; border-radius:999px; font-size:12px; font-weight:600;
  border:1px solid var(--border); background:var(--page); color:var(--ink-2);
  white-space:nowrap;
}
.badge .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); flex:0 0 8px; }
.badge.good .dot { background:var(--good); box-shadow:0 0 0 3px var(--good-bg); }
.badge.warn .dot { background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg); }
.badge.critical .dot { background:var(--critical); box-shadow:0 0 0 3px var(--critical-bg); }

/* --------------------------------------------------------------------------
   Cards & grid
   -------------------------------------------------------------------------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; box-shadow:var(--shadow);
}
.card-head {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.card-head h2 { font-size:13.5px; font-weight:600; }
.card-head .spacer { flex:1; }
.card-body { padding:14px 16px; }
.card-body.flush { padding:0; }
.card-note { font-size:11.5px; color:var(--muted); }

.grid { display:grid; gap:16px; }
.stat-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }

/* stat tile */
.stat { padding:14px 16px; }
.stat .stat-label { font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.stat .stat-value { font-size:24px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.stat .stat-value small { font-size:13px; font-weight:600; color:var(--ink-2); }
.stat .stat-sub { font-size:11.5px; color:var(--muted); margin-top:3px; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:8px; font-size:12.5px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  cursor:pointer; transition:background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover { background:var(--page); }
.btn:active { transform:translateY(.5px); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.06); background:var(--accent); }
.btn-ghost { border-color:transparent; background:transparent; color:var(--ink-2); }
.btn-ghost:hover { background:var(--page); color:var(--ink); }
.btn-sm { padding:3px 9px; font-size:12px; border-radius:7px; }
.btn.toggled { background:var(--accent); border-color:var(--accent); color:#fff; }

.input, select.input {
  padding:5px 9px; border-radius:8px; font-size:12.5px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  font-family:inherit; outline:none; min-width:0;
}
.input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(42,120,214,.15); }
label.field { display:inline-flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted); font-weight:600; }

.filter-bar { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.preset-group { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.preset-group .btn { border:none; border-radius:0; border-right:1px solid var(--border); }
.preset-group .btn:last-child { border-right:none; }

/* --------------------------------------------------------------------------
   Tables (dense, enterprise)
   -------------------------------------------------------------------------- */
.tbl-wrap { overflow:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
table.tbl th {
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted);
  padding:7px 12px; border-bottom:1px solid var(--border);
  background:var(--surface); position:sticky; top:0; z-index:2;
  white-space:nowrap;
}
table.tbl td {
  padding:5px 12px; border-bottom:1px solid var(--grid);
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink);
}
table.tbl td.num, table.tbl th.num { text-align:right; }
table.tbl tbody tr.row:hover { background:var(--page); }
table.tbl tbody tr.clickable { cursor:pointer; }
table.tbl .dim { color:var(--muted); }

/* expanded body row */
tr.detail td { padding:0 12px 10px; white-space:normal; background:var(--page); }
tr.detail pre {
  margin:8px 0 0; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); font-family:var(--mono); font-size:11.5px; line-height:1.5;
  overflow:auto; max-height:280px; color:var(--ink-2);
}

/* meid dot */
.meid-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:0; }
.meid-cell { font-weight:600; }

/* status badges: color always with icon + label (C8) */
.status-tag {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; padding:1px 9px 1px 7px; border-radius:999px;
}
.status-tag .ico { font-size:10px; line-height:1; }
.status-tag.good { color:var(--good); background:var(--good-bg); }
.status-tag.warn { color:#8a6106; background:var(--warn-bg); }
[data-theme=dark] .status-tag.warn { color:var(--warn); }
.status-tag.critical { color:var(--critical); background:var(--critical-bg); }

/* feed event rows (gap/burst) */
tr.evt td { font-weight:600; border-left:3px solid transparent; }
tr.evt.warn td { background:var(--warn-bg); border-left-color:var(--warn); }
tr.evt.critical td { background:var(--critical-bg); border-left-color:var(--critical); }

/* --------------------------------------------------------------------------
   Dashboard specifics
   -------------------------------------------------------------------------- */
.dash-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; align-items:start; }
.feed-scroll { max-height:56vh; overflow:auto; }
.feed-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.tile { padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.tile-top { display:flex; align-items:center; gap:8px; }
.tile-top .meid { font-size:14px; font-weight:700; }
.tile-top .status-tag { margin-left:auto; }
.tile-meta { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tile-meta b { color:var(--ink); font-weight:600; }
.tiles-col { display:flex; flex-direction:column; gap:10px; }
.tiles-empty { padding:18px 14px; font-size:12.5px; color:var(--muted); text-align:center; }

.chart-box { position:relative; width:100%; }
.chart-box canvas { width:100% !important; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--page); padding:20px; }
.login-card {
  width:100%; max-width:360px; padding:32px 30px 28px;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 28px rgba(11,11,11,.08), var(--shadow);
}
.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.login-brand .brand-mark { width:30px; height:30px; font-size:13px; }
.login-brand span { font-size:17px; font-weight:700; }
.login-sub { font-size:12.5px; color:var(--muted); margin:0 0 22px; }
.login-card label.field { display:flex; margin-bottom:12px; }
.login-card .input { padding:8px 11px; font-size:13.5px; }
.login-card .btn-primary { width:100%; justify-content:center; padding:8px 12px; font-size:13.5px; margin-top:6px; }
.login-error {
  display:none; margin:0 0 12px; padding:8px 11px; border-radius:8px;
  font-size:12.5px; font-weight:600; color:var(--critical);
  background:var(--critical-bg); border:1px solid rgba(208,59,59,.25);
}
.login-error.show { display:block; }
@keyframes shake {
  10%, 90% { transform:translateX(-1px); } 20%, 80% { transform:translateX(2px); }
  30%, 50%, 70% { transform:translateX(-4px); } 40%, 60% { transform:translateX(4px); }
}
.login-card.shake { animation:shake .45s cubic-bezier(.36,.07,.19,.97) both; }

/* --------------------------------------------------------------------------
   Status page
   -------------------------------------------------------------------------- */
.progress { height:8px; border-radius:999px; background:var(--grid); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:999px; background:var(--s1); transition:width .4s ease; }
.progress > i.warn { background:var(--warn); }
.progress > i.critical { background:var(--critical); }
pre.config-view {
  margin:0; padding:14px 16px; font-family:var(--mono); font-size:12px; line-height:1.55;
  color:var(--ink-2); overflow:auto; max-height:480px;
}

/* map */
#map, .map-box { height:420px; border-radius:0 0 8px 8px; }
.map-legend {
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted);
}
.map-legend .ramp { width:110px; height:8px; border-radius:4px;
  background:linear-gradient(90deg,#d7e6f8,#8fbae9,#2a78d6,#173f77); }

/* toast */
.toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(8px);
  padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600;
  background:var(--ink); color:var(--page); box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:200;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.empty-msg { padding:22px 16px; text-align:center; font-size:12.5px; color:var(--muted); }
.muted { color:var(--muted); }
.mt { margin-top:16px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns:1fr; }
  .tiles-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
}
@media (max-width: 800px) {
  .sidebar { width:56px; flex-basis:56px; }
  .sidebar .brand span, .sidebar nav a .nav-label, .sidebar-foot { display:none; }
  .sidebar nav a { justify-content:center; padding:10px 0; }
  .content { padding:14px 12px 28px; }
}