/* ═══════════════════════════════════════════════
   style.css  —  Main app styles
═══════════════════════════════════════════════ */
:root{
  --primary:#1a3a6b;--accent:#2563eb;--accent-lt:#dbeafe;
  --green:#16a34a;--red:#dc2626;--orange:#d97706;
  --bg:#f1f5f9;--white:#ffffff;--border:#e2e8f0;
  --text:#1e293b;--muted:#64748b;
  --shadow:0 2px 8px rgba(0,0,0,.10);--radius:10px;
  --hdr:54px;--tab:58px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);
  color:var(--text);font-size:14px;min-height:100%;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}

/* ── Header ── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr);
  background:var(--primary);display:flex;align-items:center;
  justify-content:space-between;padding:0 10px;
  box-shadow:0 2px 12px rgba(0,0,0,.3)}
.hdr-l{display:flex;align-items:center;gap:8px}
.hdr-r{display:flex;align-items:center;gap:5px}
.icon-btn{background:rgba(255,255,255,.15);border:none;color:#fff;
  height:34px;padding:0 9px;border-radius:8px;font-size:12px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap}
.icon-btn:active{background:rgba(255,255,255,.3)}
.menu-btn{background:rgba(255,255,255,.15);border:none;color:#fff;
  width:36px;height:36px;border-radius:9px;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.hdr-title{color:#fff}
.hdr-title b{font-size:14px;display:block}
.hdr-title small{font-size:10px;opacity:.7}
.user-badge{background:rgba(255,255,255,.2);color:#fff;padding:3px 8px;
  border-radius:12px;font-size:11px;font-weight:700;white-space:nowrap;
  max-width:80px;overflow:hidden;text-overflow:ellipsis}

/* ── Drawer ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200}
.overlay.on{display:block}
.drawer{position:fixed;top:0;left:0;bottom:0;width:285px;max-width:88vw;
  background:var(--white);z-index:201;transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden}
.drawer.on{transform:translateX(0)}
.drawer-top{background:var(--primary);color:#fff;flex-shrink:0;height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.drawer-top h2{font-size:15px;font-weight:700}
.close-x{background:rgba(255,255,255,.2);border:none;color:#fff;
  width:30px;height:30px;border-radius:50%;font-size:16px;cursor:pointer}
.drawer-scroll{flex:1;overflow-y:auto;padding:14px 14px 90px}
.fg{margin-bottom:10px}
.fg label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted);margin-bottom:4px}
.fg select{width:100%;padding:10px 32px 10px 10px;border:1.5px solid var(--border);
  border-radius:8px;font-size:13px;color:var(--text);appearance:none;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2364748b' d='M5 7L0 2h10z'/%3E%3C/svg%3E") no-repeat right 10px center}
.fg select:focus{outline:none;border-color:var(--accent);background-color:var(--white)}
.sec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--accent);margin:12px 0 8px}
.drawer-foot{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;
  background:var(--white);border-top:1px solid var(--border);display:flex;gap:8px}
.btn-apply{flex:1;padding:12px;background:var(--accent);color:#fff;border:none;
  border-radius:9px;font-size:14px;font-weight:700;cursor:pointer}
.btn-rst{padding:12px 14px;background:#fff5f5;color:var(--red);
  border:1.5px solid #fecaca;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer}

/* Mobile drawer full width on small screens */
@media(max-width:480px){
  .drawer{
    width:100vw;
    max-width:none;
  }
}

/* Mobile single column cards */
@media(max-width:767px){
  .card-row{
    flex-direction:column;
  }
  .vcard{
    flex:none;
    margin-bottom:8px;
  }
  .search-wrap{
    flex-direction:column;
    align-items:flex-start;
  }
  .per-select{
    margin-left:0;
    margin-top:8px;
  }
}

/* ── Page layout ── */
.page{padding-top:calc(var(--hdr)+6px);padding-bottom:calc(var(--tab)+40px);min-height:100vh}

/* ── Search ── */
.search-wrap{padding:8px 12px 4px;position:sticky;top:var(--hdr);z-index:50;background:var(--bg);display:flex;align-items:center}
.search-box{display:flex;align-items:center;gap:8px;background:var(--white);
  border:1.5px solid var(--border);border-radius:10px;padding:0 12px;box-shadow:var(--shadow)}
.search-box input{flex:1;border:none;outline:none;padding:12px 0;font-size:14px;
  background:transparent;color:var(--text)}
.search-box input::placeholder{color:var(--muted)}
.si{color:var(--muted);font-size:17px}
.clr-btn{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;display:none}
.per-select{display:flex;align-items:center;gap:4px;margin-left:12px}
.per-select label{font-size:12px;color:var(--muted)}
.per-select select{border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:14px}

/* Total display */
.total-display{padding:8px 12px;font-size:14px;font-weight:600;color:var(--text);background:var(--bg)}

/* ── Color filter bar ── */
.color-bar{display:flex;gap:6px;padding:5px 12px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.color-bar::-webkit-scrollbar{display:none}
.cf-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 13px;border-radius:20px;
  border:1.5px solid var(--border);background:var(--white);font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap;flex-shrink:0;color:var(--text);transition:all .15s}
.cf-btn.on{border-color:transparent;color:#fff}
.cf-btn[data-c="0"].on{background:var(--primary)}
.cf-btn[data-c="1"].on{background:#dc2626}
.cf-btn[data-c="2"].on{background:#16a34a}
.cf-btn[data-c="3"].on{background:#2563eb}
.cf-btn[data-c="4"].on{background:#d97706}

/* ── Chips ── */
.chip-row{display:flex;gap:6px;padding:5px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chip-row::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:3px;background:var(--accent-lt);color:var(--accent);
  border:1px solid #bfdbfe;border-radius:20px;padding:4px 10px;
  font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer;flex-shrink:0}

/* ── Stat pills ── */
.stat-row{display:flex;gap:8px;padding:4px 12px;overflow-x:auto;scrollbar-width:none}
.stat-row::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;background:var(--white);border-radius:10px;padding:8px 14px;
  box-shadow:var(--shadow);text-align:center;min-width:72px}
.pill .pv{font-size:20px;font-weight:800;color:var(--primary);line-height:1.1}
.pill .pl{font-size:10px;color:var(--muted);margin-top:2px}
.pill.blue   .pv{color:var(--accent)}
.pill.orange .pv{color:var(--orange)}
.pill.green  .pv{color:var(--green)}

/* ── Voter cards ── */
.cards{padding:4px 8px 0}
.card-row{display:flex;gap:8px;margin-bottom:8px}
.vcard{background:var(--white);border-radius:12px;padding:12px;margin-bottom:0;
  box-shadow:var(--shadow);border-left:4px solid transparent;flex:1}
.vcard.ct1{border-left-color:#dc2626;background:#fff9f9}
.vcard.ct2{border-left-color:#16a34a;background:#f9fff9}
.vcard.ct3{border-left-color:#2563eb;background:#f8fbff}
.vcard.ct4{border-left-color:#d97706;background:#fffdf0}
.vc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.vc-name{font-size:15px;font-weight:700}
.vc-id{font-size:11px;color:var(--muted);margin-top:2px}
.vc-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.edit-btn{background:var(--accent-lt);color:var(--accent);border:none;border-radius:6px;
  padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer}
.acheck{width:20px;height:20px;cursor:pointer;accent-color:var(--accent)}
.cdot{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0}
.cdot.ct1{background:#dc2626}.cdot.ct2{background:#16a34a}
.cdot.ct3{background:#2563eb}.cdot.ct4{background:#d97706}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.tag{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600}
.t-blue{background:#dbeafe;color:#1e40af}.t-gray{background:#f1f5f9;color:#475569}
.vc-info{display:flex;flex-direction:column;gap:3px}
.vc-r{display:flex;gap:6px;align-items:baseline}
.vc-lbl{font-size:10px;color:var(--muted);min-width:56px;font-weight:600}
.vc-val{font-size:12px;flex:1}
.vc-notes{margin-top:8px;padding:7px 10px;background:#f8fafc;border-radius:8px;
  font-size:12px;border-left:3px solid var(--accent)}
.vc-staff{margin-top:5px;font-size:11px;color:var(--muted)}

/* ── Assign bar ── */
.assign-bar{position:fixed;bottom:var(--tab);left:0;right:0;z-index:150;
  background:var(--primary);padding:10px 12px;display:none;
  align-items:center;gap:8px;box-shadow:0 -4px 16px rgba(0,0,0,.3)}
.assign-cnt{color:#fff;font-size:13px;font-weight:700;flex-shrink:0}
.assign-sel{flex:1;padding:8px 10px;border:none;border-radius:8px;font-size:13px;font-weight:600;min-width:0}
.assign-go{background:#16a34a;color:#fff;border:none;border-radius:8px;
  padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer}
.assign-x{background:rgba(255,255,255,.2);color:#fff;border:none;border-radius:8px;
  padding:9px 12px;font-size:14px;cursor:pointer}

/* ── Desktop table (hidden on mobile) ── */
.desk-wrap{display:none}

/* ── Pagination ── */
.pager{display:flex;align-items:center;justify-content:center;
  gap:5px;padding:12px 12px 4px;flex-wrap:wrap}
.pg{padding:8px 13px;border:1.5px solid var(--border);border-radius:8px;
  background:var(--white);font-size:13px;font-weight:600;cursor:pointer}
.pg:active:not(:disabled){background:var(--accent-lt);border-color:var(--accent);color:var(--accent)}
.pg:disabled{opacity:.35;cursor:default}
.pg.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.pg-inf{font-size:11px;color:var(--muted)}

/* ── Empty / loading ── */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .ei{font-size:52px;margin-bottom:10px}
.empty p{font-size:15px;font-weight:600}
.empty small{font-size:12px}
.spin-wrap{text-align:center;padding:40px}
.spin{display:inline-block;width:32px;height:32px;border:3px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Bottom tab bar ── */
.tab-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;height:var(--tab);
  background:var(--white);border-top:1px solid var(--border);display:flex;
  box-shadow:0 -3px 12px rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border:none;background:none;cursor:pointer;color:var(--muted);
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.tab .ti{font-size:22px;line-height:1}
.tab.on{color:var(--accent)}
.tab:active{background:var(--bg)}

/* ── Modals ── */
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;
  align-items:flex-end;justify-content:center}
.mbg.on{display:flex}
.modal{background:var(--white);width:100%;max-height:92vh;border-radius:20px 20px 0 0;
  overflow:hidden;display:flex;flex-direction:column;animation:up .28s cubic-bezier(.4,0,.2,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mpill{width:38px;height:4px;background:#d1d5db;border-radius:2px;margin:10px auto 0;flex-shrink:0}
.mhdr{background:var(--primary);color:#fff;flex-shrink:0;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between}
.mhdr h2{font-size:15px;font-weight:700}
.mclose{background:rgba(255,255,255,.2);border:none;color:#fff;
  width:28px;height:28px;border-radius:50%;font-size:16px;cursor:pointer}
.mscroll{overflow-y:auto;flex:1;padding:16px;-webkit-overflow-scrolling:touch}
.mfoot{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;
  flex-shrink:0;background:var(--white);
  padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.mfoot .msave{flex:1;padding:13px;background:var(--green);color:#fff;border:none;
  border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.mfoot .mcancel{padding:13px 16px;background:var(--bg);color:var(--muted);
  border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-weight:600;cursor:pointer}
.voter-mini{background:var(--bg);border-radius:10px;padding:12px;
  border-left:3px solid var(--accent);margin-bottom:16px}
.vmn{font-size:15px;font-weight:700}.vmm{font-size:11px;color:var(--muted);margin-top:2px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px;border:1.5px solid var(--border);
  border-radius:10px;font-size:14px;color:var(--text);background:var(--white);appearance:none}
.field textarea{resize:vertical;min-height:80px;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}

/* ── Color picker (edit modal) ── */
.cp-row{display:flex;gap:6px;flex-wrap:wrap}
.cp-btn{padding:7px 12px;border-radius:8px;border:2px solid transparent;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.cp-btn.sel{border-color:#1e293b;transform:scale(1.05)}
.cp-none{background:#f1f5f9;color:var(--text)}
.cp-1{background:#dc2626;color:#fff}.cp-2{background:#16a34a;color:#fff}
.cp-3{background:#2563eb;color:#fff}.cp-4{background:#d97706;color:#fff}

/* ── Staff modal ── */
.staff-card{background:var(--bg);border-radius:10px;padding:12px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.staff-info .sn{font-size:14px;font-weight:700}
.staff-info .sm{font-size:12px;color:var(--muted);margin-top:2px}
.staff-vc{background:var(--accent-lt);color:var(--accent);border-radius:6px;
  padding:3px 8px;font-size:11px;font-weight:700}
.staff-del{background:#fff5f5;color:var(--red);border:1.5px solid #fecaca;
  border-radius:7px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
.staff-add-section{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}
.sec-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);margin-bottom:12px}
.btn-add-staff{width:100%;padding:13px;border:none;border-radius:10px;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;cursor:pointer}

/* ── Upload modal ── */
.dropzone{border:2px dashed var(--border);border-radius:12px;padding:36px 16px;
  text-align:center;cursor:pointer;background:var(--bg);margin-bottom:14px}
.dropzone:active{background:var(--accent-lt);border-color:var(--accent)}
.dzi{font-size:44px}.dzt{font-size:15px;font-weight:700;margin-top:8px}
.dzs{font-size:12px;color:var(--muted);margin-top:4px}
#xlsx-in{display:none}
.sel-file{background:var(--accent-lt);color:var(--accent);border-radius:8px;
  padding:9px 12px;font-size:13px;font-weight:600;margin-bottom:10px;display:none}
.up-result{background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:10px;
  padding:12px;font-size:13px;line-height:1.9;display:none}
.up-result.err{background:#fff5f5;border-color:#fecaca}

/* ── Stats modal ── */
.s3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.sc{border-radius:10px;padding:12px 8px;text-align:center}
.sc.b{background:var(--primary);color:#fff}.sc.g{background:var(--green);color:#fff}
.sc.o{background:var(--orange);color:#fff}
.scn{font-size:22px;font-weight:800}.scl{font-size:10px;opacity:.85;margin-top:2px}
.ss{margin-bottom:16px}
.ss h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.sr{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f8fafc}
.sr:last-child{border-bottom:none}
.slbl{min-width:90px;font-size:12px}
.sbar{flex:1;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}
.sbarfill{height:100%;background:var(--accent);border-radius:4px}
.snum{font-size:12px;font-weight:700;min-width:32px;text-align:right}

/* ── Toast ── */
.toast{position:fixed;bottom:calc(var(--tab)+10px);left:12px;right:12px;
  padding:13px 16px;border-radius:10px;color:#fff;font-size:14px;font-weight:600;
  text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.25);z-index:500;
  transform:translateY(20px);opacity:0;transition:.25s;pointer-events:none}
.toast.on{transform:translateY(0);opacity:1}
.toast.s{background:var(--green)}.toast.e{background:var(--red)}.toast.i{background:var(--accent)}

/* Hide desktop sidebar on mobile */
.desk-sidebar { display: none; }

/* ══ DESKTOP ≥ 768px ══════════════════════════════════════════════ */
@media(min-width:768px){
  :root{--hdr:56px}
  .tab-bar{display:none}.menu-btn{display:none}
  .page{padding-bottom:16px;display:flex;gap:0;align-items:flex-start}
  .overlay{display:none!important}.drawer{display:none!important}
  .desk-sidebar{width:210px;flex-shrink:0;position:sticky;top:calc(var(--hdr)+6px);
    background:var(--white);border-radius:12px;padding:14px 12px;box-shadow:var(--shadow);
    margin:6px 0 0 12px;max-height:calc(100vh - var(--hdr) - 20px);
    overflow-y:auto;display:block!important}
  .desk-sidebar h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
    color:var(--muted);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
  .desk-sidebar .fg select{font-size:12px;padding:8px 28px 8px 8px}
  .desk-sidebar .fg{margin-bottom:8px}
  .desk-rst{width:100%;margin-top:10px;padding:9px;background:#fff5f5;color:var(--red);
    border:1.5px solid #fecaca;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
  .btn-staff{width:100%;padding:8px;background:var(--accent);color:#fff;border:none;
    border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;margin-bottom:12px}
  .btn-staff:hover{background:var(--primary)}
  .notes-section input{width:100%;padding:8px;border:1px solid var(--border);
    border-radius:6px;font-size:12px}
  .desk-sidebar .color-bar{flex-direction:column;gap:4px;padding:5px 0}
  .desk-sidebar .cf-btn{width:100%;padding:6px 8px;font-size:11px}
  .desk-main{flex:1;min-width:0;padding:6px 12px 0 8px}
  .cards{display:none}
  .desk-wrap{display:block;background:var(--white);border:1px solid var(--border);
    border-radius:12px;overflow:auto;box-shadow:var(--shadow);margin-top:6px}
  table{width:100%;border-collapse:collapse;min-width:700px}
  thead th{background:var(--primary);color:#fff;padding:10px 12px;text-align:left;
    font-size:11px;font-weight:700;white-space:nowrap;position:sticky;top:0}
  tbody tr{border-bottom:1px solid #f1f5f9}
  tbody tr:hover{background:#f8fafc}
  tbody td{padding:8px 12px;font-size:12px}
  .td-m{color:var(--muted);font-size:11px}
  .tedit{background:var(--accent-lt);color:var(--accent);border:none;border-radius:6px;
    padding:4px 8px;font-size:11px;font-weight:700;cursor:pointer}
  .mbg{align-items:center}
  .modal{border-radius:16px;max-width:500px;animation:none}
  .mpill{display:none}
  .toast{left:auto;right:20px;bottom:20px;max-width:340px}
  .stat-row,.search-wrap,.chip-row,.color-bar,.pager{padding-left:0;padding-right:0}
  .assign-bar{bottom:0}

/* ── Footer ── */
.footer{position:fixed;bottom:var(--tab);left:0;right:0;background:var(--white);
  border-top:1px solid var(--border);padding:8px;text-align:center;font-size:12px}
.footer a{color:var(--accent);text-decoration:none}
.footer a:hover{text-decoration:underline}
}

/* ══ VOTED STATUS BADGE (cards) ══════════════════════════════════ */
.vbadge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;margin-top:4px}
.vb-yes{background:#dcfce7;color:#16a34a}
.vb-no {background:#fee2e2;color:#dc2626}

/* ══ VOTED PICKER (edit modal) ═══════════════════════════════════ */
.vp-btn{padding:7px 12px;border-radius:8px;border:2px solid #e2e8f0;
        background:#f8fafc;cursor:pointer;font-size:13px;transition:all .15s}
.vp-btn:hover{border-color:#94a3b8}
.vp-btn.sel{border-color:#1e293b;transform:scale(1.05)}
.vp-none.sel{background:#f1f5f9;border-color:#64748b}
.vp-yes.sel {background:#dcfce7;border-color:#16a34a;color:#15803d}
.vp-no.sel  {background:#fee2e2;border-color:#dc2626;color:#b91c1c}

/* ══ AGE RANGE INPUTS ════════════════════════════════════════════ */
.age-range-wrap{display:flex;align-items:center;gap:6px}
.age-range-wrap input{padding:6px 4px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px}
.age-to{font-size:12px;color:#64748b;white-space:nowrap}

/* ══ S.No BADGE IN CARD ══════════════════════════════════════════ */
.vc-sno-badge{
  background:var(--primary);color:#fff;border-radius:6px;
  padding:3px 8px;font-size:11px;font-weight:700;
  margin-right:8px;flex-shrink:0;align-self:flex-start;margin-top:2px;
  min-width:32px;text-align:center;
}
.vc-top{display:flex;align-items:flex-start;gap:0}

/* ══ MOBILE PAGER — sticky above tab bar ════════════════════════ */
@media(max-width:767px){
  .pager{
    position:sticky;
    bottom:calc(var(--tab) + 2px);
    background:var(--bg);
    border-top:1px solid var(--border);
    padding:8px 4px;
    z-index:60;
    flex-wrap:wrap;
    gap:4px;
  }
  .pg{padding:10px 14px;font-size:14px;min-width:44px;min-height:44px}
}

/* ══ TOP S.No QUICK FILTER ═══════════════════════════════════════ */
.sno-quick{display:flex;align-items:center;gap:5px;background:#fff;
  border:1.5px solid var(--border);border-radius:10px;padding:4px 8px;
  flex-shrink:0}
.sno-lbl{font-size:11px;font-weight:700;color:var(--primary);white-space:nowrap}
.sno-quick input{width:64px;border:none;outline:none;font-size:13px;
  padding:2px 0;background:transparent;-moz-appearance:textfield}
.sno-quick input::-webkit-outer-spin-button,
.sno-quick input::-webkit-inner-spin-button{-webkit-appearance:none}
.sno-clr{background:none;border:none;cursor:pointer;color:var(--muted);
  font-size:13px;padding:0 2px;line-height:1}

/* ══ PURPLE PILL — Third Gender ══════════════════════════════════ */
.pill.purple .pv{color:#7c3aed}
.pill.purple{border-color:#ede9fe}

/* ══ SEARCH WRAP — wrap on very small screens ════════════════════ */
@media(max-width:600px){
  .search-wrap{flex-wrap:wrap;gap:6px}
  .sno-quick{order:3;flex:0 0 auto}
}

/* ══ ASSIGNED STAFF LIST IN EDIT MODAL ══════════════════════════ */
.astaff-list{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.astaff-row{display:flex;align-items:center;justify-content:space-between;
  background:#f1f5f9;border-radius:8px;padding:6px 10px;font-size:13px}
.astaff-de{background:#fee2e2;color:#dc2626;border:1px solid #fecaca;
  border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer}
.astaff-de:hover{background:#fecaca}
.astaff-de:disabled{opacity:.5;cursor:not-allowed}
.astaff-add{display:flex;gap:6px;align-items:center;margin-top:4px}
.astaff-add select{flex:1;padding:7px 8px;border:1px solid var(--border);
  border-radius:8px;font-size:12px;background:#fff}
.astaff-go{padding:7px 12px;background:#dcfce7;color:#16a34a;border:1px solid #bbf7d0;
  border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.astaff-go:hover{background:#bbf7d0}

/* ══ BULK DEASSIGN BUTTON IN ASSIGN BAR ═════════════════════════ */
.assign-de{padding:8px 12px;background:#fee2e2;color:#dc2626;border:1.5px solid #fecaca;
  border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.assign-de:hover{background:#fecaca}

/* ── Sidebar v5 — clean layout ─────────────────────────────── */
/* ── Desktop sidebar styles — desktop only ─────────────────── */
@media(min-width:768px) {
  .desk-sidebar { display:flex; flex-direction:column; gap:0; padding:0; overflow-y:auto; }
  .sidebar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px 8px; border-bottom:1px solid var(--border);
    position:sticky; top:0; background:var(--card); z-index:2;
  }
  .sidebar-title { font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.6px; color:var(--accent); }
  .desk-rst { font-size:11px; padding:3px 8px; border:1px solid var(--border);
    border-radius:5px; cursor:pointer; background:transparent;
    color:#dc2626; font-weight:600; }
  .desk-rst:hover { background:#fee2e2; }
  #deskFilters { padding:6px 8px; }
  #deskFilters .frow { margin-bottom:8px; display:flex; flex-direction:column; gap:3px; }
  #deskFilters .frow label { font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.4px; display:block; }
  #deskFilters .frow select,
  #deskFilters .frow input[type=text],
  #deskFilters .frow input[type=number] {
    width:100%; box-sizing:border-box; border:1px solid var(--border);
    border-radius:6px; padding:5px 8px; font-size:13px;
    background:var(--bg); color:var(--text);
  }
  #deskFilters .frow select:focus,
  #deskFilters .frow input:focus { border-color:var(--accent); outline:none; }
  #deskFilters .fgroup { background:var(--bg); border-radius:8px; padding:6px 8px;
    margin-bottom:8px; border:1px solid var(--border); }
  #deskFilters .fgroup-hdr { font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.5px; color:var(--accent); margin-bottom:6px; padding-bottom:4px;
    border-bottom:1px solid var(--border); }
  #deskFilters .age-range-wrap { display:flex; align-items:center; gap:4px; }
  #deskFilters .age-to { font-size:11px; color:var(--muted); }
  .sidebar-section { padding:8px 12px; border-top:1px solid var(--border); }
  .btn-staff { width:100%; padding:7px; border-radius:7px; background:var(--accent);
    color:#fff; border:none; cursor:pointer; font-size:13px; font-weight:600; }
}

/* ── Top bar Part No select ────────────────────────────────── */
#topPart { height:32px; }

/* ── Mobile: stack cards 1 per row not 3 ──────────────────── */
@media(max-width:768px) {
  .card-row { display:flex; flex-direction:column; gap:10px; padding:8px; }
  .vcard { width:100%; }
  .desk-table-wrap { display:none; }
  #cards { display:block; }
}
@media(min-width:769px) {
  #cards { display:none; }
  .desk-table-wrap { display:block; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FIX v6 — Drawer filters, Columns panel, Notes
   ═══════════════════════════════════════════════════════════════════ */

/* ── Drawer filter rows: label ABOVE input ─────────────────────── */
.drawer-scroll .frow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.drawer-scroll .frow label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  display: block;
}
.drawer-scroll .frow select,
.drawer-scroll .frow input[type=text],
.drawer-scroll .frow input[type=number] {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  appearance: none;
  -webkit-appearance: none;
}
.drawer-scroll .frow select:focus,
.drawer-scroll .frow input:focus {
  outline: none;
  border-color: var(--accent);
}
.drawer-scroll .age-range-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.drawer-scroll .age-range-wrap input {
  flex: 1;
  text-align: center;
}
.drawer-scroll .age-to {
  color: var(--muted);
  font-size: 13px;
  flex-shrink: 0;
}
/* Section group card in drawer */
.drawer-scroll .fgroup {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.drawer-scroll .fgroup-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--accent);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── Columns panel: full-width on mobile ───────────────────────── */
@media(max-width: 768px) {
  #colVisWrap { position: static !important; }
  #colVisPanel {
    position: fixed !important;
    top: auto !important;
    bottom: 70px !important;   /* above tab bar */
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: unset !important;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 14px !important;
    z-index: 9999 !important;
  }
  /* Notes filter hidden on mobile - it's inside the drawer instead */
  .notes-section { display: none; }

  /* Top search bar on mobile: stack cleanly */
  .search-wrap {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px 6px;
  }
  .search-box { flex: 1; min-width: 0; }
  .sno-quick { order: 2; }
  #colVisWrap { order: 1; width: 100%; }
  .icon-btn { width: 100%; justify-content: center; }

  /* Per-page selector inline */
  .per-select { display: flex; align-items: center; gap: 6px; }

  /* Card full width */
  .card-row { flex-direction: column; padding: 8px 10px; gap: 8px; }
  .vcard { width: 100%; box-sizing: border-box; }

  /* Hide desktop table on mobile */
  .desk-table-wrap { display: none !important; }
  #cards { display: block !important; }
}

@media(min-width: 769px) {
  /* Show table, hide cards on desktop */
  .desk-table-wrap { display: block !important; }
  #cards { display: none !important; }
  /* Notes filter visible on desktop sidebar */
  .notes-section { display: block; }
}

/* ── Facility multi-checkbox filter dropdown ───────────────────── */
.fac-filter-wrap { position: relative; width: 100%; }
.fac-filter-btn {
  width: 100%; text-align: left; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text);
  font-size: 13px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.fac-filter-btn:hover { border-color: var(--accent); }
.fac-filter-dd {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--card, #fff); border: 1px solid var(--border);
  border-radius: 9px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 999; padding: 8px;
  max-height: 240px; overflow-y: auto;
}
.fac-filter-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 5px 6px; border-radius: 6px;
  cursor: pointer; user-select: none;
}
.fac-filter-item:hover { background: var(--bg); }
.fac-filter-item input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.fac-filter-actions {
  display: flex; justify-content: space-between;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border);
}