/* ============================================================
   SuperStatus tactical-HUD design system — issue #95 mockup CSS
   This file is the source for the proposed wwwroot/hud-theme.css.
   ============================================================ */

:root {
  /* Canvas */
  --bg-0: #0d0e10;
  --bg-1: #131418;
  --bg-2: #1a1c21;

  /* Text */
  --text-1: #e8e9ec;
  --text-2: #a7abb3;
  --text-3: #6f747d;

  /* Glass surfaces */
  --glass:        rgba(255, 255, 255, 0.022);
  --glass-strong: rgba(255, 255, 255, 0.035);

  /* Hairlines */
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Brand accent — PROPOSAL: desaturated tactical green.
     Distinct from a typical brand red; "operational/status" semantic. */
  --accent:       #3fbf6f;
  --accent-soft:  rgba(63, 191, 111, 0.55);
  --accent-glow:  rgba(63, 191, 111, 0.20);

  /* Semantic status — INDEPENDENT of brand accent */
  --status-up:        #3fbf6f;
  --status-degraded:  #f59e0b;
  --status-down:      #c02020;
  --status-unknown:   #6f747d;

  /* Type */
  --font-mono: "JetBrains Mono", "Fira Mono", ui-monospace, SFMono-Regular,
               Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-display: var(--font-mono);

  /* Spacing scale (4px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  min-height: 100vh;
  /* atmospheric grain on the canvas */
  background-image:
    radial-gradient(ellipse 1200px 700px at 20% -10%, rgba(63,191,111,0.06), transparent 60%),
    radial-gradient(ellipse 900px 600px at 110% 110%, rgba(192,32,32,0.04), transparent 60%);
  background-attachment: fixed;
}

::selection { background: var(--accent-soft); color: var(--bg-0); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- layout shell ---------- */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
  grid-template-areas:
    "topbar topbar"
    "nav main";
}

.topbar {
  grid-area: topbar;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 var(--s-5);
  gap: var(--s-5);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.topbar .brand .logo {
  width: 22px; height: 22px; border: 1.5px solid var(--accent);
  position: relative;
  display: inline-block;
}
.topbar .brand .logo::before, .topbar .brand .logo::after {
  content: ""; position: absolute; background: var(--accent);
  width: 6px; height: 1.5px;
}
.topbar .brand .logo::before { top: 50%; left: -3px; transform: translateY(-50%); }
.topbar .brand .logo::after  { top: 50%; right: -3px; transform: translateY(-50%); }
.topbar .brand .name { color: var(--text-1); }
.topbar .brand .name em { font-style: normal; color: var(--accent); }

.topbar .clock {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 11px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: 0.14em;
}
.topbar .clock .led { width: 8px; height: 8px; border-radius: 50%; background: var(--status-up); box-shadow: 0 0 8px var(--status-up); }

.nav {
  grid-area: nav;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  padding: var(--s-5) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  position: sticky; top: 56px;
  align-self: start;
  height: calc(100vh - 56px);
}
.nav .nav-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-3); padding: var(--s-3) var(--s-3) var(--s-1);
}
.nav a {
  color: var(--text-2); padding: var(--s-2) var(--s-3);
  display: flex; align-items: center; gap: var(--s-3);
  border-left: 2px solid transparent;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
  text-decoration: none;
}
.nav a:hover { color: var(--text-1); background: var(--glass); }
.nav a.active { color: var(--accent); border-left-color: var(--accent); background: var(--glass-strong); }

.main {
  grid-area: main;
  padding: var(--s-6) var(--s-7);
  max-width: 1400px; width: 100%;
}

/* ---------- panel primitive ---------- */
.frame { position: relative; }

.panel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  padding: var(--s-5);
  backdrop-filter: blur(8px);
}
.panel + .panel { margin-top: var(--s-4); }

/* Corner brackets — span the 4 corners, accent color */
.cnr {
  position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.cnr.tl { top: -1px; left: -1px; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.cnr.tr { top: -1px; right: -1px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }
.cnr.bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.cnr.br { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }

/* Critical variant — for incident detail panels only */
.panel.critical .cnr.tl,
.panel.critical .cnr.tr,
.panel.critical .cnr.bl,
.panel.critical .cnr.br { border-color: var(--status-down); }

/* White variant — reserved for the primary frame on the page */
.panel.primary .cnr.tl,
.panel.primary .cnr.tr,
.panel.primary .cnr.bl,
.panel.primary .cnr.br { border-color: var(--text-1); }

/* ---------- tag chip ---------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-2);
  border: 1px solid var(--line);
  padding: 2px 8px;
  background: var(--bg-2);
}
.tag .led { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.tag .led.up { background: var(--status-up); box-shadow: 0 0 6px var(--status-up); animation: pulse 2s ease-in-out infinite; }
.tag .led.degraded { background: var(--status-degraded); box-shadow: 0 0 6px var(--status-degraded); }
.tag .led.down { background: var(--status-down); box-shadow: 0 0 8px var(--status-down); animation: pulse 1s ease-in-out infinite; }
.tag .led.unknown { background: var(--status-unknown); }
.tag .sep { color: var(--text-3); }
.tag.accent { color: var(--accent); border-color: var(--accent-soft); }
.tag.critical { color: var(--status-down); border-color: var(--status-down); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.92); }
}

/* ---------- callsign / page header ---------- */
.callsign {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.callsign .label {
  font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.18em;
}
.callsign .sep { color: var(--text-3); }
.callsign .value {
  font-size: 20px; color: var(--text-1); font-weight: 600;
  letter-spacing: 0.04em;
}
.callsign .meta {
  margin-left: auto;
  font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.14em;
}

/* ---------- telemetry strip ---------- */
.telemetry-strip {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  margin: var(--s-4) 0;
}
.telemetry-strip .chip {
  display: flex; flex-direction: column;
  border: 1px dashed var(--line);
  padding: var(--s-2) var(--s-4);
  min-width: 120px;
}
.telemetry-strip .chip .k {
  font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.16em;
}
.telemetry-strip .chip .v {
  font-size: 18px; color: var(--text-1); font-weight: 600; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.telemetry-strip .chip .v.accent { color: var(--accent); }
.telemetry-strip .chip .v.degraded { color: var(--status-degraded); }
.telemetry-strip .chip .v.critical { color: var(--status-down); }

/* ---------- KV rows ---------- */
.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
}
.kv > .k {
  color: var(--text-2); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.10em;
  border-bottom: 1px dotted var(--line);
  padding-bottom: var(--s-2);
  display: flex; align-items: center; gap: var(--s-3);
}
.kv > .v {
  color: var(--text-1); font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dotted var(--line);
  padding-bottom: var(--s-2);
  text-align: right;
}
.kv > .v.up       { color: var(--status-up); }
.kv > .v.degraded { color: var(--status-degraded); }
.kv > .v.down     { color: var(--status-down); }
.kv > .k .led { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.kv > .k .led.up       { background: var(--status-up); box-shadow: 0 0 8px var(--status-up); animation: pulse 2.5s ease-in-out infinite; }
.kv > .k .led.degraded { background: var(--status-degraded); box-shadow: 0 0 8px var(--status-degraded); }
.kv > .k .led.down     { background: var(--status-down); box-shadow: 0 0 10px var(--status-down); animation: pulse 1s ease-in-out infinite; }

/* ---------- 30-day uptime strip (one bar per day) ---------- */
.uptime-strip {
  display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px;
  margin-top: var(--s-2);
}
.uptime-strip .day {
  height: 22px;
  background: var(--status-up);
  opacity: 0.85;
}
.uptime-strip .day.degraded { background: var(--status-degraded); }
.uptime-strip .day.down     { background: var(--status-down); }
.uptime-strip .day.gap      { background: var(--bg-2); border: 1px solid var(--line); opacity: 1; }
.uptime-strip .day:hover    { opacity: 1; outline: 1px solid var(--text-1); }
.uptime-legend {
  display: flex; gap: var(--s-4);
  margin-top: var(--s-2); font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.uptime-legend span::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  margin-right: var(--s-2); vertical-align: middle;
}
.uptime-legend .up::before        { background: var(--status-up); }
.uptime-legend .degraded::before  { background: var(--status-degraded); }
.uptime-legend .down::before      { background: var(--status-down); }

/* ---------- service row (for Home list) ---------- */
.service-list { display: flex; flex-direction: column; gap: var(--s-3); }
.service-row {
  display: grid;
  grid-template-columns: 24px 1.5fr 1fr 1.5fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-left-color: var(--text-3);
}
.service-row.up       { border-left-color: var(--status-up); }
.service-row.degraded { border-left-color: var(--status-degraded); }
.service-row.down     { border-left-color: var(--status-down); }
.service-row .led { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.service-row.up       .led { background: var(--status-up); box-shadow: 0 0 8px var(--status-up); animation: pulse 2.5s ease-in-out infinite; }
.service-row.degraded .led { background: var(--status-degraded); box-shadow: 0 0 8px var(--status-degraded); }
.service-row.down     .led { background: var(--status-down); box-shadow: 0 0 10px var(--status-down); animation: pulse 1s ease-in-out infinite; }
.service-row .title {
  display: flex; flex-direction: column;
}
.service-row .title .name { color: var(--text-1); font-size: 14px; font-weight: 500; }
.service-row .title .url  { color: var(--text-3); font-size: 11px; }
.service-row .stat {
  font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em;
}
.service-row .stat .v {
  display: block; color: var(--text-1); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0;
  margin-top: 2px;
}
.service-row .stat .v.accent { color: var(--accent); }
.service-row .stat .v.down   { color: var(--status-down); }
.service-row .strip {
  display: grid; grid-template-columns: repeat(30, 1fr); gap: 1px; width: 100%;
}
.service-row .strip .day {
  height: 18px; background: var(--status-up); opacity: 0.85;
}
.service-row .strip .day.degraded { background: var(--status-degraded); }
.service-row .strip .day.down     { background: var(--status-down); }
.service-row .actions {
  font-size: 18px; color: var(--text-3); cursor: pointer;
}
.service-row .actions:hover { color: var(--text-1); }

/* ---------- incident card ---------- */
.incident {
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: var(--s-4);
}
.incident.severe { border-color: var(--status-down); background: rgba(192,32,32,0.05); }
.incident.minor  { border-color: var(--status-degraded); background: rgba(245,158,11,0.04); }
.incident.resolved { opacity: 0.7; }
.incident .head {
  display: flex; align-items: baseline; gap: var(--s-3);
}
.incident .head .title { color: var(--text-1); font-size: 14px; font-weight: 600; }
.incident .head .time {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.incident p { color: var(--text-2); font-size: 12px; margin: var(--s-2) 0 0; }
.incident-day {
  font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.18em; padding: var(--s-4) 0 var(--s-2);
  border-bottom: 1px dashed var(--line); margin-bottom: var(--s-3);
}

/* ---------- buttons / actions ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-1);
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { border-color: var(--accent); color: var(--accent); }
.btn.primary:hover { background: var(--accent-glow); }
.btn.danger { border-color: var(--status-down); color: var(--status-down); }

/* ---------- forms (admin) ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label {
  font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.18em;
}
.field input, .field select, .field textarea {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-1);
  font-family: var(--font-mono); font-size: 13px;
  padding: var(--s-2) var(--s-3);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
}

/* ---------- responsive (kept minimal) ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .nav { display: none; }
  .main { padding: var(--s-4) var(--s-4); }
  .service-row { grid-template-columns: 24px 1fr auto; }
  .service-row .strip, .service-row .stat:nth-child(3) { display: none; }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  .led, .tag .led, .service-row .led, .kv > .k .led { animation: none !important; }
}

/* ---------- background canvas (atmospheric data flow) ---------- */
.bg-flow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, transparent calc(50% - 1px), rgba(63,191,111,0.04) 50%, transparent calc(50% + 1px), transparent 100%),
    linear-gradient(0deg, transparent 0%, transparent calc(50% - 1px), rgba(63,191,111,0.04) 50%, transparent calc(50% + 1px), transparent 100%);
  background-size: 100px 100px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  opacity: 0.45;
}
.app { position: relative; z-index: 1; }

/* ============================================================
   MudBlazor + Fluent UI token remap — Phase 1 (#95).
   Issue calls this out: "Fluent / Mud components automatically
   pick up the new palette but layouts are still the same."
   ============================================================ */
:root {
  /* MudBlazor palette */
  --mud-palette-background:        var(--bg-0);
  --mud-palette-background-grey:   var(--bg-1);
  --mud-palette-surface:           var(--bg-1);
  --mud-palette-drawer-background: var(--bg-1);
  --mud-palette-appbar-background: var(--bg-1);
  --mud-palette-primary:           var(--accent);
  --mud-palette-primary-text:      var(--bg-0);
  --mud-palette-secondary:         var(--text-2);
  --mud-palette-success:           var(--status-up);
  --mud-palette-warning:           var(--status-degraded);
  --mud-palette-error:             var(--status-down);
  --mud-palette-text-primary:      var(--text-1);
  --mud-palette-text-secondary:    var(--text-2);
  --mud-palette-text-disabled:     var(--text-3);
  --mud-palette-divider:           var(--line);
  --mud-palette-divider-light:     var(--line-strong);
  --mud-palette-action-default:    var(--text-2);
  --mud-palette-lines-default:     var(--line);
  --mud-palette-table-lines:       var(--line);

  /* FluentUI tokens — used by Microsoft.FluentUI.AspNetCore.Components */
  --neutral-foreground-rest:       var(--text-1);
  --neutral-foreground-hover:      var(--text-1);
  --neutral-foreground-active:     var(--accent);
  --neutral-foreground-secondary:  var(--text-2);
  --neutral-layer-1:               var(--bg-1);
  --neutral-layer-2:               var(--bg-2);
  --neutral-layer-3:               var(--bg-2);
  --neutral-layer-4:               var(--bg-1);
  --neutral-fill-rest:             var(--glass);
  --neutral-fill-hover:            var(--glass-strong);
  --neutral-stroke-rest:           var(--line);
  --neutral-stroke-strong-rest:    var(--line-strong);
  --accent-fill-rest:              var(--accent);
  --accent-fill-hover:             var(--accent-soft);
}

/* ============================================================
   Service card inside HudPanel (#95 Phase 3c fix). The scoped
   neutraliser in StatusCheckOverviewCard.razor.css can't reach the
   MudCard because the component root is now the HudPanel child, so the
   neutralisation lives here, globally. The HudPanel frame is the only
   surface — the inner MudCard must be fully transparent.
   ============================================================ */
.service-card-frame .service-card-inner.mud-card,
.service-card-frame .mud-card {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
/* History strip sits flush under the header; give it a little breathing room. */
.service-card-frame .card-history-strip { margin-top: var(--s-3, 12px); }
/* Tame the poll-countdown progress bar into a hairline accent track. */
.service-card-frame .mud-progress-linear {
  height: 2px !important;
  background: var(--line) !important;
}
.service-card-frame .mud-progress-linear .mud-progress-linear-bar {
  background: var(--accent-soft) !important;
}
/* Header avatar: drop the grey filled circle for a hairline tile. */
.service-card-frame .mud-avatar {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-2) !important;
}