/* ==========================================================================
   NexoraSoft HR & Payroll — Professional UI design system
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@600;700;800&display=swap');

:root{
  --navy:#0e2f52;--navy-2:#123e68;--blue:#1478f5;--blue-2:#0b63d8;--blue-light:#e8f2ff;
  --ink:#16263d;--muted:#66768d;--muted-2:#8592a4;
  --line:#e6ebf3;--line-2:#dbe4ef;--bg:#f3f6fb;--card:#ffffff;--surface-2:#f8fafd;
  --green:#19a56b;--green-light:#e9f9f1;--red:#d94b45;--red-light:#fff0ee;
  --amber:#d89d16;--amber-light:#fff8e4;
  --shadow-sm:0 3px 10px rgba(20,45,80,.055);
  --shadow:0 12px 32px rgba(19,45,82,.09);
  --shadow-lg:0 26px 60px rgba(13,35,68,.16);
  --radius:16px;--radius-sm:12px;--radius-lg:22px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-display:Poppins,Inter,ui-sans-serif,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button,.btn{cursor:pointer;border:0}
::selection{background:#cfe3fb}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c6d3e4;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#aebedb}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Top bar ---------- */
.top{height:74px;background:rgba(255,255,255,.85);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px)}
.brand-wrap{display:flex;align-items:center;min-width:0;transition:opacity .15s var(--ease)}
.brand-wrap:hover{opacity:.85}
.logo{display:block;width:190px;height:57px;object-fit:contain;object-position:left center}
.brand-divider{height:32px;width:1px;background:var(--line);margin:0 15px}
.brand-title{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:16px;white-space:nowrap}
.top-right{display:flex;align-items:center;gap:9px;color:#33465e;font-weight:700}
.user-pill{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;background:#f4f7fb;border:1px solid var(--line);border-radius:999px;transition:.15s var(--ease)}
.user-pill:hover{border-color:var(--line-2);background:#eef3fa}
.notif-badge{position:absolute;top:-6px;right:-8px;background:#e5484d;color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 0 0 2px #fff}
.user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;letter-spacing:.3px}
.logout,.top-link{padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;transition:.15s var(--ease)}
.logout:hover,.top-link:hover{border-color:#bcd3ee;background:#f4f8fd;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.role-badge{font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--blue-light);color:var(--blue-2)}

/* ---------- App shell ---------- */
.app{display:flex;min-height:calc(100vh - 74px)}
.side{width:224px;background:linear-gradient(185deg,var(--navy) 0%,#0a2745 100%);padding:20px 12px;flex:0 0 224px}
.side-label{font-size:10px;letter-spacing:1.4px;color:#8fadce;font-weight:900;padding:10px 13px 10px}
.side a{display:flex;align-items:center;gap:11px;color:#dbe9f8;padding:11.5px 13px;border-radius:10px;margin-bottom:3px;font-weight:650;transition:background .18s var(--ease),transform .18s var(--ease),color .18s var(--ease);position:relative}
.side a .ico{width:22px;text-align:center;opacity:.9;font-size:15px;transition:opacity .15s var(--ease)}
.side a:hover{background:rgba(255,255,255,.08);transform:translateX(3px)}
.side a:hover .ico{opacity:1}
.side a.active{background:linear-gradient(135deg,#2386f7,#1168d7);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.15),inset 3px 0 0 rgba(255,255,255,.85)}
.side a.active .ico{opacity:1}
.main{flex:1;min-width:0;padding:28px;max-width:1560px}
.footer{text-align:center;color:#8592a4;font-size:11px;padding:20px 20px 30px}

/* ---------- Page head ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.eyebrow{font-size:10.5px;letter-spacing:1.6px;font-weight:900;color:var(--blue);text-transform:uppercase}
h1,h2,h3{color:var(--navy);font-family:var(--font-display)}
h1{font-size:27px;line-height:1.25;margin:6px 0;letter-spacing:-.3px}
h2{font-size:18px;margin:0 0 15px;letter-spacing:-.2px}
h3{font-size:14px}
.page-head p{margin:4px 0 0;color:var(--muted)}

/* ---------- Hero banner (dashboard welcome) ---------- */
.hero-banner{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--navy) 0%,#124a86 55%,#1478f5 130%);border-radius:var(--radius-lg);padding:26px 30px;margin-bottom:20px;color:#fff;box-shadow:var(--shadow-lg)}
.hero-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 200px at 85% -20%,rgba(255,255,255,.16),transparent 60%)}
.hero-banner .eyebrow{color:#bcdcff}
.hero-banner h1{color:#fff;margin:4px 0 3px}
.hero-banner p{color:#cfe3fb;margin:0;position:relative}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;position:relative}
.hero-meta div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 16px;backdrop-filter:blur(2px)}
.hero-meta small{display:block;color:#cfe3fb;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.hero-meta b{font-size:17px;font-family:var(--font-display)}

/* ---------- Cards / forms ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:18px;animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card.hero{background:linear-gradient(135deg,#f0f7ff,#fff)}
.toolbar{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(160px,1fr) auto;gap:13px;align-items:end}
.toolbar.four{grid-template-columns:repeat(4,1fr)}
label{display:block;font-size:12px;font-weight:750;color:#3a4d66;margin:0 0 6px}
input,select,textarea{width:100%;height:42px;padding:9px 12px;border:1px solid #cfd9e5;border-radius:10px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
textarea{height:auto}
input:focus,select:focus,textarea:focus{border-color:#74aff4;box-shadow:0 0 0 4px rgba(20,120,245,.12)}
input:hover,select:hover{border-color:#b7c6da}
input::placeholder,textarea::placeholder{color:#a6b3c6}
a:focus-visible,button:focus-visible,.btn:focus-visible,.primary:focus-visible,[tabindex]:focus-visible{outline:2px solid #1478f5;outline-offset:2px;border-radius:6px}

.primary{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;padding:11px 19px;border-radius:10px;font-weight:750;box-shadow:0 8px 18px rgba(20,120,245,.24);transition:.18s var(--ease)}
.primary:hover{filter:brightness(1.05);transform:translateY(-1.5px);box-shadow:0 12px 24px rgba(20,120,245,.3)}
.primary:active{transform:translateY(0);box-shadow:0 6px 14px rgba(20,120,245,.24)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 15px;border-radius:10px;background:#eef3f8;color:var(--navy);font-weight:750;transition:.18s var(--ease)}
.btn:hover{background:#e3ecf6;transform:translateY(-1.5px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.success{background:var(--green-light);color:#13744d}
.btn.success:hover{background:#dcf3e7}
.btn.danger{background:var(--red-light);color:#a52d25}
.btn.ghost{background:transparent;border:1px solid var(--line-2)}

/* ---------- Stat cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.stat{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.stat:hover{transform:translateY(-2.5px);box-shadow:var(--shadow)}
.stat::after{content:'';position:absolute;right:-16px;top:-16px;width:64px;height:64px;border-radius:50%;background:var(--stat-c,var(--blue-light));opacity:.55}
.stat small{position:relative;display:block;color:var(--muted);font-weight:750;font-size:11px;letter-spacing:.2px}
.stat b{position:relative;display:block;font-size:26px;color:var(--navy);margin-top:7px;font-family:var(--font-display);letter-spacing:-.3px}
.stat .sub{position:relative;font-size:11px;color:var(--muted);margin-top:3px}
.stat.c-present{--stat-c:#d9f5e6}
.stat.c-leave{--stat-c:#fbdedb}
.stat.c-half{--stat-c:#d9ebfd}
.stat.c-payable{--stat-c:#e4d9fd}
.stat.c-net{--stat-c:#d1f3e6}

/* ---------- Salary summary cards ---------- */
.salary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.salary-card{position:relative;padding:16px 17px;border:1px solid var(--line);border-radius:12px;background:#fbfdff;overflow:hidden}
.salary-card span{display:block;color:var(--muted);font-size:11px;font-weight:750}
.salary-card strong{display:block;font-size:22px;margin-top:6px;color:var(--navy);font-family:var(--font-display)}
.salary-card.net{background:linear-gradient(135deg,#eafbf3,#effaf5);border-color:#ccebdc}
.salary-card.net strong{color:#14724c}

/* ---------- Section heads / legend ---------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.legend{display:flex;gap:11px;flex-wrap:wrap;color:var(--muted);font-size:11px;font-weight:700}
.legend span{display:flex;align-items:center;gap:5px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.present{background:#20aa70}.dot.leave{background:#df6159}.dot.half{background:#3e91ed}.dot.off{background:#8c9bad}.dot.holiday{background:#dca72a}

/* ---------- Calendar ---------- */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-head{text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#8390a2;font-weight:900;padding:6px}
.cal-empty{min-height:68px}
.cal-day{min-height:70px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;padding:9px;border-radius:11px;border:1px solid var(--line);background:#fff;transition:.15s;position:relative}
.cal-bday{position:absolute;top:4px;right:6px;font-style:normal;font-size:13px}
.cal-day:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px rgba(25,57,92,.13);z-index:2}
.cal-day.selected{outline:2px solid var(--blue);outline-offset:1px}
.cal-day span{font-size:15px;font-weight:900}
.cal-day small{font-size:9px;font-weight:900;letter-spacing:.2px}
.cal-day.present{background:#eefaf5;border-color:#cbeadb;color:#16714c}
.cal-day.leave{background:#fff1ef;border-color:#f5d0cb;color:#a5322b}
.cal-day.half{background:#eef6ff;border-color:#cfe3fa;color:#1a64a9}
.cal-day.off{background:#f2f5f8;color:#5c6c80}
.cal-day.holiday{background:#fff8e4;border-color:#f2e1ad;color:#8a6508}
.cal-day.paidleave{background:#eef2ff;border-color:#c7d2f5;color:#3949ab}
.calendar-editor{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;align-items:end;background:#f7f9fc;border:1px solid #e9eef4;border-radius:12px;padding:14px;margin:16px 0}
.table-toggle{border-top:1px solid var(--line);padding-top:18px;margin:20px 0 12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

/* ---------- Tables ---------- */
.table-wrap{overflow:auto;border-radius:12px;-webkit-overflow-scrolling:touch}
.late-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--red-light);color:#a52d25;font-size:10px;font-weight:800;letter-spacing:.3px;vertical-align:middle}
.attendance-row-locked{opacity:.55}
.attendance-row-locked select:disabled,.attendance-row-locked input:disabled{background:var(--bg-2,#f2f3f5);cursor:not-allowed}
table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
th,td{padding:12.5px 11px;border-bottom:1px solid #edf1f5;text-align:left;white-space:nowrap}
th{background:#f8fafc;color:#52637a;font-size:10px;letter-spacing:.6px;text-transform:uppercase;font-weight:900;position:sticky;top:0}
th:first-child{border-top-left-radius:12px}
th:last-child{border-top-right-radius:12px}
td{font-size:13px}
tr{transition:background .14s var(--ease)}
.table-wrap tbody tr:nth-child(even){background:var(--surface-2)}
.table-wrap tbody tr:hover{background:#eef4fd}
tr:last-child td{border-bottom:0}
tfoot td{background:#f8fafc;font-weight:900;color:var(--navy)}
.right{text-align:right}
.center{text-align:center}
.name-cell{display:flex;align-items:center;gap:10px}
.avatar-chip{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:linear-gradient(135deg,#2386f7,#123e68);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}

/* ---------- Alerts / badges ---------- */
.muted,.hint{color:var(--muted);font-size:12px}
.ok,.error{padding:12px 14px;border-radius:11px;margin-bottom:14px;font-weight:700;display:flex;align-items:center;gap:9px;animation:rise .3s var(--ease) both}
.ok{background:var(--green-light);color:#176b46;border:1px solid #cdeedd}
.error{background:var(--red-light);color:#a72e27;border:1px solid #f6d6d2}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;font-size:10px;font-weight:900;letter-spacing:.2px}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;flex:0 0 auto}
.badge.active{background:var(--green-light);color:#13744d}
.badge.inactive{background:#f1f3f6;color:#66768d}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;top:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:10px}
.bday-overlay{position:fixed;inset:0;background:rgba(15,25,45,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:bdayFadeIn .3s ease}
.bday-card{background:#fff;border-radius:20px;padding:40px 34px;text-align:center;max-width:380px;width:100%;box-shadow:0 30px 60px rgba(0,0,0,.3);animation:bdayPop .4s cubic-bezier(.34,1.56,.64,1)}
.bday-emoji{font-size:44px;margin-bottom:6px}
.bday-card h2{margin:0 0 10px;font-size:24px;color:var(--navy);font-weight:900}
.bday-names{font-size:17px;color:#2386f7;font-weight:800;margin:0 0 8px}
.bday-card .muted{margin-bottom:20px}
@keyframes bdayFadeIn{from{opacity:0}to{opacity:1}}
@keyframes bdayPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.toast{background:#16263d;color:#fff;padding:13px 18px;border-radius:11px;font-weight:700;font-size:13px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;animation:toast-in .25s ease}
.toast.ok-toast{background:linear-gradient(135deg,#1a9f66,#12764c)}
.toast.err-toast{background:linear-gradient(135deg,#d94b45,#a5322b)}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Charts ---------- */
.chart-card{display:grid;grid-template-columns:1.1fr 1.4fr;gap:26px;align-items:center}
.chart-box{position:relative;height:220px}
.chart-stats{display:flex;flex-direction:column;gap:10px}
.chart-stats .row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:9px;background:#f7faff}
.chart-stats .row .lab{display:flex;align-items:center;gap:8px;font-weight:700;color:#3a4d66;font-size:12.5px}

/* ---------- Password page ---------- */
.password-card{max-width:610px}
.passbox{display:flex;gap:8px}
.passbox input{flex:1}
.passbox button{height:42px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:#f2f5f8;color:var(--navy);font-weight:750}
.big{margin-top:16px}
.pw-strength{height:5px;border-radius:6px;background:#eef1f5;margin-top:8px;overflow:hidden}
.pw-strength i{display:block;height:100%;width:0%;background:var(--red);transition:.25s}

/* ---------- Login page ---------- */
.login-bg{min-height:100vh;display:flex;background:var(--navy)}
.login-visual{flex:1.1;position:relative;background:linear-gradient(150deg,#0e2f52 0%,#124a86 55%,#1478f5 130%);display:flex;flex-direction:column;justify-content:center;padding:60px;color:#fff;overflow:hidden}
.login-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(700px 260px at 90% 0%,rgba(255,255,255,.14),transparent 60%)}
.login-visual .lv-logo{width:200px;height:auto;margin-bottom:34px;position:relative;background:#fff;padding:14px 18px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.login-visual h2{color:#fff;font-size:30px;line-height:1.3;max-width:460px;position:relative;font-weight:700}
.login-visual p{color:#cfe3fb;max-width:420px;line-height:1.7;position:relative}
.lv-features{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:13px;position:relative}
.lv-features li{display:flex;align-items:center;gap:11px;color:#e4f0fd;font-weight:600;font-size:13.5px}
.lv-features li i{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:13px}
.login-panel{flex:1;background:#f3f6fb;display:flex;align-items:center;justify-content:center;padding:30px}
.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:36px 34px}
.login-card .badge-secure{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:900;letter-spacing:.6px;color:var(--blue-2);background:var(--blue-light);padding:6px 11px;border-radius:20px;margin-bottom:14px}
.login-card h1{font-size:23px;margin:0 0 6px}
.login-card .primary{width:100%;height:46px;margin-top:17px;font-size:14px}
.login-card .demo{background:#f7f9fc;border:1px dashed #d9e1ea;padding:12px 13px;border-radius:10px;margin-top:16px;color:#60718a;font-size:12px}
.login-card .demo b{color:var(--navy)}
.login-mobile-logo{display:none}
@media(max-width:920px){
  .login-visual{display:none}
  .login-mobile-logo{display:block;width:210px;margin:0 auto 22px}
}

/* ---------- Generic layout helpers ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.empty{padding:50px;text-align:center;color:var(--muted)}

/* ==========================================================================
   Salary Slip / Payslip
   ========================================================================== */
.slip-wrap{max-width:900px;margin:0 auto}
.print-actions{display:flex;justify-content:space-between;gap:10px;max-width:900px;margin:0 auto 14px;align-items:center}
.print-actions .month-pill{background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:9px;font-weight:800;color:var(--navy)}
.salary-slip{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0;box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.slip-header{background:linear-gradient(120deg,var(--navy),#124a86 70%,var(--blue));color:#fff;padding:28px 34px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.slip-header .co-logo{width:160px;background:#fff;padding:8px 12px;border-radius:10px}
.slip-header .co-meta{text-align:right}
.slip-header .co-meta h1{color:#fff;font-size:18px;margin:0}
.slip-header .co-meta p{color:#cfe3fb;margin:3px 0 0;font-size:11.5px;line-height:1.6}
.slip-ribbon{display:flex;justify-content:space-between;align-items:center;padding:15px 34px;background:#f4f8fd;border-bottom:1px solid var(--line)}
.slip-ribbon .title{font-family:var(--font-display);font-weight:800;color:var(--navy);font-size:15px;letter-spacing:.2px}
.slip-ribbon .period{font-weight:800;color:var(--blue-2);background:#fff;border:1px solid #d3e5fb;padding:6px 14px;border-radius:999px;font-size:12px}
.slip-body{padding:30px 34px}
.slip-id{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.slip-id .avatar-chip{width:52px;height:52px;flex:0 0 52px;font-size:18px}
.slip-id h2{margin:0;font-size:19px}
.slip-id .desig{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:2px}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px;border:1px solid var(--line);border-radius:12px;padding:6px 0;margin-bottom:24px;background:#fbfdff}
.info-grid .info-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:9px 20px;border-bottom:1px dashed var(--line-2);font-size:12.5px}
.info-grid .info-row:last-child,.info-grid .info-row:nth-last-child(2){border-bottom:0}
.info-grid .info-row span:first-child{color:var(--muted);font-weight:700;flex:0 0 auto;white-space:nowrap}
.info-grid .info-row span:last-child{font-weight:800;color:var(--ink);text-align:right;min-width:0;overflow-wrap:anywhere}
.slip-section-title{font-size:11px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--blue-2);margin:22px 0 10px}
.earn-ded-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.earn-ded-grid table{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.earn-ded-grid th{background:#eef4fb}
.slip-net-strip{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#eafbf3,#effaf5);border:1px solid #ccebdc;border-radius:12px;padding:18px 22px;margin-top:20px}
.slip-net-strip .lab{font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:#14724c}
.slip-net-strip .amt{font-size:26px;font-weight:900;color:#0f5c3d;font-family:var(--font-display)}
.slip-words{margin-top:12px;font-size:12.5px;color:var(--muted);font-style:italic}
.slip-formula{margin:10px 0 0;font-size:10.5px;color:var(--muted-2)}
.slip-signatures{display:flex;justify-content:space-between;margin-top:36px;gap:20px}
.slip-signatures .sig{flex:1;text-align:center}
.slip-signatures .sig .line{border-top:1.4px solid #b9c5d5;margin-bottom:8px;padding-top:8px;font-size:11.5px;font-weight:800;color:var(--navy)}
.slip-footer-note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted-2);text-align:center;line-height:1.55}
.slip-watermark{position:absolute;right:-40px;top:44%;transform:rotate(-18deg);font-size:70px;font-weight:900;color:rgba(20,55,88,.04);pointer-events:none;letter-spacing:2px;user-select:none}

/* ---------- Responsive ---------- */
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}.salary-cards{grid-template-columns:repeat(2,1fr)}.toolbar.four{grid-template-columns:1fr 1fr}.calendar-editor{grid-template-columns:1fr 1fr}.brand-title{display:none}.chart-card{grid-template-columns:1fr}.earn-ded-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .top{height:68px;padding:0 12px}.logo{width:155px;height:50px}.brand-divider{display:none}.top-right{gap:5px}.user-pill span{display:none}.top-link{display:none}.top-link.theme-toggle{display:inline-flex}.logout{padding:8px}
  /* Icon-only side rail is replaced by the bottom nav bar + "More" drawer on phones (assets/mobile_nav.js) */
  .side{display:none}
  .main{padding:16px 12px 26px}.page-head{display:block}.page-head h1{font-size:22px}
  .grid,.salary-cards{grid-template-columns:1fr 1fr}.toolbar,.toolbar.four{grid-template-columns:1fr}
  .calendar-grid{gap:4px}.cal-day{min-height:56px;padding:6px}.cal-day small{font-size:7px}
  .two{grid-template-columns:1fr}
  .slip-header{flex-direction:column;text-align:center;padding:22px}
  .slip-header .co-meta{text-align:center}
  .info-grid{grid-template-columns:1fr}
  .slip-body{padding:20px}
  .print-actions{padding:0 12px}
  .hero-meta{gap:10px}
  /* Touch-friendly tap targets */
  .btn,button.btn,.logout,.top-link{min-height:44px}
  input,select,textarea{min-height:44px}
  input[type="checkbox"],input[type="radio"]{min-height:0;width:19px;height:19px}
  th,td{padding:13px 11px}
  .top-link.theme-toggle,.logout{min-height:38px}
  /* Room for the fixed bottom nav bar */
  body.has-bottom-nav .app{padding-bottom:0}
  body.has-bottom-nav .main{padding-bottom:86px}
  body.has-bottom-nav .footer{display:none}
}
@media(max-width:480px){.grid,.salary-cards{grid-template-columns:1fr}.calendar-editor{grid-template-columns:1fr}.cal-day span{font-size:13px}}

/* ==========================================================================
   Mobile bottom navigation + "More" drawer
   Built at runtime by assets/mobile_nav.js from the existing .side menu,
   so it always matches the signed-in user's role-based links automatically.
   Hidden above 760px; the desktop sidebar is used there instead.
   ========================================================================== */
.bottom-nav{display:none}
@media(max-width:760px){
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:920;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(20,45,80,.08);
    padding:6px 2px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .ai-fab{bottom:78px}
}
.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border-radius:10px;color:var(--muted);font-size:10px;font-weight:800;min-height:48px;background:none}
.bottom-nav-item .bn-ico{font-size:19px;line-height:1}
.bottom-nav-item.active{color:var(--blue-2)}
.bottom-nav-item:active{background:var(--blue-light)}
.bn-badge{position:absolute;transform:translate(9px,-11px);background:#e5484d;color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px}

.bn-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(10,20,35,.42);z-index:935}
.bn-drawer-backdrop.open{display:block}
.bn-drawer{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:940;background:var(--navy);border-radius:18px 18px 0 0;padding:10px 12px 14px;max-height:65vh;overflow-y:auto;transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease}
.bn-drawer.open{transform:translateY(0);opacity:1;pointer-events:auto}
.bn-drawer-handle{width:38px;height:4px;background:rgba(255,255,255,.28);border-radius:99px;margin:4px auto 12px}
.bn-drawer .side-label{color:#8fadce}
.bn-drawer a{display:flex;align-items:center;gap:11px;color:#dbe9f8;padding:14px 13px;border-radius:10px;margin-bottom:2px;font-weight:650;min-height:48px}
.bn-drawer a .ico{width:22px;text-align:center;font-size:16px}
.bn-drawer a.active{background:linear-gradient(135deg,#2386f7,#1168d7);color:#fff}
.bn-drawer a:active{background:rgba(255,255,255,.12)}

:root[data-theme="dark"] .bottom-nav{background:var(--card);border-top-color:var(--line)}
:root[data-theme="dark"] .bottom-nav-item{color:var(--muted)}
:root[data-theme="dark"] .bottom-nav-item.active{color:var(--blue)}
:root[data-theme="dark"] .bottom-nav-item:active{background:var(--blue-light)}
:root[data-theme="dark"] .bn-drawer{background:#0a1420;border:1px solid var(--line);border-bottom:0}

/* ==========================================================================
   Dark Mode
   Activated by [data-theme="dark"] on <html> (set via assets/theme.js,
   persisted in localStorage). Only variables + a handful of hardcoded
   colors are overridden — layout, spacing and structure are untouched.
   ========================================================================== */
body,.top,.side,.card,.stat,.salary-card,input,select,textarea,.btn,.logout,.top-link,
th,td,.cal-day,.toast,.login-card,.slip-header,.salary-slip{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}

:root[data-theme="dark"]{
  --navy:#0f2540;--navy-2:#123a63;--blue:#4da3ff;--blue-2:#6fb6ff;--blue-light:#152944;
  --ink:#e7edf6;--muted:#9fb0c6;--muted-2:#8895a8;
  --line:#26374f;--line-2:#2e4160;--bg:#0a1420;--card:#111d2e;--surface-2:#0e1c30;
  --green:#37c98c;--green-light:#123526;--red:#ff7168;--red-light:#3a1a18;
  --amber:#f2bb3d;--amber-light:#3a2c0c;
  --shadow-sm:0 4px 14px rgba(0,0,0,.35);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 22px 55px rgba(0,0,0,.6);
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .top{background:var(--card);border-bottom-color:var(--line)}
:root[data-theme="dark"] .top-right{color:#c3d0e0}
:root[data-theme="dark"] .user-pill{background:#182740;border-color:var(--line)}
:root[data-theme="dark"] .logout,:root[data-theme="dark"] .top-link,:root[data-theme="dark"] .theme-toggle{background:#182740;border-color:var(--line);color:#dbe6f5}
:root[data-theme="dark"] .logout:hover,:root[data-theme="dark"] .top-link:hover,:root[data-theme="dark"] .theme-toggle:hover{background:#1e3252;border-color:#3a557c}
:root[data-theme="dark"] .side{background:linear-gradient(185deg,#0a1626 0%,#060d17 100%)}
:root[data-theme="dark"] .card.hero{background:linear-gradient(135deg,#132540,#111d2e)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#0e1c30;border-color:#2c406a;color:var(--ink)}
:root[data-theme="dark"] input:hover,:root[data-theme="dark"] select:hover{border-color:#3a557c}
:root[data-theme="dark"] label{color:#b7c5da}
:root[data-theme="dark"] .btn{background:#182740;color:#dbe6f5}
:root[data-theme="dark"] .btn:hover{background:#1e3252}
:root[data-theme="dark"] .btn.ghost{border-color:var(--line-2)}
:root[data-theme="dark"] .stat,:root[data-theme="dark"] .salary-card{background:var(--card)}
:root[data-theme="dark"] .salary-card{background:#0e1c30}
:root[data-theme="dark"] .salary-card.net{background:linear-gradient(135deg,#0f2b21,#0e2018);border-color:#1c4634}
:root[data-theme="dark"] .salary-card.net strong{color:#4fd99b}
:root[data-theme="dark"] .calendar-editor{background:#0e1c30;border-color:var(--line)}
:root[data-theme="dark"] .cal-day{background:#111d2e;border-color:var(--line)}
:root[data-theme="dark"] .cal-day.present{background:#0f2b21;border-color:#1c4634;color:#5fe0a3}
:root[data-theme="dark"] .cal-day.leave{background:#3a1a18;border-color:#5a2a26;color:#ff9b93}
:root[data-theme="dark"] .cal-day.half{background:#102a45;border-color:#1d4468;color:#7cc0ff}
:root[data-theme="dark"] .cal-day.off{background:#182740;color:#9fb0c6}
:root[data-theme="dark"] .cal-day.holiday{background:#3a2c0c;border-color:#5a4614;color:#f2bb3d}
:root[data-theme="dark"] .cal-day.paidleave{background:#1a1f45;border-color:#2c3470;color:#9aa6ff}
:root[data-theme="dark"] th{background:#0e1c30;color:#9fb0c6}
:root[data-theme="dark"] th,:root[data-theme="dark"] td{border-bottom-color:var(--line)}
:root[data-theme="dark"] .table-wrap tbody tr:nth-child(even){background:var(--surface-2)}
:root[data-theme="dark"] .table-wrap tbody tr:hover{background:#152744}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#5b7094}
:root[data-theme="dark"] tfoot td{background:#0e1c30}
:root[data-theme="dark"] .ok{background:#123526;color:#7cf0bc;border-color:#1c4634}
:root[data-theme="dark"] .error{background:#3a1a18;color:#ff9b93;border-color:#5a2a26}
:root[data-theme="dark"] .badge.active{background:#123526;color:#7cf0bc}
:root[data-theme="dark"] .badge.inactive{background:#182740;color:#9fb0c6}
:root[data-theme="dark"] .late-badge{background:#3a1a18;color:#ff9b93}
:root[data-theme="dark"] .chart-stats .row{background:#0e1c30}
:root[data-theme="dark"] .passbox button{background:#182740;border-color:var(--line);color:#dbe6f5}
:root[data-theme="dark"] .pw-strength{background:#182740}
:root[data-theme="dark"] .login-panel{background:var(--bg)}
:root[data-theme="dark"] .login-card{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] .login-card .demo{background:#0e1c30;border-color:#2c4060;color:#9fb0c6}
:root[data-theme="dark"] .bday-card{background:var(--card);color:var(--ink)}
:root[data-theme="dark"] .slip-ribbon{background:#0e1c30;border-bottom-color:var(--line)}
:root[data-theme="dark"] .slip-ribbon .period{background:#111d2e;border-color:#2c4060}
:root[data-theme="dark"] .info-grid{background:#0e1c30;border-color:var(--line)}
:root[data-theme="dark"] .salary-slip{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] .earn-ded-grid th{background:#0e1c30}
:root[data-theme="dark"] .print-actions .month-pill{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] .slip-net-strip{background:linear-gradient(135deg,#0f2b21,#0e2018);border-color:#1c4634}
:root[data-theme="dark"] .slip-net-strip .lab{color:#4fd99b}
:root[data-theme="dark"] .slip-net-strip .amt{color:#5fe0a3}
:root[data-theme="dark"] .slip-watermark{color:rgba(255,255,255,.035)}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2c4060}
/* Headings and stat/figure text used var(--navy) as a near-black ink color
   on light backgrounds; in dark mode --navy is repurposed as a background
   tone, so these need an explicit light color instead. */
:root[data-theme="dark"] .brand-title,
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,
:root[data-theme="dark"] .stat b,
:root[data-theme="dark"] .salary-card strong,
:root[data-theme="dark"] tfoot td,
:root[data-theme="dark"] .login-card .demo b,
:root[data-theme="dark"] .print-actions .month-pill,
:root[data-theme="dark"] .slip-ribbon .title,
:root[data-theme="dark"] .slip-signatures .sig .line{color:var(--ink)}
:root[data-theme="dark"] .stat::after{opacity:.16}
:root[data-theme="dark"] .avatar-chip{background:linear-gradient(135deg,#2386f7,#0a1626)}

/* ---------- Smart Dashboard Insights card ---------- */
.ai-insights-card{background:linear-gradient(135deg,#f5f9ff,#fff)}
.ai-insights-skeleton{display:flex;flex-direction:column;gap:10px}
.ai-skel-line{height:13px;border-radius:6px;background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);background-size:400% 100%;animation:ai-shimmer 1.4s ease infinite}
@keyframes ai-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.ai-insights-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ai-insights-list li{font-size:13px;line-height:1.55;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.ai-insights-empty{font-size:12.5px;color:var(--muted);padding:6px 2px}
.ai-insights-error{color:#a52d25}
:root[data-theme="dark"] .ai-insights-card{background:linear-gradient(135deg,#0f2038,#111d2e)}
:root[data-theme="dark"] .ai-skel-line{background:linear-gradient(90deg,#16283f 25%,#1c3555 37%,#16283f 63%);background-size:400% 100%}
:root[data-theme="dark"] .ai-insights-list li{background:#0e1c30;border-color:var(--line);color:var(--ink)}

/* ---------- AI Document Reading (auto-fill from upload) ---------- */
.ai-extract-box{background:linear-gradient(135deg,#f5f9ff,#fff);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.ai-extract-head{display:flex;align-items:center;gap:8px;font-size:14.5px}
.ai-badge{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--blue);background:rgba(20,120,245,.12);border-radius:20px;padding:2px 9px}
input.ai-filled,select.ai-filled,textarea.ai-filled{border-color:#1b7a3d!important;background:rgba(27,122,61,.06)!important;transition:background .3s,border-color .3s}
:root[data-theme="dark"] .ai-extract-box{background:linear-gradient(135deg,#0f2038,#111d2e);border-color:var(--line)}
:root[data-theme="dark"] .ai-badge{background:rgba(35,134,247,.18)}
:root[data-theme="dark"] input.ai-filled,:root[data-theme="dark"] select.ai-filled,:root[data-theme="dark"] textarea.ai-filled{background:rgba(27,122,61,.14)!important}

/* ---------- Anomaly & Fraud Alerts card ---------- */
.anomaly-card{background:linear-gradient(135deg,#fff8f2,#fff)}
.anomaly-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.anomaly-item{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;padding:10px 12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px}
.anomaly-item.sev-high{border-left-color:#c0392b}
.anomaly-item.sev-medium{border-left-color:#c98a12}
.anomaly-item.sev-low{border-left-color:#94a3b8}
.anomaly-sev{font-size:13px;line-height:1.6}
.anomaly-cat{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:#f1f3f6;border-radius:20px;padding:1px 8px;margin-left:4px}
.anomaly-item a{white-space:nowrap}
:root[data-theme="dark"] .anomaly-card{background:linear-gradient(135deg,#2a1c14,#1a1310)}
:root[data-theme="dark"] .anomaly-item{background:#1c1712;border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .anomaly-cat{background:#2a241c;color:var(--ink)}

/* ---------- AI Chat Assistant widget ---------- */
.ai-fab{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;font-size:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(20,120,245,.35);z-index:900;transition:.2s}
.ai-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 36px rgba(20,120,245,.45)}
.ai-panel{position:fixed;right:24px;bottom:96px;width:380px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 140px);background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;overflow:hidden;z-index:901}
.ai-panel.open{display:flex;animation:ai-pop .22s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes ai-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.ai-panel-head{background:linear-gradient(120deg,var(--navy),#124a86 70%,var(--blue));color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.ai-panel-head b{font-family:var(--font-display);font-size:14.5px;display:block}
.ai-panel-head small{display:block;color:#cfe3fb;font-size:11px;margin-top:2px;font-weight:500}
.ai-panel-close{background:rgba(255,255,255,.16);border:0;color:#fff;width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 28px}
.ai-panel-close:hover{background:rgba(255,255,255,.28)}
.ai-panel-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.ai-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.ai-msg.bot{align-self:flex-start;background:#f0f4f9;color:var(--ink);border-bottom-left-radius:4px}
.ai-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;border-bottom-right-radius:4px}
.ai-msg.error{align-self:flex-start;background:var(--red-light);color:#a52d25;border-bottom-left-radius:4px}
.ai-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;background:#f0f4f9;border-radius:14px;border-bottom-left-radius:4px}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:#93a3b8;animation:ai-bounce 1.2s infinite ease-in-out}
.ai-typing span:nth-child(2){animation-delay:.15s}
.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes ai-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.ai-panel-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:11px;display:flex;gap:8px;align-items:flex-end}
.ai-panel-foot textarea{flex:1;height:40px;max-height:90px;resize:none;padding:9px 12px;border-radius:10px;font-size:13px}
.ai-panel-send{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;font-size:15px;flex:0 0 40px;display:flex;align-items:center;justify-content:center}
.ai-panel-send:disabled{opacity:.45;cursor:default}
@media(max-width:520px){
  .ai-panel{right:10px;left:10px;width:auto;bottom:146px;height:min(480px,calc(100vh - 210px))}
  .ai-fab{right:16px;bottom:78px;width:52px;height:52px;font-size:22px}
}
:root[data-theme="dark"] .ai-panel{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] .ai-msg.bot,:root[data-theme="dark"] .ai-typing{background:#0e1c30;color:var(--ink)}
:root[data-theme="dark"] .ai-typing span{background:#4a5f7d}
:root[data-theme="dark"] .ai-panel-foot{border-top-color:var(--line)}
:root[data-theme="dark"] .ai-panel-foot textarea{background:#0e1c30;border-color:#2c406a;color:var(--ink)}

/* ---------- Dark mode toggle button ---------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;font-size:16px;line-height:1}
.login-theme-toggle{position:fixed;top:18px;right:18px;z-index:60}

/* ---------- Print ----------
   Forces the salary slip onto a single A4 page: fixed page size/margin,
   and every section on the slip is scaled down (tighter padding, smaller
   type, shorter gaps) specifically for print — the on-screen version is
   untouched. If content is unusually long (e.g. very long remarks),
   the browser's print-preview zoom (Ctrl/Cmd + P → "Fit to page") is a
   safety net, but this layout is sized to fit on its own. */
@page{ size:A4; margin:9mm 11mm; }
.batch-slip{margin-bottom:26px}
.batch-slip:last-child{margin-bottom:0}
@media print{
  .batch-slip{page-break-after:always;break-after:page}
  .batch-slip:last-child{page-break-after:auto;break-after:auto}
}
@media print{
  html,body{background:#fff;font-size:12px}
  .no-print,.top,.side,.footer,.toast-wrap{display:none!important}
  .app{display:block;min-height:0}
  .main{padding:0}
  .slip-wrap{max-width:none;margin:0}
  .salary-slip{border:0;box-shadow:none;max-width:none;border-radius:0}
  .print-actions{display:none}
  .slip-watermark{display:none}

  .slip-header{padding:14px 20px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .slip-header .co-logo{width:130px}
  .slip-header .co-meta h1{font-size:15px}
  .slip-header .co-meta p{font-size:10px;line-height:1.4}
  .slip-ribbon{padding:9px 20px}
  .slip-ribbon .title{font-size:12.5px}
  .slip-ribbon .period{padding:4px 11px;font-size:10.5px}
  .slip-body{padding:14px 20px}
  .slip-id{margin-bottom:12px}
  .slip-id .avatar-chip{width:38px;height:38px;flex:0 0 38px;font-size:14px}
  .slip-id h2{font-size:15px}
  .slip-id .desig{font-size:11px}
  .info-grid{margin-bottom:12px;padding:2px 0}
  .info-grid .info-row{padding:5px 16px;font-size:10.5px}
  .slip-section-title{margin:12px 0 6px;font-size:9.5px}
  table{font-size:10.5px}
  th,td{padding:6px 8px!important}
  .earn-ded-grid{gap:12px}
  .slip-net-strip{-webkit-print-color-adjust:exact;print-color-adjust:exact;padding:11px 16px;margin-top:12px}
  .slip-net-strip .lab{font-size:10px}
  .slip-net-strip .amt{font-size:19px}
  .slip-words{margin-top:7px;font-size:10.5px}
  .slip-formula{font-size:9px;margin-top:6px}
  .slip-signatures{margin-top:26px}
  .slip-signatures .sig .line{font-size:10px;padding-top:6px}
  .slip-footer-note{margin-top:12px;padding-top:9px;font-size:9px;line-height:1.4}
}

/* ==========================================================================
   v31 — Team Leave Calendar, Announcements, Team Directory, Recognition,
   Asset Tracking, Salary Revision History
   ========================================================================== */
.stack-form{display:flex;flex-direction:column}
.stack-form textarea{resize:vertical}

/* Leave Calendar */
.cal-grid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:0 0 8px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-cell{min-height:92px;border:1px solid var(--line);border-radius:10px;padding:7px;background:#fbfcfe}
.cal-cell.cal-empty{border:0;background:transparent}
.cal-cell.cal-holiday{background:var(--amber-light);border-color:#f0dca0}
.cal-daynum{font-size:12px;font-weight:800;color:var(--muted-2);display:flex;align-items:center;gap:4px}
.cal-holiday-tag{font-size:11px}
.cal-person{font-size:10.5px;font-weight:700;background:var(--blue-light);color:var(--blue-2);border-radius:6px;padding:2px 6px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-more{font-size:10px;color:var(--muted);margin-top:3px;font-weight:700}
@media(max-width:760px){.cal-grid,.cal-grid-head{grid-template-columns:repeat(7,minmax(38px,1fr));gap:4px}.cal-cell{min-height:64px;padding:4px;font-size:10px}.cal-person{font-size:9px;padding:1px 4px}}

/* Team Directory */
.directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.directory-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.directory-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}
.directory-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.directory-info b{font-size:14px}
.directory-contact{font-size:12px;color:var(--blue-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Announcements */
.announce-list{display:flex;flex-direction:column;gap:14px}
.announce-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;background:#fbfcfe}
.announce-item.announce-expired{opacity:.6}
.announce-item-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.announce-item p{margin:8px 0;line-height:1.5;white-space:pre-line}

/* Dashboard announcements widget */
.dash-announce{display:flex;flex-direction:column;gap:10px}
.dash-announce-item{border-left:3px solid var(--blue);background:var(--blue-light);border-radius:8px;padding:10px 14px}
.dash-announce-item b{display:block;font-size:13px;color:var(--navy)}
.dash-announce-item p{margin:4px 0 0;font-size:12.5px;color:var(--ink)}

/* Recognition / Employee of the Month */
.recognition-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.recognition-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;text-align:center;box-shadow:var(--shadow-sm)}
.recognition-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#f2bb3d,#d89d16);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;margin:0 auto 10px}
.recognition-card .month-tag{font-size:11px;font-weight:800;color:var(--amber);text-transform:uppercase;letter-spacing:.6px}
.recognition-card p{font-size:12.5px;color:var(--muted);margin-top:6px}

/* Asset Tracking */
.badge.assigned{background:var(--blue-light);color:var(--blue-2);padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800}
.badge.returned{background:var(--green-light);color:var(--green);padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800}

/* Salary Revision History */
.revision-list{display:flex;flex-direction:column;gap:8px}
.revision-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:8px;padding:9px 13px;font-size:13px}
.revision-item .rv-amt{font-weight:800;color:var(--green)}

/* OTP login step */
.otp-input{letter-spacing:8px;font-size:22px;text-align:center;font-weight:800}

:root[data-theme="dark"] .cal-cell{background:#0e1c30;border-color:var(--line)}
:root[data-theme="dark"] .cal-cell.cal-holiday{background:#3a2c0c;border-color:#5a4614}
:root[data-theme="dark"] .cal-person{background:#152944;color:#8fc4ff}
:root[data-theme="dark"] .directory-card{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] .announce-item{background:#0e1c30;border-color:var(--line)}
:root[data-theme="dark"] .dash-announce-item{background:#152944;border-left-color:var(--blue)}
:root[data-theme="dark"] .dash-announce-item b{color:#cfe3fb}
:root[data-theme="dark"] .recognition-card{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] .badge.assigned{background:#152944;color:#8fc4ff}
:root[data-theme="dark"] .badge.returned{background:#123526;color:#7cf0bc}
:root[data-theme="dark"] .revision-item{border-color:var(--line)}

/* ==========================================================================
   v45 — Smart Attendance (Today card, selfie camera, review board)
   ========================================================================== */
.punch-card{border:1px solid var(--line-2)}
.punch-badge{padding:7px 14px;border-radius:999px;font-weight:800;font-size:12px;background:#eef2f7;color:#2c3e5c;white-space:nowrap}
.punch-badge.b-in{background:var(--green-light);color:#13744d}
.punch-badge.b-done{background:var(--blue-light);color:var(--blue-2)}
.punch-badge.b-late{background:var(--amber-light);color:#8a6508}
.punch-badge.b-leave{background:var(--red-light);color:#a52d25}
.punch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 12px}
.punch-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.punch-stat small{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.3px}
.punch-stat b{display:block;font-size:16px;margin-top:3px;overflow-wrap:anywhere}
.punch-geo{font-size:12.5px;margin:4px 0 10px}
.punch-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.punch-row input[type=text],.punch-row input:not([type]){flex:1;min-width:180px}
.punch-half{display:flex;gap:6px;align-items:center;font-weight:600;font-size:13px;white-space:nowrap}
.punch-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.punch-actions .primary,.punch-actions .btn{min-height:46px;padding:0 22px;font-size:15px}
.punch-actions button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.punch-visit{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;background:var(--amber-light);border:1px solid #f1dfae;border-radius:12px;padding:10px 14px;margin-bottom:12px;font-weight:600}
.punch-push{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 14px;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:12px;font-size:13px}
@media(max-width:700px){.punch-grid{grid-template-columns:1fr 1fr}.punch-actions .primary,.punch-actions .btn{flex:1 1 100%;min-height:52px}}

.nxs-cam{position:fixed;inset:0;z-index:10000;background:rgba(10,20,35,.72);display:flex;align-items:center;justify-content:center;padding:14px}
.nxs-cam-box{background:var(--card);color:var(--ink);border-radius:18px;width:100%;max-width:440px;padding:18px;box-shadow:var(--shadow-lg)}
.nxs-cam-box h3{margin:0 0 4px;font-size:18px}
.nxs-cam-hint{margin:0 0 12px;color:var(--muted);font-size:13px}
.nxs-cam-stage{position:relative;width:100%;aspect-ratio:4/3;background:#0b1626;border-radius:14px;overflow:hidden}
.nxs-cam-stage video,.nxs-cam-stage img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.nxs-cam-stage img.nxs-cam-shot{transform:none}
.nxs-cam-ring{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:3/4;transform:translate(-50%,-50%);border:3px dashed rgba(255,255,255,.75);border-radius:50%;pointer-events:none}
.nxs-cam-msg{color:#a52d25;font-size:12.5px;min-height:18px;margin:8px 0 0}
.nxs-cam-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}

.sel-thumb{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--line-2);cursor:zoom-in;display:block;background:#eef2f7}
.sel-lightbox{position:fixed;inset:0;z-index:10001;background:rgba(10,20,35,.85);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.sel-lightbox img{max-width:min(92vw,720px);max-height:88vh;border-radius:14px;box-shadow:var(--shadow-lg)}
.flag-chip{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:999px;background:#fde8e6;color:#a52d25;font-size:10.5px;font-weight:800}
.flag-chip.soft{background:#fff3cf;color:#8a6508}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#eef2f7;color:#2c3e5c}
.chip.ok{background:#e3f6ec;color:#13744d}.chip.warn{background:#fff3cf;color:#8a6508}.chip.bad{background:#fde8e6;color:#a52d25}.chip.info{background:var(--blue-light);color:var(--blue-2)}
.rv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:6px}
.rv-grid .stat b{font-size:22px}
@media(max-width:900px){.rv-grid{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   v47 — richer salary slip
   ========================================================================== */
.slip-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.slip-two table,.slip-ytd{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.slip-two th,.slip-ytd th{background:#eef4fb}
.slip-two tfoot td,.earn-ded-grid tfoot td{font-weight:800;background:#f4f8fd}
.slip-note{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.slip-dates{display:block;font-size:10.5px;color:var(--muted-2);font-weight:600}
td.zero,.zero{color:#9aa7b8!important}
td.muted-col{color:var(--muted-2)}
:root[data-theme="dark"] .slip-two th,:root[data-theme="dark"] .slip-ytd th{background:#12233a}
:root[data-theme="dark"] .slip-two tfoot td,:root[data-theme="dark"] .earn-ded-grid tfoot td{background:#12233a}
@media(max-width:760px){.slip-two{grid-template-columns:1fr}}
@media print{
  .slip-two{gap:10px}
  .slip-note{font-size:9px;margin-top:4px}
  .slip-dates{font-size:8.5px}
  .slip-two th,.slip-two td,.slip-ytd th,.slip-ytd td{padding:3px 7px!important}
  .earn-ded-grid th,.earn-ded-grid td{padding:3px 7px!important}
  .info-grid .info-row{padding:3px 16px!important}
  .slip-signatures{margin-top:16px!important}
  .slip-section-title{margin:8px 0 4px!important}
  .slip-id{margin-bottom:6px!important}
  .slip-header{padding:10px 20px!important}
  .slip-net-strip{padding:8px 14px!important;margin-top:8px!important}
  .slip-net-strip small{font-size:8.5px}
  .slip-footer-note{margin-top:8px!important;padding-top:6px!important}
  .slip-body{padding:10px 20px!important}
  .salary-slip{zoom:.93}
}

/* ==========================================================================
   v49 — employee home (mobile-first quick actions)
   ========================================================================== */
.home-hello{margin:2px 0 12px}
.home-greet{font-size:22px;font-weight:800;letter-spacing:-.2px}
.home-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.home-tile{display:flex;flex-direction:column;gap:3px;align-items:flex-start;justify-content:center;min-height:92px;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow-sm,0 1px 2px rgba(15,35,60,.06));text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
.home-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 8px 22px rgba(15,35,60,.12))}
.home-tile:active{transform:scale(.98)}
.home-tile .ht-ico{font-size:24px;line-height:1;margin-bottom:4px}
.home-tile b{font-size:14.5px}
.home-tile small{color:var(--muted);font-size:12px;font-weight:600}
.home-tile.primary-tile{background:linear-gradient(135deg,#0e2f52,#1478f5);color:#fff;border-color:transparent}
.home-tile.primary-tile small{color:#d6e8ff}
@media(max-width:900px){.home-tiles{grid-template-columns:repeat(2,1fr);gap:10px}.home-tile{min-height:84px;padding:12px 14px}.home-greet{font-size:20px}}

/* v52 — compact leave summary on the payslip */
.slip-leave{width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden;table-layout:fixed}
.slip-leave th{background:#eef4fb;font-size:10.5px;padding:6px 8px;text-align:center;text-transform:none;letter-spacing:0}
.slip-leave td{text-align:center;padding:6px 8px;font-weight:700}
:root[data-theme="dark"] .slip-leave th{background:#12233a}
@media print{ .slip-leave th{font-size:8.5px;padding:2px 4px!important} .slip-leave td{padding:2px 4px!important;font-size:10px} }

/* v53 — Work Sites: employee / mode / sites / save are real columns under their headers */
.site-checks{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.site-checks label{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:12.5px;margin:0;white-space:nowrap;cursor:pointer}
.site-checks input[type=checkbox]{width:16px;height:16px;margin:0;flex:0 0 auto}

/* ==========================================================================
   v54 — long text WRAPS inside its cell instead of running over the next column
   (table cells are nowrap by default so numbers/dates stay on one line; a cell that has a
   max-width, or that holds a long sentence, must be allowed to wrap)
   ========================================================================== */
td[style*="max-width"],td.wrap-cell{white-space:normal;overflow-wrap:anywhere;word-break:normal;vertical-align:top}
td[style*="max-width"]{min-width:170px}
td.wrap-cell{min-width:200px;max-width:420px}
.table-wrap td .flag-chip{white-space:nowrap}

/* v54 — grid / toolbar children may shrink below their content width, so long labels, inputs and buttons
   wrap or shrink inside their own column instead of pushing past the card edge */
.toolbar>*{min-width:0}
.toolbar input,.toolbar select,.toolbar textarea{min-width:0;max-width:100%}
.toolbar .btn,.toolbar button{white-space:normal}
.card label{overflow-wrap:break-word}
.card code,code{overflow-wrap:anywhere}

/* ==========================================================================
   v57 — grouped sidebar (modules)
   ========================================================================== */
.side-search{padding:2px 4px 10px}
.side-search input{width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:10px;padding:9px 12px;font-size:13px;outline:none}
.side-search input::placeholder{color:#9db8d6}.side-search input:focus{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.side-group{margin:2px 0}
.side-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;color:#c3d6ec;padding:10px 13px;border-radius:10px;font-weight:750;font-size:13.2px;user-select:none;transition:background .15s}
.side-group>summary::-webkit-details-marker{display:none}
.side-group>summary:hover{background:rgba(255,255,255,.07);color:#fff}
.side-group>summary .ico{width:22px;text-align:center;font-size:15px;opacity:.95}
.side-group>summary .gt{flex:1}
.side-group>summary .chev{font-size:17px;opacity:.7;transition:transform .18s}
.side-group[open]>summary{color:#fff}.side-group[open]>summary .chev{transform:rotate(90deg)}
.side-sub{margin:2px 0 6px 14px;padding-left:8px;border-left:1px solid rgba(255,255,255,.14)}
.side-sub a{padding:8.5px 11px!important;font-size:13px;font-weight:600!important;margin-bottom:1px!important}
.side-sub a .ico{font-size:13.5px!important;width:20px!important}
.side-badge{margin-left:auto;background:#e5484d;color:#fff;border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 7px;line-height:1.5}
.side a.nxs-hide,.side-group.nxs-hide{display:none}
.bn-drawer .side-search input{background:#eef3f9;color:#16263d;border-color:#d5dfec}
.bn-drawer .side-group>summary{color:#25405f}.bn-drawer .side-sub{border-left-color:#d5dfec}
.bn-drawer .side-group[open]>summary{color:#0e2f52}

/* ==========================================================================
   v58 — interactive side menu: sticky, scrolls on its own, accordion, narrow rail
   ========================================================================== */
.app{align-items:flex-start}
.side{position:sticky;top:74px;height:calc(100vh - 74px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;transition:width .2s ease,flex-basis .2s ease;padding-bottom:40px}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:6px}.side::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}
.side-tools{display:flex;gap:6px;align-items:center;padding:0 2px 10px;position:sticky;top:-20px;z-index:3;background:linear-gradient(180deg,var(--navy) 70%,rgba(0,0,0,0));margin:-20px -12px 4px;padding:20px 12px 10px}
.side-tools .side-search{flex:1;padding:0}
.side-btn{flex:0 0 auto;width:32px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#dbe9f8;cursor:pointer;font-size:14px;line-height:1}
.side-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.side-group[open]>.side-sub{animation:nxsSubIn .2s ease}
@keyframes nxsSubIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.side-group>summary{position:relative}
.side-group>summary:focus-visible,.side a:focus-visible{outline:2px solid #7db8ff;outline-offset:-2px}
.side-badge.gb{margin-left:auto;margin-right:6px;background:#f59e0b}
.side a .side-badge{margin-left:auto}
.side-group.has-active>summary{color:#fff;background:rgba(255,255,255,.07)}
/* narrow rail: only icons; clicking a module opens the menu again */
body.side-collapsed .side{width:62px;flex-basis:62px;padding-left:8px;padding-right:8px}
body.side-collapsed .side-tools{margin:-20px -8px 4px;padding:20px 8px 10px;flex-direction:column}
body.side-collapsed .side-search,body.side-collapsed .side-label,body.side-collapsed .side-group>summary .gt,body.side-collapsed .side-group>summary .chev,body.side-collapsed .side-group>summary .side-badge,body.side-collapsed .side-sub,body.side-collapsed .side>a>span:not(.ico):not(.side-badge){display:none}
body.side-collapsed .side>a,body.side-collapsed .side-group>summary{justify-content:center;padding:11px 0}
body.side-collapsed .side>a .side-badge{display:none}
.side a[data-tip]{position:relative}
@media(max-width:920px){body.side-collapsed .side{width:auto}}

/* v58 — Hindi interface: a Devanagari font stack and a little more line height */
html[lang="hi"] body{font-family:var(--font),"Nirmala UI","Noto Sans Devanagari","Mangal","Kohinoor Devanagari","Lohit Devanagari",sans-serif;line-height:1.55}
html[lang="hi"] .side a,html[lang="hi"] .side summary{line-height:1.35}

:root[data-theme="dark"] .side-tools{background:linear-gradient(180deg,#0a1626 70%,rgba(0,0,0,0))}
.bn-drawer .side-tools{position:static;margin:0 0 6px;padding:0;background:none}.bn-drawer #nxsSideRail,.bn-drawer #nxsSideAll{display:none}
.bn-drawer .side-btn{background:#eef3f9;color:#25405f;border-color:#d5dfec}