:root{--font-sans: "Outfit", sans-serif;--primary: #2563eb;--primary-hover: #1d4ed8;--primary-light: #eff6ff;--secondary: #475569;--bg-body: #f1f5f9;--bg-card: #ffffff;--bg-sidebar: #1e293b;--text-main: #0f172a;--text-muted: #64748b;--text-on-dark: #f8fafc;--border: #e2e8f0;--border-focus: #3b82f6;--success: #10b981;--success-bg: #ecfdf5;--warning: #f59e0b;--warning-bg: #fffbeb;--danger: #ef4444;--danger-bg: #fef2f2;--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius: .75rem;--header-height: 3.5rem}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-body);color:var(--text-main);min-height:100vh;-webkit-font-smoothing:antialiased}.layout{display:flex;min-height:100vh}.sidebar{width:280px;background-color:var(--bg-sidebar);color:var(--text-on-dark);flex-shrink:0;display:flex;flex-direction:column;transition:width .3s cubic-bezier(.4,0,.2,1);position:relative}.sidebar-collapsed .sidebar{width:80px}.main-content{flex:1;display:flex;flex-direction:column;overflow-x:hidden}.top-bar{height:var(--header-height);background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1.5rem;justify-content:space-between;position:sticky;top:0;z-index:40}.page-content{padding:2rem;flex:1;overflow-y:auto}.card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);padding:1.5rem;margin-bottom:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:.5rem;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s;border:1px solid transparent;font-family:inherit}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 4px #2563eb33}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{background:#fff;border:1px solid var(--border);color:var(--text-main)}.btn-secondary:hover{background:var(--bg-body);border-color:#cbd5e1}.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid transparent}.btn-danger:hover{background:#fee2e2}.input-group{margin-bottom:1rem}label{display:block;font-size:.875rem;font-weight:500;color:var(--text-muted);margin-bottom:.5rem}input,select,textarea{width:100%;padding:.75rem 1rem;border-radius:.5rem;border:1px solid var(--border);font-family:inherit;font-size:.95rem;outline:none;background:var(--bg-card);transition:all .2s;height:45px;display:block}input[type=date]{line-height:1}textarea{height:auto;min-height:100px}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.95rem}th{text-align:left;padding:1rem;background-color:var(--bg-body);color:var(--text-muted);font-weight:600;border-bottom:1px solid var(--border)}td{padding:1rem;border-bottom:1px solid var(--border);vertical-align:middle}tr:last-child td{border-bottom:none}tr:hover td{background-color:#f8fafc}.flex-between{display:flex;justify-content:space-between;align-items:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.text-sm{font-size:.875rem}.text-muted{color:var(--text-muted)}.font-bold{font-weight:700}.badge{padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;display:inline-block}.badge-active{background-color:var(--success-bg);color:var(--success)}.badge-inactive{background-color:var(--bg-body);color:var(--text-muted)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.modal-content{background:#fff;border-radius:var(--radius);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}.modal-header{padding:1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-body{padding:1.5rem}.modal-footer{padding:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease-out forwards}.mobile-menu-btn,.mobile-overlay{display:none}@media(max-width:768px){.sidebar{position:fixed;height:100vh;z-index:100;left:0;top:0}.layout:not(.sidebar-collapsed) .sidebar{transform:translate(0)}.layout.sidebar-collapsed .sidebar{transform:translate(-100%)}.top-bar{padding:0 1rem}.page-content{padding:1rem}.top-bar h2{display:none}.hide-mobile{display:none!important}.show-mobile{display:block!important}.show-mobile-flex{display:flex!important}.mobile-menu-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:.5rem;margin-right:.5rem;cursor:pointer;color:var(--text-main)}.mobile-overlay{position:fixed;inset:0;background:#00000080;z-index:90;display:block;opacity:0;pointer-events:none;transition:opacity .3s}.layout:not(.sidebar-collapsed) .mobile-overlay{opacity:1;pointer-events:auto}}.search-container{max-width:280px;width:100%;position:relative;transition:all .2s}@media(max-width:640px){.search-container{max-width:160px}}.stat-card{position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;justify-content:space-between;min-height:140px}.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.stat-card h3{font-size:.875rem;font-weight:500;color:var(--text-muted);margin-bottom:.5rem}.stat-card .value{font-size:1.875rem;font-weight:700;color:var(--text-main);margin-bottom:.25rem}.stat-card .trend{font-size:.75rem;display:flex;align-items:center;gap:.25rem}.stat-card .icon-bg{position:absolute;right:-10px;bottom:-10px;opacity:.05;transform:rotate(-15deg);pointer-events:none}.chart-card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);padding:1.5rem!important;box-shadow:var(--shadow-sm)}.chart-card h4{font-size:1rem;font-weight:600;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem;color:var(--text-main)}.payslip-modal{max-width:800px}.payslip-container{padding:1.5rem;background:#fff;width:100%}@media print{body *{visibility:hidden}#printable-payslip,#printable-payslip *{visibility:visible}@page{size:A5 portrait;margin:0}body{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff}#printable-payslip{position:absolute;left:0;top:0;width:148mm;min-height:209mm;padding:10mm!important;background:#fff;box-sizing:border-box;margin:0}#printable-payslip>div:first-child{margin-bottom:10px!important;padding-bottom:5px!important}#printable-payslip h2{font-size:12pt!important}#printable-payslip h3{font-size:10pt!important}#printable-payslip div[style*="display: grid"]{gap:10px!important;margin-bottom:10px!important}#printable-payslip table{font-size:9px!important}#printable-payslip td{padding:2px 0!important}#printable-payslip>div:last-child{margin-top:20px!important}.modal-overlay,.no-print{display:none!important}}