/* Ported VERBATIM from the current app's week.html so the look and feel carries over.
   Only additions are appended at the end; nothing above this line was changed. */

:root{
  --bg:#0e1613; --card:#141f1a; --line:#22332b; --line2:#2c4137;
  --ink:#e6efe9; --dim:#9db8aa; --dim2:#6d8578;
  --acc:#8fd6b2; --acc-d:#0e1613;
  --warn:#e0b050; --bad:#e07a5f; --crit:#e05252; --info:#6ea8d8;
  /* WEEKEND shading -- both Saturday and Sunday. Named --wknd, not --sat, because it now covers two
     days: a `.sat` class sitting on a Sunday column is the kind of small lie that makes the next
     person distrust the whole file. The Protected Saturday POLICY is separate and still Saturday-only;
     this is visual grouping, not the rule. */
  --wknd:#2a1f1a;
  /* Next week's ESTIMATE, shaded a touch differently from hours actually worked. The two are different
     kinds of number -- one is a record, the other a guess -- and they sit side by side in one row, so a
     tint makes the boundary readable without adding a label. Cool, matching --info, where --wknd is warm:
     the two shaded columns must not be mistaken for each other. */
  --fut:#161f28;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
     -webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:14px 16px 80px}
a{color:var(--acc);text-decoration:none}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 14px;flex-wrap:wrap}
.brand{letter-spacing:.3em;font-weight:700;font-size:14px}
.brand small{display:block;letter-spacing:.45em;font-weight:400;font-size:8px;color:var(--dim);margin-top:2px}
nav{display:flex;gap:14px;font-size:13px}
nav a{color:var(--dim)} nav a.on{color:var(--acc)}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
select,input[type=text]{background:var(--card);color:var(--ink);border:1px solid var(--line2);
  border-radius:8px;padding:9px 11px;font-size:14px;font-family:inherit}
.weeknav{display:flex;align-items:center;gap:8px;margin-left:auto}
.weeknav button{background:var(--card);border:1px solid var(--line2);color:var(--dim);
  border-radius:8px;width:34px;height:34px;font-size:16px;cursor:pointer}
.weeknav button:hover{color:var(--acc);border-color:var(--acc)}
.weeknav .lbl{font-weight:600;min-width:190px;text-align:center;font-variant-numeric:tabular-nums}
.status{font-size:12.5px;color:var(--dim);min-height:18px;margin:2px 0 10px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:2px 9px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.p-ok{background:#16302a;color:var(--acc);border-color:#1f4638}
.p-warn{background:#332a18;color:var(--warn);border-color:#4a3c1f}
.p-crit{background:#331e1e;color:var(--crit);border-color:#4a2626}
.p-info{background:#1c2735;color:var(--info);border-color:#26364a}
.gridwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:820px}
th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600;
   padding:11px 8px;border-bottom:1px solid var(--line2);text-align:center;white-space:nowrap}
th.l,td.l{text-align:left}
td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
th.wknd,td.wknd{background:var(--wknd)}
/* The projected-hours column: header, cells and footer total, so the tint reads as one column rather
   than three unrelated shaded boxes. */
th.fut,td.fut{background:var(--fut)}
tfoot td.fut{background:var(--fut)}
.proj{font-size:13.5px;font-weight:600;max-width:230px}
.projsub{font-size:11px;color:var(--dim2)}
input.h{width:56px;background:var(--bg);border:1px solid var(--line2);color:var(--ink);border-radius:7px;
  padding:7px 4px;font-size:14px;text-align:center;font-variant-numeric:tabular-nums;font-family:inherit}
input.h:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(143,214,178,.18)}
input.h.has{background:#17251f;border-color:#2c4137}
input.h.fc{width:60px;border-style:dashed;border-color:#3a5a72}
input.h.fc:focus{border-color:var(--info);box-shadow:0 0 0 2px rgba(110,168,216,.18)}
select.wt{background:var(--bg);border:1px solid var(--line2);color:var(--dim);border-radius:7px;
  padding:6px 5px;font-size:11.5px;font-family:inherit;max-width:104px}
.tot{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;text-align:center}
tfoot td{border-top:1px solid var(--line2);font-weight:700;font-variant-numeric:tabular-nums;
  text-align:center;padding:11px 8px;font-size:14px}
tfoot td.l{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
td.over b{color:var(--crit)}
.rm{background:none;border:none;color:var(--dim2);cursor:pointer;font-size:16px;padding:0 4px}
.rm:hover{color:var(--bad)}
.addrow{display:flex;gap:9px;align-items:center;margin:12px 0 4px;flex-wrap:wrap}
.btn{border:none;border-radius:9px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-p{background:var(--acc);color:var(--acc-d)}
.btn-g{background:var(--card);color:var(--dim);border:1px solid var(--line2)}
.btn-g:hover{color:var(--ink);border-color:var(--acc)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.flags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.section{margin-top:26px}
.section h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin-bottom:9px}
.hint{font-size:12.5px;color:var(--dim2);margin-top:6px;max-width:74ch}
.foot{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.savedot{font-size:12px;color:var(--dim2)}
dialog{background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:14px;
  padding:20px;max-width:420px;width:92%;margin:auto}
dialog::backdrop{background:rgba(0,0,0,.62)}
dialog h3{font-size:16px;margin-bottom:12px}
dialog select,dialog input{width:100%;margin-bottom:12px}
.dact{display:flex;gap:9px;justify-content:flex-end}
.warnbox{background:#241a12;border:1px solid #4a3c1f;border-radius:9px;padding:10px 13px;
  font-size:13px;color:var(--warn);margin:10px 0}
@media (max-width:640px){ .wrap{padding:10px 10px 70px} .weeknav .lbl{min-width:150px;font-size:14px} }
/* ---- mobile day-carousel: one day at a time, thumb-sized targets ---- */
#mgrid{display:none}
@media (max-width:640px){
  #grid{display:none}
  #mgrid{display:block;padding:10px}
}
.mdays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:12px}
.mday{background:var(--bg);border:1px solid var(--line2);border-radius:10px;text-align:center;
  padding:7px 0 6px;cursor:pointer;font-family:inherit;color:var(--dim);position:relative}
.mday small{display:block;font-size:10px;letter-spacing:.05em}
.mday b{font-size:15px;color:var(--ink)}
.mday.sel{background:var(--acc);border-color:var(--acc)}
.mday.sel small,.mday.sel b{color:#0e1613}
:root[data-theme="light"] .mday.sel small,:root[data-theme="light"] .mday.sel b,
:root[data-theme="dyslexia"] .mday.sel small,:root[data-theme="dyslexia"] .mday.sel b{color:#fff}
.mday.wknd{border-color:#6b4a35}
.mday .dot{position:absolute;top:4px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.mday.sel .dot{background:#0e1613}
.mcard{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:9px}
.mcard .mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:9px}
.mcard .proj{font-size:14.5px}
.mcard .mrow{display:flex;gap:9px;align-items:center}
.mcard input.mh{flex:1;min-width:0;background:var(--card);border:1px solid var(--line2);color:var(--ink);
  border-radius:10px;padding:13px 10px;font-size:18px;text-align:center;font-family:inherit;
  font-variant-numeric:tabular-nums}
.mcard input.mh:focus{outline:none;border-color:var(--acc)}
.mcard select.wt{max-width:120px;padding:12px 6px}
.mcard .wtot{font-size:12px;color:var(--dim2);min-width:64px;text-align:right}
.mtotals{display:flex;justify-content:space-between;background:var(--bg);border:1px solid var(--line2);
  border-radius:10px;padding:11px 14px;font-size:13.5px;margin:11px 0 4px;font-variant-numeric:tabular-nums}
.mtotals b.over{color:var(--crit)}
.msec{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:16px 0 8px;font-weight:600}
/* Mobile is a separate DOM tree, so the projection tint has to be applied here too -- styling only the
   desktop column would leave the distinction on half the app. Shaded as a block rather than per cell,
   because the mobile layout stacks these rows instead of putting them in a column. */
.mfc{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;
  border-bottom:1px solid var(--line);background:var(--fut)}
.mfc:first-of-type{border-radius:10px 10px 0 0}
.mfc:last-child{border:none;border-radius:0 0 10px 10px}
.mfc input{width:84px;background:var(--card);border:1px dashed #3a5a72;color:var(--ink);border-radius:9px;
  padding:11px 6px;font-size:16px;text-align:center;font-family:inherit}

/* ---- additions for the ported build ---- */

/* The review-build banner. */
.banner{background:#332a18;border:1px solid #4a3c1f;border-radius:9px;padding:9px 13px;
  font-size:12.5px;color:var(--warn);margin:0 0 12px}

/* Admin master-data table. */
table.list{border-collapse:collapse;width:100%;min-width:0}
table.list th,table.list td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
table.list tr.off{opacity:.45}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs .btn{padding:8px 13px;font-size:13px}
.tabs .btn.on{background:var(--acc);color:var(--acc-d);border-color:var(--acc)}
.rowactions{display:flex;gap:6px}
.rowactions .btn{padding:6px 11px;font-size:12px}
label{display:block;font-size:11.5px;color:var(--dim);margin:10px 0 4px}
dialog input[type=email],dialog input[type=text],dialog select{width:100%}

/* ---- admin + import/export screens ----
   These screens build their buttons in JS as plain <button> elements and the markup uses class="primary",
   neither of which the ported grid CSS above styles -- so without this block they render as browser
   default controls next to a fully themed grid. Scoped to the three containers so the grid's own
   buttons (.rm, .weeknav, .mday) keep their existing treatment. */
h1{font-size:19px;font-weight:700;margin:28px 0 4px}
.wrap > h1:first-of-type{margin-top:6px}
.sub{font-size:13px;color:var(--dim);margin-bottom:14px;max-width:84ch}
.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.actions button,.tabs button,.rowactions button{
  background:var(--card);color:var(--dim);border:1px solid var(--line2);border-radius:9px;
  font-family:inherit;font-weight:600;font-size:13px;padding:9px 14px;cursor:pointer}
.actions button:hover,.tabs button:hover,.rowactions button:hover{color:var(--ink);border-color:var(--acc)}
.actions button.primary,.tabs button.on{background:var(--acc);color:var(--acc-d);border-color:var(--acc)}
.actions button:disabled{opacity:.45;cursor:not-allowed}
.actions button:disabled:hover{color:var(--dim);border-color:var(--line2)}
.tabs button{padding:8px 13px}
.rowactions button{padding:6px 11px;font-size:12px}
label.inline{display:inline-block;font-size:11.5px;color:var(--dim);margin:0}
input[type=date],input[type=file],input[type=email]{background:var(--card);color:var(--ink);
  border:1px solid var(--line2);border-radius:8px;padding:8px 10px;font-size:13.5px;font-family:inherit}
input[type=file]{color:var(--dim);max-width:100%}
table.list select{background:var(--bg);color:var(--ink);border:1px solid var(--line2);border-radius:7px;
  padding:6px 8px;font-size:12.5px;font-family:inherit}
/* A failed import must not read like a successful one. */
.status.ok{color:var(--acc)}
.status.bad{color:var(--bad)}

/* ---- nested admin sections ----
   A segmented control, visually heavier than the .tabs used for the six master lists INSIDE it, so the
   two levels of navigation are not mistaken for one flat row of nine choices. */
.segs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line2);border-radius:11px;
  padding:4px;margin:6px 0 18px;flex-wrap:wrap}
.segs button{flex:1;min-width:132px;background:none;border:none;border-radius:8px;color:var(--dim);
  font-family:inherit;font-weight:600;font-size:13.5px;padding:10px 14px;cursor:pointer}
.segs button:hover{color:var(--ink)}
.segs button.on{background:var(--acc);color:var(--acc-d)}
.seg > h1:first-child{margin-top:0}

/* Wide tables scroll inside their own box; the page itself must never scroll sideways. */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.tablewrap table.list{min-width:520px}
.tablewrap table.list th{border-bottom:1px solid var(--line2)}

/* Preview tiles. Deliberately not a chart: five single numbers are a worse chart than they are a row
   of numbers, and the one that matters (people missing a week) needs to be readable, not estimated. */
.stats{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 16px}
.stat{flex:1;min-width:118px;background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px}
.stat b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim2);
  margin-top:3px}
/* A count that needs attention is coloured, and also carries its own label -- never colour alone. */
.stat.warn{border-color:#4a3c1f}
.stat.warn b{color:var(--warn)}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:820px){ .cols2{grid-template-columns:1fr} }

/* The submitted-vs-missing grid. A dash is a gap; the cell also carries a title attribute naming the
   week, so the meaning does not rest on the glyph or the colour. */
td.miss{color:var(--crit);font-weight:700;text-align:center}
td.filed{color:var(--dim2);text-align:center}
table.list tr.bad td{background:rgba(224,122,95,.09)}
table.list tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--bad)}