/* PlayGames — rectusoft huisstijl, gelijk aan PitchControl/Announcer/TvSchermen */
:root{
  --primary:#07a7e3; --primary-dark:#0586b6; --accent:#ff9800;
  --blue:#0d6efd; --blue-dark:#0a58ca;
  --grey-bg:#f8f9fa; --grey-line:#e5e7eb; --grey-mid:#d0d5dd; --grey-dark:#444;
  --text:#212529; --text-muted:#6c757d;
  --success:#198754; --error:#dc3545; --warn:#f5a623;
  --radius:8px; --shadow:0 2px 8px rgba(0,0,0,.06);
  --font:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:var(--font);background:var(--grey-bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}

.pg-header{background:var(--primary);color:#fff;display:flex;align-items:center;gap:22px;padding:9px 16px}
.pg-brand{height:26px;width:auto;display:block}
.pg-appname{font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.pg-nav{display:flex;gap:9px;font-size:.9rem;align-items:center}
.pg-sep{opacity:.55;font-size:1rem;line-height:1}
.pg-nav a{color:#fff;text-decoration:none;padding:4px 2px;border-bottom:2px solid transparent}
.pg-nav a:hover{border-bottom-color:var(--accent)}
.pg-nav a.on{border-bottom-color:#fff;font-weight:700;cursor:default}
.pg-nav a.on:hover{border-bottom-color:#fff}
.pg-foot a{color:var(--text-muted)}
/* sleutels onderaan: klein, grijs, en met één dubbelklik te selecteren */
.pg-ids{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.68rem;color:#aab3bd;user-select:all}
.pg-versie{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.68rem;color:#aab3bd}

/* keuze tussen twee ploegen (forfait) */
.keuzes{display:flex;flex-direction:column;gap:9px}
.keuze{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--grey-mid);border-radius:8px;padding:11px 14px;
  font-family:var(--font);font-size:1rem}
.keuze:hover{border-color:var(--error);background:#fdf2f3}
.keuze .nm{font-weight:700}
.keuze .uit{margin-left:auto;font-size:.8rem;color:var(--text-muted);white-space:nowrap}
.keuze:hover .uit{color:var(--error)}
.pg-trn{margin-left:auto;font-size:.9rem;opacity:.95;text-align:right;line-height:1.15}
.pg-trn a{color:#fff;opacity:.85;font-size:.78rem}
.pg-user{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);
  border-radius:999px;padding:4px 12px 4px 8px;font-size:.85rem}
.pg-user svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}
.pg-clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:1rem}
.pg-test{background:#fff4e0;border-bottom:1px solid #f0d09a;color:#8a5a00;font-size:.82rem;
  font-weight:600;padding:5px 16px}
.pg-test b{color:#a34b00}

.pg-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;
  box-shadow:var(--shadow);padding:6px 12px;margin:8px 8px 0;border-radius:var(--radius)}
.pg-bar .sep{width:1px;height:26px;background:var(--grey-line)}
.lbl{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b95a1;display:block;margin-bottom:2px}
select.pg-sel,input.pg-in{font-family:var(--font);font-size:.86rem;padding:6px 9px;border:1.5px solid var(--grey-mid);
  border-radius:6px;background:#fff;color:var(--text)}
select.pg-sel:focus,input.pg-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,110,253,.1)}
.jump{width:92px;font-weight:700;text-align:center}
.combos{display:flex;gap:6px;flex-wrap:wrap}
.combo{position:relative;display:flex;align-items:center;background:#fff;border:1px solid var(--grey-mid);
  border-radius:6px;min-width:150px}
.combo input{border:none;outline:none;background:transparent;padding:6px;width:100%;font-family:var(--font);font-size:.8rem}
.combo .clr{border:none;background:none;cursor:pointer;color:#9aa3ad;padding:0 7px;font-size:.78rem}

.btn{font-family:var(--font);font-size:.82rem;font-weight:600;padding:7px 13px;border-radius:6px;
  border:1.5px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--blue);color:#fff}
.btn.grey{border-color:var(--grey-mid);color:var(--grey-dark)}
.btn.grey:hover{background:var(--grey-dark);color:#fff;border-color:var(--grey-dark)}
.btn.danger{border-color:var(--error);color:var(--error)}
.btn.danger:hover{background:var(--error);color:#fff}
.btn.ok{border-color:var(--success);color:var(--success)}
.btn.ok:hover{background:var(--success);color:#fff}
.btn.solid{background:var(--blue);color:#fff}
.btn.solid:hover{background:var(--blue-dark)}
.btn.sm{font-size:.75rem;padding:4px 9px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;color:var(--text-muted);
  background:var(--grey-bg);border:1px solid var(--grey-line);border-radius:999px;padding:3px 10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block}
.dot.pulse{animation:pl 1.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.25}}


/* voortgang van de dag */
.voortgang{display:flex;align-items:center;gap:9px;font-size:.78rem;line-height:1.25}
.voortgang svg{width:42px;height:42px;flex-shrink:0}
.voortgang svg text{font-family:var(--font);font-size:10.5px;font-weight:800;fill:var(--text)}
.voortgang b{font-size:.86rem}
.voortgang .sub{color:var(--text-muted);font-size:.7rem}

/* ── het rooster ─────────────────────────────────────────── */
.gridwrap{margin:5px 8px 0}
table.grid{width:100%;border-collapse:collapse;table-layout:fixed}
table.grid th{background:var(--blue);color:#fff;font-size:.7rem;padding:2px 3px;text-transform:uppercase;
  letter-spacing:.03em;border:1px solid #dfe4ee}
table.grid th.time{width:54px;background:#1a1a1a;font-size:.7rem;position:relative;padding:0}
table.grid th.time .pr{position:absolute;right:1px;top:1px;opacity:.45;cursor:pointer;font-size:.62rem;
  background:rgba(255,255,255,.16);border:none;color:#fff;border-radius:3px;padding:0 3px;line-height:1.3}
table.grid tr:hover th.time .pr{opacity:1}
table.grid th.hot{background:var(--blue-dark)}
table.grid th.time.hot{background:#3f3f3f}
table.grid td{border:1px solid #dfe4ee;background:#fff;padding:1px 3px;height:38px;vertical-align:middle;overflow:hidden}
td.empty{background:#eef1f6}
td.cell{cursor:pointer;border-left:3px solid transparent}
td.cell:hover{outline:2px solid var(--blue);outline-offset:-2px}
td.cell.todo{border-left-color:#ccd5e0}
td.cell.live{border-left-color:var(--success);background:#f1fbf6}
td.cell.played{border-left-color:#adb5bd;background:#eff1f4}
td.cell.forfait{border-left-color:var(--error);background:#fdf2f3}
td.cell.conflict{outline:2px solid var(--warn);outline-offset:-2px}
td.cell.finals{background:#fff8e1}
.ln{display:flex;align-items:center;gap:3px;line-height:1.08;white-space:nowrap;overflow:hidden}
.l1,.l2{font-size:10.5px;color:#111;font-weight:600}
.l2{padding-left:13px}
.l3{font-size:8.5px;color:#93a0ad;padding-left:13px;line-height:1.05;font-weight:400}
.nr{font-size:8.5px;font-weight:700;color:#33507e;flex-shrink:0;min-width:17px}
.t{overflow:hidden;text-overflow:ellipsis;border-radius:2px;padding:0 1px}
.t.lab{font-style:italic;color:#5b6674}
.sc{margin-left:auto;font-weight:800;font-size:11px;min-width:12px;text-align:right;flex-shrink:0;padding-left:3px}
.sc.dim{color:#c3c9d0;font-weight:600}
.sc.bezig{color:var(--success)}

/* Divisiesymbolen: tien VORMEN, toegekend op multiplificator_divisie DESC.
   Bewust grijs: kleur is in dit scherm voorbehouden aan wat er aan de hand is
   (bezig, gespeeld, forfait) en aan de gekleurde zoekvakjes. Anders zoek je
   een kleurtje tussen dertig andere kleurtjes. */
.dv{width:12px;height:12px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:7.5px;font-weight:900;color:#fff;line-height:1;background:#8b95a1}
.sh-0{clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.sh-1{border-radius:2px}
.sh-2{border-radius:50%}
.sh-3{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.sh-4{clip-path:polygon(50% 4%,100% 100%,0 100%)}
.sh-5{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.sh-6{clip-path:polygon(0 0,100% 0,50% 100%)}
.sh-7{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.sh-8{border-radius:50% 2px 50% 2px}
.sh-9{clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%)}

.badge{font-size:8px;font-weight:800;letter-spacing:.04em;border-radius:2px;padding:0 3px;flex-shrink:0;margin-left:3px}
.b-live{background:var(--success);color:#fff}
.b-ff{background:var(--error);color:#fff}
.b-warn{background:var(--warn);color:#fff}
.pen{width:11px;height:11px;border-radius:2px;background:#fff;color:var(--error);box-shadow:0 0 0 1px var(--error) inset;font-size:8px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:3px}
.onb{width:11px;height:11px;border-radius:50%;background:#fff;color:#b07400;box-shadow:0 0 0 1px var(--warn) inset;font-size:8px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:3px}
.yt{width:14px;height:10px;border-radius:3px;background:#9aa3ad;display:inline-flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-left:4px;vertical-align:-1px}
.yt:after{content:'';border-left:4px solid #fff;border-top:2.6px solid transparent;border-bottom:2.6px solid transparent;margin-left:1px}
.yt.on{background:#f00}
.yt.sm{width:12px;height:9px;margin-left:3px}
th .auto{display:inline-block;font-size:7.5px;font-weight:800;border-radius:2px;padding:0 3px;margin-left:4px;vertical-align:1px}
th .auto.on{background:#0f6b45;color:#eafaf1;box-shadow:0 0 0 1px rgba(255,255,255,.4) inset}
th .auto.off{background:#fff;color:#0d6efd}

.legend{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin:5px 8px;font-size:.72rem;color:var(--text-muted)}
.legend i{width:11px;height:11px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:-1px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.legend code{background:#eef2fb;border-radius:3px;padding:0 4px;color:#2a4b8d;font-weight:600}
.divleg{display:inline-flex;align-items:center;gap:4px}

.ctx,.menu{position:absolute;z-index:80;background:#fff;border:1px solid var(--grey-mid);border-radius:8px;
  box-shadow:0 10px 34px rgba(0,0,0,.22);padding:5px;font-size:.82rem}
.ctx{min-width:214px}.menu{min-width:290px}
.ctx div,.menu .it{padding:6px 10px;border-radius:5px;display:flex;align-items:center;gap:8px;cursor:pointer}
.ctx div:hover,.menu .it:hover{background:#eef2fb}
.ctx hr,.menu hr{border:none;border-top:1px solid var(--grey-line);margin:4px 2px}
.ctx .hd,.menu .hd{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b95a1;
  padding:5px 10px 3px;cursor:default}
.ctx .hd:hover{background:none}
.ctx .dg{color:var(--error)}
.menu .it small{margin-left:auto;color:#98a1ab;font-size:.7rem}

/* ── wedstrijdformulier ──────────────────────────────────── */
.wrap{display:flex;gap:12px;padding:10px;align-items:flex-start}
.left{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.side{width:372px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.card h3{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8b95a1;margin-bottom:9px;font-weight:800}
.mini{font-size:.72rem;color:var(--text-muted)}
.gno{background:var(--blue);color:#fff;border-radius:10px;padding:5px 16px;text-align:center;line-height:1}
.gno small{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-bottom:3px}
.gno b{font-size:1.9rem;font-weight:800}
.meta{display:flex;gap:22px;flex-wrap:wrap;font-size:.86rem}
.meta div span{display:block;font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:#8b95a1;font-weight:700}
.pill{border-radius:999px;padding:3px 11px;font-size:.72rem;font-weight:700}
.pill.time{background:#1a1a1a;color:#fff}
.pill.pitch{background:var(--blue);color:#fff}
.pill.warn{background:#fff;color:var(--error);box-shadow:0 0 0 1.5px var(--error) inset}
.pill.state{background:#eef1f6;color:#5b6674}
.auto-banner{display:flex;align-items:center;gap:12px;background:#fff4e0;border:1px solid #f0d09a;
  border-radius:var(--radius);padding:9px 13px;font-size:.84rem;color:#7a5100;margin:0 10px}
.auto-banner b{color:#a34b00}
.team{display:flex;align-items:center;gap:10px;margin-bottom:4px}
/* Vlaggen komen uit dbo.fnVlag + Assets:FlagBaseUrl; is er geen vlag, dan geeft
   die functie het clublogo terug. Laadt hij toch niet, dan verdwijnt hij stil. */
.vlag{width:26px;height:17px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.18);flex-shrink:0;border-radius:2px}
.vlag.klein{width:19px;height:12px;vertical-align:-1px}
.team .nm{font-size:1.15rem;font-weight:800}
.team .side2{margin-left:auto;font-size:.68rem;letter-spacing:.1em;font-weight:800;color:#8b95a1}
.shirt{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:#5b6674;margin-bottom:8px}
.sh{width:11px;height:11px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.25);display:inline-block}
.clash{background:#fff4e0;border:1px solid #f0d09a;color:#8a5a00;border-radius:6px;padding:5px 9px;
  font-size:.75rem;font-weight:600;margin-bottom:8px}
.scorebox{display:flex;align-items:center;gap:9px;margin:6px 0 12px}
.scorebox input{width:88px;height:60px;font-size:2.1rem;font-weight:800;text-align:center;
  border:2px solid var(--grey-mid);border-radius:10px;font-family:var(--font)}
.scorebox input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(13,110,253,.12)}
.scorebox .pm{display:flex;flex-direction:column;gap:4px}
.scorebox .pm button{width:34px;height:28px;border:1.5px solid var(--grey-mid);background:#fff;border-radius:6px;
  cursor:pointer;font-weight:800;color:var(--blue)}
table.pl{width:100%;border-collapse:collapse;font-size:.84rem}
table.pl th{background:#eef2f7;color:#5b6674;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 4px;border-bottom:1px solid var(--grey-line);font-weight:800}
table.pl th.g{background:#198754;color:#fff}
table.pl th.y{background:#f0c419;color:#3d3000}
table.pl th.r{background:#dc3545;color:#fff}
table.pl th.re{background:#7a1024;color:#fff}
table.pl th.go{background:var(--blue);color:#fff}
table.pl td{padding:2px 4px;border-bottom:1px solid #f1f4f8}
table.pl tr:nth-child(even) td{background:#fafbfd}
table.pl td.no{width:30px;text-align:center}
.rug{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;
  background:#eef2f7;font-size:.72rem;font-weight:800;color:#33507e}
table.pl td.nm{font-weight:600}
table.pl input{width:38px;padding:3px;text-align:center;border:1px solid var(--grey-mid);border-radius:5px;
  font-family:var(--font);font-size:.82rem;background:#fff}
table.pl input::placeholder{color:#c6ccd3;opacity:1}
table.pl input{caret-color:var(--blue)}
/* een vakje met een echt getal erin springt eruit */
table.pl input:not(:placeholder-shown){font-weight:700;color:var(--text);border-color:#9fb6d9;background:#f7fbff}
.scorebox input::placeholder{color:#c6ccd3}
table.pl input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,110,253,.1)}
.sum{display:flex;align-items:center;gap:8px;font-size:.8rem;margin-top:8px;padding:6px 9px;border-radius:6px}
.sum.ok{background:#eaf7f0;color:#0f6b45}
.sum.bad{background:#fdecee;color:#a01925;font-weight:600}
.act{display:flex;flex-direction:column;gap:8px}
.act .btn{justify-content:center;padding:10px}
.flow{font-size:.79rem;border-left:3px solid var(--blue);background:#f4f8ff;border-radius:0 6px 6px 0;padding:8px 10px}
.flow div{margin-bottom:5px;line-height:1.35}
.warnlist{font-size:.78rem;color:#8a5a00;background:#fff8ec;border:1px solid #f2dfbf;border-radius:6px;padding:8px 10px}
.evt{font-size:.76rem}
.evt div{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid #f1f4f8;align-items:center}
.evt .tm{color:#98a1ab;font-variant-numeric:tabular-nums;width:56px;flex-shrink:0}
.evt .evt-team{width:132px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:#5b6674}
.evt .evt-team.ka{color:#0a58ca}
.evt .evt-team.kb{color:#a15c00}
tr.onbekend td{background:#fff8ec!important;font-style:italic;color:#8a5a00;font-weight:600}
.ovl{position:fixed;inset:0;background:rgba(10,20,50,.55);display:flex;align-items:center;justify-content:center;z-index:100}
.dlg{background:#fff;border-radius:12px;box-shadow:0 12px 46px rgba(0,0,0,.4);width:min(680px,94vw);padding:22px 26px;
  max-height:90vh;overflow:auto}
.dlg h2{font-size:1.15rem;margin-bottom:4px}
.dlg p.sub{font-size:.85rem;color:var(--text-muted);margin-bottom:14px}
.dlg .box{background:var(--grey-bg);border:1px solid var(--grey-line);border-radius:8px;padding:12px 14px;font-size:.85rem}
.dlg .box div{padding:3px 0;border-bottom:1px solid #eef1f6}
.dlg .box div:last-child{border:none}
.dlg .ft{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}

.pg-foot{margin-top:auto;border-top:1px solid var(--grey-line);background:var(--grey-bg);
  color:var(--text-muted);font-size:.78rem;padding:8px 16px;display:flex;justify-content:space-between}
.pg-main{padding:20px;max-width:900px;margin:0 auto;width:100%}
.pg-main h1{font-size:1.4rem;margin-bottom:10px}
.pg-main p{margin-bottom:10px;font-size:.92rem}
.pg-err{background:#fdecee;border:1px solid #f5c2c7;color:#a01925;border-radius:6px;padding:9px 12px;
  margin-bottom:14px;font-size:.88rem}
.pg-waarschuwing{background:#fff8ec;border:1px solid #f2dfbf;color:#8a5a00;border-radius:6px;padding:9px 12px;
  margin-bottom:14px;font-size:.88rem}
.pg-ok{background:#eaf7f0;border:1px solid #b7e0c9;color:#0f6b45;border-radius:6px;padding:9px 12px;
  font-size:.88rem;display:flex;align-items:flex-start;gap:10px}
.pg-ok .sluit{margin-left:auto;border:none;background:none;color:inherit;cursor:pointer;font-size:1rem;opacity:.6}
.pg-ok ul{margin:4px 0 0 18px;font-size:.8rem;opacity:.9}
.pg-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--grey-mid);
  border-radius:8px;margin-bottom:8px;text-decoration:none;color:var(--text)}
.pg-list a:hover{border-color:var(--blue);background:#f4f8ff}