/* ==================================================================
"Nieuw" — de vernieuwde 1414/1919-vormgeving bovenop de bestaande app.
Deze stylesheet wordt altijd geladen, maar ELKE regel is gescoped
onder html[data-skin="new"] zodat de klassieke weergave volledig
ongemoeid blijft. Wisselen gebeurt via Voorkeuren → Vormgeving
(state.preferences.skin, toegepast door applySkin() in app.js).
Increment 2: het visuele fundament. De semantische tokens, lokale
serif-koppen en het app-canvas staan hier. Componenten worden hierna
één voor één op deze tokens aangesloten.
================================================================== */
/* Instrument Serif (SIL Open Font License 1.1), het serif van de referentie
(pilot/modern-referentie/modern-definitief.html zet het er zelf in). Op 27 sep
naast de referentie gelegd: met "Path Editorial" waren alle koppen en grote
getallen van Modern breder en zwaarder dan het ontwerp. Lokaal geserveerd
(CSP font-src 'self'), zelfde unicode-ranges als de referentie. */
@font-face {
font-family: "Instrument Serif";
src: url("./fonts/instrument-serif-latin.woff2") format("woff2");
font-display: swap;
font-style: normal;
font-weight: 400;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Instrument Serif";
src: url("./fonts/instrument-serif-latin-ext.woff2") format("woff2");
font-display: swap;
font-style: normal;
font-weight: 400;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Instrument Serif";
src: url("./fonts/instrument-serif-italic-latin.woff2") format("woff2");
font-display: swap;
font-style: italic;
font-weight: 400;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Path Editorial";
src: url("../pilot/assets/1919/serif.woff2") format("woff2");
font-display: swap;
font-style: normal;
font-weight: 400 700;
}
html[data-skin="new"] {
color-scheme: light;
/* 1414 Bento × 1919 Storyline: één betekenis per kleur.
Verfijning (10 september): kouder/strakker richting de huisstijl van
pathconsultancy.nl (navy + mint, licht/koel palet), maar bewust geen
kopie -- de warme ondertoon en de serif-koppen (--path-serif hieronder)
blijven het eigen, redactionele karakter van New. Het achtergrondpalet
ging van een verzadigd zand-beige naar een lichtere, groen-getinte
crème; het mint-accent van #5fb98d naar #4bb188 (frisser, dichter bij
het merk #2FB48C van de site, zonder identiek te zijn); schaduw en
radius iets kleiner voor een gedefinieerder, minder "bollend" silhouet.
Alle losse hardcoded verwijzingen naar #5fb98d/rgba(95,185,141,...)
verderop in dit bestand zijn in dezelfde stap meeverplaatst naar
#4bb188/rgba(75,177,136,...), anders had de app twee mint-tinten door
elkaar getoond. */
--navy: #0a1c2f;
--navy-soft: #0d2033;
--mint: #4bb188;
--mint-dark: #2a5f45;
--teal: #235644;
--green-light: #e6efe9;
--ink: #1e2c34;
--muted: #66726d;
--line: #d7ddd3;
--surface: #f4f6f2;
--background: #e9ede6;
--warning: #d99a3c;
--warning-bg: #f8ead1;
--navy-tekst: #102235;
--tabelkop: #66726d;
--vlak: #f7f9f5;
--vlak-zacht: #eef1ea;
--vlak-warm: #f9f5ec;
/* Eigen waarde voor deze skin; zie de toelichting bij --surface-muted in
styles.css. Die uit Klassiek is blauwgrijs en vloekt met het groengetinte
crème hier. */
--surface-muted: #edf1ea;
--mint-dark-tekst: #235644;
--warning-tekst: #8a5c1c;
--danger: #a4514f;
--shadow: 0 16px 40px rgba(8, 23, 38, .12);
--radius: 18px;
/* Eigen skin-tokens maken latere componentincrements voorspelbaar. */
--path-canvas: #e9ede6;
--path-panel: #f4f6f2;
--path-panel-strong: #eef1ea;
--path-night: #0a1c2f;
--path-night-panel: #0f2639;
--path-night-tile: #12293e;
--path-forest: #1e4032;
--path-green: #4bb188;
--path-amber: #d99a3c;
--path-cream: #f4f1e6;
/* Fase 17 (13 sep, uit pilot/fase17-richtingpagina.html -- het richtingontwerp
dat Gio heeft goedgekeurd met "mooier, groot verschil, niet extreem"):
een warm goud als puur decoratief accent voor eyebrow-labels op de donkere
bento-panelen. Bewust NIET --path-amber: die kleur betekent in deze app
"actie vereist" (statuspillen, de Volgende actie-kaart) en is daar te
verzadigd voor. Dit goud is lichter en zachter, zit alleen op
kleinkapitaal-labels en draagt dus geen status. */
--path-gold: #e2c07a;
--path-serif: "Instrument Serif", "Path Editorial", Georgia, "Times New Roman", serif;
--path-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Klassiek en New delen veel selectors; --letter-kop is de rol "kop" en
elke skin vult hem met zijn eigen stem. Klassiek koos een strakke
schreefloze, New houdt de redactionele schreefletter -- juist dat verschil
maakt de twee herkenbaar. Zonder deze regel zouden de gedeelde koppen in
New meeveranderen met de keuze van Klassiek. */
--letter-kop: var(--path-serif);
--letter-tekst: var(--path-sans);
/* Koptypeschaal voor New. Deze skin bleek al een stuk consequenter opgezet
dan Klassiek -- er was maar één echte dubbeling (34/58 naast 38/58 voor
dezelfde rol: de grote schermkop). Als token vastgelegd zodat het zo
blijft. De extra grote hero-kop en het ringcijfer houden hun eigen,
bewust afwijkende formaat: dat zijn geen koppen maar beeldelementen. */
--n-kop-scherm: clamp(36px, 4vw, 58px);
--n-kop-topbalk: clamp(32px, 4vw, 52px);
--n-kop-hero: clamp(58px, 6vw, 92px);
}
html[data-skin="new"][data-theme="dark"] {
color-scheme: dark;
--ink: #d8e1e3;
--muted: #93a2a8;
--line: rgba(255, 255, 255, .11);
--surface: #0f2639;
--background: #081726;
--green-light: #17382d;
--teal: #75c99e;
--navy-tekst: #f4f1e6;
--tabelkop: #93a2a8;
--vlak: #0f2639;
--vlak-zacht: #0b2031;
--vlak-warm: #173428;
--surface-muted: #132c40;
--mint-dark-tekst: #75c99e;
--warning-bg: #352916;
--warning-tekst: #e2ab4c;
--shadow: 0 18px 48px rgba(0, 0, 0, .32);
}
html[data-skin="new"] body {
background:
radial-gradient(circle at 86% 8%, rgba(75, 177, 136, .13), transparent 27rem),
var(--background);
font-family: var(--path-sans);
}
html[data-skin="new"] :is(
.login-panel h1,
.topbar h1,
.view-heading h2,
.panel-heading h3,
.settings-card h3,
.summary-card h3,
.modal h2
) {
font-family: var(--path-serif);
font-weight: 400;
letter-spacing: -.02em;
}
html[data-skin="new"] .section-label,
html[data-skin="new"] .eyebrow {
color: var(--mint-dark-tekst);
letter-spacing: .12em;
}
/* Het "Path"-woordmerk in assets/path-logo.png is zelf donkernavy -- op de
navy "Home"-pil (.mobile-brand-home, in élke rol/skin-combinatie hier
hardcoded donker) versmelt de tekst met de achtergrond en blijft alleen
het icoon over (gemeld: "logo linksboven bijna niet te zien"). Er bestaat
een witte variant van het logo (assets/path-logo-wit.png, ook gebruikt
door brandLogoUrl("donker") in de PDF-kop) die precies voor deze situatie
is gemaakt, maar dit ene ![]()
-element wordt in New hergebruikt voor zowel
donkere als lichte .mobile-brand-home-varianten (bv. het medewerker-
dashboard heeft een lichte pil via var(--surface)) -- het bronbestand
wisselen zou de lichte variant juist onleesbaar maken. Een chip achter het
beeld lost het dus overal op zonder het brondbestand aan te passen. Eerste
versie (10 september) was een rechthoekig blok met scherpe hoeken en oogde
lomp naast de ronde pil eromheen (gemeld: "logo is niet lekker zo") -- nu
een volledig afgeronde badge, dichter om het beeld heen, die meegaat met
de pil-vorm in plaats van ertegenin te gaan. */
html[data-skin="new"] .mobile-brand-home img[data-brand-logo] {
background: #f4f1e6;
border-radius: 10px;
padding: 3px 6px;
box-sizing: content-box;
}
/* Herzien 11 sep. De chip hierboven maakte het donkere woordmerk leesbaar,
maar je zag vooral de chip en nauwelijks het logo -- twee keer gemeld.
Oorzaak: op deze pil stond de lichte logovariant terwijl de pil in élke
weergave van deze skin donker is. app.js kiest nu de witte variant voor
deze plek, en dan is er geen drager meer nodig: het logo staat gewoon op
de pil en mag ook groter. Alleen voor het meegeleverde logo -- van een
zelf geüpload logo kennen we de kleuren niet, dus dat houdt zijn chip. */
html[data-skin="new"] .mobile-brand-home img[data-brand-logo][data-eigen-logo="false"] {
width: 82px;
background: transparent;
border-radius: 0;
padding: 0;
}
html[data-skin="new"] .sidebar {
background:
radial-gradient(circle at 18% 10%, rgba(75, 177, 136, .18), transparent 16rem),
linear-gradient(180deg, #071a2d, var(--path-night));
border-right: 1px solid rgba(126, 201, 156, .15);
}
html[data-skin="new"] .nav-item {
border-radius: 14px;
color: rgba(244, 241, 230, .7);
}
html[data-skin="new"] .nav-item:hover,
html[data-skin="new"] .nav-item.is-active {
background: rgba(75, 177, 136, .14);
color: var(--path-cream);
}
/* Groepskopjes in het beheermenu. Klassiek zet ze in kleinkapitaal met een
haarlijn; hier krijgen ze het editoriale schreefletterbeeld van deze skin,
zodat de opdeling in beide vormgevingen hetzelfde zegt maar niet hetzelfde
klinkt. */
html[data-skin="new"] .nav-group-title {
border-top-color: rgba(126, 201, 156, .16);
color: rgba(126, 201, 156, .75);
font-family: var(--path-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
html[data-skin="new"] .topbar {
background: color-mix(in srgb, var(--background) 88%, transparent);
border-color: color-mix(in srgb, var(--line) 82%, transparent);
}
html[data-skin="new"] :is(.period-control, .appearance-switches, .popover-panel) {
border-color: var(--line);
background: var(--surface);
box-shadow: 0 14px 34px rgba(8, 23, 38, .09);
}
html[data-skin="new"] .appearance-switch {
border-radius: 10px;
}
html[data-skin="new"] .appearance-switch:hover,
html[data-skin="new"] .appearance-switch[aria-pressed="true"] {
background: var(--green-light);
color: var(--mint-dark-tekst);
}
html[data-skin="new"] :is(.panel, .metric-card, .summary-card, .settings-card) {
border-color: color-mix(in srgb, var(--line) 88%, transparent);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
html[data-skin="new"] .metric-card.attention {
border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
background: linear-gradient(145deg, var(--surface), var(--warning-bg));
}
html[data-skin="new"] :is(.button, .small-button) {
border-radius: 12px;
}
html[data-skin="new"] .button-primary {
background: var(--path-amber);
color: var(--path-night);
box-shadow: 0 10px 25px rgba(217, 154, 60, .24);
}
html[data-skin="new"] .button-primary:hover {
background: color-mix(in srgb, var(--path-amber) 88%, white);
box-shadow: 0 14px 30px rgba(217, 154, 60, .3);
}
html[data-skin="new"] :is(.form-grid input, .form-grid select, .modal-form input, .modal-form select, .modal-form textarea, .hours-table input) {
border-color: var(--line);
border-radius: 12px;
background: var(--vlak);
}
html[data-skin="new"] :is(.form-grid input, .form-grid select, .modal-form input, .modal-form select, .modal-form textarea, .hours-table input):focus {
border-color: var(--path-green);
outline: 0;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--path-green) 20%, transparent);
}
/* Een dag die buiten de maand valt kreeg in deze skin een eigen vlak in een
net andere donkerte dan de kaart eromheen. Op een lichte ondergrond werkt
dat (Klassiek), maar hier leest het als een gat in de tabel. Het streepje
in het midden zegt al genoeg; het vlak eromheen mag weg. */
html[data-skin="new"] .hours-table .outside-month { background: transparent; }
html[data-skin="new"] :is(.data-table th, .data-table td, .hours-table th, .hours-table td) {
border-color: var(--line);
}
/* Zelfde sectiekop in de donkere New-opmaak. */
html[data-skin="new"] .modal-form-sectie {
border-top-color: rgba(255, 255, 255, .12);
color: #8ea3ad;
}
html[data-skin="new"] .modal {
border: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 32px 90px rgba(8, 23, 38, .28);
}
html[data-skin="new"] .modal-summary {
background: var(--vlak-zacht);
}
/* Deze twee regels verwezen naar --font-sans en --tekst. Die tokens bestaan
in geen van beide stijlbladen, dus deden de declaraties niets en bleef de
voettekst er in Nieuw precies zo uitzien als in Klassiek (gemeld met een
screenshot van het beheerdashboard). De namen die hier horen zijn
--path-sans en --navy-tekst. */
html[data-skin="new"] .app-footer {
margin-top: 28px;
border-color: var(--line);
color: var(--muted);
font-family: var(--path-sans);
font-size: 10px;
letter-spacing: .04em;
padding-top: 20px;
}
/* margin-left blijft 0: in deze skin staat de versiepil direct achter de
copyrightregel in plaats van rechts uitgelijnd zoals in Klassiek. Dat is
een keuze en staat als eis in SKIN-H-006. */
html[data-skin="new"] .app-footer-version {
margin-left: 0;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--navy-tekst);
font-weight: 700;
padding: 5px 10px;
}
/* Loginscherm — de kaart, de rolkeuzes en het merk op de nieuwe tokens.
De koptekst pakt de serif al via de gedeelde :is()-regel bovenin. */
html[data-skin="new"] .login-panel {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
html[data-skin="new"] .login-brand > span {
border-color: var(--line);
color: var(--mint-dark-tekst);
}
html[data-skin="new"] .login-option {
border-radius: 16px;
border-color: color-mix(in srgb, var(--line) 88%, transparent);
background: var(--vlak);
}
html[data-skin="new"] .login-option:hover {
border-color: var(--path-green);
box-shadow: 0 12px 30px rgba(8, 23, 38, .12);
}
html[data-skin="new"] .login-avatar {
border-radius: 12px;
background: var(--path-night);
}
html[data-skin="new"] .login-avatar.employee {
background: var(--path-green);
color: var(--path-night);
}
html[data-skin="new"] .login-arrow {
color: var(--mint-dark-tekst);
}
html[data-skin="new"] .login-panel .login-note {
border-radius: 12px;
background: var(--green-light);
color: var(--mint-dark-tekst);
}
html[data-skin="new"] .login-footer {
border-color: var(--line);
color: var(--muted);
}
/* Echte 1919-medewerkerroute: dezelfde bento-indeling als de gekozen pilot,
maar met de bestaande maanddata en schrijfstromen van de applicatie.
Mededelingen (view-employee-announcements) krijgt bewust dezelfde
volledige-breedte behandeling als het dashboard: zonder deze regels bleef
de klassieke sidebar zichtbaar zodra een medewerker via de bel naar zijn
berichtenarchief navigeerde — een zichtbare terugval naar Klassiek
middenin een verder volledig Nieuw scherm. */
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .sidebar,
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .sidebar {
display: none;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .main-content,
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .main-content {
margin-left: 0;
padding-inline: clamp(18px, 3vw, 48px);
}
/* Referentie (25 sep): de kop loopt over de volle breedte, de inhoud van de
medewerkerschermen staat gecentreerd op maximaal 1180px (main{max-width:
1180px; margin: 0 auto}). Op een breed scherm liepen Home, Maanden, Mijn uren
en Berichten anders tot aan de randen door. */
html[data-skin="new"] #view-employee-dashboard,
html[data-skin="new"] #view-timesheet,
html[data-skin="new"] #view-historie,
html[data-skin="new"] #view-employee-announcements {
max-width: 1180px;
margin-inline: auto;
}
/* De 1180px van de referentie is inclusief zijn eigen zijmarge
(padding-inline: clamp(16px, 3vw, 34px)): op 1280px staat de inhoud daar op
84-1196, hier liep hij tot 27 sep van 50 tot 1230 (Maanden 90-1190). Zelfde
inhoudsbreedte voor alle vier medewerkerschermen; smaller dan dat pakt de
marge van .main-content het al. */
@media (min-width: 721px) {
html[data-skin="new"] #view-employee-dashboard,
html[data-skin="new"] #view-timesheet,
html[data-skin="new"] #view-historie,
html[data-skin="new"] #view-employee-announcements {
max-width: calc(1180px - 2 * clamp(16px, 3vw, 34px));
}
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .mobile-topbar-home,
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .mobile-topbar-home {
display: flex;
min-width: 190px;
}
/* De pil is hier bewust donker, in beide thema's, net als op Mijn uren en op
de beheerschermen. Hij stond eerder op var(--surface)/var(--navy-tekst) en
was daardoor licht in de lichte modus -- terwijl app.js voor deze plek
altijd de wítte logovariant kiest. Wit woordmerk op een lichte pil: dat was
de overgebleven helft van "logo nog steeds onduidelijk". Eén vaste
ondergrond is hier ook de eerlijkste keuze, want het medewerkerdashboard
eronder is in beide thema's donker (de bento-kaarten staan vast op
--path-night-panel). */
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .mobile-brand-home,
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .mobile-brand-home {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 16px;
background: #0e2334;
color: #efe9dc;
font: 700 15px var(--path-serif);
padding: 9px 14px;
}
/* Hoogte bepaalt de maat, breedte volgt. Het woordmerk heeft een verhouding
van 466:216; in een vierkant van 34x34 met object-fit:contain werd het
teruggerekend naar 34x16 en was het niet meer te lezen. Dat vierkant paste
bij de oude chip-opzet (een badge naast de tekst); nu het logo zelf op de
pil staat, mag het zijn eigen vorm houden. */
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .mobile-brand-home img,
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .mobile-brand-home img {
width: auto;
max-width: 96px;
height: 24px;
object-fit: contain;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .mobile-role-switch,
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .topbar-title,
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .mobile-role-switch,
html[data-skin="new"] .app-shell:has(#view-historie.is-active, #view-timesheet.is-active) .mobile-role-switch,
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .topbar-title {
display: none;
}
/* Besluit 24 sep (vervolg op de dekkingsronde van 21 sep): Modern staat voortaan
altijd donker, overal, ook op Beheer -- een echte lichte Modern bleek bij het
narekenen honderden regels onder de leesbaarheidsgrens te houden en is een
ontwerpronde op zich, geen kleurtweak. Daarmee vervalt de reden waarom de
snelknop op Beheer eerder bewust zichtbaar bleef (SKIN-H-005 toonde toen dat
hij daar nog een echte voorkeur wisselde); die voorkeur bestaat niet meer.
De knop verdwijnt nu overal in Modern via JS (syncAppearanceSwitches in
assets/app.js), niet meer alleen per medewerkerscherm hier in CSS. */
/* "Rol kiezen" staat op Mijn uren wél in de balk (anders verdwijnt daar de
enige uitlogweg, want de zijbalk is hier verborgen -- LoginPage.logout()
valt op deze knop terug). Hij kreeg alleen geen eigen opmaak in deze skin en
viel als grijs blok uit de donkere balk. Zelfde rustige pil als de andere
hulpmiddelen ernaast, zodat hij meedoet in plaats van op te vallen. */
html[data-skin="new"] .mobile-role-switch {
border: 1px solid rgba(126, 201, 156, .28);
border-radius: 12px;
background: rgba(75, 177, 136, .12);
color: #9fe0bd;
font-size: 11px;
font-weight: 700;
padding: 9px 13px;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
html[data-skin="new"] .mobile-role-switch:hover {
border-color: rgba(126, 201, 156, .5);
background: rgba(75, 177, 136, .2);
color: var(--path-cream);
}
/* Medewerkerroute: Mijn uren krijgt dezelfde eigen werkruimte als de bento.
De bestaande velden en handlers blijven de bron van waarheid.
Mijn maanden (#view-historie) hoort in dezelfde route en staat daarom in
dezelfde selectors: anders klapt de klassieke zijbalk terug zodra een
medewerker vanaf het dashboard zijn historie opent -- precies de zichtbare
terugval naar Klassiek die hierboven bij Mededelingen al is beschreven. De
weg terug is de knop "Naar Dashboard" in de kop van het scherm zelf, net
zoals Mijn uren het doet. */
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active),
html[data-skin="new"] .app-shell:has(#view-historie.is-active) {
background: #081726;
}
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active) .sidebar,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .sidebar {
display: none;
}
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active) .main-content,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .main-content {
margin-left: 0;
padding: 0 clamp(18px, 3vw, 48px) 52px;
background: #081726;
}
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active) .topbar,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .topbar {
border-bottom-color: rgba(255, 255, 255, .09);
background: #081726;
box-shadow: none;
}
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active) .topbar-title,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .topbar-title {
display: block;
}
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active) .mobile-topbar-home,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .mobile-topbar-home {
display: flex;
min-width: 190px;
}
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active) .mobile-brand-home,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .mobile-brand-home {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 14px;
background: #0e2334;
color: #efe9dc;
font: 700 16px var(--path-serif);
padding: 9px 14px;
}
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active) .mobile-brand-home img,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .mobile-brand-home img {
width: auto;
max-width: 96px;
height: 24px;
object-fit: contain;
}
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active) .topbar-title h1,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .topbar-title h1 {
color: #efe9dc;
font: 400 var(--n-kop-topbalk)/1.05 var(--path-serif);
}
html[data-skin="new"] #view-timesheet {
width: min(100%, 1440px);
margin: 0 auto;
color: #c9d5da;
}
/* #view-customer-timesheet is een Klassiek-only scherm (zie index.html):
New-skin gebruikt voor dezelfde taak al het eigen inklapmechanisme op het
Dashboard (#new-bento-customer). De enige knop die hiernaartoe zou kunnen
linken (#employee-customer-timesheet-open) zit op een kaart die New-skin
toch al verbergt, maar dit is een expliciete tweede garantie mocht iemand
via de hash rechtstreeks naar #customer-timesheet navigeren. */
/* #view-historie stond hier eerder ook in. Dat was een gat, geen keuze: in
Klassiek kan een medewerker zijn afgelopen maanden en hun status inzien, in
New helemaal niet -- en ook de ingang ernaartoe was verborgen. De
toelichting in de code zei dat de open-actiekaart die behoefte al dekte,
maar dat is iets anders: die gaat over wat nog open staat, niet over wat je
eerder hebt ingediend en goedgekeurd gekregen. Het scherm doet het gewoon,
dus het mag er zijn; hieronder staat de opmaak ervoor in deze skin.
#view-customer-timesheet en #view-teamstatus blijven wel verborgen, en dat
is wél een keuze: de klanturenstaat heeft in New een eigen uitklapkaart op
het dashboard, en de procesfasen staan al bovenaan de beheerstoryline. */
html[data-skin="new"] #view-customer-timesheet,
html[data-skin="new"] #view-teamstatus {
display: none !important;
}
/* Mijn maanden in deze skin: een archief, niet een tabel. De rijen die in
Klassiek een tabelregel zijn worden hier kaarten, want dat is wat je ermee
doet -- je zoekt één maand op en opent hem, je vergelijkt geen kolommen. De
kolomkoppen blijven staan als rustige labelregel, zodat de uitlijning
leesbaar blijft. Zelfde bouwstenen als Mijn uren (donker paneel, hairline,
serif-kop) zodat de medewerkerroute één geheel blijft. Markup en handlers
zijn ongewijzigd; alleen opmaak. */
html[data-skin="new"] #view-historie {
width: 100%;
margin: 0 auto;
color: #c9d5da;
}
html[data-skin="new"] #view-historie > .view-heading {
display: flex;
align-items: end;
margin: 0;
padding: 30px 0 22px;
border-bottom: 1px solid rgba(255, 255, 255, .09);
}
html[data-skin="new"] #view-historie > .view-heading h2 {
margin: 8px 0 0;
color: #efe9dc;
font: 400 var(--n-kop-scherm)/1.02 var(--path-serif);
}
html[data-skin="new"] #view-historie > .view-heading p {
margin-top: 9px;
color: #8595a0;
}
html[data-skin="new"] #view-historie > .view-heading .text-button {
flex: 0 0 auto;
margin-bottom: 4px;
color: #9fe0bd;
}
/* Het paneel is hier geen kaart meer: de kaarten zitten erin. */
html[data-skin="new"] #view-historie > .panel {
margin-top: 24px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
padding: 0;
}
html[data-skin="new"] #view-historie .employee-history {
gap: 12px;
}
html[data-skin="new"] #view-historie .employee-history-head {
border-top: 0;
background: none;
color: #7f8e99;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
padding: 0 22px 4px;
}
html[data-skin="new"] #view-historie .employee-history-row {
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 20px;
background: rgba(15, 38, 57, .96);
padding: 18px 22px;
box-shadow: 0 18px 44px rgba(2, 12, 22, .18);
transition: border-color .18s ease, transform .18s ease;
}
html[data-skin="new"] #view-historie .employee-history-row:hover {
border-color: rgba(126, 201, 156, .34);
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
html[data-skin="new"] #view-historie .employee-history-row {
transition: none;
}
html[data-skin="new"] #view-historie .employee-history-row:hover {
transform: none;
}
}
/* De maandnaam is waar je op zoekt, dus die krijgt de serif en de maat. */
html[data-skin="new"] #view-historie .employee-history-row > :first-child > strong {
color: #efe9dc;
font: 400 21px/1.15 var(--path-serif);
}
html[data-skin="new"] #view-historie .employee-history-row > :nth-child(2) > strong {
color: #efe9dc;
font-size: 15px;
font-variant-numeric: tabular-nums;
}
html[data-skin="new"] #view-historie .employee-history-row small {
margin-top: 5px;
color: #8595a0;
font-size: 11px;
}
html[data-skin="new"] #view-historie .employee-history-current {
margin-left: 10px;
border: 1px solid rgba(217, 154, 60, .45);
background: rgba(217, 154, 60, .14);
color: #e7b25d;
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
padding: 4px 9px;
}
html[data-skin="new"] #view-historie .employee-history-row .small-button {
border-color: rgba(126, 201, 156, .3);
background: rgba(75, 177, 136, .13);
color: #9fe0bd;
font-weight: 700;
white-space: nowrap;
}
html[data-skin="new"] #view-historie .employee-history-row .small-button:hover {
border-color: rgba(126, 201, 156, .55);
background: rgba(75, 177, 136, .22);
}
html[data-skin="new"] #view-historie .dashboard-action-empty {
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 20px;
background: rgba(15, 38, 57, .96);
color: #8595a0;
padding: 26px 22px;
}
@media (max-width: 860px) {
html[data-skin="new"] #view-historie > .view-heading {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
html[data-skin="new"] #view-historie > .view-heading .text-button {
align-self: flex-start;
margin-bottom: 0;
}
html[data-skin="new"] #view-historie .employee-history-row {
border-radius: 18px;
padding: 16px 18px;
}
}
html[data-skin="new"] #view-timesheet > .view-heading {
display: flex;
align-items: end;
min-height: 138px;
margin: 0;
padding: 34px 0 24px;
border-bottom: 1px solid rgba(255, 255, 255, .09);
}
html[data-skin="new"] #view-timesheet > .view-heading h2 {
margin: 8px 0 0;
color: #efe9dc;
font: 400 var(--n-kop-scherm)/1.02 var(--path-serif);
}
html[data-skin="new"] #view-timesheet > .view-heading p {
color: #8595a0;
}
html[data-skin="new"] #view-timesheet > .view-heading .status-pill {
margin-left: auto;
border-color: rgba(217, 161, 60, .5);
background: rgba(217, 161, 60, .14);
color: #e7b25d;
}
html[data-skin="new"] #view-timesheet .timesheet-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(250px, .3fr);
gap: 18px;
margin-top: 22px;
}
html[data-skin="new"] #view-timesheet .timesheet-panel,
html[data-skin="new"] #view-timesheet .summary-card,
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-panel {
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 22px;
background: rgba(15, 38, 57, .96);
box-shadow: 0 22px 55px rgba(2, 12, 22, .22);
}
html[data-skin="new"] #view-timesheet .timesheet-panel {
overflow: hidden;
}
html[data-skin="new"] #view-timesheet .assignment-bar {
border-bottom-color: rgba(255, 255, 255, .1);
background: linear-gradient(180deg, rgba(21, 47, 67, .94), rgba(9, 24, 35, .94));
color: #c9d5da;
}
html[data-skin="new"] #view-timesheet .hours-view-toolbar {
padding: 16px 20px;
background: rgba(9, 24, 35, .76);
}
html[data-skin="new"] #view-timesheet .summary-card {
padding: 18px 16px 14px;
background: linear-gradient(180deg, rgba(8, 22, 34, .96), rgba(12, 30, 45, .96));
}
html[data-skin="new"] #view-timesheet .assignment-bar small,
html[data-skin="new"] #view-timesheet .hours-view-toolbar small,
html[data-skin="new"] #view-timesheet .hours-visible-total span {
color: #8595a0;
}
html[data-skin="new"] #view-timesheet .hours-view-toolbar {
border-bottom-color: rgba(255, 255, 255, .1);
}
html[data-skin="new"] #view-timesheet .hours-view-toolbar strong,
html[data-skin="new"] #view-timesheet .hours-visible-total strong,
html[data-skin="new"] #view-timesheet .summary-card h3 {
color: #efe9dc;
}
html[data-skin="new"] #view-timesheet .segmented-control {
border-color: rgba(255, 255, 255, .12);
background: #0b2031;
}
html[data-skin="new"] #view-timesheet .segmented-control button {
color: #aab8bf;
}
html[data-skin="new"] #view-timesheet .segmented-control button.is-active {
background: #2f6a4c;
color: #fff;
}
html[data-skin="new"] #view-timesheet .hours-table {
color: #c9d5da;
}
html[data-skin="new"] #view-timesheet .hours-table th {
background: #0b2031;
color: #93a2a8;
}
/* De weekaanduiding in de eerste kolom blijft groen: dat is de rij-identiteit.
De datum per dag wordt juist stil -- zie de toelichting bij
.hours-table .date-number verderop. Deze twee stonden op één regel en
kregen daardoor dezelfde kleur, terwijl ze niet hetzelfde doen. */
html[data-skin="new"] #view-timesheet .hours-table td:first-child {
color: #9bd3b4;
}
html[data-skin="new"] #view-timesheet .hours-table .date-number {
color: #9fb2ab;
}
html[data-skin="new"] #view-timesheet .hours-table input {
border-color: rgba(255, 255, 255, .13);
background: #102b40;
color: #f4f1e6;
}
html[data-skin="new"] #view-timesheet .hours-table input:focus {
border-color: #4bb188;
box-shadow: 0 0 0 4px rgba(75, 177, 136, .18);
}
html[data-skin="new"] #view-timesheet .timesheet-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
border-top-color: rgba(255, 255, 255, .1);
padding-top: 18px;
}
html[data-skin="new"] #view-timesheet .timesheet-action-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-left: auto;
}
html[data-skin="new"] #view-timesheet .timesheet-actions p,
html[data-skin="new"] #view-timesheet .summary-card dt,
html[data-skin="new"] #view-timesheet .summary-note p {
color: #93a2a8;
}
html[data-skin="new"] #view-timesheet .summary-card dd {
color: #efe9dc;
}
html[data-skin="new"] #view-timesheet .summary-card input {
border-color: rgba(255, 255, 255, .13);
background: #102b40;
color: #f4f1e6;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-panel {
margin-top: 18px;
padding: 28px;
background: linear-gradient(180deg, rgba(11, 29, 41, .96), rgba(13, 35, 52, .96));
}
html[data-skin="new"] #view-timesheet .customer-timesheet-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 18px 0 22px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-flow li {
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 16px;
background: rgba(14, 35, 52, .9);
padding: 18px 16px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-grid {
display: grid;
gap: 16px;
margin-top: 18px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-period-control,
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-grid label,
html[data-skin="new"] #view-timesheet .customer-timesheet-mail-preview {
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(11, 24, 35, .72);
}
html[data-skin="new"] #view-timesheet .customer-timesheet-period-control {
display: grid;
gap: 10px;
padding: 14px 16px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-period-fields {
display: flex;
gap: 10px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-period-fields .month-picker-trigger,
html[data-skin="new"] #view-timesheet .customer-timesheet-period-fields input,
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-grid input[type="file"] {
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 12px;
background: #102b40;
color: #f4f1e6;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-grid label {
display: grid;
gap: 10px;
padding: 14px 16px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-actions .button,
html[data-skin="new"] #view-timesheet .timesheet-action-buttons .button {
min-width: 140px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-panel > p,
html[data-skin="new"] #view-timesheet .customer-timesheet-flow span,
html[data-skin="new"] #view-timesheet .customer-timesheet-action-help,
html[data-skin="new"] #view-timesheet .customer-timesheet-current {
color: #93a2a8;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-flow strong,
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-panel h3,
html[data-skin="new"] #view-timesheet .customer-timesheet-mail-preview strong,
html[data-skin="new"] #view-timesheet .customer-timesheet-field-label {
color: #efe9dc;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-current {
margin-top: 18px;
padding: 12px 14px;
border: 1px solid rgba(75, 177, 136, .18);
border-radius: 12px;
background: rgba(75, 177, 136, .06);
}
html[data-skin="new"] #view-timesheet .customer-timesheet-mail-preview {
margin-top: 18px;
border-color: rgba(75, 177, 136, .28);
background: linear-gradient(180deg, rgba(9, 39, 32, .96), rgba(7, 25, 28, .96));
color: #d8e8df;
padding: 16px 18px 18px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-mail-preview-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-mail-preview pre {
color: #c9d5da;
white-space: pre-wrap;
}
@media (max-width: 800px) {
html[data-skin="new"] #view-timesheet .customer-timesheet-flow {
grid-template-columns: 1fr;
}
}
@media (max-width: 800px) {
html[data-skin="new"] #view-timesheet .timesheet-layout {
grid-template-columns: 1fr;
}
html[data-skin="new"] #view-timesheet .customer-timesheet-upload-panel {
padding: 20px 16px;
}
}
/* De rest van de klassieke Dashboard-inhoud (het oude hero-blok, de
maandhistorie...) blijft verborgen: de bento vervangt die volledig. Twee
secties blijven wel bestaan en zijn hier bewust uitgezonderd, want zonder
ze was er geen enkele plek meer waar een medewerker kon zien dat er
bijvoorbeeld 2 maanden tegelijk open staan, of dat Backoffice een
correctie heeft teruggestuurd -- beide leunen al op --vlak/--line/
--navy-tekst e.d., die het donkere thema (de standaard in Nieuw) al
passend herdefinieert, dus geen aparte Nieuw-stijl nodig, alleen zichtbaar
maken. Het oude hero-blok zelf (.employee-hero, "Mijn werkvoorraad" met de
"Uren verder invullen"/"Bekijk alle open acties"-knoppen) stond hier eerder
ook even uitgezonderd, maar dat gaf dubbele/inconsistente info naast de
nieuwe #employee-open-overview-kaart die dezelfde "welke maanden staan
open"-behoefte al in de bento-stijl dekt -- blijft dus weer verborgen. */
/* #employee-history-teaser staat er nu bij. Dat is de enige ingang naar Mijn
maanden, en zonder die regel had een medewerker in deze skin geen enkele
manier om zijn eerdere urenstaten terug te zien -- terwijl dat in Klassiek
wel kan. De open-actiekaart dekt die behoefte niet: die gaat over wat nog
open staat, niet over wat je eerder hebt ingediend en goedgekeurd gekregen. */
html[data-skin="new"] #view-employee-dashboard > :not(.new-employee-bento):not(#employee-open-overview):not(#employee-dashboard-correction):not(#employee-history-teaser) {
display: none !important;
}
html[data-skin="new"] #view-employee-dashboard.is-active {
display: flex;
flex-direction: column;
gap: 20px;
}
html[data-skin="new"] #employee-open-overview {
order: 1;
margin: 0;
}
html[data-skin="new"] #employee-dashboard-correction {
order: 2;
}
/* De ingang naar Mijn maanden. Onderaan, want het is naslag: eerst wat open
staat, dan een correctie, dan pas het archief. Bewust een smalle regel en
geen kaart -- het is een deur, geen informatie. */
html[data-skin="new"] #employee-history-teaser {
order: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 22px;
background: rgba(15, 38, 57, .82);
box-shadow: none;
padding: 18px 24px;
}
html[data-skin="new"] #employee-history-teaser .section-label {
color: #7fc9a0;
}
html[data-skin="new"] #employee-history-teaser strong {
display: block;
margin-top: 5px;
color: #efe9dc;
font: 400 19px/1.2 var(--path-serif);
}
html[data-skin="new"] #employee-history-teaser .text-button {
flex: 0 0 auto;
border: 1px solid rgba(126, 201, 156, .3);
border-radius: 12px;
background: rgba(75, 177, 136, .13);
color: #9fe0bd;
font-weight: 700;
padding: 10px 15px;
transition: background .18s ease, border-color .18s ease;
}
html[data-skin="new"] #employee-history-teaser .text-button:hover {
border-color: rgba(126, 201, 156, .55);
background: rgba(75, 177, 136, .22);
}
/* #customer-timesheet-admin-teaser: dezelfde opknip als hierboven, nu voor
Klanturenstaten op het beheerdashboard. De order-waarde staat los
hieronder bij de rest van de beheerdashboard-ordening (order: 6), zodat
hij op precies de plek blijft staan waar het paneel eerst stond. */
html[data-skin="new"] #customer-timesheet-admin-teaser {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 22px;
background: rgba(15, 38, 57, .82);
box-shadow: none;
padding: 18px 24px;
}
html[data-skin="new"] #customer-timesheet-admin-teaser .section-label {
color: #7fc9a0;
}
html[data-skin="new"] #customer-timesheet-admin-teaser strong {
display: block;
margin-top: 5px;
color: #efe9dc;
font: 400 19px/1.2 var(--path-serif);
}
html[data-skin="new"] #customer-timesheet-admin-teaser .text-button {
flex: 0 0 auto;
border: 1px solid rgba(126, 201, 156, .3);
border-radius: 12px;
background: rgba(75, 177, 136, .13);
color: #9fe0bd;
font-weight: 700;
padding: 10px 15px;
transition: background .18s ease, border-color .18s ease;
}
html[data-skin="new"] #customer-timesheet-admin-teaser .text-button:hover {
border-color: rgba(126, 201, 156, .55);
background: rgba(75, 177, 136, .22);
}
@media (max-width: 720px) {
html[data-skin="new"] #customer-timesheet-admin-teaser {
flex-direction: column;
align-items: stretch;
border-radius: 18px;
padding: 16px 18px;
}
html[data-skin="new"] #customer-timesheet-admin-teaser .text-button {
width: 100%;
}
}
@media (max-width: 720px) {
html[data-skin="new"] #employee-history-teaser {
flex-direction: column;
align-items: stretch;
border-radius: 18px;
padding: 16px 18px;
}
html[data-skin="new"] #employee-history-teaser .text-button {
width: 100%;
}
}
/* "Volgende actie": het idee van het oude hero-blok (één duidelijke
eerstvolgende stap, met knop) teruggebracht in de kaart-taal van deze
sectie -- amber accent zoals de rest van de bento, i.p.v. los ernaast in
een andere stijl zoals het hero-blok deed. */
html[data-skin="new"] .employee-open-overview-next {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 24px 18px;
border: 1px solid rgba(217, 161, 60, .35);
border-radius: 16px;
background: color-mix(in srgb, var(--path-amber) 10%, #112a3c);
padding: 16px 18px;
}
html[data-skin="new"] .employee-open-overview-next .section-label {
color: #d9a13c;
}
html[data-skin="new"] .employee-open-overview-next strong {
display: block;
margin-top: 5px;
color: #fff;
font: 400 19px var(--path-serif);
}
html[data-skin="new"] .employee-open-overview-next small {
display: block;
margin-top: 4px;
color: #b8c3c9;
font-size: 11px;
}
html[data-skin="new"] .employee-open-overview-next .button-primary {
flex: 0 0 auto;
background: var(--path-amber);
color: #241804;
}
@media (max-width: 720px) {
html[data-skin="new"] .employee-open-overview-next {
flex-direction: column;
align-items: stretch;
margin: 0 16px 16px;
}
html[data-skin="new"] .employee-open-overview-next .button-primary {
width: 100%;
}
}
/* ---------------------------------------------------------------------------
"Andere maanden" 1-op-1 naar de referentie (25 sep): één kaart in de stijl
van het verloop erboven, kop in kleine kapitalen, per maand een smalle
maandregel en daaronder de acties als rijen (icoon, titel, uitleg, knop
rechts). "Volgende actie" vervalt hier: op Home ís het verloop de takenlijst
voor de huidige maand, en de eerste rij hieronder is de eerstvolgende stap
voor een andere maand. Alles hieronder overschrijft de oudere kaartopmaak
hierboven voor deze ene sectie. */
html[data-skin="new"] #employee-open-overview {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 24px;
background: #0f2639;
background-image: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
padding: 0;
}
html[data-skin="new"] #employee-open-overview > .panel-heading { margin: 0; padding: 15px 21px 13px; }
html[data-skin="new"] #employee-open-overview > .panel-heading .section-label { color: rgba(232, 240, 236, .58); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
html[data-skin="new"] #employee-open-overview > .panel-heading h3,
html[data-skin="new"] #employee-open-overview > .panel-heading small {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
html[data-skin="new"] #employee-open-overview .employee-open-overview-next { display: none; }
html[data-skin="new"] #employee-open-overview .employee-open-overview-list { display: grid; gap: 0; padding: 0; }
html[data-skin="new"] #employee-open-overview .employee-open-month { border: 0; border-top: 1px solid rgba(255, 255, 255, .055); border-radius: 0; background: transparent; box-shadow: none; }
html[data-skin="new"] #employee-open-overview .employee-open-month-heading { padding: 11px 21px 3px; background: transparent; }
html[data-skin="new"] #employee-open-overview .employee-open-month-heading:hover { background: rgba(255, 255, 255, .03); }
html[data-skin="new"] #employee-open-overview .employee-open-month-heading-copy strong { color: rgba(232, 240, 236, .72); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[data-skin="new"] #employee-open-overview .employee-open-month-heading-copy small { display: none; }
html[data-skin="new"] #employee-open-overview .employee-open-month-heading .status-pill { min-width: 0; font-size: 10px; }
html[data-skin="new"] #employee-open-overview .employee-open-month-chevron { width: 7px; height: 7px; border-color: rgba(232, 240, 236, .5); }
html[data-skin="new"] #employee-open-overview .employee-open-month-body { border: 0; background: transparent; }
html[data-skin="new"] #employee-open-overview .employee-open-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 0; padding: 9px 21px 13px; }
html[data-skin="new"] #employee-open-overview .employee-open-action-row + .employee-open-action-row { border-top: 0; }
html[data-skin="new"] .andere-maand-icoon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(232, 176, 106, .35); border-radius: 50%; background: rgba(217, 154, 60, .14); color: #e8b06a; font-size: 12px; font-weight: 900; }
html[data-skin="new"] .andere-maand-icoon.is-correctie { border-color: transparent; background: #d99a3c; color: #0a1c2f; }
html[data-skin="new"] #employee-open-overview .employee-open-action-copy { flex: 1 1 200px; min-width: 0; }
html[data-skin="new"] #employee-open-overview .employee-open-action-copy span { display: none; }
html[data-skin="new"] #employee-open-overview .employee-open-action-copy strong { margin: 0; color: #e8f0ec; font-size: 13px; font-weight: 700; }
html[data-skin="new"] #employee-open-overview .employee-open-action-copy small { margin-top: 1px; color: rgba(232, 240, 236, .55); font-size: 11.5px; }
html[data-skin="new"] #employee-open-overview .employee-open-action-row .small-button { flex: 0 0 auto; width: auto; min-height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: rgba(232, 240, 236, .78); font-size: 12px; font-weight: 800; padding: 0 16px; transition: background .3s, color .3s; }
html[data-skin="new"] #employee-open-overview .employee-open-action-row .small-button:hover { background: rgba(255, 255, 255, .08); color: #e8f0ec; }
@media (max-width: 720px) {
html[data-skin="new"] #employee-open-overview { border-radius: 20px; }
html[data-skin="new"] #employee-open-overview .employee-open-month-heading,
html[data-skin="new"] #employee-open-overview .employee-open-action-row { padding-inline: 16px; }
}
html[data-skin="new"] #view-employee-dashboard .new-employee-bento {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr);
gap: 14px;
color: var(--path-cream);
}
/* De vlakke vulling is een zachte verloop geworden (richtingpagina: "meer
diepte"). Zelfde twee tokens die de skin al gebruikt, alleen van boven naar
onder over de kaart i.p.v. één platte kleur -- op een 30px-ronde kaart van
570px hoog is dat het verschil tussen een vlak en een object. */
html[data-skin="new"] .new-employee-bento > article {
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(214, 227, 219, .24);
/* Referentie-regel 6 (OPDRACHT-MODERN): één radius 24 op kaarten. */
border-radius: 24px;
background: linear-gradient(172deg, var(--path-night-panel), var(--path-night-tile));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 24px 65px rgba(2, 12, 22, .22);
}
html[data-skin="new"] .new-bento-hero {
grid-column: 1;
grid-row: 1;
/* Referentie (25 sep): padding 26, inhoud verdeeld over de hoogte; de kaart
is zo hoog als de weekkaart ernaast, niet hoger. Eerder clamp(34, 5vw, 68)
en min-height 570, waardoor de hero ~75px boven de referentie uitkwam. */
background: linear-gradient(145deg, #214b39, #102f26 74%);
padding: 26px;
justify-content: space-between;
}
/* Warme gloed rechtsboven, uit de richtingpagina. Puur licht, geen vorm: hij
tilt de rechterbovenhoek op zodat de hero niet als één plat groen vlak leest. */
html[data-skin="new"] .new-bento-hero::after {
content: "";
position: absolute;
top: -35%;
right: -20%;
width: 65%;
height: 130%;
background: radial-gradient(circle, rgba(226, 192, 122, .14), transparent 65%);
pointer-events: none;
}
html[data-skin="new"] .new-bento-hero > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .42;
}
html[data-skin="new"] .new-bento-hero-copy { position: relative; z-index: 1; }
html[data-skin="new"] .new-bento-greeting { display: block; color: rgba(244, 241, 230, .62); font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
html[data-skin="new"] .new-bento-hero h2 { margin: 8px 0 0; color: #f4eee3; font: 400 clamp(29px, 3.8vw, 40px)/1.02 var(--path-serif); letter-spacing: -.022em; }
/* Weekkaart 1-op-1 naar de referentie (25 sep): crème kaart met een kop van
weeknummer + datumbereik + stand op één regel (geen weekpijlen meer; de
weekringen in de hero navigeren), Weektotaal, twee pilknoppen en één regel
uitleg. Kleuren en maten zijn die van de gerenderde referentie. */
html[data-skin="new"] .new-bento-week { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; gap: 12px; background: #f4f1e6 !important; color: #10273d; padding: 21px; }
html[data-skin="new"] .new-bento-week-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
html[data-skin="new"] .new-bento-week-kop strong { color: #10273d; font: 800 13.5px var(--path-sans); }
html[data-skin="new"] .new-bento-week-kop small { color: #5a6b7a; font-size: 11.5px; font-weight: 700; }
html[data-skin="new"] .new-bento-week-stand { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
html[data-skin="new"] .new-bento-week-stand.is-open { color: #b0680f; }
html[data-skin="new"] .new-bento-week-stand.is-af { color: #2f6a4c; }
html[data-skin="new"] .new-bento-week-stand.is-later { color: #6c7b89; }
html[data-skin="new"] .new-bento-days { margin: 0 -4px; }
/* Besluit 24 sep, 1-op-1 naar de referentie: één rij per dag (stip, naam +
datum, snelkeuze, veld), geen aparte regel met −/+-stapknoppen meer. */
html[data-skin="new"] .new-bento-day { display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(16, 39, 61, .12); padding: 12px 0; }
html[data-skin="new"] .new-bento-day:first-child { border-top: 0; }
html[data-skin="new"] .new-bento-day-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--path-amber, #d99a3c); }
html[data-skin="new"] .new-bento-day-dot.is-gevuld { background: var(--path-mint, #4bb188); }
html[data-skin="new"] .new-bento-day-naam { flex: 1 1 0; min-width: 0; }
html[data-skin="new"] .new-bento-day-naam strong { display: block; font-size: 12.5px; font-weight: 700; color: #102235; }
html[data-skin="new"] .new-bento-day-naam small { display: block; color: #6c7b89; font-size: 10.5px; }
html[data-skin="new"] .new-bento-presets { display: flex; gap: 3px; flex: 0 0 auto; }
html[data-skin="new"] .new-bento-presets button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d3dbe1; border-radius: 9px; background: #fff; color: #5a6b7a; cursor: pointer; font: 800 11.5px var(--path-sans); transition: background .25s, border-color .25s, color .25s; }
html[data-skin="new"] .new-bento-presets button:hover { border-color: #5f9e78; background: #e6efe7; color: #102235; }
html[data-skin="new"] .new-bento-day input { width: 56px; flex: 0 0 auto; border: 1px solid #cfd8de; border-radius: 10px; background: #fff; color: #102235; font: 800 13.5px var(--path-sans); padding: 8px 9px; text-align: right; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
html[data-skin="new"] .new-bento-day input:focus { border-color: #4bb188; box-shadow: 0 0 0 2px rgba(75, 177, 136, .26); outline: none; }
html[data-skin="new"] .new-bento-day input:disabled { border-color: transparent; background: #f1ece2; color: #b8b0a1; opacity: .55; }
/* De actief geselecteerde dag (vandaag) krijgt de bestaande donkere
accentstijl; de rij zelf blijft dezelfde flex-opbouw. */
html[data-skin="new"] .new-bento-day.is-active { position: relative; margin-inline: -10px; border-color: #18354c; border-radius: 12px; background: #10273d; color: white; padding-inline: 18px; }
html[data-skin="new"] .new-bento-day.is-active .new-bento-day-naam strong,
html[data-skin="new"] .new-bento-day.is-active .new-bento-day-naam small { color: inherit; }
html[data-skin="new"] .new-bento-day.is-active .new-bento-presets button { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); }
html[data-skin="new"] .new-bento-day.is-active input { border-color: #4bb188; background: rgba(255,255,255,.08); color: white; box-shadow: 0 0 0 2px rgba(75, 177, 136, .2); }
html[data-skin="new"] .new-bento-day.is-active input:disabled { background: rgba(255,255,255,.08); color: #91a69d; }
/* Het label mag afbreken, het getal niet: "0,0 uur" brak midden in het bedrag
over twee regels zodra het label lang werd ("Totaal · 4 werkdagen in deze
maand"). Een getal dat over een regeleinde valt is geen getal meer. */
html[data-skin="new"] .new-bento-week-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(16, 39, 61, .12); padding-top: 12px; }
html[data-skin="new"] .new-bento-week-total > span { min-width: 0; color: #5a6b7a; font-size: 11.5px; font-weight: 700; }
html[data-skin="new"] .new-bento-week-total strong { flex: 0 0 auto; font: 400 24px var(--path-serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kleur was #9aa8ad: op de zandkleurige weekkaart is dat 2,01:1, waar WCAG 1.4.3
voor gewone tekst 4,5:1 vraagt. Deze regel vertelt wélke uren de knop
"standaardweek vullen" invult, dus het is geen sierregel maar de uitleg bij
een knop die iets aan je urenstaat verandert. Nu 4,72:1, en de toon blijft
rustig genoeg om ondergeschikt te blijven aan de dagen erboven. Gevonden door
de nieuwe contrastverkenning (22 sep). */
html[data-skin="new"] .new-bento-fill-pattern-note { margin: 0; color: #5a686f; font-size: 11px; line-height: 1.5; }
/* Besluit Remy-LeBeau 29 sep: een mislukte conceptopslag staat in rood op de kaart zelf. */
html[data-skin="new"] .new-bento-opslag.is-fout { color: #b3261e; font-weight: 800; }
html[data-skin="new"] .new-bento-week-actions { display: flex; flex-wrap: wrap; gap: 7px; }
html[data-skin="new"] .new-bento-week-knop { flex: 0 0 auto; border: 1px solid #cfd8de; border-radius: 999px; background: transparent; color: #5a6b7a; cursor: pointer; min-height: 38px; font: 800 12px var(--path-sans); padding: 0 15px; transition: background .25s, border-color .25s; }
html[data-skin="new"] .new-bento-week-knop.is-primair { flex: 1 1 auto; border-color: #10273d; background: #10273d; color: #f4f1e6; }
html[data-skin="new"] .new-bento-week-knop:hover:not(:disabled) { border-color: #4bb188; }
html[data-skin="new"] .new-bento-week-knop:disabled { cursor: default; opacity: .5; }
/* Herokaart Medewerker-Home: 1-op-1 uit de referentie (pilot/modern-referentie/,
OPDRACHT-MODERN.md), besluit Gio 24 sep. Ring + weeknavigatie zitten samen
in de kaart, geen losse metertegel meer (die is vervallen). */
html[data-skin="new"] .new-bento-hero { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
html[data-skin="new"] .new-bento-hero-spreuk { max-width: 34ch; margin: 11px 0 0; color: rgba(244, 241, 230, .66); font-size: 12.5px; font-style: italic; line-height: 1.5; }
html[data-skin="new"] .new-bento-hero-cijfers { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
html[data-skin="new"] .new-bento-hero-ring { position: relative; display: grid; width: 120px; height: 120px; flex: 0 0 auto; place-items: center; }
html[data-skin="new"] .new-bento-hero-ring svg { position: absolute; inset: 0; width: 120px; height: 120px; transform: rotate(-90deg); }
html[data-skin="new"] .new-bento-hero-ring-leeg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 7; }
html[data-skin="new"] .new-bento-hero-ring-boog { fill: none; stroke: var(--path-mint, #4bb188); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 0 9px rgba(75,177,136,.65)); }
html[data-skin="new"] .new-bento-hero-ring-binnen { text-align: center; }
html[data-skin="new"] .new-bento-hero-ring-binnen strong { display: block; font: 400 33px var(--path-serif); letter-spacing: -.03em; line-height: 1; }
html[data-skin="new"] .new-bento-hero-ring-binnen small { display: block; margin-top: 1px; color: rgba(232, 240, 236, .56); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="new"] .new-bento-hero-uren { min-width: 0; }
html[data-skin="new"] .new-bento-hero-uren strong { display: block; font: 400 clamp(42px, 6.2vw, 60px) var(--path-serif); letter-spacing: -.048em; line-height: .85; text-shadow: 0 6px 30px rgba(0,0,0,.45); }
html[data-skin="new"] .new-bento-hero-uren small { display: block; margin-top: 7px; color: rgba(232, 240, 236, .64); font-size: 12.5px; }
html[data-skin="new"] .new-bento-hero-weken { position: relative; z-index: 1; display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; }
html[data-skin="new"] .new-bento-hero-week { display: grid; gap: 5px; justify-items: center; flex: 1 1 0; min-width: 0; border: 0; background: transparent; cursor: pointer; padding: 0; }
html[data-skin="new"] .new-bento-hero-week-ring { position: relative; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; }
html[data-skin="new"] .new-bento-hero-week-ring svg { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); }
html[data-skin="new"] .new-bento-hero-week-ring-leeg { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 4; }
html[data-skin="new"] .new-bento-hero-week-ring-boog { fill: none; stroke: var(--path-mint, #4bb188); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 119.4; transition: stroke-dashoffset .9s cubic-bezier(.22,1,.36,1), stroke .5s; filter: drop-shadow(0 0 6px rgba(75,177,136,.6)); }
html[data-skin="new"] .new-bento-hero-week-ring strong { color: rgb(232, 238, 244); font-size: 11.5px; font-weight: 800; }
html[data-skin="new"] .new-bento-hero-week.is-open .new-bento-hero-week-ring-boog { stroke: #d99a3c; filter: drop-shadow(0 0 6px rgba(217,154,60,.55)); }
html[data-skin="new"] .new-bento-hero-week.is-open small { color: #e8b06a; }
/* Referentie (design-puntenlijst 25 sep): open week = amber cijfer én een zachte
pulse op de ring; de gekozen week (die de weekkaart toont) krijgt een vlak
achter de ring. Kleuren letterlijk uit de referentie. */
html[data-skin="new"] .new-bento-hero-week.is-open strong { color: #e8b06a; }
html[data-skin="new"] .new-bento-hero-week.is-open .new-bento-hero-week-ring { animation: 3.4s ease-in-out infinite kloppen; }
html[data-skin="new"] .new-bento-hero-week.is-gekozen .new-bento-hero-week-ring { background: rgba(255,255,255,.08); }
html[data-skin="new"] .new-bento-hero-week.is-later .new-bento-hero-week-ring-boog { stroke: rgba(255,255,255,.13); filter: none; }
html[data-skin="new"] .new-bento-hero-week.is-later strong,
html[data-skin="new"] .new-bento-hero-week.is-later small { color: rgba(232, 240, 236, .4); }
html[data-skin="new"] .new-bento-hero-week small { display: block; color: #7fd3b4; font-size: 9px; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="new"] .new-bento-customer { position: relative; grid-column: 1 / -1; grid-row: 3; background: #eee8dc !important; color: #102235; padding: 0; overflow: hidden; }
/* De foto die bij het openklappen hard afkapte is opgelost in het PATCH-blok
onderaan dit bestand: daar krimpt de kop tot een band zodra de kaart
openstaat, zodat er geen afgesneden beeld meer onder de snijlijn hangt.
Hier stond eerder een tweede oplossing voor hetzelfde -- de foto over de
hele kaart doortrekken en laten vervagen. Twee aanpakken die om dezelfde
ruimte vechten geeft een troebel beeld, dus die is weggehaald; de versie
uit het patchblok is met de gebruiker doorgenomen en blijft staan.
De z-index hieronder blijft wel nodig: de inhoud hoort boven het beeld. */
html[data-skin="new"] .new-bento-customer-head,
html[data-skin="new"] .new-bento-customer-expand { position: relative; z-index: 1; }
html[data-skin="new"] .new-bento-customer-head { position: relative; min-height: 330px; }
html[data-skin="new"] .new-bento-customer-head > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-skin="new"] .new-bento-customer-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,241,231,.98) 0 48%, rgba(246,241,231,.1) 78%); }
/* Onderaan ruimte vrijhouden voor de absoluut gepositioneerde open/dicht-
knop: op een smaller kaartje (3-koloms bento op ~1440px) wikkelt de
intro over meer regels en liep de laatste regel anders achter die knop. */
html[data-skin="new"] .new-bento-customer-copy { position: relative; z-index: 1; max-width: 58%; padding: 34px 34px 96px; }
html[data-skin="new"] .new-bento-customer h3 { margin: 18px 0 7px; font: 400 38px var(--path-serif); }
html[data-skin="new"] .new-bento-customer p { color: #4b5859; line-height: 1.5; }
html[data-skin="new"] .new-bento-customer-head > button { position: absolute; z-index: 2; right: 18px; bottom: 18px; left: 18px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #cfc5b5; border-radius: 14px; background: rgba(249,246,239,.94); color: #102235; cursor: pointer; font: 700 13px var(--path-sans); padding: 15px 17px; transition: background .15s ease; }
html[data-skin="new"] .new-bento-customer-head > button:hover { background: #fff; }
html[data-skin="new"] .new-bento-customer-chevron { transition: transform .25s ease; }
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-chevron { transform: rotate(90deg); }
/* Uitgeklapte staat: het echte #customer-timesheet-upload-panel (van Mijn
uren) verhuist hierheen via JS, zodat de medewerker niet hoeft weg te
navigeren. Zie handleNewBentoCustomerToggle in app.js. */
html[data-skin="new"] .new-bento-customer-expand { padding: 0 22px 22px; }
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-upload-panel {
border: none; box-shadow: none; background: transparent; border-radius: 0; margin: 0; padding: 0;
}
html[data-skin="new"] .new-bento-customer-expand .panel-heading,
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-flow,
html[data-skin="new"] .new-bento-customer-expand > .customer-timesheet-upload-panel > p:first-of-type {
display: none;
}
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-current,
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-mail-preview { margin-top: 16px; }
/* Het blokje is altijd smal (bento-kolombreedte), ongeacht viewport -- de
normale @media (max-width: 820px)-inklapregels van dit grid gelden hier
dus onvoorwaardelijk, niet pas op een smalle telefoon. */
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-upload-grid { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-upload-grid .button { width: 100%; }
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-period-fields { grid-template-columns: minmax(0,1fr) 92px; }
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-upload-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-current > div { grid-template-columns: minmax(0, 1fr); }
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-mail-preview-heading { align-items: stretch; flex-direction: column; }
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-mail-preview-heading .small-button { width: 100%; }
/* De actieknoppen ("Al rechtstreeks gemaild", "Concept opslaan", "Indienen
bij Backoffice") erven zonder deze regels de kleuren van het donkere
thema (.button-ghost leunt op --surface/--ink, getuned voor de donkere
navy-achtergrond elders in de app) -- op dit crème kaartje gaf dat een te
grauwe, onsamenhangende knoppenrij. Hier expliciet op het kaartje zelf
getunede kleuren, zodat alle drie knoppen er als één bewust setje
uitzien in plaats van drie losse toevalstreffers. */
html[data-skin="new"] .new-bento-customer-expand .button-ghost {
border-color: #cfc5b5;
background: #f9f6ef;
color: #102235;
}
html[data-skin="new"] .new-bento-customer-expand .button-ghost:hover {
background: #fff;
}
html[data-skin="new"] .new-bento-customer-expand .button-ghost:disabled {
border-color: #ddd5c6;
background: #efe9dc;
color: #8a8375;
}
html[data-skin="new"] .new-bento-customer-expand .button-primary {
box-shadow: none;
}
/* Dit kaartje is een licht eiland in een donkere skin, en alleen de knoppen
waren daarop afgestemd. De invoervelden, de statuspil en het mailblok
erbinnen vielen terug op de donkere basiskleuren van deze skin: bijna
zwarte velden en een donkergroen blok, midden op crème (gemeld met foto).
Kleur hoort bij de ondergrond waar hij op ligt, niet bij het thema in het
algemeen -- daarom hier één samenhangend licht palet voor alles binnen het
kaartje. Dezelfde tinten als de knopregels hierboven, zodat het één setje
blijft. */
html[data-skin="new"] .new-bento-customer-expand :is(input, select, .month-picker-trigger) {
border-color: #cfc5b5;
background: #fbf9f4;
color: #102235;
}
html[data-skin="new"] .new-bento-customer-expand :is(input, select, .month-picker-trigger):focus,
html[data-skin="new"] .new-bento-customer-expand :is(input, select, .month-picker-trigger):focus-visible {
border-color: #2f6a4c;
outline: 0;
box-shadow: 0 0 0 4px rgba(47, 106, 76, .18);
}
html[data-skin="new"] .new-bento-customer-expand input[type="file"]::file-selector-button {
border: 1px solid #cfc5b5;
background: #efe9dc;
color: #1d4b38;
}
html[data-skin="new"] .new-bento-customer-expand .month-choice-panel {
border-color: #cfc5b5;
background: #fbf9f4;
}
/* Dit kaartje is met opzet altijd crème, ongeacht licht/donker (zie de
andere regels hierboven met vaste hexwaarden). De knop zelf kreeg alleen
een vaste tekstkleur en erfde de achtergrond van --surface-muted uit
styles.css -- dat token wordt in donkere modus donkerblauw, waardoor
donkere tekst op donkerblauw onleesbaar werd. Achtergrond nu ook vast. */
html[data-skin="new"] .new-bento-customer-expand .month-choice-panel button {
background: #edf1ea;
color: #102235;
}
html[data-skin="new"] .new-bento-customer-expand .month-choice-panel button:hover {
background: #efe9dc;
}
/* Het blok met de huidige stand en het mailvoorbeeld: geen donkere vlakken,
maar een iets dieper crème met een haarlijn -- zelfde familie als het
kaartje eromheen. */
html[data-skin="new"] .new-bento-customer-expand :is(.customer-timesheet-current, .customer-timesheet-mail-preview) {
border: 1px solid #ddd5c6;
border-radius: 14px;
background: #f6f2e9;
color: #102235;
}
html[data-skin="new"] .new-bento-customer-expand :is(.customer-timesheet-current, .customer-timesheet-mail-preview) :is(p, span, small, pre, strong) {
color: #102235;
}
html[data-skin="new"] .new-bento-customer-expand .status-pill {
border-color: #cfc5b5;
background: #efe9dc;
color: #1d4b38;
}
html[data-skin="new"] .new-bento-customer-expand .small-button {
border-color: #cfc5b5;
background: #f9f6ef;
color: #1d4b38;
}
html[data-skin="new"] .new-bento-customer-expand .small-button:hover {
background: #fff;
}
/* Besluit 24 sep, 1-op-1 naar de referentie: gestapelde rijen (badge + tekst)
in plaats van horizontale cirkels met een verbindingslijn. Vervangt de hele
lijnstuk-geschiedenis hieronder (11 sep, tweemaal onafhankelijk gerepareerd)
-- die geldt niet meer, er is geen lijn meer om uit te lijnen. */
html[data-skin="new"] .new-bento-steps { grid-column: 1 / -1; grid-row: 2; padding: 0; }
html[data-skin="new"] .new-bento-steps > .section-label { display: block; padding: 15px 21px 13px; color: var(--path-gold); }
html[data-skin="new"] .new-bento-steps ol { margin: 0; padding: 0; list-style: none; }
/* max-width none: Klassiek zet op elke lijstrij een leesbreedte van 75ch
(styles.css, .view li). Deze rijen zijn geen lopende tekst maar een regel
met tekst links en acties rechts; met die grens hielden de rijen halverwege
de kaart op (gemeten: 647px van de 1178) en stond "Maand indienen" midden
in de kaart in plaats van rechts, zoals in de referentie. */
html[data-skin="new"] .new-bento-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; max-width: none; border-top: 1px solid rgba(255, 255, 255, .055); padding: 13px 21px; color: #9aa8ad; }
html[data-skin="new"] .new-bento-step-badge { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(232, 240, 236, .4); font-size: 11px; font-weight: 900; }
html[data-skin="new"] .new-bento-step-tekst { flex: 1 1 200px; min-width: 0; }
html[data-skin="new"] .new-bento-step-tekst strong { display: block; color: inherit; font-size: 13px; font-weight: 700; }
html[data-skin="new"] .new-bento-step-tekst small { display: block; margin-top: 1px; font-size: 11.5px; }
html[data-skin="new"] .new-bento-steps li.is-done { color: #cfe5d7; }
html[data-skin="new"] .new-bento-steps li.is-done .new-bento-step-badge { background: #4bb188; color: #06131f; }
/* is-current = wacht nog op een actie van iemand anders (bv. Backoffice-controle);
bewust een andere kleur dan is-done, zodat "klaar" en "wacht nog" niet identiek ogen. */
html[data-skin="new"] .new-bento-steps li.is-current { color: #f1d8ab; }
html[data-skin="new"] .new-bento-steps li.is-current .new-bento-step-badge { background: var(--path-amber); color: #0a1c2f; animation: 2.6s ease-in-out infinite kloppen; }
/* Acties rechts in een stap (referentie, 25 sep): gatchips + Standaardmaand
vullen in stap 1, Maand indienen in stap 2. Leeg = geen ruimte innemen. */
html[data-skin="new"] .new-bento-step-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; justify-content: flex-end; }
html[data-skin="new"] .new-bento-step-acties:empty { display: none; }
html[data-skin="new"] .new-bento-step-acties small { color: rgba(232, 240, 236, .4); font-size: 11px; }
html[data-skin="new"] .new-bento-gat-chip { border: 1px solid rgba(232, 176, 106, .35); border-radius: 999px; background: rgba(217, 154, 60, .14); color: #e8b06a; cursor: pointer; min-height: 34px; font: 800 11.5px var(--path-sans); font-variant-numeric: tabular-nums; padding: 0 13px; transition: background .25s; }
html[data-skin="new"] .new-bento-gat-chip:hover { background: rgba(217, 154, 60, .26); }
html[data-skin="new"] .new-bento-step-knop { border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: rgba(232, 240, 236, .72); cursor: pointer; min-height: 38px; font: 800 12px var(--path-sans); padding: 0 16px; transition: background .3s, color .3s; }
html[data-skin="new"] .new-bento-step-knop:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #e8f0ec; }
html[data-skin="new"] .new-bento-step-knop.is-indienen { border-color: transparent; background: rgba(255, 255, 255, .07); color: rgba(232, 240, 236, .66); }
html[data-skin="new"] .new-bento-step-knop.is-indienen.is-klaar { background: linear-gradient(140deg, #54c096, #2f8f6b); color: #06131f; }
html[data-skin="new"] .new-bento-step-knop:disabled { cursor: default; opacity: .7; }
@keyframes kloppen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
html[data-skin="new"] .new-bento-steps li.is-current .new-bento-step-badge,
html[data-skin="new"] .new-bento-hero-week.is-open .new-bento-hero-week-ring { animation: none; }
}
@media (max-width: 1100px) {
html[data-skin="new"] #view-employee-dashboard .new-employee-bento { grid-template-columns: minmax(0, 1fr); }
html[data-skin="new"] .new-bento-hero,
html[data-skin="new"] .new-bento-week,
html[data-skin="new"] .new-bento-customer,
html[data-skin="new"] .new-bento-steps { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .main-content { padding: 0 12px 84px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .mobile-topbar-home { min-width: 0; }
html[data-skin="new"] #view-employee-dashboard .new-employee-bento { grid-template-columns: minmax(0, 1fr); gap: 13px; }
html[data-skin="new"] .new-employee-bento > article { grid-column: 1; grid-row: auto; border-radius: 20px; }
html[data-skin="new"] .new-bento-hero { min-height: 0; padding: 22px 20px; }
html[data-skin="new"] .new-bento-week { padding: 16px 12px; }
html[data-skin="new"] .new-bento-day { flex-wrap: wrap; gap: 8px 10px; padding: 10px 0; }
html[data-skin="new"] .new-bento-day-naam { flex-basis: 100%; }
html[data-skin="new"] .new-bento-presets button { width: 32px; height: 32px; }
html[data-skin="new"] .new-bento-customer-head { min-height: 380px; }
html[data-skin="new"] .new-bento-customer-copy { max-width: 78%; padding: 28px 22px; }
html[data-skin="new"] .new-bento-customer-head::after { background: linear-gradient(180deg, rgba(246,241,231,.98) 0 48%, rgba(246,241,231,.08) 78%); }
html[data-skin="new"] .new-bento-steps li { padding: 13px 16px; }
}
html[data-skin="new"] .toast {
border: 1px solid rgba(75, 177, 136, .22);
border-radius: 16px;
background: var(--path-night);
}
html[data-skin="new"] .notification-popup {
border: 1px solid rgba(75, 177, 136, .22);
border-radius: 16px;
background: var(--path-night);
}
/* Mededelingen (admin + medewerker) — lijstregels worden kaarten,
koppen op de serif, de "ingetrokken"-markering een zachte ring
i.p.v. een balk links. Alleen onder html[data-skin="new"]. */
html[data-skin="new"] .announcement-list,
html[data-skin="new"] .employee-announcement-list {
gap: 12px;
padding: 12px;
}
html[data-skin="new"] .announcement-item {
border-top: 0;
border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
border-radius: 16px;
background: var(--surface);
padding: 20px 22px;
}
html[data-skin="new"] .announcement-item.is-draft {
border-style: dashed;
background: var(--vlak-zacht);
}
html[data-skin="new"] .announcement-item.is-withdrawn {
border-left-width: 1px;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 45%, transparent);
background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface));
}
html[data-skin="new"] .announcement-item-head h3 {
font-family: var(--path-serif);
font-weight: 400;
}
/* Zie .announcement-meta in styles.css: ontvangers, mailkeuze en afzender zijn
feiten, geen invulvelden. Het vlak eromheen maakte er hier nog wel een
formulier van. */
html[data-skin="new"] .announcement-meta span {
border-radius: 0;
background: transparent;
}
html[data-skin="new"] .announcement-meta {
border-top-color: rgba(255, 255, 255, .1);
}
/* Goedkeuringen + procesvoortgang — de 4-fasen-track als doorlopende
groene lijn met gloed op afgeronde/huidige stap (zoals de pilot),
groepskoppen op de serif. Alleen onder html[data-skin="new"]. */
html[data-skin="new"] .workflow-overview {
border-color: var(--line);
border-radius: 18px;
background: var(--surface);
}
html[data-skin="new"] .workflow-progress-card {
border-right-color: var(--line);
}
html[data-skin="new"] .workflow-step > span {
border-radius: 999px;
border-color: var(--line);
background: var(--vlak);
transition: box-shadow .3s ease, background .3s ease;
}
html[data-skin="new"] .workflow-step.is-done > span {
border-color: var(--mint-dark);
background: var(--mint-dark);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--path-green) 16%, transparent);
}
html[data-skin="new"] .workflow-step.is-current > span {
border-color: var(--path-green);
background: var(--green-light);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--path-green) 18%, transparent);
}
html[data-skin="new"] .workflow-line {
height: 2px;
background: color-mix(in srgb, var(--line) 90%, transparent);
}
html[data-skin="new"] .workflow-line.is-done {
background: var(--path-green);
}
html[data-skin="new"] .approval-period-heading h3 {
font-family: var(--path-serif);
font-weight: 400;
color: var(--navy-tekst);
}
/* Goedkeuringenlijst: kaarten krijgen de zachte fundament-schaduw en een
groene ring bij hover, zoals de andere lijstitems in dit fundament
(facturen, medewerkers). Alleen html[data-skin="new"]. */
html[data-skin="new"] .approval-card {
box-shadow: var(--shadow);
}
html[data-skin="new"] .approval-card:hover {
border-color: color-mix(in srgb, var(--path-green) 40%, var(--line));
}
/* Eigen identiteit per scherm (gebruikersverzoek: de New-schermen lijken nu
te veel op elkaar). Goedkeuringen is het scherm waar iets op je wacht --
amber is in de rest van de app al de kleur van "wachten op actie"
(status-warning, de patroonwaarschuwing). Hier wordt dat het dominante
accent: een amber kop en een amber streep aan de linkerkant van elke
kaart, in plaats van amber alleen op de knop. Puur additief bovenop de
bestaande kaartstijl -- de schaduw/hover-ring/lay-out blijven gelijk. */
html[data-skin="new"] #view-approvals .section-label {
color: var(--path-amber);
}
html[data-skin="new"] #view-approvals .approval-card {
border-left: 3px solid color-mix(in srgb, var(--path-amber) 55%, var(--line));
}
html[data-skin="new"] #view-approvals .approval-card:hover {
border-left-color: var(--path-amber);
}
/* Mijn uren — de urentabel op de nieuwe tokens; uurwaarden in de serif,
focus in het groen, lijnen en kopcel zachter. Alleen html[data-skin="new"]. */
html[data-skin="new"] .hours-table th,
html[data-skin="new"] .hours-table td {
border-bottom-color: color-mix(in srgb, var(--line) 85%, transparent);
}
html[data-skin="new"] .hours-table th {
background: var(--vlak-zacht);
}
html[data-skin="new"] .hours-table td:first-child {
color: var(--mint-dark-tekst);
}
/* Hier stonden vijfentwintig groene datumpillen in één raster, net als in
Klassiek. Daar zijn ze rustige bijschriften geworden zodat je de ingevulde
uren terugvindt; als die regel hier blijft staan, landt die verbetering in
deze skin niet -- en dit is juist de skin waar de gebruiker naar kijkt. */
html[data-skin="new"] .hours-table .date-number {
background: transparent;
color: rgba(214, 226, 220, .62);
}
html[data-skin="new"] .hours-table input {
border-radius: 12px;
border-color: var(--line);
background: var(--vlak);
font-family: var(--path-serif);
font-weight: 400;
font-size: 16px;
}
html[data-skin="new"] .hours-table input:hover {
border-color: color-mix(in srgb, var(--path-green) 45%, var(--line));
}
html[data-skin="new"] .hours-table input:focus {
border-color: var(--path-green);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--path-green) 18%, transparent);
}
html[data-skin="new"] .hours-table tfoot th {
background: var(--green-light);
color: var(--mint-dark-tekst);
}
/* Klanturenstaat-stappenblok onderaan "Mijn uren": kleuren komen al
automatisch mee via de tokens, hier alleen de radius zachter zoals de
rest van het fundament. Alleen html[data-skin="new"]. */
html[data-skin="new"] .customer-timesheet-flow li {
border-radius: 16px;
}
/* Facturen — de maandkaart, de statuswegwijzer, de tabel en de detailpreview
op de nieuwe tokens. Zachte crème-panelen, groene accenten, serif-koppen,
groene focus. Statuskleuren blijven semantisch. Alleen html[data-skin="new"]. */
html[data-skin="new"] .invoice-month-overview {
border-color: var(--line);
border-left-color: var(--path-green);
border-radius: 18px;
background: var(--surface);
box-shadow: var(--shadow);
}
html[data-skin="new"] .invoice-month-overview[data-state="blocked"] {
border-left-color: var(--warning);
background: var(--surface);
}
html[data-skin="new"] .invoice-month-overview[data-state="ready"] {
border-left-color: var(--path-green);
background: var(--surface);
}
html[data-skin="new"] .invoice-month-overview-copy h3 {
font-family: var(--path-serif);
font-weight: 400;
}
html[data-skin="new"] .invoice-month-overview-item {
border-radius: 14px;
border-color: var(--line);
background: var(--vlak);
}
html[data-skin="new"] .invoice-month-overview-item:hover,
html[data-skin="new"] .invoice-month-overview-item.is-current {
border-color: color-mix(in srgb, var(--path-green) 45%, var(--line));
background: var(--green-light);
box-shadow: 0 10px 24px color-mix(in srgb, var(--path-night) 10%, transparent);
}
html[data-skin="new"] .invoice-month-overview-action small {
border-radius: 999px;
border-color: var(--line);
background: var(--vlak);
}
/* Statuswegwijzer: kaarten in crème, actieve/huidige kaart met groene ring. */
html[data-skin="new"] .invoice-status-guide > button {
border-radius: 16px;
border-color: var(--line);
background: var(--surface);
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-skin="new"] .invoice-status-guide > button:hover {
border-color: color-mix(in srgb, var(--path-green) 45%, var(--line));
}
html[data-skin="new"] .invoice-status-guide > button[aria-pressed="true"],
html[data-skin="new"] .invoice-status-guide > button.is-current {
border-color: var(--path-green);
background: var(--green-light);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--path-green) 20%, transparent);
}
html[data-skin="new"] .invoice-status-guide > button.is-blocked {
border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
background: var(--warning-bg);
}
html[data-skin="new"] .invoice-status-guide > button > span {
border-radius: 12px;
background: var(--green-light);
color: var(--mint-dark-tekst);
}
html[data-skin="new"] .invoice-status-guide > button.is-current > span {
background: var(--path-green);
color: var(--path-night);
}
/* Nagemeten in de referentie op 1280px, op drie plekken los van elkaar: Maanden,
het Backoffice-overzicht en de tab Medewerkers. Overal dezelfde vorm, dus dit is
de systeemstijl en geen uitzondering: geen rand, een doorschijnende vulling van
13% in de eigen kleur, padding 6px 12px, tekst 800/11px, en een stip van 6px op
7px van de tekst. Tot nu toe stond hier de hairline uit de 1919-mockup (1px op
24% currentColor, 4px 9px, 700), van voor de definitieve referentie. */
html[data-skin="new"] .status-pill {
border: 0;
background: color-mix(in srgb, currentColor 13%, transparent);
font-size: 11px;
font-weight: 800;
padding: 6px 12px;
}
html[data-skin="new"] .status-pill::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 7px;
border-radius: 50%;
background: currentColor;
vertical-align: 1px;
}
html[data-skin="new"] .document-status-pill.is-present {
border-color: color-mix(in srgb, var(--path-green) 40%, transparent);
background: var(--green-light);
color: var(--mint-dark-tekst);
}
/* Zoekveld en segmentschakelaar in de factuurwerkbalk. */
html[data-skin="new"] .invoice-search input {
border-radius: 12px;
border-color: var(--line);
background: var(--vlak);
}
html[data-skin="new"] .invoice-search input:focus {
border-color: var(--path-green);
outline: none;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--path-green) 18%, transparent);
}
html[data-skin="new"] .invoice-pagination {
border-top-color: var(--line);
}
html[data-skin="new"] .segmented-control {
border-radius: 12px;
background: var(--vlak-zacht);
}
/* De schuifrand-vervaging zelf is kleurloos en werkt in beide skins; alleen
de sleepgreep moet hier oplichten in plaats van donker worden. */
html[data-skin="new"] .segmented-control {
scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
html[data-skin="new"] .segmented-control::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .24);
}
html[data-skin="new"] .segmented-control:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .38);
}
html[data-skin="new"] .segmented-control button.is-active {
background: var(--surface);
color: var(--navy-tekst);
box-shadow: 0 3px 10px color-mix(in srgb, var(--path-night) 12%, transparent);
}
/* Factuuridentiteit-preview: crème-groen blok met serif-bedrijfsnaam. */
html[data-skin="new"] .invoice-identity-preview {
border-radius: 14px;
border-color: color-mix(in srgb, var(--path-green) 34%, transparent);
background: var(--green-light);
}
html[data-skin="new"] .invoice-identity-preview span {
color: var(--mint-dark-tekst);
}
html[data-skin="new"] .invoice-identity-preview strong {
font-family: var(--path-serif);
font-weight: 400;
}
/* Factuurdetail-modal + PDF-preview — de gebrande factuurvoorbeeld-preview
(het "papieren" voorbeeld in de documentenmodal) gebruikt de gedeelde
--navy/--mint/--vlak/--line-tokens al automatisch (die zijn hierboven al
naar het 1414/1919-palet herschreven); hier alleen radius/schaduw op het
fundament en de koppen/eindbedrag op de serif. Alleen html[data-skin="new"]. */
html[data-skin="new"] .invoice-branded-template {
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-skin="new"] .invoice-brand-title h3,
html[data-skin="new"] .invoice-brand-party h4 {
font-family: var(--path-serif);
font-weight: 400;
}
html[data-skin="new"] .invoice-brand-totals .invoice-preview-total {
font-family: var(--path-serif);
font-weight: 400;
}
html[data-skin="new"] .invoice-document-card {
border-radius: 16px;
}
/* Medewerkers (Teambeheer) — de kaarten en de accountoverzicht-strook op het
fundament: crème-panelen met de zachte schaduw, namen in de serif, ronde
avatartegels. Alleen html[data-skin="new"]. */
html[data-skin="new"] .employee-card {
border-color: var(--line);
background: var(--surface);
box-shadow: var(--shadow);
}
html[data-skin="new"] .employee-card-head .employee-identity strong {
font-family: var(--path-serif);
font-weight: 400;
font-size: 15px;
}
/* Klassiek haalde de vakjes om klant/uren/broker weg omdat die op invulvelden
leken terwijl je er niets in kunt typen; hier stond nog een rand omheen die
datzelfde deed. Zelfde behandeling, zodat de twee skins hetzelfde zeggen. */
html[data-skin="new"] .employee-details div {
border: 0;
}
html[data-skin="new"] .employee-details {
border-top-color: rgba(255, 255, 255, .1);
}
html[data-skin="new"] .mini-avatar {
border-radius: 12px;
color: var(--mint-dark-tekst);
}
html[data-skin="new"] .team-account-overview-copy h3 {
font-family: var(--path-serif);
font-weight: 400;
/* Geen eigen kleur meer: dit blok bestaat alleen op het Medewerkers-scherm
(altijd-donker beheer-canvas), en var(--navy-tekst) wisselde zelf met
data-theme -- bij Nieuw + Licht dezelfde onleesbare-tekst-op-donkere-
achtergrond-fout als bij .view-heading h2 hierboven. Erft nu gewoon de
vaste lichte kleur van .main-content. */
}
html[data-skin="new"] .team-account-group {
border-radius: 14px;
border-color: var(--line);
background: var(--vlak);
}
/* Instellingen — de zes subsecties: onderdelennavigatie, herinneringsregels,
sjabloonrijen en mailroute-rijen op de tokens. Groene focus/hover in plaats
van de teal-tekst. Alleen html[data-skin="new"]. */
html[data-skin="new"] .settings-section-nav button:hover,
html[data-skin="new"] .settings-section-nav button:focus-visible {
border-color: var(--path-green);
background: var(--green-light);
color: var(--mint-dark-tekst);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--path-green) 16%, transparent);
}
html[data-skin="new"] .reminder-rule {
border-radius: 14px;
border-color: var(--line);
}
html[data-skin="new"] .reminder-choice-trigger:hover,
html[data-skin="new"] .reminder-choice-trigger[aria-expanded="true"] {
border-color: var(--path-green);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--path-green) 16%, transparent);
}
html[data-skin="new"] .reminder-choice-trigger:focus-visible,
html[data-skin="new"] .reminder-choice-panel button:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--path-green) 22%, transparent);
}
html[data-skin="new"] .reminder-choice-panel button:hover,
html[data-skin="new"] .reminder-choice-panel button.is-active {
background: var(--green-light);
color: var(--mint-dark-tekst);
}
html[data-skin="new"] .reminder-schedule-footer {
border-radius: 14px;
}
html[data-skin="new"] .template-item {
border-radius: 16px;
border-color: var(--line);
background: var(--vlak);
}
html[data-skin="new"] .mail-recipient-setting,
html[data-skin="new"] .mail-route-choice {
border-radius: 14px;
border-color: var(--line);
}
html[data-skin="new"] .settings-rule-list li {
border-radius: 16px;
}
html[data-skin="new"] .settings-warning {
border-radius: 14px;
}
/* Modal-detailschermen — de samenvattingsblokken en de correctiebanner in de
dialogen (goedkeuring-detail, factuurdetail, correctie, klanturenstaat-review,
extern bevestigen, medewerker bewerken). De dialoog zelf staat al op het
fundament (increment 2). Alleen html[data-skin="new"]. */
html[data-skin="new"] .modal-summary {
border: 1px solid var(--line);
border-radius: 16px;
background: var(--vlak-zacht);
}
html[data-skin="new"] .modal-summary strong {
color: var(--navy-tekst);
}
html[data-skin="new"] .correction-banner {
border-radius: 16px;
border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
background: var(--warning-bg);
}
html[data-skin="new"] .correction-banner-icon {
border-radius: 12px;
}
html[data-skin="new"] .correction-banner strong {
color: var(--warning-tekst);
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) {
background: #081726;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .sidebar {
display: none;
}
/* Beheer-topnavigatie (Cockpit … Instellingen). De opmaak hiervan ging op 24 sep
per ongeluk mee met het verwijderen van de Storyline-CSS (dezelfde
markerlijst), waardoor de knoppen sinds 1.0.86 kaal en op de telefoon
gestapeld stonden. Hersteld en naar de referentie gebracht: pillen op één
rij, actieve pil mint; op de telefoon één horizontaal schuivende rij. */
.new-admin-topnav { display: none; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav {
display: flex;
align-items: center;
gap: 10px;
margin-right: auto;
min-width: 0;
}
html[data-skin="new"] .new-admin-topnav-group {
display: flex;
align-items: center;
gap: 6px;
position: relative;
}
html[data-skin="new"] .new-admin-topnav-group + .new-admin-topnav-group::before {
content: "";
position: absolute;
left: -6px;
top: 8px;
bottom: 8px;
width: 1px;
background: rgba(255, 255, 255, .14);
}
html[data-skin="new"] .new-admin-topnav button {
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 34px;
padding: 0 14px;
font: 800 12px/1 var(--path-sans);
white-space: nowrap;
}
html[data-skin="new"] .new-admin-topnav button:hover,
html[data-skin="new"] .new-admin-topnav button:focus-visible {
border-color: rgba(75, 177, 136, .45);
background: rgba(75, 177, 136, .08);
}
html[data-skin="new"] .new-admin-topnav button.is-active {
border-color: rgba(75, 177, 136, .55);
background: rgba(75, 177, 136, .14);
color: #7fd3b4;
}
/* Tot 1100px (tablet én telefoon) krijgt de pillenrij zijn eigen, horizontaal
schuivende regel. Op 768px pasten de zes pillen naast de Home-knop op
Windows nét, maar op de Linux-fonts van CI niet meer: de rij overlapte de
Home-knop en SKIN-H-019 kon hem daar niet aanklikken (1.0.99, tablet-chromium). */
@media (max-width: 1100px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav {
grid-column: 1 / -1;
flex: 0 0 100%;
width: 100%;
margin-right: 0;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 4px;
}
html[data-skin="new"] .new-admin-topnav-group,
html[data-skin="new"] .new-admin-topnav button { flex: 0 0 auto; }
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .main-content {
margin-left: 0;
padding: 0 clamp(18px, 3vw, 48px) 48px;
background: #081726;
}
/* "Teambeheer" en "6 actieve accounts"/"Beheerders" (Medewerkers-scherm)
krijgen hun leesbare kleur normaal alleen via html[data-theme="dark"]-
regels of erven anders body's var(--ink) -- beide wisselen zelf met
data-theme, terwijl dit beheer-canvas altijd donker is (achtergrond
hierboven, onafhankelijk van het thema). Bij Nieuw + Licht was deze tekst
daardoor bijna onleesbaar. Bewust hier één-voor-één benoemd i.p.v. een
brede overervingsregel op .main-content: dat brak juist de medewerker-
naamkaartjes (.strong-tekst zonder eigen kleurregel, die wél de kleur voor
hun eigen lichte kaart-ondergrond nodig hebben, niet deze canvaskleur). */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .view-heading h2,
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .panel-heading h3,
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .team-account-overview-copy h3 {
color: #d8e1e3;
}
/* Zes navigatietabs, een statusmelding, demo-herstel, twee vormgevingsknoppen,
de maandkiezer, de bel en de avatar passen niet op één regel -- ook niet op
1440px. Dat werd eerder opgelost door de hele kop te laten afbreken, met als
gevolg dat de merkpil in zijn eentje op een regel belandde en de kop uit twee
losse banden leek te bestaan.
Nu een bewuste kop in twee lagen: identiteit en navigatie bovenaan,
contextbediening eronder. De kop zelf breekt niet meer af (nowrap) en de
uitlijning bovenaan zet de merkpil op dezelfde regel als de tabs; alleen de
knoppenrij erbinnen wrapt. Dat is een bekende koppatroon en leest als een
keuze in plaats van als een ongeluk. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar {
border-bottom: 1px solid rgba(255, 255, 255, .09);
background: #081726;
box-shadow: none;
flex-wrap: nowrap;
align-items: flex-start;
row-gap: 8px;
/* De basisregel (.topbar { padding-top: env(safe-area-inset-top) }) voorkomt
dat de statusbalk op een iPhone met notch/Dynamic Island in standalone-
PWA-modus over de kop heen valt (zie de toelichting bij die regel in
styles.css -- "Rol kiezen" werkte daardoor ooit wel in de browser maar
niet in de geïnstalleerde app). Deze New-skin-laag zette platte 14px
zonder de safe-area erbij op te tellen en trok die fix zo stilzwijgend
weer in voor elk beheerscherm hier. Optellen i.p.v. vervangen. */
padding-top: calc(14px + env(safe-area-inset-top, 0px));
padding-bottom: 12px;
}
/* Zonder de zijbalk (die de sidebar-breedte anders reserveerde) past de hele
rij topbar-knoppen (thema/skin, maanddetail, melding, profiel, plus de
pilot-tabs) niet altijd op 1280px breedte. Laat de knoppenrij liever naar
een tweede regel wrappen dan horizontaal buiten het scherm laten lopen. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-actions {
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 8px;
/* De knoppenrij neemt de restbreedte naast de merkpil en mag daarbinnen
krimpen (min-width 0): de pillenrij schuift dan in zijn eigen vak in
plaats van dat de topbar de merkpil samenknijpt. Gemeten op 768px
(1.0.100): de houder van de merkpil was tot 85px geknepen terwijl de knop
erin 140px bleef, en de Cockpit-pil begon op x=108 -- 55px over de
merkpil heen. Lokaal viel het klikpunt nog net vrij, op CI (bredere
Linux-fonts) niet meer: SKIN-H-019 op tablet-chromium. */
flex: 1 1 auto;
min-width: 0;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title {
display: none;
}
/* De merkpil stond op min-width 210px met een logo van 34px en was daarmee het
grootste element in de balk, terwijl het de enige is die niets doet behalve
terugbrengen naar de start. Doordat hij zoveel breedte opeiste, brak de rij
ernaast af en leek de balk uit twee losse banden te bestaan. Nu meegroeiend
met zijn inhoud, zodat merk, navigatie en bediening één rij vormen. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-topbar-home {
display: flex;
min-width: 0;
margin-right: 8px;
/* Nooit krimpen: de merkpil is het enige vaste element in de balk; alles
wat niet past, schuift of wrapt in .topbar-actions ernaast. */
flex: 0 0 auto;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-brand-home {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 14px;
background: #0e2334;
color: #efe9dc;
font: 700 16px var(--path-serif);
padding: 9px 14px;
}
/* Zelfde maat als de merkpil op Mijn uren/Mijn maanden/medewerkerdashboard
(24px/96px). Deze stond nog op de oudere 21px/88px-verhouding van vóór die
aanpassing en bleef daardoor net iets te klein om als "Path" te lezen --
gemeld met een screenshot waarin het logo in zowel licht als donker niet
goed te zien was. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-brand-home img {
width: auto;
max-width: 96px;
height: 24px;
object-fit: contain;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-role-switch {
display: none;
}
/* 1560px liet op een breed scherm (2560px en breder) aan weerszijden meer dan
450px leeg staan -- de storyline-rijen en de open-actielijst eronder zijn
allebei rijgebaseerd en hebben niets aan die extra breedte, dus schaalden ze
niet mee en bleef de pagina in het midden hangen. Gemeld: "veel lege ruimte
links en rechts". Geen andere admin-schermen in deze skin (Medewerkers,
Facturen, Instellingen) hebben zo'n eigen breedtegrens; ze vullen gewoon
.main-content. 1840px is geen volledige breedte -- dat zou de rijen te
gestrekt maken -- maar geeft flink meer lucht dan 1560px zonder de kaarten
uit te rekken. */
html[data-skin="new"] #view-dashboard.is-active {
display: flex;
width: min(100%, 1840px);
flex-direction: column;
gap: 20px;
margin: 0 auto;
color: #c9d5da;
}
html[data-skin="new"] #view-dashboard > .hero-card,
html[data-skin="new"] #view-dashboard > .workflow-teaser,
html[data-skin="new"] #view-dashboard > .workflow-panel {
display: none;
}
html[data-skin="new"] #view-dashboard > .dashboard-team-panel,
html[data-skin="new"] #view-dashboard > .dashboard-next-action-card,
html[data-skin="new"] #view-dashboard > .metric-grid {
display: none;
}
html[data-skin="new"] #view-dashboard > .admin-task-panel { order: 5; }
html[data-skin="new"] #view-dashboard > #customer-timesheet-admin-teaser { order: 6; }
html[data-skin="new"] #view-dashboard :is(
.dashboard-team-panel,
.dashboard-next-action-card,
.metric-card,
.admin-task-panel
) {
border: 1px solid rgba(255, 255, 255, .09);
background: #0e2334;
color: #c9d5da;
box-shadow: none;
}
html[data-skin="new"] #view-dashboard :is(h3, .metric-card strong) {
color: #fff;
font-family: var(--path-serif);
font-weight: 400;
}
html[data-skin="new"] #view-dashboard :is(p, small, .metric-label, .metric-note) {
color: #8595a0;
}
html[data-skin="new"] #view-dashboard .section-label {
color: #4bb188;
}
html[data-skin="new"] #view-dashboard .dashboard-team-panel {
padding: 8px;
}
html[data-skin="new"] #view-dashboard .dashboard-team-panel .panel-heading {
padding: 18px 18px 14px;
}
html[data-skin="new"] #view-dashboard .dashboard-team-table {
border-collapse: separate;
border-spacing: 0 6px;
}
html[data-skin="new"] #view-dashboard .dashboard-team-table th {
border-color: rgba(255, 255, 255, .08);
color: #7f8ea0;
}
html[data-skin="new"] #view-dashboard .dashboard-team-table td {
border-color: rgba(255, 255, 255, .07);
background: #112a3c;
color: #c9d5da;
}
html[data-skin="new"] #view-dashboard .dashboard-team-table td:first-child {
border-radius: 13px 0 0 13px;
}
html[data-skin="new"] #view-dashboard .dashboard-team-table td:last-child {
border-radius: 0 13px 13px 0;
}
html[data-skin="new"] #view-dashboard .dashboard-team-table .person-cell strong,
html[data-skin="new"] #view-dashboard .dashboard-team-table td > strong {
color: #fff;
}
html[data-skin="new"] #view-dashboard .dashboard-next-action-card {
border-color: rgba(217, 161, 60, .36);
}
html[data-skin="new"] #view-dashboard .dashboard-next-action-card .button-primary {
background: #d9a13c;
color: #241804;
}
html[data-skin="new"] #view-dashboard .metric-grid {
gap: 14px;
}
html[data-skin="new"] #view-dashboard :is(.metric-link, .text-button) {
color: #77c79f;
}
html[data-skin="new"] #view-dashboard .admin-task-panel {
overflow: hidden;
}
/* Maandverdeling (zie .admin-task-months in styles.css) in de donkere
New-opmaak: geen witte kaartjes maar verdiepte vlakken, mint-accent voor
het aandeel. Zelfde structuur, eigen karakter. */
html[data-skin="new"] .admin-task-months .admin-task-month {
border-color: rgba(255, 255, 255, .1);
background: rgba(255, 255, 255, .04);
}
html[data-skin="new"] .admin-task-months .admin-task-month b {
color: #8ea3ad;
}
html[data-skin="new"] .admin-task-months .admin-task-month i {
background: rgba(255, 255, 255, .12);
}
html[data-skin="new"] .admin-task-months .admin-task-month i::before {
background: #4bb188;
}
html[data-skin="new"] .admin-task-months .admin-task-month u {
color: #eef3ee;
font-family: var(--path-serif);
font-size: 15px;
}
/* Backoffice Overzicht (besluit 24 sep: vervangt de Path Storyline volledig
door de referentie -- herokaart, voortgangsbalken, keten als vijf stippen
per rij, KPI-tegels; zie CLAUDE.md voor de afkeuring van de oude opzet). */
html[data-skin="new"] .new-admin-overzicht {
display: flex;
flex-direction: column;
gap: 16px;
}
html[data-skin="new"] .new-admin-hero {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, .08);
background: linear-gradient(135deg, #0c2436, #081826);
padding: 26px 28px;
}
/* Gloed als pseudo-element, niet als : een echt element dat rechts
buiten de kaart begint telt op 360px als "buiten de rechterrand" (MOB-H-030
na de merge van 1.0.86), ook al knipt overflow:hidden hem visueel af. */
html[data-skin="new"] .new-admin-hero::before {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(75, 177, 136, .28), transparent 70%);
pointer-events: none;
}
html[data-skin="new"] .new-admin-hero-copy {
position: relative;
min-width: 240px;
flex: 1 1 320px;
}
html[data-skin="new"] .new-admin-hero-label {
display: block;
color: #4bb188;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
html[data-skin="new"] .new-admin-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 6px;
color: #7f8ea0;
font-size: 12px;
}
html[data-skin="new"] .new-admin-hero-cijfer {
display: flex;
align-items: baseline;
gap: 12px;
margin-top: 10px;
}
html[data-skin="new"] .new-admin-hero-cijfer > strong {
color: #fff;
font-family: var(--path-serif);
font-size: 52px;
font-weight: 400;
font-variant-numeric: tabular-nums;
line-height: 1;
}
html[data-skin="new"] .new-admin-hero-cijfer > span {
display: flex;
flex-direction: column;
gap: 2px;
}
html[data-skin="new"] .new-admin-hero-cijfer strong#new-admin-hero-eenheid {
color: #c9d5da;
font-family: inherit;
font-size: 14px;
font-weight: 700;
}
html[data-skin="new"] .new-admin-hero-cijfer small {
color: #7f8ea0;
font-size: 12px;
}
html[data-skin="new"] .new-admin-hero-copy > p {
margin-top: 10px;
max-width: 44ch;
color: #97a6b0;
font-size: 13px;
}
html[data-skin="new"] .new-admin-hero-acties {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
html[data-skin="new"] .new-admin-hero-cta {
border: 1px solid transparent;
border-radius: 999px;
background: #4bb188;
color: #06131f;
cursor: pointer;
padding: 12px 20px;
font-size: 13px;
font-weight: 800;
transition: background .2s;
}
html[data-skin="new"] .new-admin-hero-cta:hover {
background: #5cc79a;
}
html[data-skin="new"] .new-admin-hero-cta:disabled {
opacity: .45;
cursor: default;
}
html[data-skin="new"] .new-admin-hero-ghost {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
padding: 12px 20px;
font-size: 13px;
font-weight: 700;
}
html[data-skin="new"] .new-admin-progress {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .08);
background: #0c2436;
padding: 20px 22px;
}
html[data-skin="new"] .new-admin-progress-rows {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 14px;
}
html[data-skin="new"] .new-admin-progress-row > div {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 6px;
font-size: 13px;
}
html[data-skin="new"] .new-admin-progress-row > div > span:first-child {
color: #c9d5da;
}
html[data-skin="new"] .new-admin-progress-row > div > span:last-child {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
html[data-skin="new"] .new-admin-progress-row > div > span.is-mint {
color: #4bb188;
}
html[data-skin="new"] .new-admin-progress-row > div > span.is-amber {
color: #d9a13c;
}
html[data-skin="new"] .new-admin-progress-track {
display: block;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
overflow: hidden;
}
html[data-skin="new"] .new-admin-progress-fill {
display: block;
height: 100%;
border-radius: inherit;
transition: width .4s;
}
html[data-skin="new"] .new-admin-progress-fill.is-mint {
background: #4bb188;
}
html[data-skin="new"] .new-admin-progress-fill.is-amber {
background: #d9a13c;
}
html[data-skin="new"] .new-admin-progress-note {
margin-top: 16px;
color: #7f8ea0;
font-size: 12px;
}
html[data-skin="new"] .new-admin-worklist {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .08);
background: #0c2436;
overflow: hidden;
}
html[data-skin="new"] .new-admin-worklist-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 21px;
}
html[data-skin="new"] .new-admin-worklist-head strong {
color: #fff;
font-family: var(--path-serif);
font-size: 16px;
font-weight: 400;
}
html[data-skin="new"] .new-admin-worklist-head small {
display: block;
margin-top: 2px;
color: #7f8ea0;
font-size: 12px;
}
html[data-skin="new"] .new-admin-worklist-rows {
display: flex;
flex-direction: column;
}
html[data-skin="new"] .new-admin-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
border-top: 1px solid rgba(255, 255, 255, .055);
padding: 13px 21px;
}
html[data-skin="new"] .new-admin-row-avatar {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(255, 255, 255, .07);
color: #cfdbe5;
font-size: 11.5px;
font-weight: 800;
}
html[data-skin="new"] .new-admin-row-naam {
flex: 1 1 170px;
min-width: 0;
}
html[data-skin="new"] .new-admin-row-naam strong {
display: block;
color: #fff;
font-size: 13.5px;
}
html[data-skin="new"] .new-admin-row-naam small {
display: block;
color: #7f8ea0;
font-size: 11.5px;
}
html[data-skin="new"] .new-admin-row-keten {
display: flex;
align-items: center;
flex: 0 0 auto;
}
html[data-skin="new"] .new-admin-row-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
}
html[data-skin="new"] .new-admin-row-dot.is-done {
background: #4bb188;
}
html[data-skin="new"] .new-admin-row-dot.is-current {
background: #d9a13c;
}
html[data-skin="new"] .new-admin-row-segment {
width: 16px;
height: 2px;
background: rgba(255, 255, 255, .12);
}
html[data-skin="new"] .new-admin-row-segment.is-done {
background: #4bb188;
}
html[data-skin="new"] .new-admin-row-bedrag {
flex: 0 0 auto;
text-align: right;
min-width: 78px;
}
html[data-skin="new"] .new-admin-row-bedrag strong {
display: block;
color: #fff;
font-family: var(--path-serif);
font-size: 18px;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
html[data-skin="new"] .new-admin-row-bedrag small {
display: block;
color: #7f8ea0;
font-size: 9.5px;
letter-spacing: .08em;
text-transform: uppercase;
}
html[data-skin="new"] .new-admin-row-acties {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
flex: 0 0 auto;
}
html[data-skin="new"] .new-admin-row-goedkeuren {
border: 1px solid transparent;
border-radius: 999px;
background: #4bb188;
color: #06131f;
cursor: pointer;
min-height: 34px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] .new-admin-row-correctie {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 34px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] .new-admin-row-open {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 50%;
background: transparent;
color: #9fb3c4;
cursor: pointer;
font-size: 13px;
}
/* Rij-uitklap met ketendetail (besluit Gio 25 sep: de pijl klapt uit, geen
modal). Zelfde vijf stappen en standen als de stippen erboven. */
html[data-skin="new"] .new-admin-row-open span { display: inline-block; transition: transform .25s; }
html[data-skin="new"] .new-admin-row-open.is-open span { transform: rotate(90deg); }
html[data-skin="new"] .new-admin-row.is-uitgeklapt { background: rgba(255, 255, 255, .03); }
html[data-skin="new"] .new-admin-row-detail {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
flex: 1 1 100%;
margin-top: 4px;
border-top: 1px solid rgba(255, 255, 255, .055);
padding-top: 12px;
font-size: 12px;
}
html[data-skin="new"] .new-admin-row-detail-keten {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
flex: 1 1 320px;
}
html[data-skin="new"] .new-admin-row-detail-stap {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(232, 240, 236, .4);
font-weight: 700;
}
/* Het icoon is decoratief en zit daarom in CSS, niet in de tekst. */
html[data-skin="new"] .new-admin-row-detail-stap::before { content: "○"; }
html[data-skin="new"] .new-admin-row-detail-stap.is-af { color: #4bb188; }
html[data-skin="new"] .new-admin-row-detail-stap.is-af::before { content: "✓"; }
html[data-skin="new"] .new-admin-row-detail-stap.is-nu { color: #e8b06a; }
html[data-skin="new"] .new-admin-row-detail-stap.is-nu::before { content: "•"; }
html[data-skin="new"] .new-admin-row-detail-klant { color: #97a6b0; }
html[data-skin="new"] .new-admin-row-detail-klant strong { color: #e8b06a; }
html[data-skin="new"] .new-admin-row-detail-link {
border: 0;
background: none;
padding: 0;
color: #77c79f;
cursor: pointer;
font: inherit;
font-weight: 800;
text-decoration: underline;
}
html[data-skin="new"] .new-admin-worklist-empty {
padding: 28px 21px;
color: #7f8ea0;
font-size: 13px;
text-align: center;
}
html[data-skin="new"] .new-admin-kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
html[data-skin="new"] .new-admin-kpi {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, .08);
background: #0c2436;
padding: 18px 20px;
}
html[data-skin="new"] .new-admin-kpi.is-mint {
border-color: rgba(75, 177, 136, .32);
}
html[data-skin="new"] .new-admin-kpi > small:first-child {
display: block;
color: #7f8ea0;
font-size: 11.5px;
letter-spacing: .04em;
text-transform: uppercase;
}
html[data-skin="new"] .new-admin-kpi > strong {
display: block;
margin-top: 8px;
color: #fff;
font-family: var(--path-serif);
font-size: 30px;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
html[data-skin="new"] .new-admin-kpi.is-mint > strong {
color: #4bb188;
}
html[data-skin="new"] .new-admin-kpi > small:last-child {
display: block;
margin-top: 4px;
color: #7f8ea0;
font-size: 12px;
}
@media (max-width: 640px) {
html[data-skin="new"] .new-admin-hero-cijfer > strong {
font-size: 40px;
}
html[data-skin="new"] .new-admin-row {
gap: 10px;
}
html[data-skin="new"] .new-admin-row-keten {
order: 3;
flex: 1 1 100%;
}
html[data-skin="new"] .new-admin-kpi-grid {
grid-template-columns: 1fr;
}
html[data-skin="new"] .new-customer-row {
flex-wrap: wrap;
}
html[data-skin="new"] .new-customer-row-helper {
order: 3;
flex: 1 1 100%;
}
}
/* Facturen (25 sep, 1-op-1 naar reference-facturen.png): de Modern-sectie
#new-invoices vervangt de Klassieke wegwijzer + tabel; de maandknoppen
(#invoice-month-overview) blijven, onder de lijst. Scoped op .is-active,
anders zou display:flex een niet-actief scherm zichtbaar maken. */
html[data-skin="new"] #view-invoices.is-active { display: flex; flex-direction: column; gap: 16px; }
html[data-skin="new"] #view-invoices > .view-heading { order: 0; }
html[data-skin="new"] #view-invoices > #invoice-loading { order: 1; }
html[data-skin="new"] #view-invoices > #new-invoices { order: 2; }
html[data-skin="new"] #view-invoices > #invoice-month-overview { order: 3; margin-bottom: 0; }
html[data-skin="new"] #view-invoices > .view-heading p,
html[data-skin="new"] #view-invoices #test-month-delivery,
html[data-skin="new"] #view-invoices #invoice-status-guide,
html[data-skin="new"] #view-invoices #invoice-detail-panel,
html[data-skin="new"] #view-invoices #month-batch-card,
html[data-skin="new"] #view-invoices #invoice-detail-toggle { display: none; }
html[data-skin="new"] .new-invoices {
display: block;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .08);
background: #0c2436;
overflow: hidden;
}
html[data-skin="new"] .new-invoices-head { padding: 20px 21px 0; }
html[data-skin="new"] .new-invoices-head strong { display: block; color: #fff; font-family: var(--path-serif); font-size: 16px; font-weight: 400; }
html[data-skin="new"] .new-invoices-head p { margin: 4px 0 0; color: #7f8ea0; font-size: 12.5px; }
html[data-skin="new"] .new-invoices-tegels {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
padding: 16px 21px 0;
}
html[data-skin="new"] .new-invoices-tegels > button {
display: block;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px;
background: rgba(255, 255, 255, .04);
color: inherit;
cursor: pointer;
font: inherit;
padding: 14px 16px;
text-align: left;
transition: border-color .15s, background .15s;
}
html[data-skin="new"] .new-invoices-tegels > button:hover { border-color: rgba(75, 177, 136, .45); }
html[data-skin="new"] .new-invoices-tegels > button[aria-pressed="true"] { border-color: rgba(75, 177, 136, .55); background: rgba(75, 177, 136, .12); }
html[data-skin="new"] .new-invoices-tegels > button > span { display: block; color: #c9d5da; font-family: var(--path-serif); font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }
html[data-skin="new"] .new-invoices-tegels > button[aria-pressed="true"] > span { color: #4bb188; }
html[data-skin="new"] .new-invoices-tegels > button > strong { display: block; margin-top: 8px; color: #fff; font-size: 13px; }
html[data-skin="new"] .new-invoices-tegels > button > small { display: block; margin-top: 3px; color: #7f8ea0; font-size: 11.5px; line-height: 1.4; }
html[data-skin="new"] .new-invoices-samenvatting { margin: 14px 21px 0; color: #77c79f; font-size: 12.5px; font-weight: 700; }
html[data-skin="new"] .new-invoices-zoek { display: block; padding: 12px 21px 16px; }
html[data-skin="new"] .new-invoices-zoek input {
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
background: rgba(255, 255, 255, .04);
color: #e8eef4;
font: inherit;
font-size: 13px;
padding: 11px 14px;
}
html[data-skin="new"] .new-invoices-zoek input::placeholder { color: #7f8ea0; }
html[data-skin="new"] .new-invoices-zoek input:focus { outline: none; border-color: #4bb188; box-shadow: 0 0 0 4px rgba(75, 177, 136, .18); }
html[data-skin="new"] .new-invoice-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
border-top: 1px solid rgba(255, 255, 255, .055);
padding: 14px 21px;
}
html[data-skin="new"] .new-invoice-avatar {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(255, 255, 255, .07);
color: #cfdbe5;
font-size: 11.5px;
font-weight: 800;
}
html[data-skin="new"] .new-invoice-naam { flex: 1 1 220px; min-width: 0; }
html[data-skin="new"] .new-invoice-naam strong { display: block; color: #fff; font-size: 13.5px; }
html[data-skin="new"] .new-invoice-naam small { display: block; color: #7f8ea0; font-size: 11.5px; }
html[data-skin="new"] .new-invoice-getal { flex: 0 0 auto; min-width: 84px; text-align: right; }
html[data-skin="new"] .new-invoice-getal strong { display: block; color: #fff; font-family: var(--path-serif); font-size: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }
html[data-skin="new"] .new-invoice-getal small { display: block; color: #7f8ea0; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
html[data-skin="new"] .new-invoice-acties { display: flex; gap: 7px; flex: 0 0 auto; }
html[data-skin="new"] .new-invoice-cta {
border: 1px solid transparent;
border-radius: 999px;
background: #4bb188;
color: #06131f;
cursor: pointer;
min-height: 34px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] .new-invoice-ghost {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 34px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] .new-invoices-leeg { margin: 0; padding: 28px 21px; color: #7f8ea0; font-size: 13px; text-align: center; }
html[data-skin="new"] .new-invoices-voet { margin: 0; border-top: 1px solid rgba(255, 255, 255, .055); padding: 12px 21px 16px; color: #7f8ea0; font-size: 11.5px; }
@media (max-width: 900px) {
html[data-skin="new"] .new-invoices-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
html[data-skin="new"] .new-invoices-tegels { grid-template-columns: minmax(0, 1fr); }
html[data-skin="new"] .new-invoice-naam { flex-basis: 100%; }
}
/* Instellingen (25 sep, 1-op-1 naar reference-instellingen.png): één kaart met
de acht onderdelen als tabbladen; alleen het gekozen onderdeel in beeld
(guard-klasse heeft-tabs, gezet door renderNewSettingsTabs()), donkere
velden, knoppenbalk onderaan. Klassiek houdt alle kaarten en het scrollen. */
html[data-skin="new"] #view-settings > .view-heading .heading-actions { display: none; }
html[data-skin="new"] #view-settings.is-active { display: flex; flex-direction: column; gap: 0; }
html[data-skin="new"] #view-settings > .view-heading { order: 0; }
html[data-skin="new"] #view-settings > .settings-section-nav { order: 1; }
html[data-skin="new"] #view-settings > .settings-grid { order: 2; }
html[data-skin="new"] #view-settings > .new-settings-acties { order: 3; }
html[data-skin="new"] #view-settings .settings-section-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
border: 1px solid rgba(255, 255, 255, .08);
border-bottom: 0;
border-radius: 18px 18px 0 0;
background: #0c2436;
padding: 16px 21px;
}
html[data-skin="new"] #view-settings .settings-section-nav button {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
padding: 0 14px;
min-height: 34px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] #view-settings .settings-section-nav button::after { content: none; }
html[data-skin="new"] #view-settings .settings-section-nav button:hover,
html[data-skin="new"] #view-settings .settings-section-nav button:focus-visible { border-color: rgba(75, 177, 136, .45); background: rgba(75, 177, 136, .08); color: #e8eef4; box-shadow: none; }
html[data-skin="new"] #view-settings .settings-section-nav button.is-active { border-color: rgba(75, 177, 136, .55); background: rgba(75, 177, 136, .14); color: #7fd3b4; }
html[data-skin="new"] #view-settings .settings-grid { display: block; }
html[data-skin="new"] #view-settings.heeft-tabs .settings-card:not(.is-actief) { display: none; }
html[data-skin="new"] #view-settings .settings-card {
margin: 0;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 0;
background: #0c2436;
box-shadow: none;
color: #c9d5da;
padding: 22px 21px;
}
html[data-skin="new"] #view-settings .settings-card .section-label { color: #4bb188; }
html[data-skin="new"] #view-settings .settings-card :is(h3, h4) { color: #fff; }
html[data-skin="new"] #view-settings .settings-card :is(p, small, label) { color: #97a6b0; }
html[data-skin="new"] #view-settings .settings-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select) {
border-color: rgba(255, 255, 255, .1);
background: rgba(255, 255, 255, .04);
color: #e8eef4;
}
html[data-skin="new"] #view-settings .settings-card :is(input, textarea, select):focus { border-color: #4bb188; outline: none; box-shadow: 0 0 0 4px rgba(75, 177, 136, .18); }
/* Op de telefoon klapt Klassiek elke instellingenkaart in (styles.css,
data-settings-collapsible); in Modern is het tabblad al de keuze, dus de
gekozen kaart staat open en de kop is geen knop meer. Het inklappen zelf geldt
sinds 1.0.125 alleen in Klassiek (:where() in styles.css); de oude revert-regel
hier overschreef alle Modern-opmaak van de kaartinhoud op de telefoon. */
@media (max-width: 700px) {
html[data-skin="new"] #view-settings .settings-card-heading { cursor: default; padding-right: 0; }
html[data-skin="new"] #view-settings .settings-card-heading::after { content: none; }
}
html[data-skin="new"] .new-settings-acties {
display: flex;
flex-wrap: wrap;
gap: 8px;
border: 1px solid rgba(255, 255, 255, .08);
border-top: 0;
border-radius: 0 0 18px 18px;
background: #0c2436;
padding: 16px 21px 20px;
}
html[data-skin="new"] .new-settings-cta {
border: 1px solid transparent;
border-radius: 999px;
background: #4bb188;
color: #06131f;
cursor: pointer;
min-height: 40px;
padding: 0 20px;
font-size: 13px;
font-weight: 800;
}
html[data-skin="new"] .new-settings-ghost {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 40px;
padding: 0 20px;
font-size: 13px;
font-weight: 800;
}
/* Mededelingen (25 sep, 1-op-1 naar reference-mededelingen.png): opsteller op
de pagina (#new-announcements), de werkingsregel als compacte lijn en de
bestaande historie als donkere kaart; de Klassieke knop en intro gaan weg. */
html[data-skin="new"] #view-announcements > .view-heading p,
html[data-skin="new"] #view-announcements #add-announcement { display: none; }
html[data-skin="new"] .new-announcements {
display: block;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .08);
background: #0c2436;
padding: 20px 21px;
}
html[data-skin="new"] .new-announcements > strong { display: block; color: #fff; font-size: 14px; }
html[data-skin="new"] .new-announcements > p { margin: 4px 0 14px; color: #7f8ea0; font-size: 12.5px; }
html[data-skin="new"] .new-announcements-veld { display: block; margin-bottom: 10px; }
html[data-skin="new"] .new-announcements-veld input,
html[data-skin="new"] .new-announcements-veld textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
background: rgba(255, 255, 255, .04);
color: #e8eef4;
font: inherit;
font-size: 13.5px;
padding: 12px 14px;
}
html[data-skin="new"] .new-announcements-veld textarea { min-height: 110px; resize: vertical; }
html[data-skin="new"] .new-announcements-veld input::placeholder,
html[data-skin="new"] .new-announcements-veld textarea::placeholder { color: #7f8ea0; }
html[data-skin="new"] .new-announcements-veld input:focus,
html[data-skin="new"] .new-announcements-veld textarea:focus { outline: none; border-color: #4bb188; box-shadow: 0 0 0 4px rgba(75, 177, 136, .18); }
html[data-skin="new"] .new-announcements-veld .is-invalid { border-color: #e78a8a; }
html[data-skin="new"] .new-announcements-voor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
html[data-skin="new"] .new-announcements-voor > span { color: #7f8ea0; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
html[data-skin="new"] .new-announcements-voor > div { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-skin="new"] .new-announcements-chip {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 34px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] .new-announcements-chip.is-active { border-color: rgba(75, 177, 136, .55); background: rgba(75, 177, 136, .14); color: #7fd3b4; }
html[data-skin="new"] .new-announcements-recipients {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
margin-bottom: 12px;
}
html[data-skin="new"] .new-announcements-recipient {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 12px;
background: rgba(255, 255, 255, .04);
padding: 8px 12px;
cursor: pointer;
}
html[data-skin="new"] .new-announcements-recipient strong { display: block; color: #fff; font-size: 12.5px; }
html[data-skin="new"] .new-announcements-recipient small { display: block; color: #7f8ea0; font-size: 11px; }
html[data-skin="new"] .new-announcements-mail { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #97a6b0; font-size: 12px; }
html[data-skin="new"] .new-announcements-acties { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-skin="new"] .new-announcements-cta {
border: 1px solid transparent;
border-radius: 999px;
background: #4bb188;
color: #06131f;
cursor: pointer;
min-height: 40px;
padding: 0 20px;
font-size: 13px;
font-weight: 800;
box-shadow: 0 0 18px rgba(75, 177, 136, .35);
}
html[data-skin="new"] .new-announcements-ghost {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 40px;
padding: 0 20px;
font-size: 13px;
font-weight: 800;
}
html[data-skin="new"] #view-announcements .announcement-route-guide {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin: 14px 0;
border: 0;
background: transparent;
padding: 0 4px;
}
html[data-skin="new"] #view-announcements .announcement-route-guide article { display: flex; gap: 8px; align-items: baseline; flex: 1 1 260px; border: 0; background: transparent; padding: 0; box-shadow: none; }
html[data-skin="new"] #view-announcements .announcement-route-guide article > span { color: #4bb188; font-size: 11px; font-weight: 800; }
html[data-skin="new"] #view-announcements .announcement-route-guide strong { color: #e8eef4; font-size: 11.5px; }
html[data-skin="new"] #view-announcements .announcement-route-guide small { color: #7f8ea0; font-size: 11.5px; }
html[data-skin="new"] #view-announcements > .panel {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .08);
background: #0c2436;
box-shadow: none;
}
html[data-skin="new"] #view-announcements > .panel .panel-heading .section-label { color: #4bb188; }
html[data-skin="new"] #view-announcements > .panel .panel-heading small { color: #7f8ea0; }
/* Medewerkers (25 sep, 1-op-1 naar reference-medewerkers.png): de Modern-
sectie #new-employees vervangt overzichtspaneel, werkbalk, kaartgrid en
beheerderspaneel uit Klassiek; het bewerkformulier blijft gedeeld. */
html[data-skin="new"] #view-employees > .view-heading p,
html[data-skin="new"] #view-employees > .view-heading .heading-actions,
html[data-skin="new"] #view-employees > .team-account-overview,
html[data-skin="new"] #view-employees > .employee-filter-toolbar,
html[data-skin="new"] #view-employees > #employee-grid,
html[data-skin="new"] #view-employees > .administrators-panel { display: none; }
html[data-skin="new"] .new-employees {
display: block;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .08);
background: #0c2436;
overflow: hidden;
}
html[data-skin="new"] .new-employees-head { padding: 20px 21px 18px; }
html[data-skin="new"] .new-employees-head .section-label { color: #4bb188; }
html[data-skin="new"] .new-employees-head > strong { display: block; margin-top: 4px; color: #fff; font-size: 14px; }
html[data-skin="new"] .new-employees-head > p { margin: 4px 0 0; color: #7f8ea0; font-size: 12.5px; }
html[data-skin="new"] .new-employees-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
margin-top: 14px;
}
html[data-skin="new"] .new-employees-groep {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px;
background: rgba(255, 255, 255, .04);
padding: 10px 14px;
color: #fff;
font-size: 13px;
}
html[data-skin="new"] .new-employees-avatars { display: flex; padding-left: 8px; }
html[data-skin="new"] .new-employees-avatars i {
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-left: -8px;
border: 2px solid #0c2436;
border-radius: 50%;
background: #1f4a6b;
color: #cfdbe5;
font-size: 9px;
font-style: normal;
font-weight: 900;
}
html[data-skin="new"] .new-employees-avatars.beheerders i { background: #4bb188; color: #06131f; }
html[data-skin="new"] .new-employees-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 14px;
}
html[data-skin="new"] .new-employees-zoek { flex: 1 1 260px; }
html[data-skin="new"] .new-employees-zoek input {
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
background: rgba(255, 255, 255, .04);
color: #e8eef4;
font: inherit;
font-size: 13px;
padding: 11px 14px;
}
html[data-skin="new"] .new-employees-zoek input::placeholder { color: #7f8ea0; }
html[data-skin="new"] .new-employees-zoek input:focus { outline: none; border-color: #4bb188; box-shadow: 0 0 0 4px rgba(75, 177, 136, .18); }
html[data-skin="new"] .new-employees-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
html[data-skin="new"] .new-employees-cta {
border: 1px solid transparent;
border-radius: 999px;
background: #4bb188;
color: #06131f;
cursor: pointer;
min-height: 38px;
padding: 0 18px;
font-size: 13px;
font-weight: 800;
}
html[data-skin="new"] .new-employees-ghost {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 38px;
padding: 0 18px;
font-size: 13px;
font-weight: 800;
}
html[data-skin="new"] .new-employee-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
border-top: 1px solid rgba(255, 255, 255, .055);
padding: 14px 21px;
}
html[data-skin="new"] .new-employee-row.is-inactief { opacity: .72; }
html[data-skin="new"] .new-employee-avatar {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(255, 255, 255, .07);
color: #cfdbe5;
font-size: 11.5px;
font-weight: 800;
}
html[data-skin="new"] .new-employee-naam { flex: 1 1 200px; min-width: 0; }
html[data-skin="new"] .new-employee-naam strong { display: block; color: #fff; font-size: 13.5px; }
html[data-skin="new"] .new-employee-naam small { display: block; color: #7f8ea0; font-size: 11.5px; overflow-wrap: anywhere; }
html[data-skin="new"] .new-employee-stand { flex: 0 0 auto; font-size: 12px; font-weight: 800; }
html[data-skin="new"] .new-employee-stand.is-mint { color: #4bb188; }
html[data-skin="new"] .new-employee-stand.is-amber { color: #e8b06a; }
html[data-skin="new"] .new-employee-stand.is-neutraal { color: #c9d5da; }
html[data-skin="new"] .new-employee-velden { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 0 1 auto; }
html[data-skin="new"] .new-employee-velden > span > small { display: block; color: #7f8ea0; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html[data-skin="new"] .new-employee-velden > span > strong { display: block; color: #e7edf0; font-size: 12.5px; }
html[data-skin="new"] .new-employee-acties { display: flex; flex-wrap: wrap; gap: 7px; flex: 0 0 auto; margin-left: auto; }
html[data-skin="new"] .new-employee-ghost {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 34px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] .new-employee-ghost:disabled { opacity: .4; cursor: not-allowed; }
html[data-skin="new"] .new-employee-danger {
border: 1px solid rgba(231, 138, 138, .4);
border-radius: 999px;
background: transparent;
color: #e78a8a;
cursor: pointer;
min-height: 34px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] .new-employees-leeg { margin: 0; padding: 28px 21px; color: #7f8ea0; font-size: 13px; text-align: center; }
html[data-skin="new"] .new-employees-toegang { border-top: 1px solid rgba(255, 255, 255, .055); padding: 18px 21px 8px; }
html[data-skin="new"] .new-employees-toegang .section-label { color: #4bb188; }
html[data-skin="new"] .new-employees-toegang strong { display: block; margin-top: 4px; color: #fff; font-size: 14px; }
html[data-skin="new"] .new-employees-toegang small { display: block; margin-top: 2px; color: #7f8ea0; font-size: 12px; }
@media (max-width: 720px) {
html[data-skin="new"] .new-employee-velden { flex-basis: 100%; }
/* Op 360px stak de knoppenrij tot 398px uit (MOB-H-030, CI 1.0.92): eigen
regel, laat de knoppen omlopen binnen de viewport. */
html[data-skin="new"] .new-employee-acties { flex: 1 1 100%; min-width: 0; margin-left: 0; }
html[data-skin="new"] .new-employee-acties > button { flex: 0 1 auto; }
}
/* Klanturenstaten (besluit 25 sep: rij-opzet 1-op-1 naar de referentie,
zie newCustomerTimesheetAdminRow() in app.js). Zelfde donkere kaartstijl
als de Backoffice-werklijst hierboven, één rij per medewerker i.p.v. de
kaartgrid met deadline/brokerroute uit Klassiek. */
html[data-skin="new"] #view-customer-timesheet-admin .panel {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .08);
background: #0c2436;
overflow: hidden;
padding: 0;
}
html[data-skin="new"] .customer-timesheet-admin-list {
display: block;
padding: 0;
}
html[data-skin="new"] #view-customer-timesheet-admin .open-periods-intro {
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, .055);
padding: 18px 21px;
color: #7f8ea0;
font-size: 13px;
}
html[data-skin="new"] .new-customer-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
border-top: 1px solid rgba(255, 255, 255, .055);
padding: 16px 21px;
}
html[data-skin="new"] .new-customer-row:first-child {
border-top: none;
}
html[data-skin="new"] .new-customer-row-avatar {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(255, 255, 255, .07);
color: #cfdbe5;
font-size: 11.5px;
font-weight: 800;
}
html[data-skin="new"] .new-customer-row-naam {
flex: 0 0 auto;
min-width: 160px;
}
html[data-skin="new"] .new-customer-row-naam strong {
display: block;
color: #fff;
font-size: 13.5px;
}
html[data-skin="new"] .new-customer-row-naam small {
display: block;
color: #7f8ea0;
font-size: 11.5px;
}
html[data-skin="new"] .new-customer-row-helper {
flex: 1 1 260px;
color: #97a6b0;
font-size: 12.5px;
}
html[data-skin="new"] .new-customer-row-acties {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
html[data-skin="new"] .new-customer-row-goedkeuren {
border: 1px solid transparent;
border-radius: 999px;
background: #4bb188;
color: #06131f;
cursor: pointer;
min-height: 32px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
html[data-skin="new"] .new-customer-row-nieuw,
html[data-skin="new"] .new-customer-row-details {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: #e8eef4;
cursor: pointer;
min-height: 32px;
padding: 0 14px;
font-size: 12px;
font-weight: 800;
}
@media (max-width: 980px) {
}
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .main-content {
padding: 0 12px 84px;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-topbar-home {
min-width: 0;
}
html[data-skin="new"] #view-dashboard .dashboard-team-table td:first-child,
html[data-skin="new"] #view-dashboard .dashboard-team-table td:last-child {
border-radius: 12px;
}
}
/* Mobiel (telefoonbreedte) — de token-restyling van increment 3–10 loopt op
elke breedte door; hier alleen de correcties die een telefoon nodig heeft:
de grote bureaubladschaduw is te zwaar en de ruime radius te bol op een
smal scherm. Alleen html[data-skin="new"]. */
@media (max-width: 720px) {
html[data-skin="new"] :is(
.panel,
.metric-card,
.summary-card,
.settings-card,
.employee-card,
.invoice-month-overview,
.settings-section-nav
) {
border-radius: 16px;
box-shadow: 0 10px 26px color-mix(in srgb, var(--path-night) 12%, transparent);
}
html[data-skin="new"] .announcement-item {
padding: 16px 16px;
}
html[data-skin="new"] .invoice-status-guide {
gap: 8px;
}
html[data-skin="new"] .hours-table input {
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
html[data-skin="new"] *,
html[data-skin="new"] *::before,
html[data-skin="new"] *::after {
scroll-behavior: auto !important;
}
}
/* Standaarduren-flow: één herkenbare handeling voor Dashboard en Mijn uren. */
html[data-skin="new"] [data-standard-hours-fill],
html[data-skin="new"] #fill-standard-hours {
border-color: rgba(47, 106, 76, .28);
background: linear-gradient(135deg, rgba(75, 177, 136, .18), rgba(238, 232, 220, .72));
color: #163c2d;
font-weight: 800;
}
html[data-skin="new"] [data-standard-hours-fill]:hover,
html[data-skin="new"] #fill-standard-hours:hover {
border-color: rgba(47, 106, 76, .45);
background: linear-gradient(135deg, rgba(75, 177, 136, .26), rgba(255, 251, 244, .9));
transform: translateY(-1px);
}
/* ==================================================================
PATCH voor assets/styles-new.css — medewerkerdashboard (New-skin)
Plak dit ONDERAAN styles-new.css, vóór de @media-blokken hoeven ze
niet: alles hieronder is even specifiek of specifieker dan het
origineel en staat later in het bestand, dus het wint vanzelf.
Geen nieuwe selectors, geen HTML-wijziging, geen JS.
================================================================== */
/* ------------------------------------------------------------------
2. De foto bij uitklappen
------------------------------------------------------------------
Dicht is de foto een volwaardige plaat van 330px: goed. Open groeit
de kaart naar ruim 900px, maar de foto blijft op 330px staan met een
formulier eronder — de plaat wordt dan een half afgesneden strook
met een grote lege ondermarge. Een foto die niet meegroeit moet
krimpen, niet blijven staan: open wordt hij een rustige kopband. */
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-head {
min-height: 208px;
}
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-copy {
max-width: 66%;
padding: 26px 28px 84px;
}
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-head > img {
object-position: 56% 62%;
}
/* Open loopt de foto van rechts naar links uit in het crème, in plaats
van als blok af te breken. Dicht blijft de bestaande verdeling staan. */
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-head::after {
background: linear-gradient(96deg,
rgba(246, 241, 231, .99) 0 34%,
rgba(246, 241, 231, .8) 52%,
rgba(246, 241, 231, .3) 74%,
rgba(246, 241, 231, 0) 100%);
}
html[data-skin="new"] .new-bento-customer[data-open="true"] h3 {
margin-top: 10px;
font-size: 32px;
}
/* Een haarlijn scheidt de kopband van het formulier; zonder die lijn
zweeft het invulgedeelte los onder de foto. */
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-expand {
border-top: 1px solid rgba(16, 34, 53, .12);
margin-top: 2px;
padding-top: 20px;
}
/* ------------------------------------------------------------------
4. Hero — de bladeren waren bijna weg
------------------------------------------------------------------
opacity .42 over een verloop van #214b39 → #102f26 drukt de foto zo
ver weg dat er een vlakke groene plaat overblijft. De mockup heeft
een zichtbaar blad links, donker weglopend naar rechts. Foto op
volle sterkte, leesbaarheid via een verloop eróverheen in plaats van
via doorzichtigheid — dan blijft het blad staan waar het niets in de
weg zit, en is de kop juist beter leesbaar. */
html[data-skin="new"] .new-bento-hero > img {
opacity: 1;
object-position: 18% 62%;
}
html[data-skin="new"] .new-bento-hero::after {
content: "";
position: absolute;
z-index: 0;
inset: 0;
pointer-events: none;
background:
radial-gradient(86% 72% at 20% 6%, rgba(74, 118, 88, .22) 0%, rgba(16, 47, 38, 0) 66%),
linear-gradient(112deg,
rgba(14, 40, 30, .9) 0%,
rgba(16, 44, 33, .78) 38%,
rgba(16, 47, 38, .52) 66%,
rgba(16, 47, 38, .36) 100%);
}
/* ------------------------------------------------------------------
5. Uitgeklapt formulier — donkere velden op een crème kaart
------------------------------------------------------------------
Dit is het grootste probleem bij uitklappen, groter dan de foto.
Het verplaatste #customer-timesheet-upload-panel houdt de opmaak die
het op Mijn uren had: daar staat het op een donkere navy ondergrond,
dus kregen de velden #102b40 als vulling. Op dit crème kaartje worden
het zwarte balken — de maandkiezer, het jaartal, de bestandskiezer en
het e-mailvoorbeeld steken er alle vier als gaten uit.
De bestaande regels dekten al de drie knoppen (.button-ghost); de
velden zelf waren vergeten. Zelfde behandeling, zelfde palet. */
html[data-skin="new"] .new-bento-customer-expand :is(
input,
select,
textarea,
.month-picker-trigger
) {
border-color: #cfc5b5;
background: #fbf8f2;
color: #102235;
}
html[data-skin="new"] .new-bento-customer-expand :is(input, select, textarea):focus,
html[data-skin="new"] .new-bento-customer-expand .month-picker-trigger:focus {
border-color: #4bb188;
background: #fff;
box-shadow: 0 0 0 3px rgba(75, 177, 136, .2);
}
html[data-skin="new"] .new-bento-customer-expand input[type="file"] {
padding: 11px 13px;
}
/* De omhullende labelvlakken en het periodeblok waren halfdoorzichtig
navy — op crème leest dat als vuil, niet als vlak. */
html[data-skin="new"] .new-bento-customer-expand :is(
.customer-timesheet-period-control,
.customer-timesheet-upload-grid label
) {
border-color: rgba(16, 34, 53, .1);
background: rgba(255, 255, 255, .5);
}
html[data-skin="new"] .new-bento-customer-expand :is(
.customer-timesheet-field-label,
.customer-timesheet-upload-panel h3,
.customer-timesheet-mail-preview strong
) {
color: #102235;
}
html[data-skin="new"] .new-bento-customer-expand :is(
.customer-timesheet-action-help,
.customer-timesheet-current,
.customer-timesheet-upload-panel > p
) {
color: #5c6660;
}
/* Het e-mailvoorbeeld was een bijna-zwart groen blok met donkergroene
letters erin — slecht leesbaar én visueel het zwaarste element op de
kaart, terwijl het maar een voorbeeldtekst is. Nu een licht vlak met
een groene rand: herkenbaar als "dit gaat de deur uit", zonder te
schreeuwen. */
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-mail-preview {
border-color: rgba(47, 106, 76, .28);
background: #f2f6ef;
color: #33403a;
}
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-mail-preview pre {
color: #33403a;
}
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-mail-preview .section-label {
color: #2f6a4c;
}
/* Statusmelding "Nog niet ontvangen" rekte over de volle breedte uit tot
een donkere balk. Een status is een label, geen balk. */
html[data-skin="new"] .new-bento-customer-expand .status-pill {
display: inline-flex;
width: auto;
align-self: start;
border: 1px solid rgba(217, 161, 60, .45);
background: rgba(217, 161, 60, .14);
color: #8a5c1c;
}
/* Was hier omgezet naar hetzelfde halfdoorzichtige wit als de labelvlakken
verderop -- dat klopt alleen zolang de achterliggende kaart crème is. Bij
een andere maand (geen klanturenstaat, "Nog niet ontvangen") krijgt de
kaart een donkerdere ondergrond en werd dit blok daardoor onleesbaar
donker. .customer-timesheet-current moet altijd zelf leesbaar zijn, dus
terug naar de solide crème uit de regel hierboven i.p.v. afhankelijk zijn
van wat erachter zit. */
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-current {
border-color: rgba(16, 34, 53, .12);
background: #f6f2e9;
}
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-current strong {
color: #102235;
}
/* In Modern staat de samenvattingskaart van Mijn uren altijd in een smalle rechter-
kolom (minmax(250px, .3fr)). De algemene regel voor <=1100px (styles.css) maakt
er twee kolommen van (1fr 1fr); die kromp niet onder de inhoud en duwde kop,
label en notitie van 801 tot ruim 900px tot 6px buiten het scherm (monkey
Modern seed 40, 19 sep; SKIN-N-009). Hier blijft het één kolom, zoals erboven. */
@media (max-width: 1100px) {
html[data-skin="new"] #view-timesheet .summary-card { grid-template-columns: minmax(0, 1fr); }
}
/* 22 sep: Medewerkers/Teambeheer had in Modern nog geen enkele eigen laag --
de kaarten draaiden nog op de Klassieke lichte kaartstijl, terwijl het
canvas eromheen (zie .app-shell:has(#view-employees.is-active, ...)
hierboven) al donker is. Zelfde palet als de storyline-kaarten op het
Dashboard (#112a3c/rgba(255,255,255,.11)/#c9d5da), zodat Medewerkers
aansluit bij de rest van Beheer Modern in plaats van een losstaande
lichte plek te blijven. */
html[data-skin="new"] #view-employees .employee-card {
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 14px;
background: #112a3c;
color: #c9d5da;
box-shadow: none;
}
html[data-skin="new"] #view-employees .employee-identity strong {
color: #fff;
}
html[data-skin="new"] #view-employees .employee-identity small {
color: #8595a0;
}
html[data-skin="new"] #view-employees .employee-details {
border-top-color: rgba(255, 255, 255, .11);
}
html[data-skin="new"] #view-employees .employee-details small {
color: #8595a0;
}
html[data-skin="new"] #view-employees .employee-details strong {
color: #e7edf0;
}
/* Inactieve medewerker hergebruikte tot nu toe status-concept (dezelfde
grijze pil als "nog niet ingediend" bij facturen) -- twee verschillende
betekenissen op dezelfde kleur binnen één scherm. Eigen, herkenbare stijl:
doorzichtiger kaart, duidelijk gedempte badge. */
html[data-skin="new"] #view-employees .employee-card.is-inactive {
border-color: rgba(255, 255, 255, .07);
background: rgba(17, 42, 60, .55);
opacity: 1;
}
html[data-skin="new"] #view-employees .employee-card.is-inactive .employee-identity strong {
color: #9aa7b0;
}
html[data-skin="new"] #view-employees .employee-card .status-pill.status-concept {
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .06);
color: #9aa7b0;
}
html[data-skin="new"] #view-employees .employee-card-actions {
border-top: 1px solid rgba(255, 255, 255, .11);
}
html[data-skin="new"] #view-employees .employee-card .small-button {
border-color: rgba(126, 201, 156, .3);
background: rgba(75, 177, 136, .13);
color: #9fe0bd;
}
html[data-skin="new"] #view-employees .employee-card .small-button:hover {
border-color: rgba(126, 201, 156, .55);
background: rgba(75, 177, 136, .22);
}
html[data-skin="new"] #view-employees .employee-card .text-button {
color: #9fc7e0;
}
html[data-skin="new"] #view-employees .employee-card .text-button.danger-text {
color: #e78a8a;
}
/* Lege staat (filter/zoekveld zonder resultaat) zelfde donkere, gedempte
behandeling als elders in Modern (bv. #view-historie hierboven). */
html[data-skin="new"] #view-employees .dashboard-action-empty {
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 14px;
background: rgba(15, 38, 57, .6);
color: #8595a0;
}
html[data-skin="new"] #view-employees .invoice-search input {
border-color: rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .05);
color: #e7edf0;
}
html[data-skin="new"] #view-employees .invoice-search input::placeholder {
color: #7f8ea0;
}
html[data-skin="new"] #view-employees .invoice-search input:focus {
border-color: #4bb188;
outline-color: rgba(75, 177, 136, .28);
}
/* Contrast in Modern-donker (23 sep, wens Gio na de contrastverkenning).
Twee plekken zakten onder de 4,5:1 van WCAG 1.4.3. Beide waarden zijn
uitgerekend tegen hun eigen gemeten ondergrond en liggen net boven de eis.
De badge krijgt hier een andere tint dan in Klassiek-donker: de ondergrond
is daar #09131f en hier #081726, en met de Klassieke waarde bleef Modern op
4,42 steken -- net te weinig, en dat is precies het soort verschil dat je
alleen ziet als je per ondergrond narekent in plaats van één kleur overal
overheen te leggen. */
html[data-skin="new"][data-theme="dark"] .topbar .demo-badge { color: #6b8398; } /* 3,63 -> 4,58 op #081726 */
/* Het weekbereik staat op een lichte kaart, ook in de donkere stand. */
html[data-skin="new"] .new-bento-week header small,
html[data-skin="new"] #hours-week-nav-range { color: #606b66; } /* 4,22 -> 4,54 op #eee8dc */
/* Zelfde onderscheid als in Klassiek, op de donkere Modern-balk (23 sep). */
html[data-skin="new"] .toast.is-fout { border-color: rgba(214, 122, 134, .45); background: #7a2733; }
html[data-skin="new"] .toast.is-gelukt { border-color: rgba(75, 177, 136, .45); background: #12503f; }
/* ---------------------------------------------------------------------------
Kop van de Medewerker-schermen in Modern, 1-op-1 naar de referentie
(pilot/modern-referentie/, 25 sep): links alleen het logo (geen "Home"-
woord; het logo ís de Home-knop), dan "Uitloggen" als tekstknop, rechts de
maandpil "September 2026 ▾", de ronde bel en de profielpil met naam en ▾.
De maandpijlen ‹ › blijven bestaan (43 cases en de dagelijkse bediening
leunen erop) maar worden klein en zitten in de pil; het maandmenu-met-
status-per-maand uit de referentie is een later stuk. Alleen hier -- de
Backoffice-kop heeft zijn eigen referentie. */
.new-kop-uitloggen { display: none; }
.topbar-profile-name, .topbar-profile-caret { display: none; }
/* Hero-foto zoals de referentie (rendered.html r236-237): de foto op 52%
dekking, gecentreerd, met één diagonale verloop eroverheen -- een subtiele
bladtextuur in plaats van de nadrukkelijke bladeren die tot 1.0.103 het
linkerdeel van de kaart vulden (Gio, 25 sep: "nog niet zoals bij design").
Vervangt het PATCH-blok hierboven (opacity 1, object-position 18% 62%,
radiale + lineaire verloop) voor deze ene kaart. */
html[data-skin="new"] .new-bento-hero > img {
opacity: .52;
object-position: center;
}
html[data-skin="new"] .new-bento-hero::after {
background: linear-gradient(124deg, rgba(6, 22, 18, .92) 0%, rgba(8, 28, 23, .62) 44%, rgba(10, 34, 28, .22) 100%);
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .mobile-brand-home {
border-color: transparent;
background: transparent;
padding: 4px 0;
gap: 0;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .mobile-brand-home > span { display: none; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .mobile-brand-home img {
height: 30px;
max-width: 120px;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .mobile-topbar-home { min-width: 0; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-uitloggen {
display: inline-flex;
align-items: center;
border: 0;
background: transparent;
color: #8fa3b4;
cursor: pointer;
min-height: 32px;
font: 700 11.5px var(--path-sans);
padding: 0 10px;
transition: color .2s;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-uitloggen:hover { color: #e8eef4; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control {
min-height: 36px;
gap: 0;
margin-left: 0;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 999px;
background: rgba(255, 255, 255, .035);
box-shadow: none;
padding: 0 4px;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control > button {
width: 26px;
height: 26px;
border-radius: 50%;
color: #9fb3c4;
font-size: 16px;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control > button:hover { background: rgba(255, 255, 255, .08); }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-picker-caption { display: none; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-picker-wrap { min-width: 0; gap: 0; padding: 0 2px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-picker-fields { display: flex; align-items: center; gap: 0; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-picker-trigger {
min-height: 28px;
color: #e8eef4;
background: transparent;
font-size: 11.5px;
font-weight: 700;
padding: 0 4px;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .month-picker-trigger::after { color: #7fd3b4; font-size: 9px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) #period-year-picker {
width: 42px;
height: 28px;
background: transparent;
color: #e8eef4;
font-size: 11.5px;
font-weight: 700;
padding: 0;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .notification-button {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 50%;
background: rgba(255, 255, 255, .035);
color: #cfdbe5;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .profile-menu-button {
display: inline-flex;
align-items: center;
gap: 9px;
/* Klassiek zet hier een vast vierkant van 42x42; met de naam erin liep de
knop dan buiten zijn eigen vak en op 1280px buiten beeld (kiek 1.0.104). */
width: auto;
height: auto;
min-height: 36px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 999px;
background: rgba(255, 255, 255, .035);
color: #e8eef4;
padding: 4px 12px 4px 4px;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .profile-menu-button .topbar-avatar { width: 28px; height: 28px; border-radius: 50%; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-profile-name { display: inline; font-size: 12px; font-weight: 700; white-space: nowrap; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-profile-caret { display: inline; color: #7fd3b4; font-size: 9px; }
/* Maandmenu (referentie): een verticale lijst met per maand de stand als pil,
de gekozen maand mint gemarkeerd. Zelfde #period-month-panel en dezelfde
knoppen als in Klassiek (43 cases leunen erop); alleen de opmaak en de
stand-pil (syncPeriodControls) verschillen. */
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-choice-panel {
width: 292px;
grid-template-columns: minmax(0, 1fr);
gap: 2px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 18px;
background: #0b1a2a;
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
padding: 6px;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-choice-panel button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 38px;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
color: #e8eef4;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
text-align: left;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-choice-panel button:hover { border-color: transparent; background: rgba(255, 255, 255, .06); }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-choice-panel button.is-active { border-color: rgba(75, 177, 136, .35); background: rgba(75, 177, 136, .14); color: #7fd3b4; }
html[data-skin="new"] .maand-stand { flex: 0 0 auto; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(232, 240, 236, .66); font-size: 10.5px; font-weight: 800; padding: 3px 9px; white-space: nowrap; }
html[data-skin="new"] .maand-stand.is-amber { background: rgba(217, 154, 60, .13); color: #e8b06a; }
html[data-skin="new"] .maand-stand.is-mint { background: rgba(75, 177, 136, .13); color: #7fd3b4; }
/* Desktop naast de referentie gelegd (27 sep): het menu hangt rechts onder de
hele maandpil (right:0, 9px eronder, 250px breed), de stand is gekleurde
tekst zonder pilvlak, en de gekozen maand heeft alleen een zacht mint vlak.
Welke maanden er staan en in welke volgorde, zet syncPeriodControls
(hidden en order); [hidden] moet hier winnen van display:flex. */
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control { position: relative; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-picker { position: static; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-choice-panel {
top: calc(100% + 9px);
right: 0;
left: auto;
width: auto;
min-width: 250px;
border-color: rgba(255, 255, 255, .11);
background: rgba(10, 24, 39, .97);
box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .9);
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-choice-panel button { min-height: 40px; border: 0; padding: 0 12px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-choice-panel button:hover { background: rgba(255, 255, 255, .07); }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-choice-panel button.is-active { background: rgba(75, 177, 136, .1); color: #e8eef4; }
html[data-skin="new"] .period-control .month-choice-panel button[hidden] { display: none; }
html[data-skin="new"] .period-control .maand-stand,
html[data-skin="new"] .period-control .maand-stand.is-amber,
html[data-skin="new"] .period-control .maand-stand.is-mint { background: transparent; padding: 0; font-size: 10px; }
@media (max-width: 720px) {
/* Referentie op de telefoon: geen naam in de profielpil, wel de avatar. */
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-profile-name { display: none; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .profile-menu-button { padding: 4px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-profile-caret { display: none; }
}
/* ---------------------------------------------------------------------------
Klanturenstaat op de Medewerker-Home als rij, 1-op-1 naar de referentie
(25 sep): dicht één donkere rij -- ↑-icoon, "September — Klanturenstaat
aanleveren", de uitleg en de knop rechts -- zonder de foto en zonder de
crème plaat (referentieregel 6: crème alleen voor invoervlakken). Open
verschijnt het echte uploadpaneel (dat verhuist, zie
handleNewBentoCustomerToggle) als crème vel onder de rij, zodat alle
formulieropmaak hierboven, die op crème is afgestemd, blijft kloppen.
Overschrijft de foto- en patchregels hierboven voor deze ene kaart. */
.new-bento-customer-icoon { display: none; }
html[data-skin="new"] .new-bento-customer {
background: #0f2639 !important;
color: #e8f0ec;
border: 1px solid rgba(255, 255, 255, .07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-skin="new"] .new-bento-customer .new-bento-customer-head,
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
min-height: 0;
padding: 15px 21px;
}
html[data-skin="new"] .new-bento-customer .new-bento-customer-head > img,
html[data-skin="new"] .new-bento-customer .new-bento-customer-head::after { display: none; }
html[data-skin="new"] .new-bento-customer .new-bento-customer-icoon {
display: grid;
width: 26px;
height: 26px;
flex: 0 0 auto;
place-items: center;
border: 1px solid rgba(232, 176, 106, .35);
border-radius: 50%;
background: rgba(217, 154, 60, .14);
color: #e8b06a;
font-size: 12px;
font-weight: 900;
}
html[data-skin="new"] .new-bento-customer .new-bento-customer-copy,
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-copy {
display: flex;
flex: 1 1 260px;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
row-gap: 2px;
min-width: 0;
max-width: none;
padding: 0;
}
html[data-skin="new"] .new-bento-customer .new-bento-customer-copy h3,
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-copy h3 {
order: 1;
margin: 0;
color: #e8f0ec;
font: 700 13px var(--path-sans);
}
html[data-skin="new"] .new-bento-customer .new-bento-customer-copy .status-pill { order: 2; font-size: 10px; }
html[data-skin="new"] .new-bento-customer .new-bento-customer-copy p {
order: 3;
flex-basis: 100%;
margin: 0;
color: rgba(232, 240, 236, .55);
font-size: 11.5px;
line-height: 1.45;
}
html[data-skin="new"] .new-bento-customer .new-bento-customer-head > button {
position: static;
flex: 0 0 auto;
gap: 10px;
min-height: 38px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: transparent;
color: rgba(232, 240, 236, .82);
font: 800 12px var(--path-sans);
padding: 0 16px;
transition: background .3s, color .3s;
}
html[data-skin="new"] .new-bento-customer .new-bento-customer-head > button:hover { background: rgba(255, 255, 255, .08); color: #e8f0ec; }
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-expand {
margin: 0 21px 21px;
border-top: 0;
border-radius: 18px;
background: #f4f1e6;
color: #10273d;
padding: 18px;
}
@media (max-width: 720px) {
html[data-skin="new"] .new-bento-customer .new-bento-customer-head,
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-head { padding: 14px 16px; }
html[data-skin="new"] .new-bento-customer .new-bento-customer-head > button { flex: 1 1 100%; justify-content: space-between; }
html[data-skin="new"] .new-bento-customer[data-open="true"] .new-bento-customer-expand { margin: 0 12px 12px; padding: 14px; }
}
/* Het binnenste vak van "Nog geen klanturenstaat voor …" kreeg in Modern de
donkere --surface-muted van het thema (styles.css, .customer-timesheet-current
> div), terwijl de tekst op crème is afgestemd: donkerblauw op donkerblauw,
onleesbaar (gezien in de kiek van 1.0.109, bestond al in de crème kaart). Het
buitenste vak is al een crème kaart; het binnenste hoort geen tweede vlak. */
html[data-skin="new"] .new-bento-customer-expand .customer-timesheet-current > div {
border: 0;
background: transparent;
padding: 0;
}
/* Eén kolom (≤1100px): de kaarten volgen anders de DOM-volgorde, en daarin
staat de Klanturenstaat vóór het verloop -- op de telefoon stond de rij dus
bóven "stap voor stap" (kiek 1.0.109). De referentie zet hem eronder. */
@media (max-width: 1100px) {
html[data-skin="new"] #view-employee-dashboard .new-bento-hero { order: 1; }
html[data-skin="new"] #view-employee-dashboard .new-bento-week { order: 2; }
html[data-skin="new"] #view-employee-dashboard .new-bento-steps { order: 3; }
html[data-skin="new"] #view-employee-dashboard .new-bento-customer { order: 4; }
}
/* Tekst die alleen in Modern hoort (tegenhanger van de verbergregel in
styles.css): hier aan, de Klassieke variant uit. */
html[data-skin="new"] .alleen-modern { display: inline; }
html[data-skin="new"] .alleen-modern-blok { display: block; }
html[data-skin="new"] .alleen-klassiek { display: none; }
/* Kop op Mijn uren en Mijn maanden: net als op Home geen tweede grote
paginatitel (met de omgevingsbadge) naast het logo -- de pagina heeft zijn
eigen kop. "Rol kiezen" blijft hier wel staan: dat is op deze twee
schermen nog de uitlogweg die de bestaande controles gebruiken. */
html[data-skin="new"] .app-shell:has(#view-timesheet.is-active, #view-historie.is-active) .topbar-title { display: none; }
/* ---------------------------------------------------------------------------
Berichten (medewerker) 1-op-1 naar de referentie (25 sep): kop "Medewerker /
Berichten", filters als losse pillen, één kaart met rijen -- stip (mint =
nieuw), vette titel met korte datum ernaast, samenvatting eronder -- en een
voetregel. Openklappen en "Markeer als gelezen" werken zoals ze werkten;
alleen de opmaak en de korte datum (berichtDatumKort) zijn Modern. */
html[data-skin="new"] #view-employee-announcements .view-heading .section-label { color: #7fd3b4; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
html[data-skin="new"] #view-employee-announcements .view-heading h2 { margin-top: 6px; color: #e8f0ec; font: 400 clamp(34px, 4vw, 44px)/1 var(--path-serif); letter-spacing: -.03em; }
html[data-skin="new"] #view-employee-announcements .announcement-archive-filter {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: auto;
margin: 0 0 14px;
border: 0;
background: transparent;
box-shadow: none;
padding: 0;
}
html[data-skin="new"] #view-employee-announcements .announcement-archive-filter button {
min-height: 34px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 999px;
background: rgba(255, 255, 255, .035);
color: #9fb3c4;
font: 800 11.5px var(--path-sans);
padding: 0 14px;
}
html[data-skin="new"] #view-employee-announcements .announcement-archive-filter button.is-active { border-color: rgba(75, 177, 136, .35); background: rgba(75, 177, 136, .16); color: #7fd3b4; }
html[data-skin="new"] #view-employee-announcements .berichten-kaart {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 24px;
background: #0f2639;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
padding: 0;
}
html[data-skin="new"] #view-employee-announcements .berichten-kaart > .panel-heading { display: flex; justify-content: flex-end; min-height: 0; margin: 0; padding: 0; }
html[data-skin="new"] #view-employee-announcements .berichten-kaart > .panel-heading > div:first-child,
html[data-skin="new"] #view-employee-announcements .berichten-kop-acties small {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
html[data-skin="new"] #view-employee-announcements .berichten-alles-gelezen:not([hidden]) { margin: 12px 18px 0; min-height: 32px; border-radius: 999px; font-size: 11.5px; padding: 0 14px; }
html[data-skin="new"] #view-employee-announcements .employee-announcement-list { display: grid; gap: 0; padding: 0; }
/* Meldingen over je uren (besluit 27 sep, de bel brengt je hier) boven de
mededelingen, in dezelfde kaart; een hairline scheidt de twee bronnen. */
html[data-skin="new"] #view-employee-announcements .employee-announcement-list[hidden] { display: none; }
html[data-skin="new"] #view-employee-announcements #berichten-meldingen:not([hidden]) + #employee-announcement-list { border-top: 1px solid rgba(255, 255, 255, .08); }
html[data-skin="new"] #view-employee-announcements .employee-announcement-list .employee-announcement-card,
html[data-skin="new"] #view-employee-announcements .employee-announcement-list .employee-announcement-card:nth-child(even),
html[data-skin="new"] #view-employee-announcements .employee-announcement-list .employee-announcement-card.is-open {
border: 0;
border-top: 1px solid rgba(255, 255, 255, .055);
border-radius: 0;
background: transparent;
box-shadow: none;
}
html[data-skin="new"] #view-employee-announcements .employee-announcement-list .employee-announcement-card:first-child { border-top: 0; }
html[data-skin="new"] #view-employee-announcements .bericht-kop {
display: grid;
/* Titelkolom mag krimpen (en afbreken) maar hoort ook de vrije ruimte te
krijgen; de datum houdt altijd precies zijn eigen breedte. Stond eerst
omgekeerd (1fr op de datumkolom, titel alleen "auto"): bij een lange
titel op een smal scherm eiste de datumkolom de vrije ruimte op en werd
de titelkolom tot 0px geknepen -- elk teken op een eigen regel (SKIN-N-xxx,
schermbeeld 390px, 26 sep). */
grid-template-columns: 10px minmax(0, 1fr) max-content 10px;
align-items: baseline;
column-gap: 12px;
row-gap: 3px;
min-height: 0;
padding: 15px 21px;
}
html[data-skin="new"] #view-employee-announcements .bericht-kop:hover { background: rgba(255, 255, 255, .03); }
html[data-skin="new"] #view-employee-announcements .bericht-kop::before {
content: "";
grid-column: 1;
grid-row: 1;
align-self: center;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
}
html[data-skin="new"] #view-employee-announcements .employee-announcement-card.is-unread .bericht-kop::before { background: #4bb188; box-shadow: 0 0 8px rgba(75, 177, 136, .6); }
html[data-skin="new"] #view-employee-announcements .bericht-kop-tekst { display: contents; }
html[data-skin="new"] #view-employee-announcements .bericht-kop-tekst .status-pill:not(.bericht-label-ingetrokken) { display: none; }
html[data-skin="new"] #view-employee-announcements .bericht-kop-tekst .bericht-label-ingetrokken { grid-column: 2 / 4; grid-row: 3; justify-self: start; font-size: 10px; }
html[data-skin="new"] #view-employee-announcements .employee-announcement-card .bericht-kop h3,
html[data-skin="new"] #view-employee-announcements .employee-announcement-card.is-dicht .bericht-kop h3 {
grid-column: 2;
grid-row: 1;
color: #e8f0ec;
font: 700 13px var(--path-sans);
}
html[data-skin="new"] #view-employee-announcements .employee-announcement-card.is-unread.is-dicht .bericht-kop h3 { font-weight: 800; }
html[data-skin="new"] #view-employee-announcements .bericht-kop .bericht-datum { grid-column: 3; grid-row: 1; justify-self: start; color: rgba(232, 240, 236, .45); font-size: 11px; font-weight: 700; }
html[data-skin="new"] #view-employee-announcements .bericht-kop .bericht-snippet { grid-column: 2 / 4; grid-row: 2; color: rgba(232, 240, 236, .62); font-size: 12px; line-height: 1.5; }
html[data-skin="new"] #view-employee-announcements .bericht-chevron { grid-column: 4; grid-row: 1; align-self: center; border-color: rgba(232, 240, 236, .4); }
html[data-skin="new"] #view-employee-announcements .bericht-markeer { min-height: 34px; margin-right: 18px; color: rgba(232, 240, 236, .55); font-size: 11.5px; }
html[data-skin="new"] #view-employee-announcements .bericht-markeer:hover { color: #7fd3b4; }
html[data-skin="new"] #view-employee-announcements .bericht-inhoud { padding: 0 21px 16px 43px; }
html[data-skin="new"] #view-employee-announcements .bericht-inhoud > p { color: rgba(232, 240, 236, .78); font-size: 12.5px; }
html[data-skin="new"] #view-employee-announcements .berichten-voetregel { margin: 12px 2px 0; color: rgba(232, 240, 236, .45); font-size: 11px; }
@media (max-width: 720px) {
html[data-skin="new"] #view-employee-announcements .berichten-kaart { border-radius: 20px; }
html[data-skin="new"] #view-employee-announcements .bericht-kop { padding: 14px 16px; }
html[data-skin="new"] #view-employee-announcements .bericht-kop-rij { flex-wrap: wrap; }
html[data-skin="new"] #view-employee-announcements .bericht-markeer { margin: 0 16px 8px 38px; }
html[data-skin="new"] #view-employee-announcements .bericht-inhoud { padding: 0 16px 14px 38px; }
}
/* ---------------------------------------------------------------------------
Maanden (medewerker) 1-op-1 naar de referentie (25 sep): kop "Medewerker /
Maanden", de lopende maand als kaart met weektegels, daaronder één kaart
"Eerdere maanden" met per maand naam ▾, uitleg, pil en actie in de rij, en
uitgeklapt de weken met dagchips. De Klassieke lijst (#employee-history)
blijft in Modern leeg en verborgen (renderEmployeeDashboard, R48). */
html[data-skin="new"] #view-historie .employee-history-panel { display: none; }
html[data-skin="new"] #view-historie .view-heading .section-label { color: #7fd3b4; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
html[data-skin="new"] #view-historie .view-heading h2 { margin-top: 6px; color: #e8f0ec; font: 400 clamp(34px, 4vw, 44px)/1 var(--path-serif); letter-spacing: -.03em; }
html[data-skin="new"] .new-maanden { display: grid; gap: 14px; }
html[data-skin="new"] .new-maanden-lopend,
html[data-skin="new"] .new-maanden-eerder {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 24px;
background: #0f2639;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-skin="new"] .new-maanden-lopend { display: grid; gap: 16px; padding: 21px; }
html[data-skin="new"] .new-maanden-lopend-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
html[data-skin="new"] .new-maanden-lopend-kop small { display: block; margin-top: 2px; color: rgba(232, 240, 236, .5); font-size: 11.5px; }
html[data-skin="new"] .new-maand-naam { color: #e8f0ec; font: 400 22px/1.15 var(--path-serif); letter-spacing: -.02em; }
html[data-skin="new"] .new-maand-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
/* 11px, niet 10,5: de referentie zet de standpil op Maanden op 800/11px (zelfde
maat als in Backoffice). Deze uitzondering stamde van voor die meting en kwam
pas bovendrijven toen het losse #new-maanden-blok verdween. */
html[data-skin="new"] .new-maand-acties .status-pill { font-size: 11px; }
html[data-skin="new"] .new-maand-knop { min-height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #e8f0ec; cursor: pointer; font: 800 12px var(--path-sans); padding: 0 16px; transition: background .3s, color .3s; white-space: nowrap; }
html[data-skin="new"] .new-maand-knop:hover { background: rgba(255, 255, 255, .08); }
html[data-skin="new"] .new-maand-knop.is-primair { border-color: transparent; background: linear-gradient(140deg, #54c096, #2f8f6b); color: #06131f; }
html[data-skin="new"] .new-maanden-weken { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
html[data-skin="new"] .new-maanden-week { display: grid; gap: 3px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: rgba(255, 255, 255, .03); padding: 12px 14px; }
html[data-skin="new"] .new-maanden-week small { color: rgba(232, 240, 236, .5); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; }
html[data-skin="new"] .new-maanden-week strong { color: #e8f0ec; font: 400 20px var(--path-serif); font-variant-numeric: tabular-nums; }
html[data-skin="new"] .new-maanden-week span { color: #7fd3b4; font-size: 10.5px; font-weight: 800; }
html[data-skin="new"] .new-maanden-week.is-open span { color: #e8b06a; }
html[data-skin="new"] .new-maanden-week.is-later span { color: rgba(232, 240, 236, .45); }
html[data-skin="new"] .new-maanden-eerder > .section-label { display: block; padding: 15px 21px 13px; color: rgba(232, 240, 236, .58); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
html[data-skin="new"] .new-maand-rij { border-top: 1px solid rgba(255, 255, 255, .055); }
html[data-skin="new"] .new-maand-rij.is-open { background: rgba(75, 177, 136, .06); }
html[data-skin="new"] .new-maand-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 21px; }
html[data-skin="new"] .new-maand-tekst { flex: 1 1 280px; min-width: 0; }
html[data-skin="new"] .new-maand-toggle { display: inline-flex; align-items: baseline; gap: 6px; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; text-align: left; }
html[data-skin="new"] .new-maand-rij.is-open .new-maand-naam { color: #7fd3b4; }
html[data-skin="new"] .new-maand-pijl { color: rgba(232, 240, 236, .5); font-size: 10px; transition: transform .25s ease; }
html[data-skin="new"] .new-maand-rij.is-open .new-maand-pijl { transform: rotate(180deg); }
html[data-skin="new"] .new-maand-uitleg { display: block; margin-top: 3px; color: rgba(232, 240, 236, .55); font-size: 11.5px; line-height: 1.45; }
html[data-skin="new"] .new-maand-weken { display: grid; gap: 8px; padding: 0 21px 16px; }
html[data-skin="new"] .new-maand-week { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .03); padding: 10px 14px; }
html[data-skin="new"] .new-maand-week small { flex: 0 0 44px; color: rgba(232, 240, 236, .5); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; }
html[data-skin="new"] .new-maand-dagen { display: flex; flex: 1 1 260px; flex-wrap: wrap; gap: 5px; min-width: 0; }
html[data-skin="new"] .new-maand-dag { border-radius: 8px; background: rgba(255, 255, 255, .06); color: rgba(232, 240, 236, .75); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 8px; white-space: nowrap; }
html[data-skin="new"] .new-maand-dag.is-leeg { background: rgba(217, 154, 60, .14); color: #e8b06a; }
html[data-skin="new"] .new-maand-week strong { margin-left: auto; color: #e8f0ec; font: 400 17px var(--path-serif); font-variant-numeric: tabular-nums; }
html[data-skin="new"] .new-maand-totaal { color: rgba(232, 240, 236, .5); font-size: 11px; }
html[data-skin="new"] .new-maanden-leeg { margin: 0; padding: 0 21px 18px; color: rgba(232, 240, 236, .55); font-size: 12px; }
@media (max-width: 720px) {
html[data-skin="new"] .new-maanden-lopend, html[data-skin="new"] .new-maanden-eerder { border-radius: 20px; }
html[data-skin="new"] .new-maanden-lopend { padding: 16px; }
html[data-skin="new"] .new-maanden-weken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-skin="new"] .new-maand-kop { padding: 14px 16px; }
html[data-skin="new"] .new-maand-acties { justify-content: flex-start; }
html[data-skin="new"] .new-maand-weken { padding: 0 16px 14px; }
}
/* ---------------------------------------------------------------------------
Onderbalk van de medewerker in Modern op de telefoon (referentie, 25 sep):
Home · Maanden · Berichten, zwevend onderin met safe-area, actieve tab mint,
een amber bolletje bij ongelezen berichten. Alleen op de vier
medewerkerschermen en alleen ≤720px; de Klassieke tabbalk (de zijbalk) blijft
daar verborgen, zoals SKIN-H-012/013 bewaken. */
@media (max-width: 720px) {
html[data-skin="new"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-tabbalk {
position: fixed;
z-index: 40;
right: 14px;
bottom: max(12px, env(safe-area-inset-bottom, 0px));
left: 14px;
display: flex;
align-items: stretch;
gap: 4px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 22px;
background: rgba(9, 22, 36, .88);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
padding: 6px;
}
html[data-skin="new"] .new-tabbalk button {
position: relative;
display: grid;
flex: 1 1 0;
min-width: 0;
min-height: 52px;
gap: 4px;
justify-items: center;
align-content: center;
border: 0;
border-radius: 16px;
background: transparent;
color: #9fb3c4;
cursor: pointer;
padding: 6px 4px;
transition: background .25s, color .25s;
}
html[data-skin="new"] .new-tabbalk small { font-size: 11px; font-weight: 800; white-space: nowrap; }
html[data-skin="new"] .new-tab-stip { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
html[data-skin="new"] .new-tab-badge { position: absolute; top: 8px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: #d99a3c; box-shadow: 0 0 0 2px #0b1a2a; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .new-tabbalk [data-new-tab="employee-dashboard"],
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .new-tabbalk [data-new-tab="historie"],
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .new-tabbalk [data-new-tab="employee-announcements"] { background: rgba(75, 177, 136, .16); color: #7fd3b4; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .new-tabbalk [data-new-tab="employee-dashboard"] .new-tab-stip,
html[data-skin="new"] .app-shell:has(#view-historie.is-active) .new-tabbalk [data-new-tab="historie"] .new-tab-stip,
html[data-skin="new"] .app-shell:has(#view-employee-announcements.is-active) .new-tabbalk [data-new-tab="employee-announcements"] .new-tab-stip { background: #4bb188; }
/* Ruimte onderin zodat de balk niets van de pagina afdekt. */
html[data-skin="new"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .main-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
/* ── Medewerker-Home naar de referentie, afronding (Remy-LeBeau 25 sep: "Modern
afmaken toch"). Vergeleken met pilot/modern-referentie/modern-definitief.html op
1280px en 390px. ─────────────────────────────────────────────────────────── */
/* "Andere maanden" staat in de kaart "Stap voor stap" (renderNewAndereMaanden).
De losse klanturenstaatkaart, de oude maandlijst en de historie-regel zijn in
Modern vervangen; Klassiek houdt ze (de oude lijst blijft voor bestaande
controles in de DOM, alleen onzichtbaar). */
html[data-skin="new"] #view-employee-dashboard #new-bento-customer,
html[data-skin="new"] #view-employee-dashboard #employee-open-overview,
html[data-skin="new"] #view-employee-dashboard #employee-history-teaser { display: none !important; }
html[data-skin="new"] .new-bento-steps > .section-label { color: #8fa3b4; }
html[data-skin="new"] .new-andere-maanden { border-top: 1px solid rgba(255, 255, 255, .055); }
html[data-skin="new"] .new-andere-maanden > .section-label { display: block; padding: 17px 21px 13px; color: #8fa3b4; }
html[data-skin="new"] .new-andere-rij { display: flex; align-items: center; gap: 16px; border-top: 1px solid rgba(255, 255, 255, .055); padding: 18px 21px; }
html[data-skin="new"] .new-andere-icoon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: #e3a33f; color: #0a1c2f; font: 800 17px var(--path-sans); }
html[data-skin="new"] .new-andere-rij.is-correctie .new-andere-icoon { background: #f0b27f; }
html[data-skin="new"] .new-andere-rij.is-uren .new-andere-icoon { background: rgba(255, 255, 255, .08); color: #cfdbe5; }
html[data-skin="new"] .new-andere-tekst { flex: 1 1 260px; min-width: 0; }
html[data-skin="new"] .new-andere-tekst strong { display: block; color: #f1f5f8; font-size: 13.5px; font-weight: 800; }
html[data-skin="new"] .new-andere-tekst small { display: block; max-width: 460px; margin-top: 4px; color: #9fb0bd; font-size: 12px; line-height: 1.55; }
html[data-skin="new"] .new-andere-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
html[data-skin="new"] .new-andere-knop { min-height: 42px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #eef3f6; cursor: pointer; font: 800 13px var(--path-sans); padding: 0 18px; }
html[data-skin="new"] .new-andere-knop:hover { background: rgba(255, 255, 255, .07); }
html[data-skin="new"] .new-andere-knop.is-primair { border-color: transparent; background: #4bb188; color: #06131f; box-shadow: 0 10px 24px -14px rgba(75, 177, 136, .9); }
html[data-skin="new"] .new-andere-knop.is-primair:hover { background: #5cc59a; }
html[data-skin="new"] .new-andere-dag { color: #9fb0bd; font-size: 12px; font-weight: 700; white-space: nowrap; }
html[data-skin="new"] .new-andere-presets { display: inline-flex; gap: 2px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .03); padding: 3px; }
html[data-skin="new"] .new-andere-presets button { min-width: 34px; min-height: 34px; border: 0; border-radius: 999px; background: transparent; color: #cfdbe5; cursor: pointer; font: 800 12.5px var(--path-sans); }
html[data-skin="new"] .new-andere-presets button.is-gekozen { background: #4bb188; color: #06131f; }
html[data-skin="new"] .new-andere-uren { width: 64px; min-height: 42px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .05); color: #f1f5f8; font: 800 14px var(--path-sans); text-align: center; }
html[data-skin="new"] .new-andere-uren:focus { border-color: #4bb188; outline: none; box-shadow: 0 0 0 2px rgba(75, 177, 136, .3); }
/* Weekkaart: de referentie markeert vandaag niet met een donkere balk. De klasse
blijft (toetsenbordfocus leunt erop), alleen de opmaak vervalt op Home. */
html[data-skin="new"] #new-bento-days .new-bento-day.is-active { margin-inline: 0; border-radius: 0; border-color: rgba(16, 39, 61, .12); background: transparent; color: inherit; padding-inline: 0; }
html[data-skin="new"] #new-bento-days .new-bento-day.is-active .new-bento-day-naam strong { color: #102235; }
html[data-skin="new"] #new-bento-days .new-bento-day.is-active .new-bento-day-naam small { color: #6c7b89; }
html[data-skin="new"] #new-bento-days .new-bento-day.is-active .new-bento-presets button { border-color: #d3dbe1; background: #fff; color: #5a6b7a; }
html[data-skin="new"] #new-bento-days .new-bento-day.is-active input { border-color: #cfd8de; background: #fff; color: #102235; box-shadow: none; }
html[data-skin="new"] #new-bento-days .new-bento-day.is-active input:focus { border-color: #4bb188; box-shadow: 0 0 0 2px rgba(75, 177, 136, .26); }
/* Kop: pil "Home" zoals de referentie (op de telefoon zit Home in de onderbalk).
Zonder Modern-medewerkerscherm nergens zichtbaar. */
.new-kop-home { display: none; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-home {
display: inline-flex;
align-items: center;
min-height: 34px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 999px;
background: rgba(255, 255, 255, .035);
color: #cfdbe5;
cursor: pointer;
font: 700 11.5px var(--path-sans);
padding: 0 14px;
}
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active) .new-kop-home { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .09); color: #fff; }
/* Herstel demo is een testknop: in de referentie alleen een ↶-rondje. */
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-quick-reset .testknop-tekst { display: none; }
/* Geen zwevende hulpknop aan de medewerkerkant: Hulp & contact staat in het
profielmenu, zoals in de referentie. De voettekst met het versienummer blijft
bewust staan (afwijking): in het profielmenu staat de versie alleen onder
Testfuncties, dus op PROD zou hij anders nergens meer te zien zijn. */
html[data-skin="new"] body[data-role="employee"] .help-launcher { display: none !important; }
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-home { display: none; }
html[data-skin="new"] .new-andere-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 12px 14px; padding: 18px 16px; }
html[data-skin="new"] .new-andere-icoon { grid-column: 1; }
html[data-skin="new"] .new-andere-tekst { grid-column: 2; }
html[data-skin="new"] .new-andere-acties { grid-column: 1 / -1; justify-content: flex-start; }
html[data-skin="new"] .new-andere-maanden > .section-label { padding-inline: 16px; }
/* Referentie op 390px: dagnaam, 0/8/9 en het veld op één regel, tikdoelen ≥42px. */
html[data-skin="new"] #new-bento-days .new-bento-day { flex-wrap: nowrap; gap: 8px; }
html[data-skin="new"] #new-bento-days .new-bento-day-naam { flex: 1 1 auto; flex-basis: auto; }
html[data-skin="new"] #new-bento-days .new-bento-presets button { width: 38px; height: 42px; }
html[data-skin="new"] #new-bento-days .new-bento-day input { width: 52px; min-height: 42px; }
}
/* Hero: de donkere laag over de foto liep maar tot 65% van de kaart. Een oudere
gloedregel (hierboven, width 65% / height 130%) bleef gelden naast inset: 0, en
gaf zo een verticale naad halverwege de kaart. De referentie heeft één vlak. */
html[data-skin="new"] .new-bento-hero::after { width: auto; height: auto; }
/* Weekkaart op Home zo compact als de referentie: rijen van ±48px in plaats van 61. */
html[data-skin="new"] #new-bento-days .new-bento-day { padding-block: 6px; }
html[data-skin="new"] #new-bento-days .new-bento-day input { padding-block: 6px; }
/* Telefoonkop van de medewerker: in de referentie één smalle regel (logo, ↶,
profielpil). Uitloggen en de bel blijven hier bewust staan (SKIN-H-050 en de
bestaande uitlogroutes), maar alles op één regel met het logo; de maandpil
eronder over de volle breedte. Was drie regels hoog. */
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 8px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-actions { display: contents; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .mobile-topbar-home { flex: 0 0 auto; width: auto; margin-right: auto; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-quick-reset { width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-uitloggen { padding: 0 6px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control { order: 20; flex: 1 1 100%; justify-content: space-between; }
}
/* ── Backoffice-kop naar de referentie (Remy-LeBeau 25 sep: "Modern afmaken").
Referentie (screenshot-backoffice.png, reference-*.png): bovenaan een smalle
balk (logo links; rechts Uitloggen en de profielpil met naam), daaronder de
paginakop "Backoffice / Urenoverzicht" met rechts de maandpil, en daaronder de
zes tabs. Dezelfde knoppen en velden als voorheen, alleen anders geschikt:
.topbar-actions wordt "display: contents", zodat zijn kinderen als losse
stukken in de kop komen te staan. De telefoon (≤720px) houdt zijn eigen
regeling. Inhoud gecentreerd op de breedte van de referentie (1112px). */
@media (min-width: 721px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 12px 10px;
max-width: 1112px;
margin-inline: auto;
border-bottom: 0;
padding: 14px 0 6px;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-actions { display: contents; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-topbar-home { flex: 0 0 auto; width: auto; margin-right: auto; border-color: transparent; background: transparent; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-brand-home > span { display: none; }
/* Tweede regel: paginakop links, maandpil rechts. De titel neemt de ruimte die
over is en duwt zo zichzelf naar een nieuwe regel onder de balk. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title {
display: block;
order: 10;
flex: 1 0 62%;
min-width: 0;
margin-top: 18px;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title .eyebrow,
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title .topbar-context { display: none; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title::before {
content: "Backoffice";
display: block;
margin-bottom: 6px;
color: #7fd3b4;
font: 800 10px var(--path-sans);
letter-spacing: .22em;
text-transform: uppercase;
}
/* De referentie heet op elk tabblad "Urenoverzicht"; welk tabblad open is, zie
je aan de actieve tab. De eigen schermnaam blijft als tekst staan (voor
schermlezers en de bestaande controles), alleen visueel vervangen. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #page-title {
display: block;
margin: 0;
color: transparent;
font-size: 0;
line-height: 0;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #page-title::after {
content: "Urenoverzicht";
display: block;
color: #eef3f6;
font: 400 42px/1.05 var(--path-serif, Georgia, serif);
letter-spacing: -.01em;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #global-period-control { order: 11; margin: 18px 0 0 auto; }
/* Derde regel: de tabs, links uitgelijnd onder de titel. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav {
order: 12;
flex: 0 0 100%;
width: 100%;
margin: 4px 0 0;
overflow-x: auto;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav button { min-height: 38px; padding: 0 16px; font-size: 12.5px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .main-content > .view > .view-heading { display: none; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .main-content > .view { max-width: 1112px; margin-inline: auto; }
}
/* Backoffice, rest van de referentie. */
html[data-skin="new"] .new-admin-tab-teller { display: inline-grid; min-width: 18px; height: 18px; margin-left: 6px; place-items: center; border-radius: 999px; background: #e3a33f; color: #0a1c2f; font: 800 10.5px/1 var(--path-sans); padding: 0 5px; vertical-align: 1px; }
html[data-skin="new"] .new-admin-tab-teller[hidden] { display: none; }
/* Uitloggen als tekst en de naam in de profielpil, zoals bij de medewerker. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-kop-uitloggen { display: inline-flex; align-items: center; min-height: 32px; border: 0; background: transparent; color: #8fa3b4; cursor: pointer; font: 700 11.5px var(--path-sans); padding: 0 10px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-kop-uitloggen:hover { color: #e8eef4; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-quick-reset .testknop-tekst { display: none; }
@media (min-width: 721px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .profile-menu-button { display: inline-flex; align-items: center; gap: 9px; width: auto; height: auto; min-height: 36px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; background: rgba(255, 255, 255, .035); color: #e8eef4; padding: 4px 12px 4px 4px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .profile-menu-button .topbar-avatar { width: 28px; height: 28px; border-radius: 50%; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-profile-name { display: inline; font-size: 12px; font-weight: 700; white-space: nowrap; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-profile-caret { display: inline; color: #7fd3b4; font-size: 9px; }
}
/* Overzicht: de hero en "Voortgang deze maand" naast elkaar, werklijst en
KPI-tegels over de volle breedte eronder. De twee extra blokken van de app
("Alle open acties per maand", "Klanturenstaten · N verwacht") staan niet in de
referentie: in Modern verborgen, in Klassiek ongewijzigd. Op Facturen hetzelfde
voor "Alle maanden met open maandcontrole". */
html[data-skin="new"] #view-dashboard #admin-task-panel,
html[data-skin="new"] #view-dashboard #customer-timesheet-admin-teaser,
html[data-skin="new"] #view-invoices #invoice-month-overview { display: none !important; }
@media (min-width: 1100px) {
html[data-skin="new"] .new-admin-overzicht { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
html[data-skin="new"] .new-admin-overzicht > .new-admin-hero { grid-column: 1; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 380px; }
html[data-skin="new"] .new-admin-overzicht > .new-admin-progress { grid-column: 2; }
html[data-skin="new"] .new-admin-overzicht > :not(.new-admin-hero):not(.new-admin-progress) { grid-column: 1 / -1; }
}
html[data-skin="new"] .new-admin-worklist-voet { margin: 0; border-top: 1px solid rgba(255, 255, 255, .055); padding: 12px 22px; text-align: right; }
html[data-skin="new"] .new-admin-worklist-alle { border: 0; background: transparent; color: #7fd3b4; cursor: pointer; font: 800 12px var(--path-sans); padding: 6px 0; }
html[data-skin="new"] .new-admin-worklist-alle:hover { color: #a6e6cd; }
/* Backoffice-kop: maandkeuze als pil "‹ September 2026 ›" (referentie), het
logo zonder kader en geen scheidingsstreep tussen de tabgroepen. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-brand-home { border-color: transparent; background: transparent; box-shadow: none; padding: 4px 0; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav-group + .new-admin-topnav-group::before { display: none; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-control { min-height: 40px; gap: 0; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; background: rgba(255, 255, 255, .035); box-shadow: none; padding: 0 6px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-control > button { width: 28px; height: 28px; border-radius: 50%; background: transparent; color: #9fb3c4; font-size: 16px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-control > button:hover { background: rgba(255, 255, 255, .08); }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-picker-caption { display: none; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-picker-wrap { min-width: 0; gap: 0; padding: 0 4px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-picker-fields { display: flex; align-items: center; gap: 0; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-control .month-picker-trigger { min-height: 30px; background: transparent; color: #eef3f6; font-size: 12.5px; font-weight: 800; padding: 0 4px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #period-year-picker { width: 46px; height: 30px; background: transparent; color: #eef3f6; font-size: 12.5px; font-weight: 800; padding: 0; }
/* Klanturenstaten (Backoffice): de kop staat in de referentie bóvenin de kaart
("Klanturenstaten · september", teller in mint, uitleg), niet als losse
schermkop. Zelfde elementen, als bovenkant van dezelfde kaart geschikt. */
@media (min-width: 721px) {
html[data-skin="new"] .app-shell:has(#view-customer-timesheet-admin.is-active) #view-customer-timesheet-admin > .view-heading { display: block; margin: 0; border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; border-radius: 24px 24px 0 0; background: #0f2a40; padding: 22px 22px 0; }
}
html[data-skin="new"] #view-customer-timesheet-admin > .view-heading .section-label,
html[data-skin="new"] #view-customer-timesheet-admin > .view-heading .text-button { display: none; }
html[data-skin="new"] #view-customer-timesheet-admin > .view-heading h2 { margin: 0; color: #f1f5f8; font: 800 14px var(--path-sans); }
html[data-skin="new"] #view-customer-timesheet-admin > .view-heading p { margin: 4px 0 0; color: #7fd3b4; font-size: 11.5px; font-weight: 700; }
html[data-skin="new"] #view-customer-timesheet-admin > .view-heading + .panel { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; background: #0f2a40; }
html[data-skin="new"] #view-customer-timesheet-admin .open-periods-intro { display: none; }
html[data-skin="new"] .new-klant-admin-uitleg { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #9fb0bd; font-size: 11.5px; line-height: 1.5; padding: 6px 22px 16px; }
/* Mededelingen (Backoffice): compacte kaarten zoals de referentie. Bovenaan één
regel "MEDEDELING #16 · 2026-09-10 09:30", daaronder een kleine vette titel, de
tekst en drie kolommen Ontvangers / E-mail / Afzender. Ingetrokken en concept
houden een neutrale kaart; alleen het label en de intrekkingsnotitie (oranje
rand) kleuren. De knoppen blijven, klein en rechts. */
html[data-skin="new"] #view-announcements .announcement-item,
html[data-skin="new"] #view-announcements .announcement-item.is-draft,
html[data-skin="new"] #view-announcements .announcement-item.is-withdrawn { border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: none; padding: 14px 16px; }
html[data-skin="new"] #view-announcements .announcement-item-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 8px; }
html[data-skin="new"] #view-announcements .announcement-item-head > div { display: contents; }
html[data-skin="new"] #view-announcements .announcement-item-head .status-pill { grid-column: 1; grid-row: 1; border: 0; background: transparent; box-shadow: none; color: #7fd3b4; font: 800 10.5px var(--path-sans); letter-spacing: .08em; text-transform: uppercase; padding: 0; }
html[data-skin="new"] #view-announcements .announcement-item-head .status-pill::before { display: none; }
html[data-skin="new"] #view-announcements .announcement-item-head .status-warning { color: #cfdbe5; }
html[data-skin="new"] #view-announcements .announcement-item-head .status-concept { color: #e3a33f; }
html[data-skin="new"] #view-announcements .announcement-item-head > small { grid-column: 2; grid-row: 1; color: #8193a1; font-size: 11px; }
html[data-skin="new"] #view-announcements .announcement-item-head h3 { grid-column: 1 / -1; grid-row: 2; margin: 4px 0 0; color: #f1f5f8; font: 800 13.5px var(--path-sans); letter-spacing: 0; }
html[data-skin="new"] #view-announcements .announcement-item > p { margin: 8px 0 0; color: #b8c6d1; font-size: 12.5px; line-height: 1.55; }
html[data-skin="new"] #view-announcements .announcement-withdrawal-note { margin: 8px 0 0; border: 0; border-left: 2px solid #e3a33f; border-radius: 0; background: transparent; color: #e3a33f; font-size: 12px; padding: 2px 0 2px 12px; }
html[data-skin="new"] #view-announcements .announcement-withdrawal-note strong { display: block; color: #e3a33f; }
html[data-skin="new"] #view-announcements .announcement-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
html[data-skin="new"] #view-announcements .announcement-meta span { color: #b8c6d1; font-size: 11.5px; }
html[data-skin="new"] #view-announcements .announcement-meta strong { display: block; color: #8193a1; font-size: 10px; font-weight: 800; }
html[data-skin="new"] #view-announcements .announcement-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
html[data-skin="new"] #view-announcements .announcement-list { display: grid; gap: 10px; }
/* De drie uitlegstappen als één regel tekst, zoals de referentie. */
html[data-skin="new"] #view-announcements .announcement-route-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; border-block: 1px solid rgba(255, 255, 255, .06); background: transparent; padding: 12px 0; }
html[data-skin="new"] #view-announcements .announcement-route-guide article { display: flex; gap: 8px; border: 0; background: transparent; box-shadow: none; padding: 0; }
html[data-skin="new"] #view-announcements .announcement-route-guide article > span { color: #7fd3b4; font-weight: 800; font-size: 11.5px; }
html[data-skin="new"] #view-announcements .announcement-route-guide strong { color: #f1f5f8; font-size: 11.5px; }
html[data-skin="new"] #view-announcements .announcement-route-guide small { color: #9fb0bd; font-size: 11.5px; }
@media (max-width: 720px) {
html[data-skin="new"] #view-announcements .announcement-meta,
html[data-skin="new"] #view-announcements .announcement-route-guide { grid-template-columns: minmax(0, 1fr); }
}
/* Instellingen: titel en uitleg zoals de referentie ("Instellingen" + één regel),
klein boven de kaart; de knoppen staan in Modern onderaan de kaart. */
@media (min-width: 721px) {
html[data-skin="new"] .app-shell:has(#view-settings.is-active) #view-settings > .view-heading { display: block; margin: 0 0 12px; border: 0; background: transparent; padding: 0; }
}
html[data-skin="new"] #view-settings > .view-heading .section-label,
html[data-skin="new"] #view-settings > .view-heading .heading-actions { display: none; }
html[data-skin="new"] #view-settings > .view-heading h2 { margin: 0; color: #f1f5f8; font: 800 14px var(--path-sans); }
html[data-skin="new"] #view-settings > .view-heading p { margin: 4px 0 0; color: #9fb0bd; font-size: 11.5px; }
html[data-skin="new"] #view-customer-timesheet-admin > .view-heading p,
html[data-skin="new"] .new-klant-admin-uitleg { max-width: none; }
html[data-skin="new"] #view-customer-timesheet-admin > .view-heading > div { max-width: none; }
/* Voettekst: 26 sep in Modern verborgen (de referentie heeft er geen). 27 sep
teruggezet op verzoek van Remy-LeBeau ("bij Modern zie je die footer niet, bij
beheer en medewerkers als het goed is"): zelfde voettekst met versie als in
Klassiek, ook in Modern; de versie blijft daarnaast in het profielmenu. */
/* Profielmenu (referentie): onder de naam "Medewerker · tik voor een andere pop"
met een pijltje rechts (de avatarkiezer opent met een tik), en de testknop
Klassiek over de volle breedte. */
html[data-skin="new"] #profile-menu-role::after { content: " · tik voor een andere pop"; }
html[data-skin="new"] .profile-menu-person { position: relative; padding-right: 28px; }
html[data-skin="new"] .profile-menu-person::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #7fd3b4; font-size: 9px; }
html[data-skin="new"] .profile-menu-person[aria-expanded="true"]::after { content: "▴"; }
html[data-skin="new"] .profile-menu-testknoppen .appearance-switches { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: 100%; }
html[data-skin="new"] .profile-menu-testknoppen .appearance-switch { width: 100%; justify-content: center; }
/* ── "Niet afwijken" (Remy-LeBeau 26 sep): de laatste verschillen met
pilot/modern-referentie/modern-definitief.html. Alleen vier afwijkingen blijven
(rolschakelaar, e-mailstatus/bel/filters in de Backoffice, correctiedag uit de
tekst, één tik op Versturen na Bestand kiezen), zie R55. ─────────────────── */
/* Medewerkerkop: maandpil "September 2026 ▾" zonder pijlen, zoals de referentie. */
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control > #period-prev,
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control > #period-next { display: none; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control .month-picker-trigger::after { content: none; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-picker-fields::after { content: "▾"; margin-left: 4px; color: #7fd3b4; font-size: 9px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .period-control { padding: 0 12px; }
/* Backoffice: "‹ September 2026 ›" zonder ▾ tussen maand en jaar. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-control .month-picker-trigger::after { content: none; }
/* Telefoon (medewerker): de referentie heeft alleen logo, ↶ en de profielpil.
Uitloggen staat in het profielmenu, Berichten (met stip) in de onderbalk, en een
andere maand kies je op Maanden. */
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-uitloggen,
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-popover:has(#notification-button),
html[data-skin="new"] .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: none !important; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-quick-reset { border: 1px solid rgba(227, 163, 63, .45); color: #e3a33f; background: transparent; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .profile-menu-button { display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; min-height: 36px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; background: rgba(255, 255, 255, .035); padding: 3px 10px 3px 3px; }
html[data-skin="new"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-profile-caret { display: inline; color: #7fd3b4; font-size: 9px; }
}
/* Berichten: geen "Alles gelezen" en geen "Markeer als gelezen" per rij; een
bericht openklappen telt als gelezen, zoals in de referentie. */
html[data-skin="new"] #view-employee-announcements #berichten-alles-gelezen,
html[data-skin="new"] #view-employee-announcements .bericht-markeer { display: none !important; }
/* Profielmenu: precies de regels van de referentie. */
html[data-skin="new"] .profile-menu [data-profile-action="switch"],
html[data-skin="new"] .profile-menu [data-profile-action="install"] { display: none !important; }
/* Backoffice-hero: "Ingediend per dag · september" met de oplopende lijn onderin. */
html[data-skin="new"] .new-admin-hero-grafiek { position: relative; z-index: 1; width: calc(100% + 56px); margin: 6px -28px -26px; }
html[data-skin="new"] .new-admin-hero-grafiek small { display: block; margin: 0 28px 8px; color: #cfdbe5; font: 800 9.5px var(--path-sans); letter-spacing: .16em; text-transform: uppercase; }
html[data-skin="new"] .new-admin-hero-grafiek svg { display: block; width: 100%; height: 70px; }
@media (min-width: 1100px) {
html[data-skin="new"] .new-admin-overzicht > .new-admin-hero { flex-wrap: nowrap; }
html[data-skin="new"] .new-admin-overzicht > .new-admin-hero > .new-admin-hero-grafiek { margin-top: auto; }
}
/* Backoffice-hero met dezelfde bladerfoto als de medewerker-hero, zoals de
referentie: donkergroen vlak met een zachte bladtextuur. */
html[data-skin="new"] .new-admin-hero {
background:
linear-gradient(124deg, rgba(6, 22, 18, .9) 0%, rgba(8, 30, 24, .72) 46%, rgba(10, 34, 28, .55) 100%),
url("../pilot/assets/1919/bento-foliage-v2.png") center / cover no-repeat,
#0b2a22;
border-color: rgba(127, 211, 180, .14);
}
/* Mededelingen als één kaart, zoals de referentie: opsteller, de drie uitlegregels
en "Concepten & verzendhistorie" in hetzelfde vlak. Geen e-mailvinkje (de
standaard blijft: e-mail alleen aan wie dat aan heeft) en geen losse kop
"Mededelingen" boven de historie. Klantgroepen verschijnen onder de chip. */
@media (min-width: 721px) {
html[data-skin="new"] #view-announcements > .new-announcements { margin-bottom: 0; border-bottom: 0; border-radius: 24px 24px 0 0; }
html[data-skin="new"] #view-announcements > .announcement-route-guide { margin: 0; border: 1px solid rgba(255, 255, 255, .08); border-block: 0; background: #0f2a40; padding: 14px 22px; position: relative; }
html[data-skin="new"] #view-announcements > .announcement-route-guide::before,
html[data-skin="new"] #view-announcements > .announcement-route-guide::after { content: ""; position: absolute; left: 22px; right: 22px; height: 1px; background: rgba(255, 255, 255, .06); }
html[data-skin="new"] #view-announcements > .announcement-route-guide::before { top: 0; }
html[data-skin="new"] #view-announcements > .announcement-route-guide::after { bottom: 0; }
html[data-skin="new"] #view-announcements > .panel { margin-top: 0; border-top: 0; border-radius: 0 0 24px 24px; background: #0f2a40; }
}
/* Het e-mailvinkje bij publiceren staat in Modern weer in beeld, standaard aan zoals in
Klassiek (besluit Remy-LeBeau 29 sep). Verborgen mailde publiceren altijd. */
html[data-skin="new"] #view-announcements > .panel .panel-heading h3 { display: none; }
html[data-skin="new"] #view-announcements > .panel .panel-heading .section-label { color: #8fa3b4; }
html[data-skin="new"] .new-announcements-klantgroepen { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Uitlegregels als lopende tekst: "1 In de app — altijd zichtbaar …". */
html[data-skin="new"] #view-announcements .announcement-route-guide article { display: block; }
html[data-skin="new"] #view-announcements .announcement-route-guide article > span { display: inline; width: auto; height: auto; margin-right: 6px; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
html[data-skin="new"] #view-announcements .announcement-route-guide article > div,
html[data-skin="new"] #view-announcements .announcement-route-guide strong,
html[data-skin="new"] #view-announcements .announcement-route-guide small { display: inline; }
html[data-skin="new"] #view-announcements .announcement-route-guide small::before { content: " — "; }
html[data-skin="new"] #view-announcements .new-announcements-voor { align-items: flex-start; }
html[data-skin="new"] #view-announcements .new-announcements-voor > span { padding-top: 10px; }
/* Instellingen als één kaart zoals de referentie: "Instellingen" met uitleg
bovenin, dan de tabs, dan het onderdeel. Geen oranje/groene infoblokken (de
referentie heeft één regel uitleg) en geen "Voorbeeldgegevens herstellen". */
html[data-skin="new"] .app-shell:has(#view-settings.is-active) #view-settings > .view-heading { display: block; margin: 0; border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; border-radius: 24px 24px 0 0; background: #0f2a40; padding: 22px 21px 18px; }
html[data-skin="new"] #view-settings .settings-section-nav { border-radius: 0; background: #0f2a40; border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); }
html[data-skin="new"] #view-settings .settings-card { background: #0f2a40; border-top: 0; }
html[data-skin="new"] .new-settings-acties { background: #0f2a40; }
html[data-skin="new"] [data-new-settings="reset"] { display: none; }
html[data-skin="new"] #view-settings .settings-card .settings-warning,
html[data-skin="new"] #view-settings .settings-card .safe-domain-note { display: none; }
html[data-skin="new"] #view-settings .new-instelling-intro { margin: 0 0 6px; color: #9fb0bd; font-size: 11.5px; line-height: 1.5; }
/* Herinneringen: regels met titel, uitleg, "Wanneer? …" in amber en een pil
Aan/Uit; onderaan de planningsregel en Voorbeeldmelding maken; geen Opslaan. */
html[data-skin="new"] #settings-reminders > .email-template-heading,
html[data-skin="new"] #settings-reminders .reminder-choice-field,
html[data-skin="new"] #settings-reminders .reminder-fixed-moment,
html[data-skin="new"] #settings-reminders .check-row > input,
html[data-skin="new"] #settings-reminders #reminder-schedule-summary { display: none; }
html[data-skin="new"] #settings-reminders .reminder-rules { display: block; margin: 0; }
html[data-skin="new"] #settings-reminders .reminder-rule { display: flex; align-items: center; gap: 16px; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); border-radius: 0; background: transparent; box-shadow: none; padding: 14px 0; }
html[data-skin="new"] #settings-reminders .check-row { flex: 1 1 auto; margin: 0; padding: 0; cursor: default; }
html[data-skin="new"] #settings-reminders .check-row strong { display: block; color: #f1f5f8; font-size: 13.5px; font-weight: 800; }
html[data-skin="new"] #settings-reminders .check-row small { display: block; color: #9fb0bd; font-size: 11.5px; }
html[data-skin="new"] #settings-reminders .new-herinnering-wanneer { margin-top: 3px; color: #e3a33f !important; font-size: 11px !important; font-weight: 800; }
html[data-skin="new"] .new-herinnering-schakel { flex: 0 0 auto; min-width: 56px; min-height: 34px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #cfdbe5; cursor: pointer; font: 800 12.5px var(--path-sans); padding: 0 14px; }
html[data-skin="new"] .new-herinnering-schakel.is-aan { border-color: transparent; background: #4bb188; color: #06131f; }
html[data-skin="new"] #settings-reminders .reminder-schedule-footer { display: block; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); background: transparent; padding: 14px 0 0; }
html[data-skin="new"] #settings-reminders .new-herinnering-voet { margin: 0 0 12px; color: #7fd3b4; font-size: 11.5px; font-weight: 800; }
html[data-skin="new"] #settings-reminders #test-reminder-schedule { min-height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #eef3f6; font: 800 12.5px var(--path-sans); padding: 0 16px; }
html[data-skin="new"] #view-settings[data-sectie="settings-reminders"] .new-settings-acties { display: none; }
html[data-skin="new"] #view-settings > .view-heading p,
html[data-skin="new"] #view-settings .settings-card p.new-instelling-intro,
html[data-skin="new"] #view-settings .settings-card p.new-herinnering-voet { max-width: none; }
html[data-skin="new"] #view-settings .settings-card p.new-herinnering-voet { color: #7fd3b4; }
html[data-skin="new"] #view-settings[data-sectie="settings-reminders"] #settings-reminders { border-radius: 0 0 24px 24px; }
/* Organisatie en Facturatie zoals de referentie. */
html[data-skin="new"] #view-settings .settings-card > .email-template-heading h3 { font: 800 14px var(--path-sans); letter-spacing: 0; }
html[data-skin="new"] #settings-invoicing > .email-template-heading { display: none; }
html[data-skin="new"] #view-settings :is(#settings-organization, #settings-invoicing) .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
html[data-skin="new"] #view-settings :is(#settings-organization, #settings-invoicing) .form-grid > label { margin: 0; color: #cfdbe5; font-size: 11px; font-weight: 800; }
/* Organisatie: appnaam en e-mail over de volle breedte, dan vier velden. */
html[data-skin="new"] #settings-organization .form-grid > label:has(#setting-app-name) { order: 1; grid-column: 1 / -1; }
html[data-skin="new"] #settings-organization .form-grid > label:has(#setting-support-email) { order: 2; grid-column: 1 / -1; }
html[data-skin="new"] #settings-organization .form-grid > label:has(#setting-support-name) { order: 3; }
html[data-skin="new"] #settings-organization .form-grid > label:has(#setting-website) { order: 4; }
html[data-skin="new"] #settings-organization .form-grid > label:has(#setting-tagline) { order: 5; }
html[data-skin="new"] #settings-organization .form-grid > label:has(#setting-mail-signature) { order: 6; }
html[data-skin="new"] #settings-organization .form-grid > .new-kleur-veld { order: 7; display: flex; align-items: center; gap: 10px; }
html[data-skin="new"] #settings-organization .form-grid > .new-kleur-veld:has(#setting-brand-primary) { grid-column: 1 / span 1; }
html[data-skin="new"] #settings-organization .form-grid > .new-kleur-veld:has(#setting-brand-accent) { grid-column: 2 / span 3; }
html[data-skin="new"] #settings-organization .new-kleur-veld input[type="color"] { display: none; }
html[data-skin="new"] .new-kleur-rondjes { display: inline-flex; gap: 8px; }
html[data-skin="new"] .new-kleur { width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .12); border-radius: 50%; cursor: pointer; padding: 0; }
html[data-skin="new"] .new-kleur.is-actief { border-color: #eef3f6; box-shadow: 0 0 0 2px #4bb188; }
html[data-skin="new"] #settings-organization .form-grid > .brand-logo-setting { order: 9; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .03); padding: 14px 16px; }
html[data-skin="new"] #settings-organization .brand-logo-setting > input[type="file"] { display: none; }
html[data-skin="new"] #settings-organization .brand-logo-preview { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 0; }
html[data-skin="new"] #settings-organization .brand-logo-preview img { max-height: 36px; width: auto; margin-right: auto; border-radius: 6px; background: transparent; padding: 0; }
html[data-skin="new"] .new-logo-kies { display: inline-flex; align-items: center; min-height: 34px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #eef3f6; cursor: pointer; font: 800 12px var(--path-sans); padding: 0 14px; }
html[data-skin="new"] #settings-organization #reset-brand-logo { border: 0; background: transparent; color: #cfdbe5; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; padding: 0 4px; }
html[data-skin="new"] #settings-organization .form-grid > .leave-sick-toggle { order: 10; grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .03); padding: 14px 16px; cursor: pointer; }
html[data-skin="new"] #settings-organization .leave-sick-toggle-copy { flex: 1 1 auto; }
html[data-skin="new"] #settings-organization .leave-sick-toggle-copy strong { color: #f1f5f8; font-size: 13px; }
html[data-skin="new"] #settings-organization .leave-sick-toggle-copy small { color: #9fb0bd; font-size: 11.5px; font-weight: 400; }
html[data-skin="new"] #settings-organization .leave-sick-toggle .switch-track { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html[data-skin="new"] .new-schakel-tekst { display: inline-grid; min-width: 48px; min-height: 34px; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #cfdbe5; font: 800 12.5px var(--path-sans); padding: 0 14px; }
html[data-skin="new"] .new-schakel-tekst::after { content: "Uit"; }
html[data-skin="new"] .leave-sick-toggle:has(input:checked) .new-schakel-tekst { background: #4bb188; color: #06131f; }
html[data-skin="new"] .leave-sick-toggle:has(input:checked) .new-schakel-tekst::after { content: "Aan"; }
/* Facturatie: vier velden per rij, naamweergave en betalingstermijn als pillen,
crème voorbeeld van de factuurkop over de volle breedte. */
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-organization-name) { order: 1; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-company-name) { order: 2; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-kvk) { order: 3; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-vat) { order: 4; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-iban) { order: 5; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-address) { order: 6; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-postal-city) { order: 7; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-phone) { order: 8; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-invoice-email) { order: 9; grid-column: 1 / span 1; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-invoice-name-display) { order: 10; grid-column: 1 / -1; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-payment-term) { order: 11; grid-column: 1 / -1; }
html[data-skin="new"] #settings-invoicing .form-grid > .invoice-identity-preview { order: 12; grid-column: 1 / -1; }
html[data-skin="new"] .new-pillen-veld select,
html[data-skin="new"] .new-pillen-veld .standard-choice-picker { display: none !important; }
html[data-skin="new"] .new-pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
html[data-skin="new"] .new-pil { min-height: 34px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #cfdbe5; cursor: pointer; font: 800 12px var(--path-sans); padding: 0 14px; }
html[data-skin="new"] .new-pil.is-actief { border-color: rgba(75, 177, 136, .55); background: rgba(75, 177, 136, .14); color: #7fd3b4; }
html[data-skin="new"] #settings-invoicing .invoice-identity-preview { display: grid; gap: 3px; border: 0; border-radius: 16px; background: #f4f1e6; color: #102235; padding: 18px; }
html[data-skin="new"] #settings-invoicing .invoice-identity-preview > span:first-child { color: #6c7b89; font: 800 9.5px var(--path-sans); letter-spacing: .16em; text-transform: uppercase; }
html[data-skin="new"] #settings-invoicing .invoice-identity-preview strong { color: #102235; font: 400 20px var(--path-serif, Georgia, serif); }
html[data-skin="new"] #settings-invoicing .invoice-identity-preview small { display: block; color: #4a5b69 !important; font-size: 11.5px !important; }
html[data-skin="new"] .new-factuurkop-regels { display: grid; gap: 3px; }
@media (max-width: 900px) {
html[data-skin="new"] #view-settings :is(#settings-organization, #settings-invoicing) .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-skin="new"] #view-settings :is(#settings-organization, #settings-invoicing) .form-grid > :is(.brand-logo-setting, .leave-sick-toggle, .invoice-identity-preview, .new-pillen-veld, label:has(#setting-app-name), label:has(#setting-support-email)) { grid-column: 1 / -1; }
html[data-skin="new"] #settings-organization .form-grid > .new-kleur-veld:has(#setting-brand-accent) { grid-column: 2 / span 1; }
html[data-skin="new"] #settings-invoicing .form-grid > label:has(#setting-invoice-email) { grid-column: auto; }
}
@media (max-width: 560px) {
html[data-skin="new"] #view-settings :is(#settings-organization, #settings-invoicing) .form-grid { grid-template-columns: minmax(0, 1fr); }
html[data-skin="new"] #view-settings :is(#settings-organization, #settings-invoicing) .form-grid > * { grid-column: 1 / -1 !important; }
}
html[data-skin="new"] #settings-invoicing .invoice-identity-preview .new-factuurkop-regels,
html[data-skin="new"] #settings-invoicing .invoice-identity-preview .new-factuurkop-regels small { color: #4a5b69 !important; font: 400 11.5px var(--path-sans); letter-spacing: 0; text-transform: none; }
html[data-skin="new"] #settings-invoicing .invoice-identity-preview > span:first-child span { color: #6c7b89; }
html[data-skin="new"] #view-settings .settings-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea) { font-weight: 500; font-size: 13px; }
/* Veiligheid: een lijst "✓ Titel — uitleg." zoals de referentie; geen Opslaan. */
html[data-skin="new"] #settings-safety > h3 { display: none; }
html[data-skin="new"] #settings-safety .settings-rule-list { display: block; margin: 0; padding: 0; list-style: none; }
html[data-skin="new"] #settings-safety .settings-rule-list li { display: block; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); border-radius: 0; background: transparent; box-shadow: none; color: #dfe7ec; font-size: 12.5px; padding: 11px 0; }
html[data-skin="new"] #settings-safety .settings-rule-list li::before { content: "✓"; margin-right: 8px; color: #7fd3b4; font-weight: 800; }
html[data-skin="new"] #settings-safety .settings-rule-list li strong,
html[data-skin="new"] #settings-safety .settings-rule-list li small { display: inline; color: #dfe7ec !important; font-size: 12.5px !important; font-weight: 400; }
html[data-skin="new"] #settings-safety .settings-rule-list li small { text-transform: lowercase; }
html[data-skin="new"] #settings-safety .settings-rule-list li small::before { content: " — "; }
html[data-skin="new"] #settings-safety .settings-rule-list li small::after { content: "."; }
html[data-skin="new"] #view-settings[data-sectie="settings-safety"] .new-settings-acties { display: none; }
html[data-skin="new"] #view-settings[data-sectie="settings-safety"] #settings-safety { border-radius: 0 0 24px 24px; padding-top: 8px; }
/* Auditlog (Instellingen) zoals de referentie: één regel uitleg met rechts de teller
en Vernieuwen, Wie en Wat als chiprijen, rijen "23 sep 19:19 · naam · actie ·
waarover" zonder kolomkoppen, geen Opslaan. De paginering (15 per pagina) blijft:
die vroeg Remy-LeBeau zelf voor lange lijsten (1.0.114). */
html[data-skin="new"] #settings-audit { position: relative; }
html[data-skin="new"] #settings-audit > .email-template-heading > div,
html[data-skin="new"] #settings-audit > .settings-template-intro { display: none; }
html[data-skin="new"] #settings-audit > .email-template-heading { position: absolute; top: 20px; right: 130px; margin: 0; }
html[data-skin="new"] #settings-audit .new-audit-intro { min-height: 38px; display: flex; align-items: center; margin: 0 0 8px; padding-right: 260px; }
html[data-skin="new"] #settings-audit .audit-log-filters { display: grid; gap: 10px; margin: 0 0 10px; }
html[data-skin="new"] #settings-audit .audit-log-filters > label { display: flex; align-items: center; gap: 10px; color: #cfdbe5; font-size: 11.5px; font-weight: 800; }
html[data-skin="new"] #settings-audit .audit-log-filters .new-pillen { margin: 0; }
html[data-skin="new"] #settings-audit #audit-log-refresh { position: absolute; top: 20px; right: 21px; min-height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #eef3f6; font: 800 12.5px var(--path-sans); padding: 0 16px; }
html[data-skin="new"] #settings-audit .audit-log-table thead { display: none; }
html[data-skin="new"] #settings-audit .audit-log-table,
html[data-skin="new"] #settings-audit .audit-log-table tbody { display: block; width: 100%; }
html[data-skin="new"] #settings-audit .audit-log-table tbody tr { display: grid; grid-template-columns: 100px 160px auto minmax(0, 1fr); align-items: center; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .06); padding: 10px 0; }
html[data-skin="new"] #settings-audit .audit-log-table tbody tr:hover { background: transparent; }
html[data-skin="new"] #settings-audit .audit-log-table td { border: 0; padding: 0; white-space: normal; font-size: 12px; }
html[data-skin="new"] #settings-audit td.audit-log-tijd { color: #8193a1; font-size: 11px; }
html[data-skin="new"] #settings-audit td.audit-log-actor strong { color: #f1f5f8; font-size: 12.5px; }
html[data-skin="new"] #settings-audit td.audit-log-actor small { display: none; }
html[data-skin="new"] #settings-audit td.audit-log-wat { justify-self: start; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #eef3f6; font-size: 11px; font-weight: 800; padding: 4px 9px; }
html[data-skin="new"] #settings-audit td.audit-log-waarover { color: #b8c6d1; }
html[data-skin="new"] #view-settings[data-sectie="settings-audit"] .new-settings-acties { display: none; }
html[data-skin="new"] #view-settings[data-sectie="settings-audit"] #settings-audit { border-radius: 0 0 24px 24px; }
@media (max-width: 720px) {
html[data-skin="new"] #settings-audit > .email-template-heading,
html[data-skin="new"] #settings-audit #audit-log-refresh { position: static; }
html[data-skin="new"] #settings-audit .new-audit-intro { padding-right: 0; }
html[data-skin="new"] #settings-audit .audit-log-filters > label { flex-wrap: wrap; }
}
html[data-skin="new"] #settings-safety .settings-rule-list { max-width: none; width: 100%; }
html[data-skin="new"] #settings-audit .audit-log-filters { justify-items: start; justify-content: start; align-items: start; }
html[data-skin="new"] #settings-audit .audit-log-filters > label { flex-direction: row; justify-content: flex-start; width: 100%; text-align: left; }
/* Systeem zoals de referentie: uitleg met rechts Vernieuwen, donker logblok in een
vast lettertype, onderaan "Demo herstellen". Geen Opslaan. */
html[data-skin="new"] #settings-system { position: relative; }
html[data-skin="new"] #settings-system > .email-template-heading,
html[data-skin="new"] #settings-system > .settings-template-intro { display: none; }
html[data-skin="new"] #settings-system .new-systeem-intro { min-height: 38px; display: flex; align-items: center; padding-right: 150px; }
html[data-skin="new"] #settings-system .server-log-actions { position: absolute; top: 20px; right: 21px; margin: 0; }
html[data-skin="new"] #settings-system #server-log-refresh { min-height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #eef3f6; font: 800 12.5px var(--path-sans); padding: 0 16px; }
html[data-skin="new"] #settings-system .server-log-list,
html[data-skin="new"] #settings-system #server-log-empty { margin: 6px 0 0; border: 0; border-radius: 12px; background: #081624; color: #cfdbe5; font: 400 11.5px/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 12px 16px; }
html[data-skin="new"] #settings-system #server-log-empty strong { font-weight: 400; }
html[data-skin="new"] .new-systeem-demo { display: flex; align-items: center; gap: 16px; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 14px; }
html[data-skin="new"] .new-systeem-demo > span { flex: 1 1 auto; }
html[data-skin="new"] .new-systeem-demo strong { display: block; color: #f1f5f8; font-size: 13px; }
html[data-skin="new"] .new-systeem-demo small { display: block; color: #9fb0bd; font-size: 11.5px; }
html[data-skin="new"] .new-systeem-herstel { min-height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #eef3f6; cursor: pointer; font: 800 12.5px var(--path-sans); padding: 0 16px; }
html[data-skin="new"] #view-settings[data-sectie="settings-system"] .new-settings-acties { display: none; }
html[data-skin="new"] #view-settings[data-sectie="settings-system"] #settings-system { border-radius: 0 0 24px 24px; }
@media (max-width: 720px) {
html[data-skin="new"] #settings-system .server-log-actions { position: static; margin-top: 10px; }
html[data-skin="new"] #settings-system .new-systeem-intro { padding-right: 0; }
}
html[data-skin="new"] #settings-system .server-log-list:empty { display: none; }
/* Mailroutes zoals de referentie: bovenaan "Mailroute (TEST)" met de stand als
pil, afzender en verzendmodus naast elkaar, de broker als één compacte kaart,
vaste ontvangers als regels (naam, adres, soort, Verwijderen), Opslaan direct
daaronder, acceptatiemails als pillen en de verzendhistorie als regels. De
standaardteksten per ontvanger staan in Modern alleen bij Teksten. */
html[data-skin="new"] #settings-routing > .email-template-heading,
html[data-skin="new"] #settings-routing .recipient-settings-heading h4:not(.new-mail-kop),
html[data-skin="new"] #settings-routing :is(.mail-acceptance-console, .mail-delivery-history) .section-label,
html[data-skin="new"] #settings-routing details.mail-standaardtekst,
html[data-skin="new"] #settings-routing .mail-broker-uitleg,
html[data-skin="new"] #settings-routing #connect-gmail,
html[data-skin="new"] #settings-routing .mail-acceptance-controls,
html[data-skin="new"] #settings-routing .mail-acceptance-copy,
html[data-skin="new"] #settings-routing #mail-delivery-history-summary,
html[data-skin="new"] #settings-routing .mail-delivery-history-controls,
html[data-skin="new"] #settings-routing #refresh-mail-delivery-history,
html[data-skin="new"] #settings-routing .mail-delivery-history-meta,
html[data-skin="new"] #settings-routing .mail-delivery-history-main > small:not(.mail-delivery-error),
html[data-skin="new"] #settings-routing .mail-delivery-history-state > small,
html[data-skin="new"] #view-settings[data-sectie="settings-routing"] .new-settings-acties { display: none; }
html[data-skin="new"] #view-settings[data-sectie="settings-routing"] #settings-routing { border-radius: 0 0 24px 24px; }
html[data-skin="new"] .new-mailroute-kop { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); margin: 0 0 14px; padding: 0 0 14px; }
html[data-skin="new"] .new-mailroute-kop > span { flex: 1 1 auto; min-width: 0; }
html[data-skin="new"] .new-mailroute-kop strong { display: block; color: #f1f5f8; font-size: 13px; }
html[data-skin="new"] .new-mailroute-kop small { display: block; color: #9fb0bd; font-size: 11.5px; }
html[data-skin="new"] .new-mailroute-schakel { flex: 0 0 auto; min-height: 36px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #cfdbe5; cursor: pointer; font: 800 12.5px var(--path-sans); padding: 0 16px; }
html[data-skin="new"] .new-mailroute-schakel:disabled { cursor: default; }
html[data-skin="new"] .new-mailroute-schakel[data-stand="gepauzeerd"] { background: rgba(227, 163, 63, .14); color: #e3a33f; }
html[data-skin="new"] #settings-routing > .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); margin: 0 0 14px; padding: 0 0 14px; }
html[data-skin="new"] #settings-routing > .form-grid > label { margin: 0; color: #cfdbe5; font-size: 11px; font-weight: 800; }
html[data-skin="new"] #settings-routing #setting-send-mode { appearance: none; border-color: rgba(227, 163, 63, .5); background: rgba(227, 163, 63, .08); color: #e3a33f; font-weight: 800; opacity: 1; }
html[data-skin="new"] #settings-routing .recipient-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
html[data-skin="new"] #settings-routing .recipient-settings-heading .section-label { color: #8193a1; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
html[data-skin="new"] #settings-routing #add-mail-recipient { min-height: 36px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: #eef3f6; font: 800 12.5px var(--path-sans); padding: 0 16px; }
html[data-skin="new"] #settings-routing .mail-recipient-settings-list { display: grid; gap: 0; margin: 0; }
/* Broker: één kaart, uitleg op één regel, pil rechts. */
html[data-skin="new"] #mail-broker-route-info { border-bottom: 1px solid rgba(255, 255, 255, .06); margin-bottom: 14px; padding-bottom: 14px; }
html[data-skin="new"] #mail-broker-route-info .mail-recipient-setting { display: flex; align-items: center; gap: 16px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .03); padding: 12px 14px; }
html[data-skin="new"] #mail-broker-route-info .mail-recipient-setting > div:first-child { flex: 1 1 auto; min-width: 0; }
html[data-skin="new"] #settings-routing .mail-recipient-setting strong { display: block; color: #f1f5f8; font-size: 13px; }
html[data-skin="new"] #mail-broker-route-info .mail-recipient-setting small { display: block; color: #9fb0bd; font-size: 11.5px; }
html[data-skin="new"] #mail-broker-route-info .status-pill { flex: 0 0 auto; border: 0; background: rgba(255, 255, 255, .08); color: #cfdbe5; font-size: 10.5px; font-weight: 800; padding: 4px 9px; }
/* Vaste ontvangers: één regel per ontvanger, geen kaart. */
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting { display: flex; align-items: center; gap: 10px; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); border-radius: 0; background: transparent; padding: 12px 0; }
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting.is-inactive { opacity: .6; }
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting > [data-new-ontvanger-bewerk] { flex: 1 1 auto; min-width: 0; cursor: pointer; }
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting > [data-new-ontvanger-bewerk] > small,
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting > .status-pill,
html[data-skin="new"] #mail-recipient-settings-list [data-edit-mail-recipient],
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting:not(.is-ingebouwd) [data-toggle-mail-recipient] { display: none; }
html[data-skin="new"] .new-ontvanger-rechts { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
html[data-skin="new"] .new-ontvanger-mail { color: #9fb0bd; font-size: 11.5px; overflow-wrap: anywhere; }
html[data-skin="new"] .new-ontvanger-soort { border-radius: 999px; background: rgba(255, 255, 255, .08); color: #eef3f6; font-size: 10.5px; font-weight: 800; padding: 3px 8px; }
html[data-skin="new"] .new-ontvanger-soort.is-uit { background: rgba(227, 163, 63, .14); color: #e3a33f; }
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting > div:last-child { display: flex; gap: 8px; }
html[data-skin="new"] #mail-recipient-settings-list :is([data-delete-mail-recipient], [data-toggle-mail-recipient]) { border: 0; background: transparent; color: #f08f8f; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
html[data-skin="new"] .new-mail-opslaan { border-top: 1px solid rgba(255, 255, 255, .06); padding: 12px 0 16px; }
/* Acceptatiemails: kop, groene samenvatting, uitleg, scenario's als pillen. */
html[data-skin="new"] #settings-routing .mail-acceptance-console { border: 0; border-top: 1px solid rgba(255, 255, 255, .06); border-radius: 0; background: transparent; margin: 0; padding: 16px 0 14px; }
html[data-skin="new"] #settings-routing .new-mail-kop { margin: 0; color: #f1f5f8; font: 800 13px var(--path-sans); }
html[data-skin="new"] #settings-routing #mail-acceptance-summary { margin: 0 0 4px; color: #7fd3b4; font-size: 12px; font-weight: 800; }
html[data-skin="new"] #settings-routing .new-mail-uitleg { margin: 0 0 10px; color: #9fb0bd; font-size: 11.5px; }
html[data-skin="new"] #settings-routing .mail-acceptance-scenarios { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-skin="new"] #settings-routing .mail-acceptance-scenario { display: contents; }
html[data-skin="new"] #settings-routing [data-mail-acceptance-scenario] { min-height: 38px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .04); color: transparent; cursor: pointer; font-size: 0; padding: 0 16px; }
html[data-skin="new"] #settings-routing [data-mail-acceptance-scenario]::before { content: attr(data-new-pil-label); color: #cfdbe5; font: 800 12.5px var(--path-sans); }
html[data-skin="new"] #settings-routing [data-mail-acceptance-scenario]:disabled { cursor: not-allowed; opacity: .55; }
/* Verzendhistorie: tijd, onderwerp, ontvanger, status op één regel. */
html[data-skin="new"] #settings-routing .mail-delivery-history { border-top: 1px solid rgba(255, 255, 255, .06); margin: 0; padding-top: 16px; }
html[data-skin="new"] #settings-routing .mail-delivery-history-list { display: grid; gap: 0; margin-top: 8px; }
html[data-skin="new"] #settings-routing .mail-delivery-history-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); border-radius: 0; background: transparent; padding: 10px 0; }
html[data-skin="new"] .new-mail-tijd { color: #8193a1; font-size: 11px; white-space: nowrap; }
html[data-skin="new"] #settings-routing .mail-delivery-history-main strong { color: #f1f5f8; font-size: 12.5px; }
html[data-skin="new"] .new-mail-ontvanger { color: #9fb0bd; font-size: 11.5px; overflow-wrap: anywhere; text-align: right; }
html[data-skin="new"] #settings-routing .mail-delivery-history-state { display: flex; align-items: center; gap: 8px; }
html[data-skin="new"] #settings-routing .mail-delivery-history-state .status-pill { border: 0; background: transparent; font-size: 11px; font-weight: 800; padding: 0; }
html[data-skin="new"] #settings-routing .mail-delivery-pagination { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
html[data-skin="new"] #settings-routing .mail-delivery-pagination[hidden] { display: none; }
@media (max-width: 720px) {
html[data-skin="new"] #settings-routing > .form-grid { grid-template-columns: minmax(0, 1fr); }
html[data-skin="new"] #mail-broker-route-info .mail-recipient-setting { flex-wrap: wrap; }
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting { flex-wrap: wrap; }
html[data-skin="new"] #mail-recipient-settings-list .mail-recipient-setting > [data-new-ontvanger-bewerk] { flex-basis: 100%; }
html[data-skin="new"] .new-ontvanger-rechts { justify-content: flex-start; }
html[data-skin="new"] #settings-routing .mail-delivery-history-item { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
html[data-skin="new"] .new-mail-ontvanger { text-align: left; }
html[data-skin="new"] .new-mailroute-kop { flex-wrap: wrap; }
}
/* Verzendmodus is een vaste stand, geen keuze: in Modern een amberkleurig veld
zoals de referentie, zonder uitklappijl. */
html[data-skin="new"] #settings-routing #setting-send-mode-trigger { width: 100%; min-height: 42px; border: 1px solid rgba(227, 163, 63, .5); border-radius: 12px; background: rgba(227, 163, 63, .08); color: #e3a33f; cursor: default; font: 800 12.5px var(--path-sans); opacity: 1; padding: 0 14px; text-align: left; }
html[data-skin="new"] #settings-routing #setting-send-mode-trigger .reminder-choice-value { color: #e3a33f; font: inherit; }
html[data-skin="new"] #settings-routing #setting-send-mode-trigger > span[aria-hidden="true"] { display: none; }
/* Teksten zoals de referentie: één regel uitleg, dan de twee klanturenstaatberichten
onder elkaar (label "Klanturenstaat · … · …"), per soort ontvanger een compacte
kaart met onderwerp, tekst en één hulpregel, en per medewerker een kiesbare rij
met daaronder "Eigen tekst voor …". */
html[data-skin="new"] #settings-texts > .email-template-heading:first-child,
html[data-skin="new"] #settings-texts .customer-timesheet-template-card h4,
html[data-skin="new"] #settings-texts .customer-timesheet-template-card > small,
html[data-skin="new"] #settings-texts > .email-template-heading h4,
html[data-skin="new"] #settings-texts > .settings-template-intro:not(:nth-of-type(1)),
html[data-skin="new"] #settings-texts .mail-channel-template > .form-help,
html[data-skin="new"] #settings-texts + .settings-card > .email-template-heading :is(h3, .status-pill),
html[data-skin="new"] #mail-template-list .template-subject > small,
html[data-skin="new"] #mail-template-list [data-edit-routing] { display: none; }
html[data-skin="new"] #settings-texts .section-label,
html[data-skin="new"] #settings-texts + .settings-card .section-label { display: block; margin: 0 0 8px; color: #8193a1; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
html[data-skin="new"] #settings-texts > .settings-template-intro { margin: 0 0 12px; color: #9fb0bd; font-size: 11.5px; }
html[data-skin="new"] #settings-texts .customer-timesheet-template-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; }
html[data-skin="new"] #settings-texts .customer-timesheet-template-card { display: grid; gap: 8px; border: 0; border-radius: 0; background: transparent; padding: 0; }
html[data-skin="new"] #settings-texts .customer-timesheet-template-card label { display: grid; gap: 6px; margin: 0; color: #cfdbe5; font-size: 11px; font-weight: 800; }
html[data-skin="new"] #settings-texts .customer-timesheet-template-card textarea { height: 44px; min-height: 44px; resize: vertical; }
html[data-skin="new"] #settings-texts > .email-template-heading { display: block; border-top: 1px solid rgba(255, 255, 255, .06); margin: 16px 0 0; padding: 14px 0 0; }
html[data-skin="new"] #settings-texts .mail-standaardtekst-lijst { display: grid; gap: 10px; }
html[data-skin="new"] #settings-texts .mail-channel-template { display: grid; gap: 6px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .03); padding: 10px 12px; }
html[data-skin="new"] #settings-texts .mail-channel-template > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
html[data-skin="new"] #settings-texts .mail-channel-template > div:first-child strong { color: #f1f5f8; font-size: 12.5px; }
html[data-skin="new"] #settings-texts .mail-channel-template > div:first-child small { color: #8193a1; font-size: 10px; font-weight: 800; }
html[data-skin="new"] #settings-texts .mail-channel-template > div:first-child small::before { content: "· "; }
html[data-skin="new"] #settings-texts .mail-channel-template label.route-template { display: block; margin: 0; font-size: 0; }
html[data-skin="new"] #view-settings :is(#settings-texts, #settings-texts + .settings-card) :is(input, textarea) { font-size: 12.5px; }
html[data-skin="new"] #settings-texts .mail-channel-template textarea { height: 66px; min-height: 66px; resize: vertical; }
html[data-skin="new"] #settings-texts .new-kanaal-hulp { margin: 0; color: #8193a1; font-size: 10.5px; }
html[data-skin="new"] #settings-texts [data-mail-channel-reset] { justify-self: start; border: 0; background: transparent; color: #7fd3b4; font-size: 11.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
/* Per medewerker: kiesbare rijen; de gekozen rij is mint, zijn tekst staat eronder. */
html[data-skin="new"] #settings-texts + .settings-card { border-top: 1px solid rgba(255, 255, 255, .06); }
html[data-skin="new"] #settings-texts + .settings-card > .email-template-heading { display: block; margin: 0 0 4px; }
html[data-skin="new"] #mail-template-list { display: grid; gap: 8px; }
html[data-skin="new"] #mail-template-list .template-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .03); cursor: pointer; padding: 10px 12px; }
html[data-skin="new"] #mail-template-list .template-item.is-gekozen { border-color: rgba(75, 177, 136, .45); background: rgba(75, 177, 136, .12); }
html[data-skin="new"] #mail-template-list .template-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-skin="new"] #mail-template-list .mini-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #eef3f6; font-size: 10.5px; font-weight: 800; }
html[data-skin="new"] #mail-template-list .template-person strong { display: block; color: #f1f5f8; font-size: 12.5px; }
html[data-skin="new"] #mail-template-list .template-person small { display: block; color: #8193a1; font-size: 10.5px; overflow-wrap: anywhere; }
html[data-skin="new"] #mail-template-list .template-subject strong { color: #eef3f6; font-size: 11.5px; }
html[data-skin="new"] #mail-template-list .template-item.is-gekozen .template-subject strong { color: #7fd3b4; }
html[data-skin="new"] .new-eigen-tekst { display: grid; gap: 6px; margin-top: 12px; }
html[data-skin="new"] .new-eigen-tekst:empty { display: none; }
html[data-skin="new"] .new-eigen-tekst label { color: #cfdbe5; font-size: 11px; font-weight: 800; }
html[data-skin="new"] .new-eigen-tekst textarea { min-height: 64px; resize: vertical; }
html[data-skin="new"] .new-eigen-tekst-stand { margin: 0; color: #7fd3b4; font-size: 11.5px; font-weight: 800; }
@media (max-width: 720px) {
html[data-skin="new"] #mail-template-list .template-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
html[data-skin="new"] #view-settings :is(#settings-texts, #settings-texts + .settings-card) .section-label { color: #8193a1; }
html[data-skin="new"] #view-settings #settings-texts :is(.settings-template-intro, .new-kanaal-hulp) { max-width: none; }
html[data-skin="new"] #view-settings #settings-texts .mail-channel-template input { min-height: 36px; padding: 0 12px; }
html[data-skin="new"] #view-settings #settings-texts .mail-channel-template textarea { padding: 10px 12px; line-height: 1.5; }
html[data-skin="new"] #view-settings .new-eigen-tekst textarea { font: 400 12.5px/1.5 var(--path-sans); padding: 10px 12px; }
html[data-skin="new"] #view-settings #settings-routing :is(#mail-acceptance-summary, .new-mail-uitleg) { max-width: none; }
/* Een algemene max-width (505px) op li's maakte de lijnen half zo breed als de referentie. */
html[data-skin="new"] #settings-safety .settings-rule-list li { max-width: none; font-size: 12px; }
html[data-skin="new"] #settings-safety .settings-rule-list li small { font-size: 12px !important; }
@media (max-width: 720px) {
html[data-skin="new"] #view-settings #settings-routing :is(.recipient-settings-heading, .recipient-settings-heading > div, .new-mail-kop) { flex-wrap: wrap; justify-content: flex-start; text-align: left; }
}
/* Telefoon: kleurrondjes bleven door de algemene minimale knophoogte ovaal, en de
auditregels stonden door de mobiele tabelopmaak in een vreemde volgorde. */
html[data-skin="new"] #view-settings .new-kleur { flex: 0 0 auto; width: 30px; height: 30px; min-height: 0; min-width: 0; aspect-ratio: 1; }
html[data-skin="new"] .new-logo-kies { white-space: nowrap; }
@media (max-width: 720px) {
html[data-skin="new"] #settings-audit .audit-log-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
html[data-skin="new"] #settings-audit td.audit-log-actor { order: 1; }
html[data-skin="new"] #settings-audit td.audit-log-tijd { order: 2; justify-self: end; }
html[data-skin="new"] #settings-audit td.audit-log-wat { order: 3; grid-column: 1 / -1; }
html[data-skin="new"] #settings-audit td.audit-log-waarover { order: 4; grid-column: 1 / -1; }
html[data-skin="new"] #settings-audit .audit-log-table td::before { content: none; }
}
/* Voorkeuren zoals de referentie: elke voorkeur een eigen kaartje, keuzes als
pillen, vinkjes als groene vakjes rechts. */
html[data-skin="new"] #modal .preference-list { display: grid; gap: 14px; }
html[data-skin="new"] #modal .preference-row { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .02); padding: 12px 14px; }
html[data-skin="new"] #modal .preference-row[hidden] { display: none; }
html[data-skin="new"] #modal .preference-row > span:first-child { flex: 1 1 auto; min-width: 0; }
html[data-skin="new"] #modal .preference-row strong { display: block; color: #f1f5f8; font-size: 12.5px; }
html[data-skin="new"] #modal .preference-row small { display: block; color: #9fb0bd; font-size: 11.5px; }
html[data-skin="new"] #modal .preference-row .new-pillen { flex: 0 0 auto; flex-wrap: nowrap; margin: 0; }
html[data-skin="new"] #modal .preference-row .new-pil:disabled { cursor: default; }
html[data-skin="new"] #modal .preference-row .new-pil:disabled:not(.is-actief) { opacity: .55; }
html[data-skin="new"] #modal .preference-row input[type="checkbox"] { flex: 0 0 auto; appearance: none; display: grid; width: 22px; height: 22px; min-height: 0; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; background: transparent; cursor: pointer; margin: 0; }
html[data-skin="new"] #modal .preference-row input[type="checkbox"]:checked { border-color: #4bb188; background: #4bb188; }
html[data-skin="new"] #modal .preference-row input[type="checkbox"]:checked::after { content: "✓"; color: #06131f; font-size: 13px; font-weight: 800; line-height: 1; }
html[data-skin="new"] #modal .preference-row input[type="checkbox"]:focus-visible { outline: 2px solid #7fd3b4; outline-offset: 2px; }
@media (max-width: 560px) {
html[data-skin="new"] #modal .preference-row:has(.new-pillen) { flex-wrap: wrap; }
}
html[data-skin="new"] #modal .modal-summary:has(> .preference-list) { border: 0; background: transparent; box-shadow: none; padding: 0; }
html[data-skin="new"] #modal:has(.preference-list) #modal-confirm { border-color: transparent; background: #4bb188; color: #06131f; box-shadow: 0 8px 24px rgba(75, 177, 136, .28); }
/* Hulp & contact zoals de referentie: mint label bovenin, het gesprek zo hoog als
de inhoud, en alle veelgestelde vragen in twee kolommen zonder eigen scrollbalk;
Contact opnemen is één van de tegels, licht mint. */
html[data-skin="new"] .help-panel { grid-template-rows: auto auto minmax(0, auto) auto; background: #0f2436; border-color: rgba(255, 255, 255, .1); }
html[data-skin="new"] .help-panel header small { color: #7fd3b4; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
html[data-skin="new"] .help-panel header strong { font-size: 14px; }
html[data-skin="new"] .help-messages { max-height: 220px; overflow-y: auto; }
html[data-skin="new"] .help-faq { background: transparent; border-top-color: rgba(255, 255, 255, .08); padding: 14px 18px 18px; }
html[data-skin="new"] .help-faq-heading strong { color: #f1f5f8; font-size: 12.5px; }
html[data-skin="new"] .help-faq-heading small { color: #8193a1; font-size: 10.5px; }
html[data-skin="new"] .help-suggestions { max-height: none; overflow: visible; gap: 8px; margin-top: 10px; }
html[data-skin="new"] .help-suggestions button { min-height: 40px; border-color: rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .04); color: #eef3f6; font-size: 12px; font-weight: 800; padding: 8px 12px; }
html[data-skin="new"] .help-suggestions button:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .09); }
html[data-skin="new"] .help-suggestions [data-help-topic="contact"] { grid-column: auto; border-color: rgba(75, 177, 136, .3); background: rgba(75, 177, 136, .14); color: #eef3f6; font-weight: 800; }
@media (max-width: 720px) {
html[data-skin="new"] .help-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Smalle telefoon (360px): de logorij brak niet af en liep 11px buiten beeld
(MOB-H-030). Voorbeeld, Logo kiezen en Standaardlogo gebruiken mogen onder
elkaar vallen. */
html[data-skin="new"] #settings-organization .brand-logo-preview { flex-wrap: wrap; min-width: 0; }
html[data-skin="new"] #settings-organization #reset-brand-logo { white-space: normal; text-align: left; }
/* Telefoon (referentie op 412px, 26 sep): in "Stap voor stap" en "Andere maanden"
springen label, rijen en scheidingslijnen in; bij Andere maanden staat het icoon
boven de titel en staan de knoppen rechts, ook de correctieregel
"Vr 28 aug · 0 8 9 · 9,0" met "Correctie indienen" eronder. */
@media (max-width: 720px) {
html[data-skin="new"] .new-bento-steps > .section-label { padding: 17px 37px 13px; }
html[data-skin="new"] .new-bento-steps li { margin: 0 21px; padding: 13px 16px; }
html[data-skin="new"] .new-andere-maanden { margin: 0 21px; }
html[data-skin="new"] .new-andere-maanden > .section-label { padding: 17px 16px 13px; padding-inline: 16px; }
html[data-skin="new"] .new-andere-rij { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 16px; }
html[data-skin="new"] .new-andere-icoon { align-self: flex-start; }
html[data-skin="new"] .new-andere-tekst { flex: 0 0 auto; }
html[data-skin="new"] .new-andere-acties { justify-content: flex-end; }
html[data-skin="new"] .new-andere-rij.is-correctie .new-andere-acties .new-andere-knop { margin-left: auto; }
html[data-skin="new"] .new-andere-rij[data-new-andere-correctie] .new-andere-acties { display: grid; grid-template-columns: auto auto auto; justify-content: end; align-items: center; gap: 10px; }
html[data-skin="new"] .new-andere-rij[data-new-andere-correctie] .new-andere-acties .new-andere-knop { grid-column: 1 / -1; justify-self: end; }
}
/* Berichten en Maanden zoals de referentie op de telefoon (27 sep): de datum
staat klein direct achter de titel, de hele tekst staat eronder (geen
afkappen, geen uitklappijl); de uitklap toont in Modern alleen nog een
intrekking. Bij Maanden staat de stand als pil rechts naast de maandnaam en
de knop eronder. */
html[data-skin="new"] #view-employee-announcements .bericht-kop { grid-template-columns: 10px minmax(0, max-content) max-content minmax(0, 1fr); column-gap: 10px; }
html[data-skin="new"] #view-employee-announcements .bericht-chevron { display: none; }
html[data-skin="new"] #view-employee-announcements .bericht-kop .bericht-snippet,
html[data-skin="new"] #view-employee-announcements .employee-announcement-card.is-open .bericht-kop .bericht-snippet { display: block; grid-column: 2 / 5; overflow: visible; white-space: normal; text-overflow: clip; }
html[data-skin="new"] #view-employee-announcements .bericht-inhoud > p,
html[data-skin="new"] #view-employee-announcements .bericht-inhoud > footer { display: none; }
html[data-skin="new"] #view-employee-announcements .bericht-inhoud:not(:has(.announcement-withdrawal-note)) { display: none; }
html[data-skin="new"] .new-maanden-lopend-kop { flex-wrap: nowrap; align-items: flex-start; }
html[data-skin="new"] .new-maanden-lopend-kop > .status-pill { flex: 0 0 auto; margin-top: 4px; font-size: 11px; }
html[data-skin="new"] .new-maanden-lopend > .new-maand-acties { justify-content: flex-start; }
/* Maanden (referentie): elke standpil begint met een stip ("• Uren open"); op de
telefoon staat bij Eerdere maanden de pil rechts naast de maandnaam en de actie
eronder, links. */
html[data-skin="new"] :is(.new-maanden-lopend, .new-maanden-eerder) .status-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
@media (max-width: 720px) {
html[data-skin="new"] .new-maand-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 12px; }
html[data-skin="new"] .new-maand-kop > .new-maand-tekst { grid-column: 1; grid-row: 1; }
html[data-skin="new"] .new-maand-kop > .new-maand-acties { display: contents; }
html[data-skin="new"] .new-maand-kop > .new-maand-acties > .status-pill { grid-column: 2; grid-row: 1; margin-top: 6px; }
html[data-skin="new"] .new-maand-kop > .new-maand-acties > :not(.status-pill) { grid-column: 1 / -1; justify-self: start; }
}
/* Maanden-kop zoals Berichten en de referentie: geen scheidingslijn eronder. */
html[data-skin="new"] #view-historie > .view-heading { border-bottom: 0; padding-bottom: 14px; }
/* Backoffice-kop op de telefoon zoals de referentie (27 sep): eerst het logo met
rechts e-mailstatus, bel, herstel en profiel (e-mailstatus en bel blijven, R55),
dan de paginakop "Backoffice / Urenoverzicht" met rechts de maandpil, dan de
zes tabs over twee regels in plaats van een schuifbalk. Geen "Home"-tekst en
geen Uitloggen in de kop: dat staat in het profielmenu. Zelfde knoppen, alleen
anders geschikt (.topbar-actions als display: contents, net als op desktop). */
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; border-bottom: 0; padding: 12px 16px 4px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-actions { display: contents; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-topbar-home { order: 1; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .mobile-brand-home > span,
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-kop-uitloggen,
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-kop-home { display: none !important; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #mail-safety-badge { order: 2; flex: 0 0 auto; margin: 0; font-size: 9.5px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-quick-reset { order: 3; flex: 0 0 auto; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-popover { order: 4; flex: 0 0 auto; }
/* Regelbreuk vóór de paginakop: met flex-basis 0 zou de titel anders naast het
logo op de eerste regel kruipen. De lege regel telt één rij-gap (10px) mee,
vandaar 2px marge in plaats van 12px. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar::after { content: ""; order: 9; flex: 0 0 100%; height: 0; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title { display: block; order: 10; flex: 1 1 0; min-width: 0; margin: 2px 0 0; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title .eyebrow,
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title .topbar-context { display: none; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title::before { content: "Backoffice"; display: block; margin-bottom: 4px; color: #7fd3b4; font: 800 10px var(--path-sans); letter-spacing: .22em; text-transform: uppercase; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #page-title { display: block; margin: 0; color: transparent; font-size: 0; line-height: 0; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #page-title::after { content: "Urenoverzicht"; display: block; overflow: hidden; color: #eef3f6; font: 400 28px/1.05 var(--path-serif, Georgia, serif); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #global-period-control { order: 11; flex: 0 0 auto; width: auto; margin: 2px 0 0 auto; }
/* Vast raster van drie kolommen i.p.v. flex-wrap: met de bredere Linux-fonts van CI
pasten er maar twee pillen per regel en werden het drie regels (SKIN-H-019, 1.0.130).
Ook de titel hierboven krijgt flex-basis 0, anders duwt hij de maandpil naar
een eigen regel (SKIN-H-065). */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav { order: 12; display: grid; flex: 0 0 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 6px 0 0; overflow: visible; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav-group { display: contents; }
/* Geen ellips: met de WCAG-tekstafstand (SKIN-N-010) viel "Mededelingen" dan weg.
Te lange tekst breekt binnen de pil af; min-height 38px vangt twee korte regels op. */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav button { min-width: 0; min-height: 38px; height: auto; padding: 4px 6px; font-size: 12px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
}
/* Overzicht op de telefoon (referentie): geen ketenstippen onder elke rij (op
desktop wel), en de twee KPI-tegels naast elkaar. */
@media (max-width: 720px) {
html[data-skin="new"] .new-admin-row-keten { display: none; }
html[data-skin="new"] .new-admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-skin="new"] .new-admin-kpi { padding: 14px 16px; }
}
/* Telefoon, vervolg (27 sep): paginakop en maandpil op één regel (titel 26px, pil
compacter, jaartal op de regel van de maand); Klanturenstaten met de kop in de
kaart zoals op desktop, en per rij eerst de uitleg, dan de pil met stip, dan de
knoppen. */
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #page-title::after { font-size: 26px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #global-period-control { min-height: 38px; padding: 0 4px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #global-period-control > button { width: 24px; height: 24px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-picker-fields { align-items: center; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .period-control .month-picker-trigger,
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #period-year-picker { height: 30px; min-height: 30px; padding: 0 3px; font: 800 12.5px/30px var(--path-sans); vertical-align: middle; }
html[data-skin="new"] .app-shell:has(#view-customer-timesheet-admin.is-active) #view-customer-timesheet-admin > .view-heading { display: block; margin: 0; border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; border-radius: 20px 20px 0 0; background: #0f2a40; padding: 18px 18px 0; }
html[data-skin="new"] .new-customer-row-avatar { order: 1; }
html[data-skin="new"] .new-customer-row-naam { order: 2; flex: 1 1 0; min-width: 0; }
html[data-skin="new"] .new-customer-row-helper { order: 3; flex: 1 1 100%; }
html[data-skin="new"] .new-customer-row > .status-pill { order: 4; }
html[data-skin="new"] .new-customer-row-acties { order: 5; flex: 1 1 100%; justify-content: flex-start; }
}
html[data-skin="new"] .new-customer-row > .status-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
/* Gemeten op 412px: de kop sprong 28px in (binnenbreedte 356px, referentie 380px)
en de maandpil was 217px breed; zo pasten titel en pil niet op één regel. */
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar { padding-inline: 4px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #page-title::after { font-size: 24px; }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #global-period-control > button { flex: 0 0 26px; width: 26px; min-width: 26px; } /* styles.css zet op de telefoon flex-basis 38px */
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #period-year-picker { width: 48px; min-width: 48px; padding: 0; text-align: left; }
}
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #global-period-control .month-picker { display: inline-flex; align-items: center; min-height: 0; height: 30px; }
}
/* Facturen en de overige tabs op de telefoon (referentie, 27 sep): geen losse
schermkop boven de kaart (zoals op desktop), standtegels 2 x 2, en per rij
avatar · naam · uren op de eerste regel, bedrag met pil eronder, dan de knop. */
@media (max-width: 720px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-announcements.is-active) :is(#view-dashboard, #view-approvals, #view-invoices, #view-employees, #view-announcements) > .view-heading { display: none; }
html[data-skin="new"] .new-invoices-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-skin="new"] .new-invoices-tegels > button { padding: 12px; }
html[data-skin="new"] .new-invoice-row { display: grid; grid-template-columns: 36px auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px 18px; }
html[data-skin="new"] .new-invoice-row > .new-invoice-avatar { grid-column: 1; grid-row: 1; }
html[data-skin="new"] .new-invoice-row > .new-invoice-naam { grid-column: 2 / 4; grid-row: 1; }
html[data-skin="new"] .new-invoice-row > :nth-child(3) { grid-column: 4; grid-row: 1; min-width: 0; }
html[data-skin="new"] .new-invoice-row > :nth-child(4) { grid-column: 2; grid-row: 2; min-width: 0; text-align: left; }
html[data-skin="new"] .new-invoice-row > .status-pill { grid-column: 3 / 5; grid-row: 2; justify-self: start; }
html[data-skin="new"] .new-invoice-row > .new-invoice-acties { grid-column: 1 / -1; grid-row: 3; }
html[data-skin="new"] .new-invoice-row > .status-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
}
/* Medewerkers: standpillen met stip, zoals overal in de referentie. */
html[data-skin="new"] #view-employees .status-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
/* Mededelingen op de telefoon zoals de referentie (en zoals desktop al deed): opstellen,
de drie routestappen en de historie vormen één kaart; "Voor" staat op de regel
van de keuzes; kop van de historie als label met de telling eronder. */
@media (max-width: 720px) {
html[data-skin="new"] #view-announcements > .new-announcements { margin-bottom: 0; border-bottom: 0; border-radius: 20px 20px 0 0; }
html[data-skin="new"] #view-announcements > .announcement-route-guide { margin: 0; border: 1px solid rgba(255, 255, 255, .08); border-block: 0; background: #0f2a40; padding: 12px 18px; }
html[data-skin="new"] #view-announcements > .panel { margin-top: 0; border-top: 0; border-radius: 0 0 20px 20px; background: #0f2a40; }
html[data-skin="new"] #view-announcements > .panel .panel-heading { display: block; }
html[data-skin="new"] #view-announcements > .panel .panel-heading small { display: block; margin-top: 4px; }
html[data-skin="new"] #view-announcements .new-announcements-voor { align-items: center; }
html[data-skin="new"] #view-announcements .new-announcements-voor > div { display: contents; }
}
/* Backoffice-overzicht, typografie gemeten naast de referentie (27 sep, 1280px,
getComputedStyle per tekst). Na de wissel naar Instrument Serif vielen vooral
de kleine sans-teksten op: kop van de werklijst in serif, voortgangslabels en
kopjes te dun of in de verkeerde kleur. Alleen maat, gewicht en kleur; geen
andere opbouw. Bewuste afwijking: de referentie zet kleine grijze labels op
40-58% wit, dat is 2,9-4,5:1 op dit donkerblauw; hier #8fa3b4 (ook een grijs
uit de referentie), ruim 5:1, want de app houdt 4,5:1 als ondergrens. */
html[data-skin="new"] #view-dashboard .new-admin-worklist-head strong { font: 700 14px/1.3 var(--path-sans); letter-spacing: normal; color: #e8eef4; }
html[data-skin="new"] #view-dashboard .new-admin-progress-row > div > span:first-child { font-size: 12.5px; font-weight: 700; color: #e8eef4; }
html[data-skin="new"] #view-dashboard #new-admin-hero-eenheid { font-size: 15.5px; letter-spacing: -.01em; color: #e8eef4; }
html[data-skin="new"] #view-dashboard .new-admin-progress > .section-label { letter-spacing: .16em; color: #8fa3b4; }
html[data-skin="new"] #view-dashboard .new-admin-kpi > small { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: #8fa3b4; }
html[data-skin="new"] #view-dashboard .new-admin-worklist-filter button { font-size: 11.5px; }
html[data-skin="new"] #view-dashboard .new-admin-row-bedrag small { letter-spacing: .1em; color: #8fa3b4; }
html[data-skin="new"] #view-dashboard .new-admin-row-naam strong { color: #e8eef4; }
/* Backoffice-kop op desktop zoals de referentie (27 sep): de balk met logo,
e-mailstatus, Uitloggen, bel en profiel loopt over de volle breedte (34px
zijmarge, logo helemaal links) met een lijn eronder; paginakop, maandpil en
tabs staan daaronder op de inhoudsbreedte, gelijk met de kaarten (84-1196 op
1280px). Eerder stond de hele kop ingesprongen, logo op 84px.
--bo-inzet: van de balkrand (34px) naar de inhoudsrand. De inhoud staat op
max(marge van .main-content, midden van max 1180px min de referentiemarge);
100% is hier de binnenbreedte van de balk. */
@media (min-width: 721px) {
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar {
--bo-marge: clamp(18px, 3vw, 48px);
--bo-inzet: calc(var(--bo-marge) - 34px + max(0px, (100% + 68px - 2 * var(--bo-marge) - 1180px + 2 * clamp(16px, 3vw, 34px)) / 2));
max-width: none;
margin-inline: calc(-1 * var(--bo-marge));
padding-inline: 34px;
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar::after {
content: "";
order: 9;
flex: 0 0 calc(100% + 68px);
height: 0;
margin-inline: -34px;
border-top: 1px solid rgba(255, 255, 255, .09);
}
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .topbar-title { margin-left: var(--bo-inzet); }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) #global-period-control { margin-right: var(--bo-inzet); }
html[data-skin="new"] .app-shell:has(#view-dashboard.is-active, #view-approvals.is-active, #view-invoices.is-active, #view-employees.is-active, #view-settings.is-active, #view-announcements.is-active, #view-customer-timesheet-admin.is-active) .new-admin-topnav { flex: 0 0 calc(100% - 2 * var(--bo-inzet)); margin-inline: var(--bo-inzet); }
}
/* Het grote getal in de Backoffice-hero, zoals de referentie:
clamp(64px, 9.5vw, 102px), strak gespatieerd en iets lager dan de regel,
zodat "urenstaten" er op de basislijn naast staat. Was 52px. De telefoon
(<=640px) houdt zijn eigen maat hierboven. */
@media (min-width: 641px) {
html[data-skin="new"] .new-admin-hero-cijfer > strong {
font-size: clamp(64px, 9.5vw, 102px);
letter-spacing: -.055em;
line-height: .9;
color: #e8eef4;
}
}
/* Overige Backoffice-schermen, per tekst gemeten naast de referentie (27 sep,
1280px): statuspillen in de rijen waren 9px (referentie 11px), de kop van
Facturen stond in serif, en veldlabels bij Medewerkers en Mededelingen
stonden in hoofdletters waar de referentie gewone tekst heeft. */
html[data-skin="new"] :is(#view-customer-timesheet-admin, #view-invoices) .status-pill { font-size: 11px; }
/* Nagemeten in de referentie (Backoffice > Instellingen, 1280px): het label bij
een mailsjabloon is daar een KLEINERE variant zonder stip -- vulling 12% van
de eigen kleur, padding 4px 10px, tekst 800/10,5px. De globale standpilregel
van 1.0.151 gaf hem ten onrechte een stip en 6px 12px; dat was een gevolg van
die regel, niet iets dat hier stond. */
html[data-skin="new"] #view-settings .email-template-heading .status-pill {
padding: 4px 10px;
font-size: 10.5px;
}
html[data-skin="new"] #view-settings .email-template-heading .status-pill::before { display: none; }
html[data-skin="new"] #new-invoices-title { font: 700 14px/1.3 var(--path-sans); letter-spacing: normal; color: #e8eef4; }
html[data-skin="new"] .new-invoices-tegels button strong { font-size: 12px; }
html[data-skin="new"] .new-invoices-tegels button small { font-size: 10.5px; }
html[data-skin="new"] .new-employee-velden > span > small,
html[data-skin="new"] #view-announcements .announcement-meta strong { text-transform: none; letter-spacing: normal; }
html[data-skin="new"] .new-employees-scope button { font-size: 11px; }
html[data-skin="new"] .new-employee-stand { font-size: 11px; }
html[data-skin="new"] #view-announcements .announcement-meta > span { font-size: 11px; }
html[data-skin="new"] #reset-brand-logo { font-size: 11.5px; }
/* Medewerker-Home op de telefoon, per tekst naast de referentie gemeten (27 sep,
412px): de begroeting stond op 34px (referentie: de clamp van de basisregel, 29px
op een telefoon) en de kopjes "September — stap voor stap" en "Andere maanden"
op 12px, omdat Klassiek .section-label op de telefoon vergroot; de referentie
houdt 10px. De 34px-regel is weg, de kopjes houden hier hun 10px. */
@media (max-width: 720px) {
html[data-skin="new"] #view-employee-dashboard .section-label { font-size: 10px; }
}
/* De voettekst (27 sep terug in Modern) op dezelfde inhoudsbreedte als de
kaarten erboven: max 1180px min de referentiemarge, gecentreerd. */
@media (min-width: 721px) {
html[data-skin="new"] .app-footer { max-width: calc(1180px - 2 * clamp(16px, 3vw, 34px)); margin-inline: auto; }
}
/* Weekenduren (27 sep, alleen bij medewerkers met "Uren in het weekend"): een
leeg weekend is geen open werkdag, dus een ring in plaats van de amber stip, en
de dagnaam iets zachter, zodat za/zo herkenbaar als extra dagen lezen. */
html[data-skin="new"] .new-bento-day-dot.is-weekend { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(232, 240, 236, .4); }
html[data-skin="new"] .new-bento-day.is-weekend .new-bento-day-naam strong { color: #b4c0c8; }
/* Sluitknop in het profielmenu, Modern. Zie styles.css voor de maatvoering;
hier alleen het palet, want Modern staat op het navy-veld. */
html[data-skin="new"] .profile-menu > .profile-menu-close { background: transparent; color: #afbdca; }
html[data-skin="new"] .profile-menu > .profile-menu-close:hover { background: rgba(255, 255, 255, .08); color: #e8eef4; }
/* Vormgevingskeuze, Modern. Zie styles.css voor de maatvoering; hier het palet. */
html[data-skin="new"] .skin-keuze { border-color: rgba(255, 255, 255, .12); }
html[data-skin="new"] .skin-keuze-huidig { background: rgba(58, 189, 157, .16); color: #e8eef4; }
/* Versiekeuze, Modern. Zie styles.css voor de maatvoering; hier het palet. */
html[data-skin="new"] .versiekeuze { background: rgba(255, 255, 255, .05); }
html[data-skin="new"] .versiekeuze button { color: #e8eef4; }
html[data-skin="new"] .versiekeuze button:hover { background: rgba(255, 255, 255, .08); }
html[data-skin="new"] .versiekeuze button.is-actief { background: #3abd9d; color: #07131f; }
html[data-skin="new"] .versiekeuze-nu strong { color: #e8eef4; }
/* Donkere panelen in het lichte thema: dezelfde tokens als html[data-theme="dark"] (r.134). */
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .new-bento-hero,
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .new-bento-steps,
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .timesheet-panel,
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .summary-card,
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .customer-timesheet-upload-panel,
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .new-maanden-lopend,
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .new-maanden-eerder,
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .berichten-kaart {
color-scheme: dark;
--ink: #d8e1e3;
--muted: #93a2a8;
--line: rgba(255, 255, 255, .11);
--surface: #0f2639;
--green-light: #17382d;
--teal: #75c99e;
--navy-tekst: #f4f1e6;
--tabelkop: #93a2a8;
--vlak: #0f2639;
--vlak-zacht: #0b2031;
--vlak-warm: #173428;
--surface-muted: #132c40;
--mint-dark-tekst: #75c99e;
--warning-bg: #352916;
--warning-tekst: #e2ab4c;
--shadow: 0 18px 48px rgba(0, 0, 0, .32);
color: var(--ink);
}
/* ---------------------------------------------------------------------------
MODERN 1 LICHT (Remy-LeBeau, 2 okt: "toch bouwen"). Modern was alleen donker omdat de schil van
Mijn uren en Maanden hard op #081726 stond (zie hierboven). In het lichte thema valt die schil
weg en krijgt de kop donkere letters. De bewust donkere bento-panelen (hero, stappenkaart)
blijven donker: die zijn het ontwerp, niet de schil.
--------------------------------------------------------------------------- */
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-timesheet.is-active),
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-historie.is-active),
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-timesheet.is-active) .main-content,
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-historie.is-active) .main-content {
background: transparent;
}
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-timesheet.is-active) .topbar,
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-historie.is-active) .topbar {
border-bottom-color: rgba(10, 28, 47, .12);
background: rgba(233, 237, 230, .88);
}
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-home {
border-color: rgba(10, 28, 47, .16);
background: rgba(10, 28, 47, .07);
color: #102235;
}
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-uitloggen,
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-kop-uitloggen:hover {
color: #3f4a55;
}
html[data-skin="new"][data-theme="light"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar :is(.month-picker-trigger, .month-picker-trigger-label, .topbar-profile-name, .topbar-profile-caret) {
color: #102235;
}
/* Titels en labels op het lichte canvas (gemeten 2 okt met de contrastscan in DASH-H-071). */
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) :is(.view-heading h2, #timesheet-period-title) {
color: #102235;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) :is(.view-heading p, .view-heading small) {
color: #4a5560;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) :is(.view-heading .section-label, .alleen-modern.section-label, span.alleen-modern) {
color: #235644;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] #timesheet-status.status-pill {
border-color: rgba(138, 92, 28, .35);
background: rgba(217, 154, 60, .2);
color: #6b4510;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .announcement-filters button, html[data-skin="new"][data-theme="light"] body[data-role="employee"] [id^="announcement-"][id$="-filter"] {
color: #3f4a55;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] [id^="announcement-"][id$="-filter"].is-active {
background: rgba(75, 177, 136, .22);
color: #14573f;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .berichten-voetregel {
color: #3f4a55;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .new-bento-day-naam small, html[data-skin="new"][data-theme="light"] body[data-role="employee"] .new-bento-week header small {
color: #566059;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-footer, html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-footer span {
color: #4f5a54;
}
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .mobile-topbar-home :is(button, .topbar-quick-reset) span {
color: #8b5200;
}
/* Zelfde regels met de :has()-voorloop, want de bestaande regels voor deze elementen wegen zwaarder. */
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) [id^="announcement-"][id$="-filter"] { color: #3f4a55; }
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) [id^="announcement-"][id$="-filter"].is-active { background: rgba(75, 177, 136, .22); color: #14573f; }
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .berichten-voetregel { color: #3f4a55; }
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .new-bento-day-naam small { color: #566059; }
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-quick-reset, html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .topbar-quick-reset span, html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .mobile-topbar-home button span { color: #8b5200; }
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .correction-banner small { color: #5b4a2c; }
html[data-skin="new"][data-theme="light"] body[data-role="employee"] .app-shell:has(#view-employee-dashboard.is-active, #view-timesheet.is-active, #view-historie.is-active, #view-employee-announcements.is-active) .correction-banner p { color: #3b2f1a; }