/* =========================================================
   PayShield — payroll verification (assets/payshield.js)
   Colour carries meaning here, and is never the only signal:
   green matched, yellow noted, amber judgement call, red financial exposure.
   ========================================================= */
/* The palette is set on PayShield's panel and on its dialogs (.ps-modal is the dialog backdrop, outside .ps). */
.ps, .ps-modal {
  /* Severity palette, retuned 2026-09-25 for the Electric Blue theme. Every text pair is at least 4.5:1 (on white and on
     its own tint), every colour carries its word too (RED / AMBER / YELLOW / GREEN / HARD), and edges stay light on purpose:
     they are decoration around labelled boxes. HARD is the dark #7F1D1D below. */
  --ps-red: #B91C1C; --ps-red-bg: #FEE2E2; --ps-red-border: #F87171;
  --ps-amber: #C2410C; --ps-amber-bg: #FFEDD5; --ps-amber-border: #FB923C;
  --ps-yellow: #806600; --ps-yellow-bg: #FEF9C3; --ps-yellow-border: #EAB308;
  --ps-green: #15803D; --ps-green-bg: #DCFCE7; --ps-green-border: #22C55E;
  --ps-grey: #475569; --ps-grey-bg: #F1F5F9; --ps-ink: var(--text-primary);
  --ps-hard: #7F1D1D; --ps-hard-bg: #FECACA;
  /* Banner text: the darkest shade of each severity, on its tint. */
  --ps-red-deep: #7F1D1D; --ps-amber-deep: #7C2D12; --ps-yellow-deep: #5C4700; --ps-green-deep: #14532D;
  color: var(--ps-ink);
}
.ps .ps-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: none; padding: 18px 20px; margin-bottom: 16px; }
.ps .ps-card h3 { margin: 0 0 4px 0; font-size: 17px; }
.ps .ps-sub { color: var(--text-muted); font-size: 13px; }
.ps .ps-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ps .ps-spacer { flex: 1; }
.ps .ps-hidden { display: none !important; }

/* ---- Client picker (batch 4, 27 Sep 2026) ----
   The red "Client Gate" box is gone: PayShield opens on Smarter Reviews' picker (clientPickerHTML in index.html), styled
   by desk's own card / field rules. Only a Recently Visited row's right-hand side is PayShield's: the date it was last
   opened and, once audit work has started on the client's latest run, that run's status pill. */
.ps-picker .ps-recent-meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
.ps-picker .ps-recent-date { font-size: 12.5px; }
.ps-picker .ps-recent-status { font-size: 12px; }

/* ---- App bar (dark navy: shield, wordmark, subtitle, the signed-in user) ----
   Batch 3 (26 Sep 2026): not shown -- desk's top menu bar now says who is signed in and (the aqua underline on the
   current section) where you are, so every module's own header band went. psAppBar still fills it; nothing reads it. */
.ps-appbar { display: none !important; }

/* ---- Client row and the four top-level tabs ----
   Everything in this row starts at the same top edge. The client strip, "Change client" and the inactive tabs are
   34px tall, so a 10px gap shows under them. The active tab is 44px -- the extra 10px added at the bottom -- with a
   flat bottom, so it runs straight into the panel below: one continuous blue outline, no seam. */
/* Theme: the panel blue is the button blue (#1769E0, 5.1:1 under white text), because the active top tab runs straight
   into the sub-tab bar and the two must match. */
.ps, .ps-modal { --pm-blue: var(--brand-blue-button); --pm-blue-dark: var(--brand-blue-active); --pm-blue-light: var(--brand-sky); --pm-grey: var(--neutral); }
/* Five top tabs (Payroll Runs, 24 Sep 2026): they never shrink (equal widths need their full width); when the client
   row and the tabs don't fit on one line (1366px with the desk sidebar and a long client name) the tabs wrap onto their
   own line, still right-aligned and still the last thing above the panel, so the active tab keeps flowing into it. */
.ps-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ps-context { display: flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--ps-red); border-radius: 8px; padding: 0 14px 0 12px; white-space: nowrap; flex: 0 0 auto; }
.ps-context .ps-label, .ps-context .ps-client { color: var(--error-text); font-weight: 800; font-size: 15px; font-family: 'Manrope', 'Inter', sans-serif; white-space: nowrap; }
.ps-change-client { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: none; border-radius: 999px; background: var(--pm-grey); color: var(--text-on-blue); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.ps-change-client:hover { filter: brightness(.92); }
/* Batch 4: Save, beside Change client once Payroll Audit work has started -- the same size, in the button blue. */
.ps-save-all { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: none; border-radius: 999px; background: var(--brand-blue-button); color: var(--text-on-blue); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.ps-save-all:hover { filter: brightness(.92); }
.ps-save-all:disabled { cursor: default; opacity: .7; }
.ps-toptabs { margin-left: auto; flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: start; }
.ps-toptabs button { height: 34px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; border: 2px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--brand-blue-active); font-weight: 800; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); }
.ps-toptabs button:hover { background: var(--surface-hover); border-color: var(--brand-blue); }
.ps-toptabs button.active { height: 44px; background: var(--pm-blue); color: var(--text-on-blue); border-color: var(--pm-blue); border-bottom: none; border-radius: 8px 8px 0 0; cursor: default; }
/* Aqua accent on the selected top tab: along its top edge, since its bottom runs into the panel (drawn inside: no size change). */
.ps-toptabs button.active { box-shadow: inset 0 3px 0 var(--brand-aqua); }
/* Batch 3 (26 Sep 2026): no outer blue frame around the panel (the workspace runs edge to edge); the blue sub-tab bar
   inside it stays, and the active top tab still runs straight into it. The frame's colour is kept (at zero width) as
   the panel's colour of record. */
.ps-toppanel { border: 0 solid var(--pm-blue); border-radius: 0; background: var(--surface); }
.ps-toppanel.ps-flush-right { border-top-right-radius: 0; }
.ps-toppanel > .ps-subbar:first-child { border-radius: 8px 8px 0 0; }
.ps-toppanel.ps-flush-right > .ps-subbar:first-child { border-top-right-radius: 0; }
.ps-subbar { background: var(--pm-blue); padding: 10px 12px; }
.ps-panel-body { padding: 16px; }
/* Sub-tab chips inside the blue panel: equal width, sized to the longest label in the row. */
.ps-chips { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; max-width: 100%; }
.ps-chips button { height: 34px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; background: var(--pm-blue-light); color: var(--pm-blue-dark); font-weight: 800; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.ps-chips button:hover:not(:disabled) { background: var(--surface); }
.ps-chips button.active { background: var(--surface); color: var(--brand-navy); border-color: var(--surface); box-shadow: 0 0 0 2px var(--brand-blue-active) inset; }
/* The usual blue focus ring would vanish against the blue bar. */
.ps-chips button:focus-visible { outline-color: var(--surface); }
/* Finished chip: a darker green, since the severity green is 4.2:1 on the chip colour. */
.ps-chips button.done:not(.active) { color: var(--success-text); }
.ps-chips button:disabled { opacity: .55; cursor: not-allowed; }
.ps-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 700; border: 1.5px solid currentColor; background: var(--surface); white-space: nowrap; }
.ps-pill.red { color: var(--ps-red); background: var(--ps-red-bg); }
.ps-pill.amber { color: var(--ps-amber); background: var(--ps-amber-bg); }
.ps-pill.yellow { color: var(--ps-yellow); background: var(--ps-yellow-bg); }
.ps-pill.green { color: var(--ps-green); background: var(--ps-green-bg); }
.ps-pill.blue { color: var(--info-text); background: var(--info-bg); }
.ps-pill.grey { color: var(--ps-grey); background: var(--ps-grey-bg); }

/* ---- Buttons ---- */
.ps .btn.ps-go { background: var(--ps-red); border-color: var(--ps-red); color: var(--text-on-blue); }
.ps .btn.ps-go:hover { filter: brightness(.93); }
.ps .btn.ps-dark { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--text-on-dark); }
.ps .btn.ps-release { background: var(--ps-green); border-color: var(--ps-green); color: var(--text-on-blue); font-weight: 800; }
.ps .btn.ps-release:disabled { background: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); opacity: 1; }
.ps .ps-blocked { color: var(--ps-red); font-weight: 700; font-size: 13px; }

/* ---- Severity rows and panels ---- */
.ps table.ps-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 14px; }
.ps table.ps-table th { text-align: left; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 7px 10px; background: var(--ps-grey-bg); }
.ps table.ps-table td { padding: 8px 10px; background: var(--surface); border-top: 1px solid var(--table-divider); border-bottom: 1px solid var(--table-divider); vertical-align: middle; }
.ps table.ps-table td:first-child { border-left: 1px solid var(--table-divider); }
.ps table.ps-table tr.sev-red td { background: var(--ps-red-bg); }
.ps table.ps-table tr.sev-red td:first-child { border-left: 4px solid var(--ps-red); }
.ps table.ps-table tr.sev-hard td { background: var(--ps-hard-bg); }
.ps table.ps-table tr.sev-hard td:first-child { border-left: 4px solid var(--ps-hard); }
.ps table.ps-table tr.sev-amber td { background: var(--ps-amber-bg); }
.ps table.ps-table tr.sev-amber td:first-child { border-left: 4px solid var(--ps-amber); }
.ps table.ps-table tr.sev-yellow td { background: var(--ps-yellow-bg); }
.ps table.ps-table tr.sev-yellow td:first-child { border-left: 4px solid var(--ps-yellow-border); }
.ps table.ps-table tr.sev-green td { background: var(--ps-green-bg); }
.ps table.ps-table tr.sev-green td:first-child { border-left: 4px solid var(--ps-green-border); }
.ps table.ps-table tr.sev-closed td { opacity: .85; }
/* Excluded rows stay greyed but readable (5.3:1; was 2.4): they are content, not disabled controls. */
.ps table.ps-table tr.ps-excluded td { color: var(--text-secondary); background: var(--disabled-bg); }
.ps table.ps-table td.num, .ps table.ps-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A move outside this employee's band, in Verification Step 2. The row's own colour carries the severity;
   this marks which of the two figures on the row is the one outside it. */
.ps table.ps-table .ps-out { color: var(--ps-red); font-weight: 800; }
.ps .ps-panel-red { border: 2px solid var(--ps-red); background: var(--surface); border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 16px; }
.ps .ps-panel-red h3 { color: var(--ps-red); letter-spacing: .02em; }
.ps .ps-banner { border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 14px; border: 1.5px solid; font-size: 14px; }
.ps .ps-banner.red { border-color: var(--ps-red); background: var(--ps-red-bg); color: var(--ps-red-deep); }
.ps .ps-banner.amber { border-color: var(--ps-amber-border); background: var(--ps-amber-bg); color: var(--ps-amber-deep); }
.ps .ps-banner.yellow { border-color: var(--ps-yellow-border); background: var(--ps-yellow-bg); color: var(--ps-yellow-deep); }
.ps .ps-banner.blue { border-color: var(--border-strong); background: var(--info-bg); color: var(--info-text); }
.ps .ps-banner.green { border-color: var(--ps-green-border); background: var(--ps-green-bg); color: var(--ps-green-deep); }
.ps .ps-banner strong { font-weight: 800; }
.ps .ps-sev { display: inline-block; min-width: 64px; text-align: center; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; border: 1.5px solid currentColor; }
.ps .ps-sev.RED { color: var(--ps-red); background: var(--surface); }
.ps .ps-sev.HARD { color: var(--text-on-dark); background: var(--ps-hard); border-color: var(--ps-hard); }
.ps .ps-sev.AMBER { color: var(--ps-amber); background: var(--surface); }
.ps .ps-sev.YELLOW { color: var(--ps-yellow); background: var(--surface); }
.ps .ps-sev.GREEN { color: var(--ps-green); background: var(--surface); }
.ps .ps-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.ps .ps-legend > div { border: 1.5px solid; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.ps .ps-legend .red { border-color: var(--ps-red-border); background: var(--ps-red-bg); }
.ps .ps-legend .amber { border-color: var(--ps-amber-border); background: var(--ps-amber-bg); }
.ps .ps-legend .yellow { border-color: var(--ps-yellow-border); background: var(--ps-yellow-bg); }
.ps .ps-legend .green { border-color: var(--ps-green-border); background: var(--ps-green-bg); }

/* ---- Attachments ---- */
.ps .ps-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ps .ps-section { border-left: 5px solid var(--brand-blue-button); }
.ps .ps-section.b { border-left-color: var(--ps-amber-border); }
.ps .ps-section.c { border-left-color: var(--ps-green-border); }
.ps .ps-section.d { border-left-color: var(--neutral); }
.ps .ps-filelist { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.ps .ps-file { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; }
.ps .ps-file .ps-file-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ps .ps-file .ps-file-meta { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ps .ps-file .ps-file-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; }
.ps .ps-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ps-green); color: var(--text-on-blue); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps .ps-dot.staged { background: var(--border-strong); }

/* ---- Source review ---- */
.ps .ps-review { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; align-items: start; }
.ps table.ps-source-table { table-layout: fixed; }
.ps table.ps-source-table td, .ps table.ps-source-table th { padding-left: 5px; padding-right: 5px; }
.ps table.ps-source-table select.ps-cell-input { padding: 5px 2px; }
.ps .ps-viewer { position: sticky; top: calc(var(--topnav-h, 0px) + 10px); }   /* below desk's fixed top menu bar */
.ps .ps-viewer-frame { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-hover); height: 70vh; overflow: auto; display: flex; align-items: flex-start; justify-content: center; }
.ps .ps-viewer-frame img { max-width: 100%; transform-origin: top center; }
.ps .ps-viewer-frame iframe { width: 100%; height: 100%; border: none; }
.ps .ps-cell-input { width: 100%; min-width: 60px; padding: 5px 7px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 13.5px; background: var(--surface); }
.ps .ps-cell-input.num { text-align: right; }
.ps .ps-cell-input:disabled { background: transparent; border-color: transparent; color: inherit; }
.ps .ps-tag { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ps .ps-tag.learned { color: var(--brand-blue-button); }
.ps .ps-tag.warn { color: var(--ps-amber); }
.ps .ps-tag.zero { color: var(--ps-yellow); }
.ps .ps-sheet { font-size: 12.5px; border-collapse: collapse; }
.ps .ps-sheet td { border: 1px solid var(--border); padding: 3px 6px; white-space: nowrap; }

/* ---- Modal ---- */
.ps-modal .modal { max-width: 760px; }
.ps-modal textarea { width: 100%; min-height: 96px; padding: 9px 11px; border: 1px solid var(--input-border); border-radius: 8px; font-family: inherit; font-size: 14px; }
.ps-modal .ps-values { background: var(--ps-grey-bg); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin: 10px 0; }
.ps-modal .ps-values div { display: flex; justify-content: space-between; gap: 12px; }
.ps-modal .ps-counter { font-size: 12px; color: var(--text-muted); text-align: right; }
.ps-modal .ps-error { color: var(--ps-red); font-size: 13px; font-weight: 600; margin-top: 6px; }

@media (max-width: 1100px) {
  .ps .ps-sections, .ps .ps-review { grid-template-columns: minmax(0, 1fr); }
  .ps .ps-viewer { position: static; }
  .ps .ps-legend { grid-template-columns: repeat(2, 1fr); }
}
.ps .btn.ps-amber-btn, .ps-modal .btn.ps-amber-btn { background: var(--ps-amber); border-color: var(--ps-amber); color: var(--text-on-blue); }
.ps .btn.ps-amber-btn:hover, .ps-modal .btn.ps-amber-btn:hover { filter: brightness(.93); }
.ps-modal .ps-sev { display:inline-block; min-width:64px; text-align:center; border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:800; border:1.5px solid currentColor; }
.ps-modal .ps-sev.RED { color: var(--ps-red); } .ps-modal .ps-sev.AMBER { color: var(--ps-amber); } .ps-modal .ps-sev.YELLOW { color: var(--ps-yellow); } .ps-modal .ps-sev.HARD { color: var(--text-on-dark); background: var(--ps-hard); border-color: var(--ps-hard); }

/* =========================================================
   Standing rules for the whole of PayShield (Payroll Master rebuild, 2026-09-22; button colours replaced 2026-09-24)
   1. Every button's content is centred both ways.
   4. Add = blue, Cancel = blue, Save = green, Edit = red (pm-add / pm-cancel / ps-save / pm-edit, below).
      Justification for No Email alone is orange (pa-orange).
   5. Every enabled text, number, date and select field: white background, black text.
   ========================================================= */
.ps .btn, .ps-modal .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.ps .btn.ps-save, .ps-modal .btn.ps-save { background: var(--ps-green); border-color: var(--ps-green); color: var(--text-on-blue); }
.ps .btn.ps-save:hover, .ps-modal .btn.ps-save:hover { filter: brightness(.93); }
.ps .btn.ps-save:disabled, .ps-modal .btn.ps-save:disabled { background: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); cursor: not-allowed; }
.ps-modal .btn.ps-go { background: var(--ps-red); border-color: var(--ps-red); color: var(--text-on-blue); }
.ps-modal .btn.ps-go:hover { filter: brightness(.93); }
.ps .btn.ps-go:disabled, .ps-modal .btn.ps-go:disabled { background: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); cursor: not-allowed; }
.ps input[type=text]:not(:disabled), .ps input[type=email]:not(:disabled), .ps input[type=number]:not(:disabled),
.ps input[type=date]:not(:disabled), .ps input:not([type]):not(:disabled), .ps select:not(:disabled), .ps textarea:not(:disabled),
.ps-modal input[type=text]:not(:disabled), .ps-modal input[type=email]:not(:disabled), .ps-modal input[type=number]:not(:disabled),
.ps-modal input[type=date]:not(:disabled), .ps-modal input:not([type]):not(:disabled), .ps-modal select:not(:disabled), .ps-modal textarea:not(:disabled) {
  background-color: #fff; color: #000;
}

/* ---- Payroll Master ---- */
.ps .pm-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ps .pm-toolbar h3 { margin: 0; font-size: 17px; }
.ps .pm-toolbar .ps-spacer { flex: 1; }
/* Batch 3: search beside the tab heading; sortable headings (a small arrow on the sorted one); the import's lists. */
.ps .pm-toolbar .pm-search { width: 220px; max-width: 40vw; padding: 6px 10px; border: 1px solid var(--input-border); border-radius: var(--radius-control); font-size: 13px; background: var(--surface); color: var(--text-primary); }
.ps .pm-toolbar .pm-search:focus { outline: 2px solid var(--brand-blue); outline-offset: 1px; border-color: var(--brand-blue); }
.ps table.pm-table th.pm-sortable { cursor: pointer; user-select: none; }
.ps table.pm-table th.pm-sortable:hover { background: var(--surface-selected); }
.ps table.pm-table th.pm-sorted { color: var(--brand-blue-active); background: var(--surface-selected); }
.ps table.pm-table th .pm-sort-arrow { display: inline-block; margin-left: 3px; font-size: 9px; vertical-align: 1px; }
.ps-modal .pm-import-list { margin-top: 12px; }
.ps-modal .pm-import-list ul { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; font-size: 13px; }
.ps .pm-wrap { overflow-x: auto; }
.ps table.pm-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ps table.pm-table th { font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-blue-active); background: var(--table-header-bg); padding: 7px 6px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border); line-height: 1.25; }
.ps table.pm-table td { padding: 6px; border-bottom: 1px solid var(--table-divider); vertical-align: middle; overflow-wrap: anywhere; }
.ps table.pm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ps table.pm-table td.pm-name { font-weight: 700; }
/* New and changed rows keep their two pale yellows, now derived from the theme's warning tint. */
.ps table.pm-table tr.pm-new td { background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface)); }
.ps table.pm-table tr.pm-changed td { background: color-mix(in srgb, var(--warning-bg) 65%, var(--surface)); }
.ps .pm-conflict { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--warning-text); white-space: normal; cursor: help; }
.ps .pm-cell-input { width: 100%; box-sizing: border-box; padding: 5px 6px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 13px; }
.ps .pm-cell-input.num { text-align: right; }
.ps .pm-cell-input:disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); cursor: not-allowed; }
.ps .pm-cellbtn, .ps-modal .pm-cellbtn { width: 100%; min-height: 30px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-hover); color: var(--pm-blue-dark); font-weight: 700; font-size: 12.5px; line-height: 1.25; cursor: pointer; }
.ps .pm-cellbtn:hover:not(:disabled) { background: var(--surface-selected); }
.ps .pm-cellbtn:disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); cursor: not-allowed; }
.ps .pm-cellbtn .pm-upcoming { display: block; font-weight: 600; color: var(--ps-amber); font-size: 11.5px; }
.ps .pm-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; }
.ps .pm-x:hover { color: var(--ps-red); }
.ps .pm-note { color: var(--text-muted); font-size: 12.5px; margin-top: 10px; }
.ps .pm-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.ps .pm-unsaved { color: var(--ps-amber); font-weight: 700; font-size: 13px; }
.ps .pm-error { color: var(--ps-red); font-weight: 700; font-size: 13px; }
.ps .pm-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; margin-bottom: 16px; background: var(--surface); }
.ps .pm-card h4 { margin: 0; font-size: 15.5px; }
.ps .pm-empty { text-align: center; color: var(--text-muted); padding: 36px 12px; font-size: 14px; }
.ps .pm-source-select { min-width: 260px; padding: 8px 10px; border: 1.5px solid var(--input-border); border-radius: 6px; background: #fff; color: #000; font-size: 14px; }
.ps .pm-source-label { font-weight: 800; font-size: 12.5px; letter-spacing: .05em; color: var(--text-primary); }
.ps .pm-email-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; max-width: 560px; }
.ps .pm-email-row .pm-idx { width: 22px; text-align: right; color: var(--text-muted); font-size: 12.5px; }
.ps .pm-email-row input { flex: 1; padding: 7px 9px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 13.5px; }
.ps .pm-slot { display: grid; grid-template-columns: repeat(3, minmax(130px, 170px)) minmax(0, 1fr) auto; gap: 10px; align-items: end; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.ps .pm-slot label { display: block; font-size: 11.5px; font-weight: 700; color: var(--neutral-text); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .03em; }
.ps .pm-slot .pm-slot-file { min-width: 0; }
.ps .pm-slot .pm-slot-status { font-size: 12.5px; margin-top: 3px; }
.ps .pm-slot.pm-slot-error { border-color: var(--ps-red-border); background: var(--ps-red-bg); }
/* Payroll Reports upload rows: report type, file, Upload / remove. */
.ps .pm-slot.pm-upload-row { grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) auto; background: var(--surface-hover); border-color: var(--border); }
.ps .pm-upload-row .pm-select { width: 100%; padding: 7px 9px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 13.5px; background: #fff; }
.ps .pm-fixed { font-weight: 700; }
.ps .pm-date, .ps-modal .pm-date { cursor: pointer; }

/* Payroll Master dialogs: at least three quarters of the viewport, near full width, no scrolling for the columns. */
.ps-modal.pm-dialog { padding: 14px; }
.ps-modal.pm-dialog .modal { max-width: none; width: calc(100vw - 28px); min-height: 75vh; max-height: calc(100vh - 28px); display: flex; flex-direction: column; overflow: hidden; }
.ps-modal.pm-dialog .modal-body { flex: 1; overflow-y: auto; }
.ps-modal.pm-dialog table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.ps-modal.pm-dialog th { text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--brand-blue-active); background: var(--table-header-bg); padding: 8px 6px; border-bottom: 1px solid var(--border); }
.ps-modal.pm-dialog td { padding: 6px; border-bottom: 1px solid var(--table-divider); vertical-align: middle; overflow-wrap: anywhere; }
.ps-modal.pm-dialog td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-modal.pm-dialog tr.pm-entry td { background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface)); }
/* Lapsed rows stay greyed but readable (5.3:1; was 2.4). */
.ps-modal.pm-dialog tr.pm-lapsed td { color: var(--text-secondary); background: var(--disabled-bg); }
.ps-modal.pm-dialog tr.pm-editing td { background: var(--surface-selected); }
.ps-modal.pm-dialog .pm-cell-input { width: 100%; box-sizing: border-box; padding: 6px 7px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 13px; }
.ps-modal.pm-dialog .pm-cell-input.num { text-align: right; }
.ps-modal.pm-dialog .pm-ro { color: var(--neutral-text); font-size: 12.5px; }
.ps-modal.pm-dialog .pm-note { color: var(--text-muted); font-size: 12.5px; margin-top: 10px; }
.ps-modal.pm-dialog .pm-ineffect { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; color: var(--ps-green); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; }
.ps-modal.pm-dialog .pm-edit-btn { min-width: 64px; }
.ps-modal.pm-dialog .modal-footer { justify-content: space-between; align-items: center; gap: 16px; }
.ps-modal.pm-dialog .modal-footer .btn { white-space: nowrap; flex-shrink: 0; }
.ps .btn, .ps-modal .btn { white-space: nowrap; }

/* ---- Payroll Audit (assets/payshield_audit.js). Every class here starts pa-: nothing above changes. ---- */
.ps .pa-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ps .pa-slot { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.ps .pa-slot-label { font-weight: 800; font-size: 12.5px; color: var(--text-primary); margin-bottom: 4px; overflow-wrap: anywhere; }
.ps .pa-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--ps-red); color: var(--text-on-blue); font-size: 11px; font-weight: 800; }
.ps .pa-refresh { background: var(--surface); border: 1px solid var(--border-strong); color: var(--pm-blue-dark); border-radius: 6px; width: 30px; height: 30px; margin-left: 6px; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.ps .pa-refresh:hover { background: var(--surface-hover); }
.ps .pa-instruction { font-size: 13px; color: var(--text-primary); margin-top: 4px; line-height: 1.4; }
.ps .pa-sechead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ps .pa-sechead h3 { margin: 0; font-size: 17px; }
.ps .pa-num { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--ps-red); color: var(--text-on-blue); font-weight: 800; font-size: 13.5px; align-items: center; justify-content: center; flex-shrink: 0; }
.ps .pa-rule { display: inline-flex; align-items: center; border: 1.5px solid var(--neutral); border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; color: var(--neutral-text); background: var(--neutral-bg); }
.ps table.pa-src-table td { vertical-align: top; }
.ps table.ps-table tr.pa-changed td { background: var(--surface-selected); }
.ps table.ps-table tr.pa-changed td:first-child { border-left: 4px solid var(--pm-blue); }
.ps .pa-row-error { color: var(--ps-amber-deep); font-size: 12.5px; font-weight: 600; padding-top: 2px !important; }
.ps .pa-under { font-size: 11.5px; margin-top: 2px; text-align: right; }
.ps .pa-ptype { display: inline-block; font-size: 12px; font-weight: 700; color: var(--pm-blue-dark); line-height: 1.25; padding-top: 6px; overflow-wrap: anywhere; }
.ps .pa-ptype.pending { color: var(--ps-grey); font-weight: 600; }
.ps .pa-cand, .ps-modal .pa-cand { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; cursor: pointer; }
.ps .pa-cand input, .ps-modal .pa-cand input { margin-top: 3px; }
.ps .pa-note { margin-top: 4px; }
.ps-modal .pa-picklist { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.ps-modal .pa-addrow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.ps .pa-subsec { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 12px; }
.ps .pa-subsec h4 { margin: 0 0 6px; font-size: 14.5px; }
.ps .pa-delta { font-weight: 800; color: var(--ps-red); }
.ps .pa-final-items { margin: 6px 0 0 18px; padding: 0; font-size: 13px; }
.ps .pa-final-items a { cursor: pointer; }
.ps .pa-report-band { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (max-width: 1100px) { .ps .pa-split { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   24 Sep 2026 corrections batch (payshield_master.js, payshield_audit.js)
   ========================================================= */
/* Buttons: Add and Cancel blue, Save green (ps-save above), Edit red; Void / Inactive slate; Justification orange. */
/* Theme: Add/Cancel use the button blue (5.1:1 under white text; #2F80D1 was 4.1) and Justification uses PayShield's
   own orange (5.2:1; #EA7B24 was 2.9). Colours keep their meaning: blue, green, red, slate, orange. */
.ps .btn.pm-add, .ps-modal .btn.pm-add, .ps .btn.pm-cancel, .ps-modal .btn.pm-cancel { background: var(--brand-blue-button); border-color: var(--brand-blue-button); color: var(--text-on-blue); }
.ps .btn.pm-edit, .ps-modal .btn.pm-edit { background: var(--ps-red); border-color: var(--ps-red); color: var(--text-on-blue); }
.ps .btn.pm-void, .ps-modal .btn.pm-void { background: var(--neutral-text); border-color: var(--neutral-text); color: var(--text-on-blue); }
.ps .btn.pa-orange, .ps-modal .btn.pa-orange { background: var(--ps-amber); border-color: var(--ps-amber); color: var(--text-on-blue); font-weight: 800; }
.ps .btn.pm-add:hover, .ps-modal .btn.pm-add:hover, .ps .btn.pm-cancel:hover, .ps-modal .btn.pm-cancel:hover,
.ps .btn.pm-edit:hover, .ps-modal .btn.pm-edit:hover, .ps .btn.pm-void:hover, .ps-modal .btn.pm-void:hover,
.ps .btn.pa-orange:hover, .ps-modal .btn.pa-orange:hover { filter: brightness(.92); }
.ps .btn.pm-add:disabled, .ps-modal .btn.pm-add:disabled, .ps .btn.pm-edit:disabled, .ps-modal .btn.pm-edit:disabled,
.ps .btn.pm-cancel:disabled, .ps-modal .btn.pm-cancel:disabled, .ps .btn.pm-void:disabled, .ps-modal .btn.pm-void:disabled,
.ps .btn.pa-orange:disabled { background: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); cursor: not-allowed; }
/* The Action column: its buttons stacked, centred, one width. */
.ps .pm-actions, .ps-modal .pm-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ps .pm-actions .btn, .ps-modal .pm-actions .btn { min-width: 64px; padding: 3px 8px; font-size: 12.5px; }

/* Alignment (PayShield tables): left = first column, names and free text; right = amounts and numbers; centre = the rest.
   Headers follow their column. */
.ps table .al-l, .ps-modal table .al-l { text-align: left; }
.ps table .al-r, .ps-modal table .al-r { text-align: right; font-variant-numeric: tabular-nums; }
.ps table .al-c, .ps-modal table .al-c { text-align: center; }
.ps table.pm-table th.al-l, .ps-modal.pm-dialog th.al-l { text-align: left; }
.ps table.pm-table th.al-r, .ps-modal.pm-dialog th.al-r { text-align: right; }
.ps table.pm-table th.al-c, .ps-modal.pm-dialog th.al-c { text-align: center; }
.ps td.al-r .pm-cellbtn, .ps-modal td.al-r .pm-cellbtn { justify-content: flex-end; text-align: right; }
.ps td.al-l .pm-cellbtn, .ps-modal td.al-l .pm-cellbtn { justify-content: flex-start; text-align: left; }
.ps td.al-r .pm-cellbtn .pm-upcoming { text-align: right; }

/* The pencil (batch 2, 25 Sep 2026): ONLY on a cell that opens a dialog when clicked (Deductions, Hourly Rate, Salary,
   Distribution, Other Payments), top-right, in padding kept free for it, so it never covers the content. Plain inputs
   and read-only cells carry none. */
.ps td.pm-pen, .ps-modal td.pm-pen { position: relative; padding-right: 18px !important; }
.ps td.pm-pen::after, .ps-modal td.pm-pen::after {
  content: "\270E"; position: absolute; top: 2px; right: 4px; font-size: 11px; line-height: 1; color: var(--neutral-text); pointer-events: none;
}

/* Column headers (batch 2): always centred horizontally and vertically, in every PayShield table and dialog, whatever the
   column's content alignment (content keeps its own: text left, numbers right, the rest centred). */
.ps table th, .ps table th.al-l, .ps table th.al-r, .ps table th.al-c, .ps table.ps-table th, .ps table.ps-table th.num,
.ps table.pm-table th.al-l, .ps table.pm-table th.al-r, .ps table.pm-table th.al-c,
.ps-modal table th, .ps-modal table th.al-l, .ps-modal table th.al-r, .ps-modal table th.al-c,
.ps-modal.pm-dialog th.al-l, .ps-modal.pm-dialog th.al-r, .ps-modal.pm-dialog th.al-c { text-align: center !important; vertical-align: middle !important; }

/* "Low confidence" under an imported value (batch 2 import), with Confirm. */
/* A dialog cell's content is one block inside its (flex) button, so its words wrap as text, never as separate flex items;
   an amount stays on one line. */
.ps .pm-cellbtn-in, .ps-modal .pm-cellbtn-in { display: block; max-width: 100%; }
.ps .pm-nowrap, .ps-modal .pm-nowrap { white-space: nowrap; }
/* "+OT" / "OT" after an hourly rate (26 Sep 2026): small and muted, on the amount's line (inside its .pm-nowrap). */
.ps .pm-ot, .ps-modal .pm-ot { margin-left: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); letter-spacing: .02em; }
/* Stacked (label above Confirm) and broken only between words, so it fits the narrowest column (Fixed Pay?, 62px). */
.ps .pm-lowconf, .ps-modal .pm-lowconf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin-top: 4px;
  padding: 3px 4px; border: 1px dashed var(--ps-amber-border); border-radius: 6px; background: var(--ps-amber-bg); color: var(--ps-amber); font-size: 10.5px; font-weight: 700;
  line-height: 1.15; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ps .pm-lowconf .btn.pm-confirm-btn, .ps-modal .pm-lowconf .btn.pm-confirm-btn { padding: 1px 6px; font-size: 10.5px; min-width: 0; background: var(--ps-amber-bg);
  border: 1px solid var(--ps-amber-border); color: var(--ps-amber); line-height: 1.3; }

/* Markers */
.ps .pm-required, .ps-modal .pm-required { color: var(--ps-red); font-weight: 800; font-size: 11.5px; letter-spacing: .02em; }
.ps .pm-cell-input.pm-invalid, .ps-modal .pm-cell-input.pm-invalid { border: 2px solid var(--ps-red); }
.ps .pm-cellbtn.pm-cellbtn-required { border-color: var(--ps-red-border); }
/* The "no value" dash: readable (5.8:1; was 2.1). */
.ps .pm-dash, .ps-modal .pm-dash { color: var(--text-secondary); }
.ps .pm-namecell { display: flex; align-items: center; gap: 4px; }
.ps .pm-namecell > span { flex: 1; min-width: 0; }
.ps table.pm-table tr.pm-editing td, .ps-modal.pm-dialog tr.pm-editing td { background: var(--surface-selected); }
.ps table.pm-table tr.pm-errrow td, .ps-modal.pm-dialog tr.pm-errrow td { background: var(--ps-red-bg); color: var(--ps-red-deep); font-weight: 700; font-size: 12.5px; padding: 6px 10px; }
.ps .pm-prev-title, .ps-modal .pm-prev-title { margin: 18px 0 6px; font-size: 14.5px; color: var(--text-primary); }
.ps .pm-status, .ps-modal .pm-status { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 800; border: 1.5px solid currentColor; background: var(--surface); }
.ps-modal .pm-status-expired, .ps .pm-status-expired { color: var(--ps-grey); }
.ps-modal .pm-status-voided, .ps .pm-status-voided { color: var(--ps-amber); }
.ps-modal .pm-status-inactive, .ps .pm-status-inactive { color: var(--ps-grey); }
.ps .pm-fee-label { font-weight: 700; }
.ps table.pm-fee-set td[rowspan] { background-clip: padding-box; }
.ps .pm-idx { color: var(--text-muted); font-size: 12.5px; }

/* The "Are you sure?" popup sits above any Payroll Master dialog. */
.ps-modal.pm-confirm { z-index: 300; }
.ps-modal.pm-confirm .modal { max-width: 520px; }
.ps-modal.pm-confirm .modal-footer { justify-content: flex-end; gap: 10px; }

/* Payroll Runs */
.ps .pm-runs-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ps .pm-runs-filter label { display: block; font-size: 11.5px; font-weight: 700; color: var(--neutral-text); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .03em; }
.ps .pm-runs-filter .pm-cell-input { width: 160px; }
.ps .pm-runs-or { color: var(--text-muted); font-weight: 700; padding-bottom: 7px; }
.ps .pm-runs-btns { display: flex; gap: 8px; }
.ps .pm-runs-hint { flex-basis: 100%; }
.ps table.pm-table tr.pm-runrow { cursor: pointer; }
.ps table.pm-table tr.pm-runrow:hover td, .ps table.pm-table tr.pm-runrow:focus td { background: var(--surface-hover); }

/* Email Authentication: two equal columns, each with its own Check and flags; a locked column is greyed. */
.ps .pa-split.pa-email-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ps .pa-email-col.pa-locked .ps-section { opacity: .6; }
.ps .pa-check-row { margin-top: 12px; gap: 10px; }
.ps .ps-banner.grey { border-color: var(--border); background: var(--ps-grey-bg); color: var(--neutral-text); }
.ps .pa-lock-note { margin: 10px 0 0; }
/* 29 Sep 2026: "In effect" / "Upcoming" badges on the fee tables (they were dialog-only), an Upcoming row's tint, and the
   managers' Delete buttons in the rate and deduction dialogs. */
.ps .pm-ineffect { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; color: var(--ps-green); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; }
.ps .pm-ineffect.pm-upcoming-badge, .ps-modal.pm-dialog .pm-ineffect.pm-upcoming-badge { color: var(--ps-amber); }
.ps tr.pm-upcoming-row td, .ps-modal.pm-dialog tr.pm-upcoming-row td { background: var(--ps-amber-bg); }
.ps .btn.pm-delete, .ps-modal .btn.pm-delete { margin-left: 4px; }

/* ---- 1 Oct 2026 batch: Source Confirmation's new columns and checks ---- */
/* Fourteen columns share the card: the inputs may be narrower than the usual 60px minimum (the table is fixed-layout). */
.ps table.ps-source-table .ps-cell-input { min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 13px; }
.ps table.ps-source-table td.pa-calc-accepted-cell { white-space: normal; }
/* Payee Type: a dropdown on every row. A person's choice is blue; PayShield's own is grey and says so; "Assign Payee Type" is amber. */
.ps select.pa-ptype-sel.auto { color: var(--text-secondary); font-style: italic; }
.ps select.pa-ptype-sel.staff { color: var(--pm-blue-dark); font-weight: 700; }
.ps select.pa-ptype-sel.pending { color: var(--ps-amber-deep); font-weight: 700; border-color: var(--ps-amber-deep); }
.ps .pa-ptype-by { display: block; font-size: 11px; margin-top: 2px; line-height: 1.2; }
.ps .pa-ptype-by.auto { color: var(--text-secondary); }
.ps .pa-ptype-by.staff { color: var(--pm-blue-dark); font-weight: 700; }
/* A cleaned name: a small marker; click (or hover) for what the client wrote. */
.ps .pa-clean { font-size: 11.5px; margin-top: 2px; line-height: 1.25; }
.ps .pa-cleanmark { color: var(--pm-blue-dark); cursor: pointer; border-bottom: 1px dotted var(--pm-blue-dark); font-weight: 700; }
.ps .pa-origtext { display: none; color: var(--text-secondary); margin-left: 4px; overflow-wrap: anywhere; }
.ps .pa-clean.open .pa-origtext { display: block; margin-left: 0; }
.ps .pa-uncertain { font-size: 11.5px; margin-top: 2px; color: var(--ps-amber-deep); font-weight: 700; }
.ps .pa-row-error > div + div { margin-top: 4px; }
.ps .pa-row-error .pa-calcnote { display: inline-block; width: 260px; min-width: 0; margin: 0 6px; }
.ps .pa-row-error .btn { margin-left: 4px; }
.ps .pa-calc-accepted { color: var(--success-text); font-weight: 600; }

/* ---- 1 Oct 2026: flags under their records, and the open-flag count that jumps between them ---- */
.ps .pa-flagrow > td { padding: 0 0 6px 18px !important; border-top: 0 !important; background: transparent !important; }
.ps .pa-flagrow table.pa-flags { margin: 0; width: 100%; }
.ps .pa-orphans { margin-top: 12px; }
.ps .pa-orphans h4 { margin: 0 0 6px; font-size: 14px; color: var(--text-secondary); }
.ps .pa-orphan { margin-bottom: 8px; }
.ps .pa-orphan-name { font-weight: 700; margin-bottom: 2px; }
.ps button.pa-flagcount { cursor: pointer; border: 0; font: inherit; }
.ps button.pa-flagcount:hover { filter: brightness(1.08); }
.ps tr.pa-flash > td { animation: pa-flash 2.4s ease-out; }
@keyframes pa-flash { 0% { box-shadow: inset 0 0 0 3px var(--ps-amber-deep); } 100% { box-shadow: inset 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .ps tr.pa-flash > td { animation: none; box-shadow: inset 0 0 0 3px var(--ps-amber-deep); } }

/* ---- 1 Oct 2026, item 3: a red Required / Not assigned cell is a button that opens that field for editing ---- */
.ps button.pm-reqbtn { background: none; border: 0; padding: 2px 0; margin: 0; font-family: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ps button.pm-reqbtn:hover, .ps button.pm-reqbtn:focus-visible { text-decoration-style: solid; }

/* 2 Oct 2026: flags under their record on Email Authentication and Payee Identification (a block, not a table row, under a snip or address) */
.ps div.pa-flagrow { padding: 0 0 6px 18px; }
.ps div.pa-flagrow table.pa-flags { margin: 0; width: 100%; }
.ps .pa-noflags { margin: 0 0 12px; }
.ps .pa-otrate { white-space: nowrap; }

/* ---- 8 Oct 2026: sortable headers (item 3), batch checkboxes (items 2 and 4), Payee Type dropdown (item 6), Save now (item 7) ---- */
.ps table.ps-table th.pa-sortable { cursor: pointer; user-select: none; }
.ps table.ps-table th.pa-sortable:hover, .ps table.ps-table th.pa-sortable:focus-visible { color: var(--text-primary); text-decoration: underline dotted; text-underline-offset: 3px; }
.ps table.ps-table th.pa-sortable[data-dir]::after { content: '\25B2'; display: inline-block; margin-left: 5px; font-size: 10px; line-height: 1; color: var(--pm-blue, var(--text-primary)); }
.ps table.ps-table th.pa-sortable[data-dir="desc"]::after { content: '\25BC'; }
.ps table.ps-table th.pa-chk-cell, .ps table.ps-table td.pa-chk-cell { width: 34px; text-align: center; padding-left: 6px; padding-right: 6px; }
.ps input.pa-batch-chk { width: 17px; height: 17px; cursor: pointer; }
.ps input.pa-batch-chk:disabled { cursor: not-allowed; opacity: .45; }
.ps select.pa-ptype-sel.pending { max-width: 180px; border-color: var(--ps-amber, #B45309); background: var(--ps-amber-bg, #FEF3C7); font-weight: 700; }
.ps-save-all.saved { background: var(--ps-green, #15803D); }
.ps-save-error { color: var(--ps-red, #B91C1C); font-size: 12.5px; font-weight: 700; margin-left: 10px; max-width: 420px; }