/* ============================================================================
   Pulse HR › Payroll — the native tile (2026-08-14, Peter-approved mock v2).
   Design canon: Cormorant display · Jost body · JBMono tracked caps (letters
   only) · Inter tabular for EVERY digit. Cream field, card rows, fixed-track
   grid with right-justified numerics. Desktop-first (a real screen width);
   below 1200px the sheet h-scrolls (sticky stays on the app scroll ≥1200 —
   the Time Sheets accruals lesson).
   ========================================================================== */

#sv-payroll{ padding-bottom:90px; }

/* Everything above the district sections LOCKS on scroll (Peter's ruling). */
.pay-sticky{ position:sticky; top:0; z-index:40; background:#fdf8f3;
  box-shadow:0 6px 14px -12px rgba(58,46,36,.35); padding-top:2px; }

.pay-head{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin:10px 0 8px; flex-wrap:wrap; }
.pay-perline{ font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.22em; color:#9a7b5a; text-transform:uppercase; }
.pay-perline .num{ font-family:'Inter',sans-serif; font-weight:600; color:#6e5a47;
  letter-spacing:.1em; font-variant-numeric:lining-nums tabular-nums; }
.pay-perline .ok{ color:#2d9a4a; }
/* FINAL PAY PERIOD REVIEW — a state line, deliberately NOT a button (Peter). */
.pay-state{ font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.24em; color:#b8862e; text-transform:uppercase; }
.pay-state.paid{ color:#2d9a4a; }
.pay-btn{ font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
  border:1px solid #d4bfa8; background:#fffcf8; color:#4a2c17; border-radius:11px;
  padding:8px 16px; cursor:pointer; }
.pay-btn:disabled{ opacity:.5; cursor:default; }
/* Approve — same size as its neighbors (Peter), filled to read as primary. */
.pay-btn.approve{ background:#4a2c17; border-color:#4a2c17; color:#f5ead9; }
.pay-btn.approve.armed{ background:#7a2e2e; border-color:#7a2e2e; }

.pay-cols{ display:grid; column-gap:6px; align-items:center;
  grid-template-columns:215px 64px 74px 58px 96px 82px 84px 84px 100px 88px 84px 100px 108px 88px 46px 92px 62px; }
.pay-thead{ padding:7px 14px 9px; border-bottom:1px solid #e8ddd0; }
.pay-thead span{ font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:600;
  letter-spacing:.14em; color:#9a7b5a; text-align:right; line-height:1.5; text-transform:uppercase; }
.pay-thead span:first-child{ text-align:left; }
.pay-thead .grp{ color:#b8862e; }
.pay-thead .lvh{ text-align:left; padding-left:14px; }

.pay-sect{ font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.3em; color:#8a6940; margin:18px 0 7px; padding-left:4px; text-transform:uppercase; }
.pay-row{ background:#fffcf8; border:1px solid #e8ddd0; border-radius:12px;
  padding:8px 14px; margin-bottom:6px; }
.pay-ecell{ min-width:0; }
.pay-nm{ font-family:'Jost',sans-serif; font-size:13.5px; font-weight:500; color:#3a2e24;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pay-nm.sm{ font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600;
  letter-spacing:.2em; color:#9a7b5a; text-transform:uppercase; }
.pay-tt{ font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:.13em;
  color:#b8a898; margin-top:2px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; text-transform:uppercase; }
.pay-chip{ font-family:'JetBrains Mono',monospace; font-size:7.5px; font-weight:600;
  letter-spacing:.12em; border:1px solid #e0c78f; color:#b8862e; border-radius:999px;
  padding:1px 6px; margin-left:6px; vertical-align:2px; }
.pay-chip.warn{ border-color:#d9a0a0; color:#a04545; }

.pay-n{ font-family:'Inter',sans-serif; font-size:12px; color:#4a2c17; text-align:right;
  font-variant-numeric:lining-nums tabular-nums; }
.pay-n.b{ font-weight:600; color:#3a2e24; }
.pay-n.dim{ color:#c9b8a5; }
.pay-n.ac b{ font-weight:600; color:#3a2e24; font-style:normal; }
.pay-n.ac i{ font-style:normal; color:#c9b8a5; padding:0 3px; }

.pay-binp{ justify-self:end; font-family:'Inter',sans-serif; font-size:12px; text-align:right;
  border:1px solid #e0d2bf; background:#fff; border-radius:8px; padding:5px 8px;
  width:76px; color:#3a2e24; font-variant-numeric:lining-nums tabular-nums; }
.pay-binp.edited{ border-color:#b8862e; }
.pay-binp:disabled{ background:transparent; border-color:transparent; color:#4a2c17; }

/* The bonus cell is a BUTTON now (2026-09-01, OSB-0032) — a bonus has a reason
   as well as an amount, and a 76px cell can hold a number but never a reason.
   It wears .pay-binp so the column does not move by a pixel; only what happens
   on click changed. */
button.pay-binp{ cursor:pointer; line-height:normal; }
button.pay-binp:hover:not(:disabled){ border-color:#b8862e; }
button.pay-binp.empty{ color:#c9b8a5; }
button.pay-binp:disabled{ cursor:default; }

.pay-bn-note{ font-family:'Jost',sans-serif; font-size:12px; color:#6e5a3f; line-height:1.45; margin:0 0 6px; }
.pay-bn-row{ display:grid; grid-template-columns:1fr 92px 26px; gap:8px; align-items:center; margin-top:8px; }
.pay-bn-row input{ width:100%; font-family:'Jost',sans-serif; font-size:13.5px; color:#3a2e24;
  border:1px solid #e0d2bf; background:#fff; border-radius:9px; padding:8px 10px; }
.pay-bn-row input.amt{ font-family:'Inter',sans-serif; font-size:12.5px; text-align:right;
  font-variant-numeric:lining-nums tabular-nums; }
.pay-bn-row .x{ background:none; border:none; color:#9a7b5a; font-size:15px; line-height:1; cursor:pointer; padding:4px; }
.pay-bn-row .x:hover{ color:#3d2417; }
.pay-bn-tot{ display:flex; justify-content:flex-end; align-items:baseline; gap:10px; margin-top:14px;
  font-family:'JetBrains Mono',monospace; font-size:8.5px; font-weight:600; letter-spacing:.18em;
  color:#9a7b5a; text-transform:uppercase; }
.pay-bn-tot .pay-n{ font-size:15px; }
#pay-bn-add{ margin-top:10px; }

.pay-lvcol{ padding-left:14px; }
.pay-lv{ font-family:'JetBrains Mono',monospace; font-size:8.5px; font-weight:500;
  letter-spacing:.06em; color:#8a6940; white-space:nowrap; }
.pay-lv .num{ font-family:'Inter',sans-serif; font-variant-numeric:lining-nums tabular-nums; }

.pay-row.subtot{ background:transparent; border-style:dashed; border-color:#e0d2bf; }
.pay-row.subtot .pay-n{ font-size:11px; color:#8a6940; }

.pay-grand{ background:#3a2e24; border-radius:12px; padding:12px 14px; margin-top:14px; }
.pay-grand .glbl{ font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600;
  letter-spacing:.24em; color:#e0c78f; text-transform:uppercase; }
.pay-grand .pay-n{ color:#f5ead9; }
.pay-grand .pay-n.b{ color:#fff; font-weight:700; font-size:12.5px; }

.pay-foot{ display:flex; align-items:center; justify-content:space-between;
  margin-top:18px; gap:18px; flex-wrap:wrap; }
.pay-honesty{ font-family:'Jost',sans-serif; font-size:12px; color:#9a7b5a; max-width:660px; }
.pay-actions{ display:flex; gap:10px; align-items:center; }
.pay-msg{ font-family:'Jost',sans-serif; font-size:12.5px; color:#8a6940; margin-top:8px; min-height:16px; }

/* Prior Pay Periods + Email — canon §11 sheet */
.pay-scrim{ position:fixed; inset:0; background:rgba(43,31,22,.38); z-index:60;
  display:none; align-items:center; justify-content:center; }
.pay-scrim.open{ display:flex; }
.pay-sheet{ width:430px; max-width:92vw; max-height:80vh; overflow:auto;
  background:#fffcf8; border:1px solid #e8ddd0; border-radius:20px; padding:22px 22px 18px; }
.pay-sheet h3{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:24px;
  color:#3a2e24; margin:0 0 12px; }
.pay-sheet label{ display:block; font-family:'JetBrains Mono',monospace; font-size:8.5px;
  font-weight:600; letter-spacing:.18em; color:#9a7b5a; text-transform:uppercase; margin:12px 0 4px; }
.pay-sheet input[type=text], .pay-sheet input[type=email], .pay-sheet textarea{
  width:100%; font-family:'Jost',sans-serif; font-size:13.5px; color:#3a2e24;
  border:1px solid #e0d2bf; background:#fff; border-radius:9px; padding:8px 10px; }
.pay-sheet .rowend{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.pay-prior-row{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  border:1px solid #e8ddd0; border-radius:11px; background:#fffcf8; padding:9px 12px;
  margin-bottom:7px; cursor:pointer; }
.pay-prior-row .per{ font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; color:#3a2e24;
  font-variant-numeric:lining-nums tabular-nums; }
.pay-prior-row .st{ font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:600;
  letter-spacing:.16em; color:#8a6940; text-transform:uppercase; }
.pay-prior-row .st.paid{ color:#2d9a4a; }
.pay-prior-row .gr{ font-family:'Inter',sans-serif; font-size:12px; color:#4a2c17;
  font-variant-numeric:lining-nums tabular-nums; }

/* Below the desktop canvas: horizontal scroll wrapper takes over; sticky off
   (position:sticky cannot survive an overflow ancestor — accepted, this is an
   admin desktop surface). */
@media (max-width:1199px){
  .pay-sticky{ position:static; box-shadow:none; }
  #sv-payroll .pay-scroll{ overflow-x:auto; }
  #sv-payroll .pay-scroll > *{ min-width:1590px; }
}