/* ============================================================
   Het Nederlandse Luchtruim — gedeeld stijlblad
   (radar-pagina, login-pagina en admin-dashboard)
============================================================= */

/* Algemene "verborgen"-klasse. Verschillende knoppen (Europa/"boven mijn
   huis"-terugknoppen e.d.) vertrouwden hierop zonder dat 'm ooit echt
   bestond — daardoor bleven ze onbedoeld zichtbaar. !important zodat dit
   altijd wint van een eigen display-regel van het element zelf. */
.hidden{ display:none !important; }

:root{
  --bg: #0c1116;
  --panel: #131a22;
  --panel-border: #223041;
  --text: #e7edf3;
  --text-dim: #8fa2b3;
  --accent: #35c1ff;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* Alleen de radarpagina zelf is een vaste, niet-scrollende flex-kolom (kaart
   vult de resterende ruimte); login/admin blijven gewoon normaal scrollbaar. */
body.radar-page{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ============ PWA INSTALL-BALKJE ============ */
#installBanner{
  display:none; flex:0 0 auto; align-items:center; gap:10px; padding:8px 14px;
  background:var(--panel); border-bottom:1px solid var(--panel-border);
  font-size:12.5px; color:var(--text); flex-wrap:wrap;
}
#installBanner.visible{ display:flex; }

/* ============ NIEUWSTICKER ============ */
/* Volledig uit op telefoons (niet alleen verborgen, ook de aan/uit-
   schakelaar in Nieuws verdwijnt). Stond eerder ook op tablet uit, maar
   dat is op verzoek teruggedraaid — tablet mag de ticker weer gewoon
   gebruiken. Desktop blijft ongewijzigd. */
@media (max-width: 700px){
  #newsTicker{ display:none !important; }
  #tickerToggleRow{ display:none !important; }
}

#newsTicker{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  background:#0a1620; border-bottom:1px solid var(--panel-border);
  padding:6px 0 6px 12px; overflow:hidden;
}
#newsTickerLabel{
  flex-shrink:0; background:#c0392b; color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.6px; padding:3px 8px; border-radius:4px;
}
#newsTickerViewport{ flex:1 1 auto; overflow:hidden; white-space:nowrap; position:relative; }
#newsTickerTrack{
  display:inline-flex; align-items:center; white-space:nowrap;
  animation: ticker-scroll 55s linear infinite;
  will-change:transform;
}
#newsTickerViewport:hover #newsTickerTrack{ animation-play-state:paused; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker-item{
  display:inline-flex; align-items:center; font-size:12.5px; color:var(--text-dim);
  padding:0 22px; text-decoration:none;
}
.ticker-item.urgent{ color:#ff8a80; font-weight:700; }
.ticker-item a{ color:inherit; text-decoration:none; }
.ticker-item a:hover{ color:var(--text); text-decoration:underline; }
.ticker-sep{ color:#3a4a5c; margin-right:22px; }
.install-icon{ width:26px; height:26px; border-radius:6px; flex-shrink:0; display:block; }
#installBannerText{ flex:1 1 200px; min-width:0; }
#installBtnAction{
  background:var(--accent); color:#052430; border:none; border-radius:7px;
  padding:6px 12px; font-weight:700; font-size:12px; cursor:pointer; flex-shrink:0;
}
#installBtnAction:hover{ opacity:.9; }
#installBannerClose{
  background:none; border:none; color:var(--text-dim); font-size:14px; cursor:pointer;
  padding:4px 6px; flex-shrink:0;
}
#installBannerClose:hover{ color:var(--text); }

/* ============ RADAR PAGINA (index.php) ============ */
#app{ position:relative; width:100%; flex:1 1 auto; min-height:0; overflow:hidden; }
#map{ position:absolute; inset:0; background:#0c1116; }
#aircraftCanvas{ position:absolute; inset:0; z-index:460; pointer-events:none; transform-origin:0 0; }
/* Leaflet's eigen pop-uplaag hoort altijd zichtbaar bóven ons
   vliegtuig-canvas te zweven — anders lijken toestellen er zomaar
   doorheen te vliegen zodra een pop-up open staat, wat er niet
   verzorgd uitziet. */
.leaflet-popup-pane{ z-index:1000 !important; }

/* Zoom in/uit-knoppen: linksboven, onder de topbar (die zelf al onder de
   nieuwsticker zit dankzij de normale paginaflow). */
.leaflet-top.leaflet-left{ top:70px; }
.leaflet-control-zoom{ border:1px solid var(--panel-border) !important; box-shadow:none !important; }
.leaflet-control-zoom a{
  background:var(--panel) !important; color:var(--text) !important; width:32px !important; height:32px !important;
  line-height:32px !important; font-size:17px !important;
}
.leaflet-control-zoom a:hover{ background:#1a2430 !important; }
/* Groene ATC-radarscherm-look: filter alleen op de kaarttegels, niet op
   markers/popups/overlays die daarboven zitten. Op verzoek van meerdere
   bezoekers (vonden het te donker/te fel groen) de verzadiging met 20%
   verlaagd (3.5 -> 2.8) en de helderheid iets opgehoogd. */
#map.radar-green-filter .leaflet-tile-pane{
  filter: sepia(1) hue-rotate(68deg) saturate(2.8) brightness(1.12) contrast(1.1);
}

#topbar{
  position:absolute; top:12px; left:12px; right:12px; z-index:1000;
  display:flex; align-items:center; justify-content:flex-end; gap:10px; pointer-events:none;
}
#topbar > *{ pointer-events:auto; }
#bottomBarsWrap{
  position:absolute; left:12px; bottom:14px; z-index:1000;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
#brandBar{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:10px;
  padding:6px 14px 6px 8px; font-weight:700; font-size:15px; letter-spacing:.3px;
  display:flex; align-items:center; gap:8px;
}
#brandBar .dot{ width:9px; height:9px; border-radius:50%; background:#2ecc71; box-shadow:0 0 8px #2ecc71; }
#brandBar .dot.stale{ background:#e74c3c; box-shadow:0 0 8px #e74c3c; }
.brand-logo{ height:34px; width:auto; display:block; border-radius:4px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-owner{ font-weight:400; color:var(--text-dim); font-size:12px; }
.stat{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:10px;
  padding:8px 14px; font-size:13px; color:var(--text-dim);
}
#statsBar{
  display:flex; gap:8px;
}
.stat b{ color:var(--text); font-size:14px; }
#searchWrap{ padding:8px 12px 4px; }
#search{
  background:#0f151c; border:1px solid var(--panel-border); color:var(--text);
  border-radius:8px; padding:8px 10px; font-size:12.5px; width:100%; outline:none; box-sizing:border-box;
}
#search::placeholder{ color:var(--text-dim); }

/* "Boven mijn huis": postcode-invoer + straal-keuzemenu — had nog
   helemaal geen eigen stijl (verweesde klasse-verwijzing, toonde de kale
   standaard-browseropmaak tegen onze donkere achtergrond). */
.weather-select{
  background:#0f151c; border:1px solid var(--panel-border); color:var(--text);
  border-radius:8px; padding:8px 10px; font-size:12.5px; width:100%; outline:none; box-sizing:border-box;
}
.weather-select::placeholder{ color:var(--text-dim); }

#sidebarWrap{
  position:absolute; top:64px; right:12px; z-index:1000;
  display:none;
}
#sidebarWrap.visible{ display:block; }
#sidebar{
  width:230px; max-height:calc(100vh - 132px); background:var(--panel);
  border:1px solid var(--panel-border); border-radius:10px; overflow-y:auto; font-size:12px;
}
#sidebarInner{ width:230px; }
#sidebar::-webkit-scrollbar{ width:7px; }
#sidebar::-webkit-scrollbar-thumb{ background:#28374a; border-radius:4px; }

/* --- menu: uitklapbare secties --- */
.menu-section{ border-bottom:1px solid var(--panel-border); }
.menu-section-hidden{ display:none !important; }
.menu-section-header{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:none; border:none; color:var(--text); cursor:pointer;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  position:sticky; top:0; background:var(--panel); z-index:2;
}
.menu-section-header:hover{ background:#1a2430; }
.menu-chevron{ color:var(--text-dim); font-size:9px; transition:transform .15s ease; }
.menu-section.open .menu-chevron{ transform:rotate(180deg); }
.menu-section-body{ display:none; }
.menu-section.open .menu-section-body{ display:block; }
.menu-hint{ font-size:10.5px; color:var(--text-dim); line-height:1.4; margin:8px 10px; }

.ac-row{
  padding:6px 10px; border-bottom:1px solid #1b2530; cursor:pointer; display:flex;
  justify-content:space-between; align-items:center; gap:6px;
}
.ac-row:hover{ background:#1a2430; }
.airport-row{
  padding:8px 10px; border-bottom:1px solid #1b2530; cursor:pointer; display:flex;
  align-items:center; gap:8px;
}
.airport-row:hover{ background:#1a2430; }
.airport-row .icon{ font-size:15px; flex-shrink:0; display:flex; align-items:center; }
.airport-row-icon{ height:16px; width:auto; display:block; }
.airport-row .info{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.airport-row .name{ font-size:12px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.airport-row .code{ font-size:10.5px; color:var(--text-dim); }
.airport-row .hidden-note{ margin-left:auto; font-size:9.5px; color:var(--text-dim); font-style:italic; flex-shrink:0; }
.ac-row .cs{ font-weight:700; }
.ac-row .alt{ color:var(--text-dim); font-size:11px; }

/* --- kaartstijl binnen het menu --- */
.mapstyle-menu{ display:flex; flex-direction:column; padding:4px 0; }
.mapstyle-menu button{
  display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--text-dim);
  padding:8px 12px; font-size:12px; cursor:pointer; text-align:left;
}
.mapstyle-menu button:hover{ background:#1a2430; color:var(--text); }
.mapstyle-menu button.active{ color:var(--accent); font-weight:700; }

/* --- maatschappij-filter --- */
.airline-row{
  display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:11.5px;
  color:var(--text-dim); cursor:pointer;
}
.airline-row:hover{ background:#1a2430; }
.airline-row input{ accent-color: var(--accent); width:14px; height:14px; flex-shrink:0; }
.airline-row .airline-name{ color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.airline-row .airline-count{ color:var(--text-dim); font-size:10.5px; flex-shrink:0; }

/* --- Europees Luchtruim: submenu per land --- */
.euro-home-btn{
  display:block; margin:0 12px 10px; background:var(--accent); border:none; color:#052430;
  border-radius:6px; padding:7px 10px; font-size:11.5px; font-weight:700; cursor:pointer; width:calc(100% - 24px);
}
.euro-home-btn:hover{ opacity:.9; }
.euro-country{ border-top:1px solid #1b2530; }
.euro-country:first-child{ border-top:none; }
.euro-country-header{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; color:var(--text-dim); cursor:pointer; padding:7px 12px; font-size:11.5px;
}
.euro-country-header:hover{ color:var(--text); background:#1a2430; }
.euro-country-chevron{ font-size:8px; transition:transform .15s ease; }
.euro-country.open .euro-country-chevron{ transform:rotate(180deg); }
.euro-country-body{ display:none; }
.euro-country.open .euro-country-body{ display:block; }
.euro-airport-row{
  display:flex; align-items:center; gap:8px; padding:6px 12px 6px 22px; cursor:pointer; font-size:11.5px;
}
.euro-airport-row:hover{ background:#1a2430; }
.euro-airport-row .code{ color:var(--text-dim); font-size:10px; margin-left:auto; flex-shrink:0; }

/* --- hoogte/snelheid-filter --- */
.range-filter-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 8px; }
.range-filter-grid label{ display:flex; flex-direction:column; gap:3px; font-size:10.5px; color:var(--text-dim); }
.range-filter-grid input{
  background:#0f151c; border:1px solid var(--panel-border); color:var(--text);
  border-radius:6px; padding:6px 8px; font-size:12px; outline:none; width:100%;
}
.range-filter-grid input:focus{ border-color:var(--accent); }
.range-filter-reset{
  display:block; margin:0 12px 10px; background:none; border:1px solid var(--panel-border);
  color:var(--text-dim); border-radius:6px; padding:5px 10px; font-size:11px; cursor:pointer;
}
.range-filter-reset:hover{ color:var(--text); background:#1a2430; }

/* --- aircraft alerts --- */
.alerts-priming{
  margin:0 12px 10px; padding:10px; background:#0f2a3a; border:1px solid #1f5a7a; border-radius:8px;
}
.alerts-priming p{ margin:0 0 8px; font-size:11px; line-height:1.5; color:var(--text); }
.alerts-priming button{
  border:none; border-radius:6px; padding:6px 10px; font-size:11px; font-weight:700; cursor:pointer; margin-right:6px;
}
#aircraftAlertsPrimingBtn{ background:var(--accent); color:#052430; }
#aircraftAlertsPrimingSkip{ background:none; border:1px solid #3a5a6a; color:var(--text-dim); }

.alert-toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 12px; font-size:11.5px; color:var(--text-dim); border-bottom:1px solid #1b2530;
}
.alert-toggle-row:last-child{ border-bottom:none; }
#aircraftAlertsLog{ border-top:1px solid var(--panel-border); margin-top:4px; }
#aircraftAlertsLog .alert-log-title{ font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; padding:8px 12px 4px; }
#aircraftAlertsLog .alert-row{ font-size:11px; }

/* --- METAR/TAF (in de vliegveld-popup) --- */
#webcamModal{
  position:fixed; inset:0; z-index:3000; background:#000000b3;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#webcamModal.hidden{ display:none; }
#webcamModalPanel{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  width:100%; max-width:640px; padding:16px;
}
#webcamModalHeader{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
#webcamModalTitle{ font-weight:700; font-size:14px; color:var(--text); }
#webcamModalClose{
  background:none; border:1px solid var(--panel-border); color:var(--text-dim);
  border-radius:8px; width:30px; height:30px; font-size:14px; cursor:pointer;
}
#webcamModalClose:hover{ color:var(--text); background:#1a2430; }
#webcamModalBody{ width:100%; }
#webcamModalBody iframe{ width:100%; height:360px; border:1px solid var(--panel-border); border-radius:8px; background:#000; }
#webcamModalOpenLink{
  display:block; margin-top:10px; font-size:11.5px; color:var(--accent); text-decoration:none; text-align:center;
}

/* ============ EIGEN MENU-LINK POP-UP (generiek, hergebruikt door alle "insluiten"-links) ============ */
#customLinkModal{
  position:fixed; inset:0; z-index:3000; background:#000000c2;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#customLinkModal.hidden{ display:none; }
#customLinkModalPanel{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  width:100%; max-width:1100px; height:85vh; padding:16px; display:flex; flex-direction:column;
}
#customLinkModalHeader{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
  font-weight:700; font-size:14px; color:var(--text); flex:0 0 auto;
}
#customLinkModalClose{
  background:none; border:1px solid var(--panel-border); color:var(--text-dim);
  border-radius:8px; width:30px; height:30px; font-size:14px; cursor:pointer;
}
#customLinkModalClose:hover{ color:var(--text); background:#1a2430; }
#customLinkModalFrame{
  flex:1 1 auto; width:100%; border:1px solid var(--panel-border); border-radius:8px; background:#0a0f16;
}
#customLinkModalOpenLink{
  display:block; margin-top:10px; font-size:11.5px; color:var(--accent); text-decoration:none; text-align:center; flex:0 0 auto;
}
@media (max-width:700px){
  #customLinkModalPanel{ height:80vh; padding:10px; }
}

/* ============ HANDLEIDING-POP-UP ============ */
#guideModal{
  position:fixed; inset:0; z-index:3000; background:#000000b3;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#guideModal.hidden{ display:none; }
#guideModalPanel{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  width:100%; max-width:560px; max-height:85vh; padding:16px; display:flex; flex-direction:column;
}
#guideModalHeader{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
  font-weight:700; font-size:15px; color:var(--text); flex:0 0 auto;
}
#guideModalClose{
  background:none; border:1px solid var(--panel-border); color:var(--text-dim);
  border-radius:8px; width:30px; height:30px; font-size:14px; cursor:pointer;
}
#guideModalClose:hover{ color:var(--text); background:#1a2430; }
#guideModalBody{
  overflow-y:auto; font-size:13px; color:var(--text-dim); line-height:1.5;
}
#guideModalBody h3{ color:var(--text); font-size:14px; margin:16px 0 6px; }
#guideModalBody h3:first-child{ margin-top:0; }
#guideModalBody p{ margin:0 0 8px; }
#guideModalBody ul{ margin:0 0 8px; padding-left:18px; }
#guideModalBody li{ margin-bottom:5px; }
#guideModalBody b{ color:var(--text); }
.guide-footer-note{ font-style:italic; font-size:11.5px; border-top:1px solid var(--panel-border); padding-top:10px; margin-top:14px !important; }
.guide-callout{
  background:#2a1f0a; border:1px solid #c9932e; border-radius:10px;
  padding:12px 14px; margin:0 0 16px; font-size:13px; line-height:1.5; color:#ffe9b8;
}
.guide-callout b{ color:#ffd400; }

/* ============ ADVERTENTIE-POP-UP ============ */
#adModal{
  position:fixed; inset:0; z-index:3500; background:#000000b3;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#adModal.hidden{ display:none; }
#adModalPanel{
  position:relative; background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  width:340px; max-width:100%; aspect-ratio:1 / 1; padding:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  overflow-y:auto;
}
#adModalClose{
  position:absolute; top:10px; right:10px; background:none; border:1px solid var(--panel-border);
  color:var(--text-dim); border-radius:8px; width:28px; height:28px; font-size:13px; cursor:pointer;
}
#adModalClose:hover{ color:var(--text); background:#1a2430; }
#adModalImage{ max-width:100%; max-height:140px; border-radius:8px; margin-bottom:10px; object-fit:contain; }
#adModalTitle{ font-weight:700; font-size:15px; color:var(--text); margin-bottom:8px; }
#adModalText{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-bottom:10px; }
#adModalButton{
  display:inline-block; background:var(--accent); color:#052430; font-weight:700; font-size:12.5px;
  padding:8px 16px; border-radius:8px; text-decoration:none;
}
#adModalButton:hover{ opacity:.9; }
#webcamModalOpenLink:hover{ text-decoration:underline; }

@media (max-width:700px){
  #webcamModalPanel{ padding:12px; max-width:none; }
  #webcamModalBody iframe{ height:220px; }
}

.webcam-row{
  display:flex; align-items:center; gap:6px; padding:7px 12px; border-bottom:1px solid #1b2530; font-size:11.5px;
}
.webcam-row:last-child{ border-bottom:none; }
.webcam-row .name{ flex:1; color:var(--text); cursor:pointer; }
.webcam-row .name:hover{ color:var(--accent); }
.webcam-open-link{ color:var(--text-dim); text-decoration:none; font-size:11px; flex-shrink:0; }
.webcam-open-link:hover{ color:var(--accent); }

.weather-output{
  margin:6px 0 0; padding:8px; background:#0a0f14; border:1px solid var(--panel-border);
  border-radius:6px; font-size:10px; line-height:1.5; color:var(--text-dim);
  white-space:pre-wrap; word-break:break-word; font-family:'SFMono-Regular',Consolas,monospace;
  max-height:140px; overflow-y:auto;
}

/* --- spotters / noodmeldingen: gedeelde rij-stijl --- */
.alert-row{
  display:flex; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid #1b2530;
  cursor:pointer; font-size:11.5px;
}
.alert-row:hover{ background:#1a2430; }
.alert-row:last-child{ border-bottom:none; }
.alert-row .cs{ font-weight:700; color:var(--text); flex-shrink:0; }
.alert-row .detail{ color:var(--text-dim); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alert-row.urgent .cs{ color:#ff8a80; }
.alert-empty{ padding:10px 12px; font-size:11px; color:var(--text-dim); font-style:italic; }

/* --- top 10 --- */
.top10-tabs{ display:flex; gap:4px; padding:0 12px 8px; }
.top10-tab{
  flex:1; background:#0f151c; border:1px solid var(--panel-border); color:var(--text-dim);
  border-radius:6px; padding:5px 4px; font-size:10.5px; cursor:pointer;
}
.top10-tab:hover{ color:var(--text); }
.top10-tab.active{ background:var(--accent); color:#052430; font-weight:700; border-color:var(--accent); }
.top10-row{
  display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid #1b2530;
  cursor:pointer; font-size:11.5px;
}
.top10-row:hover{ background:#1a2430; }
.top10-row:last-child{ border-bottom:none; }
.top10-rank{ color:var(--text-dim); font-size:10.5px; width:16px; flex-shrink:0; }
.top10-cs{ font-weight:700; color:var(--text); flex-shrink:0; }
.top10-val{ margin-left:auto; color:var(--accent); font-size:11px; flex-shrink:0; }

/* Voet met paginering, nu onderdeel van de Vluchten-sectie i.p.v. vast
   onderaan de hele zijbalk. */
#sidebarFooter{
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:7px 10px; border-top:1px solid var(--panel-border); background:#0f151c;
}
#sidebarFooter button{
  background:var(--panel); border:1px solid var(--panel-border); color:var(--text-dim);
  border-radius:6px; width:24px; height:22px; cursor:pointer; font-size:13px;
}
#sidebarFooter button:hover:not(:disabled){ color:var(--text); background:#1a2430; }
#sidebarFooter button:disabled{ opacity:.35; cursor:default; }
#sidebarPageInfo{ font-size:11px; color:var(--text-dim); }


/* --- pulserende cirkel rond het geselecteerde vliegtuig --- */
.highlight-ring{
  width:56px; height:56px; border-radius:50%;
  border:3px solid #ffffff; box-shadow:0 0 14px 2px #ffffffaa;
  animation: highlight-pulse 1.5s ease-out infinite;
  will-change:transform, opacity;
}
@keyframes highlight-pulse{
  0%{ transform:scale(0.55); opacity:1; }
  70%{ transform:scale(1.3); opacity:0.15; }
  100%{ transform:scale(1.3); opacity:0; }
}
.leaflet-popup-content-wrapper{ background:var(--panel); color:var(--text); border-radius:8px; }
.leaflet-popup-tip{ background:var(--panel); }
.leaflet-control-attribution{
  background:rgba(19,26,34,0.75) !important; color:var(--text-dim) !important;
  border-radius:6px 0 0 0; padding:2px 8px !important; font-size:10px !important;
}
.leaflet-control-attribution a{ color:var(--text-dim) !important; }
/* ============ MODERN INFOPANEEL (volledige weergave, tablet/desktop) ============
   Losse, nieuwe opmaak voor het volledige toestel-infopaneel — geïnspireerd
   op een moderne, frisse stijl, met uitsluitend onze eigen gegevens (geen
   geplande/actuele tijden, die hebben we niet zoals sommige andere sites).
   De compacte telefoon-popup (popupHtmlCompact) blijft ongewijzigd, dat
   gebruikt gewoon de bestaande .popup-title/.popup-grid-stijlklassen. */
.popup-header{
  margin:-12px -14px 10px; padding:12px 14px 10px; background:#0a0f16;
  border-bottom:1px solid var(--panel-border); border-radius:9px 9px 0 0;
}
.popup-header .callsign{ font-size:17px; font-weight:800; color:var(--accent); letter-spacing:.2px; overflow-wrap:break-word; }
.popup-header .hex-line{ font-size:10px; color:var(--text-dim); margin-top:1px; }
.popup-header .kind-badge{ margin-left:6px; vertical-align:middle; }
.popup-photo-wrap{ position:relative; margin:0 -14px 10px; }
.popup-photo-wrap img{ width:100%; height:130px; object-fit:cover; display:block; }
.popup-photo-wrap .popup-photo-credit{
  position:absolute; bottom:0; right:0; background:#000a; color:#fff; font-size:8.5px;
  padding:2px 6px; border-top-left-radius:6px; margin:0;
}
.popup-route-modern{ display:flex; align-items:center; gap:8px; margin:6px 0 10px; }
.popup-route-modern .airport{ text-align:center; flex:0 0 auto; min-width:34px; }
.popup-route-modern .airport .code{ font-size:14px; font-weight:800; color:var(--text); }
.popup-route-modern .airport .city{ font-size:9px; color:var(--text-dim); max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.popup-route-modern .line{ flex:1 1 auto; height:2px; background:linear-gradient(90deg, var(--accent), #6c5ce7); border-radius:2px; position:relative; }
.popup-route-modern .line::after{ content:'✈'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(90deg); font-size:11px; color:var(--accent); }
.popup-section{ margin:0 -14px; border-top:1px solid var(--panel-border); }
.popup-section-bar{
  background:#16324a; color:#bfe3ff; font-size:10.5px; font-weight:700; letter-spacing:.2px;
  padding:6px 14px; display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; text-transform:uppercase;
}
.popup-section-bar .chev{ margin-left:auto; transition:transform .2s; font-size:9px; }
.popup-section-bar.open .chev{ transform:rotate(180deg); }
.popup-section-body{ padding:9px 14px; display:none; }
.popup-section-body.open{ display:block; }

/* ============ FLIGHT DIRECTOR (kunstmatige horizon + SEL HDG/ALT) ============ */
.flight-director{
  display:flex; gap:12px; align-items:stretch; margin-bottom:10px;
  background:#0a0f16; border:1px solid var(--panel-border); border-radius:8px; padding:10px;
}
.fd-attitude{ flex:0 0 auto; width:84px; text-align:center; }
.fd-horizon-svg{ width:84px; height:84px; border-radius:50%; }
.fd-sky{ fill:#2e6fd6; }
.fd-ground{ fill:#7a4a24; }
.fd-horizon-line{ stroke:#fff; stroke-width:1.6; }
.fd-bezel{ fill:none; stroke:#000a; stroke-width:3; }
.fd-wing{ stroke:#ffcc00; stroke-width:3; stroke-linecap:round; }
.fd-dot{ fill:#ffcc00; }
.fd-roll-label{ font-size:10px; color:var(--text-dim); margin-top:4px; }
.fd-side{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; justify-content:center; min-width:0; }
.fd-readouts{ display:flex; gap:8px; }
.fd-readout{
  flex:1 1 0; background:#111a24; border:1px solid var(--panel-border); border-radius:6px;
  padding:4px 6px; text-align:center;
}
.fd-readout span{ display:block; font-size:9px; color:var(--text-dim); letter-spacing:.5px; }
.fd-readout b{ display:block; font-size:15px; color:#3ddc6a; font-family:monospace; letter-spacing:1px; }
.fd-modes{ display:flex; flex-wrap:wrap; gap:4px; }
.fd-mode-badge{
  font-size:9.5px; font-weight:700; padding:3px 6px; border-radius:4px;
  background:#1a2430; color:var(--text-dim); border:1px solid var(--panel-border); letter-spacing:.5px;
}
.fd-mode-badge.active{
  background:#0f3d1f; color:#3ddc6a; border-color:#3ddc6a;
  box-shadow:0 0 6px #3ddc6a55;
}
@media (max-width:420px){
  .fd-attitude{ width:64px; }
  .fd-horizon-svg{ width:64px; height:64px; }
}

.popup-schedule-btn{
  display:block; width:100%; margin:6px 0 4px; padding:9px 12px; text-align:left;
  background:#1a2430; color:#fff; font-weight:600; font-size:11.5px;
  border:1px solid var(--panel-border); border-radius:8px; cursor:pointer; font-family:inherit;
}
.popup-schedule-btn:hover{ background:#212e3d; }

.popup-title{ font-weight:700; font-size:14px; margin-bottom:4px; overflow-wrap:break-word; word-break:break-word; }

/* Klein kadertje bij het toestel tijdens het zweven met de muis. Leaflet
   voegt zelf een .leaflet-tooltip toe; hier stylen we alleen onze eigen
   klasse, zodat we de standaard-Leaflet-tooltipstijl (wit vlekje) volledig
   overschrijven met ons eigen donkere kaartje. */
.aircraft-hover-tooltip{
  background:#0f1e33 !important; color:var(--text) !important; border:1px solid #2a4a70 !important;
  border-radius:8px !important; padding:10px 12px !important; font-size:11.5px !important;
  box-shadow:0 6px 18px #0009 !important; width:220px !important; box-sizing:border-box !important;
  white-space:normal !important;
}
.aircraft-hover-tooltip::before{ display:none !important; } /* het driehoekje-pijltje van Leaflet, oogt niet lekker met onze eigen stijl */
.hover-title{ font-weight:700; font-size:13.5px; color:#fff; overflow-wrap:break-word; word-break:break-word; }
.hover-hex{ font-size:10.5px; color:var(--text-dim); margin-bottom:6px; }
.hover-grid{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; color:var(--text-dim); }
.hover-grid b{ color:#fff; overflow-wrap:break-word; word-break:break-word; }
.hover-dim{ color:var(--text-dim); font-style:italic; }
.popup-compact-logo{ display:block; max-width:100px; max-height:40px; margin:6px 0; object-fit:contain; }
.popup-grid{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:2px 12px; font-size:12px; color:var(--text-dim); }
.popup-grid b{ color:var(--text); overflow-wrap:break-word; word-break:break-word; }
.popup-route{ margin-top:8px; padding-top:8px; border-top:1px solid #223041; font-size:12.5px; }
.popup-route.dim{ color:var(--text-dim); font-style:italic; }
.popup-route.loading{ color:var(--text-dim); }
.route-airline{ font-size:11px; color:var(--accent); font-weight:700; margin-bottom:3px; }
.route-progress{ margin:8px 0; }
.route-progress-bar{
  position:relative; height:6px; border-radius:3px; background:#1a2430;
  margin:0 8px 10px;
}
.route-progress-fill{
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, #f4c430, #3ddc6a);
}
.route-progress-dot{
  position:absolute; top:50%; transform:translate(-50%,-50%); font-size:13px;
  filter:drop-shadow(0 0 3px #000c);
}
.route-progress-stats{ display:flex; gap:6px; }
.route-progress-stat{
  flex:1 1 0; background:#111a24; border:1px solid var(--panel-border); border-radius:6px;
  padding:5px 4px; text-align:center;
}
.route-progress-stat b{ display:block; font-size:12.5px; color:var(--text); }
.route-progress-stat span{ display:block; font-size:8.5px; color:var(--text-dim); letter-spacing:.4px; margin-top:1px; }
.route-map-note{ font-size:9.5px; color:var(--text-dim); font-style:italic; margin-top:3px; }

.popup-photo{ margin:6px 0; }
.popup-photo img{ width:100%; max-width:150px; border-radius:6px; display:block; }
.popup-photo-credit{ font-size:9px; color:var(--text-dim); font-style:italic; margin-top:2px; }
.popup-section-title{
  margin-top:9px; padding-top:7px; border-top:1px solid #223041;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim);
}
.kind-badge{
  display:inline-block; margin-left:6px; font-size:10px; font-weight:600; color:var(--accent);
  border:1px solid var(--accent); border-radius:5px; padding:0px 5px; vertical-align:middle;
}

#loading{
  position:absolute; inset:0; z-index:2000; background:var(--bg); display:flex;
  align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--text-dim);
  transition:opacity .4s ease;
}
#loading .spin{ width:26px; height:26px; border-radius:50%; border:3px solid #223041;
  border-top-color:var(--accent); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

#loading.terminal-loading{
  align-items:flex-start; justify-content:center; background:#000c02;
}
.terminal-lines{
  font-family:monospace; font-size:14px; line-height:1.7; color:#33ff66;
  text-shadow:0 0 4px #33ff6688; max-width:90vw; padding:0 16px;
}
.terminal-lines .tl-line{ white-space:pre-wrap; opacity:0; animation:tl-fade-in .15s ease forwards; }
.terminal-lines .tl-ok{ color:#33ff66; font-weight:700; }
.terminal-lines .tl-cursor{
  display:inline-block; width:9px; height:15px; background:#33ff66; margin-left:2px;
  animation:tl-blink 1s step-end infinite; vertical-align:middle;
}
@keyframes tl-fade-in{ to{ opacity:1; } }
@keyframes tl-blink{ 50%{ opacity:0; } }

#errorBanner{
  position:absolute; top:64px; left:12px; z-index:1500; max-width:360px;
  background:#2a1418; border:1px solid #5c2a2f; color:#ffd7d7; border-radius:10px;
  padding:10px 14px; font-size:12.5px; line-height:1.4; display:none;
}
#errorBanner b{ display:block; margin-bottom:4px; color:#ff9f9f; }

#adminToggleBtn{
  position:absolute; right:12px; bottom:14px; z-index:999;
  background:#0f151ca8; border:1px solid var(--panel-border); color:var(--text-dim);
  border-radius:8px; width:26px; height:26px; font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-decoration:none; opacity:.6;
}
#adminToggleBtn:hover{ background:#1a2430; opacity:1; color:var(--text); }
#homeBtn{
  background:var(--panel); border:2px solid var(--accent); color:var(--text);
  border-radius:10px; height:38px; padding:0 12px; cursor:pointer;
  display:flex; align-items:center; gap:6px; font-size:15px;
}
#homeBtn:hover{ background:#1a2430; }
#homeBtn .home-label{ font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--accent); }

#fullscreenBtn{
  background:var(--panel); border:2px solid var(--accent); color:var(--text);
  border-radius:10px; height:38px; padding:0 12px; cursor:pointer;
  display:flex; align-items:center; gap:6px; font-size:15px;
}
#fullscreenBtn:hover{ background:#1a2430; }
#fullscreenBtn .home-label{ font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--accent); }
/* Standaard verborgen — wordt via JS alleen zichtbaar gemaakt op
   toestellen die de Fullscreen-API daadwerkelijk ondersteunen (op een
   iPhone werkt dit sowieso niet, ook niet in Safari, dus daar blijft
   de knop bewust weg in plaats van een niet-werkende knop te tonen). */
#fullscreenBtn{ display:none; }
#fullscreenBtn.supported{ display:flex; }

#langToggleBtn{
  background:var(--panel); border:1px solid var(--panel-border); color:var(--text);
  border-radius:10px; height:38px; padding:0 12px; cursor:pointer; font-size:12.5px; font-weight:700;
}
#langToggleBtn:hover{ background:#1a2430; }

.airport-marker{
  width:34px; height:34px; border-radius:50%; background:#0f151ccc;
  border:2px solid var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:16px; box-shadow:0 0 8px #0008;
}
.airport-marker-icon{ height:20px; width:auto; display:block; }
.airport-label{
  margin-top:2px; text-align:center; font-size:10px; font-weight:700; color:var(--text);
  background:#0f151cd0; border-radius:5px; padding:1px 5px; white-space:nowrap;
}
.popup-atc-btn{
  display:inline-block; margin-top:6px; background:var(--accent); color:#052430; font-weight:700;
  font-size:11.5px; padding:5px 9px; border-radius:6px; text-decoration:none;
}
.popup-atc-btn:hover{ opacity:.85; }
/* Volle-breedte actieknop binnen een menusectie (bv. FLARM-kaart openen) —
   niet te verwarren met .popup-atc-btn hierboven, die is voor kleinere
   knopjes ín een toestel-/vliegveld-popup. */
.menu-action-btn{
  display:block; width:calc(100% - 24px); margin:8px 12px 4px; padding:10px 12px; text-align:center;
  background:var(--accent); color:#052430; font-weight:700; font-size:12.5px;
  border-radius:8px; border:none; cursor:pointer; font-family:inherit; text-decoration:none;
}
.menu-action-btn:hover{ opacity:.9; }
.atc-channel-list{ display:flex; flex-wrap:wrap; gap:6px; }

/* ============ HELIRADAR-LEGENDA ============ */
.heliradar-legend{ margin:8px 12px 4px; display:flex; flex-direction:column; gap:4px; }
.heliradar-legend-row{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim);
  padding:3px 0;
}
.heliradar-dot{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  box-shadow:0 0 4px currentColor;
}
.heliradar-legend-row span:nth-child(2){ flex:1 1 auto; }
.heliradar-count{
  font-weight:700; color:var(--text); min-width:18px; text-align:right;
}
.atc-switch-hint{ font-size:10.5px; color:var(--text-dim); font-style:italic; line-height:1.4; margin-top:6px; }
.popup-placeholder{ font-size:12px; color:var(--text-dim); font-style:italic; margin-top:6px; }

/* --- vaste ATC-audiospeler onderin --- */
#atcPlayerBar{
  position:absolute; left:0; right:0; bottom:0; z-index:1600;
  background:var(--panel); border-top:1px solid var(--panel-border);
  padding:8px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
#atcPlayerBar.hidden{ display:none; }
#atcPlayerClose{
  background:none; border:none; color:var(--text-dim); font-size:14px; cursor:pointer; padding:2px 6px;
}
#atcPlayerClose:hover{ color:var(--text); }
#atcPlayerLabel{ font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; }
#atcAudio{ height:32px; max-width:320px; flex:1; min-width:180px; }
#atcPlayerFallback{ font-size:11.5px; color:var(--accent); text-decoration:none; white-space:nowrap; }
#atcPlayerFallback:hover{ text-decoration:underline; }
#atcPlayerFallback.hidden{ display:none; }
#atcPlayerHint{
  flex-basis:100%; font-size:10.5px; color:var(--text-dim); font-style:italic;
}

.opensky-credit{ font-size:9.5px; color:var(--text-dim); text-align:right; margin-top:3px; opacity:.7; }
.avionio-frame{ width:100%; height:280px; border:1px solid var(--panel-border); border-radius:6px; background:#fff; }

/* --- vast vliegtuig-infopaneel linksboven (in plaats van een zwevende popup) --- */
#aircraftPanel{
  position:absolute; top:64px; left:12px; z-index:1400; width:230px; max-height:calc(100vh - 160px);
  background:var(--panel); border:1px solid var(--panel-border); border-radius:10px;
  padding:12px 14px; overflow-y:auto; overflow-x:hidden; box-sizing:border-box; box-shadow:0 8px 24px #0007;
}
#aircraftPanel.hidden{ display:none; }
#aircraftPanel::-webkit-scrollbar{ width:7px; }
#aircraftPanel::-webkit-scrollbar-thumb{ background:#28374a; border-radius:4px; }
#acPanelClose{
  position:absolute; top:8px; right:8px; background:none; border:none; color:var(--text-dim);
  font-size:14px; cursor:pointer; padding:4px 6px;
}
#acPanelClose:hover{ color:var(--text); }

/* --- radar-uiterlijk: afstandsringen + ronddraaiende sweep boven de kaarttegels --- */
.runway-label{
  color:#ffffff; font-family:monospace; font-size:10px; font-weight:700;
  text-shadow:0 0 4px #000, 0 0 4px #000; white-space:nowrap; pointer-events:none;
}

.radar-sweep-wrap{
  position:absolute; left:0; top:0; pointer-events:none; z-index:450;
  width:200px; height:200px; margin-left:-100px; margin-top:-100px; /* referentieformaat, gecentreerd op het eigen (0,0)-punt */
  transform-origin:center center; will-change:transform;
}
.radar-sweep-rotor{
  width:100%; height:100%; border-radius:50%; animation: radar-spin 4s linear infinite;
  background: conic-gradient(from 0deg, rgba(53,193,255,0.30) 0deg, rgba(53,193,255,0.0) 40deg, rgba(53,193,255,0) 360deg);
}
@keyframes radar-spin{ to{ transform:rotate(360deg); } }

/* ============ GEDEELDE ONDERDELEN (login + admin dashboard) ============ */
.airport-card{
  background:#0f151c; border:1px solid var(--panel-border); border-radius:10px;
  padding:10px 12px; margin-bottom:10px;
}
.airport-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.airport-card-head .name{ font-weight:700; font-size:14px; }
.airport-card-head .code{ font-size:11px; color:var(--text-dim); }
.airport-toggles{ display:flex; flex-direction:column; gap:6px; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.menu-toggle-row{ padding:10px 12px; }
.switch{ position:relative; display:inline-block; width:34px; height:19px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; cursor:pointer; inset:0; background:#28374a; border-radius:20px; transition:.2s;
}
.switch .slider::before{
  content:""; position:absolute; width:14px; height:14px; left:2.5px; top:2.5px;
  background:#fff; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background:var(--accent); }
.switch input:checked + .slider::before{ transform:translateX(15px); }
.admin-hint{ font-size:12px; color:var(--text-dim); line-height:1.5; margin:8px 0 14px; }
.admin-hint.dim{ margin-top:16px; padding-top:12px; border-top:1px solid var(--panel-border); }

/* ============ LOGINPAGINA ============ */
.login-body{ display:flex; align-items:center; justify-content:center; }
.login-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  padding:32px 30px; width:320px; display:flex; flex-direction:column; gap:12px;
}
.login-card h1{ font-size:18px; margin:0; text-align:center; }
.login-logo{ display:block; width:100%; max-width:260px; margin:0 auto 4px; border-radius:8px; }
.login-sub{ margin:0 0 6px; text-align:center; color:var(--text-dim); font-size:13px; }
.login-card label{ font-size:12.5px; color:var(--text-dim); display:flex; flex-direction:column; gap:5px; }
.login-card input{
  background:#0f151c; border:1px solid var(--panel-border); color:var(--text);
  border-radius:8px; padding:9px 11px; font-size:14px; outline:none;
}
.login-card button{
  margin-top:6px; background:var(--accent); color:#052430; border:none; border-radius:8px;
  padding:10px; font-weight:700; font-size:14px; cursor:pointer;
}
.login-card button:hover{ opacity:.9; }
.login-error{
  background:#2a1418; border:1px solid #5c2a2f; color:#ffb3b3; border-radius:8px;
  padding:8px 10px; font-size:12.5px;
}
.login-back{ text-align:center; color:var(--text-dim); font-size:12.5px; text-decoration:none; margin-top:4px; }
.login-back:hover{ color:var(--text); }

/* ============ ADMIN DASHBOARD ============ */
.admin-body{ padding:28px; }
.admin-wrap{ max-width:900px; margin:0 auto; }
.admin-topline{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.admin-topline h1{ font-size:19px; margin:0; }
.admin-topline-brand{ display:flex; align-items:center; gap:12px; }
.admin-logo{ height:38px; width:auto; border-radius:6px; display:block; }
.admin-topline-actions{ display:flex; gap:14px; }
.admin-topline-actions a{ color:var(--accent); font-size:13px; text-decoration:none; }
.admin-topline-actions a:hover{ text-decoration:underline; }
.admin-flash{
  background:#123120; border:1px solid #1f5c3a; color:#b7f0cd; border-radius:8px;
  padding:9px 12px; font-size:13px; margin-bottom:14px;
}
.visitor-count-box{
  display:inline-block; background:#0f151c; border:1px solid var(--panel-border); border-radius:8px;
  padding:10px 18px; margin-bottom:10px; font-size:14px; color:var(--text-dim);
}
.visitor-count-box b{ font-size:22px; color:var(--accent); margin-right:6px; }
.visitor-log-box{
  max-height:220px; overflow-y:auto; background:#0a0f14; border:1px solid var(--panel-border);
  border-radius:8px; padding:8px 12px; font-family:'SFMono-Regular',Consolas,monospace; font-size:11.5px;
}
.visitor-log-line{ padding:2px 0; color:var(--text-dim); border-bottom:1px solid #1b2530; }
.visitor-log-line:last-child{ border-bottom:none; }
.airport-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:14px; margin-bottom:18px; }
.atc-channels{ margin-top:12px; padding-top:10px; border-top:1px solid var(--panel-border); }
.atc-channels-head{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim); margin-bottom:4px; }
.atc-hint{ font-size:11px; color:var(--text-dim); line-height:1.4; margin:0 0 8px; }
.atc-channel-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; align-items:center; }
.atc-label-input{ flex:0 0 110px; }
.atc-url-input{ flex:1 1 220px; min-width:160px; }
.atc-label-input, .atc-url-input{
  background:#0f151c; border:1px solid var(--panel-border); color:var(--text);
  border-radius:6px; padding:6px 8px; font-size:11.5px; outline:none; min-width:0;
}
.atc-label-input:focus, .atc-url-input:focus{ border-color:var(--accent); }
.atc-test-btn{
  flex:0 0 auto; background:var(--panel); border:1px solid var(--panel-border); color:var(--text-dim);
  border-radius:6px; padding:6px 10px; font-size:11px; cursor:pointer;
}
.atc-test-btn:hover{ color:var(--text); background:#1a2430; }
.atc-test-btn:disabled{ opacity:.5; cursor:default; }
.atc-test-result{ flex-basis:100%; font-size:11px; line-height:1.4; }
.atc-test-result.ok{ color:#7ed321; }
.atc-test-result.fail{ color:#ff9f9f; }
.admin-save-btn{
  background:var(--accent); color:#052430; border:none; border-radius:8px;
  padding:11px 22px; font-weight:700; font-size:14px; cursor:pointer;
}
.admin-save-btn:hover{ opacity:.9; }
.admin-btn-secondary{
  background:transparent; color:var(--accent); border:1px solid var(--accent);
  border-radius:8px; padding:9px 18px; font-weight:600; font-size:13px; cursor:pointer;
}
.admin-btn-secondary:hover{ background:var(--accent); color:#052430; }
.admin-btn-secondary:disabled{ opacity:.5; cursor:default; background:transparent; color:var(--accent); }
.admin-section-h{ font-size:14px; margin:22px 0 4px; color:var(--text); }
.admin-section-h:first-of-type{ margin-top:4px; }
.ad-editor{ background:#0f151c; border:1px solid var(--panel-border); border-radius:10px; padding:14px; }
.ad-field-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim); margin:10px 0 4px; }
.ad-field-label:first-child{ margin-top:0; }
.ad-image-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.ad-remove-image-row{ font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:5px; }
.ad-richtext-toolbar{ display:flex; gap:6px; margin-bottom:6px; }
.ad-richtext-toolbar button{
  background:#1a2430; border:1px solid var(--panel-border); color:var(--text); border-radius:6px;
  width:30px; height:28px; cursor:pointer; font-size:13px;
}
.ad-richtext-toolbar button:hover{ background:#212e3d; }
#adTextArea{
  background:#0a0f16; border:1px solid var(--panel-border); color:var(--text); border-radius:8px;
  padding:8px 10px; font-size:12.5px; margin-bottom:10px; font-family:inherit;
}
.ad-summary-card{
  display:flex; align-items:center; gap:12px; background:#0f151c; border:1px solid var(--panel-border);
  border-radius:10px; padding:10px 12px; margin-bottom:10px;
}
.ad-summary-thumb{ width:44px; height:44px; object-fit:cover; border-radius:6px; flex:0 0 auto; }
.ad-summary-info{ flex:1 1 auto; min-width:0; }
.ad-summary-title{ font-weight:700; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-summary-status{ font-size:11px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-summary-actions{ display:flex; gap:6px; flex-wrap:wrap; flex:0 0 auto; }
.ad-small-btn{
  background:#1a2430; border:1px solid var(--panel-border); color:var(--text); border-radius:8px;
  padding:6px 12px; font-size:11.5px; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.ad-small-btn:hover{ background:#212e3d; }
.ad-image-preview-box{
  width:70px; height:70px; border-radius:8px; border:1px solid var(--panel-border); background:#0a0f16;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden;
}
.ad-image-preview-box img{ width:100%; height:100%; object-fit:contain; }
#adImagePreviewPlaceholder{ font-size:9px; color:var(--text-dim); text-align:center; padding:4px; }
.ad-upload-confirm{ font-size:11px; color:#2ecc71; margin-top:6px; }
#adPreviewOverlay{
  position:fixed; inset:0; z-index:4000; background:#000000b3;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#adPreviewOverlay.hidden{ display:none; }
#adPreviewPanel{
  position:relative; background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  width:340px; max-width:100%; aspect-ratio:1/1; padding:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow-y:auto;
}
#adPreviewClose{
  position:absolute; top:10px; right:10px; background:none; border:1px solid var(--panel-border);
  color:var(--text-dim); border-radius:8px; width:28px; height:28px; font-size:13px; cursor:pointer;
}
#adPreviewImg{ max-width:100%; max-height:140px; border-radius:8px; margin-bottom:10px; object-fit:contain; }
#adPreviewTitle{ font-weight:700; font-size:15px; color:var(--text); margin-bottom:8px; }
#adPreviewText{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-bottom:10px; }
#adPreviewButton{
  display:inline-block; background:var(--accent); color:#052430; font-weight:700; font-size:12.5px;
  padding:8px 16px; border-radius:8px; text-decoration:none;
}

/* ============ ZWEVENDE ADVERTENTIE — beheerpaneel-voorbeeld ============ */
#fadPreviewOverlay{
  position:fixed; inset:0; z-index:4000; background:#000000b3;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#fadPreviewOverlay.hidden{ display:none; }
#fadPreviewPanel{
  position:relative; background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  width:340px; max-width:100%; padding:16px; text-align:center;
}
#fadPreviewClose{
  position:absolute; top:8px; right:8px; background:none; border:1px solid var(--panel-border);
  color:var(--text-dim); border-radius:8px; width:26px; height:26px; font-size:12px; cursor:pointer;
}
#fadPreviewImg{ width:100%; max-height:250px; border-radius:8px; margin-bottom:8px; object-fit:contain; }
#fadPreviewTitle{ font-weight:700; font-size:13.5px; color:var(--text); margin-bottom:3px; }
#fadPreviewSubtitle{ font-size:11.5px; color:var(--text-dim); margin-bottom:8px; }
#fadPreviewButton{
  display:inline-block; background:var(--accent); color:#052430; font-weight:700; font-size:11.5px;
  padding:6px 14px; border-radius:8px; text-decoration:none;
}

/* ============ ZWEVENDE ADVERTENTIE — daadwerkelijke kaart op de site ============ */
#floatingAdCard{
  position:fixed; right:14px; bottom:14px; z-index:1500; width:260px; max-width:calc(100vw - 28px);
  background:var(--panel); border:1px solid var(--panel-border); border-radius:12px;
  box-shadow:0 8px 24px #0007; overflow:hidden;
  transform:translateX(calc(100% + 30px)); transition:transform .5s ease, bottom .2s;
}
#floatingAdCard.slide-in{ transform:translateX(0); }
/* Als de ATC-geluidsbalk (volledige breedte onderin) actief is, schuift
   de zwevende advertentie omhoog zodat ze elkaar niet overlappen. */
body:has(#atcPlayerBar:not(.hidden)) #floatingAdCard{ bottom:70px; }
#floatingAdCard.hidden{ display:none; }
#floatingAdClose{
  position:absolute; top:6px; right:6px; z-index:1; background:#000a; border:none; color:#fff;
  border-radius:6px; width:22px; height:22px; font-size:11px; cursor:pointer; line-height:1;
}
#floatingAdImg{ width:100%; height:auto; display:block; }
#floatingAdBody{ padding:8px 12px; }
#floatingAdTitle{ font-weight:700; font-size:13px; color:var(--text); margin-bottom:2px; }
#floatingAdSubtitle{ font-size:11px; color:var(--text-dim); margin-bottom:8px; }
/* Voorkomt onnodige lege ruimte onderin: de marge onder de titel/ondertekst
   is alleen bedoeld om ruimte te maken vóór het volgende onderdeel — als
   dat onderdeel (ondertekst/knop) ontbreekt, hoort die marge er ook niet
   te zijn. Precies dit veroorzaakte de opvallende lege strook die je
   liet zien bij een advertentie met alleen een titel. */
#floatingAdBody > *:last-child{ margin-bottom:0; }
#floatingAdButton{
  display:inline-block; background:var(--accent); color:#052430; font-weight:700; font-size:11px;
  padding:6px 12px; border-radius:8px; text-decoration:none;
}
@media (max-width:700px){
  #floatingAdCard{ right:8px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); width:220px; }
}

.mapstyle-row{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:8px; }
.mapstyle-toggle{ background:#0f151c; border:1px solid var(--panel-border); border-radius:10px;
  padding:9px 14px; gap:12px; }

/* ============================================================
   MOBIEL / SMALLE SCHERMEN
   De kaart blijft de hoofdmoot; overlays worden compacter en
   herschikt zodat niets overlapt of van het scherm afloopt.
============================================================= */
@media (max-width: 700px){
  .aircraft-hover-tooltip{ width:min(220px, calc(100vw - 20px)) !important; }
  #installBanner{ padding:7px 10px; font-size:11.5px; }

  #newsTicker{ padding:5px 0 5px 8px; gap:6px; }
  #newsTickerLabel{ font-size:9px; padding:2px 6px; }
  .ticker-item{ font-size:11.5px; padding:0 16px; }
  .ticker-sep{ margin-right:16px; }
  #installBannerText{ flex-basis:100%; order:1; }
  #installBtnAction{ order:2; }
  #installBannerClose{ order:3; margin-left:auto; }

  #topbar{
    flex-wrap:wrap; gap:6px; left:8px; right:8px; justify-content:flex-start;
    /* env(safe-area-inset-top) is 0 op de meeste toestellen, maar op
       een iPhone met notch/Dynamic Island precies de hoogte van dat
       systeembalkje — zo blijven we daar altijd netjes onder, in plaats
       van een vast getal te gokken dat op sommige modellen te weinig is. */
    top:calc(env(safe-area-inset-top, 0px) + 10px);
  }
  .leaflet-top.leaflet-left{ top:calc(env(safe-area-inset-top, 0px) + 90px); }
  #adminToggleBtn{ width:24px; height:24px; font-size:11px; right:8px; bottom:8px; }
  #homeBtn{ height:34px; padding:0 9px; font-size:13px; }
  #langToggleBtn{ height:34px; padding:0 9px; font-size:11px; }
  #homeBtn .home-label{ font-size:10px; }
  #fullscreenBtn{ height:34px; padding:0 9px; font-size:13px; }
  #fullscreenBtn .home-label{ font-size:10px; }

  #sidebarWrap{ top:56px; right:8px; }
  #sidebar{ width:170px; max-height:68vh; }
  #sidebarInner{ width:170px; }
  #sidebarFooter{ width:170px; }

  #aircraftPanel{
    left:50%; right:auto; top:80px; transform:translateX(-50%);
    width:min(240px, calc(100vw - 32px)); max-height:50vh;
  }

  #bottomBarsWrap{ left:8px; bottom:8px; }
  #brandBar{ padding:5px 10px 5px 6px; font-size:13px; }
  .brand-logo{ height:26px; }
  .brand-owner{ display:block; font-size:9.5px; }

  .stat{ padding:6px 10px; font-size:11.5px; }

  /* Alleen in verticale stand op een telefoon: de balkjes onderin vielen
     deels weg achter de eigen navigatiebalk van de mobiele browser (die
     alleen in staande stand onderin verschijnt, niet liggend). Extra
     ruimte erbij, boven op de gewone mobiele positionering hierboven —
     nu op de gezamenlijke container, dus de tussenruimte tussen de twee
     balken zelf verandert niet mee (die komt vast van de flexbox-gap
     hierboven), alleen de hele groep schuift samen omhoog. */
  @media (orientation: portrait){
    #bottomBarsWrap{ bottom:calc(8px + env(safe-area-inset-bottom, 0px) + 46px); }
  }

  #errorBanner{ left:8px; right:8px; max-width:none; }

  .login-card{ width:calc(100vw - 32px); max-width:320px; }
  .admin-body{ padding:16px; }
  .admin-topline-brand{ flex-wrap:wrap; }
}