/* BBF Migliore: de gedeelde stijl van de app (index.html) en het openbare speelschema (speelschema.html), zie PROJECT.md, Nieuwe stijl.
   Wordt vóór app.css of speelschema.css geladen; die bevatten alleen wat bij hun eigen pagina hoort.
   Alle kleuren staan hieronder als variabelen, met een tweede set voor de donkere stand. De oude namen (--g, --k, --w, --gr, --gl, --p,
   --zacht, --blz, --testbg) wijzen naar de nieuwe, zodat de opmaak van de tabbladen meteen meekleurt. Met de klasse pt-vastlicht op
   html blijft het altijd licht (het speelschema in een venster op de website van de club).
   Gewone tekst in het systeemlettertype, alleen grote titels in Kumbh Sans 700 (Bunny Fonts in de html). Tekst in rem, 1rem = 17px. */
:root{color-scheme:light dark;
  --achter:#F2F2F7;--kaart:#FFFFFF;--tekst:#1C1C1E;--tekst2:#8E8E93;--lijn:#E5E5EA;--vlak:#F2F2F7;--rand:#C7C7CC;
  --balk:rgba(249,249,251,.92);
  --blad:#F2F2F7;--blok:#FFFFFF;--seg:rgba(118,118,128,.12);--seg-schuif:#FFFFFF;
  --accent:#F2A80F;--accent-tekst:#B86E00;--op-accent:#000000;--focus:#B86E00;--op-fout:#FFFFFF;
  --groen-bg:#E3F5E8;--groen-tekst:#1B6B33;--blauw-bg:#E4EFFD;--blauw-tekst:#0B4F9C;--rood-bg:#FDE7E6;--rood-tekst:#B3261E;
  --geel-bg:#FFF3CC;--geel-tekst:#7A4E00;--paars-bg:#EFE7FB;--paars-tekst:#5B2A8C;--groenblauw-bg:#DDF3F2;--groenblauw-tekst:#0D5E5C;
  --ok:#248A3D;--fout:#C4271B;--bl:#0A64C8;--schakel:#34C759;
  --ic-paars:#8E5BD0;--ic-geel:#F5C518;--ic-groenblauw:#1F9E99;--ic-grijs:#8E8E93;--op-ic:#FFFFFF;
  --schaduw:0 1px 2px rgba(0,0,0,.05),0 2px 12px rgba(0,0,0,.05);--laag:rgba(0,0,0,.4);
  --kop-h:52px;--tab-h:49px;--zij-b:220px;--r:.75rem;
  --systeem:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --titel-letter:"Kumbh Sans",var(--systeem);
  --g:var(--accent);--k:var(--tekst);--w:var(--kaart);--gr:var(--rand);--gl:var(--lijn);--p:var(--vlak);--blz:var(--blauw-bg);
  --zacht:var(--tekst2);--testbg:var(--geel-bg)}
:root.pt-vastlicht{color-scheme:light}
@media (prefers-color-scheme:dark){
  :root:not(.pt-vastlicht){--achter:#000000;--kaart:#1C1C1E;--tekst:#FFFFFF;--tekst2:#98989F;--lijn:#38383A;--vlak:#2C2C2E;--rand:#48484A;
    --balk:rgba(22,22,24,.9);
    --blad:#1C1C1E;--blok:#2C2C2E;--seg:rgba(118,118,128,.24);--seg-schuif:#636366;
    --accent-tekst:#F2A80F;--focus:#F2A80F;--op-fout:#000000;
    --groen-bg:#123D20;--groen-tekst:#8BE3A6;--blauw-bg:#0D2B4D;--blauw-tekst:#9CCBFF;--rood-bg:#4A1513;--rood-tekst:#FFA39B;
    --geel-bg:#3D2E05;--geel-tekst:#FFD66B;--paars-bg:#2F1C49;--paars-tekst:#D6BAFF;--groenblauw-bg:#0B3635;--groenblauw-tekst:#7FDAD6;
    --ok:#30D158;--fout:#FF6961;--bl:#64A8FF;--schakel:#30D158;
    --schaduw:none;--laag:rgba(0,0,0,.6)}
}
html{font-size:106.25%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* iPhone en iPad: de tekstgrootte uit de instellingen van het toestel volgen (standaard 17px) */
@supports (font:-apple-system-body) and (-webkit-touch-callout:none){html{font:-apple-system-body}}
html,body{margin:0;padding:0;background:var(--achter)}
body{font-family:var(--systeem);color:var(--tekst);font-size:1rem;line-height:1.5;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

/* de grote titel en de voettekst */
.pt-titel{margin:4px 0 12px;font-family:var(--titel-letter);font-size:2rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.pt-voet{margin:24px 16px 8px;font-size:.75rem;line-height:1.5;color:var(--tekst2);text-align:center}
.pt-voet a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:2px}

/* knoppen: oranje hoofdknop, rustige knop met een rand en een tekstknop */
.pt-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;font:inherit;font-size:1rem;
  font-weight:600;line-height:1.25;border:none;border-radius:var(--r);background:var(--accent);color:var(--op-accent);cursor:pointer;
  text-decoration:none}
.pt-knop:hover:not([disabled]){filter:brightness(.96)}
.pt-licht{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;font:inherit;font-size:.9375rem;
  font-weight:600;border:1px solid var(--rand);border-radius:var(--r);background:var(--kaart);color:var(--tekst);cursor:pointer}
.pt-licht:hover:not([disabled]){background:var(--vlak)}
.pt-tlink{display:inline-flex;align-items:center;min-height:44px;background:none;border:none;padding:0 2px;font:inherit;font-size:.9375rem;
  font-weight:600;color:var(--accent-tekst);text-decoration:none;cursor:pointer}
.pt-tlink:hover{text-decoration:underline}
.pt-knop[disabled],.pt-licht[disabled],.pt-tlink[disabled]{opacity:.45;cursor:default}
/* rustige melding (geen gegevens, Dit onderdeel volgt) */
.pt-msg{margin:0;padding:20px;background:var(--kaart);border-radius:var(--r);color:var(--tekst2)}
/* melding na een actie: neutraal, ok groen, err rood (altijd met tekst) */
.pt-melding{margin:12px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--kaart);border:1px solid var(--lijn);color:var(--tekst);
  font-size:.9375rem;font-weight:600;line-height:1.4}
.pt-melding.ok{background:var(--groen-bg);border-color:transparent;color:var(--groen-tekst)}
.pt-melding.err{background:var(--rood-bg);border-color:transparent;color:var(--rood-tekst)}
/* label Test bij testdata */
.pt-test{display:inline-block;vertical-align:3px;margin-left:8px;padding:1px 8px;border-radius:99px;background:var(--geel-bg);
  color:var(--geel-tekst);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;white-space:nowrap}
/* grijze placeholders tijdens het laden */
.pt-ph{display:grid;gap:10px}
.pt-phbl{display:block;height:14px;border-radius:6px;background:var(--lijn);animation:pt-puls 1.4s ease-in-out infinite}
@keyframes pt-puls{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.pt-phbl{animation:none}}

/* ====== bouwstenen voor lijsten ====== */
/* de grijze regel onder de grote titel */
.pt-subregel{margin:-.4rem 0 .9rem;font-size:.9375rem;line-height:1.4;color:var(--tekst2)}
.pt-subregel:empty{display:none}
/* segmentknop: grijze strook met een witte schuif op de gekozen keuze (alleen transform) */
.pt-seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:2px;border-radius:.6rem;background:var(--seg)}
.pt-segschuif{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / 3);border-radius:.5rem;
  background:var(--seg-schuif);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04);transition:transform .25s ease,opacity .2s ease}
.pt-segschuif.pt-weg{opacity:0}
.pt-segknop{position:relative;z-index:1;min-height:2.6rem;margin:0;padding:.3rem .25rem;font:inherit;font-size:.875rem;
  font-weight:500;line-height:1.2;white-space:normal;color:var(--tekst);background:none;border:none;border-radius:.5rem;cursor:pointer}
.pt-segknop[aria-pressed="true"]{font-weight:600}
.pt-segnum{color:var(--tekst2);font-variant-numeric:tabular-nums}
.pt-segknop:focus-visible{outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.pt-segschuif{transition:none}}
/* afgeronde knoppen in een rij die horizontaal scrolt (categorieën), de gekozen in oranje */
.pt-pillen{display:flex;gap:.5rem;overflow-x:auto;padding:.1rem 0 .3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pt-pillen::-webkit-scrollbar{display:none}
.pt-pil{flex:none;min-height:2.85rem;margin:0;padding:0 1.1rem;font:inherit;font-size:1rem;font-weight:600;white-space:nowrap;
  color:var(--tekst);background:var(--kaart);border:1px solid var(--rand);border-radius:99px;cursor:pointer}
.pt-pil[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
/* de lijst: regels in witte blokken, eventueel een blok per groep met een kleine grijze kop */
.pt-groep+.pt-groep{margin-top:1.1rem}
.pt-gkop{margin:0 0 .4rem;padding:0 .9rem;font-size:.8125rem;font-weight:500;color:var(--tekst2)}
.pt-rijen{list-style:none;margin:0;padding:0;background:var(--kaart);border-radius:.75rem;overflow:hidden;box-shadow:var(--schaduw)}
.pt-rijen>li{position:relative}
.pt-rijen>li+li::before{content:"";position:absolute;top:0;left:4.05rem;right:0;border-top:1px solid var(--lijn)}
.pt-rijen.pt-zonderav>li+li::before{left:.9rem}
.pt-regel{display:flex;align-items:center;gap:.75rem;width:100%;min-height:3.6rem;margin:0;
  padding:.6rem .6rem .6rem .9rem;font:inherit;text-align:left;white-space:normal;color:var(--tekst);background:none;border:none}
button.pt-regel{cursor:pointer}
button.pt-regel:active,.pt-regel[aria-current="true"]{background:var(--vlak)}
.pt-regel:focus-visible{outline-offset:-3px}
.pt-rtekst{flex:1 1 auto;display:flex;flex-direction:column;gap:.1rem;min-width:0}
/* een wedstrijd (wedstrijdtafel en speelschema): links het veld, in het midden de teams onder elkaar, rechts de uitslag groot of een
   grijs streepje */
.pt-wregel{min-height:4.4rem;gap:.9rem}
.pt-wveld{flex:none;min-width:3.6rem;padding:.2rem .5rem;border-radius:.5rem;background:var(--vlak);color:var(--tekst2);
  font-size:.875rem;font-weight:600;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.pt-wteam{font-size:1.0625rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.pt-wlabels{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.2rem}
.pt-wscore{flex:none;display:grid;gap:.05rem;min-width:2.6rem;text-align:right;font-size:1.375rem;font-weight:700;
  line-height:1.3;font-variant-numeric:tabular-nums}
.pt-wscore.pt-wgeen{color:var(--tekst2);font-weight:400}
/* kleine labels en statuskleuren */
.pt-k-paars{background:var(--paars-bg);color:var(--paars-tekst)}
.pt-k-geel{background:var(--geel-bg);color:var(--geel-tekst)}
.pt-k-blauw{background:var(--blauw-bg);color:var(--blauw-tekst)}
.pt-k-groenblauw{background:var(--groenblauw-bg);color:var(--groenblauw-tekst)}
.pt-k-groen{background:var(--groen-bg);color:var(--groen-tekst)}
.pt-k-rood{background:var(--rood-bg);color:var(--rood-tekst)}
.pt-k-grijs{background:var(--vlak);color:var(--tekst2)}
.pt-label{display:inline-block;padding:.05rem .5rem;border-radius:99px;font-size:.6875rem;font-weight:600;line-height:1.5;white-space:nowrap}