/* === FULL SCREEN MAP PAGE === */

/* Vessel icons — remove Leaflet divIcon defaults */
.vessel-icon { background: none !important; border: none !important; }

/* Live MarineTraffic overlay */
#liveOverlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 700;
    background: #0a0e17;
    display: none;
}
#liveToggle.active-btn {
    color: #10b981 !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 8px rgba(16,185,129,0.3);
}

/* FIRMS fire marker pulse */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }

.map-layout {
    display: flex;
    height: calc(100vh - 36px);
    overflow: hidden;
}

/* Sidebars */
.sidebar {
    width: 300px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    transition: margin 0.3s ease, opacity 0.3s ease;
}
.sidebar-right {
    border-right: none;
    border-left: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar.collapsed-left { margin-left: -300px; opacity: 0; }
.sidebar.collapsed-right { margin-right: -300px; opacity: 0; }

.sidebar-header {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    background: var(--bg-panel-header); border-bottom: 1px solid var(--border);
    min-height: 30px; flex-shrink: 0;
}

.sidebar-section {
    display: flex; flex-direction: column; overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.sidebar-section:last-child { border-bottom: none; }
.sidebar-section.flex-grow { flex: 1; min-height: 0; }

/* Map */
.map-main {
    flex: 1;
    position: relative;
    min-width: 0;
}
.map-fullscreen {
    width: 100%;
    height: 100%;
}

/* Floating Controls */
.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 800;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.map-ctrl-btn {
    background: rgba(15, 21, 32, 0.9);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s;
    backdrop-filter: blur(4px);
}
.map-ctrl-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-cyan);
    background: rgba(15, 21, 32, 0.95);
}
.map-ctrl-btn.active-btn {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

/* Bottom HUD */
.map-hud {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    background: rgba(10, 14, 23, 0.92);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 20px;
    backdrop-filter: blur(6px);
}
.hud-section {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hud-label {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 1px;
}
.hud-value {
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 700;
}
.hud-value.positive { color: var(--accent-green); }
.hud-value.negative { color: var(--accent-red); }
.hud-value.risk-normal { color: var(--accent-green); }
.hud-value.risk-elevated { color: var(--accent-amber); }
.hud-value.risk-high { color: var(--accent-red); }
.hud-value.risk-critical { color: #dc2626; }

.hud-legend {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}
.leg { display: flex; align-items: center; gap: 3px; font-size: 7px; color: var(--text-muted); }
.ld { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.ll { width: 10px; height: 2px; display: inline-block; }
.lt { width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:6px solid #fff;display:inline-block; }
.leg-sep { color: var(--border); font-size: 10px; }

/* Feed */
.feed-container { flex: 1; overflow-y: auto; padding: 4px 8px; }
.feed-item {
    padding: 6px 8px; border-left: 3px solid var(--border);
    margin-bottom: 4px; background: var(--bg-card); cursor: pointer; transition: all 0.15s;
}
.feed-item:hover { background: rgba(30,41,59,0.8); transform: translateX(2px); }
.feed-item.risk-high { border-left-color: var(--accent-red); }
.feed-item.risk-medium { border-left-color: var(--accent-amber); }
.feed-item.risk-low { border-left-color: var(--accent-green); }
.feed-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.feed-risk-badge { font-size: 7px; font-weight: 700; letter-spacing: 1px; padding: 1px 4px; border-radius: 1px; }
.feed-risk-badge.high { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.feed-risk-badge.medium { background: rgba(245,158,11,0.15); color: var(--accent-amber); }
.feed-risk-badge.low { background: rgba(16,185,129,0.15); color: var(--accent-green); }
.feed-source { font-size: 8px; color: var(--text-muted); }
.feed-title { font-size: 10px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.feed-time { font-size: 8px; color: var(--text-muted); margin-top: 2px; }

/* Risk */
.risk-gauge { padding: 8px 10px; }
.risk-display { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.risk-score { font-size: 36px; font-weight: 700; line-height: 1; }
.risk-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; }
.risk-bar { height: 3px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.risk-fill { height: 100%; border-radius: 2px; transition: width 1s ease; background: var(--accent-green); }
.risk-fill.critical { background: #dc2626; box-shadow: 0 0 10px #dc2626; }
.risk-fill.high { background: var(--accent-red); }
.risk-fill.elevated { background: var(--accent-amber); }
.risk-fill.normal { background: var(--accent-green); }
.risk-detail { font-size: 9px; color: var(--text-muted); }
.risk-detail-row { display: flex; justify-content: space-between; padding: 1px 0; }

/* Vessel Stats */
.vessel-stats { padding: 6px 10px; overflow-y: auto; flex: 1; }
.vs-section-title { font-size: 7px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-muted); border-bottom: 1px solid rgba(30,41,59,0.5); padding: 4px 0 2px; margin-top: 6px; }
.vs-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 9px; }
.vs-label { color: var(--text-muted); }
.vs-value { color: var(--text-primary); font-weight: 600; }
.vs-value.cyan { color: var(--accent-cyan); }
.vs-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 8px; }
.vs-bar-label { color: var(--text-muted); width: 70px; flex-shrink: 0; }
.vs-bar-bg { flex: 1; height: 4px; background: var(--bg-secondary); border-radius: 1px; overflow: hidden; }
.vs-bar { height: 100%; border-radius: 1px; }
.vs-bar-count { width: 20px; text-align: right; color: var(--text-secondary); }

/* Strait Facts */
.strait-facts { padding: 6px 10px; }
.fact-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 9px; }
.fact-label { color: var(--text-muted); }
.fact-value { color: var(--text-secondary); font-weight: 500; }
.fact-value.hl { color: var(--accent-amber); font-weight: 700; }

.sitrep-map-container { overflow-y: auto; }

@media (max-width: 1200px) {
    .sidebar { width: 260px; }
}
@media (max-width: 900px) {
    .sidebar-left { display: none; }
    .sidebar-right { width: 240px; }
    .hud-legend { display: none; }
}
@media (max-width: 768px) {
    .map-layout { flex-direction: column; height: calc(100vh - 34px); }
    .sidebar-left { display: none; }
    .sidebar-right {
        width: 100%; order: 2; height: 200px; min-height: 200px; max-height: 35vh;
        border-left: none; border-top: 1px solid var(--border);
        flex-direction: row; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar-right .sidebar-section { min-width: 200px; flex-shrink: 0; border-bottom: none; border-right: 1px solid var(--border); overflow-y: auto; }
    .sidebar-right .sidebar-section.flex-grow { min-width: 220px; }
    .map-main { order: 1; flex: 1; min-height: 200px; }
    .map-hud { padding: 4px 8px; gap: 8px; flex-wrap: wrap; }
    .hud-section { gap: 4px; }
    .hud-label { font-size: 7px; }
    .hud-value { font-size: 9px; }
    .hud-legend { display: none; }
    .map-controls { top: 6px; right: 6px; gap: 3px; }
    .map-ctrl-btn { padding: 6px 10px; font-size: 8px; min-height: 30px; -webkit-tap-highlight-color: transparent; }
    .risk-score { font-size: 28px; }
    .risk-label { font-size: 9px; }
    .risk-detail { font-size: 8px; }
    .feed-item { padding: 5px 6px; -webkit-tap-highlight-color: transparent; }
    .feed-title { font-size: 9px; }
    .feed-time { font-size: 7px; }
    .vs-row { font-size: 8px; padding: 3px 0; }
    .fact-row { font-size: 8px; }
}
@media (max-width: 480px) {
    .map-layout { height: calc(100vh - 32px); }
    .sidebar-right { height: 170px; min-height: 170px; max-height: 30vh; }
    .sidebar-right .sidebar-section:last-child { display: none; }
    .sidebar-right .sidebar-section { min-width: 180px; }
    .map-hud { padding: 3px 6px; gap: 6px; }
    .hud-value { font-size: 8px; }
    .hud-label { font-size: 6px; }
    .map-ctrl-btn { padding: 5px 8px; font-size: 7px; min-height: 28px; }
    .risk-score { font-size: 24px; }
    .risk-display { gap: 6px; }
    .feed-item { padding: 4px 5px; margin-bottom: 3px; }
    .feed-risk-badge { font-size: 6px; }
}