*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f0f2f5;
  --surface:#fff;
  --surface2:#f0f2f5;
  --ink:#1c1e21;
  --ink2:#65676b;
  --ink3:#8a8d91;
  --accent:#1877f2;
  --accent-dark:#166fe5;
  --accent-bg:#e7f3ff;
  --green:#42b72a;
  --green-bg:#e6f7e3;
  --red:#fa3e3e;
  --red-bg:#fde8e8;
  --amber:#f7971e;
  --amber-bg:#fff3d6;
  --orange:#e67e22;
  --orange-bg:#fef0e4;
  --border:#dddfe2;
  --radius:8px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(0,0,0,0.1),0 0 0 1px rgba(0,0,0,0.05);
  --sidebar-w:245px;
  --header-h:62px;
  --font:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;font-size:15px}

/* LOGIN */
#login-screen{display:grid;min-height:100vh;grid-template-columns:1fr 1fr}
@media(max-width:768px){#login-screen{grid-template-columns:1fr}}
.login-left{background:linear-gradient(160deg,#1877f2 0%,#0e5fc0 60%,#0a4a9a 100%);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
@media(max-width:768px){.login-left{display:none}}
.ll-brand{display:flex;align-items:center;gap:14px}
.ll-brand h1{font-size:1.5rem;font-weight:700}
.ll-brand p{font-size:0.82rem;color:rgba(255,255,255,0.7);margin-top:2px}
.ll-hero h2{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:14px;letter-spacing:-0.02em}
.ll-hero p{color:rgba(255,255,255,0.75);font-size:0.95rem;line-height:1.7;max-width:380px}
.ll-feat{display:flex;align-items:center;gap:10px;font-size:0.88rem;color:rgba(255,255,255,0.8);margin-bottom:12px}
.ll-feat-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.5);flex-shrink:0}
.login-right{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:48px}
.login-box{width:100%;max-width:400px}
.lb-logo{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.lb-logo h2{font-size:1.7rem;font-weight:800;color:var(--accent)}
.lcard{background:var(--surface);border-radius:var(--radius);box-shadow:0 2px 16px rgba(0,0,0,0.12);padding:28px}
.lcard h3{font-size:1.5rem;font-weight:700;margin-bottom:4px}
.lcard .sub{color:var(--ink2);font-size:0.9rem;margin-bottom:22px}
.fg{margin-bottom:13px}
.fg label{display:block;font-size:0.82rem;font-weight:600;margin-bottom:5px;color:var(--ink2)}
.fg input,.fg select{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:0.9rem;background:var(--surface);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.fg input:focus,.fg select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,119,242,.15)}
.fg select{appearance:none;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:var(--radius-sm);font-family:var(--font);font-size:0.9rem;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent-dark)}
.btn-o{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}.btn-o:hover{background:var(--accent-bg)}
.btn-g{background:transparent;color:var(--ink2);border:1px solid var(--border)}.btn-g:hover{background:var(--surface2)}
.btn-full{width:100%;padding:13px}
.btn-sm{padding:6px 12px;font-size:0.82rem}
.login-hint{margin-top:14px;font-size:0.78rem;color:var(--ink3);text-align:center}
.login-hint code{font-family:monospace;background:var(--surface2);padding:1px 5px;border-radius:4px}

/* APP */
#app{display:none;min-height:100vh}
.topbar{position:fixed;top:0;left:0;right:0;height:62px;background:var(--accent);box-shadow:0 3px 10px rgba(0,0,0,.2);display:flex;align-items:center;padding:0 20px;gap:16px;z-index:200}
.tb-brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:900;font-size:1.45rem;min-width:var(--sidebar-w);letter-spacing:-.02em;text-shadow:0 1px 3px rgba(0,0,0,.15)}
.tb-search{flex:1;max-width:560px;position:relative}
.tb-search-inner{display:flex;align-items:center;background:rgba(255,255,255,.22);border-radius:10px;border:1.5px solid rgba(255,255,255,.35);transition:all .15s;overflow:visible}
.tb-search-inner:focus-within{background:#fff;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.tb-search-inner svg{flex-shrink:0;margin-left:10px;width:15px;height:15px;color:rgba(255,255,255,.7);transition:color .15s}
.tb-search-inner:focus-within svg{color:#1877f2}
.tb-search-inner input{flex:1;padding:10px 8px 10px 6px;border:none;background:transparent;color:#fff;font-family:var(--font);font-size:.92rem;outline:none;min-width:0;font-weight:500}
.tb-search-inner input::placeholder{color:rgba(255,255,255,.6)}
.tb-search-inner:focus-within input{color:#1a1a1a}
.tb-search-inner:focus-within input::placeholder{color:#aaa}
.tb-search-tag{display:flex;align-items:center;gap:4px;background:#f59e0b;color:#1a1a00;border-radius:4px;padding:2px 8px 2px 6px;font-size:.73rem;font-weight:700;margin:4px 0 4px 6px;white-space:nowrap;flex-shrink:0}
.tb-search-tag svg{width:10px;height:10px}
.tb-search-tag-x{cursor:pointer;opacity:.7;margin-left:2px;font-size:.8rem;line-height:1}
.tb-search-tag-x:hover{opacity:1}
.tb-search-arrow{padding:0 10px;color:rgba(255,255,255,.6);cursor:pointer;font-size:.75rem;transition:color .15s;flex-shrink:0}
.tb-search-inner:focus-within .tb-search-arrow{color:#666}
/* Smart dropdown */
.search-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #dde;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.15);z-index:9999;overflow:hidden;min-width:460px}
.search-dropdown.open{display:block}
.sd-item{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;font-size:.88rem;color:#1a1a2e;transition:background .1s;border-bottom:1px solid #f5f5f5}
.sd-item:last-child{border-bottom:none}
.sd-item:hover,.sd-item.hovered{background:#f0f4ff}
.sd-item .sd-arrow{width:14px;height:14px;color:#aaa;flex-shrink:0}
.sd-item .sd-label{flex:1}
.sd-item .sd-label strong{color:#1a1a2e;font-weight:700}
.sd-item .sd-label em{color:#7c3aed;font-style:italic;font-weight:500}
.sd-item .sd-count{font-size:.73rem;color:#999;margin-left:auto}
.sd-item.sd-custom{border-top:1px solid #eee;margin-top:2px}
.sd-item.sd-custom .sd-label{color:#1877f2;font-weight:600}
.sd-item.sd-active{background:#f0f4ff;font-weight:600}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tb-icon{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1.5px solid rgba(255,255,255,.25)}
.tb-icon:hover{background:rgba(255,255,255,.25)}
.tb-icon svg{width:20px;height:20px;color:#fff}
.tb-av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.6);cursor:pointer;letter-spacing:.03em}

.layout{display:flex;margin-top:var(--header-h);min-height:calc(100vh - var(--header-h))}

/* SIDEBAR */
.sidebar{position:fixed;top:var(--header-h);left:0;bottom:0;width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;overflow-y:auto}
.sb-co{margin:10px;padding:10px 12px;background:var(--accent-bg);border-radius:var(--radius);border:1px solid rgba(24,119,242,.2)}
.sb-co label{font-size:0.73rem;font-weight:700;color:var(--accent);display:block;margin-bottom:5px}
.sb-co select{width:100%;background:transparent;border:none;font-family:var(--font);font-size:0.85rem;font-weight:500;color:var(--ink);cursor:pointer;outline:none}
.sb-sec{padding:6px 8px}
.sb-lbl{font-size:0.72rem;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.9rem;font-weight:500;color:var(--ink2);transition:all .12s;margin-bottom:1px}
.nav-item:hover{background:var(--surface2);color:var(--accent)}
.nav-item.active{background:var(--accent-bg);color:var(--accent);font-weight:600}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item .bc{margin-left:auto;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;border-radius:10px;padding:1px 6px}
.sb-div{height:1px;background:var(--border);margin:6px 0}
.sb-user{padding:10px;border-top:1px solid var(--border);margin-top:auto}
.u-chip{display:flex;align-items:center;gap:10px;padding:7px;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}
.u-chip:hover{background:var(--surface2)}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0}
.av-lg{width:44px;height:44px;font-size:.95rem}
.u-name{font-size:.85rem;font-weight:600}
.u-role{font-size:.74rem;color:var(--ink3)}

/* MAIN */
.main{margin-left:var(--sidebar-w);flex:1;padding:18px;display:flex;flex-direction:column;gap:18px}

/* CARDS */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.ch{padding:14px 16px;border-bottom:1px solid #f0f2f5;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ct{font-size:.97rem;font-weight:700;color:var(--ink)}
.cd{font-size:.78rem;color:var(--ink3);margin-top:2px}
.cb{padding:14px 16px}

/* STATS */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
.stat-card{background:var(--surface);border-radius:var(--radius);padding:14px;border:1px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:flex-start;gap:11px}
.si{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.si svg{width:19px;height:19px}
.si-blue{background:var(--accent-bg);color:var(--accent)}
.si-green{background:var(--green-bg);color:#2e7d1a}
.si-amber{background:var(--amber-bg);color:#c47b00}
.si-red{background:var(--red-bg);color:#c0392b}
.si-orange{background:var(--orange-bg);color:#a04000}
.sl{font-size:.76rem;color:var(--ink3);font-weight:500}
.sv{font-size:1.65rem;font-weight:700;color:var(--ink);line-height:1.1;margin:3px 0 1px;letter-spacing:-.03em}
.ss{font-size:.71rem;color:var(--ink3)}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.74rem;font-weight:600;border:1px solid transparent}
.b-active,.b-present,.b-verified,.b-approved{color:#1a6b0e;background:#e6f7e3;border-color:#b7ddb0}
.b-leave,.b-on-leave{color:#7d5a00;background:#fff3d6;border-color:#fde58a}
.b-late{color:#a04000;background:var(--orange-bg);border-color:#f5c6a0}
.b-absent{color:#c0392b;background:var(--red-bg);border-color:#f5b7b1}
.b-pending,.b-pending-review{color:#1877f2;background:var(--accent-bg);border-color:#b3d4fc}
.b-expiring{color:#a04000;background:var(--orange-bg);border-color:#f5c6a0}
.b-default{color:var(--ink2);background:var(--surface2);border-color:var(--border)}

/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.g6040{display:grid;grid-template-columns:1.35fr .65fr;gap:15px}
.gemp{display:grid;grid-template-columns:340px 1fr;gap:15px}
@media(max-width:1100px){.g2,.g6040,.gemp{grid-template-columns:1fr}}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
.gc2{grid-column:1/-1}

/* TABLES */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
thead th{padding:9px 12px;text-align:left;font-size:.73rem;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border);white-space:nowrap;background:var(--surface2)}
tbody td{padding:9px 12px;border-bottom:1px solid #f0f2f5;color:var(--ink);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#f7f8fc}

/* ATTENDANCE TABLE */
.att-wrap{overflow-x:auto;max-height:700px;overflow-y:auto;border-radius:0 0 10px 10px;scrollbar-width:auto;scrollbar-color:#1877f2 #c8d8f0}
.att-wrap::-webkit-scrollbar{width:18px;height:18px}
.att-wrap::-webkit-scrollbar-track{background:#c8d8f0;border-radius:0 0 10px 10px;border:1px solid #b0c4e8}
.att-wrap::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#1877f2,#3b82f6);border-radius:12px;border:4px solid #c8d8f0;min-width:120px;min-height:60px}
.att-wrap::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#0e5fc0,#1877f2);border:3px solid #c8d8f0;cursor:grab}
.att-wrap::-webkit-scrollbar-thumb:active{background:#0a4a9a;cursor:grabbing}
.att-wrap::-webkit-scrollbar-corner{background:#c8d8f0}
.att-t{border-collapse:separate;border-spacing:0;font-size:.74rem;min-width:max-content}

/* ── Base header ── */
.att-t th{
  padding:9px 6px;text-align:center;font-size:.72rem;font-weight:800;
  color:#fff;background:#1877f2;
  border-right:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.2);border-top:none;border-left:none;
  white-space:nowrap;position:sticky;top:0;z-index:10;
  letter-spacing:.04em;text-transform:uppercase
}

/* ── FROZEN cols: # / DHR / Name — stay locked during horizontal scroll ── */
.att-t th.f1{position:sticky;left:0;z-index:22;background:#0b3d8c;color:#93c5fd;min-width:36px;width:36px;border-right:2px solid rgba(255,255,255,.35)}
.att-t th.f2{position:sticky;left:36px;z-index:22;background:#1251b5;color:#fff;min-width:106px;width:106px;font-size:.8rem;font-weight:900;letter-spacing:.06em;border-right:2px solid rgba(255,255,255,.3)}
.att-t th.f3{position:sticky;left:142px;z-index:22;background:#1251b5;color:#fff;min-width:168px;width:168px;text-align:left;padding-left:9px;font-size:.76rem;font-weight:800;border-right:3px solid #f59e0b}

/* ── Detail group cols ── */
.att-t th.f4 {position:sticky;left:310px;z-index:20;background:#2563eb;min-width:90px;width:90px;border-right:1px solid rgba(255,255,255,.18)}
.att-t th.f5 {position:sticky;left:400px;z-index:20;background:#2563eb;min-width:90px;width:90px;border-right:1px solid rgba(255,255,255,.18)}
.att-t th.f6 {position:sticky;left:490px;z-index:20;background:#2563eb;min-width:80px;width:80px;border-right:1px solid rgba(255,255,255,.18)}
.att-t th.f7 {position:sticky;left:570px;z-index:20;background:#2563eb;min-width:82px;width:82px;border-right:1px solid rgba(255,255,255,.18)}
.att-t th.f8 {position:sticky;left:652px;z-index:20;background:#2563eb;min-width:82px;width:82px;border-right:1px solid rgba(255,255,255,.18)}
.att-t th.f9 {position:sticky;left:734px;z-index:20;background:#2563eb;min-width:62px;width:62px;border-right:1px solid rgba(255,255,255,.18)}
.att-t th.f10{position:sticky;left:796px;z-index:20;background:#2563eb;min-width:84px;width:84px;border-right:3px solid rgba(245,158,11,.8)}

/* ── Body frozen cells ── */
.att-t td.f1{left:0;z-index:8;position:sticky;background:#eef2ff;text-align:center;font-weight:700;color:#6b7db3;min-width:36px;width:36px;border-right:2px solid #c7d7f5;border-bottom:1px solid #e2e8f0}
.att-t td.f2{left:36px;z-index:8;position:sticky;background:#fff;font-weight:900;color:#1877f2;font-family:monospace;font-size:1.01rem;min-width:106px;width:106px;border-right:2px solid #c7d7f5;letter-spacing:.03em;border-bottom:1px solid #e2e8f0;text-align:center;padding:5px 4px}
.att-t td.f3{left:142px;z-index:8;position:sticky;background:#fff;text-align:left;font-weight:600;font-size:.8rem;min-width:168px;width:168px;padding-left:9px;color:#111;border-right:3px solid #f59e0b;border-bottom:1px solid #e2e8f0}
.att-t td.f4 {left:310px;z-index:6;position:sticky;background:#f8faff;text-align:center;font-size:.72rem;color:#374151;min-width:90px;width:90px;border-right:1px solid #dde5f5;border-bottom:1px solid #e2e8f0}
.att-t td.f5 {left:400px;z-index:6;position:sticky;background:#f8faff;text-align:center;font-size:.72rem;color:#374151;min-width:90px;width:90px;border-right:1px solid #dde5f5;border-bottom:1px solid #e2e8f0}
.att-t td.f6 {left:490px;z-index:6;position:sticky;background:#f8faff;text-align:center;font-size:.72rem;color:#374151;min-width:80px;width:80px;border-right:1px solid #dde5f5;border-bottom:1px solid #e2e8f0}
.att-t td.f7 {left:570px;z-index:6;position:sticky;background:#f8faff;text-align:center;font-size:.72rem;color:#374151;min-width:82px;width:82px;border-right:1px solid #dde5f5;border-bottom:1px solid #e2e8f0}
.att-t td.f8 {left:652px;z-index:6;position:sticky;background:#f8faff;text-align:center;font-size:.72rem;color:#374151;min-width:82px;width:82px;border-right:1px solid #dde5f5;border-bottom:1px solid #e2e8f0}
.att-t td.f9 {left:734px;z-index:6;position:sticky;background:#f8faff;text-align:center;font-size:.72rem;color:#374151;min-width:62px;width:62px;border-right:1px solid #dde5f5;border-bottom:1px solid #e2e8f0}
.att-t td.f10{left:796px;z-index:6;position:sticky;background:#f8faff;text-align:right;font-size:.72rem;font-weight:700;color:#1877f2;min-width:84px;width:84px;padding-right:8px;border-right:3px solid rgba(245,158,11,.6);border-bottom:1px solid #e2e8f0}

/* ── Group heading rows ── */
.att-grp-detail{background:linear-gradient(90deg,#1e40af,#2563eb)!important;color:#bfdbfe!important;font-size:.7rem!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important;border-bottom:2px solid #60a5fa!important}
.att-grp-attend{background:linear-gradient(90deg,#065f46,#059669)!important;color:#a7f3d0!important;font-size:.7rem!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important;border-bottom:2px solid #34d399!important}
.att-grp-frozen{background:#0f172a!important;color:#64748b!important;border-bottom:2px solid #1e293b!important}

/* ── Day headers — flat clean color (no gradient) ── */
.att-day-hd{
  background:#bfdbfe!important;color:#1e3a8a!important;
  font-size:.73rem!important;font-weight:800!important;
  border-left:2px solid rgba(30,58,138,.2)!important;
  border-right:none!important;min-width:46px;padding:6px 3px!important
}
.att-day-hd.dsat{background:#fde68a!important;color:#78350f!important;border-left:2px solid rgba(180,140,0,.3)!important}
.att-day-hd.dsun{background:#fecdd3!important;color:#9f1239!important;border-left:2px solid rgba(190,18,60,.3)!important}
.att-ot-hd{
  background:#dbeafe!important;color:#1d4ed8!important;
  font-size:.62rem!important;font-weight:800!important;
  min-width:36px;padding:6px 2px!important;
  border-left:none!important;border-right:2px solid rgba(30,58,138,.2)!important
}
.att-ot-hd.dsat{background:#fef3c7!important;color:#b45309!important}
.att-ot-hd.dsun{background:#ffe4e6!important;color:#be123c!important}

/* ── Summary headers ── */
.att-t th.sum-sl{background:#7c3aed!important;color:#fff;font-weight:900;font-size:.78rem;min-width:50px;border-left:2px solid rgba(255,255,255,.3)}
.att-t th.sum-p {background:#059669!important;color:#fff;font-weight:900;font-size:.78rem;min-width:50px}
.att-t th.sum-wo{background:#2563eb!important;color:#fff;font-weight:900;font-size:.78rem;min-width:50px}
.att-t th.sum-wp{background:#dc2626!important;color:#fff;font-weight:900;font-size:.78rem;min-width:50px}
.att-t th.sum-ab{background:#b91c1c!important;color:#fff;font-weight:900;font-size:.82rem;min-width:54px}
.att-t th.sum-f {background:#d97706!important;color:#fff;font-weight:900;font-size:.78rem;min-width:50px}
.att-t th.sum-ot{background:#b45309!important;color:#fff;font-weight:900;font-size:.78rem;min-width:54px}

/* ── Summary body cells — BIG attractive ── */
.att-t td.sum-sl{background:#f5f3ff!important;color:#5b21b6;font-weight:900;font-size:1rem;text-align:center;padding:8px 4px;border-bottom:1px solid #ddd6fe;border-left:2px solid #c4b5fd;min-width:50px}
.att-t td.sum-p {background:#ecfdf5!important;color:#064e3b;font-weight:900;font-size:1rem;text-align:center;padding:8px 4px;border-bottom:1px solid #a7f3d0;min-width:50px}
.att-t td.sum-wo{background:#eff6ff!important;color:#1e3a8a;font-weight:900;font-size:1rem;text-align:center;padding:8px 4px;border-bottom:1px solid #bfdbfe;min-width:50px}
.att-t td.sum-wp{background:#fff1f2!important;color:#881337;font-weight:900;font-size:1rem;text-align:center;padding:8px 4px;border-bottom:1px solid #fecdd3;min-width:50px}
.att-t td.sum-ab{background:#fee2e2!important;color:#7f1d1d;font-weight:900;font-size:1.1rem;text-align:center;padding:8px 4px;border-bottom:1px solid #fca5a5;min-width:54px}
.att-t td.sum-f {background:#fffbeb!important;color:#78350f;font-weight:900;font-size:1rem;text-align:center;padding:8px 4px;border-bottom:1px solid #fde68a;min-width:50px}
.att-t td.sum-ot{background:#fef3c7!important;color:#92400e;font-weight:900;font-size:1rem;text-align:center;padding:8px 4px;border-bottom:1px solid #fde68a;min-width:54px}

/* ── Weekend cols ── */
.att-t .dsat{background:#fef9c3!important}
.att-t .dsun{background:#fee2e2!important}

/* ── Body cells ── */
.att-t td{padding:2px 3px;border:none;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;text-align:center;vertical-align:middle;transition:background .08s}
.att-t tbody tr:nth-child(even) td{background:#f8faff}
.att-t tbody tr:nth-child(even) td.f1{background:#e8efff!important}
.att-t tbody tr:nth-child(even) td.f2{background:#f0f5ff!important}
.att-t tbody tr:nth-child(even) td.f3{background:#fafbff!important}
.att-t tbody tr:nth-child(even) td.f4,.att-t tbody tr:nth-child(even) td.f5,
.att-t tbody tr:nth-child(even) td.f6,.att-t tbody tr:nth-child(even) td.f7,
.att-t tbody tr:nth-child(even) td.f8,.att-t tbody tr:nth-child(even) td.f9,
.att-t tbody tr:nth-child(even) td.f10{background:#f0f4ff!important}
.att-t tbody tr:hover td{background:#dbeafe!important}
.att-t tbody tr:hover td.f1,.att-t tbody tr:hover td.f2,.att-t tbody tr:hover td.f3{background:#bfdbfe!important}
.att-t tbody tr:hover td.f4,.att-t tbody tr:hover td.f5,
.att-t tbody tr:hover td.f6,.att-t tbody tr:hover td.f7,
.att-t tbody tr:hover td.f8,.att-t tbody tr:hover td.f9,
.att-t tbody tr:hover td.f10{background:#dbeafe!important}

/* ── Attendance select ── */
.as{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;background:transparent;font-family:var(--font);font-size:.72rem;font-weight:800;cursor:pointer;outline:none;padding:4px 2px;width:44px;text-align:center;border-radius:5px;display:block;margin:0 auto;text-align-last:center;color:#fff}
.as:hover{filter:brightness(.9)}
/* Weekend cell ATT select restore colors */
.att-t td.dsat .as,.att-t td.dsat .as:hover{color:#78350f!important}
.att-t td.dsun .as,.att-t td.dsun .as:hover{color:#9f1239!important}
/* Weekend OT inputs restore colors */
.att-t td.dsat .att-ot-inp{background:#fef3c7!important;color:#92400e!important;border-color:#fcd34d;font-weight:900}
.att-t td.dsun .att-ot-inp{background:#ffe4e6!important;color:#9f1239!important;border-color:#fda4af;font-weight:900}

.ap {color:#065f46;background:#bbf7d0}.awp{color:#9f1239;background:#fecdd3}
.awo{color:#1e40af;background:#bfdbfe}.aab{color:#7f1d1d;background:#fca5a5;font-weight:900}
.aal{color:#78350f;background:#fde68a}.asl{color:#5b21b6;background:#ddd6fe}
.aph{color:#155e75;background:#a5f3fc}.aoff{color:#7c2d12;background:#fed7aa}.af{color:#fff;background:#dc2626;font-weight:900}

/* ── OT input ── */
.att-ot-inp{width:38px;border:1.5px solid rgba(0,0,0,.18);border-radius:4px;font-size:.82rem;font-weight:900;padding:3px 2px;text-align:center;background:#fff8e1;color:#1a1a1a;font-family:var(--font);outline:none;display:block;margin:0 auto;-moz-appearance:textfield;appearance:textfield}
.att-ot-inp::-webkit-outer-spin-button,.att-ot-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.att-ot-inp:focus{border-color:#f59e0b;background:#fffde7;box-shadow:0 0 0 2px rgba(245,158,11,.2);color:#1a1a1a}
.att-ot-inp::placeholder{color:#bbb;font-size:.72rem}

/* ── Attendance period selector ── */
.att-period-sel{padding:6px 12px;border-radius:7px;font-family:var(--font);font-size:.82rem;font-weight:700;background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.8)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px}
.att-period-sel option{color:#111;background:#fff}
.att-period-sel:focus{background-color:rgba(255,255,255,.25);box-shadow:0 0 0 2px rgba(255,255,255,.3)}

/* ── Detail-field: view-only in normal mode, editable only via Edit button ── */
.detail-field{cursor:default;position:relative}
.detail-field:hover{background:#f8faff;border-radius:4px}
.detail-field.edit-mode .df-val{display:none!important}
.detail-field.edit-mode .df-edit{display:inline-block!important}
.detail-field .df-edit{display:none;width:calc(100% - 8px);border:2px solid var(--accent);border-radius:5px;padding:4px 8px;font-family:var(--font);font-size:.82rem;color:var(--ink);outline:none;background:#f0f7ff;box-shadow:0 0 0 3px rgba(24,119,242,.12)}
.detail-field.edit-mode::after{display:none}

/* ── Collapsible group toggle ── */
.att-grp-toggle{cursor:pointer;user-select:none;font-size:.7rem;padding:0 4px;opacity:.8}
.att-grp-toggle:hover{opacity:1}

.dhn{font-size:.76rem;font-weight:800;display:block;line-height:1.2}
.dhs{font-size:.58rem;font-weight:600;opacity:.85;display:block;letter-spacing:.03em}
.att-leg{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.att-leg-i{display:flex;align-items:center;gap:4px;font-size:.74rem;font-weight:500}
.att-leg-b{width:22px;height:17px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700}

/* EMP CARDS */
.emp-card{border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;background:var(--surface);cursor:pointer;transition:all .12s}
.emp-card:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,119,242,.1)}
.emp-card.sel{border-color:var(--accent);background:var(--accent-bg)}
.eg{display:grid;grid-template-columns:1fr;gap:7px}
@media(max-width:700px){.eg{grid-template-columns:1fr}}
.ect{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:0}
.eci h3{font-size:.87rem;font-weight:600}
.eci p{font-size:.77rem;color:var(--ink2);margin-top:1px}
.eci small{font-size:.82rem;color:var(--accent);font-family:monospace;font-weight:800;letter-spacing:.02em}
.em{display:none}
.emr{display:flex;justify-content:space-between}
.emr span:last-child{font-weight:600;color:var(--ink)}

/* MISC */
.page-anim{animation:fadeUp .25s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hidden{display:none!important}
.chart-box{height:255px;position:relative}
.mc{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:var(--surface)}
.mc .lbl{font-size:.73rem;color:var(--ink3);font-weight:500;margin-bottom:4px}
.mc .val{font-size:1.38rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.si-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer;transition:background .12s;margin-bottom:6px}
.si-item:hover{background:var(--accent-bg);border-color:var(--accent)}
.pw{height:6px;background:#f0f2f5;border-radius:20px;overflow:hidden}
.pb{height:100%;background:var(--accent);border-radius:20px;transition:width .4s}
.ps{border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px;background:var(--surface)}
.ps .lbl{font-size:.75rem;color:var(--ink3);font-weight:500}
.ps .val{font-size:1.05rem;font-weight:700;margin-top:4px;color:var(--ink)}
.notif{display:flex;gap:10px;padding:11px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:7px}
.ni{width:33px;height:33px;border-radius:50%;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ni svg{width:14px;height:14px;color:var(--accent)}
.notif h4{font-size:.84rem;font-weight:600;margin-bottom:1px}
.notif p{font-size:.77rem;color:var(--ink3)}
.ri{display:flex;gap:10px;padding:11px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:7px}
.ric{width:35px;height:35px;border-radius:50%;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ric svg{width:14px;height:14px;color:var(--accent)}
.ri h4{font-size:.84rem;font-weight:600;margin-bottom:2px}
.ri p{font-size:.77rem;color:var(--ink3);line-height:1.4}
.dz{border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:22px;text-align:center;color:var(--ink3);font-size:.82rem;cursor:pointer;transition:border-color .15s}
.dz:hover{border-color:var(--accent);background:var(--accent-bg)}
.dz svg{width:21px;height:21px;margin:0 auto 7px;display:block;color:var(--accent)}
.dg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.di{border:1px solid #f0f2f5;border-radius:var(--radius-sm);padding:10px;background:var(--surface2)}
.di .lbl{font-size:.69rem;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.di .val{font-size:.87rem;font-weight:600;color:var(--ink)}
.ri-icon{width:37px;height:37px;border-radius:50%;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.ri-icon svg{width:16px;height:16px;color:var(--accent)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
.mp{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600}
.mp button{background:var(--accent-bg);border:none;border-radius:50%;width:27px;height:27px;cursor:pointer;color:var(--accent);font-size:1rem;display:flex;align-items:center;justify-content:center}
.mp button:hover{background:var(--accent);color:#fff}
.db-t td:first-child{font-family:monospace;font-size:.77rem;color:var(--accent);font-weight:600}
.db-t td:nth-child(2){font-family:monospace;font-size:.75rem;color:var(--ink3)}
.db-t td:nth-child(3){font-family:monospace;font-size:.75rem;color:var(--ink2);line-height:1.4}
::-webkit-scrollbar{width:10px;height:12px}::-webkit-scrollbar-track{background:#dde4f0;border-radius:10px}::-webkit-scrollbar-thumb{background:#7a9fd4;border-radius:10px;border:2px solid #dde4f0}::-webkit-scrollbar-thumb:hover{background:#1877f2}

/* VIEW SWITCHER */
.view-sw{display:flex;gap:3px;background:var(--surface2);border-radius:var(--radius-sm);padding:3px}
.vs-btn{padding:5px 10px;border:none;border-radius:4px;font-family:var(--font);font-size:.78rem;font-weight:600;cursor:pointer;background:transparent;color:var(--ink2);display:flex;align-items:center;gap:5px;transition:all .12s}
.vs-btn svg{width:14px;height:14px}
.vs-btn.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
.vs-btn:not(.active):hover{color:var(--ink)}

/* EMPLOYEE LIST TABLE VIEW */
.emp-list-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 320px);min-height:200px;border-radius:0 0 12px 12px}
.emp-list-t{width:100%;border-collapse:collapse;font-size:.82rem;min-width:1200px}
.emp-list-t thead th{padding:8px 11px;text-align:left;font-size:.71rem;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border);background:var(--surface2);white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;z-index:10}
.emp-list-t thead th:hover{color:var(--accent)}
.emp-list-t thead th svg{display:inline;width:11px;height:11px;margin-left:3px;opacity:.5}
.emp-list-t tbody td{padding:8px 11px;border-bottom:1px solid #f0f2f5;vertical-align:middle;color:var(--ink)}
.emp-list-t tbody tr:last-child td{border-bottom:none}
.emp-list-t tbody tr:hover td{background:#f7f8fc;cursor:pointer}
.emp-list-t .emp-av-sm{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:.67rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.emp-list-t .emp-name-cell{display:flex;align-items:center;gap:8px}
.emp-list-t .col-mono{font-family:monospace;font-size:1.0rem;color:var(--accent);font-weight:800}
.emp-list-t .col-sm{font-size:.79rem;color:#111}

/* PIVOT / ANALYTICS VIEW */
.pivot-wrap{overflow-x:auto}
/* Odoo-style pivot */
.pv-layout{display:flex;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.pv-sidebar{width:220px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface)}
.pv-sidebar-title{padding:12px 14px;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--border)}
.pv-sidebar-title svg{width:15px;height:15px;color:#7c3aed}
.pv-dept-item{padding:9px 14px;font-size:.87rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .1s;border-bottom:1px solid #f5f6f7}
.pv-dept-item:hover{background:#f5f7fb}
.pv-dept-item.active{background:#f0f4ff;font-weight:700;color:var(--accent)}
.pv-dept-item .dept-cnt{font-size:.75rem;font-weight:700;color:var(--ink3);background:var(--surface2);border-radius:10px;padding:1px 7px}
.pv-dept-item.active .dept-cnt{background:var(--accent);color:#fff}
.pv-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pv-toolbar{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv-btn{padding:6px 14px;border-radius:var(--radius-sm);font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .12s;border:1px solid var(--border);background:var(--surface);color:var(--ink2)}
.pv-btn:hover{background:var(--surface2)}
.pv-btn.primary{background:#7c3aed;color:#fff;border-color:#7c3aed}
.pv-btn.primary:hover{background:#6d28d9}
.pv-btn svg{width:13px;height:13px}
.pv-btn-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--ink2)}
.pv-btn-icon:hover{background:var(--surface2)}
.pv-btn-icon svg{width:14px;height:14px}
.pv-table-wrap{overflow-x:auto;padding:0}
/* The actual pivot table */
.pivot-t{border-collapse:collapse;font-size:.82rem;width:100%}
.pivot-t th{padding:8px 16px;text-align:center;font-size:.75rem;font-weight:500;color:var(--ink2);background:#f5f5f5;border:1px solid #e0e0e0;white-space:nowrap}
.pivot-t th.th-topleft{text-align:left;background:#f5f5f5;min-width:220px}
.pivot-t th.th-col{color:var(--ink2);cursor:pointer}
.pivot-t th.th-col:hover{background:#ebebeb}
.pivot-t th .col-plus{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;background:#555;color:#fff;border-radius:2px;font-size:.65rem;font-weight:900;margin-right:5px;cursor:pointer}
.pivot-t th.th-total-header{background:#ebebeb;font-weight:700;color:var(--ink)}
.pivot-t th.th-measure{font-size:.72rem;font-weight:400;color:var(--ink3);background:#fafafa;padding:5px 16px}
.pivot-t td{padding:7px 16px;border:1px solid #e8e8e8;text-align:center;font-size:.83rem;color:var(--ink)}
.pivot-t td.td-rowlabel{text-align:left;background:#fafafa;font-weight:600;padding-left:12px;min-width:220px}
.pivot-t td.td-sublabel{text-align:left;background:#fff;font-weight:500;padding-left:28px;color:var(--ink2)}
.pivot-t td.td-count{text-align:center}
.pivot-t td.td-total{font-weight:700;color:var(--ink);background:#fafafa}
.pivot-t tr.tr-total td{background:#f0f0f0;font-weight:700}
.pivot-t tr:hover td{background:#f5f8ff}
.pivot-t tr.tr-total:hover td{background:#e8ecf5}
.pivot-t td:empty{color:var(--ink3)}
/* total header row */
.pivot-t tr.tr-header-total{background:#e8e8e8}
.pivot-t tr.tr-header-total th{background:#e8e8e8;font-weight:700;color:var(--ink);font-size:.8rem}
.pivot-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pivot-controls select{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:.82rem;background:var(--surface);color:var(--ink);cursor:pointer}
.pv-measure-item{padding:7px 14px;font-size:.84rem;cursor:pointer;color:var(--ink);transition:background .1s}
.pv-measure-item:hover{background:var(--surface2)}
.pv-measure-item.active{color:var(--accent);font-weight:600}

/* EMP DETAIL TABS */
.emp-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:14px;gap:0}
.emp-tab{padding:8px 14px;font-size:.83rem;font-weight:600;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all .12s;white-space:nowrap}
.emp-tab:hover{color:var(--accent)}
.emp-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.emp-tab-content{display:none}.emp-tab-content.active{display:block}

/* DETAIL FIELD ROWS */
.detail-section{margin-bottom:14px}
.detail-section-title{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#333;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #e8e8e8}
.detail-field{display:flex;align-items:flex-start;padding:5px 0;border-bottom:1px solid #f8f9fa;gap:8px}
.detail-field:last-child{border-bottom:none}
.detail-field .df-label{font-size:.77rem;color:#444;font-weight:600;min-width:110px;flex-shrink:0;padding-top:1px}
.detail-field .df-val{font-size:.82rem;color:#111;font-weight:500;flex:1}
.detail-field .df-val.mono{font-family:monospace;color:var(--accent);font-size:.78rem}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.status-dot.active{background:#42b72a}.status-dot.inactive{background:var(--red)}.status-dot.offhours{background:var(--ink3)}

/* emp header enhanced */
.emp-detail-header{display:flex;gap:12px;align-items:flex-start;padding:14px;background:linear-gradient(135deg,var(--accent-bg) 0%,#f8fbff 100%);border-radius:var(--radius-sm);margin-bottom:14px;border:1px solid rgba(24,119,242,.15)}
.emp-detail-header .av-xl{width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:3px solid rgba(24,119,242,.25)}
.emp-header-meta{flex:1}
.emp-header-meta h2{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:3px}
.emp-header-meta .sub{font-size:.78rem;color:var(--ink2);margin-bottom:4px}
.emp-header-meta .id-chip{font-family:monospace;font-size:.9rem;color:var(--accent);font-weight:700;background:var(--accent-bg);padding:2px 7px;border-radius:10px;border:1px solid rgba(24,119,242,.2)}
.emp-header-btns{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap}
.emp-stat-bar{display:flex;gap:8px;margin-top:8px}
.emp-stat-pill{font-size:.71rem;color:var(--ink3);background:var(--surface);border:1px solid var(--border);padding:2px 8px;border-radius:10px;font-weight:600}

/* ═══ DEVELOPER MODE ═══ */
#dev-mode-overlay{display:none;position:fixed;inset:0;z-index:500;pointer-events:none}
body.dev-mode #dev-mode-overlay{display:block}
/* Dev top bar — simple, compact */
#dev-topbar{position:fixed;top:0;left:0;right:0;height:38px;background:#0f172a;color:#e2e8f0;display:flex;align-items:center;padding:0 14px;gap:8px;z-index:600;font-size:.8rem;pointer-events:all;box-shadow:0 2px 8px rgba(0,0,0,.4)}
body.dev-mode{padding-top:38px}
body.dev-mode .topbar{top:38px}
body:not(.dev-mode) .topbar{top:0}
body.dev-mode .topbar{top:38px}
body.dev-mode .sidebar{top:calc(38px + var(--header-h))}
body.dev-mode .layout{margin-top:calc(38px + var(--header-h))}
.dev-tb-badge{background:#f59e0b;color:#1a1a00;font-size:.68rem;font-weight:800;padding:1px 8px;border-radius:20px;letter-spacing:.04em}
.dev-tb-sep{width:1px;height:18px;background:rgba(255,255,255,.15);margin:0 8px;flex-shrink:0}
.dev-tb-breadcrumb{display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:.75rem;font-weight:600}
.dev-tb-breadcrumb span.active{color:#38bdf8}
.dev-tb-breadcrumb .sep{color:#4a5568}
.dev-tb-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:5px;cursor:pointer;color:#94a3b8;font-size:.75rem;font-weight:600;transition:all .12s;border:none;background:transparent}
.dev-tb-btn:hover{background:rgba(255,255,255,.08);color:#e2e8f0}
.dev-tb-btn:disabled{opacity:.3;cursor:not-allowed}
.dev-tb-btn svg{width:12px;height:12px}
.dev-tb-btn.active{color:#38bdf8;background:rgba(56,189,248,.12)}
.dev-tb-divider{width:1px;height:16px;background:rgba(255,255,255,.1);margin:0 3px}
.dev-tb-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.dev-tb-view-tabs{display:flex;align-items:center;background:rgba(255,255,255,.06);border-radius:5px;padding:2px;gap:1px}
.dev-tb-view-tab{padding:3px 10px;border-radius:3px;cursor:pointer;font-size:.72rem;font-weight:700;color:#64748b;transition:all .12s}
.dev-tb-view-tab:hover{color:#e2e8f0}
.dev-tb-view-tab.active{background:#1e293b;color:#38bdf8}
/* Dev left panel — simplified */
#dev-panel{position:fixed;top:calc(38px + var(--header-h));left:0;bottom:0;width:240px;background:#0f172a;color:#cbd5e1;display:flex;flex-direction:column;z-index:550;pointer-events:all;overflow-y:auto;border-right:1px solid #1e293b}
body.dev-mode .sidebar{left:240px}
body.dev-mode .main{margin-left:calc(240px + var(--sidebar-w))}
.dev-panel-header{padding:12px 14px 8px;border-bottom:1px solid #1e293b}
.dev-panel-section{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#475569;padding:10px 14px 5px}
.dev-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 10px 10px}
.dev-field-item{background:#1e293b;border:1px solid #334155;border-radius:6px;padding:7px 9px;cursor:grab;display:flex;align-items:center;gap:7px;font-size:.75rem;color:#cbd5e1;transition:all .12s;user-select:none}
.dev-field-item:hover{background:#334155;border-color:#475569;color:#fff}
.dev-field-item:active{cursor:grabbing;transform:scale(.97)}
.dev-field-item svg,.dev-field-item .fi-icon{width:14px;height:14px;flex-shrink:0;color:#38bdf8}
.dev-field-item span{font-size:.73rem;font-weight:600}
.dev-existing-fields{padding:0 10px 10px}
.dev-existing-item{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:5px;cursor:pointer;font-size:.77rem;color:#94a3b8;transition:background .1s}
.dev-existing-item:hover{background:#1e293b;color:#cbd5e1}
.dev-existing-item svg{width:13px;height:13px;color:#475569}
/* Field highlight in dev mode */
body.dev-mode .detail-field{position:relative;cursor:pointer;transition:outline .1s}
body.dev-mode .detail-field:hover{outline:2px dashed #38bdf8;outline-offset:2px;background:rgba(56,189,248,.05);border-radius:4px}
body.dev-mode .detail-field:hover::after{content:'Click to edit field';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:.65rem;font-weight:700;color:#38bdf8;background:#0f172a;padding:2px 6px;border-radius:4px;border:1px solid #334155;white-space:nowrap;z-index:10}
body.dev-mode .emp-list-t thead th{position:relative;cursor:pointer}
body.dev-mode .emp-list-t thead th:hover{background:#dbeafe!important;outline:2px dashed #3b82f6;outline-offset:-2px}
body.dev-mode .emp-list-t thead th:hover::after{content:'Edit column';position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:.65rem;font-weight:700;color:#1877f2;background:#fff;padding:2px 6px;border-radius:4px;border:1px solid #ddd;white-space:nowrap;z-index:100;margin-top:2px}
body.dev-mode .att-t .f1,body.dev-mode .att-t .f2,body.dev-mode .att-t .f3{cursor:pointer}
/* Quick action bar at top of content area in dev mode */
#dev-content-bar{display:none;align-items:center;gap:8px;padding:7px 14px;background:#f0f4ff;border-bottom:2px solid #bfdbfe;font-size:.8rem}
body.dev-mode #dev-content-bar{display:flex}
.dev-action-btn{padding:4px 12px;border-radius:5px;font-size:.77rem;font-weight:700;cursor:pointer;border:1px solid;transition:all .12s}
.dev-action-btn.outline{background:#fff;color:#1877f2;border-color:#93c5fd}
.dev-action-btn.outline:hover{background:#dbeafe}
.dev-action-btn.green{background:#fff;color:#15803d;border-color:#86efac}
.dev-action-btn.green:hover{background:#dcfce7}
/* Field edit modal */
#dev-field-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:700;align-items:center;justify-content:center}
#dev-field-modal.open{display:flex}
.dev-modal-box{background:#0f172a;border-radius:10px;width:420px;max-width:95vw;border:1px solid #1e293b;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.dev-modal-head{padding:14px 16px;border-bottom:1px solid #1e293b;display:flex;align-items:center;justify-content:space-between}
.dev-modal-head h3{color:#e2e8f0;font-size:.92rem;font-weight:700}
.dev-modal-close{width:26px;height:26px;border-radius:50%;background:#1e293b;border:none;cursor:pointer;color:#64748b;display:flex;align-items:center;justify-content:center;font-size:1rem}
.dev-modal-close:hover{background:#334155;color:#e2e8f0}
.dev-modal-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.dev-fg{display:flex;flex-direction:column;gap:4px}
.dev-fg label{font-size:.7rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.05em}
.dev-fg input,.dev-fg select{background:#1e293b;border:1px solid #334155;border-radius:5px;padding:7px 10px;color:#cbd5e1;font-family:var(--font);font-size:.83rem;outline:none;transition:border-color .12s}
.dev-fg input:focus,.dev-fg select:focus{border-color:#38bdf8}
.dev-modal-foot{padding:10px 16px;border-top:1px solid #1e293b;display:flex;justify-content:flex-end;gap:8px}
.dev-modal-foot button{padding:6px 14px;border-radius:5px;font-family:var(--font);font-size:.8rem;font-weight:700;cursor:pointer;border:none;transition:all .12s}
.dev-modal-foot .btn-cancel{background:#1e293b;color:#94a3b8}
.dev-modal-foot .btn-cancel:hover{background:#334155}
.dev-modal-foot .btn-save{background:#38bdf8;color:#0f172a}
.dev-modal-foot .btn-save:hover{background:#0ea5e9}
/* drop zone highlight */
.dev-drop-zone{border:2px dashed transparent;border-radius:6px;transition:all .2s;min-height:30px}
body.dev-mode .dev-drop-zone{border-color:#1e293b}
body.dev-mode .dev-drop-zone.drag-over{border-color:#38bdf8;background:rgba(56,189,248,.08)}
/* dev mode toggle button in topbar */
.tb-dev-btn{padding:5px 10px;border-radius:5px;font-size:.74rem;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;gap:5px;transition:all .12s}
.tb-dev-btn:hover{background:rgba(255,255,255,.2)}
.tb-dev-btn.active{background:#f59e0b;border-color:#d97706;color:#1a1a00}
.tb-dev-btn svg{width:13px;height:13px}


/* ── VIEW Page ── */
.vp-tab{padding:5px 13px;border-radius:9px;font-family:var(--font);font-size:.78rem;font-weight:600;cursor:pointer;border:none;background:transparent;color:#8b93ae;transition:all .15s;white-space:nowrap}
.vp-tab:hover{color:#5b5ef4;background:rgba(91,94,244,.06)}
.vp-tab.active{background:#fff;color:#5b5ef4;font-weight:800;box-shadow:0 1px 6px rgba(15,23,41,.1)}
.vw-chart-btn{padding:4px 10px;border-radius:7px;font-family:var(--font);font-size:.73rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:#8b93ae;transition:all .15s}
.vw-chart-btn:hover{border-color:#5b5ef4;color:#5b5ef4}
.vw-chart-btn.active{background:#5b5ef4;color:#fff;border-color:#5b5ef4}

/* ── Reports Page ── */
.rpt-tab{padding:7px 16px;border-radius:20px;font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--ink2);transition:all .15s}
.rpt-tab:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.rpt-tab.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 3px 10px rgba(24,119,242,.3)}
.rpt-card{background:var(--surface);border-radius:12px;border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.07);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s,transform .15s;position:relative}
.rpt-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.13);transform:translateY(-2px)}
.rpt-card-accent{height:4px;width:100%;flex-shrink:0}
.rpt-card-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0;flex-shrink:0}
.rpt-card-body{padding:10px 14px 12px;flex:1}
.rpt-card-title{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.rpt-card-desc{font-size:.77rem;color:var(--ink3);line-height:1.55}
.rpt-card-meta{display:flex;align-items:center;gap:8px;margin-top:10px}
.rpt-badge{display:inline-flex;padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:700;letter-spacing:.03em}
.rpt-badge-blue{background:#e7f3ff;color:#1877f2}
.rpt-badge-green{background:#e6f7e3;color:#059669}
.rpt-badge-red{background:#fde8e8;color:#c0392b}
.rpt-badge-amber{background:#fff3d6;color:#d97706}
.rpt-badge-purple{background:#ede9fe;color:#7c3aed}
.rpt-badge-cyan{background:#e0f7fa;color:#0891b2}
.rpt-badge-indigo{background:#eef2ff;color:#4f46e5}
.rpt-badge-teal{background:#ccfbf1;color:#0f766e}
.rpt-count{font-size:.72rem;color:var(--ink3);margin-left:auto;font-weight:600}
.rpt-card-actions{padding:10px 14px 14px;display:flex;gap:6px;border-top:1px solid #f0f2f5;background:#fafbff;flex-wrap:wrap}
.rpt-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:6px;font-family:var(--font);font-size:.75rem;font-weight:700;cursor:pointer;border:1.5px solid;transition:all .12s;white-space:nowrap}
.rpt-btn-xl{background:#e6f4ea;color:#1e8e3e;border-color:#b7ddb0}.rpt-btn-xl:hover{background:#c6e9cc}
.rpt-btn-pdf{background:#fce8e6;color:#d93025;border-color:#f5b7b1}.rpt-btn-pdf:hover{background:#fad2ce}
.rpt-btn-csv{background:#fef3e2;color:#e37400;border-color:#fde58a}.rpt-btn-csv:hover{background:#fde9bb}
.rpt-btn-print{background:#e8f0fe;color:#1a73e8;border-color:#b3d4fc;padding:5px 9px}.rpt-btn-print:hover{background:#d2e3fc}
.rpt-qs-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.07);display:flex;align-items:center;gap:10px}
.rpt-qs-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rpt-qs-val{font-size:1.4rem;font-weight:800;color:var(--ink);line-height:1}
.rpt-qs-lbl{font-size:.72rem;color:var(--ink3);margin-top:2px}
@media(max-width:1100px){#rpt-cards-grid{grid-template-columns:repeat(2,1fr)}#rpt-quick-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){#rpt-cards-grid{grid-template-columns:1fr}#rpt-quick-stats{grid-template-columns:repeat(2,1fr)}}
/* Element highlight overlay */
.dev-el-hover {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
  cursor: pointer !important;
  position: relative !important;
}
.dev-el-hover::before {
  content: attr(data-dev-tag);
  position: absolute;
  top: -20px; left: 0;
  background: #38bdf8;
  color: #0f172a;
  font-size: .6rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px 3px 0 0;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  font-family: monospace;
}
.dev-el-selected {
  outline: 2px solid #4ade80 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(74,222,128,.15) !important;
}
/* Drag-to-move mode */
body.dev-pick-mode * { cursor: crosshair !important; }
body.dev-move-mode .dev-el-selected { cursor: move !important; }
/* Move handle */
.dev-move-handle {
  display: none;
  position: fixed;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: .7rem;
  color: #cbd5e1;
  z-index: 9990;
  gap: 7px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  white-space: nowrap;
}
.dev-move-handle.visible { display: flex; }
.dev-move-handle button {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #cbd5e1;
  padding: 3px 7px;
  font-size: .7rem;
  cursor: pointer;
  font-weight: 700;
}
.dev-move-handle button:hover { background: #334155; }
.dev-move-handle .mh-pos { color: #475569; font-size: .65rem; }
/* Inspector panel */
#dev-inspector {
  position: fixed;
  top: calc(38px + var(--header-h));
  right: 0;
  bottom: 0;
  width: 260px;
  background: #0f172a;
  border-left: 1px solid #1e293b;
  z-index: 550;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  pointer-events: all;
}
body.dev-mode.dev-inspect #dev-inspector { display: flex; }
body.dev-mode.dev-inspect .main { margin-right: 260px; }
.dev-insp-head {
  padding: 10px 12px;
  border-bottom: 1px solid #1e293b;
  font-size: .75rem;
  font-weight: 800;
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dev-insp-section {
  padding: 8px 12px 5px;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #475569;
  border-bottom: 1px solid #1e293b;
  margin-top: 2px;
}
.dev-insp-row {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  gap: 7px;
  font-size: .77rem;
}
.dev-insp-row label {
  color: #475569;
  font-size: .7rem;
  min-width: 68px;
  flex-shrink: 0;
}
.dev-insp-row input[type=text],
.dev-insp-row input[type=number],
.dev-insp-row select {
  flex: 1;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 4px 6px;
  color: #cbd5e1;
  font-size: .77rem;
  font-family: var(--font);
  outline: none;
  min-width: 0;
}
.dev-insp-row input[type=text]:focus,
.dev-insp-row input[type=number]:focus,
.dev-insp-row select:focus { border-color: #38bdf8; }
.dev-insp-row input[type=color] {
  width: 34px; height: 24px;
  border: 1px solid #334155;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  padding: 1px;
}
.dev-insp-tag {
  display: inline-block;
  background: #1e293b;
  color: #38bdf8;
  border-radius: 4px;
  font-size: .66rem;
  padding: 2px 6px;
  font-family: monospace;
  border: 1px solid #334155;
  word-break: break-all;
}
.dev-insp-actions {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dev-insp-btn {
  padding: 6px 10px;
  border-radius: 5px;
  border: none;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  width: 100%;
  transition: all .12s;
}
.dev-insp-btn.blue { background: #38bdf8; color: #0f172a; }
.dev-insp-btn.blue:hover { background: #0ea5e9; }
.dev-insp-btn.red { background: #f87171; color: #fff; }
.dev-insp-btn.red:hover { background: #ef4444; }
.dev-insp-btn.gray { background: #1e293b; color: #cbd5e1; }
.dev-insp-btn.gray:hover { background: #334155; }
.dev-insp-btn.green { background: #4ade80; color: #0f172a; }
.dev-insp-btn.green:hover { background: #22c55e; }
/* Pick cursor mode button */
.dev-tb-btn.pick-active { background: rgba(56,189,248,.15) !important; color: #38bdf8 !important; }

/* PERIOD FILTER */
.period-bar{display:flex;align-items:center;gap:8px;margin-bottom:15px;flex-wrap:wrap}
.period-tabs{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;gap:2px}
.period-tab{padding:5px 13px;border-radius:4px;font-size:.79rem;font-weight:600;cursor:pointer;color:var(--ink2);transition:all .12s;white-space:nowrap;border:none;background:transparent;font-family:var(--font)}
.period-tab:hover{color:var(--ink)}
.period-tab.active{background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(24,119,242,.3)}
.period-custom{display:flex;align-items:center;gap:6px;margin-left:auto}
.period-custom input[type=date]{padding:5px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:.79rem;color:var(--ink);background:var(--surface);outline:none}
.period-custom input[type=date]:focus{border-color:var(--accent)}
.period-label{font-size:.75rem;color:var(--ink3);font-weight:600}
.period-summary{display:flex;gap:10px;align-items:center;font-size:.77rem;color:var(--ink2)}
.period-summary span{background:var(--accent-bg);color:var(--accent);padding:2px 8px;border-radius:10px;font-weight:600;border:1px solid rgba(24,119,242,.2)}

/* ═══ VIEW DETAIL MODAL ═══ */
#view-detail-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:60px;overflow-y:auto}
#view-detail-modal.open{display:flex}
.vd-box{background:#fff;border-radius:12px;width:700px;max-width:96vw;box-shadow:0 20px 60px rgba(0,0,0,.2);margin-bottom:30px;overflow:hidden;position:relative}
.vd-head{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--accent) 0%,#0e5fc0 100%)}
.vd-head h2{color:#fff;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:9px}
.vd-head h2 svg{width:17px;height:17px}
.vd-head-actions{display:flex;align-items:center;gap:8px}
.vd-edit-btn{padding:6px 14px;border-radius:6px;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.5);color:#fff;font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s}
.vd-edit-btn:hover{background:rgba(255,255,255,.35)}
.vd-edit-btn svg{width:13px;height:13px}
.vd-close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .12s}
.vd-close:hover{background:rgba(255,255,255,.35)}
.vd-tabs{display:flex;border-bottom:1px solid var(--border);background:#fafafa}
.vd-tab{padding:11px 18px;font-size:.83rem;font-weight:600;color:var(--ink3);border-bottom:2px solid transparent;cursor:pointer;transition:all .12s;white-space:nowrap}
.vd-tab:hover{color:var(--accent)}
.vd-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:#fff}
.vd-body{padding:22px;max-height:65vh;overflow-y:auto}
.vd-section{margin-bottom:16px}
.vd-section-title{font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#888;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid #f0f2f5;display:flex;align-items:center;gap:6px}
.vd-field{display:flex;align-items:flex-start;padding:5px 0;border-bottom:1px solid #f8f9fa;gap:8px}
.vd-field:last-child{border-bottom:none}
.vd-label{font-size:.77rem;color:#444;font-weight:600;min-width:130px;flex-shrink:0;padding-top:1px}
.vd-val{font-size:.82rem;color:#111;font-weight:500;flex:1}
.vd-val.mono{font-family:monospace;color:var(--accent);font-size:.78rem;font-weight:700}
.vd-section-content{display:none}
.vd-section-content.active{display:block}

/* ═══ EMPLOYEE MODAL ═══ */
#emp-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:60px;overflow-y:auto}
#emp-modal.open{display:flex}
#emp-modal.open{display:flex}
.emp-modal-box{background:#fff;border-radius:12px;width:680px;max-width:96vw;box-shadow:0 20px 60px rgba(0,0,0,.2);margin-bottom:30px;overflow:hidden;position:relative}
.emp-modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--accent) 0%,#0e5fc0 100%);cursor:grab;user-select:none}
.emp-modal-head:active{cursor:grabbing}
.emp-modal-head h2{color:#fff;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:9px}
.emp-modal-head h2 svg{width:17px;height:17px}
.emp-modal-close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .12s}
.emp-modal-close:hover{background:rgba(255,255,255,.35)}
.emp-modal-tabs{display:flex;border-bottom:1px solid var(--border);background:#fafafa}
.emp-modal-tab{padding:11px 18px;font-size:.83rem;font-weight:600;color:var(--ink3);border-bottom:2px solid transparent;cursor:pointer;transition:all .12s;white-space:nowrap}
.emp-modal-tab:hover{color:var(--accent)}
.emp-modal-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:#fff}
.emp-modal-body{padding:22px;display:flex;flex-direction:column;gap:0}
.emp-modal-section{display:none}
.emp-modal-section.active{display:block}
.emp-modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;background:#fafafa}
.emf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:600px){.emf-grid{grid-template-columns:1fr}}
.emf-gc2{grid-column:1/-1}
.emf-label{font-size:.78rem;font-weight:700;color:#444;display:block;margin-bottom:5px}
.emf-input{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:7px;font-family:var(--font);font-size:.88rem;color:#111;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.emf-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,119,242,.1)}
.emf-input::placeholder{color:#aaa}
select.emf-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.emf-section-title{font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#888;margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid #f0f2f5;display:flex;align-items:center;gap:6px}
.emf-section-title svg{width:13px;height:13px;color:var(--accent)}

/* ═══ ATTENDANCE COLUMN FILTERS ═══ */
.att-filter-row th{background:#1e3a8a!important;padding:3px!important;position:sticky;top:68px;z-index:25;border-bottom:2px solid #3b82f6}
.att-filter-row th.f1 {left:0;z-index:35;background:#0f172a!important}
.att-filter-row th.f2 {left:36px;z-index:35;background:#0f172a!important}
.att-filter-row th.f3 {left:142px;z-index:35;background:#0f172a!important;border-right:3px solid #f59e0b}
.att-filter-row th.f4 {left:310px;z-index:34;background:#1e3a8a!important}
.att-filter-row th.f5 {left:400px;z-index:34;background:#1e3a8a!important}
.att-filter-row th.f6 {left:490px;z-index:34;background:#1e3a8a!important}
.att-filter-row th.f7 {left:570px;z-index:34;background:#1e3a8a!important}
.att-filter-row th.f8 {left:652px;z-index:34;background:#1e3a8a!important}
.att-filter-row th.f9 {left:734px;z-index:34;background:#1e3a8a!important}
.att-filter-row th.f10{left:796px;z-index:34;background:#1e3a8a!important;border-right:3px solid rgba(245,158,11,.5)}
.att-fi{width:100%;padding:3px 4px;border:1px solid rgba(255,255,255,.25);border-radius:4px;font-family:var(--font);font-size:.68rem;color:#fff;background:rgba(255,255,255,.12);outline:none;box-sizing:border-box}
.att-fi::placeholder{color:rgba(255,255,255,.5)}
.att-fi:focus{border-color:#60a5fa;background:rgba(255,255,255,.2);box-shadow:0 0 0 2px rgba(96,165,250,.3)}
.att-fi-sel{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:18px}
.att-fi-sel option{color:#111;background:#fff}
.att-fi-clr{width:100%;padding:3px 0;border:none;background:transparent;color:rgba(255,255,255,.5);font-size:.65rem;cursor:pointer;text-align:center;font-family:var(--font)}
.att-fi-clr:hover{color:#f87171}
.att-filter-active{background:rgba(251,191,36,.3)!important;border-color:#fbbf24!important}
/* Filter bar above table */
.att-filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.att-filter-chip{display:flex;align-items:center;gap:5px;background:#dbeafe;color:#1d4ed8;padding:3px 9px;border-radius:12px;font-size:.73rem;font-weight:600;border:1px solid #93c5fd}
.att-filter-chip span{cursor:pointer;opacity:.7;font-size:.8rem;margin-left:2px}
.att-filter-chip span:hover{opacity:1}
.att-sort-icon{display:inline-block;margin-left:3px;opacity:.4;font-size:.65rem;cursor:pointer;user-select:none}
.att-sort-icon:hover{opacity:1}
.att-sorted-asc .att-sort-icon::after{content:'▲';opacity:1;color:var(--accent)}
.att-sorted-desc .att-sort-icon::after{content:'▼';opacity:1;color:var(--accent)}

/* ═══ EMPLOYEE LIST FILTERS ═══ */
.emp-list-t thead tr.filter-row th{background:#f0f4ff;padding:4px 6px;position:sticky;top:37px;z-index:20}
.emp-list-t thead tr.filter-row th:first-child{position:sticky;top:37px;z-index:25}
.elf{width:100%;padding:4px 7px;border:1px solid #c5d5f5;border-radius:5px;font-family:var(--font);font-size:.72rem;color:#111;background:#fff;outline:none;box-sizing:border-box;transition:border-color .12s}
.elf:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(24,119,242,.12)}
.elf.elf-active{background:#fff3cd;border-color:#f59e0b}
select.elf{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center;padding-right:20px}
.emp-list-filter-bar{display:flex;align-items:center;gap:7px;padding:8px 14px;background:#f8faff;border-bottom:1px solid var(--border);flex-wrap:wrap}
.emp-filter-chip{display:inline-flex;align-items:center;gap:4px;background:#dbeafe;color:#1d4ed8;padding:3px 9px;border-radius:12px;font-size:.72rem;font-weight:600;border:1px solid #93c5fd}
.emp-filter-chip .x{cursor:pointer;opacity:.65;margin-left:2px;font-size:.85rem}
.emp-filter-chip .x:hover{opacity:1}
/* Cards view filter bar — now a dropdown panel */
.emp-cards-filter{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;background:#f8faff;border-bottom:1px solid var(--border);align-items:center}
.ecf-group{display:flex;align-items:center;gap:5px}
.ecf-label{font-size:.72rem;font-weight:700;color:#666;white-space:nowrap}
.ecf-input{padding:5px 9px;border:1px solid #c5d5f5;border-radius:5px;font-family:var(--font);font-size:.77rem;color:#111;background:#fff;outline:none;transition:border-color .12s;min-width:110px}
.ecf-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(24,119,242,.1)}
.ecf-input.active{background:#fff3cd;border-color:#f59e0b}
select.ecf-input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}
.ecf-clear{padding:5px 10px;border:1px solid #fca5a5;border-radius:5px;background:#fff;color:#dc2626;font-size:.72rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .12s}
.ecf-clear:hover{background:#fee2e2}

/* ── NEW: Filter Dropdown Panel ── */
.emp-filter-dropdown-wrap{position:relative;display:inline-block}
#emp-filter-panel{
  display:none;position:absolute;top:calc(100% + 8px);left:0;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 12px 40px rgba(15,23,41,.16),0 2px 8px rgba(15,23,41,.08);
  z-index:600;width:420px;max-width:96vw;overflow:hidden
}
#emp-filter-panel.open{display:block}
.efp-head{padding:12px 16px 10px;border-bottom:1px solid #f0f3fa;display:flex;align-items:center;justify-content:space-between}
.efp-title{font-size:.83rem;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:7px}
.efp-title svg{width:14px;height:14px;color:var(--accent)}
.efp-clear-all{padding:4px 10px;border:1px solid #fca5a5;border-radius:6px;background:#fff;color:#dc2626;font-size:.71rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.efp-clear-all:hover{background:#fee2e2}
.efp-body{padding:4px 0;max-height:520px;overflow-y:auto}
.efp-section-hdr{padding:8px 16px 5px;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);background:#f5f7ff;border-top:1px solid #eef1fd;border-bottom:1px solid #eef1fd;margin-top:2px}
.efp-row{display:flex;align-items:center;padding:6px 16px;gap:10px;border-bottom:1px solid #f8f9fd;transition:background .1s}
.efp-row:last-child{border-bottom:none}
.efp-row:hover{background:#f5f8ff}
.efp-row-label{font-size:.74rem;font-weight:700;color:#555;min-width:130px;flex-shrink:0}
.efp-row-ctrl{flex:1}
.efp-row-ctrl input,.efp-row-ctrl select{
  width:100%;padding:5px 9px;border:1.5px solid #dde5f5;border-radius:7px;
  font-family:var(--font);font-size:.77rem;color:#111;background:#fff;outline:none;
  transition:border-color .12s,box-shadow .12s
}
.efp-row-ctrl input:focus,.efp-row-ctrl select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(67,97,238,.12)}
.efp-row-ctrl input.active,.efp-row-ctrl select.active{background:#fffbeb;border-color:#f59e0b}
.efp-row-ctrl select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;padding-right:24px}
.efp-foot{padding:10px 16px;border-top:1px solid #f0f3fa;display:flex;align-items:center;justify-content:space-between;background:#f8faff}
.efp-count{font-size:.75rem;font-weight:600;color:var(--ink3)}
.efp-apply{padding:7px 18px;border-radius:8px;background:var(--accent);color:#fff;border:none;font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s}
.efp-apply:hover{background:var(--accent-dark)}
/* Active filter chips below filter button */
.emp-active-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 4px;align-items:center;min-height:0}
.emp-active-chips:empty{display:none}
.emp-chip{display:inline-flex;align-items:center;gap:4px;background:#eef1fd;color:var(--accent);padding:3px 10px 3px 10px;border-radius:20px;font-size:.71rem;font-weight:700;border:1.5px solid rgba(67,97,238,.2);white-space:nowrap}
.emp-chip .chip-x{cursor:pointer;margin-left:3px;font-size:.8rem;opacity:.6;line-height:1}
.emp-chip .chip-x:hover{opacity:1;color:#dc2626}
.emp-list-t thead th .sort-icon{display:inline-block;margin-left:4px;opacity:.4;font-size:.62rem;transition:opacity .1s;cursor:pointer;user-select:none}
.emp-list-t thead th:hover .sort-icon{opacity:.8}
.emp-list-t thead th.sorted-asc .sort-icon::after{content:'▲';opacity:1;color:var(--accent)}
.emp-list-t thead th.sorted-desc .sort-icon::after{content:'▼';opacity:1;color:var(--accent)}

/* ═══ EXPORT DROPDOWN ═══ */
.export-wrap{position:relative;display:inline-block}
.export-btn{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--radius-sm);font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--ink2);transition:all .12s;white-space:nowrap}
.export-btn:hover{background:var(--surface2);color:var(--ink)}
.export-btn svg{width:13px;height:13px}
.export-btn .arr{font-size:.65rem;opacity:.6;margin-left:1px}
.export-menu{display:none;position:absolute;top:calc(100% + 5px);right:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.14);z-index:500;min-width:190px;overflow:hidden}
.export-menu.open{display:block}
.export-menu-head{padding:9px 14px 6px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#999;border-bottom:1px solid #f0f0f0}
.export-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-size:.85rem;color:#1a1a2e;transition:background .1s;border-bottom:1px solid #f9f9f9}
.export-item:last-child{border-bottom:none}
.export-item:hover{background:#f5f8ff}
.export-item .ei-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
.export-item .ei-icon.xl{background:#e6f4ea;color:#1e8e3e}
.export-item .ei-icon.pdf{background:#fce8e6;color:#d93025}
.export-item .ei-icon.print{background:#e8f0fe;color:#1a73e8}
.export-item .ei-icon.csv{background:#fef3e2;color:#e37400}
.export-item .ei-label{font-weight:600;font-size:.83rem;color:#111}
.export-item .ei-sub{font-size:.71rem;color:#888;margin-top:1px}
/* Print styles */
@media print {
  .topbar,.sidebar,.period-bar,.emp-cards-filter,.emp-list-filter-bar,
  .att-filter-bar,.att-filter-row,.view-sw,.period-tabs,.pv-toolbar,
  .dev-panel,#dev-topbar,#dev-content-bar,.export-wrap,
  .btn,.nav-item,.sb-co,.sb-user{display:none!important}
  .main{margin-left:0!important}
  body{background:#fff!important}
  .card{box-shadow:none!important;border:1px solid #ddd!important}
  #print-title{display:block!important}
}
#print-title{display:none;font-size:1.1rem;font-weight:700;margin-bottom:12px;color:#111}

/* ═══ EMPLOYEE PAGE MINI DASHBOARD ═══ */
.emp-mini-dash{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
@media(max-width:1100px){.emp-mini-dash{grid-template-columns:repeat(3,1fr)}}
.emd-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);transition:box-shadow .12s}
.emd-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.emd-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.emd-label{font-size:.71rem;color:var(--ink3);font-weight:600;margin-bottom:2px}
.emd-value{font-size:1.4rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.emd-sub{font-size:.67rem;color:var(--ink3);margin-top:2px}

/* TOPBAR COMPANY CHIP */
.tb-company-chip{display:none;align-items:center;gap:7px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.35);border-radius:20px;padding:5px 13px 5px 9px;cursor:pointer;transition:all .12s}
.tb-company-chip:hover{background:rgba(255,255,255,.28)}
.tb-company-chip.visible{display:flex}
.tb-company-chip .co-dot{width:8px;height:8px;border-radius:50%;background:#42b72a;flex-shrink:0}
.tb-company-chip .co-name{color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.tb-company-chip .co-x{color:rgba(255,255,255,.7);font-size:.85rem;margin-left:3px;line-height:1;cursor:pointer}
.tb-company-chip .co-x:hover{color:#fff}

/* ═══ IMPORT DATA PAGE ═══ */
.import-page{max-width:860px;margin:0 auto}
.import-step{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px;position:relative}
.import-step-num{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.import-step-badge{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.import-step-title{font-size:1rem;font-weight:700;color:var(--ink)}
.import-step-sub{font-size:.8rem;color:var(--ink3);margin-top:2px}
.import-template-cols{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.import-col-chip{background:#e7f0fd;color:#1877f2;border:1px solid #bfdbfe;border-radius:4px;padding:3px 9px;font-size:.73rem;font-weight:700;font-family:monospace}
.import-dropzone{border:2px dashed #93c5fd;border-radius:10px;padding:36px;text-align:center;background:#f8fbff;cursor:pointer;transition:all .15s;position:relative}
.import-dropzone:hover,.import-dropzone.drag-over{border-color:var(--accent);background:#eff6ff}
.import-dropzone svg{width:40px;height:40px;color:#93c5fd;margin:0 auto 12px;display:block}
.import-dropzone .dz-title{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.import-dropzone .dz-sub{font-size:.8rem;color:var(--ink3)}
.import-dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.import-file-selected{display:none;align-items:center;gap:10px;background:#e6f7e3;border:1px solid #b7ddb0;border-radius:8px;padding:11px 14px;margin-top:10px}
.import-file-selected.show{display:flex}
.import-file-selected svg{width:20px;height:20px;color:#1a6b0e;flex-shrink:0}
.import-file-info{flex:1}
.import-file-info .fname{font-size:.85rem;font-weight:700;color:#1a6b0e}
.import-file-info .fsize{font-size:.74rem;color:#2d7a23}
.import-file-clear{color:#666;cursor:pointer;font-size:1.1rem;opacity:.7}
.import-file-clear:hover{opacity:1;color:var(--red)}
/* Results table */
.import-results{display:none}
.import-results.show{display:block}
.import-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.import-stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center}
.import-stat .is-val{font-size:1.8rem;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.import-stat .is-lbl{font-size:.73rem;color:var(--ink3);margin-top:3px;font-weight:600}
.import-stat.success .is-val{color:#1a6b0e}
.import-stat.fail .is-val{color:#c0392b}
.import-stat.total .is-val{color:var(--accent)}
.import-stat.skip .is-val{color:#7d5a00}
.import-log{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-family:monospace}
.import-log-row{padding:6px 12px;border-bottom:1px solid #f5f5f5;display:flex;align-items:flex-start;gap:8px}
.import-log-row:last-child{border-bottom:none}
.import-log-row .log-icon{flex-shrink:0;font-size:.85rem;margin-top:1px}
.import-log-row.ok{background:#f8fff8}
.import-log-row.err{background:#fff8f8}
.import-log-row.warn{background:#fffdf0}
.import-log-row .log-row-num{color:#999;min-width:28px}
.import-log-row .log-msg{color:#111;flex:1}
.import-progress{display:none;margin-top:12px}
.import-progress.show{display:block}
.progress-bar-wrap{height:10px;background:#f0f2f5;border-radius:20px;overflow:hidden;margin-bottom:6px}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#1877f2,#42b72a);border-radius:20px;transition:width .5s cubic-bezier(.4,0,.2,1);width:0%}
/* Step indicators */
.imp-step{display:flex;flex-direction:column;align-items:center;gap:4px}
.imp-step-dot{width:32px;height:32px;border-radius:50%;background:#e0e7ff;color:#6b7db3;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;transition:all .3s}
.imp-step-lbl{font-size:.7rem;color:#aaa;font-weight:600;white-space:nowrap}
.imp-step.active .imp-step-dot{background:#1877f2;color:#fff;box-shadow:0 0 0 4px rgba(24,119,242,.2)}
.imp-step.active .imp-step-lbl{color:#1877f2;font-weight:700}
.imp-step.done .imp-step-dot{background:#42b72a;color:#fff}
.imp-step.done .imp-step-lbl{color:#42b72a}
.imp-step-line{flex:1;height:2px;background:#e0e7ff;margin:0 4px;margin-bottom:16px;min-width:28px;transition:background .3s}
.imp-step-line.done{background:#42b72a}
/* Preview table */
#import-preview-table thead th{padding:8px 12px;text-align:left;font-size:.71rem;font-weight:700;color:#fff;background:#1877f2;white-space:nowrap;position:sticky;top:0}
#import-preview-table tbody td{padding:7px 12px;border-bottom:1px solid #f0f2f5;font-size:.78rem;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
#import-preview-table tbody tr:hover td{background:#f7f8fc}
#import-preview-table tbody tr:last-child td{border-bottom:none}
/* Count-up animation */
@keyframes countUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.progress-label{font-size:.78rem;color:var(--ink3);text-align:center}
/* reset warning */
.import-reset-warn{background:#fff3cd;border:1px solid #ffc107;border-radius:var(--radius-sm);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.import-reset-warn svg{width:18px;height:18px;color:#856404;flex-shrink:0;margin-top:1px}
.import-reset-warn p{font-size:.82rem;color:#856404;font-weight:600}

/* ─── Add Attendance — Tab Switcher & Import Panel ─── */
.aad-tab-bar{display:flex;gap:0;border-bottom:2px solid #c7d2fe;background:#f0f4ff;padding:0 14px;margin:-14px -14px 14px}
.aad-tab{padding:10px 20px;font-size:.85rem;font-weight:700;color:#6b7db3;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s;display:flex;align-items:center;gap:6px;user-select:none}
.aad-tab:hover{color:#1877f2;background:rgba(24,119,242,.06)}
.aad-tab.active{color:#1877f2;border-bottom-color:#1877f2;background:rgba(24,119,242,.05)}
.aad-panel{display:none}.aad-panel.active{display:block}
/* Att-import steps inside the Add Attendance white card */
.aad-import-wrap{padding:4px 0}
.aad-import-step{background:#f8faff;border:1.5px solid #c7d2fe;border-radius:10px;padding:18px 20px;margin-bottom:14px}
.aad-import-step:last-child{margin-bottom:0}
.aad-import-step-num{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.aad-import-badge{width:28px;height:28px;border-radius:50%;background:#1877f2;color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aad-import-badge.amber{background:#f59e0b}
.aad-import-step-title{font-size:.92rem;font-weight:700;color:#0f1729}
.aad-import-step-sub{font-size:.76rem;color:#8b93ae;margin-top:2px}
.aad-col-chip{background:#e7f0fd;color:#1877f2;border:1px solid #bfdbfe;border-radius:4px;padding:2px 8px;font-size:.7rem;font-weight:700;font-family:monospace}
.aad-dropzone{border:2px dashed #93c5fd;border-radius:10px;padding:28px;text-align:center;background:#f0f7ff;cursor:pointer;transition:all .15s;position:relative}
.aad-dropzone:hover,.aad-dropzone.drag-over{border-color:#1877f2;background:#e8f0fd}
.aad-dropzone svg{width:34px;height:34px;color:#93c5fd;margin:0 auto 10px;display:block}
.aad-dropzone .dz-title{font-size:.88rem;font-weight:700;color:#0f1729;margin-bottom:4px}
.aad-dropzone .dz-sub{font-size:.76rem;color:#8b93ae}
.aad-dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.aad-file-sel{display:none;align-items:center;gap:10px;background:#e6f7e3;border:1px solid #b7ddb0;border-radius:8px;padding:10px 13px;margin-top:10px}
.aad-file-sel.show{display:flex}
.aad-file-sel svg{width:18px;height:18px;color:#1a6b0e;flex-shrink:0}
.aad-file-info{flex:1}.aad-file-info .fname{font-size:.83rem;font-weight:700;color:#1a6b0e}.aad-file-info .fsize{font-size:.72rem;color:#2d7a23}
.aad-file-clear{color:#666;cursor:pointer;font-size:1.05rem;opacity:.7}.aad-file-clear:hover{opacity:1;color:#ef4444}
.aad-imp-results{display:none;margin-top:14px}.aad-imp-results.show{display:block}
.aad-imp-sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.aad-imp-stat{background:#fff;border:1.5px solid #c7d2fe;border-radius:8px;padding:12px;text-align:center}
.aad-imp-stat .is-val{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.aad-imp-stat .is-lbl{font-size:.7rem;color:#8b93ae;margin-top:3px;font-weight:600}
.aad-imp-stat.success .is-val{color:#1a6b0e}.aad-imp-stat.fail .is-val{color:#c0392b}.aad-imp-stat.total .is-val{color:#1877f2}.aad-imp-stat.skip .is-val{color:#7d5a00}
.aad-imp-log{max-height:220px;overflow-y:auto;border:1px solid #c7d2fe;border-radius:8px;font-size:.78rem;font-family:monospace;background:#fff}
.aad-imp-log-row{padding:5px 12px;border-bottom:1px solid #f0f4ff;display:flex;align-items:flex-start;gap:8px}
.aad-imp-log-row:last-child{border-bottom:none}
.aad-imp-log-row.ok{background:#f8fff8}.aad-imp-log-row.err{background:#fff8f8}.aad-imp-log-row.warn{background:#fffdf0}
.aad-imp-log-row .log-icon{flex-shrink:0;font-size:.82rem;margin-top:1px}
.aad-imp-log-row .log-rn{color:#999;min-width:26px}
.aad-imp-log-row .log-msg{color:#111;flex:1}
.aad-imp-progress{display:none;margin-top:10px}.aad-imp-progress.show{display:block}
.aad-imp-pb-wrap{height:7px;background:#e2e8f5;border-radius:20px;overflow:hidden;margin-bottom:5px}
.aad-imp-pb-fill{height:100%;background:#1877f2;border-radius:20px;transition:width .3s;width:0%}
.aad-imp-pb-lbl{font-size:.75rem;color:#8b93ae;text-align:center}

/* ═══════════════════════════════════════════════
   MODERN REDESIGN OVERRIDES — PeopleSphere v7
   Dark-midnight sidebar · Crisp glass topbar
   ═══════════════════════════════════════════════ */
:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface2: #f0f3fa;
  --ink: #0f1729;
  --ink2: #4a5472;
  --ink3: #8b93ae;
  --accent: #4361ee;
  --accent-dark: #3451d1;
  --accent-bg: #eef1fd;
  --green: #22c55e;
  --green-bg: #dcfce7;
  --red: #ef4444;
  --red-bg: #fee2e2;
  --amber: #f59e0b;
  --amber-bg: #fef3c7;
  --orange: #f97316;
  --orange-bg: #ffedd5;
  --border: #e2e8f5;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(15,23,41,0.06), 0 4px 12px rgba(15,23,41,0.04);
  --shadow-md: 0 4px 16px rgba(15,23,41,0.10), 0 1px 4px rgba(15,23,41,0.06);
  --sidebar-w: 252px;
  --header-h: 64px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', monospace;
  --sidebar-bg: #ffffff;
  --sidebar-surface: #f0f5ff;
  --sidebar-border: rgba(67,97,238,0.12);
  --sidebar-text: #1e2a4a;
  --sidebar-text-muted: #7a89b0;
  --sidebar-accent: #4361ee;
  --sidebar-active-bg: rgba(67,97,238,0.10);
}

body { font-family: var(--font); background: var(--bg); }

/* ── TOPBAR ── */
.topbar {
  background: #1877f2;
  box-shadow: 0 2px 12px rgba(24,119,242,0.18), 0 1px 0 rgba(255,255,255,0.15);
  height: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 0 24px 0 0;
  gap: 0;
}
.tb-brand {
  background: rgba(0,0,0,0.12);
  border-right: 1px solid rgba(255,255,255,0.15);
  min-width: var(--sidebar-w);
  height: 100%;
  padding: 0 20px;
  gap: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.tb-brand svg rect { fill: rgba(255,255,255,0.25); }

/* Brand logo badge */
.tb-brand::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  flex-shrink: 0;
  margin-right: -4px;
}

.tb-search { margin-left: 24px; max-width: 440px; }
.tb-search-inner {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  transition: all 0.2s;
}
.tb-search-inner:focus-within {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67,97,238,0.15);
}
.tb-search-inner input { font-family: var(--font); }
.tb-search-inner:focus-within svg { color: var(--accent); }

.tb-right { gap: 10px; padding-right: 0; }
.tb-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all 0.15s;
}
.tb-icon:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.18); }
.tb-av {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4361ee, #7c3aed);
  border: 2px solid rgba(255,255,255,0.2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(67,97,238,0.4);
}

/* Dev Mode button */
.tb-dev-btn {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 7px 13px !important;
  gap: 6px !important;
  cursor: pointer;
  display: flex; align-items: center;
  transition: all 0.15s;
}
.tb-dev-btn:hover { background: rgba(255,255,255,0.28) !important; }
.tb-dev-btn svg { width: 14px; height: 14px; }

/* ── SIDEBAR ── */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid #e2e8f5;
  width: var(--sidebar-w);
}

.sb-co {
  margin: 14px 12px 8px;
  padding: 10px 13px;
  background: #eef1fd;
  border: 1px solid rgba(67,97,238,0.15);
  border-radius: 10px;
}
.sb-co label {
  font-size: 0.67rem;
  font-weight: 700;
  color: #4361ee;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sb-co select {
  color: #1e2a4a;
  font-size: 0.83rem;
  font-weight: 600;
  background: transparent;
  font-family: var(--font);
}
.sb-co select option { background: #fff; color: #1e2a4a; }

.sb-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  color: #7a89b0;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 12px 16px 5px;
}
.sb-div { background: #e2e8f5; margin: 8px 12px; }

.nav-item {
  margin: 1px 10px;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 0.855rem;
  font-weight: 500;
  color: #4a5472;
  gap: 11px;
  transition: all 0.13s;
  position: relative;
}
.nav-item:hover {
  background: #eef1fd;
  color: #4361ee;
}
.nav-item.active {
  background: #eef1fd;
  color: #4361ee;
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: #4361ee;
  border-radius: 0 3px 3px 0;
  box-shadow: none;
}
.nav-item svg { opacity: 0.65; width: 17px; height: 17px; }
.nav-item.active svg { opacity: 1; color: #4361ee; }
.nav-item .bc {
  background: #4361ee;
  font-size: 0.67rem;
  padding: 1px 7px;
  border-radius: 20px;
  font-weight: 700;
}

/* Sidebar user section */
.sb-user { border-top: 1px solid #e2e8f5; padding: 12px; }
.u-chip { border-radius: 10px; padding: 8px 10px; }
.u-chip:hover { background: #eef1fd; }
.u-name { color: #1e2a4a; font-size: 0.83rem; }
.u-role { color: #7a89b0; font-size: 0.72rem; }
.av { background: linear-gradient(135deg, #4361ee, #7c3aed); border-radius: 8px; }

/* ── MAIN CONTENT ── */
.main { background: var(--bg); }
.card {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ch {
  padding: 15px 18px;
  border-bottom: 1px solid #f0f3fa;
}
.ct { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.cd { font-size: 0.75rem; color: var(--ink3); }

/* ── STAT CARDS ── */
.stat-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 16px;
  gap: 13px;
  transition: box-shadow 0.18s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  border-radius: 0 14px 0 60px;
  opacity: 0.06;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.si { width: 42px; height: 42px; border-radius: 11px; }
.si-blue { background: linear-gradient(135deg, #eef1fd, #dde4fb); color: var(--accent); }
.si-green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }
.si-amber { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.si-red { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; }
.si-orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c; }

.sv { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; }
.sl { font-size: 0.73rem; font-weight: 600; color: var(--ink3); }
.ss { font-size: 0.69rem; color: var(--ink3); }

/* ── BUTTONS ── */
.btn {
  border-radius: 9px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.855rem;
  transition: all 0.15s;
  gap: 7px;
}
.btn-p {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(67,97,238,0.3);
}
.btn-p:hover { background: var(--accent-dark); box-shadow: 0 4px 14px rgba(67,97,238,0.4); transform: translateY(-1px); }
.btn-o {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1.5px solid rgba(67,97,238,0.25);
}
.btn-o:hover { background: #dce4fc; border-color: var(--accent); }
.btn-g {
  background: var(--surface);
  color: var(--ink2);
  border: 1px solid var(--border);
}
.btn-g:hover { background: var(--surface2); color: var(--ink); }

/* ── BADGES ── */
.badge {
  font-size: 0.71rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.b-active,.b-present,.b-verified,.b-approved {
  color: #166534; background: #dcfce7; border-color: #86efac;
}
.b-leave,.b-on-leave { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.b-late { color: #9a3412; background: #ffedd5; border-color: #fdba74; }
.b-absent { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
.b-pending,.b-pending-review { color: #1e40af; background: #dbeafe; border-color: #93c5fd; }
.b-default { color: var(--ink2); background: var(--surface2); border-color: var(--border); }

/* ── TABLES ── */
thead th {
  background: #f8f9fd;
  font-size: 0.70rem;
  letter-spacing: 0.06em;
  color: var(--ink3);
  border-bottom: 2px solid var(--border);
  padding: 10px 14px;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid #f2f4fb; }
tbody tr:hover td { background: #f5f8ff; }

/* ── PERIOD TABS ── */
.period-tabs {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.period-tab {
  border-radius: 7px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink2);
  padding: 5px 14px;
}
.period-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(67,97,238,0.3);
}

/* ── VIEW SWITCHER ── */
.view-sw { background: var(--surface); border: 1.5px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.vs-btn { border-radius: 6px; font-family: var(--font); font-size: 0.79rem; font-weight: 600; color: var(--ink2); padding: 6px 11px; gap: 5px; }
.vs-btn.active { background: var(--accent); color: #fff; box-shadow: 0 1px 6px rgba(67,97,238,0.35); }

/* ── EMPLOYEE CARDS ── */
.eg { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 12px; }
.emp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.emp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
  opacity: 0;
  transition: opacity 0.2s;
}
.emp-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(67,97,238,0.25);
}
.emp-card:hover::before { opacity: 1; }
.emp-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67,97,238,0.12), var(--shadow-md);
}
.emp-card.selected::before { opacity: 1; }

/* ── MODALS ── */
.emp-modal-box, .vd-box {
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15,23,41,0.25);
}
.emp-modal-head, .vd-head {
  background: linear-gradient(135deg, #4361ee 0%, #7c3aed 100%);
  padding: 18px 22px;
}
.emp-modal-tabs, .vd-tabs { background: #fafbff; border-bottom: 1.5px solid var(--border); }
.emp-modal-tab, .vd-tab {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink3);
  padding: 11px 16px;
}
.emp-modal-tab.active, .vd-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.emp-modal-tab:hover, .vd-tab:hover { color: var(--accent); }

.emf-input {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: var(--font);
  font-size: 0.87rem;
  color: var(--ink);
  padding: 9px 12px;
  background: #fafbff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.emf-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,97,238,0.12); background: #fff; }
.emf-label { font-size: 0.75rem; font-weight: 700; color: var(--ink2); }

.emp-modal-foot { background: #f8f9fd; border-top: 1.5px solid var(--border); }

/* ── FORM INPUTS ── */
.fg input, .fg select {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: var(--font);
  font-size: 0.88rem;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fg input:focus, .fg select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67,97,238,0.12);
}

/* ── LOGIN ── */
.login-left {
  background: linear-gradient(145deg, #1a2a6c 0%, #4361ee 50%, #7c3aed 100%);
}
.lcard {
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(15,23,41,0.12), 0 1px 4px rgba(15,23,41,0.06);
}
.lb-logo h2 { color: var(--accent); font-family: var(--font); }

/* ── SEARCH DROPDOWN ── */
.search-dropdown {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15,23,41,0.15);
}
.sd-item { font-family: var(--font); }
.sd-item:hover, .sd-item.hovered { background: #f0f4ff; }

/* ── EXPORT MENU ── */
.export-btn {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.82rem;
  background: var(--surface);
  color: var(--ink2);
  transition: all 0.15s;
}
.export-btn:hover { background: var(--surface2); border-color: #c4cde8; }
.export-menu { border-radius: 12px; box-shadow: 0 12px 36px rgba(15,23,41,0.14); border: 1px solid var(--border); }
.export-item:hover { background: #f5f8ff; }

/* ── MINI DASH (employees page) ── */
.emd-card {
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: all 0.18s;
}
.emd-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.emd-icon { border-radius: 10px; }
.emd-value { font-weight: 800; letter-spacing: -0.04em; }

/* ── MISC ── */
.page-anim { animation: fadeSlideIn 0.25s ease-out; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Monospace elements */
.att-t td.f2, .col-mono, .vd-val.mono, .detail-field .df-val.mono, .emp-header-meta .id-chip {
  font-family: var(--mono);
}

/* Period summary chips */
.period-summary span {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid rgba(67,97,238,0.2);
  border-radius: 20px;
  font-weight: 700;
}

/* Company chip in topbar */
.tb-company-chip {
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 20px;
}
.tb-company-chip:hover { background: rgba(255,255,255,0.16); }
.tb-company-chip .co-name { font-size: 0.79rem; }
.tb-company-chip .co-dot { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.6); }

/* Scroll bar styling */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #dde4f0; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(135deg,#1877f2,#3b82f6); border-radius: 10px; border: 3px solid #dde4f0; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg,#0e5fc0,#1877f2); }
::-webkit-scrollbar-corner { background: #dde4f0; }

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar { width: 10px; }
.sidebar::-webkit-scrollbar-track { background: #f0f3fa; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(24,119,242,0.25); border-radius: 8px; border: 2px solid #f0f3fa; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(24,119,242,0.5); }

/* Attendance table header modernize */
.att-t th { background: #2d3a6b; }
.att-t th.f1 { background: #1a2248; }
.att-t th.f2 { background: #1e2b5e; }
.att-t th.f3 { background: #1e2b5e; }
.att-t th.f4,.att-t th.f5,.att-t th.f6,.att-t th.f7,.att-t th.f8,.att-t th.f9,.att-t th.f10 { background: #253170; }

/* Login right bg */
.login-right { background: #f4f6fb; }

/* ═══════════════════════════════════════════════════════════════
   ✦ PEOPLESPHERE v8 — VIBRANT MODERN REDESIGN
   Big colorful typography · Bold gradients · Energetic palette
   ═══════════════════════════════════════════════════════════════ */

/* ── ROOT OVERRIDES ── */
:root {
  --font: 'Sora', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --accent: #5b5ef4;
  --accent-dark: #4547e0;
  --accent-bg: #eeeeff;
  --sidebar-bg: #ffffff;
  --sidebar-surface: #f0f5ff;
  --sidebar-text: #1e2a4a;
  --sidebar-text-muted: #7a89b0;
  --sidebar-accent: #5b5ef4;
  --sidebar-active-bg: rgba(91,94,244,0.10);
  --bg: #f2f4fb;
  --border: #dde4f4;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 8px rgba(13,15,30,0.07), 0 0 0 1px rgba(13,15,30,0.04);
  --shadow-md: 0 8px 28px rgba(13,15,30,0.13), 0 2px 6px rgba(13,15,30,0.06);
}

body { font-family: var(--font); font-size: 14.5px; }

/* ── TOPBAR — light blue ── */
.topbar {
  background: linear-gradient(90deg, #1877f2 0%, #2563eb 60%, #1d4ed8 100%);
  box-shadow: 0 2px 12px rgba(24,119,242,0.2), 0 1px 0 rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.tb-brand {
  background: rgba(0,0,0,0.10);
  border-right: 1px solid rgba(255,255,255,0.18);
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.tb-brand::before {
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* ── SIDEBAR — light white/blue ── */
.sidebar { background: #ffffff; border-right: 1px solid #e2e8f5; }

.sb-lbl {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.63rem;
  font-weight: 700;
  color: #7a89b0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.nav-item {
  font-family: 'Sora', sans-serif;
  font-size: 0.845rem;
  font-weight: 500;
  color: #4a5472;
  margin: 2px 10px;
  border-radius: 10px;
}
.nav-item:hover { background: #eef1fd; color: #5b5ef4; }
.nav-item.active {
  background: #eef1fd;
  color: #5b5ef4;
  font-weight: 700;
}
.nav-item.active::before {
  background: #5b5ef4;
  box-shadow: none;
  width: 3.5px;
}
.nav-item .bc {
  background: #5b5ef4;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.u-name { color: #1e2a4a; font-size: 0.85rem; font-weight: 700; }
.u-role { color: #7a89b0; font-size: 0.71rem; font-weight: 600; }
.av {
  background: linear-gradient(135deg, #5b5ef4, #a855f7);
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(91,94,244,0.3);
}

/* ── PAGE HEADER / STAT CARDS ── */
.stat-grid { gap: 13px; }

.stat-card {
  border-radius: 16px;
  border: 1px solid rgba(221,228,244,0.8);
  box-shadow: 0 2px 12px rgba(13,15,30,0.06);
  padding: 18px;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(91,94,244,0.15); }

/* Stat icon backgrounds — vivid */
.si { width: 44px; height: 44px; border-radius: 13px; }
.si-blue  { background: linear-gradient(135deg, #5b5ef4, #7c7fff); color: #fff; box-shadow: 0 4px 14px rgba(91,94,244,0.35); }
.si-green { background: linear-gradient(135deg, #22c55e, #4ade80); color: #fff; box-shadow: 0 4px 14px rgba(34,197,94,0.35); }
.si-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,0.35); }
.si-red   { background: linear-gradient(135deg, #ef4444, #f87171); color: #fff; box-shadow: 0 4px 14px rgba(239,68,68,0.35); }
.si-orange{ background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; box-shadow: 0 4px 14px rgba(249,115,22,0.35); }
.si svg { width: 20px; height: 20px; }

/* BIG colorful stat numbers */
.sv {
  font-family: 'Sora', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(135deg, var(--ink) 0%, #4a5472 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sl {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ss { font-size: 0.7rem; font-weight: 500; color: var(--ink3); }

/* ── CARD HEADERS — Colorful titles ── */
.ct {
  font-family: 'Sora', sans-serif;
  font-size: 1.0rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #1a1d3a 0%, #5b5ef4 150%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cd { font-family: 'Space Grotesk', sans-serif; font-size: 0.73rem; font-weight: 500; }

.card { border-radius: 16px; border-color: rgba(221,228,244,0.9); }
.ch { padding: 16px 20px; border-bottom-color: #f0f3fa; }
.cb { padding: 16px 20px; }

/* ── BUTTONS — Bold & vivid ── */
.btn {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.845rem;
  letter-spacing: -0.01em;
  border-radius: 10px;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-p {
  background: linear-gradient(135deg, #5b5ef4 0%, #7c7fff 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(91,94,244,0.38);
}
.btn-p:hover {
  background: linear-gradient(135deg, #4547e0, #5b5ef4);
  box-shadow: 0 6px 22px rgba(91,94,244,0.5);
  transform: translateY(-2px);
}
.btn-o {
  background: linear-gradient(135deg, #eeeeff, #e8e9ff);
  color: #5b5ef4;
  border-color: rgba(91,94,244,0.3);
  font-weight: 700;
}
.btn-o:hover { background: #dcdeff; border-color: #5b5ef4; }

/* ── TABLES — cleaner headers ── */
thead th {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8b93ae;
  text-transform: uppercase;
  background: #f8f9fd;
}

/* ── BADGES — vivid pills ── */
.badge { font-family: 'Space Grotesk', sans-serif; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.03em; }

/* ── LOGIN PAGE ── */
.login-left {
  background: linear-gradient(150deg, #0d0f1e 0%, #1a1060 40%, #5b5ef4 80%, #a855f7 100%);
  position: relative;
  overflow: hidden;
}
.login-left::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,94,244,0.25) 0%, transparent 70%);
  top: -100px; right: -200px;
}
.login-left::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 70%);
  bottom: 50px; left: -80px;
}
.ll-brand h1, .ll-hero h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.ll-hero h2 { font-size: 2.8rem; line-height: 1.15; }
.ll-hero p { font-size: 1.0rem; }

.lb-logo h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #5b5ef4, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lcard {
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(13,15,30,0.14);
}
.lcard h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0d0f1e;
}
.lcard .sub { font-size: 0.92rem; color: #8b93ae; }

.fg label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #4a5472;
}
.fg input, .fg select {
  font-family: var(--font);
  font-size: 0.92rem;
  border-radius: 10px;
  padding: 12px 14px;
}
.btn-full { padding: 14px; font-size: 0.95rem; }

/* ── EMPLOYEE CARDS ── */
.emp-card {
  border-radius: 16px;
  border-color: rgba(221,228,244,0.9);
}
.emp-card::before {
  background: linear-gradient(90deg, #5b5ef4, #a855f7, #f97316);
  height: 3.5px;
  border-radius: 16px 16px 0 0;
}

.eci h3 {
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0d0f1e;
}
.eci small {
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  color: #5b5ef4;
  font-size: 0.78rem;
}

/* ── SECTION TITLES — Colorful ── */
.detail-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #5b5ef4, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-bottom-color: #eeeeff;
  padding-bottom: 7px;
  margin-bottom: 10px;
}

.emf-section-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.77rem !important;
  color: #5b5ef4 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #eeeeff, #f3f0ff);
  border: 1px solid rgba(91,94,244,0.15);
  border-radius: 8px;
  padding: 8px 12px !important;
  margin-bottom: 14px;
}

/* Modal header gradient */
.emp-modal-head {
  background: linear-gradient(135deg, #0d0f1e 0%, #1e1060 50%, #5b5ef4 150%);
  border-radius: 16px 16px 0 0;
}
.emp-modal-box { border-radius: 18px; box-shadow: 0 28px 72px rgba(13,15,30,0.28); }

/* Modal tabs */
.emp-modal-tab.active, .vd-tab.active {
  color: #5b5ef4;
  border-bottom-color: #5b5ef4;
  font-weight: 800;
}
.emp-modal-tab, .vd-tab { font-family: 'Sora', sans-serif; font-weight: 600; }

/* Attendance table header */
.att-t th { background: #1877f2; }
.att-t th.f1 { background: #1251b5; }
.att-t th.f2 { background: #1562d8; }
.att-t th.f3 { background: #1562d8; border-right-color: #f59e0b; }
.att-t th.f4,.att-t th.f5,.att-t th.f6,.att-t th.f7,.att-t th.f8,.att-t th.f9,.att-t th.f10 {
  background: #2563eb;
}

/* Period tabs */
.period-tab {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
}
.period-tab.active {
  background: linear-gradient(135deg, #5b5ef4, #7c7fff);
  box-shadow: 0 3px 12px rgba(91,94,244,0.4);
  font-weight: 800;
}

/* View switcher */
.vs-btn.active {
  background: linear-gradient(135deg, #5b5ef4, #7c7fff);
  box-shadow: 0 2px 8px rgba(91,94,244,0.35);
  font-weight: 700;
}
.vs-btn { font-family: 'Sora', sans-serif; font-weight: 600; }

/* Pivot sidebar */
.pv-sidebar-title { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 0.77rem; letter-spacing: 0.07em; }

/* Stat values in employee mini-dash */
.emd-value {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.45rem;
}

/* mc cards on dashboard */
.mc .val {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #1a1d3a 0%, #5b5ef4 200%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mc .lbl {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b93ae;
}

/* ps stat cards */
.ps .val {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.ps .lbl {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Scrollbar - vivid purple/blue */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #e8ecf5; border-radius: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #5b5ef4, #a855f7);
  border-radius: 10px; border: 3px solid #e8ecf5; min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #4547e0, #7c3aed); }

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: #f0f3fa; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(91,94,244,0.25); border-radius: 6px; border: none; }

/* ═══════════════════════════════════════════════════════
   DEVELOPER MENU — Topbar dropdown
═══════════════════════════════════════════════════════ */
.tb-developer-menu { position: relative; }
.tb-dev-panel-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.15));
  border: 1px solid rgba(245,158,11,0.4);
  color: #fbbf24; font-family: var(--font); font-size: .78rem; font-weight: 700;
  cursor: pointer; letter-spacing: .03em; transition: all .15s; white-space: nowrap;
}
.tb-dev-panel-btn:hover { background: linear-gradient(135deg,rgba(245,158,11,0.35),rgba(239,68,68,0.25)); border-color: rgba(245,158,11,.7); }
.tb-dev-panel-btn svg { width: 14px; height: 14px; }
.tb-dev-panel-btn.open { background: linear-gradient(135deg,#f59e0b,#ef4444); color: #fff; border-color: transparent; }
.tb-dev-panel-btn.open #dev-panel-arrow { transform: rotate(180deg); }

.tb-dev-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid #e2e8f5; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15,23,41,0.14);
  min-width: 220px; z-index: 9999; overflow: hidden; padding: 6px;
}
.tb-dev-dropdown.open { display: block; animation: devDdIn .18s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes devDdIn { from { opacity:0; transform: translateY(-8px) scale(.97); } to { opacity:1; transform: translateY(0) scale(1); } }
.tb-dev-dd-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  cursor: pointer; transition: background .12s; color: #4a5472;
}
.tb-dev-dd-item:hover { background: #eef1fd; }
.tb-dev-dd-item svg { width: 16px; height: 16px; flex-shrink: 0; color: #5b5ef4; }
.tb-dev-dd-label { font-size: .82rem; font-weight: 700; color: #1e2a4a; }
.tb-dev-dd-sub { font-size: .7rem; color: #8b93ae; margin-top: 1px; }
.tb-dev-dd-divider { height: 1px; background: #e2e8f5; margin: 4px 0; }

/* ═══════════════════════════════════════════════════════
   DEVELOPER CONTROL PANEL — Full-screen overlay
═══════════════════════════════════════════════════════ */
#dev-cp-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
}
#dev-cp-overlay.open { display: flex; flex-direction: column; }

#dev-cp {
  display: flex; flex-direction: column;
  margin: 24px auto; width: calc(100% - 48px); max-width: 1340px;
  max-height: calc(100vh - 48px); border-radius: 20px; overflow: hidden;
  background: #f4f6fb; border: 1px solid #e2e8f5;
  box-shadow: 0 24px 64px rgba(15,23,41,0.2);
  animation: cpIn .25s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes cpIn { from { opacity:0; transform: scale(.95) translateY(20px); } to { opacity:1; transform: scale(1) translateY(0); } }

/* CP Header */
#dev-cp-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f5; flex-shrink: 0;
}
.dev-cp-title {
  display: flex; align-items: center; gap: 10px; flex: 1;
}
.dev-cp-title-icon {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 4px 14px rgba(245,158,11,.4);
}
.dev-cp-title-icon svg { width: 18px; height: 18px; color: #fff; }
.dev-cp-title h2 { font-family: 'Sora', sans-serif; font-size: 1.1rem; font-weight: 800; color: #0f1729; letter-spacing: -.02em; }
.dev-cp-title span { font-size: .73rem; color: #8b93ae; margin-top: 2px; font-family: 'DM Mono', monospace; }
.dev-cp-tabs { display: flex; gap: 2px; background: #f0f3fa; border-radius: 10px; padding: 3px; }
.dev-cp-tab {
  padding: 6px 14px; border-radius: 8px; font-size: .78rem; font-weight: 700; cursor: pointer;
  color: #8b93ae; font-family: 'Space Grotesk', sans-serif; transition: all .15s;
}
.dev-cp-tab:hover { color: #4a5472; background: rgba(67,97,238,0.06); }
.dev-cp-tab.active { background: #fff; color: #5b5ef4; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.dev-cp-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dev-cp-save-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9px;
  background: linear-gradient(135deg, #5b5ef4, #7c7fff); color: #fff;
  font-family: 'Sora', sans-serif; font-size: .82rem; font-weight: 700; cursor: pointer; border: none;
  box-shadow: 0 4px 14px rgba(91,94,244,.4); transition: all .15s;
}
.dev-cp-save-btn:hover { background: linear-gradient(135deg,#4547e0,#5b5ef4); box-shadow: 0 6px 20px rgba(91,94,244,.55); transform: translateY(-1px); }
.dev-cp-save-btn svg { width: 14px; height: 14px; }
.dev-cp-reset-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px;
  background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.25);
  font-family: 'Sora', sans-serif; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.dev-cp-reset-btn:hover { background: rgba(239,68,68,.2); }
.dev-cp-close-btn {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #f0f3fa; border: 1px solid #e2e8f5; cursor: pointer; color: #8b93ae;
  font-size: 1.1rem; transition: all .12s;
}
.dev-cp-close-btn:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }

/* CP Body */
#dev-cp-body { display: flex; flex: 1; overflow: hidden; }

/* LEFT PANEL — Menu Management */
#dev-cp-left {
  width: 320px; flex-shrink: 0; border-right: 1px solid #e2e8f5;
  display: flex; flex-direction: column; background: #fff;
}
.dev-cp-panel-header {
  padding: 14px 16px; border-bottom: 1px solid #e2e8f5;
  display: flex; align-items: center; justify-content: space-between;
}
.dev-cp-panel-header h3 { font-size: .88rem; font-weight: 700; color: #0f1729; font-family: 'Sora', sans-serif; }
.dev-cp-panel-header span { font-size: .7rem; color: #8b93ae; }
.dev-cp-add-menu-btn {
  display: flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 7px;
  background: #eef1fd; color: #5b5ef4; border: 1px solid rgba(91,94,244,.25);
  font-size: .74rem; font-weight: 700; cursor: pointer; transition: all .12s;
}
.dev-cp-add-menu-btn:hover { background: #dde3fb; }
.dev-cp-add-menu-btn svg { width: 12px; height: 12px; }

#dev-cp-menu-list {
  flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 3px;
}
.dev-menu-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px;
  background: #f8f9fd; border: 1px solid transparent; cursor: pointer;
  transition: all .12s; position: relative;
}
.dev-menu-item:hover { background: #eef1fd; border-color: rgba(91,94,244,.2); }
.dev-menu-item.selected { background: #eef1fd; border-color: rgba(91,94,244,.35); }
.dev-menu-item-drag { color: #aab4cc; cursor: grab; flex-shrink: 0; }
.dev-menu-item-drag:active { cursor: grabbing; }
.dev-menu-item-drag svg { width: 14px; height: 14px; }
.dev-menu-item-icon { width: 28px; height: 28px; border-radius: 7px; background: #eef1fd; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dev-menu-item-icon svg { width: 14px; height: 14px; color: #5b5ef4; }
.dev-menu-item-label { flex: 1; font-size: .83rem; font-weight: 600; color: #1e2a4a; font-family: 'Sora', sans-serif; }
.dev-menu-item-sublabel { font-size: .68rem; color: #8b93ae; margin-top: 1px; }
.dev-menu-item-badge { font-size: .65rem; font-weight: 800; padding: 1px 7px; border-radius: 10px; background: #eef1fd; color: #5b5ef4; }
.dev-menu-item-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.dev-menu-item:hover .dev-menu-item-actions { opacity: 1; }
.dev-menu-act-btn {
  width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: #f0f3fa; border: none; cursor: pointer; color: #8b93ae; transition: all .12s;
}
.dev-menu-act-btn:hover { background: #eef1fd; color: #5b5ef4; }
.dev-menu-act-btn.del:hover { background: #fee2e2; color: #ef4444; }
.dev-menu-act-btn svg { width: 12px; height: 12px; }
.dev-menu-section-header {
  padding: 6px 10px 4px; font-size: .63rem; font-weight: 800; color: #7a89b0;
  text-transform: uppercase; letter-spacing: .1em; font-family: 'Space Grotesk', sans-serif;
}
.dev-menu-subsection {
  margin-left: 16px; border-left: 2px solid #e2e8f5; padding-left: 8px;
}

/* RIGHT PANEL — Content/Data Management */
#dev-cp-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f4f6fb;
}
#dev-cp-right-tabs {
  display: flex; gap: 0; border-bottom: 1px solid #e2e8f5; flex-shrink: 0;
  overflow-x: auto; padding: 0 16px; background: #fff;
}
.dev-cp-rtab {
  padding: 12px 16px; font-size: .78rem; font-weight: 700; cursor: pointer; color: #8b93ae;
  border-bottom: 2px solid transparent; font-family: 'Space Grotesk', sans-serif;
  white-space: nowrap; transition: all .12s;
}
.dev-cp-rtab:hover { color: #4a5472; }
.dev-cp-rtab.active { color: #5b5ef4; border-bottom-color: #5b5ef4; }

#dev-cp-right-content { flex: 1; overflow-y: auto; padding: 16px; }

/* Data table in right panel */
.dev-data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.dev-data-table th {
  padding: 8px 12px; text-align: left; font-size: .68rem; font-weight: 800; color: #8b93ae;
  text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid #e2e8f5;
  background: #fff; font-family: 'Space Grotesk', sans-serif; white-space: nowrap;
}
.dev-data-table td {
  padding: 8px 12px; border-bottom: 1px solid #f0f3fa; color: #1e2a4a; vertical-align: middle;
}
.dev-data-table tr:hover td { background: #f5f7ff; }
.dev-data-table input, .dev-data-table select {
  background: #fff; border: 1px solid #e2e8f5; border-radius: 6px;
  color: #1e2a4a; font-family: var(--font); font-size: .8rem; padding: 4px 8px; outline: none;
  width: 100%; transition: border-color .12s;
}
.dev-data-table input:focus, .dev-data-table select:focus { border-color: #5b5ef4; background: #f8f9ff; }
.dev-data-table .act-btns { display: flex; gap: 4px; }
.dev-data-del { padding: 4px 8px; border-radius: 6px; background: #fee2e2; color: #ef4444; border: 1px solid #fca5a5; font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.dev-data-del:hover { background: #fecaca; }
.dev-data-edit { padding: 4px 8px; border-radius: 6px; background: #eef1fd; color: #5b5ef4; border: 1px solid rgba(91,94,244,.2); font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.dev-data-edit:hover { background: #dde3fb; }

/* Section headers in right panel */
.dev-section-title {
  font-size: .8rem; font-weight: 800; color: #0f1729; font-family: 'Sora', sans-serif;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.dev-section-title::after { content: ''; flex: 1; height: 1px; background: #e2e8f5; }

.dev-add-row-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
  background: #eef1fd; color: #5b5ef4; border: 1px dashed rgba(91,94,244,.3);
  font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .12s; margin-top: 8px;
  width: 100%; justify-content: center;
}
.dev-add-row-btn:hover { background: #dde3fb; border-style: solid; }
.dev-add-row-btn svg { width: 13px; height: 13px; }

/* Menu edit form */
.dev-menu-edit-form {
  padding: 16px; background: #eef1fd; border-radius: 12px; border: 1px solid rgba(91,94,244,.15);
  margin-bottom: 16px;
}
.dev-form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.dev-form-label { font-size: .7rem; font-weight: 700; color: #4a5472; text-transform: uppercase; letter-spacing: .06em; font-family: 'Space Grotesk', sans-serif; }
.dev-form-input {
  background: #fff; border: 1px solid #e2e8f5; border-radius: 8px;
  color: #1e2a4a; font-family: var(--font); font-size: .85rem; padding: 8px 11px; outline: none;
  transition: border-color .12s;
}
.dev-form-input:focus { border-color: #5b5ef4; box-shadow: 0 0 0 3px rgba(91,94,244,0.1); }
.dev-form-row-h { display: flex; gap: 10px; }
.dev-form-actions { display: flex; gap: 8px; margin-top: 4px; }
.dev-form-apply { padding: 7px 16px; border-radius: 8px; background: linear-gradient(135deg,#5b5ef4,#7c7fff); color: #fff; font-size: .8rem; font-weight: 700; cursor: pointer; border: none; }
.dev-form-cancel { padding: 7px 14px; border-radius: 8px; background: #f0f3fa; color: #8b93ae; font-size: .8rem; font-weight: 700; cursor: pointer; border: 1px solid #e2e8f5; }

/* Global settings panel */
.dev-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dev-setting-card {
  background: #fff; border: 1px solid #e2e8f5; border-radius: 12px; padding: 14px;
}
.dev-setting-card-title { font-size: .8rem; font-weight: 700; color: #0f1729; margin-bottom: 10px; font-family: 'Sora', sans-serif; }

/* Toggle switch */
.dev-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.dev-toggle-label { font-size: .8rem; color: #4a5472; }
.dev-toggle { position: relative; width: 38px; height: 20px; }
.dev-toggle input { opacity: 0; width: 0; height: 0; }
.dev-toggle-slider {
  position: absolute; inset: 0; border-radius: 20px; background: #e2e8f5; cursor: pointer;
  transition: background .2s;
}
.dev-toggle-slider::before {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; left: 3px; top: 3px; transition: all .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.dev-toggle input:checked + .dev-toggle-slider { background: #5b5ef4; }
.dev-toggle input:checked + .dev-toggle-slider::before { transform: translateX(18px); background: #fff; }

/* Color swatch picker */
.dev-color-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.dev-color-label { font-size: .8rem; color: #4a5472; flex: 1; }
.dev-color-picker { width: 32px; height: 24px; border-radius: 6px; cursor: pointer; border: 1px solid #e2e8f5; overflow: hidden; }
.dev-color-picker input[type=color] { width: 100%; height: 100%; border: none; cursor: pointer; padding: 0; }

/* Notification toast inside CP */
#dev-cp-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #e2e8f5; border-radius: 10px;
  padding: 10px 20px; font-size: .83rem; font-weight: 700; color: #1e2a4a; z-index: 9999;
  box-shadow: 0 8px 24px rgba(15,23,41,0.12);
  display: none; animation: cpToast .2s ease both;
}
#dev-cp-toast.show { display: block; }
@keyframes cpToast { from { opacity:0; transform: translateX(-50%) translateY(10px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }

/* Drag state */
.dev-menu-item.dragging { opacity: .4; transform: scale(.98); }
.dev-menu-item.drag-over { background: #eef1fd; border-color: #5b5ef4; }

/* Company switcher */
.sb-co {
  background: #eef1fd;
  border: 1px solid rgba(91,94,244,0.18);
  border-radius: 12px;
}
.sb-co label { color: #5b5ef4; font-family: 'Space Grotesk', sans-serif; font-size: 0.63rem; letter-spacing: 0.1em; }
.sb-co select { font-family: 'Sora', sans-serif; color: #1e2a4a; font-weight: 600; font-size: 0.85rem; }

/* tb-av avatar */
.tb-av {
  background: rgba(255,255,255,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  border-radius: 10px;
  font-size: 0.77rem;
  border: 2px solid rgba(255,255,255,0.4);
  color: #fff;
}

/* Notif items */
.notif h4 { font-family: 'Sora', sans-serif; font-size: 0.87rem; font-weight: 700; color: #0d0f1e; }
.notif p { font-family: var(--font); font-size: 0.79rem; }

.ri h4 { font-family: 'Sora', sans-serif; font-size: 0.87rem; font-weight: 700; }

/* Animation - snappier */
.page-anim { animation: modernFadeIn 0.28s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes modernFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Table employee list col-mono */
.emp-list-t .col-mono {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5b5ef4;
  letter-spacing: 0.02em;
}

/* EMP Detail header */
.emp-detail-header {
  background: linear-gradient(135deg, rgba(91,94,244,0.07) 0%, rgba(168,85,247,0.04) 100%);
  border-color: rgba(91,94,244,0.15);
  border-radius: 14px;
}
.emp-detail-header .av-xl {
  background: linear-gradient(135deg, #5b5ef4, #a855f7);
  border-color: rgba(91,94,244,0.3);
  box-shadow: 0 4px 16px rgba(91,94,244,0.3);
  border-radius: 14px;
}
.emp-header-meta h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d0f1e;
}
.emp-header-meta .id-chip {
  font-family: 'DM Mono', monospace;
  color: #5b5ef4;
  background: #eeeeff;
  border-color: rgba(91,94,244,0.25);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Export menu modernize */
.export-btn {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  border-radius: 10px;
  font-size: 0.83rem;
}
.export-menu { border-radius: 14px; }
.export-item .ei-label { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }

/* Import steps */
.aad-import-badge {
  background: linear-gradient(135deg, #5b5ef4, #7c7fff);
  box-shadow: 0 2px 10px rgba(91,94,244,0.4);
}
.aad-import-badge.amber {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 2px 10px rgba(245,158,11,0.4);
}
.aad-import-step-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
}

/* co-dot online indicator */
.co-dot {
  background: #22c55e !important;
  box-shadow: 0 0 8px rgba(34,197,94,0.7) !important;
}

/* Progress bar */
.pb { background: linear-gradient(90deg, #5b5ef4, #a855f7); }
.progress-bar-fill { background: linear-gradient(90deg, #5b5ef4, #7c7fff); }
.aad-imp-pb-fill { background: linear-gradient(90deg, #5b5ef4, #a855f7); }

/* Filter panel */
.efp-section-hdr {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  color: #5b5ef4;
  letter-spacing: 0.1em;
}
.efp-apply {
  background: linear-gradient(135deg, #5b5ef4, #7c7fff);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(91,94,244,0.35);
}

/* Tab bars */
.aad-tab { font-family: 'Sora', sans-serif; font-weight: 700; }
.aad-tab.active { color: #5b5ef4; border-bottom-color: #5b5ef4; }

.emp-tab { font-family: 'Sora', sans-serif; font-weight: 600; }
.emp-tab.active { color: #5b5ef4; border-bottom-color: #5b5ef4; font-weight: 800; }

/* Emf inputs */
.emf-input {
  font-family: var(--font);
  font-size: 0.89rem;
  border-radius: 10px;
  border-color: #dde4f4;
}
.emf-input:focus { border-color: #5b5ef4; box-shadow: 0 0 0 3px rgba(91,94,244,0.13); }
.emf-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #4a5472;
  letter-spacing: 0.02em;
}

/* Search dropdown */
.search-dropdown { border-radius: 14px; }
.sd-item { font-family: var(--font); }
.sd-item .sd-label em { color: #a855f7; }

/* Period summary */
.period-summary span {
  background: linear-gradient(135deg, #eeeeff, #e8e9ff);
  color: #5b5ef4;
  border-color: rgba(91,94,244,0.25);
  font-family: 'DM Mono', monospace;
  font-size: 0.73rem;
  font-weight: 700;
}

/* Mini stat values below tables */
.import-stat .is-val { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -0.04em; }
.import-stat.total .is-val { color: #5b5ef4; }
.aad-imp-stat .is-val { font-family: 'Sora', sans-serif; font-weight: 800; }
.aad-imp-stat.total .is-val { color: #5b5ef4; }