/* ========================================
   Loop Room — dark theme lifted from Wingman's design system
   ======================================== */

:root {
  /* Brand colors — TCD navy/blue palette (from Wingman) */
  --color-primary: #183A59;
  --color-accent: #0080FD;
  --color-accent-hover: #339CFF;
  --color-accent-muted: rgba(0,128,253,0.12);

  /* Surfaces — dark navy tones */
  --color-bg: #0D1B2A;
  --color-surface: #132435;
  --color-surface-raised: #1A3048;

  --color-border: #254867;

  --color-text: #E8ECF1;
  --color-text-muted: #8FA4B8;
  --color-text-faint: #556575;

  /* Semantic */
  --color-success: #438D50;
  --color-warning: #F59E0B;
  --color-error: #D32F2F;
  --color-info: #0080FD;
  --color-accent-yellow: #FFC72C;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --transition-short: 150ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* --- Layout --- */
.shell { display: flex; min-height: 100vh; }
.rail {
  width: 200px; flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 16px 10px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.rail h1 { font-size: 15px; margin: 4px 8px 20px; letter-spacing: 0.5px; }
.rail h1 span { color: var(--color-accent); }
.rail a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 2px;
  color: var(--color-text-muted); text-decoration: none;
  border-radius: var(--radius-md); font-size: 13px;
  transition: background var(--transition-short);
}
.rail a:hover { background: var(--color-surface-raised); color: var(--color-text); }
.rail a.active { background: var(--color-accent-muted); color: var(--color-accent-hover); }
.rail .foot {
  margin-top: auto; font-size: 11px; color: var(--color-text-faint); padding: 0 8px;
}
.rail .dot { margin-left: auto; }

.main { flex: 1; padding: 22px 26px; max-width: 1400px; }
.view { display: none; }
.view.active { display: block; }
h2 { font-size: 17px; margin: 0 0 14px; font-weight: 600; }
h3 { font-size: 13px; margin: 18px 0 8px; color: var(--color-text-muted);
     text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

/* --- Cards / panels --- */
.panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px;
}
.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, monospace; }

/* --- Health dots & chips --- */
.dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-text-faint);
}
.dot.green { background: var(--color-success); }
.dot.amber { background: var(--color-warning); }
.dot.red { background: var(--color-error); }
.dot.unknown { background: var(--color-text-faint); }
.dot.off { background: var(--color-surface-raised); border: 1px solid var(--color-border); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: 6px 13px; margin: 0 8px 8px 0;
  font-size: 12.5px; cursor: pointer;
  transition: border-color var(--transition-short);
}
.chip:hover { border-color: var(--color-accent); }
.chip .n { color: var(--color-text-muted); }
.chip.red-chip { border-color: rgba(211,47,47,0.55); }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.badge.green { background: rgba(67,141,80,0.18); color: #6FBF7C; }
.badge.amber { background: rgba(245,158,11,0.15); color: var(--color-warning); }
.badge.red { background: rgba(211,47,47,0.18); color: #F08080; }
.badge.blue { background: var(--color-accent-muted); color: var(--color-accent-hover); }
.badge.grey { background: var(--color-surface-raised); color: var(--color-text-muted); }

/* --- Tiles --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tile {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 13px 15px; cursor: pointer;
  transition: border-color var(--transition-short);
}
.tile:hover { border-color: var(--color-accent); }
.tile .label { font-size: 11px; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.tile .value { font-size: 21px; font-weight: 600; }
.tile .sub { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }

/* --- Tables --- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--color-text-muted); font-weight: 500;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 7px 10px; border-bottom: 1px solid var(--color-border); }
td { padding: 8px 10px; border-bottom: 1px solid rgba(37,72,103,0.4); vertical-align: top; }
tr.row { cursor: pointer; }
tr.row:hover td { background: var(--color-surface-raised); }

/* --- Decision cards --- */
.decision {
  border-left: 3px solid var(--color-accent-yellow);
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 10px;
}
.decision .title { font-weight: 600; font-size: 13.5px; }
.decision .body { font-size: 12.5px; color: var(--color-text-muted); margin: 5px 0 8px; }
.decision button {
  background: var(--color-surface-raised); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 4px 12px; margin-right: 6px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.decision button:hover { border-color: var(--color-accent); }
.empty-good { color: #6FBF7C; font-size: 13px; padding: 10px 0; }

/* --- Sparklines --- */
.sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.spark { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 12px 14px; }
.spark .metric { font-size: 12px; color: var(--color-text-muted); margin-bottom: 2px; }
.spark .now { font-size: 18px; font-weight: 600; }
.spark svg { display: block; margin-top: 6px; }

/* --- Glass box drawer --- */
.glassbox {
  position: fixed; bottom: 0; left: 200px; right: 0;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  max-height: 40vh; overflow-y: auto; padding: 8px 20px;
  transform: translateY(calc(100% - 34px)); transition: transform 200ms ease-out;
  z-index: 50;
}
.glassbox.open { transform: translateY(0); }
.glassbox .gb-head { cursor: pointer; font-size: 12px; color: var(--color-text-muted);
  padding: 4px 0; display: flex; gap: 10px; align-items: center; }
.glassbox .ev { font-size: 12px; font-family: ui-monospace, monospace;
  padding: 3px 0; color: var(--color-text-muted); border-bottom: 1px solid rgba(37,72,103,0.3); }
.glassbox .ev .k { color: var(--color-accent-hover); }

.digest {
  background: linear-gradient(180deg, rgba(0,128,253,0.07), transparent);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 13px 16px; font-size: 13.5px; line-height: 1.55; margin-bottom: 16px;
}
pre.detail { white-space: pre-wrap; font-size: 12px; color: var(--color-text-muted);
  background: var(--color-bg); border-radius: var(--radius-md); padding: 10px; }

/* --- Flags view --- */
.filters { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.filters select {
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 5px 9px; font-size: 12px; font-family: inherit;
}
.flag-group summary { cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 8px 0; color: var(--color-text); }
.flag-group summary .badge { margin-left: 8px; }
.trend-up { color: #F08080; }
.trend-down { color: #6FBF7C; }
.btn-small {
  background: var(--color-surface-raised); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 3px 11px; font-size: 11.5px; cursor: pointer; font-family: inherit;
  margin-left: 10px; vertical-align: middle;
}
.btn-small:hover { border-color: var(--color-accent); }

/* --- Map view --- */
.map-panel { padding: 10px 6px; overflow-x: auto; }
.map-panel svg { display: block; width: 100%; min-width: 900px; height: auto; }
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-col-title {
  fill: var(--color-text-faint); font-size: 10px; font-weight: 600;
  letter-spacing: 2px;
}
.map-edge {
  stroke: rgba(37,72,103,0.9); stroke-width: 1.3; fill: none;
  transition: stroke var(--transition-short);
}
.map-edge.hi { stroke: var(--color-accent); stroke-width: 1.8; }
.map-node { cursor: pointer; }
.map-node text {
  fill: var(--color-text-muted); font-size: 11.5px;
  font-family: 'Poppins', system-ui, sans-serif;
}
.map-node:hover text { fill: var(--color-text); }
.map-node .node-dot {
  stroke: var(--color-bg); stroke-width: 2;
  transition: filter var(--transition-short);
}
.map-node:hover .node-dot { filter: brightness(1.35); }
.map-node .node-halo {
  fill: none; stroke: var(--color-accent-hover); stroke-width: 2; opacity: 0;
}
.map-node .node-halo.pulse { animation: map-pulse 1.6s ease-out; }
@keyframes map-pulse {
  0% { opacity: 0.9; stroke-width: 2; }
  70% { opacity: 0.25; stroke-width: 7; }
  100% { opacity: 0; stroke-width: 9; }
}
.map-node .red-ring {
  fill: none; stroke: var(--color-error); stroke-width: 2;
  animation: red-ring-pulse 1.6s ease-in-out infinite;
}
@keyframes red-ring-pulse {
  0%, 100% { stroke-opacity: 0.9; stroke-width: 2; }
  50% { stroke-opacity: 0.25; stroke-width: 5; }
}
.map-tooltip {
  position: fixed; z-index: 60; max-width: 270px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 9px 12px;
  font-size: 12px; line-height: 1.5; color: var(--color-text-muted);
  pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.map-tooltip b { color: var(--color-text); }

/* --- Kill switch --- */
.kill-switch { cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 5px 0; margin-bottom: 6px; font-size: 11px; }
.kill-switch:hover { color: var(--color-text); }
.kill-switch.paused { color: #F08080; font-weight: 600; }