:root{--navy:#063b86;--navy2:#052f6d;--blue:#146df5;--blue2:#eaf2ff;--bg:#f5f8fd;--card:#fff;--text:#142033;--muted:#6c7a90;--line:#e5ebf4;--green:#16a36b;--greenbg:#e9f9f2;--orange:#ef8c20;--orangebg:#fff3e6;--red:#df5050;--redbg:#ffeded;--purple:#7557e6;--purplebg:#f0ebff;--shadow:0 10px 28px rgba(18,52,92,.075);--radius:16px}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}svg{display:block}.app-shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 14px 14px;background:linear-gradient(180deg,#08458f 0%,#063a80 50%,#052f69 100%);color:#fff;z-index:50;box-shadow:8px 0 28px rgba(3,36,82,.08);overflow:auto}.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 22px}.brandmark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--blue);font-size:13px;font-weight:900;letter-spacing:-.04em;box-shadow:0 7px 16px rgba(0,0,0,.12)}.brandcopy{min-width:0}.brandcopy strong{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brandcopy small{display:block;margin-top:3px;color:#c5d8f3;font-size:9px;font-weight:800;letter-spacing:.12em}.nav-list{display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#dbe9fb;font-size:13.5px;font-weight:700;transition:.16s}.nav-item svg{width:18px;height:18px;fill:currentColor;flex:none}.nav-item:hover{background:rgba(255,255,255,.09);color:#fff}.nav-item.active{background:linear-gradient(90deg,#1975f7,#1265df);color:#fff;box-shadow:0 8px 18px rgba(0,44,113,.24)}.logout-nav{margin-top:8px;border-top:1px solid rgba(255,255,255,.11);border-radius:0;padding-top:15px}.sidebar-user{margin-top:auto;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);border-radius:13px;padding:10px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px;align-items:center}.sidebar-user-copy{min-width:0}.sidebar-user strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user small{display:block;margin-top:2px;color:#c4d9f7;font-size:10px}.main{min-width:0;display:flex;flex-direction:column}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 26px;gap:18px;position:sticky;top:0;z-index:30}.menu-btn{display:none;border:0;background:transparent;font-size:21px}.top-search{width:min(360px,40vw);height:40px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#fbfcff}.top-search span{color:#8aa0bb}.top-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:13px}.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#fff;display:grid;place-items:center;position:relative;color:#52677f;font-size:19px}.icon-btn i{position:absolute;right:-5px;top:-6px;background:#ef4444;color:#fff;border:2px solid #fff;border-radius:999px;font-size:9px;font-style:normal;font-weight:800;min-width:18px;height:18px;display:grid;place-items:center;padding:0 3px}.top-profile{display:flex;align-items:center;gap:9px}.user-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e7f1ff,#fff);border:1px solid #dce8f7;color:#135bb9;font-size:11px;font-weight:800}.user-avatar.small{width:36px;height:36px}.top-profile-copy strong{display:block;font-size:12px}.top-profile-copy small{display:block;margin-top:2px;color:var(--muted);font-size:10px}.content{padding:30px;max-width:1500px;width:100%;margin:0 auto}.app-footer{padding:8px 28px 22px;display:flex;justify-content:space-between;color:#8997aa;font-size:11px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}.page-head h1{margin:4px 0 4px;font-size:27px;letter-spacing:-.03em}.page-head p{margin:0;color:var(--muted);font-size:13px}.eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:900;color:#1266df}.page-actions{display:flex;gap:9px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.stat-card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:19px;display:flex;gap:13px;align-items:center;box-shadow:var(--shadow)}.stat-icon{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:800;flex:none}.stat-icon.blue{background:var(--blue2);color:var(--blue)}.stat-icon.green{background:var(--greenbg);color:var(--green)}.stat-icon.orange{background:var(--orangebg);color:var(--orange)}.stat-icon.purple{background:var(--purplebg);color:var(--purple)}.stat-content{min-width:0}.stat-label{color:#64748a;font-size:11px;font-weight:700}.stat-value{font-size:24px;font-weight:850;letter-spacing:-.035em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-note{font-size:10px;color:#8b98aa;margin-top:2px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:16px}.grid-2.equal{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title h2{font-size:16px;margin:0}.section-title p{font-size:11px;color:var(--muted);margin:4px 0 0}.table-toolbar{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:12px}.table-search{flex:1;max-width:340px}.table-search input{width:100%;height:38px;border:1px solid var(--line);border-radius:9px;padding:0 11px;background:#fbfcff;font-size:12px;outline:0}.table-search input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:#98bdf6;box-shadow:0 0 0 3px rgba(20,109,245,.08)}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;min-width:680px}.table th{padding:10px 10px;border-bottom:1px solid var(--line);font-size:10.5px;color:#758298;text-align:left;background:#fbfcff;font-weight:800;white-space:nowrap}.table td{padding:11px 10px;border-bottom:1px solid #edf1f6;font-size:12px;vertical-align:middle}.table tbody tr:last-child td{border-bottom:0}.table tbody tr:hover td{background:#fbfdff}.employee-cell{display:flex;align-items:center;gap:9px}.mini-avatar{width:31px;height:31px;border-radius:50%;background:#edf4ff;color:#1464d4;display:grid;place-items:center;font-size:9px;font-weight:800;flex:none}.employee-cell strong{display:block;font-size:12px}.employee-cell small{display:block;margin-top:2px;font-size:10px;color:var(--muted)}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;white-space:nowrap}.badge.green{background:var(--greenbg);color:#16845d}.badge.yellow{background:var(--orangebg);color:#c8781e}.badge.red{background:var(--redbg);color:#c94646}.badge.blue{background:var(--blue2);color:#1a65c8}.badge.purple{background:var(--purplebg);color:#6647cc}.badge.gray{background:#f0f3f7;color:#66758a}.btn{border:0;border-radius:9px;padding:9px 13px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.16s;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn.primary,.btn:not(.secondary):not(.danger):not(.success):not(.ghost){background:linear-gradient(135deg,#1671f5,#0f5fd8);color:#fff;box-shadow:0 7px 14px rgba(21,105,239,.18)}.btn.secondary{background:#fff;border:1px solid var(--line);color:#41536b}.btn.ghost{background:#f5f8fd;color:#51647c}.btn.success{background:#e9f9f2;color:#16855d}.btn.danger{background:#ffeded;color:#c94343}.btn.small{padding:6px 9px;font-size:8.5px}.btn.wide{width:100%;padding:11px}.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.field{min-width:0}.field label{display:block;font-size:11px;font-weight:800;color:#43546a;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid #dfe6ef;border-radius:9px;background:#fff;color:var(--text);padding:9px 10px;font-size:12px;outline:0;min-height:40px}.field textarea{min-height:82px;resize:vertical}.field small{display:block;color:#8996a7;font-size:10px;margin-top:4px}.form-section{padding:2px 0 16px;margin-bottom:16px;border-bottom:1px solid var(--line)}.form-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.form-section-head{margin-bottom:13px}.form-section-head h3{margin:0;font-size:15px}.form-section-head p{margin:3px 0 0;color:var(--muted);font-size:11px}.divider{height:1px;background:var(--line);margin:18px 0}.alert{border-radius:11px;padding:11px 13px;margin-bottom:14px;display:flex;gap:9px;align-items:flex-start;font-size:12px}.alert>span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:900;flex:none}.alert.success{background:#ebfaf3;color:#196d51;border:1px solid #d6f1e5}.alert.success>span{background:#c7eedc}.alert.error{background:#fff0f0;color:#a43a3a;border:1px solid #f6dada}.alert.error>span{background:#f6d0d0}.alert.info{background:#eef5ff;color:#315f9d;border:1px solid #dceaff}.alert.warning{background:#fff6e8;color:#9a621e;border:1px solid #f6e4c5}.summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.summary-box{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px}.summary-box span{font-size:10px;color:var(--muted);display:block}.summary-box b{display:block;font-size:22px;margin-top:4px}.empty-state{padding:32px 16px;text-align:center;color:#8a98aa;font-size:11px}.empty-icon{width:42px;height:42px;margin:0 auto 8px;border-radius:13px;background:#f3f7fd;color:#4e79b5;display:grid;place-items:center;font-size:18px}.kpi-list{display:flex;flex-direction:column}.kpi-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid #edf1f6}.kpi-item:last-child{border-bottom:0}.kpi-left{display:flex;align-items:center;gap:9px}.kpi-icon{width:32px;height:32px;border-radius:10px;background:#eef5ff;color:#1264d4;display:grid;place-items:center;font-size:13px}.kpi-left strong{display:block;font-size:12px}.kpi-left small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.kpi-number{font-size:15px;font-weight:800}.tabs{display:flex;gap:6px;overflow:auto;padding-bottom:2px;margin-bottom:16px}.tab-btn{border:1px solid var(--line);background:#fff;color:#607086;padding:8px 11px;border-radius:9px;font-size:11px;font-weight:800;white-space:nowrap}.tab-btn.active{background:#eaf2ff;color:#1263cf;border-color:#cddfff}.profile-card{padding:0;overflow:hidden}.profile-cover{height:82px;background:linear-gradient(120deg,#0a4ba2,#1672f5 55%,#62a0ff)}.profile-body{padding:0 20px 19px}.profile-head{display:flex;gap:13px;align-items:flex-end;margin-top:-31px}.profile-head .avatar{width:66px;height:66px;border-radius:18px;background:#fff;border:5px solid #fff;box-shadow:0 4px 16px rgba(21,58,99,.14);display:grid;place-items:center;color:#135dbf;font-size:17px;font-weight:900}.profile-title{padding-bottom:2px;flex:1}.profile-title h2{margin:0;font-size:18px}.profile-title .muted{color:var(--muted);font-size:11px;margin-top:3px}.profile-status{padding-bottom:7px}.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}.detail label{display:block;color:#8a97a9;font-size:10px;margin-bottom:4px}.detail b{font-size:12px;font-weight:750;word-break:break-word}.progress{height:7px;border-radius:999px;background:#edf1f6;overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,#166ff0,#49a2ff);border-radius:999px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal-head{font-size:9px;color:#8a97aa;text-align:center;font-weight:800;padding:4px}.cal-day{min-height:54px;border:1px solid #edf1f6;border-radius:9px;padding:6px;font-size:10px;background:#fff}.cal-day .num{font-weight:800}.cal-day .dot{width:7px;height:7px;border-radius:50%;margin-top:7px}.cal-day.present .dot{background:var(--green)}.cal-day.late .dot{background:var(--orange)}.cal-day.leave .dot{background:var(--purple)}.cal-day.absent .dot{background:var(--red)}.cal-day.off{background:#fafbfc;color:#a5afbd}.check-card{background:linear-gradient(135deg,#0b4ca6,#166df0);color:#fff;border:0}.check-card h2{font-size:16px;margin:0}.check-time{font-size:28px;font-weight:900;margin:8px 0 3px}.check-card p{color:#dce9ff;font-size:10px}.check-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.check-meta div{background:rgba(255,255,255,.1);padding:9px;border-radius:10px}.check-meta span{display:block;font-size:9px;color:#d5e5ff}.check-meta b{display:block;margin-top:3px;font-size:11px}.note{padding:11px 13px;border-radius:10px;background:#f7f9fc;border:1px solid var(--line);font-size:11px;color:#607086;line-height:1.5}.file-field{border:1px dashed #cbd8e8;border-radius:10px;padding:12px;background:#fbfdff}.file-field input{border:0;padding:0;min-height:0}.file-name{font-size:9.5px;color:#8b98aa;margin-top:5px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{padding:12px;border:1px solid var(--line);border-radius:11px}.metric span{font-size:10px;color:var(--muted)}.metric b{display:block;font-size:16px;margin-top:4px}.announcement{padding:13px;border:1px solid var(--line);border-radius:12px;margin-bottom:9px}.announcement h3{font-size:13px;margin:0 0 5px}.announcement p{font-size:11px;color:#5f6f84;line-height:1.55;margin:0}.announcement-meta{display:flex;gap:8px;margin-top:8px;color:#929eae;font-size:9.5px}.setup-page{min-height:100vh;background:radial-gradient(circle at 10% 10%,#e8f1ff,transparent 32%),#f4f7fc;padding:30px}.setup-shell{max-width:820px;margin:0 auto}.setup-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}.setup-logo{width:42px;height:42px;border-radius:12px;background:#1368e6;color:#fff;display:grid;place-items:center;font-weight:900}.setup-brand strong{display:block}.setup-brand span{display:block;font-size:10px;color:var(--muted)}.setup-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}.setup-card h1{font-size:25px;margin:6px 0}.setup-card>p{font-size:12px;color:var(--muted);margin-bottom:20px}.setup-note{text-align:center;color:#8997aa;font-size:10px;margin-top:12px}.login-page{background:#f5f8fd;min-height:100vh}.login-shell{display:grid;grid-template-columns:minmax(420px,1.08fr) minmax(400px,.92fr);min-height:100vh}.login-brand{position:relative;background:linear-gradient(145deg,#063b86,#0d5fc9 65%,#1975ec);color:#fff;padding:42px 50px;overflow:hidden}.login-brand:before,.login-brand:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.05)}.login-brand:before{width:420px;height:420px;right:-180px;top:-110px}.login-brand:after{width:330px;height:330px;left:-120px;bottom:-160px}.login-logo{display:flex;align-items:center;gap:10px;position:relative;z-index:2}.login-logo .brandmark{width:43px;height:43px}.login-logo strong{display:block;font-size:16px}.login-logo small{display:block;color:#cfe0f8;font-size:8px;letter-spacing:.12em;font-weight:800}.login-copy{position:relative;z-index:2;max-width:560px;margin-top:120px}.login-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#bdd9ff;font-weight:800}.login-copy h1{font-size:38px;line-height:1.12;letter-spacing:-.045em;margin:11px 0 14px}.login-copy p{font-size:12px;line-height:1.65;color:#d7e7fb;max-width:500px}.login-points{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}.login-points div{display:flex;align-items:center;gap:6px;font-size:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);padding:8px 10px;border-radius:9px}.login-points b{color:#9df0ca}.login-art{position:absolute;right:45px;bottom:55px;width:260px;height:150px}.art-card{position:absolute;background:#fff;color:#173255;border-radius:13px;padding:12px 15px;box-shadow:0 15px 35px rgba(1,32,78,.25);min-width:118px}.art-card b{font-size:20px;display:block}.art-card span{font-size:8px;color:#77869a}.art-card.a{left:0;bottom:0}.art-card.b{right:0;bottom:32px}.art-card.c{left:60px;top:0}.login-form-wrap{display:grid;place-items:center;padding:36px}.auth-card{width:min(390px,100%)}.auth-card h2{font-size:25px;margin:7px 0 4px}.auth-card>p{font-size:12px;color:var(--muted);margin:0 0 22px}.auth-card .field{margin-bottom:13px}.login-foot{text-align:center;font-size:9.5px;color:#9aa6b5;margin-top:14px}.mobile-login-brand{display:none}.mobile-overlay{display:none}
@media(max-width:1180px){.cards{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:repeat(3,1fr)}.grid-3{grid-template-columns:1fr 1fr}.form-grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-250px;width:238px;transition:.2s}.menu-open .sidebar{left:0}.mobile-overlay{position:fixed;inset:0;background:rgba(11,26,46,.42);z-index:40}.menu-open .mobile-overlay{display:block}.menu-btn{display:block}.topbar{padding:0 16px}.content{padding:20px 16px}.grid-2,.grid-2.equal{grid-template-columns:1fr}.detail-grid{grid-template-columns:repeat(2,1fr)}.login-shell{grid-template-columns:1fr}.login-brand{display:none}.mobile-login-brand{display:flex;align-items:center;gap:9px;margin-bottom:28px}.login-form-wrap{min-height:100vh;padding:24px}.app-footer{padding:8px 16px 18px}}
@media(max-width:620px){.top-search{display:none}.top-profile-copy{display:none}.cards,.summary-strip,.grid-3,.form-grid,.form-grid.three,.metric-row{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.page-actions{width:100%}.page-actions .btn{flex:1}.detail-grid{grid-template-columns:1fr 1fr}.stat-card{padding:15px}.check-meta{grid-template-columns:1fr}.content{padding:17px 12px}.app-footer{flex-direction:column;gap:4px}.setup-page{padding:16px}.setup-card{padding:20px}.profile-head{align-items:center}.profile-status{padding:0}.profile-title h2{font-size:16px}.table-toolbar{align-items:flex-start;flex-direction:column}.table-search{width:100%;max-width:none}.login-form-wrap{padding:20px}}

/* HRMS v2026.08.30.2 — validation + panel access */
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#e5484d!important;box-shadow:0 0 0 3px rgba(229,72,77,.09)!important;background:#fffafa}
.field.has-error label{color:#c92a2f}
.field-error{display:block!important;color:#c92a2f!important;font-weight:700!important;margin-top:5px!important}
.panel-access-card{overflow:visible}
.panel-access-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:13px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe}
.panel-access-icon{width:42px;height:42px;border-radius:12px;background:#e8f1ff;color:#1769d2;display:grid;place-items:center;font-weight:900;font-size:17px}
.panel-access-info{display:flex;flex-direction:column;gap:3px;min-width:0}.panel-access-info strong{font-size:11px}.panel-access-info small{color:var(--muted);font-size:9px;line-height:1.45}
.panel-access-error{margin-top:5px;padding:7px 9px;border-radius:8px;background:#fff0f0;color:#b42318;font-size:9px;font-weight:650}
.panel-access-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.panel-access-actions form{margin:0}
@media(max-width:780px){.panel-access-row{grid-template-columns:42px 1fr}.panel-access-actions{grid-column:1/-1;justify-content:flex-start}}

/* =========================================================
   EarnPati HRMS Portal — Final Brand Theme 2026.08.30
   Exact official EarnPati logo asset is used; no redraw.
   ========================================================= */
:root{
  --brand-green:#08783f;--brand-green-2:#0b8c4b;--brand-green-dark:#055f32;
  --brand-green-soft:#eaf7f0;--brand-gold:#c58f22;--brand-gold-2:#e1a62c;--brand-gold-soft:#fff7e7;
  --navy:var(--brand-green);--navy2:var(--brand-green-dark);--blue:var(--brand-green-2);--blue2:var(--brand-green-soft);
  --purple:var(--brand-gold);--purplebg:var(--brand-gold-soft);--bg:#f5f8f6;--card:#fff;--text:#14241c;--muted:#718078;
  --line:#e2ebe6;--green:#0a9853;--greenbg:#e9f8f0;--orange:#d99a27;--orangebg:#fff6e6;
  --red:#d84f4f;--redbg:#ffeded;--shadow:0 12px 34px rgba(17,71,44,.075);--radius:17px
}
html,body{background:#f4f8f5}.app-shell{grid-template-columns:252px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#087b43 0%,#08733e 50%,#055d31 100%);box-shadow:10px 0 32px rgba(7,85,45,.10);padding:17px 14px 14px}
.brand{display:block;padding:2px 7px 18px}.brand-logo-wrap{background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.68);border-radius:15px;padding:8px 11px;box-shadow:0 10px 26px rgba(0,0,0,.10)}.brand-logo{display:block;width:100%;height:74px;object-fit:contain}.brandcopy{padding:11px 7px 0}.brandcopy strong{font-size:14px;font-weight:850;letter-spacing:-.01em}.brandcopy small{margin-top:3px;color:#f2d89e;font-size:9px;letter-spacing:.02em;font-weight:750;text-transform:none}
.nav-list{gap:3px}.nav-item{color:#e8f6ee;border:1px solid transparent}.nav-item svg{opacity:.94}.nav-item:hover{background:rgba(255,255,255,.10);color:#fff}.nav-item.active{background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.10));border-color:rgba(255,255,255,.14);box-shadow:inset 3px 0 0 #e2ad42;color:#fff}.logout-nav{margin-top:6px;color:#ffe6b0}
.sidebar-user{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14)}.sidebar-user .user-avatar{background:#fff;color:var(--brand-green)}.sidebar-user-copy small{color:#caead9}
.topbar{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.top-search{background:#fbfdfc;border-color:#dfe9e3}.top-search:focus-within{border-color:#9acdb2;box-shadow:0 0 0 3px rgba(8,120,63,.08)}
.icon-btn{border-color:var(--line);background:#fff}.icon-btn i{background:var(--brand-gold);color:#fff}.user-avatar{background:linear-gradient(135deg,#e8f7ef,#fff3d8);color:var(--brand-green);border-color:#cae5d6}
.content{max-width:1480px}.page-head .eyebrow,.eyebrow{color:var(--brand-green);font-weight:850}.page-head h1{letter-spacing:-.035em}.page-head p{color:var(--muted)}
.btn.primary{background:linear-gradient(135deg,#0b8c4b,#08733e);box-shadow:0 8px 18px rgba(8,120,63,.18)}.btn.primary:hover{background:linear-gradient(135deg,#08783f,#055f32);transform:translateY(-1px)}.btn.secondary{border-color:#cfe3d8;color:#076c39;background:#f8fcfa}.btn.secondary:hover,.btn.ghost:hover{background:#edf8f2;color:#086c3a}.btn.ghost{color:#08733e}
.card,.stat-card,.summary-box,.auth-card{border-color:#e3ebe6;box-shadow:var(--shadow)}.card:hover{border-color:#d6e5dc}.stat-card{background:linear-gradient(180deg,#fff,#fcfefd)}.stat-icon.blue{background:#e7f7ef;color:#08783f}.stat-icon.green{background:#e8f8ef;color:#07924c}.stat-icon.orange{background:#fff4df;color:#c98c1f}.stat-icon.purple{background:#fff4db;color:#b97d13}.stat-note{color:#718078}
.badge.blue{background:#e8f7ef;color:#08733e}.badge.green{background:#e8f8ef;color:#078546}.badge.yellow{background:#fff5df;color:#a66d08}.badge.gray{background:#f1f4f2;color:#65736b}.badge.red{background:#ffeded;color:#bd3d3d}
.table thead th{background:#f7faf8;color:#66766d;border-color:#e5ece8}.table tbody tr:hover{background:#fbfdfc}.mini-avatar{background:linear-gradient(135deg,#e9f8f0,#fff3db);color:#08733e}.employee-cell small{color:#7c8a82}
.summary-strip{gap:12px}.summary-box{background:linear-gradient(180deg,#fff,#fbfdfc)}.summary-box b{color:#123021}.summary-box:first-child{border-top:3px solid var(--brand-green)}.summary-box:nth-child(2){border-top:3px solid #2daa6a}.summary-box:nth-child(3){border-top:3px solid var(--brand-gold)}.summary-box:nth-child(4){border-top:3px solid #d97706}
.kpi-icon{background:#eff8f3;color:#08733e}.kpi-item:hover{background:#f8fcfa}.announcement{background:linear-gradient(135deg,#f7fcf9,#fffaf0);border-color:#e3ece7}.section-title h2{letter-spacing:-.02em}
.field input:focus,.field select:focus,.field textarea:focus,.table-search input:focus{border-color:#7fbe9e!important;box-shadow:0 0 0 3px rgba(8,120,63,.09)!important}.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#d84f4f!important;box-shadow:0 0 0 3px rgba(216,79,79,.08)!important}.field-error{color:#bf3c3c!important;font-weight:650}
.tabs button.active,.tab-btn.active{color:#08733e;border-color:#08733e}.switch input:checked+.slider{background:#08783f}
.app-footer{color:#738077;border-top-color:#e2ebe6}.app-footer strong{color:#08733e}

/* Login — EarnPati premium brand */
.login-page{background:radial-gradient(circle at 7% 14%,rgba(8,120,63,.09),transparent 28%),radial-gradient(circle at 90% 80%,rgba(197,143,34,.10),transparent 27%),#f5f8f6}.login-shell{background:#fff;box-shadow:0 28px 80px rgba(25,70,46,.13);border:1px solid #e1ebe5}.login-brand{background:linear-gradient(145deg,#087b43 0%,#076b39 56%,#075a31 100%);overflow:hidden}.login-brand:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-110px;bottom:-90px;background:radial-gradient(circle,rgba(226,166,44,.28),rgba(226,166,44,0) 67%);pointer-events:none}.login-logo{display:block;position:relative;z-index:1}.login-logo-image{display:block;width:210px;height:96px;object-fit:contain;background:#fff;border-radius:16px;padding:9px 13px;box-shadow:0 12px 28px rgba(0,0,0,.12)}.login-logo-copy{margin-top:13px}.login-logo-copy strong{display:block;color:#fff;font-size:18px}.login-logo-copy small{display:block;color:#f3dca8;margin-top:3px;font-size:11px;font-weight:700}.login-kicker{background:rgba(255,255,255,.11);color:#f3dca8;border:1px solid rgba(255,255,255,.10)}.login-copy h1{color:#fff}.login-copy p{color:#d4ecdf}.login-points div{color:#eef9f2}.login-points b{background:#fff3d7;color:#a97314}.art-card{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.15);color:#fff}.art-card b{color:#f2c766}.login-form-wrap{background:linear-gradient(180deg,#fff,#fbfdfc)}.auth-card{box-shadow:none;border:0}.auth-card h2{letter-spacing:-.035em}.mobile-login-brand img{width:105px;height:48px;object-fit:contain}.mobile-login-brand div{min-width:0}.mobile-login-brand strong{display:block;color:#153224}.mobile-login-brand small{display:block;color:#9c721d;font-size:9px;margin-top:2px}.login-foot{color:#7b897f}.auth-card .btn.primary{min-height:47px}

/* Premium micro-details */
.table-wrap{scrollbar-color:#b8d8c6 transparent}.empty-icon{color:#0a8a49;background:#edf8f2}.alert.success{background:#eaf8f0;border-color:#c5e7d4;color:#086f3b}.alert.info{background:#eff8f3;border-color:#d4eadf;color:#416e56}.alert.error{border-color:#f4caca}.progress-bar>span{background:linear-gradient(90deg,#08783f,#d7a33a)}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{width:266px}.brand-logo{height:70px}.login-logo-image{width:180px;height:82px}}
@media(max-width:620px){.content{padding-left:13px;padding-right:13px}.brand-logo{height:66px}.login-page{background:#f5f8f6}.mobile-login-brand{display:flex;align-items:center;gap:12px}}

/* =========================================================
   EarnPati HRMS Portal — Premium UI V2 (2026.08.30)
   Visual-only polish. Strong selectors intentionally override
   the legacy blue defaults without changing application logic.
   ========================================================= */
:root{
  --ep-green:#08783f;--ep-green-strong:#056534;--ep-green-bright:#0b914e;
  --ep-green-soft:#edf8f2;--ep-gold:#c89224;--ep-gold-soft:#fff6df;
  --ep-ink:#10251a;--ep-muted:#728078;--ep-line:#e2ebe5;--ep-surface:#ffffff;
  --ep-bg:#f6f9f7;--ep-shadow:0 8px 30px rgba(18,72,45,.07);
}
html,body{background:var(--ep-bg)!important}
.app-shell{grid-template-columns:232px minmax(0,1fr)!important}
.sidebar{
  padding:15px 12px 14px!important;
  background:linear-gradient(180deg,#087b43 0%,#06703b 48%,#055d31 100%)!important;
  box-shadow:8px 0 28px rgba(5,78,40,.08)!important;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent
}
.brand{padding:0 5px 13px!important}
.brand-logo-wrap{
  height:62px!important;padding:6px 10px!important;border-radius:13px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:#fff!important;border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:0 7px 20px rgba(1,48,25,.13)!important
}
.brand-logo{width:100%!important;height:49px!important;object-fit:contain!important}
.brandcopy{padding:9px 7px 1px!important}
.brandcopy strong{font-size:13px!important;line-height:1.25!important;font-weight:850!important}
.brandcopy small{font-size:8.5px!important;color:#f2d18a!important;font-weight:800!important;margin-top:3px!important}
.nav-list{gap:2px!important}
.nav-item{min-height:39px!important;padding:8px 10px!important;border-radius:10px!important;font-size:12.5px!important;font-weight:720!important}
.nav-item svg{width:17px!important;height:17px!important}
.nav-item.active{
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.10))!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:inset 3px 0 0 var(--ep-gold)!important
}
.nav-item:hover{background:rgba(255,255,255,.105)!important}
.sidebar-user{padding:9px!important;border-radius:12px!important;background:rgba(255,255,255,.085)!important}
.topbar{height:70px!important;padding:0 28px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 1px 0 rgba(11,71,39,.03)!important}
.top-search{height:41px!important;width:min(390px,42vw)!important;border-radius:11px!important;background:#fbfdfc!important}
.top-profile{padding:4px 7px 4px 4px!important;border-radius:999px!important}
.content{padding:30px 30px 36px!important;max-width:1540px!important}
.page-head{margin-bottom:18px!important;align-items:center!important}
.page-head h1{font-size:28px!important;color:var(--ep-ink)!important;letter-spacing:-.04em!important}
.page-head p{font-size:12.5px!important;color:var(--ep-muted)!important}
.eyebrow,.page-head .eyebrow{color:var(--ep-green)!important;font-size:9.5px!important;letter-spacing:.14em!important}

/* Kill the legacy high-specificity blue default button rule. */
.btn.primary,
.btn:not(.secondary):not(.danger):not(.success):not(.ghost){
  background:linear-gradient(135deg,var(--ep-green-bright),var(--ep-green-strong))!important;
  color:#fff!important;border:1px solid transparent!important;
  box-shadow:0 7px 16px rgba(8,120,63,.17)!important
}
.btn.primary:hover,
.btn:not(.secondary):not(.danger):not(.success):not(.ghost):hover{
  background:linear-gradient(135deg,#087c42,#055c30)!important;
  box-shadow:0 10px 22px rgba(8,120,63,.20)!important
}
.btn.secondary{background:#fff!important;border-color:#cfe2d7!important;color:#086c39!important}
.btn.secondary:hover{background:#edf8f2!important;border-color:#aed3be!important}
.btn.ghost{background:#f3f8f5!important;color:#08723c!important}
.btn.success{background:#e7f7ee!important;color:#087942!important}
.btn.small{font-size:9px!important}

.cards,.summary-strip{gap:13px!important}
.card,.stat-card,.summary-box{
  border:1px solid var(--ep-line)!important;border-radius:15px!important;
  box-shadow:var(--ep-shadow)!important;background:#fff!important
}
.card{padding:19px!important}.stat-card{padding:17px 18px!important}
.stat-value{color:#10251a!important}.stat-label{color:#6c7972!important}
.summary-box{position:relative;overflow:hidden!important}
.summary-box:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#dfe8e3}
.summary-box:first-child:after{background:#139154}.summary-box:nth-child(2):after{background:#30aa69}.summary-box:nth-child(3):after{background:var(--ep-gold)}.summary-box:nth-child(4):after{background:#d67b18}

.table-toolbar{gap:12px!important}.table-search input{height:41px!important;border-radius:10px!important;background:#fff!important}
.table{min-width:700px!important}.table th{padding:11px 10px!important;background:#f7faf8!important;color:#66746c!important;border-bottom:1px solid #dfe9e3!important;font-size:10px!important}
.table td{padding:12px 10px!important;border-bottom:1px solid #edf2ef!important}
.table tbody tr:hover td{background:#fbfdfc!important}
.mini-avatar{background:linear-gradient(145deg,#eef9f3,#fff4dd)!important;color:#08773f!important}
.badge.green{background:#e8f8ef!important;color:#087b43!important}.badge.blue{background:#eaf7f0!important;color:#08723d!important}
.badge.yellow{background:#fff5df!important;color:#9d690b!important}.badge.red{background:#fff0ef!important;color:#b8413d!important}

.field input,.field select,.field textarea{border-color:#dbe6df!important;border-radius:10px!important;background:#fff!important}
.field input:focus,.field select:focus,.field textarea:focus,.table-search input:focus{border-color:#83b99b!important;box-shadow:0 0 0 3px rgba(8,120,63,.08)!important}
.tabs,.tab-btn{scrollbar-width:none}.tab-btn.active{background:#eaf7f0!important;color:#08743d!important;border-color:#bddcca!important}
.profile-cover{background:linear-gradient(120deg,#076b39 0%,#0b8c4b 65%,#d39b29 145%)!important}
.profile-head .avatar{color:#08723c!important}.progress>i{background:linear-gradient(90deg,#08783f,#d2a13b)!important}
.check-card{background:linear-gradient(135deg,#087b43,#055d31)!important}.check-card p,.check-meta span{color:#d9ede2!important}
.kpi-icon{background:#edf8f2!important;color:#08763f!important}.empty-icon{background:#edf8f2!important;color:#08743d!important}
.announcement{background:linear-gradient(135deg,#fbfdfc,#fffaf0)!important}

/* Cleaner footer: app branding is already visible in the sidebar. */
.app-footer{display:none!important}

/* Login V2 */
.login-page{background:radial-gradient(circle at 8% 12%,rgba(8,120,63,.08),transparent 30%),radial-gradient(circle at 91% 82%,rgba(200,146,36,.10),transparent 28%),#f6f9f7!important}
.login-shell{min-height:100vh!important;border:0!important;box-shadow:none!important}
.login-brand{background:linear-gradient(145deg,#087b43 0%,#066a38 58%,#05572e 100%)!important;padding:40px 48px!important}
.login-logo-image{width:180px!important;height:75px!important;padding:6px 10px!important;border-radius:13px!important}
.login-logo-copy{margin-top:10px!important}.login-logo-copy strong{font-size:17px!important}.login-logo-copy small{font-size:10px!important;color:#f1cf88!important}
.login-copy{margin-top:95px!important}.login-copy h1{font-size:39px!important}.login-copy p{font-size:12.5px!important}
.login-form-wrap{background:#fff!important}.auth-card{max-width:410px!important}.auth-card .btn.primary{min-height:46px!important}

@media(max-width:1100px){.app-shell{grid-template-columns:220px minmax(0,1fr)!important}.content{padding:25px 22px 32px!important}.brand-logo-wrap{height:58px!important}.brand-logo{height:45px!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{width:252px!important}.brand-logo-wrap{height:59px!important}.brand-logo{height:46px!important}.topbar{padding:0 16px!important}.content{padding:21px 16px 30px!important}}
@media(max-width:620px){.page-head{align-items:flex-start!important}.page-head h1{font-size:24px!important}.content{padding:17px 12px 28px!important}.login-form-wrap{padding:20px!important}}

/* =========================================================
   EarnPati HRMS Portal — Premium Typography V3 (2026.08.31)
   Typography, spacing and visual hierarchy only. No logic.
   ========================================================= */
:root{
  --ep-font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ep-font-display:"Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,sans-serif;
  --ep-ink-strong:#102419;--ep-ink:#20352a;--ep-muted:#6e7d74;
  --ep-border:#e3ebe6;--ep-border-strong:#d5e2da;--ep-surface-soft:#f8fbf9;
  --ep-premium-shadow:0 8px 26px rgba(21,72,46,.065),0 1px 2px rgba(16,50,31,.035);
}
html{font-size:16px!important}
body{font-family:var(--ep-font-body)!important;font-size:14px!important;line-height:1.55!important;color:var(--ep-ink)!important;letter-spacing:-.006em!important;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:var(--ep-font-body)!important}
h1,h2,h3,h4,h5,h6,.page-head h1,.section-title h2,.stat-value,.summary-box strong,.auth-card h2,.login-copy h1,.brandcopy strong{font-family:var(--ep-font-display)!important;color:var(--ep-ink-strong);font-weight:700!important}

/* Sidebar typography */
.sidebar{letter-spacing:0!important}
.brandcopy strong{font-size:13.5px!important;line-height:1.3!important;letter-spacing:-.02em!important;font-weight:700!important}
.brandcopy small{font-family:var(--ep-font-body)!important;font-size:9.5px!important;line-height:1.35!important;letter-spacing:.035em!important;text-transform:none!important;font-weight:600!important;color:#f0d28d!important}
.nav-item{font-family:var(--ep-font-body)!important;font-size:13.25px!important;line-height:1.25!important;font-weight:600!important;letter-spacing:-.008em!important;padding:10px 11px!important;min-height:42px!important}
.nav-item.active{font-weight:700!important}
.sidebar-user strong{font-family:var(--ep-font-display)!important;font-size:12.25px!important;font-weight:700!important;letter-spacing:-.015em!important}
.sidebar-user small{font-size:10px!important;font-weight:500!important;color:#d8ebdf!important}

/* Top bar */
.topbar{height:72px!important}
.top-search{height:42px!important;border-color:var(--ep-border)!important}
.top-search input{font-size:13.25px!important;font-weight:450!important;color:#2d4236!important}
.top-search input::placeholder{color:#9aa7a0!important}
.top-profile-copy strong{font-family:var(--ep-font-display)!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:-.015em!important}
.top-profile-copy small{font-size:10.5px!important;font-weight:500!important}
.user-avatar{font-family:var(--ep-font-display)!important;background:linear-gradient(145deg,#edf8f2,#fff8e7)!important;border-color:#d8e8de!important;color:#08733d!important;font-weight:700!important}

/* Page titles */
.content{padding-top:31px!important}
.page-head{margin-bottom:22px!important}
.page-head h1{font-size:29px!important;line-height:1.16!important;letter-spacing:-.045em!important;margin:5px 0 6px!important}
.page-head p{font-size:13.25px!important;line-height:1.55!important;color:var(--ep-muted)!important;max-width:720px}
.eyebrow,.page-head .eyebrow{font-family:var(--ep-font-body)!important;font-size:10px!important;line-height:1!important;letter-spacing:.115em!important;font-weight:700!important;color:#0a7c43!important}

/* Cards and dashboard metrics */
.card,.stat-card,.summary-box{border-color:var(--ep-border)!important;box-shadow:var(--ep-premium-shadow)!important;border-radius:18px!important}
.card{padding:21px!important}
.stat-card{padding:19px!important;min-height:92px!important}
.stat-label{font-size:12px!important;line-height:1.35!important;font-weight:600!important;color:#718078!important}
.stat-value{font-size:27px!important;line-height:1.08!important;letter-spacing:-.05em!important;margin-top:5px!important;font-weight:700!important}
.stat-note{font-size:10.75px!important;line-height:1.4!important;margin-top:5px!important;color:#86938c!important}
.section-title{margin-bottom:16px!important}
.section-title h2{font-size:17px!important;line-height:1.3!important;letter-spacing:-.025em!important}
.section-title p{font-size:11.75px!important;line-height:1.5!important;margin-top:4px!important;color:#7b8981!important}
.summary-box .summary-label{font-size:11.5px!important;font-weight:600!important;color:#75837b!important}
.summary-box .summary-value,.summary-box strong{font-family:var(--ep-font-display)!important;font-size:24px!important;letter-spacing:-.04em!important}

/* Premium tables */
.table-toolbar{margin-bottom:14px!important}
.table-search{max-width:370px!important}
.table-search input{height:43px!important;padding:0 13px!important;font-size:13px!important;font-weight:450!important}
.table th{font-family:var(--ep-font-body)!important;font-size:10.75px!important;line-height:1.35!important;letter-spacing:.025em!important;text-transform:none!important;font-weight:700!important;color:#65736b!important;padding:12px 11px!important;background:#f7faf8!important}
.table td{font-size:12.75px!important;line-height:1.45!important;font-weight:450!important;color:#33473b!important;padding:13px 11px!important}
.employee-cell strong{font-family:var(--ep-font-display)!important;font-size:12.75px!important;line-height:1.35!important;font-weight:700!important;color:#1b3024!important;letter-spacing:-.015em!important}
.employee-cell small{font-size:10.5px!important;line-height:1.35!important;color:#7c8982!important;margin-top:3px!important}
.mini-avatar{width:34px!important;height:34px!important;font-family:var(--ep-font-display)!important;font-size:10px!important;font-weight:700!important}
.table tbody tr{transition:background .15s ease}
.table tbody tr:hover td{background:#f9fcfa!important}

/* Buttons */
.btn{min-height:39px!important;border-radius:10px!important;padding:9px 14px!important;font-family:var(--ep-font-display)!important;font-size:12.25px!important;line-height:1.1!important;font-weight:700!important;letter-spacing:-.012em!important;box-shadow:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease!important}
.btn.primary,.btn:not(.secondary):not(.danger):not(.success):not(.ghost){box-shadow:0 6px 16px rgba(8,120,63,.16)!important}
.btn.primary:hover,.btn:not(.secondary):not(.danger):not(.success):not(.ghost):hover{transform:translateY(-1px)!important;box-shadow:0 8px 20px rgba(8,120,63,.20)!important}
.btn.secondary{font-weight:650!important}
.btn.small{min-height:30px!important;padding:6px 10px!important;font-size:10.5px!important;border-radius:8px!important}
.btn.wide{min-height:47px!important;font-size:13px!important}

/* Forms */
.field label{font-family:var(--ep-font-body)!important;font-size:12px!important;line-height:1.35!important;font-weight:650!important;color:#485b50!important;margin-bottom:7px!important}
.field input,.field select,.field textarea{min-height:43px!important;border-color:var(--ep-border-strong)!important;border-radius:10px!important;padding:10px 12px!important;font-size:13px!important;line-height:1.4!important;font-weight:450!important;color:#263b2e!important}
.field input::placeholder,.field textarea::placeholder{color:#a0aaa4!important;font-weight:400!important}
.field small{font-size:10.75px!important;line-height:1.4!important;color:#839087!important;margin-top:5px!important}
.form-section-head h3{font-size:16px!important;letter-spacing:-.025em!important;line-height:1.3!important}
.form-section-head p{font-size:11.75px!important;line-height:1.5!important}

/* Badges and status pills */
.badge{min-height:24px!important;padding:4px 9px!important;font-family:var(--ep-font-body)!important;font-size:10.25px!important;line-height:1!important;font-weight:650!important;letter-spacing:0!important}

/* Tabs, profile, helper text */
.tab-btn{font-family:var(--ep-font-display)!important;font-size:11.75px!important;font-weight:650!important}
.profile-head h2,.profile-card h2{font-family:var(--ep-font-display)!important;letter-spacing:-.035em!important}
.profile-meta,.muted,.helper-text{font-size:12px!important;line-height:1.5!important;color:#77857d!important}
.alert{font-size:12.25px!important;line-height:1.5!important;border-radius:12px!important}

/* Login typography */
.login-logo-copy strong{font-family:var(--ep-font-display)!important;font-size:17.5px!important;font-weight:700!important;letter-spacing:-.025em!important}
.login-logo-copy small{font-family:var(--ep-font-body)!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.015em!important}
.login-kicker{font-family:var(--ep-font-body)!important;font-size:10.5px!important;font-weight:650!important;letter-spacing:.05em!important}
.login-copy h1{font-size:40px!important;line-height:1.12!important;letter-spacing:-.052em!important;font-weight:700!important;max-width:540px}
.login-copy p{font-size:13.5px!important;line-height:1.7!important;max-width:530px}
.login-points div{font-size:12.5px!important;font-weight:500!important}
.auth-card h2{font-size:28px!important;line-height:1.18!important;letter-spacing:-.045em!important;font-weight:700!important}
.auth-card>p{font-size:12.75px!important;line-height:1.6!important;color:#7a8780!important}
.auth-card .field label{font-size:11.75px!important}
.auth-card .field input{font-size:13.25px!important;min-height:45px!important}
.login-foot{font-size:10.5px!important;line-height:1.5!important}
.mobile-login-brand strong{font-family:var(--ep-font-display)!important;font-size:13px!important;font-weight:700!important}

/* Responsive readability */
@media(max-width:1100px){
  .nav-item{font-size:12.75px!important}.page-head h1{font-size:27px!important}.table td{font-size:12.5px!important}
}
@media(max-width:900px){
  body{font-size:13.75px!important}.content{padding-top:23px!important}.page-head h1{font-size:26px!important}.stat-value{font-size:25px!important}
}
@media(max-width:620px){
  .page-head h1{font-size:23px!important;letter-spacing:-.035em!important}.page-head p{font-size:12.5px!important}.section-title h2{font-size:15.5px!important}.btn{font-size:11.75px!important}.table td{font-size:12px!important}.auth-card h2{font-size:25px!important}
}

/* =========================================================
   EarnPati HRMS Portal — Premium Luxury Polish V4 (2026.09.02)
   Visual/UI only. No application logic or database changes.
   ========================================================= */
:root{
  --ep-v4-forest:#063d2b;
  --ep-v4-forest-deep:#042c20;
  --ep-v4-green:#087c45;
  --ep-v4-green-2:#0a9452;
  --ep-v4-gold:#c9972b;
  --ep-v4-gold-soft:#fff6df;
  --ep-v4-bg:#f3f7f4;
  --ep-v4-card:#ffffff;
  --ep-v4-ink:#13261c;
  --ep-v4-muted:#748279;
  --ep-v4-line:#dfe8e2;
  --ep-v4-line-soft:#eaf0ec;
  --ep-v4-shadow:0 14px 38px rgba(23,62,40,.065),0 2px 7px rgba(12,48,29,.035);
  --ep-v4-shadow-hover:0 20px 48px rgba(23,62,40,.105),0 3px 10px rgba(12,48,29,.045);
  --ep-font-display:"Manrope","Inter",ui-sans-serif,system-ui,sans-serif;
}
html,body{background:var(--ep-v4-bg)!important}
body{
  color:var(--ep-v4-ink)!important;
  background:
    radial-gradient(circle at 84% -10%,rgba(201,151,43,.055),transparent 29%),
    radial-gradient(circle at 18% 100%,rgba(8,124,69,.045),transparent 30%),
    var(--ep-v4-bg)!important;
}
h1,h2,h3,h4,h5,h6,.page-head h1,.section-title h2,.stat-value,.summary-box strong,.auth-card h2,.login-copy h1,.brandcopy strong,.top-profile-copy strong,.employee-cell strong{
  font-family:var(--ep-font-display)!important;
}

/* App shell & sidebar */
.app-shell{grid-template-columns:244px minmax(0,1fr)!important}
.sidebar{
  padding:16px 13px 15px!important;
  background:
    radial-gradient(circle at 20% -5%,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(180deg,#07543a 0%,var(--ep-v4-forest) 48%,var(--ep-v4-forest-deep) 100%)!important;
  border-right:1px solid rgba(255,255,255,.04)!important;
  box-shadow:12px 0 34px rgba(4,44,32,.075)!important;
}
.brand{display:block!important;padding:0 3px 17px!important}
.brand-logo-wrap{
  height:72px!important;padding:8px 13px!important;border-radius:17px!important;
  background:linear-gradient(180deg,#fff,#fbfdfc)!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 14px 32px rgba(1,38,25,.17),inset 0 0 0 1px rgba(8,124,69,.025)!important;
  position:relative!important;overflow:hidden!important;
}
.brand-logo-wrap:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:10px;background:linear-gradient(90deg,transparent,var(--ep-v4-gold),transparent);opacity:.75}
.brand-logo{height:54px!important;width:100%!important;object-fit:contain!important}
.brandcopy{padding:11px 8px 0!important}
.brandcopy strong{font-size:13.8px!important;font-weight:750!important;color:#fff!important;letter-spacing:-.025em!important}
.brandcopy small{font-size:9.5px!important;color:#efcf85!important;font-weight:600!important;letter-spacing:.015em!important;margin-top:4px!important}
.nav-list{gap:3px!important}
.nav-item{
  min-height:43px!important;padding:10px 11px!important;border-radius:12px!important;
  color:rgba(239,249,243,.86)!important;font-size:13px!important;font-weight:600!important;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
  border:1px solid transparent!important;
}
.nav-item svg{width:17px!important;height:17px!important;opacity:.92}
.nav-item:hover{background:rgba(255,255,255,.075)!important;color:#fff!important;transform:translateX(1px)}
.nav-item.active{
  color:#fff!important;background:linear-gradient(90deg,rgba(255,255,255,.145),rgba(255,255,255,.075))!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:inset 3px 0 0 var(--ep-v4-gold),0 8px 18px rgba(0,0,0,.06)!important;
}
.logout-nav{margin-top:9px!important;border-top:1px solid rgba(255,255,255,.10)!important;padding-top:14px!important;border-radius:0!important}
.sidebar-user{
  margin-top:16px!important;padding:10px 11px!important;border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.sidebar-user .user-avatar{background:#fff!important;color:var(--ep-v4-green)!important;border-color:rgba(255,255,255,.6)!important}
.sidebar-user strong{color:#fff!important;font-weight:700!important}.sidebar-user small{color:#cfe4d7!important}

/* Top navigation */
.topbar{
  height:74px!important;padding:0 30px!important;
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(210,224,215,.82)!important;
  box-shadow:0 6px 24px rgba(22,60,40,.035)!important;
}
.top-search{
  width:min(420px,42vw)!important;height:43px!important;border-radius:13px!important;
  background:#f8fbf9!important;border:1px solid #e0e9e3!important;
  box-shadow:inset 0 1px 1px rgba(17,56,35,.018)!important;
}
.top-search:focus-within{background:#fff!important;border-color:#9bc8af!important;box-shadow:0 0 0 4px rgba(8,124,69,.065)!important}
.top-search input{font-size:13px!important}.top-search span{color:#7f9588!important}
.icon-btn{
  width:40px!important;height:40px!important;border-radius:13px!important;
  border-color:#e0e9e3!important;background:#fff!important;color:#536a5d!important;
  box-shadow:0 5px 16px rgba(23,62,40,.04)!important;
}
.top-profile{
  padding:5px 9px 5px 5px!important;border:1px solid #e5ece8!important;
  background:#fff!important;border-radius:999px!important;box-shadow:0 5px 16px rgba(23,62,40,.035)!important
}
.user-avatar{background:linear-gradient(145deg,#eef8f2,#fff8e9)!important;border-color:#d7e5dc!important;color:#08733f!important}
.top-profile-copy strong{font-size:12.25px!important;font-weight:700!important;color:#1a2d22!important}.top-profile-copy small{color:#819087!important}

/* Page composition */
.content{padding:34px 34px 42px!important;max-width:1580px!important}
.page-head{margin-bottom:24px!important;align-items:center!important}
.page-head h1{font-size:31px!important;line-height:1.12!important;font-weight:750!important;letter-spacing:-.047em!important;color:#102219!important;margin-top:6px!important}
.page-head p{font-size:13.1px!important;color:#77847d!important;line-height:1.55!important}
.eyebrow,.page-head .eyebrow{font-size:9.5px!important;letter-spacing:.135em!important;color:#087b43!important;font-weight:750!important}
.page-actions{gap:9px!important}

/* Cards */
.card,.stat-card,.summary-box{
  border:1px solid var(--ep-v4-line)!important;border-radius:19px!important;
  background:rgba(255,255,255,.98)!important;box-shadow:var(--ep-v4-shadow)!important;
}
.card{padding:22px!important}
.stat-card{
  min-height:100px!important;padding:20px!important;position:relative!important;overflow:hidden!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.stat-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#0c9250,#77bd93);opacity:.88}
.stat-card:nth-child(3n):before{background:linear-gradient(90deg,var(--ep-v4-gold),#e8bd58)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--ep-v4-shadow-hover)!important;border-color:#d7e4dc!important}
.stat-icon{width:46px!important;height:46px!important;box-shadow:inset 0 0 0 1px rgba(10,86,51,.04)!important}
.stat-icon.blue,.stat-icon.green{background:#eaf7f0!important;color:#087d44!important}.stat-icon.orange{background:#fff4dc!important;color:#b17b13!important}.stat-icon.purple{background:#f3f2ec!important;color:#6e715e!important}
.stat-label{font-size:11.6px!important;font-weight:600!important;color:#75847b!important}.stat-value{font-size:28px!important;color:#13271c!important;font-weight:750!important}.stat-note{font-size:10.6px!important;color:#8a978f!important}
.section-title h2{font-size:17.4px!important;font-weight:750!important;color:#162a1e!important}.section-title p{font-size:11.6px!important;color:#7d8a82!important}
.summary-box{padding:18px!important}.summary-box:after{height:3px!important;background:#dfe8e3!important}.summary-box:first-child:after{background:#087f46!important}.summary-box:nth-child(2):after{background:#4aa773!important}.summary-box:nth-child(3):after{background:var(--ep-v4-gold)!important}.summary-box:nth-child(4):after{background:#b86f24!important}

/* Buttons: premium, consistent, no legacy blue */
.btn,
button.btn,
a.btn{
  min-height:40px!important;border-radius:11px!important;padding:9px 15px!important;
  font-family:var(--ep-font-display)!important;font-size:12px!important;font-weight:700!important;
  letter-spacing:-.012em!important;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease!important;
}
.btn.primary,.btn:not(.secondary):not(.danger):not(.success):not(.ghost),button[type="submit"].btn.primary{
  background:linear-gradient(135deg,#0b8d4e,#066d3b)!important;color:#fff!important;
  border:1px solid rgba(5,100,53,.62)!important;
  box-shadow:0 8px 20px rgba(8,124,69,.16),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.btn.primary:hover,.btn:not(.secondary):not(.danger):not(.success):not(.ghost):hover{background:linear-gradient(135deg,#087f46,#055c32)!important;transform:translateY(-1px)!important;box-shadow:0 11px 24px rgba(8,124,69,.21)!important}
.btn.secondary{background:#fff!important;border:1px solid #d6e3db!important;color:#315b43!important;box-shadow:0 3px 10px rgba(23,62,40,.025)!important}.btn.secondary:hover{background:#f6faf7!important;border-color:#b9d4c3!important}
.btn.ghost{background:#f1f7f3!important;color:#24643f!important}.btn.success{background:#e9f7ef!important;color:#087a43!important}.btn.danger{background:#fff0ef!important;color:#b93f3b!important;border:1px solid #f1d2d0!important}
.btn.small{min-height:31px!important;padding:6px 10px!important;font-size:10.25px!important;border-radius:9px!important}.btn.wide{min-height:47px!important}

/* Tables / filters */
.table-toolbar{gap:11px!important;margin-bottom:15px!important;flex-wrap:wrap!important}
.table-search input{height:43px!important;border-radius:12px!important;border-color:#dfe8e2!important;background:#f9fbfa!important;padding:0 13px!important}
.table-wrap{border-radius:13px!important;overflow-x:auto!important}
.table{border-collapse:separate!important;border-spacing:0!important}
.table th{padding:12px 12px!important;background:#f6f9f7!important;color:#66766c!important;font-size:10.5px!important;font-weight:700!important;border-bottom:1px solid #dfe8e2!important}
.table th:first-child{border-radius:10px 0 0 10px}.table th:last-child{border-radius:0 10px 10px 0}
.table td{padding:14px 12px!important;font-size:12.55px!important;color:#34483c!important;border-bottom:1px solid #edf2ef!important}
.table tbody tr:hover td{background:#f9fcfa!important}.table tbody tr:last-child td{border-bottom:0!important}
.employee-cell{gap:11px!important}.employee-cell strong{font-size:12.65px!important;color:#172b1f!important;font-weight:700!important}.employee-cell small{font-size:10.25px!important;color:#839088!important}
.mini-avatar{width:35px!important;height:35px!important;background:linear-gradient(145deg,#edf8f2,#fff7e3)!important;color:#087942!important;border:1px solid #e1ebe5!important}
.badge{min-height:25px!important;padding:4px 10px!important;border-radius:999px!important;font-size:10px!important;font-weight:650!important;border:1px solid transparent!important}.badge.green{background:#e9f7ef!important;color:#087a43!important;border-color:#d8eddf!important}.badge.yellow{background:#fff5df!important;color:#9d6c12!important;border-color:#f5e7c4!important}.badge.red{background:#fff0ef!important;color:#b7403c!important;border-color:#f3d8d6!important}.badge.blue{background:#edf7f1!important;color:#2d6e4c!important;border-color:#dfece4!important}.badge.gray{background:#f3f5f4!important;color:#66736b!important;border-color:#e6ebe8!important}

/* Forms */
.form-grid{gap:15px!important}.form-section{padding-bottom:20px!important;margin-bottom:20px!important;border-color:#e8efeb!important}.form-section-head{margin-bottom:15px!important}.form-section-head h3{font-size:16.2px!important;font-weight:750!important;color:#172b1f!important}.form-section-head p{font-size:11.6px!important;color:#7d8a82!important}
.field label{font-size:11.6px!important;color:#4f6257!important;font-weight:650!important}.field input,.field select,.field textarea{min-height:44px!important;border-radius:11px!important;border:1px solid #d8e4dc!important;background:#fff!important;color:#273b2f!important;padding:10px 12px!important}.field input:hover,.field select:hover,.field textarea:hover{border-color:#c4d8cb!important}.field input:focus,.field select:focus,.field textarea:focus,.table-search input:focus{border-color:#84b99c!important;box-shadow:0 0 0 4px rgba(8,124,69,.065)!important}.field small{font-size:10.5px!important;color:#87938c!important}

/* Tabs/profile/special cards */
.tabs{gap:6px!important;background:#f5f9f6!important;border:1px solid #e1eae4!important;border-radius:13px!important;padding:5px!important}.tab-btn{border-radius:9px!important;padding:8px 11px!important}.tab-btn.active{background:#fff!important;color:#08763f!important;border:1px solid #d5e7dc!important;box-shadow:0 5px 14px rgba(23,62,40,.055)!important}
.profile-cover{background:linear-gradient(125deg,#064a33 0%,#087947 62%,#b68827 135%)!important;border-radius:20px!important}.check-card{background:linear-gradient(135deg,#075b3d,#087c47)!important;border-radius:19px!important;box-shadow:0 14px 30px rgba(7,89,54,.13)!important}.announcement{border:1px solid #e6ebe7!important;background:linear-gradient(135deg,#fff,#fffaf0)!important;border-radius:17px!important}
.alert{border-radius:13px!important;padding:12px 14px!important}.progress>i,.progress-bar>span{background:linear-gradient(90deg,#087b44,#d0a03a)!important}

/* Login V4 */
.login-page{background:radial-gradient(circle at 8% 10%,rgba(8,124,69,.08),transparent 28%),radial-gradient(circle at 91% 86%,rgba(201,151,43,.10),transparent 28%),#f3f7f4!important}
.login-brand{background:radial-gradient(circle at 13% 13%,rgba(255,255,255,.09),transparent 26%),linear-gradient(145deg,#07553a 0%,#063d2b 58%,#042d21 100%)!important;padding:44px 52px!important;position:relative!important;overflow:hidden!important}
.login-brand:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-220px;bottom:-220px;border:1px solid rgba(255,255,255,.065);box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012);pointer-events:none}
.login-logo-image{width:188px!important;height:78px!important;padding:7px 12px!important;border-radius:16px!important;background:#fff!important;box-shadow:0 14px 34px rgba(0,0,0,.13)!important}.login-logo-copy strong{font-size:18px!important;color:#fff!important}.login-logo-copy small{font-size:10.5px!important;color:#efcf86!important}
.login-copy{margin-top:90px!important;position:relative;z-index:2}.login-copy h1{font-size:42px!important;line-height:1.08!important;font-weight:750!important;letter-spacing:-.055em!important}.login-copy p{font-size:13.2px!important;line-height:1.72!important;color:#d6eadf!important}.login-kicker{border-radius:999px!important;padding:7px 10px!important;background:rgba(255,255,255,.08)!important;color:#edce86!important}.login-points{gap:10px!important}.login-points div{font-size:12.2px!important}.login-points b{background:rgba(255,244,215,.96)!important}
.login-form-wrap{background:rgba(255,255,255,.98)!important}.auth-card{max-width:420px!important;padding:10px 0!important}.auth-card h2{font-size:30px!important;font-weight:750!important}.auth-card>p{font-size:12.7px!important}.auth-card .field input{min-height:46px!important;border-radius:11px!important}.auth-card .btn.primary{min-height:48px!important;border-radius:11px!important}
.art-card{border-radius:15px!important;background:rgba(255,255,255,.085)!important;box-shadow:0 12px 32px rgba(0,0,0,.08)!important}

/* Scrollbars */
.sidebar::-webkit-scrollbar,.table-wrap::-webkit-scrollbar{width:7px;height:7px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:20px}.table-wrap::-webkit-scrollbar-thumb{background:#c9d9cf;border-radius:20px}.table-wrap::-webkit-scrollbar-track{background:transparent}

@media(max-width:1200px){.app-shell{grid-template-columns:226px minmax(0,1fr)!important}.content{padding:29px 24px 38px!important}.page-head h1{font-size:29px!important}.brand-logo-wrap{height:68px!important}.brand-logo{height:50px!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{width:264px!important}.content{padding:22px 16px 32px!important}.topbar{padding:0 16px!important}.page-head h1{font-size:27px!important}.login-brand{padding:34px 30px!important}}
@media(max-width:620px){.content{padding:18px 12px 28px!important}.page-head{align-items:flex-start!important}.page-head h1{font-size:24px!important}.card{padding:17px!important}.stat-card{padding:16px!important}.login-form-wrap{padding:20px!important}.auth-card h2{font-size:26px!important}}

/* ===== EarnPati Profile Photo V1 ===== */
.user-avatar.has-photo,.mini-avatar.has-photo,.profile-head .avatar.has-photo,.profile-photo-large.has-photo{padding:0!important;overflow:hidden!important;background:#eef7f2!important;color:transparent!important}
.user-avatar.has-photo img,.mini-avatar.has-photo img,.profile-head .avatar.has-photo img,.profile-photo-large.has-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.top-profile{color:inherit;text-decoration:none}.sidebar-user{color:#fff;text-decoration:none}
.profile-photo-wrap{position:relative;flex:0 0 auto}.profile-photo-inline{position:absolute;right:-5px;bottom:-5px;margin:0}.photo-edit-btn{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:#0a7b43;color:#fff;border:3px solid #fff;box-shadow:0 5px 14px rgba(4,82,43,.22);font-size:12px;cursor:pointer}.photo-edit-btn input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.photo-remove-inline{margin-top:6px}.photo-remove-inline button{border:0;background:transparent;color:#9b6b16;padding:0;font-size:10px;font-weight:800;cursor:pointer}.photo-remove-inline button:hover{text-decoration:underline}
.photo-settings-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:30px;align-items:center;max-width:760px}.profile-photo-large{width:160px;height:160px;border-radius:38px;display:grid;place-items:center;background:linear-gradient(145deg,#edf8f2,#fff7e5);border:1px solid #d8e8de;color:#08733d;font-family:Manrope,Inter,sans-serif;font-size:38px;font-weight:800;box-shadow:0 15px 35px rgba(7,75,42,.10)}.photo-settings-copy h2{margin:0 0 6px;font:800 24px/1.2 Manrope,Inter,sans-serif;letter-spacing:-.035em}.photo-settings-copy>p{margin:0 0 18px;color:var(--muted);font-size:12px}.photo-settings-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.photo-settings-form input[type=file]{max-width:310px;border:1px dashed #cddfd5;border-radius:12px;padding:10px;background:#fbfdfc;font-size:11px}
.employee-cell .mini-avatar{flex:0 0 35px}.profile-head .avatar.has-photo{border:5px solid #fff!important}
@media(max-width:620px){.photo-settings-card{grid-template-columns:1fr;text-align:center}.profile-photo-large{margin:0 auto}.photo-settings-form{justify-content:center}.profile-photo-wrap{margin-left:0}}

/* =========================================================
   EarnPati HRMS Realtime Operations V5 — 2026.09.02
   Notifications, activity monitor, live attendance, chat.
   ========================================================= */
.nav-item{position:relative}.nav-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#d7a53a;color:#173a28;font-size:9px;font-weight:800;display:grid;place-items:center;font-style:normal;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.icon-btn svg{width:18px;height:18px;fill:currentColor}.chat-top-btn{color:#0a7841!important}
.attendance-live-chip{height:38px;padding:0 12px;border:1px solid #cfe3d7;border-radius:12px;background:#f0faf4;display:flex;align-items:center;gap:7px;color:#17633d;font-size:10px;font-weight:700;white-space:nowrap}.attendance-live-chip i{width:7px;height:7px;border-radius:50%;background:#18a55e;box-shadow:0 0 0 4px rgba(24,165,94,.12);animation:epPulse 1.8s infinite}.attendance-live-chip strong{font-family:var(--ep-font-display);font-size:11px;color:#0a6336}@keyframes epPulse{50%{box-shadow:0 0 0 7px rgba(24,165,94,0)}}

/* Persistent notifications */
.notification-card-list{padding:5px!important;overflow:hidden}.notification-row{display:grid;grid-template-columns:7px 40px minmax(0,1fr) 20px;gap:12px;align-items:center;padding:15px 14px;border-bottom:1px solid #edf2ef;transition:.18s}.notification-row:last-child{border-bottom:0}.notification-row:hover{background:#f9fcfa}.notification-row.unread{background:linear-gradient(90deg,#f1faf5,#fff)}.notification-dot{width:7px;height:7px;border-radius:50%;background:#d3ddd7}.notification-row.unread .notification-dot{background:#0c8a4b;box-shadow:0 0 0 4px rgba(12,138,75,.10)}.notification-icon{width:38px;height:38px;border-radius:12px;background:#edf8f2;color:#08783f;display:grid;place-items:center;font-weight:800}.notification-copy{min-width:0}.notification-title-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.notification-copy strong{font-family:var(--ep-font-display);font-size:13px}.notification-copy p{margin:3px 0;color:#68786f;font-size:11.5px}.notification-copy small{font-size:10px;color:#9aa59f}.notification-arrow{font-size:22px;color:#9aa7a0}

/* Activity monitor */
.activity-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:16px}.activity-summary-card{background:#fff;border:1px solid var(--ep-border);border-radius:16px;padding:17px 18px;box-shadow:var(--ep-premium-shadow);position:relative;overflow:hidden}.activity-summary-card:after{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:#dfe8e3}.activity-summary-card.active:after{background:#13a15b}.activity-summary-card.idle:after{background:#d9a338}.activity-summary-card.offline:after{background:#95a29a}.activity-summary-card span{font-size:11.5px;color:#758279;font-weight:600}.activity-summary-card b{display:block;margin-top:6px;font-family:var(--ep-font-display);font-size:26px;letter-spacing:-.04em;color:#15281d}.privacy-note{margin-bottom:16px!important;background:#f7fbf8!important;border-color:#dce9e1!important;color:#53655a!important}.presence-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800}.presence-pill.active{background:#e8f8ef;color:#087b43}.presence-pill.idle{background:#fff4d9;color:#966306}.presence-pill.offline{background:#eef1ef;color:#68746d}.activity-table td{font-size:11.5px!important}

/* Inactivity siren modal */
.idle-modal[hidden]{display:none!important}.idle-modal{position:fixed;inset:0;z-index:9999;background:rgba(5,31,19,.48);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}.idle-modal-card{width:min(430px,100%);background:#fff;border-radius:24px;padding:30px;text-align:center;border:1px solid #e2ebe5;box-shadow:0 30px 90px rgba(4,38,22,.28)}.idle-alarm-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;background:linear-gradient(145deg,#fff1d6,#ffd88a);color:#875900;display:grid;place-items:center;font-family:var(--ep-font-display);font-size:30px;font-weight:800;animation:epAlarm 1.1s infinite}.idle-modal-card h2{font-size:22px;margin:0 0 8px}.idle-modal-card p{font-size:12.5px;color:#64736a;line-height:1.6;margin:0 0 18px}.idle-modal-card small{display:block;margin-top:13px;color:#8e9992;font-size:10px}@keyframes epAlarm{50%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(218,163,56,.10)}}

/* Team chat */
.chat-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;min-height:640px}.chat-sidebar{padding:10px!important;overflow:hidden}.chat-sidebar-head{display:flex;align-items:end;justify-content:space-between;padding:8px 9px 13px}.chat-sidebar-head strong{font-family:var(--ep-font-display);font-size:15px}.chat-sidebar-head small{font-size:10px;color:#8b9890}.chat-contact-label{padding:14px 10px 7px;font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#8d9992;font-weight:800}.chat-contact{display:grid;grid-template-columns:40px minmax(0,1fr) 9px;gap:10px;align-items:center;padding:10px;border-radius:13px;margin-bottom:3px;transition:.15s}.chat-contact:hover{background:#f4f9f6}.chat-contact.active{background:linear-gradient(90deg,#eaf8f0,#fff8e7);box-shadow:inset 0 0 0 1px #d6e8dc}.chat-contact-copy{min-width:0}.chat-contact strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-contact small{display:block;font-size:9.5px;color:#86938c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.chat-avatar{width:38px;height:38px;border-radius:50%;background:#edf8f2;color:#08743d;display:grid;place-items:center;font-size:10px;font-weight:800;overflow:hidden}.chat-avatar img,.chat-message-avatar img{width:100%;height:100%;object-fit:cover}.chat-avatar.large{width:42px;height:42px}.chat-company-avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#0b8b4c,#c8952d);display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}.chat-company-avatar.large{width:42px;height:42px}.chat-presence-dot{width:8px;height:8px;border-radius:50%;background:#a9b2ac}.chat-presence-dot.active{background:#16a05b}.chat-presence-dot.idle{background:#d2a13c}.chat-panel{padding:0!important;display:flex;flex-direction:column;min-height:640px;overflow:hidden}.chat-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #e8eeea}.chat-panel-head h2{font-size:15px;margin:0}.chat-panel-head small{font-size:10px;color:#819087}.chat-feed{flex:1;overflow:auto;padding:20px;background:linear-gradient(180deg,#fbfdfc,#f7faf8);min-height:440px;max-height:620px}.chat-loading,.chat-empty{height:100%;min-height:300px;display:grid;place-items:center;color:#8b9890;font-size:11px}.chat-message{display:flex;align-items:flex-end;gap:8px;margin:0 0 14px}.chat-message.mine{justify-content:flex-end}.chat-message-avatar{width:28px;height:28px;border-radius:50%;background:#e9f5ee;color:#08753e;display:grid;place-items:center;font-size:8px;font-weight:800;overflow:hidden;flex:none}.chat-bubble{max-width:min(72%,620px);background:#fff;border:1px solid #e1eae4;border-radius:15px 15px 15px 5px;padding:10px 12px;box-shadow:0 4px 15px rgba(20,70,43,.05)}.chat-message.mine .chat-bubble{background:linear-gradient(145deg,#087b43,#066536);color:#fff;border:0;border-radius:15px 15px 5px 15px}.chat-sender{display:block;font-size:9px;color:#08743d;margin-bottom:4px}.chat-bubble p{white-space:pre-wrap;word-break:break-word;margin:0;font-size:12px;line-height:1.5}.chat-time{display:block;margin-top:5px;font-size:8.5px;color:#9aa59f;text-align:right}.chat-message.mine .chat-time{color:#cbe6d5}.chat-image-link{display:block;margin-top:8px}.chat-image-link img{display:block;max-width:320px;max-height:300px;border-radius:11px;object-fit:cover}.chat-video{display:block;width:min(360px,100%);max-height:300px;border-radius:11px;margin-top:8px;background:#000}.chat-file-card{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:8px;padding:10px;border-radius:10px;background:#f2f6f3;color:#254333}.chat-message.mine .chat-file-card{background:rgba(255,255,255,.14);color:#fff}.chat-file-card b{font-size:10px;overflow:hidden;text-overflow:ellipsis}.chat-file-card small{font-size:8.5px}.chat-compose{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:9px;padding:13px 15px 8px;border-top:1px solid #e6ece8;background:#fff;align-items:end}.chat-compose textarea{resize:none;min-height:43px;max-height:110px;border:1px solid #dbe6df;border-radius:13px;padding:11px 12px;outline:none;font-size:12px}.chat-compose textarea:focus{border-color:#8bbba0;box-shadow:0 0 0 3px rgba(8,120,63,.07)}.chat-attach{height:43px;border-radius:12px;border:1px solid #dbe6df;background:#f8fbf9;display:grid;place-items:center;color:#08743d;font-size:21px;cursor:pointer}.chat-attach input{display:none}.chat-file-hint{padding:0 16px 12px;color:#9aa49e;font-size:8.5px;background:#fff}

/* Attendance card live timer */
.attendance-running-timer{margin:10px 0 4px;font-family:var(--ep-font-display);font-size:30px;font-weight:800;letter-spacing:-.04em;color:#fff}.attendance-running-caption{font-size:9px!important;text-transform:uppercase;letter-spacing:.1em;color:#cce8d6!important}

@media(max-width:1050px){.activity-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-layout{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:760px){.attendance-live-chip span{display:none}.chat-layout{grid-template-columns:1fr}.chat-sidebar{max-height:300px;overflow:auto}.chat-panel{min-height:560px}.activity-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-bubble{max-width:84%}.top-actions{gap:7px}.top-profile-copy{display:none}}
@media(max-width:480px){.activity-summary{grid-template-columns:1fr 1fr}.attendance-live-chip{padding:0 9px}.attendance-live-chip strong{font-size:9px}.chat-feed{padding:14px}.chat-compose{grid-template-columns:40px minmax(0,1fr) auto;padding:10px}.chat-compose .btn{padding-left:10px!important;padding-right:10px!important}}

/* EPHRMS_CORPORATE_PAYROLL_V1 */
.career-timeline{position:relative;padding-left:18px}.career-timeline:before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(#0a7c43,#e7c66f)}.career-event{position:relative;display:grid;grid-template-columns:90px 1fr;gap:14px;padding:0 0 18px 15px}.career-dot{position:absolute;left:-17px;top:4px;width:10px;height:10px;border-radius:50%;background:#0a7c43;border:2px solid #fff;box-shadow:0 0 0 2px rgba(10,124,67,.14)}.career-date{font-size:10px;font-weight:800;color:#8d6b22;padding-top:1px}.career-body{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--card,#fff)}.career-body strong{display:block;font-size:12px}.career-body small{display:block;color:var(--muted,#7a8890);margin-top:2px}.career-body p{font-size:10px;line-height:1.55;color:var(--muted,#67786e);margin:7px 0}.career-change{display:inline-flex;margin:6px 0 0;padding:5px 8px;border-radius:8px;background:#f3f8f5;color:#37614d;font-size:9px;font-weight:750}.payment-pop{position:absolute;z-index:30;right:0;margin-top:7px;width:230px;padding:10px;background:#fff;border:1px solid #dce8e0;border-radius:12px;box-shadow:0 18px 45px rgba(20,58,41,.16);display:grid;gap:7px}.payment-pop input,.payment-pop select{width:100%;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:10px}details{position:relative}.table td small{color:var(--muted,#7b8b82)}@media(max-width:700px){.career-event{grid-template-columns:1fr}.career-date{padding-bottom:2px}.payment-pop{position:fixed;left:12px;right:12px;bottom:12px;width:auto}}