/* ====== Basispalet + widths ====== */
:root{
  color-scheme: light dark;

  /* widths (kun je laten staan voor layout) */
  --w-pos: 56px;
  --w-name: 240px;
  --w-cls: 100px;
  --w-sub: 140px;
  --w-tot: 110px;

  /* LIGHT */
  --bg:#fafafa;
  --text:#111827;
  --text-700:#374151;
  --muted:#6b7280;
  --line-200:#e5e7eb;
  --line-300:#d1d5db;
  --surface-100:#f3f4f6;
  --muted-300:#c4c7cf;
  --muted-400:#a9adb7;
  --card-bg:#ffffff;
  --row-alt:#fafafa;
  --row-hover:#fff7ed;
  --accent:#f59e0b;
  --accent-700:#d97706;
  --link:#2563eb;
  --badge-text:#92400e;
  --badge-bg:#fff7ed;
  --badge-border:#fed7aa;

  /* Controls */
  --control-h: 38px;
  --radius: 8px;
  --on-accent: #111827;
  --shadow-sm: 0 1px 1px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
}

/* ====== Layout ====== */
html, body{
  background:var(--bg);
  color:var(--text);
  font-family:'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif;
  overflow-x:hidden; /* geen horizontale paginascroll */
}
a{ color:var(--link); }

.container{
  box-sizing:border-box;
  max-width:none;
  width:100%;
  padding-left:16px;
  padding-right:16px;
}

/* ====== Kaart / header / badges ====== */
.card{
  border:1px solid var(--line-200);
  border-radius:12px;
  padding:1rem 1.25rem;
  margin:1rem 0;
  background:var(--card-bg);
  color:var(--text);
  overflow:hidden;
}
.h1{
  display:flex; gap:.5rem; align-items:center; margin:1rem 0 1.25rem;
  font-size:clamp(1.25rem, 2.5vw, 1.75rem); font-weight:700;
}
.accent-dot{ width:10px; height:10px; border-radius:999px; background:var(--accent); display:inline-block; }
.badge{
  font-size:.85rem; font-weight:600; color:var(--badge-text);
  background:var(--badge-bg); border:1px solid var(--badge-border);
  border-radius:999px; padding:.15rem .5rem;
}

/* ====== Filters / Buttons ====== */
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:0 0 1rem; }
.filters label{ display:inline-flex; align-items:center; gap:.45rem; margin:0 .25rem .5rem 0; font-weight:600; }
.select{
  height:var(--control-h); padding:0 .7rem;
  border:1px solid var(--line-300); border-radius:var(--radius);
  background:var(--card-bg); color:var(--text);
}
.btn, a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:var(--control-h); padding:0 .9rem;
  border:1px solid var(--line-300); border-radius:var(--radius);
  background:var(--card-bg); color:var(--text); text-decoration:none;
  font:inherit; line-height:1; cursor:pointer;
  transition: background .15s, border-color .15s, transform .02s;
  box-shadow: var(--shadow-sm);
}
.btn:hover, a.btn:hover{ background:var(--surface-100); }
.btn:active, a.btn:active{ transform:translateY(1px); }
.btn:focus-visible, a.btn:focus-visible, .select:focus-visible{
  outline:2px solid var(--link); outline-offset:2px; border-radius:calc(var(--radius) + 1px);
}
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover{ background:var(--accent-700); border-color:var(--accent-700); }
.btn.outline{ background:transparent; }

.ui-group{ display:inline-flex; align-items:stretch; gap:0; margin-left:auto; margin-right:.5rem; }
.ui-group > *{ margin:0; border-radius:0; }
.ui-group > *:not(:first-child){ margin-left:-1px; }
.ui-group > :first-child{ border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius); }
.ui-group > :last-child{ border-top-right-radius:var(--radius); border-bottom-right-radius:var(--radius); }
@media (max-width:700px){
  .ui-group{ flex-wrap:wrap; margin-right:0; }
  .ui-group > *{ border-radius:var(--radius) !important; margin-left:0 !important; }
}

/* ====== Tabel ====== */
.table-wrap{
  display:block;
  max-width:100%;
  margin-bottom:12px;
  overflow-x:auto;              /* horizontaal scrollen in container */
  overflow-y:visible;           /* verticaal altijd via de pagina */
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  background:var(--card-bg);
  border-radius:inherit;
}

/* let op: GEEN sticky meer */
table{ width:max-content; border-collapse:collapse; }
th,td{
  padding:.5rem .6rem; border-bottom:1px solid var(--line-200);
  text-align:left; vertical-align:top; white-space:nowrap;
  box-sizing:border-box; overflow:hidden; text-overflow:ellipsis;
  color:var(--text);
}
th{ font-size:.9rem; color:var(--text-700); }
.right{ text-align:right; }

/* Zebra + hover */
tbody tr:nth-child(even) td{ background:var(--row-alt); }
tbody tr:hover td{ background:var(--row-hover); }

/* ====== Responsive verbergen ====== */
.hide-sm{ display:table-cell; }
@media (max-width:900px){ .hide-sm{ display:none; } }

/* ====== Podium ====== */
tr.gold   td{ background:#fff8dc !important; }
tr.silver td{ background:#f0f0f0 !important; }
tr.bronze td{ background:#fdf5e6 !important; }
.trophy{ font-size:1.2rem; margin-right:4px; }
.gold .trophy{ color:#d4af37; } .silver .trophy{ color:#c0c0c0; } .bronze .trophy{ color:#cd7f32; }

/* ====== Thema’s forceren ====== */
html.theme-dark{
  color-scheme:dark;
  --bg:#0b0f14; --text:#e5e7eb; --text-700:#9ca3af; --muted:#9ca3af;
  --line-200:#1f2937; --line-300:#374151;
  --surface-100:#111827; --muted-300:#4b5563; --muted-400:#6b7280;
  --card-bg:#0f172a;
  --row-alt:rgba(255,255,255,.04); --row-hover:rgba(245,158,11,.12);
  --accent:#f59e0b; --accent-700:#fbbf24; --link:#60a5fa;
}
html.theme-dark tr.gold   td{ background:rgba(212,175,55,.15) !important; }
html.theme-dark tr.silver td{ background:rgba(192,192,192,.12) !important; }
html.theme-dark tr.bronze td{ background:rgba(205,127,50,.15) !important; }

html.theme-light{
  color-scheme:light;
  --bg:#fafafa; --text:#111827; --text-700:#374151; --muted:#6b7280;
  --line-200:#e5e7eb; --line-300:#d1d5db;
  --surface-100:#f3f4f6; --muted-300:#c4c7cf; --muted-400:#a9adb7;
  --card-bg:#ffffff; --row-alt:#fafafa; --row-hover:#fff7ed;
  --accent:#f59e0b; --accent-700:#d97706; --link:#2563eb;
  --badge-text:#92400e; --badge-bg:#fff7ed; --badge-border:#fed7aa;
}