/* ================================================================
   Scout4All — Design System v2.7.0
   #080C18 base · #2D8EFF blue · #FF6B1A orange
   ================================================================ */

/* ── AdSense banners (alleen voor free tier) ───────────────────── */
.ad-slot-wrap { width:100%; overflow:hidden; text-align:center; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:8px; margin:12px 0; }
.ad-slot-wrap ins.adsbygoogle { display:block; max-width:100%; }
.ad-slot-label { font-size:11px; color:var(--text-muted); text-align:center; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
.ad-slot-footer { margin-top:32px; padding-top:16px; border-top:1px solid var(--border-subtle); }
@media (max-width:640px) { .ad-slot-wrap { padding:4px; } }

/* ── Design Tokens ──────────────────────────────────────────────── */
:root {
  --bg-base:      #080C18;
  --bg-surface:   #0D1526;
  --bg-elevated:  #111E35;
  --bg-hover:     #162240;
  --blue:         #2D8EFF;
  --blue-bright:  #00AAFF;
  --blue-dark:    #1A5FCC;
  --orange:       #FF6B1A;
  --orange-bright:#FF8C42;
  --text-primary: #FFFFFF;
  --text-secondary:#A8B8D0;
  --text-muted:   #5A6E8A;
  --success:      #00E676;
  --warning:      #FFB300;
  --red:          #FF3D57;
  --border:       rgba(45,142,255,.15);
  --border-subtle:rgba(45,142,255,.08);
  --shadow:       0 8px 32px rgba(0,0,0,.4);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.6);
  --radius:       8px;
  --radius-lg:    10px;
  --radius-full:  50%;
  --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sidebar-width:240px;
  /* Legacy aliases */
  --green:       #2D8EFF;
  --green-dark:  #1A5FCC;
  --green-light: rgba(45,142,255,.1);
  --white:       #FFFFFF;
  --gray-50:     #0D1526;
  --gray-100:    #111E35;
  --gray-200:    rgba(45,142,255,.15);
  --gray-400:    #5A6E8A;
  --gray-600:    #A8B8D0;
  --gray-800:    #FFFFFF;
  --accent:      #2D8EFF;
}

/* ── Global reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
html, body { font-variant-numeric:tabular-nums; }
body { font-family:var(--font); background:var(--bg-base); color:var(--text-primary); min-height:100vh; font-size:13px; font-weight:500; line-height:1.45; }

/* ── Utility ────────────────────────────────────────────────────── */
.hidden { display:none !important; }
.text-center { text-align:center; }
.text-muted { color:var(--text-muted); font-size:13px; }
.text-green { color:var(--blue); }
.text-red { color:var(--red); }
.mt-1 { margin-top:8px; } .mt-2 { margin-top:16px; } .mt-3 { margin-top:24px; }
.mb-1 { margin-bottom:8px; } .mb-2 { margin-bottom:16px; }
.flex { display:flex; } .flex-col { flex-direction:column; }
.items-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-1 { gap:8px; } .gap-2 { gap:16px; }
.w-full { width:100%; } .truncate { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.flex-1 { flex:1; }

/* ── Pages ──────────────────────────────────────────────────────── */
.page { display:none; }
.page.active { display:block; }
main { min-height:calc(100vh - 60px); background:var(--bg-base); }

/* ── Container ──────────────────────────────────────────────────── */
.container { max-width:1100px; margin:0 auto; padding:24px 16px; }
.container-sm { max-width:560px; margin:0 auto; padding:24px 16px; }

/* ── Card ───────────────────────────────────────────────────────── */
.card { background:var(--bg-surface); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); }
.card-body { padding:14px 16px; }
.card-header { padding:16px 20px; border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; }
.card-header h2 { font-size:13px; font-weight:600; color:var(--text-primary); }

/* ── Button System (werkdocument §4.6) ─────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 14px; border-radius:var(--radius); border:none;
  font:500 12px/1 var(--font); cursor:pointer; transition:all 150ms ease;
  -webkit-tap-highlight-color:transparent; position:relative; overflow:hidden;
  text-decoration:none; white-space:nowrap;
}
.btn:active { transform:scale(0.98); }
.btn:disabled { opacity:0.35; cursor:not-allowed; transform:none; }
.btn:focus-visible { box-shadow:0 0 0 2px var(--bg-base), 0 0 0 4px var(--blue); outline:none; }
.btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; }

/* Ripple */
.btn::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%), rgba(255,255,255,.08) 0%, transparent 60%);
  opacity:0; transition:opacity 200ms;
}
.btn:active::after { opacity:1; }

.btn-primary { background:var(--blue); color:var(--text-primary); }
.btn-primary:hover:not(:disabled) { background:var(--blue-bright); }
.btn-primary:active:not(:disabled) { background:var(--blue-dark); }

.btn-secondary { background:var(--bg-elevated); color:var(--text-primary); border:1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { border-color:var(--blue); }

.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background:var(--bg-elevated); color:var(--text-primary); }

.btn-danger { background:transparent; color:var(--red); border:1px solid rgba(255,61,87,.2); }
.btn-danger:hover:not(:disabled) { background:rgba(255,61,87,.08); }

.btn-outline { background:transparent; color:var(--blue); border:1px solid var(--border); }
.btn-outline:hover:not(:disabled) { background:rgba(45,142,255,.1); }

.btn-lg { height:36px; padding:0 18px; font-size:13px; }
.btn-sm { height:28px; padding:0 10px; font-size:11px; }
.btn-block { width:100%; }
.btn-logout-nav { background:rgba(255,61,87,.1); border:1px solid rgba(255,61,87,.2); color:var(--red); font-size:13px; font-weight:600; padding:4px 13px; border-radius:var(--radius); cursor:pointer; transition:all .15s; }
.btn-logout-nav:hover { background:rgba(255,61,87,.2); }

/* ── Context Menu (werkdocument §4.8) ──────────────────────────── */
.ctx-menu {
  position:absolute; z-index:200;
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.3);
  padding:4px 0; min-width:160px; opacity:0; transform:scale(0.95);
  transition:opacity 150ms, transform 150ms; pointer-events:none;
}
.ctx-menu.open { opacity:1; transform:scale(1); pointer-events:auto; }
.ctx-menu-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; font-size:12px; color:var(--text-primary);
  cursor:pointer; transition:background 100ms;
}
.ctx-menu-item:hover { background:var(--bg-hover); }
.ctx-menu-item svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; }
.ctx-menu-item.danger { color:var(--red); }
.ctx-menu-item.danger:hover { background:rgba(255,61,87,.08); }
.ctx-menu-sep { height:1px; background:var(--border-subtle); margin:4px 0; }
.ctx-menu-trigger {
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius); cursor:pointer; opacity:0;
  transition:opacity 150ms, background 150ms;
}
.ctx-menu-trigger:hover { background:var(--bg-hover); }
tr:hover .ctx-menu-trigger,
.dash-player-row:hover .ctx-menu-trigger { opacity:1; }
@media (max-width:767px) { .ctx-menu-trigger { opacity:1; } }

/* ── Form ───────────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:11px; font-weight:500; color:var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.form-label .required { color:var(--red); margin-left:2px; }
.form-control { width:100%; height:34px; padding:0 13px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; font-family:var(--font); background:var(--bg-elevated); color:var(--text-primary); transition:border-color .15s, box-shadow .15s; }
.form-control::placeholder { color:var(--text-muted); }
.form-control:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,142,255,.15); background:var(--bg-hover); }
.form-control:focus-visible { box-shadow:0 0 0 2px var(--bg-base), 0 0 0 4px var(--blue); }
.form-control.error { border-color:var(--red); }
.form-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.form-error { font-size:13px; color:var(--red); margin-top:4px; }
textarea.form-control { resize:vertical; min-height:80px; height:auto; padding:12px 12px; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6E8A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
select.form-control option { background:var(--bg-elevated); color:var(--text-primary); }
/* ── Score stars ────────────────────────────────────────────────── */
.score-row { padding:8px 0; border-bottom:1px solid var(--border-subtle); }
.score-row:last-child { border-bottom:none; }
.score-row-top { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.score-label { font-size:13px; color:var(--text-secondary); }
.score-meaning { font-size:12px; margin-top:4px; font-style:italic; min-height:1em; transition:color .15s; }
.score-stars { display:flex; gap:3px; }
.star-btn { width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:var(--bg-elevated); cursor:pointer; font-size:11px; transition:all .12s; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-weight:700; }
.star-btn.active-1 { background:var(--red); border-color:var(--red); color:var(--text-primary); }
.star-btn.active-2 { background:var(--orange); border-color:var(--orange); color:var(--text-primary); }
.star-btn.active-3 { background:var(--warning); border-color:var(--warning); color:var(--bg-base); }
.star-btn.active-4 { background:var(--success); border-color:var(--success); color:var(--text-primary); }
.star-btn.active-5 { background:var(--success); border-color:var(--success); color:var(--bg-base); }
.star-btn.active-6 { background:rgba(255,179,0,.8); border-color:var(--warning); color:var(--bg-base); }
.star-btn.active-7 { background:rgba(0,200,100,.8); border-color:var(--success); color:var(--bg-base); }
.star-btn.active-8 { background:rgba(0,220,100,.85); border-color:var(--success); color:var(--bg-base); }
.star-btn.active-9 { background:rgba(0,230,118,.9); border-color:var(--success); color:var(--bg-base); }
.star-btn.active-10 { background:var(--success); border-color:var(--success); color:var(--bg-base); }
.star-btn:hover { transform:scale(1.2); }

/* ── Category accordion ─────────────────────────────────────────── */
.cat-block { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; overflow:hidden; }
.cat-header { padding:12px 16px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; background:var(--bg-elevated); user-select:none; }
.cat-header:hover { background:var(--bg-hover); }
.cat-title { display:flex; align-items:center; gap:8px; font-weight:600; font-size:16px; }
.cat-badge { font-size:11px; background:rgba(45,142,255,.15); color:var(--blue); padding:2px 8px; border-radius:var(--radius-full); }
.cat-body { padding:4px 16px 16px; background:var(--bg-surface); }
.cat-chevron { transition:transform .2s; color:var(--text-muted); }
.cat-block.open .cat-chevron { transform:rotate(180deg); }
.cat-block:not(.open) .cat-body { display:none; }

/* ── Spider chart ───────────────────────────────────────────────── */
.spider-wrap { position:relative; width:100%; max-width:340px; margin:0 auto; }
.spider-wrap canvas { width:100%; height:auto; }

/* ── Score gauge ────────────────────────────────────────────────── */
.score-gauge { text-align:center; padding:24px; }
.score-gauge .score-big { font-size:20px; font-weight:800; color:var(--blue); line-height:1; }
.score-gauge .score-max { font-size:20px; color:var(--text-muted); font-weight:500; }
.score-gauge .score-label { font-size:13px; color:var(--text-muted); margin-top:4px; }

/* ── Player card ────────────────────────────────────────────────── */
.player-card { background:var(--bg-surface); border-radius:var(--radius); border:1px solid var(--border); padding:12px 16px; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:12px; }
.player-card:hover { border-color:var(--blue); background:var(--bg-elevated); box-shadow:0 4px 20px rgba(45,142,255,.1); }
.player-avatar { width:42px; height:42px; border-radius:50%; background:rgba(45,142,255,.2); border:1px solid rgba(45,142,255,.3); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--blue); font-size:16px; flex-shrink:0; }
.player-info { flex:1; min-width:0; }
.player-naam { font-weight:600; font-size:13px; color:var(--text-primary); }
.player-meta { font-size:12px; color:var(--text-muted); margin-top:1px; }
.player-badges { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }

/* ── Tags & badges ──────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.4px; }
.badge-green { background:rgba(0,230,118,.15); color:var(--success); border:1px solid rgba(0,230,118,.3); }
.badge-orange { background:rgba(255,107,26,.15); color:var(--orange); border:1px solid rgba(255,107,26,.3); }
.badge-blue { background:rgba(45,142,255,.15); color:var(--blue); border:1px solid rgba(45,142,255,.3); }
.badge-red { background:rgba(255,61,87,.15); color:var(--red); border:1px solid rgba(255,61,87,.3); }
.badge-yellow { background:rgba(255,179,0,.15); color:var(--warning); border:1px solid rgba(255,179,0,.3); }
.badge-gray { background:rgba(90,110,138,.2); color:var(--text-secondary); border:1px solid rgba(90,110,138,.3); }
.badge-minor { background:rgba(255,179,0,.15); color:var(--warning); border:1px solid rgba(255,179,0,.3); }
.badge-consent-pending { background:rgba(255,107,26,.15); color:var(--orange); }
.badge-consent-granted { background:rgba(0,230,118,.15); color:var(--success); }
.pos-keeper { background:rgba(45,142,255,.15); color:var(--blue); border:1px solid rgba(45,142,255,.3); }
.pos-verdediger { background:rgba(0,230,118,.15); color:var(--success); border:1px solid rgba(0,230,118,.3); }
.pos-middenvelder { background:rgba(255,179,0,.15); color:var(--warning); border:1px solid rgba(255,179,0,.3); }
.pos-aanvaller { background:rgba(255,61,87,.15); color:var(--red); border:1px solid rgba(255,61,87,.3); }
.pos-onbekend { background:rgba(90,110,138,.2); color:var(--text-muted); }

/* ── Players grid ───────────────────────────────────────────────── */
.players-grid { display:flex; flex-direction:column; gap:8px; }

/* ── Search bar ─────────────────────────────────────────────────── */
.search-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.search-input-wrap { flex:1; min-width:200px; position:relative; }
.search-input-wrap .search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:16px; pointer-events:none; }
.search-input-wrap .form-control { padding-left:36px; }
.filter-select { min-width:130px; }

/* ── Eval list ──────────────────────────────────────────────────── */
.eval-item { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-surface); margin-bottom:8px; }
.eval-datum { font-size:13px; color:var(--text-muted); min-width:80px; }

/* ── Score bar ──────────────────────────────────────────────────── */
.score-bar-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.score-bar-label { font-size:13px; min-width:130px; color:var(--text-secondary); }
.score-bar-track { flex:1; height:6px; background:var(--bg-elevated); border-radius:var(--radius-full); overflow:hidden; }
.score-bar-fill { height:100%; border-radius:var(--radius-full); transition:width .5s ease; }
.score-bar-val { font-size:13px; font-weight:700; min-width:24px; text-align:right; }

/* ── Stat cards ─────────────────────────────────────────────────── */
.stat-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px; }
@media (min-width:640px) { .stat-cards { grid-template-columns:repeat(4,1fr); } }
.stat-card { background:var(--bg-surface); border-radius:var(--radius); border:1px solid var(--border); padding:20px; text-align:center; }
.stat-card .stat-val { font-size:20px; font-weight:800; color:var(--blue); }
.stat-card .stat-lbl { font-size:11px; color:var(--text-muted); margin-top:2px; text-transform:uppercase; letter-spacing:.5px; font-weight:500; }

/* ── Login page ─────────────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background-color:var(--bg-base); background-image:radial-gradient(ellipse at 30% 20%, rgba(45,142,255,.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(255,107,26,.08) 0%, transparent 50%), linear-gradient(rgba(45,142,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(45,142,255,.025) 1px, transparent 1px); background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px; }
.login-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px 32px; width:100%; max-width:500px; box-shadow:var(--shadow-lg), 0 0 80px rgba(45,142,255,.06); position:relative; }
.lang-switcher { position:absolute; top:16px; right:16px; display:flex; gap:4px; flex-wrap:nowrap; }
.lang-btn { background:rgba(45,142,255,.08); border:1px solid var(--border); color:var(--text-muted); font-size:11px; padding:4px 8px; border-radius:4px; cursor:pointer; transition:all .15s; }
.lang-btn.active, .lang-btn:hover { background:rgba(45,142,255,.2); color:var(--blue); border-color:rgba(45,142,255,.4); }
.login-logo { text-align:center; margin-bottom:28px; padding-top:8px; }
.logo-img { width:320px; height:auto; object-fit:contain; display:block; margin:0 auto 4px; }
.logo-text { font-size:20px; font-weight:900; color:var(--text-primary); letter-spacing:-1px; }
.logo-text span { color:var(--blue); }
.login-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:28px; }
.login-tab { flex:1; padding:10px; text-align:center; cursor:pointer; font-size:12px; font-weight:700; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.login-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.forgot-link { color:var(--blue); font-size:13px; }
.login-title-wrap { text-align:center; margin-bottom:24px; }
.login-title { font-size:20px; font-weight:800; background:linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.login-subtitle { font-size:13px; color:var(--text-secondary); }
.lang-dropdown-wrap { position:absolute; top:16px; right:16px; }
.lang-dropdown-btn { background:rgba(45,142,255,.1); border:1px solid var(--border); color:var(--text-secondary); font-size:13px; padding:4px 12px; border-radius:var(--radius); cursor:pointer; display:flex; align-items:center; gap:4px; transition:all .15s; }
.lang-dropdown-btn:hover { background:rgba(45,142,255,.2); color:var(--text-primary); }
.lang-dropdown-menu { position:absolute; top:calc(100% + 4px); right:0; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); min-width:160px; z-index:200; box-shadow:var(--shadow-lg); overflow:hidden; }
.lang-option { display:flex; align-items:center; gap:8px; padding:8px 13px; font-size:13px; color:var(--text-secondary); cursor:pointer; transition:all .12s; }
.lang-option:hover { background:var(--bg-hover); color:var(--text-primary); }
.lang-option.active { color:var(--blue); background:rgba(45,142,255,.1); }
.forgot-row { display:flex; justify-content:flex-end; margin:-4px 0 12px; }
.switch-text { text-align:center; font-size:13px; color:var(--text-muted); }
.switch-text a { color:var(--blue); }
.pw-wrap { position:relative; }
.pw-wrap .form-control { padding-right:40px; }
.pw-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; color:var(--text-muted); transition:color .15s; }
.pw-toggle:hover { color:var(--text-primary); }
/* ── Pricing cards ──────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px) { .pricing-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .pricing-grid { grid-template-columns:repeat(4,1fr); } }
.pricing-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; background:var(--bg-surface); position:relative; transition:all .2s; display:flex; flex-direction:column; }
.pricing-card .features { flex:1; }
.pricing-card:hover { border-color:var(--blue); box-shadow:0 8px 30px rgba(45,142,255,.15); transform:translateY(-2px); }
.pricing-card.popular { border-color:var(--blue); }
.pricing-card.is-current-plan { border:2px solid var(--blue); }
.pricing-card .popular-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg, var(--blue), var(--blue-bright)); color:var(--text-primary); font-size:11px; font-weight:700; padding:3px 14px; border-radius:var(--radius-full); white-space:nowrap; }
.pricing-card h3 { font-size:16px; font-weight:700; color:var(--text-primary); }
.pricing-card .price { font-size:20px; font-weight:800; color:var(--blue); margin:12px 0 4px; }
.pricing-card .price span { font-size:16px; font-weight:500; color:var(--text-muted); }
.pricing-card .features { list-style:none; margin:16px 0; font-size:13px; display:flex; flex-direction:column; gap:8px; }
.pricing-card .features li { display:flex; align-items:center; gap:8px; color:var(--text-secondary); }
.pricing-card .features li::before { content:'✓'; color:var(--blue); font-weight:700; flex-shrink:0; }

/* ── Consent banner ─────────────────────────────────────────────── */
.consent-banner { background:rgba(255,179,0,.08); border:1px solid rgba(255,179,0,.3); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.consent-banner h4 { color:var(--warning); margin-bottom:4px; font-size:13px; }
.consent-banner p { font-size:13px; color:var(--text-secondary); }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast-stack { position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); border-left:3px solid var(--blue); font-size:12px; color:var(--text-primary); box-shadow:0 8px 24px rgba(0,0,0,.3); transform:translateX(120%); transition:transform 300ms ease-out, opacity 200ms; max-width:320px; will-change:transform; }
.toast.show { transform:translateX(0); }
.toast.hide { opacity:0; transform:translateX(40px); }
.toast.success { border-left-color:var(--success); }
.toast.error { border-left-color:var(--red); }
.toast.warning { border-left-color:var(--warning); }
/* Legacy toast */
#toast-container { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast-success { background:rgba(0,230,118,.15); color:var(--success); border-left:3px solid var(--success); }
.toast-error { background:rgba(255,61,87,.15); color:var(--red); border-left:3px solid var(--red); }
.toast-info { background:rgba(45,142,255,.15); color:var(--blue); border-left:3px solid var(--blue); }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:500; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-box { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); will-change:transform; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-header h3 { font-size:16px; font-weight:700; color:var(--text-primary); }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-muted); line-height:1; }

/* ── Page header ────────────────────────────────────────────────── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.page-header h1 { font-size:16px; font-weight:600; color:var(--text-primary); letter-spacing:-.01em; line-height:1.25; }
.back-btn { background:none; border:none; color:var(--blue); font-size:13px; cursor:pointer; display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:var(--radius); transition:background .15s; }
.back-btn:hover { background:rgba(45,142,255,.1); }

/* ── Tabs ───────────────────────────────────────────────────────── */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:20px; gap:2px; overflow-x:auto; }
.tab-btn { padding:8px 16px; border:none; background:none; cursor:pointer; font-size:11px; font-weight:500; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:all .15s; text-transform:uppercase; letter-spacing:.4px; }
.tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Loading ────────────────────────────────────────────────────── */
.loading { display:flex; align-items:center; justify-content:center; padding:48px; }
.spinner { width:36px; height:36px; border:3px solid var(--bg-elevated); border-top-color:var(--blue); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Empty state ────────────────────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; text-align:center; color:var(--text-muted); }
.empty-state svg { width:100px; height:100px; stroke:var(--text-muted); fill:none; stroke-width:1; opacity:.5; margin-bottom:16px; }
.empty-state-title { font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.empty-state-desc { font-size:12px; color:var(--text-secondary); margin-bottom:16px; max-width:260px; }
.empty-state .btn-primary { font-size:12px; padding:8px 16px; }
.empty-state .empty-icon { font-size:20px; margin-bottom:12px; }
.empty-state p { font-size:13px; margin-bottom:16px; }

/* ── Upgrade prompt ─────────────────────────────────────────────── */
.upgrade-prompt { background:rgba(45,142,255,.05); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; text-align:center; margin:16px 0; }
.upgrade-prompt h3 { color:var(--blue); font-size:16px; margin-bottom:8px; }
.upgrade-prompt p { font-size:13px; color:var(--text-secondary); margin-bottom:16px; }

/* ── Table ──────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; border-collapse:collapse; font-size:13px; }
table.data-table th { background:var(--bg-elevated); font-weight:700; text-align:left; padding:10px 13px; border-bottom:1px solid var(--border); color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
table.data-table td { padding:12px 12px; border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); vertical-align:middle; }
table.data-table tr:hover td { background:var(--bg-elevated); }

/* ── Ad slot ────────────────────────────────────────────────────── */
.ad-slot { background:rgba(45,142,255,.05); border:1px dashed var(--border); border-radius:var(--radius); padding:8px 16px; text-align:center; font-size:12px; color:var(--text-muted); margin-bottom:16px; }

/* ── Rapport (legacy simple) ────────────────────────────────────── */
.rapport-card { border-radius:var(--radius-lg); border:1px solid var(--border); max-width:760px; margin:0 auto; background:var(--bg-surface); }
.rapport-header { background:linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%); border-bottom:1px solid var(--border); color:var(--text-primary); padding:24px; }
.param-tekst { font-size:13px; color:var(--text-secondary); line-height:1.5; }
.hash-badge { font-family:monospace; font-size:11px; background:var(--bg-elevated); color:var(--text-muted); padding:3px 8px; border-radius:4px; word-break:break-all; }

/* ── Steps ──────────────────────────────────────────────────────── */
.steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:32px; overflow-x:auto; }
.step { display:flex; align-items:center; gap:0; }
.step-circle { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border:2px solid var(--border); background:var(--bg-elevated); color:var(--text-muted); flex-shrink:0; }
.step-circle.done { background:var(--blue); border-color:var(--blue); color:var(--text-primary); }
.step-circle.active { border-color:var(--blue); color:var(--blue); }
.step-line { width:40px; height:2px; background:var(--border); flex-shrink:0; }
.step-line.done { background:var(--blue); }

/* ── Nav (legacy, voor compatibiliteit) ─────────────────────────── */
.nav { position:sticky; top:0; z-index:100; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px; padding:0 20px; height:60px; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text-primary); flex-shrink:0; }
.nav-brand img { height:36px; width:auto; }
.nav-logo { font-size:20px; }
.nav-title { font-weight:800; font-size:16px; color:var(--text-primary); }
.nav-title span { color:var(--blue); }
.nav-links { display:none; gap:4px; flex:1; margin-left:24px; }
.nav-link { color:var(--text-secondary); text-decoration:none; padding:8px 13px; border-radius:var(--radius); font-size:13px; font-weight:500; transition:all .15s; }
.nav-link:hover, .nav-link.active { background:rgba(45,142,255,.15); color:var(--blue); }
.nav-user { display:none; align-items:center; gap:12px; margin-left:auto; font-size:13px; color:var(--text-secondary); }
.nav-burger { background:none; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer; margin-left:auto; }
@media (min-width:768px) { .nav-links { display:flex; } .nav-user { display:flex; } .nav-burger { display:none; } }
.nav-logo-img { height:40px; width:auto; object-fit:contain; }
.nav-icon { font-size:16px; }
.nav-user-name { color:var(--text-secondary); font-size:13px; }
.nav-settings-btn { background:none; border:none; color:var(--text-muted); font-size:16px; cursor:pointer; padding:4px; border-radius:var(--radius); transition:all .15s; }
.nav-settings-btn:hover { background:var(--bg-elevated); color:var(--text-primary); }

/* ── Tier badge ─────────────────────────────────────────────────── */
.tier-badge { display:inline-block; line-height:1; background:none; border:none; padding:0; }

/* ── Mobile menu ────────────────────────────────────────────────── */
.mobile-menu { display:none; position:fixed; inset:0; background:var(--bg-surface); z-index:200; flex-direction:column; padding:24px; gap:8px; }
.mobile-menu.open { display:flex; }
.mobile-menu .nav-link { font-size:16px; padding:12px 16px; color:var(--text-secondary); }
.mobile-menu-close { align-self:flex-end; background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; margin-bottom:16px; }
/* ── Sidebar layout ─────────────────────────────────────────────── */
#app-layout { display:flex; min-height:100vh; }
.sidebar { position:fixed; top:0; left:0; width:var(--sidebar-width); height:100vh; background:var(--bg-surface); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; transition:width 200ms ease, transform .3s; will-change:transform; }
.sidebar.hidden { display:none; }
.sidebar-logo { display:flex; justify-content:center; align-items:center; gap:12px; padding:20px 16px; border-bottom:1px solid var(--border); height:70px; }
.sidebar-logo-img { width:72px; height:72px; border-radius:var(--radius); object-fit:cover; flex-shrink:0; }
.sidebar-logo-text { display:none; font-size:16px; font-weight:700; color:var(--text-primary); letter-spacing:-.02em; white-space:nowrap; }
.sidebar-logo-text span { color:var(--blue); }
.sidebar.collapsed .sidebar-logo-img { width:40px; height:40px; }

.sidebar-brand-bottom img { transition: opacity 0.2s; }
.sidebar-brand-bottom img:hover { opacity: 1; }.sidebar.collapsed .sidebar-label, .sidebar.collapsed .sidebar-section-label { opacity:0; width:0; }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px; }
.sidebar-section { margin-bottom:20px; }
.sidebar-section-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); padding:4px 8px; margin-bottom:4px; }
.sidebar-item { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:var(--radius); text-decoration:none; color:var(--text-secondary); font-size:13px; font-weight:500; transition:all .15s; margin-bottom:2px; }
.sidebar-item:hover { background:var(--bg-elevated); color:var(--text-primary); }
/* ── Sidebar tooltips (collapsed) ──────────────────────────────── */
.sidebar.collapsed .sidebar-item { position:relative; }
.sidebar.collapsed .sidebar-item::after { content:attr(data-tooltip); position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:8px; padding:4px 10px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); font-size:11px; color:var(--text-primary); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 200ms 200ms; z-index:1000; }
.sidebar.collapsed .sidebar-item:hover::after { opacity:1; }
.sidebar-item:focus-visible { outline:none; box-shadow:0 0 0 2px var(--bg-base), 0 0 0 4px var(--blue); }
.sidebar-item.active { background:rgba(45,142,255,.15); color:var(--blue); }
.sidebar-icon { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.sidebar-label { flex:1; transition:opacity 100ms ease; white-space:nowrap; overflow:hidden; }
.sidebar-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; align-items:flex-start; gap:8px; }
.sidebar-user { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.sidebar-user-avatar { width:32px; height:32px; border-radius:50%; background:rgba(45,142,255,.2); border:1px solid rgba(45,142,255,.3); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--blue); flex-shrink:0; }
.sidebar-user-info { min-width:0; }
.sidebar-user-name { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-logout { background:rgba(255,61,87,.1); border:1px solid rgba(255,61,87,.2); color:var(--red); width:32px; height:32px; border-radius:var(--radius); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.sidebar-logout:hover { background:rgba(255,61,87,.25); }
.sidebar .sidebar-item.sidebar-item-accent { color:var(--blue); opacity:.8; }
.sidebar .sidebar-item.sidebar-item-accent:hover { opacity:1; background:rgba(45,142,255,.1); }
.sidebar-item-accent .sidebar-icon { color:var(--blue); }
.sidebar-branding { padding:12px 12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; display:flex; flex-direction:column; align-items:center; }
.sidebar-brand-text { font-size:11px; color:var(--text-muted); line-height:1.6; margin-bottom:4px; }
.sidebar-brand-text strong { color:var(--text-secondary); font-size:11px; }
.sidebar-brand-link { display:block; text-align:center; font-size:11px; color:var(--blue); text-decoration:none; line-height:1.6; transition:color .15s; }
.sidebar-brand-link:hover { color:var(--blue-bright); }
.sidebar-branding a:hover img { opacity: 1 !important; }
.sidebar-brand-link span { text-decoration:none; }
.sidebar-brand-label { font-size:10px; color:var(--text-muted); letter-spacing:.4px; text-transform:uppercase; }
.sidebar-brand-img { width:32px; height:32px; object-fit:contain; border-radius:50%; opacity:.6; transition:opacity .2s; }
.sidebar-branding:hover .sidebar-brand-img { opacity:1; }
.sidebar-player-panel { margin:0; padding:12px; background:rgba(45,142,255,.06); border-top:1px solid rgba(45,142,255,.2); border-bottom:1px solid rgba(45,142,255,.2); }
.sidebar-player-name { font-size:13px; font-weight:700; color:var(--blue); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-player-evals-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.sidebar-eval-check { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); cursor:pointer; padding:4px 0; }
.sidebar-eval-check input { flex-shrink:0; }
.sidebar-no-evals { font-size:12px; color:var(--text-muted); margin:0; }
.sidebar-lang-wrap { position:relative; padding:8px 12px; border-top:1px solid var(--border); }
.sidebar-lang-dropdown { display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 8px; border:1px solid var(--border); border-radius:6px; background:var(--bg-elevated); font-size:13px; color:var(--text-secondary); transition:all .15s; user-select:none; }
.sidebar-lang-dropdown:hover { border-color:var(--blue); color:var(--text-primary); }
.sidebar-lang-chevron { margin-left:auto; font-size:11px; opacity:.6; }
.sidebar-lang-menu { position:absolute; bottom:calc(100% - 8px); left:12px; right:12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 -4px 20px rgba(0,0,0,.4); z-index:100; }
.sidebar-lang-opt { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:13px; color:var(--text-secondary); transition:background .1s; }
.sidebar-lang-opt:hover { background:var(--bg-elevated); color:var(--text-primary); }
.sidebar-lang-opt.active { color:var(--blue); font-weight:600; }
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; }
.sidebar-overlay.hidden { display:none; }
.sidebar::after { content:''; position:absolute; top:0; right:-40px; width:40px; height:100%; background:linear-gradient(to right, var(--bg-surface), transparent); pointer-events:none; z-index:99; }

/* ── Main content ───────────────────────────────────────────────── */
#main { margin-left:var(--sidebar-width); flex:1; min-height:100vh; background:var(--bg-base); padding:24px; }

/* ── Mobile header ──────────────────────────────────────────────── */
.mobile-header { display:none; position:sticky; top:0; z-index:99; background:var(--bg-surface); border-bottom:1px solid var(--border); padding:0 16px; height:56px; align-items:center; justify-content:space-between; }

.mobile-logo { height:32px; width:auto; }
.mobile-burger { background:none; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer; }
/* ── Spelers filters bar ────────────────────────────────────────── */
.filters-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.filter-check { display:flex; align-items:center; gap:4px; font-size:13px; color:var(--text-secondary); cursor:pointer; white-space:nowrap; }
.filter-check input { cursor:pointer; }
.players-group-header { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:8px 4px 4px; margin-top:8px; border-bottom:1px solid var(--border-subtle); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.cat-count { background:rgba(45,142,255,.15); color:var(--blue); padding:1px 7px; border-radius:var(--radius-full); font-size:11px; }
.player-afgehandeld { opacity:.5; }
.player-afgehandeld:hover { opacity:.8; }
.player-actions { display:flex; align-items:center; }
.status-select { background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-secondary); border-radius:var(--radius); padding:4px 8px; font-size:13px; cursor:pointer; }
.status-select-detail { background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-secondary); border-radius:var(--radius); padding:4px 8px; font-size:13px; cursor:pointer; }
.player-avatar-wrap { position:relative; }
.player-dropdown { position:relative; display:inline-block; }

/* ── Video cards ────────────────────────────────────────────────── */
.video-card { display:flex; gap:16px; padding:12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); transition:all .15s; }
.video-card:hover { border-color:var(--blue); }
.video-thumb-wrap { position:relative; flex-shrink:0; width:140px; height:79px; border-radius:var(--radius); overflow:hidden; cursor:pointer; background:var(--bg-elevated); }
.video-thumb { width:100%; height:100%; object-fit:cover; }
.video-play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.4); color:var(--text-primary); font-size:20px; opacity:0; transition:opacity .15s; }
.video-thumb-wrap:hover .video-play-btn { opacity:1; }
.video-info { flex:1; min-width:0; }
.video-titel { font-weight:600; font-size:13px; color:var(--text-primary); margin-bottom:4px; }
.video-notitie { font-size:13px; color:var(--text-secondary); margin-bottom:4px; }
.video-meta { font-size:12px; color:var(--text-muted); }

/* ── Agenda / Kalender ──────────────────────────────────────────── */
.agenda-legenda { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.legenda-item { display:flex; align-items:center; gap:4px; font-size:13px; font-weight:600; }
.cal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.cal-header h2 { font-size:16px; font-weight:700; }
.cal-dag-namen { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--border); }
.cal-dag { text-align:center; padding:8px; font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.cal-grid { padding:8px; }
.cal-row { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
.cal-cell { min-height:80px; padding:8px; border-radius:var(--radius); border:1px solid transparent; transition:background 200ms; }
.cal-cell:hover:not(.cal-empty) { border-color:var(--border); background:var(--bg-elevated); }
.cal-empty { opacity:.2; }
.cal-cell.cal-today { border-color:var(--blue); background:rgba(45,142,255,.05); }
.cal-day-num { font-size:13px; font-weight:600; color:var(--text-muted); display:block; margin-bottom:4px; }
.cal-today .cal-day-num { color:var(--blue); font-weight:800; }
.cal-event { font-size:11px; padding:2px 5px; border-radius:4px; margin-bottom:2px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.cal-event:hover { opacity:.85; }
.event-item { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; cursor:pointer; transition:all .15s; }
.event-item:hover { border-color:var(--blue); background:var(--bg-elevated); }
.event-type-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.event-titel { font-weight:600; font-size:13px; }
.event-meta { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ── Eval table ─────────────────────────────────────────────────── */
.eval-data-table { table-layout:fixed; width:100%; border-collapse:collapse; }
.eval-data-table th { text-align:left; font-weight:600; font-size:12px; color:var(--text-muted); padding:8px 13px; border-bottom:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eval-data-table td { text-align:left; vertical-align:middle; padding:12px 12px; border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); overflow:hidden; }
.eval-data-table th.col-score, .eval-data-table td.col-score { text-align:center; }
.eval-data-table th.col-acties, .eval-data-table td.col-acties { text-align:center; }
.eval-data-table td .badge { white-space:nowrap; font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; display:inline-block; }
.eval-data-table tr:hover td { background:var(--bg-elevated); }

/* ── Param notes ────────────────────────────────────────────────── */
.param-with-note { position:relative; }
.param-note-btn { position:absolute; right:0; top:2px; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-muted); padding:2px 4px; border-radius:4px; transition:all .15s; opacity:.5; }
.param-note-btn:hover { opacity:1; background:var(--bg-elevated); }
.eval-param-row { position:relative; padding-left:32px; margin-bottom:4px; }
.eval-param-notitie-btn { position:absolute; left:0; top:50%; transform:translateY(-50%); cursor:pointer; font-size:13px; opacity:.5; transition:opacity .15s; width:24px; text-align:center; }
.eval-param-notitie-btn:hover { opacity:1; }
.eval-footer { position:sticky; bottom:0; z-index:10; background:var(--bg-base); border-top:1px solid var(--border); padding:12px 0; margin-top:12px; }

/* ── Legal page ─────────────────────────────────────────────────── */
.legal-disclaimer-page { max-width:700px; }
.legal-disclaimer-page h2 { color:var(--red); }
.legal-disclaimer-page .legal-block { background:rgba(255,61,87,.05); border:1px solid rgba(255,61,87,.2); border-radius:var(--radius); padding:16px 20px; margin-bottom:16px; }
.legal-disclaimer-page .legal-block h3 { font-size:13px; color:var(--red); margin:0 0 8px; }
.legal-disclaimer-page .legal-block p, .legal-disclaimer-page .legal-block li { font-size:13px; color:var(--text-secondary); line-height:1.6; }

/* ── Google CMP popup ───────────────────────────────────────────── */
.fc-consent-root, .fc-dialog-container, #fc-consent-dialog, [class*="fc-consent"], .qc-cmp2-container, .sp_choice_type_11, [id^="sp_message_container"] { opacity:0.85; transform:scale(0.88); transform-origin:bottom right; bottom:8px; right:8px; max-width:320px; font-size:12px; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.3); transition:opacity .2s; }
.fc-consent-root:hover, [class*="fc-consent"]:hover { opacity:1; }
.fc-consent-root > .fc-backdrop, [class*="fc-backdrop"], .sp_choice_type_12 { display:none !important; }
/* ================================================================
   RAPPORT — Neon Redesign v2
   ================================================================ */
.rapport-wrap { max-width:920px; margin:0 auto; padding:20px 16px 48px; }
.no-print { }
.rapport-header-bar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.rapport-card { background:var(--bg-base); border:1px solid rgba(0,230,118,.2); border-radius:var(--radius-lg); box-shadow:0 0 60px rgba(0,230,118,.06), 0 0 120px rgba(0,170,255,.04), 0 8px 40px rgba(0,0,0,.6); }
.rapport-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:32px 32px 24px; background:linear-gradient(135deg, rgba(0,230,118,.05) 0%, rgba(0,170,255,.03) 50%, rgba(0,0,0,0) 100%); border-bottom:1px solid rgba(0,230,118,.12); }
.rapport-titel { font-size:20px; font-weight:900; color:var(--text-primary); letter-spacing:-.02em; margin:0 0 8px; }
.rapport-meta-line { font-size:13px; color:rgba(255,255,255,.5); }
.rapport-score-bubble { flex-shrink:0; text-align:center; padding:8px 20px; background:rgba(0,230,118,.06); border:1px solid rgba(0,230,118,.35); border-radius:var(--radius-lg); box-shadow:0 0 20px rgba(0,230,118,.2), inset 0 0 20px rgba(0,230,118,.04); }
.rapport-score-num { font-size:20px; font-weight:900; line-height:1; color:var(--success); text-shadow:0 0 15px var(--success), 0 0 40px rgba(0,230,118,.38); }
.rapport-score-denom { font-size:13px; color:rgba(255,255,255,.4); margin-top:2px; }
.rapport-context-strip { display:flex; flex-wrap:wrap; gap:8px; padding:12px 32px; background:rgba(0,0,0,.3); border-bottom:1px solid rgba(255,255,255,.06); }
.ctx-item { display:flex; align-items:center; gap:4px; font-size:12px; color:rgba(255,255,255,.55); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:4px 12px; }
.rapport-visual-row { display:grid; grid-template-columns:300px 1fr; gap:32px; padding:28px 32px; align-items:center; border-bottom:1px solid rgba(255,255,255,.06); }
.rapport-radar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.rapport-radar-wrap > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  font-size: 11px;
}
.cat-bar-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.cat-bar-label { font-size:13px; color:rgba(255,255,255,.55); width:130px; flex-shrink:0; }
.cat-bar-track { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:4px; position:relative; overflow:visible; }
.cat-bar-fill { height:100%; border-radius:4px; transition:width .7s cubic-bezier(.4,0,.2,1); }
.cat-bar-target { position:absolute; top:-5px; width:2px; height:18px; background:rgba(255,255,255,.5); border-radius:2px; box-shadow:0 0 6px rgba(255,255,255,.3); }
.cat-bar-score { font-size:16px; font-weight:800; width:34px; text-align:right; }
.cat-target-status { font-size:13px; font-weight:700; width:18px; text-align:center; }
.rapport-section { padding:24px 32px; border-bottom:1px solid rgba(255,255,255,.05); overflow:visible; }
.rapport-section-header { display:flex; align-items:center; justify-content:space-between; padding-left:12px; margin-bottom:20px; }
.rapport-section-title { font-size:16px; font-weight:700; color:var(--text-primary); margin-left:8px; }
.rapport-section-score { font-size:16px; font-weight:900; }
.rapport-section-body { display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:start; }
.cat-mini-radar-wrap { display:flex; flex-direction:column; align-items:center; position:relative; }
.cat-mini-radar { display:block; }
.cat-mini-score-labels { display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:4px; }
.cat-mini-score-labels span { font-size:11px; font-weight:700; }
.rapport-params { display:flex; flex-direction:column; gap:12px; }
.rapport-param { }
.param-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.param-label { font-size:13px; color:rgba(255,255,255,.65); }
.param-score { font-size:16px; font-weight:800; }
.param-bar-track { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin-bottom:4px; overflow:hidden; }
.param-bar-fill { height:100%; border-radius:3px; transition:width .6s ease; }
.param-tekst { font-size:13px; color:rgba(255,255,255,.4); margin:0; line-height:1.4; }
.param-notitie { font-size:12px; color:rgba(255,255,255,.5); background:rgba(255,179,0,.06); border-left:2px solid var(--warning); padding:4px 8px; border-radius:0 4px 4px 0; margin-top:4px; }
.rapport-analyse-section { background:rgba(0,170,255,.03); }
.analyse-tekst { font-size:13px; color:rgba(255,255,255,.65); line-height:1.75; margin:0; overflow:visible; word-break:break-word; white-space:pre-wrap; }
.rapport-footer { padding:24px 32px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.3); display:flex; flex-direction:column; gap:16px; }
.rapport-hash span { font-size:11px; color:rgba(255,255,255,.3); display:block; margin-bottom:4px; }
.rapport-hash code { font-size:11px; color:rgba(255,255,255,.25); background:rgba(255,255,255,.04); padding:4px 8px; border-radius:4px; display:block; word-break:break-all; }
.rapport-hash p { font-size:11px; color:rgba(255,255,255,.2); margin:4px 0 0; }
.rapport-disclaimer { padding:12px 16px; background:rgba(255,61,87,.05); border:1px solid rgba(255,61,87,.2); border-radius:var(--radius); }
.rapport-disclaimer strong { color:var(--red); display:block; margin-bottom:8px; font-size:13px; }
.rapport-disclaimer p { font-size:12px; color:rgba(255,255,255,.4); line-height:1.5; margin:0; }
@media (max-width:768px) {
  .rapport-visual-row { grid-template-columns:1fr; }
  .rapport-section-body { grid-template-columns:1fr; }
  .cat-mini-radar-wrap { display:none; }
  .rapport-heading { padding:20px; flex-direction:column; }
  .rapport-section { padding:16px 20px; }
  .rapport-context-strip { padding:12px 20px; }
}
@media print {
  @page { margin:15mm 10mm; }
  .no-print, .sidebar, .mobile-header, .bottom-nav, .sidebar-overlay,
  .va-wizard-step, .va-tabs, .va-dropzone, .va-selectie-row,
  .va-stap, .va-keuze-btns, .va-video-tab,
  button, select, input, .sidebar-branding,
  [class*="nav"], .bottom-nav { display:none !important; }
  .rapport-wrap { padding:0; }
  body { background:#0f172a !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .page { margin:0 !important; padding:0 !important; }
  #main { margin-left:0 !important; padding:0 !important; }
  #scout4all-rapport { padding:0 !important; }
  .rapport-card, [class*="rapport"], [style*="page-break-inside"] { break-inside:avoid !important; page-break-inside:avoid !important; }
}

/* ── Sidebar shortcuts hint ─────────────────────────────────────── */
.sidebar-shortcuts-hint { padding:8px 12px; font-size:10px; color:var(--text-muted); border-top:1px solid var(--border-subtle); opacity:0.5; }
.sidebar.collapsed .sidebar-shortcuts-hint { display:none; }
/* ================================================================
   DASHBOARD REDESIGN
   ================================================================ */
.dash-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.dash-greeting h1 { font-size:16px; font-weight:600; color:var(--text-primary); margin:0; line-height:1.25; }
.dash-greeting span { font-size:13px; color:var(--text-secondary); margin-top:2px; display:block; }
.dash-user-pic { width:34px; height:34px; border-radius:50%; border:2px solid var(--border); object-fit:cover; cursor:pointer; transition:border-color .15s; display:flex; align-items:center; justify-content:center; background:rgba(45,142,255,.2); font-weight:700; color:var(--blue); font-size:13px; }
.dash-user-pic:hover { border-color:var(--blue); }
.tier-badge { display:inline-block; font-size:10px; padding:2px 8px; border-radius:4px; background:rgba(45,142,255,.15); color:var(--blue); font-weight:600; letter-spacing:.3px; margin-left:4px; vertical-align:middle; }
.dash-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
@media (max-width:768px) { .dash-kpis { grid-template-columns:repeat(2,1fr); } }
.dash-kpi { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; cursor:pointer; transition:border-color .15s; }
.dash-kpi:hover { border-color:var(--blue); }
.dash-kpi-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; font-weight:500; }
.dash-kpi-val { font-size:20px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.dash-kpi-change { font-size:11px; margin-top:4px; }
.dash-kpi-up { color:var(--success); }
.dash-kpi-down { color:var(--red); }

/* ── Dashboard Sessie 9: body columns + bar chart ── */
.dash-quick-row { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:16px; }
@media (max-width:1024px) { .dash-quick-row { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px) { .dash-quick-row { grid-template-columns:repeat(2,1fr); } }
.dash-body { display:grid; grid-template-columns:3fr 2fr; gap:14px; align-items:start; }
@media (max-width:768px) { .dash-body { grid-template-columns:1fr; } }
.dash-body-left { display:flex; flex-direction:column; gap:12px; }
.dash-body-right { display:flex; flex-direction:column; gap:12px; }
.dash-body-right .dash-card { min-height:180px; flex:1; }

/* bar chart */
.dash-bar-chart { display:flex; align-items:flex-end; gap:4px; height:80px; margin-bottom:4px; }
.dash-bar-col { display:flex; flex-direction:column; align-items:center; flex:1; }
.dash-bar-val { font-size:10px; color:var(--text-muted); margin-bottom:2px; height:14px; }
.dash-bar { width:100%; border-radius:4px 4px 0 0; background:var(--accent); transition:height .3s ease; min-height:4px; }
.dash-bar-labels { display:flex; justify-content:space-around; font-size:11px; color:var(--text-muted); margin-top:4px; }
.dash-bar-labels span { flex:1; text-align:center; }

/* top player rank */
.dash-player-rank { font-size:13px; font-weight:700; color:var(--text-muted); width:20px; text-align:center; flex-shrink:0; }
.dash-player-info { flex:1; min-width:0; }
.dash-player-name { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-player-meta { font-size:11px; color:var(--text-muted); }
.dash-player-score-badge { font-size:13px; font-weight:700; padding:2px 8px; border-radius:20px; flex-shrink:0; }

/* activity dots */
.dash-act-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.dash-act-dot.green { background:var(--green,#22c55e); }
.dash-act-dot.blue { background:var(--blue,#60a5fa); }
.dash-act-dot.orange { background:var(--orange,#f59e0b); }

/* user pic: right in topbar */
.dash-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.dash-greeting { flex:1; }
.dash-user-pic { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--border); }
.dash-user-initials { display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; background:var(--accent); color:#fff; }

/* KPI changes */
.dash-kpi-change { font-size:11px; color:var(--text-muted); margin-top:2px; }
.dash-kpi-change.dash-kpi-up { color:var(--green,#22c55e); }
.dash-kpi-change.dash-kpi-down { color:var(--red,#ef4444); }
}
.dash-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:14px; }
.dash-card-title { font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.dash-card-title::before { content:''; width:3px; height:14px; border-radius:2px; background:var(--blue); }
.dash-activity-item { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-subtle); animation:dashFadeIn 200ms ease both; }
.dash-activity-item:last-child { border-bottom:none; }
.dash-act-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.dash-act-dot.green { background:var(--success); }
.dash-act-dot.blue { background:var(--blue); }
.dash-act-dot.orange { background:var(--orange); }
.dash-act-dot.amber { background:var(--warning); }
.dash-act-text { font-size:12px; color:var(--text-secondary); line-height:1.5; }
.dash-act-text strong { color:var(--text-primary); font-weight:500; }
.dash-act-time { font-size:10px; color:var(--text-muted); margin-top:2px; }
.dash-player-row { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--border-subtle); cursor:pointer; transition:background .1s; border-radius:6px; margin:0 -4px; animation:dashFadeIn 200ms ease both; }
.dash-player-row:hover { background:var(--bg-hover); }
.dash-player-row:last-child { border-bottom:none; }
.dash-player-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; flex-shrink:0; }
.dash-player-avatar.gk { background:rgba(0,230,118,.15); color:var(--success); border:1px solid rgba(0,230,118,.25); }
.dash-player-avatar.df { background:rgba(45,142,255,.15); color:var(--blue); border:1px solid rgba(45,142,255,.25); }
.dash-player-avatar.mf { background:rgba(255,179,0,.15); color:var(--warning); border:1px solid rgba(255,179,0,.25); }
.dash-player-avatar.fw { background:rgba(255,107,26,.15); color:var(--orange); border:1px solid rgba(255,107,26,.25); }
.dash-player-info { flex:1; min-width:0; }
.dash-player-name { font-size:12px; font-weight:500; color:var(--text-primary); }
.dash-player-pos { font-size:10px; color:var(--text-muted); }
.dash-player-score { font-size:13px; font-weight:600; min-width:32px; text-align:right; padding:3px 8px; border-radius:6px; font-variant-numeric:tabular-nums; }
.dash-player-score.high { color:var(--success); background:rgba(0,230,118,.1); }
.dash-player-score.mid { color:var(--warning); background:rgba(255,179,0,.1); }
.dash-player-score.low { color:var(--red); background:rgba(255,61,87,.1); }
.dash-quick-btn { display:block; width:100%; padding:10px 12px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-elevated); cursor:pointer; text-align:left; font-size:12px; color:var(--text-primary); margin-bottom:8px; transition:border-color .15s, background .15s; font-family:inherit; font-weight:500; }
.dash-quick-btn:hover { border-color:var(--blue); background:rgba(45,142,255,.08); }
.dash-quick-btn span { display:block; font-size:10px; color:var(--text-muted); margin-top:2px; }
.dash-bar-chart { display:flex; align-items:flex-end; gap:4px; height:60px; margin-top:8px; }
.dash-bar { flex:1; border-radius:4px 4px 2px 2px; transition:height .3s; }
.dash-bar-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--text-muted); margin-top:4px; }

/* ================================================================
   SESSIE 2 ADDITIONS — foundation completion
   ================================================================ */

/* ── Skeleton loading ───────────────────────────────────────────── */
@keyframes s4a-pulse { 0%, 100% { opacity:.4; } 50% { opacity:.8; } }
.skeleton { background:var(--bg-elevated); border-radius:var(--radius); animation:s4a-pulse 1.5s ease-in-out infinite; }
.skeleton-text { height:12px; margin-bottom:8px; }
.skeleton-text.lg { height:20px; width:60%; }
.skeleton-text.sm { height:10px; width:40%; }
.skeleton-circle { border-radius:50%; }
.skeleton-kpi { height:80px; border-radius:var(--radius-lg); }

/* ── Focus-visible ──────────────────────────────────────────────── */
:focus { outline:none; }
:focus-visible { outline:none; box-shadow:0 0 0 2px var(--bg-base), 0 0 0 4px var(--blue); border-radius:var(--radius); }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ── Dashboard entry animations ─────────────────────────────────── */
@keyframes dashFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Bottom navigation (mobile) ─────────────────────────────────── */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:52px; padding-bottom:env(safe-area-inset-bottom); background:var(--bg-surface); border-top:1px solid var(--border); z-index:100; align-items:center; justify-content:space-around; }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 12px; color:var(--text-muted); font-size:10px; font-weight:500; text-decoration:none; transition:color 150ms; -webkit-tap-highlight-color:transparent; }
.bottom-nav-item.active { color:var(--blue); }
.bottom-nav-item svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bottom-nav-fab { width:40px; height:40px; border-radius:var(--radius); background:var(--blue); color:var(--text-primary); display:flex; align-items:center; justify-content:center; margin-top:-8px; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(45,142,255,.3); transition:transform 150ms, box-shadow 150ms; }
.bottom-nav-fab:active { transform:scale(0.95); }
.bottom-nav-fab:focus-visible { box-shadow:0 0 0 2px var(--bg-base), 0 0 0 4px var(--blue); }
.bottom-nav-fab svg { width:18px; height:18px; stroke:white; fill:none; stroke-width:2; }

/* ── Responsive breakpoints ──────────────────────────────────────── */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.mobile-open { transform:translateX(0); display:flex !important; }
  #main { margin-left:0; }
  .mobile-header { display:flex !important; }
}
@media (min-width:768px) and (max-width:1279px) {
  .sidebar { width:56px; }
  .sidebar .sidebar-label,
  .sidebar .sidebar-section-label,
  .sidebar .sidebar-branding .sidebar-brand-link,
  .sidebar .sidebar-branding .sidebar-brand-text { display:none; }
  .sidebar .sidebar-logo-text { display:none; }
  .sidebar .sidebar-nav .sidebar-item { justify-content:center; padding:0; }
  #main { margin-left:56px; }
}


/* ── Spelers Page ──────────────────────────────────────────────── */
.page-title { font-size:16px; font-weight:600; color:var(--text-primary); margin:0; }
.spelers-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.spelers-actions { display:flex; align-items:center; gap:8px; }

.search-input-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke:var(--text-muted); fill:none; stroke-width:1.5; pointer-events:none; }
.search-input-wrap input.form-control { padding-left:32px; width:200px; }

.spelers-filters { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.filter-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:500; cursor:pointer; background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border); transition:all 150ms; }
.filter-chip:hover { border-color:var(--blue); color:var(--text-primary); }
.filter-chip.active { background:rgba(45,142,255,.12); border-color:var(--blue); color:var(--blue); }
.filter-chip .chip-x { font-size:10px; margin-left:2px; opacity:0.5; cursor:pointer; }
.filter-chip .chip-x:hover { opacity:1; }

.spelers-table { width:100%; border-collapse:separate; border-spacing:0; }
.spelers-table th { text-align:left; padding:8px 12px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap; user-select:none; }
.spelers-table th.sortable { cursor:pointer; }
.spelers-table th.sortable:hover { color:var(--text-primary); }
.spelers-table th .sort-arrow { font-size:10px; opacity:0.3; margin-left:2px; }
.spelers-table th.sorted .sort-arrow { opacity:1; color:var(--blue); }
.spelers-table td { padding:8px 12px; font-size:12px; color:var(--text-secondary); border-bottom:1px solid var(--border-subtle); vertical-align:middle; }
.spelers-table tr { transition:background 100ms; }
.spelers-table tbody tr:hover { background:var(--bg-hover); cursor:pointer; }
.spelers-table tbody tr:last-child td { border-bottom:none; }

.speler-naam-cell { display:flex; align-items:center; gap:8px; }
.speler-naam-cell .dash-player-avatar { width:24px; height:24px; flex-shrink:0; font-size:10px; }
.speler-naam-cell .naam { font-size:12px; font-weight:500; color:var(--text-primary); }

.pos-badge { display:inline-block; padding:2px 8px; border-radius:var(--radius-full); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.pos-badge.gk { background:rgba(0,230,118,.12); color:var(--success); }
.pos-badge.df { background:rgba(45,142,255,.12); color:var(--blue); }
.pos-badge.mf { background:rgba(255,179,0,.12); color:var(--warning); }
.pos-badge.fw { background:rgba(255,107,26,.12); color:var(--orange); }

/* ── Button ripple effect ──────────────────────────────────────── */
.btn::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,0.08) 0%, transparent 60%); opacity:0; transition:opacity 200ms; pointer-events:none; }
.btn:active::after { opacity:1; }

@media (max-width:767px) {
  .spelers-header { flex-direction:column; align-items:stretch; gap:8px; }
  .spelers-actions { flex-direction:column; }
  .search-input-wrap input.form-control { width:100%; }
  .spelers-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .spelers-table th, .spelers-table td { white-space:nowrap; }
}

@media (min-width:1280px) {
  .sidebar { width:240px; }
  #main { margin-left:240px; }
}

/* ── Score buttons (evaluatie formulier) ──────────────────────── */
.score-btn {
  width: 32px; height: 32px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 150ms; display:flex; align-items:center; justify-content:center;
}
.score-btn:hover { border-color: var(--blue); color: var(--text-primary); }
.score-btn.selected { background: var(--blue); color:var(--text-primary); border-color: var(--blue); }
.score-btn.high { background: rgba(0,230,118,.15); color: var(--success); border-color: rgba(0,230,118,.3); }
.score-btn.mid { background: rgba(255,179,0,.15); color: var(--warning); border-color: rgba(255,179,0,.3); }
.score-btn.low { background: rgba(255,61,87,.15); color: var(--red); border-color: rgba(255,61,87,.3); }
.score-btn-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

/* ── Eval progress indicator ──────────────────────────────────── */
.eval-progress { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; }
.eval-progress-step {
  flex: 1; height: 3px; border-radius: 2px; background: var(--bg-elevated);
  transition: background 300ms;
}
.eval-progress-step.done { background: var(--blue); }
.eval-progress-step.active { background: var(--blue-bright); }

/* ── Eval form layout ─────────────────────────────────────────── */
.eval-form-section { border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; margin-bottom: 16px; }
.eval-form-section:last-child { border-bottom: none; }
.eval-form-section .form-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 4px; }
.eval-form-section .form-control { height: 34px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; }

/* ── Evaluaties overzicht tabel ───────────────────────────────── */
.evaluaties-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.evaluaties-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.evaluaties-table th {
  text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; cursor: pointer;
}
.evaluaties-table th:hover { color: var(--text-primary); }
.evaluaties-table th .sort-arrow { font-size: 10px; opacity: 0.3; margin-left: 2px; }
.evaluaties-table th.sorted .sort-arrow { opacity: 1; color: var(--blue); }
.evaluaties-table td { padding: 8px 12px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.evaluaties-table tr { transition: background 100ms; }
.evaluaties-table tbody tr:hover { background: var(--bg-hover); cursor: pointer; }
.evaluaties-table tbody tr:last-child td { border-bottom: none; }
.score-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 20px; border-radius: var(--radius); font-size: 11px; font-weight: 700; padding: 0 6px; }
.score-badge.high { background: rgba(0,230,118,.15); color: var(--success); border: 1px solid rgba(0,230,118,.3); }
.score-badge.mid { background: rgba(255,179,0,.15); color: var(--warning); border: 1px solid rgba(255,179,0,.3); }
.score-badge.low { background: rgba(255,61,87,.15); color: var(--red); border: 1px solid rgba(255,61,87,.3); }

/* ── Bottom-nav: hide on login page ──────────────────────────── */
body.logged-out .bottom-nav { display: none !important; }

/* ── Instellingen page ────────────────────────────────────────── */
.instellingen-section { border-bottom: 1px solid var(--border-subtle); padding-bottom: 20px; margin-bottom: 20px; }
.instellingen-section:last-child { border-bottom: none; }
.instellingen-section h3 { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.instellingen-section .form-control { height: 34px; background: var(--bg-elevated); border-radius: 8px; }

/* ── Rapporten page ───────────────────────────────────────────── */
.rapporten-table-wrap { overflow-x: auto; }
.rapporten-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.rapporten-table th {
  text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer;
}
.rapporten-table th:hover { color: var(--text-primary); }
.rapporten-table td { padding: 8px 12px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.rapporten-table tbody tr:hover { background: var(--bg-hover); cursor: pointer; }
.rapporten-table tbody tr:last-child td { border-bottom: none; }

/* ── Teams page consistency ───────────────────────────────────── */
.teams-grid { display: flex; flex-direction: column; gap: 8px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 150ms; }
.team-row:hover { border-color: var(--blue); background: var(--bg-elevated); }
.team-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.team-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Pricing card normalization ───────────────────────────────── */
.pricing-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

@media (max-width:767px) {
  .bottom-nav { display:flex; }
  .sidebar, .sidebar-overlay { display:none !important; }
  .mobile-header { display:flex !important; }
  #main { padding-bottom:calc(52px + env(safe-area-inset-bottom) + 8px); }
}

/* ── Mobile quick actions 2×2 grid ─────────────────────────────── */
@media (max-width:767px) {
  .dash-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .dash-quick-btn { text-align:center; padding:12px 8px; min-height:48px; }
  #main { padding:12px; }
}

/* ── Tablet sidebar overlay with backdrop blur ──────────────────── */
@media (min-width:768px) and (max-width:1023px) {
  .sidebar { position:fixed; transform:translateX(-100%); z-index:200; width:280px; transition:transform 250ms ease; }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-overlay { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  #main { margin-left:0; padding:16px; }
  /* fix(css): show mobile-header + bottom-nav at 768-1023px — fix navigation dead zone */
  .mobile-header { display:flex !important; }
  .bottom-nav { display:flex !important; }
  #main { padding-bottom:calc(52px + env(safe-area-inset-bottom) + 8px); }
}


/* ── Handleiding / User Guide styles (v2.8.0) ──────────────────── */
.guide-sections { display: flex; flex-direction: column; gap: 16px; }
.guide-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}
.guide-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.guide-list {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.guide-list li {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.guide-list li strong { color: var(--text-primary); font-weight: 500; }
.guide-list kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-primary);
}

/* ── Dashboard help link ─────────────────────────────────────────── */
.dash-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 0;
  transition: color 150ms;
}
.dash-help-link:hover { color: var(--blue); }

/* ── star-btn inherits score-btn color classes ──────────────────── */
.star-btn.high.high { background: rgba(0,230,118,.2); color: var(--success); border-color: rgba(0,230,118,.4); }
.star-btn.mid.mid   { background: rgba(255,179,0,.2); color: var(--warning); border-color: rgba(255,179,0,.4); }
.star-btn.low.low   { background: rgba(255,61,87,.2); color: var(--red); border-color: rgba(255,61,87,.4); }


/* ── Zero-tolerance font-size fixes (Sessie 8 / v2.9.0) ─────────── */
/* H3 without explicit font-size → browser default ~15.2px; enforce 16px */
.card-body h3 { font-size:16px; font-weight:700; }
.empty-state h3 { font-size:16px; font-weight:600; color:var(--text-primary); }

/* Video-analyse button/label font-sizes */
.va-video-tab { font-size:13px; }
.va-lineup-manual, .va-lineup-photo { font-size:13px; }
.va-lineup-section label { font-size:13px; }

/* ================================================================
   SESSIE 11 — Mobile UX + PWA + Dashboard Achtergrond
   ================================================================ */

/* ── TAAK 1: Rapport Mobile Responsive ──────────────────────────── */
@media (max-width: 767px) {
  .rapport-wrap {
    padding: 12px 8px 80px;
  }

  /* Radardiagram: kolommen → vertikaal */
  .rapport-visual-row,
  .rapport-radar-wrap,
  [class*="radar"] {
    flex-direction: column;
    align-items: center;
  }

  /* Grid override: rapport-visual-row is grid */
  .rapport-visual-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  /* SVG schaalt mee */
  .rapport-radar-wrap svg,
  .rapport-visual-row svg {
    max-width: 260px;
    height: auto;
  }

  /* Legende onder het diagram, niet ernaast */
  .rapport-radar-legend,
  .rapport-visual-row .rapport-scores,
  [class*="legend"] {
    width: 100%;
    margin-top: 12px;
  }

  /* Score-secties full-width */
  .rapport-section {
    padding: 12px 16px;
  }

  .rapport-section-body {
    grid-template-columns: 1fr;
  }

  /* Score-bars max-width */
  .rapport-score-bar {
    max-width: 100%;
  }

  /* Rapport header compact */
  .rapport-heading {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .rapport-score-bubble {
    align-self: flex-end;
  }

  /* Context strip compacter */
  .rapport-context-strip {
    padding: 8px 16px;
  }

  /* Export knoppen: wrap */
  .rapport-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  .rapport-actions .btn {
    font-size: 11px;
    padding: 0 8px;
    height: 28px;
  }

  /* Radardiagram category bars */
  .cat-bar-row {
    gap: 8px;
  }

  .cat-bar-label {
    width: 100px;
    font-size: 12px;
  }

  .cat-bar-score {
    font-size: 13px;
    width: 28px;
  }

  /* Rapport params */
  .rapport-params {
    gap: 8px;
  }

  .param-label {
    font-size: 12px;
  }

  .param-score {
    font-size: 13px;
  }

  /* Rapport footer compact */
  .rapport-footer {
    padding: 16px;
    gap: 12px;
  }

  /* Section header */
  .rapport-section-header {
    padding-left: 8px;
    margin-bottom: 12px;
  }

  .rapport-section-title {
    font-size: 13px;
  }

  /* Header bar */
  .rapport-header-bar {
    gap: 8px;
  }
}

/* ── TAAK 2: Evaluatie Mobile Responsive ────────────────────────── */
@media (max-width: 767px) {
  /* Score knoppen: 5 per rij in plaats van 10 */
  .score-btn-row,
  .star-row,
  [class*="score-row"],
  [class*="star-row"] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    flex-wrap: nowrap;
  }

  .score-stars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }

  .score-btn,
  .star-btn {
    width: 100%;
    min-width: 0;
    height: 36px;
    font-size: 12px;
  }

  /* Evaluatie formulier compact */
  .eval-section,
  .category-section,
  .eval-form-section {
    padding: 12px 8px;
  }

  .cat-body {
    padding: 4px 8px 12px;
  }

  /* Notitie-veld full-width */
  .eval-note,
  textarea.form-control {
    width: 100%;
    min-height: 60px;
  }

  /* Score row compact */
  .score-row {
    padding: 6px 0;
  }

  .score-row-top {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .score-label {
    font-size: 12px;
  }

  /* Category header compact */
  .cat-header {
    padding: 10px 12px;
  }

  .cat-title {
    font-size: 13px;
  }

  /* Submit knop sticky onderaan */
  .eval-submit-bar,
  .eval-footer {
    position: sticky;
    bottom: calc(52px + env(safe-area-inset-bottom));
    background: var(--bg-base);
    padding: 8px;
    z-index: 50;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }

  /* Eval progress compact */
  .eval-progress {
    margin-bottom: 12px;
  }
}

/* ── TAAK 4: Bottom-Nav Padding Fix — alle pagina's ─────────────── */
@media (max-width: 767px) {
  #main {
    padding-bottom: calc(52px + env(safe-area-inset-bottom) + 24px);
  }

  .page.active {
    padding-bottom: 16px;
  }

  /* Evaluatie submit-bar boven de bottom-nav */
  .eval-submit-bar,
  .eval-footer,
  [class*="submit-bar"],
  [class*="footer-actions"] {
    margin-bottom: calc(52px + env(safe-area-inset-bottom) + 8px);
  }
}

/* ── TAAK 5: Dashboard Logo Achtergrond (Desktop Only) ──────────── */
@media (min-width: 1280px) {
  #page-dashboard {
    position: relative;
  }

  #page-dashboard::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    height: 550px;
    background-image: url('https://voetbal4all.vercel.app/assets/img/scout4all-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
  }

  #page-dashboard > * {
    position: relative;
    z-index: 1;
  }
}

/* ── TAAK 2 addendum: Evaluatie scroll-fix & submit zichtbaarheid ── */
@media (max-width: 767px) {
  /* Zorg dat evaluatie pagina volledig scrollbaar is */
  #page-evaluatie {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Score-knoppen extra hover area voor touch */
  .score-btn:active,
  .star-btn:active {
    transform: scale(0.96);
  }

  /* Param notitie compact */
  .param-notitie {
    font-size: 11px;
    padding: 3px 6px;
  }

  /* Eval data table mobiel scrollbaar */
  .evaluaties-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Eval item compact */
  .eval-item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
  }

  .eval-datum {
    min-width: unset;
    font-size: 12px;
  }
}

/* ── TAAK 4 addendum: Per-pagina bottom padding verfijning ─────── */

/* ── Dashboard Mockup Alignment (Sessie 20) ──────────────────── */
.dash-kpi { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.dash-kpi:hover { border-color:var(--blue); box-shadow:0 0 0 2px rgba(45,142,255,.1); }
.dash-kpi-label { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.dash-kpi-val { font-size:22px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; line-height:1; }
.dash-kpi-change { font-size:11px; margin-top:6px; }
.dash-kpi-change.dash-kpi-up { color:var(--green,#22c55e); font-weight:600; }
.dash-quick-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; min-height:72px; padding:12px 10px; border-radius:var(--radius-lg); border:1px solid var(--border); border-left:3px solid var(--blue); background:var(--bg-elevated); cursor:pointer; text-align:center; font-size:13px; font-weight:600; color:var(--text-primary); transition:border-color .15s,background .15s,transform .15s; font-family:inherit; }
.dash-quick-btn:hover { border-color:var(--blue); background:rgba(45,142,255,.08); transform:translateY(-2px); }
.dash-quick-btn span { font-size:11px; color:var(--text-muted); display:block; font-weight:400; }
.dash-bar-chart { display:flex; align-items:flex-end; gap:6px; height:180px; margin-bottom:4px; }
.dash-bar { width:100%; border-radius:4px 4px 0 0; background:var(--blue); transition:height .3s; min-height:2px; }
.dash-bar-labels { display:flex; justify-content:space-around; font-size:11px; color:var(--text-muted); margin-top:4px; font-weight:500; }
.dash-act-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.dash-act-time { font-size:11px; color:var(--text-muted); margin-top:1px; }
.dash-activity-item { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-subtle); }
.dash-activity-item:last-child { border-bottom:none; }

@media (max-width: 767px) {
  /* Dashboard pagina */
  #page-dashboard {
    padding-bottom: 16px;
  }

  /* Spelers pagina */
  #page-spelers {
    padding-bottom: 16px;
  }

  /* Rapport pagina: extra ruimte want acties-balk onderaan */
  #page-rapport {
    padding-bottom: 16px;
  }

  /* Handleiding pagina */
  #page-handleiding {
    padding-bottom: 16px;
  }

  /* Instellingen pagina */
  #page-instellingen {
    padding-bottom: 16px;
  }

  /* Bottom-nav safe-area aware height */
  .bottom-nav {
    height: calc(52px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}


/* ── Responsieve tabelkolommen voor niet-NL talen (Bug C fix) ─────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.table-fixed {
  table-layout: fixed;
  width: 100%;
}

table.table-fixed th,
table.table-fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

@media (max-width: 768px) {
  .table-responsive table {
    table-layout: auto;
  }
  .table-responsive th,
  .table-responsive td {
    white-space: normal;
    word-break: break-word;
  }
}

/* ── Sessie 23: Benchmark badges ── */
.bench-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 500; margin-left: 6px; display: inline-block; }
.bench-above { background: rgba(29,158,117,0.12); color: #0F6E56; }
.bench-below { background: rgba(226,75,74,0.12); color: #A32D2D; }

/* ── Sessie 23: Responsive evaluaties table ── */
@media (max-width: 1024px) {
  .pos-badge { font-size: 9px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 767px) {
  .evaluaties-table th:nth-child(n+5), .evaluaties-table td:nth-child(n+5) { display: none; }
}

/* ── Sessie 23: Eval mode toggle ── */
.eval-mode-toggle { display: flex; gap: 8px; margin-bottom: 16px; }

/* ── Sessie 23: Empty states ── */
.empty-state { text-align: center; padding: 60px 24px; color: var(--text-muted); }
.empty-state svg { margin: 0 auto 16px; display: block; opacity: 0.4; }
.empty-state h3 { font-size: 18px; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state p { font-size: 14px; margin-bottom: 20px; }

/* ================================================================
   Sessie 31 — Login logo naadloze overgang in achtergrond
   Radial mask + glow voor seamless blend
   ================================================================ */

/* Login logo — naadloze overgang in achtergrond */
.login-card {
  overflow: visible;
}

.login-logo {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: -30px 0 -10px;
}

.login-logo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(45, 142, 255, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.login-logo img {
  position: relative;
  z-index: 1;
  width: 280px;
  height: auto;
  mask-image: radial-gradient(ellipse 60% 60% at center, black 35%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, black 35%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD
   ═══════════════════════════════════════════════════════════════════ */
.adm-wrap { max-width:1200px; margin:0 auto; padding:20px 16px; }
.adm-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.adm-title { font-size:22px; font-weight:800; letter-spacing:.5px; margin:0; }
.adm-subtitle { font-size:12px; color:var(--text-muted); }
.adm-tabs { display:flex; gap:4px; margin-bottom:20px; overflow-x:auto; padding-bottom:4px; }
.adm-tab { padding:8px 16px; border-radius:var(--radius); border:1px solid var(--border-subtle); background:transparent; color:var(--text-secondary); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s; }
.adm-tab:hover { background:var(--bg-hover); color:var(--text-primary); }
.adm-tab.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.adm-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.adm-kpi { background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:16px; text-align:center; }
.adm-kpi-val { font-size:24px; font-weight:700; }
.adm-kpi-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }
.adm-card { background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:16px; }
.adm-card-title { font-size:13px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.adm-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.adm-table-info { font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.adm-table-wrap { overflow-x:auto; border:1px solid var(--border-subtle); border-radius:var(--radius); }
.adm-table { width:100%; border-collapse:collapse; font-size:12px; }
.adm-table th { background:var(--bg-elevated); padding:8px 10px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap; }
.adm-table td { padding:8px 10px; border-bottom:1px solid var(--border-subtle); vertical-align:middle; color:var(--text-secondary); }
.adm-table tr:hover td { background:var(--bg-hover); }
.adm-table .adm-mono { font-family:monospace; font-size:11px; color:var(--text-muted); }
.adm-actions { display:flex; gap:4px; }
.adm-error { padding:16px; color:var(--red); background:rgba(255,61,87,.08); border-radius:var(--radius); font-size:13px; }
.adm-bar-wrap { width:60px; height:6px; background:var(--bg-base); border-radius:3px; display:inline-block; vertical-align:middle; margin-right:4px; }
.adm-bar { height:100%; border-radius:3px; transition:width .3s; }
@media (max-width:768px) {
  .adm-kpi-grid { grid-template-columns:repeat(2, 1fr); }
  .adm-wrap { padding:12px 8px; }
}