:root{--nav:#101828;--bg:#f6f7f9;--line:#e4e7ec;--muted:#667085;--green:#15803d;--red:#b42318;--amber:#b54708;--blue:#175cd3}*{box-sizing:border-box}body{background:var(--bg);color:#182230;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial}.top{background:var(--nav);color:#fff;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.brand{font-weight:850}.brand small{opacity:.6}.userline{font-size:12px}.userline button,.mini{cursor:pointer;border:0;border-radius:8px;margin-left:8px;padding:7px 10px}.wrap{max-width:1180px;margin:22px auto;padding:0 14px}.worker{max-width:680px}.card{border:1px solid var(--line);background:#fff;border-radius:15px;margin-bottom:14px;padding:18px;box-shadow:0 2px 8px #1018280b}.row{justify-content:space-between;align-items:center;gap:10px;display:flex}.small,.muted{color:var(--muted)}.small{font-size:12px}.pill{border-radius:20px;padding:5px 9px;font-size:11px;font-weight:800}.info{color:#1e40af;background:#dbeafe}.warn{color:#92400e;background:#fef3c7}.netbar{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:11px;margin:14px 0;padding:11px 13px}.netbar.off{background:#fffbeb;border-color:#fde68a}.clock{text-align:center;margin:14px 0 2px;font-size:42px;font-weight:850}.elapsed{text-align:center;color:var(--red);margin:7px;font-size:30px;font-weight:850}.loc{background:#f1fbf4;border:1px solid #b7d5c2;border-radius:12px;margin:14px 0;padding:14px}.address{margin:7px 0 3px;font-weight:750}.label{margin:13px 0 6px;font-size:13px;font-weight:750}textarea,input{width:100%;font:inherit;background:#fff;border:1px solid #d0d5dd;border-radius:9px;padding:11px}textarea{min-height:70px}.btn{cursor:pointer;border:0;border-radius:10px;margin-top:14px;padding:13px 15px;font-weight:850}.btn:disabled{opacity:.45;cursor:not-allowed}.full{width:100%}.start{background:var(--green);color:#fff}.end{background:var(--red);color:#fff}.worktype{grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px;display:grid}.worktype button{cursor:pointer;text-align:center;color:#344054;background:#fff;border:2px solid #d0d5dd;border-radius:12px;padding:15px 42px 15px 10px;font-weight:800;position:relative}.worktype button span{margin-bottom:5px;font-size:25px;display:block}.worktype button:after{content:"";background:#fff;border:2px solid #98a2b3;border-radius:6px;width:22px;height:22px;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.worktype button.selected{color:#166534;background:#f0fdf4;border-color:#15803d}.worktype button.selected:after{content:"✓";color:#fff;background:#15803d;border-color:#15803d;justify-content:center;align-items:center;font-size:15px;font-weight:900;display:flex}.warning{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:11px;font-size:12px}.activebox{background:#fff8f7;border:1px solid #fecaca;border-radius:12px;margin-top:14px;padding:14px}.history h3{margin-top:0}.event{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.center{text-align:center}.loginScreen{background:#f6f7f9;justify-content:center;align-items:center;min-height:100vh;padding:22px;display:flex}.loginCard{border:1px solid var(--line);background:#fff;border-radius:18px;width:100%;max-width:420px;padding:28px;box-shadow:0 12px 32px #10182814}.loginLogo{text-align:center;margin-bottom:24px}.loginLogo .q{letter-spacing:.5px;color:#101828;font-size:29px;font-weight:900}.loginLogo .j{color:#667085;margin-top:3px;font-size:14px}.loginCard label{margin:13px 0 6px;font-size:13px;font-weight:750;display:block}.loginBtn{color:#fff;cursor:pointer;background:#101828;border:0;border-radius:10px;width:100%;margin-top:18px;padding:13px;font-weight:850}.loginNote{text-align:center;color:#98a2b3;margin-top:22px;font-size:11px;line-height:1.45}@media (width<=600px){.top{flex-direction:column;align-items:flex-start}.clock{font-size:36px}.worktype{grid-template-columns:1fr 1fr}.worker{margin-top:10px;padding:0 10px}.card{border-radius:12px}.userline{justify-content:space-between;align-items:center;width:100%;display:flex}}.gpsFallback{margin-top:8px}.photoBox{background:#fcfcfd;border:1px solid #d0d5dd;border-radius:12px;margin-top:14px;padding:13px}.required{color:#b42318;font-weight:800}.photoBox p{margin:5px 0 11px}.photoBtn{cursor:pointer;background:#fff;border:1px solid #98a2b3;border-radius:9px;justify-content:center;align-items:center;padding:10px 13px;font-weight:800;display:inline-flex}.photoBtn input{display:none}.photoBtn.secondary{margin-top:14px}.photoPreview{max-width:260px;margin-top:10px;position:relative}.photoPreview img{object-fit:cover;border:1px solid #d0d5dd;border-radius:9px;width:100%;max-height:220px;display:block}.removePhoto{color:#b42318;cursor:pointer;background:0 0;border:0;margin-top:6px;padding:0;font-size:12px;font-weight:750}.photoOptional{margin-top:2px}.admin-toolbar{margin-bottom:20px}.admin-filters{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px;display:flex}.admin-filters label{min-width:230px;font-size:12px;font-weight:700}.admin-filters select{background:#fff;border:1px solid #d0d5dd;border-radius:8px;width:100%;margin-top:6px;padding:10px;display:block}.month-nav{text-transform:capitalize;align-items:center;gap:12px;display:flex}.month-nav button{cursor:pointer;background:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:8px 14px;font-size:18px}.admin-grid{grid-template-columns:repeat(7,minmax(0,1fr)) minmax(110px,1.2fr);gap:4px;display:grid}.admin-head{text-align:center;background:#f2f4f7;border-radius:6px;padding:9px 3px;font-size:12px;font-weight:800}.admin-sum{background:#e4e7ec;border-left:3px solid #667085}.admin-day{cursor:pointer;color:#182230;background:#fff;border:1px solid #e4e7ec;border-radius:7px;flex-direction:column;align-items:center;gap:7px;min-height:78px;padding:7px 5px;display:flex}.admin-day strong{font-size:13px}.admin-day:hover,.admin-day.picked{background:#eff6ff;border-color:#175cd3}.admin-day.other-month{opacity:.35}.day-number{color:#667085;font-size:11px}.day-open{color:#b42318;font-size:10px;font-weight:800}.admin-week{text-align:center;border-left:3px solid #667085;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:4px;display:flex}.admin-week span{font-size:10px}.admin-week strong{font-size:15px}.admin-week small{font-size:10px}.admin-green{color:#166534;background:#dcfce7}.admin-yellow{color:#92400e;background:#fef3c7}.admin-red{color:#991b1b;background:#fee2e2}.admin-legend{color:#475467;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:12px;display:flex}.admin-totals{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;display:grid}.admin-totals div{background:#f8fafc;border-radius:9px;flex-direction:column;gap:6px;padding:12px;display:flex}.admin-totals span{color:#667085;font-size:12px}.admin-totals strong{font-size:20px}.admin-session{border-top:1px solid #e4e7ec;flex-direction:column;gap:5px;padding:13px 0;display:flex}@media (width<=650px){.admin-grid{grid-template-columns:repeat(7,minmax(0,1fr)) minmax(74px,1.5fr);gap:2px}.admin-day{min-height:65px;padding:5px 1px}.admin-day strong{font-size:10px}.admin-week strong{font-size:11px}.admin-week small{font-size:9px}.admin-totals strong{font-size:16px}.admin-filters{align-items:stretch}.admin-filters label{width:100%}}.day-times{color:#667085;white-space:nowrap;font-size:10px}.admin-actions{flex-wrap:wrap;align-items:center;gap:9px;margin:7px 0;display:flex}.admin-actions .mini{border:1px solid #d0d5dd;margin:0}.admin-editor{background:#f8fafc;border:1px solid #d0d5dd;border-radius:10px;margin:14px 0;padding:16px}.admin-editor label{margin:10px 0;font-size:13px;font-weight:700;display:block}.admin-editor input,.admin-editor textarea{margin-top:6px;display:block}.admin-audit{background:#fff7ed;border-left:3px solid #d97706;margin-top:6px;padding:6px}.admin-mark{color:#92400e}.admin-photo img{border-radius:9px;max-width:100%;max-height:500px;margin-top:10px;display:block}.admin-day .day-times{font-size:9px}@media (width<=650px){.day-times{font-size:8px!important}}.employee-tabs{gap:8px;margin:12px 0;display:flex}.employee-tabs button{cursor:pointer;background:#fff;border:1px solid #d0d5dd;border-radius:10px;flex:1;padding:12px 8px;font-weight:700}.employee-tabs button.selected{color:#175cd3;background:#eaf2ff;border-color:#175cd3}.employee-month{text-transform:capitalize;justify-content:center;align-items:center;gap:15px;margin:18px 0;display:flex}.employee-calendar-scroll{overflow-x:auto}.employee-calendar-grid{grid-template-columns:repeat(7,minmax(45px,1fr)) minmax(70px,1fr);gap:4px;min-width:430px;display:grid}.employee-calendar-head{text-align:center;background:#f2f4f7;border-radius:6px;padding:9px 2px;font-weight:700}.employee-calendar-day{cursor:pointer;min-height:65px;font:inherit;color:inherit;background:#fff;border:1px solid #e4e7ec;border-radius:7px;flex-direction:column;justify-content:flex-start;align-items:center;gap:3px;padding:7px 2px;display:flex}.employee-calendar-day b{font-size:12px}.employee-calendar-day small{color:#b42318;font-size:10px}.employee-calendar-day.outside{opacity:.35}.employee-calendar-day.chosen{background:#eff6ff;border-color:#175cd3}.employee-calendar-total{color:#05603a;text-align:center;background:#dcfae6;border-radius:7px;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:65px;padding:3px;display:flex}.employee-calendar-total small{font-size:10px}.employee-calendar-total b{font-size:13px}.employee-stats{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;display:grid}.employee-stats>div{background:#f8fafc;border-radius:9px;flex-direction:column;gap:6px;padding:12px;display:flex}.employee-stats span,.employee-stats small{color:#667085;font-size:11px}.employee-stats b{font-size:18px}.employee-detail{border-top:1px solid #e4e7ec;margin-top:20px;padding-top:10px}.employee-session{border-bottom:1px solid #e4e7ec;padding:12px 0}.employee-session p{margin:7px 0}@media (width<=520px){.employee-stats{grid-template-columns:1fr 1fr}.employee-stats>div:last-child{grid-column:span 2}.employee-calendar-grid{gap:2px}.employee-calendar-day{min-height:58px}}
