/* ── Reset & base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --panel-w: 340px;
    --bar-h: 48px;
    --accent: #f2c314;
    --accent-dim: #d4a812;
    --route: #00b8ff;
    --off: #9e9e9e;
    --euromed: #f44336;
    --bg: #1c1c1e;
    --surface: #2c2c2e;
    --surface2: #3a3a3c;
    --text: #e8e8e8;
    --text-dim: #8e8e93;
    --border: rgba(255,255,255,.1);
    --radius: 8px;
    --shadow: 0 2px 12px rgba(0,0,0,.4);
    --transition: .25s cubic-bezier(.4,0,.2,1);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--text);
}

html, body { height: 100%; overflow: hidden; background: var(--bg); }

/* ── Map ───────────────────────────────────────────────────────────── */
#map {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ── Hamburger ─────────────────────────────────────────────────────── */
.hamburger-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    width: 32px;
    height: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.hamburger-btn span {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: var(--transition);
}
.hamburger-btn:hover { background: var(--surface2); }

/* ── Loading bar (sits just above info-bar) ──────────────────────── */
.loading-bar {
    position: fixed;
    bottom: var(--bar-h);
    left: var(--panel-w);
    right: 0;
    height: 3px;
    z-index: 901;
    background: transparent;
    overflow: hidden;
    transition: left var(--transition);
}
.panel.collapsed ~ .loading-bar { left: 0; }
.loading-bar-fill {
    height: 100%;
    width: 30%;
    background: var(--route, #00b8ff);
    border-radius: 0 2px 2px 0;
    animation: loading-slide 1.4s ease-in-out infinite alternate;
}
.loading-bar.flash .loading-bar-fill {
    animation: loading-flash 0.4s ease-out forwards;
}
@keyframes loading-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(333%); }
}
@keyframes loading-flash {
    0%   { width: 0; opacity: 1; }
    40%  { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

/* ── NextPort logo ────────────────────────────────────────────────── */
.nextport-logo {
    position: fixed;
    bottom: calc(var(--bar-h) + 12px);
    right: 12px;
    z-index: 800;
    opacity: .7;
    transition: opacity .2s;
}
.nextport-logo:hover { opacity: 1; }
.nextport-logo img { height: 32px; border-radius: 4px; }

/* ── Utility ──────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* MapLibre overrides */
.maplibregl-ctrl-top-right { top: 12px; right: 12px; }

/* ── Port hover popup ─────────────────────────────────────────────── */
.port-hover-popup .maplibregl-popup-content {
    background: var(--surface);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
    border: 1px solid var(--border);
    pointer-events: none;
}
.port-hover-popup .maplibregl-popup-tip {
    border-top-color: var(--surface);
}
/* Light theme: popup uses white bg for contrast */
.light-theme .port-hover-popup .maplibregl-popup-content {
    background: #fff;
    color: #333;
    border-color: #ddd;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.light-theme .port-hover-popup .maplibregl-popup-tip {
    border-top-color: #fff;
}