:root{--brand:#0f4c81;--brand-2:#1a73c8;--side:#0b2540;--bg:#f3f5f9}
body{background:var(--bg);font-size:.925rem;color:#1f2937}
.app{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--side);color:#cbd5e1;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:1040}
.sidebar .brand{padding:16px 18px;font-size:1.25rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .brand small{font-size:.7rem;background:#16a34a;padding:2px 6px;border-radius:4px;font-weight:600}
.sidebar nav{padding:8px 0 24px}
.sidebar .nav-sec{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:14px 18px 4px}
.sidebar a{display:flex;gap:10px;align-items:center;color:#cbd5e1;text-decoration:none;padding:7px 18px;border-left:3px solid transparent}
.sidebar a:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar a.active{background:rgba(26,115,200,.25);color:#fff;border-left-color:#38bdf8}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:56px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:1030}
.content{padding:22px;flex:1}
.foot{padding:10px 22px;color:#94a3b8;font-size:.78rem}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:1.4rem;font-weight:700;margin:0}
.card{border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.03);margin-bottom:18px}
.card-header{background:#fff;border-bottom:1px solid #eef0f3}
.table{font-size:.88rem}.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:#64748b;background:#f8fafc;white-space:nowrap}
.stat .card-body{position:relative}.stat-icon{position:absolute;right:16px;top:14px;font-size:1.8rem;opacity:.8}
.stat-label{font-size:.78rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.stat-value{font-size:1.45rem;font-weight:700}
.btn-primary{background:var(--brand);border-color:var(--brand)}.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.text-money{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#dbeafe;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#1e40af}
.avatar-lg{width:96px;height:96px;font-size:2rem}
dl.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 12px;margin:0}dl.kv dt{color:#64748b;font-weight:500}dl.kv dd{margin:0}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal .d{background:#fff;border:1px solid #e5e7eb;border-radius:6px;min-height:84px;padding:4px;font-size:.75rem}
.cal .d.off{background:#f8fafc;color:#94a3b8}.cal .d .n{font-weight:700}.cal .ev{background:#dbeafe;border-radius:4px;padding:1px 4px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ev.hol{background:#fee2e2}
@media (max-width:991px){.sidebar{position:fixed;left:-250px;transition:left .2s}.sidebar.open{left:0}.content{padding:14px}}
@media print{.sidebar,.topbar,.foot,.no-print,.page-head .btn{display:none!important}.content{padding:0}body{background:#fff}.card{border:none;box-shadow:none}}
/* payslip */
.payslip{max-width:800px;margin:auto;background:#fff;padding:26px;border:1px solid #e5e7eb;border-radius:8px}
.payslip h2{font-size:1.2rem;margin:0}.payslip table{width:100%}.payslip td{padding:3px 6px}.payslip .sec{background:#f1f5f9;font-weight:700;text-transform:uppercase;font-size:.75rem}
.payslip .tot{border-top:2px solid #0f172a;font-weight:700}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0b2540,#0f4c81 60%,#1a73c8)}
.login-card{width:100%;max-width:420px;border-radius:14px}
/* ESS */
.ess-nav a{color:#334155;text-decoration:none;padding:10px 12px;border-radius:8px;display:flex;gap:8px;align-items:center}
.ess-nav a.active,.ess-nav a:hover{background:#e0ecfb;color:#0f4c81}
.clock-btn{width:180px;height:180px;border-radius:50%;font-size:1.3rem;font-weight:700}