/* RX-OS DNA — RRSTEK sovereign cloud SPA
   Mirrors ~/Downloads/nvr/colors_and_type.css + nvr.css */

@font-face { font-family:"RX Display"; src:url(/fonts/InstrumentSerif-Regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"RX Display"; src:url(/fonts/InstrumentSerif-Italic.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap }
@font-face { font-family:"RX Sans"; src:url(/fonts/InterTight-Variable.woff2) format("woff2-variations"); font-weight:100 900; font-display:swap }
@font-face { font-family:"RX Mono"; src:url(/fonts/JetBrainsMono-Variable.woff2) format("woff2-variations"); font-weight:100 800; font-display:swap }

:root {
  --ink-0:#07090B; --ink-1:#0B0E12; --ink-2:#121620; --ink-3:#1A2030; --ink-4:#242C3E;
  --fog-1:#D4D9E4; --fog-2:#A0A8BC; --fog-3:#6B7487; --fog-4:#3A4458;
  --bone:#ECEAE2;
  --signal:#7DD87A; --signal-glow: rgba(125,216,122,0.45);
  --anomaly:#F3B64A; --guard:#E25D4A; --sense:#7AB6D8;
  --line:rgba(212,217,228,0.08); --line-strong:rgba(212,217,228,0.16);
  --inset-hair:inset 0 0 0 1px rgba(255,255,255,0.04);
  --ease:cubic-bezier(0.2,0.6,0.2,1);
  --dur-fast:80ms; --dur-med:160ms;
  --ff-display:"RX Display","Instrument Serif",Georgia,serif;
  --ff-sans:"RX Sans","Inter Tight",ui-sans-serif,-apple-system,sans-serif;
  --ff-mono:"RX Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r-1:2px; --r-2:4px; --r-3:6px; --r-4:10px;
  --focus-ring:0 0 0 2px var(--ink-0),0 0 0 4px var(--signal);
}

*, *::before, *::after { box-sizing:border-box }
html,body { margin:0; background:var(--ink-0); color:var(--bone); font-family:var(--ff-sans); -webkit-font-smoothing:antialiased; min-height:100vh }
body { display:flex; flex-direction:column }
.mono { font-family:var(--ff-mono) }
.serif { font-family:var(--ff-display); font-weight:400 }
.serif em { font-style:italic; color:var(--signal) }
.mute { color:var(--fog-3) }
.accent { color:var(--signal) }
::selection { background:var(--signal); color:var(--ink-0) }

/* scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--ink-4) transparent }
::-webkit-scrollbar { width:9px; height:9px }
::-webkit-scrollbar-thumb { background:var(--ink-4); border-radius:999px; border:2px solid transparent; background-clip:content-box }
::-webkit-scrollbar-thumb:hover { background:var(--fog-4); background-clip:content-box }

/* TOP NAV */
.topnav {
  display:flex; align-items:center; gap:24px;
  background:var(--ink-1); border-bottom:1px solid var(--line-strong);
  padding:10px 18px; box-shadow:var(--inset-hair); flex:none;
}
.brand { display:flex; align-items:center; gap:12px; padding-right:18px; border-right:1px solid var(--line) }
.logo-mark {
  font-family:var(--ff-mono); font-size:11px; font-weight:600;
  color:var(--signal); border:1px solid var(--signal); border-radius:var(--r-2);
  padding:4px 7px; letter-spacing:0.05em; line-height:1;
}
.brand-name { font-family:var(--ff-display); font-weight:400; font-size:15px; letter-spacing:-0.01em }
.brand-name em { font-style:italic; color:var(--signal) }
.brand-meta { font-size:10.5px; color:var(--fog-3); letter-spacing:0.04em; margin-top:2px }

.tabs { display:flex; gap:0; flex:1 }
.tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:14px 18px;
  color:var(--fog-1); font-size:13px; font-weight:500; letter-spacing:0.01em;
  text-decoration:none; cursor:pointer; border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tab:hover { color:var(--bone) }
.tab.active { color:var(--signal); border-bottom-color:var(--signal) }
.tab .ic { font-size:14px; opacity:0.7 }
.tab.active .ic { opacity:1 }

.topright { display:flex; align-items:center; gap:12px }
.warn-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(243,182,74,0.12); border:1px solid rgba(243,182,74,0.35);
  border-radius:999px; color:var(--anomaly);
  font-family:var(--ff-mono); font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 10px;
}
.warn-count { background:var(--anomaly); color:var(--ink-0); border-radius:999px; padding:0 7px; font-weight:600 }
.user { display:inline-flex; align-items:center; gap:6px; color:var(--fog-2); font-size:12px }
.user-icon { color:var(--fog-3); font-size:14px }
.btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:var(--r-2);
  color:var(--fog-1); font-family:var(--ff-sans);
  font-size:12.5px; font-weight:500; padding:6px 12px; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:hover { background:var(--ink-3); color:var(--bone) }
.btn.ghost { background:transparent }
.btn.primary { background:var(--signal); border-color:var(--signal); color:var(--ink-0); font-weight:600 }
.btn.primary:hover { filter:brightness(0.92); color:var(--ink-0) }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring) }

/* BREADCRUMB */
.breadcrumb {
  display:flex; gap:8px; align-items:center;
  padding:10px 18px; border-bottom:1px solid var(--line);
  background:var(--ink-1);
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
}

/* LAYOUT */
.shell { display:flex; flex:1; min-height:0 }

/* SIDEBAR */
.sidebar {
  width:240px; flex:none;
  background:var(--ink-1); border-right:1px solid var(--line);
  padding:16px 0; overflow-y:auto;
}
.org-title {
  padding:0 16px 8px;
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fog-3);
}
.org-search {
  width:calc(100% - 32px); margin:0 16px 12px;
  background:#04060A; border:1px solid var(--line-strong); border-radius:var(--r-2);
  color:var(--bone); font-family:var(--ff-sans); font-size:12px; padding:6px 10px;
  outline:none;
}
.org-search:focus { box-shadow:var(--focus-ring); border-color:var(--signal) }
.org-tree { list-style:none; margin:0; padding:0 }
.org-tree li {
  display:flex; align-items:center; gap:6px;
  padding:7px 16px; font-size:13px; color:var(--fog-1); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.org-tree li:hover { background:var(--ink-3); color:var(--bone) }
.org-tree li.selected {
  background:var(--ink-3); color:var(--signal);
  border-left:2px solid var(--signal); padding-left:14px;
}
.org-leaf { padding-left:30px !important }
.org-chev { color:var(--fog-3); font-size:10px; width:12px }
.org-icon { color:var(--fog-3); font-size:14px; width:16px }
.org-folder.open .org-icon { color:var(--signal) }

/* CONTENT */
.content { flex:1; padding:24px; overflow-y:auto; background:var(--ink-0) }
.loading { font-size:13px; color:var(--fog-3); padding:32px }

/* STAT GRID */
.stat-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px;
  margin-bottom:24px;
}
.stat-card {
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-4);
  padding:14px 16px; box-shadow:var(--inset-hair);
}
.stat-card .k {
  font-family:var(--ff-mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--fog-3); margin-bottom:4px;
}
.stat-card .v {
  font-family:var(--ff-mono); font-size:26px; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--bone);
}
.stat-card .v.on { color:var(--signal) }
.stat-card .v.off { color:var(--guard) }

/* SECTION HEADER */
.section-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin:8px 0 12px;
}
.section-head h2 {
  font-family:var(--ff-display); font-weight:400; font-size:28px;
  letter-spacing:-0.015em; margin:0; color:var(--bone);
}
.section-head h2 em { font-style:italic; color:var(--signal) }
.section-actions { display:flex; gap:8px }

/* TABLE */
table {
  width:100%; border-collapse:collapse; font-size:13px;
  background:var(--ink-1); border:1px solid var(--line);
  border-radius:var(--r-4); overflow:hidden;
}
thead th {
  text-align:left; font-family:var(--ff-mono); font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--fog-3); font-weight:500;
  padding:11px 14px; background:var(--ink-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td {
  padding:11px 14px; border-bottom:1px solid var(--line);
  color:var(--fog-1); font-family:var(--ff-mono); font-size:12px;
  font-variant-numeric:tabular-nums;
}
tbody tr:last-child td { border-bottom:0 }
tbody tr { transition:background var(--dur-fast) var(--ease) }
tbody tr:hover { background:var(--ink-2) }
tbody td.action { font-family:var(--ff-sans) }
.dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:6px; vertical-align:middle;
}
.dot.on { background:var(--signal); box-shadow:0 0 8px var(--signal-glow) }
.dot.off { background:var(--fog-4) }

.pill {
  display:inline-flex; align-items:center;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:0.1em;
  font-weight:500; color:var(--bone);
  border:1px solid var(--line-strong); border-radius:var(--r-2);
  padding:3px 8px;
}

.empty {
  padding:48px 24px; text-align:center; color:var(--fog-3);
  font-family:var(--ff-mono); font-size:13px;
}

/* DEVICE CARD GRID (full-device, not video tile) */
.dev-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:14px;
}
.devc {
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-4);
  overflow:hidden; box-shadow:var(--inset-hair);
  transition:border-color var(--dur-fast) var(--ease);
}
.devc:hover { border-color:var(--line-strong) }
.devc.offline { opacity:0.6 }
.devc-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:var(--ink-1);
  border-bottom:1px solid var(--line);
}
.devc-sn { font-size:13px; color:var(--bone); letter-spacing:0.02em; font-weight:500 }
.devc-status { display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
}
.devc-status.on  { color:var(--signal) }
.devc-status.off { color:var(--fog-3) }
.devc-body {
  display:flex; flex-direction:column; padding:8px 0; max-height:420px; overflow-y:auto;
}
.devc-row {
  display:grid; grid-template-columns:160px 1fr; align-items:start;
  padding:8px 16px; gap:12px;
  border-bottom:1px solid var(--line);
}
.devc-row:last-child { border-bottom:0 }
.devc-row.pending { color:var(--fog-3); justify-items:center }
.devc-k {
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fog-3);
}
.devc-v {
  font-size:12px; color:var(--fog-1); word-break:break-word;
  font-variant-numeric:tabular-nums;
}
.devc-foot {
  display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--line);
  background:var(--ink-1);
}

/* legacy tile grid (video) — keep class for future video tiles when we get media */
.tile-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;
}
.tile {
  position:relative; aspect-ratio:16/9;
  background:radial-gradient(120% 90% at 50% 30%,#0c1118 0%,#06080b 70%,#04060a 100%);
  border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease);
}
.tile:hover { border-color:var(--signal) }
.tile.offline { opacity:0.55 }
.tile-head {
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; font-size:11px;
  background:linear-gradient(180deg,rgba(0,0,0,0.55),transparent);
}
.tile-sn { font-family:var(--ff-mono); color:var(--bone); font-size:11px; letter-spacing:0.02em }
.tile-status { font-family:var(--ff-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase }
.tile-status.on { color:var(--signal) }
.tile-status.off { color:var(--fog-3) }
.tile-foot {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; font-family:var(--ff-mono); font-size:10px;
  color:var(--fog-2);
  background:linear-gradient(0deg,rgba(0,0,0,0.55),transparent);
}
.tile-center {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-size:32px; color:var(--fog-4);
}

/* STATUSBAR */
.statusbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 18px; height:28px;
  background:var(--ink-1); border-top:1px solid var(--line-strong);
  font-size:11px; letter-spacing:0.04em; flex:none;
}
.statusbar .left, .statusbar .right { display:flex; gap:8px; align-items:center }

/* MODAL */
.modal {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
}
.modal[hidden] { display:none }
.modal-panel {
  width:min(800px,92vw); max-height:86vh; display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:var(--r-4);
  box-shadow:0 16px 64px rgba(0,0,0,0.7);
}
.modal-head {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:var(--ink-1);
}
.modal-head .serif { font-size:18px; flex:none }
.modal-head .mono { flex:1 }
.modal-body { padding:16px 18px; display:flex; flex-direction:column; gap:12px; overflow-y:auto }
.row { display:flex; gap:8px }
.input {
  background:#04060A; border:1px solid var(--line-strong); border-radius:var(--r-2);
  color:var(--bone); font-family:var(--ff-sans); font-size:13px; padding:7px 10px;
  outline:none;
}
.input:focus { box-shadow:var(--focus-ring); border-color:var(--signal) }
textarea.input { font-family:var(--ff-mono); font-size:12px; resize:vertical }
.resp {
  background:#04060A; border:1px solid var(--line); border-radius:var(--r-3);
  overflow:hidden;
}
.resp-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-bottom:1px solid var(--line); background:var(--ink-1);
  font-size:11px;
}
.resp-body {
  padding:12px; margin:0; max-height:300px; overflow:auto;
  font-size:12px; color:var(--fog-1); white-space:pre-wrap; word-break:break-all;
}