/* Staand scherm: ontworpen op 1080×1920, schaalt mee naar elk portretscherm (ook 4K).
   Stijl in lijn met de Sales Hub van Van Vliet OS: witte kaarten, ruime afronding, rustige grijzen. */
/* Switzer (Indian Type Foundry, via Fontshare) meegeleverd, zodat de schermen ook zonder internet kloppen. */
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --inkt: #0F172A;
  --tekst: #1E293B;
  --zacht: #64748B;
  --zacht2: #475569;
  --lijn: #EEF0F4;
  --vlak: #F4F6F9;
  --kaart: #FFFFFF;
  --navy: #0F172A;
  --font: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font); color: var(--inkt);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 92% 2%, #FBE4E2 0, rgba(251, 228, 226, 0) 32%),
    radial-gradient(circle at 4% 98%, #E4ECFF 0, rgba(228, 236, 255, 0) 38%),
    #F2F3F6;
}
button { font-family: inherit; }

.podium {
  position: absolute; top: 0; left: 0;
  width: 1080px; height: 1920px;
  padding: 52px 48px 48px; display: flex; flex-direction: column; gap: 28px;
  transform-origin: 0 0;
}

/* ---------- Kop en kaarten ---------- */
.kop { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 8px; }
.kop-titel { font-size: 64px; font-weight: 700; letter-spacing: -1.8px; line-height: 1.05; }
.kop-sub { font-size: 27px; color: var(--zacht); margin-top: 8px; }
.kop-rechts { display: flex; align-items: center; gap: 22px; }
.kop-klok { font-size: 56px; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; }

.kaart {
  background: var(--kaart); border-radius: 32px; padding: 36px 40px;
  display: flex; flex-direction: column; flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .04);
}
.kaart.groei { flex: 1 1 0; min-height: 0; overflow: hidden; }
.kaart-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 16px; }
.kaart-titel { font-size: 32px; font-weight: 700; letter-spacing: -.6px; }
.kaart-meta { font-size: 24px; color: var(--zacht); }
.leeg { font-size: 26px; color: var(--zacht); padding: 18px 0; }

/* Persoonsicoon in de kleur van de verkoper */
.avatar { border-radius: 50%; flex-shrink: 0; display: inline-block; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 2px 6px rgba(15, 23, 42, .10); }
.avatar svg { display: block; }
.avatars { display: inline-flex; flex-shrink: 0; }
.avatars .avatar { box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(15, 23, 42, .10); }
.avatars .avatar + .avatar { margin-left: -14px; }

.logo-img { height: 22px; width: auto; max-width: 64px; object-fit: contain; flex-shrink: 0; }

/* Cijfers verbergen: elk getal wordt een strak afgerond vlak van precies zijn eigen breedte,
   zodat de opbouw zichtbaar blijft maar de bedragen niet. */
.getal { border-radius: .28em; transition: color .4s ease, background-color .4s ease; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
body.verborgen .getal {
  color: transparent !important;
  background: linear-gradient(100deg, #E5E9F0 20%, #F2F4F8 50%, #E5E9F0 80%) 0 50% / 220% 64% repeat-x;
  animation: glans 3.2s ease-in-out infinite;
}
/* Herhalend verloop: één beeldbreedte (220%) opschuiven geeft een naadloze lus. */
@keyframes glans { from { background-position: 0% 50%; } to { background-position: -183.33% 50%; } }
.oog {
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--zacht2); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .06);
}
.oog .oog-dicht, body.verborgen .oog .oog-open { display: none; }
body.verborgen .oog .oog-dicht { display: block; }
body.verborgen .oog { background: var(--navy); color: #fff; }

.testdata { position: absolute; right: 56px; bottom: 14px; font-size: 18px; color: var(--zacht); letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Planning ---------- */
.legenda-personen { display: flex; gap: 24px; }
.legenda-persoon { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 500; color: var(--zacht2); }
.legenda-persoon.weg { color: #94A3B8; }
.legenda-persoon.weg .avatar { background: #CBD5E1 !important; }

.maandkaart { --m-schaal: 1; padding-bottom: 26px; }
.aankomend { height: 520px; }
.m-kop, .m-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 18px; }
.m-kop div { font-size: 22px; font-weight: 500; color: var(--zacht); padding-bottom: 12px; }
.m-raster { flex: 1; min-height: 0; }
.m-dag { border-top: 1px solid var(--lijn); padding: 10px 0 2px; min-width: 0; min-height: 0; overflow: hidden; }
.m-dag > * + * { margin-top: calc(6px * var(--m-schaal)); }
.m-dag.buiten .m-nummer { color: #CBD5E1; }
.m-dag.voorbij > * { opacity: .35; }
.m-nummer { font-size: 23px; font-weight: 600; color: var(--zacht2); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; float: right; margin: -4px 0 0 6px; border-radius: 50%; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.m-dag.vandaag .m-nummer { background: var(--navy); color: #fff; }
.m-item { display: flex; align-items: stretch; gap: 10px; min-width: 0; font-size: calc(24px * var(--m-schaal)); font-weight: 500; color: var(--tekst); line-height: 1.15; flex-shrink: 0; }
.m-streep { width: 5px; min-height: calc(24px * var(--m-schaal)); border-radius: 2px; flex-shrink: 0; }
.m-naam { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.m-item .logo-img { height: 18px; }
.m-speciaal { font-size: calc(21px * var(--m-schaal)); font-weight: 600; padding: calc(4px * var(--m-schaal)) 9px; border-radius: 8px; overflow-wrap: break-word; hyphens: auto; flex-shrink: 0; }

.soort-legenda { display: flex; gap: 10px; }
.soort-label { font-size: 21px; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.komend-lijst { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.komend-dag { font-size: 22px; font-weight: 600; color: var(--zacht); padding: 20px 0 4px; border-top: 1px solid var(--lijn); margin-top: 6px; }
.komend-dag:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.komend { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 24px; padding: 10px 0; }
.komend-tijd { font-size: 34px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.komend-tijd.lang { font-size: 22px; font-weight: 600; color: var(--zacht2); letter-spacing: 0; }
.komend-tekst { min-width: 0; }
.komend-titel { display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 600; min-width: 0; }
.komend-titel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.komend-sub { font-size: 23px; color: var(--zacht); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.komend-sub b { font-weight: 600; }

/* ---------- Resultaten ---------- */
.verkoper-naam { display: flex; align-items: center; gap: 14px; font-size: 28px; font-weight: 600; }

.omzet { gap: 10px; }
.omzet-inhoud { display: flex; align-items: center; gap: 44px; }
.ringen-vak { position: relative; width: 330px; height: 330px; flex-shrink: 0; }
.ringen { width: 330px; height: 330px; display: block; }
.ring-midden { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-midden b { font-size: 46px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.ring-midden small { font-size: 21px; color: var(--zacht); margin-top: 6px; }
.omzet-cijfers { display: flex; flex-direction: column; gap: 26px; }
.omzet-getal { display: flex; flex-direction: column; gap: 4px; }
.omzet-getal small { font-size: 25px; font-weight: 500; color: var(--zacht); }
.omzet-getal b { font-size: 68px; font-weight: 700; letter-spacing: -2px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.omzet-getal > span { font-size: 24px; color: var(--zacht); }
.verkopers { display: flex; flex-direction: column; margin-top: 10px; }
.verkoper { display: grid; grid-template-columns: 1fr 210px 210px; align-items: center; padding: 7px 0; border-top: 1px solid var(--lijn); font-size: 28px; }
.verkoper > span:not(.verkoper-naam) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.verkoper.kop { border-top: 0; padding: 0 0 6px; }
.verkoper.kop span { font-size: 22px; font-weight: 500; color: var(--zacht); }

.producten .taart { display: flex; align-items: center; gap: 36px; }
.taart svg { width: 230px; height: 230px; flex-shrink: 0; }
.taart-legenda { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.taart-legenda div { display: grid; grid-template-columns: 14px 1fr auto 70px; align-items: center; gap: 14px; font-size: 26px; padding: 7px 0; border-bottom: 1px solid var(--lijn); }
.taart-legenda div:last-child { border-bottom: 0; }
.taart-legenda i { width: 14px; height: 14px; border-radius: 4px; }
.taart-legenda span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.taart-legenda em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--zacht2); }
.taart-legenda b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.offertes { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.offerte { display: grid; grid-template-columns: 50px 1fr auto 230px; align-items: center; gap: 20px; padding: 13px 0; border-top: 1px solid var(--lijn); }
.offerte:first-child { border-top: 0; padding-top: 0; }
.offerte-klant { font-size: 29px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offerte-sub { font-size: 22px; color: var(--zacht); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offerte-bedrag { font-size: 31px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.pil { display: inline-flex; align-items: center; font-size: 21px; font-weight: 600; padding: 7px 14px; border-radius: 999px; white-space: nowrap; justify-self: end; }
.restregel { font-size: 22px; color: var(--zacht); padding-top: 12px; border-top: 1px solid var(--lijn); flex-shrink: 0; }