@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

/* ============================================================================
   pd4pm-yaesu.css  v1.3  —  de P2000-pagina in het Yaesu FTX-1-jasje
   ============================================================================
   Zelfde stijl als de APRS-, METAR- en tar1090-pagina, alleen met wit als
   accent in plaats van het Yaesu-cyaan.

   Raakt alleen het "chassis": de balk bovenaan met klok en knoppen, het
   uitklapmenu, de tabbladenbalk met de greep, en de knoppen op de kaart
   (datum, LIVE, lagen, zoeken). De meldingen zelf blijven zoals ze zijn.

   Inladen als ALLERLAATSTE stylesheet, na pd4pm-menu.css:
     <link rel="stylesheet" href="CSS/pd4pm-yaesu.css?v=1.0">
   Weghalen = de oude stijl terug.

   Staat pd4pm-strak.css in index.html ná deze regel, dan maakt dat niet uit:
   de regels hieronder beginnen waar nodig met "html", zodat ze sowieso winnen.

   Waarom zoveel !important: pd4pm-strak.css zet op alles border-radius:0
   !important, en Main.css heeft veel !important-regels. Met !important plus
   een iets specifiekere selector winnen we die zonder ze aan te passen.
   ============================================================================ */

:root {
    /* Lettertypes */
    --y-ui:   'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --y-data: 'Share Tech Mono', 'Consolas', ui-monospace, monospace;

    /* Tekst */
    --y-wit:    #ffffff;
    --y-tekst:  #f3f6f9;
    --y-tekst2: #dfe6ee;
    --y-label:  #a3b3c4;
    --y-dim:    #8b9cb0;

    /* Accent: wit. Wil je toch het Yaesu-cyaan, zet dan #19d3f5 en
       rgba(25,211,245,0.4). */
    --y-accent: #ffffff;
    --y-gloed:  rgba(255, 255, 255, 0.40);

    /* Kast en soft-keys */
    --y-kast:      linear-gradient(180deg, #1d252f 0%, #131a22 55%, #0d1218 100%);
    --y-paneel:    linear-gradient(180deg, #161d26 0%, #0e141a 100%);
    --y-key:       linear-gradient(180deg, #2f3a47 0%, #1c242e 55%, #141a22 100%);
    --y-key-hover: linear-gradient(180deg, #384555 0%, #222b36 55%, #19202a 100%);
    --y-key-aan:   linear-gradient(180deg, #3a4757 0%, #26303c 55%, #1d252f 100%);
    --y-key-rand:  #34465a;
    --y-key-top:   #4b5f75;
    --y-key-schaduw: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -2px 0 rgba(0,0,0,0.35),
                     0 2px 0 #05080c, 0 4px 10px rgba(0,0,0,0.5);
    --y-key-in:    inset 0 2px 5px rgba(0,0,0,0.65), inset 0 -1px 0 rgba(255,255,255,0.05),
                   0 1px 0 rgba(255,255,255,0.06);

    /* Verzonken displayvenster (klok, datum) */
    --y-display:   linear-gradient(180deg, #010203 0%, #060a0e 100%);
    --y-display-schaduw: inset 0 2px 6px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.03),
                         0 1px 0 rgba(255,255,255,0.07);
    --y-lijn:      #1d2a37;
    --y-lijn2:     #2c3e52;
}

/* ======================================================================
   1. Balk bovenaan
   ====================================================================== */

nav.pd4pm-nav.pm-balk {
    background: var(--y-kast) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #000 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.03),
                0 3px 10px rgba(0,0,0,0.6) !important;
    font-family: var(--y-ui) !important;
}

/* Staat het menu open, dan de hele balk boven alles op de kaart. De balk en
   de datumkiezer hebben allebei z-index 1000, en dan wint wie later in de
   pagina staat: de datumkiezer, die dan dwars door het menu heen staat.
   Alleen zolang het menu open is, zodat andere overlays niets merken. */
nav.pd4pm-nav.pm-balk:has(.pm-menu.open) { z-index: 10000 !important; }

/* Logo zelf blijft zoals het is, alleen een zacht schaduwtje zodat het
   loskomt van de kast */
.pm-balk .pm-logo img {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.pm-balk .pm-logo-tekst b {
    font-family: var(--y-ui) !important;
    font-size: 19px !important; font-weight: 700 !important;
    letter-spacing: 0.08em !important; text-transform: uppercase;
    color: var(--y-tekst) !important;
}
.pm-balk .pm-logo-tekst small {
    font-family: var(--y-ui) !important;
    font-size: 11.5px !important; font-weight: 600 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase;
    color: var(--y-dim) !important;
}

/* ---- Klok: een verzonken displayvenster ---- */
.pm-balk .pm-klok {
    box-sizing: border-box;
    padding: 4px 14px 5px;
    border-radius: 6px !important;
    background: var(--y-display);
    border: 1px solid #000;
    box-shadow: var(--y-display-schaduw);
}
.pm-balk .pm-tijd {
    display: grid !important;              /* echte cijfers over de onverlichte */
    justify-content: center;
    font-family: var(--y-data) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-shadow: none !important;
}
.pm-balk .pm-tijd .pm-spook,
.pm-balk .pm-tijd .pm-echt {
    grid-area: 1 / 1;
    display: flex; align-items: baseline;
}
.pm-balk .pm-tijd .pm-spook { color: rgba(255, 255, 255, 0.09); }
.pm-balk .pm-tijd .pm-hm { font-size: 27px; }
.pm-balk .pm-tijd .pm-ss { font-size: 15px; margin-left: 1px; }
.pm-balk .pm-tijd .pm-echt .pm-hm { color: var(--y-wit); text-shadow: 0 0 8px var(--y-gloed); }
.pm-balk .pm-tijd .pm-echt .pm-ss { color: #7d8fa3; }
.pm-balk .pm-datum {
    font-family: var(--y-ui) !important;
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase;
    color: var(--y-dim) !important;
    margin-top: 3px !important;
}
.pm-balk .pm-datum .pm-dag { color: var(--y-tekst2); }
.pm-balk .pm-klok-extra { display: none; }

/* Brede schermen: een breed display, tijd en datum naast elkaar, en rechts
   een lege strook voor wat er later nog bij moet (#pm-klok-extra). */
@media (min-width: 1100px) {
    .pm-balk .pm-klok {
        width: 460px; height: 48px;
        display: flex; align-items: center; gap: 14px;
        padding: 0 16px;
        text-align: left;
    }
    .pm-balk .pm-tijd .pm-hm { font-size: 34px; }
    .pm-balk .pm-tijd .pm-ss { font-size: 18px; margin-left: 2px; }
    .pm-balk .pm-datum {
        margin-top: 0 !important;
        display: flex; flex-direction: column; line-height: 1.15;
        font-weight: 700 !important;
        white-space: nowrap;
    }
    .pm-balk .pm-datum .pm-dag { font-size: 12px; }
    .pm-balk .pm-klok-extra {
        flex: 1 1 auto; align-self: stretch;
        margin: 7px 0; padding-left: 12px;
        border-left: 1px solid var(--y-lijn);
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        font-family: var(--y-ui); font-size: 11px; font-weight: 700;
        letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--y-dim);
        overflow: hidden; white-space: nowrap;
    }
    .pm-balk .pm-leds { display: flex; gap: 9px; letter-spacing: 0.08em; color: var(--y-label); }
    .pm-balk .pm-led { display: flex; align-items: center; gap: 5px; }
    /* Ledje: onverlicht tot de verbinding er is */
    .pm-balk .pm-led::before {
        content: ''; width: 6px; height: 6px; flex-shrink: 0;
        border-radius: 50% !important;
        background: #1d2733;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.8);
    }
    .pm-balk .pm-led[data-stand="goed"]::before  { background: #36e07f; box-shadow: 0 0 6px #36e07f; }
    .pm-balk .pm-led[data-stand="wacht"]::before { background: #ffb000; box-shadow: 0 0 6px #ffb000; }
    .pm-balk .pm-led[data-stand="weg"]::before   { background: #ff4a3d; box-shadow: 0 0 6px #ff4a3d; }
    .pm-balk .pm-utc b {
        font-family: var(--y-data); font-size: 13px; font-weight: 400;
        letter-spacing: 0.04em; color: var(--y-tekst2);
    }
}

@media (max-width: 400px) {
    .pm-balk .pm-klok { padding: 4px 10px 5px; }
    .pm-balk .pm-tijd .pm-hm { font-size: 23px; }
    .pm-balk .pm-tijd .pm-ss { font-size: 13px; }
    .pm-balk .pm-datum { font-size: 10px !important; letter-spacing: 0.12em !important; }
}
@media (max-width: 300px) {
    .pm-balk .pm-klok { padding: 4px 8px; }
    .pm-balk .pm-tijd .pm-hm { font-size: 18px; }
    .pm-balk .pm-tijd .pm-ss { font-size: 11px; }
}

/* ---- Soft-keys in de balk ---- */
.pm-balk .pm-knop {
    border-radius: 7px !important;
    background: var(--y-key) !important;
    border: 1px solid var(--y-key-rand) !important;
    border-top-color: var(--y-key-top) !important;
    box-shadow: var(--y-key-schaduw) !important;
    color: var(--y-tekst2) !important;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s, transform 0.06s !important;
}
.pm-balk .pm-knop:hover {
    background: var(--y-key-hover) !important;
    color: var(--y-wit) !important;
}
.pm-balk .pm-knop:active,
.pm-balk .pm-knop[aria-expanded="true"] {
    background: linear-gradient(180deg, #1a222b 0%, #232c37 100%) !important;
    box-shadow: var(--y-key-in) !important;
    color: var(--y-wit) !important;
    transform: translateY(1px);
}

/* Toetsenbordfocus: wit in plaats van blauw */
.pm-balk .pm-knop:focus-visible,
.pm-balk .pm-item:focus-visible,
.pm-balk .pm-thema button:focus-visible {
    outline: 2px solid var(--y-accent) !important; outline-offset: 2px;
}

/* ---- Uitklapmenu ---- */
.pm-balk .pm-menu {
    background: var(--y-paneel) !important;
    border: 1px solid var(--y-lijn2) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.65) !important;
    padding: 6px !important;
}
.pm-balk .pm-kopje {
    font-family: var(--y-ui) !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    color: var(--y-dim) !important;
}
.pm-balk .pm-item {
    font-family: var(--y-ui) !important;
    font-size: 15.5px !important; font-weight: 600 !important;
    letter-spacing: 0.02em;
    color: var(--y-tekst2) !important;
    border-radius: 6px !important;
}
.pm-balk .pm-item svg { color: var(--y-dim) !important; }
.pm-balk .pm-item:hover {
    background: linear-gradient(180deg, #232d38, #19212a) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    color: var(--y-wit) !important;
}
.pm-balk .pm-item:hover svg { color: var(--y-wit) !important; }
.pm-balk .pm-streep { background: var(--y-lijn) !important; }

/* Dag / Nacht / Auto als drie soft-keys; de gekozen licht wit op */
.pm-balk .pm-thema button {
    font-family: var(--y-ui) !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--y-label) !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, #252f3a 0%, #19212a 55%, #131920 100%) !important;
    border: 1px solid var(--y-lijn2) !important;
    border-top-color: #3b4e63 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 0 #05080c !important;
    position: relative;
}
.pm-balk .pm-thema button:hover { color: var(--y-wit) !important; background: var(--y-key-hover) !important; }
.pm-balk .pm-thema button[aria-pressed="true"] {
    color: var(--y-wit) !important;
    text-shadow: 0 0 6px var(--y-gloed);
    background: var(--y-key-aan) !important;
    border-color: var(--y-key-top) !important;
    border-top-color: #66798f !important;
}
.pm-balk .pm-thema button[aria-pressed="true"]::after {
    content: ''; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 2px;
    border-radius: 1px !important;
    background: var(--y-accent);
    box-shadow: 0 0 6px var(--y-accent), 0 0 10px var(--y-gloed);
}

/* ======================================================================
   2. Tabbladenbalk met greep
   ======================================================================
   Even laag als eerst (ongeveer 44px): de pagina's in de tabbladen hebben
   de ruimte nodig. De bovenste 10px blijven de greep om het paneel groter
   of kleiner te slepen (swipeable-content.js kijkt naar de bovenste 12px). */

html .tab-navigation {
    background: var(--y-paneel) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    border-bottom: 1px solid #000 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 -4px 12px rgba(0,0,0,0.35) !important;
}
/* Greep: verzonken puntjes, als de ribbels op een knop.
   Telefoon: greep bovenaan, puntjes naast elkaar (paneel hoger/lager).
   Desktop: greep links, puntjes onder elkaar (paneel breder/smaller). */
html .tab-navigation::after {
    border-radius: 0 !important;
    background:
        radial-gradient(circle, #05080c 1.6px, rgba(0,0,0,0) 2.1px) 0 0 / 7px 5px repeat-x !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.14));
}
html .tab-navigation:hover::after { filter: drop-shadow(0 1px 0 rgba(255,255,255,0.32)); }

@media (max-width: 768px) {
    html .tab-navigation::after { width: 35px !important; height: 5px !important; top: 3px !important; }
}
@media (min-width: 769px) {
    html .tab-navigation { height: 34px !important; }
    html .tab-navigation::after {
        width: 5px !important; height: 26px !important; left: 3px !important;
        background:
            radial-gradient(circle, #05080c 1.6px, rgba(0,0,0,0) 2.1px) 0 0 / 5px 7px repeat-y !important;
    }
}

/* Verzonken bakje met de tabbladen erin */
html .tab-navigation .tab-buttons {
    height: auto !important;
    width: auto !important;
    gap: 4px !important;
    margin: 0 6px 4px !important;
    padding: 3px !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, #030507, #080c11) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.06) !important;
}
@media (min-width: 769px) {
    html .tab-navigation .tab-buttons { flex: 1 1 auto !important; margin: 3px 6px 3px 2px !important; padding: 2px !important; }
}
html .tab-navigation .tab-button {
    height: 24px !important;
    border-radius: 5px !important;
    border: 1px solid var(--y-lijn2) !important;
    border-top-color: #3b4e63 !important;
    background: linear-gradient(180deg, #252f3a 0%, #19212a 55%, #131920 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 0 #05080c !important;
    font-family: var(--y-ui) !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: var(--y-label) !important;
}
html .tab-navigation .tab-button:hover {
    background: var(--y-key-hover) !important;
    color: var(--y-wit) !important;
}
html .tab-navigation .tab-button.active {
    color: var(--y-wit) !important;
    text-shadow: 0 0 6px var(--y-gloed);
    background: var(--y-key-aan) !important;
    border-color: var(--y-key-top) !important;
    border-top-color: #66798f !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 0 #05080c, 0 2px 6px rgba(0,0,0,0.5) !important;
}
/* Het witte ledje onder het actieve tabblad */
html .tab-navigation .tab-button.active::after {
    width: 40% !important; height: 2px !important;
    bottom: 2px !important;
    border-radius: 1px !important;
    background: var(--y-accent) !important;
    box-shadow: 0 0 6px var(--y-accent), 0 0 10px var(--y-gloed) !important;
}

/* Schuifbalken in het paneel: een onzichtbare baan en alleen een dun
   schuifje met een klein tintje, hetzelfde als in de Helidata- en de
   Scannerpagina (die hebben het in hun eigen <style>, want een iframe krijgt
   deze CSS niet mee). Een tint die op het donkere én het lichte paneel te
   zien is. De P2000-lijst (#p2000-container) houdt de ruimte voor de balk
   altijd vrij, zodat de tegels niet opzij springen als er een balk komt. */
html #p2000-container { overflow-y: scroll !important; scrollbar-gutter: stable; }
html #p2000-container, html .page-container, html #list-container, html #zij-paneel {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(140, 155, 170, 0.45) transparent !important;
}
html #p2000-container::-webkit-scrollbar,
html .page-container::-webkit-scrollbar,
html #list-container::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
html #p2000-container::-webkit-scrollbar-track,
html .page-container::-webkit-scrollbar-track,
html #list-container::-webkit-scrollbar-track { background: transparent !important; }
html #p2000-container::-webkit-scrollbar-thumb,
html .page-container::-webkit-scrollbar-thumb,
html #list-container::-webkit-scrollbar-thumb,
html #zij-paneel ::-webkit-scrollbar-thumb {
    background: rgba(140, 155, 170, 0.45) !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important; background-clip: padding-box !important;
}
html #p2000-container::-webkit-scrollbar-thumb:hover,
html .page-container::-webkit-scrollbar-thumb:hover { background-color: rgba(170, 185, 200, 0.7) !important; }
/* Touchscreen (telefoon, de app): geen scrollbalk, zie Helidata/Scanner */
@media (pointer: coarse) {
    html #p2000-container { overflow-y: auto !important; scrollbar-gutter: auto; }
    html #p2000-container, html .page-container, html #list-container, html #zij-paneel,
    html #zij-paneel * { scrollbar-width: none !important; }
    html #p2000-container::-webkit-scrollbar,
    html .page-container::-webkit-scrollbar,
    html #list-container::-webkit-scrollbar,
    html #zij-paneel ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
}

/* Uitklappen naar links (brede schermen) */
html .tab-navigation .uitklap-greep:hover { color: var(--y-wit) !important; }
html .tab-navigation .tab-button.links-geparkeerd { color: var(--y-tekst2) !important; opacity: 0.6 !important; }

/* Kop van een links uitgeklapt tabblad */
html #zij-paneel .zij-kop {
    background: var(--y-paneel) !important;
    border-bottom: 1px solid #000 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
    font-family: var(--y-ui) !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}
html #zij-paneel .zij-kop button { border-radius: 5px !important; }
html #zij-paneel .zij-kop button:hover { color: var(--y-wit) !important; border-color: var(--y-lijn2) !important; }

/* ======================================================================
   3. Knoppen op de kaart
   ====================================================================== */

/* Datum: een verzonken display met witte cijfers */
html input#datum-picker {
    border-radius: 6px !important;
    background: var(--y-display) !important;
    border: 1px solid #000 !important;
    box-shadow: var(--y-display-schaduw) !important;
    color: var(--y-wit) !important;
    text-shadow: 0 0 6px var(--y-gloed);
    font-family: var(--y-data) !important;
    font-size: 13.5px !important;
    letter-spacing: 0;
    width: 124px !important;
    padding: 0 6px 0 9px !important;
}
html #modus-indicator { left: 144px; }       /* 10px naast de datum */
html input#datum-picker:hover { background: var(--y-display) !important; border-color: var(--y-lijn2) !important; }
html input#datum-picker:focus { outline: 2px solid var(--y-accent) !important; outline-offset: 2px; }
html input#datum-picker::-webkit-calendar-picker-indicator { filter: invert(1) !important; opacity: 0.75; }

/* '◀ LIVE' (alleen zichtbaar als je een andere dag bekijkt): een soft-key
   met een amber ledje dat rustig knippert, "je kijkt niet live". */
html #modus-indicator {
    border-radius: 7px !important;
    background: var(--y-key) !important;
    border: 1px solid var(--y-key-rand) !important;
    border-top-color: var(--y-key-top) !important;
    box-shadow: var(--y-key-schaduw) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    color: var(--y-wit) !important;
    font-family: var(--y-ui) !important;
    font-size: 15px !important; font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    padding: 0 14px 0 30px !important;
}
html #modus-indicator::before {
    content: ''; position: absolute; left: 12px; top: 50%;
    width: 9px; height: 9px; margin-top: -4.5px;
    border-radius: 50% !important;
    background: #ffb000;
    box-shadow: 0 0 0 2px rgba(255,176,0,0.25), 0 0 10px #ffb000;
    animation: y-led 1.6s ease-in-out infinite;
}
html #modus-indicator:hover { background: var(--y-key-hover) !important; }
html #modus-indicator:active { box-shadow: var(--y-key-in) !important; transform: translateY(1px); }
@keyframes y-led { 50% { opacity: 0.35; box-shadow: 0 0 0 2px rgba(255,176,0,0.1), 0 0 3px #ffb000; } }

/* Lagenknop en zoekknop: soft-keys */
html .leaflet-container .leaflet-control-layers,
html .leaflet-container .zk-knop,
html .leaflet-container .leaflet-bar a {
    border-radius: 7px !important;
    background-color: transparent !important;
    background-image: var(--y-key) !important;
    border: 1px solid var(--y-key-rand) !important;
    border-top-color: var(--y-key-top) !important;
    box-shadow: var(--y-key-schaduw) !important;
    color: var(--y-tekst2) !important;
}
/* Het lagen-icoon zit als achtergrondplaatje op de toggle; dus de knop zelf
   draagt de kleurverloop, en de toggle alleen het icoon. */
html .leaflet-container .leaflet-control-layers-toggle {
    border-radius: 7px !important;
    background-color: transparent !important;
}
html .leaflet-container .leaflet-control-layers:not(.leaflet-control-layers-expanded):hover,
html .leaflet-container .zk-knop:hover,
html .leaflet-container .leaflet-bar a:hover {
    background-image: var(--y-key-hover) !important;
    color: var(--y-wit) !important;
}
html .leaflet-container .zk-knop:active,
html .leaflet-container .leaflet-bar a:active { box-shadow: var(--y-key-in) !important; }
html .leaflet-container .leaflet-bar { border: none !important; box-shadow: none !important; }
html .leaflet-container .leaflet-bar a + a { margin-top: 6px; }

/* Lagenmenu (open): een paneel uit de kast */
html .leaflet-container .leaflet-control-layers-expanded {
    background-image: var(--y-paneel) !important;
    border: 1px solid var(--y-lijn2) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.65) !important;
    padding: 6px !important;
    font-family: var(--y-ui) !important;
}
html .leaflet-container .leaflet-control-layers label {
    font-family: var(--y-ui) !important;
    font-size: 15px !important; font-weight: 600 !important;
    color: var(--y-tekst2) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
}
html .leaflet-container .leaflet-control-layers label:hover {
    background: linear-gradient(180deg, #232d38, #19212a) !important;
    color: var(--y-wit) !important;
}
html .leaflet-container .leaflet-control-layers-separator {
    border-top: 1px solid var(--y-lijn) !important;
    margin: 4px 6px !important;
}

/* Vinkjes: een verzonken vakje dat wit oplicht */
html .leaflet-container .leaflet-control-layers input[type="checkbox"] {
    -webkit-appearance: none !important; appearance: none !important;
    width: 16px !important; height: 16px !important;
    flex-shrink: 0;
    border-radius: 3px !important;
    background: #04070b !important;
    border: 1px solid var(--y-key-rand) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8) !important;
    cursor: pointer;
}
html .leaflet-container .leaflet-control-layers input[type="checkbox"]:checked {
    background: center / 11px 11px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1118' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #fafcfe, #cfd8e2) !important;
    border-color: #e6edf3 !important;
    box-shadow: 0 0 8px var(--y-gloed) !important;
}
/* Kaartkeuze: een ledje dat aangaat */
html .leaflet-container .leaflet-control-layers input[type="radio"] {
    -webkit-appearance: none !important; appearance: none !important;
    width: 10px !important; height: 10px !important;
    flex-shrink: 0;
    margin: 0 3px !important;
    border-radius: 50% !important;
    background: #2c3e52 !important;
    border: none !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8) !important;
    cursor: pointer;
}
html .leaflet-container .leaflet-control-layers input[type="radio"]:checked {
    background: var(--y-accent) !important;
    box-shadow: 0 0 8px var(--y-accent) !important;
}

/* Zoekpaneel (zoeken.js) */
html .leaflet-container .zk-paneel {
    background: var(--y-paneel) !important;
    border: 1px solid var(--y-lijn2) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.65) !important;
    font-family: var(--y-ui) !important;
}
html .leaflet-container .zk-paneel input {
    border-radius: 6px !important;
    background: var(--y-display) !important;
    border: 1px solid #000 !important;
    box-shadow: var(--y-display-schaduw) !important;
    color: var(--y-wit) !important;
    font-family: var(--y-data) !important;
}

@media (prefers-reduced-motion: reduce) {
    html #modus-indicator::before { animation: none; }
}

/* Lagenmenu op een lage kaart (telefoon): pd4pm-strak.js maakt de lijst dan
   scrollbaar. Het schuifje blijft hier zichtbaar, ook op touch, en onderaan
   loopt de lijst zacht uit, zodat je ziet dat er meer onder zit. */
html .leaflet-container .pd4pm-lagen-scroll .leaflet-control-layers-list {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(200, 212, 225, 0.55) transparent !important;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
    padding-bottom: 14px;
}
html .leaflet-container .pd4pm-lagen-scroll .leaflet-control-layers-list::-webkit-scrollbar {
    display: block !important; width: 4px !important;
}
html .leaflet-container .pd4pm-lagen-scroll .leaflet-control-layers-list::-webkit-scrollbar-thumb {
    background: rgba(200, 212, 225, 0.55) !important; border-radius: 4px;
}