/**
 * Flightarrow — infopaneel als zwevende kaart.
 *
 * Het live selectie-paneel is #flightarrow-info-panel (dynamisch gebouwd door
 * flightarrow-columns.js), gehost in tar1090's sidebar
 * (#sidebar_container → #sidebar_canvas). Van huis uit is die sidebar een
 * volle-hoogte kolom rechts die de kaart verkleint. Hier maken we de sidebar
 * een zwevende overlay linksboven: uit de flex-flow gehaald (position:fixed)
 * zodat de kaart altijd volle breedte houdt, met de kaart-look (ronde hoeken,
 * schaduw) op het paneel en interne scroll zodra de inhoud te hoog wordt.
 *
 * Zichtbaarheid blijft van tar1090 (de sidebar verschijnt bij selectie); wij
 * stylen alleen de getoonde staat. Achtergrond-regels gebruiken `body #…` omdat
 * flightarrow-columns.js zijn eigen <style> ná deze <link> injecteert en wij
 * die anders zouden verliezen. Raakt geen vendored upstream-bestand inhoudelijk.
 */

/* Sidebar uit de layout-flow → de kaart houdt volle breedte, de sidebar zweeft. */
body #sidebar_container {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 32px);
    width: 360px !important;
    background: transparent !important;
    z-index: 1500;
    overflow: visible;
}

body #sidebar_canvas {
    background: transparent !important;
    height: auto !important;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border-radius: 16px;
    padding: 0 !important;
}

/* De kaart-look op het paneel zelf. */
body #flightarrow-info-panel {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.28);
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Resize-handle en sidebar-knoppen horen niet in een zwevend kaartje. */
#splitter,
#toggle_sidebar_button,
#expand_sidebar_button,
#shrink_sidebar_button { display: none !important; }

/* Kaart altijd volle breedte (de sidebar zit niet meer in de flow). */
body #map_container { flex: 1 1 auto !important; }

/* Smal scherm: bijna volle breedte, marge behouden. */
@media (max-width: 560px) {
    body #sidebar_container {
        left: 10px;
        right: 10px;
        top: 10px;
        width: auto;
        max-height: calc(100vh - 20px);
    }
    body #sidebar_canvas { max-height: calc(100vh - 20px); }
}