/* =============================================================================
   Trainingsmodule — weekoverzicht-raster (FCE-zomertraining-look, 1:1)
   Bouwt voort op het portal-designsysteem (portal.css / design-system.css
   leveren dezelfde tokens: --ink/--blue/--white/--line/--gold + de Bebas Neue /
   JetBrains Mono / Inter fonts). De raster-klassen hieronder zijn overgenomen
   uit de Zomertraining-app (app.css) zodat het weekoverzicht er identiek uitziet.
   De basis van het raster (.raster-*, .rc, .slot-badge, legenda, paginakop) staat
   in portal.css, gedeeld met de Veldplanning; hier alleen wat training-eigen is.
   ============================================================================= */

.week-nav strong { font-size: 1.05rem; }

/* ---- Dag-chips (spring-naar-dag) ---- */
.day-filter { display:flex; gap:8px; flex-wrap:wrap; }
.day-chip { display:inline-block; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:inherit; font-size:13px; line-height:1.2; font-weight:600; text-decoration:none; cursor:pointer; -webkit-appearance:none; appearance:none; transition:all .15s; }
.day-chip:hover { border-color:var(--blue,#2f7ed8); }
.day-chip.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---- Raster (training-eigen aanvullingen) ---- */
/* Tijdsblok-kolomkop (horizontaal): mono, twee regels start/eind. */
.rc-blockhead { flex-direction:column; gap:1px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.02em; text-transform:none; font-weight:600; }
.rc-slot { justify-content:center; }
/* Geboekte cel: laat de pill de volledige (eventueel gespannen) celhoogte vullen. */
.rc-booked { background:rgba(47,126,216,.04) !important; align-items:stretch; padding:5px; }
.slot-badge.is-uitzondering { background:var(--cool-steel); color:var(--ink); box-shadow:0 0 0 2px var(--blue-deep); }
.slot-badge.is-uitzondering .sbn { color:var(--ink); }
/* Kleedkamer: grijs en tussen haakjes, in dezelfde regel als de teamnaam. Licht grijs,
   want de pill heeft een gekleurde achtergrond — mid-grijs zou onleesbaar zijn. */
.slot-badge .sbk { color:#ccd6e4; font-weight:500; }

/* ---- Teamcategorie: drie tinten blauw (licht = jong, donker = oud) ----
   De lichtste tint krijgt donkere tekst; wit zou daarop te weinig contrast geven. */
.slot-badge.cat-p { background:#a8cdf0; }
.slot-badge.cat-p .sbn { color:var(--ink); }
.slot-badge.cat-p .sbk { color:rgba(10,31,68,.6); }
.slot-badge.cat-j { background:#2f7ed8; }
.slot-badge.cat-s { background:#123a70; }

/* Legenda-stipjes en de chip in de beheertabel gebruiken dezelfde tinten. */
.rl-dot.cat-p { background:#a8cdf0; }
.rl-dot.cat-j { background:#2f7ed8; }
.rl-dot.cat-s { background:#123a70; }
.rl-dot-geen { background:var(--blue); }
.cat-chip {
  display:inline-block; padding:.1rem .45rem; border-radius:999px;
  font-size:.72rem; font-weight:600; white-space:nowrap;
}
.cat-chip.cat-p { background:#a8cdf0; color:var(--ink); }
.cat-chip.cat-j { background:#2f7ed8; color:#fff; }
.cat-chip.cat-s { background:#123a70; color:#fff; }
.slot-badge .sb-tag { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.slot-empty { color:var(--line); font-size:16px; line-height:1; }

/* Velddeel dat in dít rooster uitstaat: hele rij lichtrood (wel zichtbaar, niet boekbaar). */
.rc.rc-uit { background: rgba(200,40,50,.09) !important; }
.rc.rc-velddeel.rc-uit, .rc.rc-veld.rc-uit { background: rgba(200,40,50,.16) !important; color: var(--muted); }
.rc.rc-uit .slot-empty { color: rgba(200,40,50,.45); }
.rl-dot-uit { background: rgba(200,40,50,.35); }

/* ---- Beheertabellen: leesbaarder maken ---- */
.admin-table-zebra tbody tr:nth-child(even) { background: rgba(10,31,68,.025); }
.admin-table-zebra tbody tr:hover { background: rgba(47,126,216,.06); }
.admin-table th.num, .admin-table td.num { text-align: right; white-space: nowrap; }
.admin-table th.acties { text-align: right; }
.admin-table .mono-cell { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; white-space: nowrap; }
/* Actief rooster: de héle regel groen (moet de zebra-striping overrulen). */
.admin-table tbody tr.row-actief,
.admin-table-zebra tbody tr.row-actief:nth-child(even) { background: rgba(31,90,60,.14); }
.admin-table-zebra tbody tr.row-actief:hover { background: rgba(31,90,60,.22); }
.admin-table tr.row-uit > td { background: rgba(200,40,50,.07); }
.veld-indent { color: var(--line); }
.count-badge {
  display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px;
  background: var(--blue-pale); border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; vertical-align: middle;
}
.badge.warn { background: rgba(202,162,74,.22); border-color: rgba(202,162,74,.6); opacity: 1; }
.wd-badge {
  display: inline-block; min-width: 1.75em; margin-right: 2px; padding: .1rem .3rem;
  border: 1px solid var(--line); border-radius: 5px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--line);
}
.wd-badge.on { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---- Tabelfilter + paginering (tabelfilter.js) ---- */
.tbl-toolbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: .5rem 0 .75rem;
}
.tbl-pagesize { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; opacity: .8; }
.tbl-pagesize .input { width: auto; }
.tbl-count { margin-left: auto; opacity: .7; }
.input-sm { padding: .3rem .45rem; font-size: .8rem; border-radius: 8px; }
.btn.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.admin-table .filter-row th { padding: .35rem .6rem .6rem; opacity: 1; }
.admin-table .filter-row select { width: 100%; min-width: 7rem; }
.pager.tbl-pager { justify-content: flex-start; gap: 6px; padding: 12px 0 0; background: none; }
.pager.tbl-pager:empty { display: none; }

/* ---- CRUD: rij-acties + modals (native <dialog>) ---- */
.row-actions { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
/* Compacte variant: knoppen blijven op één regel zodat de tabelregels laag blijven. */
.row-actions.compact { flex-wrap: nowrap; align-items: center; gap: .3rem; }

/* Icoonknop: vierkant en klein; het label zit in title/aria-label. */
.btn.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0; line-height: 1;
  font-size: .95rem; border-radius: 8px;
}
.btn.btn-icon:hover { border-color: var(--ink); }
.btn.btn-icon-danger:hover { border-color: rgba(200,40,50,.7); background: rgba(200,40,50,.1); }

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.card-head h2, .card-head h3 { margin: 0; }

/* ---- Spoedrooster + wissel-modal ---- */
.badge.spoed { background: #b04646; color: #fff; border-color: #b04646; margin-left: .35rem; }
.wissel-gevolgen { margin: 0 0 1rem; padding-left: 1.2rem; }
.wissel-gevolgen li { margin: .25rem 0; }
.wissel-kop { margin: 1rem 0 .25rem; font-size: 1rem; }
.wissel-tabel td, .wissel-tabel th { vertical-align: top; }
.wissel-check { width: 2rem; text-align: center; }
dialog.modal .wissel-tabel label { display: inline; margin: 0; }
.wissel-tabel tr.row-uit td { color: var(--muted); }
.wissel-pagina menu { display: flex; gap: .5rem; justify-content: flex-end; padding: 0; }

/* ---- Planbord (rooster-detail): pills liggen over de achtergrondcellen ---- */
.pb-grid .rc-booked.pb-item { background:var(--paper) !important; z-index:2; }
.pb-grid .pb-item.pb-moved .slot-badge { outline:2px dashed var(--gold); outline-offset:1px; }