@media screen{
.sidebar{padding:24px 14px;gap:22px;background:linear-gradient(180deg,#10283f,#143149)}
.sidebar .brand{padding:4px 12px 18px;border-bottom:1px solid #ffffff14}
.sidebar .nav-label{display:none}
.nav{gap:4px}
.nav-section-title{font-size:11px;font-weight:600;color:#8da8b9;padding:18px 14px 7px;letter-spacing:.2px}
.nav-section-title:first-child{padding-top:0}
.nav button{min-height:44px;padding:10px 12px;gap:10px;border-radius:10px;line-height:1.45}
.nav button.active{background:#ffffff12;color:#fff;box-shadow:inset -3px 0 #d6a84f}
.nav button:hover{background:#ffffff0e}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;color:#9fb9c8}
.nav-icon svg{width:22px;height:22px}
.nav button.active .nav-icon{color:#62cbbb}
.nav .employee-doc-alert-badge{margin-inline-start:auto}
.btn{min-height:42px;border-radius:10px;justify-content:center;line-height:1.4;box-shadow:0 1px 2px #10283f05;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{transform:none;box-shadow:0 3px 8px #10283f0c}
.btn-sm{min-height:34px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.btn:focus-visible,.nav button:focus-visible,.x-btn:focus-visible,summary:focus-visible{outline:3px solid #64bdb2;outline-offset:3px}
.document-action-menu summary{width:40px;height:36px;padding:0;align-items:center;justify-content:center;color:#526978;font-size:22px}
.document-action-menu[open] summary{background:#eaf6f3;border-color:#97cfc5;color:#12776e}
.form-actions{gap:10px}
@media(min-width:701px){.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#486173 transparent;align-self:start}.side-bottom{padding-top:12px}}
@media(max-width:700px){.sidebar{padding:7px 8px;background:#10283f}.nav-section-title{display:none}.nav{overflow-x:auto;justify-content:flex-start}.nav button{flex:0 0 auto;min-width:82px;min-height:48px;padding:5px 8px;font-size:11px}.nav-icon,.nav-icon svg{width:20px;height:20px}.nav .employee-doc-alert-badge{display:none}.sidebar .brand{display:none}}
}
/* Employee, document and insurance screens share table and editor spacing. */
@media screen{
:is(#view-employees,#view-employee-docs,#view-documents,#view-medical-insurance) .table-wrap{border-radius:12px}
:is(#view-employees,#view-employee-docs,#view-documents,#view-medical-insurance) :is(th,td){padding:13px 16px;vertical-align:middle;line-height:1.65}
:is(#view-employees,#view-employee-docs,#view-documents,#view-medical-insurance) th{background:#f1f5f6;color:#546c7c;white-space:normal;min-width:90px}
:is(#view-employees,#view-employee-docs,#view-documents,#view-medical-insurance) td{overflow-wrap:break-word}
:is(#view-employees,#view-employee-docs,#view-documents,#view-medical-insurance) td:last-child{width:90px;text-align:center}
:is(#view-employees,#view-employee-docs,#view-documents,#view-medical-insurance) th:last-child{text-align:center}
:is(#view-employees,#view-employee-docs,#view-documents,#view-medical-insurance) .person-name{line-height:1.6}
:is(#view-employees,#view-employee-docs,#view-documents,#view-medical-insurance) .tiny{display:block;margin-top:5px;color:#778995}
#insuranceTable td:nth-child(2){min-width:210px;font-weight:600}
#insuranceTable td:nth-child(2) small{font-weight:400}
#insuranceTable td:nth-child(3){min-width:180px}
#insuranceTable :is(td:nth-child(7),td:nth-child(8),td:nth-child(9)){white-space:nowrap;font-variant-numeric:tabular-nums}
#employeeDocumentsTable td:nth-child(2){min-width:220px}
:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay) .modal,#insuranceDialog{padding:26px;border-radius:18px}
:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay,#insuranceDialog) .modal-head{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid #e6edef;gap:16px}
:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay,#insuranceDialog) .form-grid{gap:18px 20px;align-items:start}
:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay,#insuranceDialog) .field{display:flex;flex-direction:column;gap:8px;min-width:0}
:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay,#insuranceDialog) .field label{margin:0}
:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay,#insuranceDialog) .field :is(input,select){height:46px;min-height:46px;width:100%;border-radius:9px;margin:0}
:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay,#insuranceDialog) .form-actions{border-top:1px solid #e6edef;padding-top:18px;margin-top:22px}
#employeeOverlay .form-grid+.form-grid{margin-top:22px;padding-top:20px;border-top:1px solid #e6edef}
@media(max-width:600px){:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay,#insuranceDialog) .form-grid{grid-template-columns:1fr}:is(#employeeOverlay,#employeeDocumentOverlay,#documentOverlay) .modal,#insuranceDialog{padding:18px}}
}

@media screen{
#view-medical-insurance .panel>.toolbar{display:block}
#view-medical-insurance #insuranceControls{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;width:100%;margin-top:18px}
#insuranceControls .btn{flex-shrink:0;white-space:nowrap}
#insuranceControls #insuranceSearch{flex:1;min-width:120px;width:auto;max-width:none}
#insuranceControls #insuranceFilter{flex:0 0 150px;width:150px}
@media(max-width:800px){#view-medical-insurance #insuranceControls{flex-wrap:wrap}#insuranceControls #insuranceSearch{min-width:180px}}
}
@media print{#insuranceControls{display:none!important}}
@media screen{
:is(#view-employee-docs,#view-documents,#view-medical-insurance,#view-dashboard) :is(.status-warn,.status-bad){color:#b42332;background:#fff0f1;border:1px solid #f4c9ce}
#nav .employee-doc-alert-badge{background:#c93646;color:#fff}
#employeeDocumentsTable :is(.employee-doc-row-near,.employee-doc-row-expired){background:#fff7f7}
#employeeDocumentsTable :is(.employee-doc-row-near,.employee-doc-row-expired):hover{background:#ffeff0}
}
/* Consistent financial screens, screen-only to preserve exported forms. */
@media screen{
:is(#view-payroll,#view-loans,#view-leave,#view-eos,#view-salary-payments) .panel{border-radius:14px}
:is(#payrollTable,#loansTable,#leaveTable,#salaryHistory) .table-wrap{border-radius:12px}
:is(#payrollTable,#loansTable,#leaveTable,#salaryHistory) th{background:#f1f5f6;color:#546c7c;line-height:1.6;vertical-align:middle}
:is(#payrollTable,#loansTable,#leaveTable,#salaryHistory) td{vertical-align:middle;line-height:1.65;font-variant-numeric:tabular-nums}
:is(#loansTable,#salaryHistory) :is(th,td){padding:13px 16px}
:is(#payrollTable,#loansTable,#leaveTable) .person{gap:12px}
:is(#payrollTable,#loansTable,#leaveTable) .person-name{line-height:1.6}
:is(#payrollTable,#loansTable,#leaveTable) .person-sub{margin-top:5px}
:is(#view-payroll,#view-loans,#view-leave,#view-eos,#view-salary-payments) .field-input{min-height:44px;border:1px solid #dce5e9;border-radius:9px;padding:9px 12px;box-sizing:border-box}
:is(#payrollToolbar,#loanListControls,#leaveToolbar .toolbar-group,#eosReportControls){gap:12px}
#leaveToolbar .toolbar-group{flex-wrap:nowrap;align-items:end}
#leaveToolbar .toolbar-group .btn{white-space:nowrap;flex-shrink:0}
#leaveSearch{min-width:140px}
#view-eos .form-grid{gap:20px 22px;align-items:start}
#view-eos .form-grid>label,#view-eos .field{display:flex;flex-direction:column;gap:8px;min-width:0}
#view-eos .form-grid :is(input,select){width:100%;min-width:0;min-height:46px;border:1px solid #dce5e9;border-radius:9px;padding:10px 12px;box-sizing:border-box}
#view-eos .calc-result{padding:22px;border-radius:12px}
#view-eos .calc-breakdown{gap:12px}
#view-eos .breakdown-item{padding:14px}
#view-salary-payments>h1{margin:0 0 16px}
#view-salary-payments h2{margin:4px 0 18px}
#salaryForm .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#salaryHistory table{min-width:720px}
#salarySummary>div{padding:18px;min-height:100px}
#salarySummary strong{font-variant-numeric:tabular-nums}
#loanOverlay .modal{padding:26px;border-radius:18px}
#loanOverlay .modal-head{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid #e6edef}
#loanOverlay .form-grid{gap:18px 20px;align-items:start}
#loanOverlay .field{display:flex;flex-direction:column;gap:8px;min-width:0}
#loanOverlay .field :is(input,select){min-height:46px;width:100%;border-radius:9px;margin:0}
#loanOverlay .form-actions{border-top:1px solid #e6edef;padding-top:18px;margin-top:22px}
@media(max-width:1000px){#leaveToolbar .toolbar-group{flex-wrap:wrap}}
@media(max-width:600px){#salaryForm .form-grid,#view-eos .form-grid,#loanOverlay .form-grid{grid-template-columns:1fr}#loanOverlay .modal{padding:18px}}
}
@media screen{
#view-dashboard .welcome{align-items:center;margin-bottom:20px}
#dashboardCards{gap:16px}
#dashboardCards .metric{min-height:130px;padding:20px}
#view-dashboard .grid-two{grid-template-columns:1.2fr 1fr;gap:16px;align-items:stretch}
#view-dashboard .panel{padding:20px;margin-bottom:16px}
#view-dashboard .quick{min-height:94px;padding:16px;gap:12px}
#view-dashboard .quick-ico{flex-shrink:0}
#contractAlertsPanel{border-top:3px solid #c93646}
#view-dashboard :is(th,td){padding:12px 14px}
#view-audit>h1{margin:0 0 18px}
#auditSearch{width:min(480px,100%);min-height:44px;margin-bottom:18px;border:1px solid #dce5e9;border-radius:9px;padding:10px 12px}
#auditRows{border:1px solid #e4e9ed;border-radius:12px}
#auditRows table{min-width:1100px}
#auditRows th{padding:14px;background:#f1f5f6;white-space:nowrap}
#auditRows td{line-height:1.7;vertical-align:top;border-bottom:1px solid #e6edef}
#auditRows td:nth-child(5){background:#fff8f6;min-width:180px}
#auditRows td:nth-child(6){background:#f0faf6;min-width:180px}
#view-audit .panel>.actions{align-items:center;justify-content:center;margin-top:18px}
@media(max-width:1100px){#view-dashboard .grid-two{grid-template-columns:1fr}}
}
@media screen{
#dashboardCards{grid-template-columns:repeat(3,minmax(0,1fr))}
#loansTable .table-wrap{position:relative;isolation:isolate;overflow-x:auto}
#loansTable th:first-child,#loansTable td:first-child{position:sticky;right:0;z-index:2;background:#fff;min-width:230px;box-shadow:-3px 0 6px #10283f12}
#loansTable th:first-child{background:#f1f5f6;z-index:3}
#loansTable tbody tr:hover td:first-child{background:#fafcfc}
@media(max-width:700px){#dashboardCards{grid-template-columns:1fr}#loansTable th:first-child,#loansTable td:first-child{min-width:170px;max-width:190px}}
}
@media screen{
:is(#lettersTable,#hrFormsList) :is(th,td){padding:13px 16px;vertical-align:middle;line-height:1.65}
:is(#lettersTable,#hrFormsList) th{background:#f1f5f6;color:#546c7c}
#hrFormsList td:nth-child(2){min-width:220px;font-weight:600}
#hrFormsList td:nth-child(2) .tiny{display:block;margin-top:6px;font-weight:400;direction:ltr;text-align:right}
:is(#lettersTable,#hrFormsList) :is(th,td):last-child{text-align:center;width:90px}
#hrFormControls{flex-wrap:wrap}
#hrFormControls .hr-form-cards{flex-wrap:wrap}
#hrFormSearch{min-height:44px;border:1px solid #dce5e9;border-radius:9px;padding:10px 12px}
:is(#letterDialog,#hrFormDialog) .form-grid{gap:18px 20px;align-items:start}
:is(#letterDialog,#hrFormDialog) .field{display:flex;flex-direction:column;gap:8px;min-width:0}
:is(#letterDialog,#hrFormDialog) .field :is(input,select){min-height:46px;width:100%;border-radius:9px}
:is(#letterDialog,#hrFormDialog) .modal-head{border-bottom:1px solid #e6edef;padding-bottom:16px;margin-bottom:20px}
:is(#letterDialog,#hrFormDialog) .form-actions{border-top:1px solid #e6edef;padding-top:18px;margin-top:22px}
@media(max-width:600px){:is(#letterDialog,#hrFormDialog) .form-grid{grid-template-columns:1fr}}
}

/* Loan management layout */
#loanControlDialog{width:min(900px,94vw)!important;padding:0 26px 26px!important;box-sizing:border-box;box-shadow:0 20px 70px #10283f35}
#loanControlDialog::backdrop{background:#10283f66}
#loanControlDialog .modal-head{position:sticky;top:0;background:white;z-index:2;padding:22px 0 16px;margin:0 0 20px;align-items:center;border-bottom:1px solid #e2e9ed;gap:20px}
#loanControlDialog .modal-head h2{font-size:19px!important;line-height:1.7;margin:0;overflow-wrap:anywhere}
#loanControlClose{flex-shrink:0}
#loanControlDialog .loan-summary-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#loanControlDialog .loan-summary-cards>div{padding:18px 12px;border:1px solid #dde9e8;border-radius:12px;background:#f5f9f9;text-align:center}
#loanControlDialog .loan-summary-cards span{display:block;color:#657b86;margin-bottom:10px}
#loanControlDialog .loan-summary-cards strong{display:block;font-size:21px!important;font-variant-numeric:tabular-nums}
#loanControlDialog .loan-summary-cards>div:last-child{background:#eaf7f3;color:#11786c}
#loanControlDialog .loan-plan-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0;line-height:1.8}
#loanPlanForm{border:1px solid #e2e9ed;border-radius:12px;padding:20px;background:#fafcfc}
#loanPlanForm .form-grid{gap:18px;align-items:start}
#loanPlanForm .field{margin:0;min-width:0}
#loanPlanForm label{display:block;margin-bottom:8px}
#loanPlanForm input,#loanPlanForm select{height:46px;box-sizing:border-box;width:100%;background:white}
#loanPlanStatus{color:#647984;line-height:1.8;margin:16px 0 10px}
#loanPlanPreview{padding:14px;border-radius:8px;background:#eaf4f7;color:#193b58;font-weight:600;line-height:1.8}
#loanPlanForm .tiny{line-height:1.9;color:#6b7e88}
#loanPlanSave{display:block;margin:18px 0 0 auto;min-width:160px;justify-content:center}
#loanControlDialog>h3{margin:26px 0 12px;padding-bottom:10px;border-bottom:1px solid #e2e9ed}
#loanControlDialog table th,#loanControlDialog table td{text-align:center;padding:12px}
#loanControlDialog>details{margin-top:20px;padding:14px;background:#f5f8f9;border-radius:8px;line-height:1.8}
@media(max-width:600px){#loanControlDialog{padding:0 14px 18px!important}#loanControlDialog .loan-summary-cards{grid-template-columns:1fr}#loanPlanForm .form-grid{grid-template-columns:1fr}#loanPlanForm{padding:14px}}

/* Keep desktop navigation flush with both viewport edges. */
@media screen and (min-width:701px){
.shell>.sidebar{position:fixed!important;top:0!important;right:0;bottom:0!important;height:100vh!important;height:100dvh!important;max-height:none!important;width:250px;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;z-index:5}
.shell>.main{grid-column:2;min-width:0}
}
@media screen and (min-width:701px) and (max-width:1050px){.shell>.sidebar{width:210px}}