/* Reports: the monthly stats report register.
 * Everything namespaced under .rpt-* so nothing leaks. Follows the same
 * conventions as client-retention.css: global custom props with hard fallbacks,
 * the page owns its own scroll, tables scroll inside their wrapper, and the
 * layout collapses to one column on mobile.
 *
 * Dense dashboard spacing (8 to 32px scale). Colour roles match the rest of the
 * CRM: blue #2563eb for action, green #16a34a for done, amber #d97706 for
 * waiting, red #dc2626 for late. */

.rpt-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.rpt-head { display: flex; flex-direction: column; gap: 4px; }
.rpt-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary, #1a1a1a); }
.rpt-sub { font-size: 13px; color: var(--text-muted, #666); max-width: 78ch; line-height: 1.45; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.rpt-btn {
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
  color: var(--text-primary, #1a1a1a);
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 36px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.rpt-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.rpt-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.rpt-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.rpt-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.rpt-btn-go { background: #16a34a; border-color: #16a34a; color: #fff; }
.rpt-btn-go:hover { background: #15803d; border-color: #15803d; }
.rpt-btn-warn { background: #fff; border-color: #d97706; color: #b45309; }
.rpt-btn-warn:hover { background: #fffbeb; }
/* Hold is a pause, not a rejection. It reads calm and blue so it can never be
   mistaken for the amber Request changes button standing next to it. */
.rpt-btn-hold { background: #fff; border-color: #6366f1; color: #4338ca; }
.rpt-btn-hold:hover { background: #eef2ff; }
/* Disabled must never look like enabled. */
.rpt-btn:disabled,
.rpt-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rpt-btn:disabled:hover,
.rpt-btn[aria-disabled="true"]:hover { background: inherit; border-color: inherit; }

/* ── toolbar ─────────────────────────────────────────────────────────────── */
.rpt-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
}
.rpt-filter { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rpt-filter-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-muted, #666); }
.rpt-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rpt-chip {
  border: 1px solid var(--border-color, #e5e7eb); background: #fff; color: var(--text-secondary, #444);
  border-radius: 999px; padding: 6px 12px; min-height: 32px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.rpt-chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.rpt-chip.active { background: #10141b; border-color: #10141b; color: #fff; }
.rpt-chip.active.late { background: #dc2626; border-color: #dc2626; }
.rpt-chip:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.rpt-chip .n { opacity: .65; font-weight: 700; margin-left: 4px; }
.rpt-input, .rpt-select {
  border: 1px solid var(--border-color, #d1d5db); background: #fff; color: var(--text-primary, #1a1a1a);
  border-radius: 8px; padding: 7px 10px; min-height: 36px; font: inherit; font-size: 12.5px;
}
.rpt-select { cursor: pointer; }
.rpt-input:focus, .rpt-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.rpt-spacer { flex: 1 1 auto; }

/* ── table ───────────────────────────────────────────────────────────────── */
.rpt-tablewrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; min-width: 880px; }
.rpt-table th {
  background: #f8fafc; text-align: left; padding: 10px 12px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted, #666); border-bottom: 1px solid var(--border-color, #e5e7eb); white-space: nowrap;
}
.rpt-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-color, #eef0f2); color: var(--text-secondary, #444); vertical-align: middle; }
.rpt-table tr:last-child td { border-bottom: 0; }
.rpt-table td b { color: var(--text-primary, #1a1a1a); font-weight: 700; }
.rpt-table tr.rpt-row { cursor: pointer; }
.rpt-table tr.rpt-row:hover td { background: #f5f8ff; }
.rpt-table tr.rpt-row:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.rpt-table tr.rpt-row.is-open td { background: #eef4ff; }
.rpt-td-late { color: #dc2626; font-weight: 700; }

/* ── state pills ─────────────────────────────────────────────────────────── */
.rpt-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: #f1f5f9; color: #475569;
}
.rpt-state .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.rpt-state.requested { background: #f1f5f9; color: #475569; }
.rpt-state.building { background: #eff6ff; color: #1d4ed8; }
.rpt-state.ready { background: #f5f3ff; color: #6d28d9; }
.rpt-state.checking { background: #eef2ff; color: #4338ca; }
.rpt-state.awaiting_approval { background: #fffbeb; color: #b45309; }
.rpt-state.approved { background: #ecfdf5; color: #15803d; }
.rpt-state.sent { background: #10241a; color: #d1fae5; }
.rpt-state.held { background: #eef2ff; color: #3730a3; }
.rpt-state.rejected { background: #fef2f2; color: #b91c1c; }

/* ── priority ────────────────────────────────────────────────────────────── */
/* Priority is the first sort key, so it is the first column and it is readable
   at a glance without reading the word. */
.rpt-prio {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.rpt-prio::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rpt-prio-urgent { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.rpt-prio-high { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.rpt-prio-normal { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.rpt-prio-low { background: #f8fafc; color: #94a3b8; border-color: #eef2f6; }

.rpt-muted { color: var(--text-muted, #94a3b8); }
.rpt-rowsub { font-size: 11px; color: var(--text-muted, #666); margin-top: 3px; max-width: 240px; }

/* Approval counter in the row. */
.rpt-gate { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #64748b; }
.rpt-gate .ticks { display: inline-flex; gap: 3px; }
.rpt-gate .tick { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #cbd5e1; box-sizing: border-box; }
.rpt-gate .tick.on { background: #16a34a; border-color: #16a34a; }

/* ── states ──────────────────────────────────────────────────────────────── */
.rpt-loading, .rpt-empty { padding: 26px 16px; font-size: 13px; color: var(--text-muted, #666); }
.rpt-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary, #1a1a1a); margin-bottom: 4px; }
.rpt-error {
  padding: 12px 14px; border-radius: 10px; font-size: 12.5px;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
}
.rpt-ok {
  padding: 12px 14px; border-radius: 10px; font-size: 12.5px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #15803d;
}
.rpt-warn {
  padding: 12px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
}
.rpt-warn b { color: #b45309; }
.rpt-warn-block { display: flex; flex-direction: column; gap: 8px; }
.rpt-warn-t { font-size: 13.5px; font-weight: 700; color: #b45309; }
.rpt-warn-block .rpt-input { max-width: 190px; }

/* ── hold banner ─────────────────────────────────────────────────────────── */
/* A hold is a state somebody has to act on, so it sits at the top of the drawer
   in its own colour and says in words what it did NOT do to the approvals. */
.rpt-hold {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 14px 16px; border-radius: 12px;
  background: #eef2ff; border: 1px solid #c7d2fe;
}
.rpt-hold-t { font-size: 14px; font-weight: 700; color: #3730a3; }
.rpt-hold-b { font-size: 12.5px; color: #3f3f8a; line-height: 1.5; }

/* ── builder and checker handover ────────────────────────────────────────── */
.rpt-hand { display: flex; flex-direction: column; gap: 8px; }

/* ── drawer ──────────────────────────────────────────────────────────────── */
.rpt-scrim {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .38);
  z-index: 1200; opacity: 0; transition: opacity .2s ease;
}
.rpt-scrim.in { opacity: 1; }
.rpt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--card-bg, #fff); z-index: 1201;
  border-left: 1px solid var(--border-color, #e5e7eb);
  box-shadow: -18px 0 46px rgba(15, 23, 42, .16);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
}
.rpt-drawer.in { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .rpt-drawer, .rpt-scrim { transition: none; }
}
.rpt-dhead {
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border-color, #e5e7eb);
  display: flex; align-items: flex-start; gap: 12px;
}
.rpt-dhead-main { flex: 1; min-width: 0; }
.rpt-dtitle { margin: 0 0 2px; font-size: 17px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.rpt-dmeta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted, #666); }
.rpt-dmeta-t { overflow-wrap: anywhere; }
.rpt-close {
  border: 1px solid var(--border-color, #e5e7eb); background: #fff; color: #475569;
  width: 34px; height: 34px; min-height: 34px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.rpt-close:hover { background: #f8fafc; }
.rpt-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.rpt-dbody { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 18px; }

.rpt-sec { display: flex; flex-direction: column; gap: 8px; }
.rpt-sec-h {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--text-muted, #666);
}
.rpt-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── the approval gate panel ─────────────────────────────────────────────── */
.rpt-gatecard {
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; overflow: hidden;
}
.rpt-gatecard.blocked { border-color: #fcd34d; }
.rpt-gatecard.done { border-color: #a7f3d0; }
.rpt-gatebar { padding: 14px 16px; background: #fffbeb; }
.rpt-gatecard.done .rpt-gatebar { background: #ecfdf5; }
.rpt-gatecard.idle .rpt-gatebar { background: #f8fafc; }
.rpt-gateline { font-size: 14px; font-weight: 700; color: #b45309; margin: 0 0 3px; }
.rpt-gatecard.done .rpt-gateline { color: #15803d; }
.rpt-gatecard.idle .rpt-gateline { color: #475569; }
.rpt-gatehint { font-size: 12px; color: #92400e; line-height: 1.45; }
.rpt-gatecard.done .rpt-gatehint { color: #166534; }
.rpt-gatecard.idle .rpt-gatehint { color: var(--text-muted, #666); }
.rpt-gatemeter { display: flex; gap: 6px; margin-top: 10px; }
.rpt-gateslot {
  flex: 1; height: 6px; border-radius: 999px; background: #e2e8f0;
}
.rpt-gateslot.on { background: #16a34a; }

.rpt-approvers { list-style: none; margin: 0; padding: 0; }
.rpt-approver {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--border-color, #eef0f2); font-size: 12.5px;
}
.rpt-approver .who { font-weight: 700; color: var(--text-primary, #1a1a1a); }
.rpt-approver .cmt { color: var(--text-muted, #666); font-size: 12px; margin-top: 2px; }
.rpt-approver .when { margin-left: auto; font-size: 11px; color: #94a3b8; white-space: nowrap; }
.rpt-decision {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px; flex: none;
}
.rpt-decision.approved { background: #ecfdf5; color: #15803d; }
.rpt-decision.changes { background: #fef2f2; color: #b91c1c; }
.rpt-decision.held { background: #eef2ff; color: #4338ca; }
/* Somebody who cannot approve is told why, in the gate itself, once. */
.rpt-denied {
  padding: 11px 16px; border-top: 1px solid var(--border-color, #eef0f2);
  font-size: 12.5px; line-height: 1.5; color: #475569; background: #f8fafc;
}
.rpt-denied b { color: var(--text-primary, #1a1a1a); }
.rpt-gatefoot {
  padding: 10px 16px; border-top: 1px solid var(--border-color, #eef0f2);
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted, #666); background: #fcfcfd;
}
.rpt-approver-empty { padding: 12px 16px; border-top: 1px solid var(--border-color, #eef0f2); font-size: 12.5px; color: var(--text-muted, #666); }
.rpt-gateactions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-color, #eef0f2); flex-wrap: wrap; }

/* ── collection summary ──────────────────────────────────────────────────── */
.rpt-sources { display: flex; flex-direction: column; gap: 6px; }
.rpt-source {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px;
  font-size: 12.5px; background: #fff;
}
.rpt-source .nm { font-weight: 700; color: var(--text-primary, #1a1a1a); min-width: 92px; flex: none; }
.rpt-source .why { color: var(--text-muted, #666); font-size: 12px; line-height: 1.45; }
.rpt-src-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 999px; flex: none; margin-left: auto;
}
.rpt-src-tag.ok { background: #ecfdf5; color: #15803d; }
.rpt-src-tag.skipped { background: #f1f5f9; color: #475569; }
.rpt-src-tag.failed { background: #fef2f2; color: #b91c1c; }

/* ── metrics ─────────────────────────────────────────────────────────────── */
.rpt-mtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rpt-mtable th {
  text-align: left; padding: 7px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted, #666); border-bottom: 1px solid var(--border-color, #e5e7eb); font-weight: 700;
}
.rpt-mtable td { padding: 7px 8px; border-bottom: 1px solid var(--border-color, #f1f2f4); color: var(--text-secondary, #444); }
.rpt-mtable td.v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary, #1a1a1a); }
.rpt-plat {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #475569; background: #f1f5f9; padding: 2px 7px; border-radius: 999px;
}

/* ── findings ────────────────────────────────────────────────────────────── */
.rpt-textarea {
  width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical;
  border: 1px solid var(--border-color, #d1d5db); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 13px; line-height: 1.5; color: var(--text-primary, #1a1a1a); background: #fff;
}
.rpt-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.rpt-textarea-sm { min-height: 74px; font-size: 12.5px; }
.rpt-textarea[readonly] { background: #f8fafc; color: var(--text-secondary, #444); }
.rpt-note { font-size: 11.5px; color: var(--text-muted, #666); line-height: 1.45; }

/* ── findings, one record each ───────────────────────────────────────────── */
/* A draft finding must never be mistaken for an approved one, so the two states
   differ in border, left edge, badge and background, not only in a word. */
.rpt-findtally {
  font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 10px;
  background: #f1f5f9; color: var(--text-secondary, #444);
}
.rpt-findtally b { color: var(--text-primary, #1a1a1a); }
.rpt-findtally.has-drafts { background: #fffbeb; color: #92400e; }
.rpt-findtally.has-drafts b { color: #b45309; }

.rpt-findings { display: flex; flex-direction: column; gap: 10px; }
.rpt-finding {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border-color, #e5e7eb); border-left: 4px solid #cbd5e1;
  border-radius: 10px; padding: 12px 14px; background: #fff;
}
.rpt-finding.is-draft { border-left-color: #d97706; background: #fffdf7; }
.rpt-finding.is-approved { border-left-color: #16a34a; }
.rpt-finding-hd { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.rpt-finding-t { flex: 1 1 160px; min-width: 0; font-size: 13px; }
.rpt-finding-t b { color: var(--text-primary, #1a1a1a); }
.rpt-finding-sub { font-size: 11.5px; color: var(--text-muted, #666); margin-top: 2px; }
.rpt-finding-appr { font-size: 11.5px; color: #15803d; }

.rpt-dir {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px;
}
.rpt-dir-up { background: #ecfdf5; color: #15803d; }
.rpt-dir-down { background: #fef2f2; color: #b91c1c; }
.rpt-dir-flat { background: #f1f5f9; color: #475569; }

.rpt-findbadge {
  margin-left: auto; flex: none;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
}
.rpt-findbadge.draft { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.rpt-findbadge.ok { background: #ecfdf5; color: #15803d; border: 1px solid #a7f3d0; }

.rpt-finding-posts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; }
.rpt-finding-poststag { font-weight: 700; color: var(--text-secondary, #444); }
/* A finding no post explains is a result, not a gap. It is labelled rather than
   left as an empty row somebody reads as "nothing here". */
.rpt-finding-posts.is-unexplained {
  padding: 7px 10px; border-radius: 8px;
  background: #fdf4ff; border: 1px dashed #e9d5ff;
}
.rpt-unexplained {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px; flex: none;
  background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff;
}
.rpt-finding-why { color: #6b21a8; line-height: 1.45; flex: 1 1 200px; min-width: 0; }
.rpt-postchip {
  font-size: 11px; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569;
  max-width: 100%; overflow-wrap: anywhere;
}

/* ── delivery readout ────────────────────────────────────────────────────── */
/* There is no Send button in the normal path, so this panel has to say what
   happened rather than offering an action. */
.rpt-deliver {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 15px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--border-color, #e5e7eb); background: #f8fafc; color: var(--text-secondary, #444);
}
.rpt-deliver-t { font-size: 13.5px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.rpt-deliver.ok { background: #ecfdf5; border-color: #a7f3d0; color: #166534; }
.rpt-deliver.ok .rpt-deliver-t { color: #15803d; }
.rpt-deliver.bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.rpt-deliver.bad .rpt-deliver-t { color: #b91c1c; }

/* ── copy list ───────────────────────────────────────────────────────────── */
.rpt-recip {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--border-color, #e5e7eb); background: #fff;
}
.rpt-recip-sum { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; width: 100%; }
.rpt-recip-cc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rpt-recip-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #666); }
.rpt-recip .rpt-field { width: 100%; }
.rpt-recip .rpt-input, .rpt-recip .rpt-textarea { width: 100%; box-sizing: border-box; }

/* ── modal ───────────────────────────────────────────────────────────────── */
.rpt-modal-back {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .38); z-index: 1300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.rpt-modal {
  background: var(--card-bg, #fff); border-radius: 14px; width: min(460px, 100%);
  max-height: 88vh; overflow-y: auto; padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}
.rpt-modal h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.rpt-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.rpt-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #666); font-weight: 700; }
.rpt-field .rpt-input, .rpt-field .rpt-select { width: 100%; box-sizing: border-box; }
.rpt-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .rpt-page { padding: 16px 12px; gap: 12px; }
  .rpt-toolbar { gap: 10px; }
  .rpt-filter { width: 100%; align-items: flex-start; flex-direction: column; }
  .rpt-chips { width: 100%; }
  .rpt-filter .rpt-input, .rpt-filter .rpt-select { width: 100%; box-sizing: border-box; }
  .rpt-spacer { display: none; }
  .rpt-drawer { width: 100vw; }
  .rpt-dbody { padding: 14px 14px 24px; }
  .rpt-actions .rpt-btn { flex: 1 1 auto; }
  /* The gate actions stay full width so Hold and Request changes are never two
     narrow neighbours somebody mis-taps. */
  .rpt-gateactions .rpt-btn { flex: 1 1 100%; }
  .rpt-findbadge { margin-left: 0; }
  .rpt-warn-block .rpt-input { max-width: none; width: 100%; box-sizing: border-box; }
}

/* ── #134 dark mode overrides ─────────────────────────────────────────────────
   Appended, never edited above. Only selectors with hardcoded NEUTRAL literals
   are repeated; anything on var(--text-*) / var(--card-bg) / var(--border-color)
   already flips via ui/css/theme.css.

   The state pills and the approval gate are the whole point of this register,
   so each keeps its hue and swaps a pale tint for a translucent one plus a
   light saturated foreground. Blue stays action, green done, amber waiting,
   red late — exactly as the header comment above promises. */

/* buttons */
html[data-theme="dark"] .rpt-btn:hover { background: #334155; border-color: #475569; }
html[data-theme="dark"] .rpt-btn:focus-visible { outline-color: #60a5fa; }
html[data-theme="dark"] .rpt-btn-warn { background: var(--card-bg); color: #fcd34d; }
html[data-theme="dark"] .rpt-btn-warn:hover { background: rgba(245, 158, 11, 0.16); border-color: #d97706; }
html[data-theme="dark"] .rpt-btn-hold { background: var(--card-bg); color: #a5b4fc; }
html[data-theme="dark"] .rpt-btn-hold:hover { background: rgba(99, 102, 241, 0.18); border-color: #6366f1; }

/* toolbar */
html[data-theme="dark"] .rpt-chip { background: var(--card-bg); }
html[data-theme="dark"] .rpt-chip:hover { border-color: #475569; background: #334155; }
/* The active chip was the one ink slab on a white toolbar. Selection has to
   stay the loudest thing in the row, so it inverts to a light slab. */
html[data-theme="dark"] .rpt-chip.active { background: #cbd5e1; border-color: #cbd5e1; color: #0f172a; }
html[data-theme="dark"] .rpt-chip.active.late { background: #dc2626; border-color: #dc2626; color: #fff; }
html[data-theme="dark"] .rpt-chip:focus-visible { outline-color: #60a5fa; }
html[data-theme="dark"] .rpt-input,
html[data-theme="dark"] .rpt-select {
  background: #172033;
  border-color: #475569;
  color: var(--text-primary);
}
html[data-theme="dark"] .rpt-input:focus,
html[data-theme="dark"] .rpt-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
}

/* table */
html[data-theme="dark"] .rpt-table { background: var(--card-bg); }
html[data-theme="dark"] .rpt-table th { background: #273449; }
html[data-theme="dark"] .rpt-table tr.rpt-row:hover td { background: rgba(96, 165, 250, 0.10); }
html[data-theme="dark"] .rpt-table tr.rpt-row:focus-visible { outline-color: #60a5fa; }
html[data-theme="dark"] .rpt-table tr.rpt-row.is-open td { background: rgba(96, 165, 250, 0.16); }
html[data-theme="dark"] .rpt-td-late { color: #fca5a5; }

/* state pills */
html[data-theme="dark"] .rpt-state,
html[data-theme="dark"] .rpt-state.requested { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
html[data-theme="dark"] .rpt-state.building { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
html[data-theme="dark"] .rpt-state.ready { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; }
html[data-theme="dark"] .rpt-state.checking { background: rgba(129, 140, 248, 0.16); color: #a5b4fc; }
html[data-theme="dark"] .rpt-state.awaiting_approval { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
html[data-theme="dark"] .rpt-state.approved { background: rgba(34, 197, 94, 0.16); color: #86efac; }
/* Sent was the one INVERTED pill (light text on a deep green slab) so that the
   terminal state reads differently from every other. That inversion no longer
   works when the page itself is dark, so it keeps its distinction by being the
   only pill with a solid saturated fill. */
html[data-theme="dark"] .rpt-state.sent { background: #15803d; color: #ecfdf5; }
html[data-theme="dark"] .rpt-state.held { background: rgba(129, 140, 248, 0.16); color: #a5b4fc; }
html[data-theme="dark"] .rpt-state.rejected { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }

/* priority */
html[data-theme="dark"] .rpt-prio-urgent { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); }
html[data-theme="dark"] .rpt-prio-high { background: rgba(249, 115, 22, 0.16); color: #fdba74; border-color: rgba(249, 115, 22, 0.35); }
html[data-theme="dark"] .rpt-prio-normal { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.28); }
html[data-theme="dark"] .rpt-prio-low { background: rgba(148, 163, 184, 0.08); color: #94a3b8; border-color: rgba(148, 163, 184, 0.18); }

/* approval counter in the row */
html[data-theme="dark"] .rpt-gate { color: #94a3b8; }
html[data-theme="dark"] .rpt-gate .tick { border-color: #475569; }
html[data-theme="dark"] .rpt-gate .tick.on { background: #22c55e; border-color: #22c55e; }

/* banner states */
html[data-theme="dark"] .rpt-error {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
html[data-theme="dark"] .rpt-ok {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}
html[data-theme="dark"] .rpt-warn {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.38);
  color: #fde68a;
}
html[data-theme="dark"] .rpt-warn b,
html[data-theme="dark"] .rpt-warn-t { color: #fcd34d; }

/* hold banner — stays indigo so it can never be read as the amber warning */
html[data-theme="dark"] .rpt-hold {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(129, 140, 248, 0.34);
}
html[data-theme="dark"] .rpt-hold-t { color: #c7d2fe; }
html[data-theme="dark"] .rpt-hold-b { color: #a5b4fc; }

/* drawer */
html[data-theme="dark"] .rpt-scrim { background: rgba(0, 0, 0, 0.62); }
html[data-theme="dark"] .rpt-drawer { box-shadow: -18px 0 46px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .rpt-close { background: var(--card-bg); color: #cbd5e1; }
html[data-theme="dark"] .rpt-close:hover { background: #334155; }
html[data-theme="dark"] .rpt-close:focus-visible { outline-color: #60a5fa; }

/* approval gate panel */
html[data-theme="dark"] .rpt-gatecard.blocked { border-color: rgba(245, 158, 11, 0.45); }
html[data-theme="dark"] .rpt-gatecard.done { border-color: rgba(34, 197, 94, 0.40); }
html[data-theme="dark"] .rpt-gatebar { background: rgba(245, 158, 11, 0.12); }
html[data-theme="dark"] .rpt-gatecard.done .rpt-gatebar { background: rgba(34, 197, 94, 0.12); }
html[data-theme="dark"] .rpt-gatecard.idle .rpt-gatebar { background: rgba(148, 163, 184, 0.08); }
html[data-theme="dark"] .rpt-gateline { color: #fcd34d; }
html[data-theme="dark"] .rpt-gatecard.done .rpt-gateline { color: #86efac; }
html[data-theme="dark"] .rpt-gatecard.idle .rpt-gateline { color: #cbd5e1; }
html[data-theme="dark"] .rpt-gatehint { color: #fde68a; }
html[data-theme="dark"] .rpt-gatecard.done .rpt-gatehint { color: #86efac; }
html[data-theme="dark"] .rpt-gateslot { background: #475569; }
html[data-theme="dark"] .rpt-gateslot.on { background: #22c55e; }
html[data-theme="dark"] .rpt-decision.approved { background: rgba(34, 197, 94, 0.16); color: #86efac; }
html[data-theme="dark"] .rpt-decision.changes { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
html[data-theme="dark"] .rpt-decision.held { background: rgba(129, 140, 248, 0.16); color: #a5b4fc; }
html[data-theme="dark"] .rpt-denied { color: #cbd5e1; background: rgba(148, 163, 184, 0.08); }
html[data-theme="dark"] .rpt-gatefoot { background: rgba(148, 163, 184, 0.06); }

/* collection summary */
html[data-theme="dark"] .rpt-source { background: #273449; }
html[data-theme="dark"] .rpt-src-tag.ok { background: rgba(34, 197, 94, 0.16); color: #86efac; }
html[data-theme="dark"] .rpt-src-tag.skipped { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
html[data-theme="dark"] .rpt-src-tag.failed { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }

/* metrics */
html[data-theme="dark"] .rpt-plat { color: #cbd5e1; background: rgba(148, 163, 184, 0.14); }

/* findings */
html[data-theme="dark"] .rpt-textarea {
  background: #172033;
  border-color: #475569;
  color: var(--text-primary);
}
html[data-theme="dark"] .rpt-textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
}
html[data-theme="dark"] .rpt-textarea[readonly] { background: rgba(148, 163, 184, 0.08); }

html[data-theme="dark"] .rpt-findtally { background: rgba(148, 163, 184, 0.12); }
html[data-theme="dark"] .rpt-findtally.has-drafts { background: rgba(245, 158, 11, 0.14); color: #fde68a; }
html[data-theme="dark"] .rpt-findtally.has-drafts b { color: #fcd34d; }

/* A draft must still differ from an approved finding in border, left edge,
   badge AND background, so the left rail keeps its amber and the wash becomes
   a translucent amber rather than the near-white #fffdf7. */
html[data-theme="dark"] .rpt-finding { border-left-color: #475569; background: #273449; }
html[data-theme="dark"] .rpt-finding.is-draft { border-left-color: #d97706; background: rgba(245, 158, 11, 0.10); }
html[data-theme="dark"] .rpt-finding-appr { color: #86efac; }

html[data-theme="dark"] .rpt-dir-up { background: rgba(34, 197, 94, 0.16); color: #86efac; }
html[data-theme="dark"] .rpt-dir-down { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
html[data-theme="dark"] .rpt-dir-flat { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }

html[data-theme="dark"] .rpt-findbadge.draft { background: rgba(245, 158, 11, 0.18); color: #fcd34d; border-color: rgba(245, 158, 11, 0.40); }
html[data-theme="dark"] .rpt-findbadge.ok { background: rgba(34, 197, 94, 0.16); color: #86efac; border-color: rgba(34, 197, 94, 0.38); }

html[data-theme="dark"] .rpt-finding-posts.is-unexplained {
  background: rgba(192, 132, 252, 0.10);
  border-color: rgba(192, 132, 252, 0.32);
}
html[data-theme="dark"] .rpt-unexplained {
  background: rgba(192, 132, 252, 0.16);
  color: #d8b4fe;
  border-color: rgba(192, 132, 252, 0.35);
}
html[data-theme="dark"] .rpt-finding-why { color: #d8b4fe; }
html[data-theme="dark"] .rpt-postchip { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }

/* delivery readout */
html[data-theme="dark"] .rpt-deliver { background: rgba(148, 163, 184, 0.08); }
html[data-theme="dark"] .rpt-deliver.ok {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}
html[data-theme="dark"] .rpt-deliver.ok .rpt-deliver-t { color: #86efac; }
html[data-theme="dark"] .rpt-deliver.bad {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
html[data-theme="dark"] .rpt-deliver.bad .rpt-deliver-t { color: #fca5a5; }

/* copy list */
html[data-theme="dark"] .rpt-recip { background: #273449; }

/* modal */
html[data-theme="dark"] .rpt-modal-back { background: rgba(0, 0, 0, 0.62); }
html[data-theme="dark"] .rpt-modal { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.60); }