/* ══════════════════════════════════════════════════════════════
   SeatSniper — TACTICAL HUD theme
   Loads after style.css/schedule.css and retargets existing classes.
   Aesthetic: premium dark ops console — blueprint grid, maroon→amber
   glow, monospace telemetry, reticle framing. Light = "daylight ops".
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── Tokens (dark is the default identity) ── */
:root,
:root[data-theme="dark"] {
  --hud-bg:        #08090d;
  --hud-bg2:       #0c0e15;
  --hud-panel:     rgba(18, 21, 30, 0.72);
  --hud-panel-2:   rgba(24, 28, 39, 0.82);
  --hud-solid:     #12141c;
  --hud-border:    rgba(255, 255, 255, 0.09);
  --hud-border-2:  rgba(255, 255, 255, 0.16);
  --hud-text:      #e8eaf0;
  --hud-dim:       #9aa3b8;
  --hud-faint:     #5d6678;
  --hud-red:       #e85d61;   /* glowing maroon accent */
  --hud-red-deep:  #8b1a1a;
  --hud-amber:     #f6ae3d;   /* "locked / live" */
  --hud-green:     #3ddc97;
  --hud-grid:      rgba(255, 255, 255, 0.05);
  --hud-grid-2:    rgba(232, 93, 97, 0.07);
  --hud-glow:      rgba(232, 93, 97, 0.30);
  --hud-amber-glow:rgba(246, 174, 61, 0.28);
  --hud-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --hud-disp: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
}

:root[data-theme="light"] {
  --hud-bg:        #eaeef4;
  --hud-bg2:       #e2e8f1;
  --hud-panel:     rgba(255, 255, 255, 0.82);
  --hud-panel-2:   rgba(255, 255, 255, 0.92);
  --hud-solid:     #ffffff;
  --hud-border:    rgba(15, 23, 42, 0.10);
  --hud-border-2:  rgba(15, 23, 42, 0.20);
  --hud-text:      #141821;
  --hud-dim:       #54607a;
  --hud-faint:     #8a94a8;
  --hud-red:       #a31f24;
  --hud-red-deep:  #8b1a1a;
  --hud-amber:     #b4690e;
  --hud-green:     #0a8f5b;
  --hud-grid:      rgba(15, 23, 42, 0.055);
  --hud-grid-2:    rgba(139, 26, 26, 0.06);
  --hud-glow:      rgba(139, 26, 26, 0.16);
  --hud-amber-glow:rgba(180, 105, 14, 0.16);
}

/* ── Canvas: blueprint dot-grid + corner glows ── */
html, body {
  background: var(--hud-bg) !important;
  color: var(--hud-text) !important;
}
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body::before {                 /* fixed grid + ambient glows */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -5%, var(--hud-grid-2), transparent 60%),
    radial-gradient(800px 700px at 100% 0%, var(--hud-amber-glow), transparent 55%),
    radial-gradient(circle at center, var(--hud-grid) 1px, transparent 1.4px);
  background-size: auto, auto, 26px 26px;
  background-color: var(--hud-bg);
}
body::after {                  /* faint vignette so panels float */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,0.35) 100%);
}
:root[data-theme="light"] body::after { background: radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(15,23,42,0.06) 100%); }

/* monospace telemetry helper applied widely */
.term-pill, .seat-badge, .sub-meta, .ac-code, .activity-badge,
.watcher-badge, kbd, code, .footer-kbd, #results-title {
  font-family: var(--hud-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ════════════ NAVBAR ════════════ */
.navbar {
  background: rgba(8, 9, 13, 0.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hud-border) !important;
}
:root[data-theme="light"] .navbar { background: rgba(255,255,255,0.7) !important; }
.navbar-brand { color: var(--hud-red) !important; }
.navbar-logo { filter: drop-shadow(0 0 6px var(--hud-glow)); }
.navbar-link {
  color: var(--hud-dim) !important;
  font-family: var(--hud-disp);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px;
}
.navbar-link.active {
  color: #fff !important;
  background: linear-gradient(180deg, var(--hud-red-deep), #6f1414) !important;
  box-shadow: 0 0 0 1px var(--hud-border-2), 0 6px 20px -8px var(--hud-glow);
}
:root[data-theme="light"] .navbar-link.active { color:#fff !important; }
.navbar-link:not(.active):hover { color: var(--hud-text) !important; background: var(--hud-panel) !important; }
.dark-mode-toggle { color: var(--hud-dim) !important; border-color: var(--hud-border) !important; }
.navbar-alert-badge {
  background: var(--hud-amber) !important; color: #1a1205 !important;
  font-family: var(--hud-mono); font-weight: 700;
  box-shadow: 0 0 12px var(--hud-amber-glow);
}

/* ════════════ HERO + RADAR ════════════ */
/* NOTE: no overflow:hidden here — it would clip the autocomplete dropdown.
   .hero-bg is inset:0 so its background gradients are already bounded. */
.hero { background: transparent !important; }
/* keep the suggestions above the results card / main content */
.autocomplete-list { z-index: 120 !important; }
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
  background:
    radial-gradient(closest-side, transparent 96%, var(--hud-grid-2) 97%, transparent 100%) center/220px 220px no-repeat,
    radial-gradient(closest-side, transparent 96%, var(--hud-grid-2) 97%, transparent 100%) center/420px 420px no-repeat,
    radial-gradient(closest-side, transparent 96%, var(--hud-grid-2) 97%, transparent 100%) center/640px 640px no-repeat;
}
.hero-content { position: relative; z-index: 1; }
.brand {
  font-family: var(--hud-disp) !important;
  letter-spacing: 0.01em;
  color: var(--hud-text) !important;
}
.brand-icon { color: var(--hud-red) !important; filter: drop-shadow(0 0 10px var(--hud-glow)); }
.tagline {
  font-family: var(--hud-mono) !important;
  font-size: 0.82rem !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--hud-dim) !important;
}
.tagline::before { content: "// "; color: var(--hud-red); }

/* ════════════ SEARCH CONSOLE ════════════ */
.search-bar {
  background: var(--hud-panel) !important;
  border: 1px solid var(--hud-border) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  /* backdrop-filter makes this a stacking context; lift it so its dropdown
     paints above the trust-line / empty-state that follow it in the DOM */
  position: relative; z-index: 50;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px -22px rgba(0,0,0,0.7) !important;
  border-radius: 12px !important;
  transition: border-color .18s, box-shadow .18s;
}
.search-bar:focus-within {
  border-color: var(--hud-red) !important;
  box-shadow: 0 0 0 3px var(--hud-glow), 0 18px 40px -20px var(--hud-glow) !important;
}
.search-bar input[type="text"], #course-search {
  color: var(--hud-text) !important;
  font-family: var(--hud-mono) !important;
  letter-spacing: 0.01em;
}
#course-search::placeholder { color: var(--hud-faint) !important; }
.search-icon { color: var(--hud-red) !important; }
.term-pill {
  background: var(--hud-panel-2) !important;
  border: 1px solid var(--hud-border) !important;
  color: var(--hud-text) !important;
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em;
}
.term-dropdown, .custom-select-dropdown, .autocomplete-list {
  background: var(--hud-solid) !important;
  border: 1px solid var(--hud-border-2) !important;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8) !important;
}
.term-dropdown li, .custom-select-dropdown li, .autocomplete-list li { color: var(--hud-text) !important; }
.term-dropdown li:hover, .custom-select-dropdown li:hover,
.autocomplete-list li:hover, .autocomplete-list li.active {
  background: var(--hud-grid-2) !important; color: var(--hud-red) !important;
}
.ac-code { color: var(--hud-red) !important; }
.ac-title { color: var(--hud-dim) !important; }
.search-submit {
  background: linear-gradient(180deg, var(--hud-red-deep), #6f1414) !important;
  border: 1px solid var(--hud-border-2) !important;
  box-shadow: 0 0 18px -4px var(--hud-glow);
}
.search-submit:hover { box-shadow: 0 0 26px -2px var(--hud-glow) !important; filter: brightness(1.08); }

/* ════════════ TRUST LINE ════════════ */
.trust-line { gap: 14px !important; }
.trust-item {
  font-family: var(--hud-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--hud-dim) !important;
}
.trust-item svg { color: var(--hud-red) !important; }
.trust-item strong { color: var(--hud-amber) !important; }
.trust-sep { color: var(--hud-faint) !important; }

/* ════════════ PANELS / CARDS w/ reticle corners ════════════ */
.card {
  background: var(--hud-panel) !important;
  border: 1px solid var(--hud-border) !important;
  border-radius: 12px !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  position: relative;
}
/* diagonal corner brackets = scope frame */
.card::before, .card::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--hud-red); opacity: 0.55;
}
.card::before { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; }
.card::after  { bottom: 8px; right: 8px; border-bottom: 2px solid; border-right: 2px solid; }
.card h2, #results-title {
  font-family: var(--hud-disp) !important;
  color: var(--hud-text) !important;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem !important;
}
.card h2 svg { color: var(--hud-red) !important; }
.form-hint, .form-group label, label { color: var(--hud-dim) !important; }
input[type="email"], input[type="text"], select {
  background: var(--hud-solid) !important;
  border: 1px solid var(--hud-border) !important;
  color: var(--hud-text) !important;
}
input::placeholder { color: var(--hud-faint) !important; }

/* ════════════ RESULTS TABLE ════════════ */
.section-table { border-collapse: separate; border-spacing: 0; }
.section-table thead th {
  font-family: var(--hud-mono) !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.66rem !important; color: var(--hud-faint) !important;
  border-bottom: 1px solid var(--hud-border) !important;
}
.section-table tbody td {
  border-bottom: 1px solid var(--hud-border) !important;
  color: var(--hud-text) !important;
}
.section-table tbody tr { transition: background .15s; }
.section-table tbody tr:hover { background: var(--hud-grid-2) !important; }
.section-table tbody td:first-child { box-shadow: inset 2px 0 0 transparent; }
.section-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--hud-red); }
.col-type, .col-activity { color: var(--hud-dim) !important; }

/* seat badges = glowing telemetry pills */
.seat-badge {
  font-family: var(--hud-mono) !important;
  font-weight: 600; letter-spacing: 0.03em;
  border: 1px solid transparent; border-radius: 6px;
}
.seat-open {
  color: var(--hud-green) !important;
  background: rgba(61, 220, 151, 0.10) !important;
  border-color: rgba(61, 220, 151, 0.30) !important;
  text-shadow: 0 0 12px rgba(61, 220, 151, 0.4);
}
.seat-full {
  color: var(--hud-red) !important;
  background: rgba(232, 93, 97, 0.10) !important;
  border-color: rgba(232, 93, 97, 0.28) !important;
}
.seat-badge-summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px !important; font-size: 0.95rem !important;
  border-radius: 10px; letter-spacing: 0.04em;
}
.seat-badge-summary::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 10px currentColor;
}
.activity-badge { font-family: var(--hud-mono) !important; color: var(--hud-dim) !important; }
.watcher-badge {
  color: var(--hud-amber) !important;
  background: var(--hud-amber-glow) !important;
  border: 1px solid rgba(246,174,61,0.3); border-radius: 6px;
}

/* ════════════ MY ALERTS → TARGETS LOCKED ════════════ */
#subscriptions-list { display: grid; gap: 12px; margin-top: 14px; }
.sub-card {
  background: var(--hud-panel) !important;
  border: 1px solid var(--hud-border) !important;
  border-left: 3px solid var(--hud-amber) !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 14px 40px -28px rgba(0,0,0,0.8) !important;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sub-card:hover { box-shadow: 0 0 0 1px var(--hud-amber-glow), 0 18px 44px -26px var(--hud-amber-glow) !important; transform: translateY(-1px); }
.sub-info strong, .sub-info { color: var(--hud-text) !important; }
.sub-info > *:first-child::before {
  content: "▸ "; color: var(--hud-amber); font-family: var(--hud-mono);
}
.sub-meta { color: var(--hud-dim) !important; font-size: 0.78rem !important; }
.text-muted-inline { color: var(--hud-faint) !important; }

/* ════════════ EMPTY STATES (no target) ════════════ */
.empty-state-compact, .empty-state-card {
  color: var(--hud-dim) !important;
  font-family: var(--hud-mono);
}
.empty-state-compact p { letter-spacing: 0.02em; }
.empty-state-compact strong { color: var(--hud-red) !important; }
.empty-state-card { background: var(--hud-panel) !important; border: 1px dashed var(--hud-border-2) !important; border-radius: 12px; }
.empty-state-card h3 { font-family: var(--hud-disp); text-transform: uppercase; letter-spacing: 0.08em; color: var(--hud-text) !important; }
.empty-icon { filter: grayscale(0.2) drop-shadow(0 0 8px var(--hud-glow)); }

/* ════════════ BUTTONS ════════════ */
.btn-primary {
  background: linear-gradient(180deg, var(--hud-red-deep), #6f1414) !important;
  border: 1px solid var(--hud-border-2) !important;
  color: #fff !important;
  box-shadow: 0 0 18px -6px var(--hud-glow);
  letter-spacing: 0.02em;
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 26px -4px var(--hud-glow) !important; }
.btn-ghost { color: var(--hud-text) !important; border: 1px solid var(--hud-border-2) !important; background: transparent !important; }
.btn-ghost:hover { background: var(--hud-panel) !important; }
.btn-danger, .unsubscribe-btn {
  color: var(--hud-red) !important;
  border: 1px solid rgba(232,93,97,0.35) !important;
  background: rgba(232,93,97,0.06) !important;
}
.btn-danger:hover, .unsubscribe-btn:hover { background: rgba(232,93,97,0.14) !important; }
.subscribe-btn { letter-spacing: 0.02em; }

/* ════════════ MODAL ════════════ */
.modal-backdrop { background: rgba(4,5,8,0.74) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-content {
  background: var(--hud-solid) !important;
  border: 1px solid var(--hud-border-2) !important;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), 0 0 0 1px var(--hud-border) !important;
}
.modal-content h2 { font-family: var(--hud-disp) !important; }
.modal-step { background: var(--hud-border-2) !important; }
.modal-step.is-active { background: linear-gradient(90deg, var(--hud-red), var(--hud-amber)) !important; }
.field-input { background: var(--hud-bg2) !important; border-color: var(--hud-border) !important; color: var(--hud-text) !important; }
.field-label { color: var(--hud-faint) !important; }
.field-input:focus { border-color: var(--hud-red) !important; box-shadow: 0 0 0 3px var(--hud-glow) !important; }
.field-input:focus + .field-label, .field-input:not(:placeholder-shown) + .field-label { color: var(--hud-red) !important; }
.scope-mark { box-shadow: 0 0 10px var(--hud-glow); }
.verify-banner { background: var(--hud-amber-glow) !important; border: 1px solid rgba(246,174,61,0.3) !important; }
.verify-pulse { background: var(--hud-amber) !important; box-shadow: 0 0 0 0 var(--hud-amber); }
.ntfy-topic-row code, code { background: var(--hud-bg2) !important; color: var(--hud-amber) !important; border: 1px solid var(--hud-border); }
.store-badges a { border: 1px solid var(--hud-border-2) !important; color: var(--hud-text) !important; }
.store-badges a:hover { border-color: var(--hud-red) !important; background: var(--hud-grid-2) !important; }
.auto-test-note { background: var(--hud-grid-2) !important; border: 1px solid var(--hud-border) !important; border-radius: 8px; color: var(--hud-dim) !important; }

/* ════════════ SCHEDULE PAGE (keep cohesive) ════════════ */
.ss-panel.card, .ss-result-card, .ss-selected-course {
  background: var(--hud-panel) !important;
  border: 1px solid var(--hud-border) !important;
  color: var(--hud-text) !important;
}
.ss-label, .ss-time-bound-label, .ss-label-hint, .ss-legend-label { color: var(--hud-dim) !important; font-family: var(--hud-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.ss-day-btn { background: var(--hud-solid) !important; border: 1px solid var(--hud-border) !important; color: var(--hud-text) !important; font-family: var(--hud-mono); }
.ss-day-btn[aria-pressed="true"] { background: rgba(232,93,97,0.14) !important; border-color: var(--hud-red) !important; color: var(--hud-red) !important; }
.ss-time-range-fill { background: linear-gradient(90deg, var(--hud-red-deep), var(--hud-red)) !important; }
.custom-select-toggle { background: var(--hud-solid) !important; border: 1px solid var(--hud-border) !important; color: var(--hud-text) !important; }
.ss-course-count { color: var(--hud-amber) !important; font-family: var(--hud-mono); }
.ss-legend-badge { font-family: var(--hud-mono) !important; }

/* ════════════ FOOTER ════════════ */
footer { border-top: 1px solid var(--hud-border); color: var(--hud-dim); }
footer strong { color: var(--hud-text); }
.footer-note { color: var(--hud-faint) !important; }
.footer-note a { color: var(--hud-red) !important; }
kbd { background: var(--hud-bg2) !important; border: 1px solid var(--hud-border-2) !important; color: var(--hud-text) !important; }

/* ════════════ MOTION ════════════ */
@keyframes hud-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.seat-badge-summary::before, .navbar-alert-badge { animation: hud-pulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .seat-badge-summary::before, .navbar-alert-badge { animation: none; }
  body::before { background-attachment: scroll; }
}

/* ════════════ RESPONSIVE: results table → cards on phones ════════════ */
@media (max-width: 640px) {
  .section-table, .section-table thead, .section-table tbody,
  .section-table tr, .section-table td { display: block; width: 100%; }
  .section-table thead { display: none; }
  .section-table tbody tr {
    border: 1px solid var(--hud-border); border-left: 3px solid var(--hud-red);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
    background: var(--hud-panel);
  }
  .section-table tbody td { border: none !important; padding: 3px 0 !important; }
  .section-table tbody td::before {
    content: attr(data-label); display: inline-block; min-width: 92px;
    font-family: var(--hud-mono); font-size: 0.64rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--hud-faint);
  }
  .card::before, .card::after { display: none; }   /* brackets get noisy on small screens */
}