/* CAS-Jartpoint V23 — vaste basis voor alle pagina's */
:root {
  --cj-bg: #f2eee6;
  --cj-bg-soft: #f8f5ef;
  --cj-surface: #fffdf8;
  --cj-surface-strong: #ffffff;
  --cj-surface-tint: #f7f0df;
  --cj-sidebar: #0b2119;
  --cj-sidebar-2: #123a2b;
  --cj-felt: #12603b;
  --cj-felt-dark: #0c452b;
  --cj-gold: #c99537;
  --cj-gold-light: #e7c66d;
  --cj-ink: #1b2721;
  --cj-ink-soft: #33453c;
  --cj-muted: #6f756f;
  --cj-line: #ded6c7;
  --cj-line-strong: #cdbd9c;
  --cj-danger: #a43d42;
  --cj-danger-dark: #7e282d;
  --cj-info: #314e61;
  --cj-shadow-sm: 0 8px 22px rgba(30, 39, 34, .08);
  --cj-shadow: 0 18px 44px rgba(25, 36, 30, .12);
  --cj-shadow-lg: 0 26px 70px rgba(9, 25, 18, .19);
  --cj-radius-sm: 12px;
  --cj-radius: 18px;
  --cj-radius-lg: 26px;
  --cj-content: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--cj-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  background:
    radial-gradient(circle at 82% 0, rgba(201, 149, 55, .09), transparent 28rem),
    linear-gradient(180deg, #ece7dd 0, var(--cj-bg-soft) 22rem, var(--cj-bg) 100%);
}

img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.container,
.wrap,
.manage-wrap,
main.container,
main.wrap {
  width: min(var(--cj-content), calc(100% - 36px));
  max-width: var(--cj-content);
  margin-inline: auto;
  padding: 30px 0 56px;
}

h1, h2, h3, h4 {
  color: var(--cj-ink);
  letter-spacing: -.025em;
}

.cj-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 22px;
  padding: clamp(24px, 4vw, 38px);
  color: #fffaf0;
  border: 1px solid rgba(231, 198, 109, .35);
  border-radius: var(--cj-radius-lg);
  background:
    radial-gradient(circle at 92% 15%, rgba(231, 198, 109, .18), transparent 17rem),
    linear-gradient(135deg, #0b271c 0%, #12603b 58%, #0c3827 100%);
  box-shadow: var(--cj-shadow-lg);
}
.cj-page-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, var(--cj-gold), var(--cj-gold-light), var(--cj-gold), transparent);
}
.cj-page-hero h1,
.cj-page-hero h2 { margin: 0 0 8px; color: #fffaf0; font-size: clamp(30px, 4vw, 48px); line-height: 1.04; }
.cj-page-hero p { max-width: 820px; margin: 0; color: rgba(255, 250, 240, .78); }

.card,
.menu-card,
.comp-card,
.section,
.section-card,
.competition-card,
.wedstrijd-card,
.wedstrijd-item,
.wedstrijd-lijst-item,
.partij-card,
.summary-box,
.stat-box,
.item,
.empty-box,
.info-box,
.team-box,
.panel,
.team-item,
.player-item,
.current-box,
.metric,
.board,
.match,
.tile,
.module-card,
.match-item,
.poule-box {
  color: var(--cj-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,253,248,.98));
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow-sm);
}
.card, .section, .section-card, .panel { padding: clamp(17px, 2.4vw, 25px); }

.small, .hint, .muted, .meta, .match-meta, .cj-muted { color: var(--cj-muted); }

button,
.button,
.back-btn,
.other-game-link,
input[type="submit"] {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 850;
  line-height: 1.15;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}
button:hover,
.button:hover,
.back-btn:hover,
.other-game-link:hover {
  transform: translateY(-2px);
  filter: saturate(1.04);
}
button:focus-visible,
.button:focus-visible,
.back-btn:focus-visible,
.other-game-link:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(201, 149, 55, .35);
  outline-offset: 3px;
}

.primary,
.button-primary,
button.primary,
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, #177449, var(--cj-felt-dark));
  border-color: rgba(12, 69, 43, .35);
  box-shadow: 0 9px 20px rgba(18, 96, 59, .20);
}
.primary:hover,
.button-primary:hover,
button.primary:hover,
.button.primary:hover { box-shadow: 0 14px 28px rgba(18, 96, 59, .27); }

.secondary,
.button-secondary,
button.secondary,
.button.secondary,
.back-btn {
  color: #fff;
  background: linear-gradient(135deg, #3c5867, #243d4a);
  border-color: rgba(36, 61, 74, .3);
  box-shadow: 0 9px 20px rgba(36, 61, 74, .18);
}

.button-light,
.button.light,
.back,
.subtle-actions a {
  color: #3e321f;
  background: linear-gradient(180deg, #fffdf7, #f3e6c9);
  border-color: #d9c391;
  box-shadow: 0 7px 16px rgba(88, 69, 33, .10);
}

.warning,
.danger,
button.danger,
.button.warning,
.button.danger {
  color: #fff;
  background: linear-gradient(135deg, var(--cj-danger), var(--cj-danger-dark));
  border-color: rgba(126, 40, 45, .35);
}

.gold,
.button.gold {
  color: #261a08;
  background: linear-gradient(135deg, var(--cj-gold-light), var(--cj-gold));
  border-color: rgba(135, 92, 20, .25);
}

input,
select,
textarea {
  min-height: 45px;
  width: 100%;
  padding: 10px 12px;
  color: var(--cj-ink);
  background: #fffefa;
  border: 1px solid #d6cdbc;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(31, 38, 33, .04);
}
textarea { min-height: 110px; resize: vertical; }
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cj-felt);
  box-shadow: 0 0 0 4px rgba(18, 96, 59, .13);
}
label { color: var(--cj-ink-soft); font-weight: 800; }

.cj-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 15px;
}
.cj-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(130px, 180px) auto;
  gap: 11px;
  align-items: end;
  margin-top: 13px;
}
.cj-inline-form .field label {
  display: block;
  margin-bottom: 6px;
  color: var(--cj-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.cj-list-head,
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cj-chip,
.badge,
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: #3f321c;
  background: #f5e8c9;
  border: 1px solid #dec691;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.table-wrap,
.stand-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table,
.stand-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  color: var(--cj-ink);
  background: var(--cj-surface);
  border: 1px solid var(--cj-line);
  border-radius: 16px;
  box-shadow: var(--cj-shadow-sm);
}
th {
  padding: 12px 13px;
  color: #fdf8eb;
  background: linear-gradient(180deg, #173e2e, #0d2d21);
  font-size: 11px;
  letter-spacing: .055em;
  text-transform: uppercase;
}
td { padding: 12px 13px; border-bottom: 1px solid #ebe5d9; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbf7ee; }

.footer { padding: 26px 18px 38px; color: #7c827d; text-align: center; }

@media (max-width: 760px) {
  .container,
  .wrap,
  .manage-wrap,
  main.container,
  main.wrap { width: min(100% - 18px, var(--cj-content)); padding-top: 16px; }
  .cj-inline-form { grid-template-columns: 1fr; }
  .cj-page-hero { padding: 22px 19px; border-radius: 21px; }
  .card, .section, .section-card, .panel { padding: 16px; }
  button, .button, .back-btn, .other-game-link { min-height: 46px; }
}


/* V25 – contrast en leesbaarheid verbeterd */
:root {
  --cj-ink-soft: #2f3c35;
  --cj-muted: #566057;
  --cj-line: #d7cfbf;
}

p, li, dd, dt { color: var(--cj-ink-soft); }
.small, .hint, .muted, .meta, .match-meta, .cj-muted { color: var(--cj-muted) !important; }
.card p, .section p, .section-card p, .panel p, .module-card small, .competition-card p,
.empty-box, .info-box, .team-box, .team-item, .player-item, .item, .summary-box, .stat-box {
  color: var(--cj-ink-soft);
}

button, .button, .back-btn, .other-game-link, input[type="submit"] {
  text-shadow: none;
}
.button-light, .button.light, .back, .subtle-actions a {
  color: #2f2517;
  background: linear-gradient(180deg, #fffefb, #efdfba);
  border-color: #cfae69;
}
.gold, .button.gold { color: #231806; }

input::placeholder, textarea::placeholder { color: #6b736d; opacity: 1; }

.cj-chip, .badge, .status {
  color: #3a2d17;
  background: #f3e3bc;
  border-color: #d3b473;
}
.badge.live, .status.live {
  color: #0e4c2c;
  background: #ddefe1;
  border-color: #aacfb9;
}

.empty-box, .info-box {
  background: linear-gradient(180deg, #fffdfa, #f8f1e3);
}

.footer { color: #646d66; }


/* V27 – knopcontrast en visuele consistentie */
button, .button, .btn, .back-btn, .other-game-link, input[type="submit"] {
  font-weight: 900 !important;
}

.primary, .button-primary, button.primary, .button.primary, .btn.green, .btn.blue, .btn.red, .btn.purple, .btn.dark,
.button-secondary, .button-muted, .secondary, button.secondary, .back-btn, .other-game-link {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.12) !important;
}

.button-light, .button.light, .back, .subtle-actions a, .gold, .button.gold, .btn.gold {
  color: #241909 !important;
  text-shadow: none !important;
}

.btn.dark, .button-muted {
  background: linear-gradient(135deg, #435148, #2e3933) !important;
  border-color: rgba(21,29,25,.32) !important;
}
.btn.blue, .button-secondary, button.secondary, .secondary {
  background: linear-gradient(135deg, #44637a, #294355) !important;
}
.btn.green, .primary, .button-primary, button.primary, .button.primary {
  background: linear-gradient(135deg, #177449, #0c452b) !important;
}
.btn.red, .warning, .danger, .button.warning, .button.danger {
  background: linear-gradient(135deg, #b04a4f, #7f2d32) !important;
}
.btn.purple {
  background: linear-gradient(135deg, #7b4ca1, #5b2f82) !important;
}

a.button, a.btn { text-decoration: none !important; }