/* ==========================================================================
   base.css — Sportclub Beheer Platform — UNIVERSELE structuur-stylesheet
   ==========================================================================
   Dit bestand bevat GEEN clubspecifieke kleuren, logo's of fonts.
   Het gebruikt uitsluitend de var(--...) tokens die een theme-bestand
   (bijv. theme-blauwgeel38.css) moet definiëren. Zie theme-example.css
   voor de volledige lijst tokens die een nieuw theme-bestand moet invullen.

   Gebruik in HTML:
     <link rel="stylesheet" href="css/base.css">
     <link rel="stylesheet" href="css/theme-<clubnaam>.css">

   Layout-tokens (spacing/radius/transition) staan HIER in base.css, omdat
   ze los staan van huisstijl. Kleur/font/schaduw-tokens horen in het
   theme-bestand, ook al zijn hun namen (--space-4, --radius-sm, ...)
   hetzelfde soort "design token" — de scheiding is: alles wat per club
   verschilt hoort in het theme-bestand, de rest hoort hier.
   ========================================================================== */

:root{
  /* Layout — universeel, niet clubspecifiek */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;
  --radius-xs:3px;--radius-sm:5px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
  --transition-interactive:150ms ease;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font:400 16px/1.6 var(--font-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--text-link); text-decoration:none; }
a:hover{ color:var(--text-link-hover); text-decoration:underline; text-underline-offset:3px; }

:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }


/* ==========================================================================
   Auth layout (login-pagina)
   ========================================================================== */

.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-auth-bg);
  padding:var(--space-6);
}

.auth-card{
  width:100%;
  max-width:400px;
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-overlay);
  overflow:hidden;
}

.auth-header{
  background:var(--surface-inverse);
  padding:var(--space-6) var(--space-8) var(--space-5);
  text-align:center;
  box-shadow:inset 0 -3px 0 var(--brand-accent);
}

.auth-logo-badge{
  width:92px;
  height:92px;
  margin:0 auto var(--space-2);
  background:var(--color-white);
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-card);
}
.auth-logo-badge img{
  height:76px;
  width:auto;
  display:block;
}

.auth-club-name{
  font:var(--text-brand-heading);
  color:var(--text-on-inverse);
  margin:var(--space-2) 0 0;
}
.auth-club-name .accent{ color:var(--brand-accent); }

.auth-club-sub{
  font:var(--fw-bold,700) 11px/1.2 var(--font-data);
  color:var(--text-on-inverse-muted);
  margin:6px 0 0;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.auth-body{
  padding:var(--space-8);
}

.auth-body h1{
  font:var(--text-brand-subheading);
  color:var(--text-heading);
  margin:0 0 var(--space-6);
  text-align:center;
}

.field{ margin-bottom:var(--space-4); }

.field-label{
  display:block;
  font:600 13px/1.4 var(--font-body);
  color:var(--text-heading);
  margin-bottom:6px;
}

.input-shell{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  height:44px;
  padding:0 var(--space-3);
  background:var(--color-white);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
  transition:var(--transition-interactive);
}
.input-shell:focus-within{
  border-color:var(--brand-focus);
  box-shadow:0 0 0 3px var(--brand-focus-soft);
}
.input-shell.has-error{ border-color:var(--status-loss); }

.input-shell input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font:400 15px/1 var(--font-body);
  color:var(--text-body);
}
.input-shell input::placeholder{ color:var(--text-muted); }

.field-error{
  display:none;
  font:400 12px/1.4 var(--font-body);
  color:var(--status-loss);
  margin-top:5px;
}
.field-error.show{ display:block; }

.toggle-visibility{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  color:var(--text-muted);
  cursor:pointer;
  border-radius:var(--radius-xs);
  transition:var(--transition-interactive);
}
.toggle-visibility:hover{ color:var(--text-heading); }
.toggle-visibility svg{ width:20px; height:20px; }
.toggle-visibility .icon-eye-off{ display:none; }
.toggle-visibility.is-visible .icon-eye{ display:none; }
.toggle-visibility.is-visible .icon-eye-off{ display:block; }

.row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:2px 0 var(--space-6);
  font-size:13px;
}

.remember{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  cursor:pointer;
  color:var(--text-body);
  font:500 14px/1.4 var(--font-body);
}
.remember input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox-box{
  flex:0 0 auto;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-xs);
  border:1px solid var(--border-subtle);
  background:var(--color-white);
  transition:var(--transition-interactive);
}
.remember input:checked + .checkbox-box{
  background:var(--surface-inverse);
  border-color:var(--surface-inverse);
}
.checkbox-box svg{ display:none; width:11px; height:9px; }
.remember input:checked + .checkbox-box svg{ display:block; }

a.link{
  color:var(--text-link);
  font-weight:500;
}
a.link:hover{ color:var(--text-link-hover); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  width:100%;
  height:48px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font:700 15px/1 var(--font-data);
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:var(--transition-interactive);
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--brand-accent);
  border-color:var(--brand-accent);
  color:var(--text-on-accent);
}
.btn-primary:hover{ background:var(--brand-accent-hover); border-color:var(--brand-accent-hover); }

.error-box{
  display:none;
  background:var(--status-loss-soft);
  border:1px solid var(--status-loss-border);
  color:var(--status-loss);
  font-size:13px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  margin-bottom:var(--space-4);
}
.error-box.show{ display:block; }

.divider{
  border:none;
  border-top:1px solid var(--border-subtle);
  margin:var(--space-6) 0 var(--space-4);
}

.footer-note{
  text-align:center;
  font-size:11.5px;
  color:var(--text-muted);
  margin:0;
  line-height:1.5;
}

.org-select{
  text-align:center;
  font-size:12px;
  color:var(--text-muted);
  margin-top:var(--space-4);
}
.org-select a{ font-weight:600; }


/* ==========================================================================
   App shell (topbar + hoofdpagina)
   ========================================================================== */

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--surface-inverse);
  box-shadow:inset 0 -3px 0 var(--brand-accent), 0 2px 12px rgba(0,0,0,.18);
}
.topbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-6);
  display:flex;
  align-items:center;
  gap:var(--space-6);
  height:64px;
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex:0 0 auto;
}
.brand-badge{
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  background:var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.brand-badge img{ height:30px; width:auto; display:block; }
.brand-word{
  font:var(--text-brand-word);
  color:var(--text-on-inverse);
  white-space:nowrap;
}
.brand-word .accent{ color:var(--brand-accent); }

.nav{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  flex:1 1 auto;
  overflow-x:auto;
}
.nav-link{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:0 var(--space-4);
  height:64px;
  font:600 13px/1 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-on-inverse-muted);
  white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:var(--transition-interactive);
}
.nav-link:hover{ color:var(--text-on-inverse); text-decoration:none; }
.nav-link.active{ color:var(--text-on-inverse); border-bottom-color:var(--brand-accent); }
.nav-link svg{ width:16px; height:16px; flex:0 0 auto; }

.topbar-user{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex:0 0 auto;
  padding-left:var(--space-4);
  border-left:1px solid var(--border-on-inverse);
}
.avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--brand-accent);
  color:var(--text-on-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 13px/1 var(--font-data);
  flex:0 0 auto;
}
.user-meta{ display:flex; flex-direction:column; line-height:1.25; }
.user-name{ font:600 13px/1.3 var(--font-body); color:var(--text-on-inverse); }
.user-role{ font:400 11.5px/1.3 var(--font-body); color:var(--text-on-inverse-muted); }
.logout-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-on-inverse);
  background:transparent;
  color:var(--text-on-inverse-muted);
  cursor:pointer;
  transition:var(--transition-interactive);
}
.logout-btn:hover{ color:var(--text-on-inverse); border-color:var(--text-on-inverse-muted); }
.logout-btn svg{ width:16px; height:16px; }

.page{
  max-width:1200px;
  margin:0 auto;
  padding:var(--space-8) var(--space-6) var(--space-10);
}

.welcome-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-6);
  flex-wrap:wrap;
  margin-bottom:var(--space-6);
}
.welcome h1{
  font:var(--text-brand-heading);
  color:var(--text-heading);
  margin:0;
}
.welcome h1 .accent{ color:var(--brand-accent); }
.welcome p{
  margin:var(--space-2) 0 0;
  font-size:14px;
  color:var(--text-muted);
}

.season-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:6px var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--color-white);
  border:1px solid var(--border-subtle);
  font:600 12px/1 var(--font-data);
  color:var(--text-heading);
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:var(--shadow-card);
  white-space:nowrap;
}
.season-chip svg{ width:14px; height:14px; color:var(--brand-accent); }

.filter-bar{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-6);
  flex-wrap:wrap;
}
.search-shell{
  flex:1 1 280px;
  max-width:420px;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  height:44px;
  padding:0 var(--space-3);
  background:var(--color-white);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
  transition:var(--transition-interactive);
}
.search-shell:focus-within{
  border-color:var(--brand-focus);
  box-shadow:0 0 0 3px var(--brand-focus-soft);
}
.search-shell svg{ width:18px; height:18px; color:var(--text-muted); flex:0 0 auto; }
.search-shell input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font:400 15px/1 var(--font-body);
  color:var(--text-body);
}
.search-shell input::placeholder{ color:var(--text-muted); }
.search-clear{
  flex:0 0 auto;
  display:none;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:none;
  background:var(--color-grey-100);
  border-radius:50%;
  color:var(--text-muted);
  cursor:pointer;
}
.search-clear svg{ width:12px; height:12px; }
.search-shell.has-value .search-clear{ display:flex; }

.result-count{
  font:500 13px/1 var(--font-body);
  color:var(--text-muted);
  white-space:nowrap;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--space-5);
}

.team-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  aspect-ratio:1 / 1;
  padding:var(--space-5);
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  transition:var(--transition-interactive);
  overflow:hidden;
}
.team-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:var(--stripe-color, var(--brand-secondary));
}
.team-card:hover{
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-2px);
  text-decoration:none;
}

.team-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-2);
}
.age-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  background:var(--brand-secondary-soft);
  color:var(--brand-secondary-dark);
  font:700 11px/1.4 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.role-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:600 10.5px/1.2 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--text-muted);
}
.role-badge.edit{ color:var(--text-accent); }
.role-badge svg{ width:12px; height:12px; }

.team-code{
  font:var(--text-brand-cardcode);
  color:var(--text-heading);
  margin-top:auto;
}

.team-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding-top:var(--space-3);
  border-top:1px solid var(--border-subtle);
}
.player-count{
  display:flex;
  align-items:center;
  gap:6px;
  font:500 12.5px/1 var(--font-body);
  color:var(--text-muted);
}
.player-count svg{ width:15px; height:15px; }
.go-arrow{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--color-grey-100);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-heading);
  transition:var(--transition-interactive);
  flex:0 0 auto;
}
.go-arrow svg{ width:13px; height:13px; }
.team-card:hover .go-arrow{
  background:var(--brand-accent);
  color:var(--text-on-accent);
}

.empty-state{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  text-align:center;
  padding:var(--space-10) var(--space-6);
  color:var(--text-muted);
}
.empty-state.show{ display:flex; }
.empty-state svg{ width:40px; height:40px; color:var(--color-grey-300); }
.empty-state p{ margin:0; font-size:14px; }
.empty-state strong{ color:var(--text-heading); }


/* ==========================================================================
   Teampagina
   ========================================================================== */

.breadcrumb{
  display:flex;
  align-items:center;
  gap:6px;
  font:500 13px/1 var(--font-body);
  color:var(--text-muted);
  margin-bottom:var(--space-4);
}
.breadcrumb a{ color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--text-link-hover); }
.breadcrumb svg{ width:13px; height:13px; flex:0 0 auto; }
.breadcrumb .current{ color:var(--text-heading); font-weight:600; }

.team-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-6);
  flex-wrap:wrap;
  margin-bottom:var(--space-8);
}
.team-header-main{
  display:flex;
  align-items:center;
  gap:var(--space-4);
}
.team-header-stripe{
  width:6px;
  align-self:stretch;
  min-height:56px;
  border-radius:var(--radius-pill);
  background:var(--stripe-color, var(--brand-secondary));
}
.team-header-title{
  font:var(--text-brand-heading);
  color:var(--text-heading);
  margin:0;
}
.team-header-meta{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-top:6px;
  flex-wrap:wrap;
}

.pill-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  font:700 11px/1.4 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.pill-badge svg{ width:12px; height:12px; }
.pill-badge.badge-category{ background:var(--brand-secondary-soft); color:var(--brand-secondary-dark); }
.pill-badge.badge-edit{ background:#fdf0dd; color:var(--text-accent); }
.pill-badge.badge-view{ background:var(--color-grey-100); color:var(--text-muted); }

.team-header-actions{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  height:40px;
  padding:0 var(--space-4);
  border-radius:var(--radius-sm);
  font:700 13px/1 var(--font-data);
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:var(--transition-interactive);
  background:var(--surface-inverse);
  border:1px solid var(--surface-inverse);
  color:var(--color-white);
}
.btn-secondary:hover{ opacity:.9; }
.btn-secondary svg{ width:15px; height:15px; }

.team-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:var(--space-6);
  align-items:start;
}
@media (max-width: 860px){
  .team-layout{ grid-template-columns:1fr; }
}

.panel{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.panel + .panel{ margin-top:var(--space-6); }

.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  padding:var(--space-5) var(--space-5) var(--space-4);
}
.panel-title{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font:700 15px/1.2 var(--font-body);
  color:var(--text-heading);
}
.panel-title svg{ width:17px; height:17px; color:var(--brand-accent); }
.panel-title .count{
  font-weight:500;
  color:var(--text-muted);
}
.panel-body{ padding:0 var(--space-5) var(--space-5); }
.panel-body-flush{ padding:0; }

/* toon-verwijderde-spelers switch */
.switch-field{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  cursor:pointer;
  user-select:none;
}
.switch-field input{ position:absolute; opacity:0; width:0; height:0; }
.switch-track{
  position:relative;
  flex:0 0 auto;
  width:36px;
  height:20px;
  border-radius:var(--radius-pill);
  background:var(--color-grey-300);
  transition:var(--transition-interactive);
}
.switch-track::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--color-white);
  transition:var(--transition-interactive);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.switch-field input:checked + .switch-track{ background:var(--brand-accent); }
.switch-field input:checked + .switch-track::after{ transform:translateX(16px); }
.switch-label{ font:500 13px/1.3 var(--font-body); color:var(--text-body); }

/* Spelerstabel */
.player-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.player-table thead th{
  text-align:left;
  padding:var(--space-2) var(--space-5);
  font:700 11px/1.2 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-muted);
  background:var(--color-grey-50);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  white-space:nowrap;
}
.player-table tbody td{
  padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-body);
  vertical-align:middle;
}
.player-table tbody tr:last-child td{ border-bottom:none; }
.player-table tbody tr:hover{ background:var(--color-grey-50); }
.player-table .col-nr{ color:var(--text-muted); width:36px; }
.player-table .player-name{ font-weight:600; color:var(--text-heading); }
.player-table .relcode{ font-family:var(--font-data); color:var(--text-muted); }
.player-table tr.is-removed{ opacity:.55; }
.player-table tr.is-removed .player-name{ text-decoration:line-through; }
.player-table .removed-date{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--status-loss);
  font:600 12px/1 var(--font-body);
}
.player-table .removed-date svg{ width:12px; height:12px; }
.table-empty-row td{
  text-align:center;
  color:var(--text-muted);
  padding:var(--space-6);
}

/* Trainerslijst */
.trainer-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.trainer-item{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.trainer-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--brand-secondary-soft);
  color:var(--brand-secondary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 12px/1 var(--font-data);
  flex:0 0 auto;
}
.trainer-meta{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.trainer-name{ font:600 13.5px/1.3 var(--font-body); color:var(--text-heading); }
.trainer-role{ font:400 12px/1.3 var(--font-body); color:var(--text-muted); }

/* Dossiers / records */
.record-list{
  display:flex;
  flex-direction:column;
}
.record-item{
  border-bottom:1px solid var(--border-subtle);
}
.record-item:last-child{ border-bottom:none; }
.record-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  background:transparent;
  border:none;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
}
.record-toggle:hover{ background:var(--color-grey-50); }
.record-toggle-main{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.record-title{ font:600 13.5px/1.3 var(--font-body); color:var(--text-heading); }
.record-meta{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font:400 12px/1 var(--font-body);
  color:var(--text-muted);
}
.record-chevron{
  flex:0 0 auto;
  width:20px; height:20px;
  color:var(--text-muted);
  transition:transform var(--transition-interactive);
}
.record-item.is-open .record-chevron{ transform:rotate(180deg); }
.record-item.is-open .record-toggle{ background:var(--color-grey-50); }

.record-category{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  font:700 10px/1.4 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.03em;
  flex:0 0 auto;
}
.record-category.cat-gesprek{ background:var(--brand-secondary-soft); color:var(--brand-secondary-dark); }
.record-category.cat-aantekening{ background:var(--color-grey-100); color:var(--text-muted); }
.record-category.cat-dossier{ background:#fdf0dd; color:var(--text-accent); }

/* Teamcode-badge op de dossiers-overzichtspagina (records.php), waar één
   lijst items van meerdere teams tegelijk toont. */
.record-category.badge-team-code{ background:var(--surface-inverse); color:var(--text-on-inverse); }

.record-detail{
  display:none;
  padding:0 var(--space-5) var(--space-5);
}
.record-item.is-open .record-detail{ display:block; }
.record-detail-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
  background:var(--color-grey-50);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:var(--space-4);
}
.record-detail-field dt{
  font:700 10.5px/1.2 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-muted);
  margin-bottom:3px;
}
.record-detail-field dd{
  margin:0;
  font:400 13.5px/1.5 var(--font-body);
  color:var(--text-body);
}

.panel-footer{
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border-subtle);
  text-align:center;
}
.panel-footer a{ font:600 13px/1 var(--font-data); text-transform:uppercase; letter-spacing:.04em; }

.access-note{
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-5);
  background:var(--color-grey-50);
  border:1px dashed var(--border-subtle);
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-size:12.5px;
  line-height:1.5;
}
.access-note svg{ width:16px; height:16px; flex:0 0 auto; margin-top:1px; }


/* ==========================================================================
   Formuliervelden — select/textarea/readonly (dossieritem aanmaken, e.d.)
   ========================================================================== */

.input-shell select{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font:400 15px/1 var(--font-body);
  color:var(--text-body);
  appearance:none;
  cursor:pointer;
}
.input-shell.select-shell{ position:relative; }
.input-shell.select-shell::after{
  content:"";
  position:absolute;
  right:var(--space-3);
  top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}
.input-shell.select-shell select{ padding-right:var(--space-5); }

.textarea-shell{
  display:block;
  padding:var(--space-3);
  background:var(--color-white);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
  transition:var(--transition-interactive);
}
.textarea-shell:focus-within{
  border-color:var(--brand-focus);
  box-shadow:0 0 0 3px var(--brand-focus-soft);
}
.textarea-shell textarea{
  display:block;
  width:100%;
  min-height:88px;
  border:none;
  outline:none;
  resize:vertical;
  background:transparent;
  font:400 15px/1.5 var(--font-body);
  color:var(--text-body);
}
.textarea-shell textarea::placeholder{ color:var(--text-muted); }

.readonly-value{
  display:flex;
  align-items:center;
  height:44px;
  padding:0 var(--space-3);
  background:var(--color-grey-50);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
  font:500 14px/1 var(--font-body);
  color:var(--text-muted);
}

.field-hint{
  font:400 12px/1.4 var(--font-body);
  color:var(--text-muted);
  margin-top:5px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
@media (max-width: 560px){
  .form-row{ grid-template-columns:1fr; }
}

.form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-3);
  margin-top:var(--space-6);
}
.form-actions .btn{ width:auto; padding:0 var(--space-6); }
.form-actions a.link{ font-size:13px; }


/* ==========================================================================
   Combobox — zoeken + meerdere personen selecteren (dossieritem "betreft")
   ========================================================================== */

.combobox{ position:relative; }

.combobox-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.combobox-chips:empty{ display:none; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 6px 5px 12px;
  border-radius:var(--radius-pill);
  background:var(--brand-secondary-soft);
  color:var(--brand-secondary-dark);
  font:600 12.5px/1 var(--font-body);
}
.chip.chip-trainer{ background:var(--color-grey-100); color:var(--text-heading); }
.chip-remove{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.08);
  color:inherit;
  cursor:pointer;
  padding:0;
}
.chip-remove svg{ width:10px; height:10px; }
.chip-remove:hover{ background:rgba(0,0,0,.18); }

.combobox-suggestions{
  position:absolute;
  z-index:10;
  left:0; right:0;
  margin:4px 0 0;
  padding:6px;
  list-style:none;
  max-height:220px;
  overflow-y:auto;
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-overlay);
}
.combobox-suggestion{
  padding:8px 10px;
  border-radius:var(--radius-xs);
  font:500 14px/1.3 var(--font-body);
  color:var(--text-body);
  cursor:pointer;
}
.combobox-suggestion:hover{ background:var(--color-grey-50); }
.combobox-suggestion.is-trainer{ color:var(--text-muted); }

.link-button{
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:var(--text-link);
  font:600 12px/1.4 var(--font-body);
  cursor:pointer;
}
.link-button:hover{ color:var(--text-link-hover); text-decoration:underline; }
.link-button.danger{ color:var(--text-muted); display:inline-flex; align-items:center; padding:4px; border-radius:var(--radius-sm); }
.link-button.danger:hover{ color:var(--status-loss); background:var(--status-loss-soft); text-decoration:none; }
.link-button.danger svg{ width:15px; height:15px; }

.player-table .col-actions{ width:32px; }
.remove-player-form{ display:inline-block; margin:0; }


/* ==========================================================================
   Checkbox-grid — meerdere teams/categorieën kiezen (admin.php, roltoewijzing)
   ========================================================================== */

.checkbox-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-height:220px;
  overflow-y:auto;
  padding:2px;
}

.checkbox-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle);
  background:var(--color-white);
  font:500 13px/1 var(--font-body);
  color:var(--text-body);
  cursor:pointer;
  transition:var(--transition-interactive);
  user-select:none;
}
.checkbox-pill input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox-pill:has(input:checked){
  background:var(--brand-accent);
  border-color:var(--brand-accent);
  color:var(--text-on-accent);
}
.checkbox-pill:hover{ border-color:var(--brand-focus); }


/* ==========================================================================
   Trainingsschema (schedule.php, project-brief §6)

   Ondergrond-kleuren (kunstgras/gras) zijn bewust GEEN merk-tokens: ze
   coderen het fysieke veldtype, niet de clubidentiteit, dus ze blijven
   gelijk voor elke club/thema (net als in de aangeleverde referentie).
   ========================================================================== */

:root{
  --turf-color:#0e8f86;
  --turf-soft:#e3f3f1;
  --grass-color:#5f8f2e;
  --grass-soft:#eef4e4;
}

.day-pills{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.day-pill{
  padding:7px var(--space-4);
  border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle);
  background:var(--color-white);
  font:600 13px/1 var(--font-body);
  color:var(--text-body);
  cursor:pointer;
  text-decoration:none;
  transition:var(--transition-interactive);
}
.day-pill:hover{ border-color:var(--brand-focus); text-decoration:none; }
.day-pill.on{
  background:var(--brand-primary);
  border-color:var(--brand-primary);
  color:var(--text-on-inverse);
}

.schedule-legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  padding:var(--space-3) var(--space-5);
  font:500 12.5px/1.3 var(--font-body);
  color:var(--text-muted);
}
.schedule-legend .sw{
  display:inline-block;
  width:11px; height:11px;
  border-radius:3px;
  margin-right:6px;
  vertical-align:-1px;
}
.schedule-legend .sw.turf{ background:var(--turf-color); }
.schedule-legend .sw.grass{ background:var(--grass-color); }

.schedule-note{
  display:flex;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-5);
  margin-bottom:var(--space-6);
  border-radius:var(--radius-md);
  background:var(--color-grey-50);
  border:1px solid var(--border-subtle);
  font:400 13px/1.5 var(--font-body);
  color:var(--text-muted);
}
.schedule-note svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--brand-accent); }

.schedule-timeslot{ margin-bottom:var(--space-8); }
.schedule-timeslot-title{
  display:flex;
  align-items:baseline;
  gap:var(--space-2);
  font:700 15px/1.3 var(--font-display);
  color:var(--text-heading);
  margin:0 0 var(--space-4);
}
.schedule-timeslot-title .count{ font:500 12.5px/1 var(--font-body); color:var(--text-muted); }

.field-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--space-4);
}
.field-card{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.field-card.is-empty{ opacity:.55; }
.field-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:var(--color-grey-50);
  border-bottom:1px solid var(--border-subtle);
}
.field-card-name{ font:600 13.5px/1.3 var(--font-body); color:var(--text-heading); }
.field-tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 9px;
  border-radius:var(--radius-pill);
  font:600 11px/1.6 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.field-tag.turf{ background:var(--turf-soft); color:var(--turf-color); }
.field-tag.grass{ background:var(--grass-soft); color:var(--grass-color); }
.field-tag svg{ width:10px; height:10px; }
.field-card-body{ padding:var(--space-3) var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.field-card-empty{ font:400 12.5px/1.4 var(--font-body); color:var(--text-muted); padding:var(--space-2) 0; }

.schedule-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  background:var(--color-grey-50);
  border:1px solid var(--border-subtle);
  border-left:3px solid var(--brand-accent);
}
.schedule-chip-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.schedule-chip-team{ font:600 13px/1.3 var(--font-body); color:var(--text-heading); }
.schedule-chip-meta{ font:400 11.5px/1.3 var(--font-body); color:var(--text-muted); }
.schedule-chip-badge{
  flex:0 0 auto;
  font:600 10.5px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  background:var(--surface-inverse);
  color:var(--text-on-inverse);
}
.schedule-chip-badge.match{ background:var(--status-loss-soft, #fae5e5); color:var(--status-loss, #c93a3a); }

/* Weekagenda (team-zoekopdracht / "Alle dagen") — één rij per training, i.p.v. het veldrooster-per-tijdslot. */
.agenda-list{ display:flex; flex-direction:column; }
.agenda-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border-subtle);
}
.agenda-list .agenda-row:last-child{ border-bottom:none; }
.agenda-time{
  flex:0 0 52px;
  font:700 13.5px/1.3 var(--font-data);
  color:var(--text-heading);
}
.agenda-team{ flex:0 0 auto; min-width:70px; font:600 13.5px/1.3 var(--font-body); color:var(--text-heading); }
.agenda-field{ display:flex; align-items:center; gap:var(--space-2); flex:1 1 auto; min-width:0; }
.agenda-part{ font:400 12.5px/1.3 var(--font-body); color:var(--text-muted); }
.agenda-remark{ flex:1 1 100%; font:400 12px/1.4 var(--font-body); color:var(--text-muted); padding-left:64px; }

.print-only{ display:none; }

@media print{
  body > .topbar,
  .page > *:not(.print-only){ display:none !important; }
  .print-only{ display:block !important; }
  .print-table{ width:100%; border-collapse:collapse; margin-bottom:var(--space-6); }
  .print-table caption{ text-align:left; font:700 14px/1.4 var(--font-display); margin-bottom:6px; }
  .print-table th, .print-table td{ border:1px solid #999; padding:5px 8px; font:400 12px/1.4 var(--font-body); text-align:left; }
  .print-table th{ background:#eee; }
}


/* ==========================================================================
   Scouting (scouting.php, scouting_player.php — project-brief §3)
   ========================================================================== */

.watchlist-group + .watchlist-group{ margin-top:var(--space-6); }
.watchlist-group-title{
  font:700 11px/1.4 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-muted);
  padding:var(--space-4) var(--space-5) var(--space-2);
}

.pitch-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:var(--space-6);
  align-items:start;
}
@media (max-width: 700px){
  .pitch-layout{ grid-template-columns:1fr; }
}

.pitch-wrap{
  position:relative;
  width:100%;
  max-width:220px;
  aspect-ratio:2 / 3;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border-subtle);
}
.pitch-svg{ width:100%; height:100%; display:block; }
.pitch-turf{ fill:var(--turf-soft, #e3f3f1); }
.pitch-line{ fill:none; stroke:var(--turf-color, #0e8f86); stroke-width:0.6; opacity:.55; }
.pitch-marker{ fill:var(--brand-accent); stroke:var(--color-white); stroke-width:0.6; }
.pitch-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--space-4);
  font:500 12.5px/1.4 var(--font-body);
  color:var(--text-muted);
  background:rgba(255,255,255,0.55);
}

.pitch-form .checkbox-grid{ max-height:none; }

.rating-form .form-row{ flex-wrap:wrap; }

.scouting-note{
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-subtle);
}
.scouting-note:last-child{ border-bottom:none; }
.scouting-note-meta{
  font:700 10.5px/1.2 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-muted);
  margin-bottom:4px;
}
.scouting-note-text{
  font:400 13.5px/1.5 var(--font-body);
  color:var(--text-body);
}