/* Dienstly visual system: clear typography, fresh accents and restrained glass. */
:root{
  --dly-font:"Segoe UI Variable Text","Segoe UI",Inter,Aptos,Arial,sans-serif;
  --dly-display:"Segoe UI Variable Display","Segoe UI",Inter,Aptos,Arial,sans-serif;
  --dly-ink:#142536;
  --dly-muted:#506171;
  --dly-sky:#89cff0;
  --dly-sky-strong:#2c91c2;
  --dly-coral:#ee3f4d;
  --dly-coral-strong:#d92738;
  --dly-mint:#84cfa8;
  --dly-brand:#d92d3a;
  --dly-brand-soft:#fff3f4;
  --dly-action:#20566a;
  --dly-action-hover:#174858;
  --dly-action-soft:#edf5f7;
  --dly-action-border:#b6cdd2;
  --dly-success:#278454;
  --dly-line:rgba(38,75,93,.14);
  --dly-glass:rgba(255,255,255,.76);
  --dly-glass-strong:rgba(255,255,255,.9);
  --dly-shadow:0 14px 40px rgba(24,59,76,.09);
  --dly-shadow-soft:0 7px 22px rgba(24,59,76,.07);
}

html,body,button,input,select,textarea{font-family:var(--dly-font)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:is(h1,h2,h3,h4,.page-heading,.section-title){font-family:var(--dly-display);letter-spacing:-.025em}
:is(p,li,.muted,.hint,.footnote){text-wrap:pretty}
:is(button,a,input,select,textarea){font-variation-settings:"wght" 480}
:is(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(44,145,194,.38)!important;outline-offset:3px!important}

/* Main roster application */
body:has(.app),body:has(.welcome){
  color:var(--dly-ink);
  background:
    radial-gradient(circle at 86% 3%,rgba(137,207,240,.2),transparent 30rem),
    radial-gradient(circle at 8% 92%,rgba(132,207,168,.14),transparent 28rem),
    #f2f7f8;
}
.app{
  --background:#f2f7f8;
  --foreground:var(--dly-ink);
  --primary:var(--dly-coral);
  --border:var(--dly-line);
  color:var(--dly-ink);
  background:transparent;
}
.app :is(.sidebar,.topbar,.bottom-nav){
  border-color:var(--dly-line);
  background:rgba(250,253,253,.8);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
}
.app .sidebar{box-shadow:8px 0 30px rgba(27,68,86,.045)}
.app .topbar{box-shadow:0 5px 20px rgba(27,68,86,.045)}
/* Op mobiel oogt de schaduw onder de vaste kopbalk als een losse balk wanneer
   je via het logo teruggaat naar Mijn dienst. De kopbalk blijft duidelijk door
   zijn eigen achtergrond, zonder dat visuele artefact. */
@media(max-width:700px){.app .topbar{box-shadow:none}}
.app .content,.app .main-shell{background:transparent}
.app :is(h1,h2,h3,h4,.workspace-person-name,.route-title strong,.activity,.leg-time strong){color:var(--dly-ink)}
.app h1{font-weight:650;letter-spacing:-.04em}
.app :is(h2,h3,h4,.workspace-person-name,.route-title strong){font-weight:640}
.app :is(.muted,.breadcrumb,.day,.workspace-name small,.leg-main p,.leg-main small,.bottom-disclaimer,.page-footer){color:var(--dly-muted)}

.app :is(.sheet,.context-card,.team-card,.datebar,.notifications,.article,.diversion,.news-card,.login-box,.login-progress,.table-wrap,.managed-context,.intranet-card,.intranet-article){
  border:1px solid var(--dly-line);
  background:var(--dly-glass);
  box-shadow:var(--dly-shadow-soft);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
}
.app :is(.sheet,.context-card,.team-card,.notifications,.article,.diversion,.news-card,.login-box,.managed-context,.intranet-card,.intranet-article){border-radius:16px}
.app :is(.sheet-heading,.sheet-tools,.metrics>div,.leg,.cron-log){border-color:var(--dly-line)}
.app .metrics strong{color:#17384b;font-weight:670}
.app .metrics span,.app .sheet-tools>span{color:#526977;font-weight:560;letter-spacing:.035em}

.app .nav-item{
  color:#31475a;
  font-weight:530;
  border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.app .nav-item>svg{color:#465c6f;stroke-width:1.85}
.app .nav-item:not(.active):hover{background:rgba(137,207,240,.13);color:#19394c;transform:translateX(2px)}
.app .nav-item.active{
  color:var(--dly-brand);
  border-color:rgba(217,45,58,.58);
  background:var(--dly-brand-soft);
  box-shadow:0 7px 18px rgba(217,45,58,.08);
  font-weight:630;
}
.app .nav-item.active>svg{color:var(--dly-brand)}
.app .workspace-name .avatar{
  border-color:rgba(61,112,91,.16);
  background:linear-gradient(145deg,rgba(245,250,248,.96),rgba(226,239,233,.88));
  color:#27664f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

.app :is(button,.primary,input,select,textarea){border-radius:11px}
.app :is(input,select,textarea){
  border:1px solid rgba(47,84,103,.2);
  background:rgba(255,255,255,.82);
  color:var(--dly-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(29,69,88,.035);
}
.app :is(input,select,textarea):hover{border-color:rgba(44,145,194,.4)}
.app :is(input,select,textarea):focus{border-color:var(--dly-sky-strong);box-shadow:0 0 0 4px rgba(137,207,240,.22)}
.app .primary{
  border:1px solid rgba(190,25,44,.12);
  background:linear-gradient(135deg,#f34b58,var(--dly-coral-strong));
  color:#fff;
  box-shadow:0 10px 24px rgba(217,39,56,.19),inset 0 1px 0 rgba(255,255,255,.2);
  font-weight:650;
}
.app .primary:hover{background:linear-gradient(135deg,#f65b67,#cf2031);transform:translateY(-1px)}
.app :is(.segmented,.cache-view-switch){padding:3px;border:1px solid var(--dly-line);border-radius:12px;background:rgba(226,239,242,.65)}
.app .segmented .chosen{background:var(--dly-glass-strong);box-shadow:0 3px 10px rgba(25,61,78,.08)}
.app .status-tag,.app .source-tag,.app .line-badge{border-radius:999px;font-weight:620}
.app .status-tag{background:rgba(132,207,168,.18);color:#285f47}
.app .line-badge{background:rgba(137,207,240,.2);color:#24536b}

/* Login */
body .welcome{
  background:
    radial-gradient(circle at 50% -10%,rgba(137,207,240,.27),transparent 29rem),
    linear-gradient(150deg,#f9fcfc 0%,#eef6f7 58%,#f4faf7 100%)!important;
}
body .welcome .login-box{padding:24px 26px 27px;border-radius:20px;background:rgba(255,255,255,.7);box-shadow:var(--dly-shadow)}
body .welcome .login-box h2{font-weight:640;color:var(--dly-ink)}
body .welcome .muted{color:var(--dly-muted)}
body .welcome .login-box label{color:#243b4d;font-weight:560}
body .welcome .login-box input{border-color:rgba(46,83,102,.19);background:rgba(255,255,255,.8)}
body .welcome .login-box input:focus{border-color:var(--dly-sky-strong);box-shadow:0 0 0 4px rgba(137,207,240,.22)}
body .welcome .login-box form>.error{font-weight:520}

/* Admin, observer and public Live OV share the same visual language. */
body:has(.login-panel),body:has(.observer-page-main),body:has(.live-shell){
  color:var(--dly-ink);
  background:
    radial-gradient(circle at 88% 0,rgba(137,207,240,.2),transparent 32rem),
    linear-gradient(150deg,#f6fafb,#edf5f6 60%,#f4faf7);
}
body:has(.login-panel) :is(.topbar,.login-panel,.panel,.settings-panel,.item-card,.stats article,.user-summary article,dialog),
body:has(.observer-page-main) :is(.observer-page-topbar,.observer-page-card,.observer-summary article,.observer-summary button),
body:has(.live-shell) :is(.topbar,.live-panel,.map-shell,.vehicle-card){
  border-color:var(--dly-line);
  background-color:var(--dly-glass);
  box-shadow:var(--dly-shadow-soft);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
}
body:has(.login-panel) :is(.login-panel,.panel,.settings-panel,.item-card,.stats article,.user-summary article,dialog),
body:has(.observer-page-main) :is(.observer-page-card,.observer-summary article,.observer-summary button),
body:has(.live-shell) :is(.live-panel,.map-shell,.vehicle-card){border-radius:16px}
body:has(.login-panel) :is(h1,h2,h3){color:var(--dly-ink);font-weight:650}
body:has(.login-panel) :is(.intro,.hint,.footnote,small){color:var(--dly-muted)}
body:has(.login-panel) :is(input,select,textarea,button),
body:has(.observer-page-main) :is(input,select,textarea,button){border-radius:10px}
body:has(.login-panel) .primary,
body:has(.observer-page-main) :is(.observer-message-all,.observer-primary){
  background:linear-gradient(135deg,#f34b58,var(--dly-coral-strong));
  color:#fff;
  box-shadow:0 9px 22px rgba(217,39,56,.17);
}
body:has(.observer-page-main) .observer-page-nav a[aria-current="page"]{background:rgba(137,207,240,.2);color:#174964;border-color:rgba(44,145,194,.32)}

/* Dark mode: translucent dark surfaces and a bright, calm accent palette. */
:root.dark-mode{
  --dly-ink:#eff7f3;
  --dly-muted:#b7c9c0;
  --dly-line:rgba(183,218,201,.16);
  --dly-glass:rgba(25,39,35,.74);
  --dly-glass-strong:rgba(34,51,46,.9);
  --dly-shadow:0 16px 44px rgba(0,0,0,.24);
  --dly-shadow-soft:0 8px 24px rgba(0,0,0,.16);
}
:root.dark-mode body{
  background:
    radial-gradient(circle at 88% 0,rgba(67,139,162,.16),transparent 32rem),
    radial-gradient(circle at 5% 92%,rgba(73,137,104,.12),transparent 28rem),
    #0f1715;
}
:root.dark-mode .app{--background:#0f1715;--foreground:#eff7f3;background:transparent}
:root.dark-mode .app :is(.sidebar,.topbar,.bottom-nav){background:rgba(20,31,28,.82);border-color:var(--dly-line)}
:root.dark-mode .app :is(.sheet,.context-card,.team-card,.datebar,.notifications,.article,.diversion,.news-card,.login-box,.login-progress,.table-wrap,.managed-context,.intranet-card,.intranet-article){background:var(--dly-glass);border-color:var(--dly-line);box-shadow:var(--dly-shadow-soft)}
:root.dark-mode .app :is(h1,h2,h3,h4,.workspace-person-name,.route-title strong,.activity,.leg-time strong,.metrics strong){color:var(--dly-ink)}
:root.dark-mode .app :is(.muted,.breadcrumb,.workspace-name small,.leg-main p,.leg-main small,.bottom-disclaimer,.page-footer,.metrics span,.sheet-tools>span){color:var(--dly-muted)}
:root.dark-mode .app .sheet-heading p:last-child{color:var(--dly-muted)!important}
:root.dark-mode .app .nav-item{color:#d1ded7}
:root.dark-mode .app .nav-item>svg{color:#b9cbc2}
:root.dark-mode .app .nav-item:not(.active):hover{background:rgba(137,207,240,.09);color:#f4faf7}
:root.dark-mode .app .nav-item.active{color:#fff1f2;border-color:rgba(244,72,86,.7);background:linear-gradient(135deg,rgba(87,38,43,.76),rgba(58,30,34,.68))}
:root.dark-mode .app .workspace-name .avatar{border-color:rgba(132,207,168,.28);background:linear-gradient(145deg,#263a33,#1d2f29);color:#d9f5e5}
:root.dark-mode .app :is(input,select,textarea){border-color:rgba(184,213,199,.2);background:rgba(25,40,35,.88);color:#f0f7f3;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
:root.dark-mode .app :is(input,select,textarea):focus{border-color:#71b9d9;box-shadow:0 0 0 4px rgba(85,165,197,.18)}
:root.dark-mode .app :is(.segmented,.cache-view-switch){background:rgba(9,18,16,.42)}
:root.dark-mode .app .segmented .chosen{background:#293b35;color:#f3f8f5}
:root.dark-mode .app .status-tag{background:rgba(113,196,147,.14);color:#bde8ce}
:root.dark-mode .app .line-badge{background:rgba(91,173,207,.16);color:#bde6f7}
:root.dark-mode body .welcome{background:radial-gradient(circle at 50% -10%,rgba(55,127,151,.2),transparent 30rem),#0f1715!important}
:root.dark-mode body .welcome .login-box{background:rgba(24,38,34,.78);border-color:var(--dly-line)}
:root.dark-mode body .welcome .login-box :is(h2,label){color:#eff7f3}
:root.dark-mode body .welcome .muted{color:var(--dly-muted)}

html.dark-mode body:has(.login-panel){background:radial-gradient(circle at 90% 0,rgba(63,137,161,.16),transparent 32rem),#0f1715;color:#eff7f3}
html.dark-mode body:has(.login-panel) :is(.topbar,.login-panel,.panel,.settings-panel,.item-card,.stats article,.user-summary article,dialog){background-color:rgba(25,39,35,.76);border-color:rgba(183,218,201,.16);box-shadow:0 8px 24px rgba(0,0,0,.17)}
html.dark-mode .topbar .brand{padding:0;background:transparent;box-shadow:none}
html.dark-mode .topbar .admin-brand-symbol{filter:invert(1) hue-rotate(180deg) brightness(.96) contrast(1.04)}
html.dark-mode .topbar .admin-brand-wordmark,html.dark-mode .topbar .admin-brand-wordmark b{color:#f4f7f5}

@media(max-width:700px){
  body .welcome .login-box{padding:20px 18px 22px;border-radius:16px}
  .app :is(.sheet,.context-card,.team-card,.notifications,.article,.diversion,.news-card,.managed-context,.intranet-card,.intranet-article){border-radius:14px}
  .app .bottom-nav{box-shadow:0 -9px 28px rgba(25,61,78,.08)}
}

@media(prefers-reduced-transparency:reduce){
  .app :is(.sidebar,.topbar,.bottom-nav,.sheet,.context-card,.team-card,.datebar,.notifications,.article,.diversion,.news-card,.login-box,.login-progress,.table-wrap,.managed-context,.intranet-card,.intranet-article){-webkit-backdrop-filter:none;backdrop-filter:none;background-color:#fff}
  :root.dark-mode .app :is(.sidebar,.topbar,.bottom-nav,.sheet,.context-card,.team-card,.datebar,.notifications,.article,.diversion,.news-card,.login-box,.login-progress,.table-wrap,.managed-context,.intranet-card,.intranet-article){background-color:#192722}
}
@media(prefers-reduced-motion:reduce){.app .nav-item,.app .primary{transition:none!important;transform:none!important}}
@media print{
  body,.app{background:#fff!important;color:#000!important}
  .app :is(.sheet,.context-card,.team-card,.datebar,.notifications,.article,.diversion,.news-card,.login-box,.login-progress,.table-wrap,.managed-context,.intranet-card,.intranet-article){background:#fff!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* Professional dashboard refinement: calm surfaces, clear rhythm and one
   coherent calendar instead of a floating toolbar touching separate tiles. */
body:has(.app){
  background:
    radial-gradient(circle at 84% -12%,rgba(137,207,240,.13),transparent 34rem),
    #f4f7f8;
}
.app .content{padding-top:28px}
.app .datebar{
  min-height:46px;
  margin:0 0 14px;
  padding:0 3px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.app .datebar>div:first-child{gap:11px;color:#1b3042;font-size:15px;font-weight:640}
.app .datebar>div:first-child>svg{width:19px;height:19px;color:#35576a;stroke-width:1.8}
.app .datebar>div>span{margin-left:8px;color:#71818d;font-size:12px;font-weight:450}
.app .day-controls{gap:4px;padding:3px;border:1px solid rgba(42,77,94,.11);border-radius:12px;background:rgba(255,255,255,.66);box-shadow:0 3px 12px rgba(29,65,82,.045)}
.app .day-controls button{min-width:38px;min-height:36px;border-radius:9px;color:#253b4b;font-weight:560}
.app .day-controls button:hover{background:#eef5f7}
.app .week{gap:10px;margin-bottom:28px;padding:0 2px}
.app .day{
  height:94px;
  padding:12px 4px;
  border:1px solid rgba(45,78,94,.14);
  border-radius:14px;
  background:rgba(255,255,255,.9);
  box-shadow:0 5px 16px rgba(30,65,82,.045);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.app .day:hover{transform:translateY(-2px);border-color:rgba(44,145,194,.34);box-shadow:0 10px 24px rgba(30,65,82,.09)}
.app .day>span{color:#536170;font-weight:650;letter-spacing:.055em}
.app .day strong{color:#152a3c;font-size:22px;font-weight:670}
.app .day small{color:#61717e;font-weight:560}
.app .day.selected{
  border-color:#d92738;
  background:linear-gradient(145deg,#ee3f4d,#d92738);
  background-clip:padding-box;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transform:none;
}
.app .day.selected :is(span,strong,small){color:#fff}
.app .work-grid{grid-template-columns:minmax(0,1fr) 292px;gap:22px}
.app :is(.sheet,.context-card,.team-card){
  border-color:rgba(42,75,91,.13);
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(27,62,78,.065);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.app .sheet{border-radius:18px}
.app .sheet-heading{padding:25px 28px 21px;border-bottom:1px solid rgba(42,75,91,.09);background:linear-gradient(180deg,#fff,#fbfcfc)}
.app .sheet-heading .eyebrow{color:#526675;font-weight:680;letter-spacing:.11em}
.app .sheet-heading h2{color:#142536;font-weight:680}
.app .sheet:has(.free-day) .free-day{min-height:290px;padding:44px 26px;display:grid;place-content:center}
.app .free-day>svg{width:60px;height:60px;margin-bottom:18px;color:#9a6800;background:#fff2cd;box-shadow:inset 0 0 0 1px rgba(190,132,0,.08)}
.app .free-day h3{color:#172b3b;font-size:25px;font-weight:650;letter-spacing:-.025em}
.app .free-day p{color:#526472;font-size:15px}
.app .source-foot{border-top-color:rgba(42,75,91,.1);background:#fbfcfb}
.app :is(.context-card,.team-card){border-radius:16px;padding:23px}
.app .section-title{margin-bottom:16px}
.app .section-title>svg{color:#3d748d}
.app .section-title h3{color:#1b3042;font-size:13px;font-weight:660}
.app .context-card .text-link{color:#2b627b;font-weight:620}

:root.dark-mode body:has(.app){background:radial-gradient(circle at 84% -12%,rgba(71,145,169,.11),transparent 34rem),#0f1715}
:root.dark-mode .app .datebar{background:transparent;border:0;box-shadow:none}
:root.dark-mode .app .datebar>div:first-child{color:#eff7f3}
:root.dark-mode .app .datebar>div:first-child>svg{color:#b7d3c6}
:root.dark-mode .app .datebar>div>span{color:#aabdb4}
:root.dark-mode .app .day-controls{border-color:rgba(183,218,201,.13);background:rgba(25,39,35,.7);box-shadow:none}
:root.dark-mode .app .day-controls button{color:#e4eee9}
:root.dark-mode .app .day-controls button:hover{background:#293a34}
:root.dark-mode .app .day{border-color:rgba(183,218,201,.14);background:#192722;box-shadow:0 6px 18px rgba(0,0,0,.12)}
:root.dark-mode .app .day:hover{border-color:rgba(112,187,216,.38);background:#1d2d28;box-shadow:0 10px 24px rgba(0,0,0,.2)}
:root.dark-mode .app .day>span,:root.dark-mode .app .day small{color:#b9cbc2}
:root.dark-mode .app .day strong{color:#f1f7f4}
:root.dark-mode .app .day.selected{border-color:#f04b59;background:linear-gradient(145deg,#a9323d,#7c2831);background-clip:padding-box;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root.dark-mode .app :is(.sheet,.context-card,.team-card){border-color:rgba(183,218,201,.14);background:#192722;box-shadow:0 10px 30px rgba(0,0,0,.17)}
:root.dark-mode .app .sheet-heading{border-bottom-color:rgba(183,218,201,.1);background:linear-gradient(180deg,#1c2b26,#192722)}
:root.dark-mode .app .sheet-heading :is(.eyebrow,h2){color:#eff7f3}
:root.dark-mode .app .free-day h3{color:#eff7f3}
:root.dark-mode .app .free-day p{color:#b7c9c0}
:root.dark-mode .app .free-day>svg{color:#f1bf53;background:#3a321f;box-shadow:inset 0 0 0 1px rgba(244,201,105,.12)}
:root.dark-mode .app .source-foot{background:#17231f;border-top-color:rgba(183,218,201,.1)}
:root.dark-mode .app .section-title h3{color:#edf5f1}
:root.dark-mode .app .section-title>svg,:root.dark-mode .app .context-card .text-link{color:#91cfe9}

@media screen and (max-width:1100px) and (min-width:701px){
  .app .work-grid{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:700px){
  .app .content{padding-top:18px}
  .app .datebar{min-height:42px;margin-bottom:9px;padding-inline:1px}
  .app .datebar>div:first-child{gap:8px;font-size:13px}
  .app .datebar>div>span{display:none}
  .app .day-controls{padding:2px;border-radius:10px}
  .app .day-controls button{min-width:34px;min-height:34px}
  .app .week{grid-template-columns:repeat(8,minmax(66px,1fr));gap:7px;margin-bottom:20px;padding:2px 1px 9px;scroll-snap-type:x proximity;scrollbar-width:none}
  .app .week::-webkit-scrollbar{display:none}
  .app .day{min-width:66px;height:76px;padding:8px 2px;border-radius:11px;scroll-snap-align:start}
  .app .day:hover{transform:none}
  .app .day strong{font-size:20px}
  .app .day>span{font-size:9px}
  .app .day small{font-size:8px}
  .app .work-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .app .sheet{border-radius:15px}
  .app .sheet-heading{padding:20px 18px 17px}
  .app .sheet:has(.free-day) .free-day{min-height:230px;padding:34px 18px}
  .app :is(.context-card,.team-card){padding:19px;border-radius:14px}
}

/* Typography and component consistency. Several legacy bundles declare Arial
   or Inter locally; one explicit family keeps every Dienstly surface coherent. */
body,body *:not(code):not(pre):not(kbd):not(samp){font-family:var(--dly-font)!important}
.app-brand .brand-wordmark,
.admin-brand-wordmark,
.observer-page-brand strong,
.live-shell .brand span,
#app-startup .startup-brand span{
  font-family:var(--dly-display)!important;
  font-weight:760!important;
  letter-spacing:-.04em!important;
  line-height:1.16!important;
  padding-bottom:.1em;
  font-variation-settings:"wght" 760!important;
}
.app .sidebar>.app-brand .brand-wordmark{font-size:15.5px!important}
.welcome .app-brand .brand-wordmark{font-size:22px!important}

/* The wallboard search is one control: the label supplies the border and the
   nested input stays visually transparent. */
.app .wallboard-search{
  overflow:hidden;
  border:1px solid rgba(45,78,94,.18);
  border-radius:11px;
  background:#fff;
  box-shadow:0 4px 14px rgba(30,65,82,.045);
}
.app .wallboard-search input,
.app .wallboard-search input:hover,
.app .wallboard-search input:focus{
  width:100%;
  height:100%;
  min-height:0;
  padding:0 11px 0 7px;
  border:0!important;
  border-radius:0;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.app .wallboard-search:focus-within{border-color:var(--dly-sky-strong);box-shadow:0 0 0 4px rgba(137,207,240,.2)}
:root.dark-mode .app .wallboard-search{border-color:rgba(183,218,201,.18);background:#192722;box-shadow:none}
:root.dark-mode .app .wallboard-search input{color:#f0f7f3}

/* Login always uses a clean white canvas. It must not inherit the signed-in
   dashboard gradient or the saved dark theme before authentication. */
body:has(.welcome),
body .welcome,
:root.dark-mode body:has(.welcome),
:root.dark-mode body .welcome{
  background:#fff!important;
  color:#142536!important;
}
body .welcome .login-box,
:root.dark-mode body .welcome .login-box{
  border:1px solid rgba(42,75,91,.12)!important;
  background:#fff!important;
  color:#142536!important;
  box-shadow:0 16px 44px rgba(24,59,76,.09)!important;
}
:root.dark-mode body .welcome .app-brand .brand-symbol{filter:none!important;box-shadow:none!important}
:root.dark-mode body .welcome .app-brand .brand-wordmark,
:root.dark-mode body .welcome .app-brand .brand-wordmark b,
:root.dark-mode body .welcome .login-box :is(h1,h2,h3,label,strong),
:root.dark-mode body .welcome .remember-option{color:#142536!important}
:root.dark-mode body .welcome :is(.muted,.remember-option small,.login-progress-heading small){color:#506171!important}
:root.dark-mode body .welcome .login-box :is(input,select,textarea){border-color:rgba(46,83,102,.19)!important;background:#fff!important;color:#142536!important}
:root.dark-mode body .welcome .login-box :is(input,select,textarea):focus{border-color:var(--dly-sky-strong)!important;box-shadow:0 0 0 4px rgba(137,207,240,.22)!important}

@media(max-width:700px){
  .app .wallboard-head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .app .wallboard-title-tools{width:100%}
  .app .wallboard-search{width:100%}
  .app .wallboard-day-controls{width:100%;justify-content:space-between}
  .app .wallboard-day-controls strong{flex:1;text-align:center}
}

/* Calendar management is one component, not a stack of bordered boxes. */
.app .calendar-subscription-page .calendar-manage{
  margin-top:20px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(42,75,91,.14);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(27,62,78,.055);
}
.app .calendar-subscription-page .calendar-manage>summary{
  position:relative;
  display:flex;
  min-height:52px;
  align-items:center;
  gap:10px;
  padding:14px 48px 14px 18px;
  list-style:none;
  color:#1c3040;
  cursor:pointer;
  font-size:13px;
  font-weight:650;
  letter-spacing:-.005em;
  transition:background-color .18s ease,color .18s ease;
}
.app .calendar-subscription-page .calendar-manage>summary::-webkit-details-marker{display:none}
.app .calendar-subscription-page .calendar-manage>summary::after{
  content:"";
  position:absolute;
  right:19px;
  width:8px;
  height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  opacity:.65;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.app .calendar-subscription-page .calendar-manage>summary:hover{background:#f6f9fa}
.app .calendar-subscription-page .calendar-manage>summary:focus-visible{outline:3px solid rgba(74,165,205,.35);outline-offset:-3px}
.app .calendar-subscription-page .calendar-manage[open]>summary{border-bottom:1px solid rgba(42,75,91,.09);background:#fbfcfc}
.app .calendar-subscription-page .calendar-manage[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.app .calendar-subscription-page .calendar-manage>summary~*{margin-right:18px;margin-left:18px}
.app .calendar-subscription-page .calendar-manage>summary+p{margin-top:16px}
.app .calendar-subscription-page .calendar-manage>div:last-child,
.app .calendar-subscription-page .calendar-manage>section:last-child{margin-bottom:18px}
.app .calendar-admin-manage .calendar-protected-note{
  position:relative;
  margin-bottom:14px;
  padding:12px 14px 12px 38px;
  border:1px solid rgba(65,142,94,.18);
  border-radius:11px;
  background:#f1f8f4;
  color:#365846!important;
  font-size:11px;
  line-height:1.55;
}
.app .calendar-admin-manage .calendar-protected-note::before{
  content:"i";
  position:absolute;
  top:13px;
  left:14px;
  display:grid;
  width:16px;
  height:16px;
  place-items:center;
  border-radius:50%;
  background:#4b9668;
  color:#fff;
  font-size:10px;
  font-style:normal;
  font-weight:750;
  line-height:1;
}
.app .calendar-admin-test{
  margin-top:0;
  padding:16px;
  border:0;
  border-radius:12px;
  background:#f5f8f9;
  box-shadow:inset 0 0 0 1px rgba(42,75,91,.09);
}
.app .calendar-admin-test-heading strong{color:#1c3040;font-size:12px;font-weight:650}
.app .calendar-admin-test-heading small{margin-top:4px;color:#647481;font-size:10px;line-height:1.55}
.app .calendar-admin-test>p{margin:12px 0 0;color:#596a76;font-size:11px;line-height:1.55}

:root.dark-mode .app .calendar-subscription-page .calendar-manage{
  border-color:rgba(183,218,201,.14);
  background:#192722;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}
:root.dark-mode .app .calendar-subscription-page .calendar-manage>summary{color:#edf5f1}
:root.dark-mode .app .calendar-subscription-page .calendar-manage>summary:hover,
:root.dark-mode .app .calendar-subscription-page .calendar-manage[open]>summary{background:#1d2d27}
:root.dark-mode .app .calendar-subscription-page .calendar-manage[open]>summary{border-bottom-color:rgba(183,218,201,.1)}
:root.dark-mode .app .calendar-admin-manage .calendar-protected-note{
  border-color:rgba(114,189,140,.2);
  background:#20352b;
  color:#c0dfcc!important;
}
:root.dark-mode .app .calendar-admin-manage .calendar-protected-note::before{background:#6bb98a;color:#10251a}
:root.dark-mode .app .calendar-admin-test{background:#17241f;box-shadow:inset 0 0 0 1px rgba(183,218,201,.11)}
:root.dark-mode .app .calendar-admin-test-heading strong{color:#edf5f1}
:root.dark-mode .app .calendar-admin-test-heading small,
:root.dark-mode .app .calendar-admin-test>p{color:#afc1b8}

@media(max-width:700px){
  .app .calendar-subscription-page .calendar-manage{border-radius:14px}
  .app .calendar-subscription-page .calendar-manage>summary{min-height:49px;padding:13px 42px 13px 15px}
  .app .calendar-subscription-page .calendar-manage>summary::after{right:16px}
  .app .calendar-subscription-page .calendar-manage>summary~*{margin-right:14px;margin-left:14px}
  .app .calendar-subscription-page .calendar-manage>div:last-child,
  .app .calendar-subscription-page .calendar-manage>section:last-child{margin-bottom:14px}
  .app .calendar-admin-test{padding:14px}
}

/* De desktopzijbalk vormt één vaste compositie en heeft geen eigen scrollvlak. */
@media screen and (min-width:701px){
  .app .sidebar{
    /* Centre the desktop wordmark on the same horizontal axis as the breadcrumb. */
    padding-top:14px;
    padding-bottom:14px;
    overflow:hidden;
    overscroll-behavior:none;
    scrollbar-width:none;
  }
  .app .sidebar::-webkit-scrollbar{display:none}
  .app .sidebar .workspace-name{
    margin:8px 0 16px;
    padding:11px 0;
  }
  .app .sidebar nav{
    display:grid;
    gap:2px;
  }
  .app .sidebar .nav-item{min-height:48px}
  .app .sidebar-bottom{padding-top:14px}
  .app .sidebar .demo-note{
    padding:14px;
    border-radius:15px;
  }
  .app .sidebar .demo-note .webcomm-info-list{
    margin-top:10px;
    line-height:1.4;
  }
  .app .sidebar .demo-note .webcomm-info-list li+li{margin-top:4px}
  .app .sidebar .demo-note .webcomm-admin-link{margin-top:9px}
  .app .sidebar .demo-note .webcomm-health-sidebar{margin-top:9px}
}

@media screen and (min-width:701px) and (max-height:820px){
  .app .sidebar .workspace-name{margin-block:5px 10px;padding-block:8px}
  .app .sidebar .nav-item{min-height:43px}
  .app .sidebar-bottom{padding-top:9px}
  .app .sidebar .demo-note{padding:11px 12px}
  .app .sidebar .demo-note .webcomm-info-list{margin-top:7px;font-size:10px;line-height:1.32}
  .app .sidebar .demo-note .webcomm-info-list li+li{margin-top:3px}
  .app .sidebar .demo-note .webcomm-admin-link,
  .app .sidebar .demo-note .webcomm-health-sidebar{margin-top:7px}
}

/* A calmer login form: related controls stay together, explanatory copy is
   clearly secondary, and status messages no longer compete with the action. */
body .welcome{gap:16px;padding-bottom:40px}
body .welcome .login-area{width:min(100%,480px)}
body .welcome .login-box{padding:30px 32px 32px;border-radius:22px}
body .welcome .login-box h2{
  margin:0 0 9px;color:#142536;font-size:clamp(22px,4vw,26px);font-weight:680;
  letter-spacing:-.035em;line-height:1.18;text-align:center;
}
body .welcome .login-box h2 .login-dienstly-name{
  color:#0d1b2a;
  font-size:1.06em;
  font-weight:800;
  letter-spacing:-.05em;
}
body .welcome .login-box h2::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background:#ec6670;
}
body .welcome .login-box>p.muted{
  max-width:410px;margin:0 auto 24px;color:#5c6d78;font-size:13.5px;line-height:1.55;text-align:center;
}
body .welcome .login-webcomm-emphasis{color:#263f50;font-weight:680}
body .welcome .login-box form>label:not(.remember-option){
  margin:0 0 7px;color:#213847;font-size:13px;font-weight:650;letter-spacing:-.005em;
}
body .welcome .login-box form>label:not(.remember-option)~label:not(.remember-option){margin-top:17px}
body .welcome .login-box input:not([type="checkbox"]){
  height:52px;padding:0 14px;border:1px solid #c9d6df!important;border-radius:12px;
  background:#f7fafc!important;color:#142536;box-shadow:inset 0 1px 1px rgba(20,49,67,.025);
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
body .welcome .login-box input:not([type="checkbox"]):hover{border-color:#9fb4c1!important;background:#fff!important}
body .welcome .login-box input:not([type="checkbox"]):focus{
  border-color:#4d9fc2!important;background:#fff!important;box-shadow:0 0 0 4px rgba(77,159,194,.16)!important;
}
body .welcome .password{position:relative}
body .welcome .password input{padding-right:52px!important}
body .welcome .password>button{
  position:absolute;top:50%;right:7px;width:40px;min-width:40px;height:40px;min-height:40px;
  padding:0;border-radius:9px;color:#536b7a;transform:translateY(-50%);
}
body .welcome .password>button:hover{background:#eaf1f5;color:#1d3a4c}
body .welcome .login-password-note{
  position:relative;margin:12px 0 13px;padding:11px 13px 11px 38px;border:1px solid #dbe7ed;
  border-radius:10px;background:#f5f9fb;color:#526875;font-size:11.5px;line-height:1.55;
}
body .welcome .login-password-note::before{
  content:"i";position:absolute;top:50%;left:13px;display:grid;width:16px;height:16px;place-items:center;transform:translateY(-50%);
  border:1px solid #7da9bd;border-radius:50%;color:#447a93;font-size:10px;font-weight:750;line-height:1;
}
body .welcome .login-box .remember-option{
  align-items:center;gap:10px;width:max-content;max-width:100%;margin:0 0 19px;color:#243b4b;
  cursor:pointer;font-size:13.5px;font-weight:620;line-height:1.35;
}
body .welcome .login-box .remember-option input{width:20px;height:20px;margin:0;border-radius:5px;accent-color:#e52330}
body .welcome .login-box .primary.wide{
  min-height:52px;margin-top:0;border-radius:12px;box-shadow:0 8px 18px rgba(213,29,43,.16);
  font-size:14px;font-weight:680;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
}
body .welcome .login-box .primary.wide:hover{box-shadow:0 10px 23px rgba(213,29,43,.22);transform:translateY(-1px)}
body .welcome .login-box .primary.wide:active{box-shadow:0 5px 12px rgba(213,29,43,.15);transform:translateY(0)}
body .welcome .tta-admin-login-link{
  margin-top:15px;padding:3px 5px;border:0;color:#647784;font-size:12px;font-weight:540;text-underline-offset:3px;
}
body .welcome .tta-admin-login-link:hover,
body .welcome .tta-admin-login-link:focus-visible{color:#203b4c;text-decoration:underline}
body .welcome .login-box .cache-notice{
  position:relative;margin:18px 0 0;padding:12px 14px 12px 39px;border:1px solid #ead7ad;
  border-radius:11px;background:#fff9ec;color:#745a28;font-size:11.5px;line-height:1.55;
}
body .welcome .login-box .cache-notice::before{
  content:"";position:absolute;top:15px;left:15px;width:12px;height:12px;border:1.5px solid #b9862f;border-radius:50%;
}
body .welcome .login-box .cache-notice::after{
  content:"";position:absolute;top:18px;left:21px;width:1.5px;height:5px;border-radius:2px;background:#b9862f;
  box-shadow:2px 4px 0 -.25px #b9862f;transform-origin:bottom;transform:rotate(-33deg);
}

@media screen and (max-width:700px){
  body .welcome{gap:10px;padding:18px 12px 28px}
  body .welcome .login-box{padding:25px 22px 26px;border-radius:18px}
  body .welcome .login-box h2{font-size:23px}
  body .welcome .login-box>p.muted{margin-bottom:21px;font-size:13px}
  body .welcome .login-box input:not([type="checkbox"]){height:50px}
}
@media screen and (max-width:380px){
  body .welcome{padding-inline:8px}
  body .welcome .login-box{padding:22px 17px 23px}
  body .welcome .login-box h2{font-size:22px}
  body .welcome .login-password-note{padding-left:35px}
}

/* The PDF control belongs to the same design system as the rest of Dienstly. */
.app .sheet-heading>.duty-pdf-toggle{
  min-width:142px;
  min-height:46px;
  gap:11px;
  padding:7px 9px 7px 12px;
  border-color:rgba(38,75,93,.16);
  border-radius:12px;
  background:#fff;
  color:#294252;
  font-family:var(--dly-font)!important;
  box-shadow:0 5px 15px rgba(24,59,76,.055);
}
.app .duty-pdf-toggle-copy{gap:3px}
.app .duty-pdf-toggle-copy strong{font-size:11px;font-weight:680;letter-spacing:-.01em}
.app .duty-pdf-toggle-copy small{color:#697b87;font-size:7.5px;font-weight:700;letter-spacing:.055em}
.app .sheet-heading>.duty-pdf-toggle[aria-checked="true"]{border-color:rgba(217,39,56,.3);background:#fff7f7;color:#b7212d}
.app .duty-pdf-panel{border-color:rgba(38,75,93,.12);background:#f1f5f6}
.app .duty-pdf-pages{background:#f1f5f6}
.app .duty-pdf-tools{padding:9px 12px;border-color:rgba(38,75,93,.11);background:#fafcfc}
.app .duty-pdf-tools a,.app .duty-pdf-tools button{border-color:#c9d7de;border-radius:8px;color:#25495c;font-family:var(--dly-font)!important}

@media(max-width:600px){
  .app .sheet-heading>.duty-pdf-toggle{min-width:126px;min-height:43px;padding-inline:10px 7px}
}

/* Uitloggen is een destructieve accountactie en daarom bewust rood. */
.app .sidebar .logout{
  min-height:44px;padding:0 12px;border:1px solid transparent;border-radius:11px;
  color:#b72330!important;font-weight:650;
  transition:color .16s ease,background-color .16s ease,border-color .16s ease;
}
.app .sidebar .logout svg{color:#c82735!important}
.app .sidebar .logout:hover,.app .sidebar .logout:focus-visible{
  border-color:#f1c1c5;background:#fff2f3!important;color:#9f1724!important;
}
.app .header-actions .mobile-logout{color:#c52331!important}
.app .header-actions .mobile-logout:hover,.app .header-actions .mobile-logout:focus-visible{background:#fff0f1!important;color:#a91926!important}
:root.dark-mode .app .sidebar .logout,:root.dark-mode .app .sidebar .logout svg,
:root.dark-mode .app .header-actions .mobile-logout{color:#ff7c85!important}
:root.dark-mode .app .sidebar .logout:hover,:root.dark-mode .app .sidebar .logout:focus-visible,
:root.dark-mode .app .header-actions .mobile-logout:hover,:root.dark-mode .app .header-actions .mobile-logout:focus-visible{background:#3a2528!important;color:#ff9da4!important}

/* Eén lichte petrolaccentkleur voor de actieve sectie, ook in de mobiele balk. */
.app .nav-item.active,.app .bottom-nav .active{
  color:#2b7f8d;
  border-color:#70b5bf;
  background:#eef9fa;
  box-shadow:0 4px 12px rgba(43,127,141,.10);
}
.app .nav-item.active>svg,.app .bottom-nav .active>svg,.app .bottom-nav .active .wallboard-nav-icon svg{color:#2b7f8d}
:root.dark-mode .app .nav-item.active,:root.dark-mode .app .bottom-nav .active{
  color:#9bdae0;
  border-color:#4d929d;
  background:#193c43;
  box-shadow:none;
}
:root.dark-mode .app .nav-item.active>svg,:root.dark-mode .app .bottom-nav .active>svg,:root.dark-mode .app .bottom-nav .active .wallboard-nav-icon svg{color:#9bdae0}