/* ==== Kleuren & basis ==== */
:root{
  --home-black:#000;           /* thuisshirt: zwart */
  --home-blue:#0a57a6;         /* thuisshirt: blauw (accent) */
  --away-green:#228b22;        /* uitshirt: forestgreen */
  --text-on-dark:#fff;
}

.site-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:#111;
  position: relative; /* toegevoegd */
}

/* Thuisshirt-thema: zwart met blauwe rand rechts */
.site-header.home-kit{
  background:
    linear-gradient(to right, var(--home-black) 0 70%, var(--home-blue) 70% 100%);
}

/* Uitshirt-thema: forestgreen met 3 witte verticale strepen */
.site-header.away-kit{
  /* drie smalle witte banen (ca. 3%, herhalend per 20%) */
  background:
    repeating-linear-gradient(90deg,
      var(--away-green) 0 17%,
      #fff 17% 20%,
      var(--away-green) 20% 37%,
      #fff 37% 40%,
      var(--away-green) 40% 57%,
      #fff 57% 60%,
      var(--away-green) 60% 100%
    );
}

.club-logo img{
  height:60px;
  width:auto;
  display:block;
}
.club-name{
  color:var(--text-on-dark);
  margin:0;
  font:700 1.8rem/1.1 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.2px;
}

/* ==== Responsiveness ==== */
@media (max-width:720px){
  .club-logo img{ height:52px; }
  .club-name{ font-size:1.5rem; }
  .site-header{ padding:10px 12px; gap:10px; }
}
@media (max-width:480px){
  .site-header{
    /* houd logo + titel op één lijn, maar met wat lucht */
    padding:8px 10px;
    gap:8px;
  }
  .club-logo img{ height:44px; }
  .club-name{ font-size:1.25rem; }
}

/* Optioneel: header vastzetten bovenaan */
.sticky-header{
  position:sticky; top:0; z-index:1000;
}

body { font-family: system-ui, sans-serif; margin: 20px; }
    h1 { margin: 0; }
    hr { margin: 15px 0; }
    .buttons { display: flex; gap: 10px; flex-wrap: wrap; }
    .buttons a {
        display: inline-block;
        padding: 8px 14px;
        background: #003366;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
    }
    .buttons a:hover { background: #0055aa; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { padding: 6px; border-bottom: 1px solid #ddd; }
    th { background: #f7f7f7; }
    .wdl-cell {
    font-weight: bold;
    text-align: center;
    padding: 4px 6px;
    border-radius: 4px;
    color: #000;
}
.wdl-W { background-color: #d4edda; } /* lichtgroen */
.wdl-L { background-color: #f8d7da; } /* lichtrood */
.wdl-D { background-color: #fff3cd; } /* lichtgeel */



/* uitslagen.php */

  h1{margin:0 0 10px}
    h2{margin-top:30px;border-bottom:2px solid #ccc;padding-bottom:4px}
    table{width:100%;border-collapse:collapse;margin-top:8px;margin-bottom:20px}
    th,td{border-bottom:1px solid #eee;padding:6px 6px;text-align:left}
    th{background:#fafafa}
    .badge{display:inline-block;padding:2px 6px;border-radius:4px;border:1px solid #ddd;font-size:12px}
    .ha-H{background:#e8f5e9}
    .ha-A{background:#e3f2fd}
    .wdl-W{background:#e8f5e9;border-color:#7cb342}
    .wdl-D{background:#fffde7;border-color:#f9a825}
    .wdl-L{background:#ffebee;border-color:#e53935}
    .muted{color:#777}
    .stats{background:#f5f5f5;border:1px solid #ddd;padding:6px;margin-top:6px;margin-bottom:10px;display:inline-block}


    /* NAV buttons – responsive en toegankelijk */
.buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start; /* links uitlijnen i.p.v. centreren */
  margin: 12px auto;
  
}

.buttons a{
  flex: 0 0 150px; /* vaste breedte zodat ze gelijk zijn */
  text-align: center;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  background: #003366;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}

.buttons a:hover,
.buttons a:focus {
  background: #0055aa; /* lichter blauw */
  outline: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transform: translateY(-2px); /* iets omhoog */
}

/* Actieve pagina */
.buttons a.active,
.buttons a[aria-current="page"] {
  background: #0a57a6;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

/* Small screens: knoppen volle breedte */
@media (max-width:600px){
  .buttons{ justify-content:stretch; }
  .buttons a{ flex:1 1 100%; }
}


/* clubs.php */

/* Compacte tabelstijl voor clubs.php */
.compact-table {
  border-collapse: collapse;
  width: 80%;
  font-size: 0.9rem;
}

.compact-table th {
  background: #0a57a6;  /* blauw header */
  color: #fff;
  padding: 4px 6px;
  text-align: center;
}

.compact-table tr:hover {
    background-color: #f1f7ff; /* zacht blauw */
}


.compact-table td {
  padding: 3px 6px;
  border-bottom: 1px solid #ccc;
}

.compact-table tr:nth-child(even) {
  background: #f9f9f9;
}

.compact-table td:nth-child(2) { background: #e8f5e9; }   /* League - lichtgroen */
.compact-table td:nth-child(3) { background: #fff3e0; }   /* Beker - lichtoranje */
.compact-table td:nth-child(4) { background: #e3f2fd; }   /* Friendly - lichtblauw */
.compact-table td:nth-child(5) { background: #f3e5f5; }   /* Intertoto - lichtpaars */
.compact-table td:nth-child(6) { background: #ffebee; }   /* EC Playoffs - lichtrood */
.compact-table td:nth-child(7) { background: #f1f8e9; }   /* Prom/Degr - lichtgroen */
.compact-table td:last-child { font-weight: bold; }

/* Compacte wedstrijdtabel */
.compact-table td:first-child,
.compact-table th:first-child {
  max-width: 200px;     /* tegenstander max 200px breed */
  white-space: nowrap;  /* niet afbreken */
  overflow: hidden;     /* verberg te lange tekst */
  text-overflow: ellipsis; /* ... bij te lang */
}

/* Smalle resultaatkolommen */
.compact-table th:nth-child(n+2):nth-child(-n+8),
.compact-table td:nth-child(n+2):nth-child(-n+8) {
  width: 60px;         /* vaste breedte */
  text-align: center;  /* cijfers in het midden */
  padding: 3px 4px;    /* compacter */
}


/* Standen.php */

.stand-table {
  border-collapse: collapse;
  width: 60%;
  font-size: 0.9rem;
}

.stand-table th {
  background: #0a57a6;  /* blauw header */
  color: #fff;
  padding: 4px 6px;
  text-align: center;
}

.stand-table tr:hover {
    background-color: #f1f7ff; /* zacht blauw */
}


.stand-table td {
  padding: 3px 6px;
  border-bottom: 1px solid #ccc;
}

.stand-table tr:nth-child(even) {
  background: #f9f9f9;
}

.stand-table td:nth-child(1) { background: #1aba28; text-align: center; }   /* League - lichtgroen */
.stand-table td:nth-child(2) { background: #9cadb4; text-align: center; }   /* League - lichtgroen */
.stand-table td:nth-child(3) { background: #fff3e0; }   /* Beker - lichtoranje */
.stand-table td:nth-child(4) { background: #e3f2fd; }   /* Friendly - lichtblauw */
.stand-table td:nth-child(5) { background: #f3e5f5; }   /* Intertoto - lichtpaars */
.stand-table td:nth-child(6) { background: #ffebee; }   /* EC Playoffs - lichtrood */
.stand-table td:nth-child(7) { background: #f1f8e9; }   /* Prom/Degr - lichtgroen */
.stand-table td:nth-child(8) { background: #9cadb4; }   /* Prom/Degr - lichtgroen */
.stand-table td:nth-child(9) { background: #1aba28; }   /* Prom/Degr - lichtgroen */
.stand-table td:nth-child(10) { background: #fff3e0; }   /* Prom/Degr - lichtgroen */

/* Smalle resultaatkolommen */
.stand-table th:nth-child(n+3):nth-child(-n+10),
.stand-table td:nth-child(n+3):nth-child(-n+10) {
  width: 90px;         /* vaste breedte */
  text-align: center;  /* cijfers in het midden */
  padding: 3px 4px;    /* compacter */
}

/* seizoenen.php */
.season-block {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.season-item {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.season-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.season-title {
    font-weight: bold;
    margin-bottom: 6px;
    color: #333;
}

/* Seizoensknoppen */
.buttons.seizoenen {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 per rij */
  gap: 8px;
  max-width: 600px;
  margin: 0 auto 16px auto; /* centreren */
}

.buttons.seizoenen a {
  display: block;
  text-align: center;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-on-dark);
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.15);
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
}

/* Thuisshirt kleur */
.buttons.seizoenen a:nth-child(odd) {
  background: var(--home-black);
  border-color: var(--home-blue);
}

/* Uitshirt kleur */
.buttons.seizoenen a:nth-child(even) {
  background: var(--away-green);
  border-color: #fff;
}

/* Hover effect */
.buttons.seizoenen a:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

/* Actieve button */
.buttons.seizoenen a.active {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}


#seizoenhoofdstuk { scroll-margin-top: 90px; }


/* clubinfo.php */
  .clubinfo-wrap{max-width:980px;margin:0 auto;padding:10px}
    .clubcard{
      display:grid;grid-template-columns:100px 1fr;gap:14px;
      background:#f7f7f7;border:1px solid #ddd;border-radius:8px;padding:12px
    }
    .clubcard img{width:100%;height:auto;display:block;border-radius:4px}
    .clubfacts{margin:0}
    .clubfacts dt{font-weight:700}
    .clubfacts dd{margin:0 0 8px 0}
    .kits img{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:4px}
    .kits figcaption{margin-top:6px;color:#333;font-weight:600}
    @media (max-width:720px){
      .clubcard{grid-template-columns:70px 1fr}
      .kits{grid-template-columns:1fr}
    }

    .kits {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.kits figure {
    flex: 1 1 250px;
    text-align: center;
}

  .palmares {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    max-width: 800px;
    margin: 0 auto 20px;
}

.palmares h2 {
    margin-top: 0;
}

@media (max-width: 768px) {
    .kits {
        flex-direction: column;
        align-items: center;
    }
    .palmares {
        margin-top: 10px;
    }
}

/* Palmares op clubinfo – los blok, geen overlap */
.palmares-box{
  background:#f8f8f8; border:1px solid #ddd; border-radius:8px;
  padding:12px; max-width:800px; margin:12px auto 20px;
}
.palmares-box h2{ margin:0 0 6px; }
.palmares-list{ margin:0; padding-left:18px; }
.palmares-list li{ margin:4px 0; }

/* kleurbolletjes via list-style */
.palmares-list li.ok  { list-style: disc; color:#1b5e20; }   /* groen */
.palmares-list li.mid { list-style: disc; color:#f57c00; }   /* oranje */
.palmares-list li.bad { list-style: disc; color:#b00020; }   /* rood */

/* Shirts blijven boven, palmares schuift eronder op smal scherm */
.kits{ margin-bottom:16px; }
@media (max-width:768px){
  .kits{ flex-direction:column; align-items:center; }
  .palmares-box{ margin-top:10px; }
}


    .records-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:14px;
}
.records-card{
  background:#f7f7f7;border:1px solid #ddd;border-radius:8px;padding:10px;
}
.records-card h3{margin:0 0 6px}
@media (max-width:900px){
  .records-grid{grid-template-columns:1fr}
}

 .reports-list{list-style:none;margin:0;padding:0}
    .reports-list li{margin:0 0 .5rem 0}
    .report-toggle{width:100%;text-align:left;border:0;background:#f3f4f6;padding:.55rem .75rem;border-radius:8px;font-weight:600;cursor:pointer}
    .report-details{display:none;margin:.5rem 0 0;padding:.75rem;border-left:3px solid #9ca3af;background:#fafafa;border-radius:6px}
    .report-details h4{margin:.2rem 0 .3rem}
    .report-details .intro{font-style:italic;margin:.2rem 0 .5rem}
    .report-details .verslag{white-space:pre-wrap;line-height:1.45}

    .notice {
  margin: .25rem 0 1rem;
  font-size: .9rem;
  opacity: .8;
}

.external-sites { margin-top: 1rem; }
.external-sites h2 { margin: .25rem 0 .5rem; }

.site-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0;
  list-style: none;
}
.site-chips li { margin: 0; }
.site-chips a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .65rem; border: 1px solid #e5e7eb; border-radius: 999px;
  background: #fff; text-decoration: none; font-weight: 600;
}
.site-chips a:hover { background: #f8fafc; }
.site-chips .icon { line-height: 1; }

.site-info { margin-top: 1rem; }
.site-info h3 { margin: .25rem 0 .5rem; }
.notice { margin: .25rem 0 0; font-size: .9rem; opacity: .8; }

/* layout binnen Site Info */
.site-info .clubfacts {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 6px 12px;
  margin: .25rem 0 0;
}
.site-info .clubfacts dt {
  font-weight: 700;
}
.site-info .clubfacts dd {
  margin: 0;
}

/* subtiele lijn tussen regels (optioneel) */
.site-info .clubfacts dt,
.site-info .clubfacts dd {
  padding: 4px 0;
  border-bottom: 1px dashed #e5e7eb;
}
.site-info .clubfacts dt:nth-last-child(-n+2),
.site-info .clubfacts dd:nth-last-child(-n+2) {
  border-bottom: 0; /* geen randje op laatste regel */
}

/* waarschuwing netjes in de card */
.site-info .notice {
  margin-top: .75rem;
  padding: .5rem .6rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: .9rem;
  opacity: .9;
}

.records-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  position:relative;
}

/* Accent-streep links (in clubkleuren) */
.records-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--home-blue);
  border-radius:12px 0 0 12px;
  pointer-events:none;
}

.records-card h3{ margin:0 0 8px; font-weight:800; letter-spacing:.2px; }

/* Link rechtsboven naar Manager de Luxe */
.mdl-link{
  margin-left:auto;               /* duwt 'm naar rechts */
  display:inline-flex; align-items:center;
  padding:6px 10px;
  font-weight:700;
  color:var(--text-on-dark);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  transition:background .2s ease, box-shadow .2s ease, transform .08s ease;
}
.mdl-link:hover,.mdl-link:focus{
  background:rgba(255,255,255,.18);
  outline:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transform:translateY(-1px);
}
.mdl-link::after{
  content:"↗"; margin-left:.35rem; font-size:.9em; opacity:.8;
}

/* Klein scherm: iets compacter */
@media (max-width:480px){
  .mdl-link{ padding:5px 8px; font-size:.9rem; }
}


.indexcurrentseason {
   margin-top:.75rem;
  padding:.5rem .6rem;
  color: ForestGreen;
  border: 1px solid ForestGreen;   /* <- deze overwint */
  border-radius: 8px;
  background:#f8fafc;
  font-size:.9rem;
  opacity:.9;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: .03em; /* 0.02–0.05em werkt meestal mooi */
  font-weight: 700;
  
}


/* Seizoens-banner (als je die nog niet in CSS had) */
.indexcurrentseason{
  margin-top:.75rem; padding:.5rem .6rem;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px;
  font-size:.9rem; opacity:.9; text-align:center;
}

/* Competitie kleuren o.b.v. competitie2 */
.badge.comp2-league    { background:ForestGreen; color:#fff; border-color:ForestGreen; }
.badge.comp2-beker     { background:RoyalBlue;   color:#fff; border-color:RoyalBlue; }
.badge.comp2-intertoto { background:#b48cf2;     color:#fff; border-color:#9a71e0; }
.badge.comp2-friendly  { background:#28e797; color:#fff; border-color:#c441e1; }
.badge.comp2-ecpo      { background:#e57373;     color:#fff; border-color:#d9534f; }
.badge.comp2-promdegr  { background:#7cc59b;     color:#073b22; border-color:#6ab58b; }
.badge.comp2-other     { background:#f0f3f6;     color:#222; border-color:#d6dbe1; }

.compact-table th, .compact-table td { padding:.35rem .5rem; }

.form-row { display:flex; gap:6px; margin:6px 0 10px; }
.form-dot { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-weight:700; font-size:.85em; border:1px solid #ddd; }
.form-W { background:#e6ffed; }
.form-D { background:#f5f5f5; }
.form-L { background:#ffeaea; }

.compact-table small { color:#666; }

.records-wrap { max-width:1100px; margin: 16px auto; padding: 0 10px; }
    .chips { display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap; }
    .chip { display:inline-block; padding:.35rem .7rem; border-radius:999px; border:1px solid #ddd; text-decoration:none; }
    .chip.active { background:#111; color:#fff; border-color:#111; }
    .grid { display:grid; grid-template-columns: 1fr; gap:18px; }
    @media (min-width: 900px){ .grid{ grid-template-columns: 1fr 1fr; } }
    .card { border:1px solid #eee; border-radius:12px; padding:14px; background:#fff; }
    .compact-table { border-collapse: collapse; width: 100%; }
    .compact-table th, .compact-table td { padding:.35rem .5rem; border-bottom:1px solid #eee; }
    .compact-table tr:nth-child(even) { background:#fbfbfb; }
    .muted { color:#777; margin:.5rem 0 1rem; font-style: italic; }
    .form-row { display:flex; gap:6px; margin:6px 0 10px; }
    .form-dot { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
      border-radius:50%; font-weight:700; font-size:.85em; border:1px solid #ddd; }
    .form-W { background:#e6ffed; } .form-D { background:#f5f5f5; } .form-L { background:#ffeaea; }

/* Info-card header netter */
.info-card details > summary{
  cursor:pointer; font-weight:600; padding:.35rem 0; display:flex; align-items:center; gap:.5rem;
}
.info-card details > summary::-webkit-details-marker{ display:none; }
.info-card details > summary::before{ content:'▸'; }
.info-card details[open] > summary::before{ content:'▾'; }

/* Nieuwe glossary-legend (3-koloms grid, responsive) */
.glossary-legend{
  --col1: 140px; --col3: 260px;
  display:grid; grid-template-columns: var(--col1) 1fr var(--col3);
  border:1px solid #e9e9e9; border-radius:12px; overflow:hidden;
  margin:.5rem 0 1rem;
}
.glossary-legend li{ display:contents; }              /* elk <li> is één rij */
.glossary-legend li > span{
  padding:.55rem .75rem; border-top:1px solid #f3f3f3;
}
.glossary-legend li.head > span{
  background:#0f172a; color:#fff; font-weight:600; border-top:none;
}
.glossary-legend li:nth-child(even) > span{
  background:#fafafa;
}
.glossary-legend li > span:last-child{
  background:#fffaf2;              /* subtiele notitie-kleur */
}
.glossary-legend b{
  display:inline-block; min-width:3ch; font-weight:700;
}

/* Mobile: stapel de notitie onder de betekenis */
@media (max-width: 720px){
  .glossary-legend{ grid-template-columns: 120px 1fr; }
  .glossary-legend li.head > span:nth-child(3){ display:none; }
  .glossary-legend li > span:nth-child(3){ grid-column: 2 / -1; border-top:none; }
}

.reportfacts dt{font-weight:700;margin-top:6px}
.reportfacts dd{margin:0 0 8px 0}
.rep-line{margin:2px 0}
.muted{color:#666}

/* styling reporters sectie */
.reportfacts dt {
  font-weight: 700;
  margin-top: 12px;
  padding: 4px 6px;
  background: #f0f4f8;   /* lichtgrijs/blauw */
  border-left: 4px solid #0a57a6; /* blauw accent */
  border-radius: 3px;
}

.reportfacts dd {
  margin: 0 0 12px 0;
  padding-left: 8px;
}

.rep-line {
  margin: 2px 0;
}

.muted {
  color: #666;
}
/* styling reporters sectie */
.reportfacts dt {
  font-weight: 700;
  margin-top: 14px;
  margin-bottom: 4px;
  color: #17b895;   /* donkerblauw krantnaam */
  font-size: 1.05em;
}

.reportfacts dd {
  margin: 0 0 12px 0;
  padding-left: 8px;
}

.rep-line {
  margin: 3px 0;
}

.rep-line strong {
  color: #0055aa;  /* lichtere blauw voor reporternaam */
}

.muted {
  color: #666;
  font-style: italic;
}