/* payroll.css - the Payroll module's own styles (app/payroll.js, wave 3).
   Only what nobody else draws: the one page's sections, the run table with
   its sticky header, the check chips, the repayment box, the phone targets.
   Everything else Payroll draws uses the console's kit (.ordercard, .fchip,
   .btn, .pill, .strip, table.buy); the pay stub paper (#stubwrap, .stubdoc)
   is kit in staff.html, shared with the Money room's tax pack print. Colors
   are tokens only (DESIGN.md). */

.paybar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:6px 0;
  position:sticky;top:0;z-index:2;background:var(--surface)}
.pay-asof{font-size:11px;color:var(--ink3);display:inline-flex;gap:6px;align-items:center}

/* The automatic verify under the run bar (migration 245): the switch, when it
   runs next, what it did last; "Verified automatically" under a line's pill. */
.payauto{display:flex;gap:4px 14px;align-items:center;flex-wrap:wrap;margin:0 0 10px;font-size:12px}
.payauto-sw{display:inline-flex;gap:6px;align-items:center;margin:0;font-size:12.5px;font-weight:600;cursor:pointer}
.payauto-sw input{width:auto;margin:0}
.payauto .hint{font-size:12px;margin:0}
.payauto .payauto-warn{color:var(--gold)}
.payauto .payauto-block{color:var(--clay)}
.payauto-line{font-size:11px;margin-top:3px}

.payrun{overflow:auto;max-height:70vh}
.payrun table.buy th{position:sticky;top:0;background:var(--surface);z-index:1}
.payrun tr.pay-hl>td{box-shadow:inset 0 0 0 2px var(--accent)}
.paychips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.paychip{display:inline-block;font-size:10.5px;line-height:1.3;padding:2px 6px;border-radius:4px;white-space:normal;max-width:260px}
.paychip.block{background:var(--claybg);color:var(--clay)}
.paychip.warn{background:var(--goldbg);color:var(--gold)}
.payadv{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.payadv input{width:78px;margin:0;padding:4px 6px;text-align:right}
.paymore{display:inline-block}
.paymore>summary{list-style:none;cursor:pointer;display:inline-block}
.paymore>summary::-webkit-details-marker{display:none}

.paysec{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:0 0 10px}
.paysec>summary{cursor:pointer;padding:10px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;list-style:none}
.paysec>summary::-webkit-details-marker{display:none}
.paysec>summary::before{content:"\25B8";color:var(--ink3);font-size:12px}
.paysec[open]>summary::before{content:"\25BE"}
.paysec>summary .pill,.paysec>summary .n{margin-left:auto}
.paysec-body{padding:0 12px 12px}
.paysec-body>.terms:first-child{margin-top:0}

/* A person's name is a button: their timesheet for the run's week (payroll.js
   openWeekSheet). Reads as the bold name it replaced, dotted underline. */
.paywho{appearance:none;background:none;border:0;margin:0;padding:0 2px;font:inherit;font-weight:600;color:var(--ink);
  text-align:left;cursor:pointer;min-height:34px;display:inline-flex;align-items:center;
  text-decoration:underline dotted var(--ink3);text-underline-offset:3px}
.paywho:hover{color:var(--accent);text-decoration-color:var(--accent)}
.paywho:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.payweek-scrim{z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.payweek{border-radius:14px;max-width:560px;width:100%;margin:0;padding:16px;max-height:88vh;overflow-y:auto}
.payweek h3{font-size:16px;margin:2px 0 4px}
.payweek-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.payweek-sub{font-size:12.5px;margin:0 0 8px}
.payweek-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.payweek-tbl{border:0;font-size:12.5px;width:100%}
.payweek-shift{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:baseline;margin-top:4px}
.payweek-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-top:12px}

/* The W-2 stubs' range picker (payroll.js openW2Stubs): a panel in the papers'
   own bar over the dark backdrop, hidden in print with the bar. */
.stubrange{flex:1 1 100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:12px;
  display:flex;flex-direction:column;gap:8px;font-size:13px;min-width:0}
.stubrange label{margin:0 0 4px}
.stubrange input[type=date]{margin:0;padding:7px 8px;min-height:36px}
.stubrange select{margin:0;padding:7px 8px;min-height:36px;width:100%}
.stubrange-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.stubrange-picks{display:flex;gap:6px;flex-wrap:wrap}
.stubrange .fchip{min-height:34px}
.stubrange-hint{font-size:12px;margin:0;color:var(--ink2)}
.stubrange-err{color:var(--clay);font-weight:600}
.stubrange-err:empty,.stubrange-warn:empty,.stubrange-left:empty{display:none}
.stubrange-sum{line-height:1.45}
.stubrange-warn{color:var(--ink);line-height:1.45;border-left:3px solid var(--warn);padding-left:8px}
.stubrange-left{color:var(--ink2);font-size:12.5px;line-height:1.45;display:flex;flex-direction:column;gap:4px}

/* The no-hours check under the run bar (migration 258): who has W-2 or 1099
   set and no hours in this closed week, each with "Checked with them". */
.paynohours{border:1px solid var(--warn);border-radius:var(--r);background:var(--surface);color:var(--ink);padding:10px 12px;margin:0 0 10px;
  display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.paynohours.done{border-color:var(--line)}
.paynohours>b{font-size:13px}
.paynohours .hint{margin:0;font-size:12px}
.paynohours-row{display:flex;gap:4px 10px;align-items:center;flex-wrap:wrap}
.paynohours-row .btn{margin-left:auto}

@media (pointer:coarse){
  .paywho,.payweek .btn{min-height:44px;min-width:44px}
  .stubrange .fchip,.stubrange input[type=date],.stubrange select,#stubwrap .stubbar .btn{min-height:44px;min-width:44px}
  #exp-pay .fchip,#exp-pay .btn.sm,.paysec>summary,.paymore>summary{min-height:44px;min-width:44px}
  #exp-pay input,#exp-pay select{min-height:44px}
  #exp-pay input[type=checkbox]{min-height:24px;min-width:24px}
  .payauto-sw{min-height:44px}
  .payadv input{min-width:88px}
}
@media (max-width:720px){
  .paybar{position:static}
  .payrun{max-height:none}
}
/* A phone: the person picker on its own row, the two pay dates side by side under it. */
@media (max-width:560px){
  .stubrange-dates{grid-template-columns:1fr 1fr}
  .stubrange-who{grid-column:1 / -1}
}