/* Layout shared by light and HGVera themes; printing keeps its existing layout. */
@media screen{
.finance-home{max-width:1392px;margin:auto;padding:16px 0 28px}.finance-home h2{margin:0 0 8px}.finance-home p{margin:0 0 22px;color:#667085}.finance-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.finance-home-tile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;min-height:168px;padding:22px;border:1px solid #dce3ed;border-radius:16px;background:#fff;color:#172033;font:inherit}.finance-home-tile b{font-size:18px}.finance-home-tile small{color:#667085}.finance-home-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e8f0fc;color:#175cd3;font-size:24px}.finance-back{margin:12px 0;min-height:44px}.finance-home-tile[hidden]{display:none!important}
html:root body #app #week .week-page{width:100%!important;max-width:1392px!important;margin:auto!important;padding-top:12px!important}
html:root body #app #week .week-stats>.week-stat{min-height:124px!important;padding:16px!important;gap:10px!important}
html:root body #app #week .week-stats{gap:12px!important;margin:18px 0!important}
html:root body #app #week .week-table-card{margin-top:16px!important}
html:root body #app #week #weekStatusLabel[data-state=returned]{background:#fff0dd!important;color:#8b440c!important;border:1px solid #e9b375!important}
html:root body #app #week #weekStatusLabel[data-state=approved]{background:#e4f6ec!important;color:#126740!important}
html:root body #app #week #weekStatusLabel[data-state=pending]{background:#e8effa!important;color:#24486f!important}
html:root body .admin-shell #timesheets .compact-ts-columns{display:none!important}
html:root body .admin-shell #timesheets .timesheet-employee{border:1px solid #dce3ed!important;border-radius:16px!important;margin:10px 0!important;overflow:hidden!important}
html:root body .admin-shell #timesheets .timesheet-employee-head{grid-template-columns:44px minmax(120px,1fr) auto auto auto!important;grid-template-areas:"avatar name hours status view"!important;padding:16px!important;gap:14px!important}
html:root body .admin-shell #timesheets :is(.compact-ts-type,.compact-ts-split,.compact-ts-cost){display:none!important}
html:root body .admin-shell #timesheets .timesheet-employee-head>.employee-avatar{width:44px!important;height:44px!important;font-size:17px!important}
html:root body .admin-shell #timesheets .timesheet-employee-head>.timesheet-view{width:auto!important;min-width:88px!important;height:44px!important}
html:root body .admin-shell #timesheets .timesheet-employee-head>.pill{min-height:38px!important;font-size:14px!important;padding:9px 16px!important;border-radius:10px!important}
html:root body .admin-shell #timesheets .pill.returned{background:#fff0dd!important;color:#8b440c!important;border:1px solid #e9b375!important}
html:root body .admin-shell #timesheets .pill.ok{background:#e4f6ec!important;color:#126740!important}
#adminInvoiceMenu .admin-invoice-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:18px 0!important}
#adminInvoiceMenu .admin-invoice-tabs button{min-height:54px!important;padding:14px!important;border:1px solid #dce3ed!important;border-radius:12px!important;background:#f1f5fb!important;color:#172033!important;font:inherit!important;font-weight:700!important}
#adminInvoiceMenu .admin-invoice-tabs button[aria-pressed=true]{background:#e7f1ff!important;color:#175cd3!important;border-color:#8eb8e9!important}
#adminInvoiceMenu .admin-invoice-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
#adminInvoiceMenu .admin-invoice-overview>div,#adminInvoiceMenu .admin-invoice-overview>button{padding:16px;text-align:left;border:1px solid #dce3ed;border-radius:13px;background:#f1f5fb;color:#172033;font:inherit}
#adminInvoiceMenu .admin-invoice-overview small{display:block;color:#667085;font-size:12px}#adminInvoiceMenu .admin-invoice-overview b{display:block;margin-top:8px;font-size:24px}
html body #adminInvoiceMenu{padding:0!important;background:transparent!important;min-height:0!important}
html body[data-hgvera-suite=on] #adminInvoiceMenu{background:transparent!important}
html body[data-hgvera-suite=on] #adminInvoiceMenu .admin-invoice-tabs button{background:#203b5a!important;color:#edf4ff!important;border-color:#3b5877!important}
html body[data-hgvera-suite=on] #adminInvoiceMenu .admin-invoice-tabs button[aria-pressed=true]{background:#193f68!important;color:#a9d1ff!important;border-color:#4f82b1!important}
html body[data-hgvera-suite=on] #adminInvoiceMenu .admin-invoice-overview>div,html body[data-hgvera-suite=on] #adminInvoiceMenu .admin-invoice-overview>button{background:#203c5f!important;color:#edf4ff!important;border-color:#3b5877!important}
html body[data-hgvera-suite=on] #adminInvoiceMenu .admin-invoice-overview small{color:#b6c9e2!important}
html body[data-hgvera-suite=on] #app .finance-home-tile{background:#173354!important;border-color:#3b5877!important;color:#edf4ff!important}
html body[data-hgvera-suite=on] #app .finance-home :is(p,small){color:#b6c9e2!important}
html body[data-hgvera-suite=on] #app .finance-home-icon{background:#244766!important;color:#ffbc69!important}
html body[data-hgvera-suite=on] #app #week #weekStatusLabel[data-state=returned],html body[data-hgvera-suite=on] #timesheets .pill.returned{background:#513923!important;color:#ffd49b!important;border-color:#b77735!important}
html body[data-hgvera-suite=on] #timesheets .pill.ok{background:#174d41!important;color:#a2f3ce!important}
html body[data-hgvera-suite=on] #app #earnings :is(.earnings-payslip-card,.earnings-history-card){background:#173354!important;border-color:#3b5877!important;color:#edf4ff!important}
html body[data-hgvera-suite=on] #app #earnings :is(h2,h3,b){color:#edf4ff!important}html body[data-hgvera-suite=on] #app #earnings :is(p,small){color:#b6c9e2!important}
}
@media screen and (max-width:760px){
.finance-home{padding:14px 12px 28px}.finance-home-grid{grid-template-columns:1fr}.finance-home-tile{min-height:138px;padding:18px}
#adminInvoiceMenu .admin-invoice-tabs{grid-template-columns:1fr!important;gap:8px!important}#adminInvoiceMenu .admin-invoice-overview{grid-template-columns:1fr 1fr}
html:root body .admin-shell #timesheets .timesheet-employee-head{grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-areas:"avatar name view" "status status hours"!important;padding:12px!important;gap:10px!important}
html:root body .admin-shell #timesheets .timesheet-employee-head>.pill{justify-self:start!important;width:auto!important}
html:root body #app #week .week-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html:root body #app #week .week-stats>.week-stat{min-height:110px!important}
}

@media screen{
html:root body #app>main{width:100%!important;max-width:1440px!important;margin:0 auto!important;padding:16px 24px 100px!important}
html:root body #app #week .week-page{max-width:none!important;width:100%!important}
html:root body header .head{width:100%!important;max-width:1440px!important;height:auto!important;min-height:82px!important;padding:12px 24px!important;margin:auto!important;gap:14px!important}
html:root body header .head .sub{font-size:12px!important;margin-top:4px!important}
html:root body header .head .hgvera-portal-logo{width:125px!important;height:auto!important}
html:root body header .head-actions{gap:12px!important}
html:root body header .head-actions>.secondary{height:44px!important;min-height:44px!important;min-width:88px!important;padding:0 16px!important;font-size:14px!important}
html:root body #app #employeeInvoiceFrame{min-height:280px!important}
html:root.invoice-embedded body #app .invoice-shell{min-height:0!important;height:auto!important}
html:root.invoice-embedded body{min-height:0!important;height:auto!important}
html:root.invoice-embedded body #employeeInvoiceMenu{min-height:0!important;background:transparent!important;padding:8px 0!important}
html:root.invoice-embedded body #employeeInvoiceMenu .admin-invoice-menu-title p{color:#b6c9e2!important}
html:root body.agency-hgvera .period-month-nav{margin-left:auto!important;margin-right:0!important;justify-content:flex-end!important;width:max-content!important;max-width:100%!important}
html:root body #timesheets .timesheet-employee-head{min-width:0!important}
}
@media screen and (max-width:900px){
html:root body #app>main{padding:12px 12px 110px!important;max-width:100%!important}
html:root body header .head{min-height:64px!important;padding:10px 12px!important;gap:8px!important}
html:root body header .head .hgvera-portal-logo{width:100px!important}
html:root body header .head-actions{gap:8px!important}
html:root body header .head-actions>.secondary{min-width:76px!important;padding:0 12px!important}
html:root body #app #week .week-head{display:flex!important;flex-wrap:wrap!important;gap:12px!important;align-items:center!important}
html:root body #app #week .week-controls{width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px!important;position:static!important}
html:root body #app #week .week-controls .week-date{min-width:0!important;max-width:100%!important;width:100%!important;transform:none!important}
html:root body #app #week .week-controls .week-date b{min-width:0!important;max-width:100%!important;padding:0 6px!important;font-size:13px!important}
html:root body #app #holidays .holiday-date-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
html:root body #app #holidays .holiday-date-wrap{min-width:0!important;width:100%!important}
html:root body #app #holidays input[type=date]{min-width:0!important;width:100%!important;max-width:100%!important;font-size:16px!important}
html:root body .period-month-nav{width:100%!important;max-width:100%!important;display:flex!important;gap:6px!important;box-sizing:border-box!important}
html:root body .period-month-nav select{flex:1!important;min-width:0!important;max-width:100%!important}
html:root body .period-month-nav button{flex:0 0 44px!important;min-width:44px!important;min-height:44px!important}
html:root body .agency-week-nav{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important}
}
@media screen and (max-width:900px) and (orientation:landscape){
html:root body header .head .sub{display:none!important}
html:root body header .head{min-height:60px!important}
html:root body #app #week .week-stats{grid-template-columns:repeat(5,minmax(0,1fr))!important}
html:root body #app #week .week-stats>.week-stat{min-height:105px!important;padding:12px!important}
html:root body #app #week .week-stats b{font-size:22px!important}
html:root body #app #week #weekStatusLabel{font-size:12px!important}
}

/* Final overrides target the actual section and invoice descendants. */
@media screen{
html:root body #app>main>#week,html:root body #app>main>#invoices{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
html:root body #app>main>#week .week-page{width:100%!important;max-width:none!important}
html:root body #app>main>#week .week-stats>.week-stat{min-height:130px!important;gap:10px!important;padding:16px!important}
html:root body #app>main>#week .week-table-card{margin-top:18px!important}
html:root.invoice-embedded body[data-hgvera-suite=on]{background:transparent!important}
html:root.invoice-embedded body[data-hgvera-suite=on] #app main.invoice-shell{background:transparent!important;min-height:0!important;max-width:none!important;width:100%!important;padding:14px 16px 28px!important}
html:root body[data-hgvera-suite=on] #employeePanel.stafftime-new-invoice .st-card{background:#173354!important;border-color:#3b5877!important}
html:root body[data-hgvera-suite=on] #employeePanel.stafftime-new-invoice .st-card :is(label,b,strong,h2,h3){color:#edf4ff!important}
html:root body[data-hgvera-suite=on] #employeePanel.stafftime-new-invoice .st-card :is(p,small,.st-invoice-week-caption){color:#b6c9e2!important}
html:root body[data-hgvera-suite=on] #adminInvoices .admin-invoice-filters a{background:#102b49!important;color:#d8e7f8!important;border:1px solid #496681!important;border-radius:10px!important;min-height:44px!important;padding:11px 14px!important}
html:root body[data-hgvera-suite=on] #adminInvoices .admin-invoice-filters a.active{background:#244766!important;color:#edf4ff!important}
html:root body[data-hgvera-suite=on] #invoicePreview #invoicePreviewBody .invoice-paper{background:#fff!important;color:#17212b!important}
html:root body[data-hgvera-suite=on] #invoicePreview #invoicePreviewBody .invoice-paper :is(h1,h2,h3,b,strong,label,p,small,span,div){color:#17212b!important}
html:root body[data-hgvera-suite=on] #invoicePreview #invoicePreviewBody .invoice-paper .invoice-total-box{background:#f1f5f9!important;color:#17212b!important;border:1px solid #dce3eb!important}
html:root body[data-hgvera-suite=on] #invoicePreview #invoicePreviewBody .invoice-paper .invoice-table th{background:#eef3f8!important;color:#273b52!important}
html:root body[data-hgvera-suite=on] #invoicePreview #invoicePreviewBody .invoice-paper .invoice-table td{background:#fff!important;color:#17212b!important}
html:root body #timesheets .timesheets-card{padding-bottom:20px!important;min-height:0!important}
}
@media screen and (max-width:900px){
html:root body #app>main>#week .week-stats>.week-stat{min-height:110px!important;padding:12px!important}
html:root.invoice-embedded body #app main.invoice-shell{padding:10px 4px 24px!important}
html:root body[data-hgvera-suite=on] #employeePanel.stafftime-new-invoice .st-card{padding:14px!important}
}

@media screen and (max-width:900px){
html:root body .admin-shell #timesheets #tr .timesheet-employee-head{
display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;
grid-template-areas:"avatar name hours" "status status view"!important;
grid-auto-flow:row!important;gap:12px!important;padding:16px!important}
html:root body .admin-shell #timesheets #tr .timesheet-employee-head>.employee-avatar{grid-area:avatar!important;grid-column:auto!important;grid-row:auto!important;width:44px!important;height:44px!important}
html:root body .admin-shell #timesheets #tr .timesheet-employee-head>.timesheet-employee-main{grid-area:name!important;grid-column:auto!important;grid-row:auto!important;min-width:0!important}
html:root body .admin-shell #timesheets #tr .timesheet-employee-head>strong{grid-area:hours!important;grid-column:auto!important;grid-row:auto!important;justify-self:end!important;font-size:16px!important}
html:root body .admin-shell #timesheets #tr .timesheet-employee-head>.pill{grid-area:status!important;grid-column:auto!important;grid-row:auto!important;justify-self:start!important;width:auto!important;max-width:100%!important;min-width:0!important}
html:root body .admin-shell #timesheets #tr .timesheet-employee-head>.timesheet-view{grid-area:view!important;grid-column:auto!important;grid-row:auto!important;justify-self:end!important;width:auto!important;min-width:80px!important;max-width:100%!important;height:44px!important;min-height:44px!important;position:static!important;transform:none!important;margin:0!important}
html:root body .admin-shell #timesheets .compact-ts-summary{font-size:13px!important;line-height:1.5!important;padding:12px!important;border-radius:10px!important;margin:10px 0!important}
html:root body .admin-shell #timesheets{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important}
html:root body .admin-shell #timesheets .compact-ts-count{margin-bottom:12px!important}
}
@media screen and (max-width:420px){
#adminInvoiceMenu .admin-invoice-overview b{font-size:clamp(18px,5.2vw,24px)!important;white-space:nowrap!important}
#adminInvoiceMenu .admin-invoice-overview>div,#adminInvoiceMenu .admin-invoice-overview>button{padding:12px!important;min-width:0!important}
}

@media screen and (max-width:900px){
html:root body .admin-shell #timesheets #tr .timesheet-employee-head>.pill{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
width:max-content!important;min-width:112px!important;max-width:none!important;
min-height:38px!important;height:auto!important;padding:9px 14px!important;
font-size:14px!important;line-height:20px!important;white-space:nowrap!important;
overflow:visible!important;text-align:center!important;box-sizing:border-box!important;
position:static!important;transform:none!important}
html:root body .admin-shell #timesheets #tr .timesheet-employee-head{grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-areas:"avatar name hours" "status status view"!important}
html:root body .admin-shell #timesheets #tr .timesheet-employee{margin:8px 0!important}
html:root body .admin-shell #timesheets #tr .timesheet-employee-head{padding:14px!important;gap:10px!important}
html:root body .admin-shell #timesheets .timesheet-week-body{padding:0!important}
html:root body .admin-shell #timesheets{padding-bottom:12px!important}
html:root body .admin-shell .admin-main{padding-bottom:calc(100px + env(safe-area-inset-bottom))!important}
}

@media screen and (max-width:900px){
html:root body[data-hgvera-suite=on] .admin-shell #timesheets #tr .timesheet-employee{border:1px solid #496681!important;background:#173354!important}
html:root body[data-hgvera-suite=on] .admin-shell #timesheets #tr .timesheet-employee-head{border:0!important}
}
@media screen{
html:root body[data-hgvera-suite=on]{isolation:isolate;background-image:none!important}
html:root body[data-hgvera-suite=on]:not([data-hgvera-embedded=true])::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:#102541 url('/hgvera-system-background.webp') 35% center/cover no-repeat}
html:root body[data-hgvera-suite=on][data-hgvera-embedded=true] #app,
html:root body[data-hgvera-suite=on][data-hgvera-embedded=true] #app main.invoice-shell{background:transparent!important;min-height:0!important}
html:root body[data-hgvera-suite=on][data-hgvera-embedded=true] #app #employeeInvoiceMenu{background:transparent!important;min-height:0!important;padding:10px 0!important}
html:root body[data-hgvera-suite=on][data-hgvera-embedded=true] #app #employeeInvoiceListSection{background:#173354!important;color:#edf4ff!important;border-color:#3b5877!important}
html:root body[data-hgvera-suite=on] #app #employeeInvoiceListSection .st-ref-search{background:#102b49!important;color:#b6c9e2!important;border:1px solid #496681!important;border-radius:12px!important;padding:0 12px!important;min-height:46px!important}
html:root body[data-hgvera-suite=on] #app #employeeInvoiceListSection .st-ref-search input{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:10px!important;min-width:0!important;width:100%!important;color:#edf4ff!important}
html:root body[data-hgvera-suite=on] #app #employeeInvoiceListSection .st-ref-filters a{background:#102b49!important;color:#d8e7f8!important;border:1px solid #496681!important;border-radius:10px!important;min-height:44px!important;padding:12px 8px!important}
html:root body[data-hgvera-suite=on] #app #employeeInvoiceListSection .st-ref-filters a.active{background:#463726!important;color:#ffbd70!important;border-color:#a77539!important}
html:root body[data-hgvera-suite=on] #app #employeeInvoiceListSection .invoice-card-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important}
html:root body[data-hgvera-suite=on] #app #employeeInvoiceListSection .invoice-card-actions button{width:100%!important;min-width:0!important;min-height:44px!important;height:auto!important;padding:10px 8px!important;font-size:14px!important;white-space:normal!important;overflow-wrap:normal!important}
html:root body #app #employeeInvoiceListSection .invoice-main b{word-break:normal!important;overflow-wrap:normal!important}
}
@media screen and (max-width:900px){
html:root body[data-finance-type] header{width:100%!important;padding:0!important;margin:0!important;min-height:0!important;background:#102541!important}
html:root body[data-finance-type] header .head{width:100%!important;max-width:none!important;margin:0!important;padding:12px 16px!important;min-height:72px!important;height:auto!important;background:#102541!important;box-sizing:border-box!important}
html:root body[data-finance-type] header .head>div:first-child{min-width:0!important;flex:1!important}
html:root body[data-finance-type] header .head .hgvera-portal-logo{width:110px!important;max-width:100%!important}
html:root body[data-finance-type] header .head .sub{font-size:11px!important;margin-top:2px!important}
html:root body[data-finance-type] header .head-actions{flex:0 0 auto!important;gap:8px!important;margin-left:auto!important}
html:root body[data-finance-type] header .head-actions :is(button,.secondary){min-height:40px!important;height:40px!important;font-size:14px!important}
html:root body #app #week .week-page{padding-left:0!important;padding-right:0!important}
html:root body #app #week .week-head{gap:12px!important}
html:root body #app #week .week-controls{margin:12px 0 18px!important}
html:root body #app #week .week-controls>.week-date{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
html:root body #app #week .week-controls>.week-date>b{border-radius:12px!important;box-shadow:0 3px 10px #020e1c33!important;padding:0 6px!important;min-width:0!important}
html:root body #app #week .week-table-card{padding:0!important;overflow:hidden!important}
html:root body #app #week .week-day-row{padding:14px 10px!important;grid-template-columns:84px minmax(0,1fr) auto!important;column-gap:10px!important;box-sizing:border-box!important}
html:root body #app #week .week-day-row .week-day{padding:6px!important;min-width:0!important;width:84px!important;box-shadow:none!important;border-radius:9px!important;overflow:visible!important}
html:root body #app #week .week-day-row .week-day :is(b,small){font-size:11px!important;white-space:nowrap!important}
html:root body #app #week .week-day-row .week-row-status{font-size:12px!important;white-space:nowrap!important;min-width:0!important}
html:root body #app #week .week-day-row .week-row-actions{gap:8px!important;margin-top:8px!important}
html:root body #app #week .week-day-row .week-row-actions button{min-height:44px!important;padding:10px 14px!important;font-size:14px!important}
}