/* ═══════════════════════════════════════════════════════════════
   SENTINEL OS v4.0 — Dark Ops Military-Grade Interface
   Design Language: Palantir Gotham / NATO COP / Beholder.me
═══════════════════════════════════════════════════════════════ */

/* ── RESET & FOUNDATIONS ── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-void:#020a12;
  --bg-primary:#040e18;
  --bg-secondary:#061420;
  --bg-tertiary:#081a2c;
  --bg-elevated:#0a2038;
  --border-dim:#0a1e30;
  --border-active:#0c2a42;
  --border-glow:#00d4ff22;
  --text-primary:#c8dce8;
  --text-secondary:#6a8ca0;
  --text-tertiary:#2a4a60;
  --text-dim:#142838;
  --accent-cyan:#00d4ff;
  --accent-green:#00ff88;
  --accent-red:#ff2244;
  --accent-amber:#ffaa00;
  --accent-orange:#ff6b00;
  --accent-purple:#9966ff;
  --accent-gold:#ffd700;
  --font-mono:'JetBrains Mono',monospace;
  --font-display:'Orbitron',sans-serif;
  --font-ui:'Inter',sans-serif;
}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg-void)}
::-webkit-scrollbar-thumb{background:var(--border-active);border-radius:2px}
body{background:var(--bg-void);color:var(--text-secondary);font-family:var(--font-mono);overflow:hidden;height:100vh;width:100vw}

/* ── MAP OVERRIDES ── */
.leaflet-container{background:#000306!important}
.leaflet-control-zoom a{background:var(--bg-primary)!important;color:var(--accent-cyan)!important;border-color:var(--border-dim)!important;font-size:13px!important;width:28px!important;height:28px!important;line-height:28px!important}
.leaflet-control-zoom a:hover{background:var(--bg-tertiary)!important}
.leaflet-control-scale-line{background:rgba(4,14,24,0.9)!important;border-color:var(--border-dim)!important;color:var(--text-tertiary)!important;font-size:9px!important;font-family:var(--font-mono)!important}
.leaflet-control-attribution{display:none!important}

/* ── CLUSTER STYLES ── */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:transparent!important}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{
  background:rgba(0,212,255,0.08)!important;color:var(--accent-cyan)!important;
  border:1px solid rgba(0,212,255,0.3)!important;font-family:var(--font-mono)!important;
  font-size:10px!important;font-weight:600!important;backdrop-filter:blur(4px)!important}

/* ── MARKER ANIMATIONS ── */
.sm{display:block;cursor:pointer;transition:transform 0.15s,filter 0.15s}
.sm:hover{transform:scale(1.6)!important;filter:brightness(1.3)}
.sm.emg svg circle:first-child{animation:emgp 0.6s ease-in-out infinite}
.sm.crit svg circle:first-child{animation:critp 0.9s ease-in-out infinite}
@keyframes emgp{0%,100%{opacity:0.85}50%{opacity:1}}
@keyframes critp{0%,100%{opacity:0.75}50%{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes pulse-fast{0%,100%{opacity:1}50%{opacity:0.15}}
@keyframes pulse-soft{0%,100%{opacity:0.7}50%{opacity:1}}
@keyframes slidein{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes ticker{0%{opacity:0;transform:translateY(6px)}10%,90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
@keyframes scanline{0%{top:-100%}100%{top:200%}}
@keyframes glow{0%,100%{text-shadow:0 0 8px currentColor}50%{text-shadow:0 0 24px currentColor,0 0 48px currentColor}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes borderGlow{0%,100%{border-color:rgba(0,212,255,0.15)}50%{border-color:rgba(0,212,255,0.35)}}

/* ── HEADER ── */
.hdr{
  position:absolute;top:0;left:0;right:0;height:48px;z-index:500;
  background:linear-gradient(180deg,rgba(4,14,24,0.97),rgba(4,14,24,0.93));
  border-bottom:1px solid var(--border-dim);
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hdr::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-cyan)22,transparent)}

/* ── LEFT PANEL ── */
.lp{
  position:absolute;top:48px;left:0;bottom:36px;width:280px;z-index:400;
  background:rgba(4,14,24,0.96);border-right:1px solid var(--border-dim);
  display:flex;flex-direction:column;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lp::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--accent-cyan)11,transparent 50%,var(--accent-cyan)11)}

/* ── RIGHT PANEL ── */
.rp{
  position:absolute;top:48px;right:0;bottom:36px;width:320px;z-index:400;
  background:rgba(4,14,24,0.97);border-left:1px solid var(--border-dim);
  animation:slidein 0.2s ease;overflow-y:auto;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* ── BOTTOM TICKER ── */
.btk{
  position:absolute;bottom:0;left:0;right:0;height:36px;z-index:500;
  background:rgba(4,14,24,0.98);border-top:1px solid var(--border-dim);
  display:flex;align-items:center;overflow:hidden;
}
.btk::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-red)22,transparent)}

/* ── TABS ── */
.tab{
  flex:1;padding:9px 0;text-align:center;cursor:pointer;
  font-size:8px;letter-spacing:2px;font-family:var(--font-mono);
  border-bottom:2px solid transparent;transition:all 0.2s;
  color:var(--text-tertiary);user-select:none;
}
.tab:hover{background:rgba(0,212,255,0.03);color:var(--text-secondary)}
.tab.active{background:rgba(0,212,255,0.05);border-bottom-color:var(--accent-cyan);color:var(--accent-cyan)}

/* ── LIST ROWS ── */
.lr{transition:background 0.15s,border-color 0.15s}
.lr:hover{background:rgba(0,180,255,0.04)!important;border-left:2px solid var(--accent-cyan)!important}
.al{transition:background 0.15s}
.al:hover{background:rgba(255,34,68,0.06)!important}
.cb:hover{color:var(--accent-red)!important}

/* ── THREAT BADGES ── */
.threat-crit{background:rgba(255,0,51,0.05);border-left:2px solid var(--accent-red)}
.threat-high{border-left:2px solid var(--accent-orange)}
.threat-med{border-left:2px solid var(--accent-amber)}

/* ── FONT ALIASES ── */
.orb{font-family:var(--font-display)}
.mono{font-family:var(--font-mono)}
.ui{font-family:var(--font-ui)}

/* ── SCANLINE EFFECT ── */
.scanline{
  position:absolute;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.015) 2px,rgba(0,0,0,0.015) 4px);
  opacity:0.3;
}

/* ── CLASSIFICATION BANNER ── */
.classif-banner{
  position:absolute;top:48px;left:280px;right:0;height:20px;z-index:450;
  background:rgba(0,212,255,0.04);border-bottom:1px solid rgba(0,212,255,0.1);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:7px;letter-spacing:4px;
  color:rgba(0,212,255,0.35);user-select:none;
}

/* ── STATUS PILL ── */
.status-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:1px 6px;border-radius:2px;font-size:6px;
  letter-spacing:1px;font-family:var(--font-mono);
}
.status-live{color:var(--accent-green);background:rgba(0,255,136,0.07);border:1px solid rgba(0,255,136,0.15)}
.status-err{color:var(--accent-red);background:rgba(255,34,68,0.07);border:1px solid rgba(255,34,68,0.15)}
.status-loading{color:var(--accent-amber);background:rgba(255,170,0,0.07);border:1px solid rgba(255,170,0,0.15)}

/* ── MINI CHARTS (threat meters) ── */
.threat-meter{
  height:3px;border-radius:1px;background:var(--bg-tertiary);overflow:hidden;
}
.threat-meter-fill{height:100%;border-radius:1px;transition:width 0.5s ease}

/* ── HUD OVERLAY ── */
#hud-overlay{position:absolute;inset:0;pointer-events:none;z-index:300}
#hud-overlay>*{pointer-events:auto}

.hud-compass{
  position:absolute;bottom:90px;right:16px;width:64px;height:64px;z-index:310;
  border:1px solid var(--border-dim);border-radius:50%;
  background:rgba(4,14,24,0.85);backdrop-filter:blur(6px);
}
.hud-compass svg{width:100%;height:100%}

.hud-search{
  position:absolute;top:72px;left:50%;transform:translateX(-50%);z-index:460;
  width:320px;max-width:calc(100vw - 600px);
}
.hud-search input{
  width:100%;background:rgba(4,14,24,0.94);border:1px solid var(--border-dim);
  border-radius:3px;padding:7px 12px 7px 30px;color:var(--text-primary);
  font-family:var(--font-mono);font-size:10px;outline:none;
  backdrop-filter:blur(8px);transition:border-color 0.2s;
}
.hud-search input:focus{border-color:var(--accent-cyan);box-shadow:0 0 12px rgba(0,212,255,0.1)}
.hud-search input::placeholder{color:var(--text-tertiary);letter-spacing:1px}
.hud-search-icon{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--text-tertiary);font-size:11px;pointer-events:none;
}
.hud-search-results{
  position:absolute;top:100%;left:0;right:0;max-height:240px;overflow-y:auto;
  background:rgba(4,14,24,0.97);border:1px solid var(--border-dim);border-top:none;
  border-radius:0 0 3px 3px;backdrop-filter:blur(8px);
}
.hud-search-item{
  padding:6px 12px;cursor:pointer;border-bottom:1px solid #030b14;
  transition:background 0.1s;display:flex;align-items:center;gap:8px;
}
.hud-search-item:hover{background:rgba(0,212,255,0.05)}

.hud-stats-ring{
  position:absolute;bottom:50px;left:50%;transform:translateX(-50%);z-index:310;
  display:flex;gap:6px;align-items:center;
  background:rgba(4,14,24,0.88);border:1px solid var(--border-dim);
  border-radius:20px;padding:4px 14px;backdrop-filter:blur(6px);
}
.hud-stats-ring .stat{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:8px;font-family:var(--font-mono);
}

.hud-timeline{
  position:absolute;top:48px;right:0;bottom:36px;width:320px;z-index:400;
  background:rgba(4,14,24,0.97);border-left:1px solid var(--border-dim);
  animation:slidein 0.2s ease;overflow-y:auto;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.hud-keys{
  position:absolute;bottom:50px;right:340px;z-index:450;
  background:rgba(4,14,24,0.92);border:1px solid var(--border-dim);
  border-radius:4px;padding:10px 14px;backdrop-filter:blur(8px);
  animation:fadeIn 0.2s ease;min-width:180px;
}
.hud-keys .key-row{
  display:flex;justify-content:space-between;gap:16px;padding:3px 0;
  border-bottom:1px solid #030b14;
}
.hud-keys .key-row:last-child{border-bottom:none}
.hud-keys kbd{
  background:var(--bg-tertiary);color:var(--accent-cyan);
  padding:1px 5px;border-radius:2px;font-size:7px;font-family:var(--font-mono);
  border:1px solid var(--border-dim);min-width:20px;text-align:center;
}

/* ── HUD CLOCK ── */
.hud-clock{
  position:absolute;bottom:90px;left:16px;z-index:310;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  background:rgba(4,14,24,0.85);border:1px solid var(--border-dim);
  border-radius:4px;padding:6px 12px;backdrop-filter:blur(6px);
}

/* ── CRITICAL FLASH ── */
.crit-flash{animation:pulse-fast 0.8s infinite}

/* ── GLOBE VIEW ── */
#globe{background:var(--bg-void)}
#globe canvas{cursor:grab}
#globe canvas:active{cursor:grabbing}

/* ── VIEW TOGGLE BUTTON ── */
.view-toggle{
  position:absolute;top:72px;right:16px;z-index:460;
  display:flex;gap:0;border-radius:3px;overflow:hidden;
  border:1px solid var(--border-dim);
}
.view-toggle button{
  background:var(--bg-primary);color:var(--text-tertiary);
  border:none;padding:5px 10px;font-family:var(--font-mono);
  font-size:7px;letter-spacing:1.5px;cursor:pointer;
  transition:all 0.2s;
}
.view-toggle button:hover{background:var(--bg-tertiary)}
.view-toggle button.active{background:rgba(0,212,255,0.1);color:var(--accent-cyan);border-bottom:2px solid var(--accent-cyan)}

/* ── RESPONSIVE ── */
@media(max-width:767px){
  .lp,.btk-desktop,.classif-banner{display:none!important}
  .rp{width:100%!important;bottom:48px!important}
  .mob-bar{display:flex!important}
  .hdr-stats{display:none!important}
}
@media(min-width:768px){.mob-bar{display:none!important}}
@media(min-width:1600px){
  .lp{width:300px}
  .rp{width:360px}
}

/* ── SATELLITE IMAGERY PANEL ── */
.hud-sat-panel{
  position:absolute;top:68px;right:340px;z-index:470;
  width:310px;max-height:calc(100vh - 140px);
  background:rgba(4,14,24,0.97);border:1px solid var(--border-dim);
  border-radius:4px;overflow-y:auto;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:fadeIn 0.15s ease;
  box-shadow:0 4px 24px rgba(0,0,0,0.5),0 0 1px var(--accent-cyan)22;
}
.hud-sat-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-cyan)33,transparent);
}
.sat-row{transition:background 0.15s,border-color 0.15s;border-left:2px solid transparent}
.sat-row:hover{background:rgba(0,212,255,0.04)!important;border-left:2px solid var(--accent-cyan)!important}
.sat-active{background:rgba(0,212,255,0.06)!important;border-left:2px solid var(--accent-cyan)!important}

/* Satellite panel date input dark theme */
.hud-sat-panel input[type="date"]{
  color-scheme:dark;
}
.hud-sat-panel input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(0.7) sepia(1) saturate(5) hue-rotate(175deg);
  cursor:pointer;
}

/* Satellite panel links */
.hud-sat-panel a{transition:opacity 0.15s}
.hud-sat-panel a:hover{opacity:0.7}

/* ── SAT PANEL RESPONSIVE ── */
@media(max-width:767px){
  .hud-sat-panel{
    right:8px!important;left:8px!important;width:auto!important;
    top:54px!important;max-height:calc(100vh - 100px)!important;
  }
  .hud-sat-indicator{
    left:8px!important;right:8px!important;bottom:90px!important;
    transform:none!important;width:auto!important;
  }
}

/* ── SATELLITE IMAGERY ACTIVE INDICATOR ── */
.hud-sat-indicator{
  position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:310;
  display:flex;gap:8px;align-items:center;
  background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.2);
  border-radius:20px;padding:4px 14px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;transition:background 0.2s;
  animation:fadeIn 0.3s ease;
}
.hud-sat-indicator:hover{background:rgba(0,212,255,0.1)}