/* ============================================================================
   pd4pm-strak.css  —  strakke stijl + dag- en nachtstand voor de P2000-pagina
   ============================================================================
   Los bestand, bedoeld om ALS LAATSTE ingeladen te worden, na Main.css,
   stylePC.css, swipeable-content.css en p2000-filter.css. Alles hieronder is
   aanvullend: haal je de regel uit index.html weg, dan ziet de pagina er weer
   uit zoals hij was.

   In je index.html, onder de laatste <link rel="stylesheet">:

       <link rel="stylesheet" href="CSS/pd4pm-strak.css?v=1.0">

   Hoort bij JS/pd4pm-strak.js.
   ============================================================================ */

/* ==========================================================================
   P2000 — nieuwe stijl (test)
   Zelfde huisstijl als de scannerpagina: donker, vierkante hoeken, kleur
   alleen waar hij iets betekent. Main.css gebruikt overal !important,
   dus hier ook; anders wint het oude.
   ========================================================================== */

:root {
    /* Mobiel blijft de balk zoals hij is (70px); op de desktop wordt hij
       slanker. Alle posities rekenen met deze waarde. */
    --kop: 70px;
    --lijn: #30363d;
    --vlak: #0d1117;
    --vlak2: #161b22;
    --tekst: #e6edf3;
    --dim: #9aa4ae;
    --accent: #58a6ff;

    /* --- Wat per stand verschilt ---------------------------------------
       Dagstand: precies de tinten die de pagina altijd had. De balk en de
       tabbladen waren van zichzelf al donker glas, dus daar verandert in de
       dagstand niets; het lichte grijs van het meldingenpaneel is het
       verschil dat je ziet. */
    --paneel: rgba(180, 180, 180, 0.6);
    --balk: rgba(15, 15, 25, 0.65);
    --paneel-rand: rgba(0, 0, 0, 0.18);
    --kaart-onder: #000;
}

html[data-thema="nacht"] {
    --paneel: rgba(13, 17, 23, 0.55);
    --balk: rgba(13, 17, 23, 0.88);
    --paneel-rand: rgba(255, 255, 255, 0.10);
    --kaart-onder: #0d1117;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif !important;
    background: var(--vlak) !important;
    color: var(--tekst) !important;
}

/* ======================= 1. Overal vierkante hoeken ======================= */

*, *::before, *::after { border-radius: 0 !important; }

/* Wat rond hoort te blijven */
.pd4pm-province-dot, .indicator-dot, .news-indicator, .news-indicator::before,
.pd4pm-slider::-webkit-slider-thumb, .pd4pm-slider::-moz-range-thumb {
    border-radius: 50% !important;
}
.pd4pm-switch, .pd4pm-switch-slider, .pd4pm-switch-slider::before,
.switch, .slider, .slider::before { border-radius: 999px !important; }
.leaflet-marker-icon, .leaflet-marker-icon *,
.leaflet-div-icon, .leaflet-div-icon * { border-radius: revert !important; }

/* ============================ 2. Balk bovenaan ============================
   Zoals je hem had — logo links, klok groot in het midden, knoppen rechts —
   alleen donkerder, met een dunne rand in plaats van de zachte schaduw. */

nav.pd4pm-nav {
    background: var(--balk) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
}

div.pd4pm-time { text-shadow: none !important; color: #e6edf3 !important; }
div.pd4pm-date { color: #7d8590 !important; }

/* Onder de 300px — een dichtgeklapte Galaxy Fold is zo'n 280px breed — loopt
   de klok onder de knoppen rechts door. De klok staat namelijk midden in de
   balk, los van het logo en de knoppen, dus die weten niets van elkaar. Daar
   de datumregel eraf en de tijd wat kleiner; dan past het weer. */
@media (max-width: 300px) {
    div.pd4pm-date { display: none !important; }
    div.pd4pm-time { font-size: 18px !important; letter-spacing: 0.5px !important; }
}

.pd4pm-btn {
    background: rgba(48, 54, 61, 0.45) !important;
    border: 1px solid var(--lijn) !important;
    box-shadow: none !important;
    color: #b1bac4 !important;
}
.pd4pm-btn:hover { background: #21262d !important; border-color: #8b949e !important; color: var(--tekst) !important; }

/* Het uitklapmenu: vierkant, donker, dezelfde stijl als de menu's in de scanner */
.pd4pm-dropdown {
    background: var(--vlak2) !important;
    border: 1px solid var(--lijn) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding: 6px !important;
}
.pd4pm-dropdown-item { color: #c9d1d9 !important; font-size: 13px !important; padding: 9px 10px !important; }
.pd4pm-dropdown-item:hover { background: #21262d !important; }
.pd4pm-dropdown-header { color: #6e7681 !important; letter-spacing: 0.6px !important; }
.pd4pm-dropdown-divider { background: var(--lijn) !important; margin: 5px 2px !important; }

#datum-picker {
    background: rgba(13, 17, 23, 0.9) !important;
    border: 1px solid var(--lijn) !important;
    color: #c9d1d9 !important;
    box-shadow: none !important;
}

/* ===================== 2. Kaart, panelen en tabbladen =====================
   De plaatsing alleen op de desktop aanpassen: op een telefoon staat het
   paneel onderaan en blijft alles zoals het nu werkt. */

#map { background: var(--kaart-onder) !important; }

/* Doorzichtig blijven: de kaart mag er doorheen schemeren, net als nu.
   In de dagstand het lichte grijs van vroeger, 's nachts donker. */
#list-container {
    background: var(--paneel) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

@media (min-width: 769px) {
    .container { height: calc(100vh - var(--kop)) !important; }

    #list-container {
        top: calc(var(--kop) + env(safe-area-inset-top, 0px)) !important;
        height: calc(100vh - var(--kop) - env(safe-area-inset-top, 0px)) !important;
        border-left: 1px solid var(--lijn) !important;
    }
}

.tab-navigation {
    background: var(--balk) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.tab-navigation::after { border-radius: 0 !important; background: #484f58 !important; }

.tab-buttons { height: 34px !important; gap: 0 !important; background: transparent !important; }
.tab-button {
    height: 34px !important; background: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-family: inherit !important; font-size: 12px !important;
    letter-spacing: 0.4px !important; color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important; font-weight: 600 !important;
}
.tab-button:last-child { border-right: none !important; }
.tab-button:hover { background: rgba(255, 255, 255, 0.06) !important; color: rgba(255,255,255,0.85) !important; }
.tab-button.active { background: rgba(255, 255, 255, 0.10) !important; color: #fff !important; }
.tab-button.active::after {
    width: 100% !important; height: 2px !important; border-radius: 0 !important;
    background: var(--accent) !important; box-shadow: none !important;
}

/* ===================== 3. Uitklappen op een breed scherm =====================
   Een tabblad met het greepje naar links slepen (of op ⇤ klikken) zet hem in
   een eigen paneel aan de linkerkant. Alleen vanaf 1100px; daaronder verandert
   er niets en werkt de pagina zoals hij nu werkt. */

.uitklap-greep { display: none; }

@media (min-width: 1100px) {
    .tab-button { position: relative !important; }
    .uitklap-greep {
        display: flex; align-items: center; justify-content: center;
        position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
        width: 18px; height: 22px; cursor: grab;
        color: #6e7681; background: transparent; border: none; padding: 0;
        opacity: 0; transition: opacity 0.15s, color 0.15s;
    }
    .tab-button:hover .uitklap-greep { opacity: 1; }
    .uitklap-greep:hover { color: var(--accent); }
    .tab-button.links-geparkeerd { color: var(--accent) !important; opacity: 0.75 !important; }
}

#zij-paneel {
    position: fixed; left: 0;
    top: calc(var(--kop) + env(safe-area-inset-top, 0px));
    height: calc(100vh - var(--kop) - env(safe-area-inset-top, 0px));
    width: 30%; z-index: 2;
    background: var(--paneel);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    display: none; flex-direction: column; overflow: hidden;
}
#zij-paneel.open { display: flex; }
#zij-paneel .zij-kop {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    height: 34px; padding: 0 6px 0 12px;
    /* Zelfde donkere strip als de tabbladenbalk, ook in de dagstand; anders
       valt witte tekst weg tegen het lichte paneel. */
    background: var(--balk); border-bottom: 1px solid rgba(255,255,255,0.10);
    font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
    text-transform: uppercase; color: #fff;
}
#zij-paneel .zij-kop .spacer { flex: 1; }
#zij-paneel .zij-kop button {
    background: transparent; border: 1px solid transparent; color: #8b949e;
    cursor: pointer; font-family: inherit; font-size: 13px; padding: 4px 7px; line-height: 1;
}
#zij-paneel .zij-kop button:hover { color: var(--tekst); border-color: var(--lijn); }
#zij-paneel > .page-container { flex: 1; min-height: 0; overflow-y: auto; display: block !important; }

/* Schuifbalk aan de buitenrand. Staat een tabblad links, dan hoort de balk
   aan de linkerkant en niet tegen de kaart aan. CSS kent daar geen knop voor;
   de plek volgt de leesrichting. Dus: het bakje op rechts-naar-links zetten
   en de inhoud er meteen weer uit halen, anders draait alles binnenin mee. */
#zij-paneel > .page-container { direction: rtl; }
#zij-paneel > .page-container > * { direction: ltr; }

/* Sleepranden om een paneel breder of smaller te maken */
.paneel-rand {
    position: fixed; top: calc(var(--kop) + env(safe-area-inset-top, 0px));
    height: calc(100vh - var(--kop) - env(safe-area-inset-top, 0px));
    width: 6px; z-index: 3; cursor: ew-resize; background: transparent;
}
.paneel-rand:hover, .paneel-rand.bezig { background: rgba(88, 166, 255, 0.35); }
@media (max-width: 1099px) { .paneel-rand { display: none; } }

/* Waar je naartoe sleept */
.sleep-doel {
    position: fixed; top: calc(var(--kop) + env(safe-area-inset-top, 0px)); left: 0;
    width: 32vw; height: calc(100vh - var(--kop) - env(safe-area-inset-top, 0px));
    z-index: 1500; display: none;
    align-items: center; justify-content: center; text-align: center;
    background: rgba(13, 17, 23, 0.82); border-right: 2px dashed var(--accent);
    color: var(--dim); font-size: 14px; padding: 20px;
}
.sleep-doel.aan { display: flex; }
.sleep-doel.over { background: rgba(31, 61, 97, 0.85); color: var(--tekst); }

/* ===================== 4. Meldingen in de lijst =====================
   De kleuren per dienst (politie blauw, ambulance geel, enzovoort) komen uit
   Main.css en blijven zoals ze zijn. Alleen de zware schaduw eraf; vierkant
   zijn ze al door de regel bovenaan. */

.tile { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important; }

/* ===================== 5. Meldingen in de nachtstand =====================
   's Nachts gaat het felle vlak eraf: donkere tegel, witte tekst, en de
   kleur van de dienst blijft zichtbaar in de streep links en in de
   scheidingslijn. Elke dienst zet daarvoor zijn eigen --dienst; wil je een
   tint anders, dan hoef je alleen dat lijstje hieronder aan te passen. */

html[data-thema="nacht"] .tile {
    background: #12171e !important;
    background-image: none !important;
    border: 1px solid #262d36 !important;
    border-left: 5px solid var(--dienst, #58a6ff) !important;
    text-shadow: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

html[data-thema="nacht"] .tile h2,
html[data-thema="nacht"] .tile p,
html[data-thema="nacht"] .tile .content,
html[data-thema="nacht"] .tile .content * {
    color: #ffffff !important;
    text-shadow: none !important;
}

html[data-thema="nacht"] .tile hr {
    border: none !important;
    border-top: 2px solid var(--dienst, #58a6ff) !important;
    width: 100% !important;
}

/* De kleur per dienst. Dezelfde kleuren die je in de dagstand in de rand en
   de scheidingslijn ziet, alleen iets opgehelderd: donkerrood en zwart zijn
   op een donkere tegel niet te zien. */
html[data-thema="nacht"] #Politie                        { --dienst: #4d8dff; }
html[data-thema="nacht"] #Brandweer,
html[data-thema="nacht"] #Overig                         { --dienst: #ff6b52; }
html[data-thema="nacht"] #OMS                            { --dienst: #ff4d4d; }
html[data-thema="nacht"] #Ambulance,
html[data-thema="nacht"] #MMT,
html[data-thema="nacht"] #MEDIC01,
html[data-thema="nacht"] #MEDIC01\20\20                  { --dienst: #ffd23f; }
html[data-thema="nacht"] #Lifeliner1,
html[data-thema="nacht"] #Lifeliner3,
html[data-thema="nacht"] #Lifeliner4                     { --dienst: #ff3b30; }
html[data-thema="nacht"] #KNRM                           { --dienst: #ff9d2e; }
html[data-thema="nacht"] #Proefallarm                    { --dienst: #c9d1d9; }

/* GRIP blijft een alarm: zwart met rood en knipperen, ook 's nachts. */
html[data-thema="nacht"] .tile[data-prioriteit="GRIP"] {
    --dienst: #ff4500;
    background: #190400 !important;
    border: 1px solid #ff4500 !important;
    border-left: 5px solid #ff4500 !important;
}
html[data-thema="nacht"] .tile[data-prioriteit="GRIP"] h2,
html[data-thema="nacht"] .tile[data-prioriteit="GRIP"] p { color: gold !important; }

/* Het deelknopje staat in de dagstand donker op de lichte tegels; 's nachts
   moet het juist licht zijn. */
html[data-thema="nacht"] .tile .tile-share-btn { color: rgba(255,255,255,0.55) !important; }
html[data-thema="nacht"] .tile .tile-share-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
}

/* --------------------- Stand van de verbindingen ------------------------
   Gaat er een verbinding stuk, dan hoort de bezoeker dat te weten: hij kijkt
   anders naar een kaart die stilstaat zonder dat hij het doorheeft. Gaat
   alles goed, dan hoort hij er niets van te merken. Dus: niets in beeld
   zolang het goed is, en een melding zodra dat niet zo is.

   De losse stip uit P2000FRLMap.js gaat uit; wil je die terug, haal dan deze
   ene regel weg. */

#ws-debug { display: none !important; }

/* --- De melding in de balk, links van de klok --- */

#pd4pm-verbinding {
    position: absolute;
    top: calc(50% + (env(safe-area-inset-top, 0px) / 2));
    right: calc(50% + 118px);          /* net links van de klok */
    transform: translateY(-50%);
    display: none; align-items: center; gap: 7px;
    padding: 6px 11px;
    background: rgba(248, 81, 73, 0.16) !important;
    border: 1px solid rgba(248, 81, 73, 0.5) !important;
    color: #ffb4ae !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
    white-space: nowrap; cursor: default; z-index: 1001;
}
#pd4pm-verbinding.zichtbaar { display: flex; }
#pd4pm-verbinding.klikbaar { cursor: pointer; }
#pd4pm-verbinding.klikbaar:hover { background: rgba(248, 81, 73, 0.26) !important; }

/* Geel: verbinding staat nog open, maar er komt al een tijd niets binnen */
#pd4pm-verbinding.wachten {
    background: rgba(210, 153, 34, 0.16) !important;
    border-color: rgba(210, 153, 34, 0.5) !important;
    color: #e3b341 !important;
}
#pd4pm-verbinding.wachten.klikbaar:hover { background: rgba(210, 153, 34, 0.26) !important; }

#pd4pm-verbinding .stip {
    width: 8px; height: 8px; border-radius: 50% !important;
    background: currentColor; flex-shrink: 0;
    animation: pd4pmPols 1.8s ease-in-out infinite;
}
@keyframes pd4pmPols { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Op een smal scherm is er naast de klok geen plek meer — het zou tegen de
   naam links aan lopen. Daar wordt het een strook onder de balk, over de
   volle breedte. De grens ligt op 940px en niet op 768px, want tussen die
   twee is het naast de klok al te krap. */
@media (max-width: 940px) {
    #pd4pm-verbinding {
        top: calc(var(--kop) + env(safe-area-inset-top, 0px));
        right: 0; left: 0; transform: none;
        justify-content: center;
        border-left: none !important; border-right: none !important;
        padding: 7px 12px; font-size: 12px;
    }
    #pd4pm-verbinding.zichtbaar { display: flex; }

    /* De strook ligt over de datumkiezer en de lagenknop heen; die schuiven
       zolang hij er staat een stukje naar beneden. */
    html.verbinding-melding #datum-picker {
        top: calc(80px + 34px + env(safe-area-inset-top, 0px)) !important;
    }
    html.verbinding-melding .leaflet-top { margin-top: 34px; }
    html.verbinding-melding #pd4pm-sockets { top: calc(var(--kop) + 136px); }
}

/* --- Het volledige overzicht: alleen voor jezelf ---
   Staat standaard uit. Aanzetten met ?sockets=1 achter de url, uitzetten met
   ?sockets=0. De keuze blijft bewaard in deze browser. */

#pd4pm-sockets {
    /* Onder de lagenknop; daarboven staan de datumkiezer (80) en die knop
       (120-162) al. z-index onder de kaartknoppen, zodat het uitgeklapte
       lagenmenu er netjes overheen valt in plaats van andersom. */
    position: fixed;
    top: calc(var(--kop) + 102px); left: 10px; z-index: 700;
    display: flex; align-items: center; gap: 7px;
    padding: 5px 8px;
    background: var(--balk);
    border: 1px solid var(--paneel-rand);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px;
    color: #c9d1d9; cursor: pointer; user-select: none;
    transition: left 0.15s ease;
}
#pd4pm-sockets .sok { display: flex; align-items: center; gap: 5px; }
#pd4pm-sockets .stip {
    width: 8px; height: 8px; border-radius: 50% !important;
    background: #6e7681; flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
#pd4pm-sockets .naam { display: none; white-space: nowrap; }
#pd4pm-sockets.uit { flex-direction: column; align-items: flex-start; gap: 5px; }
#pd4pm-sockets.uit .naam { display: inline; }

/* --------------------- Helikopters met draaiende rotor ------------------
   websocket.js maakt voor de Lifeliners een marker met twee lagen: de romp
   en de rotorbladen apart. Hier draaien die bladen. Omdat het een eigen
   element is, botst dit niet met het meedraaien van de marker op de koers.

   Hoeveel graden hij per ronde draait hangt af van het aantal bladen: vier
   bladen zien er elke kwartslag hetzelfde uit, vijf elke 72 graden. Dat
   getal komt als --slag mee uit websocket.js. */

.heli-marker .heli { position: relative; width: 100%; height: 100%; }
.heli-marker .heli img { position: absolute; inset: 0; width: 100%; height: 100%; }

.heli-marker .rotor {
    transform-origin: 50% 50%;
    animation: pd4pmRotor var(--rotortijd, 0.18s) linear infinite;
}

/* Hoe hard hij draait komt uit websocket.js, dat zet --rotortijd per toestel
   (drie trappen: aan de grond, laag, onderweg). Dit is alleen de terugval
   als dat script er nog niet bij is. */
.heli-marker .heli.grond { --rotortijd: 1.6s; }

/* Zendt hij niet meer en staat hij op zijn laatst bekende plek? Dan rotor
   helemaal stil en het toestel wat gedimd — anders lijkt het live. */
.heli-marker .heli.stilstaand { opacity: 0.62; }
.heli-marker .heli.stilstaand .rotor { animation: none !important; }

@keyframes pd4pmRotor { from { transform: rotate(0deg); } to { transform: rotate(var(--slag, 90deg)); } }

/* Wie in zijn systeem "beweging beperken" aan heeft staan, krijgt een
   stilstaande rotor. */
@media (prefers-reduced-motion: reduce) {
    .heli-marker .rotor { animation: none !important; }
}

/* ------------------ Het knopje voor dag en nacht in de balk ------------- */

.pd4pm-btn.thema-knop { font-size: 19px !important; line-height: 1 !important; }
.thema-keuze { display: flex; gap: 4px; padding: 4px 6px 6px; }
.thema-keuze button {
    flex: 1; padding: 7px 4px; cursor: pointer;
    background: rgba(255,255,255,0.05); color: #c9d1d9;
    border: 1px solid var(--lijn); font-family: inherit; font-size: 12px;
}
.thema-keuze button:hover { background: rgba(255,255,255,0.12); color: #fff; }
.thema-keuze button[aria-pressed="true"] {
    background: rgba(88, 166, 255, 0.18); border-color: var(--accent); color: #fff;
}

/* Schuifbalken in dezelfde stijl als de scanner */
#list-container, #zij-paneel, .page-container {
    scrollbar-width: thin; scrollbar-color: var(--lijn) transparent;
}
#list-container::-webkit-scrollbar-thumb,
#zij-paneel ::-webkit-scrollbar-thumb,
.page-container::-webkit-scrollbar-thumb { background: var(--lijn) !important; border-radius: 0 !important; }
#list-container::-webkit-scrollbar, .page-container::-webkit-scrollbar { width: 9px; }