/* ══════════════════════════════════════════════════════════════════════════
   cyber-theme.css — additive cybersecurity visual layer
   Loaded AFTER style.css, so these rules enhance (never replace) the base theme.
   Safe to remove: delete the <link> in index.html to fully revert.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ambient cyber grid + glow behind the whole app (dark theme) ──────────── */
body {
  background-image:
    radial-gradient(1200px 620px at 12% -12%, rgba(59,130,246,0.12), transparent 60%),
    radial-gradient(950px 520px at 105% -5%, rgba(56,189,248,0.07), transparent 55%),
    linear-gradient(rgba(59,130,246,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.045) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
  background-attachment: fixed;
}
[data-theme="light"] body {
  background-image:
    radial-gradient(1100px 560px at 12% -12%, rgba(30,58,138,0.08), transparent 60%),
    linear-gradient(rgba(30,58,138,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,138,0.04) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}

/* ── Sidebar shield emblem ────────────────────────────────────────────────── */
.logo-emblem {
  width: 36px; height: 36px; object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(59,130,246,0.6));
  animation: cyber-emblem-pulse 3.5s ease-in-out infinite;
}
@keyframes cyber-emblem-pulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(59,130,246,0.45)); }
  50%     { filter: drop-shadow(0 0 12px rgba(59,130,246,0.85)); }
}

/* ── Neon accents on nav + buttons ────────────────────────────────────────── */
.nav-item.active { box-shadow: inset 3px 0 0 var(--accent), 0 0 20px rgba(59,130,246,0.14); }
.nav-item:hover  { box-shadow: inset 3px 0 0 rgba(59,130,246,0.45); }
.btn-primary     { box-shadow: 0 0 0 1px rgba(59,130,246,0.35), 0 0 14px rgba(59,130,246,0.22); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(96,165,250,0.6), 0 0 22px rgba(59,130,246,0.42); }

/* ── Faint scan-line highlight along the top edge of cards ────────────────── */
.card { position: relative; }
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.55), transparent);
  opacity: .55; pointer-events: none;
}

/* ── Dashboard / hero banner ──────────────────────────────────────────────── */
.cyber-hero {
  position: relative; overflow: hidden; border-radius: 14px; margin-bottom: 20px;
  border: 1px solid var(--border-light);
  background: #0b0f17 url('/static/img/cyber-hero.jpg') right center / cover no-repeat;
  min-height: 156px; display: flex; align-items: center;
}
.cyber-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,15,23,0.94) 0%, rgba(11,15,23,0.62) 46%, rgba(11,15,23,0.10) 100%);
}
.cyber-hero-content { position: relative; z-index: 1; padding: 24px 28px; }
.cyber-hero-title {
  font-size: 23px; font-weight: 800; letter-spacing: .3px; color: #eaf2ff; margin: 0 0 5px;
  text-shadow: 0 0 20px rgba(59,130,246,0.55);
}
.cyber-hero-sub { color: #a6c4ef; font-size: 13px; margin: 0; max-width: 620px; line-height: 1.5; }
.cyber-hero-badges { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.cyber-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 4px 10px; border-radius: 999px;
  color: #cfe4ff; background: rgba(59,130,246,0.16); border: 1px solid rgba(59,130,246,0.4);
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENT POLISH PASS — every element gets a consistent cyber treatment.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page titles — glowing accent underline */
.page-title { text-shadow: 0 0 16px rgba(59,130,246,0.22); }
.page-title::after {
  content: ''; display: block; height: 2px; width: 54px; margin-top: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 10px rgba(59,130,246,0.6);
}

/* Cards + stat cards — smooth hover lift + border glow */
.card, .stat-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover, .stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59,130,246,0.5);
  box-shadow: 0 8px 26px rgba(0,0,0,0.35), 0 0 20px rgba(59,130,246,0.12);
}

/* Stat / KPI — glowing value + icon */
.stat-value { text-shadow: 0 0 18px rgba(59,130,246,0.35); }
.stat-icon  { filter: drop-shadow(0 0 6px rgba(59,130,246,0.4)); }

/* Buttons — unified transition + per-variant hover glow */
.btn { transition: transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.btn:active { transform: translateY(1px); }
.btn-outline:hover, .btn-ghost:hover { border-color: rgba(59,130,246,0.6); box-shadow: 0 0 14px rgba(59,130,246,0.20); }
.btn-success:hover { box-shadow: 0 0 16px rgba(34,197,94,0.35); }
.btn-danger:hover  { box-shadow: 0 0 16px rgba(239,68,68,0.35); }
.btn-warning:hover { box-shadow: 0 0 16px rgba(245,158,11,0.35); }

/* Tables — themed header + row hover glow */
.table-wrap table thead th {
  background: linear-gradient(180deg, rgba(59,130,246,0.10), transparent);
  border-bottom: 1px solid rgba(59,130,246,0.35); letter-spacing: .4px;
}
.table-wrap table tbody tr { transition: background .14s ease, box-shadow .14s ease; }
.table-wrap table tbody tr:hover { background: rgba(59,130,246,0.06); box-shadow: inset 3px 0 0 var(--accent); }

/* Badges — subtle severity glow */
.badge-critical, .badge-high, .badge-rejected     { box-shadow: 0 0 10px rgba(239,68,68,0.30); }
.badge-tp, .badge-approved                          { box-shadow: 0 0 10px rgba(34,197,94,0.28); }
.badge-medium, .badge-pending, .badge-deferred      { box-shadow: 0 0 10px rgba(245,158,11,0.25); }
.badge-info, .badge-low, .badge-benign, .badge-fp   { box-shadow: 0 0 10px rgba(56,189,248,0.22); }

/* Form controls — focus glow ring */
.form-control { transition: border-color .15s ease, box-shadow .15s ease; }
.form-control:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18), 0 0 14px rgba(59,130,246,0.15);
}

/* Tabs — active underglow */
.tab-btn.active { box-shadow: inset 0 -2px 0 var(--accent), 0 4px 14px rgba(59,130,246,0.12); }

/* Modal — glowing frame */
.modal { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(59,130,246,0.25), 0 0 40px rgba(59,130,246,0.12); }

/* Empty state — glowing icon */
.empty-state-icon { filter: drop-shadow(0 0 12px rgba(59,130,246,0.35)); }

/* Status dots — soft pulse glow */
.status-dot.green  { box-shadow: 0 0 8px rgba(34,197,94,0.7); }
.status-dot.yellow { box-shadow: 0 0 8px rgba(245,158,11,0.7); }
.status-dot.red    { box-shadow: 0 0 8px rgba(239,68,68,0.7); }

/* Log / terminal panel — cyber terminal feel */
.log-panel { box-shadow: inset 0 0 0 1px rgba(59,130,246,0.15), inset 0 0 40px rgba(59,130,246,0.05); }

/* Spinner — accent */
.spinner { border-top-color: var(--accent) !important; }

/* Custom cyber scrollbars (WebKit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(59,130,246,0.30); border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.55); background-clip: padding-box; }

/* ══════════════════════════════════════════════════════════════════════════
   MODERN LAYER — glassmorphism, motion, typography & accessibility
   (raises the UI to a current high-end design bar; all additive)
   ══════════════════════════════════════════════════════════════════════════ */

/* Glassmorphism on floating chrome — frosted, translucent */
.topbar {
  background: rgba(17,23,34,0.72);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(59,130,246,0.14);
}
.sidebar {
  background: rgba(10,14,22,0.78);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-right: 1px solid rgba(59,130,246,0.12);
}
.modal-overlay {
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
}
[data-theme="light"] .topbar  { background: rgba(219,230,241,0.82); }
[data-theme="light"] .sidebar { background: rgba(242,248,253,0.86); }

/* Smooth page entrance — top elements materialise on each navigation */
@keyframes cyber-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-header, .cyber-hero { animation: cyber-fade-up .38s cubic-bezier(.22,.61,.36,1) both; }

/* Typography polish — crisp text + aligned numerals for data-heavy views */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.stat-value, .table-wrap table, .cyber-hero-title { font-variant-numeric: tabular-nums; }

/* Keyboard accessibility — visible focus ring for keyboard users only */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Per-section hero banners (each page gets its own themed artwork) ──────── */
.cyber-hero.hero-indicators     { background-image: url('/static/img/hero-indicators.jpg'); }
.cyber-hero.hero-playbooks      { background-image: url('/static/img/hero-playbooks.jpg'); }
.cyber-hero.hero-investigations { background-image: url('/static/img/hero-investigations.jpg'); }
.cyber-hero.hero-console        { background-image: url('/static/img/hero-console.jpg'); }

/* Compact variant for the inner section banners */
.cyber-hero.compact { min-height: 116px; margin-bottom: 16px; }
.cyber-hero.compact .cyber-hero-content { padding: 16px 22px; }
.cyber-hero.compact .cyber-hero-title   { font-size: 19px; }
.cyber-hero.compact .cyber-hero-sub     { font-size: 12px; }

/* ── Premium KPI tiles — colour-coded corner glow + bolder metric ─────────── */
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
  content: ''; position: absolute; top: -46%; right: -18%; width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(59,130,246,0.16), transparent 70%);
  pointer-events: none; z-index: 0;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card.red::after    { background: radial-gradient(circle, rgba(239,68,68,0.18),  transparent 70%); }
.stat-card.green::after  { background: radial-gradient(circle, rgba(34,197,94,0.18),  transparent 70%); }
.stat-card.purple::after { background: radial-gradient(circle, rgba(167,139,250,0.18),transparent 70%); }
.stat-card.yellow::after { background: radial-gradient(circle, rgba(245,158,11,0.18), transparent 70%); }
.stat-value { font-weight: 800; letter-spacing: .2px; }

/* ── Empty states — glowing badge instead of a bare emoji ─────────────────── */
.empty-state { padding: 46px 24px; text-align: center; }
.empty-state-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; margin: 0 auto 16px; border-radius: 50%; font-size: 32px;
  background: radial-gradient(circle at 50% 38%, rgba(59,130,246,0.18), rgba(59,130,246,0.03) 70%);
  border: 1px solid rgba(59,130,246,0.35);
  box-shadow: 0 0 30px rgba(59,130,246,0.16), inset 0 0 18px rgba(59,130,246,0.07);
  animation: cyber-emblem-pulse 3.5s ease-in-out infinite;
}
.empty-state-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.empty-state-sub   { color: var(--text-muted); font-size: 13px; max-width: 440px; margin: 0 auto; line-height: 1.55; }

/* ── Tables — sticky uppercase headers + crisper rows ─────────────────────── */
.table-wrap { border-color: var(--border-light); }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(59,130,246,0.14), var(--bg-surface));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-transform: uppercase; font-size: 11px; letter-spacing: .6px; color: var(--text-secondary);
  border-bottom: 1px solid rgba(59,130,246,0.3);
}
tbody td { border-bottom: 1px solid rgba(148,163,184,0.06); }
tbody tr:hover { background: rgba(59,130,246,0.07); box-shadow: inset 3px 0 0 var(--accent); }

/* ── Modal — accent header + intent-coloured close ────────────────────────── */
.modal-header {
  background: linear-gradient(90deg, rgba(59,130,246,0.12), transparent);
  border-bottom: 1px solid rgba(59,130,246,0.25);
}
.modal-header h3 { text-shadow: 0 0 14px rgba(59,130,246,0.30); }
.modal-close { transition: color .15s ease, box-shadow .15s ease, background .15s ease; }
.modal-close:hover { color: var(--red); box-shadow: 0 0 12px rgba(239,68,68,0.30); }