/* ============================================================
   NIGHTWATCH — solar.html tactical skin (loads LAST)
   Matches the home-page command-console look.
   Depends on npn-tactical.css for the --tac-* token block.
   ============================================================ */

/* override solar-dashboard.css :root so every existing rule inherits tac palette */
:root {
  --bg:     var(--tac-bg);
  --panel:  var(--tac-surface-1s);
  --panel2: var(--tac-surface-2);
  --line:   var(--tac-line);
  --text:   var(--tac-text);
  --muted:  var(--tac-muted);
  --hot:    var(--tac-amber);
  --ok:     var(--tac-green);
  --warn:   var(--tac-amber);
  --bad:    var(--tac-red);
  --blue:   var(--tac-blue);
  --shadow: var(--tac-shadow-panel);
}

body {
  font-family: var(--tac-font-mono) !important;
  color: var(--tac-text);
  background: var(--tac-bg) !important;
}

h1, h2, h3 {
  font-family: var(--tac-font-display);
  text-transform: uppercase;
  letter-spacing: .08em !important;
  color: var(--tac-text-bright);
}
h1 { letter-spacing: .12em !important; }

.eyebrow {
  color: var(--tac-muted) !important;
  font-family: var(--tac-font-display);
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}

/* numbers / readouts stay mono tabular */
.card .value,
.site-card .value,
.npn-risk-score b,
.forecast-text,
pre {
  font-family: var(--tac-font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ---- classification bar ---- */
.tac-class-bar {
  height: 18px;
  display: grid;
  place-items: center;
  background: var(--tac-class-bg);
  color: var(--tac-class-text);
  font: 600 10px var(--tac-font-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* ---- hero → command strip ---- */
.solar-hero {
  background: var(--tac-surface-1s) !important;
  border-bottom: 1px solid var(--tac-line-strong) !important;
  backdrop-filter: none !important;
  padding: 18px clamp(16px, 3vw, 44px) !important;
  top: 18px; /* sit below sticky class bar */
}
.solar-hero h1 { font-size: clamp(26px, 4vw, 40px) !important; }

.tac-solar-clock {
  display: grid;
  gap: 1px;
  text-align: right;
  margin-left: auto;
}
.tac-solar-clock .cap {
  font: 500 9px var(--tac-font-display);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--tac-muted);
}
.tac-solar-clock .val {
  font: 600 15px var(--tac-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--tac-green);
}

/* ---- buttons / links ---- */
.hero-actions a,
.hero-actions button,
.solar-map-actions button,
.solar-map-actions a,
.npn-ops-actions button,
#npnAlertDeliveryRefresh,
#refreshBtn {
  height: 34px !important;
  border: 1px solid var(--tac-line-strong) !important;
  border-radius: 1px !important;
  background: var(--tac-surface-2) !important;
  color: var(--tac-text) !important;
  font: 600 12px var(--tac-font-display) !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  box-shadow: none !important;
}
.hero-actions a:hover,
.hero-actions button:hover,
.solar-map-actions button:hover,
.solar-map-actions a:hover,
.npn-ops-actions button:hover,
#npnAlertDeliveryRefresh:hover,
#refreshBtn:hover {
  background: var(--tac-surface-3) !important;
  border-color: var(--tac-green-dim) !important;
  color: var(--tac-text-bright) !important;
}

/* ---- panels / cards → flat with corner brackets ---- */
.card, .panel, .site-card, .source-card,
.solar-map-shell, .npn-ops-shell, .npn-alert-delivery-shell,
.npn-risk-card, .npn-graph-card {
  background: var(--tac-surface-1s) !important;
  border: 1px solid var(--tac-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
}

/* corner brackets on the big containers + cards */
.card::before, .card::after,
.panel::before, .panel::after,
.site-card::before, .site-card::after,
.npn-risk-card::before, .npn-risk-card::after,
.solar-map-shell::before, .solar-map-shell::after,
.npn-ops-shell::before, .npn-ops-shell::after,
.npn-alert-delivery-shell::before, .npn-alert-delivery-shell::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  pointer-events: none;
}
.card::before, .panel::before, .site-card::before, .npn-risk-card::before,
.solar-map-shell::before, .npn-ops-shell::before, .npn-alert-delivery-shell::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--tac-green-dim);
  border-left: 1px solid var(--tac-green-dim);
}
.card::after, .panel::after, .site-card::after, .npn-risk-card::after,
.solar-map-shell::after, .npn-ops-shell::after, .npn-alert-delivery-shell::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--tac-green-dim);
  border-right: 1px solid var(--tac-green-dim);
}

/* inputs, chips, pre */
.forecast-text, pre,
.solar-map-chip {
  background: var(--tac-inset) !important;
  border: 1px solid var(--tac-line) !important;
  border-radius: 0 !important;
  color: var(--tac-text) !important;
}

/* status color helpers keep meaning, new hues */
.hot { color: var(--tac-amber) !important; }
.ok  { color: var(--tac-green) !important; }
.warn{ color: var(--tac-amber) !important; }
.bad { color: var(--tac-red) !important; }

/* footer */
footer {
  border-top: 1px solid var(--tac-line-strong) !important;
  background: var(--tac-surface-1s) !important;
  color: var(--tac-muted) !important;
  font: 400 10px var(--tac-font-mono) !important;
}

/* scrollbars (mirror home) */
* { scrollbar-width: thin; scrollbar-color: var(--tac-line-strong) var(--tac-bg-deep); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--tac-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--tac-line-strong); border: 1px solid var(--tac-bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--tac-green-dim); }

:focus-visible { outline: 2px solid var(--tac-green); outline-offset: 2px; }

@media (max-width: 900px) {
  .tac-class-bar { height: 14px; font-size: 8px; letter-spacing: .14em; }
  .solar-hero { top: 14px; }
  .tac-solar-clock .val { font-size: 13px; }
}