/*
  Dali Facturen Systeem V6.0
  Thema: Dali schoolstijl + kart/race details.
  Zie docs/LOOK_AND_FEEL_THEMA_V1.md voor afspraken.
*/
:root {
  --dali-navy: #173d72;
  --dali-navy-2: #0f2f59;
  --dali-petrol: #0f8f93;
  --dali-petrol-2: #20aaa7;
  --dali-cyan: #8ce7ef;
  --dali-yellow: #ffd927;
  --dali-yellow-soft: #fff4b8;
  --dali-white: #ffffff;
  --dali-ice: #f3fbfc;
  --dali-bg: #edf6f8;
  --dali-ink: #102033;
  --dali-muted: #627488;
  --dali-border: #d8e7ec;
  --dali-danger: #dc3545;
  --shadow-soft: 0 18px 45px rgba(18, 45, 78, 0.12);
  --shadow-card: 0 10px 25px rgba(12, 37, 66, 0.08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --font-main: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-main);
  color: var(--dali-ink);
  background:
    radial-gradient(circle at top right, rgba(32,170,167,0.24), transparent 34rem),
    linear-gradient(135deg, #f7fcfd 0%, var(--dali-bg) 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 295px 1fr;
}
.sidebar {
  background: linear-gradient(180deg, var(--dali-navy) 0%, #114f78 54%, #0e777d 100%);
  color: white;
  padding: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.brand-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}
.brand-logo {
  width: 78px;
  min-width: 78px;
  height: 54px;
  object-fit: contain;
  background: white;
  padding: 7px;
  border-radius: 14px;
}
.brand-card h1 { margin: 0; font-size: 1.22rem; letter-spacing: -.03em; }
.brand-card p { margin: 4px 0 0; color: rgba(255,255,255,.78); font-size: .92rem; }
.nav-list { display: grid; gap: 10px; margin-top: 26px; }
.nav-btn {
  border: 0;
  border-radius: 17px;
  background: rgba(255,255,255,.10);
  color: white;
  padding: 14px 15px;
  text-align: left;
  font-weight: 800;
  transition: transform .16s ease, background .16s ease;
}
.nav-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.17); }
.nav-btn.active {
  background: var(--dali-yellow);
  color: #17324e;
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
.role-card {
  margin-top: 28px;
  padding: 16px;
  background: rgba(0,0,0,.13);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
}
.role-card label { display: block; font-weight: 800; margin-bottom: 8px; }
.role-card select {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
}
.role-card small { display: block; margin-top: 9px; color: rgba(255,255,255,.72); line-height: 1.35; }

.donate-side-btn {
  width: 100%;
  margin-top: 18px;
  border: 4px solid #ffe900;
  border-radius: 20px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #ffe900 0%, var(--dali-yellow) 58%, #ffb800 100%);
  color: #12345a;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  box-shadow: 0 16px 30px rgba(0,0,0,.20), inset 0 -3px 0 rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.donate-side-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 38px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.08); }
.donate-side-icon { font-size: 2rem; line-height: 1; }
.donate-side-btn strong { display:block; font-size: 1.25rem; font-weight: 950; letter-spacing: -.03em; }
.donate-side-btn small { display:block; margin-top: 2px; font-weight: 850; opacity: .82; }

.main-area { min-width: 0; padding: 22px; }
/* V2.3: bovenste witte projectheader verwijderd; schermen starten direct met de modulebanner. */
.topbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.topbar-title { display: flex; gap: 13px; align-items: center; }
.topbar-logo { width: 74px; height: 48px; object-fit: contain; background: white; border-radius: 14px; padding: 7px; box-shadow: var(--shadow-card); }
.topbar-title strong { display: block; font-size: 1.22rem; }
.topbar-title span { display: block; color: var(--dali-muted); margin-top: 2px; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.screen { display: none; animation: fadeIn .18s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page-hero {
  border-radius: 30px;
  padding: 26px;
  color: white;
  background:
    linear-gradient(135deg, rgba(23,61,114,.97) 0%, rgba(15,143,147,.94) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 10px, transparent 10px 20px);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.page-hero:after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 38px solid rgba(255,255,255,.08);
}
.page-hero h2 { margin: 0 0 8px; font-size: clamp(1.65rem, 3vw, 2.65rem); letter-spacing: -.04em; }
.page-hero p { margin: 0; max-width: 880px; font-size: 1.05rem; color: rgba(255,255,255,.86); line-height: 1.55; }
.hero-line { color: var(--dali-yellow); font-weight: 900; }

.card-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: start; }
.card, .panel-card {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--dali-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.card h3, .panel-card h3 { margin: 0 0 14px; font-size: 1.15rem; }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid.compact { gap: 12px; }
label { font-weight: 800; color: #15314d; }
label input, label select, label textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px 13px;
  border-radius: 13px;
  border: 1px solid #cfdee5;
  background: white;
  color: var(--dali-ink);
  outline: none;
}
label textarea { resize: vertical; min-height: 86px; }
label input:focus, label select:focus, label textarea:focus {
  border-color: var(--dali-petrol);
  box-shadow: 0 0 0 4px rgba(32,170,167,.14);
}
.readonly-box {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px 13px;
  border-radius: 13px;
  border: 1px solid #cfdee5;
  background: #f8fbfc;
  color: var(--dali-muted);
}
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.primary-btn, .ghost-btn, .danger-btn, .yellow-btn, .mini-btn, .icon-btn {
  border: 0;
  border-radius: 14px;
  padding: 11px 15px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(20, 55, 90, .08);
}
.primary-btn { background: var(--dali-petrol); color: white; }
.primary-btn:hover { background: #087f83; }
.yellow-btn { background: var(--dali-yellow); color: #17324e; }
.ghost-btn { background: white; color: var(--dali-navy); border: 1px solid var(--dali-border); }
.danger-btn { background: var(--dali-danger); color: white; }
.mini-btn { padding: 8px 10px; border-radius: 10px; background: #f7fbfc; color: var(--dali-navy); border: 1px solid var(--dali-border); box-shadow: none; }
.icon-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: #eef6f8; color: var(--dali-navy); font-size: 1.35rem; }
.status-message { margin-top: 13px; padding: 12px 13px; border-radius: 14px; background: #e9fbf3; color: #0e6b43; font-weight: 800; display: none; }
.status-message.show { display: block; }
.status-message.warn { background: #fff7d0; color: #806100; }

.table-wrap { overflow: auto; border-radius: 17px; border: 1px solid var(--dali-border); }
table { width: 100%; border-collapse: collapse; min-width: 760px; background: white; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid #e8f0f3; vertical-align: top; }
th { background: #f3fbfc; color: #17324e; font-size: .9rem; }
tr:last-child td { border-bottom: 0; }
.money { font-weight: 950; color: var(--dali-navy); white-space: nowrap; }
.muted { color: var(--dali-muted); }
.small { font-size: .86rem; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e9f8fa;
  color: #086f77;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}
.badge.yellow { background: var(--dali-yellow-soft); color: #7d6100; }
.badge.green { background: #dcf8e9; color: #116c42; }
.badge.red { background: #ffe1e5; color: #aa1e32; }
.badge.blue { background: #e5efff; color: #174a85; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.empty-state { padding: 18px; text-align: center; color: var(--dali-muted); background: #fbfeff; border: 1px dashed #cbdfe7; border-radius: var(--radius-md); }

.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card {
  background: white;
  border: 1px solid var(--dali-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
}
.stat-card span { display: block; color: var(--dali-muted); font-weight: 800; margin-bottom: 8px; }
.stat-card strong { display: block; font-size: 1.55rem; color: var(--dali-navy); }

.scoreboard-page {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,217,39,.35), transparent 28rem),
    linear-gradient(135deg, #102f58 0%, #0f7f89 100%);
  color: white;
  border-radius: 34px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
}
.scoreboard-page:before {
  content: "";
  position: absolute;
  inset: auto -40px -45px auto;
  width: 220px;
  height: 220px;
  opacity: .12;
  background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 50% / 44px 44px;
  transform: rotate(14deg);
}
.score-top { position: relative; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.score-brand { display: flex; align-items: center; gap: 16px; }
.score-brand img { width: 92px; height: 60px; background: white; object-fit: contain; border-radius: 16px; padding: 8px; }
.score-brand h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.5rem); color: white; letter-spacing: -.04em; }
.score-brand p { margin: 4px 0 0; color: rgba(255,255,255,.80); }
.score-actions { display: flex; gap: 8px; }
.score-hero { position: relative; text-align: center; padding: 22px 12px 28px; }
.score-hero .shout { color: var(--dali-yellow); font-size: clamp(2rem, 6vw, 4.7rem); font-weight: 950; letter-spacing: -.06em; line-height: .95; text-transform: uppercase; }
.score-hero .subscore { margin-top: 14px; font-size: clamp(1.25rem, 2.5vw, 2.05rem); font-weight: 950; }
.score-hero .countdown { margin-top: 9px; color: rgba(255,255,255,.82); font-weight: 800; }
.race-track { margin: 28px auto 0; max-width: 940px; }
.race-track-labels { display: flex; justify-content: space-between; font-size: .84rem; color: rgba(255,255,255,.72); font-weight: 900; margin-bottom: 6px; }
.race-bar {
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  padding: 5px;
  border: 1px solid rgba(255,255,255,.25);
  position: relative;
}
.race-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dali-yellow), #fff095, var(--dali-cyan));
  min-width: 42px;
  position: relative;
  transition: width .4s ease;
}
.race-kart {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-52%) scaleX(-1);
  font-size: 2.35rem;
  line-height: 1;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.22));
}
.race-kart::before {
  content: "";
  position: absolute;
  right: 72%;
  top: 52%;
  width: 48px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82));
  transform: scaleX(-1) translateY(-50%);
  opacity: .75;
}
.score-cards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.score-card {
  background: rgba(255,255,255,.94);
  color: var(--dali-ink);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.45);
}
.score-card h3 { margin: 0 0 10px; color: var(--dali-navy); }
.big-money { font-size: clamp(2rem, 4vw, 3.2rem); color: var(--dali-navy); font-weight: 950; letter-spacing: -.04em; }
.trophy-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.trophy-card {
  background: white;
  border-radius: 22px;
  padding: 18px;
  color: var(--dali-ink);
  box-shadow: var(--shadow-card);
  border: 2px solid #eef5f7;
}
.trophy-card.gold { border-color: #f5ca32; background: linear-gradient(180deg, #fff8d6, white); }
.trophy-card.silver { border-color: #b8c4cc; background: linear-gradient(180deg, #f0f4f6, white); }
.trophy-card.bronze { border-color: #cf8a43; background: linear-gradient(180deg, #ffe8cf, white); }
.trophy-icon { font-size: 2.2rem; }
.trophy-card h4 { margin: 7px 0 4px; font-size: 1.1rem; }
.trophy-card .amount { color: var(--dali-navy); font-size: 1.5rem; font-weight: 950; }
.trophy-card .label { color: var(--dali-muted); font-weight: 900; margin-top: 5px; }
.team-list { display: grid; gap: 10px; }
.team-score-row { display: grid; grid-template-columns: 120px 100px 1fr 160px; align-items: center; gap: 10px; }
.mini-progress { background: #e6f1f5; height: 12px; border-radius: 999px; overflow: hidden; }
.mini-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dali-petrol), var(--dali-yellow)); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 26, 42, .55);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 20px;
}
.modal-backdrop.hidden { display: none; }
.modal-card {
  width: min(780px, 100%);
  background: white;
  border-radius: 26px;
  box-shadow: 0 28px 90px rgba(0,0,0,.30);
  padding: 22px;
}
.small-modal { width: min(460px, 100%); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-header h2, .modal-card h2 { margin: 0; }

.donate-modal-card { max-width: 560px; }
.donate-popup-body { display: grid; gap: 16px; }
.donate-thanks-text { margin: 0; font-size: 1.15rem; line-height: 1.45; color: var(--dali-navy); font-weight: 800; }
.donate-qr-ready {
  min-height: 230px;
  border: 4px dashed #ffd927;
  border-radius: 24px;
  background: linear-gradient(135deg, #fffbe6, #f2fcfd);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 26px;
  color: var(--dali-navy);
}
.donate-qr-ready strong { font-size: 1.35rem; font-weight: 950; }
.donate-qr-ready small { max-width: 340px; color: var(--dali-muted); line-height: 1.35; font-weight: 750; }
.qr-placeholder-icon { font-size: 4rem; line-height: 1; color: #0f8f93; }
.donate-small-note { margin: 0; color: var(--dali-muted); font-weight: 750; }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
#printArea { display: none; }
.donation-document, .scoreboard-document {
  width: 780px;
  max-width: 100%;
  margin: 0 auto;
  padding: 32px;
  background: white;
  color: #111;
  font-family: Arial, sans-serif;
}
.donation-document {
  min-height: 1050px;
}
.doc-header { display: flex; justify-content: space-between; align-items: start; border-bottom: 3px solid #123f72; padding-bottom: 16px; margin-bottom: 20px; }
.doc-header img { width: 120px; height: 82px; object-fit: contain; }
.doc-title { text-align: right; }
.doc-title h1 { margin: 0; font-size: 28px; color: #123f72; }
.doc-title p { margin: 6px 0 0; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 20px 0; }
.doc-box { border: 1px solid #d8e2e8; border-radius: 12px; padding: 14px; }
.doc-total { margin: 24px 0; padding: 18px; background: #eef8fa; border-radius: 14px; display: flex; justify-content: space-between; font-size: 22px; font-weight: 900; }
.doc-footnote { margin-top: 34px; font-size: 8px; line-height: 1.45; color: #555; border-top: 1px solid #e1e1e1; padding-top: 8px; }
.scoreboard-document {
  border: 6px solid #123f72;
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
}
.scoreboard-print-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #173d72, #0f8f93);
  color: white;
}
.scoreboard-print-head img { width: 100px; height: 64px; object-fit: contain; background: white; border-radius: 12px; padding: 7px; }
.scoreboard-print-head h1 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.scoreboard-print-head p { margin: 5px 0 0; color: rgba(255,255,255,.88); }
.scoreboard-print-hero {
  text-align: center;
  padding: 20px 24px 18px;
  background: #eef8fa;
  border-bottom: 2px solid #d8e7ec;
}
.print-shout { font-size: 28px; font-weight: 900; color: #173d72; text-transform: uppercase; letter-spacing: -.03em; }
.print-total { margin-top: 7px; font-size: 22px; font-weight: 900; color: #0f5f77; }
.print-countdown { margin-top: 5px; font-size: 14px; color: #24566b; }
.print-racebar { height: 20px; border-radius: 999px; background: #dcecf1; overflow: hidden; margin: 16px 22px 7px; border: 1px solid #c3d9e2; }
.print-racebar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f8f93, #ffd927); }
.print-race-labels { display: flex; justify-content: space-between; align-items: center; color: #173d72; font-size: 13px; font-weight: 800; margin: 0 22px; }
.print-score-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 18px 0; }
.print-score-stats > div, .print-panel { border: 1px solid #d8e7ec; border-radius: 14px; padding: 14px 16px; background: white; }
.print-score-stats h2, .print-panel h2 { margin: 0 0 8px; color: #173d72; font-size: 17px; }
.print-score-stats strong { display: block; color: #173d72; font-size: 26px; }
.print-score-stats p { margin: 6px 0 0; color: #52687a; font-size: 12px; }
.print-panel { margin: 14px 18px; }
.print-trophy-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #edf3f5; }
.print-trophy-row:first-of-type { border-top: 0; }
.print-trophy-icon { font-size: 26px; text-align: center; }
.print-trophy-row strong { display: block; color: #102033; font-size: 15px; }
.print-trophy-row span { display: block; color: #52687a; font-size: 12px; margin-top: 2px; }
.print-trophy-row b { color: #173d72; font-size: 16px; }
.muted-row { opacity: .68; }
.print-team-row { display: grid; grid-template-columns: 150px 100px 1fr 170px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #edf3f5; }
.print-team-row:first-of-type { border-top: 0; }
.print-team-row strong, .print-team-row b { color: #173d72; }
.print-team-row em { color: #52687a; font-style: normal; font-size: 12px; }
.print-mini-bar { height: 12px; border-radius: 999px; background: #e8f2f5; overflow: hidden; }
.print-mini-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f8f93, #ffd927); }
.print-footer-line { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #eef8fa; color: #24566b; font-size: 13px; }
.log-entry { border-left: 5px solid var(--dali-petrol); background: white; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
.log-entry strong { color: var(--dali-navy); }
.log-entry small { color: var(--dali-muted); display: block; margin-top: 3px; }
.inline-help { padding: 12px 14px; border-radius: 16px; background: #eff9fb; color: #24566b; margin-top: 12px; font-size: .95rem; line-height: 1.45; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .nav-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .span-8, .span-7, .span-6, .span-5, .span-4, .span-3 { grid-column: span 12; }
  .score-cards, .trophy-grid { grid-template-columns: 1fr; }
  .team-score-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .main-area { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .stats-row { grid-template-columns: 1fr; }
  .nav-list { grid-template-columns: 1fr; }
}

@media print {
  @page { size: A4; margin: 10mm; }
  html, body { background: white !important; }

  /* Printknoppen in de app gebruiken bewust een apart printgebied.
     Zo printen we niet per ongeluk menu's, knoppen, pop-ups of browserdelen mee. */
  body.print-scoreboard #appShell,
  body.print-donation #appShell,
  body.print-scoreboard .modal-backdrop,
  body.print-donation .modal-backdrop { display: none !important; }

  body.print-scoreboard #printArea,
  body.print-donation #printArea { display: block !important; }

  .no-print, .sidebar, .topbar, .nav-list, .score-actions, .donate-side-btn { display: none !important; }

  body:not(.print-scoreboard):not(.print-donation) .app-shell { display: block !important; }
  body:not(.print-scoreboard):not(.print-donation) .main-area { padding: 0 !important; }
  body:not(.print-scoreboard):not(.print-donation) .screen:not(.active) { display: none !important; }
  body:not(.print-scoreboard):not(.print-donation) .screen.active { display: block !important; }

  .donation-document, .scoreboard-document {
    box-shadow: none !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* V1.4: oude interne printweergave blijft als noodfallback; hoofdroute is print.html. */
.print-view-page {
  max-width: 980px;
  margin: 0 auto;
}
.print-view-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 18px;
  background: white;
  border: 1px solid var(--dali-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.print-view-toolbar div { margin-right: auto; display: grid; gap: 3px; }
.print-view-toolbar strong { color: var(--dali-navy); }
.print-view-toolbar span { color: var(--dali-muted); font-size: .92rem; }
.print-view-document { display: grid; justify-items: center; }
.readonly-stack, .rights-list { display: grid; gap: 10px; }
.readonly-stack div, .rights-list div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--dali-border);
  border-radius: 14px;
  background: #f8fdfe;
}
.readonly-stack strong, .rights-list strong { color: var(--dali-navy); }
.readonly-stack span, .rights-list span { color: var(--dali-muted); }
.warn-box { background: #fff8d6; color: #6b5800; }

@media print {
  @page { size: A4; margin: 10mm; }
  html, body { background: white !important; }
  .no-print, .sidebar, .topbar, .nav-list, .modal-backdrop, .print-view-toolbar, .donate-side-btn { display: none !important; }
  .app-shell { display: block !important; min-height: 0 !important; }
  .main-area { padding: 0 !important; }
  .screen:not(.active) { display: none !important; }
  .screen.active { display: block !important; }
  .print-view-page, .print-view-document { max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
  .donation-document, .scoreboard-document {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .scoreboard-document { border-radius: 0 !important; }
}

/* V2.0 scorebord/printlayout: geen extra bovenbalk op scorebord en printknoppen naast elkaar. */
body.route-scoreboard .topbar { display: none; }
.score-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.score-actions .yellow-btn { white-space: nowrap; }
body.route-scoreboard .main-area { padding-top: 22px; }
@media (max-width: 720px) {
  .score-actions { justify-content: flex-start; }
}

/* V2.2 beheer-acties */
.table-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.danger-mini{border-color:#ffd1d1;background:#fff7f7;color:#9b1c1c}
.danger-mini:hover{background:#ffecec}

.logout-btn { margin-top: 12px; width: 100%; justify-content: center; }


/* ==========================================================
   V4.0 - Dali Kart Loading / Opstartscherm V1 geïntegreerd
   ========================================================== */
.dali-loading-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(circle at 25% 15%, rgba(255,214,41,.22), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(126,231,238,.24), transparent 34%),
    linear-gradient(135deg,#071f3d 0%,#0b3763 42%,#087f86 100%);
  color:#fff;
  overflow:hidden;
  transition:opacity .55s ease, visibility .55s ease;
}
.dali-loading-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.dali-loading-top{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:26px clamp(20px,4vw,60px);position:relative;z-index:3}
.dali-loading-brand-pill{display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);font-weight:900;letter-spacing:.2px}
.dali-loading-logo{width:52px;height:52px;object-fit:contain;border-radius:16px;background:#fff;padding:6px;box-shadow:inset 0 0 0 3px rgba(15,95,143,.15)}
.dali-loading-sub{font-weight:800;opacity:.92;text-align:right}
.dali-loading-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.dali-skip-score-btn{border:0;border-radius:999px;padding:13px 18px;background:#ffd447;color:#092133;font-weight:1000;box-shadow:0 12px 30px rgba(0,0,0,.22);cursor:pointer;letter-spacing:.1px}
.dali-skip-score-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.dali-skip-score-btn:active{transform:translateY(0)}

.dali-loading-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;padding:16px;z-index:2}
.dali-race-card{width:min(980px,94vw);min-height:430px;border-radius:38px;padding:34px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.22);box-shadow:0 40px 100px rgba(0,0,0,.32);position:relative;overflow:hidden}
.dali-race-title{text-align:center;margin:0;color:#ffd629;text-transform:uppercase;font-size:clamp(34px,6vw,76px);line-height:.95;text-shadow:0 8px 0 rgba(0,0,0,.14);letter-spacing:-1px}
.dali-race-caption{text-align:center;margin:14px 0 0;font-size:clamp(18px,2vw,26px);font-weight:900}
.dali-countdown-wrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#daliCountdownNumber{font-size:clamp(120px,22vw,250px);font-weight:1000;color:#fff;text-shadow:0 10px 0 rgba(0,0,0,.18),0 0 30px rgba(255,214,41,.40);transform:scale(.7);opacity:0}
#daliCountdownNumber.pop{animation:daliCountPop .72s ease both}
@keyframes daliCountPop{0%{transform:scale(.35) rotate(-8deg);opacity:0}45%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.dali-traffic-lights{position:absolute;right:34px;top:34px;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:22px;background:#111923;border:3px solid rgba(255,255,255,.18);box-shadow:0 14px 35px rgba(0,0,0,.35)}
.dali-light{width:34px;height:34px;border-radius:50%;background:#34404d;box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
.dali-light.red.on{background:#ff3b30;box-shadow:0 0 26px #ff3b30}.dali-light.orange.on{background:#ffb020;box-shadow:0 0 26px #ffb020}.dali-light.green.on{background:#27d36b;box-shadow:0 0 26px #27d36b}
.dali-track-area{position:absolute;left:0;right:0;bottom:30px;height:150px}.dali-track{position:absolute;left:-5%;right:-5%;bottom:22px;height:92px;background:repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.45) 54px 94px,transparent 94px 148px),linear-gradient(180deg,#3e4b5a,#1d2530);border-top:7px solid rgba(255,255,255,.38);border-bottom:7px solid rgba(0,0,0,.35);transform:skewY(-2deg);box-shadow:0 18px 26px rgba(0,0,0,.25)}
.dali-finish-flag{position:absolute;right:60px;bottom:106px;font-size:52px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));animation:daliFlagWave 1s ease-in-out infinite alternate}@keyframes daliFlagWave{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.dali-kart{position:absolute;left:-180px;bottom:82px;width:170px;height:86px;transform:translateX(0);transition:transform 1.45s cubic-bezier(.16,.86,.2,1);filter:drop-shadow(0 18px 10px rgba(0,0,0,.35))}.dali-kart.drive{transform:translateX(calc(100vw + 360px))}
.dali-kart-body{position:absolute;left:32px;bottom:18px;width:112px;height:42px;background:linear-gradient(135deg,#ffd629,#ff8f00);border:4px solid #102b4a;border-radius:45px 50px 26px 26px}.dali-kart-nose{position:absolute;left:112px;bottom:21px;width:44px;height:30px;background:#34d5e4;border:4px solid #102b4a;border-radius:50px 24px 24px 50px}.dali-driver{position:absolute;left:66px;bottom:54px;width:42px;height:42px;background:#0b3763;border:4px solid #fff;border-radius:50%}.dali-driver:after{content:"";position:absolute;left:24px;top:9px;width:24px;height:10px;background:#8ff3ff;border-radius:10px;transform:rotate(14deg)}
.dali-wheel{position:absolute;bottom:4px;width:34px;height:34px;background:#111;border:6px solid #3b4654;border-radius:50%;animation:daliSpin .4s linear infinite}.dali-wheel.left{left:38px}.dali-wheel.right{left:116px}@keyframes daliSpin{to{transform:rotate(360deg)}}
.dali-smoke{position:absolute;left:0;bottom:84px;display:flex;gap:8px;opacity:0}.dali-smoke.show{animation:daliSmokeShow 1.2s ease both}.dali-puff{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(.2px)}.dali-puff:nth-child(2){width:34px;height:34px;margin-top:-10px}.dali-puff:nth-child(3){width:20px;height:20px;margin-top:4px}@keyframes daliSmokeShow{0%{opacity:0;transform:translateX(30px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateX(-70px) scale(1.8)}}
.dali-loading-bottom{position:relative;z-index:3;display:flex;justify-content:center;padding:0 20px 28px}.dali-loading-status{padding:13px 22px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.23);font-weight:900;color:#fff;min-width:min(520px,92vw);text-align:center}.dali-screen-shake{animation:daliShake .25s ease 2}@keyframes daliShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (max-width:700px){.dali-loading-top{align-items:flex-start}.dali-loading-actions{align-items:flex-end}.dali-loading-sub{display:none}.dali-race-card{min-height:390px;padding:24px}.dali-traffic-lights{right:18px;top:18px}.dali-light{width:27px;height:27px}.dali-finish-flag{right:24px}}
@media print{#daliLoadingOverlay{display:none!important}}


/* V4.2 login/opstart-aanpassing */
.login-page-card{max-width:920px;margin:38px auto;background:white;border:1px solid var(--dali-border);border-radius:28px;box-shadow:var(--shadow-card);padding:28px}
.login-head{display:flex;gap:16px;align-items:center;margin-bottom:20px}
.login-head h2{margin:0;color:var(--dali-navy);font-size:clamp(1.5rem,2.5vw,2.2rem)}
.login-head p{margin:6px 0 0;color:var(--dali-muted);font-weight:800}
.login-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.login-user-card{cursor:pointer;text-align:left;border:1px solid var(--dali-border);background:#f8fcfd;border-radius:20px;padding:16px;box-shadow:0 8px 20px rgba(5,40,54,.06);transition:.16s ease;display:grid;gap:5px}
.login-user-card:hover{transform:translateY(-2px);border-color:rgba(8,148,154,.45);background:#eefbfc}
.login-avatar{font-size:2rem;line-height:1}
.login-user-card strong{color:var(--dali-navy);font-size:1.05rem}
.login-user-card small{color:var(--dali-muted);font-weight:800}
.login-actions{margin-top:18px;display:flex;justify-content:flex-end}
@media(max-width:760px){.login-page-card{margin:12px}.login-head{align-items:flex-start}}


/* V5.4 selecteerbare teamledenlijst */
.selectable-row { cursor: pointer; }
.selectable-row:hover { background: rgba(10, 154, 160, 0.08); }
.selected-row { background: rgba(10, 154, 160, 0.18) !important; box-shadow: inset 4px 0 0 var(--accent, #0a9aa0); }
.selected-row td { font-weight: 800; }