:root{--primary:#145a5f;--accent:#b8832e;--ink:#1b2b34;--muted:#66737b;--surface:#fff;--line:#dce4e8;--bg:#f5f7f8}
/* Retheme real Bootstrap 5's own CSS variables to the school brand palette
   (swapped in from the CDN/npm dist build 2026-07-03, replacing an earlier
   hand-trimmed subset). Without this, every Bootstrap component we don't
   already override by class name (checkboxes, links, focus rings, list
   groups, pagination, etc.) would revert to Bootstrap's default blue. */
:root{
  --bs-primary:var(--primary);
  --bs-primary-rgb:20,90,95;
  --bs-primary-text-emphasis:var(--primary);
  --bs-primary-bg-subtle:#e3edee;
  --bs-primary-border-subtle:#b9d0d2;
  --bs-link-color:var(--primary);
  --bs-link-color-rgb:20,90,95;
  --bs-link-hover-color:#0f484c;
  --bs-link-hover-color-rgb:15,72,76;
  --bs-focus-ring-color:rgba(20,90,95,.25);
}
/* Real Bootstrap bakes each .btn-* variant's colors into hardcoded hex
   --bs-btn-* variables (not the --bs-primary retheme above), so outline
   buttons need their own override to stay on-brand instead of reverting to
   Bootstrap's default blue/gray/red. Values match what this app already
   looked like under the old hand-trimmed CSS subset. */
.btn-outline-primary{--bs-btn-color:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary);--bs-btn-hover-border-color:var(--primary);--bs-btn-active-bg:var(--primary);--bs-btn-active-border-color:var(--primary);--bs-btn-disabled-color:var(--primary);--bs-btn-disabled-border-color:var(--primary);--bs-btn-focus-shadow-rgb:20,90,95}
.btn-outline-secondary{--bs-btn-color:#5f6d75;--bs-btn-border-color:#b8c5cb;--bs-btn-hover-bg:#5f6d75;--bs-btn-hover-border-color:#5f6d75;--bs-btn-active-bg:#5f6d75;--bs-btn-active-border-color:#5f6d75;--bs-btn-disabled-color:#5f6d75;--bs-btn-disabled-border-color:#b8c5cb;--bs-btn-focus-shadow-rgb:95,109,117}
.btn-outline-danger{--bs-btn-color:#a52834;--bs-btn-border-color:#a52834;--bs-btn-hover-bg:#a52834;--bs-btn-hover-border-color:#a52834;--bs-btn-active-bg:#a52834;--bs-btn-active-border-color:#a52834;--bs-btn-disabled-color:#a52834;--bs-btn-disabled-border-color:#a52834;--bs-btn-focus-shadow-rgb:165,40,52}
/* Same story for form-control/select focus rings and checkbox/radio check
   marks -- Bootstrap hardcodes its blue here too. */
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 .15rem rgba(20,90,95,.15)}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-input:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(20,90,95,.25)}
/* .navbar-toggler-icon's glyph comes from a --bs-navbar-toggler-icon-bg
   variable that Bootstrap only defines inside .navbar -- our mobile sidebar
   toggle button (.sidebar-toggle) isn't nested in one, so the icon would
   render blank without this. Set directly, in the brand ink color. */
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2827,43,52,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
body{background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.bg-primary{background:var(--primary)!important}.top-utility{background:#0f484c;color:#d7eef0;font-size:13px}.top-utility-inner{min-height:30px;display:flex;align-items:center;justify-content:flex-end;gap:16px}.top-utility strong{color:#fff}.top-utility-link{color:#fff;font-weight:700;text-decoration:none}.top-utility-link:hover,.top-utility-link:focus{color:#f3d79f;text-decoration:none}.app-navbar{background:#fff;border-bottom:1px solid #d7e1e5;box-shadow:0 1px 4px rgba(10,30,35,.08)}.app-navbar .nav-link{color:#184b52!important;border-radius:6px;padding-left:.7rem!important;padding-right:.7rem!important}.app-navbar .nav-link:hover,.app-navbar .nav-link:focus,.app-navbar .nav-link.active{color:#8b601f!important;background:#f7f3eb}.app-navbar .dropdown-menu{border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px rgba(18,42,49,.14);padding:6px;min-width:220px}.app-navbar .dropdown-item{border-radius:6px;color:#184b52;font-weight:600;padding:8px 10px}.app-navbar .dropdown-item:hover,.app-navbar .dropdown-item:focus,.app-navbar .dropdown-item.active{background:#e8f1f2;color:#0f484c}.navbar-brand{font-weight:700}.nav-link{font-weight:600}.app-brand{display:flex;align-items:center;gap:12px;min-width:0}.school-logo,.school-logo-placeholder{width:34px;height:34px;border-radius:6px;background:#fff;color:var(--primary);display:inline-grid;place-items:center;font-size:13px;font-weight:700;object-fit:contain}.school-brand-logo{width:46px;height:54px;border-radius:5px;padding:1px;flex:0 0 auto}.school-name-image{height:42px;max-width:min(48vw,380px);object-fit:contain;flex:0 1 auto}.school-logo-preview{display:flex;align-items:center;gap:12px}.school-logo-preview img{max-width:96px;max-height:96px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px}
.top-utility-logout{margin:0;display:inline-flex}
.top-utility-btn{background:none;border:0;padding:0;margin:0;font:inherit;color:#fff;font-weight:700;text-decoration:none;cursor:pointer}
.top-utility-btn:hover,.top-utility-btn:focus{color:#f3d79f;text-decoration:none}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:16px}
.page-title h1{font-size:28px;margin:0}.page-title p{margin:6px 0 0;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:0 1px 3px rgba(10,30,35,.06)}
.narrow{max-width:520px;margin:auto}.panel h2{font-size:18px;margin:0 0 14px}.stacked-form{display:grid;gap:11px}
.panel-collapse-toggle{display:flex;align-items:center;width:100%;text-align:left;padding:0;border:0;background:none;cursor:pointer}.panel-collapse-toggle h2{margin:0 0 14px}.panel-collapse-toggle::after{content:"";margin-left:auto;flex-shrink:0;border-top:.36em solid;border-right:.36em solid transparent;border-left:.36em solid transparent;transition:transform .15s;color:var(--muted)}.panel-collapse-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}
.metric{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:18px}.metric span{display:block;color:var(--muted);font-size:13px;text-transform:uppercase}.metric strong{font-size:30px}
.auth-shell{min-height:calc(100vh - 48px);display:flex;align-items:center;justify-content:center}.login-panel{max-width:430px;width:100%}.school-mark{width:58px;height:58px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:14px}.login-logo img{max-width:84px;max-height:84px;border-radius:8px;margin-bottom:14px}.login-brand{text-align:center;margin-bottom:14px}.login-brand-logo{display:block;width:92px;height:110px;object-fit:contain;margin:0 auto 10px}.login-school-name{display:block;max-width:100%;max-height:72px;object-fit:contain;margin:0 auto}
.captcha-field{display:grid;gap:7px}.captcha-display{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.captcha-display img{border:1px solid var(--line);border-radius:6px;background:#f0f6f7;max-width:100%;height:64px;object-fit:cover}.captcha-field input{text-transform:uppercase;letter-spacing:.12em}
.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover{background:#0f484c;border-color:#0f484c}.table th{font-size:13px;text-transform:uppercase;color:var(--muted);white-space:nowrap}.sortable-header{cursor:pointer;user-select:none}.sortable-header:focus{outline:2px solid rgba(20,90,95,.28);outline-offset:2px}.sort-link{color:inherit;text-decoration:none}.sort-link:hover{color:var(--primary);text-decoration:none}.sort-indicator{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.45}.sortable-header[aria-sort="ascending"] .sort-indicator{border-bottom:6px solid var(--primary);opacity:1}.sortable-header[aria-sort="descending"] .sort-indicator{border-top:6px solid var(--primary);opacity:1}
.field-label{display:block;margin-bottom:4px;color:var(--muted);font-size:13px;font-weight:700}.employee-photo{display:flex;align-items:center;gap:12px}.employee-photo img{width:96px;height:112px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:#f8fafb}.actions{display:flex;gap:6px;align-items:center}.actions form{margin:0}.grid-filters{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,190px) minmax(120px,140px) auto auto;gap:8px}.grid-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.pagination{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;padding-left:0;margin:0;list-style:none}.page-item{display:block}.page-link{display:block;min-width:34px;padding:.35rem .65rem;border:1px solid var(--line);background:#fff;color:var(--primary);font-weight:700;text-align:center;text-decoration:none}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item:first-child .page-link{border-top-left-radius:6px;border-bottom-left-radius:6px}.page-item:last-child .page-link{border-top-right-radius:6px;border-bottom-right-radius:6px}.page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff}.page-item.disabled .page-link{color:#94a0a6;pointer-events:none;background:#f3f6f7}.master-grid td{vertical-align:middle}.master-add-row{background:#f7faf9}.master-add-row td{border-bottom:2px solid var(--line)}.master-edit-form{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:8px}.master-actions{display:flex;gap:8px;justify-content:flex-end}.master-actions form{margin:0}.ui-autocomplete{background:#fff;border:1px solid var(--line);border-radius:6px;list-style:none;padding:4px;max-width:520px;z-index:2000}.ui-menu-item{padding:7px 9px;cursor:pointer}.ui-menu-item:hover{background:#e8f1f2}
.report-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.user-employee-suggestions{border:1px solid var(--line);border-radius:6px;background:#fff;margin-top:4px;max-height:240px;overflow:auto;box-shadow:0 10px 24px rgba(18,42,49,.12);position:relative;z-index:5}.lookup-option{display:block;width:100%;border:0;background:#fff;text-align:left;padding:8px 10px;color:var(--text)}.lookup-option:hover,.lookup-option:focus{background:#e8f1f2;outline:0}.lookup-empty{padding:8px 10px;color:var(--muted)}
.payroll-title{align-items:center}.payroll-title-status{display:grid;gap:3px;text-align:right}.payroll-title-status span{color:var(--muted);font-size:13px}.payroll-title-status strong{font-size:20px;color:var(--primary)}.payroll-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.payroll-steps div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:10px 12px}.payroll-steps strong{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:14px}.payroll-steps span{font-weight:700;color:#274850}.payroll-command-grid{display:grid;grid-template-columns:minmax(360px,5fr) minmax(420px,7fr);gap:16px;align-items:start}.payroll-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.payroll-section-heading h2,.payroll-run-section h2{font-size:18px;margin:0}.payroll-section-heading p,.payroll-run-header p,.payroll-empty-run p{margin:4px 0 0;color:var(--muted)}.payroll-lookup-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.payroll-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.payroll-history{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.payroll-history h3,.payroll-runs-list h3{font-size:15px;margin:0 0 10px;color:#274850}.payroll-empty-state,.payroll-empty-run{color:var(--muted)}.payroll-month-form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(120px,160px) auto;gap:10px;align-items:end}.payroll-runs-list{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.payroll-month-cell{display:flex;align-items:center;gap:10px;min-width:130px}.payroll-month-cell strong{font-weight:700}.payroll-run-panel{margin-top:16px}.payroll-run-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.payroll-run-header h2{font-size:22px;margin:0}.payroll-run-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.payroll-summary-strip,.payroll-pf-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}.payroll-summary-strip div,.payroll-pf-strip div{background:#f8fbfb;border:1px solid var(--line);border-radius:8px;padding:12px}.payroll-pf-strip{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:-6px}.payroll-pf-strip div{background:#fffaf1;border-color:#ead6ad}.payroll-summary-strip span,.payroll-pf-strip span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:700}.payroll-summary-strip strong,.payroll-pf-strip strong{display:block;margin-top:5px;font-size:22px;color:var(--ink)}.payroll-pf-strip strong{color:#7a521a}.payroll-help-text{margin:-8px 0 16px;color:#6b5b32;background:#fffaf1;border:1px solid #ead6ad;border-radius:8px;padding:9px 12px;font-size:13px}.payroll-warning{display:block}.payroll-warning span{display:block;margin-top:3px}.payroll-warning-table{max-height:260px;overflow:auto}.payroll-run-section{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.payroll-action-band{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.payroll-action-band form{margin:0}.payroll-days-cell{max-width:130px}.payroll-setup-panel textarea{min-height:64px}
.payroll-ctc-helper{background:#f8fbfb;border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px}.payroll-ctc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.payroll-ctc-preview{margin:6px 0 0;color:var(--primary);font-size:13px;font-weight:700}
.employee-form-shell{display:grid;gap:16px;max-width:1120px}.employee-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.employee-form-span{grid-column:1/-1}.form-action-bar{position:sticky;bottom:0;z-index:4;display:flex;gap:8px;align-items:center;background:rgba(245,247,248,.96);border:1px solid var(--line);border-radius:8px;padding:12px;box-shadow:0 -8px 20px rgba(18,42,49,.08)}.employee-document-layout{display:grid;grid-template-columns:minmax(330px,420px) minmax(0,1fr);gap:16px;align-items:start}.employee-lookup-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:start}.lookup-wrap{position:relative}.document-staff-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.document-staff-header h2{margin:0 0 4px}.document-staff-header p{margin:0;color:var(--muted)}.photo-placeholder{width:96px;height:112px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:8px;color:var(--muted);background:#f8fafb;font-weight:700}.document-upload-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.document-list{display:grid;gap:10px}.document-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:12px;background:#fbfdfd}.document-row strong,.document-row span,.document-row small{display:block}.document-row small{color:var(--muted);margin-top:2px}
.assignment-data-entry{max-width:1180px}.assignment-workspace,.assignment-academic-grid{display:block}.assignment-data-entry .panel{box-shadow:none;border-radius:6px;margin-bottom:12px}.assignment-lookup-panel{border-left:0}.assignment-form-panel{min-height:0}.assignment-staff-card{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}.assignment-staff-card span{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase}.assignment-staff-card strong{font-size:18px}.assignment-staff-card dl{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}.assignment-staff-card div{background:transparent;border:0;border-radius:0;padding:0}.assignment-staff-card dt{display:inline;color:var(--muted);font-size:12px;font-weight:700}.assignment-staff-card dd{display:inline;margin:0 0 0 4px;font-weight:700}.assignment-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.assignment-panel-heading h2{margin:0;font-size:18px}.assignment-panel-heading p{margin:4px 0 0;color:var(--muted)}.assignment-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.assignment-data-entry .form-control,.assignment-data-entry .form-select{min-height:42px}.assignment-data-entry textarea.form-control{min-height:74px}.assignment-form-span{grid-column:1/-1}.assignment-form-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.assignment-form-actions .btn{min-width:150px}.assignment-empty-state{min-height:150px;display:grid;align-content:center;color:var(--muted)}.assignment-empty-state h2{color:var(--ink)}.assignment-academic-grid table form{margin:0}.assignment-history-panel{box-shadow:none}
.exit-selected-staff{margin-top:10px;margin-bottom:2px}
.leave-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.leave-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.leave-action-card{display:grid;gap:6px;text-decoration:none;color:var(--ink);border-left:4px solid var(--accent)}.leave-action-card:hover,.leave-action-card:focus{color:var(--ink);transform:translateY(-1px)}.leave-action-card span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:700}.leave-action-card strong{font-size:16px}.leave-action-card small{color:var(--muted)}.leave-split-layout{display:grid;grid-template-columns:minmax(330px,430px) minmax(0,1fr);gap:16px;align-items:start}.leave-apply-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.leave-form-span{grid-column:1/-1}.leave-report-filter{display:grid;grid-template-columns:minmax(150px,220px) minmax(150px,220px) auto;gap:12px;align-items:end}
.salary-slip{max-width:1050px;margin:0 auto;background:#fff;color:#000;border:2px solid #222;font-family:Arial,Helvetica,sans-serif;font-size:12px}.salary-slip-header{display:flex;justify-content:space-between;gap:12px;padding:8px 12px 0}.salary-slip-school{display:flex;align-items:flex-start;gap:10px}.salary-slip-school img{width:46px;height:56px;object-fit:contain;flex:0 0 auto}.salary-slip-header h1{font-size:16px;line-height:1;margin:0;font-weight:800}.salary-slip-header p{font-size:11px;line-height:1.25;margin:3px 0 0;max-width:620px}.salary-slip-month{font-weight:700;align-self:flex-end;white-space:nowrap;padding-bottom:6px}.salary-slip-title{text-align:center;font-weight:800;margin-top:-4px}.salary-slip-title span{display:inline-block;font-size:15px}.salary-slip-title small{font-size:10px;font-weight:700;margin-left:18px}.salary-slip-table{width:100%;border-collapse:collapse}.salary-slip-table td,.salary-slip-table th{border:1px solid #222;padding:3px 6px;color:#000;line-height:1.15}.salary-slip-table th{font-size:11px;font-weight:800;text-align:center;background:#f4f4f4}.salary-slip-info td{border-left:0;border-right:0}.salary-slip-info td:nth-child(1),.salary-slip-info td:nth-child(4){width:94px}.salary-slip-info td:nth-child(2),.salary-slip-info td:nth-child(5){width:16px;text-align:center}.salary-slip-info td:nth-child(3){width:360px}.salary-slip-main td:nth-child(1){width:52px}.salary-slip-main td:nth-child(2){width:92px}.salary-slip-main td:nth-child(3){width:170px}.salary-slip-main td:nth-child(4),.salary-slip-main td:nth-child(5),.salary-slip-main td:nth-child(7){width:120px}.salary-slip-main td:nth-child(6){width:150px}.salary-slip-table .num{text-align:right;white-space:nowrap}.salary-slip-total td{font-weight:800}.salary-slip-net td{border-top:0;font-size:11px}.salary-slip-net td:first-child{width:70px}.salary-slip-net td:nth-child(3){width:130px;font-weight:800}.salary-slip-net td:nth-child(4){width:160px}.salary-slip-passthrough td:first-child{width:230px}.salary-slip-passthrough td:nth-child(2){width:90px}.salary-slip-passthrough td:nth-child(3){width:150px;font-weight:800}.salary-slip-employer td{font-size:11px;font-weight:700;background:#f7f7f7}.salary-slip-employer td:first-child{width:160px}.salary-slip-employer td:nth-child(2),.salary-slip-employer td:nth-child(4){width:150px}.salary-slip-signatures{display:flex;justify-content:space-between;min-height:78px;padding:18px 75px 8px;font-size:11px;text-align:center}
.app-navbar{z-index:1030}.app-navbar .navbar-nav{align-items:center;gap:2px}.app-navbar .dropdown{position:relative}.app-navbar .dropdown-menu{display:none;position:absolute;top:100%;left:0;z-index:1060;margin:4px 0 0;list-style:none;background:#fff}.app-navbar .dropdown-menu-end{right:0;left:auto}.app-navbar .dropdown.show>.dropdown-menu,.app-navbar .dropdown:hover>.dropdown-menu,.app-navbar .dropdown:focus-within>.dropdown-menu{display:block}.app-navbar .dropdown-toggle{cursor:pointer}.app-navbar .dropdown-toggle::after{display:inline-block;margin-left:.35rem;vertical-align:.12em;content:"";border-top:.32em solid;border-right:.32em solid transparent;border-left:.32em solid transparent}.app-navbar .dropdown-menu li{list-style:none}.app-navbar .dropdown-item{display:block;text-decoration:none;white-space:nowrap}.app-navbar .navbar-nav,.app-navbar .nav-item{position:relative}
@media(max-width:1100px){.payroll-command-grid,.payroll-steps,.payroll-summary-strip,.payroll-pf-strip{grid-template-columns:1fr}.payroll-run-header{display:block}.payroll-run-actions{justify-content:flex-start;margin-top:10px}.payroll-month-form{grid-template-columns:1fr}}
@media(min-width:1101px){.payroll-command-grid{grid-template-columns:minmax(330px,430px) minmax(0,1fr)}.payroll-runs-list .table{font-size:13px}.payroll-runs-list .table th,.payroll-runs-list .table td{padding:8px 9px;white-space:nowrap}.payroll-runs-list .table-responsive{overflow-x:auto}.payroll-month-cell{min-width:112px;gap:8px}.payroll-month-cell .btn{padding:4px 8px}}
@media(min-width:1350px){.payroll-command-grid{grid-template-columns:minmax(360px,460px) minmax(0,1fr)}.payroll-runs-list .table{font-size:14px}.payroll-runs-list .table th,.payroll-runs-list .table td{padding:8px 10px}}
@media(max-width:768px){.top-utility-inner{align-items:flex-start;flex-direction:column;gap:0;padding-top:6px;padding-bottom:6px}.school-brand-logo{width:40px;height:47px}.school-name-image{height:32px;max-width:60vw}.page-title{display:block}.page-title h1{font-size:24px}.panel{padding:14px}.table{font-size:14px}.actions,.master-actions{display:grid}.master-edit-form,.grid-filters,.payroll-form-grid,.payroll-lookup-row,.employee-form-grid,.employee-document-layout,.employee-lookup-row,.document-upload-form,.assignment-workspace,.assignment-form-grid,.assignment-academic-grid,.leave-metric-grid,.leave-action-grid,.leave-split-layout,.leave-apply-form,.leave-report-filter{grid-template-columns:1fr}.grid-footer{align-items:flex-start;flex-direction:column}.form-action-bar{position:static}.document-staff-header,.document-row,.assignment-panel-heading{display:block}.document-row .actions{margin-top:10px}.assignment-staff-card dl{grid-template-columns:1fr}.assignment-form-actions{display:grid}}
.grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;background:#f6fafa;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.grid-toolbar .grid-search{max-width:300px;border-radius:20px;padding-left:32px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2366737b' stroke-width='1.6'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8'/%3E%3Cpath d='M10.4 10.4L14 14' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center;background-size:14px;transition:box-shadow .15s ease,border-color .15s ease}
.grid-toolbar .grid-search:focus{border-color:var(--primary);box-shadow:0 0 0 .18rem rgba(20,90,95,.15)}
.grid-toolbar .grid-size-label{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:var(--muted);margin:0}
.grid-toolbar .grid-size{width:auto;border-radius:8px}
.grid-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.grid-pager .grid-pager-info{color:var(--muted);font-size:13px;font-weight:600}
.grid-pager .btn{border-radius:20px;padding:.3rem 1rem}
.data-grid-wrap{border:1px solid var(--line);border-radius:10px;overflow-x:auto;overflow-y:hidden}
.data-grid-wrap table{margin-bottom:0}
table.data-grid thead th{background:#f4f8f8;border-bottom:2px solid var(--line)}
table.data-grid tbody tr:nth-child(even){background:#fafcfc}
table.data-grid tbody tr:hover{background:#eef6f6}
.app-footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center;padding:12px 16px 16px;background:#fff}
.pay-register-self .table th,.pay-register-self .table td{white-space:nowrap}
.print-report-header,.print-report-subtitle{display:none}
@media print{@page{margin:12mm;@bottom-right{content:"Page " counter(page) " of " counter(pages);font-size:9px}}.no-print,.top-utility,.navbar{display:none!important}body{background:#fff}.panel{box-shadow:none;border:0}.payslip-panel{max-width:900px;margin:0 auto}.container-fluid{padding:0!important}.salary-slip{max-width:none;border-color:#000;font-size:10px}.salary-slip-table td,.salary-slip-table th{padding:2px 5px}.salary-slip-header{padding-top:6px}.salary-slip-signatures{min-height:64px}.app-footer{border-top:1px solid #000;color:#000;background:#fff;font-size:11px;padding:8px 0}.print-report-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid #000;padding-bottom:6px;margin-bottom:6px;color:#000}.print-report-brand{display:flex;gap:8px;align-items:flex-start}.print-report-brand img{width:42px;height:50px;object-fit:contain}.print-report-brand h1{font-size:15px;line-height:1.1;margin:0;font-weight:800}.print-report-brand p{font-size:9px;line-height:1.25;margin:2px 0 0;max-width:520px}.print-report-meta{text-align:right;font-size:10px;line-height:1.35}.print-report-meta strong,.print-report-meta span{display:block}.print-report-subtitle{display:flex;justify-content:space-between;border-bottom:1px solid #000;margin-bottom:8px;padding-bottom:4px;color:#000;font-size:10px}.pay-register-self{padding:0}.pay-register-self .table{font-size:10px}.pay-register-self .table th,.pay-register-self .table td{padding:3px 5px;color:#000}}

.salary-slip-footer{text-align:center;font-size:9px;color:#444;border-top:1px solid #000;margin:4px 12px 8px;padding-top:5px}
@media print{.salary-slip-footer{font-size:9px;color:#000}}

/* Narrower tiles for the security-deposit passbook summary (8 tiles) - same font size */
.sd-summary-strip{grid-template-columns:repeat(auto-fit,minmax(110px,max-content));gap:8px}

/* ===== Exit Register interactive table ===== */
.exit-register-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.exit-export-btn{white-space:nowrap}
.exit-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.exit-toolbar__search{flex:1 1 240px;min-width:180px}
.exit-toolbar .form-select{width:auto;flex:0 1 auto}
.exit-toolbar__select--narrow{min-width:110px}
.exit-toolbar .form-control,.exit-toolbar .form-select{font-size:.875rem;padding-top:.3rem;padding-bottom:.3rem}

.exit-register-table{width:100%}
.exit-register-table thead th{border-bottom:2px solid #d7dee2;font-size:.8rem;text-transform:uppercase;letter-spacing:.02em;color:#5a6a72}
.exit-register-table th.exit-sort{cursor:pointer;user-select:none;white-space:nowrap}
.exit-register-table th.exit-sort:hover{background:rgba(20,90,95,.06)}
.exit-register-table th.exit-sort .exit-sort-ind{font-size:.7em;color:#888;margin-left:2px}
.exit-register-table tbody tr.exit-row--alt{background:#f6f8f9}
.exit-register-table tbody tr.exit-row:hover{background:#eef3f4}
.exit-register-table td{vertical-align:middle}
.exit-cell-nowrap{white-space:nowrap}

.exit-badge{display:inline-block;padding:.28em .6em;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.2;border:1px solid transparent}
.exit-badge--danger{background:#fdecec;color:#a12121;border-color:#f5c6c6}
.exit-badge--success{background:#e7f6ec;color:#1d7a3e;border-color:#bfe6cd}
.exit-badge--warning{background:#fff6e0;color:#8a6100;border-color:#f3dca0}
.exit-badge--info{background:#e9f1f6;color:#1d5e7a;border-color:#bcd7e6}
.exit-badge--muted{background:#eef1f3;color:#566069;border-color:#d7dee2}
.exit-badge--dark{background:#e5e8ea;color:#2f3a40;border-color:#cdd4d8}

.exit-register-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}
.exit-register-foot .pagination{flex-wrap:wrap}

@media (max-width:575px){
  .exit-toolbar__search,.exit-toolbar .form-select{flex:1 1 100%;width:100%}
}

.detail-list{margin:0}
.detail-list>div{display:flex;flex-wrap:wrap;gap:4px 16px;padding:8px 0;border-bottom:1px solid var(--line)}
.detail-list>div:last-child{border-bottom:none}
.detail-list dt{flex:0 0 220px;max-width:100%;margin:0;font-weight:600;color:var(--ink)}
.detail-list dd{flex:1 1 260px;min-width:0;margin:0;color:var(--ink)}
@media (max-width:575px){
  .detail-list dt{flex:0 0 100%}
  .detail-list dd{flex:0 0 100%}
}

/* Left sidebar navigation (replaces the old horizontal dropdown navbar). */
.app-shell{display:flex;align-items:flex-start}
.app-shell>.app-main{flex:1;min-width:0}
.app-sidebar{width:230px;flex:0 0 auto;background:#fff;border-right:1px solid var(--line);box-shadow:1px 0 4px rgba(10,30,35,.05);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;z-index:1040;transition:width .18s ease}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:14px 46px 14px 16px;border-bottom:1px solid var(--line);text-decoration:none;flex-shrink:0;position:relative}
.sidebar-brand .school-brand-logo{width:36px;height:42px}
.sidebar-brand .school-name-image{height:30px;max-width:140px}
.sidebar-nav{flex:1;overflow-y:auto;padding:10px 10px 6px}
.sidebar-link{display:block;padding:9px 12px;border-radius:6px;color:#184b52;font-weight:600;font-size:14px;text-decoration:none}
.sidebar-link:hover,.sidebar-link:focus{background:#f7f3eb;color:#8b601f;text-decoration:none}
.sidebar-link.active{background:#e8f1f2;color:#0f484c}
.sidebar-group{margin:2px 0}
.sidebar-group-toggle{display:flex;align-items:center;width:100%;text-align:left;padding:9px 12px;border:0;background:none;border-radius:6px;color:#184b52;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.sidebar-group-toggle:hover,.sidebar-group-toggle:focus{background:#f7f3eb;color:#8b601f}
.sidebar-group-toggle.active{color:#0f484c}
.sidebar-group-toggle::after{content:"";margin-left:auto;flex-shrink:0;border-top:.32em solid;border-right:.32em solid transparent;border-left:.32em solid transparent;transition:transform .15s}
.sidebar-group-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}
.sidebar-group-items{padding-left:10px;overflow:hidden;max-height:600px;transition:max-height .15s ease}
.sidebar-group-items.is-collapsed{max-height:0}
.sidebar-group-items .sidebar-link{font-weight:600;font-size:13.5px;padding:7px 12px}
.sidebar-group-personal{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.sidebar-group-personal .sidebar-group-toggle{color:var(--accent)}
.sidebar-logout{flex-shrink:0;padding:10px;border-top:1px solid var(--line)}
.sidebar-logout-btn{width:100%;background:none;border:0;text-align:left;color:#a3312f;cursor:pointer}
.sidebar-toggle{display:none;position:fixed;top:38px;left:12px;z-index:1055;background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 10px;box-shadow:0 2px 6px rgba(10,30,35,.12)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,30,35,.4);z-index:1035}

/* Desktop collapse: reclaim screen width for wide tables/grids on demand.
   Separate from the mobile off-canvas drawer above -- state persists via
   localStorage (see app.js) and a body class set by an inline script early
   in <body> to avoid a flash of the expanded sidebar on page load. */
.sidebar-collapse-btn{position:absolute;top:10px;right:6px;width:32px;height:32px;border:1px solid var(--primary);border-radius:7px;background:#e3edee;color:var(--primary);font-size:18px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(10,30,35,.12)}
.sidebar-collapse-btn:hover{background:var(--primary);color:#fff}
/* Second copy of the same collapse toggle, repeated at the bottom of the
   sidebar (above Logout) so it's reachable without scrolling back up to the
   brand header -- same [data-sidebar-collapse] handler in app.js, delegated
   click listener, so no JS change needed. Overrides the absolute positioning
   above (which is anchored to .sidebar-brand) back to a normal flex child. */
.sidebar-collapse-btn-bottom{position:static;top:auto;right:auto;align-self:center;flex-shrink:0;margin:6px 0}
.sidebar-expand-tab{display:none;position:fixed;top:88px;left:0;width:26px;height:46px;border:1px solid var(--primary);border-left:0;border-radius:0 8px 8px 0;background:#e3edee;color:var(--primary);font-size:16px;font-weight:700;cursor:pointer;z-index:1045;box-shadow:2px 2px 8px rgba(10,30,35,.16)}
.sidebar-expand-tab:hover{background:var(--primary);color:#fff}
body.sidebar-collapsed .app-sidebar{width:0}
body.sidebar-collapsed .sidebar-expand-tab{display:block}
@media(max-width:768px){
  .sidebar-toggle{display:inline-flex}
  .app-shell{display:block}
  .app-sidebar{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform .2s ease;box-shadow:2px 0 12px rgba(10,30,35,.18)}
  .app-sidebar.is-open{transform:translateX(0)}
  .sidebar-backdrop.is-open{display:block}
  .app-shell>.app-main{padding-top:52px}
  .sidebar-collapse-btn,.sidebar-expand-tab{display:none!important}
  body.sidebar-collapsed .app-sidebar{width:230px}
}
@media print{
  .app-sidebar,.sidebar-toggle,.sidebar-backdrop,.sidebar-collapse-btn,.sidebar-expand-tab{display:none!important}
  .app-shell{display:block}
}

/* Idle-timeout warning banner (see app.js) -- same warning-alert palette
   used elsewhere (.alert-warning), just fixed-position so it stays visible
   regardless of scroll position. */
.idle-warning-banner{position:fixed;right:20px;bottom:20px;z-index:2000;background:#fff3cd;color:#664d03;border:1px solid #ffecb5;border-radius:8px;padding:12px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;box-shadow:0 8px 24px rgba(18,42,49,.18);max-width:360px;font-size:14px}
@media(max-width:575px){
  .idle-warning-banner{left:12px;right:12px;max-width:none}
}

/* Employee Profile page: Personnel Details section puts the photo on the
   right of the details table (per the requested layout), and the other
   sections use .profile-grid for compact label/value rows instead of a
   generic data-grid table. */
.profile-personnel-layout{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap-reverse}
.profile-personnel-layout .profile-grid{flex:1 1 320px;margin-bottom:0}
.profile-photo-box{flex:0 0 auto;width:140px;text-align:center}
.profile-photo-box img{width:140px;height:180px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:#f8fafb}
.profile-photo-box .photo-placeholder{width:140px;height:180px}
.profile-grid th{width:38%;color:var(--muted);font-weight:600;font-size:13px;border-top:none;white-space:nowrap}
.profile-grid td{border-top:none}
.profile-grid tr{border-bottom:1px solid var(--line)}
@media(max-width:575px){
  .profile-personnel-layout{flex-direction:column-reverse}
  .profile-photo-box{width:100%}
  .profile-photo-box img,.profile-photo-box .photo-placeholder{width:140px;margin:0 auto}
}