:root{
  --bg:#f4f6fb; --panel:#ffffff; --panel2:#eef1f7; --line:#d6dbe7;
  --txt:#1b2030; --muted:#6b7488; --accent:#3b6fe0; --accent2:#0f9d6e;
  --warn:#c8790a; --danger:#dc3550; --good:#0f9d6e;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:var(--txt)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:800;font-size:28px;letter-spacing:.5px}
.brand span{color:var(--accent)}
.navwrap{display:flex;align-items:center}
nav a{margin-left:5px;font-weight:600;padding:7px 11px;border-radius:8px}
nav a:hover{background:var(--panel2);text-decoration:none}
nav a.active{background:var(--accent);color:#fff}
nav a.cta{background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px}
.badge{display:inline-block;background:var(--warn);color:#1a1200;border-radius:20px;padding:1px 8px;font-size:12px;font-weight:800;margin-left:2px}
/* Admin (Users) link — outlined so it visually reads as a separate/privileged area, not just another page tab */
nav a.admin{margin-left:14px;border:1px solid var(--accent);color:var(--accent)}
nav a.admin:hover{background:var(--accent);color:#fff}
nav a.admin.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Identity + Logout — separated from page nav by a divider; name is plain text (not a link) so it
   can never be clicked by mistake, Logout is its own clearly-labeled control */
.usermenu{display:flex;align-items:center;gap:8px;margin-left:16px;padding-left:16px;border-left:1px solid var(--line)}
.uname{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--txt)}
.rolebadge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:20px}
.logout-btn{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:13px;
  color:var(--muted);padding:7px 11px;border-radius:8px;border:1px solid transparent}
.logout-btn:hover{background:rgba(220,53,80,.1);border-color:var(--danger);color:var(--danger);text-decoration:none}
.logout-btn:focus-visible,nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:760px){
  .navwrap{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
  .usermenu{margin-left:0;padding-left:12px}
}
/* App (installed / standalone) mode: sirf Scan dikhe, baaki nav chhupao */
@media (display-mode: standalone){
  header.topbar .navwrap{display:none}
  header.topbar{justify-content:center}
}
html.appmode header.topbar .navwrap{display:none}
html.appmode header.topbar{justify-content:center}
/* compact staging table — poora ek screen par */
#stTable.compact{font-size:13px}
#stTable.compact th, #stTable.compact td{padding:6px 5px}
#stTable.compact input, #stTable.compact select{padding:5px 6px;font-size:13px}
.neg{color:var(--danger)}
th{user-select:none}
th.filtered{color:var(--accent2)}
.cm-caret{opacity:.45;font-size:10px}
.colmenu{position:absolute;z-index:200;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:8px;min-width:210px;box-shadow:0 10px 34px rgba(0,0,0,.55);font-size:13px;font-weight:400;text-transform:none;letter-spacing:0}
.colmenu .cm-b{padding:7px 8px;cursor:pointer;border-radius:6px;color:var(--txt)}
.colmenu .cm-b:hover{background:var(--panel)}
.colmenu .cm-sep{height:1px;background:var(--line);margin:6px 0}
.colmenu .cm-search{width:100%;margin-bottom:6px;padding:6px 8px}
.colmenu .cm-links{font-size:12px;margin-bottom:6px}
.colmenu .cm-links a{cursor:pointer;color:var(--accent)}
.colmenu .cm-list{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:4px}
.colmenu .cm-list label{display:flex;align-items:center;gap:7px;padding:4px 5px;cursor:pointer;color:var(--txt)}
.colmenu .cm-list label:hover{background:var(--panel)}
.colmenu .cm-cnt{margin-left:auto;color:var(--muted);font-size:11px}
.colmenu .cm-foot{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.colmenu .cm-foot button{padding:6px 14px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--txt);cursor:pointer}
.colmenu .cm-foot .cm-ok{background:var(--accent);color:#fff;border:none;font-weight:700}
/* Print: sirf report/table, dark ko white */
@media print{
  header.topbar, .filterbar, .no-print, nav, .kpis { display:none !important }
  body{ background:#fff; color:#000 }
  .card{ background:#fff; border:none; padding:0 }
  table th{ color:#000 }
  th,td{ border-bottom:1px solid #ccc }
  .wrap{ margin:0; max-width:100% }
  h1{ color:#000 }
}
nav a.cta:hover{text-decoration:none;opacity:.9}
.wrap{max-width:none;margin:22px auto;padding:0 22px}
h1{font-size:24px;margin:0 0 18px}
h2{font-size:18px;margin:22px 0 10px;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px}
.grid{display:grid;gap:14px}
.grid.cols4{grid-template-columns:repeat(4,1fr)}
.grid.cols2{grid-template-columns:repeat(2,1fr)}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em}
input,select{width:100%;padding:9px 11px;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;color:var(--txt);font-size:15px}
input:focus,select:focus{outline:none;border-color:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
/* frozen/sticky table header while scrolling (Entries / Attendance) */
table.stickyhead thead th{position:sticky;top:52px;z-index:4;background:var(--panel)}
@media print{ table.stickyhead thead th{position:static} }
td input{padding:6px 8px;font-size:14px}
tr.sample{background:rgba(58,214,160,.06)}
tr.unknown-rate input.rate{border-color:var(--warn);background:rgba(255,176,32,.08)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;padding:11px 20px;
  border-radius:9px;font-size:15px;font-weight:600;cursor:pointer}
.btn:hover{opacity:.9}
.btn.sec{background:var(--panel2);border:1px solid var(--line);color:var(--txt)}
.btn.danger{background:var(--danger)}
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.pill.sample{background:rgba(58,214,160,.15);color:var(--good)}
.pill.warn{background:rgba(255,176,32,.15);color:var(--warn)}
.muted{color:var(--muted)}
.big{font-size:26px;font-weight:700}
.right{text-align:right}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px}
.alert.err{background:rgba(220,53,80,.10);border:1px solid var(--danger);color:#b3261e}
.alert.warn{background:rgba(200,121,10,.12);border:1px solid var(--warn);color:#8a5a00}
.alert.ok{background:rgba(15,157,110,.12);border:1px solid var(--good);color:#0f7a54}
.totbar{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:14px}
.totbar .b{font-size:22px;font-weight:700;color:var(--accent2)}
.preview{max-width:100%;border-radius:10px;border:1px solid var(--line);margin-top:10px}
.dropzone{border:2px dashed var(--line);border-radius:14px;padding:40px;text-align:center;color:var(--muted)}
.scanpad{display:flex;gap:14px;margin:18px 0}
.bigbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--panel2);border:2px dashed var(--line);border-radius:16px;padding:30px 10px;
  font-weight:700;font-size:16px;cursor:pointer;text-align:center;color:var(--txt)}
.bigbtn:active{border-color:var(--accent);background:rgba(91,140,255,.08)}
.bigbtn .em{font-size:38px;line-height:1}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.thumb{position:relative;width:86px;height:86px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.65);color:#fff;border:none;
  border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:13px;line-height:1;padding:0}
.btn.big{font-size:17px;padding:15px 22px;width:100%;max-width:440px}
.row-actions a{margin-right:12px}
.empty{text-align:center;color:var(--muted);padding:40px}
small.hint{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.kpi .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font-size:26px;font-weight:800;margin-top:6px}
.kpi .v.g{color:var(--accent2)}
.kpi .v.a{color:var(--accent)}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:3px}
.filterbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.filterbar > div{min-width:130px}
.split{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13px}
.chip b{font-size:16px}
th.sortable{cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.zero td{opacity:.55}
@media(max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}.grid.cols4{grid-template-columns:repeat(2,1fr)}}