/* round 7 module (timesheet), built by B5: existing variables only (var(--ink) … var(--on-accent,#fff)), no hex colours.
   F08 Supervisor timesheet — js/timesheet.js. Tokens missing from the Classic look fall back to a Classic one (var(--red-t, var(--red))). */

/* ── toolbar ── */
.ts-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.ts-tools>*{flex-shrink:0;white-space:nowrap}
.ts-sp{flex:1}
.ts-seg{display:inline-flex;border:1px solid var(--indigo-bd,var(--rule));border-radius:7px;overflow:hidden;background:var(--paper)}
.ts-seg button{border:0;background:none;padding:0 12px;height:28px;font:inherit;font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer}
.ts-seg button.on{background:var(--indigo);color:var(--on-accent)}
.ts-datebox{font:600 13px var(--font);padding:0 4px;color:var(--ink)}
.ts-dpick{height:28px;padding:0 6px;border:1px solid var(--rule);border-radius:6px;background:var(--field,var(--paper));color:var(--ink);font:12px var(--font)}
.ts-chips{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:6px;white-space:normal}
.ts-chip{border:1px solid var(--indigo-bd,var(--rule));background:var(--paper);color:var(--ink);border-radius:14px;padding:4px 10px;font:inherit;font-weight:600;font-size:12px;cursor:pointer;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-chip:hover{border-color:var(--ink3)}
.ts-chip.on{background:var(--indigo);color:var(--on-accent);border-color:var(--indigo)}
/* R10: work-center select, the ⋯ menu (idle flag, print), 4 pills in the day header, the legend under the table */
.ts-csel{height:32px;padding:0 8px;border:1px solid var(--rule);border-radius:6px;background:var(--field,var(--paper));color:var(--ink);font:13px var(--font);max-width:220px}
.ts-more{position:relative} .ts-more>summary{list-style:none;cursor:pointer;min-width:32px;text-align:center} .ts-more>summary::-webkit-details-marker{display:none}
.ts-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;gap:2px;min-width:170px;padding:6px;background:var(--paper);border:1px solid var(--rule);border-radius:8px;box-shadow:var(--sh)}
.ts-menu .btn{text-align:left}
.ts-pills{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.ts-card>.ts-legend{display:flex;flex-wrap:wrap;padding:8px 16px 10px;white-space:normal}
.ts-how{margin:0;padding:6px 16px 10px;font-size:12.5px;color:var(--ink2)}
.ts-tools .btn,.ts-seg button{min-height:32px} .ts-seg button{height:32px} .ts-dpick{height:32px}

/* ── cards ── */
.ts-card{padding:0;overflow:hidden}
.ts-ch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--rule2)}
.ts-ch h3{margin:0;font-size:14.5px;font-weight:800;white-space:nowrap}
.ts-m{color:var(--ink2);font-size:12px}
.ts-m b{color:var(--ink)} .ts-m b.ts-red{color:var(--red-t,var(--red))}
.ts-legend{display:inline-flex;align-items:center;gap:5px;color:var(--ink2);font-size:11.5px;white-space:nowrap}
.ts-lg{display:inline-block;width:18px;height:9px;border-radius:2px;margin-left:6px}
.ts-lg.op{background:var(--smt,var(--indigo))}
.ts-lg.idle{background:repeating-linear-gradient(135deg,var(--red-l) 0 3px,var(--red-bd,var(--red)) 3px 6px);border:1px solid var(--red)}
.ts-lg.lunch{border:1px dashed var(--rule-hi,var(--ink3))}
.ts-lg.clk{background:var(--bg2);height:5px}
.ts-wrap{overflow-x:auto}
.ts-t{border-collapse:collapse;width:100%;min-width:980px}
.ts-t th{font:700 11px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:left;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--paper2);white-space:nowrap}
.ts-t td{padding:6px 10px;border-bottom:1px solid var(--rule2);vertical-align:middle}
.ts-t .num{font:500 13px var(--font);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .ts-t th.num{text-align:right;font:700 11px/1.2 var(--font)}
.ts-cw{width:150px} .ts-iow{width:118px} .ts-apw{width:150px}
.ts-t tr.flagged td{background:var(--amber-l)}
.ts-who .ts-name{border:0;background:none;padding:0;font:inherit;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.ts-who .ts-name:hover{text-decoration:underline}
.ts-who span{display:block;font-size:11px;color:var(--ink2)}
.ts-io{font:12px var(--mono);white-space:nowrap}
.ts-flag{display:block;font:700 11px/1.3 var(--font);color:var(--red-t,var(--red));white-space:normal;margin-top:2px}
.ts-bad{color:var(--red-t,var(--red));font-weight:700}
.ts-red{color:var(--red-t,var(--red))} .ts-green{color:var(--green-t,var(--green))}
.ts-mono{font-family:var(--mono);font-size:12px}
.ts-empty{padding:18px 16px!important;color:var(--ink2)}
.ts-load{padding:18px 16px}

/* ── timeline ── */
.ts-tlc{min-width:420px}
.ts-tl{position:relative;height:26px;border-radius:4px;background-image:linear-gradient(90deg,var(--rule2) 1px,transparent 1px);background-size:var(--ts-hr,10%) 100%}
.ts-tl .ts-clk{position:absolute;top:9px;height:8px;background:var(--bg2);border:1px solid var(--rule);border-radius:4px}
.ts-tl .ts-s{position:absolute;top:3px;height:20px;border-radius:4px;font:600 11px/20px var(--font);padding:0 4px;overflow:hidden;white-space:nowrap;text-overflow:clip;box-sizing:border-box}
.ts-tl .ts-s.op{background:var(--ts-c,var(--indigo));color:var(--on-accent)}
.ts-tl .ts-s.op.typed{opacity:.7;border:1px dashed var(--ink2)}
.ts-tl .ts-s.op.carried{border:2px dotted var(--amber-t,var(--amber))}
.ts-tl .ts-s.op.run{border-right:3px solid var(--green,var(--ink))}
.ts-tl .ts-s.idle{background:repeating-linear-gradient(135deg,var(--red-l) 0 4px,var(--red-bd,var(--red-l)) 4px 8px);color:var(--red-t,var(--red));border:1px solid var(--red);font-weight:700}
.ts-tl .ts-s.lunch{background:var(--paper);border:1px dashed var(--rule-hi,var(--ink3));color:var(--ink3);opacity:.92}
.ts-tl .ts-now{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--red)}
.ts-tlh{min-width:420px}
.ts-scale{position:relative;height:14px;font:500 11px var(--font);font-variant-numeric:tabular-nums;color:var(--ink3);letter-spacing:0;text-transform:none}
.ts-scale span{position:absolute;transform:translateX(-50%)}
.ts-scale span.f{transform:none}   /* the label at the very left edge is not centred */

/* ── used % and approve ── */
.ts-pct{display:inline-block;font:700 11px/1 var(--mono);padding:4px 6px;border-radius:5px}
.ts-pct.g{background:var(--green-l);color:var(--green-t,var(--green))}
.ts-pct.a{background:var(--amber-l);color:var(--amber-t,var(--ink))}
.ts-pct.r{background:var(--red-l);color:var(--red-t,var(--red))}
.ts-ok{display:inline-flex;align-items:center;gap:5px;background:var(--green-l);color:var(--green-t,var(--green));font:inherit;font-weight:700;font-size:11.5px;padding:5px 8px;border-radius:6px;border:1px solid transparent;white-space:nowrap;cursor:pointer}
.ts-ok.chg{background:var(--amber-l);color:var(--amber-t,var(--ink));border-color:var(--amber-bd,var(--amber))}
.btn.ts-rev{border-color:var(--amber);background:var(--amber-l);color:var(--amber-t,var(--ink))}

/* ── week grid ── */
.ts-wk{margin-top:14px}
.ts-wkt{min-width:760px}
.ts-wkt td,.ts-wkt th{text-align:center} .ts-wkt td:first-child,.ts-wkt th:first-child{text-align:left}
.ts-wkt th.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.ts-d{display:inline-block;min-width:92px;font:500 11.5px var(--mono);padding:4px 6px;border-radius:5px;background:var(--paper2);color:var(--ink);border:0;cursor:pointer}
.ts-d.ap{background:var(--green-l);color:var(--green-t,var(--green))}
.ts-d.pe{background:var(--paper);box-shadow:inset 0 0 0 1px var(--indigo-bd,var(--rule))}
.ts-d.fl{background:var(--red-l);color:var(--red-t,var(--red))}
.ts-d.td{background:var(--paper);box-shadow:inset 0 0 0 1px var(--indigo-bd,var(--rule));color:var(--ink2)}
.ts-d.none{background:none;color:var(--ink3);cursor:default}
.ts-tot td{font-weight:800;background:var(--paper2)}

/* ── review & approve (modal) ── */
.ts-rv h3{margin:0 0 8px}
.ts-rv h4{margin:14px 0 6px;font-size:13px}
.ts-rvnums{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-bottom:8px} .ts-rvnums b{color:var(--ink);font-family:var(--mono)}
.ts-rvtl{padding:6px 0 4px}
.ts-flags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.ts-fl{font-size:11.5px;font-weight:700;color:var(--red-t,var(--red));background:var(--red-l);border-radius:6px;padding:3px 8px}
.ts-mini{min-width:0}
.ts-mini td,.ts-mini th{padding:5px 8px;font-size:12px}
.ts-sub{display:block;font-size:11px;color:var(--ink2)}
.ts-add{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 0;font-size:12px}
.ts-tin{width:62px;height:24px;padding:0 6px;border:1px solid var(--rule);border-radius:5px;background:var(--field,var(--paper));color:var(--ink);font:12px var(--mono)}
.ts-gaps{display:flex;gap:6px;flex-wrap:wrap}
.ts-gap{font:600 11.5px var(--mono);color:var(--red-t,var(--red));background:var(--red-l);border-radius:5px;padding:3px 7px}
.ts-note{display:block;margin:12px 0 4px;font-size:12.5px;font-weight:600}
.ts-note textarea{display:block;width:100%;margin-top:4px;box-sizing:border-box;font:13px var(--font);padding:6px 8px;border:1px solid var(--rule);border-radius:6px;background:var(--field,var(--paper));color:var(--ink)}
.ts-deny{max-width:640px}
.ts-deny h3{margin:0 0 6px}

/* v1 tablet: 44 px touch targets on the toolbar, the approve buttons and the review dialog */
@media (max-width:1100px),(pointer:coarse){
  .ts-seg button{height:44px;padding:0 16px} .ts-tools .btn,.ts-dpick,.ts-csel,.ts-chip,.ts-more>summary,.ts-menu .btn,.ts-ok,.ts-card .btn,.ts-d,.ts-rv .btn,.ts-tin{min-height:44px}
  .ts-dpick{height:44px} .ts-chip{padding:0 14px} .ts-who .ts-name{min-height:44px}
  /* R10 fix: 1024 — the day table fits the page (Used and Approve stay on screen): narrower timeline and name columns, no sideways scroll */
  .ts-t{min-width:0} .ts-tlh,.ts-tlc{min-width:190px} .ts-cw{width:118px} .ts-iow{width:92px} .ts-apw{width:auto}
  .ts-t td,.ts-t th{padding:6px 6px} .ts-ok{white-space:normal;text-align:left} .ts-io{white-space:normal}
  .ts-wkt{min-width:0}
}

@media print{
  .ts-tools,.ts-ch .btn{display:none!important}
  .ts-card{box-shadow:none;break-inside:avoid}
  .ts-t{min-width:0}
}