/* Het nagebouwde dashboard van boat-bookd, zo dicht mogelijk bij het echte (apps/dashboard, 5 okt 2026).
   Maten zijn de echte pixelmaten van een scherm van 1100 px breed, geschaald met --px; kleuren komen uit
   packages/ui/src/tokens.css (standaardkleuren, zonder eigen kleuren van de verhuurder). */

.dash {
  --px: calc(95.6cqi / 1100);
  --aqua: #1AB5B0;
  --aqua-tint: color-mix(in srgb, var(--aqua) 12%, #FFFFFF);
  --navy: #0B1F35;
  --ink: #3D5166;
  --muted: #5D7679;
  --line: #DBE6E8;
  --paper: #F3F8F9;
  --ok-vlak: #E6F7F6;
  --ok-tekst: #0F6F6B;
  --wacht-vlak: #FFF4DC;
  --wacht-tekst: #7A4B00;
  --blok-vlak: #EEF2F5;
  --schaduw: 0 calc(1 * var(--px)) calc(3 * var(--px)) rgba(11, 31, 53, .08), 0 calc(8 * var(--px)) calc(20 * var(--px)) calc(-8 * var(--px)) rgba(11, 31, 53, .16);
  display: grid;
  grid-template-columns: calc(224 * var(--px)) minmax(0, 1fr);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: .8cqi;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: calc(14 * var(--px));
  line-height: 1.35;
}
.dash svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-mono { font-family: var(--font-mono); }

/* Zijbalk */
.d-zij { display: flex; flex-direction: column; gap: calc(4 * var(--px)); padding: calc(20 * var(--px)) calc(12 * var(--px)); border-right: 1px solid var(--line); min-width: 0; }
.d-logo { width: calc(36 * var(--px)); height: calc(36 * var(--px)); margin: 0 0 calc(30 * var(--px)) calc(16 * var(--px)); }
.d-logo svg { width: 100%; height: 100%; stroke: none; }
.d-item { position: relative; display: flex; align-items: center; gap: calc(12 * var(--px)); padding: calc(9 * var(--px)) calc(12 * var(--px)); border-radius: 999px; font-size: calc(15 * var(--px)); white-space: nowrap; }
.d-item svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); flex: none; }
.d-item.actief { background: #FFFFFF; font-weight: 600; box-shadow: var(--schaduw); }
.d-item.actief::before { content: ""; position: absolute; left: calc(-12 * var(--px)); top: calc(10 * var(--px)); bottom: calc(10 * var(--px)); width: calc(3 * var(--px)); border-radius: 0 3px 3px 0; background: var(--navy); }
.d-groep { margin: calc(18 * var(--px)) 0 calc(4 * var(--px)) calc(12 * var(--px)); font-size: calc(11 * var(--px)); font-weight: 600; color: var(--ink); }
.d-voet { display: flex; align-items: center; gap: calc(10 * var(--px)); margin-top: auto; padding: calc(14 * var(--px)) calc(12 * var(--px)) 0; border-top: 1px solid var(--line); font-size: calc(14 * var(--px)); white-space: nowrap; overflow: hidden; }
.d-avatar { display: grid; place-items: center; flex: none; width: calc(28 * var(--px)); height: calc(28 * var(--px)); border-radius: 50%; background: var(--aqua); color: #FFFFFF; font-size: calc(11 * var(--px)); font-weight: 700; }

/* Hoofdvlak en bovenbalk */
.d-hoofd { display: flex; flex-direction: column; gap: calc(16 * var(--px)); min-width: 0; min-height: 0; padding: calc(17 * var(--px)) calc(24 * var(--px)); overflow: hidden; }
.d-top { display: grid; grid-template-columns: 1fr minmax(0, calc(330 * var(--px))) 1fr; align-items: center; gap: calc(16 * var(--px)); height: calc(42 * var(--px)); }
.d-zoek { grid-column: 2; display: flex; align-items: center; gap: calc(8 * var(--px)); padding: calc(10 * var(--px)) calc(16 * var(--px)); border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; box-shadow: var(--schaduw); color: var(--muted); }
.d-zoek svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.d-zoek kbd { margin-left: auto; font: calc(11 * var(--px)) var(--font-mono); }
.d-rechts { display: flex; align-items: center; justify-content: flex-end; gap: calc(12 * var(--px)); white-space: nowrap; }
.d-datum { color: var(--muted); }
.d-plus { display: grid; place-items: center; width: calc(36 * var(--px)); height: calc(36 * var(--px)); border-radius: 50%; background: var(--aqua); color: #FFFFFF; }
.d-plus svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.d-account { display: flex; align-items: center; gap: calc(8 * var(--px)); margin-left: calc(8 * var(--px)); padding: calc(6 * var(--px)) calc(8 * var(--px)) calc(6 * var(--px)) calc(6 * var(--px)); border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; box-shadow: var(--schaduw); max-width: calc(170 * var(--px)); overflow: hidden; }
.d-account span:not(.d-avatar) { overflow: hidden; text-overflow: ellipsis; }
.d-account svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); flex: none; color: var(--muted); }

/* Kaarten en panelen */
.d-kaart { border: 1px solid var(--line); border-radius: calc(14 * var(--px)); background: #FFFFFF; box-shadow: var(--schaduw); }
.d-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--px)); }
.d-stat { padding: calc(18 * var(--px)) calc(20 * var(--px)); }
.d-stat__kop { display: flex; align-items: center; gap: calc(12 * var(--px)); font-size: calc(15 * var(--px)); white-space: nowrap; }
.d-icoon { display: grid; place-items: center; flex: none; width: calc(36 * var(--px)); height: calc(36 * var(--px)); border: 1px solid var(--line); border-radius: 50%; background: var(--paper); }
.d-icoon svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.d-stat__getal { margin-top: calc(12 * var(--px)); font-size: calc(28 * var(--px)); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.d-paneel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.d-paneelkop { display: flex; align-items: center; justify-content: space-between; padding: calc(12 * var(--px)) calc(20 * var(--px)); border-bottom: 1px solid var(--line); font-size: calc(15 * var(--px)); font-weight: 600; }
.d-knop { padding: calc(8 * var(--px)) calc(12 * var(--px)); border-radius: calc(9 * var(--px)); background: var(--aqua); color: #FFFFFF; font-weight: 600; white-space: nowrap; }
.d-knop--rand { border: 1px solid var(--line); background: var(--paper); color: var(--navy); font-weight: 500; }
.d-badge { display: inline-block; padding: calc(2 * var(--px)) calc(8 * var(--px)); border-radius: 999px; font-size: calc(12 * var(--px)); font-weight: 600; white-space: nowrap; }
.d-badge--ok { background: var(--ok-vlak); color: var(--ok-tekst); }
.d-badge--grijs { background: var(--blok-vlak); color: var(--muted); }
.d-badge--wacht { background: var(--wacht-vlak); color: var(--wacht-tekst); }

/* Agenda: werkbalk en weekkolommen */
.d-balk { display: flex; align-items: center; gap: calc(12 * var(--px)); padding: calc(13 * var(--px)) calc(16 * var(--px)); border-bottom: 1px solid var(--line); white-space: nowrap; }
.d-keuze { display: flex; align-items: center; justify-content: space-between; gap: calc(30 * var(--px)); min-width: calc(112 * var(--px)); padding: calc(7 * var(--px)) calc(12 * var(--px)); border: 1px solid var(--line); border-radius: calc(9 * var(--px)); background: #FFFFFF; }
.d-keuze svg { width: calc(14 * var(--px)); height: calc(14 * var(--px)); color: var(--muted); }
.d-keuze--breed { min-width: calc(144 * var(--px)); }
.d-grijsknop { padding: calc(7 * var(--px)) calc(12 * var(--px)); border: 1px solid var(--line); border-radius: calc(9 * var(--px)); background: var(--blok-vlak); }
.d-pijl { display: grid; place-items: center; width: calc(32 * var(--px)); height: calc(32 * var(--px)); border: 1px solid var(--line); border-radius: calc(9 * var(--px)); background: var(--paper); }
.d-pijl svg { width: calc(14 * var(--px)); height: calc(14 * var(--px)); }
.d-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1; }
.d-dag { display: flex; flex-direction: column; gap: calc(6 * var(--px)); min-width: 0; padding: calc(8 * var(--px)) calc(8 * var(--px)); border-right: 1px solid var(--line); }
.d-dag:last-child { border-right: 0; }
.d-dag--vandaag { background: var(--paper); }
.d-dag__kop { margin-bottom: calc(4 * var(--px)); text-align: center; font-size: calc(12 * var(--px)); color: var(--muted); white-space: nowrap; }
.d-dag--vandaag .d-dag__kop { color: var(--navy); font-weight: 600; }
.d-vrij { text-align: center; font-size: calc(12 * var(--px)); color: var(--muted); }
.d-vaart {
  display: block;
  padding: calc(6 * var(--px)) calc(8 * var(--px));
  border-radius: calc(6 * var(--px));
  border-left: calc(3 * var(--px)) solid var(--bk, var(--aqua));
  background: var(--aqua-tint);
  color: var(--ok-tekst);
  font-size: calc(12 * var(--px)); line-height: 1.375;
}
.d-vaart b, .d-vaart span, .d-vaart time, .d-vaart em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-vaart b { color: var(--navy); font-weight: 600; }
.d-vaart time { font-family: var(--font-mono); }
.d-vaart span { color: var(--navy); }
.d-vaart em { font-style: normal; font-weight: 600; color: var(--wacht-tekst); }
.d-vaart--wacht { border-left-color: var(--wacht-tekst); background: var(--wacht-vlak); color: var(--wacht-tekst); }
.d-vaart--wacht em { font-size: calc(10 * var(--px)); letter-spacing: .03em; text-transform: uppercase; }
.d-vaart--nieuw { box-shadow: 0 0 0 calc(2 * var(--px)) var(--aqua); }

/* Bootkleuren: de standaardvolgorde uit packages/lib/src/agenda.ts (BOOT_PALET) */
.k-1 { --bk: #1AB5B0; }
.k-2 { --bk: #8E6BDB; }
.k-3 { --bk: #F2A93B; }
.k-4 { --bk: #2563EB; }
/* In de agenda kleurt het hele kaartje licht mee met de boot, zodat je de boten makkelijker uit elkaar houdt. */
.d-vaart[class*="k-"]:not(.d-vaart--wacht) { background: color-mix(in srgb, var(--bk) 14%, #FFFFFF); }

/* Vloot en schippers: rijen */
.d-rij { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(16 * var(--px)); padding: calc(14 * var(--px)) calc(16 * var(--px)); border-bottom: 1px solid var(--line); }
.d-rij:last-child { border-bottom: 0; }
.d-rij--schipper { grid-template-columns: minmax(0, 1fr) auto auto; }
.d-stip { width: calc(20 * var(--px)); height: calc(20 * var(--px)); border-radius: 50%; background: var(--bk); box-shadow: 0 0 0 calc(2 * var(--px)) #FFFFFF, 0 0 0 calc(3 * var(--px)) var(--line); }
.d-bootje { display: grid; place-items: center; width: calc(46 * var(--px)); color: var(--muted); }
.d-bootje svg { width: calc(24 * var(--px)); height: calc(24 * var(--px)); stroke-width: 1.6; }
.d-rij b { display: block; font-size: calc(16 * var(--px)); font-weight: 600; }
.d-rij small { display: block; color: var(--muted); font-size: calc(14 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-prijs { font-family: var(--font-mono); white-space: nowrap; }

/* Instellingen: tabbladen met een streep onder het gekozen blad */
.d-tabs { display: flex; gap: calc(16 * var(--px)); border-bottom: 1px solid var(--line); font-size: calc(15 * var(--px)); color: var(--muted); white-space: nowrap; }
.d-tabs span { padding: 0 calc(12 * var(--px)) calc(10 * var(--px)); }
.d-tabs .actief { color: var(--navy); font-weight: 600; box-shadow: inset 0 calc(-2 * var(--px)) 0 var(--navy); }

/* Instellingen → Kleuren */
.d-kleuren { width: calc(640 * var(--px)); padding: calc(26 * var(--px)) calc(28 * var(--px)); }
.d-kleuren h4 { margin: 0; font-size: calc(16 * var(--px)); font-weight: 600; }
.d-kleuren p { margin: calc(6 * var(--px)) 0 0; color: var(--ink); font-size: calc(13.5 * var(--px)); }
.d-paletten { display: flex; gap: calc(8 * var(--px)); margin-top: calc(16 * var(--px)); }
.d-palet { display: flex; width: calc(56 * var(--px)); height: calc(32 * var(--px)); border-radius: calc(6 * var(--px)); overflow: hidden; }
.d-palet i { flex: 1; }
.d-velden { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--px)); margin-top: calc(14 * var(--px)); }
.d-veld label { display: block; margin-bottom: calc(5 * var(--px)); color: var(--ink); font-size: calc(14.5 * var(--px)); }
.d-veld__rij { display: flex; gap: calc(8 * var(--px)); }
.d-staal { width: calc(36 * var(--px)); height: calc(36 * var(--px)); padding: calc(6 * var(--px)); border: 1px solid var(--line); border-radius: calc(6 * var(--px)); background: #FFFFFF; }
.d-staal i { display: block; width: 100%; height: 100%; border-radius: calc(2 * var(--px)); background: var(--kl); }
.d-hex { position: relative; flex: 1; display: grid; align-items: center; padding: 0 calc(14 * var(--px)); border: 1px solid var(--line); border-radius: calc(9 * var(--px)); font-family: var(--font-mono); font-size: calc(15 * var(--px)); }
.d-hex span { grid-area: 1 / 1; }
.d-veld small { display: block; margin-top: calc(6 * var(--px)); color: var(--ink); font-size: calc(13 * var(--px)); }
.d-voorbeeld { margin-top: calc(16 * var(--px)); padding: calc(16 * var(--px)); border: 1px solid var(--line); border-radius: calc(14 * var(--px)); background: var(--paper); }
.d-voorbeeld__kop { margin-bottom: calc(12 * var(--px)); font-size: calc(15 * var(--px)); font-weight: 600; }
.d-voorbeeld__kop small { color: var(--muted); font-weight: 400; font-size: calc(13 * var(--px)); }
.d-optie { display: flex; justify-content: space-between; margin-bottom: calc(10 * var(--px)); padding: calc(8 * var(--px)) calc(12 * var(--px)); border: 1px solid var(--line); border-radius: calc(6 * var(--px)); background: #FFFFFF; }
.d-optie code { font-family: var(--font-mono); font-weight: 600; }
.d-optie--aan { border: calc(1.5 * var(--px)) solid var(--aqua); background: var(--aqua-tint); }
.d-voorbeeld__voet { display: flex; align-items: center; gap: calc(10 * var(--px)); }
.d-voorbeeld__voet code { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: calc(16 * var(--px)); }
.d-pil { padding: calc(4 * var(--px)) calc(12 * var(--px)); border-radius: 999px; background: var(--aqua); color: #FFFFFF; font-weight: 600; }
.d-opslaan { display: flex; align-items: center; gap: calc(28 * var(--px)); margin-top: calc(16 * var(--px)); }
.d-opslaan .d-knop { padding: calc(10 * var(--px)) calc(16 * var(--px)); }

/* Inzicht: trechter */
.d-trechter { display: grid; gap: calc(14 * var(--px)); padding: calc(18 * var(--px)) calc(20 * var(--px)); }
.d-trechter__rij { display: grid; grid-template-columns: 30% minmax(0, 1fr) 9%; align-items: center; gap: calc(14 * var(--px)); white-space: nowrap; }
.d-trechter__rij code { font-family: var(--font-mono); text-align: right; }
.d-trechter__baan { height: calc(22 * var(--px)); border-radius: calc(6 * var(--px)); background: var(--paper); overflow: hidden; }
.d-trechter__balk { display: block; width: var(--b); height: 100%; border-radius: inherit; background: var(--aqua); transform-origin: left; }
.d-trechter__rij--let .d-trechter__balk { background: #E0A040; }
.d-trechter__rij--let > span:first-child { color: var(--wacht-tekst); font-weight: 600; }

/* ---------------------------------------------------------------- Telefoon: de echte app op een klein scherm */
.app { --tp: calc(100cqi / 390); container-type: inline-size; }
.app-scherm {
  --aqua: #1AB5B0; --navy: #0B1F35; --ink: #3D5166; --muted: #5D7679; --line: #DBE6E8; --paper: #F3F8F9;
  --ok-tekst: #0F6F6B; --wacht-vlak: #FFF4DC; --wacht-tekst: #7A4B00;
  --aqua-tint: color-mix(in srgb, var(--aqua) 12%, #FFFFFF);
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-body);
}
.app-scherm svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-kop { display: flex; align-items: center; gap: calc(8 * var(--tp)); padding: calc(36 * var(--tp)) calc(16 * var(--tp)) calc(10 * var(--tp)); background: #FFFFFF; border-bottom: 1px solid var(--line); }
.app-kop .app-vlag { width: calc(34 * var(--tp)); height: calc(34 * var(--tp)); margin: 0 auto 0 calc(8 * var(--tp)); stroke: none; }
.app-plus { display: grid; place-items: center; width: calc(36 * var(--tp)); height: calc(36 * var(--tp)); border-radius: 50%; background: var(--aqua); color: #FFFFFF; }
.app-plus svg, .app-zoek svg { width: calc(17 * var(--tp)); height: calc(17 * var(--tp)); }
.app-zoek { display: grid; place-items: center; width: calc(38 * var(--tp)); height: calc(38 * var(--tp)); border: 1px solid var(--line); border-radius: calc(9 * var(--tp)); background: var(--paper); }
.app-menu { padding: calc(8 * var(--tp)) calc(12 * var(--tp)); border: 1px solid var(--line); border-radius: calc(9 * var(--tp)); background: var(--paper); font-size: calc(15 * var(--tp)); }
.app-inhoud { flex: 1; min-height: 0; overflow: hidden; padding: calc(16 * var(--tp)); }
.app-kaart { border: 1px solid var(--line); border-radius: calc(14 * var(--tp)); background: #FFFFFF; box-shadow: 0 1px 3px rgba(11, 31, 53, .08), 0 8px 20px -8px rgba(11, 31, 53, .16); overflow: hidden; }
.app-balk { display: grid; gap: calc(10 * var(--tp)); padding: calc(12 * var(--tp)) calc(16 * var(--tp)); border-bottom: 1px solid var(--line); font-size: calc(14 * var(--tp)); }
.app-balk__rij { display: flex; align-items: center; gap: calc(8 * var(--tp)); white-space: nowrap; }
.app-pijl { display: grid; place-items: center; width: calc(34 * var(--tp)); height: calc(34 * var(--tp)); border: 1px solid var(--line); border-radius: calc(9 * var(--tp)); background: var(--paper); }
.app-pijl svg { width: calc(15 * var(--tp)); height: calc(15 * var(--tp)); }
.app-balk b { margin-left: calc(4 * var(--tp)); }
.app-balk .app-vandaag { margin-left: auto; margin-right: calc(4 * var(--tp)); }
.app-keuze { display: flex; align-items: center; justify-content: space-between; padding: calc(7 * var(--tp)) calc(12 * var(--tp)); border: 1px solid var(--line); border-radius: calc(9 * var(--tp)); }
.app-keuze svg { width: calc(14 * var(--tp)); height: calc(14 * var(--tp)); color: var(--muted); }
.app-keuze:first-child { width: 36%; }
.app-keuze:last-child { flex: 1; }
.app-dag { display: grid; gap: calc(8 * var(--tp)); padding: calc(10 * var(--tp)) calc(10 * var(--tp)) calc(12 * var(--tp)); border-bottom: 1px solid var(--line); }
.app-dag__kop { padding-left: calc(2 * var(--tp)); font-size: calc(13 * var(--tp)); color: var(--muted); }
.app-vrij { font-size: calc(13 * var(--tp)); color: var(--muted); padding-left: calc(2 * var(--tp)); }
.app-dag .d-vaart { padding: calc(8 * var(--tp)) calc(12 * var(--tp)); border-radius: calc(8 * var(--tp)); border-left: calc(3 * var(--tp)) solid var(--bk, var(--aqua)); font-size: calc(13.5 * var(--tp)); }
.app-dag .d-vaart--wacht { border-left-color: var(--wacht-tekst); }
.app-dag .d-vaart em { font-size: calc(11 * var(--tp)); }
.app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: calc(10 * var(--tp)) 0 calc(22 * var(--tp)); background: #FFFFFF; border-top: 1px solid var(--line); color: var(--muted); }
.app-tabs span { position: relative; display: grid; place-items: center; }
.app-tabs svg { width: calc(22 * var(--tp)); height: calc(22 * var(--tp)); stroke-width: 1.8; }
.app-tabs .aan { color: var(--navy); }
.app-tabs .aan::before { content: ""; position: absolute; top: calc(-11 * var(--tp)); width: calc(48 * var(--tp)); height: calc(3 * var(--tp)); border-radius: 0 0 3px 3px; background: var(--navy); }

/* Telefoon van de schipper (naast de laptop bij Schippers) */
.minitel {
  position: absolute; right: -2.5rem; bottom: -3rem; z-index: 3;
  width: 26%; min-width: 150px; max-width: 200px;
  padding: 7px;
  border-radius: 26px;
  background: linear-gradient(145deg, #23476E, #0B1F35 60%);
  box-shadow: 0 18px 30px -14px rgba(11, 31, 53, .45), 0 40px 70px -30px rgba(120, 50, 20, .55);
}
.js .podium.speelt .minitel { animation-name: telefoonin; }
@keyframes telefoonin { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.minitel__scherm { --tp: calc(100cqi / 390); container-type: inline-size; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; }
.minitel__scherm .app-scherm { padding: calc(40 * var(--tp)) calc(18 * var(--tp)) 0; gap: calc(20 * var(--tp)); }
.sch-kop { display: flex; align-items: center; justify-content: space-between; font-size: calc(19 * var(--tp)); font-weight: 600; }
.sch-kop small { font-size: calc(14 * var(--tp)); font-weight: 400; color: var(--muted); text-decoration: underline; }
.sch-blok h5 { margin: 0 0 calc(8 * var(--tp)); font-size: calc(14 * var(--tp)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sch-vaart { display: grid; gap: calc(3 * var(--tp)); margin-bottom: calc(12 * var(--tp)); padding: calc(14 * var(--tp)) calc(16 * var(--tp)); border: 1px solid var(--line); border-radius: calc(14 * var(--tp)); background: #FFFFFF; box-shadow: 0 1px 3px rgba(11, 31, 53, .08); }
.sch-vaart b { font-family: var(--font-mono); font-size: calc(19 * var(--tp)); }
.sch-vaart span { font-size: calc(14.5 * var(--tp)); color: var(--muted); }
.sch-vaart i { font-style: normal; font-size: calc(14.5 * var(--tp)); color: var(--navy); }

/* Groeiende balken */
.js .podium .stap-groei { transform: scaleY(0); }
.js .podium.speelt .stap-groei { animation: groeien .8s var(--ease) var(--d, 0s) both; }
.js .podium.klaar .stap-groei { transform: none; }
@keyframes groeien { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Pagina-onderdelen die bij de boat-bookd-pagina van be-bookd hoorden */
.hero__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.knop--rand { color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, .65); background: rgba(11, 31, 53, .15); }
.knop--rand:hover { background: rgba(11, 31, 53, .3); }
.sloepje { transform-box: fill-box; transform-origin: center bottom; animation: dobberen 3.2s ease-in-out infinite; }
.glinster { animation: glinsteren 3.5s ease-in-out infinite; }
@keyframes glinsteren { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.toon--breed { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 5vw, 4.5rem); }
.toon--breed.toon--om { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
.toon--breed .laptop { max-width: 760px; }
.zwever__icoon--aqua { background: #E3F6F5; }
.zwever__icoon--aqua svg { stroke: #0E8F8A; }
.kleurrij { display: flex; }
.kleurrij i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid #FFFFFF; margin-left: -.3rem; }
.kleurrij i:first-child { margin-left: 0; }
.avond__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

@media (max-width: 880px) {
  .toon--breed, .toon--breed.toon--om { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .minitel { right: .25rem; bottom: -1.25rem; width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .sloepje, .glinster { animation: none; }
}

/* Agenda, weergave Boten (WeekRooster in het dashboard): per boot een rij, per dag een cel */
.d-boten { display: grid; grid-template-columns: calc(100 * var(--px)) repeat(7, minmax(0, 1fr)); align-content: start; column-gap: calc(3 * var(--px)); padding: calc(6 * var(--px)); }
.d-boten__kop { padding: calc(8 * var(--px)) calc(4 * var(--px)); text-align: center; font-size: calc(12 * var(--px)); color: var(--muted); white-space: nowrap; }
.d-boten__kop:first-child { text-align: left; padding-left: calc(8 * var(--px)); }
.d-boten__kop--vandaag { color: var(--navy); font-weight: 700; }
.d-boten__boot { display: flex; align-items: flex-start; gap: calc(6 * var(--px)); padding: calc(8 * var(--px)); border-top: 1px solid var(--line); font-size: calc(13 * var(--px)); font-weight: 600; color: var(--navy); white-space: nowrap; }
.d-boten__boot .d-stip { flex: none; width: calc(10 * var(--px)); height: calc(10 * var(--px)); margin-top: calc(4 * var(--px)); box-shadow: none; }
.d-boten__cel { display: flex; flex-direction: column; gap: calc(4 * var(--px)); min-width: 0; padding: calc(6 * var(--px)) calc(2 * var(--px)); border-top: 1px solid var(--line); }
.d-boten__cel--vandaag { background: var(--paper); }
.d-celplus { display: block; padding: calc(1 * var(--px)) 0; border: 1px dashed var(--line); border-radius: calc(6 * var(--px)); text-align: center; font-size: calc(11 * var(--px)); font-weight: 600; color: var(--muted); line-height: 1.3; }

/* Telefoon, weergave Boten: per dag een kaartje per boot (DagLijst) */
.app-bdag { display: grid; gap: calc(8 * var(--tp)); padding: calc(12 * var(--tp)); }
.app-bdag__kop { font-size: calc(12 * var(--tp)); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.app-boot { display: grid; justify-items: start; gap: calc(6 * var(--tp)); padding: calc(10 * var(--tp)) calc(14 * var(--tp)); border: 1px solid var(--line); border-radius: calc(12 * var(--tp)); background: #FFFFFF; box-shadow: 0 1px 3px rgba(11, 31, 53, .08); }
.app-boot b { font-size: calc(14 * var(--tp)); font-weight: 600; color: var(--navy); }
.app-boot .d-vaart { width: calc(176 * var(--tp)); padding: calc(6 * var(--tp)) calc(10 * var(--tp)); border-radius: calc(8 * var(--tp)); border-left: calc(3 * var(--tp)) solid var(--bk, var(--aqua)); font-size: calc(13 * var(--tp)); }
.app-boot .app-vrij { font-style: italic; padding-left: 0; }
.d-boten .d-vaart { padding: calc(4 * var(--px)) calc(5 * var(--px)); font-size: calc(10.5 * var(--px)); letter-spacing: -.01em; }
.d-boten .d-vaart em { font-size: calc(8.5 * var(--px)); }