/* ── PitchControl — Rectusoft Tournament Organizer huisstijl ── */
:root {
  --primary: #17a2b8; --primary-dark: #117a8b; --accent: #ff9800;
  --blue: #0d6efd; --blue-dark: #0a58ca;
  --grey-bg: #f8f9fa; --grey-line: #e5e7eb; --grey-mid: #d0d5dd;
  --text: #212529; --text-muted: #6c757d;
  --success: #198754; --error: #dc3545; --warn: #f5a623;
  --radius: 8px; --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --font: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--grey-bg); color: var(--text);
       display: flex; flex-direction: column; overflow: hidden; }
body.pc-fullscreen { overflow: hidden; }

/* header */
.pc-header { background: var(--primary); color: #fff; min-height: 54px; flex-shrink: 0;
  display: flex; align-items: center; gap: 18px; padding: 0 20px; }
.pc-brand { display: flex; align-items: center; gap: 12px; }
.pc-brand-logo { height: 30px; }
.pc-appname { font-size: 1.15rem; font-weight: 700; }
.pc-nav { display: flex; gap: 16px; border-left: 1px solid rgba(255,255,255,0.35); padding-left: 16px; }
.pc-nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: 0.86rem;
  padding: 4px 2px; border-bottom: 2px solid transparent; }
.pc-nav a:hover { border-bottom-color: var(--accent); }
.pc-nav .cur { font-weight: 700; font-size: 0.86rem; border-bottom: 2px solid var(--accent); padding: 4px 2px; }
.pc-tourney { font-size: 0.88rem; color: #d3f2f8; border-left: 1px solid rgba(255,255,255,0.35);
  padding-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.pc-head-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 5px 12px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; border: none; cursor: default;
  text-decoration: none; }
a.chip:hover { background: rgba(0,0,0,0.32); }
.chip-alarm { background: var(--error); color: #fff; box-shadow: 0 0 0 4px rgba(220,53,69,0.35); }
.chip-dark { background: rgba(0,0,0,0.18); color: #fff; cursor: pointer; }
.chip-main { background: #fff; color: var(--primary-dark); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.dot-green { background: #3ddc84 !important; }
.pc-clock { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes pcpulse { 50% { opacity: 0.35; } }
.pulse { animation: pcpulse 1s infinite; }

/* layout */
.pc-main-wrap { flex: 1; display: flex; min-height: 0; }
.pc-dash { flex: 1; display: flex; gap: 12px; padding: 12px 14px; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; flex: 1; }
.panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 14px 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--blue); border-bottom: 2px solid rgba(13,110,253,0.15); padding-bottom: 5px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.panel-title .right { margin-left: auto; display: inline-flex; gap: 6px; align-items: center;
  font-size: 0.7rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); font-weight: 500; }
.scrolllist { overflow-y: auto; min-height: 0; }

/* cards & misc */
.pc-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; overflow-y: auto; }
.pc-h2 { font-size: 1.4rem; font-weight: 900; text-transform: uppercase; color: var(--blue); }
.pc-h3 { font-size: 1rem; font-weight: 700; text-transform: uppercase; color: var(--error); margin-bottom: 8px; }
.pc-warn { padding: 10px 14px; border-radius: 6px; margin: 10px 0; background: #fdf3e7; border-left: 4px solid var(--warn); }
.pc-warn-error { background: #fbeaea; border-left-color: var(--error); color: var(--error); }
.pc-input { width: 100%; padding: 10px 12px; border: 2px solid var(--grey-mid); border-radius: 6px; font: inherit; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 6px;
  font: inherit; font-weight: 600; cursor: pointer; border: none; text-decoration: none; }
.btn-primary { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn-primary:hover { background: var(--blue); color: #fff; }
.btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.mini { border: 1px solid var(--grey-mid); background: #fff; border-radius: 5px; font-size: 0.66rem;
  font-weight: 700; color: #444; padding: 2px 6px; cursor: pointer; }
.mini.blue { color: var(--blue); border-color: rgba(13,110,253,0.4); }
.mini-input { width: 64px; padding: 2px 5px; border: 1px solid var(--grey-mid); border-radius: 4px; font: inherit; font-size: 0.72rem; }

/* pitch cards */
.pitchgrid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 1fr; gap: 10px; min-height: 0; overflow-y: auto; }
.pitch { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  border-left: 6px solid var(--success); border-top: 1px solid var(--grey-line);
  border-right: 1px solid var(--grey-line); border-bottom: 1px solid var(--grey-line);
  padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.pitch.warn { border-left-color: var(--warn); }
.pitch.crit { border-left-color: var(--error); background: #fff7f7; }
.pitch-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pitch-name { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; }
.ping { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--text-muted); }
.ping .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.ping.bad .dot { background: var(--error); animation: pcpulse 1s infinite; }
.ping.bad { color: var(--error); font-weight: 700; }
.stateflag { margin-left: auto; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 9px; border-radius: 999px; }
.st-live { background: #eafaf1; color: var(--success); }
.st-delay { background: #fef5e7; color: #b46a00; }
.st-off { background: #fdedec; color: var(--error); }
.st-idle { background: #eef1f6; color: var(--text-muted); }
.autoproc { font-size: 0.6rem; font-weight: 800; border-radius: 4px; padding: 1px 6px; cursor: help; }
.autoproc.on { background: #eafaf1; color: var(--success); border: 1px solid #bfe6d0; }
.autoproc.off { background: #eef1f6; color: var(--text-muted); border: 1px solid var(--grey-mid); }
.yt { display: inline-flex; width: 20px; height: 14px; border-radius: 3px; background: #f00;
  align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.yt svg { width: 8px; height: 8px; fill: #fff; }
.yt.down { background: #9aa0a6; outline: 2px solid var(--error); }
.matchmeta { font-size: 0.68rem; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.matchmeta b { color: var(--text); }
.divtag { background: #eef2fb; color: var(--blue); font-weight: 800; border-radius: 4px;
  padding: 0 6px; font-size: 0.6rem; }
.trow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trow .flag { width: 20px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.kleur-sq { display:inline-block; width:11px; height:11px; border-radius:2px;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.35); margin: 0 2px; flex-shrink:0; }
.an-rows td .ksq { display:inline-block; width:18px; height:18px; border-radius:3px;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.35); margin: 0 6px 0 2px; vertical-align:-2px; }
.trow .tname { flex: 1; font-weight: 700; font-size: 0.85rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tscore { background: #1a1a1a; color: #fff; border-radius: 5px; min-width: 28px; text-align: center;
  font-weight: 800; font-size: 0.9rem; padding: 0 7px; }
/* zwevend IP per computer in het Local server-paneel */
.vip { font-size: 0.62rem; font-weight: 800; margin-top: 1px; letter-spacing: 0.02em; }
.vip.ok  { color: var(--success); }
.vip.bad { color: var(--error); }
/* voorlopige score: resultaat binnen maar nog niet (handmatig) verwerkt */
.tscore.prov { background: #eef1f4; color: #55606c; font-style: italic;
  border: 1.5px dashed #b9c2cc; font-weight: 700; }
.gclock { font-size: 0.7rem; color: var(--text-muted); }
.badges { display: flex; gap: 5px; flex-wrap: wrap; min-height: 16px; }
.badge { font-size: 0.62rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; }
.b-red { background: var(--error); color: #fff; }
.b-warn { background: #fef5e7; color: #b46a00; border: 1px solid #f0d9b5; }
.b-err { background: #fdedec; color: var(--error); border: 1px solid #f2c4c8; }
.pitch-foot { margin-top: auto; font-size: 0.64rem; color: var(--text-muted);
  border-top: 1px solid var(--grey-line); padding-top: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* alarms & feed */
.alarm { display: flex; gap: 8px; align-items: flex-start; border-left: 4px solid var(--error);
  background: #fdedec; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; }
.alarm.warn { border-left-color: var(--warn); background: #fef5e7; }
.alarm.info { border-left-color: var(--grey-mid); background: #f4f6f8; }
.alarm-time { font-size: 0.66rem; color: var(--text-muted); width: 50px; flex-shrink: 0; padding-top: 2px; }
.alarm-body { flex: 1; min-width: 0; font-size: 0.78rem; }
.alarm-body b.crit { color: var(--error); } .alarm-body b.warnlbl { color: #b46a00; }
.ack { border: 1px solid var(--grey-mid); background: #fff; color: #444; font-size: 0.66rem;
  font-weight: 700; border-radius: 5px; padding: 3px 8px; cursor: pointer; flex-shrink: 0; align-self: center; }
.feed { flex: 1; overflow-y: auto; }
.feed-row { display: flex; gap: 8px; padding: 3.5px 2px; font-size: 0.73rem;
  border-bottom: 1px solid #f1f3f6; align-items: baseline; }
.feed-time { color: var(--text-muted); font-size: 0.66rem; width: 48px; flex-shrink: 0; }
.feed-tag { font-size: 0.58rem; font-weight: 700; border-radius: 4px; padding: 1px 5px;
  flex-shrink: 0; width: 78px; text-align: center; background: #eef1f6; color: var(--text-muted); }
.ft-CRITICAL { background: var(--error); color: #fff; }
.ft-WARNING  { background: #fef5e7; color: #b46a00; }

/* printing */
.prow { display: flex; align-items: center; gap: 6px; font-size: 0.73rem; padding: 3px 2px;
  border-bottom: 1px solid #f1f3f6; }
.prow .who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst { font-size: 0.6rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; flex-shrink: 0; }
.pst-GEPRINT  { background: #eafaf1; color: var(--success); }
.pst-WACHTEND { background: #fef5e7; color: #b46a00; }
.pst-KLAAR    { background: #e8f4fd; color: #1a5276; }
.pst-FOUT     { background: var(--error); color: #fff; }
.problems { border: 1.5px solid #f2c4c8; background: #fdf3f4; border-radius: 6px;
  padding: 5px 9px; margin-bottom: 6px; font-size: 0.72rem; color: #8b1a24; font-weight: 600; }

/* computers */
.ctable { width: 100%; border-collapse: collapse; font-size: 0.73rem; table-layout: fixed; }
.ctable th { background: var(--blue); color: #fff; text-transform: uppercase; font-size: 0.58rem;
  padding: 3px 5px; text-align: left; }
.ctable td { padding: 4px 5px; border-bottom: 1px solid #f1f3f6; overflow: hidden; white-space: nowrap; }
.ctable tr.main-row td { background: #f0f6ff; }
.role-main { background: var(--blue); color: #fff; font-size: 0.58rem; font-weight: 800;
  border-radius: 999px; padding: 1px 7px; }
.role-standby { background: #eef1f6; color: var(--text-muted); font-size: 0.58rem; font-weight: 700;
  border-radius: 999px; padding: 1px 6px; }
.svc { font-size: 0.66rem; font-weight: 600; }
.svc-RUNNING { color: var(--success); } .svc-IDLE, .svc-PAUSED { color: #b46a00; }
.svc-OFFLINE { color: var(--error); }

/* network */
.netgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 6px; }
.net { border: 1px solid var(--grey-line); border-radius: 6px; padding: 5px 7px;
  display: flex; flex-direction: column; gap: 1px; background: #fff; }
.net-name { font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; }
.net-name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.net.warn { border-color: #f0d9b5; background: #fffdf6; } .net.warn .dot { background: var(--warn); }
.net.crit { border-color: #f2c4c8; background: #fff7f7; } .net.crit .dot { background: var(--error); animation: pcpulse 1s infinite; }
.net.unk .dot { background: #b9c2cc; } .net.unk .net-lat { color: var(--text-muted); }
.net-ip { font-size: 0.6rem; color: var(--text-muted); }
.net-lat { font-size: 0.62rem; color: var(--success); font-weight: 600; }
.net.crit .net-lat { color: var(--error); }

/* settings */
.settings-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 8px; }
.settings-table th { background: var(--blue); color: #fff; text-align: left; padding: 6px 8px;
  font-size: 0.68rem; text-transform: uppercase; }
.settings-table td { padding: 5px 8px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.settings-table input[type=text], .settings-table input:not([type]), .settings-table select,
.settings-table input[type=number] { padding: 4px 6px; border: 1px solid var(--grey-mid);
  border-radius: 4px; font: inherit; font-size: 0.8rem; width: 100%; }
.chk { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; margin-right: 8px; white-space: nowrap; }

/* modal */
.pc-modal-overlay { position: fixed; inset: 0; background: rgba(10,20,50,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 500; }
.pc-modal-overlay[hidden] { display: none; }
.pc-modal { background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  padding: 20px 24px; width: min(560px, 92vw); max-height: 80vh; overflow-y: auto; }
.pc-modal h4 { font-size: 1rem; margin-bottom: 10px; color: var(--blue); text-transform: uppercase; }
.pc-modal ul { margin: 0 0 14px 18px; font-size: 0.85rem; }
.pc-modal ul li { margin-bottom: 4px; }
.pc-modal-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* tooltip */
.score-tip { position: fixed; background: #1a1a1a; color: #fff; border-radius: 6px;
  padding: 7px 11px; font-size: 0.7rem; line-height: 1.5; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 200; max-width: 340px; pointer-events: none; }

/* ── announcer tablet ── */
.an-page { flex: 1; display: flex; flex-direction: column; background: #fbfaf7; color: #1d232a;
  font-family: 'Segoe UI', system-ui, Arial, sans-serif; min-height: 0; }
.an-testbanner { background: #f5a623; color: #4d3400; text-align: center; font-weight: 800;
  padding: 6px; letter-spacing: 0.08em; }
.an-top { display: flex; align-items: center; padding: 12px 24px 8px; gap: 18px;
  border-bottom: 2px solid #d9dee3; flex-shrink: 0; }
.an-clock { font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-clock .sec { color: #17a2b8; }
.an-blockmid { flex: 1; text-align: center; }
.an-blocklbl { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: #7c8690; font-weight: 700; }
.an-blockval { font-size: 42px; font-weight: 800; color: #0d6efd; line-height: 1; }
.an-day { font-size: 14px; color: #7c8690; text-align: right; }
.an-rows { flex: 1; padding: 6px 24px 0; overflow: hidden; min-height: 0; }
.an-rows table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.an-rows td { padding: 14px 8px; font-size: 24px; font-weight: 700; border-bottom: 1px solid #e2e6ea;
  vertical-align: middle; white-space: nowrap; overflow: hidden; }
.an-rows tr.odd td { background: #f0eee8; }
.an-rows td.pitch { width: 118px; font-weight: 800; }
.an-rows td.vs { width: 30px; text-align: center; color: #9aa0a6; font-weight: 400; }
.an-rows td .fl { width: 34px; height: 22px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  vertical-align: middle; margin-right: 6px; }
.an-rows td.ref { width: 230px; font-size: 15px; font-weight: 600; color: #5a636c; }
.an-rows td.ref .fl { width: 24px; height: 16px; }
.an-rows .unresolved { color: #8a939c; font-style: italic; font-weight: 600; }
.an-rows tr.updated td { background: #eef7ee; }
.an-rows tr.updated td.pitch { border-left: 6px solid #198754; }
.updtag { font-size: 11px; font-weight: 700; color: #198754; border: 1px solid #b7dcc3;
  border-radius: 999px; padding: 1px 8px; margin-left: 8px; font-style: normal; }
.an-alerts { flex-shrink: 0; margin: 6px 24px 0; border: 2px solid #e3b8bd; border-radius: 10px;
  background: #faf1f1; padding: 8px 14px; min-height: 84px; }
.an-alerts-lbl { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: #a94450; font-weight: 800; margin-bottom: 4px; }
.an-alert-row { display: flex; align-items: baseline; gap: 10px; font-size: 17px; padding: 2px 0; }
.an-alert-row .t { font-size: 13px; color: #a94450; width: 52px; flex-shrink: 0; }
.an-alert-row b { color: #8b1a24; }
.an-alert-row.older { opacity: 0.55; font-size: 14px; }
.an-btnbar { flex-shrink: 0; display: flex; align-items: center; padding: 10px 24px 14px; gap: 14px; }
.an-navbtn { border: 2px solid #b9c2cc; border-radius: 12px; background: #fff; font-size: 20px;
  font-weight: 700; color: #3c454e; padding: 12px 30px; font-family: inherit; cursor: pointer; }
.an-navbtn:disabled { opacity: 0.35; }
.an-btnmid { flex: 1; text-align: center; font-size: 13px; color: #9aa0a6; }

/* ── aangemelde gebruiker, rechts in de blauwe balk ─────────────── */
.pc-user { display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem;
  font-weight: 600; color: #fff; white-space: nowrap; padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.35); }
.pc-user svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none;
  stroke: #fff; stroke-width: 1.9; stroke-linecap: round; }
.pc-tourney-wissel { color: #ffffff; font-size: 0.74rem; text-decoration: underline;
  margin-left: 8px; opacity: 0.75; }
.pc-tourney-wissel:hover { opacity: 1; }

/* ── toernooikeuze ─────────────────────────────────────────────── */
.pc-kies { max-width: 720px; margin: 40px auto; padding: 0 20px; }
.pc-kies h1 { font-size: 1.5rem; margin: 0 0 10px; }
.pc-kies-uitleg { color: #4a5a68; margin: 0 0 20px; line-height: 1.5; }
.pc-kies-waarschuwing { color: #8a5300; background: #fff5e2; border: 1px solid #f0d9ab;
  border-radius: 8px; padding: 12px 14px; }
.pc-kies-lijst { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.pc-kies-knop { width: 100%; text-align: left; cursor: pointer; background: #fff;
  border: 1px solid #d6dee5; border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px; font: inherit; }
.pc-kies-knop:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.pc-kies-knop.cur { border-color: var(--primary); border-width: 2px; }
.pc-kies-naam { font-size: 1.02rem; font-weight: 700; color: #1d2c38; }
.pc-kies-meta { font-size: 0.8rem; color: #6b7b88; }
.pc-kies-voet { margin-top: 26px; font-size: 0.82rem; color: #7b8894; }

/* ── "enkel via de backend" ─────────────────────────────────────── */
.pc-geentoegang { max-width: 620px; margin: 60px auto; padding: 0 20px; }
.pc-geentoegang h1 { font-size: 1.6rem; margin: 0 0 16px; }
.pc-geentoegang p { color: #45535f; line-height: 1.6; margin: 0 0 22px; }
.pc-geentoegang-voet { font-size: 0.84rem; color: #7b8894; margin-top: 26px !important; }