/* Skipi Map lightweight module v0.1.0 */
/* Broker-specific map/viz CSS extracted from skipi-broker dist/index.html. */

/* ----- view-viz (🗺 Карта) mobile layout (2026-06-15) -----
       Map goes full-bleed; the desktop filter sidebar becomes a slide-in
       drawer toggled by a floating ⚙ button, with a tap-to-close backdrop.
       Filter button sits top-RIGHT so it clears Leaflet's top-left zoom. */
    body.mobile-mode #view-viz { flex-direction:column; min-height:0; position:relative; }
    body.mobile-mode #view-viz .viz-map-wrap { flex:1; min-height:0; width:100%; }
    body.mobile-mode #view-viz .viz-sidebar {
        position:absolute; top:0; left:0; bottom:0; width:84%; max-width:320px;
        z-index:40; transform:translateX(-104%); transition:transform .22s ease;
        box-shadow:2px 0 18px rgba(0,0,0,.4);
    }
    body.mobile-mode #view-viz.viz-filters-open .viz-sidebar { transform:translateX(0); }
    body.mobile-mode #view-viz .viz-sidebar-backdrop {
        display:none; position:absolute; inset:0; z-index:35; background:rgba(0,0,0,.45);
    }
    body.mobile-mode #view-viz.viz-filters-open .viz-sidebar-backdrop { display:block; }
    body.mobile-mode #view-viz .viz-mobile-filter-btn {
        display:inline-flex; align-items:center; gap:5px;
        position:absolute; top:10px; right:10px; z-index:20;
        background:var(--accent); color:#fff; border:none; border-radius:20px;
        padding:9px 15px; font-size:13px; font-weight:600;
        box-shadow:0 2px 10px rgba(0,0,0,.4); cursor:pointer;
    }
    /* Empty-hint sits below the filter button instead of under it. */
    body.mobile-mode #view-viz #viz-empty-hint { top:58px; right:10px; max-width:200px; }
    /* Filter list scrolls within the drawer instead of pushing it tall. */
    body.mobile-mode #view-viz .viz-list { max-height:200px; }
    /* Touch-friendly timeline strip: slider wraps to its own full-width row. */
    body.mobile-mode #view-viz .viz-tl-strip { left:8px; right:8px; bottom:8px; gap:6px; padding:7px 9px; flex-wrap:wrap; }
    body.mobile-mode #view-viz .viz-tl-btn { min-width:42px; min-height:38px; font-size:15px; }
    body.mobile-mode #view-viz .viz-tl-meta { min-width:auto; flex:1; }
    body.mobile-mode #view-viz .viz-tl-slider { flex-basis:100%; min-width:100%; order:5; margin-top:2px; height:28px; }


/* Визуализатор: filter sidebar (left) + map (right) */
/* Mobile-only viz chrome (floating filter button + drawer backdrop) — the
   desktop sidebar is always visible, so these are hidden until mobile-mode. */
.viz-mobile-filter-btn, .viz-sidebar-backdrop { display:none; }
.viz-sidebar { display:flex; flex-direction:column; width:280px; min-width:240px; max-width:340px;
    background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; flex-shrink:0; }
.viz-filter-body { padding:12px 14px; display:flex; flex-direction:column; gap:14px; }
.viz-section { display:flex; flex-direction:column; gap:5px; }
.viz-section > label { font-size:10px; color:var(--text2); text-transform:uppercase;
    letter-spacing:.05em; font-weight:600; }
.viz-section select { padding:5px 8px; background:var(--surface2); border:1px solid var(--border);
    border-radius:3px; outline:none; font-size:11px; color:var(--text); }
.viz-section select:focus { border-color:var(--accent); }
.viz-layer-toggle { display:flex; flex-direction:column; gap:4px; }
.viz-layer-toggle label { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text); cursor:pointer; }
.viz-list { max-height:280px; overflow-y:auto; font-size:11px; display:flex; flex-direction:column; gap:2px; }
.viz-list-item { padding:4px 6px; border:1px solid var(--border); border-radius:3px;
    cursor:pointer; background:var(--surface2); color:var(--text2); line-height:1.3; }
.viz-list-item:hover { background:var(--hover); color:var(--text); border-color:var(--accent); }
.viz-list-item .vli-title { color:var(--text); font-weight:500; }
.viz-list-item .vli-meta { font-size:10px; color:var(--text3); }
.viz-map-wrap { flex:1; position:relative; }
/* Bloomberg-terminal style: solid dark sea, country contours only.
   Background colour is the "sea"; land polygons get a subtle fill via
   .viz-country class set in JS. */
#viz-map { position:absolute; inset:0; background:#0a1320; }
[data-theme="light"] #viz-map { background:#e6edf5; }
.leaflet-container.viz-mapbg { background:#0a1320 !important; }
[data-theme="light"] .leaflet-container.viz-mapbg { background:#e6edf5 !important; }
/* Pulsing origin dot — drawn as a div icon so we can keyframe it */
.viz-mode-tabs { display:inline-flex; gap:3px; }
.viz-tl-strip {
    position:absolute; left:12px; right:12px; bottom:12px; z-index:600;
    display:flex; align-items:center; gap:8px;
    background:rgba(20,28,40,.94); border:1px solid rgba(0,69,100,.55);
    border-radius:6px; padding:8px 12px;
    box-shadow:0 4px 14px rgba(0,0,0,.5);
}
[data-theme="light"] .viz-tl-strip { background:rgba(255,255,255,.96); border-color:rgba(0,69,100,.4); }
.viz-tl-btn {
    background:transparent; border:1px solid rgba(0,69,100,.5);
    color:var(--text); padding:4px 10px; border-radius:4px;
    cursor:pointer; font-size:13px; font-weight:600; min-width:32px;
}
.viz-tl-btn:hover { background:rgba(0,69,100,.15); }
.viz-tl-play { background:rgba(0,69,100,.25); }
.viz-tl-play.playing { background:#e55561; border-color:#e55561; color:#fff; }
.viz-tl-meta { min-width:130px; line-height:1.1; }
.viz-tl-date { font-size:13px; font-weight:700; color:var(--text); }
.viz-tl-counts { font-size:10px; color:var(--text3); }
.viz-tl-slider { flex:1; min-width:120px; cursor:pointer; accent-color:#004564; }
.viz-mode-tab { padding:3px 8px; border-radius:3px; cursor:pointer; font-size:11px;
    color:var(--text2); border:1px solid transparent; user-select:none; }
.viz-mode-tab:hover { background:var(--surface2); color:var(--text); }
.viz-mode-tab.active { background:var(--surface2); color:var(--text); border-color:var(--accent); }
.viz-pulse { position:relative; width:14px; height:14px; }
.viz-pulse .core { position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
    border-radius:50%; background:#004564; box-shadow:0 0 8px #004564, 0 0 16px rgba(0,69,100,.6); }
.viz-pulse .ring { position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
    border-radius:50%; border:1.5px solid #004564; opacity:.7; animation:vizPulse 1.8s ease-out infinite; }
.viz-pulse.hot .core { background:#e2b93d; box-shadow:0 0 10px #e2b93d, 0 0 20px rgba(226,185,61,.7); }
.viz-pulse.hot .ring { border-color:#e2b93d; animation-duration:1.2s; }
@keyframes vizPulse {
    0%   { transform:scale(1); opacity:.7; }
    100% { transform:scale(3.5); opacity:0; }
}
/* Cargo arrow marker (origin dot) tooltip styling */
.leaflet-tooltip.viz-cargo-label { background:rgba(20,28,40,.95); color:#dcddde; border:1px solid rgba(0,69,100,.6);
    box-shadow:0 2px 8px rgba(0,0,0,.6); padding:4px 7px; border-radius:3px; font-size:10px;
    font-family:var(--font-ui); white-space:nowrap; }
[data-theme="light"] .leaflet-tooltip.viz-cargo-label { background:rgba(255,255,255,.95); color:#1e1e1e; }
.leaflet-tooltip.viz-cargo-label::before { display:none; }
.leaflet-tooltip.viz-cargo-label .vz-badge { display:inline-block; background:#004564; color:#fff;
    padding:1px 5px; border-radius:8px; font-size:9px; font-weight:600; margin-left:4px; }

/* MSI (Maritime Safety Information) layer */
.viz-msi-status { font-size:10px; color:var(--text3); margin-top:4px; line-height:1.3; }
.leaflet-tooltip.viz-msi-label {
    background:rgba(40,22,12,.95); color:#f0d0b8; border:1px solid rgba(196,92,38,.7);
    box-shadow:0 2px 8px rgba(0,0,0,.55); padding:3px 6px; border-radius:3px; font-size:10px;
    font-family:var(--font-ui); white-space:nowrap;
}
[data-theme="light"] .leaflet-tooltip.viz-msi-label {
    background:rgba(255,248,242,.96); color:#5a2e12; border-color:rgba(196,92,38,.5);
}
.leaflet-tooltip.viz-msi-label::before { display:none; }
.msi-popup .msi-pop-title { font-weight:700; font-size:12px; margin-bottom:2px; }
.msi-popup .msi-pop-sub { font-size:11px; color:var(--text2, #aaa); margin-bottom:4px; }
.msi-popup .msi-pop-meta { font-size:10px; color:var(--text3, #888); margin-bottom:6px; }
.msi-popup .msi-pop-body {
    font-size:11px; white-space:pre-wrap; max-height:200px; overflow-y:auto;
    line-height:1.35; margin-bottom:6px;
}
.msi-popup .msi-pop-disc { font-size:9px; color:#a06040; font-style:italic; }

.lead-map-wrap { flex:1.8 1 0; position:relative; min-width:300px; }
#lead-map { position:absolute; inset:0; }
.lead-sidebar { flex:1 1 0; overflow-y:auto; padding:14px 18px; background:var(--surface); min-width:280px; }
.lead-sidebar h3 { font-size:13px; font-weight:600; margin:14px 0 6px; }
.lead-sidebar h3:first-child { margin-top:0; }
.lead-sidebar .raw-text { font-size:11px; max-height:none; }
/* Leaflet always-visible label (tooltip permanent=true) */
.leaflet-tooltip.lead-label { background:var(--bg); color:var(--text); border:1px solid var(--border);
    box-shadow:0 2px 6px rgba(0,0,0,.3); padding:4px 8px; border-radius:4px; font-size:11px;
    font-family:var(--font-ui); white-space:nowrap; }
.leaflet-tooltip.lead-label.cargo-load { border-left:3px solid #4ec970; }
.leaflet-tooltip.lead-label.cargo-disch { border-left:3px solid #e55561; }
.leaflet-tooltip.lead-label.vessel-open { border-left:3px solid #004564; }
.leaflet-tooltip.lead-label::before { display:none; }
.leaflet-tooltip-top.lead-label:before { display:none; }