/* Maritime Crisis Tracker v2.0 */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Orbitron:wght@400;600;700&display=swap');

:root {
    --mct-bg:#03080f;--mct-panel:rgba(5,12,25,0.97);--mct-border:rgba(0,180,220,0.18);
    --mct-accent:#00d4ff;--mct-red:#ff2d4a;--mct-orange:#ff7b00;--mct-yellow:#ffd200;
    --mct-green:#00ff99;--mct-cyan:#00cfff;--mct-text:#c2d6e8;--mct-muted:#4a6a88;
    --mct-font:'Rajdhani',sans-serif;--mct-mono:'Share Tech Mono',monospace;--mct-title:'Orbitron',sans-serif;
}
.mct-wrapper{position:relative;width:100%;background:var(--mct-bg);font-family:var(--mct-font);border:1px solid var(--mct-border);border-radius:6px;overflow:hidden;box-shadow:0 0 60px rgba(0,180,255,0.08),inset 0 0 80px rgba(0,0,0,0.6);color:var(--mct-text);}
.mct-wrapper.mct-fullscreen{position:fixed!important;inset:0;width:100vw!important;height:100vh!important;z-index:99999;border-radius:0;overflow-y:auto;}

/* Ticker */
.mct-ticker{display:flex;align-items:center;background:rgba(255,45,74,0.1);border-bottom:1px solid rgba(255,45,74,0.25);height:26px;overflow:hidden;}
.mct-ticker-label{background:var(--mct-red);color:#fff;font-family:var(--mct-title);font-size:9px;font-weight:700;letter-spacing:1px;padding:0 10px;height:100%;display:flex;align-items:center;flex-shrink:0;white-space:nowrap;}
.mct-ticker-track{flex:1;overflow:hidden;padding:0 14px;}
.mct-ticker-text{display:inline-block;white-space:nowrap;font-size:11px;font-family:var(--mct-mono);color:#ffb3bc;animation:mct-scroll 40s linear infinite;}
@keyframes mct-scroll{0%{transform:translateX(80%)}100%{transform:translateX(-100%)}}

/* Header */
.mct-header{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:linear-gradient(90deg,rgba(0,15,35,0.99),rgba(0,8,20,0.97));border-bottom:1px solid var(--mct-border);gap:8px;flex-wrap:wrap;}
.mct-header-left{display:flex;align-items:center;gap:12px;}
.mct-pulse{width:10px;height:10px;background:var(--mct-red);border-radius:50%;box-shadow:0 0 12px rgba(255,45,74,0.6);animation:mct-pulse 1.4s ease-in-out infinite;flex-shrink:0;}
@keyframes mct-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.6}}
.mct-header-title{font-family:var(--mct-title);font-size:13px;font-weight:700;letter-spacing:3px;color:var(--mct-accent);text-shadow:0 0 20px rgba(0,212,255,0.4);}
.mct-header-sub{font-family:var(--mct-mono);font-size:9px;color:var(--mct-muted);letter-spacing:2px;}
.mct-header-right{display:flex;align-items:center;gap:16px;font-family:var(--mct-mono);font-size:11px;color:var(--mct-muted);}
.mct-clock{color:var(--mct-accent);font-size:12px;letter-spacing:1px;}
.mct-fetch-time strong{color:var(--mct-green);}

/* Threat bar */
.mct-threat-bar{display:flex;border-bottom:1px solid var(--mct-border);background:rgba(0,8,20,0.9);}
.mct-threat-cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border-right:1px solid var(--mct-border);gap:2px;cursor:pointer;transition:background 0.2s;}
.mct-threat-cell:last-child{border-right:none;}
.mct-threat-cell:hover,.mct-threat-cell.active{background:rgba(0,212,255,0.05);}
.mct-threat-icon{font-family:var(--mct-title);font-size:9px;font-weight:700;color:var(--mct-muted);letter-spacing:1px;}
.mct-threat-region{font-family:var(--mct-title);font-size:8px;font-weight:600;letter-spacing:1.5px;color:var(--mct-accent);white-space:nowrap;}
.mct-threat-dial{display:flex;gap:2px;}
.mct-dial-pip{width:11px;height:4px;border-radius:2px;background:rgba(255,255,255,0.07);transition:background 0.3s,box-shadow 0.3s;}
.mct-threat-low .mct-dial-pip.on{background:var(--mct-green);}
.mct-threat-elevated .mct-dial-pip.on{background:var(--mct-yellow);box-shadow:0 0 4px rgba(255,210,0,0.5);}
.mct-threat-high .mct-dial-pip.on{background:var(--mct-orange);box-shadow:0 0 4px rgba(255,123,0,0.5);}
.mct-threat-severe .mct-dial-pip.on,.mct-threat-critical .mct-dial-pip.on{background:var(--mct-red);box-shadow:0 0 5px rgba(255,45,74,0.8);}
.mct-threat-critical .mct-dial-pip.on{animation:mct-pip 0.8s ease-in-out infinite;}
@keyframes mct-pip{0%,100%{opacity:1}50%{opacity:0.3}}
.mct-threat-label{font-family:var(--mct-mono);font-size:9px;color:var(--mct-muted);letter-spacing:1px;}
.mct-threat-count{font-family:var(--mct-mono);font-size:9px;color:var(--mct-accent);background:rgba(0,212,255,0.09);padding:1px 5px;border-radius:10px;}

/* Body */
.mct-body{display:flex;height:var(--mct-height,600px);}

/* Sidebar */
.mct-sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--mct-border);background:var(--mct-panel);}
.mct-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--mct-border);background:rgba(0,212,255,0.03);flex-shrink:0;}
.mct-sidebar-title{font-family:var(--mct-title);font-size:9px;letter-spacing:2px;color:var(--mct-accent);}
.mct-select{background:rgba(0,212,255,0.07);border:1px solid var(--mct-border);color:var(--mct-text);font-size:10px;padding:3px 5px;border-radius:3px;font-family:var(--mct-mono);outline:none;cursor:pointer;}
.mct-feed{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,212,255,0.2) transparent;}
.mct-feed::-webkit-scrollbar{width:3px;}
.mct-feed::-webkit-scrollbar-thumb{background:rgba(0,212,255,0.2);border-radius:2px;}

/* Feed items */
.mct-feed-item{padding:9px 12px;border-bottom:1px solid rgba(0,180,220,0.07);cursor:pointer;transition:background 0.15s;position:relative;}
.mct-feed-item:hover{background:rgba(0,212,255,0.04);}
.mct-feed-item.active{background:rgba(0,212,255,0.07);border-left:2px solid var(--mct-accent);}
.mct-feed-header{display:flex;align-items:center;gap:5px;margin-bottom:4px;}
.mct-sev{font-size:8px;font-family:var(--mct-mono);padding:1px 5px;border-radius:2px;font-weight:700;flex-shrink:0;letter-spacing:0.5px;}
.mct-sev-5{background:rgba(255,45,74,0.22);color:#ff8a97;border:1px solid rgba(255,45,74,0.35);}
.mct-sev-4{background:rgba(255,123,0,0.18);color:#ffaa55;border:1px solid rgba(255,123,0,0.3);}
.mct-sev-3{background:rgba(255,210,0,0.18);color:#ffe066;border:1px solid rgba(255,210,0,0.3);}
.mct-sev-2{background:rgba(0,255,153,0.1);color:#66ffb8;border:1px solid rgba(0,255,153,0.2);}
.mct-sev-1{background:rgba(0,207,255,0.08);color:#66ddff;border:1px solid rgba(0,207,255,0.18);}
.mct-feed-region{font-size:8px;font-family:var(--mct-mono);color:var(--mct-muted);letter-spacing:1px;text-transform:uppercase;}
.mct-feed-title{font-size:11px;line-height:1.4;color:var(--mct-text);font-weight:600;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mct-feed-meta{display:flex;align-items:center;gap:7px;font-size:9px;font-family:var(--mct-mono);color:var(--mct-muted);}
.mct-cdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.mct-cdot.confirmed{background:var(--mct-green);}
.mct-cdot.partial{background:var(--mct-yellow);}
.mct-cdot.unverified{background:var(--mct-red);}

/* Map area */
.mct-map-area{flex:1;display:flex;flex-direction:column;position:relative;}
.mct-map-toolbar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,8,20,0.95);border-bottom:1px solid var(--mct-border);flex-shrink:0;flex-wrap:wrap;}
.mct-btn{background:rgba(0,212,255,0.07);border:1px solid var(--mct-border);color:var(--mct-accent);font-family:var(--mct-mono);font-size:9px;padding:3px 8px;border-radius:3px;cursor:pointer;transition:background 0.15s,border-color 0.15s;white-space:nowrap;}
.mct-btn:hover,.mct-btn.on{background:rgba(0,212,255,0.18);border-color:var(--mct-accent);}
.mct-counter{margin-left:auto;font-family:var(--mct-mono);font-size:10px;color:var(--mct-muted);}
#mct-map{flex:1;min-height:300px;z-index:1;}

/* Legend */
.mct-legend{display:flex;gap:14px;padding:5px 14px;background:rgba(0,8,20,0.95);border-top:1px solid var(--mct-border);flex-wrap:wrap;flex-shrink:0;}
.mct-legend-item{display:flex;align-items:center;gap:5px;font-size:9px;font-family:var(--mct-mono);color:var(--mct-muted);}
.mct-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.mct-dot.red{background:var(--mct-red);box-shadow:0 0 5px rgba(255,45,74,0.7);}
.mct-dot.orange{background:var(--mct-orange);}
.mct-dot.yellow{background:var(--mct-yellow);}
.mct-dot.cyan{background:var(--mct-cyan);}
.mct-dot.blink{animation:mct-blink 1s ease-in-out infinite;}
@keyframes mct-blink{0%,100%{opacity:1;box-shadow:0 0 5px rgba(255,45,74,0.7)}50%{opacity:0.3;box-shadow:0 0 12px rgba(255,45,74,1)}}

/* Timeline */
.mct-timeline-bar{display:flex;align-items:center;gap:12px;padding:7px 14px;background:rgba(0,8,20,0.97);border-top:1px solid var(--mct-border);flex-shrink:0;overflow:hidden;}
.mct-tl-label{font-family:var(--mct-title);font-size:8px;letter-spacing:2px;color:var(--mct-muted);white-space:nowrap;flex-shrink:0;}
.mct-timeline{flex:1;display:flex;align-items:flex-end;gap:2px;height:28px;}
.mct-tl-bar{flex:1;min-width:3px;border-radius:1px 1px 0 0;background:rgba(0,212,255,0.2);transition:background 0.2s;cursor:pointer;}
.mct-tl-bar:hover{background:rgba(0,212,255,0.5);}
.mct-tl-bar.high{background:rgba(255,123,0,0.45);}
.mct-tl-bar.crit{background:rgba(255,45,74,0.55);}

/* Loading */
.mct-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:28px;font-family:var(--mct-mono);font-size:11px;color:var(--mct-muted);}
.mct-spinner{width:16px;height:16px;border:2px solid rgba(0,212,255,0.15);border-top-color:var(--mct-accent);border-radius:50%;animation:mct-spin 0.8s linear infinite;flex-shrink:0;}
@keyframes mct-spin{to{transform:rotate(360deg)}}

/* Leaflet popup */
.leaflet-popup-content-wrapper{background:rgba(4,12,26,0.97)!important;border:1px solid var(--mct-border)!important;border-radius:6px!important;box-shadow:0 4px 30px rgba(0,0,0,0.8),0 0 20px rgba(0,212,255,0.08)!important;color:var(--mct-text)!important;font-family:var(--mct-font)!important;max-width:290px!important;}
.leaflet-popup-tip{background:rgba(4,12,26,0.97)!important;}
.mct-popup-title{font-weight:700;font-size:12px;color:#fff;margin-bottom:6px;line-height:1.4;}
.mct-popup-badges{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
.mct-popup-badge{font-size:9px;font-family:var(--mct-mono);background:rgba(0,212,255,0.08);padding:1px 6px;border-radius:2px;border:1px solid rgba(0,212,255,0.15);color:var(--mct-muted);}
.mct-popup-summary{font-size:11px;line-height:1.5;color:#8aa8c0;margin-bottom:8px;}
.mct-popup-score{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.mct-popup-score-track{flex:1;height:3px;background:rgba(255,255,255,0.07);border-radius:2px;overflow:hidden;}
.mct-popup-score-fill{height:100%;border-radius:2px;}
.mct-popup-score-num{font-family:var(--mct-mono);font-size:10px;color:var(--mct-muted);}
.mct-popup-link{display:inline-block;font-size:9px;font-family:var(--mct-mono);color:var(--mct-accent);text-decoration:none;border:1px solid var(--mct-border);padding:3px 8px;border-radius:3px;transition:background 0.15s;}
.mct-popup-link:hover{background:rgba(0,212,255,0.1);}
.leaflet-popup-close-button{color:var(--mct-muted)!important;}

/* Zone label */
.mct-zone-label{background:transparent!important;border:none!important;box-shadow:none!important;color:rgba(0,212,255,0.4);font-family:var(--mct-title);font-size:8px;letter-spacing:2px;text-transform:uppercase;pointer-events:none;text-shadow:0 0 8px rgba(0,212,255,0.4);}

/* Responsive */
@media(max-width:768px){
    .mct-body{flex-direction:column;height:auto;}
    .mct-sidebar{width:100%;max-height:220px;border-right:none;border-bottom:1px solid var(--mct-border);}
    .mct-map-area{height:320px;}
    #mct-map{min-height:280px;}
    .mct-threat-bar{flex-wrap:wrap;}
    .mct-threat-cell{min-width:48%;}
    .mct-header-title{font-size:10px;letter-spacing:2px;}
}

/* ═══════════════════════════════════════════════════════
   MCT v3.0 ADDITIONS — Vessel Filter + Detail Panel
   ═══════════════════════════════════════════════════════ */

/* Vessel filter row under sidebar header */
.mct-vessel-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0,207,255,0.04);
    border-bottom: 1px solid rgba(0,207,255,0.12);
}
.mct-filter-label {
    font-family: var(--mct-mono, 'Share Tech Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--mct-muted, #5a7a8a);
    white-space: nowrap;
}
.mct-select-sm {
    flex: 1;
    font-size: 10px !important;
    padding: 3px 6px !important;
}

/* Vessel tag badge in feed items */
.mct-feed-vessel-tag {
    font-size: 9px;
    background: rgba(0,207,255,0.1);
    border: 1px solid rgba(0,207,255,0.2);
    border-radius: 3px;
    padding: 1px 5px;
    color: #00cfff;
    font-family: var(--mct-mono, monospace);
    letter-spacing: 0.04em;
}

/* Popup detail button */
.mct-popup-details-btn {
    display: block;
    width: 100%;
    margin: 6px 0 4px;
    padding: 5px 10px;
    background: rgba(0,207,255,0.12);
    border: 1px solid rgba(0,207,255,0.35);
    border-radius: 4px;
    color: #00cfff;
    font-size: 10px;
    font-family: var(--mct-mono, monospace);
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s;
}
.mct-popup-details-btn:hover {
    background: rgba(0,207,255,0.22);
}

/* ── Vessel Detail Panel ─────────────────────────────── */
.mct-vessel-panel-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999;
    backdrop-filter: blur(2px);
}
.mct-vessel-panel-overlay.open { display: block; }

.mct-vessel-panel {
    position: absolute;
    top: 0;
    right: -380px;
    width: 360px;
    max-width: 90vw;
    height: 100%;
    background: #0a1520;
    border-left: 1px solid rgba(0,207,255,0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
    overflow: hidden;
}
.mct-vessel-panel.open { right: 0; }

.mct-vessel-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(0,207,255,0.06);
    border-bottom: 1px solid rgba(0,207,255,0.18);
    flex-shrink: 0;
}
.mct-vessel-panel-icon {
    font-size: 22px;
    line-height: 1;
}
.mct-vessel-panel-title-group {
    flex: 1;
    min-width: 0;
}
.mct-vessel-panel-title {
    display: block;
    font-family: var(--mct-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    color: #e0f4ff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mct-vessel-panel-type {
    display: block;
    font-family: var(--mct-mono, monospace);
    font-size: 9px;
    color: #00cfff;
    letter-spacing: 0.08em;
    margin-top: 2px;
}
.mct-vessel-panel-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: #aaa;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.mct-vessel-panel-close:hover { border-color: #ff2d4a; color: #ff2d4a; }

.mct-vessel-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mct-vessel-panel-body::-webkit-scrollbar { width: 4px; }
.mct-vessel-panel-body::-webkit-scrollbar-thumb { background: rgba(0,207,255,0.2); border-radius: 2px; }

/* Score row */
.mct-vp-score-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0,207,255,0.06);
    border: 1px solid rgba(0,207,255,0.14);
    border-radius: 6px;
}
.mct-vp-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}
.mct-vp-score-num {
    font-family: var(--mct-mono, monospace);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}
.mct-vp-score-label {
    font-family: var(--mct-mono, monospace);
    font-size: 7px;
    letter-spacing: 0.1em;
    color: var(--mct-muted, #5a7a8a);
    margin-top: 3px;
}
.mct-vp-sev-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mct-vp-sev {
    font-family: var(--mct-mono, monospace);
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}
.mct-vp-sev.mct-sev-5 { background: rgba(255,45,74,0.18); color: #ff2d4a; border: 1px solid #ff2d4a55; }
.mct-vp-sev.mct-sev-4 { background: rgba(255,123,0,0.18); color: #ff7b00; border: 1px solid #ff7b0055; }
.mct-vp-sev.mct-sev-3 { background: rgba(255,210,0,0.18); color: #ffd200; border: 1px solid #ffd20055; }
.mct-vp-sev.mct-sev-2 { background: rgba(0,255,153,0.12); color: #00ff99; border: 1px solid #00ff9955; }
.mct-vp-sev.mct-sev-1 { background: rgba(0,207,255,0.12); color: #00cfff; border: 1px solid #00cfff55; }
.mct-vp-conf {
    font-family: var(--mct-mono, monospace);
    font-size: 9px;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.mct-vp-conf.mct-conf-confirmed   { background: rgba(0,255,153,0.12); color: #00ff99; }
.mct-vp-conf.mct-conf-partial     { background: rgba(255,210,0,0.12);  color: #ffd200; }
.mct-vp-conf.mct-conf-unverified  { background: rgba(255,45,74,0.12);  color: #ff2d4a; }

/* Detail rows */
.mct-vp-row {
    display: flex;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: baseline;
}
.mct-vp-key {
    font-family: var(--mct-mono, monospace);
    font-size: 8px;
    letter-spacing: 0.1em;
    color: var(--mct-muted, #5a7a8a);
    white-space: nowrap;
    min-width: 90px;
    text-transform: uppercase;
}
.mct-vp-val {
    font-family: var(--mct-mono, monospace);
    font-size: 11px;
    color: #c8dde8;
    word-break: break-word;
}

/* Summary block */
.mct-vp-summary {
    font-size: 11px;
    line-height: 1.6;
    color: #8aa8b8;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 5px;
    border-left: 2px solid rgba(0,207,255,0.25);
}
.mct-vp-summary:empty { display: none; }

/* Source links */
.mct-vp-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.mct-vp-link {
    display: block;
    padding: 7px 12px;
    background: rgba(0,207,255,0.07);
    border: 1px solid rgba(0,207,255,0.2);
    border-radius: 4px;
    color: #00cfff;
    font-size: 10px;
    font-family: var(--mct-mono, monospace);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: background 0.15s;
}
.mct-vp-link:hover { background: rgba(0,207,255,0.16); }
.mct-vp-links:empty { display: none; }

/* Responsive: on small screens panel goes full width from bottom */
@media (max-width: 600px) {
    .mct-vessel-panel {
        top: auto;
        right: 0;
        bottom: -100%;
        width: 100%;
        max-width: 100%;
        height: 70%;
        border-left: none;
        border-top: 1px solid rgba(0,207,255,0.2);
        transition: bottom 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    .mct-vessel-panel.open { bottom: 0; right: 0; }
    .mct-vessel-filter-row { flex-wrap: wrap; }
}