/* TimeWatt — tokens shared with the Watt suite */
:root{
  --bg:#EEF2F0; --surface:#FFFFFF; --surface-2:#E4E9E6; --surface-3:#D6DEDA;
  --ink:#16232A; --ink-soft:#51636A; --ink-faint:#8B9A9A;
  --border:rgba(22,35,42,0.14); --border-strong:rgba(22,35,42,0.24);
  --brand:#1F4E68; --brand-ink:#fff; --accent:#C6402A; --accent-ink:#fff; --ok:#2E7D5B;
  --warn:#D98A1E;
  --shadow:0 1px 2px rgba(16,26,32,.07), 0 10px 28px -14px rgba(16,26,32,.22);
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#101A22; --surface:#16242D; --surface-2:#1B2932; --surface-3:#243642;
    --ink:#E7EDEF; --ink-soft:#93A5AC; --ink-faint:#5B6F76;
    --border:rgba(231,237,239,0.14); --border-strong:rgba(231,237,239,0.26);
    --brand:#5C9BBC; --brand-ink:#0C171D; --accent:#E1613F; --ok:#4FAE85;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.65); }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; overscroll-behavior:none;}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
button{ font:inherit; color:inherit; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
input,select{ font:inherit; }
.wordmark{ font-family:var(--mono); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:15px; }
.wordmark b{ color:var(--accent); }
.wordmark.big{ font-size:20px; margin-bottom:6px; display:block; text-align:center; }

.app{ height:100dvh; display:flex; flex-direction:column; }
.titlebar{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.brandblock{ display:flex; align-items:baseline; gap:10px; }
.brandblock .sub{ font-size:11.5px; color:var(--ink-soft); font-weight:700; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--ink); padding:9px 14px; border-radius:9px; font-size:13.5px; font-weight:700;
  cursor:pointer; box-shadow:var(--shadow); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.btn.accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.ghost{ box-shadow:none; background:transparent; border-color:transparent; }
.btn.small{ padding:6px 10px; font-size:12px; border-radius:7px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn[hidden]{ display:none; }

.screens{ flex:1; overflow-y:auto; }
.screen{ padding:14px 14px calc(14px + env(safe-area-inset-bottom)); max-width:680px; margin:0 auto; }
.screenhead .title{ font-size:17px; font-weight:800; }
.screenhead .desc{ font-size:12.5px; color:var(--ink-soft); margin:3px 0 12px; }

/* week bar + day strip */
.weekbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.wklabel{ font-weight:800; font-size:14.5px; font-variant-numeric:tabular-nums; text-align:center; }
.daystrip{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:12px; }
.daycell{ border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:7px 2px; text-align:center; cursor:pointer; }
.daycell .dw{ font-size:10px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; }
.daycell .dn{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.daycell .dh{ font-size:10px; font-family:var(--mono); color:var(--ink-faint); min-height:12px; }
.daycell.sel{ border-color:var(--brand); box-shadow:0 0 0 1.5px var(--brand) inset; }
.daycell.has .dh{ color:var(--ok); font-weight:700; }
.daycell.returned{ border-color:var(--accent); }

.dayentries{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.entrycard{ background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:11px 13px; cursor:pointer; text-align:left; }
.entrycard .top{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.entrycard .job{ font-weight:800; font-size:13.5px; }
.entrycard .hrs{ font-family:var(--mono); font-size:13px; font-weight:700; white-space:nowrap; }
.entrycard .meta{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chip{ font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.chip.submitted{ background:color-mix(in srgb, var(--brand) 15%, transparent); color:var(--brand); }
.chip.approved{ background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); }
.chip.returned{ background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent); }
.emptyday{ text-align:center; color:var(--ink-faint); font-size:13px; padding:22px 0; }

.dayactions{ display:flex; gap:8px; margin-bottom:14px; }
.dayactions .primary{ flex:1; }
.wktotals{ background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:10px 14px;
  font-family:var(--mono); font-size:12.5px; display:flex; justify-content:space-between; }

/* approvals */
.approvelist{ display:flex; flex-direction:column; gap:8px; }
.appritem{ background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:11px 13px; cursor:pointer; text-align:left; }
.appritem .who{ font-weight:800; font-size:14px; }
.appritem .what{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.appritem .hrs{ font-family:var(--mono); font-weight:700; }

/* enter for someone */
.enterwrap{ display:flex; flex-direction:column; gap:8px; }
.f-label{ font-size:11px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }
.f-hint{ text-transform:none; letter-spacing:0; font-weight:600; }
.f-input,.f-select{ border:1px solid var(--border-strong); border-radius:9px; padding:11px 12px; font-size:15px; background:var(--surface); color:var(--ink); width:100%; }
.f-input:focus,.f-select:focus{ outline:none; border-color:var(--brand); }

/* calendar — the "467 Multiple Jobs" master sheet, column for column.
 * 22 columns: name | job | local | cc | 12 day subcols | 3 totals | sub | notes.
 * Fills a desktop, fits an iPad; phones scroll sideways with the name stuck. */
#scrCal{ max-width:1400px; }
.calnote{ font-size:12px; color:var(--ink-soft); margin-bottom:8px; }
.calgridwrap{ overflow-x:auto; border:1px solid var(--border); border-radius:11px; background:var(--surface); box-shadow:var(--shadow); }
.calgrid{ display:grid; min-width:772px;
  grid-template-columns:minmax(106px,1.7fr) minmax(56px,.9fr) minmax(34px,.55fr) minmax(42px,.7fr)
    repeat(13, minmax(25px,.5fr)) repeat(3, minmax(27px,.5fr)) minmax(40px,.6fr) minmax(86px,1.7fr); }
.cg{ position:relative; min-width:0; overflow:hidden; padding:8px 2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
  font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--surface); text-align:center; }
.cg.dstart{ box-shadow:inset 1.5px 0 0 var(--border-strong); }
button.cg{ border-top:none; border-left:none; cursor:pointer; }
button.cg:active{ background:var(--surface-3); }
.cg.head{ font-family:var(--sans); font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink-soft); background:var(--surface-2); padding:5px 2px; line-height:1.3; }
.cg.head .sub{ font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--ink-faint); }
.cg.head.sublab{ font-size:8.5px; padding:3px 1px; color:var(--ink-faint); }
.cg.name{ position:sticky; left:0; z-index:2; align-items:flex-start; text-align:left;
  padding-left:10px; padding-right:6px; font-family:var(--sans); font-weight:700; font-size:12px;
  white-space:nowrap; }
.cg.head.name{ background:var(--surface-2); }
.cg.notes{ align-items:flex-start; text-align:left; font-family:var(--sans); font-size:10.5px;
  color:var(--ink-soft); padding:6px 7px; white-space:normal; line-height:1.35; }
.cg.has{ font-weight:800; }
.cg .stray{ font-size:9px; font-weight:800; color:var(--accent); line-height:1.1; }
.cg.pending::after{ content:'•'; position:absolute; top:0; right:2px; color:var(--warn); font-size:12px; }
.cg.returned{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.cg.blank{ min-height:38px; }
.cg.totrow{ background:var(--surface-2); font-weight:800; border-bottom:none; font-size:11px; }
.cg.name.totrow{ font-size:10.5px; letter-spacing:.03em; justify-content:center; }

/* team */
.teamlist{ display:flex; flex-direction:column; gap:6px; }
.teamrow{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 13px; cursor:pointer; text-align:left; }
.teamrow .tname{ font-weight:800; font-size:13.5px; }
.teamrow .tmeta{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.teamrow .norole{ color:var(--accent); font-weight:700; }
.teamedit{ display:flex; flex-direction:column; gap:6px; padding:10px 4px 4px; }

/* tab bar */
.tabbar{ display:flex; background:var(--surface-2); border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tabbar[hidden]{ display:none; }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; border:none; background:none;
  font-size:10.5px; font-weight:800; color:var(--ink-faint); padding:5px 2px; border-radius:9px; cursor:pointer; position:relative; }
.tab .ti{ font-size:19px; }
.tab.active{ color:var(--brand); }
.tab[hidden]{ display:none; }
.badge{ position:absolute; top:0; right:calc(50% - 26px); background:var(--accent); color:#fff; font-size:10px;
  font-weight:800; border-radius:999px; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.badge[hidden]{ display:none; }

/* sheets/modals */
.sheetmodal{ position:fixed; inset:0; z-index:300; background:rgba(10,16,20,.5); display:none; align-items:flex-end; justify-content:center; }
.sheetmodal:not([hidden]){ display:flex; }
.sheetcard{ width:100%; max-width:560px; background:var(--surface); border-radius:18px 18px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  max-height:88dvh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
@media (min-width:700px){ .sheetmodal{ align-items:center; } .sheetcard{ border-radius:16px; } }
.sheettitle{ font-size:16px; font-weight:800; }
/* the add/edit sheet stacks above the day sheet it was opened from */
#timeModal{ z-index:320; }
.hoursrow{ display:flex; gap:8px; margin-top:6px; }
.hourbox{ flex:1; text-align:center; }
.hourbox label{ font-size:10.5px; font-weight:800; color:var(--ink-soft); }
.stepper{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface-2); margin-top:3px; }
.stepper button{ width:40px; height:44px; border:none; background:none; font-size:20px; font-weight:800; cursor:pointer; color:var(--brand); }
.stepper span{ font-family:var(--mono); font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.sheetactions2{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }

/* allocation editor */
.allocmeta{ font-size:12.5px; color:var(--ink-soft); }
.allochours{ font-family:var(--mono); font-weight:800; font-size:14px; background:var(--surface-2); border-radius:9px; padding:9px 12px; }
.allocrows{ display:flex; flex-direction:column; gap:6px; }
.allocrow{ display:grid; grid-template-columns:1fr 62px 62px 62px 34px; gap:6px; align-items:center; }
.allocrow input{ border:1px solid var(--border-strong); border-radius:8px; padding:9px 8px; font-size:14px; background:var(--surface); color:var(--ink); width:100%; font-variant-numeric:tabular-nums; }
.allocrow .del{ border:none; background:none; color:var(--ink-faint); font-size:16px; cursor:pointer; }
.allocsum{ font-size:12px; font-weight:700; font-family:var(--mono); }
.allocsum.bad{ color:var(--accent); }
.allocsum.good{ color:var(--ok); }
.returnrow{ display:flex; gap:8px; }
.returnrow .f-input{ flex:1; }

/* auth (PlanWatt pattern, incl. the [hidden] trap fix) */
.authgate{ position:fixed; inset:0; z-index:400; background:var(--bg); display:none; align-items:center; justify-content:center; padding:24px; }
.authgate:not([hidden]){ display:flex; }
.authcard{ width:100%; max-width:340px; background:var(--surface); border:1px solid var(--border-strong); border-radius:14px; box-shadow:var(--shadow); padding:22px 20px; }
.authsub{ font-size:12.5px; color:var(--ink-soft); margin:2px 0 16px; line-height:1.55; text-align:center; }
.authfield{ display:none; flex-direction:column; gap:5px; margin-bottom:12px; }
.authfield:not([hidden]){ display:flex; }
.authfield label{ font-size:11px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; }
.authfield input{ border:1px solid var(--border-strong); border-radius:8px; padding:11px; font-size:15px; background:var(--surface); color:var(--ink); }
.autherror{ font-size:12px; color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:7px; padding:8px 10px; margin-bottom:12px; }
#authForm .btn{ width:100%; }
.authswitch{ display:block; width:100%; text-align:center; margin-top:12px; background:none; border:none; color:var(--brand); font-size:12.5px; font-weight:700; cursor:pointer; }

.toast{ position:fixed; bottom:calc(74px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:500;
  background:#14232B; color:#fff; font-size:13px; font-weight:600; padding:11px 16px; border-radius:11px; box-shadow:var(--shadow);
  max-width:88vw; text-align:center; }
.toast[hidden]{ display:none; }

#btnExportWeek{ width:100%; margin-bottom:12px; }
#btnExportWeek[hidden]{ display:none; }