/* v1.15.1 — horizontale overflow-guard: geen enkel kind mag de paginabreedte
   verbreden (de interne gantt houdt z'n eigen overflow-x:auto). overflow-x:clip
   raakt verticale sticky-headers niet. */
.scts-wrapper{ margin:16px 0; max-width:100%; overflow-x:clip; }
.scts-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; min-width:0; }
/* Titel moet altijd kunnen afbreken, anders duwt een lang woord ("Trainingsschema")
   de pagina breder dan de viewport → media-query <600px pakt niet → titel blijft groot. */
.scts-title{ margin:0; overflow-wrap:anywhere; word-break:break-word; }
.scts-meta{ font-size:14px; opacity:.75; }

/* v1.8.2 — Op smal scherm (PWA) de grote pagina-titel inperken zodat hij niet
   het halve scherm vult. */
@media (max-width: 600px) {
  .scts-wrapper{ margin:8px 0; }
  .scts-title{ font-size:22px; line-height:1.15; }
}

/* Status badges in header */
.scts-status-definitief{
  display: inline-block;
  padding: 2px 8px;
  background: #d4edda;
  color: #155724;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}
.scts-status-concept{
  display: inline-block;
  padding: 2px 8px;
  background: #fff3cd;
  color: #856404;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}

/* ===========================
   Week Carousel Navigation
   =========================== */
.scts-week-carousel{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 20px;
  padding: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.06);
}

.scts-week-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  color: #64748b;
  text-decoration: none;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.scts-week-arrow:hover{
  background: #111;
  color: #fff;
  border-color: #111;
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.scts-week-arrow svg{
  width: 20px;
  height: 20px;
}

.scts-week-cards{
  display: flex;
  gap: 10px;
}

.scts-week-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 24px;
  min-width: 120px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 16px;
  text-decoration: none;
  color: #475569;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.scts-week-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  border-color: #cbd5e1;
}

.scts-week-card.is-active{
  background: linear-gradient(135deg, #111 0%, #334155 100%);
  color: #fff;
  border-color: #111;
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  z-index: 1;
}
.scts-week-card.is-active:hover{
  transform: scale(1.05) translateY(-2px);
}

.scts-week-card.is-today:not(.is-active){
  border-color: #22c55e;
}
.scts-week-card.is-today .scts-week-card-badge{
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: #22c55e;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(34,197,94,.4);
}
.scts-week-card.is-active .scts-week-card-badge{
  background: #fff;
  color: #111;
}

.scts-week-card-label{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.scts-week-card-dates{
  font-size: 13px;
  opacity: .7;
  margin-top: 2px;
}

@media (max-width: 640px){
  .scts-week-cards{ gap: 6px; }
  .scts-week-card{ padding: 10px 14px; min-width: 90px; }
  .scts-week-card-label{ font-size: 15px; }
  .scts-week-card-dates{ font-size: 11px; }
  .scts-week-arrow{ width: 36px; height: 36px; }
}

.scts-filters{
  margin:12px 0 14px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  padding:12px; border:1px solid rgba(0,0,0,.12); border-radius:14px; background:#fff;
}
.scts-filters label{ display:flex; flex-direction:column; gap:6px; font-size:13px; }
.scts-input, .scts-select{
  min-width:160px;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  background:#fff;
}
.scts-btn{
  padding:9px 14px;
  border:0;
  border-radius:12px;
  background:#111;
  color:#fff;
  cursor:pointer;
}

.scts-muted{ opacity:.7; }
.scts-chip{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
}

.scts-daytitle{ margin-top:14px; }
.scts-scroll{ overflow:auto; border:1px solid rgba(0,0,0,.10); border-radius:14px; background:#fff; }
.scts-mobile-cards{ display: none; } /* Verborgen op desktop */
.scts-weekgrid{ width:100%; border-collapse:separate; border-spacing:0; min-width:740px; }
.scts-weekgrid th, .scts-weekgrid td{ padding:10px; border-bottom:1px solid rgba(0,0,0,.08); vertical-align:top; }
.scts-weekgrid thead th{ position:sticky; top:0; background:#fff; z-index:1; border-bottom:1px solid rgba(0,0,0,.12); }
.scts-col-time{ width:90px; }
.scts-time{ font-weight:700; white-space:nowrap; }
.scts-slot{ min-height:40px; padding: 4px !important; }

/* ===========================
   Slot Grid Layout (Veld indeling)
   =========================== */

/* FULL veld - volledige breedte en dubbele hoogte */
.scts-slot-full{
  width: 100%;
  min-height: 44px;
  display: flex;
}
.scts-slot-full .scts-item{
  margin-bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.scts-slot-full .scts-item-team{
  font-size: 13px;
}
.scts-slot-full .scts-item-part{
  font-size: 11px;
}

/* Helften naast elkaar (A links, B rechts) - alleen A+B zonder kwarten */
.scts-slot-halves{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-height: 90px;
}
.scts-slot-half{
  display: flex;
  align-items: stretch;
}
.scts-slot-half .scts-item{
  margin-bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scts-slot-half .scts-item-team{
  font-size: 14px;
}
.scts-slot-half .scts-item-part{
  font-size: 11px;
}
.scts-slot-half.scts-slot-empty{
  background: rgba(0,0,0,.02);
  border-radius: 10px;
  border: 1px dashed rgba(0,0,0,.08);
}

/* ===========================
   Gecombineerde layout: helften + kwarten
   =========================== */

/* Landscape: 2 kolommen naast elkaar (A links, B rechts) */
.scts-slot-combined{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-height: 100px;
}

.scts-slot-col{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Half-tall: een volledige helft (A of B) die beide rijen beslaat */
.scts-slot-half-tall{
  flex: 1;
  display: flex;
  min-height: 90px;
}
.scts-slot-half-tall .scts-item{
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  text-align: left;
  gap: 8px;
}
.scts-slot-half-tall .scts-item-team{
  font-size: 14px;
}
.scts-slot-half-tall .scts-item-part{
  font-size: 11px;
}

/* Kwarten in een kolom */
.scts-slot-col .scts-slot-quarter{
  flex: 1;
  min-height: 44px;
  border-radius: 8px;
  background: rgba(0,0,0,.015);
  border: 1px dashed rgba(0,0,0,.06);
  display: flex;
  align-items: stretch;
}
.scts-slot-col .scts-slot-quarter .scts-item{
  margin: 0;
  width: 100%;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
}
.scts-slot-col .scts-slot-quarter:has(.scts-item){
  background: transparent;
  border: none;
}

/* Portrait: 2 rijen boven elkaar (A boven, B onder) */
.scts-slot-combined.is-portrait{
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.scts-slot-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  min-height: 44px;
}

/* Half-wide: een volledige helft (A of B) die beide kolommen beslaat */
.scts-slot-half-wide{
  grid-column: 1 / -1;
  display: flex;
}
.scts-slot-half-wide .scts-item{
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kwarten in een rij */
.scts-slot-row .scts-slot-quarter{
  min-height: 40px;
  border-radius: 8px;
  background: rgba(0,0,0,.015);
  border: 1px dashed rgba(0,0,0,.06);
  display: flex;
  align-items: stretch;
}
.scts-slot-row .scts-slot-quarter .scts-item{
  margin: 0;
  width: 100%;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
}
.scts-slot-row .scts-slot-quarter:has(.scts-item){
  background: transparent;
  border: none;
}

/* Item styling in kwarten - consistente grootte */
.scts-slot-quarter .scts-item{
  padding: 6px 8px;
}
.scts-slot-quarter .scts-item-team{
  font-size: 13px;
}
.scts-slot-quarter .scts-item-part{
  font-size: 10px;
  padding: 2px 6px;
}

/* ===========================
   Items (1x definitie)
   =========================== */
.scts-item{
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px;
  padding:6px 10px;
  margin-bottom:4px;
  background:#fff;
  display:flex;
  justify-content:space-between;
  gap:6px;
  align-items:center;
  flex-wrap: nowrap;
  min-width: 0;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.scts-item-team{
  font-weight:700;
  font-size: 13px;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
/* v1.16.0 — start–eindtijd op het item/tegel */
.scts-item-time{
  font-size: 11px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  opacity: .85;
  margin-top: 1px;
}

/* ===========================
   v1.1.0 — Trainer-namen op tegel
   =========================== */
.scts-item-trainers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 1px;
  color: var(--scts-team-text, #fff);
  opacity: 0.82;
  min-width: 0;
}
.scts-trainer-confirmed {
  /* erft bovenstaande kleur */
}
.scts-trainer-unconfirmed {
  font-style: italic;
  opacity: 0.65;
}
.scts-trainer-sep {
  font-size: 10px;
  opacity: 0.55;
  margin: 0 2px;
}

/* In gantt-blokken: inline-block span-stijl */
.scts-gantt-block .scts-item-trainers {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 1.3;
  opacity: 0.8;
  margin-top: 1px;
}

/* Bij geannuleerde trainingen: trainer iets meer gedempt */
.scts-item-cancelled .scts-item-trainers {
  opacity: 0.45;
}

.scts-item-part{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  color: #111 !important;
  flex-shrink: 0;
  white-space: nowrap;
}
.scts-item:hover,
.scts-item:focus{
  border-color: rgba(255,193,7,.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  outline: none;
  transform: translateY(-1px);
}

/* ===========================
   Pitch SVG (veldvisual)
   =========================== */
.scts-fieldviz{ margin-top:8px; }

.scts-pitch{
  width:100%;
  height:auto;
  display:block;
}

.scts-pitch .pitch-bg,
.scts-pitch-outdoor .pitch-bg{
  fill:#2f7d32;           /* gras */
  stroke:#fff;
  stroke-width:2;
}

.scts-pitch .pitch-line{
  stroke:#fff;
  stroke-width:2;
  opacity:.9;
}

.scts-pitch .pitch-outline{
  stroke: rgba(255,255,255,.9);
  stroke-width:2;
}

/* zones standaard transparant */
.scts-pitch .zone{
  fill: rgba(255,235,59,0);
  stroke: rgba(255,255,255,.25);
  stroke-width:1;
  transition: fill .12s ease, stroke .12s ease;
}

/* hover highlight */
.scts-pitch .zone.is-active{
  fill: rgba(255,235,59,.50);
  stroke: rgba(255,235,59,.95);
  stroke-width:2;
}

/* ===========================
   Indoor court styles (volleybal, basketbal)
   =========================== */
.scts-pitch-indoor .hall-bg{
  fill: #e8e0d4;
  stroke: #bbb0a0;
  stroke-width: 1.5;
}
.scts-pitch-indoor .court-floor{
  fill: #c8874d;
  stroke: #a06030;
  stroke-width: 1;
}
.scts-pitch-indoor .court-outline{
  fill: none;
  stroke: rgba(255,255,255,.8);
  stroke-width: 1.5;
}
.scts-pitch-indoor .court-marking{
  stroke: rgba(255,255,255,.7);
  stroke-width: 1.5;
  fill: none;
}
.scts-pitch-indoor .court-net{
  stroke: #fff;
  stroke-width: 2.5;
  stroke-dasharray: 3,2;
}
.scts-pitch-indoor .court-net-post{
  fill: #888;
  stroke: #666;
  stroke-width: 1;
}
.scts-pitch-indoor .court-label{
  fill: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  font-family: Arial, sans-serif;
}
.scts-pitch-indoor .zone{
  fill: rgba(255,200,50,0);
  stroke: rgba(255,255,255,.15);
  stroke-width: 1;
  transition: fill .12s ease, stroke .12s ease;
}
.scts-pitch-indoor .zone.is-active{
  fill: rgba(255,200,50,.45);
  stroke: rgba(255,200,50,.9);
  stroke-width: 2;
}

/* Volleybal court (standalone) */
.scts-pitch-indoor .court-floor-tennis{
  fill: #c87044;
}

/* ===========================
   Hockey pitch (groen-blauw)
   =========================== */
.scts-pitch-hockey .pitch-bg{
  fill: #1565c0;
  stroke: #fff;
  stroke-width: 2;
}
.scts-pitch-hockey .pitch-line{
  stroke: #fff;
  stroke-width: 1.5;
  opacity: .85;
}

/* ===========================
   Tennis court (terracotta)
   =========================== */
.scts-pitch-tennis .court-floor{
  fill: #d4845a;
  stroke: #b06838;
  stroke-width: 1;
}
.scts-pitch-tennis .court-floor-tennis{
  fill: #cc7744;
}
.scts-pitch-tennis .court-outline{
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}
.scts-pitch-tennis .court-net{
  stroke: #444;
  stroke-width: 2;
}
.scts-pitch-tennis .court-marking{
  stroke: #fff;
  stroke-width: 1.5;
  fill: none;
}

/* ===========================
   Hall view (venue container with courts)
   =========================== */
.scts-fieldmini-hall{
  background: #f5f0e8;
  border: 1px solid #d4c9b8;
  border-radius: 8px;
  padding: 6px;
}
.scts-fieldviz-hall{
  margin-top: 4px;
}
.scts-fieldviz-hall svg{
  width: 100%;
  height: auto;
}
.scts-hall-layout{
  margin: 6px 0;
}
.scts-hall-layout svg{
  width: 100%;
  height: auto;
}
.scts-hall-layout .zone{
  fill: rgba(255,200,50,0);
  stroke: rgba(255,255,255,.1);
  stroke-width: 0.5;
  transition: fill .12s ease, stroke .12s ease;
  cursor: pointer;
}
.scts-hall-layout .zone.is-active{
  fill: rgba(255,200,50,.45);
  stroke: rgba(255,200,50,.9);
  stroke-width: 2;
}

/* ===========================
   Full-width layout (no sidebar)
   =========================== */
.scts-layout.scts-layout-full{
  display: block;
}
.scts-layout-full .scts-main{
  max-width: 100%;
}

/* Sticky navigation (week + filters) */
.scts-sticky-nav{
  /* v0.8.9 — Terug naar v0.8.5 sticky-gedrag. Het sticky-experiment
     (v0.8.6/v0.8.7/v0.8.8) heeft te veel rand-cases op vvuno+Avada+PWA. */
  position: sticky;
  top: var(--scts-sticky-top, 0px);
  z-index: 20;
  background: #fff;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8e0d4;
  margin-bottom: 8px;
}

/* Column highlight on hover */
.scts-col-highlight{
  background: rgba(255,152,0,.08) !important;
  transition: background .12s ease;
}
/* Thead: geen achtergrond overlay, alleen subtiele border-bottom indicator */
thead .scts-col-highlight{
  background: inherit !important;
  box-shadow: inset 0 -3px 0 rgba(255,152,0,.6);
}

/* ===========================
   Per-venue schedule blocks
   =========================== */
.scts-venue-block{
  margin-bottom: 16px;
  /* No border/radius on container — prevents sticky gap artifact */
}
.scts-venue-block-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #f5f0e8;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: var(--scts-venue-top, 110px);
  z-index: 10;
  border: 1px solid #d4c9b8;
  border-radius: 10px 10px 0 0;
}
.scts-venue-block-header:hover{
  background: #efe8dc;
}
.scts-venue-block-arrow{
  font-size: 13px;
  transition: transform .2s ease;
  color: #888;
  flex-shrink: 0;
}
.scts-venue-block.is-collapsed .scts-venue-block-arrow{
  transform: rotate(-90deg);
}
.scts-venue-block.is-collapsed .scts-venue-block-header{
  border-radius: 10px;
}
.scts-venue-block-info{
  flex: 1;
  min-width: 0;
}
.scts-venue-block-info strong{
  display: block;
  font-size: 14px;
  color: #333;
}
.scts-venue-block-meta{
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 1px;
}
.scts-venue-block-mini{
  width: 80px;
  flex-shrink: 0;
}
.scts-venue-block-body{
  padding: 0;
  transition: max-height .2s ease;
  border: 1px solid #d4c9b8;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #fff;
}
.scts-venue-block.is-collapsed .scts-venue-block-body{
  display: none;
}
/* Sticky time column within venue table */
.scts-venue-block .scts-time{
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}
/* v1.0.6 — Sticky thead INGESCHAKELD.
   JS (class-scts-frontend.php) berekent --scts-thead-top dynamisch:
   adminBar + Avada-header (.fusion-tb-header) + stickyNav + venueBlockHeader hoogte.
   Avada wordt gedetecteerd zodat headers niet achter de theme-header plakken.
   Fallback 160px dekt meeste installaties zonder JS. */
.scts-venue-block .scts-weekgrid thead th{
  position: sticky;
  top: var(--scts-thead-top, 160px);
  z-index: 5;
  background: #faf8f5;
  border-bottom: 2px solid rgba(0,0,0,.10);
}
.scts-venue-block .scts-weekgrid thead th.scts-col-time{
  left: 0;
  z-index: 6;
}

/* v0.3.10 — Visuele merge van aansluitende trainingen
   Wanneer een team meerdere consecutieve slots op hetzelfde (deel-)veld traint,
   krijgen de scts-items merge-states: start (bovenste), middle (tussen),
   end (onderste). De rand-radius en margins worden zo aangepast dat het ééN
   doorlopend blok lijkt; team-naam en part-label worden alleen op de eerste
   cel getoond. Werkt voor FULL, halves (A/B) en quarters (A1/A2/B1/B2). */
.scts-item[data-merge="start"]{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  padding-bottom: 4px;
  /* Overlap TR-border met team-kleur */
  box-shadow: 0 2px 0 0 var(--scts-team-bg, transparent);
}
.scts-item[data-merge="middle"]{
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 4px 8px;
  box-shadow: 0 -2px 0 0 var(--scts-team-bg, transparent), 0 2px 0 0 var(--scts-team-bg, transparent);
}
.scts-item[data-merge="end"]{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
  padding-top: 4px;
  box-shadow: 0 -2px 0 0 var(--scts-team-bg, transparent);
}
/* Verberg duplicaat content in middle/end zodat het er als één blok uitziet */
.scts-item[data-merge="middle"] .scts-item-team,
.scts-item[data-merge="end"] .scts-item-team{
  display: none;
}
.scts-item[data-merge="middle"] .scts-item-part,
.scts-item[data-merge="end"] .scts-item-part{
  display: none;
}

/* ===========================
   Venue grouped sidebar
   =========================== */
.scts-venue-header{
  font-size: 13px;
  font-weight: 700;
  color: #444;
  padding: 8px 0 4px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 6px;
  margin-top: 10px;
}
.scts-venue-header:first-child{
  margin-top: 0;
}
.scts-venue-courts-scroll{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.scts-venue-courts-scroll .scts-fieldmini{
  min-width: 170px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.scts-venue-courts-scroll::-webkit-scrollbar{
  height: 6px;
}
.scts-venue-courts-scroll::-webkit-scrollbar-track{
  background: #f0f0f0;
  border-radius: 3px;
}
.scts-venue-courts-scroll::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 3px;
}
.scts-venue-courts-scroll::-webkit-scrollbar-thumb:hover{
  background: #aaa;
}

/* ===========================
   Campus map (overzicht) - 1x definitie
   =========================== */
.scts-campusmap-wrap{
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  background: #fff;
}

.scts-campusmap-title{ margin-bottom: 10px; }
.scts-campusmap-hint{ margin-top: 8px; font-size: 13px; }

.scts-campusmap{
  position:relative;
  width:100%;
  max-width:1100px;

  /* kies 16/9 als je image dat is; anders aanpassen */
  aspect-ratio: 16 / 9;

  background: url('/wp-content/uploads/2025/09/veldindeling.png') center/contain no-repeat;
  border-radius:16px;
  border: 1px solid rgba(0,0,0,.10);
  overflow:hidden;
}

/* hotspots (worden geel bij hover) */
.scts-campusmap .hotspot{
  position:absolute;
  border-radius:12px;
  background:rgba(255,235,59,0);
  outline:2px solid rgba(255,235,59,0);
  transition: background .12s ease, outline .12s ease;
  pointer-events:none;
}
.scts-campusmap .hotspot.is-active{
  background:rgba(255,235,59,.35);
  outline:2px solid rgba(255,235,59,.9);
}

/* Hotspot posities (voorbeeld, finetunen op jouw plattegrond) */
/* Veld 1 */
.scts-campusmap .hotspot[data-zone="1A1"]{ left: 6%;  top: 14%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="1A2"]{ left: 6%;  top: 38%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="1B1"]{ left: 18%; top: 14%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="1B2"]{ left: 18%; top: 38%; width: 11%; height: 22%; }

/* Veld 2 */
.scts-campusmap .hotspot[data-zone="2A1"]{ left: 39%; top: 14%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="2A2"]{ left: 39%; top: 38%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="2B1"]{ left: 51%; top: 14%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="2B2"]{ left: 51%; top: 38%; width: 11%; height: 22%; }

/* Veld 3 */
.scts-campusmap .hotspot[data-zone="3A1"]{ left: 72%; top: 14%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="3A2"]{ left: 72%; top: 38%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="3B1"]{ left: 84%; top: 14%; width: 11%; height: 22%; }
.scts-campusmap .hotspot[data-zone="3B2"]{ left: 84%; top: 38%; width: 11%; height: 22%; }

/* ===========================
   Updates (ongewijzigd)
   =========================== */
.scts-updates{
  margin:14px 0;
  padding:12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  background:#fff;
}
.scts-updates-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.scts-updates-title{ margin:0; }
.scts-updates-meta{ opacity:.7; font-size:13px; }
.scts-updates-list{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.scts-updates-item{
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:rgba(0,0,0,.02);
}
.scts-updates-main{ font-weight:700; }
.scts-updates-sub{ margin-top:4px; font-size:13px; opacity:.75; }

/* ===========================
   Sprint 8 layout — sidebar verwijderd in v0.2.5,
   layout overrides behouden voor full-width
   =========================== */

.scts-layout{
  display: block;
}


@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes slideUp{
  from{
    opacity: 0;
    transform: translateY(30px) scale(.95);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===========================
   Pitch SVG (veldvisual)
   =========================== */

.scts-fieldviz{
  margin-top: 6px;
}
.scts-fieldviz.is-mini{
  margin-top: 0;
}

/* Portrait (lengte) wordt “tall” (Sprint 8) */
.scts-fieldviz.is-tall svg{
  width: 100%;
  height: auto;
  display: block;
}

/* mini pitch sizing */
.scts-pitch.is-mini{
  width: 100%;
  height: auto;
  display: block;
}

.scts-pitch .pitch-bg{
  fill:#6dbb4a; /* gras */
  stroke: rgba(255,255,255,.9);
  stroke-width: 2;
}
.scts-pitch .pitch-line{
  stroke: rgba(255,255,255,.85);
  stroke-width: 2;
}
.scts-pitch .pitch-outline{
  stroke: rgba(255,255,255,.9);
  stroke-width: 2;
}

/* zones default transparant */
.scts-pitch .zone{
  fill: rgba(255,235,59,0);
  stroke: rgba(255,255,255,.10);
  transition: fill .12s ease, stroke .12s ease;
}

/* highlight (hover vanuit tabel) */
.scts-pitch .zone.is-active{
  fill: rgba(255, 235, 59, .55);
  stroke: rgba(255, 193, 7, .75);
  stroke-width: 2;
}

/* table item hover hint */
.scts-item{
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.scts-item:hover,
.scts-item:focus{
  border-color: rgba(255,193,7,.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  outline: none;
  transform: translateY(-1px);
}

/* Sprint 8.1 – teamkleur op item */
.scts-item-colored{
  background: var(--scts-team-bg, #eef2f7) !important;
  color: var(--scts-team-text, #111) !important;
  border-color: rgba(0,0,0,.08) !important;
}

.scts-item-colored .scts-item-part{
  background: #fff;
  border-color: rgba(0,0,0,.15);
  color: #111 !important;
}

/* Concept/draft items - subtiele visuele indicator */
.scts-item-draft{
  border-style: dashed !important;
  border-color: rgba(0,0,0,.20) !important;
  opacity: 0.85;
  position: relative;
}
.scts-item-draft::after{
  content: "concept";
  position: absolute;
  top: -8px;
  right: 6px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  background: #ffc107;
  color: #111;
  border-radius: 4px;
  line-height: 1.3;
}

/* Sprint 8.1 – hoverkleur naar pitch zones */
:root{
  --scts-hover-color: rgba(255,235,59,.55);
}

.scts-pitch .zone.is-active{
  fill: color-mix(in srgb, var(--scts-hover-color) 55%, transparent);
  stroke: color-mix(in srgb, var(--scts-hover-color) 85%, #0000);
  stroke-width: 2;
}

/* ===========================
   Sprint 8.0 – Compact velden (laatste definitie wint!)
   =========================== */

.scts-fields-map{
  display: grid;
  grid-template-columns: 2fr 2fr 1fr; /* 40/40/20 */
  gap: 12px;
  margin: 12px 0 10px;

  position: sticky;
  top: 12px;
  z-index: 5;

  background: rgba(255,255,255,.90);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 10px;
}

.scts-fieldcard{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
  min-width: 0;
}

.scts-fieldcard-head{
  margin-bottom: 6px;
  font-size: 13px;
}

/* maak de svg echt “mini” */
.scts-fieldviz svg,
.scts-pitch{
  max-height: 140px;
}

/* Legend uit in compact mode */
.scts-legend{ display:none !important; }

@media (max-width: 900px){
  .scts-fields-map{ display:none !important; }
}

.scts-wrapper .scts-fields-map{ max-width: 100%; }
.scts-wrapper .scts-fieldcard{ width: 100%; }

/* ===========================
   Mobile: Card-based layout
   =========================== */
@media (max-width: 768px){
  /* Fix scroll op mobiel */
  .scts-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabel kleinere minimale breedte */
  .scts-weekgrid{
    min-width: 600px;
  }

  .scts-weekgrid th,
  .scts-weekgrid td{
    padding: 6px;
  }

  .scts-slot{
    min-height: 50px;
    padding: 4px !important;
  }

  .scts-item{
    padding: 8px 10px;
    gap: 6px;
  }

  .scts-item-team{
    font-size: 13px;
  }

  .scts-item-part{
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Filters compacter */
  .scts-filters{
    flex-direction: column;
    gap: 8px;
  }

  .scts-filters label{
    width: 100%;
  }

  .scts-input, .scts-select{
    width: 100%;
    min-width: unset;
  }

  /* Week carousel compacter */
  .scts-week-carousel{
    padding: 8px;
    gap: 4px;
  }

  .scts-week-card{
    padding: 8px 12px;
    min-width: 70px;
  }
}

/* Extra kleine schermen: alternatieve card weergave */
@media (max-width: 580px){
  /* Verberg tabel, toon cards */
  .scts-scroll{
    overflow: visible;
    border: none;
    background: transparent;
  }

  .scts-weekgrid{
    display: none !important;
  }

  /* Mobiele cards weergave tonen */
  .scts-mobile-cards{
    display: grid !important;
    gap: 10px;
  }

  .scts-mobile-card{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
  }

  .scts-mobile-card-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  .scts-mobile-card-time{
    font-weight: 700;
    font-size: 15px;
  }

  .scts-mobile-card-field{
    font-size: 12px;
    color: #666;
  }

  .scts-mobile-card-items{
    display: grid;
    gap: 6px;
  }

  .scts-mobile-card .scts-item{
    margin-bottom: 0;
  }

  /* Week carousel nog compacter */
  .scts-week-cards{
    flex-wrap: wrap;
    justify-content: center;
  }

  .scts-week-card{
    padding: 6px 10px;
    min-width: 60px;
  }

  .scts-week-card-label{
    font-size: 13px;
  }

  .scts-week-card-dates{
    font-size: 10px;
  }
}

/* ===========================================================
   v0.4.0 — Gantt-style layout (CSS Grid based)
   Opt-in via [scts_schedule layout="gantt"] of ?scts_layout=gantt
   =========================================================== */

.scts-venue-block--gantt {
  margin-bottom: 24px;
}

/* v0.4.4 — Horizontaal scrollen wanneer gantt breder is dan viewport
   (PWA / mobiel: tot 12+ kolommen passen niet op smal scherm).
   v0.8.9 — Terug naar v0.8.5 gedrag (overflow-x: auto altijd). */
.scts-venue-block--gantt .scts-venue-block-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scts-gantt {
  display: grid;
  /* grid-template-columns wordt inline gezet (70px + repeat(N, ...)) */
  grid-auto-rows: 44px;        /* tijd-slot hoogte */
  gap: 0;
  background: #f6f4ef;
  border-radius: 12px;
  padding: 0;
  position: relative;
  /* v0.4.4 — overflow:hidden vervangen door visible zodat sticky-left werkt
     en de container kan groeien voorbij viewport breedte */
  overflow: visible;
  /* v1.10.3 — min-width wordt inline gezet (70px + N×64px), NIET max-content:
     zo bepaalt het kolom-aantal de breedte i.p.v. de blok-inhoud. Voorkomt dat
     een lange bloknaam de grid breder maakt dan de vaste sitebreedte. */
}

/* v0.4.4 — Tijd-kolom sticky-left zodat tijden zichtbaar blijven tijdens
   horizontaal scrollen */
.scts-gantt-time {
  position: sticky;
  left: 0;
  z-index: 3;
}
.scts-gantt-corner {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #f6f4ef;
}

/* Header row 1: lege hoek + field-name banners */
.scts-gantt-corner {
  background: transparent;
}
/* v1.0.9 — Veld-headers wonen nu in .scts-gantt-sticky-head buiten de
   overflow-x body → position:sticky werkt t.o.v. viewport. */

/* Plattegrond sticky in gantt context (zit ook buiten de overflow body) */
.scts-venue-block--gantt > .scts-hall-plan {
  position: sticky;
  top: var(--scts-thead-top, 160px);
  z-index: 8;
  background: #fafafa;
}

/* Sticky header wrapper — top wordt inline gezet door JS */
.scts-gantt-sticky-head {
  position: sticky;
  z-index: 7;
  overflow: hidden;          /* clips inner bij horizontaal scrollen */
  background: #f6f4ef;
  border-bottom: 2px solid rgba(0,0,0,.10);
}
.scts-gantt-sticky-inner {
  will-change: transform;    /* GPU-versnelling voor translateX scroll-sync */
}

/* Field header binnen sticky head: geen top-margin, hoekradius aangepast */
.scts-gantt-sticky-inner .scts-gantt-field-header {
  margin-top: 2px;
  border-radius: 4px 4px 0 0;
}

.scts-gantt-field-header {
  background: linear-gradient(180deg, #88a14b 0%, #6f8a3a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px 6px 0 0;
  margin: 4px 2px 0;
}

/* Part-label badges (alleen getoond bij velden met meerdere parts) */
.scts-gantt-part-label {
  background: #738d3e;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 6px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border-bottom: 2px solid rgba(0,0,0,.08);
}

/* Time labels (column 1, vanaf row 3) */
.scts-gantt-time {
  background: linear-gradient(180deg, #2c5d8a 0%, #1f4a72 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.scts-gantt-time:first-of-type {
  border-radius: 0 0 0 0;
}

/* Lege achtergrond-cellen voor visuele structuur */
.scts-gantt-cell {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-right: 1px dashed rgba(0,0,0,.06);
}
.scts-gantt-cell:last-child {
  border-right: none;
}

/* Trainingsblokken */
.scts-gantt-block {
  background: var(--scts-team-bg, #1e88e5);
  color: var(--scts-team-text, #fff);
  border-radius: 14px;
  padding: 8px 10px;
  margin: 3px;
  /* v1.10.3 — grid-item mag zijn kolom niet oprekken door een lange (nowrap)
     naam; de tekst kapt af binnen de kolom. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.10);
  position: relative;
  z-index: 2;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.scts-gantt-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 -2px 0 rgba(0,0,0,.10);
}
.scts-gantt-block-team {
  font-size: 13px;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v1.16.0 — start–eindtijd op het gantt-blok */
.scts-gantt-block-time {
  display: block;
  font-size: 11px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  opacity: .85;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scts-gantt-block-part {
  display: inline-block;
  margin-top: 4px;
  background: rgba(255,255,255,.85);
  color: #333;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .03em;
}
.scts-gantt-block.scts-item-draft {
  opacity: .8;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px);
  /* v1.7.0 — Concept = stippellijn. Outline (geen layout-shift, niet afgekapt door
     overflow:hidden) in de team-tekstkleur zodat hij tegen elke blokkleur contrasteert. */
  outline: 2px dashed var(--scts-team-text, #fff);
  outline-offset: -5px;
}
/* v1.7.4 — De "concept"-badge stond boven het blok (top:-8px) en werd door
   overflow:hidden afgekapt. Binnen het blok plaatsen zodat het woord leesbaar blijft. */
.scts-gantt-block.scts-item-draft::after{
  top: 3px;
  right: 3px;
  z-index: 3;
}

/* Mobiel: stack als single column lijst (eenvoudige fallback voor v0.4.0-alpha) */
@media (max-width: 760px) {
  .scts-gantt {
    grid-auto-rows: auto;
  }
  .scts-gantt-block {
    font-size: 12px;
    padding: 6px 8px;
  }
  .scts-gantt-time {
    font-size: 11px;
  }
  .scts-gantt-field-header {
    font-size: 12px;
    padding: 6px 4px;
  }
  .scts-gantt-part-label {
    font-size: 10px;
    padding: 3px 4px;
  }
}

/* ===========================================================
   v0.4.0 — Plattegrond toggle (optioneel, per venue)
   =========================================================== */

.scts-hall-toggle-btn{
  margin-left: auto;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.scts-hall-toggle-btn:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.4);
}
.scts-hall-toggle-btn:focus-visible{
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Plattegrond-sectie zelf (tussen header en body) */
.scts-hall-plan{
  background: #fafafa;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scts-hall-plan[hidden]{
  display: none !important;
}
.scts-hall-plan .scts-hall-layout{
  max-width: 100%;
}

/* Mobile: smallere padding */
@media (max-width: 640px){
  .scts-hall-toggle-btn{
    font-size: 11px;
    padding: 4px 8px;
  }
  .scts-hall-plan{
    padding: 10px;
  }
}

/* ===========================================================
   v0.4.3 — Dag-carousel (zoals week-carousel)
   =========================================================== */
.scts-day-carousel{
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 4px;
  user-select: none;
}
.scts-day-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #555;
  background: #f3eee5;
  border: 1px solid #d4c9b8;
  text-decoration: none;
  transition: background .12s ease, transform .12s ease;
  flex-shrink: 0;
}
.scts-day-arrow:hover{
  background: #e8e0d4;
  transform: scale(1.05);
}
.scts-day-cards{
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 6px;
  flex: 1;
}
.scts-day-card{
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f7f3ec;
  border: 1px solid #d4c9b8;
  text-align: center;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all .12s ease;
}
.scts-day-card:hover{
  background: #ede5d6;
}
.scts-day-card.is-active{
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
  font-weight: 700;
}
.scts-day-card.is-disabled{
  opacity: .5;
}
.scts-day-card-label{
  font-size: 13px;
  line-height: 1.2;
}
.scts-day-card.is-active .scts-day-card-label{
  font-size: 14px;
}
.scts-day-card-badge{
  font-size: 9px;
  background: #4ade80;
  color: #0a3d18;
  padding: 1px 5px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 2px;
  font-weight: 700;
}

/* ===========================================================
   v0.4.3 — Filter toggle-knop + collapsible filterbar
   =========================================================== */
.scts-filter-toggle{
  display: none;            /* default: verborgen op desktop (filters altijd zichtbaar) */
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #d4c9b8;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  margin: 8px 0;
  transition: background .12s ease;
}
.scts-filter-toggle:hover{
  background: #f7f3ec;
}
.scts-filter-toggle .scts-filter-toggle-arrow{
  margin-left: auto;
  transition: transform .15s ease;
}
.scts-filter-toggle[aria-expanded="true"] .scts-filter-toggle-arrow{
  transform: rotate(180deg);
}

/* Mobiel: toggle zichtbaar + filters default verborgen */
@media (max-width: 760px){
  .scts-filter-toggle{
    display: inline-flex;
    width: 100%;
    justify-content: flex-start;
  }
  .scts-filters{
    display: none !important;
  }
  .scts-filters.is-open{
    display: flex !important;
  }
  /* Dag-carousel iets compacter op mobiel */
  .scts-day-cards{
    grid-template-columns: 1fr 1.6fr 1fr;
  }
  .scts-day-card{
    padding: 4px 6px;
  }
  .scts-day-card-label{
    font-size: 11px;
  }
  .scts-day-card.is-active .scts-day-card-label{
    font-size: 12px;
  }
}

/* ===========================================================
   v0.5.0 — Favoriete teams (CC_Favorites integratie)
   =========================================================== */
.scts-fav-bar{
  margin: 12px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Quick-toggle knop "Toon mijn teams" / "Toon alle teams" */
.scts-fav-quick-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--cc-primary, #1f2937) 22%, #fff);
  color: #555;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all .12s ease;
}
.scts-fav-quick-toggle:hover{
  background: color-mix(in srgb, var(--cc-primary, #1f2937) 8%, #fff);
  border-color: var(--cc-primary, #1f2937);
  color: var(--cc-primary, #1f2937);
}
.scts-fav-quick-toggle.is-active{
  background: color-mix(in srgb, var(--cc-primary, #1f2937) 12%, #fff);
  border-color: var(--cc-primary, #1f2937);
  color: var(--cc-primary, #1f2937);
}

/* Mijn favorieten beheren — collapsible */
.scts-fav-manager{
  flex: 1;
  min-width: 200px;
  border: 1px solid #d4c9b8;
  border-radius: 8px;
  background: #fff;
}
.scts-fav-manager > summary{
  cursor: pointer;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.scts-fav-manager > summary::-webkit-details-marker{ display: none; }
.scts-fav-manager > summary::before{
  content: '▶';
  font-size: 10px;
  color: #999;
  transition: transform .15s ease;
  display: inline-block;
}
.scts-fav-manager[open] > summary::before{
  transform: rotate(90deg);
}
.scts-fav-manager > summary:hover{
  background: #f7f3ec;
  border-radius: 8px;
}
.scts-fav-count{
  margin-left: auto;
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.scts-fav-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid #f0ebe0;
}
.scts-fav-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: #444;
  transition: all .12s ease;
}
.scts-fav-item:hover{
  background: #fff8e1;
  border-color: #fcd34d;
}
.scts-fav-item.is-favorite{
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.scts-fav-item.is-loading{
  opacity: .5;
  cursor: wait;
}
.scts-fav-item .cc-fav-star-icon{
  font-size: 16px;
  line-height: 1;
  color: #d4c9b8;
  transition: color .12s ease, transform .12s ease;
}
.scts-fav-item.is-favorite .cc-fav-star-icon,
.scts-fav-item:hover .cc-fav-star-icon{
  color: #f59e0b;
}
.scts-fav-item:active .cc-fav-star-icon{
  transform: scale(1.2);
}
.scts-fav-team-name{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scts-fav-help{
  margin: 0;
  padding: 4px 14px 12px;
  font-size: 11px;
  color: #888;
  font-style: italic;
}

/* Mobiel: toggle volledige breedte, manager onder de knop */
@media (max-width: 760px){
  .scts-fav-bar{
    flex-direction: column;
    align-items: stretch;
  }
  .scts-fav-quick-toggle{
    justify-content: center;
  }
  .scts-fav-list{
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ===========================================================
   v0.5.1 — Banner UX: dag-scroller met datums, geavanceerd-collapse,
   sportpark + veld chips
   =========================================================== */

/* Dag-scroller datum-uitbreiding (was alleen dag-naam) */
.scts-day-card-date{
  font-size: 11px;
  color: #888;
  line-height: 1.2;
  margin-top: 2px;
}
.scts-day-card.is-active .scts-day-card-date{
  color: rgba(255,255,255,.85);
}

/* Geavanceerd-collapsible voor datum/week-input */
.scts-advanced-nav{
  margin: 6px 0;
  font-size: 13px;
}
.scts-advanced-nav > summary{
  cursor: pointer;
  color: #666;
  padding: 4px 0;
  font-weight: 500;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.scts-advanced-nav > summary::-webkit-details-marker{ display: none; }
.scts-advanced-nav > summary::before{
  content: '▶';
  font-size: 9px;
  color: #999;
  transition: transform .15s ease;
}
.scts-advanced-nav[open] > summary::before{ transform: rotate(90deg); }
.scts-advanced-form{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 8px 0;
}
.scts-advanced-form label{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #666;
}
.scts-advanced-form .scts-input{
  padding: 6px 8px;
  border: 1px solid #d4c9b8;
  border-radius: 6px;
  font-size: 13px;
}
.scts-advanced-form .scts-btn{
  padding: 7px 14px;
  background: #1f2937;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.scts-advanced-form .scts-btn:hover{ background: #374151; }

/* Chip-rij (sportpark + veld filter chips) */
.scts-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
  align-items: center;
}
.scts-chip-row--field{
  margin: 6px 0 12px;
  padding: 0 14px;
}
.scts-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--cc-primary, #1f2937) 22%, #fff);
  color: #555;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all .12s ease;
  white-space: nowrap;
}
.scts-chip:hover{
  background: color-mix(in srgb, var(--cc-primary, #1f2937) 8%, #fff);
  border-color: color-mix(in srgb, var(--cc-primary, #1f2937) 45%, #fff);
}
.scts-chip.is-active{
  background: var(--cc-primary, #1f2937);
  border-color: var(--cc-primary, #1f2937);
  color: #fff;
}
.scts-chip.is-active:hover{
  background: color-mix(in srgb, var(--cc-primary, #1f2937) 85%, #000);
  border-color: color-mix(in srgb, var(--cc-primary, #1f2937) 85%, #000);
}

/* Mobile: kleinere chips */
@media (max-width: 760px){
  .scts-chip{
    padding: 4px 10px;
    font-size: 11px;
  }
  .scts-advanced-form{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===========================================================
   v0.6.0 — Trainings-annulering (cancelled state + cancel-knop)
   =========================================================== */

/* Cancelled trainings-block: gedimd + diagonale strepen */
.scts-item-cancelled,
.scts-gantt-block.scts-item-cancelled{
  opacity: .55;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,.18) 0 6px,
    transparent 6px 12px
  );
  position: relative;
}
.scts-item-cancelled .scts-item-team,
.scts-gantt-block.scts-item-cancelled .scts-gantt-block-team{
  text-decoration: line-through;
}

/* Cancelled badge (tabel-versie + gantt-versie) */
.scts-item-cancel-badge,
.scts-gantt-block-cancelled{
  display: inline-block;
  margin-top: 4px;
  background: rgba(255,255,255,.92);
  color: #b91c1c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Cancel-knop in hoek van het block (alleen zichtbaar voor users met permissions) */
.scts-item-cancel-btn{
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease, transform .12s ease;
  z-index: 5;
}
.scts-item:hover .scts-item-cancel-btn,
.scts-gantt-block:hover .scts-item-cancel-btn{
  opacity: 1;
}
.scts-item-cancel-btn:hover{
  background: #dc2626;
  transform: scale(1.1);
}
.scts-item-cancel-btn:disabled{
  opacity: .5;
  cursor: wait;
}
/* Cancelled state: knop altijd zichtbaar (om uit te schakelen) */
.scts-item-cancelled .scts-item-cancel-btn,
.scts-gantt-block.scts-item-cancelled .scts-item-cancel-btn{
  opacity: 1;
  background: rgba(255,255,255,.85);
  color: #1f2937;
}

/* Touch-devices: knop altijd zichtbaar (geen hover) */
@media (hover: none){
  .scts-item-cancel-btn{
    opacity: .85;
  }
}

/* Position relative op .scts-item zodat absolute knop werkt */
.scts-item{ position: relative; }

/* ===========================================================
   v0.8.0 — Sprint 5.4: trainer check-in knop
   Links-boven hoek (cancel-knop staat rechts-boven)
   =========================================================== */
.scts-item-checkin-btn{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease, transform .12s ease;
  z-index: 5;
}
.scts-item:hover .scts-item-checkin-btn,
.scts-gantt-block:hover .scts-item-checkin-btn{
  opacity: 1;
}
.scts-item-checkin-btn:hover{
  background: #16a34a;
  transform: scale(1.1);
}
.scts-item-checkin-btn:disabled{
  opacity: .5;
  cursor: wait;
}
/* Actieve eigen check-in: groene knop, altijd zichtbaar */
.scts-item-checkin-btn.scts-item-checkin-mine{
  opacity: 1;
  background: #16a34a;
  color: #fff;
  font-weight: 700;
}
.scts-item-checkin-btn.scts-item-checkin-mine:hover{
  background: #15803d;
}
/* Andermans actieve check-in: read-only, lichtgrijs */
.scts-item-checkin-btn.scts-item-checkin-other{
  opacity: 1;
  background: rgba(255,255,255,.7);
  color: #374151;
  cursor: default;
}
.scts-item-checkin-btn.scts-item-checkin-other:hover{
  background: rgba(255,255,255,.7);
  transform: none;
}
/* v0.8.3 — Admin test-modus (buiten tijdvenster): oranje accent + altijd zichtbaar */
.scts-item-checkin-btn.scts-item-checkin-admin{
  opacity: .9;
  background: rgba(234, 88, 12, .75); /* oranje */
}
.scts-item-checkin-btn.scts-item-checkin-admin:hover{
  background: #ea580c;
}
/* Touch-devices: knop altijd zichtbaar */
@media (hover: none){
  .scts-item-checkin-btn{
    opacity: .85;
  }
}

/* ===========================================================
   v0.7.0 — Extra events (oefen-/inhaalwedstrijd / anders)
   =========================================================== */

/* Extra event blocks: overschrijven team-kleur met type-kleur */
.scts-item.scts-item-extra-oefen,
.scts-gantt-block.scts-item-extra-oefen{
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #fff !important;
  border: 2px solid #b45309;
}
.scts-item.scts-item-extra-inhaal,
.scts-gantt-block.scts-item-extra-inhaal{
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  color: #fff !important;
  border: 2px solid #6d28d9;
}
.scts-item.scts-item-extra-anders,
.scts-gantt-block.scts-item-extra-anders{
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
  color: #fff !important;
  border: 2px solid #334155;
}

/* Opponent regel + extra-badge */
.scts-item-extra-opponent,
.scts-gantt-block-opponent{
  font-size: 11px;
  font-style: italic;
  opacity: .9;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scts-item-extra-badge,
.scts-gantt-block-extra-badge{
  display: inline-block;
  margin-top: 4px;
  background: rgba(255,255,255,.95);
  color: #1f2937;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Delete-knop (zelfde stijl als cancel-knop maar prullenbak-icon) */
.scts-item-event-delete-btn{
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease, transform .12s ease;
  z-index: 5;
}
.scts-item:hover .scts-item-event-delete-btn,
.scts-gantt-block:hover .scts-item-event-delete-btn{
  opacity: 1;
}
.scts-item-event-delete-btn:hover{
  background: #dc2626;
  transform: scale(1.1);
}
.scts-item-event-delete-btn:disabled{
  opacity: .5;
  cursor: wait;
}
@media (hover: none){
  .scts-item-event-delete-btn{ opacity: .85; }
}

/* "+ Extra event" toevoeg-knop in fav-bar */
.scts-extra-event-add-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  transition: transform .12s ease, box-shadow .12s ease;
}
.scts-extra-event-add-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30,64,175,.3);
}

/* Extra event dialog (native <dialog>) */
.scts-extra-event-dialog{
  width: 480px;
  max-width: 92vw;
  border-radius: 12px;
  border: 1px solid #d4c9b8;
  padding: 0;
  background: #fff;
  box-shadow: 0 12px 48px rgba(0,0,0,.18);
}
.scts-extra-event-dialog::backdrop{
  background: rgba(0,0,0,.4);
}
.scts-extra-event-dialog header{
  padding: 16px 20px;
  border-bottom: 1px solid #f0ebe0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scts-extra-event-dialog header h3{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.scts-dialog-close{
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 0 4px;
}
.scts-dialog-close:hover{ color: #000; }
.scts-form-grid{
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.scts-form-grid label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.scts-form-grid input,
.scts-form-grid select,
.scts-form-grid textarea{
  padding: 7px 10px;
  border: 1px solid #d4c9b8;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  background: #fff;
}
.scts-form-grid label.scts-form-row-wide{
  grid-column: 1 / -1;
}
.scts-extra-event-dialog footer{
  padding: 12px 20px;
  border-top: 1px solid #f0ebe0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.scts-extra-event-dialog .scts-btn{
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #d4c9b8;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.scts-extra-event-dialog .scts-btn:hover{ background: #f7f3ec; }
.scts-extra-event-dialog .scts-btn-primary{
  background: #1f2937;
  color: #fff;
  border-color: #1f2937;
}
.scts-extra-event-dialog .scts-btn-primary:hover{ background: #111827; }
.scts-form-error{
  margin: 0 20px 16px;
  padding: 10px 12px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 12px;
}
@media (max-width: 580px){
  .scts-form-grid{ grid-template-columns: 1fr; }
  .scts-extra-event-add-btn{ margin-left: 0; width: 100%; justify-content: center; }
}

/* v0.5.2 — View-toggle: switch tussen week-view en dag-view */
.scts-view-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px dashed color-mix(in srgb, var(--cc-primary, #1f2937) 45%, #fff);
  color: #555;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  margin: 6px 0;
  transition: all .12s ease;
}
.scts-view-toggle:hover{
  background: color-mix(in srgb, var(--cc-primary, #1f2937) 8%, #fff);
  border-color: var(--cc-primary, #1f2937);
  border-style: solid;
  color: var(--cc-primary, #1f2937);
}
/* v1.7.0 — "Eerstvolgende training" = primaire CTA (gevulde sitekleur) */
.scts-view-toggle.scts-next-training{
  background: var(--cc-primary, #1f2937);
  border-color: var(--cc-primary, #1f2937);
  border-style: solid;
  color: #fff;
}
.scts-view-toggle.scts-next-training:hover{
  background: color-mix(in srgb, var(--cc-primary, #1f2937) 85%, #000);
  border-color: color-mix(in srgb, var(--cc-primary, #1f2937) 85%, #000);
  color: #fff;
}

/* v1.3.0 — Co-team separator op training-tegel */
.scts-co-sep {
  opacity: 0.55;
  margin: 0 2px;
  font-size: 0.85em;
}

/* v1.3.6 — Matrix-weergave */
.scts-matrix-wrap { margin: 0; }
.scts-matrix-week { margin: 0 0 10px; font-size: 13px; color: #555; }
.scts-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scts-matrix-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 400px;
  font-size: 13px;
}
.scts-matrix-table th,
.scts-matrix-table td {
  border: 1px solid #e0e0e0;
  padding: 6px 10px;
  vertical-align: top;
}
.scts-matrix-th-team {
  background: #f5f5f5;
  font-weight: 700;
  white-space: nowrap;
  min-width: 120px;
}
.scts-matrix-th-venue {
  background: #f0f6fc;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  min-width: 130px;
}
.scts-matrix-team {
  font-weight: 600;
  white-space: nowrap;
  background: #fafafa;
}
.scts-matrix-cell { text-align: center; }
.scts-matrix-cell--empty { background: #fafafa; }
.scts-matrix-dash { color: #bbb; font-size: 16px; }
.scts-matrix-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 2px 0;
  white-space: nowrap;
}
.scts-matrix-entry + .scts-matrix-entry {
  border-top: 1px dashed #e8e8e8;
}
.scts-matrix-day {
  font-weight: 700;
  font-size: 11px;
  color: #0073aa;
  min-width: 20px;
  text-align: right;
}
.scts-matrix-time { color: #333; }

.scts-matrix-field { color: #888; font-size: 11px; }

/* v1.3.9 — Matrix modal */
.scts-matrix-open-btn {
  cursor: pointer;
  border: none;
  background: none;
}
.scts-matrix-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 92vw;
  width: 860px;
  max-height: 88vh;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
}
.scts-matrix-dialog::backdrop {
  background: rgba(0,0,0,.45);
}
.scts-matrix-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
.scts-matrix-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 12px 12px 0 0;
}
.scts-matrix-dialog-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.scts-matrix-dialog-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  color: #666;
  padding: 0 4px;
}
.scts-matrix-dialog-body {
  overflow: auto;
  padding: 14px 18px 18px;
  -webkit-overflow-scrolling: touch;
}

/* v1.4.0 — Print-knop in modal-header */
.scts-matrix-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scts-matrix-dialog-print {
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  color: #444;
}
.scts-matrix-dialog-print:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

/* v1.4.0 — Print-stijlen: alles verbergen behalve de matrix */
@media print {
  body.scts-printing-matrix * { visibility: hidden; }
  body.scts-printing-matrix .scts-matrix-dialog,
  body.scts-printing-matrix .scts-matrix-dialog * { visibility: visible; }
  body.scts-printing-matrix .scts-matrix-dialog {
    position: fixed;
    inset: 0;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
  }
  body.scts-printing-matrix .scts-matrix-dialog-close,
  body.scts-printing-matrix .scts-matrix-dialog-print { display: none; }
  body.scts-printing-matrix .scts-matrix-table { width: 100%; font-size: 11px; }
  body.scts-printing-matrix .scts-matrix-th-venue,
  body.scts-printing-matrix .scts-matrix-th-team { background: #eee !important; }
}

/* ===========================================================
   v1.7.0 — Concept-indeling banner (boven het schema)
   Amber waarschuwingsstijl: signaleert "nog niet definitief".
   =========================================================== */
.scts-concept-banner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  padding: 10px 14px;
  border: 1px dashed #d97706;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fffbeb 0 10px, #fef7db 10px 20px);
}
.scts-concept-banner-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  color: #92400e;
  background: #fde68a;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.scts-concept-banner-sub{
  font-size: 12px;
  color: #78500f;
}
@media (max-width: 760px){
  .scts-concept-banner-sub{ font-size: 11px; }
}