:root{
  color-scheme:light; /* native checkboxes, pickers and scrollbars match the theme */
  --ctl-h:38px; /* one height for every field and control button */
  --bg:#f4f6fa;--panel:#fff;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--accent:#2563eb;
  --ok:#16a34a;--ok-bg:#dcfce7;--late:#d97706;--late-bg:#fef3c7;--bad:#dc2626;--bad-bg:#fee2e2;--off:#9ca3af;--off-bg:#f3f4f6;
  --hol:#7c3aed;--hol-bg:#ede9fe;
}
/* Dark mode is picked with the sun/moon button (light by default), not by the device setting */
:root[data-theme=dark]{color-scheme:dark;--bg:#0f1115;--panel:#181b22;--text:#e5e7eb;--muted:#9ca3af;--line:#2a2f3a;--accent:#3b82f6;
  --ok:#4ade80;--ok-bg:#14532d;--late:#fbbf24;--late-bg:#78350f;--bad:#f87171;--bad-bg:#7f1d1d;--off:#9ca3af;--off-bg:#262a33;--hol:#c4b5fd;--hol-bg:#3b2a63}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body{-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:12px}
a{color:var(--accent);text-decoration:none}
button,.btn{font:inherit;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;padding:8px 14px;cursor:pointer;touch-action:manipulation}
button.ghost,.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
button:disabled{opacity:.6;cursor:wait}
button.ghost:disabled{opacity:.4;cursor:default}
input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);min-width:0;accent-color:var(--accent)}
input:not([type=checkbox]):not([type=radio]){height:var(--ctl-h)}
/* iOS Safari draws date/time fields as native buttons: taller than other fields, text centred, and wider than
   their box (they ignore width:100%). Plain fields instead, like the rest. */
input[type=date],input[type=time],input[type=month]{-webkit-appearance:none;appearance:none;min-height:0;text-align:left;justify-content:flex-start}
input::-webkit-date-and-time-value{text-align:left;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center}
.controls button,.controls .btn,header>.btn{min-height:var(--ctl-h)}
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:16px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px}
.login-card h1{margin:0}.err{color:var(--bad);min-height:1.2em}

/* ---- Shell: sidebar on wide screens, top bar + bottom tabs on phones (see media queries) ---- */
.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh}
.brand{font-weight:700;font-size:18px;padding:4px 8px}
#menuBtn{display:none}
.icon-btn{align-items:center;justify-content:center;padding:6px 10px;line-height:0}
.icon-btn svg{width:22px;height:22px;fill:currentColor}
/* Theme switch: icon in the phone top bar, labelled button in the desktop sidebar */
#themeBtnTop{display:none}
#themeBtnSide{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.theme-toggle svg{width:20px;height:20px;fill:none}
.theme-toggle .ico-sun,[data-theme=dark] .theme-toggle .ico-moon{display:none}
[data-theme=dark] .theme-toggle .ico-sun{display:block}
nav{display:flex;flex-direction:column;gap:2px}
nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text)}
nav a.active{background:var(--bg);color:var(--accent);font-weight:600}
nav svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav .short{display:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
main{padding:22px 26px;max-width:1300px;width:100%;min-width:0}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}header h2{margin:0}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.tile{display:block;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:border-color .15s}
.tile .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.tile .v{font-size:30px;font-weight:700;margin-top:4px}
a.tile .k::after{content:"›";float:right;font-size:16px;line-height:1;margin-left:6px}
.tile.late .v{color:var(--late)}.tile.absent .v{color:var(--bad)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.grid2+.grid2{margin-top:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow:auto}.card h3{margin:0 0 10px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-weight:600;font-size:12px}
tbody tr.click{cursor:pointer}tbody tr.sel,tbody tr.click:active{background:var(--bg)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.pill.present{background:var(--ok-bg);color:var(--ok)}.pill.late{background:var(--late-bg);color:var(--late)}
.pill.absent{background:var(--bad-bg);color:var(--bad)}.pill.holiday{background:var(--hol-bg);color:var(--hol)}.pill.not_in,.pill.off,.pill.nodata{background:var(--off-bg);color:var(--off)}
.feed{list-style:none;margin:0;padding:0}.feed li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.feed li>.muted{white-space:nowrap}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:40;max-width:calc(100vw - 32px)}
#devState{white-space:pre-line;line-height:1.35}
.rtable .sub{display:none}
.rtable td.c-main{white-space:normal}
@media (min-width:701px){.emp-detail .rtable td.c-main{white-space:nowrap}} /* dates, not names */
@media (hover:hover){
  nav a:hover{background:var(--bg)}
  a.tile:hover{border-color:var(--accent)}
  tbody tr.click:hover{background:var(--bg)}
  .plist a:hover{background:var(--bg)}
}

/* ---- Overview: who is late / not in ---- */
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 6px}
.card-head h3{margin:0}.card-head a{font-size:13px;white-space:nowrap}
.count{display:inline-block;min-width:1.7em;padding:1px 8px;border-radius:999px;font-size:13px;text-align:center;vertical-align:2px}
.count:empty{display:none}
.count.late{background:var(--late-bg);color:var(--late)}.count.absent{background:var(--bad-bg);color:var(--bad)}
.plist{list-style:none;margin:0;padding:0}
.plist li{border-bottom:1px solid var(--line)}.plist li:last-child{border-bottom:0}
.plist a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 4px;color:var(--text);border-radius:6px}
.plist .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .meta{color:var(--muted);white-space:nowrap;font-size:13px}
.plist .meta b{color:var(--late);font-weight:600;margin-left:4px}
.plist li.none{padding:10px 4px}
.plist li.more a{color:var(--accent)}

/* ---- Daily report ---- */
.date-nav{margin-left:auto}
.date-nav #dayPrev,.date-nav #dayNext{min-width:40px;font-size:18px;line-height:1;padding:6px 10px}
.day-title{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:-4px 0 10px;font-size:15px}
.day-off-btn{padding:5px 12px;font-size:13px}
.day-off-form{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.day-off-form input{flex:1 1 220px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:6px 8px 6px 14px;font-weight:500}
.chip b{min-width:1.7em;padding:1px 7px;border-radius:999px;background:var(--off-bg);color:var(--muted);font-size:12px;text-align:center}
.chip.in.has b{background:var(--ok-bg);color:var(--ok)}
.chip.late.has b{background:var(--late-bg);color:var(--late)}
.chip.absent.has b{background:var(--bad-bg);color:var(--bad)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.on b{background:rgba(255,255,255,.22);color:#fff}

/* ---- Employees page ---- */
.emp-layout{display:grid;grid-template-columns:400px minmax(0,1fr);gap:14px;align-items:start}
.emp-list{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding:0 6px}
.emp-list table{table-layout:fixed}
.emp-list col.c-name{width:auto}.emp-list col.c-id{width:92px}.emp-list col.c-status{width:112px}
.emp-list th,.emp-list td{overflow:hidden;text-overflow:ellipsis;padding:9px 10px}
.emp-list thead th{position:sticky;top:0;background:var(--panel);z-index:1;box-shadow:0 1px 0 var(--line)}
.emp-list tbody tr{border-left:3px solid transparent}
.emp-list tbody tr.sel{border-left-color:var(--accent);background:var(--bg)}
.emp-detail{min-height:420px}
.back-btn{display:none;margin:0 0 12px}
.empty-state{display:grid;place-items:center;min-height:380px;margin:0}
.emp-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.emp-head h3{margin:0;font-size:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0 0 16px}
.stats div{background:var(--bg);border-radius:10px;padding:10px 12px;color:var(--muted);font-size:12px}
.stats b{display:block;font-size:22px;color:var(--text);margin-top:2px}
.cal-wrap{margin-bottom:16px}
.cal-title{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .hd{text-align:center;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding-bottom:2px}
.cal .d{border:1px solid var(--line);border-radius:10px;padding:8px;min-height:70px;font-size:12px;display:flex;flex-direction:column;gap:2px;background:var(--bg);overflow:hidden}
.cal .d .n{font-weight:600;color:var(--muted)}
.cal .d.present{background:var(--ok-bg);border-color:transparent}.cal .d.present .n{color:var(--ok)}
.cal .d.late{background:var(--late-bg);border-color:transparent}.cal .d.late .n{color:var(--late)}
.cal .d.absent{background:var(--bad-bg);border-color:transparent}.cal .d.absent .n{color:var(--bad)}
.cal .d.off{opacity:.5}.cal .d.not_in{border-style:dashed}
.cal .d.future{opacity:.35;border-style:dashed;background:transparent}
.cal .d.holiday{background:var(--hol-bg);border-color:transparent;opacity:1}.cal .d.holiday .n{color:var(--hol)}
.cal .d.future.holiday{opacity:.75}
.cal .d.empty{border:none;background:transparent}
.cal .d.today{box-shadow:0 0 0 2px var(--accent)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend .present::before{background:var(--ok)}.legend .late::before{background:var(--late)}.legend .absent::before{background:var(--bad)}.legend .off::before{background:var(--off)}.legend .holiday::before{background:var(--hol)}
.cal .d div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.cal .d .n{font-size:12px}
.cal .d.nodata{opacity:.45;border-style:dashed;background:transparent}

/* ---- Settings ---- */
.rules{max-width:720px}.rules fieldset{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:end;min-width:0}
.rules legend{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:0 6px}
.rules label{display:flex;flex-direction:column;gap:4px;font-size:13px;min-width:0}.rules input[type=time],.rules input[type=number]{width:130px}
.rules .hint{flex-basis:100%;margin:0;color:var(--muted);font-size:12px}
.rules label.check{flex-direction:row;align-items:center;gap:8px;flex-basis:100%;font-size:14px}
.days{display:flex;gap:8px;flex-wrap:wrap}.days .day{flex-direction:row;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.rules .controls{margin-top:4px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--muted);margin-left:8px;vertical-align:middle}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--off)}
.live.on{color:var(--ok)}.live.on::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.live.off::before{background:var(--late)}
.otlist{display:flex;flex-wrap:wrap;gap:8px;max-height:260px;overflow:auto;width:100%;padding:4px 0}
.otlist .day.on{border-color:var(--accent);background:var(--bg)}
#otSearch{width:260px}
.otlist .day{flex-direction:row;align-items:center;gap:6px;padding:5px 10px}
#evMore{margin-top:10px}
/* ---- Confirmation dialog ---- */
.dlg{border:1px solid var(--line);border-radius:14px;padding:0;background:var(--panel);color:var(--text);width:min(440px,calc(100vw - 32px));box-shadow:0 20px 50px rgba(0,0,0,.25)}
.dlg::backdrop{background:rgba(15,17,21,.45)}
.dlg form{margin:0;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.dlg h3{margin:0;font-size:17px;line-height:1.3}
.dlg-body p{margin:0}.dlg-body ul{margin:4px 0 0;padding-left:20px}.dlg-body li{margin:4px 0}.dlg-body .muted{font-size:13px;margin-top:8px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.dlg-actions button{min-height:var(--ctl-h)}
button.danger{background:var(--bad);border-color:var(--bad)}
select{font:inherit;height:var(--ctl-h);padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}

/* ---- Settings: holidays & days off ---- */
.holidays{margin-top:14px}.holidays h3{margin:0 0 6px}
.holidays h4{margin:16px 0 4px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.hol-add{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:end;margin:14px 0}
.hol-add label{flex:1 1 140px}.hol-add .hol-name{flex:2 1 220px}.hol-add input{width:100%}
.hol-public{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hol-public .hint{flex-basis:100%;margin:0}
.hol-list{list-style:none;margin:0;padding:0}
.hol-list li{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}
.hol-list li:last-child{border-bottom:0}
.hol-list .when{min-width:220px;font-weight:600}.hol-list .what{flex:1;min-width:0}
.hol-list .rm,.hol-list .rm-wd{padding:4px 10px;font-size:13px}.hol-list li.past{opacity:.6}.hol-list .none{color:var(--muted)}
.hol-past summary{cursor:pointer;color:var(--muted);padding:10px 0 4px}
.hol-feed{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.rules label.hol-auto{flex-direction:row;align-items:center;gap:8px;font-size:14px;font-weight:600;flex:1 1 220px}
.hol-feed .hint{flex-basis:100%;margin:0}.hol-feed .hint.err{color:var(--bad)}
.tag{display:inline-block;padding:0 7px;border-radius:999px;font-size:11px;font-weight:600;background:var(--hol-bg);color:var(--hol);vertical-align:1px}

/* ---- Tablets and phones: top bar, bottom tab bar, one column ---- */
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr} /* spare height goes to main, not the top bar */
  .side{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;align-items:center;gap:8px;
    padding:8px 10px 8px 14px;padding-top:calc(8px + env(safe-area-inset-top));border-right:0;border-bottom:1px solid var(--line)}
  .brand{flex:1;min-width:0;padding:0;font-size:17px}
  #menuBtn,#themeBtnTop{display:inline-flex}
  #themeBtnSide{display:none}
  nav{position:fixed;z-index:30;left:0;right:0;bottom:0;flex-direction:row;gap:0;background:var(--panel);border-top:1px solid var(--line);
    padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  nav a{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;padding:7px 2px 5px;font-size:11px;font-weight:500;color:var(--muted)}
  nav a.active{background:none;color:var(--accent);font-weight:600}
  nav svg{width:22px;height:22px}
  nav .full{display:none}nav .short{display:block}
  .side-foot{display:none;position:absolute;top:calc(100% + 6px);right:10px;width:min(300px,calc(100vw - 20px));margin:0;padding:12px;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
  .side.menu-open .side-foot{display:flex}
  main{padding:16px 16px calc(84px + env(safe-area-inset-bottom))}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  .rtable .m-hide{display:none}
  .rtable .sub{display:block;font-weight:400;font-size:12px;color:var(--muted)}
  /* Employees: list and month are separate screens */
  .emp-layout{grid-template-columns:minmax(0,1fr)}
  .emp-list{position:static;max-height:none;overflow:visible}
  #view-employees.has-sel .emp-list,#view-employees.has-sel #empSearch{display:none}
  #view-employees:not(.has-sel) .emp-detail,#view-employees:not(.has-sel) .det-ctl{display:none}
  #empSearch{flex:1 1 200px;min-width:0}
  .back-btn{display:inline-flex}
  .emp-detail{min-height:0}
}

/* ---- Phones: tables become stacked cards, bigger touch targets ---- */
@media (max-width:700px){
  :root{--ctl-h:44px}
  main{padding-left:12px;padding-right:12px}
  header{margin-bottom:12px}header h2{font-size:20px}
  input{font-size:16px} /* below 16px iOS zooms into the field */
  header .controls{width:100%}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
  .tile{padding:12px 14px}.tile .v{font-size:26px}.tile .k{font-size:11px}
  .grid2{gap:12px}.grid2+.grid2{margin-top:12px}
  .card{padding:12px 14px}
  .plist a{padding:11px 4px}

  .day-header h2{flex:1}
  .day-header #csvDay{order:1}
  .date-nav{order:2;flex:1 1 100%;margin:0;flex-wrap:nowrap}
  .date-nav #dayPick{flex:1;min-width:0}
  .chips{gap:6px}.chip{padding:7px 8px 7px 12px}

  .rtable thead{display:none}
  .rtable,.rtable tbody{display:block;width:100%}
  .rtable tr{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
  .rtable tbody tr:last-child{border-bottom:0}
  .rtable tr::after{content:"";order:2;flex-basis:100%}
  .rtable td{display:block;padding:0;border:0;white-space:normal}
  .rtable td.c-main{order:0;flex:1 1 0;min-width:0;font-weight:600;overflow-wrap:anywhere}
  .rtable td.c-status{order:1;flex:none;max-width:60%;text-align:right}
  .rtable td[data-label]{order:3;flex:1 1 0;min-width:0;margin-top:6px}
  .rtable td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--muted);font-weight:400}
  .rtable td[data-label]:empty::after{content:"–";color:var(--muted)}
  .rtable td:not([data-label]):not(.c-main):not(.c-status){display:none}
  .rtable tr.nopunch td[data-label]{display:none}
  .rtable tr.empty td{display:block;flex:1 1 100%}
  .rtable .rcv-dt{display:none}

  .emp-list col.c-id{width:64px}.emp-list col.c-status{width:104px}
  .emp-list th,.emp-list td{padding:12px 8px}
  .emp-head h3{font-size:18px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stats div{padding:8px 10px;font-size:11px}.stats b{font-size:18px}
  .cal{gap:4px}
  .cal .hd{font-size:10px;letter-spacing:0}
  .cal .d{min-height:46px;padding:4px 5px;border-radius:8px}
  .cal .d div{font-size:10px}
  .cal .d div:not(.n){display:none} /* too narrow for times: colour shows the status, the list below has the details */

  .rules fieldset{padding:10px 12px;gap:10px 12px}
  .rules fieldset>label{flex:1 1 130px}
  .rules input[type=time],.rules input[type=number]{width:100%}
  #otSearch{width:100%}
  .hol-list .when{min-width:0;flex:1 1 100%}
  .ev-controls input[type=date],.ev-controls input[type=text]{flex:1 1 140px;min-width:0}
}