/* StaffTime Professional Dashboard — visual layer */
:root{--bg:#f3f5f8;--card:#fff;--ink:#111827;--muted:#667085;--line:#e4e7ec;--soft:#f7f8fa;--accent:#111827;--success:#16794c;--success-bg:#e8f7ef;--danger:#b42318;--danger-bg:#fff0ee}
*{box-sizing:border-box}html{margin:0;padding:0;width:100%;min-height:100%;background:var(--bg)}body{margin:0;padding:0;width:100%;min-width:0;max-width:none;background:var(--bg)!important;color:var(--ink)!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;font-size:15px!important;line-height:1.45!important;overflow-x:hidden}.hidden{display:none!important}.login-shell.hidden{display:none!important}
.login-shell{min-height:100vh!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:24px!important;background:radial-gradient(circle at 50% 0,#fff 0,#f4f6f8 55%,#e9edf1 100%)!important}.login-box{width:100%!important;max-width:440px!important;background:#fff!important;border:1px solid #e1e5ea!important;border-radius:20px!important;box-shadow:0 24px 70px #10182818!important;overflow:hidden!important}.login-top{background:#111827!important;color:#fff!important;padding:32px!important;position:relative!important}.brand{font-size:32px!important;font-weight:850!important;letter-spacing:-1px!important}.login-body{padding:28px 30px 32px!important}.login-body h2{font-size:22px!important;margin:0 0 16px!important}
header{width:100%!important;background:#111827!important;color:#fff!important;padding:16px 20px!important;position:sticky!important;top:0!important;z-index:50!important;box-shadow:0 3px 18px #10182822!important}header .head{display:flex!important;justify-content:space-between!important;align-items:center!important;max-width:1080px!important;width:100%!important;margin:auto!important;gap:18px!important}header h1{font-size:22px!important;line-height:1!important;margin:0!important;font-weight:850!important}.sub{font-size:12px!important;opacity:.68!important;margin-top:5px!important}.head .sub{white-space:nowrap!important}header button{background:#fff!important;color:#111827!important;border:0!important;border-radius:10px!important;padding:9px 14px!important;min-height:auto!important;font-weight:700!important}
#app{width:100%!important;max-width:none!important;background:var(--bg)!important;min-height:calc(100vh - 70px)!important}#app>nav{width:100%!important;display:flex!important;align-items:center!important;gap:6px!important;overflow-x:auto!important;background:#fff!important;padding:10px max(16px,calc((100vw - 1080px)/2 + 16px))!important;position:sticky!important;top:70px!important;z-index:40!important;border-bottom:1px solid var(--line)!important;box-shadow:0 2px 10px #1018280a!important;margin:0 0 22px!important}#app>nav button{flex:0 0 auto!important;border:1px solid transparent!important;background:transparent!important;color:#667085!important;border-radius:10px!important;padding:9px 17px!important;white-space:nowrap!important;margin:0!important;min-height:auto!important;font-weight:650!important;font-size:14px!important}#app>nav button.active{background:#111827!important;color:#fff!important}
main{width:100%!important;max-width:1080px!important;margin:auto!important;padding:0 18px 42px!important}.card{background:var(--card)!important;border:1px solid #e4e7ec!important;border-radius:16px!important;padding:20px!important;margin:0 0 17px!important;box-shadow:0 2px 10px #10182808!important}.card h2{font-size:18px!important;line-height:1.25!important;margin:0 0 15px!important;font-weight:780!important}.top{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:14px!important}.grid,.formgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}label{display:block!important;font-size:12px!important;color:#667085!important;font-weight:650!important;margin:9px 0 6px!important}input,select{width:100%!important;height:44px!important;padding:9px 12px!important;border:1px solid #d0d5dd!important;border-radius:10px!important;background:#fff!important;color:#111827!important;font-size:15px!important;outline:none!important}button{font-size:14px!important;border:0!important;border-radius:10px!important;padding:10px 15px!important;cursor:pointer!important;font-weight:650!important}.primary,.login-button{background:#111827!important;color:#fff!important;font-weight:750!important}.secondary{background:#f2f4f7!important;color:#344054!important}.green,.ok{background:var(--success-bg)!important;color:var(--success)!important}.red,.danger,.error{background:var(--danger-bg)!important;color:var(--danger)!important}.actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:14px!important}.muted{color:var(--muted)!important}.small{font-size:12px!important}.big,.num{font-size:38px!important;line-height:1.05!important;font-weight:820!important}.notice{padding:12px 14px!important;border-radius:10px!important;background:#f2f4f7!important;margin-top:11px!important;border:1px solid #eaecf0!important}.badge{display:inline-block!important;padding:5px 9px!important;border-radius:999px!important;font-size:11px!important;font-weight:750!important;background:#f2f4f7!important;color:#475467!important}
#week .card:first-child{padding:22px!important;background:linear-gradient(135deg,#fff 0,#f8fafc 100%)!important}#weekRange{margin-bottom:8px!important}#weekMoney{font-size:16px!important;font-weight:700!important;color:#344054!important;margin-top:4px!important}#weekStatus{margin:15px 0!important}
#workers,#tasks,#pending,#adminHolidayRequests,#myHolidayRequests,#employeeDetailsBody{overflow-x:auto!important}table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;font-size:13px!important;background:#fff!important;border:1px solid #eaecf0!important;border-radius:12px!important;overflow:hidden!important}th,td{text-align:left!important;padding:11px 10px!important;border-bottom:1px solid #eaecf0!important;vertical-align:middle!important}th{font-weight:750!important;color:#475467!important;background:#f8fafc!important;white-space:nowrap!important}tr:last-child td{border-bottom:0!important}.actionbtn{padding:7px 10px!important;border-radius:8px!important;background:#fff!important;border:1px solid #d0d5dd!important;font-size:12px!important;font-weight:700!important}
#employeeDetails.card{background:#f8fafc!important;border-color:#dfe3e8!important;box-shadow:none!important;margin-top:16px!important}#globalNightOutRate,#holidayLimit{max-width:280px!important}#nightout{appearance:none!important;-webkit-appearance:none!important;width:48px!important;height:28px!important;padding:0!important;margin:7px 0 0!important;border:1px solid #cbd5e1!important;border-radius:999px!important;background:#e5e7eb!important;position:relative!important;display:block!important;cursor:pointer!important;box-shadow:none!important}#nightout:after{content:"";position:absolute!important;top:3px!important;left:3px!important;width:20px!important;height:20px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 1px 3px #0002!important;transition:.15s ease!important}#nightout:checked{background:#111827!important;border-color:#111827!important}#nightout:checked:after{left:23px!important}.toggle-row{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important}.employee-fixed select{background:#f8fafc!important;font-weight:700!important}.static-field{width:100%!important;min-height:44px!important;padding:11px 12px!important;border:1px solid #d0d5dd!important;border-radius:10px!important;background:#f8fafc!important;font-weight:750!important}.entry-list{display:grid!important;gap:9px!important;margin-top:10px!important}.entry-card{border:1px solid #e5e7eb!important;border-radius:13px!important;background:#fff!important;padding:12px 14px!important;box-shadow:0 1px 5px #1018280b!important}.entry-head{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:8px!important}.entry-task{font-weight:750!important;margin:7px 0}.entry-meta{display:flex!important;gap:14px!important;flex-wrap:wrap!important;font-size:13px!important;font-weight:700!important}.entry-times,.entry-split{font-size:12px!important;color:#667085!important;margin-top:5px!important}.profile-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.profile-grid>div{padding:12px!important;background:#f8fafc!important;border:1px solid #eaecf0!important;border-radius:10px!important}.profile-grid span{display:block!important;color:#667085!important;font-size:11px!important;margin-bottom:3px!important}.profile-grid b{font-size:14px!important}
#hoursMsg,#holidayMsg,#adminMsg,#limitMsg,#globalNightOutMsg,#editMsg{margin-top:10px!important}
@media(max-width:700px){body{font-size:14px!important}header{padding:12px!important}header .head{gap:10px!important}header h1{font-size:20px!important}.head .sub{font-size:10px!important}header button{padding:8px 11px!important;font-size:13px!important}#app{min-height:calc(100vh - 60px)!important}#app>nav{top:60px!important;padding:7px 8px!important;margin-bottom:12px!important;gap:5px!important}#app>nav button{padding:9px 12px!important;font-size:13px!important}main{padding:0 10px 24px!important}.grid,.formgrid{grid-template-columns:1fr!important;gap:7px!important}.profile-grid{grid-template-columns:1fr!important;gap:7px!important}.card{padding:14px!important;border-radius:14px!important;margin-bottom:10px!important;box-shadow:0 1px 6px #1018280a!important}.card h2{font-size:17px!important;margin-bottom:10px!important}.top{align-items:flex-start!important}.top #who{max-width:55%;text-align:right!important;line-height:1.25!important}label{font-size:12px!important;margin:7px 0 5px!important}input,select{height:46px!important;font-size:16px!important;border-radius:10px!important;padding:9px 11px!important}.static-field{min-height:46px!important;padding:11px!important}.primary,.secondary,.danger,.login-button{min-height:46px!important}.card>.primary{width:100%!important;margin-top:10px!important}.notice{padding:11px 12px!important;margin-top:9px!important}.big,.num{font-size:32px!important}.actions{display:grid!important;grid-template-columns:1fr!important}.actions button{width:100%!important}.login-shell{padding:12px!important}.login-box{border-radius:16px!important}.login-top{padding:23px!important}.login-body{padding:20px 17px 24px!important}.brand{font-size:28px!important}#hours .card:first-child{padding:14px!important}.grid>div{min-width:0!important}.toggle-row{align-items:center!important;min-height:44px!important}.toggle-row label{font-size:14px!important;margin:0!important;color:#344054!important}.toggle-row #nightout{flex:0 0 auto!important;margin:0!important;width:50px!important;height:30px!important}.toggle-row #nightout:after{width:22px!important;height:22px!important}.toggle-row #nightout:checked:after{left:24px!important}#hoursMsg .notice{font-size:13px!important}#entries{width:100%!important;overflow:visible!important}.entry-card{padding:11px 12px!important}.entry-meta{gap:8px!important;font-size:12px!important}.entry-task{font-size:14px!important}
#employeeWrap select{pointer-events:none!important;appearance:none!important;-webkit-appearance:none!important;background:#f8fafc!important;font-weight:750!important;border-color:#e4e7ec!important}#employeeWrap label{display:block!important}#rateType{display:none!important}#rateType+*{display:none!important}.employee-fixed{width:100%!important}.employee-fixed select{width:100%!important}#entries>table{display:block!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important;border-radius:0!important;overflow:visible!important}#entries>table tr:first-child{display:none!important}#entries>table tr{display:block!important;width:100%!important;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:13px!important;margin:0 0 9px!important;padding:10px 12px!important;box-shadow:0 1px 5px #1018280b!important}#entries>table td{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;width:100%!important;padding:5px 0!important;border:0!important;font-size:13px!important;text-align:right!important;white-space:normal!important}#entries>table td:before{color:#667085!important;font-weight:650!important;text-align:left!important}#entries>table td:nth-child(1):before{content:"Date"!important}#entries>table td:nth-child(2):before{content:"Rate"!important}#entries>table td:nth-child(3):before{content:"Hours"!important}#entries>table td:nth-child(4):before{content:"Pay"!important}#entries>table td:nth-child(5):before{content:"Work"!important}#entries>table td:nth-child(6):before{content:"Status"!important}#entries>table td:nth-child(6){padding-top:8px!important;margin-top:3px!important;border-top:1px solid #f0f1f3!important}.login-shell{width:100%!important}.login-box{max-width:100%!important}}
/* StaffTime V3 visual layer */
body{background:#f4f6f8;color:#17202a}
main{max-width:980px;margin:0 auto;padding:18px 14px 40px}
.card{border:1px solid #dfe3e8;border-radius:16px;box-shadow:0 3px 14px rgba(16,24,40,.06);margin-bottom:16px;padding:18px;background:#fff}
.card h2{margin-top:0;font-size:20px}
input,select{min-height:46px;border:1px solid #cbd2d9;border-radius:10px;font-size:16px;padding:9px 11px;box-sizing:border-box}
button{min-height:44px;font-size:15px;border-radius:10px}
.entry-card{border:1px solid #dfe3e8;border-radius:14px;padding:14px;margin:10px 0;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.entry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.entry-task{font-weight:750;font-size:16px;margin-top:4px}
.entry-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;font-size:14px}
.entry-times,.entry-split{font-size:13px;color:#59636e;margin-top:5px}
.entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid #e6e9ed}
.entry-actions button{width:100%}
.edit-entry h3{margin:0 0 12px}
@media(max-width:700px){main{padding:10px 8px 30px}.card{padding:14px;border-radius:14px}.entry-meta{grid-template-columns:1fr 1fr}.entry-meta span:last-child{grid-column:1/-1}.entry-actions{grid-template-columns:1fr 1fr}}
/* StaffTime V3 visual layer */
body{background:#f4f6f8;color:#17202a}
main{max-width:980px;margin:0 auto;padding:18px 14px 40px}
.card{border:1px solid #dfe3e8;border-radius:16px;box-shadow:0 3px 14px rgba(16,24,40,.06);margin-bottom:16px;padding:18px;background:#fff}
.card h2{margin-top:0;font-size:20px}
input,select{min-height:46px;border:1px solid #cbd2d9;border-radius:10px;font-size:16px;padding:9px 11px;box-sizing:border-box}
button{min-height:44px;font-size:15px;border-radius:10px}
.entry-card{border:1px solid #dfe3e8;border-radius:14px;padding:14px;margin:10px 0;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.entry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.entry-task{font-weight:750;font-size:16px;margin-top:4px}
.entry-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;font-size:14px}
.entry-times,.entry-split{font-size:13px;color:#59636e;margin-top:5px}
.entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid #e6e9ed}
.entry-actions button{width:100%}
.edit-entry h3{margin:0 0 12px}
@media(max-width:700px){main{padding:10px 8px 30px}.card{padding:14px;border-radius:14px}.entry-meta{grid-template-columns:1fr 1fr}.entry-meta span:last-child{grid-column:1/-1}.entry-actions{grid-template-columns:1fr 1fr}}
/* StaffTime V3 visual layer */
body{background:#f4f6f8;color:#17202a}
main{max-width:980px;margin:0 auto;padding:18px 14px 40px}
.card{border:1px solid #dfe3e8;border-radius:16px;box-shadow:0 3px 14px rgba(16,24,40,.06);margin-bottom:16px;padding:18px;background:#fff}
.card h2{margin-top:0;font-size:20px}
input,select{min-height:46px;border:1px solid #cbd2d9;border-radius:10px;font-size:16px;padding:9px 11px;box-sizing:border-box}
button{min-height:44px;font-size:15px;border-radius:10px}
.entry-card{border:1px solid #dfe3e8;border-radius:14px;padding:14px;margin:10px 0;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.entry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.entry-task{font-weight:750;font-size:16px;margin-top:4px}
.entry-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;font-size:14px}
.entry-times,.entry-split{font-size:13px;color:#59636e;margin-top:5px}
.entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid #e6e9ed}
.entry-actions button{width:100%}
.edit-entry h3{margin:0 0 12px}
@media(max-width:700px){main{padding:10px 8px 30px}.card{padding:14px;border-radius:14px}.entry-meta{grid-template-columns:1fr 1fr}.entry-meta span:last-child{grid-column:1/-1}.entry-actions{grid-template-columns:1fr 1fr}}
/* StaffTime V3 visual layer */
body{background:#f4f6f8;color:#17202a}
main{max-width:980px;margin:0 auto;padding:18px 14px 40px}
.card{border:1px solid #dfe3e8;border-radius:16px;box-shadow:0 3px 14px rgba(16,24,40,.06);margin-bottom:16px;padding:18px;background:#fff}
.card h2{margin-top:0;font-size:20px}
input,select{min-height:46px;border:1px solid #cbd2d9;border-radius:10px;font-size:16px;padding:9px 11px;box-sizing:border-box}
button{min-height:44px;font-size:15px;border-radius:10px}
.entry-card{border:1px solid #dfe3e8;border-radius:14px;padding:14px;margin:10px 0;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.entry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.entry-task{font-weight:750;font-size:16px;margin-top:4px}
.entry-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;font-size:14px}
.entry-times,.entry-split{font-size:13px;color:#59636e;margin-top:5px}
.entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid #e6e9ed}
.entry-actions button{width:100%}
.edit-entry h3{margin:0 0 12px}
@media(max-width:700px){main{padding:10px 8px 30px}.card{padding:14px;border-radius:14px}.entry-meta{grid-template-columns:1fr 1fr}.entry-meta span:last-child{grid-column:1/-1}.entry-actions{grid-template-columns:1fr 1fr}}


/* StaffTime final visual layer — current production UI */
.dashboard{display:grid;gap:16px;margin:0 0 18px}
.dash-greeting{padding:2px 2px 0}
.dash-greeting h2{margin:0 0 4px;font-size:26px;line-height:1.15;letter-spacing:-.5px;font-weight:820}
.dash-date{color:var(--muted);font-size:13px}
.dash-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dash-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 14px;min-width:0;box-shadow:0 2px 10px rgba(16,24,40,.05)}
.dash-stat .label{font-size:12px;color:var(--muted);font-weight:650;margin-bottom:6px}
.dash-stat .value{font-size:21px;font-weight:820;letter-spacing:-.3px;white-space:nowrap}
.dash-stat .hint{font-size:11px;color:#98a2b3;margin-top:3px}
.add-hours-card{padding:22px!important}
.add-hours-card .welcome{font-size:20px;font-weight:820;letter-spacing:-.25px}
.st-form{display:grid;gap:14px;margin-top:15px}
.st-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.st-field,.st-hours{min-width:0}
.st-field input,.st-field select,.st-hours input{width:100%;min-width:0}
.st-hours{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px}
.st-hours label{margin-top:0}
.st-hours input{background:#fff;font-size:20px;font-weight:800}
.st-night{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:#fff;border-radius:13px;padding:11px 13px}
.st-night label{margin:0;font-weight:700;color:var(--ink)}
.st-night input{width:22px;height:22px;accent-color:#111827}
.add-hours-button{width:100%!important;min-height:50px!important;font-size:15px!important;font-weight:800!important}
.full-action{width:100%!important;min-height:48px!important}
.notice{border-radius:12px!important}
.entry-card{transition:border-color .15s ease,box-shadow .15s ease}
.entry-card:hover{border-color:#cbd5e1!important;box-shadow:0 3px 12px rgba(16,24,40,.07)!important}
input,select,textarea{min-height:44px!important;border-radius:11px!important}
input[type="date"],input[type="time"],input[type="number"]{font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid rgba(37,99,235,.18)!important;outline-offset:1px}
button.primary{font-weight:780!important}
.small.muted{color:var(--muted)!important}
@media(max-width:700px){
  main{padding-left:12px!important;padding-right:12px!important}
  .dash-stats{gap:8px}
  .dash-stat{padding:13px 10px;border-radius:14px}
  .dash-stat .value{font-size:18px}
  .add-hours-card{padding:16px!important}
  .st-row{gap:9px}
}
@media(max-width:520px){
  .dash-greeting h2{font-size:23px}
  .st-row{grid-template-columns:1fr 1fr}
  .st-hours{padding:11px}
}
@media(max-width:380px){
  .dash-stats{grid-template-columns:1fr}
  .dash-stat{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .dash-stat .hint{display:none}
  .st-row{grid-template-columns:1fr}
}

/* Invoice visual finish */
.invoice-page{max-width:1080px!important;margin:0 auto!important;padding:18px 18px 50px!important}
.invoice-grid{gap:12px!important}
.invoice-page .card{background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:0 2px 10px rgba(16,24,40,.05)!important}
.invoice-page h2{font-weight:800!important;letter-spacing:-.2px}
.invoice-total{font-size:26px!important;font-weight:850!important;margin:14px 0!important}
.invoice-line{padding:13px 0!important}
.invoice-table{border:1px solid var(--line)!important;border-radius:12px!important;overflow:hidden!important}
.invoice-table th{background:#f8fafc!important;color:#475467!important;font-weight:750!important}
.invoice-table th,.invoice-table td{padding:11px 10px!important;border-bottom:1px solid var(--line)!important}
.pill{border-radius:999px!important;padding:5px 9px!important;font-weight:750!important}
@media(max-width:700px){.invoice-page{padding:10px 12px 30px!important}.invoice-page .card{padding:14px!important}.invoice-grid{grid-template-columns:1fr!important}.invoice-actions{display:grid!important;grid-template-columns:1fr!important}.invoice-actions button{width:100%!important}.invoice-table{display:block!important;overflow-x:auto!important;white-space:nowrap!important}.invoice-total{font-size:24px!important}}


/* StaffTime visual finish — Week / Holidays / Profile */
#week .card,#holidays .card,#profile .card{overflow:hidden}
#week .card h2,#holidays .card h2,#profile .card h2{font-size:19px;font-weight:820;letter-spacing:-.25px}
#week .big{font-size:42px!important;letter-spacing:-1px;margin-top:10px}
#week .full-action,#holidays .full-action{margin-top:12px}
#week .notice{font-weight:700}
#holidays .holiday-date-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#holidays .holiday-field{min-width:0}
#holidays .notice{min-height:44px;display:flex;align-items:center}
#holidays .entry-card,#profile .entry-card{margin:9px 0}
#profileBody{display:grid;gap:10px}
#profileBody .profile-grid{gap:10px}
#profileBody .profile-grid>div{border-radius:13px;padding:13px;background:#f8fafc;border:1px solid var(--line)}
#profileBody .profile-grid span{font-size:11px;color:var(--muted);display:block;margin-bottom:4px}
#profileBody .profile-grid b{font-size:14px}
@media(max-width:700px){
  #week .card,#holidays .card,#profile .card{padding:15px!important}
  #week .big{font-size:36px!important}
  #holidays .holiday-date-grid{grid-template-columns:1fr 1fr;gap:8px}
}
@media(max-width:420px){
  #holidays .holiday-date-grid{grid-template-columns:1fr}
}


/* Login visual redesign — page 1 */
.login-shell{
  min-height:100vh!important;
  padding:20px!important;
  background:
    radial-gradient(circle at 15% 20%,rgba(37,99,235,.16),transparent 32%),
    radial-gradient(circle at 85% 80%,rgba(14,165,233,.12),transparent 30%),
    linear-gradient(135deg,#eef4fb 0%,#f8fafc 48%,#e9eef5 100%)!important;
}
.login-box{
  max-width:420px!important;
  border:1px solid #d9e0e8!important;
  border-radius:22px!important;
  box-shadow:0 28px 80px rgba(15,23,42,.16)!important;
}
.login-top{
  min-height:205px!important;
  padding:30px 30px 28px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 82% 22%,rgba(59,130,246,.28),transparent 28%),
    linear-gradient(145deg,#0b1f3a 0%,#102d50 55%,#0f3b69 100%)!important;
}
.login-top:before{
  content:"";width:48px;height:48px;border-radius:50%;
  border:3px solid #60a5fa;
  box-shadow:inset 0 0 0 7px #0b1f3a,0 5px 18px rgba(0,0,0,.22);
  margin-bottom:18px;display:block;
}
.login-top:after{
  content:"Work smarter. Together.";
  display:block;margin-top:18px;font-size:13px;font-weight:600;
  letter-spacing:.2px;color:rgba(255,255,255,.72);
}
.login-top .brand{
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-1.2px!important;
}
.login-top .sub{
  font-size:12px!important;
  margin-top:7px!important;
  opacity:.72!important;
}
.login-body{
  padding:28px 30px 30px!important;
}
.login-body h2{
  font-size:25px!important;
  letter-spacing:-.5px!important;
  margin:0 0 5px!important;
}
.login-body h2:after{
  content:"Welcome back";
  position:absolute;
  width:0;height:0;overflow:hidden;
}
.login-body h2 + label{
  margin-top:18px!important;
}
.login-body label{
  color:#344054!important;
  font-size:12px!important;
  font-weight:700!important;
}
.login-body input{
  height:48px!important;
  border-color:#d0d5dd!important;
  border-radius:12px!important;
  background:#fcfdff!important;
}
.login-body input:focus{
  border-color:#2563eb!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important;
}
.login-hint{
  margin:8px 0 18px!important;
  font-size:11px!important;
  line-height:1.45!important;
  color:#98a2b3!important;
}
.login-button{
  min-height:49px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;
  box-shadow:0 8px 18px rgba(37,99,235,.22)!important;
  transition:transform .12s ease,box-shadow .12s ease!important;
}
.login-button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(37,99,235,.27)!important;
}
.login-body .secondary{
  width:100%!important;
  margin-top:10px!important;
  background:transparent!important;
  color:#2563eb!important;
  font-size:13px!important;
  font-weight:700!important;
}
#loginMsg{margin-top:12px!important}
#loginMsg .notice{font-size:13px!important}
@media(max-width:520px){
  .login-shell{padding:12px!important;align-items:center!important}
  .login-box{border-radius:19px!important}
  .login-top{min-height:190px!important;padding:26px 23px!important}
  .login-body{padding:24px 18px 25px!important}
  .login-top .brand{font-size:30px!important}
}


/* Dashboard redesign — mobile-first visual */
.dashboard{gap:14px!important;margin-bottom:16px!important}
.dash-greeting{padding:8px 2px 2px!important}
.dash-greeting h2{font-size:27px!important;letter-spacing:-.6px!important;font-weight:850!important}
.dash-date{font-size:13px!important}
.dash-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.dash-stat{position:relative!important;min-height:108px!important;padding:14px 12px!important;border-radius:16px!important;display:flex!important;align-items:flex-end!important;gap:10px!important;overflow:hidden!important}
.dash-stat .stat-icon{position:absolute!important;top:12px!important;left:12px!important;width:36px!important;height:36px!important;border-radius:11px!important;display:grid!important;place-items:center!important;font-size:22px!important;font-weight:800!important}
.dash-stat>div:last-child{margin-top:38px!important}
.dash-stat .label{margin-bottom:3px!important;font-size:12px!important;font-weight:700!important}
.dash-stat .value{font-size:22px!important;line-height:1.05!important}
.dash-stat .hint{font-size:11px!important;margin-top:3px!important}
.stat-blue .stat-icon{background:#e8f1ff!important;color:#1769e0!important}
.stat-green .stat-icon{background:#e7f8ef!important;color:#16a05d!important}
.stat-purple .stat-icon{background:#eeeaff!important;color:#6847e8!important}
.stat-orange .stat-icon{background:#fff1dc!important;color:#ed8b17!important}
.dashboard-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
.quick-card,.week-overview-card{margin-bottom:0!important}
.section-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.section-head h2{margin:0!important}
.section-head>b{font-size:15px!important}
.quick-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:14px!important}
.quick-action{min-height:82px!important;border-radius:13px!important;color:#fff!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;font-size:27px!important;font-weight:400!important}
.quick-action span{font-size:13px!important;font-weight:800!important}
.quick-action.blue{background:#1677f5!important}
.quick-action.green{background:#19b565!important}
.quick-action.orange{background:#f6a21a!important}
.quick-action.purple{background:#6b4be8!important}
.week-chart{height:150px!important;display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:8px!important;align-items:end!important;margin-top:14px!important;padding-top:4px!important}
.chart-day{height:100%!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:center!important;gap:5px!important;min-width:0!important}
.chart-day>b{font-size:10px!important;color:#344054!important;white-space:nowrap!important}
.chart-track{height:100px!important;width:100%!important;max-width:30px!important;background:#eef2f7!important;border-radius:7px 7px 3px 3px!important;display:flex!important;align-items:flex-end!important;overflow:hidden!important}
.chart-track i{display:block!important;width:100%!important;background:#7fb2f5!important;border-radius:7px 7px 3px 3px!important;min-height:4px!important}
.chart-day span{font-size:10px!important;color:#667085!important}
.recent-card{margin-top:0!important}
@media(max-width:700px){
  .dashboard{gap:11px!important}
  .dash-greeting{padding:5px 2px 1px!important}
  .dash-greeting h2{font-size:24px!important}
  .dash-stats{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .dash-stat{min-height:102px!important;padding:13px 12px!important}
  .dash-stat .value{font-size:21px!important}
  .dashboard-grid{grid-template-columns:1fr!important;gap:10px!important}
  .quick-actions{gap:8px!important}
  .quick-action{min-height:76px!important}
  .week-chart{height:138px!important}
  .chart-track{height:88px!important}
  .add-hours-card{margin-top:0!important}
}
@media(max-width:380px){
  .dash-stats{grid-template-columns:1fr 1fr!important}
  .dash-stat{min-height:96px!important}
  .dash-stat .stat-icon{width:32px!important;height:32px!important;font-size:19px!important}
  .dash-stat>div:last-child{margin-top:32px!important}
  .dash-stat .value{font-size:19px!important}
  .dash-stat .hint{font-size:10px!important}
}


/* Week page — next visual step */
#week{max-width:760px;margin:0 auto}
#week .card{border-radius:18px!important;padding:20px!important}
#week h2{font-size:22px!important;font-weight:850!important;letter-spacing:-.35px!important;margin:0 0 4px!important}
#week #weekRange{font-size:12px!important}
#week #weekHours{font-size:48px!important;font-weight:900!important;letter-spacing:-1.5px!important;margin:20px 0 2px!important}
#week #weekMoney{font-size:14px!important;font-weight:700!important}
#week #weekStatus{margin:18px 0!important;border-radius:12px!important;padding:13px!important;font-weight:700!important}
#week .full-action{min-height:48px!important;border-radius:12px!important;width:100%!important}
@media(max-width:700px){
 #week{max-width:none}
 #week .card{padding:16px!important;border-radius:16px!important}
 #week h2{font-size:20px!important}
 #week #weekHours{font-size:40px!important;margin-top:18px!important}
}

/* Mobile overflow guard */
@media(max-width:700px){body{overflow-x:hidden!important}main{width:100%!important;box-sizing:border-box!important;padding:12px!important}.add-hours-card,.recent-card{width:100%!important;box-sizing:border-box!important}.st-field,.st-hours{min-width:0!important}input,select,button{max-width:100%!important;box-sizing:border-box!important}}
@media(max-width:420px){main{padding:9px!important}.st-row{grid-template-columns:1fr!important}.holiday-date-grid{grid-template-columns:1fr!important}}
/* Hour registration opens from Quick actions */
.add-hours-card{display:none!important}
.add-hours-card.open{display:block!important}

/* Dashboard clean layout */
#hours .recent-card{display:none!important}

/* Week — clean mobile-first card */
#week{max-width:760px!important;margin:0 auto!important}
#week .card{border-radius:18px!important;padding:20px!important}
#week h2{font-size:22px!important;font-weight:850!important;letter-spacing:-.35px!important}
#week #weekRange{margin-top:4px!important}
#week #weekHours{font-size:48px!important;font-weight:900!important;letter-spacing:-1.5px!important;margin:22px 0 2px!important}
#week #weekMoney{font-size:15px!important;font-weight:700!important}
#week #weekStatus{margin:18px 0 12px!important;padding:13px!important;border-radius:12px!important;font-weight:750!important}
#week .full-action{width:100%!important;min-height:48px!important;border-radius:12px!important}
@media(max-width:700px){#week{max-width:none!important}#week .card{padding:16px!important;border-radius:16px!important}#week #weekHours{font-size:40px!important;margin-top:18px!important}}

/* Week visual layout */
#week{max-width:1080px!important;margin:0 auto!important}
.week-page{display:grid;gap:14px}
.week-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.week-head h2{margin:0;font-size:28px;font-weight:850;letter-spacing:-.6px}
.week-controls{display:flex;align-items:center;gap:8px}.week-controls button{min-height:42px}.week-date{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);background:#fff;border-radius:12px;white-space:nowrap}.week-date span{font-size:18px}.week-date b{font-size:13px}
.week-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.week-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 13px;display:flex;gap:10px;align-items:flex-start;min-width:0}.week-stat-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:19px;flex:0 0 auto}.week-stat-icon.blue{background:#e8f1ff;color:#1769e0}.week-stat-icon.green{background:#e7f8ef;color:#16a05d}.week-stat-icon.purple{background:#eeeaff;color:#6847e8}.week-stat-icon.orange{background:#fff1dc;color:#ed8b17}.week-stat small,.week-stat em{display:block;color:#667085;font-size:11px}.week-stat b{display:block;font-size:22px;margin:4px 0}.week-stat em{font-style:normal}.week-status-pill{font-size:14px!important;padding:5px 9px;border-radius:999px;background:#e7f8ef;color:#16834d;display:inline-block!important}
.week-table-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}.week-rows{padding:0 10px}.week-row{display:grid;grid-template-columns:90px 1.5fr 90px 120px 150px;align-items:center;gap:10px;padding:13px 8px;border-bottom:1px solid var(--line)}.week-row:last-child{border-bottom:0}.week-day b,.week-time b{display:block;font-size:13px}.week-day small,.week-time small{display:block;color:#667085;font-size:11px;margin-top:3px}.week-row>strong{font-size:14px}.week-row-status{font-size:12px;color:#667085}.week-row-status.saved{color:#16a05d}.week-row-status.submitted{color:#1769e0}.week-row-actions{display:flex;justify-content:flex-end;gap:6px}.week-row-actions button{padding:7px 9px!important;font-size:11px!important}.week-row.not-worked{color:#667085}.week-total{display:flex;justify-content:space-between;padding:14px 16px;background:#eaf3ff;font-size:15px}.week-actions-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.week-actions-card h3{margin:0 0 3px;font-size:17px}.week-actions-card .full-action{min-width:235px}.week-notice{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid #9be2bd;background:#effcf5;color:#166534;border-radius:12px;font-size:16px}.week-notice b,.week-notice span{display:block}.week-notice span{font-size:12px;margin-top:3px}
@media(max-width:700px){#week{max-width:none!important}.week-head{display:block}.week-head h2{font-size:24px}.week-controls{margin-top:12px;display:grid;grid-template-columns:42px 1fr 42px}.week-controls .week-today{grid-column:1/-1}.week-date{justify-content:center}.week-stats{grid-template-columns:1fr 1fr}.week-row{grid-template-columns:1fr auto;gap:5px;padding:12px 7px}.week-time{min-width:0}.week-row-status{grid-column:1}.week-row-actions{grid-column:2;grid-row:1/4;align-self:center}.week-total{padding:13px 12px}.week-actions-card{grid-template-columns:1fr}.week-actions-card .full-action{min-width:0;width:100%}}
@media(max-width:420px){.week-stats{gap:8px}.week-stat{padding:12px 10px}.week-stat b{font-size:20px}.week-stat-icon{width:32px;height:32px}.week-row-actions{display:grid}.week-row-actions button{width:100%}}

/* Week final visual polish */
.week-controls .secondary{border:1px solid var(--line)!important;background:#fff!important;color:#344054!important;border-radius:12px!important;font-weight:750!important}
.week-controls .week-today{padding:10px 16px!important;background:#111c2e!important;color:#fff!important;border-color:#111c2e!important;border-radius:12px!important}
.week-date{box-shadow:0 1px 2px rgba(16,24,40,.04)}
.week-table-card{box-shadow:0 1px 2px rgba(16,24,40,.03)}
.week-row{min-height:68px}
.week-row-status{white-space:nowrap}
.week-row-status.saved,.week-row-status.submitted{font-weight:650}
.week-row.not-worked .week-time b{font-weight:650}
.week-actions-card{box-shadow:0 1px 2px rgba(16,24,40,.03)}
@media(max-width:700px){
  .week-controls{grid-template-columns:44px 1fr 44px!important;align-items:center}
  .week-controls>button{min-width:44px!important}
  .week-controls .week-today{margin-top:2px;min-height:42px}
  .week-row{grid-template-columns:1fr auto!important;grid-template-rows:auto auto auto!important;align-items:start!important;gap:4px 10px!important;padding:15px 12px!important;min-height:0}
  .week-day{grid-column:1!important;grid-row:1!important}
  .week-time{grid-column:2!important;grid-row:1 / span 2!important;text-align:right;min-width:0}
  .week-time b{font-size:14px!important;white-space:nowrap}
  .week-time small{max-width:190px;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .week-row>strong{grid-column:1!important;grid-row:2!important;font-size:15px!important}
  .week-row-status{grid-column:1!important;grid-row:3!important}
  .week-row-actions{grid-column:2!important;grid-row:3!important;display:flex!important;justify-content:flex-end!important}
  .week-row-actions:empty{display:block!important}
  .week-total{font-size:15px!important;font-weight:750}
}
@media(max-width:420px){
  .week-date{padding:10px 8px!important}
  .week-date b{font-size:12px!important}
  .week-row{padding:14px 10px!important}
  .week-time b{font-size:13px!important}
  .week-time small{max-width:155px}
}

/* Week mobile target layout */
@media(max-width:700px){
  #week .week-page{gap:12px!important}
  #week .week-head{padding:2px 2px 0!important}
  #week .week-head h2{font-size:26px!important;line-height:1.1!important;margin:0!important}
  #week .week-head .small{font-size:13px!important;margin-top:5px!important}
  #week .week-controls{margin-top:12px!important;gap:8px!important}
  #week .week-date{height:48px!important;border-radius:12px!important}
  #week .week-date b{font-size:13px!important}
  #week .week-controls .week-today{grid-column:1/-1!important;width:100%!important;height:44px!important;border-radius:12px!important;font-size:14px!important}
  #week .week-stats{gap:10px!important}
  #week .week-stat{min-height:126px!important;padding:16px 14px!important;border-radius:16px!important;gap:10px!important}
  #week .week-stat-icon{width:38px!important;height:38px!important;border-radius:11px!important}
  #week .week-stat small{font-size:12px!important}
  #week .week-stat b{font-size:28px!important;line-height:1.05!important;margin:6px 0!important}
  #week .week-stat em{font-size:12px!important}
  #week .week-status-pill{font-size:14px!important;margin-top:4px!important}
  #week .week-table-card{border-radius:16px!important}
  #week .week-rows{padding:0 10px!important}
  #week .week-row{display:grid!important;grid-template-columns:72px minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:8px!important;row-gap:2px!important;padding:12px 4px!important;min-height:72px!important;align-items:center!important}
  #week .week-day{grid-column:1!important;grid-row:1 / span 2!important;align-self:center!important}
  #week .week-day b{font-size:13px!important;color:#111827!important}
  #week .week-day small{font-size:10px!important;margin-top:3px!important}
  #week .week-time{grid-column:2!important;grid-row:1 / span 2!important;text-align:left!important;min-width:0!important;align-self:center!important}
  #week .week-time b{font-size:13px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #week .week-time small{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;margin:3px 0 0!important}
  #week .week-row>strong{grid-column:3!important;grid-row:1!important;font-size:14px!important;white-space:nowrap!important;text-align:right!important;align-self:end!important}
  #week .week-row-status{grid-column:3!important;grid-row:2!important;font-size:11px!important;white-space:nowrap!important;text-align:right!important;align-self:start!important}
  #week .week-row-actions{grid-column:3!important;grid-row:1 / span 2!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}
  #week .week-row-actions:not(:empty){display:flex!important}
  #week .week-row-actions button{min-height:32px!important;padding:5px 7px!important;font-size:10px!important}
  #week .week-total{padding:13px 14px!important;font-size:15px!important;background:#e8f3ff!important}
  #week .week-actions-card{padding:14px!important;border-radius:16px!important;gap:10px!important}
  #week .week-actions-card h3{font-size:17px!important}
  #week .week-actions-card .small{font-size:11px!important}
  #week .week-actions-card .full-action{height:48px!important;border-radius:12px!important;background:#1677f5!important}
  #week .week-notice{font-size:13px!important;padding:12px!important;border-radius:12px!important}
}
@media(max-width:420px){
  #week .week-stats{gap:8px!important}
  #week .week-stat{min-height:116px!important;padding:13px 10px!important}
  #week .week-stat-icon{width:34px!important;height:34px!important}
  #week .week-stat b{font-size:25px!important}
  #week .week-row{grid-template-columns:65px minmax(0,1fr) auto!important;padding:11px 3px!important}
  #week .week-time b{font-size:12px!important}
  #week .week-time small{font-size:9px!important}
}

/* Week mobile final reference match */
@media(max-width:700px){
#week{width:100%!important;max-width:none!important;margin:0!important;padding:0 14px 120px!important}
#week .week-page{width:100%!important;gap:12px!important}
#week .week-head{display:block!important;padding:4px 2px 0!important}
#week .week-head h2{display:block!important;font-size:25px!important;line-height:1.15!important;font-weight:850!important;color:#111827!important}
#week .week-head .small{display:block!important;font-size:13px!important;color:#667085!important;margin-top:5px!important}
#week .week-controls{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px!important;margin-top:12px!important;width:100%!important}
#week .week-controls>button{height:48px!important;min-height:48px!important;padding:0!important}
#week .week-date{height:48px!important;min-width:0!important;padding:0 8px!important;justify-content:center!important;border-radius:12px!important}
#week .week-date span{font-size:17px!important}
#week .week-date b{font-size:13px!important;white-space:nowrap!important}
#week .week-controls .week-today{grid-column:1/-1!important;width:100%!important;height:44px!important;min-height:44px!important;background:#111c2e!important;color:#fff!important;border:0!important;border-radius:12px!important;font-size:14px!important;font-weight:750!important}
#week .week-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;width:100%!important}
#week .week-stat{height:128px!important;min-height:128px!important;padding:15px 12px!important;border-radius:16px!important;display:grid!important;grid-template-columns:38px 1fr!important;align-content:start!important;gap:9px!important;overflow:hidden!important}
#week .week-stat-icon{width:38px!important;height:38px!important;font-size:19px!important}
#week .week-stat small{font-size:12px!important;line-height:1.2!important;margin-top:2px!important}
#week .week-stat b{font-size:27px!important;line-height:1!important;margin:7px 0 4px!important;white-space:nowrap!important}
#week .week-stat em{font-size:12px!important}
#week .week-status-pill{font-size:15px!important;padding:6px 10px!important;margin:6px 0 3px!important}
#week .week-table-card{width:100%!important;border-radius:16px!important;overflow:hidden!important}
#week .week-rows{padding:0 10px!important}
#week .week-row{display:grid!important;grid-template-columns:68px minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;gap:2px 8px!important;min-height:76px!important;padding:12px 4px!important;align-items:center!important}
#week .week-day{grid-column:1!important;grid-row:1 / span 2!important;align-self:center!important}
#week .week-day b{font-size:14px!important;line-height:1.2!important;color:#111827!important}
#week .week-day small{font-size:10px!important;margin-top:4px!important;color:#667085!important}
#week .week-time{grid-column:2!important;grid-row:1 / span 2!important;text-align:left!important;min-width:0!important;align-self:center!important}
#week .week-time b{font-size:13px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#week .week-time small{font-size:10px!important;line-height:1.2!important;margin-top:4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#667085!important}
#week .week-row>strong{grid-column:3!important;grid-row:1!important;font-size:14px!important;white-space:nowrap!important;text-align:right!important;align-self:end!important}
#week .week-row-status{grid-column:3!important;grid-row:2!important;font-size:10px!important;white-space:nowrap!important;text-align:right!important;align-self:start!important}
#week .week-row-actions{grid-column:3!important;grid-row:1 / span 2!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}
#week .week-total{height:52px!important;padding:0 14px!important;display:flex!important;align-items:center!important;background:#e8f3ff!important;font-size:15px!important}
#week .week-actions-card{width:100%!important;padding:14px!important;border-radius:16px!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
#week .week-actions-card .full-action{width:100%!important;height:48px!important;min-height:48px!important;background:#1677f5!important;border-radius:12px!important}
#week .week-notice{font-size:12px!important;line-height:1.35!important;padding:12px!important}
}
@media(max-width:420px){#week{padding-left:10px!important;padding-right:10px!important}#week .week-stat{height:120px!important;min-height:120px!important;padding:13px 10px!important}#week .week-stat-icon{width:34px!important;height:34px!important}#week .week-stat b{font-size:25px!important}#week .week-date b{font-size:12px!important}#week .week-row{grid-template-columns:62px minmax(0,1fr) auto!important}}

/* Holidays visual redesign */
.holiday-page{max-width:1080px;margin:0 auto;display:grid;gap:14px}
.holiday-head{padding:4px 2px}.holiday-head h2{margin:0;font-size:28px;font-weight:850;letter-spacing:-.6px}.holiday-head .small{margin-top:5px}
.holiday-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.holiday-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.holiday-card-head h2{margin:0!important;font-size:19px!important}.holiday-card-head .small{margin-top:4px}.holiday-icon{width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-size:20px;font-weight:800}.holiday-icon.blue{background:#e8f1ff;color:#1769e0}.holiday-icon.green{background:#e7f8ef;color:#16a05d}
#holidays .card{margin:0!important;padding:18px!important;border-radius:16px!important}.holiday-availability-notice{margin-top:12px!important;min-height:52px!important;background:#f0f7ff!important;border-color:#cfe2ff!important;color:#174a85!important}.holiday-request-card .full-action{margin-top:14px!important;width:100%!important}.holiday-requests-card{margin-top:0!important}.holiday-request-list .entry-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px!important;margin:9px 0!important}.holiday-request-list .entry-card:first-child{margin-top:4px!important}.holiday-request-list .badge{flex:0 0 auto}
@media(max-width:700px){.holiday-page{width:100%!important;max-width:none!important;gap:11px!important}.holiday-head{padding:4px 2px 0!important}.holiday-head h2{font-size:25px!important}.holiday-head .small{font-size:13px!important;margin-top:5px!important}.holiday-grid{grid-template-columns:1fr!important;gap:11px!important}#holidays .card{padding:15px!important;border-radius:16px!important}.holiday-card-head{margin-bottom:10px}.holiday-card-head h2{font-size:18px!important}.holiday-card-head .small{font-size:11px!important}.holiday-icon{width:36px;height:36px;font-size:18px}.holiday-date-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}.holiday-request-card .full-action{height:48px!important;min-height:48px!important}.holiday-request-list .entry-card{padding:13px!important}}
@media(max-width:420px){.holiday-date-grid{grid-template-columns:1fr!important}.holiday-request-list .entry-card{display:grid;grid-template-columns:1fr auto;align-items:start}}

/* Holidays mobile reference */
.holiday-allowance-card{display:grid;grid-template-columns:56px 1.6fr 1fr 1fr;align-items:center;gap:14px}.holiday-allowance-icon{width:56px;height:56px;border-radius:15px;background:#e8f1ff;color:#2580ee;display:grid;place-items:center;font-size:25px}.holiday-allowance-title h2{margin:0 0 4px!important;font-size:20px!important}.holiday-allowance-title b{display:block;font-size:31px;line-height:1.05}.holiday-allowance-title span,.holiday-allowance-metric span,.holiday-allowance-metric small{display:block;color:#667085;font-size:12px}.holiday-allowance-metric{border-left:1px solid var(--line);padding-left:18px}.holiday-allowance-metric b{display:block;font-size:27px;line-height:1.1;margin:4px 0}.holiday-allowance-metric.remaining b{color:#168b57}.holiday-request-card .holiday-icon.purple{background:#f0eaff;color:#7847e8}.holiday-requests-card .holiday-icon.green{background:#e7f8ef;color:#15965a}.holiday-request-list .entry-card{border:1px solid var(--line);background:#fff!important;box-shadow:none!important;border-radius:10px!important;margin:0!important;border-bottom:0!important}.holiday-request-list .entry-card:last-child{border-bottom:1px solid var(--line)!important}.holiday-request-list .badge{padding:6px 10px!important;border-radius:999px!important}
@media(max-width:700px){.holiday-page{gap:12px!important}.holiday-allowance-card{grid-template-columns:48px 1.25fr .85fr .95fr!important;gap:8px!important;padding:15px!important}.holiday-allowance-icon{width:48px;height:48px;font-size:21px}.holiday-allowance-title h2{font-size:17px!important}.holiday-allowance-title b{font-size:27px}.holiday-allowance-title span,.holiday-allowance-metric span,.holiday-allowance-metric small{font-size:10px}.holiday-allowance-metric{padding-left:10px}.holiday-allowance-metric b{font-size:24px}.holiday-request-card,.holiday-requests-card{padding:15px!important}.holiday-card-head{align-items:center!important}.holiday-card-head h2{font-size:18px!important}.holiday-card-head .small{font-size:11px!important;max-width:290px}.holiday-date-grid{grid-template-columns:1fr 1fr!important}.holiday-field input{height:46px!important}.holiday-request-card .full-action{height:48px!important;font-size:14px!important}.holiday-request-list .entry-card{display:grid!important;grid-template-columns:1fr auto!important;gap:6px!important;padding:13px!important}.holiday-request-list .entry-card .small{grid-column:1/-1}.holiday-request-list .badge{align-self:center}}
@media(max-width:420px){.holiday-allowance-card{grid-template-columns:42px 1.1fr .8fr .9fr!important;gap:6px!important;padding:12px!important}.holiday-allowance-icon{width:42px;height:42px}.holiday-allowance-title h2{font-size:15px!important}.holiday-allowance-title b{font-size:23px}.holiday-allowance-metric b{font-size:21px}.holiday-date-grid{grid-template-columns:1fr!important}}

/* Holidays v8 final mobile fixes */
.holiday-allowance-card{box-sizing:border-box!important}.holiday-allowance-title,.holiday-allowance-metric{min-width:0!important}.holiday-date-grid,.holiday-date-grid>*{min-width:0!important}.holiday-date-grid input{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
@media(max-width:700px){
#holidays{box-sizing:border-box!important}
#holidays .holiday-page{width:100%!important;box-sizing:border-box!important}
#holidays .holiday-allowance-card{display:grid!important;grid-template-columns:42px minmax(0,1fr) minmax(62px,.7fr) minmax(72px,.8fr)!important;align-items:center!important;gap:8px!important;overflow:hidden!important}
#holidays .holiday-allowance-title{min-width:0!important}.holiday-allowance-title h2{white-space:nowrap!important}.holiday-allowance-title b{font-size:24px!important}.holiday-allowance-title span{font-size:10px!important;white-space:nowrap!important}.holiday-allowance-metric{min-width:0!important;padding-left:9px!important}.holiday-allowance-metric b{font-size:21px!important}.holiday-allowance-metric small,.holiday-allowance-metric span{font-size:10px!important;white-space:nowrap!important}
#holidays .holiday-date-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;width:100%!important}
#holidays .holiday-field{min-width:0!important;width:100%!important}#holidays .holiday-field input{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:48px!important;padding:0 10px!important;border-radius:12px!important}
#holidays .holiday-request-card .full-action{background:#1677f5!important;color:#fff!important;border:0!important}
#holidays .holiday-icon{background:#e8f1ff!important;color:#2580ee!important}#holidays .holiday-request-card .holiday-icon{background:#f0eaff!important;color:#7847e8!important}#holidays .holiday-requests-card .holiday-icon{background:#e7f8ef!important;color:#15965a!important}
}
@media(max-width:420px){#holidays .holiday-allowance-card{grid-template-columns:38px minmax(0,1fr) 60px 68px!important;gap:6px!important;padding:12px!important}.holiday-allowance-title h2{font-size:14px!important}.holiday-allowance-title b{font-size:21px!important}.holiday-allowance-metric{padding-left:7px!important}.holiday-allowance-metric b{font-size:19px!important}#holidays .holiday-date-grid{grid-template-columns:1fr!important}}

/* Holidays v9 mobile spacing correction */
@media(max-width:700px){
#holidays .holiday-allowance-card{grid-template-columns:42px minmax(130px,1fr) 70px 78px!important;gap:8px!important;overflow:hidden!important}
#holidays .holiday-allowance-title h2{font-size:15px!important;white-space:nowrap!important;letter-spacing:-.2px!important}
#holidays .holiday-allowance-title b{font-size:25px!important;margin-top:5px!important}
#holidays .holiday-allowance-metric{padding-left:9px!important;white-space:nowrap!important}
#holidays .holiday-allowance-metric b{font-size:22px!important;margin:5px 0 3px!important}
#holidays .holiday-allowance-title span,#holidays .holiday-allowance-metric small,#holidays .holiday-allowance-metric span{font-size:10px!important}
#holidays .holiday-request-card .holiday-card-head{padding-right:0!important}
#holidays .holiday-request-card .holiday-card-head .small{max-width:250px!important}
#holidays .holiday-request-list{width:100%!important;overflow:hidden!important}
#holidays .holiday-request-list .entry-card{box-sizing:border-box!important;width:100%!important;min-width:0!important}
}
@media(max-width:420px){
#holidays .holiday-allowance-card{grid-template-columns:38px minmax(118px,1fr) 58px 68px!important;gap:6px!important;padding:12px!important}
#holidays .holiday-allowance-title h2{font-size:14px!important}
#holidays .holiday-allowance-title b{font-size:22px!important}
#holidays .holiday-allowance-metric{padding-left:7px!important}
#holidays .holiday-allowance-metric b{font-size:20px!important}
}

/* Holidays v10 request list polish */
.holiday-request-status{display:flex;align-items:center;gap:7px;justify-content:flex-end}.holiday-chevron{font-size:27px;line-height:1;color:#667085}.holiday-admin-note{grid-column:1/-1}
@media(max-width:700px){#holidays .holiday-request-card .holiday-card-head .small{font-size:10.5px!important;max-width:none!important;white-space:nowrap!important}#holidays .holiday-request-list .entry-card{grid-template-columns:minmax(0,1fr) auto!important}.holiday-request-status{gap:5px}.holiday-chevron{font-size:24px}.holiday-request-list .entry-card .small{font-size:11px!important}}

/* Holidays v11 real calendar icons */
.holiday-allowance-icon,.holiday-request-card .holiday-icon{font-size:0!important;position:relative!important}
.holiday-allowance-icon::before,.holiday-request-card .holiday-icon::before{content:"";display:block;width:21px;height:19px;border:2px solid currentColor;border-radius:3px;box-sizing:border-box;position:relative}
.holiday-allowance-icon::after,.holiday-request-card .holiday-icon::after{content:"";position:absolute;width:21px;height:5px;left:50%;top:50%;transform:translate(-50%,-6px);border-top:2px solid currentColor;box-sizing:border-box;box-shadow:-5px -6px 0 -4px currentColor,5px -6px 0 -4px currentColor}
@media(max-width:700px){.holiday-allowance-icon::before,.holiday-request-card .holiday-icon::before{width:20px;height:18px}.holiday-allowance-icon::after,.holiday-request-card .holiday-icon::after{width:20px}}

/* Holidays v12 reference alignment */
.holiday-allowance-card .holiday-allowance-icon{position:relative!important}.holiday-request-card .holiday-card-head{justify-content:flex-start!important;align-items:flex-start!important}.holiday-request-card .holiday-card-head .holiday-icon{order:0!important;margin-top:1px!important}.holiday-request-card .holiday-card-head>div{order:1!important}
.holiday-field{position:relative!important}.holiday-field input[type=date]{padding-right:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:19px}
@media(max-width:700px){#holidays .holiday-request-card .holiday-card-head{gap:10px!important}.holiday-request-card .holiday-card-head .small{max-width:290px!important}.holiday-field input[type=date]{background-position:right 11px center}}

/* Holidays v13 request card final fit */
.holiday-request-card{box-sizing:border-box!important}.holiday-request-card .holiday-card-head{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:12px!important;align-items:start!important}.holiday-request-card .holiday-card-head .holiday-icon{grid-column:1!important;grid-row:1!important;margin:0!important}.holiday-request-card .holiday-card-head>div{grid-column:2!important;grid-row:1!important;min-width:0!important}.holiday-request-card .holiday-card-head h2{line-height:1.15!important}.holiday-request-card .holiday-card-head .small{line-height:1.35!important}.holiday-request-card .holiday-date-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:18px!important}.holiday-request-card .holiday-field label{display:block!important;margin-bottom:7px!important;font-size:13px!important;font-weight:700!important;color:#667085!important}.holiday-request-card .holiday-field input[type=date]{height:52px!important;width:100%!important;box-sizing:border-box!important;border:1.5px solid #d0d5dd!important;border-radius:12px!important;background-color:#fff!important;font-size:14px!important;color:#111827!important}.holiday-request-card .full-action{height:50px!important;margin-top:16px!important;border-radius:12px!important;font-size:15px!important;font-weight:750!important}
@media(max-width:700px){#holidays .holiday-request-card{padding:16px!important}.holiday-request-card .holiday-card-head{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important}.holiday-request-card .holiday-card-head h2{font-size:20px!important}.holiday-request-card .holiday-card-head .small{font-size:12px!important;white-space:normal!important}.holiday-request-card .holiday-date-grid{grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:19px!important}.holiday-request-card .holiday-field label{font-size:13px!important;margin-bottom:6px!important}.holiday-request-card .holiday-field input[type=date]{height:50px!important;padding:0 34px 0 10px!important}.holiday-request-card .full-action{margin-top:16px!important;height:50px!important}}
@media(max-width:420px){.holiday-request-card .holiday-date-grid{grid-template-columns:1fr 1fr!important}.holiday-request-card .holiday-card-head h2{font-size:19px!important}.holiday-request-card .holiday-card-head .small{font-size:11px!important}.holiday-request-card .holiday-field input[type=date]{height:48px!important}.holiday-request-card .full-action{height:48px!important}}

/* Holidays v13 iPhone date fields no-overlap */
@media(max-width:700px){
#holidays .holiday-request-card .holiday-date-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;width:100%!important;max-width:100%!important;gap:10px!important;box-sizing:border-box!important}
#holidays .holiday-request-card .holiday-field{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;box-sizing:border-box!important}
#holidays .holiday-request-card .holiday-field input[type=date]{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;inline-size:100%!important;box-sizing:border-box!important;overflow:hidden!important;-webkit-appearance:none!important;appearance:none!important;background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:18px!important;padding:0 32px 0 10px!important}
}
@media(max-width:420px){#holidays .holiday-request-card .holiday-date-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}#holidays .holiday-request-card .holiday-field input[type=date]{font-size:13px!important}}

/* Holidays v14 calendar icon centered upright */
.holiday-allowance-icon,.holiday-request-card .holiday-icon{display:grid!important;place-items:center!important;position:relative!important;overflow:hidden!important}
.holiday-allowance-icon::before,.holiday-request-card .holiday-icon::before{content:"";display:block;width:24px;height:21px;border:3px solid currentColor;border-radius:4px;box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-45%)!important}
.holiday-allowance-icon::after,.holiday-request-card .holiday-icon::after{content:"";display:block;position:absolute;width:24px;height:7px;left:50%;top:50%;transform:translate(-50%,-8px)!important;border-top:3px solid currentColor;box-shadow:-6px -5px 0 -2px currentColor,6px -5px 0 -2px currentColor}
@media(max-width:700px){.holiday-allowance-icon::before,.holiday-request-card .holiday-icon::before{width:22px;height:20px}.holiday-allowance-icon::after,.holiday-request-card .holiday-icon::after{width:22px}}

/* Holidays v15 SVG calendar — exact centered icon */
.holiday-allowance-icon,.holiday-request-card .holiday-icon{display:grid!important;place-items:center!important;position:relative!important;overflow:hidden!important}
.holiday-allowance-icon::before,.holiday-allowance-icon::after,.holiday-request-card .holiday-icon::before,.holiday-request-card .holiday-icon::after{content:none!important}
.holiday-allowance-icon svg,.holiday-request-card .holiday-icon svg{display:block!important;width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;position:relative!important;left:auto!important;top:auto!important;transform:none!important}
@media(max-width:700px){.holiday-allowance-icon svg,.holiday-request-card .holiday-icon svg{width:21px!important;height:21px!important}}

/* Holiday request status colors */
.holiday-status{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:118px!important;padding:10px 18px!important;border-radius:999px!important;font-size:14px!important;font-weight:800!important;line-height:1!important;box-sizing:border-box!important}
.holiday-status.pending{background:#fff3cf!important;color:#a66a00!important}.holiday-status.approved{background:#dff7e9!important;color:#16834f!important}.holiday-status.rejected{background:#ffe3e3!important;color:#c62828!important}
@media(max-width:700px){.holiday-status{min-width:100px!important;padding:9px 14px!important;font-size:13px!important}}

/* Holidays v16 status pills — exact reference */
#holidays .holiday-request-list .holiday-status{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:132px!important;height:42px!important;padding:0 20px!important;border:0!important;border-radius:999px!important;font-size:15px!important;font-weight:800!important;line-height:1!important;box-sizing:border-box!important}
#holidays .holiday-request-list .holiday-status.pending{background:#fff2cc!important;color:#a66a00!important}
#holidays .holiday-request-list .holiday-status.approved{background:#dcf7e8!important;color:#16834f!important}
#holidays .holiday-request-list .holiday-status.rejected{background:#ffe1e1!important;color:#c62828!important}
#holidays .holiday-request-list .holiday-request-status{display:flex!important;align-items:center!important;gap:8px!important}
#holidays .holiday-request-list .holiday-chevron{font-size:28px!important;color:#667085!important;line-height:1!important}
@media(max-width:700px){#holidays .holiday-request-list .holiday-status{min-width:100px!important;height:40px!important;font-size:13px!important;padding:0 14px!important}}

/* Holidays v17 center selected date text */
@media(max-width:700px){
#holidays .holiday-request-card .holiday-field input[type=date]{text-align:center!important;text-align-last:center!important;padding-left:32px!important;padding-right:32px!important;font-variant-numeric:tabular-nums!important}
#holidays .holiday-request-card .holiday-field input[type=date]::-webkit-date-and-time-value{text-align:center!important}
}

/* Holidays v19 native date picker — centered and reliable on iPhone */
#holidays .holiday-date-wrap{position:relative!important;width:100%!important;min-width:0!important;box-sizing:border-box!important}
#holidays .holiday-date-wrap input[type=date]{position:relative!important;inset:auto!important;display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:50px!important;box-sizing:border-box!important;color:#172033!important;-webkit-text-fill-color:#172033!important;text-align:center!important;text-align-last:center!important;padding:0 42px 0 12px!important;background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:18px!important}
#holidays .holiday-date-display{display:none!important}
@media(max-width:700px){#holidays .holiday-request-card .holiday-date-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;width:100%!important;box-sizing:border-box!important}#holidays .holiday-request-card .holiday-field{min-width:0!important;width:100%!important}#holidays .holiday-date-wrap input[type=date]{height:50px!important;font-size:15px!important;text-align:center!important;text-align-last:center!important;padding:0 38px 0 10px!important}#holidays .holiday-date-wrap input[type=date]::-webkit-date-and-time-value{text-align:center!important}}
@media(max-width:420px){#holidays .holiday-request-card .holiday-date-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}#holidays .holiday-date-wrap input[type=date]{font-size:14px!important;padding-left:8px!important;padding-right:34px!important}}


/* Holidays v20 — true visual centering on iPhone */
#holidays .holiday-date-wrap{position:relative!important;width:100%!important;min-width:0!important}
#holidays .holiday-date-wrap input[type=date]{color:transparent!important;-webkit-text-fill-color:transparent!important;text-align:center!important;padding-left:42px!important;padding-right:42px!important}
#holidays .holiday-date-wrap input[type=date]::-webkit-date-and-time-value{color:transparent!important;-webkit-text-fill-color:transparent!important}
#holidays .holiday-date-display{display:flex!important;position:absolute!important;inset:0!important;align-items:center!important;justify-content:center!important;pointer-events:none!important;z-index:2!important;color:#172033!important;font-size:15px!important;font-weight:500!important;line-height:1!important;text-align:center!important;white-space:nowrap!important}
@media(max-width:700px){#holidays .holiday-date-display{font-size:15px!important}#holidays .holiday-date-wrap input[type=date]{padding-left:38px!important;padding-right:38px!important}}
@media(max-width:420px){#holidays .holiday-date-display{font-size:14px!important}#holidays .holiday-date-wrap input[type=date]{padding-left:34px!important;padding-right:34px!important}}


/* Holidays v21 — match mobile reference: centered dates + fixed calendar icon */
#holidays .holiday-date-wrap{position:relative!important;width:100%!important;min-width:0!important;height:50px!important;box-sizing:border-box!important}
#holidays .holiday-date-wrap input[type=date]{position:relative!important;z-index:1!important;width:100%!important;height:50px!important;margin:0!important;border:2px solid #d5dbe3!important;border-radius:18px!important;background:#fff!important;box-sizing:border-box!important;color:transparent!important;-webkit-text-fill-color:transparent!important;text-align:center!important;padding:0 48px!important;font-size:16px!important}
#holidays .holiday-date-wrap input[type=date]::-webkit-date-and-time-value{color:transparent!important;-webkit-text-fill-color:transparent!important;text-align:center!important}
#holidays .holiday-date-wrap input[type=date]::-webkit-calendar-picker-indicator{opacity:0!important;width:44px!important;height:44px!important;cursor:pointer!important}
#holidays .holiday-date-wrap:after{content:""!important;position:absolute!important;z-index:3!important;right:12px!important;top:50%!important;width:24px!important;height:24px!important;transform:translateY(-50%)!important;pointer-events:none!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat!important}
#holidays .holiday-date-display{display:flex!important;position:absolute!important;z-index:2!important;inset:0 48px 0 0!important;align-items:center!important;justify-content:center!important;pointer-events:none!important;color:#172033!important;font-size:16px!important;font-weight:500!important;line-height:1!important;text-align:center!important;white-space:nowrap!important}
@media(max-width:700px){#holidays .holiday-date-wrap,#holidays .holiday-date-wrap input[type=date]{height:50px!important}#holidays .holiday-date-display{font-size:15px!important;inset:0 46px 0 0!important}}
@media(max-width:420px){#holidays .holiday-date-display{font-size:14px!important;inset:0 42px 0 0!important}#holidays .holiday-date-wrap:after{right:10px!important;width:22px!important;height:22px!important}}


/* DASHBOARD FIX — ROOT Cloudflare production */
#hours .dash-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important}
#hours .dash-stat{min-height:370px!important;height:auto!important;padding:38px!important;border:2px solid #e1e5ea!important;border-radius:28px!important;background:#fff!important;box-shadow:0 8px 24px rgba(15,23,42,.055)!important;overflow:hidden!important;display:block!important}
#hours .dash-stat:before{display:none!important}
#hours .dash-stat .stat-icon{width:108px!important;height:108px!important;margin:0 0 22px!important;border-radius:28px!important;display:grid!important;place-items:center!important;font-size:43px!important;line-height:1!important}
#hours .dash-stat.stat-blue .stat-icon{background:#e7f1ff!important;color:#1769d1!important}
#hours .dash-stat.stat-green .stat-icon{background:#e3f7ed!important;color:#169b5c!important}
#hours .dash-stat.stat-purple .stat-icon{background:#eee8ff!important;color:#6941d9!important}
#hours .dash-stat.stat-orange .stat-icon{background:#fff1d8!important;color:#ed961e!important}
#hours .dash-stat .label{font-size:35px!important;line-height:1.15!important;font-weight:750!important;text-transform:none!important;letter-spacing:-.5px!important;color:#69727f!important;margin:0 0 14px!important}
#hours .dash-stat .value{font-size:61px!important;line-height:1.02!important;font-weight:900!important;letter-spacing:-1.5px!important;color:#0d1726!important}
#hours .dash-stat .hint{font-size:29px!important;line-height:1.2!important;color:#a1a7af!important;margin-top:13px!important}
@media(max-width:760px){#hours .dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}#hours .dash-stat{min-height:190px!important;padding:20px 18px!important;border-radius:20px!important}#hours .dash-stat .stat-icon{width:58px!important;height:58px!important;border-radius:17px!important;margin:0 0 13px!important;font-size:25px!important}#hours .dash-stat .label{font-size:19px!important;margin-bottom:7px!important}#hours .dash-stat .value{font-size:32px!important}.dash-stat .hint{font-size:16px!important;margin-top:7px!important}}
@media(max-width:420px){#hours .dash-stats{grid-template-columns:1fr 1fr!important;gap:9px!important}#hours .dash-stat{min-height:168px!important;padding:16px 14px!important;border-radius:17px!important}#hours .dash-stat .stat-icon{width:50px!important;height:50px!important;border-radius:15px!important;font-size:22px!important}#hours .dash-stat .label{font-size:17px!important}#hours .dash-stat .value{font-size:28px!important}#hours .dash-stat .hint{font-size:14px!important}}


/* DASHBOARD FIX 2 — restore normal card flow */
#hours .dash-stat .stat-icon{
  position:static!important;
  top:auto!important;
  left:auto!important;
  flex:0 0 auto!important;
}
#hours .dash-stat>div:last-child{
  margin-top:0!important;
  min-width:0!important;
}


/* DASHBOARD FIX 3 — clean calendar icon */
#hours .dash-stat.stat-green .calendar-stat-icon{
  position:relative!important;
  overflow:hidden!important;
}
#hours .dash-stat.stat-green .calendar-stat-icon::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:52px!important;
  height:44px!important;
  transform:translate(-50%,-42%)!important;
  box-sizing:border-box!important;
  border:4px solid currentColor!important;
  border-radius:10px!important;
  background:transparent!important;
}
#hours .dash-stat.stat-green .calendar-stat-icon::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:calc(50% - 10px)!important;
  width:44px!important;
  height:4px!important;
  transform:translateX(-50%)!important;
  border-radius:4px!important;
  background:currentColor!important;
  box-shadow:-15px -13px 0 -1px currentColor,15px -13px 0 -1px currentColor!important;
}


/* DASHBOARD FIX 4 — remove original calendar border before drawing custom icon */
#hours .dash-stat.stat-green .calendar-stat-icon{
  border:0!important;
  background:transparent!important;
}
#hours .dash-stat.stat-green .calendar-stat-icon::before{
  width:52px!important;
  height:44px!important;
  border:4px solid currentColor!important;
  border-radius:10px!important;
  background:transparent!important;
}
#hours .dash-stat.stat-green .calendar-stat-icon::after{
  left:50%!important;
  top:calc(50% - 9px)!important;
  width:40px!important;
  height:4px!important;
  border-radius:4px!important;
  background:currentColor!important;
  box-shadow:-14px -13px 0 -1px currentColor,14px -13px 0 -1px currentColor!important;
}


/* DASHBOARD MOBILE 1:1 — compact horizontal statistic cards */
@media(max-width:700px){
  #hours .dash-stats{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
  }
  #hours .dash-stat{
    min-height:112px!important;
    height:112px!important;
    padding:16px 14px!important;
    border:2px solid #e1e5ea!important;
    border-radius:22px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:14px!important;
    box-sizing:border-box!important;
  }
  #hours .dash-stat .stat-icon{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    flex:0 0 64px!important;
    width:64px!important;
    height:64px!important;
    margin:0!important;
    border-radius:19px!important;
    display:grid!important;
    place-items:center!important;
    font-size:36px!important;
    line-height:1!important;
  }
  #hours .dash-stat>div:last-child{
    margin:0!important;
    min-width:0!important;
    display:block!important;
  }
  #hours .dash-stat .label{
    font-size:20px!important;
    line-height:1.12!important;
    font-weight:750!important;
    margin:0 0 7px!important;
    letter-spacing:-.35px!important;
    white-space:nowrap!important;
  }
  #hours .dash-stat .value{
    font-size:36px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:-1px!important;
  }
  #hours .dash-stat .hint{
    font-size:17px!important;
    line-height:1.1!important;
    margin-top:6px!important;
    color:#89919d!important;
  }

  /* Larger clock icon */
  #hours .dash-stat.stat-blue .stat-icon{
    font-size:40px!important;
  }

  /* Compact calendar icon */
  #hours .dash-stat.stat-green .calendar-stat-icon{
    width:64px!important;
    height:64px!important;
    flex-basis:64px!important;
  }
  #hours .dash-stat.stat-green .calendar-stat-icon::before{
    width:48px!important;
    height:44px!important;
    border-width:4px!important;
    border-radius:10px!important;
  }
  #hours .dash-stat.stat-green .calendar-stat-icon::after{
    width:38px!important;
    height:4px!important;
    top:calc(50% - 8px)!important;
    box-shadow:-13px -12px 0 -1px currentColor,13px -12px 0 -1px currentColor!important;
  }

  /* Keep the greeting and quick actions compact */
  #hours .dash-greeting h2{font-size:27px!important}
  #hours .dash-date{font-size:16px!important}
  #hours .dashboard{gap:14px!important}
  #hours .quick-actions{gap:10px!important}
  #hours .quick-action{min-height:76px!important;border-radius:16px!important}
}

@media(max-width:420px){
  #hours .dash-stats{gap:10px!important}
  #hours .dash-stat{
    height:108px!important;
    min-height:108px!important;
    padding:14px 11px!important;
    border-radius:20px!important;
    gap:10px!important;
  }
  #hours .dash-stat .stat-icon{
    flex-basis:58px!important;
    width:58px!important;
    height:58px!important;
    border-radius:17px!important;
    font-size:32px!important;
  }
  #hours .dash-stat.stat-blue .stat-icon{font-size:36px!important}
  #hours .dash-stat.stat-green .calendar-stat-icon{
    width:58px!important;
    height:58px!important;
    flex-basis:58px!important;
  }
  #hours .dash-stat .label{
    font-size:18px!important;
    margin-bottom:5px!important;
  }
  #hours .dash-stat .value{font-size:31px!important}
  #hours .dash-stat .hint{font-size:15px!important;margin-top:5px!important}
  #hours .dash-stat.stat-orange .label{white-space:normal!important}
}


/* DASHBOARD MOBILE 1:1 — final spacing, labels and icons */
@media(max-width:700px){
  #hours .dash-stat{
    height:118px!important;
    min-height:118px!important;
    padding:14px 13px!important;
    gap:12px!important;
  }
  #hours .dash-stat .stat-icon{
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    border-radius:18px!important;
    font-size:34px!important;
  }
  #hours .dash-stat.stat-blue .stat-icon{font-size:38px!important}
  #hours .dash-stat .label{
    font-size:17px!important;
    line-height:1.1!important;
    white-space:normal!important;
    margin:0 0 6px!important;
  }
  #hours .dash-stat .value{
    font-size:32px!important;
    line-height:1!important;
  }
  #hours .dash-stat .hint{
    font-size:15px!important;
    margin-top:5px!important;
  }

  /* Rebuild the green calendar as one clean icon inside its pastel tile */
  #hours .dash-stat.stat-green .calendar-stat-icon{
    position:relative!important;
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    border:0!important;
    border-radius:18px!important;
    background:#e3f7ed!important;
    color:#169b5c!important;
    overflow:hidden!important;
  }
  #hours .dash-stat.stat-green .calendar-stat-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:38px!important;
    height:34px!important;
    transform:translate(-50%,-42%)!important;
    box-sizing:border-box!important;
    border:3px solid currentColor!important;
    border-radius:7px!important;
    background:transparent!important;
  }
  #hours .dash-stat.stat-green .calendar-stat-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:calc(50% - 6px)!important;
    width:30px!important;
    height:3px!important;
    transform:translateX(-50%)!important;
    border-radius:3px!important;
    background:currentColor!important;
    box-shadow:-10px -10px 0 -1px currentColor,10px -10px 0 -1px currentColor!important;
  }

  /* Prevent text from being cut off */
  #hours .dash-stat>div:last-child{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #hours .dash-stat.stat-orange .label{
    max-width:120px!important;
  }
}
@media(max-width:420px){
  #hours .dash-stat{
    height:114px!important;
    min-height:114px!important;
    padding:13px 11px!important;
    gap:9px!important;
  }
  #hours .dash-stat .stat-icon{
    flex-basis:54px!important;
    width:54px!important;
    height:54px!important;
    border-radius:17px!important;
  }
  #hours .dash-stat.stat-blue .stat-icon{font-size:35px!important}
  #hours .dash-stat.stat-green .calendar-stat-icon{
    flex-basis:54px!important;
    width:54px!important;
    height:54px!important;
  }
  #hours .dash-stat .label{font-size:16px!important}
  #hours .dash-stat .value{font-size:29px!important}
  #hours .dash-stat .hint{font-size:14px!important}
  #hours .dash-stat.stat-orange .label{max-width:105px!important}
}


/* QUICK ACTIONS — match reference 1:1 */
@media(max-width:700px){
  #hours .quick-card{
    padding:22px 18px!important;
    border-radius:22px!important;
  }
  #hours .quick-card .section-head h2{
    font-size:26px!important;
    font-weight:850!important;
    margin-bottom:18px!important;
  }
  #hours .quick-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin-top:0!important;
  }
  #hours .quick-action{
    position:relative!important;
    min-height:142px!important;
    height:142px!important;
    padding:18px!important;
    border-radius:28px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    color:#fff!important;
    font-size:0!important;
  }
  #hours .quick-action span:not(.quick-calendar-icon){
    font-size:21px!important;
    line-height:1.1!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }
  #hours .quick-action::after{
    content:"›"!important;
    position:absolute!important;
    right:20px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    font-size:42px!important;
    line-height:1!important;
    font-weight:300!important;
    color:#fff!important;
  }

  /* Add hours */
  #hours .quick-action.blue{
    background:#1677f5!important;
  }
  #hours .quick-action.blue::before{
    content:"+"!important;
    display:grid!important;
    place-items:center!important;
    width:68px!important;
    height:68px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
    font-size:58px!important;
    line-height:1!important;
    font-weight:300!important;
  }

  /* View week */
  #hours .quick-action.green{
    background:#19b565!important;
  }
  #hours .quick-action.green .quick-calendar-icon{
    position:relative!important;
    display:block!important;
    width:68px!important;
    height:68px!important;
    flex:0 0 68px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
  }
  #hours .quick-action.green .quick-calendar-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:42px!important;
    height:40px!important;
    transform:translate(-50%,-42%)!important;
    border:4px solid #fff!important;
    border-radius:9px!important;
    box-sizing:border-box!important;
  }
  #hours .quick-action.green .quick-calendar-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:28px!important;
    width:34px!important;
    height:4px!important;
    transform:translateX(-50%)!important;
    border-radius:3px!important;
    background:#fff!important;
    box-shadow:-11px -13px 0 -1px #fff,11px -13px 0 -1px #fff!important;
  }

  /* Book holiday */
  #hours .quick-action.orange{
    background:#f6a21a!important;
  }
  #hours .quick-action.orange::before{
    content:"☼"!important;
    display:grid!important;
    place-items:center!important;
    width:68px!important;
    height:68px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
    font-size:42px!important;
    line-height:1!important;
  }

  /* Create invoice */
  #hours .quick-action.purple{
    background:#6b4be8!important;
  }
  #hours .quick-action.purple::before{
    content:""!important;
    display:block!important;
    width:68px!important;
    height:68px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
    background-image:none!important;
    position:relative!important;
  }
  #hours .quick-action.purple::before{
    box-sizing:border-box!important;
    border:0!important;
  }
  #hours .quick-action.purple{
    --invoice-line:#fff;
  }
  #hours .quick-action.purple::before{
    box-shadow:none!important;
  }
  #hours .quick-action.purple::after{
    content:"›"!important;
  }

  /* Put invoice document icon on the purple tile via text glyph */
  #hours .quick-action.purple{
    font-size:0!important;
  }
  #hours .quick-action.purple span:not(.quick-calendar-icon)::before{
    content:"▤"!important;
    display:block!important;
    position:absolute!important;
    top:37px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:68px!important;
    height:68px!important;
    line-height:68px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
    color:#fff!important;
    font-size:42px!important;
    font-weight:400!important;
    text-align:center!important;
  }
}
@media(max-width:420px){
  #hours .quick-card{padding:18px 14px!important}
  #hours .quick-card .section-head h2{font-size:24px!important;margin-bottom:14px!important}
  #hours .quick-actions{gap:10px!important}
  #hours .quick-action{
    min-height:132px!important;
    height:132px!important;
    border-radius:24px!important;
    padding:14px!important;
    gap:9px!important;
  }
  #hours .quick-action span:not(.quick-calendar-icon){font-size:18px!important}
  #hours .quick-action::after{right:14px!important;font-size:36px!important}
  #hours .quick-action.blue::before,
  #hours .quick-action.orange::before,
  #hours .quick-action.purple span:not(.quick-calendar-icon)::before,
  #hours .quick-action.green .quick-calendar-icon{
    width:58px!important;height:58px!important;
  }
}


/* QUICK ACTIONS — remove duplicate icon layers and keep one clean icon */
@media(max-width:700px){
  #hours .quick-action.green .quick-calendar-icon{
    position:relative!important;
    display:block!important;
    width:68px!important;
    height:68px!important;
    flex:0 0 68px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
    overflow:hidden!important;
  }
  #hours .quick-action.green .quick-calendar-icon::before{
    width:42px!important;
    height:40px!important;
    border:4px solid #fff!important;
    border-radius:9px!important;
  }
  #hours .quick-action.green .quick-calendar-icon::after{
    width:34px!important;
    height:4px!important;
    top:28px!important;
    box-shadow:-11px -13px 0 -1px #fff,11px -13px 0 -1px #fff!important;
  }

  /* Purple invoice: use one document icon, no stacked pseudo tiles */
  #hours .quick-action.purple::before{
    display:block!important;
    content:"▤"!important;
    position:static!important;
    width:68px!important;
    height:68px!important;
    flex:0 0 68px!important;
    margin:0!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
    color:#fff!important;
    font-size:42px!important;
    line-height:68px!important;
    text-align:center!important;
    box-shadow:none!important;
  }
  #hours .quick-action.purple span:not(.quick-calendar-icon)::before{
    content:none!important;
    display:none!important;
  }

  /* Keep action labels centered and prevent icon/label overlap */
  #hours .quick-action span:not(.quick-calendar-icon){
    position:static!important;
    display:block!important;
    margin:0!important;
    text-align:center!important;
  }
}
@media(max-width:420px){
  #hours .quick-action.green .quick-calendar-icon,
  #hours .quick-action.purple::before{
    width:58px!important;
    height:58px!important;
    flex-basis:58px!important;
  }
  #hours .quick-action.purple::before{
    line-height:58px!important;
    font-size:36px!important;
  }
}


/* QUICK ACTIONS — final calendar icon cleanup */
@media(max-width:700px){
  #hours .quick-action.green .quick-calendar-icon{
    position:relative!important;
    display:block!important;
    width:68px!important;
    height:68px!important;
    flex:0 0 68px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
    overflow:hidden!important;
  }
  #hours .quick-action.green .quick-calendar-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:42px!important;
    height:40px!important;
    margin:0!important;
    transform:translate(-50%,-42%)!important;
    box-sizing:border-box!important;
    border:4px solid #fff!important;
    border-radius:9px!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #hours .quick-action.green .quick-calendar-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:29px!important;
    width:34px!important;
    height:4px!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    border:0!important;
    border-radius:3px!important;
    background:#fff!important;
    box-shadow:-11px -13px 0 -1px #fff,11px -13px 0 -1px #fff!important;
  }
}
@media(max-width:420px){
  #hours .quick-action.green .quick-calendar-icon{
    width:58px!important;height:58px!important;flex-basis:58px!important;
  }
}


/* QUICK ACTIONS — exact reference layout: horizontal icon / label / arrow */
@media(max-width:700px){
  #hours .quick-card{
    padding:22px 18px!important;
    border-radius:22px!important;
  }
  #hours .quick-card .section-head h2{
    font-size:26px!important;
    margin:0 0 18px!important;
  }
  #hours .quick-actions{
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
  }
  #hours .quick-action{
    position:relative!important;
    height:112px!important;
    min-height:112px!important;
    padding:14px 48px 14px 14px!important;
    border-radius:24px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    box-sizing:border-box!important;
    font-size:0!important;
    overflow:hidden!important;
  }

  /* icon tile */
  #hours .quick-action.blue::before,
  #hours .quick-action.orange::before,
  #hours .quick-action.purple::before,
  #hours .quick-action.green .quick-calendar-icon{
    position:relative!important;
    inset:auto!important;
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    margin:0!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.18)!important;
    box-shadow:none!important;
  }

  #hours .quick-action.blue::before{
    content:"+"!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    font-size:48px!important;
    font-weight:300!important;
    line-height:1!important;
  }

  #hours .quick-action.orange::before{
    content:"☼"!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    font-size:37px!important;
    line-height:1!important;
  }

  #hours .quick-action.purple::before{
    content:"▤"!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    font-size:36px!important;
    font-weight:400!important;
    line-height:1!important;
  }

  #hours .quick-action.green .quick-calendar-icon{
    display:block!important;
    overflow:hidden!important;
  }
  #hours .quick-action.green .quick-calendar-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:37px!important;
    height:36px!important;
    transform:translate(-50%,-42%)!important;
    box-sizing:border-box!important;
    border:4px solid #fff!important;
    border-radius:8px!important;
    background:transparent!important;
  }
  #hours .quick-action.green .quick-calendar-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:27px!important;
    width:30px!important;
    height:4px!important;
    transform:translateX(-50%)!important;
    border-radius:3px!important;
    background:#fff!important;
    box-shadow:-10px -12px 0 -1px #fff,10px -12px 0 -1px #fff!important;
  }

  /* label */
  #hours .quick-action span:not(.quick-calendar-icon){
    position:static!important;
    flex:1 1 auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    color:#fff!important;
    font-size:18px!important;
    line-height:1.1!important;
    font-weight:850!important;
    text-align:left!important;
    white-space:normal!important;
  }

  /* arrow */
  #hours .quick-action::after{
    content:"›"!important;
    position:absolute!important;
    right:15px!important;
    top:50%!important;
    transform:translateY(-54%)!important;
    color:#fff!important;
    font-size:38px!important;
    line-height:1!important;
    font-weight:300!important;
  }
}
@media(max-width:420px){
  #hours .quick-card{padding:18px 14px!important}
  #hours .quick-card .section-head h2{font-size:24px!important;margin-bottom:14px!important}
  #hours .quick-actions{gap:10px!important}
  #hours .quick-action{
    height:104px!important;
    min-height:104px!important;
    padding:12px 42px 12px 10px!important;
    border-radius:21px!important;
    gap:9px!important;
  }
  #hours .quick-action.blue::before,
  #hours .quick-action.orange::before,
  #hours .quick-action.purple::before,
  #hours .quick-action.green .quick-calendar-icon{
    flex-basis:52px!important;
    width:52px!important;
    height:52px!important;
    border-radius:15px!important;
  }
  #hours .quick-action span:not(.quick-calendar-icon){
    font-size:16px!important;
  }
  #hours .quick-action::after{
    right:10px!important;
    font-size:34px!important;
  }
}


/* QUICK ACTIONS — explicit 1:1 reference structure */
@media(max-width:700px){
  #hours .quick-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin-top:0!important;
  }
  #hours .quick-action{
    position:relative!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    width:100%!important;
    height:112px!important;
    min-height:112px!important;
    padding:14px 48px 14px 14px!important;
    border:0!important;
    border-radius:24px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    color:#fff!important;
    font-size:initial!important;
  }
  #hours .quick-action .quick-icon{
    position:relative!important;
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    margin:0!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.18)!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  #hours .quick-action .quick-label{
    flex:1 1 auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1.1!important;
    font-weight:850!important;
    text-align:left!important;
    white-space:nowrap!important;
  }
  #hours .quick-action .quick-arrow{
    position:absolute!important;
    right:16px!important;
    top:50%!important;
    transform:translateY(-53%)!important;
    color:#fff!important;
    font-size:42px!important;
    font-weight:300!important;
    line-height:1!important;
  }
  #hours .quick-action .plus-icon{
    font-size:54px!important;
    font-weight:300!important;
    line-height:1!important;
  }
  #hours .quick-action .sun-icon{
    font-size:39px!important;
    line-height:1!important;
  }
  #hours .quick-action .invoice-icon{
    font-size:37px!important;
    line-height:1!important;
  }

  /* clean calendar */
  #hours .quick-action .quick-calendar-icon{
    overflow:hidden!important;
  }
  #hours .quick-action .quick-calendar-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:38px!important;
    height:36px!important;
    transform:translate(-50%,-40%)!important;
    border:4px solid #fff!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
  }
  #hours .quick-action .quick-calendar-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:28px!important;
    width:30px!important;
    height:4px!important;
    transform:translateX(-50%)!important;
    border-radius:3px!important;
    background:#fff!important;
    box-shadow:-10px -12px 0 -1px #fff,10px -12px 0 -1px #fff!important;
  }

  /* disable all legacy pseudo icons */
  #hours .quick-action::before,
  #hours .quick-action::after{
    content:none!important;
  }
}
@media(max-width:420px){
  #hours .quick-actions{gap:10px!important}
  #hours .quick-action{
    height:104px!important;
    min-height:104px!important;
    padding:12px 42px 12px 10px!important;
    border-radius:21px!important;
    gap:9px!important;
  }
  #hours .quick-action .quick-icon{
    flex-basis:52px!important;
    width:52px!important;
    height:52px!important;
    border-radius:15px!important;
  }
  #hours .quick-action .quick-label{font-size:17px!important}
  #hours .quick-action .quick-arrow{right:10px!important;font-size:35px!important}
  #hours .quick-action .plus-icon{font-size:48px!important}
  #hours .quick-action .sun-icon{font-size:35px!important}
  #hours .quick-action .invoice-icon{font-size:34px!important}
}


/* QUICK ACTIONS — kill every legacy pseudo-element */
@media(max-width:700px){
  #hours .quick-action::before,
  #hours .quick-action::after,
  #hours .quick-action .quick-label::before,
  #hours .quick-action .quick-label::after,
  #hours .quick-action .quick-arrow::before,
  #hours .quick-action .quick-arrow::after{
    content:none!important;
    display:none!important;
  }

  #hours .quick-action .quick-icon{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
  }
  #hours .quick-action .quick-label{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  #hours .quick-action .quick-arrow{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    content:"›"!important;
  }

  #hours .quick-action.blue .plus-icon,
  #hours .quick-action.orange .sun-icon,
  #hours .quick-action.purple .invoice-icon{
    display:grid!important;
  }

  #hours .quick-action.green .quick-calendar-icon::before,
  #hours .quick-action.green .quick-calendar-icon::after{
    display:block!important;
  }
}


/* QUICK ACTIONS — REFERENCE LOCK */
@media(max-width:700px){
  #hours .quick-card{
    padding:22px 18px!important;
    border:1px solid #e5e7eb!important;
    border-radius:24px!important;
    background:#fff!important;
    box-sizing:border-box!important;
  }
  #hours .quick-card .section-head{
    margin:0 0 18px!important;
  }
  #hours .quick-card .section-head h2{
    margin:0!important;
    font-size:25px!important;
    line-height:1.1!important;
    font-weight:850!important;
    color:#0d1726!important;
  }
  #hours .quick-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    width:100%!important;
    margin:0!important;
  }

  #hours .quick-action{
    all:unset!important;
    position:relative!important;
    width:100%!important;
    height:112px!important;
    min-height:112px!important;
    box-sizing:border-box!important;
    border-radius:24px!important;
    padding:14px 52px 14px 14px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    color:#fff!important;
    cursor:pointer!important;
    overflow:hidden!important;
  }
  #hours .quick-action.blue{background:#1677f5!important}
  #hours .quick-action.green{background:#19b565!important}
  #hours .quick-action.orange{background:#f6a21a!important}
  #hours .quick-action.purple{background:#6848e8!important}

  /* one icon tile only */
  #hours .quick-action .quick-icon{
    all:unset!important;
    position:relative!important;
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    box-sizing:border-box!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.20)!important;
    color:#fff!important;
    display:grid!important;
    place-items:center!important;
    text-align:center!important;
  }

  #hours .quick-action .quick-label{
    all:unset!important;
    flex:1 1 auto!important;
    min-width:0!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:20px!important;
    line-height:1.1!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }

  #hours .quick-action .quick-arrow{
    all:unset!important;
    position:absolute!important;
    right:15px!important;
    top:50%!important;
    transform:translateY(-53%)!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:42px!important;
    line-height:1!important;
    font-weight:300!important;
  }

  /* icons */
  #hours .quick-action .plus-icon{
    font-size:54px!important;
    font-weight:300!important;
    line-height:1!important;
  }
  #hours .quick-action .sun-icon{
    font-size:39px!important;
    line-height:1!important;
  }
  #hours .quick-action .invoice-icon{
    font-size:37px!important;
    line-height:1!important;
  }

  #hours .quick-action .quick-calendar-icon{
    overflow:hidden!important;
  }
  #hours .quick-action .quick-calendar-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:38px!important;
    height:36px!important;
    transform:translate(-50%,-40%)!important;
    box-sizing:border-box!important;
    border:4px solid #fff!important;
    border-radius:8px!important;
    background:transparent!important;
  }
  #hours .quick-action .quick-calendar-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:28px!important;
    width:30px!important;
    height:4px!important;
    transform:translateX(-50%)!important;
    border:0!important;
    border-radius:3px!important;
    background:#fff!important;
    box-shadow:-10px -12px 0 -1px #fff,10px -12px 0 -1px #fff!important;
  }

  /* absolutely no legacy decorations */
  #hours .quick-action::before,
  #hours .quick-action::after,
  #hours .quick-action .quick-label::before,
  #hours .quick-action .quick-label::after,
  #hours .quick-action .quick-arrow::before,
  #hours .quick-action .quick-arrow::after{
    content:none!important;
    display:none!important;
  }
}

@media(max-width:420px){
  #hours .quick-card{
    padding:20px 14px!important;
    border-radius:22px!important;
  }
  #hours .quick-card .section-head{margin-bottom:16px!important}
  #hours .quick-card .section-head h2{font-size:24px!important}
  #hours .quick-actions{gap:10px!important}
  #hours .quick-action{
    height:104px!important;
    min-height:104px!important;
    border-radius:22px!important;
    padding:12px 42px 12px 10px!important;
    gap:9px!important;
  }
  #hours .quick-action .quick-icon{
    flex-basis:52px!important;
    width:52px!important;
    height:52px!important;
    border-radius:15px!important;
  }
  #hours .quick-action .quick-label{font-size:17px!important}
  #hours .quick-action .quick-arrow{right:10px!important;font-size:35px!important}
  #hours .quick-action .plus-icon{font-size:48px!important}
  #hours .quick-action .sun-icon{font-size:35px!important}
  #hours .quick-action .invoice-icon{font-size:34px!important}
  #hours .quick-action .quick-calendar-icon::before{
    width:34px!important;height:32px!important;border-width:3px!important;
  }
  #hours .quick-action .quick-calendar-icon::after{
    width:27px!important;height:3px!important;top:25px!important;
    box-shadow:-9px -10px 0 -1px #fff,9px -10px 0 -1px #fff!important;
  }
}


/* QUICK ACTIONS — remove higher-specificity legacy decorations */
@media(max-width:700px){
  #hours .quick-action.blue::before,
  #hours .quick-action.blue::after,
  #hours .quick-action.green::before,
  #hours .quick-action.green::after,
  #hours .quick-action.orange::before,
  #hours .quick-action.orange::after,
  #hours .quick-action.purple::before,
  #hours .quick-action.purple::after{
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    border:0!important;
    box-shadow:none!important;
    background:none!important;
  }

  #hours .quick-action .quick-icon::before,
  #hours .quick-action .quick-icon::after{
    content:none!important;
  }

  #hours .quick-action .quick-calendar-icon::before,
  #hours .quick-action .quick-calendar-icon::after{
    content:""!important;
    display:block!important;
  }

  #hours .quick-action{
    height:112px!important;
    min-height:112px!important;
    border-radius:24px!important;
    padding:14px 52px 14px 14px!important;
    gap:14px!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    border-radius:17px!important;
  }
  #hours .quick-action .quick-label{
    font-size:20px!important;
    line-height:1.1!important;
    font-weight:850!important;
  }
  #hours .quick-action .quick-arrow{
    right:15px!important;
    font-size:42px!important;
  }
}
@media(max-width:420px){
  #hours .quick-action{
    height:104px!important;
    min-height:104px!important;
    border-radius:22px!important;
  }
}


/* QUICK ACTIONS — match reference proportions */
@media(min-width:701px){
  #hours .quick-actions{
    grid-template-columns:1fr 1fr!important;
    gap:30px!important;
  }
  #hours .quick-action{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:2.83 / 1!important;
    padding:14px 58px 14px 28px!important;
    border-radius:34px!important;
    gap:28px!important;
    box-sizing:border-box!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 24%!important;
    width:24%!important;
    height:auto!important;
    aspect-ratio:1!important;
    border-radius:24px!important;
  }
  #hours .quick-action .quick-label{
    font-size:clamp(28px,3.45vw,52px)!important;
    line-height:1.05!important;
    font-weight:850!important;
  }
  #hours .quick-action .quick-arrow{
    right:28px!important;
    font-size:clamp(42px,3.1vw,54px)!important;
  }
  #hours .quick-action .plus-icon{font-size:clamp(58px,4.3vw,76px)!important}
  #hours .quick-action .sun-icon{font-size:clamp(45px,3.5vw,62px)!important}
  #hours .quick-action .invoice-icon{font-size:clamp(44px,3.3vw,58px)!important}

  #hours .quick-action .quick-calendar-icon::before{
    width:58%!important;
    height:55%!important;
    border-width:5px!important;
    border-radius:11px!important;
  }
  #hours .quick-action .quick-calendar-icon::after{
    width:46%!important;
    height:5px!important;
    top:51%!important;
    box-shadow:-14px -18px 0 -1px #fff,14px -18px 0 -1px #fff!important;
  }
}

@media(max-width:700px){
  #hours .quick-actions{
    gap:10px!important;
  }
  #hours .quick-action{
    aspect-ratio:2.83 / 1!important;
    height:auto!important;
    min-height:0!important;
    padding:10px 42px 10px 10px!important;
    border-radius:22px!important;
    gap:10px!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 24%!important;
    width:24%!important;
    height:auto!important;
    aspect-ratio:1!important;
    border-radius:15px!important;
  }
  #hours .quick-action .quick-label{
    font-size:clamp(15px,4vw,20px)!important;
    line-height:1.05!important;
  }
  #hours .quick-action .quick-arrow{
    right:10px!important;
    font-size:34px!important;
  }
}

@media(max-width:420px){
  #hours .quick-action{
    aspect-ratio:2.7 / 1!important;
    padding:8px 34px 8px 8px!important;
    gap:8px!important;
    border-radius:19px!important;
  }
  #hours .quick-action .quick-icon{
    flex-basis:24%!important;
    width:24%!important;
    border-radius:13px!important;
  }
  #hours .quick-action .quick-label{font-size:15px!important}
  #hours .quick-action .quick-arrow{right:7px!important;font-size:30px!important}
}


/* QUICK ACTIONS — match latest supplied reference */
@media(max-width:700px){
  #hours .quick-card{
    padding:20px 18px!important;
    border-radius:24px!important;
  }
  #hours .quick-card .section-head h2{
    font-size:25px!important;
    line-height:1.05!important;
    margin-bottom:18px!important;
  }
  #hours .quick-actions{
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
  }
  #hours .quick-action{
    aspect-ratio:2.75 / 1!important;
    height:auto!important;
    min-height:0!important;
    padding:8px 44px 8px 14px!important;
    border-radius:24px!important;
    gap:12px!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    border-radius:16px!important;
  }
  #hours .quick-action .quick-label{
    font-size:18px!important;
    line-height:1.02!important;
    font-weight:850!important;
    white-space:normal!important;
  }
  #hours .quick-action .quick-arrow{
    right:14px!important;
    font-size:38px!important;
  }
  #hours .quick-action .plus-icon{font-size:43px!important}
  #hours .quick-action .sun-icon{font-size:31px!important}
  #hours .quick-action .invoice-icon{font-size:29px!important}
}
@media(max-width:420px){
  #hours .quick-card{
    padding:18px 14px!important;
    border-radius:22px!important;
  }
  #hours .quick-card .section-head h2{
    font-size:23px!important;
    margin-bottom:15px!important;
  }
  #hours .quick-actions{gap:10px!important}
  #hours .quick-action{
    aspect-ratio:2.7 / 1!important;
    padding:7px 36px 7px 10px!important;
    border-radius:21px!important;
    gap:9px!important;
  }
  #hours .quick-action .quick-icon{
    flex-basis:52px!important;
    width:52px!important;
    height:52px!important;
    border-radius:14px!important;
  }
  #hours .quick-action .quick-label{font-size:16px!important}
  #hours .quick-action .quick-arrow{right:9px!important;font-size:34px!important}
}


/* QUICK ACTIONS — polished reference implementation */
@media(max-width:700px){
  #hours .quick-card{
    padding:22px 18px!important;
    border:1px solid #e4e8ed!important;
    border-radius:24px!important;
    background:#fff!important;
    box-shadow:0 4px 16px rgba(15,23,42,.05)!important;
  }
  #hours .quick-card .section-head h2{
    margin:0 0 18px!important;
    font-size:25px!important;
    line-height:1.08!important;
    font-weight:850!important;
    letter-spacing:-.5px!important;
    color:#101a2a!important;
  }
  #hours .quick-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin:0!important;
  }
  #hours .quick-action{
    position:relative!important;
    width:100%!important;
    height:112px!important;
    min-height:112px!important;
    padding:12px 48px 12px 12px!important;
    border:0!important;
    border-radius:25px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  #hours .quick-action.blue{background:#1878f2!important}
  #hours .quick-action.green{background:#19b566!important}
  #hours .quick-action.orange{background:#f7a313!important}
  #hours .quick-action.purple{background:#6848e8!important}

  /* Clean icon tile */
  #hours .quick-action .quick-icon{
    position:relative!important;
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.22)!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    font-size:0!important;
    line-height:1!important;
    overflow:hidden!important;
  }

  /* Plus */
  #hours .quick-action .plus-icon::before,
  #hours .quick-action .plus-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:34px!important;
    height:4px!important;
    border-radius:4px!important;
    background:#fff!important;
    transform:translate(-50%,-50%)!important;
  }
  #hours .quick-action .plus-icon::after{
    transform:translate(-50%,-50%) rotate(90deg)!important;
  }

  /* Calendar */
  #hours .quick-action .quick-calendar-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:53%!important;
    width:34px!important;
    height:34px!important;
    transform:translate(-50%,-50%)!important;
    border:4px solid #fff!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
  }
  #hours .quick-action .quick-calendar-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:31%!important;
    width:31px!important;
    height:4px!important;
    transform:translateX(-50%)!important;
    border-radius:4px!important;
    background:#fff!important;
    box-shadow:-10px -9px 0 -1px #fff,10px -9px 0 -1px #fff!important;
  }

  /* Sun */
  #hours .quick-action .sun-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:18px!important;
    height:18px!important;
    transform:translate(-50%,-50%)!important;
    border:4px solid #fff!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
  }
  #hours .quick-action .sun-icon::after{
    content:"✦"!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-52%)!important;
    color:#fff!important;
    font-size:44px!important;
    line-height:1!important;
    font-weight:300!important;
  }

  /* Invoice document */
  #hours .quick-action .invoice-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:30px!important;
    height:38px!important;
    transform:translate(-50%,-50%)!important;
    border:4px solid #fff!important;
    border-radius:3px!important;
    box-sizing:border-box!important;
  }
  #hours .quick-action .invoice-icon::after{
    content:"☰"!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    color:#fff!important;
    font-size:22px!important;
    line-height:1!important;
    font-weight:400!important;
  }

  #hours .quick-action .quick-label{
    flex:1 1 auto!important;
    min-width:0!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:20px!important;
    line-height:1.06!important;
    font-weight:850!important;
    letter-spacing:-.3px!important;
    white-space:normal!important;
    text-align:left!important;
  }
  #hours .quick-action .quick-arrow{
    position:absolute!important;
    right:14px!important;
    top:50%!important;
    transform:translateY(-52%)!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:39px!important;
    line-height:1!important;
    font-weight:300!important;
  }

  /* eliminate all legacy decorations */
  #hours .quick-action::before,
  #hours .quick-action::after,
  #hours .quick-action .quick-label::before,
  #hours .quick-action .quick-label::after,
  #hours .quick-action .quick-arrow::before,
  #hours .quick-action .quick-arrow::after{
    content:none!important;
    display:none!important;
  }
}
@media(max-width:420px){
  #hours .quick-card{padding:20px 14px!important;border-radius:22px!important}
  #hours .quick-card .section-head h2{font-size:23px!important;margin-bottom:15px!important}
  #hours .quick-actions{gap:10px!important}
  #hours .quick-action{
    height:102px!important;
    min-height:102px!important;
    padding:10px 38px 10px 10px!important;
    border-radius:22px!important;
    gap:9px!important;
  }
  #hours .quick-action .quick-icon{
    flex-basis:52px!important;
    width:52px!important;
    height:52px!important;
    border-radius:15px!important;
  }
  #hours .quick-action .quick-label{font-size:16px!important}
  #hours .quick-action .quick-arrow{right:9px!important;font-size:34px!important}
}


/* QUICK ACTIONS — exact proportions from supplied reference */
@media(min-width:701px){
  #hours .quick-card{
    padding:28px 26px 30px!important;
    border-radius:28px!important;
  }
  #hours .quick-card .section-head{
    margin:0 0 26px!important;
  }
  #hours .quick-card .section-head h2{
    font-size:clamp(38px,4.3vw,66px)!important;
    line-height:1!important;
    letter-spacing:-1.5px!important;
    margin:0!important;
  }
  #hours .quick-actions{
    grid-template-columns:1fr 1fr!important;
    gap:24px 30px!important;
  }
  #hours .quick-action{
    aspect-ratio:3.40 / 1!important;
    height:auto!important;
    min-height:0!important;
    padding:10px 48px 10px 28px!important;
    border-radius:32px!important;
    gap:28px!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 21%!important;
    width:21%!important;
    height:auto!important;
    aspect-ratio:1!important;
    border-radius:24px!important;
  }
  #hours .quick-action .quick-label{
    font-size:clamp(28px,3.45vw,52px)!important;
    line-height:1.05!important;
    font-weight:800!important;
    letter-spacing:-.7px!important;
  }
  #hours .quick-action .quick-arrow{
    right:28px!important;
    font-size:clamp(42px,3.2vw,54px)!important;
  }
  #hours .quick-action .plus-icon{font-size:clamp(58px,4.1vw,76px)!important}
  #hours .quick-action .sun-icon{font-size:clamp(44px,3.4vw,62px)!important}
  #hours .quick-action .invoice-icon{font-size:0!important}
  #hours .quick-action .invoice-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:43%!important;
    height:57%!important;
    transform:translate(-50%,-50%)!important;
    border:4px solid #fff!important;
    border-radius:5px!important;
    box-sizing:border-box!important;
  }
  #hours .quick-action .invoice-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:54%!important;
    width:25%!important;
    height:4px!important;
    transform:translate(-50%,-50%)!important;
    background:#fff!important;
    box-shadow:0 -11px 0 -1px #fff,0 11px 0 -1px #fff!important;
  }
  #hours .quick-action .quick-calendar-icon::before{
    width:57%!important;
    height:56%!important;
    border-width:5px!important;
    border-radius:10px!important;
  }
  #hours .quick-action .quick-calendar-icon::after{
    width:46%!important;
    height:5px!important;
    top:51%!important;
    box-shadow:-14px -18px 0 -1px #fff,14px -18px 0 -1px #fff!important;
  }
}
@media(max-width:700px){
  #hours .quick-card{
    padding:20px 14px!important;
    border-radius:22px!important;
  }
  #hours .quick-card .section-head h2{
    font-size:24px!important;
    margin-bottom:16px!important;
  }
  #hours .quick-actions{gap:10px!important}
  #hours .quick-action{
    aspect-ratio:3.15 / 1!important;
    height:auto!important;
    min-height:0!important;
    padding:8px 38px 8px 10px!important;
    border-radius:21px!important;
    gap:9px!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 21%!important;
    width:21%!important;
    height:auto!important;
    aspect-ratio:1!important;
    border-radius:15px!important;
  }
  #hours .quick-action .quick-label{
    font-size:clamp(15px,4vw,19px)!important;
    line-height:1.05!important;
    font-weight:800!important;
  }
  #hours .quick-action .quick-arrow{
    right:9px!important;
    font-size:34px!important;
  }
}


/* QUICK ACTIONS — interior alignment / typography polish */
@media(max-width:700px){
  #hours .quick-action{
    padding:8px 34px 8px 12px!important;
    gap:12px!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 64px!important;
    width:64px!important;
    height:64px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.22)!important;
  }
  #hours .quick-action .quick-label{
    flex:1 1 auto!important;
    font-size:19px!important;
    line-height:1.05!important;
    font-weight:800!important;
    letter-spacing:-.45px!important;
    white-space:nowrap!important;
  }
  #hours .quick-action .quick-arrow{
    right:12px!important;
    font-size:36px!important;
    font-weight:300!important;
  }

  /* consistent icon scale */
  #hours .quick-action .plus-icon::before,
  #hours .quick-action .plus-icon::after{
    width:30px!important;
    height:4px!important;
  }
  #hours .quick-action .quick-calendar-icon::before{
    width:38px!important;
    height:36px!important;
    border-width:4px!important;
  }
  #hours .quick-action .quick-calendar-icon::after{
    width:31px!important;
    height:4px!important;
    top:31%!important;
    box-shadow:-10px -10px 0 -1px #fff,10px -10px 0 -1px #fff!important;
  }
  #hours .quick-action .sun-icon::before{
    width:18px!important;
    height:18px!important;
    border-width:3px!important;
  }
  #hours .quick-action .sun-icon::after{
    font-size:40px!important;
  }
  #hours .quick-action .invoice-icon::before{
    width:28px!important;
    height:36px!important;
    border-width:3px!important;
  }
  #hours .quick-action .invoice-icon::after{
    font-size:20px!important;
  }
}
@media(max-width:420px){
  #hours .quick-action{
    padding:8px 34px 8px 10px!important;
    gap:10px!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 62px!important;
    width:62px!important;
    height:62px!important;
    border-radius:18px!important;
  }
  #hours .quick-action .quick-label{
    font-size:18px!important;
    letter-spacing:-.5px!important;
  }
  #hours .quick-action .quick-arrow{
    right:9px!important;
    font-size:34px!important;
  }
}


/* QUICK ACTIONS — typography + icon alignment only; preserve tile dimensions */
@media(max-width:700px){
  #hours .quick-action .quick-label{
    font-family:inherit!important;
    font-size:18px!important;
    line-height:1.08!important;
    font-weight:800!important;
    letter-spacing:-.3px!important;
    text-align:left!important;
    white-space:nowrap!important;
    margin:0!important;
  }
  #hours .quick-action .quick-arrow{
    font-family:Arial,sans-serif!important;
    font-size:34px!important;
    font-weight:300!important;
    line-height:1!important;
    right:10px!important;
  }
  #hours .quick-action .quick-icon{
    display:grid!important;
    place-items:center!important;
    flex-shrink:0!important;
    margin:0!important;
  }
  #hours .quick-action .plus-icon{font-size:38px!important;line-height:1!important}
  #hours .quick-action .sun-icon{font-size:34px!important;line-height:1!important}
  #hours .quick-action .invoice-icon{font-size:31px!important;line-height:1!important}
  #hours .quick-action .quick-calendar-icon{font-size:34px!important;line-height:1!important}
}


/* QUICK ACTIONS — INNER CONTENT ONLY; TILE GEOMETRY UNCHANGED */
@media(max-width:700px){
  #hours .quick-action{
    /* preserve existing width/height/grid/radius */
    box-sizing:border-box!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  #hours .quick-action .quick-icon{
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    border-radius:16px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    background:rgba(255,255,255,.22)!important;
    overflow:hidden!important;
  }
  #hours .quick-action .quick-label{
    flex:1 1 auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:18px!important;
    line-height:1.08!important;
    font-weight:800!important;
    letter-spacing:-.25px!important;
    text-align:left!important;
    white-space:normal!important;
  }
  #hours .quick-action .quick-arrow{
    position:absolute!important;
    right:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:36px!important;
    font-weight:300!important;
    line-height:1!important;
  }

  /* clean, consistent icon sizing */
  #hours .quick-action .plus-icon{font-size:40px!important;line-height:1!important}
  #hours .quick-action .quick-calendar-icon{font-size:34px!important;line-height:1!important}
  #hours .quick-action .sun-icon{font-size:34px!important;line-height:1!important}
  #hours .quick-action .invoice-icon{font-size:31px!important;line-height:1!important}

  /* prevent any legacy inner overlays */
  #hours .quick-action .quick-label::before,
  #hours .quick-action .quick-label::after,
  #hours .quick-action .quick-arrow::before,
  #hours .quick-action .quick-arrow::after{
    content:none!important;
    display:none!important;
  }
}
@media(max-width:420px){
  #hours .quick-action .quick-icon{
    flex-basis:54px!important;
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
    border-radius:15px!important;
  }
  #hours .quick-action .quick-label{
    font-size:17px!important;
    line-height:1.06!important;
  }
  #hours .quick-action .quick-arrow{
    right:9px!important;
    font-size:34px!important;
  }
}


/* QUICK ACTIONS — force inner content only; DO NOT alter tile geometry */
@media(max-width:700px){
  #hours .quick-actions > .quick-action{
    box-sizing:border-box!important;
  }

  #hours .quick-actions > .quick-action > .quick-icon{
    position:relative!important;
    flex:0 0 64px!important;
    width:64px!important;
    min-width:64px!important;
    max-width:64px!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    aspect-ratio:1/1!important;
    margin:0!important;
    padding:0!important;
    border-radius:17px!important;
    display:grid!important;
    place-items:center!important;
    align-self:center!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background:rgba(255,255,255,.22)!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
  }

  #hours .quick-actions > .quick-action > .quick-label{
    position:relative!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1.05!important;
    font-weight:800!important;
    letter-spacing:-.35px!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #hours .quick-actions > .quick-action > .quick-arrow{
    position:absolute!important;
    right:14px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:40px!important;
    line-height:1!important;
    font-weight:300!important;
  }

  /* PLUS */
  #hours .quick-actions > .quick-action > .plus-icon::before,
  #hours .quick-actions > .quick-action > .plus-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:34px!important;
    height:4px!important;
    border-radius:4px!important;
    background:#fff!important;
    display:block!important;
  }
  #hours .quick-actions > .quick-action > .plus-icon::before{
    transform:translate(-50%,-50%)!important;
  }
  #hours .quick-actions > .quick-action > .plus-icon::after{
    transform:translate(-50%,-50%) rotate(90deg)!important;
  }

  /* CALENDAR */
  #hours .quick-actions > .quick-action > .quick-calendar-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:54%!important;
    width:39px!important;
    height:37px!important;
    transform:translate(-50%,-50%)!important;
    border:4px solid #fff!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
    display:block!important;
  }
  #hours .quick-actions > .quick-action > .quick-calendar-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:39%!important;
    width:31px!important;
    height:4px!important;
    transform:translateX(-50%)!important;
    border-radius:3px!important;
    background:#fff!important;
    box-shadow:-10px -10px 0 -1px #fff,10px -10px 0 -1px #fff!important;
    display:block!important;
  }

  /* SUN */
  #hours .quick-actions > .quick-action > .sun-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:18px!important;
    height:18px!important;
    transform:translate(-50%,-50%)!important;
    border:3px solid #fff!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    display:block!important;
  }
  #hours .quick-actions > .quick-action > .sun-icon::after{
    content:"✦"!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-51%)!important;
    color:#fff!important;
    font-size:39px!important;
    line-height:1!important;
    font-weight:300!important;
    display:block!important;
  }

  /* INVOICE DOCUMENT */
  #hours .quick-actions > .quick-action > .invoice-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:29px!important;
    height:38px!important;
    transform:translate(-50%,-50%)!important;
    border:4px solid #fff!important;
    border-radius:4px!important;
    box-sizing:border-box!important;
    display:block!important;
  }
  #hours .quick-actions > .quick-action > .invoice-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:17px!important;
    height:3px!important;
    transform:translate(-50%,-50%)!important;
    background:#fff!important;
    box-shadow:0 -8px 0 -1px #fff,0 8px 0 -1px #fff!important;
    display:block!important;
  }

  /* kill old decorations */
  #hours .quick-actions > .quick-action::before,
  #hours .quick-actions > .quick-action::after,
  #hours .quick-actions > .quick-action > .quick-label::before,
  #hours .quick-actions > .quick-action > .quick-label::after,
  #hours .quick-actions > .quick-action > .quick-arrow::before,
  #hours .quick-actions > .quick-action > .quick-arrow::after{
    content:none!important;
    display:none!important;
  }
}
@media(max-width:420px){
  #hours .quick-actions > .quick-action > .quick-icon{
    flex-basis:58px!important;
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
  }
  #hours .quick-actions > .quick-action > .quick-label{font-size:18px!important}
  #hours .quick-actions > .quick-action > .quick-arrow{right:9px!important;font-size:35px!important}
}


/* QUICK ACTIONS — FINAL INNER CLEANUP, NEVER CHANGE TILE GEOMETRY */
@media(max-width:700px){
  #hours .quick-actions > .quick-action.blue::before,
  #hours .quick-actions > .quick-action.blue::after,
  #hours .quick-actions > .quick-action.orange::before,
  #hours .quick-actions > .quick-action.orange::after,
  #hours .quick-actions > .quick-action.purple::before,
  #hours .quick-actions > .quick-action.purple::after{
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
    background:none!important;
  }

  #hours .quick-actions > .quick-action.green > .quick-calendar-icon{
    flex:0 0 64px!important;
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    min-height:64px!important;
    max-width:64px!important;
    max-height:64px!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.22)!important;
    display:block!important;
    position:relative!important;
    margin:0!important;
    padding:0!important;
  }

  #hours .quick-actions > .quick-action > .quick-label{
    font-size:20px!important;
    line-height:1.06!important;
    font-weight:800!important;
    letter-spacing:-.35px!important;
  }

  #hours .quick-actions > .quick-action > .quick-arrow{
    right:14px!important;
    font-size:40px!important;
  }
}


/* QUICK ACTIONS — final icon artwork only; preserve all tile dimensions */
@media(max-width:700px){
  #hours .quick-action .plus-icon,
  #hours .quick-action .sun-icon,
  #hours .quick-action .invoice-icon{
    font-size:0!important;
    line-height:0!important;
    position:relative!important;
  }

  /* Add hours: clean geometric plus */
  #hours .quick-action .plus-icon::before,
  #hours .quick-action .plus-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:34px!important;
    height:5px!important;
    border-radius:4px!important;
    background:#fff!important;
    display:block!important;
  }
  #hours .quick-action .plus-icon::before{
    transform:translate(-50%,-50%)!important;
  }
  #hours .quick-action .plus-icon::after{
    transform:translate(-50%,-50%) rotate(90deg)!important;
  }

  /* Book holiday: clean sun */
  #hours .quick-action .sun-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:19px!important;
    height:19px!important;
    transform:translate(-50%,-50%)!important;
    border:3px solid #fff!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    display:block!important;
  }
  #hours .quick-action .sun-icon::after{
    content:"✦"!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-51%)!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:38px!important;
    line-height:1!important;
    font-weight:300!important;
    display:block!important;
  }

  /* Create invoice: document icon instead of the old ▤ glyph */
  #hours .quick-action .invoice-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:29px!important;
    height:37px!important;
    transform:translate(-50%,-50%)!important;
    border:3px solid #fff!important;
    border-radius:4px!important;
    box-sizing:border-box!important;
    display:block!important;
  }
  #hours .quick-action .invoice-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:15px!important;
    height:3px!important;
    transform:translate(-50%,-50%)!important;
    background:#fff!important;
    border-radius:2px!important;
    box-shadow:0 -8px 0 -1px #fff,0 8px 0 -1px #fff!important;
    display:block!important;
  }

  /* Keep the calendar visually consistent with the other icons */
  #hours .quick-action .quick-calendar-icon{
    background:rgba(255,255,255,.20)!important;
  }

  /* Typography: match the reference without changing card geometry */
  #hours .quick-action .quick-label{
    font-size:20px!important;
    line-height:1.08!important;
    font-weight:800!important;
    letter-spacing:-.3px!important;
  }
  #hours .quick-action .quick-arrow{
    font-size:38px!important;
    font-weight:300!important;
    right:13px!important;
  }
}
@media(max-width:420px){
  #hours .quick-action .quick-label{
    font-size:18px!important;
    line-height:1.08!important;
  }
  #hours .quick-action .quick-arrow{
    font-size:35px!important;
    right:10px!important;
  }
}


/* QUICK ACTIONS — text + arrow only */
@media(max-width:700px){
  #hours .quick-actions > .quick-action{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding-left:24px!important;
    padding-right:48px!important;
    box-sizing:border-box!important;
  }

  #hours .quick-actions > .quick-action > .quick-icon{
    display:none!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
  }

  #hours .quick-actions > .quick-action > .quick-label{
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1.08!important;
    font-weight:800!important;
    letter-spacing:-.3px!important;
    text-align:left!important;
  }

  #hours .quick-actions > .quick-action > .quick-arrow{
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:38px!important;
    font-weight:300!important;
    line-height:1!important;
  }
}
@media(max-width:420px){
  #hours .quick-actions > .quick-action{
    padding-left:22px!important;
    padding-right:42px!important;
  }
  #hours .quick-actions > .quick-action > .quick-label{
    font-size:18px!important;
  }
  #hours .quick-actions > .quick-action > .quick-arrow{
    right:12px!important;
    font-size:34px!important;
  }
}


/* QUICK ACTIONS — final text-only layout */
@media(max-width:700px){
  #hours .quick-actions > .quick-action{
    position:relative!important;
    display:block!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  #hours .quick-actions > .quick-action > .quick-icon{
    display:none!important;
  }

  #hours .quick-actions > .quick-action > .quick-label{
    position:absolute!important;
    left:14px!important;
    right:40px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:-.25px!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  #hours .quick-actions > .quick-action > .quick-arrow{
    position:absolute!important;
    right:10px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:300!important;
  }
}
@media(max-width:420px){
  #hours .quick-actions > .quick-action > .quick-label{
    left:10px!important;
    right:35px!important;
    font-size:15px!important;
  }
  #hours .quick-actions > .quick-action > .quick-arrow{
    right:8px!important;
    font-size:28px!important;
  }
}


/* MOBILE — Registration hours form fit */
@media(max-width:700px){
  #hours .add-hours-card,
  #addHoursCard{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #hours .add-hours-card *,
  #addHoursCard *{
    box-sizing:border-box!important;
    max-width:100%;
  }

  #hours .add-hours-card .st-form,
  #addHoursCard .st-form{
    width:100%!important;
    max-width:100%!important;
  }

  #hours .add-hours-card .st-field,
  #addHoursCard .st-field{
    width:100%!important;
    min-width:0!important;
    margin-bottom:18px!important;
  }

  #hours .add-hours-card .st-row,
  #addHoursCard .st-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
    width:100%!important;
    margin:0 0 18px!important;
  }

  #hours .add-hours-card .st-row .st-field,
  #addHoursCard .st-row .st-field{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  #hours .add-hours-card input,
  #hours .add-hours-card select,
  #addHoursCard input,
  #addHoursCard select{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:58px!important;
    margin:0!important;
  }

  #hours .add-hours-card input[type="date"],
  #addHoursCard input[type="date"]{
    height:64px!important;
    font-size:18px!important;
  }

  #hours .add-hours-card .st-hours,
  #addHoursCard .st-hours{
    width:100%!important;
    margin:0 0 18px!important;
    padding:16px!important;
    overflow:hidden!important;
  }

  #hours .add-hours-card .st-hours input,
  #addHoursCard .st-hours input{
    height:58px!important;
    width:100%!important;
  }

  #hours .add-hours-card .st-hours .small,
  #addHoursCard .st-hours .small{
    display:block!important;
    margin-top:7px!important;
    line-height:1.25!important;
    font-size:14px!important;
  }

  #hours .add-hours-card label,
  #addHoursCard label{
    display:block!important;
    margin-bottom:7px!important;
  }
}

@media(max-width:420px){
  #hours .add-hours-card,
  #addHoursCard{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  #hours .add-hours-card .st-row,
  #addHoursCard .st-row{
    gap:10px!important;
  }

  #hours .add-hours-card input,
  #hours .add-hours-card select,
  #addHoursCard input,
  #addHoursCard select{
    height:54px!important;
  }

  #hours .add-hours-card input[type="date"],
  #addHoursCard input[type="date"]{
    height:58px!important;
    font-size:17px!important;
  }

  #hours .add-hours-card .st-hours,
  #addHoursCard .st-hours{
    padding:14px!important;
  }
}


/* HOURS FORM — mobile reference layout */
@media(max-width:700px){
  #hours .add-hours-card{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:28px 24px 24px!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  #hours .add-hours-card .top{
    display:block!important;
    margin:0 0 24px!important;
  }
  #hours .add-hours-card .welcome{
    font-size:30px!important;
    line-height:1.12!important;
    letter-spacing:-.7px!important;
    font-weight:820!important;
    color:#111827!important;
  }
  #hours .add-hours-card #who{
    margin-top:7px!important;
    text-align:left!important;
    font-size:17px!important;
    line-height:1.25!important;
    color:#667085!important;
  }

  #hours .add-hours-card .st-form{
    display:block!important;
    margin-top:0!important;
  }
  #hours .add-hours-card .st-field,
  #hours .add-hours-card .st-hours{
    width:100%!important;
    margin:0 0 22px!important;
  }

  #hours .add-hours-card label{
    display:block!important;
    margin:0 0 8px!important;
    font-size:16px!important;
    line-height:1.2!important;
    font-weight:700!important;
    color:#667085!important;
  }

  #hours .add-hours-card input,
  #hours .add-hours-card select{
    width:100%!important;
    max-width:100%!important;
    height:58px!important;
    min-height:58px!important;
    border:1.5px solid #d0d5dd!important;
    border-radius:13px!important;
    background:#fff!important;
    padding:12px 16px!important;
    font-size:18px!important;
    color:#101828!important;
    box-sizing:border-box!important;
  }

  #hours .add-hours-card input[type="date"]{
    -webkit-appearance:none!important;
    appearance:none!important;
    height:62px!important;
    min-height:62px!important;
    font-size:18px!important;
    padding-left:52px!important;
  }

  #hours .add-hours-card .st-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
    width:100%!important;
    margin:0 0 22px!important;
  }
  #hours .add-hours-card .st-row .st-field{
    margin:0!important;
  }

  #hours .add-hours-card input[type="time"]{
    padding-left:52px!important;
  }

  #hours .add-hours-card .st-hours{
    padding:16px!important;
    margin-bottom:22px!important;
    background:#f8fafc!important;
    border:1px solid #e4e7ec!important;
    border-radius:15px!important;
  }
  #hours .add-hours-card .st-hours label{
    margin-bottom:8px!important;
  }
  #hours .add-hours-card .st-hours input{
    height:58px!important;
    min-height:58px!important;
    background:#fff!important;
    padding-left:52px!important;
  }
  #hours .add-hours-card .st-hours .small{
    margin:8px 2px 0!important;
    font-size:14px!important;
    line-height:1.3!important;
    color:#667085!important;
  }

  #hours .add-hours-card #regNo{
    padding-left:52px!important;
  }

  #hours .add-hours-card .st-field:has(#date),
  #hours .add-hours-card .st-field:has(#startTime),
  #hours .add-hours-card .st-field:has(#finishTime),
  #hours .add-hours-card .st-hours{
    position:relative!important;
  }
  #hours .add-hours-card .st-field:has(#date):after{
    content:"▣";
    position:absolute;
    left:18px;
    bottom:18px;
    font-size:22px;
    line-height:1;
    color:#344054;
    pointer-events:none;
  }
  #hours .add-hours-card .st-field:has(#startTime):after,
  #hours .add-hours-card .st-field:has(#finishTime):after,
  #hours .add-hours-card .st-hours:after{
    content:"◷";
    position:absolute;
    left:18px;
    bottom:18px;
    font-size:25px;
    line-height:1;
    color:#344054;
    pointer-events:none;
  }

  #hours .add-hours-card .st-field:has(#regNo):after{
    content:"▣";
    position:absolute;
    left:18px;
    bottom:18px;
    font-size:21px;
    line-height:1;
    color:#667085;
    pointer-events:none;
  }

  #hours .add-hours-card .st-night{
    margin-bottom:18px!important;
  }

  #hours .add-hours-card .add-hours-button{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    margin-top:2px!important;
    border-radius:12px!important;
    font-size:18px!important;
    font-weight:800!important;
  }
}

@media(max-width:420px){
  #hours .add-hours-card{
    padding:24px 18px 20px!important;
    border-radius:20px!important;
  }
  #hours .add-hours-card .welcome{font-size:28px!important}
  #hours .add-hours-card #who{font-size:16px!important}
  #hours .add-hours-card .st-row{gap:10px!important}
  #hours .add-hours-card input,
  #hours .add-hours-card select{font-size:17px!important}
}


/* FINAL MOBILE HOURS FORM FIX */
@media(max-width:700px){
  #hours .add-hours-card,
  #hours .add-hours-card *{
    box-sizing:border-box!important;
  }

  #hours .add-hours-card{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #hours .add-hours-card .st-form{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  #hours .add-hours-card .st-field,
  #hours .add-hours-card .st-hours{
    min-width:0!important;
    max-width:100%!important;
  }

  #hours .add-hours-card .st-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    gap:12px!important;
    margin:0 0 22px!important;
    overflow:visible!important;
  }

  #hours .add-hours-card .st-row .st-field{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #hours .add-hours-card .st-row input{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:58px!important;
    min-height:58px!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
  }

  /* Remove the decorative pseudo-icons added to the form.
     Use the native controls only, so nothing overlaps the text. */
  #hours .add-hours-card .st-field:after,
  #hours .add-hours-card .st-hours:after{
    content:none!important;
    display:none!important;
  }

  #hours .add-hours-card input[type="date"],
  #hours .add-hours-card input[type="time"],
  #hours .add-hours-card input[type="number"]{
    padding-left:14px!important;
  }

  #hours .add-hours-card .st-hours{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    padding:16px!important;
    margin:0 0 22px!important;
    overflow:hidden!important;
  }

  #hours .add-hours-card .st-hours input{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
  }

  #hours .add-hours-card .st-hours .small{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:8px 0 0!important;
    padding:0!important;
    line-height:1.35!important;
    overflow:visible!important;
  }

  #hours .add-hours-card #regNo{
    padding-left:14px!important;
  }
}

@media(max-width:420px){
  #hours .add-hours-card{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  #hours .add-hours-card .st-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:9px!important;
  }

  #hours .add-hours-card .st-row input{
    padding-left:11px!important;
    padding-right:11px!important;
  }
}


/* HOURS FORM — mobile reference match + route fields */
@media(max-width:700px){
  #hours .add-hours-card{
    padding:16px 16px 18px!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #e1e5ea!important;
    box-shadow:0 2px 12px rgba(16,24,40,.055)!important;
  }
  #hours .add-hours-card .top{
    display:block!important;
    margin:0!important;
    padding:0 2px!important;
  }
  #hours .add-hours-card .welcome{
    font-size:27px!important;
    line-height:1.12!important;
    font-weight:850!important;
    letter-spacing:-.7px!important;
    color:#111827!important;
  }
  #hours .add-hours-card #who{
    display:block!important;
    max-width:none!important;
    text-align:left!important;
    margin-top:5px!important;
    font-size:16px!important;
    color:#667085!important;
  }
  #hours .add-hours-card .st-form{
    display:grid!important;
    gap:12px!important;
    margin-top:20px!important;
  }
  #hours .add-hours-card .st-field,
  #hours .add-hours-card .st-hours{
    width:100%!important;
    min-width:0!important;
  }
  #hours .add-hours-card .st-field label,
  #hours .add-hours-card .st-hours>label{
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:700!important;
    color:#667085!important;
    margin:0 0 7px!important;
  }

  /* Shared input geometry */
  #hours .add-hours-card .st-field input,
  #hours .add-hours-card .st-field select,
  #hours .add-hours-card .st-hours input{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:52px!important;
    min-height:52px!important;
    border:1.5px solid #d4dae2!important;
    border-radius:13px!important;
    background-color:#fff!important;
    color:#172033!important;
    font-size:16px!important;
    font-weight:500!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
  }

  /* Date */
  #hours #date{
    padding-left:50px!important;
    padding-right:40px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344254' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:16px center!important;
    background-size:24px 24px!important;
  }
  #hours #date::-webkit-calendar-picker-indicator{
    opacity:1!important;
    width:24px!important;
    height:24px!important;
    cursor:pointer!important;
  }

  /* Route + admin route selector */
  #hours #routeName,
  #hours #routeSelect{
    padding-left:50px!important;
  }
  #hours #routeName{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344254' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8 7.5c3 0 5 1.5 5 4s2 4 5 4'/%3E%3Cpath d='M13 11.5l2-2M13 11.5l-2-2'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:16px center!important;
    background-size:24px 24px!important;
  }
  #hours #routeSelect{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344254' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Ccircle cx='3.5' cy='6' r='1'/%3E%3Ccircle cx='3.5' cy='12' r='1'/%3E%3Ccircle cx='3.5' cy='18' r='1'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:16px center!important;
    background-size:24px 24px!important;
  }

  /* Start / finish time */
  #hours #startTime,
  #hours #finishTime{
    padding-left:50px!important;
    padding-right:10px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344254' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:16px center!important;
    background-size:24px 24px!important;
  }

  /* Hours */
  #hours #hours{
    padding-left:50px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344254' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:16px center!important;
    background-size:24px 24px!important;
    font-size:16px!important;
    font-weight:500!important;
  }
  #hours .st-hours{
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  #hours .st-hours .small{
    font-size:12px!important;
    line-height:1.35!important;
    margin:7px 2px 0!important;
    color:#667085!important;
  }

  #hours #regNo{
    padding:0 12px!important;
  }

  #hours .st-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
  }

  #hours .st-night,
  #hours .st-field:has(#task),
  #hours .st-field:has(#workDescription){
    /* Keep existing functionality, but place secondary fields after the reference fields. */
  }

  #hours .add-hours-button{
    height:50px!important;
    min-height:50px!important;
    margin-top:2px!important;
    border-radius:12px!important;
    background:#1677f5!important;
    font-size:16px!important;
    font-weight:800!important;
  }
}
@media(max-width:420px){
  #hours .add-hours-card{padding:15px 14px 17px!important}
  #hours .add-hours-card .welcome{font-size:25px!important}
  #hours .add-hours-card #who{font-size:15px!important}
  #hours .add-hours-card .st-form{gap:11px!important;margin-top:18px!important}
  #hours .add-hours-card .st-field input,
  #hours .add-hours-card .st-field select,
  #hours .add-hours-card .st-hours input{
    height:50px!important;
    min-height:50px!important;
    font-size:15px!important;
  }
  #hours .add-hours-card .st-row{gap:8px!important}
}

/* Employee selector is not shown on the employee-facing form. */
#hours #employeeWrap{display:none!important}


/* START / FINISH — final mobile sizing fix */
@media(max-width:700px){
  #hours .add-hours-card .st-row{
    display:grid!important;
    grid-template-columns:minmax(0,calc((100% - 12px)/2)) minmax(0,calc((100% - 12px)/2))!important;
    column-gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 22px!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  #hours .add-hours-card .st-row .st-field{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  #hours .add-hours-card #startTime,
  #hours .add-hours-card #finishTime{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    height:52px!important;
    min-height:52px!important;
    padding:10px 10px 10px 46px!important;
    -webkit-appearance:none!important;
    appearance:none!important;
    background-position:13px center!important;
    background-size:24px 24px!important;
    overflow:hidden!important;
  }
  #hours .add-hours-card #startTime::-webkit-calendar-picker-indicator,
  #hours .add-hours-card #finishTime::-webkit-calendar-picker-indicator{
    display:none!important;
    -webkit-appearance:none!important;
  }
}
@media(max-width:420px){
  #hours .add-hours-card .st-row{
    grid-template-columns:minmax(0,calc((100% - 9px)/2)) minmax(0,calc((100% - 9px)/2))!important;
    column-gap:9px!important;
  }
  #hours .add-hours-card #startTime,
  #hours .add-hours-card #finishTime{
    padding-left:44px!important;
    padding-right:7px!important;
  }
}

/* MY WEEK — final mobile visual correction */
@media(max-width:700px){
  #week .week-stat{
    min-width:0!important;
    overflow:hidden!important;
  }
  #week .week-stat>div{
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
  }
  #week .week-stat .week-status-pill{
    display:block!important;
    width:fit-content!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:14px!important;
    line-height:1.2!important;
    padding:6px 9px!important;
  }
  #week #weekStatusHint{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #week .week-stat b{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #week .week-table-card{
    box-shadow:0 2px 10px rgba(16,24,40,.045)!important;
  }
}
@media(max-width:420px){
  #week .week-stat{
    padding:13px 10px!important;
  }
  #week .week-stat .week-status-pill{
    font-size:13px!important;
    padding:6px 8px!important;
  }
  #week #weekStatusHint{
    font-size:10px!important;
  }
}

/* MY WEEK — compact four-tile mobile layout */
@media(max-width:700px){
  #week .week-stats{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  #week .week-stat{
    min-width:0!important;
    width:100%!important;
    height:108px!important;
    min-height:108px!important;
    padding:10px 8px!important;
    border-radius:14px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  #week .week-stat-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    border-radius:9px!important;
    font-size:15px!important;
  }
  #week .week-stat>div{
    min-width:0!important;
    width:100%!important;
  }
  #week .week-stat small{
    font-size:9px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    margin-top:2px!important;
  }
  #week .week-stat b{
    font-size:19px!important;
    line-height:1!important;
    margin:5px 0 2px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #week .week-stat em{
    font-size:9px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  #week .week-status-pill{
    font-size:9px!important;
    line-height:1.1!important;
    padding:5px 6px!important;
    margin:3px 0 2px!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #week #weekStatusHint{
    font-size:8px!important;
    line-height:1.1!important;
  }
}
@media(max-width:420px){
  #week .week-stats{
    gap:6px!important;
  }
  #week .week-stat{
    height:100px!important;
    min-height:100px!important;
    padding:8px 6px!important;
    border-radius:12px!important;
  }
  #week .week-stat-icon{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    font-size:14px!important;
  }
  #week .week-stat small{
    font-size:8px!important;
  }
  #week .week-stat b{
    font-size:17px!important;
  }
  #week .week-stat em{
    font-size:8px!important;
  }
  #week .week-status-pill{
    font-size:8px!important;
    padding:4px 5px!important;
  }
  #week #weekStatusHint{
    font-size:7px!important;
  }
}

/* MY WEEK — compact tiles and row actions final fix */
@media(max-width:700px){
  #week #weekHours,
  #week #weekDays,
  #week #weekAverage{
    font-size:19px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:0!important;
    margin:5px 0 2px!important;
  }
  #week .week-stat{
    height:108px!important;
    min-height:108px!important;
  }
  #week .week-status-pill{
    display:inline-block!important;
    font-size:9px!important;
    line-height:1.1!important;
    padding:5px 6px!important;
    max-width:100%!important;
  }
  #week #weekStatusHint{
    font-size:8px!important;
    line-height:1.1!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Keep Edit/Delete below the route instead of covering it. */
  #week .week-row:has(.week-row-actions:not(:empty)){
    grid-template-columns:65px minmax(0,1fr) auto!important;
    grid-template-rows:auto auto auto!important;
    align-items:center!important;
  }
  #week .week-row:has(.week-row-actions:not(:empty)) .week-day{
    grid-column:1!important;
    grid-row:1 / span 2!important;
  }
  #week .week-row:has(.week-row-actions:not(:empty)) .week-time{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    min-width:0!important;
  }
  #week .week-row:has(.week-row-actions:not(:empty))>strong{
    grid-column:3!important;
    grid-row:1!important;
  }
  #week .week-row:has(.week-row-actions:not(:empty)) .week-row-status{
    grid-column:3!important;
    grid-row:2!important;
  }
  #week .week-row:has(.week-row-actions:not(:empty)) .week-row-actions{
    grid-column:2 / 4!important;
    grid-row:3!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:6px!important;
    padding-top:4px!important;
  }
  #week .week-row:has(.week-row-actions:not(:empty)) .week-row-actions button{
    min-height:32px!important;
    height:32px!important;
    padding:5px 9px!important;
    font-size:11px!important;
  }
}
@media(max-width:420px){
  #week .week-stat{
    height:104px!important;
    min-height:104px!important;
    padding:8px 6px!important;
  }
  #week #weekHours,
  #week #weekDays,
  #week #weekAverage{
    font-size:17px!important;
  }
  #week #weekStatusHint{
    display:none!important;
  }
  #week .week-row:has(.week-row-actions:not(:empty)) .week-row-actions{
    justify-content:flex-start!important;
  }
}

/* MY WEEK — final status tile correction */
@media(max-width:700px){
  #week .week-stat:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }
  #week .week-stat:last-child > div{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    min-width:0!important;
  }
  #week .week-stat:last-child .week-status-pill{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:30px!important;
    margin:5px 0 0!important;
    padding:0 9px!important;
    border-radius:999px!important;
    font-size:12px!important;
    line-height:30px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #week .week-stat:last-child #weekStatusHint{
    display:none!important;
  }
}
@media(max-width:420px){
  #week .week-stat:last-child .week-status-pill{
    height:27px!important;
    line-height:27px!important;
    padding:0 7px!important;
    font-size:10px!important;
  }
}

/* MY WEEK — status pill must fit compact tile */
@media(max-width:700px){
  #week .week-stat:last-child .week-status-pill{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:27px!important;
    padding:0 3px!important;
    box-sizing:border-box!important;
    font-size:10px!important;
    line-height:27px!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
}
@media(max-width:420px){
  #week .week-stat:last-child .week-status-pill{
    height:25px!important;
    line-height:25px!important;
    font-size:9px!important;
    padding:0 2px!important;
  }
}

/* HOLIDAYS — final mobile reference layout */
@media(max-width:700px){
  #holidays{
    width:100%!important;
    max-width:100%!important;
  }
  #holidays .holiday-page{
    width:100%!important;
    max-width:100%!important;
    gap:12px!important;
    padding:0!important;
  }
  #holidays .holiday-head{
    padding:4px 2px 0!important;
  }
  #holidays .holiday-head h2{
    font-size:27px!important;
    line-height:1.1!important;
    letter-spacing:-.6px!important;
  }
  #holidays .holiday-head .small{
    font-size:14px!important;
    line-height:1.35!important;
    margin-top:6px!important;
  }
  #holidays .holiday-allowance-card{
    width:100%!important;
    min-height:126px!important;
    padding:14px!important;
    grid-template-columns:48px minmax(0,1fr) 72px 78px!important;
    gap:9px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  #holidays .holiday-allowance-icon{
    width:48px!important;
    height:48px!important;
    border-radius:14px!important;
  }
  #holidays .holiday-allowance-title h2{
    font-size:18px!important;
    line-height:1.1!important;
    margin:0 0 5px!important;
  }
  #holidays .holiday-allowance-title b{
    font-size:28px!important;
    line-height:1!important;
  }
  #holidays .holiday-allowance-title span,
  #holidays .holiday-allowance-metric small,
  #holidays .holiday-allowance-metric span{
    font-size:11px!important;
  }
  #holidays .holiday-allowance-metric{
    padding-left:10px!important;
  }
  #holidays .holiday-allowance-metric b{
    font-size:25px!important;
    line-height:1!important;
    margin:5px 0 4px!important;
  }

  #holidays .holiday-request-card,
  #holidays .holiday-requests-card{
    width:100%!important;
    padding:17px!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
  }
  #holidays .holiday-request-card .holiday-card-head{
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:10px!important;
    margin-bottom:0!important;
  }
  #holidays .holiday-request-card .holiday-icon{
    width:40px!important;
    height:40px!important;
    border-radius:12px!important;
  }
  #holidays .holiday-request-card .holiday-card-head h2{
    font-size:20px!important;
    line-height:1.1!important;
  }
  #holidays .holiday-request-card .holiday-card-head .small{
    font-size:12px!important;
    line-height:1.35!important;
    margin-top:4px!important;
    white-space:nowrap!important;
  }
  #holidays .holiday-request-card .holiday-date-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    margin-top:24px!important;
  }
  #holidays .holiday-request-card .holiday-field label{
    font-size:15px!important;
    margin-bottom:7px!important;
  }
  #holidays .holiday-request-card .holiday-date-wrap,
  #holidays .holiday-request-card .holiday-date-wrap input[type=date]{
    height:52px!important;
  }
  #holidays .holiday-request-card .holiday-date-wrap input[type=date]{
    border-radius:17px!important;
    border-width:2px!important;
  }
  #holidays .holiday-request-card .full-action{
    height:52px!important;
    min-height:52px!important;
    margin-top:28px!important;
    border-radius:13px!important;
    font-size:17px!important;
    font-weight:800!important;
  }

  #holidays .holiday-requests-card .holiday-card-head{
    align-items:center!important;
  }
  #holidays .holiday-requests-card .holiday-card-head h2{
    font-size:20px!important;
  }
  #holidays .holiday-requests-card .holiday-card-head .small{
    font-size:12px!important;
    margin-top:4px!important;
  }
  #holidays .holiday-requests-card .holiday-icon{
    width:40px!important;
    height:40px!important;
    border-radius:12px!important;
  }
}
@media(max-width:420px){
  #holidays .holiday-allowance-card{
    min-height:118px!important;
    grid-template-columns:42px minmax(0,1fr) 62px 68px!important;
    gap:7px!important;
    padding:12px!important;
  }
  #holidays .holiday-allowance-icon{
    width:42px!important;
    height:42px!important;
  }
  #holidays .holiday-allowance-title h2{font-size:16px!important}
  #holidays .holiday-allowance-title b{font-size:24px!important}
  #holidays .holiday-allowance-title span,
  #holidays .holiday-allowance-metric small,
  #holidays .holiday-allowance-metric span{font-size:9px!important}
  #holidays .holiday-allowance-metric{padding-left:7px!important}
  #holidays .holiday-allowance-metric b{font-size:21px!important}
  #holidays .holiday-request-card,
  #holidays .holiday-requests-card{padding:15px!important}
  #holidays .holiday-request-card .holiday-card-head h2{font-size:19px!important}
  #holidays .holiday-request-card .holiday-card-head .small{font-size:11px!important}
  #holidays .holiday-request-card .holiday-date-grid{gap:8px!important;margin-top:20px!important}
  #holidays .holiday-request-card .holiday-field label{font-size:14px!important}
  #holidays .holiday-request-card .full-action{margin-top:24px!important;font-size:16px!important}
}

/* HOLIDAYS — empty date fields, no calendar icon */
#holidays .holiday-date-wrap:after{
  display:none!important;
  background:none!important;
}
#holidays .holiday-date-wrap input[type=date]{
  background-image:none!important;
  padding-right:10px!important;
}
#holidays .holiday-date-wrap input[type=date]::-webkit-calendar-picker-indicator{
  opacity:0!important;
  display:none!important;
}
@media(max-width:700px){
  #holidays .holiday-date-wrap input[type=date]{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

/* HEADER NOTIFICATIONS — bell next to logout */
.head-actions{display:flex!important;align-items:center!important;gap:10px!important;position:relative!important}
.notification-wrap{position:relative!important}
.notification-bell{position:relative!important;width:46px!important;height:42px!important;padding:0!important;border:0!important;border-radius:12px!important;background:rgba(255,255,255,.10)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}
.notification-bell:hover{background:rgba(255,255,255,.17)!important}
.bell-icon{position:relative!important;width:18px!important;height:18px!important;border:2.5px solid currentColor!important;border-radius:10px 10px 5px 5px!important;box-sizing:border-box!important;display:block!important;margin-top:2px!important}
.bell-icon:before{content:""!important;position:absolute!important;left:50%!important;top:-6px!important;width:5px!important;height:5px!important;border:2px solid currentColor!important;border-radius:50%!important;transform:translateX(-50%)!important;background:transparent!important}
.bell-icon:after{content:""!important;position:absolute!important;left:50%!important;bottom:-6px!important;width:7px!important;height:3px!important;border-radius:0 0 6px 6px!important;background:currentColor!important;transform:translateX(-50%)!important}
.notification-count{position:absolute!important;right:-3px!important;top:-4px!important;min-width:19px!important;height:19px!important;padding:0 5px!important;border-radius:10px!important;background:#ef4444!important;color:#fff!important;font-size:11px!important;font-weight:800!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid #111827!important;box-sizing:border-box!important}
.notification-count.hidden{display:none!important}
.notification-panel{position:absolute!important;right:0!important;top:50px!important;width:340px!important;max-width:calc(100vw - 32px)!important;background:#fff!important;color:#172033!important;border:1px solid #e1e5ea!important;border-radius:16px!important;box-shadow:0 16px 40px rgba(16,24,40,.20)!important;padding:14px!important;z-index:100!important}
.notification-panel-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:2px 2px 10px!important;border-bottom:1px solid #e5e7eb!important}
.notification-panel-head b{font-size:17px!important}
.notification-panel .notification-read-btn{padding:7px 10px!important;font-size:12px!important}
.notification-panel .employee-notification{display:flex!important;gap:10px!important;padding:12px 4px!important;border-bottom:1px solid #edf0f3!important}
.notification-panel .employee-notification:last-child{border-bottom:0!important}
.notification-panel .employee-notification.unread{background:#f7faff!important;border-radius:10px!important;padding-left:8px!important;padding-right:8px!important}
.notification-panel .employee-notification-dot{width:8px!important;height:8px!important;border-radius:50%!important;background:#1677f5!important;flex:0 0 auto!important;margin-top:6px!important}
.notification-panel .employee-notification.read .employee-notification-dot{background:#cbd5e1!important}
.notification-panel .employee-notification p{margin:3px 0!important;font-size:13px!important;line-height:1.35!important}
.notification-panel .employee-notification small{font-size:11px!important;color:#667085!important}
@media(max-width:700px){
  .head-actions{gap:8px!important}
  .notification-bell{width:42px!important;height:40px!important}
  .notification-panel{position:fixed!important;right:12px!important;top:76px!important;width:calc(100vw - 24px)!important;max-width:none!important}
  header .head{gap:10px!important}
}

/* NOTIFICATION BELL — refined icon, employee header */
.notification-bell{width:52px!important;height:48px!important;border-radius:14px!important;background:#202b40!important;color:#fff!important;box-shadow:0 5px 14px rgba(0,0,0,.10)!important}
.notification-bell .bell-icon{position:relative!important;width:25px!important;height:25px!important;border:0!important;border-radius:0!important;margin:0!important;display:grid!important;place-items:center!important}
.notification-bell .bell-icon:before,.notification-bell .bell-icon:after{display:none!important}
.notification-bell .bell-icon svg{width:27px!important;height:27px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;display:block!important}
.notification-count{right:-4px!important;top:-5px!important;min-width:20px!important;height:20px!important;border-radius:10px!important;font-size:11px!important;border:2px solid #111827!important}
@media(max-width:700px){.notification-bell{width:48px!important;height:46px!important;border-radius:13px!important}.notification-bell .bell-icon svg{width:25px!important;height:25px!important}}

/* HOURS — Night out toggle */
.nightout-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0;padding:14px 16px;border:1px solid #dfe7f2;border-radius:16px;background:#f7f9ff;cursor:pointer;box-sizing:border-box}
.nightout-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.nightout-copy strong{font-size:16px;color:#253b8f;font-weight:800}
.nightout-copy small{font-size:13px;color:#667085}
.nightout-toggle input{position:absolute;opacity:0;pointer-events:none}
.nightout-switch{position:relative;display:block;width:52px;height:30px;border-radius:999px;background:#d0d5dd;flex:none;transition:.18s}
.nightout-switch:after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.18s}
.nightout-toggle input:checked + .nightout-switch{background:#6941c6}
.nightout-toggle input:checked + .nightout-switch:after{transform:translateX(22px)}
@media(max-width:700px){.nightout-toggle{margin:14px 0;padding:14px;border-radius:15px}.nightout-copy strong{font-size:16px}.nightout-copy small{font-size:12px}}

/* HOURS FORM — hidden until Add hours is selected */
#hours #addHoursCard:not(.open){display:none!important}



/* MOBILE BOTTOM NAV — clean rounded reference style */
@media(max-width:700px){
  body{padding-bottom:88px!important}

  .mobile-bottom-nav{
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    height:72px!important;
    padding:6px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(225,229,236,.95)!important;
    border-top:1px solid rgba(225,229,236,.95)!important;
    border-radius:24px!important;
    box-shadow:0 10px 30px rgba(16,24,40,.12)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  .mobile-bottom-nav button{
    width:100%!important;
    height:60px!important;
    min-height:60px!important;
    padding:5px 3px!important;
    border-radius:18px!important;
    gap:3px!important;
    color:#667085!important;
    background:transparent!important;
    font-weight:700!important;
    transition:background .15s ease,color .15s ease,transform .15s ease!important;
  }

  .mobile-bottom-nav button span{
    width:28px!important;
    height:28px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:27px!important;
    line-height:28px!important;
    font-weight:500!important;
  }

  .mobile-bottom-nav button small{
    font-size:11px!important;
    line-height:14px!important;
    font-weight:750!important;
    white-space:nowrap!important;
  }

  .mobile-bottom-nav button.active{
    color:#1677f5!important;
    background:#edf4ff!important;
  }

  .mobile-bottom-nav button:active{
    transform:scale(.98)!important;
  }

  .mobile-bottom-nav .calendar-menu-icon{
    width:24px!important;
    height:23px!important;
    margin:0!important;
    border-width:2.5px!important;
    border-radius:5px!important;
  }

  .mobile-bottom-nav .calendar-menu-icon:before{
    top:6px!important;
    border-top-width:2.5px!important;
  }

  .mobile-bottom-nav .calendar-menu-icon:after{
    left:4px!important;
    top:-6px!important;
    width:2.5px!important;
    height:7px!important;
    box-shadow:11px 0 0 currentColor!important;
  }
}

@media(max-width:420px){
  body{padding-bottom:84px!important}

  .mobile-bottom-nav{
    left:7px!important;
    right:7px!important;
    bottom:calc(6px + env(safe-area-inset-bottom))!important;
    height:68px!important;
    padding:5px!important;
    border-radius:22px!important;
    gap:2px!important;
  }

  .mobile-bottom-nav button{
    height:58px!important;
    min-height:58px!important;
    border-radius:17px!important;
  }

  .mobile-bottom-nav button span{
    width:26px!important;
    height:26px!important;
    font-size:25px!important;
    line-height:26px!important;
  }

  .mobile-bottom-nav button small{
    font-size:10px!important;
  }
}


/* MOBILE BOTTOM NAV — actual SVG icon styling */
@media(max-width:700px){
  .mobile-bottom-nav button .bottom-nav-icon{
    width:30px!important;
    height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:currentColor!important;
    flex:0 0 30px!important;
  }
  .mobile-bottom-nav button .bottom-nav-icon svg{
    width:29px!important;
    height:29px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  .mobile-bottom-nav button .more-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
  }
  .mobile-bottom-nav button .more-icon i{
    display:block!important;
    width:5px!important;
    height:5px!important;
    border-radius:50%!important;
    background:currentColor!important;
  }
  .mobile-bottom-nav button.active .bottom-nav-icon{
    color:#1677f5!important;
  }
}
@media(max-width:420px){
  .mobile-bottom-nav button .bottom-nav-icon{
    width:27px!important;
    height:27px!important;
    flex-basis:27px!important;
  }
  .mobile-bottom-nav button .bottom-nav-icon svg{
    width:27px!important;
    height:27px!important;
  }
  .mobile-bottom-nav button .more-icon i{
    width:5px!important;
    height:5px!important;
  }
}

/* Week selector alignment */
#week .week-date{display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;line-height:32px!important;white-space:nowrap!important}
#week .week-date .week-label,#week .week-date b{display:inline-flex!important;align-items:center!important;height:32px!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;font-size:30px!important;font-weight:700!important;line-height:32px!important;letter-spacing:0!important;color:#111827!important;margin:0!important;padding:0!important;vertical-align:middle!important}
@media(max-width:700px){#week .week-date{gap:9px!important}#week .week-date b{font-size:22px!important;line-height:22px!important}}
@media(max-width:420px){#week .week-date{gap:7px!important}#week .week-date b{font-size:22px!important;line-height:22px!important}}

/* Unified Week/date typography */
#week .week-date{align-items:center!important;justify-content:center!important}
#week .week-date{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;text-align:center!important;overflow:hidden!important}
#week .week-date b{display:block!important;width:100%!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif!important;font-size:22px!important;font-weight:700!important;line-height:22px!important;letter-spacing:0!important;color:#111827!important;margin:0!important;padding:0!important;white-space:nowrap!important;text-align:center!important}

/* Final week selector centering */
#week .week-date{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;overflow:hidden!important}
#week .week-date b{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:max-content!important;max-width:calc(100% - 16px)!important;text-align:center!important;font-size:22px!important;line-height:22px!important;font-weight:700!important;margin:0!important;padding:0!important}


/* NIGHT OUT — compact header control */
@media(max-width:700px){
  .nightout-toggle{
    min-height:52px!important;
    height:52px!important;
    margin:10px 0!important;
    padding:8px 12px!important;
    border-radius:12px!important;
    gap:10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  .nightout-copy{display:block!important;flex:1!important}
  .nightout-copy strong{display:block!important;font-size:15px!important;line-height:20px!important}
  .nightout-copy small{display:none!important}
  .nightout-switch{width:40px!important;height:24px!important;flex:0 0 40px!important}
  .nightout-switch:after{top:3px!important;left:3px!important;width:18px!important;height:18px!important}
  .nightout-toggle input:checked + .nightout-switch:after{transform:translateX(16px)!important}
}
@media(max-width:420px){
  .nightout-toggle{min-height:50px!important;height:50px!important;margin:9px 0!important;padding:7px 11px!important}
  .nightout-copy strong{font-size:14px!important;line-height:18px!important}
  .nightout-switch{width:38px!important;height:23px!important;flex-basis:38px!important}
  .nightout-switch:after{width:17px!important;height:17px!important}
  .nightout-toggle input:checked + .nightout-switch:after{transform:translateX(15px)!important}
}

/* NIGHT OUT — fix switch position on mobile */
@media(max-width:700px){
  .nightout-toggle{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
  .nightout-toggle #nightout{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    min-width:1px!important;
    min-height:1px!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    pointer-events:none!important;
    display:block!important;
  }
  .nightout-toggle #nightout:after{display:none!important}
  .nightout-toggle .nightout-switch{
    position:relative!important;
    display:block!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:23px!important;
    margin:0!important;
    z-index:2!important;
  }
}

/* NIGHT OUT — right aligned and vertically centered */
@media(max-width:700px){
  .nightout-toggle{display:flex!important;align-items:center!important;justify-content:space-between!important;height:50px!important;min-height:50px!important;padding:7px 12px!important}
  .nightout-copy{display:flex!important;align-items:center!important;flex:1 1 auto!important;height:100%!important}
  .nightout-copy strong{font-size:15px!important;line-height:1!important;margin:0!important}
  .nightout-toggle .nightout-switch{position:relative!important;top:auto!important;right:auto!important;margin-left:auto!important;align-self:center!important;flex:0 0 38px!important;width:38px!important;height:23px!important}
}
@media(max-width:420px){
  .nightout-toggle{height:50px!important;min-height:50px!important;padding:7px 11px!important}
  .nightout-copy strong{font-size:14px!important}
  .nightout-toggle .nightout-switch{flex-basis:38px!important;width:38px!important;height:23px!important}
}

/* NIGHT OUT — final compact reference layout */
@media(max-width:700px){
  .nightout-toggle{
    height:76px!important;
    min-height:76px!important;
    margin:12px 0!important;
    padding:12px 18px!important;
    border-radius:18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    box-sizing:border-box!important;
  }
  .nightout-copy{display:flex!important;align-items:center!important;height:100%!important;flex:1 1 auto!important}
  .nightout-copy strong{font-size:22px!important;line-height:1!important;margin:0!important;color:#253b8f!important}
  .nightout-copy small{display:none!important}
  .nightout-toggle .nightout-switch{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    margin-left:auto!important;
    align-self:center!important;
    flex:0 0 52px!important;
    width:52px!important;
    height:30px!important;
  }
  .nightout-toggle .nightout-switch:after{top:4px!important;left:4px!important;width:22px!important;height:22px!important}
  .nightout-toggle input:checked + .nightout-switch:after{transform:translateX(22px)!important}
}
@media(max-width:420px){
  .nightout-toggle{height:72px!important;min-height:72px!important;padding:11px 16px!important;border-radius:17px!important}
  .nightout-copy strong{font-size:21px!important}
  .nightout-toggle .nightout-switch{flex-basis:50px!important;width:50px!important;height:29px!important}
  .nightout-toggle .nightout-switch:after{width:21px!important;height:21px!important}
  .nightout-toggle input:checked + .nightout-switch:after{transform:translateX(21px)!important}
}

/* NIGHT OUT — final alignment: title left, switch right, both centered */
@media(max-width:700px){
  .nightout-toggle{
    position:relative!important;
    height:72px!important;
    min-height:72px!important;
    padding:0 18px!important;
    display:block!important;
    box-sizing:border-box!important;
  }
  .nightout-toggle .nightout-copy{
    position:absolute!important;
    left:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:auto!important;
    height:auto!important;
    display:block!important;
    text-align:left!important;
    margin:0!important;
  }
  .nightout-toggle .nightout-copy strong{
    display:block!important;
    margin:0!important;
    padding:0!important;
    font-size:22px!important;
    line-height:1!important;
    text-align:left!important;
  }
  .nightout-toggle .nightout-switch{
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    width:52px!important;
    height:30px!important;
    flex:none!important;
  }
  .nightout-toggle .nightout-switch:after{top:4px!important;left:4px!important;width:22px!important;height:22px!important}
  .nightout-toggle input:checked + .nightout-switch{transform:translateY(-50%)!important}
  .nightout-toggle input:checked + .nightout-switch:after{transform:translateX(22px)!important}
}
@media(max-width:420px){
  .nightout-toggle{height:72px!important;min-height:72px!important;padding:0 16px!important}
  .nightout-toggle .nightout-copy{left:16px!important}
  .nightout-toggle .nightout-copy strong{font-size:21px!important}
  .nightout-toggle .nightout-switch{right:16px!important;width:50px!important;height:29px!important}
  .nightout-toggle .nightout-switch:after{width:21px!important;height:21px!important}
  .nightout-toggle input:checked + .nightout-switch:after{transform:translateX(21px)!important}
}

/* NIGHT OUT — match route field height */
@media(max-width:700px){
  .nightout-toggle{height:68px!important;min-height:68px!important;margin:10px 0!important;padding:0 18px!important;border-radius:14px!important}
  .nightout-toggle .nightout-copy{left:18px!important}
  .nightout-toggle .nightout-copy strong{font-size:19px!important}
  .nightout-toggle .nightout-switch{right:18px!important;width:48px!important;height:28px!important}
  .nightout-toggle .nightout-switch:after{top:4px!important;left:4px!important;width:20px!important;height:20px!important}
  .nightout-toggle input:checked + .nightout-switch:after{transform:translateX(20px)!important}
}
@media(max-width:420px){
  .nightout-toggle{height:66px!important;min-height:66px!important;padding:0 16px!important}
  .nightout-toggle .nightout-copy{left:16px!important}
  .nightout-toggle .nightout-copy strong{font-size:18px!important}
  .nightout-toggle .nightout-switch{right:16px!important;width:46px!important;height:27px!important}
  .nightout-toggle .nightout-switch:after{width:19px!important;height:19px!important}
  .nightout-toggle input:checked + .nightout-switch:after{transform:translateX(19px)!important}
}


/* MY WEEK — web stats layout fix */
@media(min-width:701px){
  #week .week-stats{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:12px!important;
  }
  #week .week-stat{
    min-width:0!important;
    min-height:142px!important;
    padding:18px 16px!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  #week .week-stat>div{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  #week .week-stat small,
  #week .week-stat em{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  #week .week-stat b{
    max-width:100%!important;
    font-size:clamp(22px,2.15vw,34px)!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  #week .week-status-pill{
    display:inline-block!important;
    width:auto!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    font-size:clamp(13px,1.35vw,18px)!important;
    line-height:1.15!important;
    padding:6px 9px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #week #weekStatusHint{
    font-size:11px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
}