:root{--navy:#1c1c80;--gold:#d4af37;--ink:#202035;--soft:#f5f6fb;--sidebar-width:260px}.bg-navy{background:linear-gradient(135deg,#11115d,var(--navy))}.text-gold{color:var(--gold)}body{background:var(--soft);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}.app-shell{min-height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);min-height:100vh;display:flex;flex:0 0 var(--sidebar-width);flex-direction:column;background:linear-gradient(170deg,#11115d,#28289a);color:#fff;transition:transform .28s ease,margin-left .28s ease,opacity .2s ease;will-change:transform,margin-left}.brand{font-weight:800;letter-spacing:.3px}.sidebar .nav-link{color:#e9e9ff;border-radius:10px;margin:.25rem .65rem;padding:.7rem .85rem}.sidebar .nav-link:hover,.sidebar .nav-link.active{background:#ffffff20;color:#fff}.main{min-width:0;flex:1 1 0;width:0}.content,.table-responsive{min-width:0;max-width:100%}.topbar{background:#fff;border-bottom:1px solid #e8e8ef}.card{border:0;border-radius:16px;box-shadow:0 4px 18px #18214b0c}.stat-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#1c1c80,#5454c7);color:#fff}.btn-gold{background:linear-gradient(135deg,#d4af37,#b98d10);border:0;color:#191500}.btn-gold:hover{color:#191500;filter:brightness(1.05)}.login-page{min-height:100vh;background:radial-gradient(circle at 20% 15%,#3d3db0 0,transparent 30%),linear-gradient(135deg,#101056,#1c1c80)}.login-card{width:min(92vw,430px);border-radius:24px}.login-logo{width:68px;height:68px;border-radius:18px;background:linear-gradient(145deg,#d4af37,#f4db83);display:grid;place-items:center;color:var(--navy);font-weight:900;font-size:1.2rem}.table-responsive{border-radius:12px}.footer{font-size:.8rem;color:#777}.app-shell.sidebar-hidden .sidebar{margin-left:calc(var(--sidebar-width) * -1);opacity:0;pointer-events:none}.icon-action{width:32px;height:32px;padding:0;line-height:1}@media(max-width:767.98px){.app-shell{overflow:visible}.sidebar{position:fixed;inset:0 auto 0 0;z-index:1040;margin-left:0;transform:translateX(-100%);opacity:1}.sidebar.show{transform:translateX(0);box-shadow:8px 0 24px #10105655}.app-shell.sidebar-hidden .sidebar{margin-left:0;transform:translateX(-100%);opacity:1;pointer-events:auto}.main{width:100%}.content{padding:1rem!important}.topbar{position:sticky;top:0;z-index:1030}.mobile-overlay{position:fixed;inset:0;z-index:1035;background:#0006;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}.mobile-overlay.show{opacity:1;visibility:visible;transition:opacity .28s ease}}@media(min-width:768px){.mobile-toggle,.mobile-overlay{display:none!important}}@media(prefers-reduced-motion:reduce){.sidebar,.mobile-overlay{transition:none}}
@media(min-width:768px){.app-shell{overflow:visible}.sidebar{position:sticky;top:0;height:100vh;align-self:flex-start}}
.payroll-actions .btn{margin:.15rem}#payrollDetailModal .modal-content{height:100dvh;min-height:0;overflow:hidden}#payrollDetailModal .modal-body{height:0;min-height:0;overflow:hidden}.payroll-matrix-wrap{display:block;flex:1 1 0;min-width:0;min-height:0;max-width:100%;overflow-x:auto!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}.payroll-matrix{width:max-content;min-width:100%;font-size:.85rem}.payroll-matrix th,.payroll-matrix td{min-width:170px;padding:.65rem;background:#fff;border-right:1px solid #ececf3}.payroll-matrix thead th{position:sticky;top:0;z-index:4;background:#f5f6fb;vertical-align:bottom}.payroll-matrix .sticky-number{position:sticky;left:0;z-index:3;min-width:58px;width:58px;text-align:center}.payroll-matrix .sticky-name{position:sticky;left:58px;z-index:3;min-width:220px;width:220px;box-shadow:4px 0 8px #2020350d}.payroll-matrix thead .sticky-number,.payroll-matrix thead .sticky-name{z-index:6;background:#f5f6fb}.component-heading{display:block;max-width:180px;white-space:normal}.pay-component-cell{min-height:52px}.pay-component-cell .amount-value{text-decoration:none;font-size:.82rem}.pay-component-cell .amount-editor{width:145px}.pay-component-cell .form-check-input{cursor:pointer}.save-indicator{transition:color .2s}@media(max-width:767.98px){.payroll-period-table{min-width:1050px}.payroll-matrix .sticky-name{min-width:180px;width:180px}.payroll-actions .btn{font-size:.75rem}}
.employee-data-table th:nth-child(2),.employee-data-table td:nth-child(2){position:sticky;left:0;z-index:2;min-width:220px;background:#fff;box-shadow:5px 0 10px #20203512}.employee-data-table thead th:nth-child(2){z-index:5;background:#f5f6fb}
.employee-data-table{min-width:5000px;table-layout:fixed}.employee-data-table th,.employee-data-table td{width:170px;min-width:170px;vertical-align:top}.employee-data-table thead th{white-space:normal}.employee-data-table .employee-header-filter{display:block;width:100%;min-width:145px}.employee-data-table th:nth-child(1),.employee-data-table td:nth-child(1){width:110px;min-width:110px}.employee-data-table th:nth-child(2),.employee-data-table td:nth-child(2){width:260px;min-width:260px}.employee-data-table th:nth-child(6),.employee-data-table td:nth-child(6){width:250px;min-width:250px}.employee-data-table th:nth-child(20),.employee-data-table td:nth-child(20){width:300px;min-width:300px}.employee-data-table th:nth-child(25),.employee-data-table td:nth-child(25){width:280px;min-width:280px}.employee-data-table th:last-child,.employee-data-table td:last-child{width:150px;min-width:150px}
.login-logo{width:132px;height:132px;object-fit:contain;border-radius:0;background:transparent;filter:drop-shadow(0 8px 14px #11115d20)}
.sidebar__brand-row{display:flex;align-items:center;gap:.75rem}.sidebar__logo-wrap{width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;padding:.3rem;border-radius:14px;background:#ffffffed;box-shadow:0 6px 16px #05052d35}.sidebar__logo{display:block;width:100%;height:100%;object-fit:contain}.sidebar__brand .brand{font-size:.78rem;line-height:1.25}.sidebar__brand small{font-size:.72rem}.min-w-0{min-width:0}
.sidebar__navigation{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffffff70 #ffffff12}.sidebar__navigation::-webkit-scrollbar{width:7px}.sidebar__navigation::-webkit-scrollbar-track{background:#ffffff0d;border-radius:999px}.sidebar__navigation::-webkit-scrollbar-thumb{background:#ffffff55;border-radius:999px}.sidebar__navigation::-webkit-scrollbar-thumb:hover{background:#ffffff80}.sidebar__dashboard-link{margin-bottom:.5rem!important}.sidebar__menu-group{margin:.4rem 0}.sidebar__menu-label{display:flex;align-items:center;gap:.5rem;margin:0 .9rem .25rem;padding:.35rem .4rem;color:#d9c36f;font-size:.69rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.sidebar__menu-label i{font-size:.85rem}.sidebar__submenu{position:relative;margin:0 .65rem 0 1rem;padding-left:.55rem;border-left:1px solid #ffffff2b}.sidebar__submenu .nav-link{margin:.12rem 0;padding:.58rem .7rem;font-size:.9rem}.sidebar__submenu .nav-link i{display:inline-block;width:1.1rem;text-align:center}.sidebar__submenu .nav-link.active{box-shadow:inset 3px 0 0 var(--gold)}.sidebar__user{flex:0 0 auto}.sidebar__logout{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;padding:.3rem .55rem;border:1px solid #ffffff35;color:#fff;background:#ffffff12;font-size:.72rem}.sidebar__logout:hover,.sidebar__logout:focus{color:#fff;background:#ffffff25;border-color:#ffffff65}
.dashboard-welcome{display:grid;grid-template-columns:minmax(0,1fr) 145px;align-items:center;gap:1rem;overflow:hidden}.dashboard-welcome__content{position:relative;z-index:1}.dashboard-logo-wrap{width:145px;height:145px;display:grid;place-items:center;padding:.65rem;border-radius:24px;background:#ffffffee;box-shadow:0 14px 30px #08083d55}.dashboard-logo{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:1199.98px) and (min-width:992px){.dashboard-welcome{grid-template-columns:1fr}.dashboard-logo-wrap{width:110px;height:110px;position:absolute;right:1rem;bottom:1rem;opacity:.2}.dashboard-welcome__content{padding-right:1rem}}
@media(max-width:575.98px){.login-logo{width:112px;height:112px}.dashboard-welcome{grid-template-columns:1fr}.dashboard-logo-wrap{width:105px;height:105px;position:absolute;right:1rem;bottom:1rem;opacity:.2}.dashboard-welcome__content{padding-right:1rem}}