/* com_time 1.15.0 — clubrecords en resultatenoverzicht. Compact, gestreepte rijen, gsm eerst. Huisstijl tpl_time2026. */
.time-records { --tr-navy: var(--time-navy, #050060); --tr-cyan: var(--time-cyan, #35A9BC); --tr-line: var(--time-line, #e3e7ef);
  --tr-ice: var(--time-ice, #f4f7fb); --tr-muted: var(--time-muted, #6b7280); --tr-band: #f5f8fb;
  max-width: 1100px; margin: 0 auto; padding: 4px 0 32px; font-size: .95rem; line-height: 1.35; }
.time-records--module { padding: 0; max-width: none; }

/* kop */
.tr-head h1 { color: var(--tr-navy); margin: 0 0 4px; font-size: 1.8rem; }
.tr-intro { color: var(--tr-muted); margin: 0 0 14px; max-width: 70ch; font-size: .9rem; }

/* filters: alles op één regel waar het past */
.tr-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--tr-line); }
.tr-filter { display: flex; flex-direction: column; gap: 3px; }
.tr-filter-label { font-size: 10px; font-weight: 700; color: var(--tr-muted); text-transform: uppercase; letter-spacing: .1em; }
.tr-seg { display: inline-flex; border: 1px solid var(--tr-line); border-radius: 9px; overflow: hidden; background: #fff; }
.tr-seg-btn { padding: 5px 11px; color: var(--tr-navy); text-decoration: none !important; font-weight: 600; font-size: .85rem; white-space: nowrap; text-align: center; }
.tr-seg-btn + .tr-seg-btn { border-left: 1px solid var(--tr-line); }
.tr-seg-btn:hover { background: var(--tr-ice); }
.tr-seg-btn.is-on { background: var(--tr-cyan); color: #fff; }

/* categorie / groep */
.tr-cat { border: 1px solid var(--tr-line); border-radius: 12px; background: #fff; margin: 0 0 10px; overflow: hidden; }
.tr-cat > summary, .tr-cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 14px; }
.tr-cat > summary { cursor: pointer; list-style: none; }
.tr-cat > summary::-webkit-details-marker { display: none; }
.tr-cat > summary::before { content: "▸"; color: var(--tr-muted); margin-right: 6px; transition: transform .15s; display: inline-block; font-size: .8rem; }
.tr-cat[open] > summary::before { transform: rotate(90deg); }
.tr-cat-name { font-weight: 700; color: var(--tr-navy); font-size: 1rem; flex: 1; }
.tr-cat-age { font-weight: 500; color: var(--tr-muted); font-size: .85rem; margin-left: 4px; }
.tr-cat-count { color: var(--tr-muted); font-size: .8rem; white-space: nowrap; }

/* tabel — resets tegen tabelstijlen van de template */
.time-records .tr-table { width: 100%; border-collapse: collapse; margin: 0; background: none; font-size: inherit; }
.time-records .tr-table th, .time-records .tr-table td { border: 0 !important; background: none; box-shadow: none; }
.time-records .tr-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tr-muted);
  padding: 5px 14px; border-top: 1px solid var(--tr-line) !important; border-bottom: 1px solid var(--tr-line) !important; }
.time-records .tr-table td { padding: 6px 14px; vertical-align: baseline; }
.time-records .tr-table tbody.tr-rec:nth-of-type(even) > tr > td,
.time-records .tr-table--multi tbody > tr:nth-child(even) > td { background: var(--tr-band); }
.time-records .tr-table tr.tr-tie td { padding-top: 0; }
.tr-event { font-weight: 700; white-space: nowrap; width: 1%; }
.tr-table--multi .tr-event { width: 18%; white-space: normal; }
.tr-time { white-space: nowrap; }
.tr-time strong, .tr-line .tr-time { font-variant-numeric: tabular-nums; color: var(--tr-navy); }
.tr-tie-label { font-weight: 400; color: var(--tr-muted); font-size: .8rem; }
.tr-meet { color: var(--tr-muted); }
.tr-date { white-space: nowrap; color: var(--tr-muted); font-variant-numeric: tabular-nums; width: 1%; }

/* kleine markeringen */
.tr-course { color: var(--tr-muted); font-size: .75rem; font-weight: 600; }
.tr-new { display: inline-block; padding: 0 6px; border-radius: 999px; background: #3f9f5b; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; }
.tr-flag { color: var(--tr-muted); font-size: .72rem; border-bottom: 1px dotted var(--tr-muted); cursor: help; }
.tr-pill { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--tr-ice); color: var(--tr-navy); }
.tr-pill--new { background: #3f9f5b; color: #fff; }
.tr-pill--course { background: #e8f7fa; color: #07535f; }
.tr-pill--record { background: var(--tr-navy); color: #fff; }
.tr-empty { color: var(--tr-muted); }
.tr-more { margin: 10px 0 0; font-weight: 700; }
.tr-more a { color: var(--tr-navy); }

/* teller + ranglijst */
.tr-count { border: 1px solid var(--tr-line); background: #fff; color: var(--tr-muted); font: inherit; font-size: .72rem; font-weight: 700;
  min-width: 22px; padding: 0 6px; line-height: 1.6; border-radius: 999px; margin-left: 6px; cursor: pointer; vertical-align: 1px; }
.tr-count::after { content: " ▾"; font-size: .65rem; }
.tr-count:hover, .tr-count[aria-expanded="true"] { background: var(--tr-cyan); border-color: var(--tr-cyan); color: #fff; }
.tr-count[aria-expanded="true"]::after { content: " ▴"; }
.time-records .tr-table tr.tr-rank-row td { padding: 0 14px 10px; }
.tr-rank { list-style: none; margin: 0; padding: 4px 10px; background: #fff; border: 1px solid var(--tr-line); border-radius: 10px; font-size: .85rem; }
.tr-rank-item { display: grid; grid-template-columns: 20px 62px minmax(0, 1fr) auto; gap: 0 10px; padding: 3px 0; align-items: baseline; }
.tr-rank-item + .tr-rank-item { border-top: 1px solid var(--tr-line); }
.tr-rank-pos { color: var(--tr-muted); font-size: .75rem; text-align: right; }
.tr-rank-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-rank-item.is-record .tr-rank-time { color: var(--tr-navy); }
.tr-rank-sub { color: var(--tr-muted); font-size: .75rem; text-align: right; }
.tr-rank-wrap { margin-top: 6px; }

/* naast elkaar */
.tr-cell { width: 41%; }
.tr-holder + .tr-holder { margin-top: 4px; }
.tr-line { display: block; }
.tr-line .tr-names { margin-left: 4px; }
.tr-sub { display: block; color: var(--tr-muted); font-size: .78rem; }
.tr-none { color: var(--tr-line); }

/* nieuwe records */
.tr-new-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--tr-line); border-radius: 12px; overflow: hidden; background: #fff; }
.tr-new-item { padding: 8px 14px; }
.tr-new-item:nth-child(even) { background: var(--tr-band); }
.tr-new-top { display: flex; align-items: baseline; gap: 6px; }
.tr-new-time { font-size: 1.05rem; color: var(--tr-navy); font-variant-numeric: tabular-nums; }
.tr-new-event { font-weight: 700; }

/* mijn records */
.tr-swimmer { border: 1px solid var(--tr-line); border-radius: 12px; background: #fff; margin: 0 0 12px; overflow: hidden; }
.tr-swimmer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; background: var(--tr-ice); }
.tr-swimmer-name { font-weight: 700; color: var(--tr-navy); font-size: 1.05rem; }
.tr-swimmer-meta { color: var(--tr-muted); font-size: .85rem; }
.tr-pb-title { margin: 0; padding: 8px 14px 2px; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tr-muted); }
.tr-pb { list-style: none; margin: 0; padding: 0 0 6px; }
.tr-pb-item { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 5px 14px; }
.tr-pb-item:nth-child(even) { background: var(--tr-band); }
.tr-pb-event { font-weight: 700; }
.tr-pb-time { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.tr-pb-sub { grid-column: 1 / -1; color: var(--tr-muted); font-size: .78rem; }

/* uploadformulier */
.tr-upload { border: 1px solid var(--tr-line); border-radius: 12px; background: #fff; padding: 14px; display: grid; gap: 10px; }
.tr-upload label { font-weight: 600; color: var(--tr-navy); display: block; margin-bottom: 3px; }
.tr-upload input[type=file], .tr-upload select { width: 100%; }
.tr-upload-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tr-upload button { background: var(--tr-navy); color: #fff; border: 0; border-radius: 999px; padding: 8px 18px; font-weight: 700; cursor: pointer; }
.tr-upload-hint { color: var(--tr-muted); font-size: .8rem; margin: 0; }

/* ===== gsm ===== */
@media (max-width: 680px) {
  .time-records { font-size: .92rem; }
  .tr-head h1 { font-size: 1.5rem; }
  .tr-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tr-seg { display: flex; width: 100%; }
  .tr-seg-btn { flex: 1 1 0; padding: 6px 4px; font-size: .82rem; }
  .tr-cat > summary, .tr-cat-head { padding: 9px 12px; align-items: center; }
  .time-records .tr-table thead { display: none; }
  .time-records .tr-table, .time-records .tr-table tbody { display: block; width: 100%; }
  /* één record = één compact blok: nummer + tijd, dan zwemmer, dan wedstrijd + datum */
  .time-records .tr-table tbody.tr-rec { padding: 7px 12px; }
  .time-records .tr-table tbody.tr-rec:nth-of-type(even) { background: var(--tr-band); }
  .time-records .tr-table tbody.tr-rec:nth-of-type(even) > tr > td { background: none; }
  .time-records .tr-table tbody.tr-rec > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
  .time-records .tr-table tbody.tr-rec > tr.tr-tie { margin-top: 4px; }
  .time-records .tr-table td { display: block; padding: 0 !important; width: auto; }
  .tr-event { grid-column: 1; white-space: normal; }
  .tr-time { grid-column: 2; text-align: right; }
  .tr-names { grid-column: 1 / -1; }
  .tr-meet { grid-column: 1; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tr-date { grid-column: 2; text-align: right; font-size: .78rem; }
  .time-records .tr-table tr.tr-rank-row { display: block; margin-top: 6px; }
  .time-records .tr-table tr.tr-rank-row[hidden] { display: none; }
  .tr-rank-item { grid-template-columns: 18px 58px minmax(0, 1fr); }
  .tr-rank-sub { grid-column: 3; text-align: left; }
  /* naast elkaar: kolommen onder elkaar */
  .time-records .tr-table--multi tbody > tr { display: block; padding: 7px 12px; }
  .time-records .tr-table--multi tbody > tr:nth-child(even) { background: var(--tr-band); }
  .time-records .tr-table--multi tbody > tr > td { background: none !important; }
  .tr-table--multi .tr-event { width: auto; margin-bottom: 2px; }
  .tr-table--multi td.tr-cell { width: auto; display: grid !important; grid-template-columns: 52px minmax(0, 1fr); padding: 2px 0 !important; }
  .tr-table--multi td.tr-cell::before { content: attr(data-label); color: var(--tr-muted); font-size: .72rem; font-weight: 700; padding-top: 2px; }
  .tr-table--multi td.tr-cell > * { grid-column: 2; }
}

/* ===== 1.6.0 — alles open/dicht, uploaden op de pagina ===== */
.tr-toolbar { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 8px; }
.tr-tool { border: 1px solid var(--tr-line); background: #fff; color: var(--tr-navy); font: inherit; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.tr-tool:hover { background: var(--tr-ice); }
.tr-admin { margin: 0 0 12px; }
.tr-admin > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.tr-admin > summary::-webkit-details-marker { display: none; }
.tr-admin-btn { display: inline-block; background: var(--tr-navy); color: #fff; font-weight: 700; font-size: .85rem; padding: 6px 14px; border-radius: 999px; }
.tr-admin-btn::before { content: "⬆ "; }
.tr-admin[open] .tr-admin-btn { background: var(--tr-cyan); }
.tr-admin-note { color: #7c4e00; background: #fff4e0; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tr-admin .tr-upload { margin-top: 8px; }
.tr-upload-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.tr-upload-check { font-weight: 400 !important; margin: 0 !important; display: inline-flex !important; gap: 6px; align-items: center; }
@media (max-width: 680px) { .tr-upload-grid { grid-template-columns: 1fr; } .tr-toolbar { justify-content: flex-start; } }

/* ===== 1.7.0 — vaste kolommen over de hele pagina, ranglijst in dezelfde kolommen, plaats + tooltip ===== */
.time-records .tr-table { table-layout: fixed; }
.tr-table--single col.c-first { width: 26%; }
.tr-table--single col.c-time { width: 12%; }
.tr-table--single col.c-name { width: 28%; }
.tr-table--single col.c-place { width: 22%; }
.tr-table--single col.c-date { width: 12%; }
.tr-table--multi col.c-first { width: 22%; }
.time-records .tr-table td, .time-records .tr-table th { overflow-wrap: anywhere; }
.time-records .tr-table .tr-r { text-align: right; }
.tr-event, .tr-table--multi .tr-event { width: auto; white-space: normal; }
.tr-first { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tr-label { min-width: 0; }
.tr-time { white-space: nowrap; }
.tr-meet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* teller: altijd op dezelfde plek, rechts in de eerste kolom */
.tr-count { flex: none; margin: 0; min-width: 26px; text-align: center; }
.tr-count--solo { display: inline-block; border: 1px solid transparent; background: none; color: var(--tr-line); cursor: default; }
.tr-count--solo::after { content: ""; }
.tr-table--multi .tr-line .tr-count { margin-left: 6px; }
/* ranglijst = gewone rijen, iets lichter, met een smalle cyaan rand */
.time-records .tr-table tr.tr-rank-row > td { background: #fff !important; font-size: .88rem; padding-top: 3px; padding-bottom: 3px; color: #2c2f4a; }
.time-records .tr-table tr.tr-rank-row > td:first-child { box-shadow: inset 3px 0 0 var(--tr-cyan); }
.time-records .tr-table tr.tr-rank-row .tr-first { justify-content: flex-end; }
.tr-rank-row .tr-rank-pos { color: var(--tr-muted); font-size: .78rem; min-width: 26px; text-align: center; }
.tr-rank-row .tr-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.tr-rank-row .tr-meet, .tr-rank-row .tr-date { color: var(--tr-muted); }
/* ranglijst in de kolommen 'naast elkaar' */
ol.tr-rank { list-style: decimal; margin: 6px 0 0; padding: 4px 8px 4px 30px; border: 0; border-left: 3px solid var(--tr-cyan); border-radius: 0; background: #fff; font-size: .82rem; }
ol.tr-rank li { display: list-item; padding: 1px 0; border: 0; }
ol.tr-rank .tr-rank-time { font-weight: 700; font-variant-numeric: tabular-nums; }
ol.tr-rank .tr-rank-sub { color: var(--tr-muted); font-size: .75rem; }
/* tooltip met de wedstrijdnaam (muis of aantikken) */
.tr-tip { position: relative; border-bottom: 1px dotted currentColor; cursor: help; outline: none; }
/* zonder JavaScript: tooltip in CSS; met JavaScript: zwevend kader dat nergens wordt afgesneden (zie records.js) */
html:not(.tr-js) .tr-tip:hover::after, html:not(.tr-js) .tr-tip:focus::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; width: max-content; max-width: 280px;
  white-space: normal; background: var(--tr-navy); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.3; padding: 5px 9px; border-radius: 8px; box-shadow: 0 4px 14px rgba(5,0,96,.18); }
.tr-meet .tr-tip, .tr-sub .tr-tip { color: inherit; }
.time-records .tr-table td.tr-meet { overflow: visible; }

@media (max-width: 680px) {
  .time-records .tr-table { table-layout: auto; }
  .time-records .tr-table colgroup { display: none; }
  .time-records .tr-table tbody.tr-rec > tr.tr-rank-row { grid-template-columns: 28px 62px minmax(0, 1fr) auto; gap: 0 8px; margin-top: 0; padding: 2px 0; }
  .time-records .tr-table tbody.tr-rec > tr.tr-rank-row[hidden] { display: none; }
  .time-records .tr-table tr.tr-rank-row > td { background: none !important; box-shadow: none !important; }
  .tr-rank-row .tr-event { grid-column: 1; grid-row: 1 / span 2; }
  .tr-rank-row .tr-time { grid-column: 2; text-align: left; }
  .tr-rank-row .tr-names { grid-column: 3 / -1; }
  .tr-rank-row .tr-meet { grid-column: 3; }
  .tr-rank-row .tr-date { grid-column: 4; }
  .time-records .tr-table tbody.tr-rec > tr.tr-rank-row:first-of-type { margin-top: 6px; }
  html:not(.tr-js) .tr-tip:hover::after, html:not(.tr-js) .tr-tip:focus::after { left: auto; right: 0; }
}

/* ===== 1.11.0 — provinciaal record ===== */
.tr-prov { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--tr-navy); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; }

/* ===== 1.13.0 — grafieken, federatie, vergelijken ===== */
.tr-chart { width: 100%; height: auto; display: block; margin: 6px 0 4px; }
.tr-chart .tr-grid { stroke: var(--tr-line); stroke-width: 1; }
.tr-chart .tr-grid--v { stroke-dasharray: 2 4; }
.tr-chart .tr-axis { fill: var(--tr-muted); font-size: 11px; font-family: inherit; }
.tr-chart .tr-axis--hint { font-size: 10px; }
.tr-chart .tr-axis--label { fill: var(--tr-navy); font-weight: 600; font-size: 12px; }
.tr-chart .tr-axis--value { fill: var(--tr-navy); font-weight: 700; font-size: 12px; }
.tr-chart .tr-bar { fill: var(--tr-cyan); }
.tr-chart circle { stroke: #fff; stroke-width: 1.5; }
.tr-progress { padding: 4px 14px 12px; border-top: 1px solid var(--tr-line); }
.tr-progress-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-select { font: inherit; font-size: .85rem; padding: 4px 8px; border: 1px solid var(--tr-line); border-radius: 8px; background: #fff; color: var(--tr-navy); max-width: 100%; }
.tr-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tr-muted { color: var(--tr-muted); font-weight: 400; }
.tr-small { font-size: .78rem; }
.time-records table.tr-mini { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 4px; }
.time-records table.tr-mini th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tr-muted); padding: 3px 6px; border: 0 !important; border-bottom: 1px solid var(--tr-line) !important; }
.time-records table.tr-mini td { padding: 3px 6px; border: 0 !important; }
.time-records table.tr-mini tr:nth-child(even) td { background: var(--tr-band); }
.tr-mini .tr-t { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tr-navy); }
.tr-mini .tr-m { color: var(--tr-muted); }
.tr-fed { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1.5; }
.tr-fed--zwemfed { background: #e8f0fb; color: #1d4f91; }
.tr-fed--sporta { background: #fff4e0; color: #7c4e00; }
.tr-compare-form { border: 1px solid var(--tr-line); border-radius: 12px; background: #fff; padding: 12px 14px; margin-bottom: 12px; }
.tr-compare-grid { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; margin-bottom: 8px; }
.tr-compare-grid label, .tr-label-text, .tr-swimmers legend { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tr-muted); margin-bottom: 3px; }
.tr-seg-btn input { position: absolute; opacity: 0; pointer-events: none; }
.tr-swimmers { border: 0; padding: 0; margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow: auto; }
.tr-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--tr-line); border-radius: 999px; padding: 2px 10px; font-size: .82rem; cursor: pointer; background: #fff; }
.tr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tr-chip.is-on { background: var(--tr-navy); color: #fff; border-color: var(--tr-navy); }
.tr-chip.is-on .tr-muted { color: #cfd3f5; }
.tr-button { background: var(--tr-navy); color: #fff; border: 0; border-radius: 999px; padding: 6px 16px; font-weight: 700; cursor: pointer; }
.tr-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; }
.tr-legend i, .tr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }

/* ===== resultatenoverzicht (coach, Team Manager-indeling) ===== */
.tr-small { font-size: .78rem; }
.tr-matrix-module .tr-break { flex-basis: 100%; height: 0; }
a.tr-tool { text-decoration: none !important; display: inline-block; line-height: 1.5; }
.tr-matrix-module .tr-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin: 0 0 8px; }
.tr-matrix-module .tr-toolbar > span { margin-right: auto; }

/* zwemmers kiezen: zelfde kaart als een categorie, ingeklapt zodra er een overzicht staat */
.tr-picker-body { padding: 0 14px 12px; margin: 0; border-top: 1px solid var(--tr-line); }
.tr-picker-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 0 8px; }
.time-records input.tr-search { font: inherit !important; font-size: .85rem !important; line-height: 1.3 !important; height: auto !important; min-height: 0 !important;
  width: 220px !important; max-width: 100%; margin: 0 !important; padding: 4px 10px !important; border: 1px solid var(--tr-line) !important; border-radius: 999px !important;
  background: #fff !important; color: var(--tr-navy); box-shadow: none !important; }
.tr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.tr-chips .tr-chip { margin: 0; font-weight: 500; line-height: 1.5; }
.tr-chip[hidden] { display: none; }
.tr-picker-body .tr-button { font-size: .85rem; }

.tr-mx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; } /* macOS-schuifbalk niet over de rij "Beste 50m" */
.tr-mx-none { padding: 0 14px 10px; margin: 0; }
.time-records table.tr-mx-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: .8rem; margin: 0; background: none; }
.time-records .tr-mx-table th, .time-records .tr-mx-table td { border: 0 !important; padding: 4px 5px; white-space: nowrap; background: #fff; box-shadow: none; }
.time-records .tr-mx-table thead th { font-size: 10px; font-weight: 700; color: var(--tr-muted); text-transform: none; letter-spacing: .02em;
  border-top: 1px solid var(--tr-line) !important; border-bottom: 1px solid var(--tr-line) !important; text-align: right; position: sticky; top: 0; }
.time-records .tr-mx-table td { text-align: right; font-variant-numeric: tabular-nums; border-left: 1px solid #eef1f6 !important; }
.time-records .tr-mx-table tbody tr:nth-child(even) td { background: var(--tr-band); }
.time-records .tr-mx-table .tr-mx-place, .time-records .tr-mx-table .tr-mx-date, .time-records .tr-mx-table .tr-mx-pool { text-align: left; border-left: 0 !important; }
.time-records .tr-mx-table th.tr-mx-place { width: 180px; }
.time-records .tr-mx-table th.tr-mx-date { width: 66px; }
.time-records .tr-mx-table th.tr-mx-pool { width: 42px; }
/* nummer zonder tijd in de periode: grijze kolom */
.tr-mx-empty-key { background: #eceff3; padding: 0 5px; border-radius: 4px; }
.time-records .tr-mx-table thead th.is-empty { color: #b5bcc8; }
.time-records .tr-mx-table td.is-empty, .time-records .tr-mx-table tbody tr:nth-child(even) td.is-empty,
.time-records .tr-mx-table tfoot td.is-empty { background: #eceff3; }
.time-records .tr-mx-table thead th.is-empty { background: #eceff3; }
.time-records .tr-mx-table td.tr-mx-place { position: sticky; left: 0; z-index: 1; max-width: 190px; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: normal; }
.time-records .tr-mx-table thead th.tr-mx-place { position: sticky; left: 0; z-index: 2; }
.time-records .tr-mx-table .tr-mx-date, .time-records .tr-mx-table .tr-mx-pool { color: var(--tr-muted); }
.tr-mx-place .tr-fed { margin-left: 4px; }
.tr-mx-t { display: block; color: #1f2937; }
.tr-mx-t.is-pb { font-weight: 800; color: var(--tr-navy); }
.tr-mx-t.is-split { font-style: italic; color: var(--tr-muted); }
.tr-mx-t.is-lo::after, .tr-mx-lo-key { content: "a"; font-size: .65em; vertical-align: super; color: var(--tr-cyan); margin-left: 1px; }
.tr-mx-lo-key { font-size: .8em; }
.tr-mx-t small { font-size: .68em; color: var(--tr-muted); margin-right: 3px; font-weight: 400; }
.time-records .tr-mx-table tfoot th, .time-records .tr-mx-table tfoot td { border-top: 1px solid var(--tr-line) !important; background: var(--tr-ice); }
.time-records .tr-mx-table tfoot th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tr-muted); position: sticky; left: 0; }
.tr-mx-legend { margin-top: 4px; }
@media (max-width: 680px) {
  .time-records .tr-mx-table th.tr-mx-place { width: 112px; }
  .time-records .tr-mx-table th.tr-mx-date { width: 58px; }
  .time-records .tr-mx-table th.tr-mx-pool { width: 34px; }
  .time-records .tr-mx-table th, .time-records .tr-mx-table td { padding: 4px 5px; }
  .time-records input.tr-search { width: 100% !important; }
  .tr-matrix-module .tr-break { display: none; }
  .tr-matrix-module .tr-filters > .tr-filter:nth-child(3), .tr-matrix-module .tr-filters > .tr-filter:nth-child(7) { grid-column: 1 / -1; }
  .tr-matrix-module .tr-toolbar { justify-content: flex-start; }
  .tr-matrix-module .tr-toolbar > span { flex-basis: 100%; }
  /* 2.0.3 — gsm: datum en bad onder de plaats, zodat er meer nummers in beeld passen */
  .time-records table.tr-mx-table { min-width: calc(108px + 52px * var(--mx-cols, 8)) !important; }
  .time-records .tr-mx-table th.tr-mx-place { width: 108px; }
  /* 2.6.5 — kolommen echt weg (display:none): Safari/iOS behandelt "width:0" in een vaste tabel als "auto", waardoor een brede lege strook ontstond */
  .time-records .tr-mx-table .tr-mx-date, .time-records .tr-mx-table .tr-mx-pool { display: none !important; }
  .time-records .tr-mx-table td.tr-mx-place { white-space: normal; line-height: 1.2; max-width: 108px; box-shadow: 4px 0 6px -4px #05006026; }
  .time-records .tr-mx-table td.tr-mx-place > .tr-tip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-mx-sub { display: block !important; font-size: .68rem; color: var(--tr-muted); white-space: nowrap; }
  .tr-mx > summary { flex-wrap: wrap; row-gap: 2px; }
  .tr-mx .tr-cat-count { flex-basis: 100%; padding-left: 16px; }
  .tr-mx-legend { font-size: .75rem; }
}
.tr-mx-sub { display: none; }

/* afdrukken: enkel het overzicht, liggend, één zwemmer per blok */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.tr-printing * { visibility: hidden !important; }
  body.tr-printing .tr-print-me, body.tr-printing .tr-print-me * { visibility: visible !important; }
  body.tr-printing .tr-print-me { position: absolute; left: 0; top: 0; width: 100%; }
  .tr-noprint { display: none !important; }
  .tr-mx { break-inside: avoid; page-break-inside: avoid; border: 0 !important; }
  .tr-mx > summary::before { display: none; }
  .tr-mx-scroll { overflow: visible; border: 0; }
  .time-records .tr-mx-table { font-size: 8pt; }
  .time-records .tr-mx-table th, .time-records .tr-mx-table td { padding: 2px 4px; position: static !important; border: 1px solid #999 !important; background: #fff !important; }
  .time-records .tr-mx-table .is-empty { background: #e6e6e6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .time-records table.tr-mx-table { min-width: 0 !important; table-layout: auto; }
  .tr-fed { border: 1px solid #999; }
}

/* zwevende tooltip (records.js): boven alles, ook buiten schuivende tabellen */
.tr-tipbox { position: fixed; z-index: 10000; max-width: min(300px, calc(100vw - 16px)); pointer-events: none;
  background: var(--time-navy, #050060); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.35;
  padding: 6px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(5,0,96,.22); opacity: 0; transform: translateY(3px);
  transition: opacity .12s, transform .12s; }
.tr-tipbox.is-on { opacity: 1; transform: none; }
.tr-tipbox::after { content: ""; position: absolute; left: var(--tr-arrow, 50%); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--time-navy, #050060); }
.tr-tipbox.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--time-navy, #050060); }
.time-records [data-tip] { cursor: help; }
@media print { .tr-tipbox { display: none !important; } }

/* ===== com_time 1.19.0 — knop naar de clubrecords-PDF ===== */
.tr-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; }
.tr-pdf-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--tr-navy, #050060); color: #fff !important; font-weight: 700; font-size: .85rem; text-decoration: none !important; }
.tr-pdf-btn:hover, .tr-pdf-btn:focus-visible { background: var(--tr-cyan, #00b7e5); color: var(--tr-navy, #050060) !important; }
.tr-pdf-hint { color: var(--tr-muted, #6b6f8a); font-size: .78rem; }
.tr-upload--sporta{margin-top:14px;padding-top:14px;border-top:1px dashed var(--tr-line,#dbe6ee)} /* 2.5.3 Sporta-wedstrijd ophalen */

/* 2.9.3 — niveau-label (Loodsvisje, Orka, Haai) bij een besttijd */
.tr-pill--lvl { background: #e0f2fe; color: #075985; }
.tr-pill--orka { background: #0f172a; color: #fff; }
.tr-pill--haai { background: #475569; color: #fff; }