/* Approved My Hours composition, desktop and touch layouts. */
html body #app #week .week-page{padding-bottom:calc(100px + env(safe-area-inset-bottom))!important}
html body #app #week .week-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:0 0 16px!important;padding:0!important;min-height:0!important}
html body #app #week .week-head h2{font-size:26px!important;margin:0 0 5px!important}
html body #app #week .week-stats{display:none!important}
html body #app #week .mh-week-status{display:inline-flex!important;align-items:center!important;font-size:12px!important;white-space:nowrap!important;max-width:180px}
html body #app #week .mh-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;flex-wrap:wrap!important;margin:0 0 18px!important}
html body #app #week .mh-toolbar .week-controls{display:grid!important;grid-template-columns:40px minmax(190px,auto) 40px!important;gap:8px!important;position:static!important;margin:0!important;width:auto!important;max-width:100%!important;transform:none!important}
html body #app #week .mh-toolbar .week-controls>button{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;position:static!important;margin:0!important;padding:0!important;inset:auto!important;transform:none!important}
html body #app #week .mh-toolbar .week-date{height:40px!important;min-height:40px!important;position:static!important;padding:0 14px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:none!important;inset:auto!important;width:auto!important}
html body #app #week .mh-toolbar .week-date b{font-size:13px!important;white-space:nowrap!important}
html body #app #week .mh-toolbar-actions{display:flex!important;gap:8px!important;align-items:center!important}
html body #app #week .mh-toolbar-actions>button{position:static!important;inset:auto!important;margin:0!important;min-height:40px!important;height:40px!important;width:auto!important;padding:0 14px!important;font-size:13px!important;transform:none!important}
html body #app #week .mh-summary{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin:0 0 16px!important}
html body #app #week .mh-summary>.mh-metric{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:8px!important;min-width:0!important;border:1px solid #8496b542!important;border-radius:12px!important;padding:14px!important;background:var(--card,#fff)!important;font-size:12px!important;line-height:1.35!important}
html body #app #week .mh-summary>.mh-metric small{font-size:12px!important}
html body #app #week .mh-summary>.mh-metric b{font-size:21px!important;white-space:nowrap!important;font-variant-numeric:tabular-nums}
html body #app #week .mh-column-head{display:grid!important;grid-template-columns:84px minmax(130px,1fr) 92px 116px 216px!important;gap:16px!important;padding:12px 18px!important;background:#203a55!important;color:#cfdef0!important;font-size:11px!important}
html body #app #week .mh-column-head>span:nth-child(3){text-align:right}
html body #app #week #weekRows>.week-row{min-height:76px!important}
html body #app #week .samsara-employee-bar{margin:0 0 16px!important;padding:10px 14px!important;border-radius:11px!important;min-height:40px!important}
html body #app #week .week-actions-card{margin:16px 0 0!important;padding:18px!important;border-radius:14px!important}
html body #app #week .week-actions-card h3{margin:0 0 6px!important}
html body #app #week .week-table-card>.week-rate-breakdown{display:none!important}
html body #app #week .week-table-card{border-radius:14px!important;overflow:hidden!important}
html body[data-employee-theme=dark] #app #week .mh-summary>.mh-metric,html body[data-theme=dark] #app #week .mh-summary>.mh-metric{background:#1b3048!important;color:#c4d4e6!important}
html body #app #week .mh-summary>.mh-metric{background:#1b3048!important;color:#c4d4e6!important}
html body #app #week .mh-summary>.mh-metric b{color:#f0f5ff!important}
@media(min-width:901px) and (max-width:1150px){html body #app #week .mh-column-head{grid-template-columns:76px minmax(100px,1fr) 76px 94px 190px!important;gap:10px!important;padding:12px 14px!important}}
@media(max-width:900px),(pointer:coarse),(orientation:landscape) and (max-height:750px) and (max-width:1200px){
html body #app #week .mh-column-head{display:none!important}
html body #app #week .week-head h2{font-size:23px!important}
html body #app #week .mh-toolbar{gap:10px!important}
html body #app #week .mh-toolbar .week-controls{grid-template-columns:42px minmax(0,1fr) 42px!important;width:100%!important}
html body #app #week .mh-toolbar .week-controls>button{width:42px!important;height:44px!important;min-height:44px!important}
html body #app #week .mh-toolbar .week-date{height:44px!important;min-height:44px!important;padding:0 6px!important}
html body #app #week .mh-toolbar-actions{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
html body #app #week .mh-toolbar-actions>button{width:100%!important;min-height:44px!important;height:auto!important;padding:10px 8px!important;font-size:12px!important;white-space:normal!important}
html body #app #week .mh-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
html body #app #week .mh-summary>.mh-metric:first-child{grid-column:1/-1!important}
html body #app #week .mh-summary>.mh-metric{padding:12px!important;gap:6px!important}
html body #app #week .mh-summary>.mh-metric b{font-size:20px!important}
html body #app #week #weekRows>.week-row{display:grid!important;grid-template-columns:64px minmax(0,1fr) auto!important;gap:10px!important;padding:13px 12px!important;min-height:0!important}
html body #app #week #weekRows>.week-row>.week-day{grid-column:1!important;grid-row:1/3!important;width:64px!important;min-width:0!important;min-height:58px!important;padding:9px 5px!important;margin:0!important;align-self:start!important}
html body #app #week #weekRows>.week-row>.week-day small{font-size:10px!important;line-height:1.4!important}
html body #app #week #weekRows>.week-row>.week-time{grid-column:2!important;grid-row:1!important;min-width:0!important;margin:0!important}
html body #app #week .week-time>b{font-size:14px!important;line-height:1.3!important}
html body #app #week .week-time small{font-size:11px!important;line-height:1.4!important;overflow-wrap:anywhere!important}
html body #app #week #weekRows>.week-row>strong{grid-column:3!important;grid-row:1!important;align-self:start!important;white-space:nowrap!important;font-size:13px!important;margin:0!important;font-variant-numeric:tabular-nums}
html body #app #week #weekRows>.week-row>.week-row-status{grid-column:2/4!important;grid-row:2!important;justify-self:start!important;margin:0!important;font-size:11px!important;line-height:1.3!important}
html body #app #week #weekRows>.week-row>.week-row-actions{grid-column:2/4!important;grid-row:3!important;display:flex!important;flex-wrap:wrap!important;gap:7px!important;width:100%!important;margin:0!important;justify-content:flex-start!important}
html body #app #week #weekRows>.week-row>.week-row-actions>button{min-height:42px!important;height:auto!important;min-width:55px!important;width:auto!important;padding:9px 11px!important;font-size:12px!important;border-radius:9px!important;margin:0!important}
html body #app #week #weekRows>.week-row>.week-day-details{grid-column:1/-1!important;grid-row:4!important}
html body #app #week .week-actions-card{padding:15px!important;margin-bottom:12px!important}
html body #app #week #weekSubmitButton{min-height:46px!important}
}
@media(min-width:601px) and (max-width:900px){html body #app #week .mh-summary{grid-template-columns:repeat(5,minmax(0,1fr))!important}html body #app #week .mh-summary>.mh-metric:first-child{grid-column:auto!important}}

/* Keep the live week label inside its grid cell after toolbar relocation. */
html body #app #week .mh-toolbar .week-controls{align-items:center!important}
html body #app #week .mh-toolbar .week-controls>button:first-child{grid-column:1!important;grid-row:1!important}
html body #app #week .mh-toolbar .week-controls>button:last-child{grid-column:3!important;grid-row:1!important}
html body #app #week .mh-toolbar .week-controls>.week-date{grid-column:2!important;grid-row:1!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;border:1px solid #405770!important;border-radius:10px!important;background:#122a42!important;overflow:hidden!important}
html body #app #week .mh-toolbar .week-controls>.week-date>#weekRange{display:flex!important;align-items:center!important;justify-content:center!important;position:static!important;inset:auto!important;transform:none!important;float:none!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#edf4ff!important;box-shadow:none!important;box-sizing:border-box!important;font-size:13px!important;line-height:1.3!important;white-space:nowrap!important}

/* Phone layout: one compact summary surface and content-sized rows. */
@media(max-width:600px){
html body #app #week{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:0!important;margin:0!important;overflow:visible!important}
html body #app #week .week-page{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;padding:0 0 12px!important;margin:0!important}
html body #app #week .week-page *{box-sizing:border-box}
html body #app #week .week-head{gap:8px!important;margin-bottom:10px!important}
html body #app #week .week-head h2{font-size:21px!important;margin-bottom:0!important}
html body #app #week .week-head>div>.small{display:none!important}
html body #app #week .mh-toolbar{gap:8px!important;margin-bottom:10px!important}
html body #app #week .mh-toolbar .week-controls{gap:6px!important;grid-template-columns:44px minmax(0,1fr) 44px!important}
html body #app #week .mh-toolbar .week-controls>button{width:44px!important;min-width:44px!important}
html body #app #week .mh-toolbar-actions{gap:7px!important}
html body #app #week .mh-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;padding:0 12px!important;margin:0 0 10px!important;background:#1b3048!important;border:1px solid #8496b542!important;border-radius:12px!important;overflow:hidden!important}
html body #app #week .mh-summary>.mh-metric{border:0!important;border-radius:0!important;background:transparent!important;padding:8px 0!important;gap:3px!important;line-height:1.25!important;font-size:11px!important}
html body #app #week .mh-summary>.mh-metric:first-child{grid-column:1/-1!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid #8496b52b!important;padding:9px 0!important}
html body #app #week .mh-summary>.mh-metric:nth-child(3),html body #app #week .mh-summary>.mh-metric:nth-child(5){padding-left:12px!important}
html body #app #week .mh-summary>.mh-metric small{font-size:11px!important}
html body #app #week .mh-summary>.mh-metric b{font-size:16px!important;line-height:1.2!important}
html body #app #week .mh-summary>.mh-metric:first-child b{font-size:20px!important}
html body #app #week .week-table-card{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important}
html body #app #week #weekRows{padding:0!important;min-width:0!important;width:100%!important}
html body #app #week #weekRows>.week-row{grid-template-columns:60px minmax(0,1fr) auto!important;gap:5px 9px!important;padding:10px!important;width:100%!important;min-width:0!important}
html body #app #week #weekRows>.week-row>.week-day{width:60px!important;min-height:52px!important;padding:7px 3px!important;grid-row:1/3!important;gap:4px!important}
html body #app #week #weekRows>.week-row>.week-day b{font-size:12px!important}
html body #app #week #weekRows>.week-row>.week-day small{font-size:9px!important;white-space:nowrap!important}
html body #app #week .week-time>b{font-size:13px!important}
html body #app #week .week-time small{font-size:10px!important;line-height:1.25!important}
html body #app #week #weekRows>.week-row>strong{font-size:12px!important}
html body #app #week #weekRows>.week-row>.week-row-status{grid-column:2/4!important;grid-row:2!important;font-size:10px!important;padding:3px 7px!important;max-width:100%!important}
html body #app #week #weekRows>.week-row>.week-row-actions{grid-column:2/4!important;grid-row:3!important;gap:5px!important;padding:0!important}
html body #app #week #weekRows>.week-row>.week-row-actions>button{min-width:44px!important;min-height:44px!important;height:44px!important;padding:0 9px!important;font-size:11px!important}
html body #app #week #weekRows>.week-row>.week-day-details{min-width:0!important;overflow-wrap:anywhere!important}
html body #app #week .week-total{padding:11px 12px!important;min-height:0!important;font-size:14px!important}
html body #app #week .week-actions-card{padding:12px!important;margin:10px 0 0!important;min-height:0!important;height:auto!important}
html body #app #week .week-actions-card h3{font-size:15px!important;margin:0!important}
html body #app #week #weekApprovalDestination{font-size:11px!important;line-height:1.35!important;margin-top:4px!important}
html body #app #week #weekSubmitFeedback{font-size:11px!important;line-height:1.35!important;margin:7px 0!important}
html body #app #week #weekSubmitFeedback:empty{display:none!important}
html body #app #week #weekSubmitButton{width:100%!important;min-height:44px!important;margin:8px 0 0!important;padding:10px!important;font-size:12px!important}
html body #app #week #weekNotice{font-size:11px!important;padding:8px!important;margin:8px 0 0!important;line-height:1.3!important}
html body #app #week #weekNotice span{font-size:10px!important;line-height:1.3!important}
html body #app #week .samsara-employee-bar{padding:8px 10px!important;min-height:0!important;margin:0 0 10px!important;font-size:11px!important}
html body #app:has(#week:not(.hidden))>main{width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;padding:10px 12px calc(76px + env(safe-area-inset-bottom))!important}
}

@layer employee-hours-layout {
/* Approved compact mobile days; colors follow the selected employee theme. */
html body #app #week{--mh-surface:#ffffff;--mh-soft:#f1f5f9;--mh-text:#172536;--mh-muted:#526276;--mh-border:#cbd5e1;--mh-button:#e8eef5;--mh-good:#18734c}
html body[data-employee-theme=dark] #app #week{--mh-surface:#192637;--mh-soft:#111c29;--mh-text:#edf3ff;--mh-muted:#b3bfd0;--mh-border:#344253;--mh-button:#26374d;--mh-good:#75dbad}
html body[data-hgvera-suite=on] #app #week{--mh-surface:#173354;--mh-soft:#102b49;--mh-text:#edf4ff;--mh-muted:#b6c9e2;--mh-border:#3b5877;--mh-button:#244361;--mh-good:#75dbad}
html body #app #week .mh-day-trigger{display:none!important}
html body #app #week .mh-summary,html body #app #week .mh-summary>.mh-metric{background:var(--mh-surface)!important;color:var(--mh-muted)!important;border-color:var(--mh-border)!important}
html body #app #week .mh-summary>.mh-metric b{color:var(--mh-text)!important}
html body #app #week .mh-toolbar .week-controls>.week-date{background:var(--mh-soft)!important;border-color:var(--mh-border)!important}
html body #app #week .mh-toolbar .week-controls>.week-date>#weekRange{color:var(--mh-text)!important}
html body #app #week .mh-column-head{background:var(--mh-soft)!important;color:var(--mh-muted)!important}
@media(max-width:900px),(pointer:coarse),(orientation:landscape) and (max-height:750px) and (max-width:1200px){
html body #app #week .week-page{min-width:0!important;width:100%!important;min-height:0!important;height:auto!important;padding:0 0 12px!important}
html body #app #week{padding-bottom:0!important}
html body #app #week .week-head{margin-bottom:10px!important}
html body #app #week .week-head>div>.small{display:none!important}
html body #app #week .mh-toolbar{margin-bottom:10px!important;gap:8px!important}
html body #app #week .mh-summary{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0 8px!important;padding:0 12px 10px!important;margin:0 0 10px!important;border:1px solid var(--mh-border)!important;border-radius:12px!important}
html body #app #week .mh-summary>.mh-metric{min-width:0!important;padding:8px 0 0!important;border:0!important;border-radius:0!important;gap:3px!important;font-size:11px!important;line-height:1.3!important}
html body #app #week .mh-summary>.mh-metric:first-child{grid-column:1/-1!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;padding:9px 0!important;border-bottom:1px solid var(--mh-border)!important}
html body #app #week .mh-summary>.mh-metric small{font-size:12px!important}
html body #app #week .mh-summary>.mh-metric b{font-size:14px!important;line-height:1.25!important}
html body #app #week .mh-summary>.mh-metric:first-child b{font-size:22px!important}
html body #app #week #weekRows{padding:0!important}
html body #app #week .week-table-card{margin:0!important;background:var(--mh-surface)!important;border:1px solid var(--mh-border)!important}
html body #app #week #weekRows>.week-row{display:block!important;position:relative!important;min-height:0!important;height:auto!important;width:100%!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-bottom:1px solid var(--mh-border)!important;background:var(--mh-surface)!important;color:var(--mh-text)!important;opacity:1!important}
html body #app #week #weekRows>.week-row:last-child{border-bottom:0!important}
html body #app #week #weekRows>.week-row>.mh-day-trigger{display:grid!important;grid-template-columns:65px minmax(0,1fr) 62px 12px!important;grid-template-rows:auto auto!important;align-items:center!important;gap:5px 8px!important;position:static!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:62px!important;height:auto!important;margin:0!important;padding:9px 10px!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--mh-text)!important;box-shadow:none!important;transform:none!important;text-align:left!important;font-weight:400!important;box-sizing:border-box!important}
html body #app #week #weekRows>.week-row>.mh-day-trigger:focus-visible{outline:2px solid var(--employee-accent,#1677f5)!important;outline-offset:-3px!important}
html body #app #week .mh-day-trigger .mh-date{font-size:12px!important;font-weight:700!important;white-space:nowrap!important;color:var(--mh-text)!important}
html body #app #week .mh-day-trigger .mh-shift{font-size:12px!important;white-space:nowrap!important;color:var(--mh-text)!important}
html body #app #week .mh-day-trigger .mh-hours{font-size:13px!important;font-weight:700!important;text-align:right!important;white-space:nowrap!important;color:var(--mh-text)!important}
html body #app #week .mh-day-trigger .mh-chevron{font-size:20px!important;color:var(--mh-muted)!important;text-align:center!important}
html body #app #week .expanded .mh-day-trigger .mh-chevron{transform:rotate(90deg)!important}
html body #app #week .mh-day-trigger .mh-job-line{grid-column:1/-1!important;display:flex!important;gap:10px!important;align-items:baseline!important;min-width:0!important;font-size:11px!important;line-height:1.4!important;color:var(--mh-muted)!important}
html body #app #week .mh-day-trigger .mh-job{flex:1!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}
html body #app #week .mh-day-trigger .mh-reg{flex:0 1 auto!important;max-width:45%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--mh-text)!important}
html body #app #week .mh-status-dot{display:inline-block!important;width:6px!important;height:6px!important;border-radius:50%!important;background:var(--mh-good)!important;margin-right:5px!important;vertical-align:middle!important}
html body #app #week .mh-status-dot.pending{background:#8a96a6!important}
html body #app #week #weekRows>.week-row>.week-day,html body #app #week #weekRows>.week-row>.week-time,html body #app #week #weekRows>.week-row>strong{display:none!important}
html body #app #week #weekRows>.week-row:not(.expanded)>.week-row-status,html body #app #week #weekRows>.week-row:not(.expanded)>.week-row-actions,html body #app #week #weekRows>.week-row:not(.expanded)>.week-day-details{display:none!important}
html body #app #week #weekRows>.week-row.expanded>.week-row-status{display:inline-flex!important;margin:0 10px 8px!important;font-size:11px!important}
html body #app #week #weekRows>.week-row.expanded>.week-row-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;width:auto!important;margin:0!important;padding:0 10px 10px!important}
html body #app #week #weekRows>.week-row>.week-row-actions>.week-details-toggle{display:none!important}
html body #app #week #weekRows>.week-row .week-row-actions button{min-height:44px!important;width:auto!important;min-width:60px!important;font-size:12px!important}
html body #app #week #weekRows>.week-row.expanded>.week-day-details{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:0!important;padding:12px!important;background:var(--mh-soft)!important;color:var(--mh-text)!important;border:0!important;border-top:1px solid var(--mh-border)!important;border-radius:0!important;min-width:0!important}
html body #app #week .week-day-details :is(b,strong){color:var(--mh-text)!important;overflow-wrap:anywhere!important}
html body #app #week .week-day-details small{color:var(--mh-muted)!important}
html body #app #week .week-day-details .week-detail-entry{grid-column:1/-1!important;min-width:0!important}
html body #app #week .week-table-card>.week-total{display:none!important}
html body #app #week .week-actions-card{margin:10px 0 0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important}
html body #app #week .week-actions-card>div:first-child{display:none!important}
html body #app #week #weekSubmitFeedback{margin:0 0 6px!important;font-size:11px!important;color:var(--mh-text)!important}
html body #app #week #weekSubmitFeedback:empty{display:none!important}
html body #app #week #weekSubmitButton{margin:0!important;min-height:44px!important;font-size:13px!important;width:100%!important}
html body #app #week #weekNotice{padding:7px 0 0!important;margin:0!important;background:transparent!important;border:0!important;color:var(--mh-muted)!important;font-size:11px!important}
html body #app #week #weekNotice span{display:none!important}
html body #app #week .samsara-employee-bar{min-height:0!important;margin:0 0 8px!important;padding:6px 10px!important;font-size:11px!important;background:var(--mh-soft)!important;color:var(--mh-muted)!important;border-color:var(--mh-border)!important}
html body #app:has(#week:not(.hidden))>main{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:10px 12px calc(76px + env(safe-area-inset-bottom))!important;min-height:0!important;height:auto!important}
}
@media(max-width:350px){
html body #app #week #weekRows>.week-row>.mh-day-trigger{grid-template-columns:60px minmax(0,1fr) 55px 10px!important;column-gap:5px!important;padding-left:8px!important;padding-right:8px!important}
html body #app #week .mh-summary{column-gap:5px!important;padding-left:10px!important;padding-right:10px!important}
html body #app #week .mh-summary>.mh-metric b{font-size:13px!important}
}
@media(orientation:landscape) and (min-width:601px) and (max-width:1200px){
html body #app #week .mh-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important}
html body #app #week .mh-toolbar .week-controls,html body #app #week .mh-toolbar-actions{width:100%!important;min-width:0!important}
html body #app #week #weekRows>.week-row>.mh-day-trigger{grid-template-columns:85px minmax(120px,1fr) 75px 16px!important}
}

@media(max-width:900px),(pointer:coarse),(orientation:landscape) and (max-height:750px) and (max-width:1200px){
html body #app #week .mh-summary>.mh-metric:nth-child(3),html body #app #week .mh-summary>.mh-metric:nth-child(5){padding-left:0!important}
html body #app #week #weekNotice b{color:var(--mh-muted)!important}
}

/* Final mobile composition: outrank legacy portal/theme spacing in one scope. */
@media(max-width:900px),(pointer:coarse),(orientation:landscape) and (max-height:750px) and (max-width:1200px){
html:root body #app main #week.mh-compact{box-sizing:border-box!important;padding:0!important;margin:0!important;min-height:0!important}
html:root body #app main #week.mh-compact:not(.period-month-active) .week-page:not(.period-month-active){display:flex!important;flex-direction:column!important;gap:0!important}
html:root body #app main #week.mh-compact .week-page{width:100%!important;max-width:100%!important;padding:0!important;margin:0!important;min-height:0!important;height:auto!important}
html:root body #app main #week.mh-compact .week-page>.period-toolbar{order:-1!important;margin:0 0 8px!important;padding:0!important}
html:root body #app main #week.mh-compact>.period-toolbar{margin:0 0 8px!important;padding:0!important}
html:root body #app main #week.mh-compact .period-modes{padding:3px!important}
html:root body #app main #week.mh-compact .period-modes button{min-height:34px!important;padding:6px 10px!important;font-size:13px!important}
html:root body #app main #week.mh-compact .week-head{order:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:28px!important;height:auto!important;padding:0!important;margin:0 0 8px!important;gap:8px!important}
html:root body #app main #week.mh-compact .week-head h2{font-size:20px!important;line-height:1.2!important;margin:0!important}
html:root body #app main #week.mh-compact .mh-toolbar{order:1!important;gap:8px!important;padding:0!important;margin:0 0 10px!important}
html:root body #app main #week.mh-compact .mh-toolbar .week-controls{height:44px!important;min-height:44px!important;grid-template-rows:44px!important}
html:root body #app main #week.mh-compact .mh-summary{order:2!important;box-sizing:border-box!important;margin:0 0 10px!important;padding:0 12px 10px!important;background:var(--mh-surface)!important;background-image:none!important;box-shadow:none!important}
html:root body #app main #week.mh-compact .mh-summary>.mh-metric,html:root body #app main #week.mh-compact .mh-summary>.mh-metric:nth-child(n){background:transparent!important;background-image:none!important;box-shadow:none!important;border-radius:0!important;padding:8px 0 0!important}
html:root body #app main #week.mh-compact .mh-summary>.mh-metric:first-child{padding:9px 0!important}
html:root body #app main #week.mh-compact .mh-summary>.mh-metric:first-child b{font-size:23px!important}
html:root body #app main #week.mh-compact .week-table-card{order:3!important;margin:0!important}
html:root body #app main #week.mh-compact .week-actions-card{order:4!important;display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;margin:10px 0 0!important;background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:0!important;height:auto!important}
html:root body #app main #week.mh-compact .week-actions-card>div:first-child{display:none!important}
html:root body #app main #week.mh-compact #weekSubmitButton{order:1!important;box-sizing:border-box!important;min-height:44px!important;height:auto!important;padding:10px 12px!important;font-size:13px!important;line-height:1.3!important;margin:0!important;border-radius:8px!important}
html:root body #app main #week.mh-compact #weekSubmitFeedback{order:2!important;font-size:11px!important;line-height:1.3!important;margin:6px 0 0!important;padding:0!important}
html:root body #app main #week.mh-compact #weekSubmitFeedback.mh-routine-feedback{display:none!important}
html:root body #app main #week.mh-compact #weekNotice{order:3!important;display:flex!important;align-items:center!important;gap:5px!important;padding:0!important;margin:7px 0 0!important;background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;min-height:0!important;font-size:11px!important;line-height:1.3!important}
html:root body #app main #week.mh-compact #weekNotice b{font-size:11px!important;font-weight:400!important;line-height:1.3!important;color:var(--mh-muted)!important}
html:root body #app main #week.mh-compact #weekNotice span{display:none!important}
html:root body #app main #week.mh-compact .samsara-employee-bar{order:5!important;padding:0!important;margin:4px 0 0!important;background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;min-height:0!important;height:auto!important;color:var(--mh-muted)!important}
html:root body #app main #week.mh-compact .samsara-employee-bar .samsara-employee-status{min-height:0!important;font-size:11px!important;line-height:1.3!important;gap:5px!important}
html:root body #app main #week.mh-compact .samsara-employee-bar .samsara-employee-status strong{font-size:11px!important;line-height:1.3!important;font-weight:400!important;color:var(--mh-muted)!important}
html:root body #app main #week.mh-compact .samsara-employee-dot{width:6px!important;height:6px!important;flex:0 0 6px!important}
html:root body:has(#app main #week.mh-compact:not(.hidden)) #header .head{box-sizing:border-box!important;min-height:64px!important;height:auto!important;padding:8px 12px!important;gap:8px!important}
html:root body:has(#app main #week.mh-compact:not(.hidden)) #header .hgvera-portal-logo{width:100px!important;height:42px!important;object-fit:contain!important}
html:root body:has(#app main #week.mh-compact:not(.hidden)) #header .head>div>.sub{display:none!important}
html:root body:has(#app main #week.mh-compact:not(.hidden)) #header .head-actions{gap:6px!important}
html:root body:has(#app main #week.mh-compact:not(.hidden)) #header .head-actions>button,html:root body:has(#app main #week.mh-compact:not(.hidden)) #header #notificationBell{min-height:44px!important;height:44px!important;padding:8px 12px!important;font-size:13px!important}
html:root body:has(#app main #week.mh-compact:not(.hidden)){padding-bottom:0!important}
html:root body:has(#app main #week.mh-compact:not(.hidden)) #app{padding-bottom:0!important;min-height:0!important}
html:root body #app:has(main #week.mh-compact:not(.hidden)) main{box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:10px 12px calc(76px + env(safe-area-inset-bottom))!important;margin:0!important;min-height:0!important}
}

@media(max-width:900px),(pointer:coarse),(orientation:landscape) and (max-height:750px) and (max-width:1200px){
html body #app #week.mh-compact .mh-toolbar-actions>button{grid-area:auto!important;min-width:0!important;max-width:100%!important;justify-self:stretch!important;align-self:stretch!important}
html body #app #week.mh-compact #weekAddHours{grid-area:auto!important;width:100%!important;min-width:0!important;margin:0!important;height:44px!important}
html body #app #week.mh-compact .week-head{width:100%!important;max-width:100%!important}
html body #app #week.mh-compact .week-head>div:first-child{padding:0!important;grid-area:auto!important}
html body #app #week.mh-compact .week-table-card{padding:0!important;min-height:0!important;height:auto!important}
html body #app #week.mh-compact .week-table-card::before,html body #app #week.mh-compact .week-table-card::after{display:none!important;content:none!important}
html body #app #week.mh-compact .week-table-card>.week-rate-breakdown{display:none!important}
html body #app #week.mh-compact .period-toolbar{width:100%!important;max-width:100%!important}
html body #app #week.mh-compact .period-modes{width:100%!important;max-width:100%!important}
html body #app #week.mh-compact .week-page.period-month-active>:is(.mh-toolbar,.mh-summary,.week-head,.week-table-card,.week-actions-card,.samsara-employee-bar){display:none!important}
html body #app #week.mh-compact .mh-toolbar-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important}
html body #app #week.mh-compact .mh-toolbar-actions>button{position:static!important;inset:auto!important;transform:none!important;width:100%!important;height:44px!important;min-height:44px!important;padding:6px 8px!important;margin:0!important;font-size:12px!important}
html body #app #week.mh-compact .mh-toolbar .week-controls{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:6px!important;width:100%!important;min-width:0!important;margin:0!important}
html body #app #week.mh-compact .mh-toolbar .week-controls>.week-date{grid-column:2!important;grid-row:1!important;min-width:0!important;width:auto!important}
html body #app #week.mh-compact .mh-toolbar .week-controls>button{width:44px!important;min-width:44px!important;height:44px!important;margin:0!important}

}
}

/* Theme-aware My Hours controls, shared by portrait and landscape. */
@layer employee-hours-layout {
html body #app #week.mh-compact{--mh-selected:#fff1df;--mh-selected-text:#924000;--mh-selected-border:#d99a50;--mh-primary:#ff9f1a;--mh-primary-text:#172536}
html body[data-employee-theme=dark] #app #week.mh-compact{--mh-selected:#453624;--mh-selected-text:#ffd08c;--mh-selected-border:#9b713a}
html body[data-hgvera-suite=on] #app #week.mh-compact{--mh-selected:#493724;--mh-selected-text:#ffd08c;--mh-selected-border:#ac7939}
html body #app #week.mh-compact .period-modes{background:var(--mh-soft)!important;background-image:none!important;border:1px solid var(--mh-border)!important;box-shadow:none!important}
html body #app #week.mh-compact .period-modes button{background:transparent!important;background-image:none!important;color:var(--mh-muted)!important;-webkit-text-fill-color:var(--mh-muted)!important;border:1px solid transparent!important;box-shadow:none!important}
html body #app #week.mh-compact .period-modes button[aria-pressed=true]{background:var(--mh-selected)!important;color:var(--mh-selected-text)!important;-webkit-text-fill-color:var(--mh-selected-text)!important;border-color:var(--mh-selected-border)!important;box-shadow:none!important}
html body #app #week.mh-compact .mh-toolbar-actions>button:not(#weekAddHours),html body #app #week.mh-compact .mh-toolbar .week-controls>button{background:var(--mh-soft)!important;background-image:none!important;color:var(--mh-text)!important;-webkit-text-fill-color:var(--mh-text)!important;border:1px solid var(--mh-border)!important;box-shadow:none!important}
html body #app #week.mh-compact #weekAddHours,html body #app #week.mh-compact #weekSubmitButton{background:var(--mh-primary)!important;background-image:none!important;color:var(--mh-primary-text)!important;-webkit-text-fill-color:var(--mh-primary-text)!important;border:1px solid var(--mh-primary)!important;box-shadow:none!important}
html body #app #week.mh-compact :is(.period-modes button,.mh-toolbar button,#weekSubmitButton):focus-visible{outline:2px solid var(--mh-text)!important;outline-offset:2px!important}
html body #app #week.mh-compact :is(#weekAddHours,#weekSubmitButton):disabled{opacity:.6!important;cursor:default!important}
}

/* Keep both segment borders inside the Week/Month track. */
@layer employee-hours-layout {
html body #app #week.mh-compact .period-toolbar{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
html body #app #week.mh-compact .period-modes{box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important;height:44px!important;min-height:44px!important;max-height:none!important;padding:3px!important;gap:4px!important;overflow:visible!important}
html body #app #week.mh-compact .period-modes>button{box-sizing:border-box!important;position:static!important;inset:auto!important;transform:none!important;width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;max-height:36px!important;margin:0!important;padding:0 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1.2!important;border-radius:8px!important}
}

@layer employee-hours-layout {
@media(max-width:900px),(pointer:coarse),(orientation:landscape) and (max-height:750px) and (max-width:1200px){
html body #app main #week.mh-compact .samsara-employee-bar{order:2!important;margin:0 0 10px!important;padding:7px 10px!important;border:1px solid var(--mh-border)!important;border-radius:8px!important;background:var(--mh-soft)!important}
}
#employeeWeekOverviewOverlay{--ov-bg:#fff;--ov-soft:#f1f5f9;--ov-text:#172536;--ov-muted:#526276;--ov-border:#cbd5e1;box-sizing:border-box!important}
body[data-employee-theme=dark] #employeeWeekOverviewOverlay{--ov-bg:#192637;--ov-soft:#111c29;--ov-text:#edf3ff;--ov-muted:#b3bfd0;--ov-border:#344253}
body[data-hgvera-suite=on] #employeeWeekOverviewOverlay{--ov-bg:#173354;--ov-soft:#102b49;--ov-text:#edf4ff;--ov-muted:#b6c9e2;--ov-border:#3b5877}
#employeeWeekOverviewOverlay :is(.employee-week-overview-modal,.employee-week-overview-stat,.employee-week-overview-table td){background:var(--ov-bg)!important;color:var(--ov-text)!important;border-color:var(--ov-border)!important}
#employeeWeekOverviewOverlay :is(.employee-week-overview-head,.employee-week-overview-meta,.employee-week-overview-table th,.employee-week-overview-total){background:var(--ov-soft)!important;color:var(--ov-text)!important;border-color:var(--ov-border)!important}
#employeeWeekOverviewOverlay :is(h2,b){color:var(--ov-text)!important}
#employeeWeekOverviewOverlay :is(small,p,.muted,.employee-week-overview-footer){color:var(--ov-muted)!important}
#employeeWeekOverviewOverlay .employee-week-overview-samsara{margin:0 15px 10px!important;color:var(--ov-muted)!important;font-size:12px!important}
#employeeWeekOverviewOverlay [hidden]{display:none!important}
@media(max-width:700px){
#employeeWeekOverviewOverlay{padding:8px!important}
#employeeWeekOverviewOverlay .employee-week-overview-modal{width:100%!important;min-width:0!important;box-sizing:border-box!important}
#employeeWeekOverviewOverlay .employee-week-overview-head{padding:12px!important;gap:10px!important}
#employeeWeekOverviewOverlay .employee-week-overview-head h2{font-size:20px!important}
#employeeWeekOverviewOverlay .employee-week-overview-summary{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;padding:0 12px 12px!important}
#employeeWeekOverviewOverlay .employee-week-overview-stat{border:0!important;border-radius:0!important;padding:7px 4px!important;min-width:0!important}
#employeeWeekOverviewOverlay .employee-week-overview-stat:first-child{grid-column:1/-1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid var(--ov-border)!important}
#employeeWeekOverviewOverlay .employee-week-overview-stat small{font-size:10px!important}
#employeeWeekOverviewOverlay .employee-week-overview-stat b{font-size:14px!important}
#employeeWeekOverviewOverlay .employee-week-overview-stat:first-child b{font-size:20px!important}
#employeeWeekOverviewOverlay .employee-week-overview-table-wrap{margin:0 12px 12px!important;overflow:visible!important}
#employeeWeekOverviewOverlay .employee-week-overview-table{display:block!important;width:100%!important;min-width:0!important}
#employeeWeekOverviewOverlay .employee-week-overview-table thead{display:none!important}
#employeeWeekOverviewOverlay .employee-week-overview-table tbody{display:block!important}
#employeeWeekOverviewOverlay .employee-week-overview-table tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:4px 10px!important;padding:10px!important;border-bottom:1px solid var(--ov-border)!important;background:var(--ov-bg)!important}
#employeeWeekOverviewOverlay .employee-week-overview-table td{padding:0!important;border:0!important;min-width:0!important;overflow-wrap:anywhere!important;background:transparent!important;font-size:12px!important}
#employeeWeekOverviewOverlay .employee-week-overview-table td:first-child{grid-column:1!important;grid-row:1!important;display:flex!important;align-items:baseline!important;gap:6px!important}
#employeeWeekOverviewOverlay .employee-week-overview-table td.hours{grid-column:2!important;grid-row:1!important}
#employeeWeekOverviewOverlay .employee-week-overview-table td:nth-child(2){grid-column:1/-1!important;grid-row:2!important}
#employeeWeekOverviewOverlay .employee-week-overview-table td:nth-child(3){grid-column:1/-1!important;grid-row:3!important}
#employeeWeekOverviewOverlay .employee-week-overview-table td:nth-child(4){grid-column:1/-1!important;grid-row:4!important;color:var(--ov-muted)!important}
#employeeWeekOverviewOverlay .employee-week-overview-table td:nth-child(4)::before{content:"Truck: "!important}
}
}

@layer employee-hours-layout {
@media(min-width:901px) and (pointer:fine){
html body #app #week .samsara-employee-bar{background:var(--mh-soft)!important;color:var(--mh-muted)!important;border:1px solid var(--mh-border)!important;box-shadow:none!important}
html body #app #week .samsara-employee-status strong{color:var(--mh-muted)!important}
}
}