/* V1.44 (the owner, 2026-11-02), Management > Pay: the one table "Hours paid in the pay system" (PayPaidPanel: the hours
   logged, paid and their difference per week, the totals, the copy buttons, the workers not on the payroll), the Wagepoint
   file (WagepointDialog), Pay > Wagepoint (PayWagepointPage) and the copy confirmation (PayCopyDialog). The older Pay
   styles are in management.css (.pay-*, moved out of app.css in wave 0.4); this file is linked after it (Components\App.razor). Theme variables only: light and
   dark both work. */

/* ----- The table of the hours (logged | paid | difference, twice, then the totals) ----- */
.pay-hours-table th.pay-total, .pay-hours-table td.pay-total { background: var(--panel-2); color: var(--text); font-weight: 900; }
.pay-hours-table tfoot td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 900; }
.pay-hours-table td.pay-paid-cell { vertical-align: top; }
.pay-hours-table .pay-by { display: block; margin-top: 2px; color: var(--muted); font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.pay-hours-table .pay-copy-cell { width: 36px; text-align: center; }
.pay-hours-table .pay-others-head td { padding-top: 14px; border-top: 2px solid var(--border); background: transparent; }
.pay-hours-table .pay-others-head .mg-link { margin-left: 8px; }
.pay-print-only { display: none; }

/* ----- Pay > Wagepoint ----- */
.wp-intro { margin-bottom: 8px; }
.wp-file { font-size: 0.95rem; word-break: break-all; }
.wp-small { font-size: 0.86rem; }
.wp-busy { margin-top: 8px; }
.wp-columns label { display: inline-flex; align-items: center; gap: 6px; }
.wp-select { min-width: 180px; max-width: 320px; }
.wp-preview { margin-top: 10px; }
.wp-preview table td { padding: 4px 8px; border: 1px solid var(--rule); font-size: 0.8rem; white-space: nowrap; }
.wp-preview tr.wp-header td { background: var(--panel-2); font-weight: 800; }
.wp-preview tr.wp-before td { color: var(--faint); }
.wp-preview td.wp-rownum { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.wp-preview td.wp-id { background: var(--accent-soft); }
.wp-preview td.wp-hours { background: var(--good-soft); color: var(--good-text); font-weight: 700; }
.wp-employees .wp-id-input { width: 220px; max-width: 100%; }

/* ----- The Wagepoint file (preview) and the copy confirmation ----- */
.wp-choice { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wp-table td small { font-size: 0.68rem; }
.wp-src { margin-left: 4px; padding: 0 6px; border-radius: 999px; font-weight: 700; }
.wp-src.paid { background: var(--good-soft); color: var(--good-text); }
.wp-src.logged { background: var(--warn-soft); color: var(--warn); }
.wp-table th small { display: block; margin-top: 2px; font-size: 0.68rem; font-weight: 600; text-transform: none; }
.wp-logged { display: block; font-size: 0.7rem; }
.wp-warnings { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wp-warnings li { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 0.86rem; }
.wp-warnings li .mud-icon-root { flex: 0 0 auto; margin-top: 1px; }
.wp-warnings li.wp-warn { background: var(--warn-soft); color: var(--warn); }
.wp-warnings li.wp-bad { background: var(--bad-soft); color: var(--bad); font-weight: 700; }

@media (max-width: 640px) {
  /* The table: one card per employee (app.css .pay-paid-table), the total row too; the days, the heading of the workers
     not on the payroll across the card; the empty cells of those workers hidden */
  .pay-hours-table tfoot { display: block; }
  .pay-hours-table tr.pay-days-row td, .pay-hours-table tr.pay-others-head td { grid-column: 1 / -1; }
  .pay-hours-table td.pay-blank { display: none; }
  .pay-hours-table td.pay-total { background: transparent; }
  .pay-hours-table .pay-copy-cell { width: auto; align-items: flex-end; }
  .pay-hours-table .pay-by { white-space: normal; }
  .wp-select { min-width: 0; width: 100%; }
  .wp-columns label { flex: 1 1 100%; }
}

@media print {
  .pay-print-only { display: inline; }
  .pay-hours-table .pay-by { display: none; }
}