/**
 * ClearSky V2 — Premium Design System
 * ─────────────────────────────────────
 * Layered on top of styles.css.
 * Upgrades: glassmorphism, premium typography, noise grain,
 *           scan-line overlay, animated gradients, hover glows.
 *
 * SAFE RULES:
 *  - Do NOT override position/inset/top/right/bottom/left on .map-wrap
 *  - Do NOT override transform on .details (it has a 3D perspective)
 *  - Do NOT apply backdrop-filter to .details/.map-wrap (causes mobile blur)
 */

/* ── Imports ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Design Tokens V2 ───────────────────────────────────────────────────── */
:root {
  --cs-accent-primary: #38bdf8;
  --cs-accent-secondary: #818cf8;
  --cs-accent-danger: #f43f5e;
  --cs-accent-success: #34d399;
  --cs-border: rgba(56, 189, 248, 0.14);
  --cs-border-hover: rgba(56, 189, 248, 0.4);
  --cs-shadow-glow-cyan: 0 0 20px rgba(56, 189, 248, 0.12), 0 0 40px rgba(56, 189, 248, 0.06);
  --cs-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --cs-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --cs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Global base upgrades ───────────────────────────────────────────────── */
body {
  font-family: var(--cs-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle film grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.025;
  mix-blend-mode: overlay;
}

/* Scan-line pulse — subtle, cool, non-invasive */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 180, 255, 0.01) 2px,
    rgba(0, 180, 255, 0.01) 4px
  );
}

/* ── Panel (sidebar) premium upgrade ───────────────────────────────────── */
/* Note: panel-wrapper already has backdrop-filter in styles.css; we enhance box-shadow only */
.panel-wrapper {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.8),
    inset 0 0 40px rgba(14, 165, 233, 0.1),
    0 10px 30px -10px rgba(14, 165, 233, 0.5),
    var(--cs-shadow-glow-cyan) !important;
}

/* ── Event list overlay — safe glassmorphism ────────────────────────────── */
/* Note: we only enhance, do NOT change position/sizing */
#event-list-overlay {
  border-radius: 14px !important;
  box-shadow: var(--cs-shadow-glow-cyan), 0 20px 50px rgba(0,0,0,0.7) !important;
}

/* ── Threat Index panel — enhanced glow only ────────────────────────────── */
/* Do NOT override backdrop-filter here — it's already set in styles.css */
.threat-index-panel {
  box-shadow:
    0 20px 50px rgba(0,0,0,0.7),
    0 0 60px rgba(56, 189, 248, 0.08) !important;
}

/* Animate the hex icon */
.ti-hex-icon {
  display: inline-block;
  animation: hexPulse 3s ease-in-out infinite;
}

@keyframes hexPulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px var(--cs-accent-primary); }
  50%       { opacity: 0.7; text-shadow: 0 0 16px var(--cs-accent-primary), 0 0 32px rgba(56,189,248,0.3); }
}

/* TI row hover */
.ti-row {
  will-change: transform;
}
.ti-row:hover {
  background: rgba(20, 48, 72, 0.45) !important;
}

/* ── Premium live dot pulse ─────────────────────────────────────────────── */
.live-dot.online {
  animation: livePing 1.8s ease-in-out infinite !important;
}

@keyframes livePing {
  0%   { box-shadow: 0 0 0 0 rgba(0, 208, 132, 0.7); background: #00d084; }
  70%  { box-shadow: 0 0 0 8px rgba(0, 208, 132, 0); background: #00d084; }
  100% { box-shadow: 0 0 0 0 rgba(0, 208, 132, 0); background: #00d084; }
}

/* ── Buttons: premium glow on hover ─────────────────────────────────────── */
button.action-btn,
button.btn-primary {
  transition: box-shadow 0.3s var(--cs-ease-out), transform 0.2s var(--cs-ease-out) !important;
}

button.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(56,189,248,0.3), 0 2px 8px rgba(0,0,0,0.3) !important;
}

button.btn-primary:active {
  transform: translateY(0) !important;
}

/* ── Chip / pill upgrades ───────────────────────────────────────────────── */
.brief-kpi-value,
.replay-meta,
.credits {
  font-family: var(--cs-font-mono) !important;
  letter-spacing: 0.04em;
}

/* ── Event list items ───────────────────────────────────────────────────── */
.launch-item {
  transition: background 0.2s var(--cs-ease-out),
              border-color 0.2s var(--cs-ease-out) !important;
}
.launch-item:hover {
  box-shadow: 0 0 0 1px var(--cs-border-hover) !important;
}

/* ── Scrollbars — thin and cyan ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.5); }

/* ── Selection color ────────────────────────────────────────────────────── */
::selection { background: rgba(56, 189, 248, 0.3); color: white; }

/* ── Footer credits ─────────────────────────────────────────────────────── */
.credits {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  opacity: 0.45;
  transition: opacity 0.3s;
}
.credits:hover { opacity: 0.75; }

/* ── Bloom overlay canvas (injected by premium.js) ──────────────────────── */
#bloom-overlay {
  will-change: contents;
  /* position: fixed — set inline by JS — do NOT change */
}

/* ── Cursor glow ────────────────────────────────────────────────────────── */
#cs-cursor-glow {
  will-change: transform;
}

/* ── Premium shimmer loading bar ────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.ti-loading-bar {
  background: linear-gradient(
    90deg,
    rgba(56,189,248,0.05) 25%,
    rgba(56,189,248,0.2) 50%,
    rgba(56,189,248,0.05) 75%
  ) !important;
  background-size: 400px 100% !important;
  animation: shimmer 1.8s ease infinite !important;
}

/* ── Mobile: disable grain/scan on low-power devices ───────────────────── */
@media (hover: none) and (pointer: coarse) {
  body::before,
  body::after {
    display: none;
  }
}

/* ── HUD Cards (ni-panel unified) ───────────────────────────────────────── */
.ni-panel { font-family: 'Inter','JetBrains Mono',monospace; }
.ni-header { display:flex; align-items:flex-start; gap:8px; margin-bottom:12px; }
.ni-type-badge { font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; border-radius:3px; background:rgba(56,189,248,.15); color:var(--accent); border:1px solid rgba(56,189,248,.3); white-space:nowrap; flex-shrink:0; margin-top:3px; }
.ni-title { font-size:13px; font-weight:700; line-height:1.3; color:#e2e8f0; text-transform:uppercase; letter-spacing:.02em; }
.ni-signal-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin:10px 0; }
.ni-signal { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:4px; padding:8px 8px 6px; display:flex; flex-direction:column; gap:2px; }
.ni-signal-label { font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.45; }
.ni-signal-value { font-size:15px; font-weight:800; line-height:1; }
.ni-signal-sub { font-size:10px; opacity:.5; margin-top:1px; }
.ni-divider { height:1px; background:rgba(255,255,255,.07); margin:10px 0; }
.ni-section-label { font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.4; margin-bottom:6px; }
.ni-summary { font-size:12px; line-height:1.55; color:#cbd5e1; font-style:italic; }
.ni-sources-wrap { display:flex; flex-direction:column; gap:5px; }
.ni-source-link { display:block; font-size:11px; color:var(--accent); text-decoration:none; border-bottom:1px dashed rgba(56,189,248,.35); padding-bottom:3px; line-height:1.4; word-break:break-all; transition:opacity .15s; cursor:pointer; }
.ni-source-link:hover { opacity:.75; text-decoration:underline; }
.ni-timeline-item { display:flex; gap:8px; padding:4px 0; position:relative; }
.ni-timeline-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:5px; box-shadow:0 0 6px var(--accent); }
.ni-timeline-body { display:flex; flex-direction:column; gap:1px; flex:1; }
.ni-timeline-time { font-size:9px; opacity:.45; letter-spacing:.06em; }
.ni-timeline-label { font-size:11px; color:#cbd5e1; line-height:1.35; }
.ni-country-badge { font-size:10px; padding:2px 7px; border-radius:12px; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.25); color:var(--accent); margin-right:4px; margin-bottom:3px; display:inline-block; text-transform: capitalize; }
.ni-stats-row { display:flex; gap:12px; flex-wrap:wrap; }
.ni-stat { display:flex; flex-direction:column; gap:1px; }
.ni-stat-label { font-size:9px; opacity:.4; letter-spacing:.08em; text-transform:uppercase; }
.ni-stat-value { font-size:11px; color:#94a3b8; }
.ni-ai-btn { width:100%; margin-top:4px; padding:8px 12px; background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.4); border-radius:5px; color:#c4b5fd; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.ni-ai-btn:hover { background:rgba(139,92,246,.25); border-color:rgba(139,92,246,.6); }
.ni-ai-result { margin-top:8px; padding:10px; background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2); border-radius:5px; font-size:11px; line-height:1.55; color:#c4b5fd; }
.ni-risk-bar { height:3px; border-radius:2px; background:rgba(255,255,255,.07); margin-top:4px; }
.ni-risk-fill { height:100%; border-radius:2px; transition:width .4s; }
.ni-ai-loading { display:flex; align-items:center; gap:7px; padding:8px 4px; font-size:11px; color:#a78bfa; opacity:.7; }
.ni-ai-spinner { width:12px; height:12px; border:2px solid rgba(139,92,246,.25); border-top-color:#a78bfa; border-radius:50%; flex-shrink:0; animation:ni-spin .7s linear infinite; }
@keyframes ni-spin { to { transform:rotate(360deg); } }

/* Global overrides for .details to fit ni-panel naturally */
.details {
  background: rgba(10, 15, 28, 0.96) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 40px rgba(56,189,248,0.1), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.details-shield { display: none !important; }
.ni-panel { padding: 18px; }
.ni-scroll-body { max-height: 55vh; overflow-y: auto; overflow-x: hidden; padding-right:4px; margin-top:14px; }
.details-close-btn { z-index: 10; font-size: 22px; right: 14px; top: 14px; color: #94a3b8; }
.details-close-btn:hover { color: #fff; }

@media (max-width: 600px) {
  .details {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(4, 9, 20, 0.98) !important;
  }
  .ni-sticky-header {
    margin: -18px -18px 0 !important;
    padding: 18px 18px 14px !important;
    top: 0 !important;
  }
  .details-close-btn {
    top: 10px !important;
    right: 10px !important;
  }
}