/* Payroll page (payroll.js) — week review table + punch details popup.
   Additive; delete with payroll.js to revert. Color vocabulary matches the
   Time Clock review rows: green = payroll approved, blue = supervisor approved,
   amber = waiting, red = flagged / rejected, grey = still on the clock. */
.pay-wrap { gap: 14px; }
.pay-card { padding: 16px 18px; }
.pay-toolbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.pay-shortcuts { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-week { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line, #e3e6ea); background: #fff; cursor: pointer;
  font: inherit; color: var(--text, #1b1f24); text-align: left; }
.pay-week:hover { border-color: var(--amber); }
.pay-week.active { background: #fff4e0; border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.pay-week__k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: #777; }
.pay-week__d { font-size: 15px; font-weight: 600; }
.pay-week__p { font-size: 11.5px; color: #2e7d32; font-weight: 600; }
.pay-range { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.pay-range input[type="date"] { height: 34px; padding: 0 8px; border: 1px solid var(--line, #e3e6ea); border-radius: 6px; font: inherit; }
.pay-range__to { color: #777; }
.pay-step { min-width: 34px; padding: 0 10px; font-size: 18px; line-height: 1; }
.pay-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
/* send the week to payroll (Rob, 2026-10-02) */
.pay-send { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pay-send-btn { background: #1f5f2a; border-color: #1f5f2a; color: #fff; font-weight: 600; }
.pay-send-btn:hover { background: #17501f; }
.pay-send-btn:disabled { opacity: .6; cursor: default; }
.pay-send__hint { font-size: 11.5px; color: #777; max-width: 300px; }

.pay-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pay-chip.s-pay  { background: #e8f5e9; color: #2e7d32; border-color: #bfe3c2; }
.pay-chip.s-sup  { background: #e7f0fe; color: #1a56b0; border-color: #c3d8f7; }
.pay-chip.s-wait { background: #fff4e0; color: #8a5a00; border-color: #f0d9ab; }
.pay-chip.s-flag { background: #fdecea; color: #b3261e; border-color: #f5c0bc; }
.pay-chip.s-open { background: #f2f2f2; color: #666; border-color: #e2e2e2; }

.pay-summary { margin: 10px 0 6px; }
.pay-totals { font-size: 13.5px; color: #444; margin-bottom: 8px; }
.pay-people { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-person { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 7px 12px; border: 1px solid #ece8e0; border-radius: 10px; background: #fcfbf8; min-width: 190px; }
.pay-person.ready { border-color: #bfe3c2; background: #f3faf3; }
.pay-person__name { font-weight: 600; font-size: 13px; }
.pay-person__hrs { font-variant-numeric: tabular-nums; font-size: 13px; color: #333; }
.pay-person__dots { grid-column: 1 / -1; display: flex; gap: 4px; }
.pay-dot { display: inline-block; min-width: 18px; text-align: center; padding: 0 5px; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 18px; }
.pay-dot.s-pay  { background: #2e7d32; color: #fff; }
.pay-dot.s-sup  { background: #1a56b0; color: #fff; }
.pay-dot.s-wait { background: #e0a030; color: #fff; }
.pay-dot.s-flag { background: #c0392b; color: #fff; }
.pay-dot.s-open { background: #9aa0a6; color: #fff; }

.pay-table { margin-top: 8px; }
.pay-table th:first-child, .pay-table td:first-child { padding-left: 12px; }
.pay-row td { border-left: 0; }
.pay-row td:first-child { border-left: 4px solid transparent; }
.pay-row.s-pay  { background: #f1f9f1; } .pay-row.s-pay  td:first-child { border-left-color: #2e7d32; }
.pay-row.s-sup  { background: #eef4fd; } .pay-row.s-sup  td:first-child { border-left-color: #1a56b0; }
.pay-row.s-wait { background: #fffaf0; } .pay-row.s-wait td:first-child { border-left-color: #e0a030; }
.pay-row.s-flag { background: #fdf0ee; } .pay-row.s-flag td:first-child { border-left-color: #c0392b; }
.pay-row.s-open { background: #f7f7f7; } .pay-row.s-open td:first-child { border-left-color: #9aa0a6; }
.pay-row:hover td { filter: brightness(.97); }
.pay-phase { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #eef0f2; color: #5b6572; font-size: 11px; }
.pay-live { color: #777; font-style: italic; }
.pay-flagn { color: #b3261e; font-weight: 700; font-size: 12px; margin-left: 4px; cursor: help; }
.pay-subtotal td { background: #faf8f3; font-weight: 600; font-size: 12.5px; color: #555; border-top: 1px solid #e8e2d6; }
.pay-grand td { background: #f3efe6; font-weight: 700; font-size: 13px; border-top: 2px solid #d9cfbb; }
.pay-dec { font-weight: 400; color: #777; font-size: 12px; }
.pay-details { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid #d9b25e; background: #fff8e8; color: #6b4a00; white-space: nowrap; }
.pay-details:hover { background: #ffefcf; }
.pay-details--quiet { border-color: #e3e6ea; background: #fff; color: #777; }
.pay-details--quiet:hover { background: #f5f5f5; }

/* tabs (Review | Run payroll) */
.pay-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #e3e6ea); margin: 0 0 12px; }
.pay-tab { font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: #666; cursor: pointer; margin-bottom: -1px; }
.pay-tab:hover { color: #222; }
.pay-tab.active { color: #1a1a1a; border-bottom-color: #c9a227; }

/* week actions + result line */
.pay-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pay-act { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid #c8d6c8; background: #f1f8f1; color: #1f5f2a; white-space: nowrap; }
.pay-act:hover { background: #e3f1e3; }
.pay-act--pay { border-color: #b8cde6; background: #eef4fb; color: #1b4a7a; }
.pay-act--pay:hover { background: #dfeafa; }
.pay-act--override { border-color: #e0b4ae; background: #fdf0ee; color: #8a2a21; }
.pay-act--override:hover { background: #f9e1dd; }
.pay-msg { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: #f5f5f5; border: 1px solid #e3e6ea; color: #333; }
.pay-msg.ok { background: #eef7ee; border-color: #c8d6c8; }
.pay-msg.warn { background: #fff7e6; border-color: #e8d4a2; }
.pay-msg.err { background: #fdf0ee; border-color: #e0b4ae; color: #8a2a21; }

.pay-run-title { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #777; margin: 6px 0 -6px 2px; }
#payroll-run-host .pr-head h2 { font-size: 18px; }

/* popup */
.pay-modal-scrim { z-index: 120; }
.pay-modal { max-width: 640px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 0; }
.pay-modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line, #e3e6ea); }
.pay-modal__bar h3 { margin: 0; font-size: 16px; }
.pay-modal__body { padding: 14px 18px 18px; overflow: auto; font-size: 13.5px; line-height: 1.5; }
.pay-modal__sum { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #faf8f3; margin-bottom: 10px; }
.pay-modal__h { margin: 14px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: #777; }
.pay-note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--amber); background: #fffaf0; border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.pay-none { margin: 0; color: #888; font-style: italic; }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pay-hist { padding: 8px 12px; border: 1px solid #ece8e0; border-radius: 8px; background: #fff; }
.pay-hist.resolved { opacity: .7; }
.pay-hist__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.pay-hist__who { color: #777; font-size: 12px; }
.pay-hist__why { margin-top: 2px; color: #333; }
.pay-change { margin-top: 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pay-change__f { display: inline-block; min-width: 80px; color: #777; }
.pay-change__v { padding: 0 6px; border-radius: 4px; background: #fdecea; color: #8a2a22; text-decoration: line-through; }
.pay-change__v.new { background: #e8f5e9; color: #2e7d32; text-decoration: none; }

@media (max-width: 760px) {
  .pay-table th:nth-child(6), .pay-table td:nth-child(6) { display: none; }
  /* payroll_run.css hides column 2 of every .pr-table on phones; here column 2 is the Day, keep it */
  .pay-table th:nth-child(2), .pay-table td:nth-child(2) { display: table-cell; white-space: nowrap; }
  .pay-week { min-width: 0; flex: 1; }
}