/* ============ war-room-tty · tmux session recreation ============ */

:root{
  --mono: "JetBrains Mono","SF Mono","Cascadia Code","Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;
  --fs: clamp(9px, 0.78vw + 4px, 14px);
}

/* ---- themes ---- */
body[data-theme="green"]{
  --bg:#020a03; --fg:#b6ffb0; --dim:#4f9e4a; --faint:#2c5c2a;
  --accent:#39ff5e; --bright:#eaffe6; --warn:#ffd24a; --err:#ff4d4d; --crit:#ff2020;
  --bar-bg:#0b3d12; --pane-border:#1f5c23; --pane-border-active:#54ff6e;
  --st-bg:#1d7a26; --st-fg:#04160a; --st-hl:#c8ffc8;
  --meter-user:#3dff5e; --meter-sys:#ff5c5c; --meter-buf:#54b8ff; --meter-cache:#e2b23a;
  --ok:#4dff6a; --degraded:#ffd24a; --restarting:#54b8ff;
  --glow: 0 0 6px rgba(80,255,110,.35);
  --sel-bg:#1d7a26; --sel-fg:#04160a;
}
body[data-theme="amber"]{
  --bg:#0c0701; --fg:#ffc964; --dim:#9e7a2f; --faint:#5c451c;
  --accent:#ffb327; --bright:#ffeccc; --warn:#ffe24a; --err:#ff6a4d; --crit:#ff3020;
  --bar-bg:#3d2a0b; --pane-border:#5c471f; --pane-border-active:#ffc654;
  --st-bg:#b07c1d; --st-fg:#160e04; --st-hl:#fff2cf;
  --meter-user:#ffb327; --meter-sys:#ff6a4d; --meter-buf:#7ec8ff; --meter-cache:#e2d03a;
  --ok:#ffd54d; --degraded:#ff9a2e; --restarting:#7ec8ff;
  --glow: 0 0 6px rgba(255,190,80,.35);
  --sel-bg:#b07c1d; --sel-fg:#160e04;
}
body[data-theme="dark"]{
  --bg:#0b0e14; --fg:#c8d3e0; --dim:#5d6b7d; --faint:#333c49;
  --accent:#58a6ff; --bright:#ffffff; --warn:#e3b341; --err:#f85149; --crit:#ff2b2b;
  --bar-bg:#161c26; --pane-border:#26303d; --pane-border-active:#58a6ff;
  --st-bg:#1f6feb; --st-fg:#0b0e14; --st-hl:#eaf2ff;
  --meter-user:#3fb950; --meter-sys:#f85149; --meter-buf:#58a6ff; --meter-cache:#d29922;
  --ok:#3fb950; --degraded:#e3b341; --restarting:#58a6ff;
  --glow: none;
  --sel-bg:#1f6feb; --sel-fg:#0b0e14;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:#000;
  font-family:var(--mono);
  font-size:var(--fs);
  line-height:1.32;
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}

/* ---- CRT overlay ---- */
#crt{
  position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
#crt::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.42) 100%);
}
body[data-crt="off"] #crt{display:none}

/* ---- screen grid (the tmux tiling) ---- */
#screen{
  height:100vh;width:100vw;
  display:grid;
  grid-template-areas:
    "htop  htop  logs  logs"
    "htop  htop  net   net"
    "disk  svc   svc   clock";
  grid-template-columns: var(--c1,1.05fr) var(--c2,1.05fr) var(--c3,1fr) var(--c4,1fr);
  grid-template-rows: var(--r1,1.25fr) var(--r2,1fr) var(--r3,.82fr) 1.6em;
  background:var(--bg);
  padding:2px;
  gap:0;
}
#tmux-status{grid-column:1 / -1;grid-row:4}

/* ---- panes ---- */
.pane{
  position:relative;
  border:1px solid var(--pane-border);
  overflow:hidden;
  background:var(--bg);
  display:flex;flex-direction:column;
  transition:border-color .18s ease;
  min-width:0;min-height:0;
}
.pane.active{border-color:var(--pane-border-active);z-index:5}
.pane.active .pane-title{color:var(--pane-border-active);text-shadow:var(--glow)}
.pane-title{
  position:absolute;top:0;left:8px;z-index:6;
  background:var(--bg);
  padding:0 .55em;
  color:var(--dim);
  font-size:.92em;
  white-space:nowrap;
  user-select:none;
}
.pane-title .pnum{color:var(--accent)}
.pane-body{
  flex:1;overflow:hidden;
  padding:1.05em .6em .3em;
  min-height:0;min-width:0;
  text-shadow:var(--glow);
}

/* zoomed pane (tmux resize-pane -Z) */
.pane.zoomed{
  position:fixed;inset:2px 2px calc(1.6em + 3px) 2px;z-index:500;
  border-color:var(--pane-border-active);
  box-shadow:0 0 60px rgba(0,0,0,.8);
}

/* ---- htop ---- */
#htop-body{display:flex;flex-direction:column;gap:.15em}
#htop-meters{white-space:pre}
.meter-row{display:flex;align-items:baseline}
.meter-label{color:var(--dim);width:5.2em;flex:none;text-align:right;padding-right:.5em}
.meter-track{flex:1;white-space:pre;letter-spacing:-.06em}
.meter-num{color:var(--bright);margin-left:.5em;flex:none}
#htop-summary{white-space:pre;color:var(--fg)}
#htop-summary .hl{color:var(--bright)}
#htop-table-wrap{flex:1;overflow:hidden;min-height:0}
#htop-table{width:100%;border-collapse:collapse;table-layout:fixed}
#htop-table th{
  text-align:left;color:var(--bright);
  border-bottom:1px solid var(--faint);
  font-weight:normal;padding:.05em .3em;white-space:nowrap;
  position:sticky;top:0;background:var(--bg);
}
#htop-table th.sorted{color:var(--accent)}
#htop-table th.sorted::after{content:"▼";font-size:.8em}
#htop-table td{padding:.01em .3em;white-space:nowrap;overflow:hidden;text-overflow:clip}
#htop-table tr.head-proc td{color:var(--bright)}
#htop-table tr.head-proc td:first-child{color:var(--accent)}
td.num,th.num{text-align:right}
.cpu-hot{color:var(--err)} .cpu-warm{color:var(--warn)}
.mem-cell{color:var(--meter-buf)} .cmd-cell{color:var(--fg)}
.cmd-kthread{color:var(--dim)}

/* meter segments */
.seg-user{color:var(--meter-user)} .seg-sys{color:var(--meter-sys)}
.seg-buf{color:var(--meter-buf)} .seg-cache{color:var(--meter-cache)}
.seg-idle{color:var(--faint)} .seg-swap{color:var(--warn)}

/* ---- logs ---- */
.log-body{display:flex;flex-direction:column}
#log-lines{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;white-space:pre-wrap;word-break:break-all}
.log-line{white-space:pre-wrap}
.log-ts{color:var(--dim)} .log-host{color:var(--accent)} .log-svc{color:var(--bright)}
.log-info{color:var(--fg)} .log-notice{color:var(--ok)}
.log-warn{color:var(--warn)} .log-err{color:var(--err)}
.log-crit{color:#fff;background:var(--crit);padding:0 .2em}
.cursor-block{
  display:inline-block;width:.62em;height:1.1em;flex:none;
  background:var(--fg);margin-top:.1em;
  animation:blink 1.06s steps(1) infinite;
  box-shadow:var(--glow);
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- network ---- */
#net-body{display:flex;flex-direction:column;gap:.4em;height:100%}
.net-iface{display:flex;flex-direction:column;flex:1;min-height:0}
.net-head{white-space:pre;color:var(--bright)}
.net-head .rx{color:var(--meter-user)} .net-head .tx{color:var(--meter-sys)}
.net-canvas{flex:1;width:100%;min-height:24px}
.net-stats{white-space:pre;color:var(--dim)}
.net-stats b{color:var(--fg);font-weight:normal}

/* ---- disks ---- */
#disk-body{display:flex;flex-direction:column;gap:.5em;height:100%;overflow:hidden}
#df-table{width:100%;border-collapse:collapse}
#df-table th{text-align:left;color:var(--bright);border-bottom:1px solid var(--faint);font-weight:normal;padding:0 .3em;white-space:nowrap}
#df-table td{padding:.02em .3em;white-space:nowrap}
.df-bar{letter-spacing:-.06em}
.df-ok{color:var(--ok)} .df-warn{color:var(--warn)} .df-crit{color:var(--err)}
#io-block{white-space:pre;color:var(--dim);margin-top:auto}
#io-block b{color:var(--fg);font-weight:normal}
.spark-user{color:var(--meter-user)} .spark-sys{color:var(--meter-sys)}

/* ---- services ---- */
#svc-body{display:flex;flex-direction:column;height:100%;overflow:hidden}
#svc-table{width:100%;border-collapse:collapse}
#svc-table th{text-align:left;color:var(--bright);border-bottom:1px solid var(--faint);font-weight:normal;padding:0 .3em;white-space:nowrap}
#svc-table td{padding:.04em .3em;white-space:nowrap}
.st-healthy{color:var(--ok)} .st-degraded{color:var(--degraded)}
.st-restarting{color:var(--restarting);animation:blink 0.6s steps(1) infinite}
.st-crit{color:#fff;background:var(--crit);padding:0 .2em}
.lat-hot{color:var(--err)} .lat-warm{color:var(--warn)}
#svc-hint{margin-top:auto;color:var(--dim);white-space:pre}
#svc-hint b{color:var(--accent);font-weight:normal}
.dot::before{content:"● "}

/* ---- clock / summary ---- */
#clock-body{display:flex;flex-direction:column;gap:.35em;height:100%;overflow:hidden}
#big-clock{
  font-size:2.35em;line-height:1;letter-spacing:.04em;
  color:var(--bright);text-shadow:var(--glow);white-space:pre;
}
#big-clock .colon{animation:blink 1s steps(1) infinite}
#big-date{color:var(--dim);white-space:pre}
#sys-facts{white-space:pre;color:var(--fg)}
#sys-facts .k{color:var(--dim)}
#sensor-block{white-space:pre;color:var(--dim)}
#sensor-block b{color:var(--fg);font-weight:normal}
#sensor-block .hot{color:var(--err)}
#alert-block{white-space:pre;margin-top:auto;color:var(--fg)}
#alert-block .ok{color:var(--ok)} #alert-block .warn{color:var(--warn)} #alert-block .crit{color:var(--err)}

/* ---- tmux status bar ---- */
#tmux-status{
  display:flex;justify-content:space-between;align-items:center;
  min-width:0;
  background:var(--st-bg);color:var(--st-fg);
  font-size:.95em;line-height:1.6em;
  padding:0 .4em;user-select:none;white-space:nowrap;
  overflow:hidden;
}
.st-session{background:var(--st-hl);padding:0 .5em;font-weight:bold}
#st-windows span{padding:0 .35em}
#st-windows .win-cur{background:rgba(0,0,0,.18);font-weight:bold}
.st-paused{background:#000;color:#fff;padding:0 .4em;margin-right:.4em;animation:blink .8s steps(1) infinite}
#st-flags{padding:0 .5em}
.st-host{padding:0 .5em}
.st-clock{padding:0 .3em;font-weight:bold}
.hidden{display:none !important}

/* ---- help overlay ---- */
#help-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
}
#help-box{
  border:1px solid var(--pane-border-active);
  background:var(--bg);color:var(--fg);
  padding:1em 1.6em;min-width:34em;
  box-shadow:0 0 40px rgba(0,0,0,.9);
}
.help-title{color:var(--accent);margin-bottom:.6em;text-shadow:var(--glow)}
#help-table td{padding:.08em .8em .08em 0}
#help-table td:first-child{color:var(--bright)}
.help-foot{margin-top:.7em;color:var(--dim)}

/* selection */
::selection{background:var(--sel-bg);color:var(--sel-fg)}

/* responsive: narrow screens collapse to fewer columns */
@media (max-aspect-ratio: 1/1){
  #screen{
    grid-template-areas:
      "htop htop"
      "logs logs"
      "net  net"
      "disk svc"
      "clock clock";
    grid-template-columns:1fr 1fr;
    grid-template-rows:1.2fr .9fr .9fr .8fr .7fr 1.6em;
  }
  #big-clock{font-size:1.8em}
}
