/* styles/shared.css
 * Gedeeld basisbestand voor alle pagina's (verbeterplan Fase 8: consistente
 * vormgeving site-breed). Bevat alleen wat identiek HOORT te zijn overal —
 * kleurvariabelen, basistypografie en de header/navigatie ("brand" +
 * ".tabNav") — dus precies de plekken waar losse per-pagina patches eerder
 * ongemerkt tot afwijkingen leidden (zie audit: --gold ontbrak op
 * index.html, drie verschillende namen voor dezelfde foutkleur, twee net
 * andere lichte-modus-paletten, competities.html met eigen afwijkende
 * surface-variabelen, wisselende border-radius op vergelijkbare knoppen).
 * Pagina-specifieke content-CSS blijft gewoon in het eigen <style>-blok.
 */

:root[data-theme="dark"]{
  --bg:#0d1420; --bg-alt:#131c2c; --surface:#1a2536; --surface-2:#212e42; --surface-3:#2a3a52;
  --line:#2e3d54; --accent:#22c07a; --accent-dim:#1a9a61; --accent2:#3ddb92; --accent2-dim:#2bb377;
  --gold:#f0b429; --gold-dim:#c98f16; --red:#ff5470; --favorite:#6c5ce7;
  --text:#f2f6fb; --text-dim:#a9b7cc; --text-faint:#71829d; --contrast:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,0.35); --shadow-sm:0 2px 8px rgba(0,0,0,0.25);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f7fa; --bg-alt:#ffffff; --surface:#ffffff; --surface-2:#f2f5f9; --surface-3:#e7ecf3;
  --line:#dde4ee; --accent:#0e9f62; --accent-dim:#0b7f4f; --accent2:#0e9f62; --accent2-dim:#0b7f4f;
  --gold:#e5a712; --gold-dim:#b9860c; --red:#e0344d; --favorite:#5541c9;
  --text:#16213a; --text-dim:#51617e; --text-faint:#8493ad; --contrast:#ffffff;
  --shadow:0 10px 30px rgba(30,50,90,0.12); --shadow-sm:0 2px 10px rgba(30,50,90,0.08);
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;}

header{
  padding:14px 22px;background:var(--bg-alt);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;z-index:1200;
}

/* WAAROM z-index:1200 op de header en z-index:0 hieronder op de kaart:
   Leaflet geeft zijn eigen bedieningselementen (.leaflet-top/.leaflet-bottom,
   dus de zoomknoppen en de bronvermelding) z-index 1000. Het kaart-element
   zelf maakte geen eigen stapelcontext, dus die 1000 concurreerde rechtstreeks
   met de header (z-index 10) -- en won. Gevolg, door Jim gemeld op mobiel: het
   uitklapmenu van de navigatie viel ACHTER de kaart/zoomknoppen. .leaflet-
   container is door Leaflet al position:relative, dus een z-index:0 erop
   sluit alle interne z-indexen van de kaart in zonder iets aan de kaart zelf
   te veranderen -- dat repareert index.html, grounds.html EN de sticky header
   boven #tripMap op tripplanner.html in een keer. */
.leaflet-container{z-index:0;}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;color:inherit;transition:opacity .15s;}
.brand:hover{opacity:0.85;}
.logoMark{width:34px;height:34px;flex-shrink:0;}
.logoMark svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,0.25));}
.brandText{display:flex;flex-direction:column;line-height:1.15;}
.brandName{font-family:'Manrope',sans-serif;font-size:19px;font-weight:800;letter-spacing:0.2px;}
.brand .tagline{font-size:11.5px;color:var(--text-faint);margin-top:1px;}

.tabNav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.tabNav a{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:8px;
  color:var(--text-dim);text-decoration:none;font-size:12.5px;font-weight:600;
  transition:background .15s,color .15s;
}
.tabNav a:hover{background:var(--surface-2);color:var(--accent);}
.tabNav a.active{background:var(--accent);color:#fff;}
/* Rolgebaseerde navigatie: Database/Database API/Competities mogen niet
   alleen qua pagina-inhoud, maar ook als LINK zelf verborgen zijn voor
   uitgelogde bezoekers en gewone (niet-admin) gebruikers. Standaard verborgen
   (geen "flits" van admin-links vóórdat site-auth.js de rol kent) — JS
   (scripts/site-auth.js, applyNavVisibility()) toont ze pas na een bevestigde
   admin-rol via een inline style (wint altijd van deze class-regel). */
.tabNav a.adminOnly{display:none;}

/* Responsieve navigatie (verbeterplan-vervolg): met genoeg nav-items past de
   balk niet meer naast het inlog-/thema-icoon op een smal scherm — .tabNav
   werd dan als geheel over de rand van het scherm geduwd i.p.v. netjes te
   wrappen. Onder de breakpoint hieronder wordt .tabNav een verborgen
   dropdown, geopend via #navMoreBtn (scripts/nav-responsive.js regelt het
   open/dicht-klikken; deze CSS bepaalt alleen WANNEER en HOE). Werkt voor
   elk aantal nav-items, dus een volgend toegevoegd menu-item breekt dit niet
   opnieuw. */
/* button.navMoreBtn (element+klasse) i.p.v. .navMoreBtn: moet .iconBtn's
   eigen display:flex verslaan (gelijke specificiteit, .iconBtn staat verderop
   in dit bestand en zou anders winnen — bevestigd met een live Playwright-
   check die navMoreBtn zichtbaar op brede schermen liet zien vóór deze fix). */
button.navMoreBtn{display:none;}
@media (max-width: 880px){
  /* GEVONDEN (19-9-2026, Jim: uitklapmenu opent onderaan de pagina i.p.v.
     direct onder de header): dit stond op position:absolute + top:100%,
     leunend op de aanname dat position:sticky op <header> (basisregel
     hierboven) een positioneringscontext voor deze afstammeling is. Dat
     klopt in Chromium (hier bevestigd met een live mobiele Playwright-check
     op alle pagina's) en is ook zo bedoeld in de CSS-spec, maar Safari/
     WebKit staat bekend om precies dit: sticky-elementen die daar NIET als
     positioneringscontext tellen. Dan valt top:100% terug op de eerstvolgende
     WEL-gepositioneerde voorouder (of, bij geen enkele, de hele pagina) --
     en "100% van de hele pagina" is exact "onderaan de pagina", precies
     Jim's klacht. index.html maakt het nog fragieler: die header is zelf
     geen sticky maar EIGEN position:relative (met een inklapbare filterrij
     erin), dus zijn hoogte varieert -- top:100% moet daar telkens opnieuw
     kloppen.
     Fix: position:fixed (altijd viewport-relatief, geen enkele afhankelijkheid
     van welke voorouder wel/niet een positioneringscontext is) met een top
     die scripts/nav-responsive.js bij elke keer openen (en bij resize terwijl
     open) uitrekent als de ECHTE onderkant van <header> op dat moment --
     werkt daardoor identiek op elke pagina, elke headerhoogte en elke browser.

     Selector met element+klasse (nav.tabNav i.p.v. .tabNav): index.html
     definieert zijn EIGEN, latere .tabNav{display:flex;...}-regel in zijn
     eigen <style>-blok (iets andere maten voor de kaartpagina) — bij gelijke
     specificiteit wint normaal de latere regel, media-query of niet, dus
     zonder deze verhoogde specificiteit zou index.html's eigen regel dit
     hier overschrijven en juist NIET inklappen op smalle schermen. */
  nav.tabNav{
    display:none;position:fixed;left:14px;right:14px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;
    padding:8px;box-shadow:var(--shadow);z-index:20;
  }
  nav.tabNav.navOpen{display:flex;}
  nav.tabNav a{width:100%;height:40px;}
  button.navMoreBtn{display:flex;}
}

/* Kop op een telefoon. Gemeten op 390px breed: merk + hamburger + Inloggen +
   dag/nachtknop pasten niet naast elkaar, waardoor de dag/nachtknop op ELKE
   pagina behalve de kaart naar een tweede regel viel -- een lege balk van ~50px
   boven de inhoud. Alles hieronder is net genoeg verkleind om op één regel uit
   te komen zonder dat een knop onaanraakbaar klein wordt (34px blijft ruim
   boven de 24px die WCAG als ondergrens noemt). Stond eerder per pagina in
   index.html en grounds.html; hier staat het één keer, dus ook standings,
   reisplanner, inloggen, steun, 404, jaaroverzicht en de beheerpagina's
   krijgen het. */
@media (max-width:760px){
  header{padding:12px 14px;gap:9px;}
  .brand{gap:9px;}
  .brand .tagline{display:none;}
  .brandName{font-size:16px;}
  .logoMark{width:28px;height:28px;}
  .navBtn{padding:0 11px;font-size:12px;}
  .iconBtn{width:34px;height:34px;}
  .iconBtn svg{width:16px;height:16px;}
}

/* Gedeeld land-groepeer-/inklap-component (scripts/country-groups.js),
   gebruikt door database.html EN database-api.html — bewust hier en niet
   per pagina gedupliceerd, anders ontstaan er twee losse manieren van
   hetzelfde (zie de toelichting in country-groups.js). Wat een pagina er
   ZELF in stopt (leagueName-inhoud, rijkolommen) blijft page-eigen CSS. */
.country{margin-bottom:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-alt);box-shadow:var(--shadow-sm);}
.countryBar{
  display:flex;align-items:center;gap:13px;padding:16px 20px;cursor:pointer;user-select:none;
  transition:background .12s;
}
.countryBar:hover{background:var(--surface-2);}
.countryBar img{width:26px;height:19px;border-radius:3px;object-fit:cover;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.countryBar .cname{font-family:'Manrope',sans-serif;font-size:17px;font-weight:800;letter-spacing:0.2px;}
.countryBar .ccount{margin-left:auto;font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums;background:var(--surface-2);padding:4px 10px;border-radius:999px;}
.countryBar .chev{transition:transform .2s;color:var(--text-faint);width:15px;height:15px;flex-shrink:0;}
.country.open .chev{transform:rotate(90deg);}
.country.open .countryBar{border-bottom:1px solid var(--line);}

.countryBody{display:none;padding:8px 12px 14px;}
.country.open .countryBody{display:block;}

.league{margin:12px 6px 6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.leagueName{
  font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.5px;
  padding:11px 14px;display:flex;align-items:center;gap:10px;background:var(--surface-2);border-bottom:1px solid var(--line);
}

/* Responsieve "kaart"-tabellen (database.html/database-api.html): een brede
   tabel proppen op een smal scherm liet kolommen van het scherm vallen (bv.
   coördinaten afgekapt). Onder de breakpoint wordt elke <tr> een los blokje
   met label+waarde gestapeld i.p.v. zijwaarts te moeten scrollen. Vereist
   een <table class="cardTable"> en een data-label="..." op elke <td> (het
   label komt uit die attribuut, niet meer uit de <thead>, die dan ook
   verborgen wordt). Gedeeld tussen beide pagina's — zelfde patroon, geen
   twee losse manieren van hetzelfde. */
@media (max-width: 700px){
  .cardTable, .cardTable tbody, .cardTable tr{display:block;width:100%;}
  .cardTable thead{display:none;}
  .cardTable tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:4px 12px;background:var(--surface);}
  .cardTable td{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:8px 0;border-bottom:1px solid var(--surface-2);text-align:right;white-space:normal;
  }
  .cardTable tr:last-child, .cardTable td:last-child{border-bottom:none;}
  .cardTable td::before{
    content:attr(data-label);font-size:10px;text-transform:uppercase;letter-spacing:0.5px;
    color:var(--text-faint);font-weight:700;text-align:left;flex-shrink:0;
  }
  .cardTable td[data-label=""]::before{display:none;}
}

/* Gedeelde bewerk-overlay (scripts/stadium-editor.js) + kleine rij-actie-
   knoppen — voorheen alleen op database.html, nu ook op database-api.html
   (punt 2: dezelfde losse-rij-bewerking, hergebruikt i.p.v. opnieuw
   gebouwd). Hier ondergebracht i.p.v. per pagina gedupliceerd, zelfde
   redenering als .cardTable/.country hierboven. */
.actionsCell{white-space:nowrap;text-align:right;width:1%;}
.rowBtn{
  background:transparent;border:1px solid var(--line);color:var(--text-faint);cursor:pointer;
  width:26px;height:26px;border-radius:6px;font-size:13px;line-height:1;margin-left:4px;
}
.rowBtn:hover{border-color:var(--accent);color:var(--accent);}
.delBtn:hover{border-color:var(--red);color:var(--red);}

.editorOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;
}
.editorBox{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;padding:22px;width:100%;max-width:440px;
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);
}
.editorBox h3{font-family:'Manrope',sans-serif;margin:0 0 14px;font-size:16px;}
.editorBox label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-faint);font-weight:600;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.4px;}
.editorBox input{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  padding:9px 11px;border-radius:7px;font-size:13px;outline:none;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;
}
.editorBox input:focus, .editorBox select:focus{border-color:var(--accent);}
.editorBox select{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  padding:9px 11px;border-radius:7px;font-size:13px;outline:none;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;
  cursor:pointer;
}
.editorRow{display:flex;gap:10px;}
.editorRow label{flex:1;}
.editorBtns{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;}
.editorBtns .btn{height:38px;padding:0 16px;border-radius:8px;cursor:pointer;font-weight:700;font-size:13px;border:none;}
.editorBtns .btn.primary{background:var(--accent);color:#fff;}
.editorBtns .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text-dim);}

/* Competitie-brede bewerkknop (scripts/league-editor.js) — voorheen alleen
   op database.html, nu ook op database-api.html. Zelfde redenering als
   hierboven: één plek i.p.v. per pagina gedupliceerd. */
.editLeagueBtn{
  font-size:10px;text-transform:none;letter-spacing:0;font-weight:600;padding:3px 9px;width:auto;height:auto;
  border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--text-faint);cursor:pointer;
}
.editLeagueBtn:hover{border-color:var(--accent);color:var(--accent);}

.navBtn{
  display:inline-flex;align-items:center;gap:7px;height:38px;background:transparent;border:1px solid var(--line);color:var(--text-dim);
  padding:0 14px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s;
}
.navBtn:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-2);}
.iconBtn{
  width:38px;height:38px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);
  border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .15s,color .15s,background .15s;
}
.iconBtn:hover{border-color:var(--accent);color:var(--accent);}
.iconBtn svg{width:18px;height:18px;}

/* "Vereist admin-login"-wachtscherm (database.html, competities.html,
   admin.html) — gevuld door scripts/site-auth.js (guardAdminPage). */
.accessGate{max-width:520px;margin:60px auto;padding:40px 24px;text-align:center;color:var(--text-faint);font-size:13.5px;line-height:1.6;}
.accessGate strong{display:block;color:var(--text);font-size:16px;margin-bottom:8px;font-family:'Manrope',sans-serif;}
.accessGate a{color:var(--accent);font-weight:700;text-decoration:none;}
.accessGate a:hover{text-decoration:underline;}

/* Totalenbalk bovenaan (database.html en database-api.html) — drie grote
   getallen: stadions/rijen, landen, competities. Stond eerst alleen in
   database.html; nu gedeeld zodat beide pagina's dezelfde stijl gebruiken
   in plaats van een tweede kopie ernaast. */
.summary{
  display:flex;gap:0;flex-wrap:wrap;padding:20px 24px;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:14px;margin-bottom:20px;box-shadow:var(--shadow-sm);
}
.summary .stat{padding:0 28px;border-right:1px solid var(--line);}
.summary .stat:first-child{padding-left:0;}
.summary .stat:last-child{border-right:none;}
.summary .stat .n{font-family:'Manrope',sans-serif;font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);}
.summary .stat .l{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.6px;font-weight:600;margin-top:2px;}

/* ---------------------------------------------------------------------------
   Gedeelde voettekst (scripts/site-footer.js bouwt de HTML, hier staat alleen
   de vormgeving). Reden dat dit bestaat: er stond op GEEN ENKELE van de twaalf
   pagina's een <footer>, waardoor er nergens uitleg over de site, contact,
   bronvermelding of een plek voor een steunknop was -- terwijl het projectdoel
   expliciet "dezelfde header EN footer overal" noemt.

   Eén bron, net als de header: de markup komt uit één script, zodat een
   nieuwe link niet in twaalf bestanden apart bijgewerkt hoeft te worden.
   --------------------------------------------------------------------------- */
.siteFooter{
  background:var(--bg-alt);border-top:1px solid var(--line);
  padding:34px 22px 22px;margin-top:auto;
  font-size:13px;color:var(--text-dim);
}
.siteFooter .footInner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:28px;
}
.siteFooter .footAbout{display:flex;flex-direction:column;gap:8px;}
.siteFooter .footBrand{
  font-family:'Manrope',sans-serif;font-size:15px;font-weight:800;letter-spacing:0.2px;color:var(--text);
}
.siteFooter .footAbout p{margin:0;line-height:1.6;max-width:46ch;}
.siteFooter .footNav{display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
.siteFooter .footHead{
  font-size:10.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--text-faint);
}
.siteFooter .footNav a{color:var(--text-dim);text-decoration:none;transition:color .15s;}
.siteFooter .footNav a:hover{color:var(--accent);}
.siteFooter .footBase{
  max-width:1100px;margin:26px auto 0;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-size:11.5px;color:var(--text-faint);
}
.siteFooter .footBase a{color:var(--accent);text-decoration:none;font-weight:600;}
.siteFooter .footKort{display:none;}
.siteFooter .footBase a:hover{text-decoration:underline;}

@media (max-width:700px){
  .siteFooter{padding:26px 16px 18px;}
  .siteFooter .footInner{grid-template-columns:1fr;gap:22px;}
  .siteFooter .footNav{
    flex-direction:row;flex-wrap:wrap;gap:6px 16px;align-items:center;
  }
  .siteFooter .footHead{width:100%;}
}

/* Compacte variant voor de kaartpagina (index.html). Die pagina is een
   schermvullende app (#root is 100dvh hoog, de kaart vult de rest) -- een
   volle voettekst zou daar een flinke hap uit de kaart nemen. Daarom daar
   één smalle regel met dezelfde links, zodat de voettekst wel overal staat
   maar de kaart duidelijk blijft. */
.siteFooter.compact{padding:0;margin-top:0;flex:none;}
.siteFooter.compact .footInner{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  max-width:none;padding:9px 22px;
}
.siteFooter.compact .footAbout{flex-direction:row;align-items:center;gap:10px;margin-right:auto;}
.siteFooter.compact .footAbout p{display:none;}
.siteFooter.compact .footBrand{font-size:13px;}
.siteFooter.compact .footNav{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;}
.siteFooter.compact .footHead{display:none;}
.siteFooter.compact .footBase{display:none;}
@media (max-width:700px){
  /* Op een telefoon vielen deze zeven links over twee regels vlak onder de
     kaart -- klein, druk, en precies dezelfde links die ook al in het
     hamburgermenu bovenin staan. Gemeten op 390px: dat kostte ~50px kaart.
     Op mobiel dus één regel: bronvermelding plus de steunlink, de navigatie
     laten we aan het menu bovenin over. */
  .siteFooter.compact .footInner{display:none;}
  .siteFooter.compact .footBase{
    display:flex;justify-content:center;align-items:center;gap:4px 12px;
    margin:0;padding:9px 16px;border-top:none;font-size:11px;
  }
  .siteFooter.compact .footSource, .siteFooter.compact .footLang{display:none;}
  .siteFooter.compact .footKort{display:inline;}
}