:root{color-scheme:dark;--bg:#0c1119;--panel:#151d2a;--panel2:#1c2737;--line:#2a3547;--ink:#eef2f9;--muted:#a0afc4;--green:#40dba1;--blue:#7ab5ff;--red:#ff7d88;--yellow:#ffd182;--shadow:0 16px 36px #0003;font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px}a{color:#9ec9ff}.startload{padding:44px;text-align:center}.loginpage{min-height:100dvh;display:grid;place-items:center;padding:20px}.login{width:min(450px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--shadow)}.logo{font-size:28px;font-weight:800;letter-spacing:-1px}.logo span{color:var(--green)}.sub{color:var(--muted);font-size:13px}.banner{background:#282b19;border:1px solid #786b3e;color:#ffdc91;padding:10px 15px;border-radius:12px;font-size:12px}.warning{color:var(--yellow)}.good{color:var(--green)}.bad{color:var(--red)}.tiny{font-size:12px}.muted{color:var(--muted)}.layout{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100dvh}.sidebar{background:#101824;border-right:1px solid var(--line);padding:25px 16px;display:flex;flex-direction:column;gap:18px}.user{padding:14px;background:var(--panel2);border-radius:14px}.nav{display:flex;flex-direction:column;gap:5px}.navbtn{border:0;background:none;color:var(--muted);padding:12px 14px;text-align:left;border-radius:11px}.navbtn.active,.navbtn:hover{background:var(--panel2);color:var(--ink)}.main{max-width:1320px;width:100%;margin:auto;padding:28px 34px 70px}.top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}h1,h2,h3,p{margin:0 0 12px}h1{font-size:27px;letter-spacing:-.8px}h2{font-size:18px}h3{font-size:15px}.top h1{margin:0}.tag{display:inline-flex;gap:5px;align-items:center;font-size:12px;background:#213348;color:#aed0fd;padding:4px 9px;border-radius:20px}.pill{border:1px solid var(--line);background:var(--panel2);border-radius:12px;padding:12px 14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:0 4px 14px #0001;min-width:0}.card h2{margin-bottom:14px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stack{display:flex;flex-direction:column;gap:14px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.between{justify-content:space-between}.alignstart{align-items:flex-start}.grow{flex:1}.kpi{font-size:30px;font-weight:750;letter-spacing:-.8px}.kpi small{font-size:13px;color:var(--muted);font-weight:400}.btn{border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:10px 14px;font-weight:600;white-space:normal}.btn:hover{filter:brightness(1.12)}.btn.primary{background:#166d51;color:#fff;border-color:#258966}.btn.blue{background:#225792;border-color:#306fb2}.btn.danger{background:#622b39;border-color:#9d4456}.btn.sm{padding:6px 10px;font-size:12px}.btn.ghost{background:transparent}.btn.wide{width:100%}.formfield{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}.formfield input,.formfield select,.formfield textarea{width:100%;background:#101925;color:var(--ink);border:1px solid #38465b;border-radius:9px;padding:10px 12px;min-height:43px}.formfield textarea{resize:vertical;min-height:72px}.tblwrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;min-width:550px;font-size:13px}th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}th{color:var(--muted);font-weight:600;background:#182232;white-space:nowrap}tbody tr:last-child td{border-bottom:0}.valgood{color:var(--green)}.valbad{color:var(--red)}.callout{border-left:3px solid var(--blue);padding:10px 15px;background:#1d2940;border-radius:6px;font-size:13px}.err{background:#3b2027;color:#ffc0c6;padding:12px;border-radius:10px}.gap{height:18px}.hero{display:flex;align-items:center;gap:14px;padding:18px;background:linear-gradient(120deg,#133d31,#162a46);border-radius:14px}.heroicon{font-size:34px}.soft{border-top:1px solid var(--line);margin:16px 0}.navbottom{margin-top:auto}.empty{padding:20px;text-align:center;color:var(--muted)}#toast{position:fixed;bottom:24px;right:24px;z-index:10;max-width:420px;border-radius:12px;padding:14px 18px;background:#213c33;border:1px solid #38715a;box-shadow:var(--shadow);display:none}#toast.error{background:#472530;border-color:#a25461}.hl{color:#eef2f9}.status{display:inline-flex;padding:4px 8px;border-radius:6px;font-size:12px;background:#2b3749}.status.APPROVED{background:#174d3d;color:#94e8c4}.status.PENDING{background:#5f4925;color:#ffe0a6}.status.REJECTED{background:#512a38;color:#ffc1cb}.tip{border:1px dashed #60768e;padding:14px;border-radius:12px;color:var(--muted);font-size:13px}.footer{font-size:12px;color:var(--muted);margin-top:24px}
@media(max-width:850px){.layout{display:block}.sidebar{position:sticky;top:0;z-index:2;padding:12px 16px;border-bottom:1px solid var(--line)}.sidebar .logo{font-size:22px}.sidebar .user{display:none}.nav{flex-direction:row;overflow-x:auto}.navbtn{flex:0 0 auto;padding:7px 10px;font-size:13px}.navbottom{display:none}.main{padding:20px 14px 60px}.grid,.grid3{grid-template-columns:1fr}.card{padding:16px}.top{flex-direction:column;align-items:flex-start}.kpi{font-size:26px}table{min-width:500px}}

/* v0.3.0 timesheets and live overview */
.worker-click{cursor:pointer;transition:background .15s ease}
.worker-click:hover{background:#1d3044}
.state-chip{display:inline-block;border-radius:20px;padding:4px 9px;font-size:12px;font-weight:650;white-space:nowrap}
.state-chip.here{background:#174a3c;color:#86e7bb}
.state-chip.idle{background:#293449;color:#c5d4e7}
.state-chip.leave{background:#244675;color:#bbd8ff}
.state-chip.sick{background:#5c3040;color:#ffc4d0}
.timesheet{min-width:850px}
.timesheet tbody td{padding:8px 11px}
.timesheet tbody tr:hover{background:#19293b}
input[type='checkbox']{accent-color:#40dba1}

/* Annual all-staff hours matrix: horizontal scrolling with employee column pinned. */
.annual-controls { flex-wrap: wrap; align-items: end; gap: 10px; }
.annual-controls .formfield { min-width: 125px; max-width: 270px; }
.annual-matrix { border-collapse: separate; border-spacing: 0; min-width: var(--report-width,1100px); width:100%; }
.annual-matrix th, .annual-matrix td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.annual-matrix th { text-align:left; }
.annual-matrix .num { text-align:right; font-variant-numeric: tabular-nums; }
.annual-matrix .sticky-name { position:sticky; left:0; z-index:2; min-width:196px; background:var(--panel); }
.annual-matrix thead th { position:sticky; top:0; z-index:3; background:#223047; }
.annual-matrix thead .sticky-name { z-index:5; background:#223047; }
.annual-matrix tbody tr:nth-child(even) .sticky-name { background:#192436; }
.annual-matrix tbody tr:hover td, .annual-matrix tbody tr:hover .sticky-name { background:#253247; }
.annual-matrix .annual-total { background:#223047; }
.annual-matrix .matrix-totals th,.annual-matrix .matrix-totals td { background:#223047; font-weight:700; }
.annual-matrix .matrix-totals .sticky-name { background:#223047; z-index:2; }
.annual-matrix .matrixlink,.annual-matrix .worker-name { border:0; padding:3px 1px; background:transparent; color:var(--blue); cursor:pointer; text-align:inherit; font-weight:600; text-decoration:none; }
.annual-matrix .matrixlink:hover,.annual-matrix .worker-name:hover { text-decoration:underline; }
.annual-matrix .office-empty { text-align:right; color:var(--muted); }
.annual-matrix .pending-star { color:var(--yellow); margin-left:2px; }

/* v0.3.2 manual periods: explicit HH:MM fields to avoid Windows AM/PM locale UI */
.manual-period-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#manualPeriod .row .formfield{flex:1;min-width:230px}
#manualPeriod .row .btn{align-self:end}
@media(max-width:1050px){.manual-period-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.manual-period-grid{grid-template-columns:1fr}}

/* v0.3.3: report range, safe on narrow screens */
#periodForm .formfield{min-width:170px;max-width:245px}#periodForm .btn{align-self:end}

/* BigBro v0.3.4 inline timesheet entries. Inputs appear inside the selected date row. */
.timesheet th:last-child,.timesheet td:last-child {min-width:110px}
.timesheet .inline-editing {background:#1c3042}
.timesheet .inline-time {min-width:78px;width:82px;max-width:98px;padding:7px 9px;font-variant-numeric:tabular-nums}
.timesheet .inline-reason {width:180px;max-width:100%;padding:8px 9px}
.timesheet .inline-start {color:#72b9ff;background:transparent;border:1px dashed #5d83b3;border-radius:8px;cursor:pointer;padding:5px 8px;white-space:nowrap}
.timesheet .inline-start:hover {background:#283e55}
.timesheet .inline-out {display:flex;align-items:flex-start;flex-direction:column;gap:5px}
.timesheet .inline-out label{font-size:11px;color:var(--muted);white-space:nowrap;cursor:pointer}
.timesheet .inline-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* v0.3.5 fixed, non-deletable colon for 24-hour time entry */
.time24{display:inline-flex;gap:0;align-items:center;justify-content:center;min-height:38px;border:1px solid #38465b;border-radius:9px;background:#101925;color:var(--ink);padding:2px 6px;white-space:nowrap;font-variant-numeric:tabular-nums;box-sizing:border-box;width:max-content}
.time24:focus-within{outline:2px solid var(--blue);outline-offset:1px}
.time24 input.time24-half,.formfield .time24 input.time24-half,.timesheet .time24 input.time24-half{display:inline-block;width:2.35ch;min-width:2.35ch;max-width:2.35ch;height:34px;min-height:0;margin:0;padding:0!important;text-align:center;font:600 14px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:0;background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;border-radius:0;color:var(--ink)}
.time24 input.time24-half::placeholder{color:#8391a4;opacity:1;font-weight:400}
.time24 .time24-colon{display:inline-block;min-width:.8ch;text-align:center;font:700 15px ui-monospace,SFMono-Regular,Consolas,monospace;color:#d9e3f4;user-select:none;pointer-events:none}
.time24-inline{min-height:34px;padding:1px 5px;border-style:solid}
.timesheet .time24-inline input.time24-half{height:29px;font-size:13px}

/* v0.3.6: clear NFC confirmation in mobile layout. */
.nfc-confirm {padding:20px 14px;border:1px solid #246047;border-radius:12px;background:rgba(23,153,94,.12);text-align:center}
.nfc-confirm-departure {border-color:#346ba1;background:rgba(38,109,198,.12)}
.nfc-confirm-symbol {font-size:32px;font-weight:bold;color:#42bd7a}
.nfc-confirm-departure .nfc-confirm-symbol {color:#79bbff}
.nfc-confirm h2 {font-size:19px;margin:6px auto}
.nfc-confirm-time {font-size:38px;font-weight:750;font-variant-numeric:tabular-nums;margin:10px auto}
.nfc-confirm p {font-size:14px;line-height:1.5;margin:0;color:#cfdbed}

/* v0.3.8: expand all daily NFC visits without leaving the monthly grid */
.segments-detail { margin-top: 6px; font-size: 12px; min-width: 112px; }
.segments-detail summary { color: #8abbff; cursor: pointer; user-select: none; }
.segments-detail[open] { padding: 5px 0; }
.segments-detail .tiny { margin-top: 5px; line-height: 1.7; white-space: nowrap; color: #b5c8da; }

/* v0.3.9: worker graphical pattern. Hidden remains hidden despite layout CSS. */
[hidden] {display:none!important}
.pattern-surface {position:relative;max-width:300px;width:100%;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;margin:2px auto;background:#141e2c;border:1px solid #36465b;border-radius:18px;overflow:hidden}
.pattern-lines {position:absolute;width:100%;height:100%;inset:0;pointer-events:none}
.pattern-lines polyline {fill:none;stroke:#3cc899;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.pattern-dot {position:absolute;transform:translate(-50%,-50%);background:#91a6bd;border:8px solid #26364a;border-radius:50%;width:32px;height:32px;pointer-events:none;box-sizing:border-box;padding:0}
.pattern-dot.selected {background:#44d9a5;border-color:#247f69;box-shadow:0 0 0 4px rgba(68,217,165,.25)}
.pattern-hint{text-align:center;min-height:1.4em}

/* v0.3.10: the pattern is drawn wholly in SVG; circle appearance no longer depends on stylesheet cache. */
.pattern-surface circle {pointer-events:none;}