:root{--blue:#155d9e;--navy:#123b60;--teal:#0d8178;--yellow:#ffdf00;--ink:#15334b;--muted:#627688;--line:#e2e9ef;--bg:#f3f6f8}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:36px;letter-spacing:-1.2px;line-height:1.2}h2{font-size:21px;letter-spacing:-.4px}h3{font-size:18px}p{line-height:1.65}a{color:var(--blue)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:fixed;top:-60px;z-index:100;background:var(--yellow);padding:12px}.skip:focus{top:0}#demo-banner{background:#fff3bf;padding:9px 22px;font-size:11px;letter-spacing:.08em;font-weight:700;display:flex;gap:20px;align-items:center;border-bottom:1px solid #ecd77a}#demo-banner span{font-weight:400;letter-spacing:0}#demo-banner button{margin-left:auto;background:transparent;border:0;color:var(--navy);font-weight:700;font-size:12px}.sidebar{position:fixed;inset:0 auto 0 0;width:242px;background:white;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:32px 20px;z-index:10}body.demo .sidebar{top:39px}.logo{display:block;padding:0 1px 27px}.logo img{width:100%;height:auto}.sidebar-label{font-size:9px;letter-spacing:.19em;color:#8a99a6;margin:0 16px 22px;font-weight:700}nav{display:grid;gap:8px}nav button{display:flex;align-items:center;gap:13px;padding:16px;text-align:left;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:22px}nav button span{font-size:14px;font-weight:600}nav button.active{background:#eaf2fa;color:var(--blue)}nav button:hover{background:#f0f5f8}.sidebar-bottom{margin-top:auto;padding:24px 15px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.sidebar-bottom p{font-size:13px;margin-top:18px}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-right:5px}.workspace{margin-left:242px}header{background:#fff;border-bottom:1px solid var(--line);height:87px;padding:0 42px;display:flex;justify-content:space-between;align-items:center}.desktop-title{font-size:13px;color:var(--muted)}.user-area{display:flex;align-items:center;gap:12px}.avatar{background:#e4f0f6;color:var(--blue);width:38px;height:38px;display:grid;place-items:center;font-size:13px;font-weight:bold;border-radius:50%}.user-area strong{font-size:13px;display:block}.user-area small{display:block;font-size:10px;color:var(--muted)}.icon-button{border:0;background:transparent;font-size:24px;color:var(--muted);width:40px;height:44px}.mobile-logo{display:none}main{max-width:1280px;margin:auto;padding:40px 42px 20px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:28px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:.17em;color:var(--teal);margin-bottom:10px}.page-heading p:not(.eyebrow){font-size:14px;color:var(--muted);margin-top:10px}.primary,.secondary,.subtle{border:0;border-radius:8px;padding:13px 20px;min-height:46px;font-weight:700;font-size:13px}.primary{background:var(--yellow);color:var(--navy);box-shadow:0 4px 10px #ddbd0010}.primary:hover{background:#f6d400}.secondary{background:var(--blue);color:#fff}.subtle{background:#fff;border:1px solid var(--line);color:var(--ink)}.toolbar{display:flex;align-items:center;gap:14px;margin-bottom:21px}.toolbar #export{margin-left:auto}.month-control{display:flex;align-items:center;gap:3px;background:white;border:1px solid var(--line);border-radius:8px;padding:3px}.month-control button{border:0;background:transparent;font-size:24px;width:34px;min-height:38px;color:var(--muted)}.month-control input{border:0;width:165px;font-size:14px;font-weight:700;margin:0;padding:6px}.toolbar select{margin:0;font-size:12px}.stats{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;margin-bottom:24px}.stat{padding:25px;background:white;border:1px solid var(--line);border-radius:12px;position:relative;overflow:hidden}.stat>span{font-size:12px;color:var(--muted)}.stat>strong{display:block;font-size:36px;letter-spacing:-1px;margin:11px 0 5px;line-height:1.2}.stat small{font-size:16px;font-weight:400;letter-spacing:0}.stat p{font-size:10px;color:var(--muted)}.main-stat{background:var(--blue);border-color:var(--blue);color:white}.main-stat>span,.main-stat p{color:#dceafb}.overview-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;margin-bottom:24px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}.panel-title .eyebrow{margin-bottom:5px}.legend{color:var(--muted);font-size:10px;white-space:nowrap}.legend i,.holiday-dot{display:inline-block;width:7px;height:7px;background:var(--blue);border-radius:2px;margin-right:5px}.holiday-dot{background:var(--yellow)}.chart{height:170px;display:flex;align-items:stretch;gap:5px;border-bottom:1px solid var(--line);padding:8px 0 0;background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf1f5 40px)}.chart-column{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;position:relative;padding-bottom:23px}.chart-column .bar{background:#6b9fc9;border-radius:3px 3px 0 0;min-height:2px}.chart-column.holiday .bar{background:#dfb900}.chart-column b{position:absolute;bottom:0;width:100%;text-align:center;font-size:8px;color:var(--muted);font-weight:400}.chart-column.holiday b{color:#886500;font-weight:bold}.chart-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin-top:12px}.quick-panel{background:#f0f8f6;border-color:#dcece7;padding:25px}.quick-icon{display:grid;place-items:center;background:white;border:1px solid #d8eae4;border-radius:10px;color:var(--teal);width:39px;height:39px;font-size:24px;margin-bottom:12px}.quick-panel h2{font-size:20px}.quick-panel>p{font-size:12px;color:var(--muted);margin:10px 0 16px}.quick-panel .secondary{font-size:12px;width:100%}.quick-panel p.small{font-size:10px;margin-bottom:0}.text-button{background:none;border:0;padding:10px 0;color:var(--blue);font-size:12px;font-weight:700;min-height:40px}.entry-row{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:15px;align-items:center;padding:17px 0;border-top:1px solid var(--line)}.entry-date{font-size:13px;font-weight:700}.entry-date small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:3px}.vehicle{font-size:12px;background:#f1f5f8;padding:5px 10px;border-radius:5px;display:inline-block;width:fit-content}.entry-duration{font-weight:700;font-size:17px}.entry-duration small{font-weight:400;font-size:10px;color:var(--muted)}.edit-button{background:white;color:var(--blue);border:1px solid var(--line);border-radius:6px;min-height:40px;padding:8px 13px;font-size:11px}.badge{color:#785f00;background:#fff4c0;border-radius:4px;padding:3px 7px;font-size:9px;display:inline-block;margin-top:5px}.footnote{font-size:10px;color:var(--muted);margin:18px 0}.empty{text-align:center;padding:30px;color:var(--muted);font-size:14px}.empty strong{display:block;color:var(--ink);margin-bottom:7px}.small{font-size:12px;color:var(--muted)}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:10px;color:var(--muted);padding:16px 0;gap:15px;margin-top:25px}.account-panel{max-width:560px}.account-panel>p{margin:10px 0 20px}label{display:block;font-size:12px;font-weight:700;margin-bottom:18px}input,select,textarea{display:block;width:100%;background:#fff;color:var(--ink);padding:12px;border:1px solid #cbd8e3;border-radius:7px;margin-top:7px;min-width:0;font-size:16px}input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:1px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-row>label{min-width:0}fieldset{min-width:0;padding:0;border:0;margin:20px 0}legend{font-size:14px;font-weight:700;margin-bottom:12px}fieldset label{margin-bottom:4px}.optional{color:var(--muted);font-weight:400}.holiday-preview{font-size:12px;color:#806300;background:#fff8d8;padding:8px 12px;border-radius:6px}.holiday-preview:empty{display:none}dialog{border:0;border-radius:16px;padding:30px;width:min(520px,calc(100% - 30px));max-height:90dvh;overflow:auto;color:var(--ink);box-shadow:0 25px 100px #001e4260}dialog::backdrop{background:#102d4a80;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:24px}.close{border:0;background:#f2f5f7;border-radius:50%;font-size:25px;color:var(--muted);width:38px;height:38px;flex-shrink:0}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.danger{background:transparent;color:#ae3f3f;border:0;padding:10px;font-size:12px}.error{color:#af3030;font-size:12px}.notice{background:#e7f3ee;color:#166650;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:13px}.notice.error{background:#fce9e9;color:#a72f2f}.team-row{padding:20px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px}.team-row small{display:block;color:var(--muted);font-size:11px}.team-actions{display:flex;gap:8px;flex-wrap:wrap}#info-dialog p{font-size:13px;margin:14px 0}#info-dialog h3{margin-top:22px}.login-card{width:min(440px,calc(100% - 30px));margin:8vh auto;background:white;border:1px solid var(--line);border-radius:16px;padding:36px}.login-card img{width:270px;max-width:100%;margin-bottom:35px}.login-card h1{font-size:32px}.login-card>p{margin:16px 0;color:var(--muted)}.login-card form{margin-top:24px}.login-card .primary{width:100%}
@media(min-width:1450px){main{padding-top:50px}.chart{height:190px}}
@media(max-width:1100px){.sidebar{width:205px}.workspace{margin-left:205px}main{padding:30px 25px}header{padding:0 25px}.stats{gap:12px}.stat{padding:20px}.stat>strong{font-size:31px}.overview-grid{grid-template-columns:1fr}.quick-panel{display:none}.page-heading h1{font-size:30px}}
@media(max-width:760px){body{padding-bottom:78px}.sidebar{position:fixed;inset:auto 0 0;width:100%;height:auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);z-index:30}body.demo .sidebar{top:auto}.sidebar .logo,.sidebar-label,.sidebar-bottom{display:none}nav{display:flex;justify-content:space-around;gap:4px}nav button{flex:1;flex-direction:column;justify-content:center;padding:8px 3px;gap:2px;font-size:21px;border-radius:8px}nav button span{font-size:9px}nav button.active{background:#eaf2fa}.workspace{margin-left:0}header{height:76px;padding:0 20px}.desktop-title{display:none}.mobile-logo{display:block;font-size:27px;font-style:italic;font-weight:900;letter-spacing:-1px;color:var(--blue)}.mobile-logo span{display:block;font-size:8px;letter-spacing:.25em;text-align:right;line-height:1}.user-area{gap:8px}.user-area strong{font-size:11px}.avatar{width:30px;height:30px;font-size:11px}.user-area .icon-button{width:26px}main{padding:28px 18px 8px}.page-heading{display:block;margin-bottom:24px}.page-heading h1{font-size:30px}.page-heading .primary{width:100%;margin-top:23px;font-size:15px;min-height:51px}.page-heading p:not(.eyebrow){font-size:12px}.eyebrow{font-size:8px}.toolbar{flex-wrap:wrap;gap:9px}.toolbar .subtle{font-size:11px;padding:10px}.month-control{flex:1}.month-control input{flex:1;width:140px;font-size:13px}.toolbar>label{width:100%;order:3;margin-bottom:0}.stats{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:19px}.main-stat{grid-column:1/-1;padding:23px}.stat>strong{font-size:29px}.main-stat>strong{font-size:39px;margin:8px 0}.stat>span{font-size:11px}.stat p{font-size:9px}.stat{padding:18px}.panel{padding:21px 17px}.panel h2{font-size:18px}.legend{display:none}.chart{gap:3px;height:155px}.chart-column b{font-size:7px}.overview-grid{margin-bottom:19px}.panel-title{margin-bottom:17px}.text-button{font-size:11px}.entry-row{grid-template-columns:1fr auto;gap:8px;padding:17px 0}.entry-date{grid-column:1;grid-row:1}.entry-duration{grid-column:2;grid-row:1;text-align:right}.vehicle{grid-column:1;grid-row:2;font-size:10px}.edit-button{grid-column:2;grid-row:2;justify-self:end;min-height:36px}.team-row{align-items:flex-start;flex-direction:column}.team-actions{width:100%}.team .panel-title{flex-wrap:wrap}.dialog-actions{flex-wrap:wrap}.dialog-actions .primary{flex:1}.dialog-actions .danger{padding-left:0}dialog{padding:24px 20px}.form-row{gap:12px}#demo-banner{padding:7px 12px;font-size:8px;gap:8px;flex-wrap:wrap;letter-spacing:.04em}#demo-banner span{font-size:9px;order:3;width:100%}#demo-banner button{font-size:10px}footer{align-items:flex-start;font-size:9px}.login-card{padding:28px}.toolbar button{min-height:42px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

#entry-form input{max-width:100%;min-width:0} .duration-result{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#eaf2fa;border-radius:8px;padding:14px;margin:16px 0 8px}.duration-result output{font-size:23px;font-weight:700;color:var(--blue)}
@media(max-width:480px){#entry-form .form-row{grid-template-columns:minmax(0,1fr);gap:0}#entry-form fieldset label{margin-bottom:16px}}

/* A calm, consistent monthly summary. Icons describe the metric, not a trend. */
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#f4f7fb}
.stats{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:18px}
.stat{padding:24px;border-radius:18px;border-color:#e3eaf2;box-shadow:0 5px 20px #15334b05;min-width:0}
.stat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.stat-heading>span:first-child{font-size:12px;font-weight:600;color:#526c82;line-height:1.4}
.stat-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:12px;background:#eef4fb;color:var(--blue)}
.stat-icon svg{width:21px;height:21px}
.stat>strong{font-size:40px;font-weight:650;letter-spacing:-1.6px;font-variant-numeric:tabular-nums;margin:16px 0 12px;overflow-wrap:anywhere}
.stat small{font-size:14px;letter-spacing:0;font-weight:500;opacity:.8}
.stat p{font-size:11px;line-height:1.5;padding-top:13px;border-top:1px solid #e8eef4}
.main-stat{background:linear-gradient(125deg,#133e67 0%,#155d9e 100%);border-color:transparent;box-shadow:0 8px 24px #155d9e1a}
.main-stat .stat-heading>span:first-child,.main-stat p{color:#e1edfa}
.main-stat .stat-icon{color:#ffdf00;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff16}
.main-stat p{border-color:#ffffff24}
.stat:nth-child(3) .stat-icon{background:#fff8d8;color:#876600}
.panel{border-radius:18px;box-shadow:0 5px 20px #15334b03}
.primary,.secondary,.subtle{border-radius:11px}
.month-control{border-radius:11px}.month-control button{border-radius:7px}.month-control button:hover{background:#eef4fb}
.chart-column .bar{background:linear-gradient(to top,#377db4,#7fafd4);border-radius:5px 5px 0 0}
.chart-column.holiday .bar{background:linear-gradient(to top,#c9a500,#f0d454)}
@media(max-width:1100px){.stat{padding:20px}.stat>strong{font-size:34px}}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.main-stat{grid-column:1/-1}.stat{padding:18px;border-radius:16px}.stat-heading{align-items:flex-start;gap:8px}.stat-heading>span:first-child{font-size:11px}.stat-icon{flex-basis:30px;height:30px;border-radius:10px}.stat-icon svg{width:18px;height:18px}.stat>strong{font-size:29px;margin:13px 0 10px;letter-spacing:-1px}.main-stat>strong{font-size:42px}.stat small{font-size:12px}.stat p{font-size:10px}.panel{border-radius:16px}}
@media(max-width:380px){.stat:not(.main-stat) .stat-heading{flex-direction:column-reverse;gap:10px}.stat>strong{font-size:26px}}

/* Original company mark and wordmark in the mobile header. */
@media(max-width:760px){
 header{gap:14px}
 .mobile-logo{flex:0 1 190px;min-width:110px;line-height:0}
 .mobile-logo img{display:block;width:100%;height:auto}
 .user-area{min-width:0;flex:0 1 auto}
 .user-area>div{min-width:0}
 .user-area strong{overflow-wrap:anywhere}
 .user-area .avatar,.user-area .icon-button{flex-shrink:0}
}
@media(max-width:380px){
 header{padding:0 14px;gap:12px}
 .mobile-logo{flex-basis:155px}
 .user-area .avatar{display:none}
}


.stat:nth-child(4) .stat-icon{background:#e9f6f1;color:#0d8178}.stat:nth-child(5) .stat-icon{background:#eeedfb;color:#6255a6}

.toolbar{flex-wrap:wrap}.toolbar>label{margin-bottom:0;min-width:150px;max-width:100%}

.toolbar #export-pdf{margin-left:auto}.toolbar #export{margin-left:0}

.locked-entry{font-size:11px;color:var(--muted);white-space:nowrap}@media(max-width:760px){.locked-entry{grid-column:2;grid-row:2;justify-self:end}}

#info-dialog{max-height:85vh;overflow-y:auto}#info-dialog h3{margin-top:22px}#info-dialog p{margin-top:10px}#info-dialog .dialog-heading{align-items:flex-start}

.mfa-panel{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}.mfa-panel p{margin:12px 0}.mfa-panel h3{margin-top:20px}#mfa-secret{font-family:monospace;font-size:13px}#mfa-recovery-dialog{max-height:85vh;overflow-y:auto}#mfa-recovery-codes{font-size:15px;line-height:1.8;white-space:pre-wrap}#mfa-recovery-dialog input[type=checkbox]{width:auto}

.chart-column .bar.stacked-bar{display:flex;flex-direction:column-reverse;overflow:hidden;background:#6b9fc9}
.chart-segment{display:block;width:100%;flex-shrink:0}
.chart-segment.regular{background:#4d8fc2}.chart-segment.sunday{background:#ed851b}.chart-segment.overtime{background:#239655}.chart-segment.holiday{background:#dfb900}
.chart-legend{justify-content:flex-start;flex-wrap:wrap;gap:6px 16px}
.chart-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.regular-dot{background:#4d8fc2}.sunday-dot{background:#ed851b}.overtime-dot{background:#239655}.chart-legend .holiday-dot{background:#dfb900}
.chart-note{margin-top:8px;font-size:10px;color:var(--muted)}

#pdf-export-status{margin:0 0 20px}.pdf-download-link{display:inline-block;font-weight:700;padding:8px 4px;text-decoration:underline}

#csv-export-status{margin:0 0 20px}#csv-export-status details{margin-top:10px}#csv-export-status summary{cursor:pointer;font-weight:700}#csv-export-status textarea{width:100%;font-family:monospace;font-size:12px}#csv-export-status p{margin-top:8px}

.absences-panel{margin-bottom:24px}.absence-row{display:flex;align-items:center;gap:24px;padding:18px 0;border-top:1px solid #e7e9ed}.absence-row>div{flex:1}.absence-row small{display:block;margin-top:5px;color:#657082}.absence-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}@media(max-width:600px){.absence-row{flex-wrap:wrap;gap:12px}.absence-row>div{flex-basis:100%}.absence-row>span{flex:1}.absences-panel .panel-title{flex-wrap:wrap;gap:12px}.absence-actions{flex-wrap:wrap}}

/* Keep every calendar day readable, including absence circles on small screens. */
.chart{overflow-x:auto;gap:3px;padding-bottom:8px;height:190px}
.chart-column{min-width:32px;padding-bottom:30px}
.chart-column b{width:24px;height:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:50%;font-size:10px;bottom:0;box-sizing:border-box}
.chart-column.sunday b{color:#b65300;font-weight:bold;background:#fff0df}
.chart-column.holiday b{color:#886500;font-weight:bold;background:#fff6cf}
.chart-column.absence-day b{border-color:#d64545}
.chart-legend .absence-dot{border:2px solid #d64545;border-radius:50%;background:transparent;width:11px;height:11px;box-sizing:border-box}
.overview-grid>section{min-width:0}

@media(min-width:761px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}

.stats.day-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.hour-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.day-stats>.stat,.stats.hour-stats>.stat{grid-column:auto;grid-row:auto}
@media(max-width:760px){.day-stats .stat{padding:12px}.day-stats .stat-heading>span:first-child{overflow-wrap:anywhere}}

.stats .stat-heading>span:first-child{min-width:0;hyphens:auto;overflow-wrap:anywhere}
@media(max-width:760px){
 .stats.day-stats,.stats.hour-stats{gap:7px}
 .hour-stats>.stat{padding:10px 7px;border-radius:12px}
 .hour-stats .stat-heading,.hour-stats .stat:not(.main-stat) .stat-heading{flex-direction:column-reverse;align-items:flex-start;gap:6px;min-height:64px;justify-content:flex-end}
 .hour-stats .stat-heading>span:first-child{font-size:9px;line-height:1.35;min-height:36px}
 .hour-stats .stat-icon{flex-basis:24px;width:24px;height:24px;border-radius:7px}
 .hour-stats .stat-icon svg{width:16px;height:16px}
 .hour-stats>.stat>strong{font-size:clamp(15px,4vw,26px);letter-spacing:-.6px;margin:12px 0 0;white-space:nowrap;overflow-wrap:normal}
 .hour-stats .stat small{font-size:8px;display:block;margin-top:3px}
 .hour-stats .stat p{font-size:8px}
}

/* Highlight day totals; hour cards keep the neutral white surface. */
.stats .day-highlight{color:#fff;border-color:transparent}
.stats .workdays-stat{background:linear-gradient(125deg,#133e67 0%,#155d9e 100%);box-shadow:0 8px 24px #155d9e1a}
.stats .vacation-stat{background:linear-gradient(125deg,#145c40 0%,#208354 100%);box-shadow:0 8px 24px #2083541a}
.stats .sick-stat{background:linear-gradient(125deg,#862d36 0%,#b63f4a 100%);box-shadow:0 8px 24px #b63f4a1a}
.stats .day-highlight .stat-heading>span:first-child,.stats .day-highlight p{color:#fff}
.stats .day-highlight .stat-icon{color:#fff;background:#ffffff16;box-shadow:inset 0 0 0 1px #ffffff26}
.stats .workdays-stat .stat-icon{color:#ffdf00}
.stats .day-highlight p{border-color:#ffffff30}

/* Keep employee hour summaries focused on labels and values. */
#shell[data-role="employee"] .hour-stats .stat p{display:none}

/* One shared value style and an inline unit for every hourly metric. */
.stats.hour-stats>.stat>strong{display:flex;align-items:baseline;gap:5px;flex-wrap:nowrap;font-size:34px;line-height:1.2;letter-spacing:-1px;white-space:nowrap;overflow-wrap:normal}
.stats.hour-stats>.stat>strong>small{display:inline;margin:0;flex-shrink:0;font-size:12px;line-height:inherit;letter-spacing:0}
@media(max-width:1100px) and (min-width:761px){.stats.hour-stats>.stat>strong{font-size:26px}.stats.hour-stats>.stat{padding:16px}}
@media(max-width:760px){
 .stats.hour-stats>.stat>strong{font-size:clamp(10px,3vw,22px);letter-spacing:-.4px;gap:3px}
 .stats.hour-stats>.stat>strong>small{font-size:clamp(7px,1.6vw,10px);display:inline;margin:0}
}

/* Metric-specific icon colors stay stable when cards are reordered. */
.hour-stats .stat-icon.icon-yellow{color:#b88a00;background:#fff8d8}
.hour-stats .stat-icon.icon-green{color:#239655;background:#e9f6ed}
.hour-stats .stat-icon.icon-orange{color:#d66a00;background:#fff0df}

.hour-stats .stat-icon.icon-blue{color:var(--blue);background:#eef4fb}

.annual-toolbar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.annual-toolbar label{margin:0;min-width:180px}.annual-toolbar label:first-child{flex:1}.annual-toolbar input{max-width:150px}
.annual-person{margin:24px 0 16px}.annual-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.annual-summary article{background:#f0f5fa;border:1px solid #e3eaf2;border-radius:12px;padding:16px}.annual-summary span{display:block;font-size:11px;color:var(--muted)}.annual-summary strong{display:block;font-size:24px;margin-top:8px;font-variant-numeric:tabular-nums}.annual-summary small{font-size:11px;font-weight:400}
.annual-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;max-height:650px}
.annual-table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.annual-table th,.annual-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.annual-table thead th{background:#eef4fa;position:sticky;top:0;z-index:2;white-space:normal;min-width:120px;font-size:11px}.annual-table thead small{display:block;font-weight:400;color:var(--muted);margin-top:3px}
.annual-table tr>:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:1;min-width:130px}.annual-table thead tr>:first-child{background:#eef4fa;z-index:3}
.annual-table tbody tr:nth-child(even) td,.annual-table tbody tr:nth-child(even) th{background:#f8fafc}.annual-table tfoot th,.annual-table tfoot td{background:#e5eff8;font-weight:700;border-bottom:0}.annual-table tfoot tr>:first-child{background:#e5eff8}
.annual-table .text-button{font-size:12px;padding:0;min-height:32px}
@media(max-width:760px){.annual-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.annual-toolbar label{min-width:120px}.annual-toolbar label:first-child{flex-basis:100%}.annual-summary strong{font-size:21px}nav button span{font-size:8px}}

/* Review: long names, keyboard access and phone safe areas. */
.sidebar{overflow-y:auto}
.entry-row>*,.team-row>div,.annual-summary article{min-width:0}
.entry-date,.team-row strong,.annual-person,.annual-summary strong{overflow-wrap:anywhere}
.vehicle{max-width:100%;overflow-wrap:anywhere}
#team .panel-title{flex-wrap:wrap}
.annual-toolbar label{max-width:100%}
.annual-summary strong{font-variant-numeric:tabular-nums}
.chart:focus-visible,.annual-table-wrap:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media(max-width:760px){
 body{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
 header{height:auto;min-height:76px;padding-top:12px;padding-bottom:12px}
 .toolbar select,.month-control input{font-size:16px}
 .month-control{min-width:0}
 .user-area .icon-button{width:44px;min-height:44px}
 .edit-button,.text-button,.close{min-height:44px}
 .close{min-width:44px}
 .pdf-download-link{min-height:44px;padding:11px 6px}
 .annual-table .text-button{min-height:44px}
}

.stats.allowance-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.allowance-stats strong{font-size:clamp(20px,3vw,34px);overflow-wrap:anywhere}
button.chart-column{border:0;background:transparent;color:inherit;border-radius:4px;padding-left:0;padding-right:0;font:inherit;cursor:pointer}
.chart-column:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.chart-detail{margin-top:12px;padding:10px;background:#eef4fa;border-radius:8px;min-height:44px}
.chart-segment.regular,.regular-dot{background:#155d9e}
.chart-segment.overtime,.overtime-dot{background:#239655}
.chart-segment.sunday,.chart-segment.sundayOvertime,.sunday-dot,.sunday-over-dot{background:#d66a00}
.chart-segment.sundayOvertime{background:repeating-linear-gradient(135deg,#d66a00 0 4px,#efa568 4px 6px)}
.chart-segment.holiday,.chart-segment.holidayOvertime,.holiday-dot,.holiday-over-dot{background:#b88a00}

.chart-segment.night,.night-dot{background:#6255a6}
.hour-stats .stat-icon.icon-night{color:#6255a6;background:#eeedfb}
@media(max-width:760px){.allowance-stats .stat{padding:14px}.allowance-stats strong{font-size:22px}.allowance-stats .stat p{font-size:10px}}

.chart-segment{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;line-height:1;color:white;overflow:hidden;white-space:nowrap}
.chart-segment.overtime,.chart-segment.sunday,.chart-segment.sundayOvertime,.chart-segment.holiday,.chart-segment.holidayOvertime{color:#101b26}

/* Date controls must fit narrow mobile dialogs. */
.form-row>label{min-width:0}input[type="date"]{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0}input::-webkit-date-and-time-value{text-align:left}
@media(max-width:600px){#absence-form .form-row,#entry-form .form-row{grid-template-columns:1fr}}
.chart-legend .holiday-dot,.chart-legend .holiday-over-dot{background:#b88a00}

.shift-board{margin-top:24px}.shift-card{padding:22px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.shift-card p{margin:7px 0}.shift-card details{margin:12px 0}.shift-badge{font-size:12px;background:#eaf2fa;color:var(--blue);border-radius:20px;padding:5px 12px}.shift-card .panel-title{margin-bottom:8px}.shift-card summary{cursor:pointer}#shift-form{max-width:680px;margin-top:22px}#shift-form textarea{width:100%;box-sizing:border-box}#contact-name{margin-bottom:20px;font-weight:bold}#shift-status{margin-bottom:16px}.team-row small{overflow-wrap:anywhere}
@media(max-width:760px){nav{overflow-x:auto}.sidebar nav button{flex-shrink:0;min-width:64px}#shift-form .form-row{grid-template-columns:minmax(0,1fr)}.shift-card .panel-title{align-items:flex-start;flex-wrap:wrap}.shift-board>.panel-title{flex-wrap:wrap;gap:12px}}

.shift-responses{margin:18px 0;padding:16px;background:#f4f8fb;border:1px solid var(--line);border-radius:12px}.shift-responses h4{margin:0 0 10px}.shift-response-actions{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.shift-response-actions button{min-height:44px}.response-yes{color:#16733b;font-weight:700}.response-no{color:#a52f2f;font-weight:700}

#shift-form .shift-time-group{min-inline-size:0;width:100%;margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:12px}#shift-form .shift-time-group legend{padding:0 6px;font-weight:700}#shift-form .shift-time-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}#shift-form .shift-time-fields label{min-width:0;margin:0}#shift-form input[type=date],#shift-form input[type=time]{display:block;box-sizing:border-box;min-width:0;min-inline-size:0;max-width:100%;width:100%;height:48px;font-size:16px;line-height:normal;padding:10px 12px}#shift-form input::-webkit-datetime-edit{min-width:0;padding:0}#shift-form input::-webkit-date-and-time-value{min-height:24px;text-align:left}.shift-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.shift-dates dt{font-size:12px;color:var(--muted)}.shift-dates dd{margin:3px 0 0;font-size:16px;font-weight:600}
@media(max-width:560px){#shift-form .shift-time-fields,.shift-dates{grid-template-columns:minmax(0,1fr)}#shift-form .shift-time-group{padding:12px}.shift-response-actions{display:grid;grid-template-columns:minmax(0,1fr)}.shift-response-actions button{width:100%;white-space:normal;line-height:1.4;padding:12px}}

/* Full-width absence dates, aligned with the absence type selector. */
#absence-form .form-row{grid-template-columns:minmax(0,1fr);gap:0}#absence-form .form-row>label{width:100%;min-width:0}#absence-form input[type=date],#absence-form select[name=kind]{box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-inline-size:0;height:50px;font-size:16px;padding:12px}#absence-form input[type=date]::-webkit-datetime-edit{padding:0;min-width:0}#absence-form input[type=date]::-webkit-date-and-time-value{min-height:24px;text-align:left}
/* Give the month picker its own row instead of shrinking beside export buttons. */
@media(max-width:760px){.toolbar .month-control{flex:0 0 100%;width:100%;max-width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px;padding:4px}.toolbar .month-control button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;line-height:1;font-size:24px}.toolbar .month-control input{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-inline-size:0;height:44px;flex:none;padding:8px 4px;font-size:16px;font-weight:600;line-height:normal;text-align:center}.toolbar .month-control input::-webkit-datetime-edit{padding:0;min-width:0}.toolbar .month-control input::-webkit-date-and-time-value{min-height:24px;text-align:center}.toolbar #export-pdf{margin-left:0}}

/* Mobile administration: readable lower overview and fully visible navigation. */
@media(max-width:760px){
 #shell[data-role=admin] .sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;overflow:visible}
 #shell[data-role=admin] .sidebar nav button{min-width:0;min-height:54px;padding:6px 4px;gap:2px;font-size:20px}
 #shell[data-role=admin] .sidebar nav button span{font-size:11px;line-height:1.25;white-space:normal}
 body:has(#shell[data-role=admin]:not([hidden])){padding-bottom:calc(148px + env(safe-area-inset-bottom))}
 #shell[data-role=admin] .entries-panel .panel-title{align-items:flex-start;flex-wrap:wrap;gap:8px}
 #shell[data-role=admin] .entry-row{grid-template-columns:minmax(0,1fr) 88px;grid-template-areas:"details duration" "vehicle action";align-items:start;gap:12px;padding:18px 0}
 #shell[data-role=admin] .entry-date{grid-area:details;font-size:14px;line-height:1.5}
 #shell[data-role=admin] .entry-date small{font-size:12px;line-height:1.5;margin-top:5px;overflow-wrap:anywhere}
 #shell[data-role=admin] .entry-duration{grid-area:duration;font-size:20px;line-height:1.3;text-align:right;white-space:nowrap}
 #shell[data-role=admin] .entry-duration small{display:block;font-size:11px;margin-top:3px}
 #shell[data-role=admin] .entry-row .vehicle{grid-area:vehicle;align-self:center;justify-self:start;max-width:100%;font-size:12px}
 #shell[data-role=admin] .entry-row .edit-button,#shell[data-role=admin] .entry-row .locked-entry{grid-area:action;justify-self:end;align-self:center;max-width:100%;font-size:12px}
 #shell[data-role=admin] .absence-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
 #shell[data-role=admin] .absence-row>div{grid-column:1/-1;min-width:0;overflow-wrap:anywhere}
 #shell[data-role=admin] .absence-row>span{font-size:12px;line-height:1.5;align-self:center;overflow-wrap:anywhere}
 #shell[data-role=admin] .allowance-stats .stat{min-width:0;padding:14px 10px}
 #shell[data-role=admin] .allowance-stats strong{font-size:clamp(18px,5vw,24px);line-height:1.3;letter-spacing:-.5px}
 #shell[data-role=admin] footer{flex-direction:column;align-items:flex-start;gap:4px;font-size:11px;line-height:1.5}
 #shell[data-role=admin] footer .text-button{padding-left:0;text-align:left}
}

/* Graphic review: keep labels, actions and long content readable at narrow widths. */
.panel-title>div,.dialog-heading h2{min-width:0;overflow-wrap:anywhere}
.chart-legend{font-size:11px;line-height:1.5;gap:8px 16px}
.team-actions button,.dialog-actions button{white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){
 #shell[data-role=employee] .sidebar nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;overflow:visible}
 #shell[data-role=employee] .sidebar nav button{min-width:0;min-height:58px;padding:6px 2px}
 #shell[data-role=employee] .sidebar nav button span{font-size:11px;line-height:1.25;white-space:normal}
 .toolbar #export,.toolbar #export-pdf{flex:1 1 120px;min-height:46px;font-size:12px;margin-left:0}
 .stats.allowance-stats .stat-heading{flex-direction:column-reverse;align-items:flex-start;gap:8px}
 .stats.allowance-stats .stat-heading>span:first-child{font-size:12px}
 .stats.allowance-stats .stat p{font-size:11px}
 footer{flex-wrap:wrap;font-size:11px;line-height:1.5}
 dialog{max-height:calc(100dvh - 32px);scroll-padding-block:20px}
 .duration-result{flex-wrap:wrap}
}