/* Live-tegels in de kopbalk (Uren / Productie / Ingeklokt) — zie js/workforce-header.js.
   De kopbalk is altijd donker (ook in light mode), dus vaste donkere kleuren. */
#wf-header-tiles { display: flex; align-items: center; gap: 6px; order: 1; margin-left: auto; margin-right: 6px; flex: 0 0 auto; }
/* Volgorde in de rechterhelft: [schermtitel] ... [tegels] [bel] [account] [instellingen].
   De DevExpress-toolbar (met de bel) mag niet meer uitrekken en de account-wrapper
   verliest zijn ms-auto, anders belanden de tegels halverwege de balk. */
.header-right-side.wf-has-tiles > dxbl-toolbar { flex: 0 0 auto !important; order: 2; }
.header-right-side.wf-has-tiles > .d-flex.ms-auto { order: 3; margin-left: 0 !important; }
.wfh-tile { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; height: 36px; min-width: 64px; padding: 0 10px; border-radius: 8px; background: #262626; border: 1px solid #333333; color: #ffffff; text-decoration: none !important; line-height: 1; font-family: inherit; transition: background-color .15s, border-color .15s; }
.wfh-tile[hidden] { display: none; }
a.wfh-tile { cursor: pointer; }
a.wfh-tile:hover, a.wfh-tile:focus-visible { background: #2e2e2e; border-color: #444444; color: #ffffff; outline: none; }
.wfh-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffffff; }
.wfh-lbl { font-size: 10px; color: #9a9a9a; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
/* Kleurcode van de Workforce-website: uren geel #FFB71B, productie blauw #0099FF, toegang wit.
   Ingeklokt hoort bij uren en is dus ook geel. */
.wfh-hours .wfh-val, .wfh-clocked .wfh-val { color: #FFB71B; }
.wfh-production .wfh-val { color: #0099FF; }
/* Odometer (rollende cijfers) */
.wfh-odo { display: flex; justify-content: flex-end; overflow: hidden; height: 1em; line-height: 1; }
.wfh-odo .wfh-odo-col { display: flex; user-select: none; flex-direction: column; transition: transform 1.1s cubic-bezier(.23, 1, .32, 1); will-change: transform; }
.wfh-odo .wfh-odo-col i { font-style: normal; height: 1em; line-height: 1; }
.wfh-odo .wfh-odo-sep { height: 1em; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .wfh-odo .wfh-odo-col { transition: none; } }
/* Smalle schermen: eerst het label weg, daarna de tegels helemaal. */
@media (max-width: 1100px) { .wfh-lbl { display: none; } .wfh-tile { min-width: 0; height: 30px; } }
@media (max-width: 820px) { #wf-header-tiles { display: none; } }