/* Klassiek 2, cards 5b/5a/3a/3b. Mobile-only contract, 29 September 2026. */
@keyframes pv-ademen { 0%,100% {opacity:1} 50% {opacity:.5} }
@keyframes pv-halo { 0%,100% {opacity:.7;transform:scale(1)} 50% {opacity:1;transform:scale(1.1)} }
@keyframes pv-rimp { from {transform:scale(1);opacity:.75} to {transform:scale(2.4);opacity:0} }
@keyframes pv-rim-een { from {transform:scale(1);opacity:.7} to {transform:scale(1.9);opacity:0} }
@keyframes pv-lijnin { from {transform:scaleX(0)} to {transform:scaleX(1)} }
@keyframes pv-flits { from {opacity:.22} to {opacity:0} }
@keyframes pv-menu { from {opacity:0;filter:blur(8px);transform:translateY(6px)} to {opacity:1;filter:blur(0);transform:translateY(0)} }
.vandaag-mintflits {position:fixed;inset:0;background:#3abd9d;pointer-events:none;z-index:10000;animation:pv-flits .9s ease-out both}
/* Staat de installatiebanner open, dan krijgt de pagina ruimte onderaan zodat .pv-nav erboven
   kan scrollen. Zonder dit ligt de vaste banner over de Vandaag-knop en is die niet te klikken. */
html body[data-vandaag-mobiel]:has(.install-banner:not([hidden])) {padding-bottom:calc(var(--pv-banner-ruimte,170px) + 16px)}
/* Urenoverzicht (PDF) onder een afgeronde maand in het blad Maanden. */
html body[data-vandaag-mobiel] .pv-sheet .pv-pdf {display:block;min-height:44px;width:100%;padding:0 12px;text-align:left;font-size:12px;color:var(--pv-muted);background:none;border:0}
/* Verlof en ziekte onder de maandlijst in het blad Maanden. */
html body[data-vandaag-mobiel] .pv-verlofblok {display:grid;gap:8px;padding:14px 12px 6px;border-top:1px solid var(--pv-line)}
html body[data-vandaag-mobiel] .pv-verlofblok strong {font-size:12px;color:var(--pv-muted)}
html body[data-vandaag-mobiel] .pv-verlof {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--pv-ink)}
html body[data-vandaag-mobiel] .pv-verlof input {width:96px;min-height:44px;padding:0 12px;border:1px solid var(--pv-line);border-radius:12px;background:transparent;color:var(--pv-ink);font:inherit;text-align:right}
html body[data-vandaag-mobiel] .pv-verlof input:disabled {opacity:.6}
html body[data-vandaag-mobiel] .pv-verlofblok small {font-size:11px;color:var(--pv-muted)}
/* Weekendkaarten (Uren in het weekend): de eerste kaart na een werkdag begint in kolom 4, zodat
   Zaterdag en Zondag onder Do en Vr komen te staan en niet onder Ma en Di. */
html body[data-vandaag-mobiel] #new-bento-days .new-bento-day:not(.is-weekend) + .new-bento-day.is-weekend {grid-column-start:4}
/* Berichten in het blad van Vandaag 2.0. De rijen erven de opmaak van .pv-sheet button
(44px hoog, aanraakvlak WCAG 2.2 AA 2.5.8). Het stipje is amber, zoals de stip op de tab
zelf, en werkt in licht en donker. */
html body[data-vandaag-mobiel] .pv-sheet .pv-bericht.is-ongelezen > span:first-child {font-weight:700}
html body[data-vandaag-mobiel] .pv-sheet .pv-bericht.is-ongelezen > span:first-child::before {content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#e8b06a}
html body[data-vandaag-mobiel] .pv-sheet .pv-bericht-tekst {margin:0 0 6px;padding:2px 12px 10px;color:var(--pv-muted);font-size:12.5px;line-height:1.5;white-space:pre-line}
html body[data-vandaag-mobiel] .pv-sheet .pv-leeg {margin:0;padding:12px;color:var(--pv-muted)}
/* Het veld van Vandaag 2.0 in Klassiek, licht. Zonder deze regel wint styles.css r.5000
   (`html:not([data-skin="new"]):not([data-theme="dark"]) body[data-role="employee"]`,
   voorrang 0,3,2) van de regel hieronder (`html body[data-vandaag-mobiel]`, 0,1,2). Dat is
   de oude mobiele Vandaag van Klassiek 1: vijf stops zonder gloeden. Remy-LeBeau zag het
   als "de light is niet wit".
   Deze regel geldt alleen als Vandaag 2.0 aanstaat en heeft voorrang 0,4,2, dus hij wint
   ook als de stylesheets ooit anders geordend worden. De waarde is letterlijk die van
   referentiekaart 5b. */
html:not([data-skin="new"]):not([data-theme="dark"]) body[data-vandaag-mobiel][data-role="employee"] {
  background:
    radial-gradient(80% 36% at 0% 0%, rgba(58,189,157,.3), transparent 60%),
    radial-gradient(70% 36% at 100% 55%, rgba(232,176,106,.2), transparent 60%),
    linear-gradient(176deg, #c4dbd1 0%, #e4efea 45%, #fbfdfc 100%);
  background-attachment: fixed;
}
html body[data-vandaag-mobiel] {
  --pv-ink:#172332;--pv-muted:#485651;--pv-mint-ink:#037f63;--pv-amber-ink:#a5600d;
  --pv-line:rgba(13,27,56,.14);--pv-card:rgba(255,255,255,.85);--pv-glass:rgba(255,255,255,.66);
  --pv-shine:inset 0 1px 0 rgba(255,255,255,.95),0 10px 30px rgba(13,27,56,.05);
  color:var(--pv-ink);background:radial-gradient(80% 36% at 0% 0%,rgba(58,189,157,.3),transparent 60%),radial-gradient(70% 36% at 100% 55%,rgba(232,176,106,.2),transparent 60%),linear-gradient(176deg,#c4dbd1 0%,#e4efea 45%,#fbfdfc 100%);background-attachment:fixed;
}
html[data-theme="dark"] body[data-vandaag-mobiel] {
  --pv-ink:#e8eef4;--pv-muted:#93a1ab;--pv-mint-ink:#5fd3b3;--pv-amber-ink:#f0bd7a;
  --pv-line:rgba(255,255,255,.1);--pv-card:rgba(18,27,37,.6);--pv-glass:rgba(18,27,37,.6);
  --pv-shine:inset 0 1px 0 rgba(255,255,255,.09),0 10px 30px rgba(0,0,0,.2);
  background:radial-gradient(80% 36% at 100% 0%,rgba(58,189,157,.15),transparent 60%),linear-gradient(176deg,#07131f,#0c1721);
}
html body[data-vandaag-mobiel] .main-content {padding:0!important;background:transparent!important;max-width:none!important}
html body[data-vandaag-mobiel] .topbar,
html body[data-vandaag-mobiel] .sidebar,
html body[data-vandaag-mobiel] .new-employee-tabs,
html body[data-vandaag-mobiel] .new-tabbalk,
html body[data-vandaag-mobiel] .app-footer,
html body[data-vandaag-mobiel] .new-bento-customer,
html body[data-vandaag-mobiel] #help-launcher,
html body[data-vandaag-mobiel] #view-employee-dashboard > :not(#new-employee-bento) {display:none!important}
html body[data-vandaag-mobiel] #view-employee-dashboard.is-active {display:block!important;padding:0!important;margin:0!important}
html body[data-vandaag-mobiel] #new-employee-bento {display:flex!important;flex-direction:column;gap:12px;padding:14px 14px 22px;margin:0;width:100%;max-width:none;color:var(--pv-ink);position:relative;isolation:isolate}
html[data-skin] body[data-vandaag-mobiel] #new-employee-bento > * {order:0!important}
html[data-skin] body[data-vandaag-mobiel] #new-employee-bento .new-bento-hero::before,
html[data-skin] body[data-vandaag-mobiel] #new-employee-bento .new-bento-hero::after,
html[data-skin] body[data-vandaag-mobiel] #new-andere-maanden,
html[data-skin] body[data-vandaag-mobiel] #employee-customer-timesheet-card .klantkaart-oude-kop {display:none!important}
html[data-skin] body[data-vandaag-mobiel] #new-employee-bento #global-period-control {display:flex!important;order:0;flex:1;width:auto;margin:0}
html[data-skin] body[data-vandaag-mobiel] #new-employee-bento .pv-month-slot #global-period-control {margin-top:14px}
html body[data-vandaag-mobiel] #new-employee-bento::before {content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
html[data-theme="dark"] body[data-vandaag-mobiel] #new-employee-bento::before {opacity:.08}
/* De tabs zijn hier uitgezonderd. Deze regel draagt een id en wint daarmee van
   de tab-regels verderop, die alleen klassen en attributen hebben -- ook al staan
   die later. Daardoor kreeg elke tab transition:transform .12s in plaats van de
   voorgeschreven flex .4s cubic-bezier(.22,1,.36,1), en viel K2-H-004 om.
   Uitzonderen is hier beter dan de tab-regels zwaarder maken: dan wint de basis
   ook van .is-active en blijft flex op 1 staan in plaats van 2,4. */
html body[data-vandaag-mobiel] #new-employee-bento button:not([data-vandaag-tab]) {font-family:inherit;cursor:pointer;transition:transform .12s,background .2s,color .2s}
html body[data-vandaag-mobiel] #new-employee-bento button:active,
html body[data-vandaag-mobiel] #new-employee-bento button.is-touch-pressed {transform:scale(.96);box-shadow:0 0 14px rgba(58,189,157,.25)}
html body[data-vandaag-mobiel] #new-employee-bento button:disabled {cursor:default;opacity:.4}
html body[data-vandaag-mobiel] #new-employee-bento :focus-visible {outline:2px solid var(--pv-mint-ink);outline-offset:3px}
html body[data-vandaag-mobiel] .pv-head {display:flex;align-items:center;justify-content:space-between;padding:0 2px;gap:10px;min-height:44px;position:relative;z-index:10}
html body[data-vandaag-mobiel] .pv-logo {height:22px;width:auto;max-width:100px;object-fit:contain}
html body[data-vandaag-mobiel] .pv-head-controls {display:flex;align-items:center;gap:10px}
html body[data-vandaag-mobiel] .topbar-popover {position:relative;display:block}
html body[data-vandaag-mobiel] .profile-menu-button {padding:0;width:44px;height:44px;background:transparent;border:0}
html body[data-vandaag-mobiel] .topbar-profile-name,
html body[data-vandaag-mobiel] .topbar-profile-caret {display:none}
html body[data-vandaag-mobiel] .notification-button {width:44px;height:44px;color:var(--pv-ink);background:transparent;border:1px solid var(--pv-line);border-radius:10px}
html body[data-vandaag-mobiel] .profile-menu,
html body[data-vandaag-mobiel] .notification-panel {right:0;left:auto;top:50px;width:min(300px,calc(100vw - 28px));color:var(--pv-ink);background:var(--pv-card);backdrop-filter:blur(18px);border:1px solid var(--pv-line);border-radius:20px;animation:pv-menu .2s ease-out;z-index:30}
html body[data-vandaag-mobiel] .profile-menu button {color:var(--pv-ink);min-height:44px}
html body[data-vandaag-mobiel] .profile-menu .danger-menu-item {color:#b3261e}
html[data-theme="dark"] body[data-vandaag-mobiel] .profile-menu .danger-menu-item {color:#f08a8a}
html body[data-vandaag-mobiel] .pv-main {position:relative;border-radius:22px;padding:18px 18px 16px;background:radial-gradient(60% 55% at 100% 0%,rgba(58,189,157,.3),transparent 60%),radial-gradient(50% 45% at 0% 100%,rgba(232,176,106,.2),transparent 60%),var(--pv-glass);border:1px solid var(--pv-line);box-shadow:var(--pv-shine);backdrop-filter:blur(16px)}
html body[data-vandaag-mobiel] .pv-main::before {content:"";position:absolute;inset:0;border-radius:22px;background:radial-gradient(ellipse at 95% 5%,rgba(58,189,157,.16),transparent 65%);pointer-events:none;animation:pv-halo 6s ease-in-out infinite}
html body[data-vandaag-mobiel] #new-employee-bento .new-bento-hero {position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:0;margin:0;background:none;border:0;box-shadow:none;min-height:0;overflow:visible;color:var(--pv-ink)}
html body[data-vandaag-mobiel] .new-bento-hero > img {display:none}
html body[data-vandaag-mobiel] .new-bento-hero-copy {min-width:0;padding:0}
html body[data-vandaag-mobiel] #new-bento-greeting {font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--pv-mint-ink);text-transform:uppercase}
html body[data-vandaag-mobiel] #new-bento-hero-title {font-family:"Path Editorial",Georgia,serif;font-size:28px;line-height:1.1;letter-spacing:-.01em;font-weight:700;margin:4px 0 0;color:var(--pv-ink)}
html body[data-vandaag-mobiel] #new-bento-hero-spreuk {font-size:12.5px;font-style:italic;line-height:1.4;color:var(--pv-muted);margin:6px 0 0}
html body[data-vandaag-mobiel] .new-bento-hero-cijfers {display:flex;grid-column:1/-1;align-items:center;gap:12px;padding:0;margin:0}
html body[data-vandaag-mobiel] .new-bento-hero-uren {display:block;text-align:left}
html body[data-vandaag-mobiel] #new-bento-hero-maanduren {font-family:"Path Editorial",Georgia,serif;font-size:32px;font-variant-numeric:tabular-nums;font-weight:400;color:var(--pv-ink)}
html body[data-vandaag-mobiel] .new-bento-hero-uren small {display:block;font-size:12px;color:var(--pv-muted)}
html body[data-vandaag-mobiel] .pv-hero-open {grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:6px;text-align:right}
html body[data-vandaag-mobiel] .pv-hero-open strong {font:300 44px/1 "Path Editorial",Georgia,serif;letter-spacing:-.03em}
html body[data-vandaag-mobiel] .pv-hero-open span {font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--pv-muted)}
html body[data-vandaag-mobiel] .new-bento-hero-ring {display:none}
html body[data-vandaag-mobiel] .pv-status {display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;padding:6px 12px;border:0;border-radius:999px;background:rgba(58,189,157,.13);color:var(--pv-mint-ink);width:fit-content}
html body[data-vandaag-mobiel] .pv-status::before {content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
html body[data-vandaag-mobiel] .pv-status.is-amber {color:var(--pv-amber-ink);background:rgba(232,176,106,.13)}
html body[data-vandaag-mobiel] #global-period-control {display:flex!important;align-items:center;justify-content:space-between;width:100%;margin:14px 0 0;padding:0 6px;min-height:44px;border:1px solid var(--pv-line);border-radius:999px;background:var(--pv-glass);color:var(--pv-ink)}
html body[data-vandaag-mobiel] #global-period-control button {color:var(--pv-ink);background:transparent;border:0;min-height:44px}
html body[data-vandaag-mobiel] .period-picker-caption,
html body[data-vandaag-mobiel] #period-year-picker {display:none}
html body[data-vandaag-mobiel] #period-month-panel {background:var(--pv-card);backdrop-filter:blur(18px);color:var(--pv-ink)}
html body[data-vandaag-mobiel] #new-bento-hero-weken {grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:0;margin:16px 0 0}
html body[data-vandaag-mobiel] .pv-week-dots {display:flex;gap:3px;align-items:center;height:10px}
html body[data-vandaag-mobiel] .pv-week-dots i {width:4px;height:10px;border-radius:2px;box-shadow:0 0 6px rgba(58,189,157,.4)}
html body[data-vandaag-mobiel] .pv-outside {opacity:.4;pointer-events:none}
html body[data-vandaag-mobiel] .new-bento-hero-week {display:grid;justify-items:center;gap:7px;padding:9px 0 8px;min-width:0;border:1px solid var(--pv-line);border-radius:14px;background:var(--pv-glass);color:var(--pv-ink)}
html body[data-vandaag-mobiel] .new-bento-hero-week.is-gekozen {border-color:rgba(3,127,99,.55);background:rgba(255,255,255,.92)}
html[data-theme="dark"] body[data-vandaag-mobiel] .new-bento-hero-week.is-gekozen {border-color:rgba(127,224,196,.6);background:rgba(255,255,255,.1)}
html body[data-vandaag-mobiel] .new-bento-hero-week-ring {width:auto;height:auto;background:transparent!important;animation:none!important;display:block}
html body[data-vandaag-mobiel] .new-bento-hero-week-ring svg {display:none}
html body[data-vandaag-mobiel] .new-bento-hero-week-ring strong {position:static;font:800 15px/1 inherit;color:var(--pv-ink)}
html body[data-vandaag-mobiel] .new-bento-hero-week small {font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--pv-mint-ink)}
html body[data-vandaag-mobiel] .new-bento-hero-week.is-open small {color:var(--pv-amber-ink)}
html body[data-vandaag-mobiel] .new-bento-hero-week.is-later small {color:var(--pv-muted)}
html body[data-vandaag-mobiel] #new-employee-bento .new-bento-week {display:flex;flex-direction:column;gap:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:16px 0 0;color:var(--pv-ink)}
html body[data-vandaag-mobiel] .new-bento-week-kop {display:flex;align-items:baseline;gap:5px;margin:0;padding:0;font-size:12.5px}
html body[data-vandaag-mobiel] #new-bento-week-title {font-size:12.5px;color:var(--pv-ink)}
html body[data-vandaag-mobiel] #new-bento-week-range {font-size:12px;color:var(--pv-muted)}
html body[data-vandaag-mobiel] #new-bento-week-stand {margin-left:auto;font-size:10px;color:var(--pv-amber-ink)}
html body[data-vandaag-mobiel] #new-bento-days {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 0;padding:0}
html body[data-vandaag-mobiel] #new-bento-days .new-bento-day {display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
html body[data-vandaag-mobiel] .new-bento-day-dot {display:none}
html body[data-vandaag-mobiel] .new-bento-day-naam {display:flex;justify-content:center;align-items:center;gap:3px;order:0;padding:0 2px;height:20px;color:var(--pv-muted);white-space:nowrap}
html body[data-vandaag-mobiel] .new-bento-day-naam strong,
html body[data-vandaag-mobiel] .new-bento-day-naam small {font-size:10.5px;font-weight:700;line-height:20px;color:var(--pv-muted)}
html body[data-vandaag-mobiel] .new-bento-day.is-active .new-bento-day-naam {background:rgba(58,189,157,.18);border-radius:999px}
html body[data-vandaag-mobiel] #new-bento-days .new-bento-hours-input {order:1;width:100%;min-width:0;height:60px;padding:0;border:1px solid rgba(3,127,99,.4);border-radius:16px;background:linear-gradient(180deg,rgba(58,189,157,.3),rgba(58,189,157,.16));box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px rgba(58,189,157,.2);font:800 21px "Path Editorial",Georgia,serif;font-variant-numeric:tabular-nums;text-align:center;color:var(--pv-ink);transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s}
html body[data-vandaag-mobiel] #new-bento-days [data-day-state="gap"] input {background:linear-gradient(180deg,rgba(232,176,106,.42),rgba(232,176,106,.22));border-color:rgba(165,96,13,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px rgba(232,176,106,.22);color:#4d3006;animation:pv-ademen 3.2s ease-in-out infinite;animation-delay:var(--day-delay)}
html body[data-vandaag-mobiel] #new-bento-days [data-day-state="empty"] input {background:rgba(255,255,255,.5);border-color:rgba(13,27,56,.1);color:var(--pv-muted);box-shadow:none}
html body[data-vandaag-mobiel] #new-bento-days [data-day-state="zero"] input {background:rgba(13,27,56,.06);border-color:rgba(13,27,56,.14);color:var(--pv-muted);box-shadow:none}
html[data-theme="dark"] body[data-vandaag-mobiel] #new-bento-days input {background:linear-gradient(180deg,rgba(58,189,157,.28),rgba(58,189,157,.12));border-color:rgba(99,214,182,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(58,189,157,.18);color:#eaf6f2}
html[data-theme="dark"] body[data-vandaag-mobiel] #new-bento-days [data-day-state="gap"] input {background:linear-gradient(180deg,rgba(232,176,106,.28),rgba(232,176,106,.12));border-color:rgba(232,176,106,.5);color:#fdebd0}
html[data-theme="dark"] body[data-vandaag-mobiel] #new-bento-days [data-day-state="empty"] input {background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] body[data-vandaag-mobiel] #new-bento-days [data-day-state="zero"] input {background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
html body[data-vandaag-mobiel] #new-bento-days .new-bento-presets {order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;width:100%;padding:0;border:0;background:none}
html body[data-vandaag-mobiel] #new-bento-days .new-bento-presets button {padding:0;min-width:0;width:100%;height:44px;border:1px solid var(--pv-line);border-radius:8px;background:transparent;color:var(--pv-ink);font-size:12px;font-weight:800}
html body[data-vandaag-mobiel] #new-bento-days .new-bento-presets button[aria-pressed="true"] {background:#3abd9d;color:#0a1c2f}
html body[data-vandaag-mobiel] #new-bento-days .new-bento-presets button:active {transform:scale(.9)}
html body[data-vandaag-mobiel] .new-bento-week-total {display:flex;justify-content:space-between;margin:10px 0 0;padding:0;font-size:12px;color:var(--pv-muted);border:0}
html body[data-vandaag-mobiel] #new-bento-week-total {font:400 20px "Path Editorial",Georgia,serif;color:var(--pv-ink)}
html body[data-vandaag-mobiel] .new-bento-week-actions {display:flex;gap:0;margin:10px 0 0;padding:0}
html body[data-vandaag-mobiel] .new-bento-week-actions button {font-size:12px;font-weight:700;padding:0 12px;min-height:44px;border:1px solid var(--pv-line);border-radius:12px;background:transparent;color:var(--pv-ink)}
html body[data-vandaag-mobiel] .new-bento-week-actions [data-standard-hours-fill] {border-radius:12px 0 0 12px;background:rgba(58,189,157,.2);color:var(--pv-mint-ink);flex:none}
html body[data-vandaag-mobiel] .new-bento-week-actions [data-new-bento-maand-vullen] {border-radius:0 12px 12px 0;border-left:0;white-space:normal;min-width:0;flex:1}
html body[data-vandaag-mobiel] .new-bento-week-actions [data-new-bento-maand-vullen].is-confirming {background:rgba(232,176,106,.22);color:var(--pv-amber-ink)}
html body[data-vandaag-mobiel] .new-bento-week-actions [data-standard-hours-reset] {margin-left:6px;width:44px;padding:0;font-size:20px;flex:none}
html body[data-vandaag-mobiel] #new-bento-fill-pattern-note {font-size:11.5px;color:var(--pv-muted);line-height:1.4;margin:8px 0 0}
html body[data-vandaag-mobiel] .pv-submit-slot {margin-top:12px}
html body[data-vandaag-mobiel] [data-new-bento-submit] {display:flex;width:100%;min-height:48px;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(58,189,157,.45);background:rgba(58,189,157,.18);color:var(--pv-mint-ink);font-size:14px;font-weight:700}
html body[data-vandaag-mobiel] [data-new-bento-submit].is-klaar {background:#3abd9d;color:#0a1c2f;box-shadow:0 8px 24px rgba(58,189,157,.3)}
html[data-skin] body[data-vandaag-mobiel] #new-employee-bento .pv-submit-slot [data-new-bento-submit] {background:rgba(58,189,157,.18);color:var(--pv-mint-ink);opacity:1;border-color:rgba(58,189,157,.45)}
html[data-skin] body[data-vandaag-mobiel] #new-employee-bento .pv-submit-slot [data-new-bento-submit].is-klaar {background:#3abd9d;color:#0a1c2f}
html body[data-vandaag-mobiel] .pv-zero {font-size:11px;color:var(--pv-muted);margin:4px 0 0}
html body[data-vandaag-mobiel] #new-employee-bento .new-bento-steps,
html body[data-vandaag-mobiel] #new-employee-bento .new-bento-customer {padding:16px;border-radius:22px;background:var(--pv-card);border:1px solid var(--pv-line);box-shadow:var(--pv-shine);color:var(--pv-ink);backdrop-filter:blur(16px);margin:0}
html body[data-vandaag-mobiel] #new-bento-steps-label {font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--pv-muted);text-transform:uppercase}
html body[data-vandaag-mobiel] #new-bento-steps {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:14px 0 0;padding:0;list-style:none}
html body[data-vandaag-mobiel] #new-bento-steps > li {display:grid;justify-items:center;align-content:start;gap:6px;position:relative;padding:0;border:0;background:none;min-width:0}
html body[data-vandaag-mobiel] #new-bento-steps > li:not(:last-child)::after {content:"";position:absolute;top:8px;left:calc(50% + 9px);right:calc(-50% + 9px);height:2px;background:var(--pv-line);transform-origin:left;animation:pv-lijnin .8s cubic-bezier(.22,1,.36,1) both}
html body[data-vandaag-mobiel] #new-bento-steps > li.is-done::after {background:#3abd9d;box-shadow:0 0 8px rgba(58,189,157,.55)}
html body[data-vandaag-mobiel] #new-bento-steps .new-bento-step-badge {position:relative;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px dashed var(--pv-line);background:transparent;color:#0a1c2f;font-size:11px;font-weight:800;box-shadow:none;margin:0}
html body[data-vandaag-mobiel] #new-bento-steps .is-done .new-bento-step-badge {border:0;background:#3abd9d;box-shadow:0 0 12px rgba(58,189,157,.7)}
html body[data-vandaag-mobiel] #new-bento-steps .is-current .new-bento-step-badge {border:0;background:#e8b06a;box-shadow:0 0 14px rgba(232,176,106,.75)}
html body[data-vandaag-mobiel] #new-bento-steps .is-current .new-bento-step-badge::before,
html body[data-vandaag-mobiel] #new-bento-steps .is-current .new-bento-step-badge::after,
html body[data-vandaag-mobiel] #new-bento-steps .is-done .new-bento-step-badge::before {content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid #e8b06a;animation:pv-rimp 2.4s ease-out infinite;pointer-events:none}
html body[data-vandaag-mobiel] #new-bento-steps .is-current .new-bento-step-badge::after {animation-delay:1.2s}
html body[data-vandaag-mobiel] #new-bento-steps .is-done .new-bento-step-badge::before {border-color:#3abd9d;animation:pv-rim-een 1.1s ease-out 1 both}
html body[data-vandaag-mobiel] .new-bento-step-tekst strong {font-size:9px;font-weight:800;text-transform:uppercase;color:var(--pv-ink);white-space:nowrap}
html body[data-vandaag-mobiel] #new-bento-steps [data-step-detail],
html body[data-vandaag-mobiel] #new-bento-steps [data-step-acties] {display:none}
html body[data-vandaag-mobiel] .pv-step-current {display:flex;font-size:12.5px;margin:12px 0 0;color:var(--pv-muted)}
html body[data-vandaag-mobiel] .pv-help-row {display:flex;justify-content:flex-end;position:relative;padding:0 4px}
html body[data-vandaag-mobiel] [data-vandaag-help] {width:44px;height:44px;flex:none;border:0;border-radius:50%;background:#172332;color:#eaf2ee;font-size:19px;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.28)}
html body[data-vandaag-mobiel] .pv-help-menu {position:absolute;right:0;bottom:52px;z-index:20;width:230px;padding:6px;border-radius:20px;background:var(--pv-card);border:1px solid var(--pv-line);box-shadow:0 18px 40px rgba(0,0,0,.28);backdrop-filter:blur(14px);animation:pv-menu .2s ease-out}
/* Ook voor de mailto-link uit lus C: die was eerst een <button> en hoort er precies zo uit te blijven zien. Zonder deze regel wordt het een blauwe onderstreepte standaardlink en valt het aanraakvlak van 44px weg (WCAG 2.2 AA, 2.5.8). */
html body[data-vandaag-mobiel] .pv-help-menu button,
html body[data-vandaag-mobiel] .pv-help-menu .pv-help-mail {display:block;min-height:44px;width:100%;padding:0 12px;text-align:left;font-size:13px;color:var(--pv-ink);background:none;border:0;line-height:44px;text-decoration:none}
html body[data-vandaag-mobiel] .pv-help-menu strong,
html body[data-vandaag-mobiel] .pv-help-menu small {display:block;padding:8px 12px;font-size:11px;color:var(--pv-muted)}
html body[data-vandaag-mobiel] .pv-nav {display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--pv-glass);backdrop-filter:blur(18px);border:1px solid var(--pv-line);box-shadow:0 12px 30px rgba(13,27,56,.12),inset 0 1px 0 rgba(255,255,255,.9)}
html body[data-vandaag-mobiel] .pv-nav [data-vandaag-tab] {display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0;min-width:0;height:46px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--pv-muted);overflow:hidden;transition:flex .4s cubic-bezier(.22,1,.36,1),background .3s,color .3s}
html body[data-vandaag-mobiel] .pv-nav [data-vandaag-tab].is-active {flex:2.4 1 0;background:#172332;color:#eaf2ee}
html[data-theme="dark"] body[data-vandaag-mobiel] .pv-nav [data-vandaag-tab].is-active {background:linear-gradient(180deg,rgba(58,189,157,.42),rgba(58,189,157,.18));color:#eaf6f2}
html body[data-vandaag-mobiel] .pv-tab-label {display:none;font-size:12.5px;font-weight:700;white-space:nowrap}
html body[data-vandaag-mobiel] .is-active .pv-tab-label {display:inline}
html body[data-vandaag-mobiel] .pv-message-icon {position:relative}
html body[data-vandaag-mobiel] .pv-message-icon i {position:absolute;top:-2px;right:-4px;width:8px;height:8px;border-radius:50%;background:#e8b06a}
html body[data-vandaag-mobiel] .pv-sheet {border-radius:24px;padding:6px;background:var(--pv-glass);backdrop-filter:blur(16px);border:1px solid var(--pv-line);color:var(--pv-muted);font-size:12.5px;line-height:1.5}
html body[data-vandaag-mobiel] .pv-sheet button {display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px;background:none;border:0;color:var(--pv-ink);text-align:left}
html body[data-vandaag-mobiel] .pv-footer {margin:2px 0 0;text-align:center;font-size:10px;line-height:1.5;color:var(--pv-muted)}
html body[data-vandaag-mobiel] #employee-customer-timesheet-card {display:block!important;padding:14px 16px;margin:0;border-radius:22px;background:var(--pv-card);border:1px solid var(--pv-line);box-shadow:var(--pv-shine);color:var(--pv-ink)}
html body[data-vandaag-mobiel] #employee-customer-timesheet-card .employee-customer-timesheet-copy,
html body[data-vandaag-mobiel] #employee-customer-timesheet-card .klantkaart-meer {display:none!important}
html body[data-vandaag-mobiel] #employee-customer-timesheet-card .klantkaart-kop {display:flex;align-items:center;gap:10px;margin:0;color:var(--pv-ink)}
html body[data-vandaag-mobiel] .klantkaart-kop-tekst {display:flex;align-items:center;gap:8px;justify-content:space-between;min-width:0;flex:1}
html body[data-vandaag-mobiel] #employee-customer-timesheet-kaartnaam {font-size:13.5px;color:var(--pv-ink)}
html body[data-vandaag-mobiel] #employee-customer-timesheet-stand {font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(232,176,106,.13);color:var(--pv-amber-ink)}
html body[data-vandaag-mobiel] .klantkaart-uitleg {font-size:12px;line-height:1.5;color:var(--pv-muted);margin:8px 0 12px}
html body[data-vandaag-mobiel] .klantkaart-kies {display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-right:85px}
html body[data-vandaag-mobiel] .klantkaart-kies button {min-height:44px;border:1px solid var(--pv-line);border-radius:12px;background:transparent;color:var(--pv-ink);font-size:12px;font-weight:700}
html body[data-vandaag-mobiel] .klantkaart-kies .klantkaart-knop-bestand {background:#172332;color:#eaf2ee}
html body[data-vandaag-mobiel] .klantkaart {position:relative;display:block}
html body[data-vandaag-mobiel] #employee-customer-timesheet-skip {min-height:44px;font-size:12px;font-weight:700;background:none;border:0;text-decoration:underline;text-underline-offset:3px;color:var(--pv-muted);padding:0 4px}
html body[data-vandaag-mobiel] [data-klantkaart-stand="leeg"] #employee-customer-timesheet-skip {position:absolute;bottom:0;right:0;width:80px}
html body[data-vandaag-mobiel] .klantkaart-verstuur {min-height:44px;width:100%;border:0;border-radius:12px;background:#3abd9d;color:#0a1c2f}
/* Modern: equal columns and compact underlined day fields. */
html[data-skin="new"] body[data-vandaag-mobiel] .pv-main {background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none}
html[data-skin="new"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-hero,
html[data-skin="new"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-week {background:var(--pv-card);border:1px solid var(--pv-line);border-radius:24px;padding:16px;box-shadow:var(--pv-shine)}
html[data-skin="new"][data-theme="dark"] body[data-vandaag-mobiel] {--pv-card:#0f2639;--pv-muted:#afbdca;background:#07131f}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-hero-open {display:none}
html[data-skin="new"] body[data-vandaag-mobiel] .new-bento-hero-ring {display:block;position:relative;width:44px;height:44px;flex:none}
html[data-skin="new"] body[data-vandaag-mobiel] .new-bento-hero-ring svg {position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
html[data-skin="new"] body[data-vandaag-mobiel] .new-bento-hero-ring-leeg {stroke:var(--pv-line);fill:none;stroke-width:7}
html[data-skin="new"] body[data-vandaag-mobiel] .new-bento-hero-ring-boog {stroke:#3abd9d;fill:none;stroke-width:7;stroke-dasharray:326.7;transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 5px rgba(58,189,157,.6))}
html[data-skin="new"] body[data-vandaag-mobiel] .new-bento-hero-ring-binnen {position:absolute;inset:0;display:grid;place-items:center}
html[data-skin="new"] body[data-vandaag-mobiel] #new-bento-hero-ring-pct {font-size:11px;color:var(--pv-ink)}
html[data-skin="new"] body[data-vandaag-mobiel] .new-bento-hero-ring-binnen small {display:none}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-head {flex-wrap:wrap}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-head .pv-logo {order:3;max-width:56px;height:22px}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-head .pv-head-controls {order:1}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-head #global-period-control {order:2;font-size:12px;min-width:0}
html[data-skin="new"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-hero-week strong {color:var(--pv-ink);font-size:15px;line-height:1;font-weight:800}
html[data-skin="new"] body[data-vandaag-mobiel] #new-bento-days .new-bento-hours-input {border:0;border-bottom:1px solid var(--pv-line);border-radius:0;background:none;box-shadow:none;font-size:30px;font-weight:400;color:var(--pv-ink)}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-nav {border-radius:24px}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-nav [data-vandaag-tab] {position:relative;flex:1 1 0;flex-direction:column;gap:3px;border-radius:16px}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-tab-label {display:inline;font-size:11px}
html[data-skin="new"] body[data-vandaag-mobiel] .pv-nav [data-vandaag-tab].is-active {background:rgba(58,189,157,.2);color:#0d6b52}
html[data-skin="new"][data-theme="dark"] body[data-vandaag-mobiel] .pv-nav [data-vandaag-tab].is-active {background:transparent;color:#e8eef4}
html[data-skin="new"][data-theme="dark"] body[data-vandaag-mobiel] .pv-nav .is-active::before {content:"";position:absolute;top:0;left:30%;right:30%;height:2px;background:#3abd9d}
@media (prefers-reduced-motion:reduce) {
  html body[data-vandaag-mobiel] *,html body[data-vandaag-mobiel] *::before,html body[data-vandaag-mobiel] *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .vandaag-mintflits {display:none}
}

/* Botsing met de bestaande Modern-vormgeving, gemeld conform OPDRACHT-KLASSIEK2.md
   paragraaf 0 ("wijkt iets af, dan wint de referentie; meld het botsende punt").

   styles-new.css r.4988 verbergt #global-period-control met display:none!important
   op alle medewerkerschermen in Modern: daar zit de maandkeuze ergens anders. De
   referentie voor Vandaag 2.0 toont hem wel, in de kop.

   Gemeten op 29 sep: in Klassiek stond hij goed (flex, hoogte 52, in .pv-month-slot),
   in Modern op none in .pv-head -- in beide thema's. Daar viel K2-H-001 op om.

   Deze uitzondering geldt alleen als Vandaag 2.0 aanstaat (body[data-vandaag-mobiel]).
   Staat hij uit, dan blijft Modern precies zoals hij was. Zelfde selector als de
   regel hierboven, plus dat ene attribuut, zodat hij er net bovenuit komt. */
html[data-skin="new"] body[data-vandaag-mobiel] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) #global-period-control { display: flex !important; }

/* --- breed scherm --- */
/* De referentie is alleen op 390px getekend (OPDRACHT-KLASSIEK2.md, paragraaf 11).
   Op een laptop die 390px laten is zonde van de ruimte, maar hem over de volle breedte
   uitrekken maakt de regels onleesbaar en verandert het ontwerp. Daarom: dezelfde
   kolom, dezelfde volgorde, gecentreerd, met een leesbare bovengrens. Geen nieuwe
   onderdelen, want daarvoor is er geen ontwerp om na te meten. */
@media (min-width: 721px) {
  /* Het dashboardvenster is hier 1060px breed en staat links (margin:0!important
     hierboven). Zonder deze regel centreert de kolom netjes binnen die 1060 en staat
     hij dus alsnog uit het midden van het scherm -- gemeten: links 250, rechts 630. */
  html body[data-vandaag-mobiel] #view-employee-dashboard.is-active { max-width: none !important; width: 100% !important; }
  html body[data-vandaag-mobiel] #new-employee-bento { max-width: 560px; margin-inline: auto; padding-top: 22px; }
  /* De menubalk hoort onder de kolom te blijven, niet over de volle breedte. */
  html body[data-vandaag-mobiel] .pv-nav { max-width: 560px; margin-inline: auto; }
}

/* --- het weekpaneel volgt het thema (Modern) --- */
/* styles-new.css r.1392 zet .new-bento-week op background:#f4f1e6 !important. Dat is
   hard-gecodeerd creme MET !important, dus het donkere thema kwam er niet overheen: in
   Modern donker stond lichte tekst (#e8eef4) op een creme vlak, praktisch onleesbaar.
   Gemeld door Remy-LeBeau op 30 sep met een schermafdruk van een ingediende maand.

   Gemeten: .new-bento-week gaf rgb(244,241,230) in LICHT EN DONKER, dus het volgde het
   thema helemaal niet.

   Alleen binnen Vandaag 2.0 gerepareerd, zodat de bestaande Modern 1 niet verandert.
   Waarden uit de referentie: kaart 3b geeft #0f2639 voor vlakken, kaart 3a geeft
   rgba(255,255,255,.82) met rand #d0dcd6. */
html[data-skin="new"] body[data-vandaag-mobiel] .new-bento-week {
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid #d0dcd6;
}
html[data-skin="new"][data-theme="dark"] body[data-vandaag-mobiel] .new-bento-week {
  background: #0f2639 !important;
  border-color: rgba(255, 255, 255, .12);
}

/* --- de 0/8/9-snelkeuze volgt het thema (Modern) --- */
/* styles-new.css r.1411 zet .new-bento-presets button op background:#fff met tekst
   #5a6b7a. In donkere Modern gaf dat drie witte pillen met grijze cijfers, terwijl kaart
   3b ze juist donker toont. Het is de rij die je het vaakst aantikt.

   De regel hierboven in dit bestand was al themabewust, maar eiste een voorouder
   #new-bento-days. In Vandaag 2.0 staan deze knoppen daarbuiten, dus greep hij niet.
   Deze regel laat die eis vallen en geldt overal binnen de kaart.

   Randkleur uit de referentie: rgba(255,255,255,.18) in 3b, #bfcec8 in 3a. */
html[data-skin="new"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-presets button {
  background: transparent;
  color: var(--pv-ink);
  border-color: #bfcec8;
}
html[data-skin="new"][data-theme="dark"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-presets button {
  border-color: rgba(255, 255, 255, .18);
}
/* De gekozen waarde blijft mint, in beide standen; zo staat het ook in de referentie. */
html[data-skin="new"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-presets button[aria-pressed="true"] {
  background: #3abd9d;
  color: #07131f;
}

/* ... ook op de actieve dag. De regel hierboven greep op gewone dagen, maar niet op
   .new-bento-day.is-active: daar bleef een massief wit vlak staan met grijze cijfers.
   Gemeten in donker: rgb(255,255,255) met tekst rgb(90,107,122). */
html[data-skin="new"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-day.is-active .new-bento-presets button {
  background: transparent;
  color: var(--pv-ink);
  border-color: #bfcec8;
}
html[data-skin="new"][data-theme="dark"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-day.is-active .new-bento-presets button {
  border-color: rgba(255, 255, 255, .2);
}
html[data-skin="new"] body[data-vandaag-mobiel] #new-employee-bento .new-bento-day.is-active .new-bento-presets button[aria-pressed="true"] {
  background: #3abd9d;
  color: #07131f;
}