*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d0d;--bg2:#141414;--bg3:#1c1c1c;
  --txt:#ffffff;--txt2:#a8b8a4;--txt3:#6a8a66;
  --bdr:rgba(255,255,255,0.10);--bdr2:rgba(255,255,255,0.20);
  --blue:#2d7a2d;--blue-l:#1a3018;--blue-d:#3fa83f;
  --green:#3fa83f;--green-l:#1a3018;
  --amber:#c47f17;--amber-l:#2e2008;
  --red:#c0392b;--red-l:#2e0d0a;
  --orange:#e05a2b;
  --radius:8px;--radius-l:12px;
}
/* ── Light theme ── */
[data-theme="light"]{
  --bg:#f4f6f4;--bg2:#e8ece8;--bg3:#dce2dc;
  --txt:#111811;--txt2:#3a5a3a;--txt3:#5a7a5a;
  --bdr:rgba(0,0,0,0.10);--bdr2:rgba(0,0,0,0.18);
  --blue:#2d7a2d;--blue-l:#d4edda;--blue-d:#1f5c1f;
  --green:#2d7a2d;--green-l:#d4edda;
  --amber:#8a5a00;--amber-l:#fdf3e0;
  --red:#b03020;--red-l:#fde8e6;
  --orange:#c04010;
}
/* ── Auto theme: override to light when OS is light ── */
@media(prefers-color-scheme:light){
  [data-theme="auto"]{
    --bg:#f4f6f4;--bg2:#e8ece8;--bg3:#dce2dc;
    --txt:#111811;--txt2:#3a5a3a;--txt3:#5a7a5a;
    --bdr:rgba(0,0,0,0.10);--bdr2:rgba(0,0,0,0.18);
    --blue:#2d7a2d;--blue-l:#d4edda;--blue-d:#1f5c1f;
    --green:#2d7a2d;--green-l:#d4edda;
    --amber:#8a5a00;--amber-l:#fdf3e0;
    --red:#b03020;--red-l:#fde8e6;
    --orange:#c04010;
  }
}
/* ── Light: fix hardcoded dark colours ── */
[data-theme="light"] body{background:#e4e8e4;}
[data-theme="light"] input[type=text],[data-theme="light"] input[type=password],[data-theme="light"] input[type=datetime-local],[data-theme="light"] input[type=date],[data-theme="light"] select{background:#ffffff;}
[data-theme="light"] select option{background:#f4f6f4;color:#111811;}
[data-theme="light"] .nav-btn.active{background:#d4edda;color:#1f5c1f;border-bottom-color:#2d7a2d;}
[data-theme="light"] .act-btn.sel{background:#d4edda;border-color:#2d7a2d;color:#1f5c1f;}
[data-theme="light"] .act-list-item.checked{background:#d4edda;color:#1f5c1f;}
[data-theme="light"] .chk-pill.checked{background:#d4edda;border-color:#2d7a2d;color:#1f5c1f;}
[data-theme="light"] .b-in{background:#d4edda;color:#1f5c1f;}
[data-theme="light"] .b-out{background:#dce2dc;color:#3a5a3a;}
[data-theme="light"] .b-auto{background:#fde8e6;color:#b03020;}
[data-theme="light"] .b-blue{background:#d4edda;color:#1f5c1f;}
[data-theme="light"] .b-amber{background:#fdf3e0;color:#8a5a00;}
[data-theme="light"] tr.row-auto td{background:rgba(176,48,32,0.07);}
[data-theme="light"] #timeout-bar{background:#fff3cd;color:#856404;border-color:#ffc107;}
[data-theme="light"] #prelim-banner{background:#d4edda;border-color:#2d7a2d;}
[data-theme="light"] #prelim-banner p{color:#1f5c1f;}
[data-theme="light"] #a2hs-banner{background:#d4edda;color:#111811;border-top-color:#2d7a2d;}
[data-theme="light"] #loading-overlay{background:#f4f6f4;}
/* ── Auto light: same overrides ── */
@media(prefers-color-scheme:light){
  [data-theme="auto"] body{background:#e4e8e4;}
  [data-theme="auto"] input[type=text],[data-theme="auto"] input[type=password],[data-theme="auto"] input[type=datetime-local],[data-theme="auto"] input[type=date],[data-theme="auto"] select{background:#ffffff;}
  [data-theme="auto"] select option{background:#f4f6f4;color:#111811;}
  [data-theme="auto"] .nav-btn.active{background:#d4edda;color:#1f5c1f;border-bottom-color:#2d7a2d;}
  [data-theme="auto"] .act-btn.sel{background:#d4edda;border-color:#2d7a2d;color:#1f5c1f;}
  [data-theme="auto"] .act-list-item.checked{background:#d4edda;color:#1f5c1f;}
  [data-theme="auto"] .chk-pill.checked{background:#d4edda;border-color:#2d7a2d;color:#1f5c1f;}
  [data-theme="auto"] .b-in{background:#d4edda;color:#1f5c1f;}
  [data-theme="auto"] .b-out{background:#dce2dc;color:#3a5a3a;}
  [data-theme="auto"] .b-auto{background:#fde8e6;color:#b03020;}
  [data-theme="auto"] .b-blue{background:#d4edda;color:#1f5c1f;}
  [data-theme="auto"] .b-amber{background:#fdf3e0;color:#8a5a00;}
  [data-theme="auto"] tr.row-auto td{background:rgba(176,48,32,0.07);}
  [data-theme="auto"] #timeout-bar{background:#fff3cd;color:#856404;border-color:#ffc107;}
  [data-theme="auto"] #prelim-banner{background:#d4edda;border-color:#2d7a2d;}
  [data-theme="auto"] #prelim-banner p{color:#1f5c1f;}
  [data-theme="auto"] #a2hs-banner{background:#d4edda;color:#111811;border-top-color:#2d7a2d;}
  [data-theme="auto"] #loading-overlay{background:#f4f6f4;}
}
/* ── Theme toggle pill ── */
.theme-toggle{display:flex;align-items:center;justify-content:center;gap:2px;background:var(--bg2);border:0.5px solid var(--bdr2);border-radius:20px;padding:3px;width:fit-content;margin:16px auto 6px;}
.theme-btn{background:none;border:none;border-radius:16px;padding:5px 13px;font-size:11px;font-weight:500;cursor:pointer;color:var(--txt2);font-family:inherit;transition:all .15s;white-space:nowrap;}
.theme-btn.active{background:var(--green);color:#fff;font-weight:700;}
body{font-family:'SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#000000;min-height:100vh;display:flex;justify-content:center;align-items:flex-start}
#app{background:var(--bg);width:100%;max-width:520px;min-height:100vh;position:relative;overflow:hidden}
.screen{display:none}.screen.active{display:block}
.label-xs{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:var(--txt2)}
.heading{font-size:17px;font-weight:600;color:var(--txt)}
/* Bare heading fallback — prevents browser-default black text (invisible in
   dark mode) on any h1–h4 that doesn't get a color from a class. */
h1,h2,h3,h4{color:var(--txt)}
.subtext{font-size:13px;color:var(--txt2)}
.pin-display{font-size:30px;font-weight:500;letter-spacing:14px;color:var(--txt);min-height:44px;text-align:center;padding:6px 0}
.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:260px;margin:0 auto}
.pin-btn{background:var(--bg2);border:0.5px solid var(--bdr2);border-radius:var(--radius);padding:17px;font-size:22px;font-weight:500;cursor:pointer;color:var(--txt);transition:background .1s,transform .08s;font-family:inherit}
.pin-btn:hover{background:var(--bg3)}.pin-btn:active{transform:scale(.95)}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.b-in{background:#1a3018;color:#6dd86d}
.b-out{background:var(--bg3);color:var(--txt2)}
.b-auto{background:var(--red-l);color:var(--red)}
.b-blue{background:#1a3018;color:#6dd86d}
.b-amber{background:var(--amber-l);color:var(--amber)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10px;font-weight:600;color:var(--txt2);padding:6px 8px;border-bottom:0.5px solid var(--bdr);text-transform:uppercase;letter-spacing:.4px}
td{padding:9px 8px;border-bottom:0.5px solid var(--bdr);color:var(--txt);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.row-auto{border-left:3px solid var(--orange)}
tr.row-auto td{background:rgba(192,57,43,.12)}
.nav-bar{display:flex;gap:4px;margin-bottom:16px;border-bottom:0.5px solid var(--bdr);padding-bottom:12px;overflow-x:auto}
.nav-btn{background:none;border:none;font-size:12px;padding:5px 11px;border-radius:var(--radius);cursor:pointer;color:var(--txt2);font-weight:500;white-space:nowrap;font-family:inherit}
.nav-btn.active{background:#1a3018;color:#6dd86d;font-weight:600;border-bottom:2px solid #3fa83f}
/* Master admin sub-navigation (v38.0) */
.subnav-bar{display:flex;gap:4px;flex-wrap:wrap;align-items:center;background:var(--bg2);border:0.5px solid var(--bdr);border-radius:var(--radius);padding:6px 8px;margin:-6px 0 16px;}
.subnav-btn{background:none;border:none;font-size:11px;padding:4px 10px;border-radius:var(--radius);cursor:pointer;color:var(--txt2);font-weight:500;white-space:nowrap;font-family:inherit;}
.subnav-btn:hover{color:var(--txt);}
.subnav-btn.active{background:var(--blue-l);color:var(--blue-d);font-weight:600;}
input[type=text],input[type=password],input[type=datetime-local],input[type=date],select{
  width:100%;padding:8px 10px;border:0.5px solid var(--bdr2);border-radius:var(--radius);font-size:13px;background:#1a1a1a;color:var(--txt);font-family:inherit;outline:none}
input:focus,select:focus{border-color:var(--green)}
input::placeholder{color:var(--txt3)}
select option{background:#232f20;color:#f0f4ee}
select{cursor:pointer}
.btn{display:block;width:100%;padding:13px;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s}
.btn-primary{background:var(--green);color:#fff;font-weight:700;letter-spacing:.3px}.btn-primary:hover{background:var(--blue-d)}
.btn-ghost{background:none;border:none;font-size:13px;color:var(--txt2);cursor:pointer;padding:9px;font-family:inherit}
.btn-sm{padding:5px 12px;font-size:11px;font-weight:600;border-radius:6px;cursor:pointer;font-family:inherit;border:0.5px solid var(--bdr2);background:none;color:var(--txt2)}
.btn-sm:hover{background:var(--bg2)}
.btn-sm.danger{color:var(--red);border-color:var(--red)}
.btn-sm.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.act-btn{background:var(--bg2);border:1.5px solid transparent;border-radius:var(--radius);padding:12px 8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--txt);transition:all .12s;text-align:center;font-family:inherit}
.act-btn:hover{background:var(--bg3)}.act-btn.sel{background:#1a3018;border-color:#3fa83f;color:#6dd86d}
.card{background:var(--bg);border:0.5px solid var(--bdr);border-radius:var(--radius-l);padding:1rem 1.2rem}
.stat-card{background:var(--bg2);border-radius:var(--radius);padding:12px;text-align:center;border:0.5px solid var(--bdr)}
.stat-card[onclick]:hover{background:var(--bg3);border-color:var(--bdr2);}
#notif-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.42);z-index:100}
#notif-box{background:var(--bg);border-radius:var(--radius-l);padding:2rem 2.5rem;text-align:center;max-width:280px;border:0.5px solid var(--bdr)}
#notif-icon{font-size:44px;margin-bottom:10px}
#notif-name{font-size:18px;font-weight:600;color:var(--txt);margin-bottom:4px}
#notif-action{font-size:13px;color:var(--txt2)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200}
.modal{background:var(--bg);border-radius:var(--radius-l);padding:1.5rem;width:92%;max-width:400px;border:0.5px solid var(--bdr);max-height:90vh;overflow-y:auto}
.modal h3{font-size:15px;font-weight:600;margin-bottom:16px;color:var(--txt)}
.field{margin-bottom:10px}
.field label{font-size:10px;color:var(--txt2);display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.modal-actions button{flex:1;padding:9px;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.modal-save{background:var(--green);color:#fff;border:none;font-weight:700}
.modal-cancel{background:none;border:0.5px solid var(--bdr2);color:var(--txt2)}
/* export confirm checklist */
.chk-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--bdr);font-size:13px;color:var(--txt)}
.chk-row:last-child{border-bottom:none}
.chk-row input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;cursor:pointer;accent-color:var(--green)}
/* employee card in log view */
.emp-card{border:0.5px solid var(--bdr);border-radius:var(--radius-l);margin-bottom:10px;overflow:hidden}
.emp-card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg2);cursor:pointer;user-select:none}
.emp-card-header:hover{background:var(--bg3)}.emp-card-header{border-bottom:0.5px solid var(--bdr)}
.emp-card-body{border-top:0.5px solid var(--bdr);display:none}
.emp-card-body.open{display:block}
.emp-summary{font-size:11px;color:var(--txt2);margin-top:1px}
/* filter bar */
.filter-bar{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.filter-bar-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:12px}
.site-stripe{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;flex-shrink:0}
/* ── Checkbox-label pill for jobsite/supervisor selection ── */
.chk-pill{display:flex;align-items:center;gap:7px;padding:7px 10px;background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--radius);cursor:pointer;font-size:12px;font-weight:500;color:var(--txt);transition:all .1s;user-select:none}
.chk-pill input[type=checkbox]{width:14px;height:14px;accent-color:var(--green);flex-shrink:0;cursor:pointer}
.chk-pill.checked{background:#1a3018;border-color:#3fa83f;color:#6dd86d}
/* ── Activity full-screen checklist (v39.0 — replaces v36–v38 dropdown) ── */
.act-list{border:0.5px solid var(--bdr2);border-radius:var(--radius);overflow:hidden;background:var(--bg2)}
.act-list-item{display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;font-size:14px;color:var(--txt);border-bottom:0.5px solid var(--bdr)}
.act-list-item:last-child{border-bottom:none}
.act-list-item:hover{background:var(--bg3)}
.act-list-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--green);flex-shrink:0;cursor:pointer}
.act-list-item.checked{background:#1a3018;color:#6dd86d}
.act-confirm-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;max-width:520px;margin:0 auto;background:var(--bg);border-top:0.5px solid var(--bdr);box-shadow:0 -4px 16px rgba(0,0,0,.25)}
.act-confirm-bar-inner{max-width:380px;margin:0 auto;padding:10px 1rem calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
/* ── Custom page-scroll affordance for the activity screen (v39.1) — native
   scrollbars/CSS hints aren't reliably visible on mobile/PWA, so this is a
   self-drawn rail + tappable arrows driven entirely by JS scroll math ── */
.act-scroll-overlay{position:fixed;left:0;right:0;top:0;bottom:0;max-width:520px;margin:0 auto;pointer-events:none;z-index:85}
.act-scroll-rail{position:absolute;right:6px;width:5px;top:calc(90px + env(safe-area-inset-top));bottom:150px}
.act-scroll-track{position:absolute;top:0;bottom:0;left:0;right:0;background:var(--bdr2);border-radius:3px;opacity:.4}
.act-scroll-thumb{position:absolute;left:0;right:0;width:5px;background:var(--green);border-radius:3px;opacity:.9}
.act-scroll-arrow{position:absolute;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;background:var(--bg2);border:0.5px solid var(--bdr2);box-shadow:0 2px 12px rgba(0,0,0,.35);color:var(--txt);font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;opacity:0;pointer-events:none;transition:opacity .15s}
.act-scroll-arrow.show{opacity:.95;pointer-events:auto}
.act-scroll-arrow-top{top:calc(14px + env(safe-area-inset-top))}
.act-scroll-arrow-bottom{bottom:148px}
.kiosk-action-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border:0.5px solid var(--bdr);border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .12s;margin-bottom:8px}
.kiosk-action-btn:hover{filter:brightness(1.05)}
/* ── A2HS banner ── */
#a2hs-banner{position:fixed;bottom:0;left:0;right:0;background:#1a3018;color:#f0f4ee;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:300;font-size:13px;box-shadow:0 -2px 12px rgba(0,0,0,.4);border-top:1px solid #3fa83f}
#a2hs-banner p{margin:0;line-height:1.4}
#a2hs-banner strong{display:block;font-size:14px;font-weight:600}
#a2hs-banner .a2hs-actions{display:flex;gap:8px;flex-shrink:0}
#a2hs-banner button{padding:6px 14px;border-radius:6px;border:none;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
#a2hs-banner .a2hs-add{background:#3fa83f;color:#fff}
#a2hs-banner .a2hs-dismiss{background:rgba(255,255,255,.15);color:#fff}
#clock-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
#timeout-bar{position:fixed;top:0;left:0;right:0;background:#FAEEDA;color:#854F0B;padding:8px 16px;font-size:12px;font-weight:600;text-align:center;z-index:250;display:none;border-bottom:1.5px solid #EF9F27}
#prelim-banner{background:#1a2a08;border:1px solid #3fa83f;border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;display:none;}
#prelim-banner p{font-size:13px;color:#6dd86d;margin:0 0 6px;}
#prelim-banner .prelim-actions{display:flex;gap:8px;margin-top:8px;}
.row-estimated td{font-style:italic;color:var(--amber)!important;}
.row-estimated{border-left:3px solid var(--amber);}