/* 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)}
.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{
    padding-top:18px;
    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:12px;left:13px;display:grid;width:16px;height:16px;place-items:center;
  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}