@import url('https://fonts.googleapis.com/css2?family=Chau+Philomene+One:ital@0;1&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Cuprum:ital,wght@0,400..700;1,400..700&family=Homemade+Apple&family=Kablammo&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bg-dark: #030712;
    --glass-base: rgba(10, 15, 30, 0.92);
    --glass-border: rgba(0, 255, 204, 0.25);
    --neon-cyan: #00ffcc;
    --neon-gold: #f39c12;
    --neon-red: #ff4a4a;
    --text-pure: #f8fafc;
    --text-muted: #748094;
    
    --font-heading: 'Chau Philomene One', sans-serif;
    --font-ui: 'Cuprum', sans-serif;
    --font-body: 'Lato', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    color: var(--text-pure);
    font-family: var(--font-body);
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- HEADER FRAME --- */
.docked-nav-frame {
    width: 100%; height: 75px; z-index: 2000;
    background: var(--glass-base); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 2px solid var(--glass-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    display: grid; grid-template-columns: 320px 1fr 240px; align-items: center; padding: 0 24px; box-sizing: border-box;
}

.nav-branding { display: flex; align-items: center; gap: 14px; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.trophy-matrix { font-size: 26px; filter: drop-shadow(0 0 8px var(--neon-gold)); }
.geo-title { font-family: var(--font-heading); font-size: 26px; margin: 0; letter-spacing: 1px; background: linear-gradient(135deg, #ffffff, var(--neon-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.system-tag { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--text-muted); display: block; }

.nav-search-hub { position: relative; width: 100%; max-width: 550px; justify-self: center; }
.search-bar-engine { display: flex; align-items: center; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 0 16px; }
.search-bar-engine:focus-within { border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0, 255, 204, 0.3); }
.radar-pulse-icon { font-size: 14px; color: var(--neon-cyan); margin-right: 12px; }
#global-search { width: 100%; height: 44px; background: transparent; border: none; outline: none; color: var(--text-pure); font-family: var(--font-ui); font-size: 15px; }

.search-results { position: absolute; top: 52px; left: 0; right: 0; background: var(--glass-base); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 6px; max-height: 280px; overflow-y: auto; z-index: 3000; }
.search-item { padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); }
.search-item:hover { background: rgba(0, 255, 204, 0.08); color: var(--neon-cyan); }
.search-type { font-family: var(--font-ui); font-size: 11px; padding: 1px 5px; background: rgba(255,255,255,0.08); border-radius: 3px; }

.dashboard-toggle-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-pure); padding: 10px 20px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; justify-self: end; }
.live-pulse-dot { width: 6px; height: 6px; background: var(--neon-cyan); border-radius: 50%; box-shadow: 0 0 8px var(--neon-cyan); }

/* --- MAIN BLUEPRINT PANELS --- */
.app-viewport-body { flex-grow: 1; position: relative; width: 100%; }
#map { width: 100%; height: 100%; z-index: 1; }
.leaflet-layer, .leaflet-control-zoom-in, .leaflet-control-zoom-out { filter: invert(100%) hue-rotate(190deg) brightness(85%) contrast(110%); }

/* --- SIDEBAR & TABS MECHANICS (FIXED) --- */
.sidebar {
    position: absolute; top: 0; right: 0; bottom: 0; width: 380px; z-index: 1000;
    background: var(--glass-base); backdrop-filter: blur(24px); border-left: 2px solid var(--glass-border);
    display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.15, 1, 0.3, 1), opacity 0.25s;
}
.sidebar.hidden { transform: translateX(380px); opacity: 0; pointer-events: none; }

.sidebar-tabs { display: flex; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(255,255,255,0.06); }
.tab-btn { flex: 1; background: transparent; border: none; padding: 16px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--neon-cyan); background: rgba(0, 255, 204, 0.03); border-bottom-color: var(--neon-cyan); }

.sidebar-content { padding: 20px; flex-grow: 1; overflow-y: auto; position: relative; }

/* CRITICAL FIX: Tab Visibility Switching */
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: tabFade 0.3s ease-out forwards; }
@keyframes tabFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Sidebar Controls Header */
.active-recon-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 10px; }
.filter-badge { flex-grow: 1; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--neon-cyan); background: rgba(0, 255, 204, 0.08); padding: 8px 12px; border-radius: 4px; text-align: left; border: 1px solid rgba(0, 255, 204, 0.2); }
.clear-btn { background: transparent; border: 1px solid var(--glass-border); color: var(--neon-red); padding: 7px 12px; border-radius: 4px; font-family: var(--font-ui); font-size: 12px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.clear-btn:hover { background: rgba(255, 74, 74, 0.1); border-color: var(--neon-red); }

.chart-container { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.03); padding: 16px; border-radius: 6px; margin-bottom: 16px; }

/* Global Stats */
.stat-section h3 { font-family: var(--font-heading); font-size: 16px; color: var(--neon-gold); margin: 0 0 10px 0; border-bottom: 1px solid rgba(243, 156, 18, 0.2); padding-bottom: 4px; }
.stat-row { display: flex; justify-content: space-between; padding: 8px 10px; background: rgba(255,255,255,0.02); margin-bottom: 5px; border-radius: 4px; font-size: 13px; }

/* --- MAP POPUPS --- */
.leaflet-popup-content-wrapper { background: rgba(10, 16, 32, 0.90) !important; backdrop-filter: blur(18px) saturate(180%) !important; -webkit-backdrop-filter: blur(18px) saturate(180%) !important; border: 1px solid rgba(0, 255, 204, 0.35) !important; border-radius: 10px !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.75) !important; }
.leaflet-popup-tip { background: rgba(10, 16, 32, 0.90) !important; border: 1px solid rgba(0, 255, 204, 0.35) !important; box-shadow: none !important; }
.leaflet-popup-content { margin: 14px 18px !important; font-family: var(--font-body); }
.custom-popup h4 { font-family: var(--font-heading); color: #ffffff !important; margin: 0; }
.fun-fact-box { margin-top: 14px; padding: 12px; background: rgba(243, 156, 18, 0.12) !important; border-left: 3px solid var(--neon-gold) !important; border-radius: 4px; font-size: 12px; font-style: italic; color: #f1f5f9 !important; line-height: 1.5; }
.custom-popup a { color: var(--neon-cyan) !important; font-size: 13px !important; text-decoration: underline !important; }

/* Scrollbars */
.sidebar-content::-webkit-scrollbar, .custom-popup div::-webkit-scrollbar { width: 4px; }
.sidebar-content::-webkit-scrollbar-thumb, .custom-popup div::-webkit-scrollbar-thumb { background: rgba(0, 255, 204, 0.3); border-radius: 4px; }

/* Clusters */
.marker-cluster-custom { background: rgba(6, 11, 25, 0.95); border: 2px solid var(--neon-gold); border-radius: 50%; color: var(--text-pure); font-family: var(--font-ui); font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Optics */
.laser-glow { opacity: 0.25; pointer-events: none; filter: blur(5px) drop-shadow(0 0 12px currentColor); }
.laser-beam { stroke-dasharray: 120, 500; animation: fireLaser 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite; pointer-events: none; }
@keyframes fireLaser { 0% { stroke-dashoffset: 620; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.hidden { display: none !important; }