/* ===========================
   Design tokens / thema hooks
   <div class="entries-container">
  <div class="subtitle">
    <div class="header">Naam</div>
    <div class="header">Tijd</div>
    <div class="header">Klasse</div>
  </div>

  <div class="row">
    <div class="cell" data-label="Naam">Roeiclub A</div>
    <div class="cell nr" data-label="Tijd">06:42</div>
    <div class="cell klasse" data-label="Klasse">Dames 8+</div>
  </div>
</div>
   =========================== */
:root {
  --font-sans: "Sarabun", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-muted: #666666;

  --color-accent: #bb0000;         /* primair merk/accent */
  --color-accent-contrast: #ffffff;

  --color-link: #cc0000;
  --color-link-contrast: #ffffff;

  --color-alert-bg: #e00000;
  --color-alert-fg: #ffffff;

  --color-info-bg: #cfeaff;
  --color-info-fg: #000000;

  --color-border: #d0d0d0;
  --color-border-strong: #000000;

  --color-row-alt: #eeeeee;
  --color-chip: lightsteelblue;
  --color-chip-hover: #d3d3d3;
  --color-highlight: #ffeb3b;

  --radius-sm: 2px;
  --radius-md: 6px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.06);
  --shadow-md: 0 6px 12px rgba(0,0,0,.18);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --fs-xs: .75rem;   /* 12px */
  --fs-sm: .875rem;  /* 14px */
  --fs-md: 1rem;     /* 16px */
  --fs-lg: 1.25rem;  /* 20px */
  --fs-xl: 1.5rem;   /* 24px */
  --fs-2xl: 2.25rem; /* 36px */
}

/* =========
   Global
   ========= */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}

img, video, canvas, iframe, table { max-width: 100%; height: auto; }

/* =========
   Header
   ========= */
header {
  position: relative;
  width: 100%;
  background: var(--color-bg);
  padding: var(--space-4) 0;
}
.head_event  { font-size: 1.5625rem; font-weight: 700; }
.head_title  { font-size: var(--fs-2xl); font-weight: 700; }
.head_subtitle { font-size: var(--fs-xl); }

.head_alert, .head_inform {
  width: 100%;
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
}
.head_alert {
  background: var(--color-alert-bg);
  color: var(--color-alert-fg);
  font-size: var(--fs-xl);
  font-weight: 700;
}
.head_inform {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
  font-size: var(--fs-md);
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0 0;
}
header nav li { display: block; }
header nav a {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  padding: .375rem 1rem;
  border: 1px solid var(--color-link);
  color: var(--color-link);
}
header nav a:hover, header nav a:focus {
  background: var(--color-link);
  color: var(--color-link-contrast);
}

/* =========
   Footer
   ========= */
footer { position: relative; left: 0; bottom: 0; }
footer p { font-size: var(--fs-xs); margin: 0; }

/* =======================================
   Cluster navigator (blijft tabel-achtig)
   ======================================= */
.cluster-container {
  display: table;
  width: 100%;
  max-width: 800px;
  overflow-x: auto;
  font-size: var(--fs-sm);
}
.cluster-container .row  { display: table-row; }
.cluster-container .cell {
  display: table-cell;
  margin: var(--space-1) var(--space-2);
  padding: var(--space-2);
  vertical-align: top;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  text-align: center;
}
.cluster-container .main { font-weight: 700; }
.cluster-container .cell a { text-decoration: none; color: inherit; }
.cluster-container .cell:hover,
.cluster-container .cell a:hover {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.cluster-container .cell_sel,
.cluster-container .cell_sel a {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* =======================================
   Entries (tabel op desktop → kaart op mobiel)
   ======================================= */
.entries-container {
  display: table;
  width: 100%;
  max-width: 800px;
  overflow-x: visible; /* geen scroll nodig; mobiel wordt kaart */
  font-size: var(--fs-md);
}
.entries-container .spacer { width: 100%; height: 10px; }

.entries-container .cluster {
  display: table-caption;
  width: 100%;
  padding: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 var(--space-1) 0;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid #fff;
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
  font-weight: 700;
}
.entries-container .cluster .right {
  float: right;
  font-size: .875em;
  font-weight: 400;
  vertical-align: bottom;
  margin-top: var(--space-1);
}

.entries-container .subtitle {
  display: table-header-group;
  font-weight: 700;
  border-bottom: 1px solid var(--color-border-strong);
}

.entries-container .row { display: table-row; }

.entries-container .header,
.entries-container .cell {
  display: table-cell;
  padding: var(--space-2);
  border-bottom: 1px solid #d3d3d3;
  border-radius: var(--radius-sm);
  vertical-align: top;
}
.entries-container .odd { background: var(--color-row-alt); }
.entries-container .nr,
.entries-container .amount { text-align: right; }
.entries-container .klasse { width: 100px; }

/* Teams chips + detail popover */
.entries-container .teams .one {
  float: left;
  margin: var(--space-1) var(--space-4) var(--space-1) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid grey;
  background: var(--color-chip);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.entries-container .teams .one:hover {
  background: var(--color-chip-hover);
  border-color: var(--color-accent);
  cursor: pointer;
}
.entries-container .teams .teamdetail { position: absolute; }
.entries-container .teams .teamdetail .entrydetail {
  cursor: auto;
  min-width: 300px;
  margin: var(--space-2) var(--space-5) var(--space-4) var(--space-2);
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-link);
  box-shadow: var(--shadow-md);
}
.entries-container .teams .entrydetail .vereniging {
  font-weight: 700;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 0.9rem;
  padding: var(--space-2) var(--space-3);
}
.entries-container .teams .entrydetail .boot,
.entries-container .teams .entrydetail .competitors {
  padding: var(--space-2);
  background: bisque;
  border-top: 1px solid var(--color-border-strong);
  line-height: 1.5;
}
.entries-container .teams .entrydetail .title {
  float: left;
  width: 50px;
  margin: 0 var(--space-2) 0 0;
  text-align: right;
  font-weight: 700;
}

/* Utilities */
.button { float: left; }
.button:hover { text-decoration: underline; cursor: pointer; }
.winner { background: var(--color-highlight); margin: var(--space-6) !important; font-weight: 700; }

/* =======================================
   Mobile overrides (plaats NA main.css & thema)
   ======================================= */
@media (max-width: 720px) {
  /* Basis typografie & spacing */
  :root {
    --fs-md: 1rem;       /* 16px */
    --fs-lg: 1.125rem;   /* 18px */
    --fs-xl: 1.375rem;   /* 22px */
    --fs-2xl: 1.75rem;   /* 28px */
    --space-4: 0.875rem; /* iets compacter op mobiel */
    --space-5: 1rem;
    --space-6: 1.25rem;
  }

  body { line-height: 1.5; }

  /* ---------- Header ---------- */
  header { padding: var(--space-4) 0 var(--space-3); }
  .head_event   { font-size: 1.25rem; }
  .head_title   { font-size: var(--fs-2xl); }
  .head_subtitle{ font-size: var(--fs-lg); }

  .head_alert,
  .head_inform {
    padding: var(--space-4);
    margin: var(--space-3) 0;
  }

  /* Nav: horizontale pill-scroll met grote tap-doelen */
  header nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    margin: var(--space-3) calc(var(--space-4) * -1) 0; /* randen tot scherm */
    padding: 0 var(--space-4);
    scroll-snap-type: x mandatory;
  }
  header nav li { scroll-snap-align: start; }
  header nav a {
    padding: .5rem .875rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* ---------- Cluster navigator → stacked ---------- */
  .cluster-container {
    display: block;
    max-width: none;
    font-size: var(--fs-sm);
  }
  .cluster-container .row  { display: block; }
  .cluster-container .cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    white-space: normal;
    padding: .625rem .75rem;
    margin: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
  }
  .cluster-container .cell:last-child { border-bottom: 1px solid var(--color-border); }
  .cluster-container .main { font-weight: 700; }

  /* ---------- Entries → kaarten ---------- */
  .entries-container {
    display: block;
    max-width: none;
    font-size: var(--fs-md);
  }

  /* Clusterbalk blijft, kleiner en “sticky” voor lange lijsten */
  .entries-container .cluster {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .5rem var(--space-4);
    margin: var(--space-4) 0 var(--space-2);
    border-radius: 0; /* full-bleed gevoel op mobiel */
  }
  .entries-container .cluster .right {
    float: none;
    display: block;
    margin-top: .25rem;
    text-align: left;
    opacity: .9;
  }

  /* Kolomkoppen verbergen (we labelen cellen zelf indien beschikbaar) */
  .entries-container .subtitle,
  .entries-container .header { display: none; }

  /* Elke rij wordt een kaart */
  .entries-container .row {
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: .5rem;
    margin: 0 var(--space-4) var(--space-4);
  }
  .entries-container .odd { background: var(--color-bg); } /* zebra niet nodig */

  /* Cell → label:waarde lay-out
     Tip: voeg data-label="Kolomnaam" toe voor auto-labels */
  .entries-container .cell {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .75rem;
    padding: .5rem .25rem;
    border: 0;
    border-bottom: 1px dashed var(--color-border);
    border-radius: 0;
    align-items: start;
  }
  .entries-container .cell:last-child { border-bottom: 0; }

  /* Optioneel: toont kolomtitel vóór de celwaarde */
  .entries-container .cell[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-muted);
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: .125rem;
  }

  /* Veelvoorkomende kolommen */
  .entries-container .nr,
  .entries-container .amount { text-align: left; }
  .entries-container .klasse { width: auto; }

  /* ---------- Teams: chips stapelen & popover fullscreen ---------- */
  .entries-container .teams { display: block; }
  .entries-container .teams .one {
    float: none;
    display: inline-block;
    margin: .25rem .5rem .25rem 0;
    padding: .375rem .625rem;
    border-radius: var(--radius-md);
  }

  /* Popover “sheet” */
  .entries-container .teams .teamdetail {
    position: fixed;
    inset: 1rem;
    z-index: 50;
    display: none;      /* toggle met JS: .is-open → display:block */
  }
  .entries-container .teams .teamdetail.is-open { display: block; }

  .entries-container .teams .teamdetail .entrydetail {
    position: relative;
    min-width: auto;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: auto;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-md);
  }
  .entries-container .teams .entrydetail .vereniging {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .entries-container .teams .entrydetail .boot,
  .entries-container .teams .entrydetail .competitors {
    background: #fff;
    border-top: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .entries-container .teams .entrydetail .title {
    float: none;
    width: auto;
    text-align: left;
    margin: 0 0 .25rem 0;
  }

  /* ---------- Buttons / utilities ---------- */
  .button {
    float: none;
    display: inline-block;
    padding: .625rem .875rem;
    border: 1px solid var(--color-link);
    border-radius: 999px;
  }
  .winner {
    margin: var(--space-4) !important;
    display: block;
  }

  /* ---------- Footer ---------- */
  footer p {
    font-size: var(--fs-sm);
    padding: var(--space-3) var(--space-4);
  }
}

/* Extra compacte modus voor heel smal (≤ 380px) */
@media (max-width: 380px) {
  header nav a { padding: .5rem .625rem; }
  .entries-container .row { padding: .375rem; }
  .entries-container .cell { grid-template-columns: 1fr; }
}