/* Top Zwemsport Den Haag - huisstijl Sportise: donkerblauw #05002d, lichtblauw #2ea3f2, Mulish. */
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/mulish.woff2) format("woff2"); }
:root {
  --navy: #05002d; --blue: #2ea3f2; --blue-donker: #1479c4; --bg: #f3f6fb; --wit: #fff; --ink: #05002d; --muted: #555a78;
  --lijn: #dfe4ef; --lijn-zacht: #edf0f7; --rood: #c8323a; --rood-bg: #fdecec; --oranje-bg: #fff1dc; --oranje: #8a4b00; --groen: #1d7f4f;
  --rond: 10px; --schaduw: 0 1px 2px rgba(5, 0, 45, .06), 0 4px 16px rgba(5, 0, 45, .05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 15px/1.5 "Mulish", "Segoe UI", system-ui, sans-serif; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 800; }
a { color: var(--blue-donker); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.zacht { color: var(--muted); }
.klein { font-size: 13px; }
small { color: var(--muted); font-weight: 400; }

/* Balk bovenaan */
.balk { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; }
.balk-in { max-width: 1500px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 24px; min-height: 58px; }
.merk { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.merk-naam { font-size: 17px; font-weight: 400; letter-spacing: .01em; }
.merk-naam b { font-weight: 800; color: var(--blue); }
.env { display: inline-block; background: var(--oranje-bg); color: var(--oranje); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; }
.tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; align-self: stretch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 0; color: #c9cbe0; padding: 0 14px; cursor: pointer; font-weight: 700; white-space: nowrap; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.tab:hover { color: #fff; }
.tab.aan { color: #fff; border-bottom-color: var(--blue); }
.teller { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.wie { display: flex; align-items: center; gap: 14px; font-size: 13px; white-space: nowrap; }
.wie span { display: flex; flex-direction: column; line-height: 1.25; text-align: right; font-weight: 700; }
.wie small { color: #a9acc9; }
.uit { color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .3); padding: 5px 10px; border-radius: 6px; }
.uit:hover { border-color: #fff; }

.pagina { max-width: 1500px; margin: 0 auto; padding: 24px 20px 40px; }
.voet { max-width: 1500px; margin: 0 auto; padding: 0 20px 30px; font-size: 13px; color: var(--muted); }
.kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kop h1::after { content: ""; display: block; width: 36px; height: 4px; background: var(--blue); margin-top: 8px; border-radius: 2px; }
.kop-rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.klein-kop { align-items: flex-start; margin-bottom: 10px; }
.tussen { margin: 26px 0 10px; }
.laden, .leegte { color: var(--muted); padding: 28px; text-align: center; background: var(--wit); border: 1px dashed var(--lijn); border-radius: var(--rond); }
.tip { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* Knoppen en velden */
.knop { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 7px 13px; font-weight: 700; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.knop:hover { border-color: #b9c1d6; }
.knop.hoofd { background: var(--blue); border-color: var(--blue); color: #fff; }
.knop.hoofd:hover { background: var(--blue-donker); border-color: var(--blue-donker); }
.knop.rood { background: var(--rood); border-color: var(--rood); color: #fff; }
.knop.rood-rand { color: var(--rood); }
.knop.groot { padding: 11px 16px; width: 100%; font-size: 16px; }
.knop:disabled { opacity: .55; cursor: default; }
.knop:focus-visible, .tab:focus-visible, .blok:focus-visible, .link:focus-visible, .lijst-rij:focus-visible { outline: 3px solid rgba(46, 163, 242, .55); outline-offset: 1px; }
.link { background: none; border: 0; padding: 0; color: var(--blue-donker); text-decoration: underline; cursor: pointer; text-align: left; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea { background: var(--wit); border: 1px solid #c9d0e0; border-radius: 8px; padding: 7px 10px; min-height: 36px; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(46, 163, 242, .35); border-color: var(--blue); }
input[type=color] { width: 56px; height: 36px; padding: 2px; border: 1px solid #c9d0e0; border-radius: 8px; background: #fff; }
.veld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; flex: 1 1 140px; min-width: 0; }
.veld > input, .veld > select, .veld > textarea { width: 100%; }
.veld > input[type=color] { width: 56px; }
.veld-naam { font-size: 13px; font-weight: 700; }
.hulp { font-size: 12px; color: var(--muted); }
.rij { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.rij .klein-knop { margin-bottom: 12px; }
.vink { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; cursor: pointer; }
.vink input { width: 18px; height: 18px; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.duw { margin-left: auto; }
.formfout { background: var(--rood-bg); color: #7d1b21; border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.formfout p + p, .formfout ul + p { margin-top: 8px; }
.formfout .knop { margin-top: 8px; white-space: normal; text-align: left; }
.waarschuwing { color: var(--oranje); font-size: 13px; font-weight: 700; }
.wissel { display: inline-flex; background: #e4e9f3; border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.wissel button { background: none; border: 0; border-radius: 6px; padding: 5px 12px; font-weight: 700; cursor: pointer; color: var(--muted); }
.wissel button.aan { background: var(--wit); color: var(--ink); box-shadow: 0 1px 2px rgba(5, 0, 45, .15); }
.wissel.vol { display: flex; margin-bottom: 14px; }
.wissel.vol button { flex: 1; padding: 8px; }
.stip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; flex: none; }
.top { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: #e3f2fd; color: var(--blue-donker); padding: 1px 6px; border-radius: 4px; margin-left: 8px; }
.top.grijs { background: #eceef4; color: var(--muted); }

/* Inloggen */
.inlog { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--navy); }
.inlog-kaart { background: var(--wit); width: 100%; max-width: 400px; padding: 32px; border-radius: 14px; }
.inlog-kaart h1 { margin: 6px 0 8px; }
.inlog-kaart h1::after { content: ""; display: block; width: 44px; height: 4px; background: var(--blue); margin-top: 12px; }
.inlog-kaart .zacht { margin-bottom: 20px; }
.inlog-kaart .klein { margin-top: 14px; text-align: center; }

/* Werkbalk van de indeling */
.werkbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.groep { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.periode { font-size: 17px; font-weight: 800; }

/* De indeling zelf */
.rooster-doos { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); box-shadow: var(--schaduw); overflow: auto; max-height: calc(100vh - 150px); }
.rooster-doos > .laden, .rooster-doos > .leegte { border: 0; }
.rooster { display: flex; min-width: min-content; position: relative; }
.r-tijd { position: sticky; left: 0; z-index: 4; background: var(--wit); width: 52px; flex: none; border-right: 1px solid var(--lijn); }
.r-uren { position: relative; }
.r-uren span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.r-uren span:first-child { transform: translateY(0); }
.r-uren span:last-child { transform: translateY(-100%); }
.r-paneel { border-right: 2px solid var(--lijn); min-width: 0; }
.r-paneel:last-child { border-right: 0; }
.r-kop { height: 34px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: var(--wit); position: sticky; top: 0; z-index: 3; white-space: nowrap; }
.r-tijd .r-kop, .r-tijd .r-banen { z-index: 5; }
.r-koplink { background: none; border: 0; font-weight: 800; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.r-koplink:hover { background: var(--bg); color: var(--blue-donker); }
.r-paneel.vandaag .r-kop { color: var(--blue-donker); }
.r-paneel.vandaag .r-koplink::before { content: "● "; font-size: 10px; vertical-align: 2px; }
.r-banen { height: 22px; display: flex; background: var(--bg); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); position: sticky; top: 34px; z-index: 3; }
.r-banen span { flex: 1; text-align: center; font-size: 11px; line-height: 20px; color: var(--muted); font-weight: 700; }
.rooster.week .r-banen span { font-size: 9px; }
.r-vlak { position: relative; cursor: crosshair; touch-action: pan-x pan-y;
  background-image: linear-gradient(to bottom, var(--lijn) 1px, transparent 1px), linear-gradient(to right, var(--lijn-zacht) 1px, transparent 1px); background-color: var(--wit); }
.dicht { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(5, 0, 45, .05) 0 6px, transparent 6px 12px); pointer-events: none; }
.keuze { position: absolute; background: rgba(46, 163, 242, .25); border: 2px solid var(--blue); border-radius: 6px; z-index: 2; pointer-events: none; font-size: 12px; font-weight: 800; color: var(--navy); padding: 2px 5px; overflow: hidden; }
.blok { position: absolute; z-index: 1; border: 1px solid rgba(5, 0, 45, .25); border-radius: 6px; padding: 3px 6px; margin: 0; overflow: hidden; cursor: pointer; text-align: left; font-size: 12px; line-height: 1.25;
  background: var(--kleur); color: var(--navy); display: flex; flex-direction: column; align-items: flex-start; gap: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.blok.licht { color: #fff; }
.blok b { font-weight: 800; font-size: 13px; white-space: nowrap; }
.blok span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.blok .b-oms { opacity: .9; }
.blok .b-status { margin-top: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: rgba(255, 255, 255, .85); color: var(--navy); padding: 0 5px; border-radius: 3px; }
.blok:hover { filter: brightness(1.06); z-index: 2; box-shadow: 0 2px 8px rgba(5, 0, 45, .3); }
.blok.kort { flex-direction: row; gap: 6px; align-items: center; padding-top: 0; padding-bottom: 0; }
.blok.kort .b-oms { display: none; }
.blok.kort .b-status { margin: 0 0 0 auto; }
.blok.smal { padding: 2px; font-size: 10px; }
.blok.smal b { font-size: 10px; writing-mode: vertical-rl; }
.blok.smal span { display: none; }
.blok.los.akkoord { border: 2px solid var(--navy); }
.blok.optie { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 7px, transparent 7px 14px); border: 2px dashed var(--navy); }
.blok.aanvraag { background: rgba(255, 255, 255, .88); color: var(--navy); border: 2px dotted var(--kleur); box-shadow: inset 5px 0 0 var(--kleur); padding-left: 10px; z-index: 2; }
.blok.botst { outline: 3px solid var(--rood); outline-offset: -2px; }

.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; }
.leg { display: inline-flex; align-items: center; gap: 6px; }
.leg i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(5, 0, 45, .2); }
.leg em { font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--blue-donker); }
.leg-los { border: 2px solid var(--navy) !important; background: #fff; }
.leg-optie { border: 2px dashed var(--navy) !important; background: repeating-linear-gradient(135deg, #cfd6e6 0 3px, #fff 3px 6px); }
.leg-aanvraag { border: 2px dotted var(--muted) !important; background: #fff; }

/* Kaarten, lijsten, tabellen */
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 16px 18px; margin-bottom: 12px; }
.rij-kaart { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.rij-kaart > div:first-child:not(.datumblok), .groei { flex: 1 1 280px; min-width: 0; }
.kaart-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.kaart.voorbij { opacity: .6; }
.etiket { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; background: #e3f2fd; color: var(--blue-donker); margin-bottom: 8px; }
.etiket.optie { background: var(--oranje-bg); color: var(--oranje); }
.etiket.afgewezen, .etiket.verlopen, .etiket.ingetrokken { background: #eceef4; color: var(--muted); }
.feiten { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.feiten dt { color: var(--muted); font-size: 13px; padding-top: 1px; }
.feiten dd { margin: 0; font-weight: 600; }
.datumblok { width: 62px; flex: none; text-align: center; background: var(--navy); color: #fff; border-radius: 8px; padding: 8px 4px; display: flex; flex-direction: column; line-height: 1.15; }
.datumblok b { font-size: 22px; font-weight: 800; }
.datumblok span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.datumblok small { color: #a9acc9; font-size: 11px; }
.water { margin: 8px 0 0; padding: 0; list-style: none; }
.water li::before { content: "≈ "; color: var(--blue); font-weight: 800; }
.botslijst { margin: 8px 0; padding: 0; list-style: none; }
.botslijst li { padding: 4px 0; }
.uitval { margin-top: 14px; }
.uitval ul { margin: 6px 0 0; padding-left: 18px; }
.tabel-doos { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); box-shadow: var(--schaduw); overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.tabel td { padding: 9px 12px; border-bottom: 1px solid var(--lijn-zacht); white-space: nowrap; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tr.klik { cursor: pointer; }
.tabel tr.klik:hover td { background: #f6f9fd; }
.tabel tr.voorbij td { color: var(--muted); }
.tabel.getallen td:not(:first-child), .tabel.getallen th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tabel tfoot td { font-weight: 800; border-top: 2px solid var(--lijn); }
.staaf { display: inline-block; width: 70px; height: 8px; background: var(--lijn-zacht); border-radius: 4px; overflow: hidden; margin-right: 8px; vertical-align: middle; }
.staaf i { display: block; height: 100%; }
.beheer .zacht { font-size: 13px; }
.lijst-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-top: 1px solid var(--lijn-zacht); padding: 10px 4px; cursor: pointer; text-align: left; }
.lijst-rij:hover { background: #f6f9fd; }
.lijst-rij > span:first-child { font-weight: 700; min-width: 0; }
.inst .rij { align-items: flex-start; }
.staaltjes { display: flex; gap: 6px; margin: -4px 0 14px; flex-wrap: wrap; }
.staaltjes button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--lijn); cursor: pointer; }
.nieuws { margin-bottom: 14px; }
.nieuws ul { margin: 6px 0 0; padding-left: 18px; }
.nieuws li { margin-bottom: 4px; }

/* Vensters en meldingen */
.achter { position: fixed; inset: 0; background: rgba(5, 0, 45, .55); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 14px; overflow-y: auto; }
.venster { background: var(--wit); border-radius: 14px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(5, 0, 45, .35); }
.venster.breed { max-width: 760px; }
.venster-kop { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; }
.venster-inhoud { padding: 14px 20px 20px; }
.kruis { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.melding { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 11px 18px; border-radius: 10px; z-index: 60; box-shadow: 0 8px 30px rgba(5, 0, 45, .35); max-width: calc(100vw - 30px); font-weight: 700; transition: opacity .4s; }
.melding.fout { background: var(--rood); }
.melding.weg { opacity: 0; }

@media (max-width: 860px) {
  .balk-in { flex-wrap: wrap; gap: 4px 14px; padding: 8px 14px 0; }
  .tabs { order: 3; flex: 1 0 100%; }
  .tab { padding: 10px 12px; }
  .wie { margin-left: auto; }
  .wie span small { display: none; }
  .pagina { padding: 16px 12px 30px; }
  .alleen-breed { display: none; }
  h1 { font-size: 22px; }
  .rooster-doos { max-height: none; }
  .tip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .melding { transition: none; } }
@media print {
  @page { size: landscape; margin: 10mm; }
  body { background: #fff; font-size: 11px; }
  .balk, .voet, .kop-rechts, .werkbalk .groep, .tip, .melding, .kaart-knoppen { display: none !important; }
  .pagina { padding: 0; max-width: none; }
  .rooster-doos, .tabel-doos, .kaart { box-shadow: none; max-height: none; overflow: visible; }
  .r-kop, .r-banen, .r-tijd { position: static; }
  .blok, .leg i, .stip, .staaf i, .datumblok { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Sinds 0.3.0: voorrang, tarieven, facturatie, gesplitst bad */
.wissel.onder { margin-bottom: 16px; }
.rangnr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; margin-right: 10px; }
.bedrag { font-variant-numeric: tabular-nums; display: inline-block; min-width: 74px; }
.voorrang-zin { font-weight: 700; }
.voorrang-regel { margin-top: 8px; font-size: 14px; }
.let-op { background: var(--oranje-bg); color: #5c3300; border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.uitleg { color: var(--muted); margin-bottom: 12px; max-width: 900px; }
.onder-rij { display: block; margin: -6px 0 12px; }
.blok.heel { background-image: linear-gradient(to right, rgba(255, 255, 255, .28) 0 4px, transparent 4px); }
.werkbalk .vink { margin: 0; font-size: 14px; }
.tabel tfoot tr + tr td { border-top: 0; }
@media print { .wissel.onder, .uitleg + .formfout { display: none !important; } }
.tabel.factuur td:nth-child(-n+4), .tabel.factuur th:nth-child(-n+4) { text-align: left; }
.tabel.factuur tfoot td:first-child { text-align: right; }