*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --navy:#0F2744;--navy2:#1A3A5C;--navy3:#234E7A;--gold:#D4A843;
  --green:#1B7A4A;--green-bg:#E6F5ED;--green-t:#0E4A2C;
  --red:#C0392B;--red-bg:#FDECEA;--red-t:#7B1E14;
  --amber:#D4851A;--amber-bg:#FEF3E2;--amber-t:#7A4A08;
  --blue:#1A5FAA;--blue-bg:#EAF2FB;--blue-t:#0A3566;
  --purple:#5B3FB5;--purple-bg:#EEEDFE;--purple-t:#3C3489;
  --teal:#0F6E56;--teal-bg:#E1F5EE;--teal-t:#085041;
  --gray1:#F5F6FA;--gray2:#E8EAEF;--gray3:#BFC4D0;--gray4:#7F8699;--gray5:#3E4560;
  --white:#FFFFFF;--text:#1A1D2E;--r:12px;--rs:8px;--sh:0 2px 12px rgba(15,39,68,0.08);
  --sidebar-w:220px;
}

/* ── FONTS ── */
body{font-family:'Inter',sans-serif;background:var(--gray1);color:var(--text);min-height:100vh;overflow-x:hidden}
h1,h2,h3,.mv,.logo-text,.modal-title,.sec-title{font-family:'Space Grotesk',sans-serif}

/* ── LOADING ── */
#loading-screen{position:fixed;inset:0;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.35s}
#loading-screen.hide{opacity:0;pointer-events:none}
.sp-logo{color:white;font-size:28px;font-weight:700;margin-bottom:6px}
.sp-sub{color:rgba(255,255,255,0.4);font-size:13px;margin-bottom:32px}
.spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,0.15);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── LOGIN ── */
#login-screen{display:none;min-height:100vh;background:linear-gradient(160deg,var(--navy),var(--navy3));align-items:center;justify-content:center;padding:24px}
#login-screen.show{display:flex}
.login-box{background:white;border-radius:20px;padding:32px 24px;width:100%;max-width:420px;box-shadow:0 8px 40px rgba(15,39,68,0.25)}
.login-err{background:var(--red-bg);color:var(--red-t);padding:10px 14px;border-radius:var(--rs);font-size:13px;margin-bottom:14px;display:none}
.login-err.show{display:block}

/* ══════════════════════════════════════════════
   MOBILE LAYOUT (default, < 768px)
   ══════════════════════════════════════════════ */

/* MOBILE: body padding for bottom nav */
body{padding-bottom:72px}

/* MOBILE: header */
.hdr{background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;padding:14px 16px 12px;position:sticky;top:0;z-index:50}
.hdr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.hdr h1{font-size:18px;font-weight:700}
.hdr-right{display:flex;align-items:center;gap:8px}
.hdr-date{font-size:11px;opacity:0.8;background:rgba(255,255,255,0.12);padding:3px 9px;border-radius:20px}
.hdr-sub{font-size:11px;opacity:0.55}
.bell{position:relative;cursor:pointer;padding:4px}
.bell svg{width:20px;height:20px;stroke:white;opacity:0.8}
.bell-n{position:absolute;top:0;right:0;background:var(--red);color:white;font-size:9px;font-weight:700;width:15px;height:15px;border-radius:50%;display:none;align-items:center;justify-content:center}
.bell-n.show{display:flex}

/* MOBILE: bottom nav */
.bnav{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid var(--gray2);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom);overflow-x:auto;scrollbar-width:none}
.bnav::-webkit-scrollbar{display:none}
.ni{flex:1;min-width:56px;display:flex;flex-direction:column;align-items:center;padding:8px 2px 6px;cursor:pointer;color:var(--gray4);font-size:9px;gap:3px;border:none;background:none;flex-shrink:0}
.ni.active{color:var(--navy)}
.ni svg{width:20px;height:20px;stroke-width:1.8}
.ni-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0}
.ni.active .ni-dot{opacity:1}

/* MOBILE: sidebar hidden */
.sidebar{display:none}
.sidebar-logo{display:none}

/* MOBILE: main content */
#app{display:block}
.app-layout{display:block}
.main-content{display:block}

/* ══════════════════════════════════════════════
   DESKTOP LAYOUT (≥ 768px)
   ══════════════════════════════════════════════ */
@media(min-width:768px){
  body{padding-bottom:0;padding-left:var(--sidebar-w)}

  /* DESKTOP: sidebar nav */
  .bnav{display:none !important}
  .sidebar{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
    background:var(--navy);z-index:100;overflow-y:auto;
    padding:0 0 20px;scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar-logo{
    display:flex;align-items:center;gap:10px;
    padding:20px 16px 16px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:8px;
  }
  .sidebar-logo-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:white}
  .sidebar-logo-sub{font-size:10px;color:rgba(255,255,255,0.45);margin-top:1px}
  .sni{
    display:flex;align-items:center;gap:10px;
    padding:11px 16px;cursor:pointer;color:rgba(255,255,255,0.55);
    font-size:13px;font-weight:500;border:none;background:none;width:100%;text-align:left;
    border-radius:0;transition:background .15s,color .15s;font-family:'Inter',sans-serif;
  }
  .sni svg{width:18px;height:18px;stroke-width:1.8;flex-shrink:0}
  .sni:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.8)}
  .sni.active{background:rgba(255,255,255,0.12);color:white;font-weight:600}
  .sni-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);margin-left:auto;display:none}
  .sni.active .sni-dot{display:block}
  .sidebar-section{font-size:10px;font-weight:600;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:.8px;padding:12px 16px 4px}
  .sidebar-divider{border:none;border-top:1px solid rgba(255,255,255,0.08);margin:8px 0}
  .sidebar-bottom{margin-top:auto;padding-top:12px}

  /* DESKTOP: header */
  .hdr{padding:16px 28px 14px;position:sticky;top:0}
  .hdr h1{font-size:22px}
  .hdr-sub{font-size:12px}

  /* DESKTOP: content padding */
  .page{padding-bottom:20px}

  /* DESKTOP: cards 2-col where appropriate */
  .desktop-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 24px 16px}
  .desktop-2col .card{margin:0}
  .card{margin:0 24px 14px}
  .mgrid{padding:0 24px 14px;gap:14px;grid-template-columns:repeat(4,1fr)}
  .sbar{margin:0 24px 12px}
  .tabs{padding:0 24px 12px}
  .su-sec{margin:0 24px 12px}
  .emp-item{padding:12px 0}

  /* DESKTOP: modal centered */
  .mo{align-items:center}
  .modal{border-radius:16px;max-width:560px;max-height:85vh}
  .mo-handle{display:none}
}

/* ══════════════════════════════════════════════
   SHARED COMPONENTS
   ══════════════════════════════════════════════ */

/* PAGE */
.page{display:none;animation:fi 0.18s ease;min-height:calc(100vh - 140px)}
.page.active{display:block}
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* CARD */
.card{background:white;border-radius:var(--r);padding:16px;margin:0 16px 12px;box-shadow:var(--sh)}
.card-title{font-size:11px;font-weight:600;color:var(--gray4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}

/* METRIC GRID */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 12px}
.metric{background:white;border-radius:var(--rs);padding:13px;box-shadow:var(--sh)}
.m-lbl{font-size:11px;color:var(--gray4);font-weight:500;margin-bottom:5px}
.mv{font-size:24px;font-weight:700;color:var(--navy);line-height:1}
.m-sub{font-size:11px;color:var(--gray4);margin-top:3px}
.metric.g .mv{color:var(--green)} .metric.r .mv{color:var(--red)} .metric.a .mv{color:var(--amber)} .metric.b .mv{color:var(--blue)}

/* PILLS */
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.pill.g{background:var(--green-bg);color:var(--green-t)} .pill.r{background:var(--red-bg);color:var(--red-t)}
.pill.a{background:var(--amber-bg);color:var(--amber-t)} .pill.b{background:var(--blue-bg);color:var(--blue-t)}
.pill.p{background:var(--purple-bg);color:var(--purple-t)} .pill.t{background:var(--teal-bg);color:var(--teal-t)}
.pill.gray{background:var(--gray2);color:var(--gray5)} .pill.navy{background:var(--navy);color:white}

/* FORM */
.fg{margin-bottom:13px}
.fl{font-size:13px;font-weight:600;color:var(--gray5);margin-bottom:5px;display:block}
.fi,.fs,.fta{width:100%;padding:10px 13px;border:1.5px solid var(--gray2);border-radius:var(--rs);font-size:14px;font-family:'Inter',sans-serif;background:white;color:var(--text);-webkit-appearance:none;transition:border-color .15s}
.fi:focus,.fs:focus,.fta:focus{outline:none;border-color:var(--navy)}
.fta{resize:vertical;min-height:70px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* BUTTON */
.btn{padding:12px 18px;border:none;border-radius:var(--rs);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s;font-family:'Space Grotesk',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-w{width:100%} .btn-p{background:var(--navy);color:white} .btn-g{background:var(--green);color:white}
.btn-d{background:var(--red);color:white} .btn-a{background:var(--amber);color:white}
.btn-o{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-gh{background:transparent;color:var(--gray5);border:1.5px solid var(--gray3)}
.btn-sm{padding:7px 12px;font-size:12px}
.btn:active{transform:scale(.98);opacity:.9} .btn:disabled{opacity:.45;cursor:not-allowed}

/* RATE BADGE */
.rb{font-size:11px;font-weight:700;background:var(--navy);color:white;padding:2px 7px;border-radius:5px}

/* SEARCH */
.sbar{background:white;border-radius:var(--rs);padding:9px 13px;display:flex;align-items:center;gap:9px;border:1.5px solid var(--gray2);margin:0 16px 10px}
.sbar input,.sinp{border:none;outline:none;font-size:14px;flex:1;background:transparent;font-family:'Inter',sans-serif}
.sico{flex-shrink:0;width:17px;height:17px;color:var(--gray4)}

/* TABS */
.tabs{display:flex;gap:7px;padding:0 16px 10px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tb{padding:6px 13px;border-radius:20px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;background:var(--gray2);color:var(--gray5);border:none;font-family:'Inter',sans-serif;flex-shrink:0}
.tb.active{background:var(--navy);color:white}

/* EMP ITEM */
.emp-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--gray2);cursor:pointer}
.emp-item:last-child{border-bottom:none}
.av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;font-family:'Space Grotesk',sans-serif}

/* ATTENDANCE */
.att-row{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--gray2);gap:8px}
.att-row:last-child{border-bottom:none}
.att-info{flex:1;min-width:0}
.att-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-id{font-size:11px;color:var(--gray4)}
.att-btn{padding:5px 9px;border-radius:6px;font-size:11px;font-weight:700;border:none;cursor:pointer;background:var(--gray2);color:var(--gray5)}
.att-btn.absent{background:var(--red-bg);color:var(--red-t)}

/* SITE UPDATE TABLE */
.su-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.su-table{border-collapse:collapse;font-size:12px;background:white;border:1px solid #6b7785}
.su-table th{background:var(--navy);color:white;padding:7px 6px;text-align:center;font-weight:600;font-size:11px;white-space:nowrap;border:1px solid #2a4a6b}
.su-table th.lh{text-align:left;background:var(--navy2);min-width:128px;position:sticky;left:0;z-index:3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-table td{padding:6px 6px;border:1px solid #aeb6c0;text-align:center;font-size:12px}
.su-table td.rl{text-align:left;font-weight:600;color:var(--gray5);background:var(--gray1);white-space:nowrap;padding-left:12px;position:sticky;left:0;z-index:2;border-right:1px solid #6b7785}
.su-table th.lh.lh-fix,.su-table td.rl.rl-fix{min-width:128px;max-width:128px;width:128px;overflow:hidden;border-right:1px solid #2a4a6b}
.su-table th:not(.lh),.su-table td:not(.rl){min-width:44px;max-width:64px}
.su-table .dr td{background:var(--red-bg)} .su-table .dr td.rl{color:var(--red-t)}
.su-table .aw td{background:var(--amber-bg)} .su-table .aw td.rl{color:var(--amber-t)}
.su-table td.absent-num{color:var(--red);font-weight:700}
.rl-clip{max-width:106px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-table.mv-table th:not(.lh),.su-table.mv-table td:not(.rl){min-width:90px;max-width:none;text-align:left;padding-left:10px}
.nz{color:var(--gray3)}

/* COLLAPSIBLE SECTION */
.su-sec{margin:0 16px 10px}
.su-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:var(--rs) var(--rs) 0 0;cursor:pointer}
.su-body{background:white;border:1px solid var(--gray2);border-top:none;border-radius:0 0 var(--rs) var(--rs);overflow:hidden}
.sec-title{font-size:13px;font-weight:700;color:white}
.sec-count{font-size:12px;color:rgba(255,255,255,.8);font-weight:600}

/* DETAIL ROW */
.dr-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--gray2);font-size:13px}
.dr-row:last-child{border-bottom:none}
.dr-lbl{color:var(--gray4);font-weight:500} .dr-val{font-weight:600;text-align:right}

/* PERIOD TABS */
.pt{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.ptb{padding:4px 10px;border-radius:5px;font-size:11px;font-weight:600;border:1.5px solid var(--gray2);background:white;color:var(--gray5);cursor:pointer}
.ptb.active{background:var(--navy);color:white;border-color:var(--navy)}

/* MOVE ITEM */
.mv-item{padding:9px 0;border-bottom:1px solid var(--gray2)}
.mv-item:last-child{border-bottom:none}

/* BAR CHART */
.bar-chart{display:flex;flex-direction:column;gap:7px}
.bar-row{display:flex;align-items:center;gap:9px}
.bar-lbl{width:110px;color:var(--gray5);font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.bar-track{flex:1;height:20px;background:var(--gray2);border-radius:5px;overflow:hidden}
.bar-fill{height:100%;border-radius:5px;display:flex;align-items:center;padding-left:7px;font-size:11px;font-weight:700;color:white;min-width:18px;transition:width .5s}
.bar-cnt{width:30px;text-align:right;font-weight:700;color:var(--navy);font-size:12px;flex-shrink:0}

/* MODAL */
.mo{display:none;position:fixed;inset:0;background:rgba(15,39,68,.55);z-index:200;align-items:flex-end;justify-content:center}
.mo.open{display:flex}
.modal{background:white;border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;padding:18px 16px 40px}
.mo-handle{width:36px;height:4px;background:var(--gray3);border-radius:2px;margin:0 auto 16px}
.modal-title{font-size:17px;font-weight:700;margin-bottom:14px}

/* NOTICE */
.notice{padding:9px 12px;border-radius:var(--rs);font-size:12px;margin-bottom:12px}
.notice.a{background:var(--amber-bg);color:var(--amber-t)} .notice.b{background:var(--blue-bg);color:var(--blue-t)}
.notice.r{background:var(--red-bg);color:var(--red-t)} .notice.g{background:var(--green-bg);color:var(--green-t)}

/* DETAIL ROW */
.cat-line{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--gray2)}
.cat-line:last-child{border-bottom:none}

/* ROLE BADGES */
.role-managing_partner{background:#0F2744;color:white}
.role-hr_manager{background:#1B7A4A;color:white}
.role-hr_admin_officer{background:#1A5FAA;color:white}
.role-hr_officer{background:#D4851A;color:white}
.role-business_dev_manager{background:#5B3FB5;color:white}
.role-camp_incharge{background:#0F6E56;color:white}
.role-site_supervisor{background:#7A4A08;color:white}
.role-superadmin{background:#C0392B;color:white}
.role-public_relations_officer{background:#0F6E56;color:white}
.role-welfare_manager{background:#1A5FAA;color:white}
.sa-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.sa-user-card{background:white;border-radius:var(--r);padding:14px;margin:0 16px 10px;box-shadow:var(--sh)}


/* HISTORY & TRENDS */
.chart-wrap{position:relative;width:100%;margin-bottom:4px}
.chart-wrap canvas{max-width:100%}
.trend-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:768px){.trend-grid{grid-template-columns:1fr 1fr}}
.hist-tabs{display:flex;gap:6px;padding:0 16px 10px;overflow-x:auto;scrollbar-width:none}
.hist-tabs::-webkit-scrollbar{display:none}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--gray2);font-size:13px}
.stat-row:last-child{border-bottom:none}
.stat-lbl{color:var(--gray4);font-weight:500}
.stat-val{font-weight:700;color:var(--navy)}
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
@media(min-width:768px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}
.kpi{background:white;border-radius:var(--rs);padding:12px;box-shadow:var(--sh);text-align:center}
.kpi-val{font-size:22px;font-weight:700;font-family:'Space Grotesk',sans-serif;color:var(--navy)}
.kpi-lbl{font-size:11px;color:var(--gray4);margin-top:3px}
.kpi-chg{font-size:11px;font-weight:600;margin-top:2px}
.kpi-chg.up{color:var(--green-t)} .kpi-chg.dn{color:var(--red-t)} .kpi-chg.neu{color:var(--gray4)}

/* TOAST */
.toast{position:fixed;top:74px;left:50%;transform:translateX(-50%);background:var(--navy);color:white;padding:9px 18px;border-radius:22px;font-size:13px;font-weight:600;z-index:999;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;max-width:90vw;text-align:center}
.toast.show{opacity:1}

/* EMPTY */
.empty{text-align:center;padding:28px 16px;color:var(--gray4);font-size:14px}

/* EMPLOYEE DB TABLE - desktop only */
#empdb-table{width:100%;border-collapse:collapse;font-size:12px}
#empdb-table th{background:var(--navy);color:white;padding:10px 8px;text-align:left;white-space:nowrap;font-size:11px;position:sticky;top:0}
#empdb-table td{padding:8px 8px;border-bottom:1px solid var(--gray2);vertical-align:middle}
#empdb-table tr:hover td{background:var(--gray1)}

/* EMPLOYEE DB - mobile card list */
.empdb-card{background:white;border-radius:var(--rs);padding:12px;margin-bottom:8px;box-shadow:var(--sh);cursor:pointer;display:flex;align-items:center;gap:12px}
.empdb-card-info{flex:1;min-width:0}
.empdb-card-name{font-size:14px;font-weight:700;margin-bottom:2px}
.empdb-card-meta{font-size:12px;color:var(--gray4)}

/* EMPDB PROFILE DRAWER */
.empdb-profile{background:white;border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;padding:0 0 40px}
.empdb-profile-hdr{background:linear-gradient(135deg,var(--navy),var(--navy3));padding:20px 16px;position:sticky;top:0}

/* DESKTOP: empdb table wrapper */
@media(min-width:768px){
  .empdb-mobile{display:none}
  .empdb-desktop{display:block;overflow-x:auto;margin:0 24px}
  .mo{align-items:center}
  .modal{border-radius:16px;max-width:620px}
  .mo-handle{display:none}
  .card{margin:0 24px 14px}
  .mgrid{padding:0 24px 14px;gap:14px;grid-template-columns:repeat(4,1fr)}
  .sbar{margin:0 24px 12px}
  .tabs{padding:0 24px 12px}
  .su-sec{margin:0 24px 12px}
  .toast{top:20px}
}
@media(max-width:767px){
  .empdb-mobile{display:block;padding:0 16px}
  .empdb-desktop{display:none}
}
/* Desktop hides the Filters button — all filters reachable from column funnels.
   §9.10.4: the Designation column is now split into four (Deployed-as / Original /
   Secondary / Tertiary), each with its own funnel. The sheet stays for mobile only. */
@media(min-width:768px){
  #empdb-filter-btn{display:none}
}
/* §9.10.4: mobile card four-line trade block (Deployed-as / Original / Secondary / Tertiary) */
.empdb-card-trades{margin-top:4px;font-size:11px;line-height:1.5;color:var(--gray5)}
.empdb-card-trade{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empdb-card-trade-lbl{color:var(--gray4);font-weight:600;display:inline-block;min-width:78px}

/* ─── Employee Records — Excel-style per-column filters (locked 2026-05-29) ─── */
/* Funnel icon in column headers + More-filters button */
.empdb-fnl{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;cursor:pointer;color:#9CA3AF;background:transparent;border:none;padding:0;margin-left:4px;vertical-align:middle;transition:background .12s,color .12s}
.empdb-fnl:hover{background:rgba(255,255,255,0.12);color:white}
.empdb-fnl.active{color:var(--amber)}
.empdb-fnl svg{width:11px;height:11px;display:block}
/* Floating popover anchored under column header or More-filters button */
#empdb-popover{position:fixed;background:white;border:1px solid var(--gray2);border-radius:var(--rs);box-shadow:0 8px 24px rgba(15,39,68,0.18);padding:10px 0;z-index:200;min-width:240px;max-width:380px;max-height:420px;display:none;flex-direction:column}
#empdb-popover .ep-title{font-size:11px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.4px;padding:0 14px 8px}
#empdb-popover .ep-body{overflow-y:auto;padding:0 14px;flex:1}
#empdb-popover .ep-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--gray2);padding:8px 14px 0;margin-top:8px}
#empdb-popover .ep-link{font-size:12px;color:var(--navy);background:none;border:none;cursor:pointer;font-weight:600;padding:0}
#empdb-popover .ep-link:hover{text-decoration:underline}
/* Checkbox row inside popovers (used for chip multi-selects) */
.ep-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--navy);cursor:pointer;border-radius:4px}
.ep-row:hover{background:var(--gray1)}
.ep-row input{width:14px;height:14px;cursor:pointer;margin:0}
.ep-row .ep-row-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-row .ep-row-cnt{color:var(--gray4);font-size:11px;flex-shrink:0}
.ep-row.checked{color:var(--amber);font-weight:600}
.ep-empty{font-size:12px;color:var(--gray4);font-style:italic;padding:6px 0}
/* Active filter chips bar (above table on desktop; inside sheet body on mobile) */
.empdb-chip-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;background:#FAFBFD;border-bottom:1px solid var(--gray2);font-size:12px}
.empdb-chip-bar .ec-label{color:var(--gray4);font-weight:600;text-transform:uppercase;letter-spacing:0.3px;font-size:11px;margin-right:4px}
.empdb-chip-bar .ec-chip{display:inline-flex;align-items:center;gap:6px;background:var(--amber-bg);color:var(--amber-t);padding:4px 8px;border-radius:14px;border:1px solid var(--amber);font-size:12px;font-weight:600}
.empdb-chip-bar .ec-chip-x{background:none;border:none;color:var(--amber-t);cursor:pointer;font-size:14px;padding:0;line-height:1;opacity:0.7}
.empdb-chip-bar .ec-chip-x:hover{opacity:1}
.empdb-chip-bar .ec-clear-all{margin-left:auto;background:none;border:none;color:var(--navy);font-size:12px;font-weight:600;cursor:pointer;padding:0}
.empdb-chip-bar .ec-clear-all:hover{text-decoration:underline}

/* ───────── Custom Date Picker (UX-A) ───────── */
.dp-trigger{cursor:pointer;text-align:left;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;font-family:inherit;background:white;color:var(--gray5)}
.dp-trigger:focus{outline:2px solid var(--navy3);outline-offset:1px}
.dp-trigger[disabled]{cursor:not-allowed;opacity:0.6;background:var(--gray1)}
.dp-trigger .dp-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-trigger .dp-val.dp-empty{color:var(--gray4);font-weight:400}
.dp-trigger .dp-caret{color:var(--gray4);font-size:11px;flex-shrink:0;margin-left:4px}

.dp-popover{position:fixed;z-index:10000;background:white;border:1.5px solid var(--gray2);border-radius:10px;box-shadow:0 8px 28px rgba(15,39,68,0.20);width:280px;padding:10px;font-family:'Inter',sans-serif}
.dp-head{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.dp-head .dp-mo,.dp-head .dp-yr{padding:6px 8px;border:1.5px solid var(--gray2);border-radius:6px;font-size:12px;background:white;cursor:pointer;font-family:inherit;color:var(--gray5)}
.dp-head .dp-mo{flex:1.5}
.dp-head .dp-yr{flex:1}
.dp-head .dp-mo:focus,.dp-head .dp-yr:focus{outline:2px solid var(--navy3);border-color:var(--navy3)}
.dp-head .dp-close{border:none;background:transparent;cursor:pointer;font-size:20px;color:var(--gray4);padding:2px 6px;line-height:1;border-radius:4px}
.dp-head .dp-close:hover{background:var(--gray1);color:var(--gray5)}

.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:10px;color:var(--gray4);text-align:center;font-weight:600;margin-bottom:2px;text-transform:uppercase;letter-spacing:0.3px}
.dp-dow span{padding:4px 0}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-blank{height:32px}
.dp-day{height:32px;border:none;background:transparent;cursor:pointer;border-radius:6px;font-size:12px;font-family:inherit;color:var(--gray5);padding:0;transition:background 0.1s}
.dp-day:hover:not(:disabled){background:var(--gray1)}
.dp-day.dp-today-cell{font-weight:700;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--gray3)}
.dp-day.dp-sel{background:var(--navy);color:white;font-weight:600;box-shadow:none}
.dp-day.dp-sel:hover{background:var(--navy2)}
.dp-day.dp-dis{color:var(--gray3);cursor:not-allowed;background:transparent}
.dp-day.dp-dis:hover{background:transparent}

.dp-foot{display:flex;gap:8px;margin-top:10px;border-top:1px solid var(--gray2);padding-top:10px}
.dp-foot button{flex:1;padding:7px 10px;border:1.5px solid var(--gray2);border-radius:6px;background:white;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit}
.dp-foot button:hover{background:var(--gray1)}
.dp-foot .dp-today{color:var(--navy);border-color:var(--navy3)}
.dp-foot .dp-today:hover{background:var(--navy);color:white}
.dp-foot .dp-clear{color:var(--gray4)}
.dp-foot .dp-clear:hover{color:var(--red,#D24545);border-color:var(--red,#D24545)}

@media (max-width:480px){
  .dp-popover{width:calc(100vw - 24px);max-width:320px;padding:12px}
  .dp-day,.dp-blank{height:38px}
  .dp-day{font-size:13px}
  .dp-head .dp-mo,.dp-head .dp-yr{font-size:13px;padding:8px 10px}
}

/* ───────── Searchable Select (UX-B) ───────── */
.ss-trigger{cursor:pointer;text-align:left;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;font-family:inherit;background:white;color:var(--gray5)}
.ss-trigger:focus{outline:2px solid var(--navy3);outline-offset:1px}
.ss-trigger[disabled]{cursor:not-allowed;opacity:0.6;background:var(--gray1)}
.ss-trigger .ss-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-trigger .ss-val.ss-empty{color:var(--gray4);font-weight:400}
.ss-trigger .ss-caret{color:var(--gray4);font-size:11px;flex-shrink:0;margin-left:4px}

.ss-popover{position:fixed;z-index:10000;background:white;border:1.5px solid var(--gray2);border-radius:10px;box-shadow:0 8px 28px rgba(15,39,68,0.20);min-width:240px;max-width:360px;padding:8px;font-family:'Inter',sans-serif;display:flex;flex-direction:column;max-height:340px}
.ss-popover .ss-search{padding:8px 10px;border:1.5px solid var(--gray2);border-radius:6px;font-size:13px;font-family:inherit;color:var(--gray5);outline:none;margin-bottom:6px;width:100%;box-sizing:border-box}
.ss-popover .ss-search:focus{border-color:var(--navy3);box-shadow:0 0 0 2px rgba(35,78,122,0.15)}
.ss-popover .ss-list{overflow-y:auto;max-height:260px;display:flex;flex-direction:column;gap:1px}
.ss-popover .ss-opt{display:block;width:100%;text-align:left;padding:7px 10px;border:none;background:transparent;cursor:pointer;font-size:13px;font-family:inherit;color:var(--gray5);border-radius:5px}
.ss-popover .ss-opt:hover:not(:disabled),.ss-popover .ss-opt:focus{background:var(--gray1);outline:none}
.ss-popover .ss-opt.ss-sel{background:var(--navy);color:white;font-weight:600}
.ss-popover .ss-opt.ss-sel:hover{background:var(--navy2)}
.ss-popover .ss-opt.ss-dis{color:var(--gray3);cursor:not-allowed}
.ss-popover .ss-empty-row{padding:14px 10px;text-align:center;color:var(--gray4);font-size:12px;font-style:italic}

@media (max-width:480px){
  .ss-popover{max-width:calc(100vw - 24px);max-height:60vh}
  .ss-popover .ss-search{font-size:14px;padding:10px 12px}
  .ss-popover .ss-opt{font-size:14px;padding:9px 12px}
  .ss-popover .ss-list{max-height:50vh}
}