:root{
  --bg:#0f1720;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#06b6d4;
  --glass: rgba(255,255,255,0.03);
  --topbar-height: 68px;
}
html,body,#app{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{background:linear-gradient(180deg,#071124 0%, #071524 100%);color:#e6eef6}
.topbar{position:fixed;left:0;right:0;top:0;z-index:900;height:var(--topbar-height);background:var(--glass);backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(2,6,23,0.45);display:block}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:100%}
.topbar-inner .left{display:flex;flex-direction:column;justify-content:center}
.brand{font-weight:700;font-size:24px;color:#fff}
.subtitle{font-size:12px;color:var(--muted);margin-top:0}
.page-info{font-size:12px;color:var(--muted)}
#sidebar .last-updated{font-size:12px;color:var(--muted)}
.topbar .controls{display:flex;gap:8px;align-items:center}
.topbar .controls input[type=search]{padding:8px 10px;border-radius:8px;border:0;background:rgba(255,255,255,0.04);color:#e6eef6;outline:none;width:360px;max-width:46vw}
.topbar .controls button{background:var(--accent);border:0;color:#04272a;padding:8px 10px;border-radius:8px;font-weight:600;cursor:pointer}
.topbar .controls .last-updated{margin-left:8px;color:var(--muted);font-size:12px}
#map{position:fixed;left:0;right:0;top:var(--topbar-height);bottom:0;z-index:0}
/* legend removed */

/* Sidebar */
#sidebar{position:fixed;right:0;top:0;height:100%;width:360px;max-width:92vw;background:linear-gradient(180deg, rgba(15,23,32,0.98), rgba(6,10,15,0.98));z-index:1200;padding:22px 18px;border-left:1px solid rgba(255,255,255,0.03);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.9,.2,1);box-shadow:-24px 0 48px rgba(0,0,0,0.6);display:flex;flex-direction:column}
#sidebar.open{transform:translateX(0)}
/* Sidebar header: contain title and close button outside the scrollable details */
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 6px 18px}
.sidebar-header h2{margin:0;font-size:18px}
#closeSidebar{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:6px;border-radius:6px}
#closeSidebar:hover{background:rgba(255,255,255,0.02);color:#ffffff}

/* Track toggle button placed inline with links to avoid overlapping the close button */
.track-toggle{display:block;margin:8px 0 12px 0;padding:8px 10px;border-radius:8px;background:var(--accent);color:#04272a;border:0;font-weight:700;cursor:pointer;position:relative;right:auto;top:auto}
#sidebar .ship-image{margin:8px 0 12px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:44vh;overflow:hidden}
#sidebar .ship-image img{max-width:100%;height:auto;max-height:38vh;border-radius:8px;display:block;box-shadow:0 8px 24px rgba(0,0,0,0.6);object-fit:cover}
#details h2{margin:6px 0 8px 0}
#sidebar #details{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-top:6px;padding-bottom:18px;box-sizing:border-box}
#shipMeta{font-size:13px;color:var(--muted);line-height:1.6}
#links{padding-left:16px}
#links a{color:var(--accent);text-decoration:none}

.leaflet-container .ship-marker{line-height:0}
.leaflet-container .ship-label{font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.6)}
/* visible label text rendered next to marker */
.leaflet-container .ship-label-text{font-size:13px;font-weight:700;color:#ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.75);display:inline-block;vertical-align:middle;margin-left:8px;white-space:nowrap}
.ship-marker svg{display:block}

@media (max-width:700px){
  #sidebar{width:92vw}
  .topbar{left:8px;right:8px}
  .topbar .controls input[type=search]{width:40vw}
}

/* Mobile header improvements: stack brand and controls, increase contrast and spacing */
@media (max-width:700px){
  .topbar{height:88px;left:8px;right:8px}
  #map{top:88px}
  .topbar-inner{flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:10px 12px;gap:8px}
  .brand{font-size:20px}
  .topbar .controls{width:100%;display:flex;justify-content:flex-end;gap:8px}
  .topbar .controls input[type=search]{width:58%;max-width:none}
  .topbar .controls button{padding:6px 8px;font-size:13px}
  .topbar .controls .last-updated{display:none}
  /* ensure image credit appears under the image on mobile */
  #sidebar .ship-image{flex-direction:column}
}

/* Stats modal */
.stats-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:90vw;max-width:980px;height:70vh;background:linear-gradient(180deg, rgba(15,23,32,0.98), rgba(6,10,15,0.98));z-index:1000;padding:18px;border-radius:12px;box-shadow:0 20px 60px rgba(2,6,23,0.7)}
.stats-modal .close{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--muted);font-size:18px}
.stats-modal .charts{display:flex;gap:12px;height:100%}
.stats-modal .stats-title{margin:4px 0 12px 0;color:#e6eef6;font-size:18px;font-weight:700;text-align:center}
.stats-modal canvas{background:transparent;flex:1}
.overlay{position:fixed;inset:0;background:rgba(2,6,23,0.5);z-index:900}

/* Playback modal and bar */
.playback-modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.55);z-index:2000}
.playback-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:820px;max-width:94vw;background:linear-gradient(180deg, rgba(15,23,32,0.98), rgba(6,10,15,0.98));z-index:2001;padding:18px;border-radius:12px;box-shadow:0 20px 60px rgba(2,6,23,0.7);box-sizing:border-box;display:flex;flex-direction:column;height:520px;min-height:420px}
.playback-modal .close{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.playback-modal .modal-body{flex:1 1 auto;overflow:auto;padding-top:8px;padding-right:8px}
.playback-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.pb-btn{background:var(--accent);border:0;color:#04272a;padding:8px 10px;border-radius:8px;font-weight:700;cursor:pointer}

.playback-modal input[type=search]{padding:8px 10px;border-radius:8px;border:0;background:rgba(255,255,255,0.04);color:#e6eef6;outline:none;width:100%;box-sizing:border-box}
.playback-modal .modal-body .ship-list{margin-top:8px}
.playback-modal .modal-body label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--muted);cursor:pointer}
.playback-modal .modal-body label:hover{background:rgba(255,255,255,0.02)}
.playback-modal .modal-body label + label{margin-top:6px}
.playback-modal .modal-body label input[type=checkbox]{width:18px;height:18px}
.playback-modal .modal-body label span{flex:1;color:var(--muted);font-weight:600}

.playback-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:1500;background:linear-gradient(180deg, rgba(8,12,16,0.9), rgba(6,10,12,0.95));padding:10px;border-radius:10px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,0.6)}
.playback-bar .playback-controls{display:flex;gap:6px;align-items:center}
.playback-bar .playback-controls .pb-btn{background:none;color:#ffffff;border:0;padding:6px 8px;border-radius:6px;font-weight:700;box-shadow:none}
.playback-bar .playback-controls .pb-btn:hover{background:rgba(255,255,255,0.03)}
.playback-bar .pb-speed .pb-btn{background:none;color:#ffffff;border:0;padding:6px 8px;border-radius:6px;font-weight:700;box-shadow:none}
.playback-bar .pb-speed .pb-btn:hover{background:rgba(255,255,255,0.03)}
.pb-time{min-width:160px;color:var(--muted);font-weight:700}
.pb-timeline{flex:1 1 auto;min-width:0}
.pb-canvas{width:100%;height:36px;display:block}
/* playback moving-dot label */
.playback-tooltip.leaflet-tooltip{background:rgba(0,0,0,0.7);border-radius:6px;padding:4px 8px;color:#fff;font-weight:700;font-size:12px}
.playback-tooltip.leaflet-tooltip:before{border-top-color:rgba(0,0,0,0.7)}
/* warning style for playback tooltip when position is on land */
.playback-tooltip.playback-warning.leaflet-tooltip{background:rgba(255,59,48,0.95);color:#fff}
.playback-tooltip.playback-warning.leaflet-tooltip:before{border-top-color:rgba(255,59,48,0.95)}
/* selected vessels summary in playback modal */
.pb-selected{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-speed{display:flex;align-items:center;gap:8px}

/* Playback layout fixes: ensure timeline has flexible space and speed controls reserve width */
.playback-bar{display:flex;align-items:center;gap:12px}
.playback-bar .pb-time{flex:0 0 160px;margin-right:8px}
.playback-bar .pb-timeline{flex:1 1 auto;min-width:320px;margin:0 8px}
.playback-bar .pb-speed{flex:0 0 340px;display:flex;align-items:center;gap:8px;justify-content:flex-end}

@media (max-width:700px){
  .playback-bar .pb-speed{flex:0 0 180px}
  .playback-bar .pb-time{flex:0 0 120px}
  .playback-bar .pb-timeline{min-width:120px}
}

/* Map legend */
.map-legend{position:fixed;right:12px;top:84px;z-index:1100;background:rgba(0,0,0,0.6);padding:10px;border-radius:8px;color:#fff;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,0.5);box-sizing:border-box;max-height:calc(100vh - 120px);overflow:auto}
.map-legend .legend-title{font-weight:700;margin-bottom:6px}
.map-legend .legend-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.map-legend .swatch{width:14px;height:14px;border-radius:3px;display:inline-block}
.map-legend .lbl{font-size:12px;color:#fff}

/* Mooring log shown under the legend */
.map-log{margin-top:8px;max-height:220px;overflow-y:auto;overflow-x:hidden;border-top:1px solid rgba(255,255,255,0.03);padding-top:8px}
.map-log .map-log-entry{font-size:12px;color:var(--muted);padding:6px 4px;border-radius:6px}
.map-log .map-log-entry time{display:block;color:#e6eef6;font-weight:700}

/* inactive pulsating ring around inactive ships */
.ship-marker-wrap{position:relative}
.ship-marker-wrap .inactive-ring{position:absolute;left:0;top:0;transform:none;width:48px;height:48px;border-radius:50%;pointer-events:none;display:none}
.ship-marker-wrap.inactive .inactive-ring{display:block;}
.ship-marker-wrap .inactive-ring .pulse{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 12px rgba(255,140,0,0.35);border:3px solid rgba(255,140,0,0.95);}
.ship-marker-wrap.inactive .inactive-ring .pulse{animation: pulseRing 2.2s ease-out infinite}
@keyframes pulseRing{
  0%{transform:scale(0.6);opacity:0.9}
  70%{transform:scale(1.6);opacity:0.12}
  100%{transform:scale(2.0);opacity:0}
}
.ship-marker-wrap.inactive .inactive-ring .dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:rgba(255,140,0,0.98);box-shadow:0 0 12px rgba(255,140,0,0.45)}

/* anomaly badge for AIS issues */
/* anomaly badge removed — persistent red badge disabled */

.playback-anomaly{color:#ff3b30;stroke:#ff3b30}

/* Submarine cable line glow */
.cable-line{
  stroke-linecap:round;
  stroke-linejoin:round;
  filter: drop-shadow(0 0 10px rgba(0,255,128,0.85));
}

/* Port marker tweaks */
.port-marker img{border-radius:6px}

/* small fixed footer with Ukrainian flag */
.site-footer{position:fixed;right:12px;left:auto;bottom:12px;z-index:1100;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);color:#ffffff;padding:8px 12px;border-radius:10px;font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,0.45);max-width:420px}
.site-footer a{color:inherit;text-decoration:none}

.site-footer .footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between}
.site-footer .footer-count{font-weight:800;font-size:14px}
.site-footer .footer-sources{font-weight:600;font-size:12px;color:var(--muted)}
.site-footer .footer-sources a{color:var(--accent);text-decoration:none;margin:0 4px}
.site-footer .footer-note{margin-top:6px;font-size:12px;color:var(--muted);font-weight:600}

@media (max-width:420px){
  .site-footer{right:8px;left:8px;bottom:8px;font-size:13px;padding:8px 10px;max-width:none}
  .site-footer .footer-inner{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Image credit under ship image: plain white text, no underline or visited effects */
.image-credit{margin-top:8px;text-align:center;font-size:12px;color:#ffffff}
.image-credit a{color:#ffffff;text-decoration:none;/* keep as plain white text */}
.image-credit a:visited,.image-credit a:hover,.image-credit a:active{color:#ffffff;text-decoration:none}

/* Notes (markdown) in sidebar */
.ship-notes{margin:10px 0;color:var(--muted);font-size:14px}
.ship-notes p{margin:6px 0}
.ship-notes a{color:var(--accent);text-decoration:underline}
.ship-notes .md-code{background:rgba(255,255,255,0.03);padding:8px;border-radius:6px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;white-space:pre-wrap}
.ship-notes .md-inline{background:rgba(255,255,255,0.02);padding:2px 4px;border-radius:4px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace}
.ship-notes .md-list{padding-left:18px;margin:6px 0}
.notes-empty{color:var(--muted);font-style:italic}

/* favicon links in sidebar */
.fav-link{display:flex;align-items:center;gap:10px;text-decoration:none;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.02);color:inherit}
.fav-icon{width:22px;height:22px;border-radius:4px;display:inline-block;vertical-align:middle}
.fav-link-item{display:block;margin:6px 0}
.fav-domain{color:var(--muted);font-size:13px;margin-left:6px}

/* ensure sidebar details uses available space and scrolls naturally */
/* remove fixed max-height so the flex layout can fill the sidebar */
#sidebar #details{max-height:none}