/* RPM Compliance (15 Oct 2026) */
.cx-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.cx-wrap { overflow-x: auto; }
.cx-table td { vertical-align: middle; }
.cx-table td:nth-child(1), .cx-table td:nth-child(2), .cx-table td:nth-child(4) { white-space: nowrap; }
.cx-table th, .cx-table td { padding-left: 8px; padding-right: 8px; }
.cx-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-right: 8px; }
.cx-seg button { background: none; border: 0; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--muted); }
.cx-seg button.on { background: var(--accent-soft); color: var(--accent-dk); font-weight: 600; }

.cx-days { display: grid; grid-template-columns: repeat(30, 4px); gap: 1.5px; margin-top: 4px; }
.cx-days i { width: 4px; height: 10px; border-radius: 2px; background: var(--line-soft); display: block; }
.cx-days i.on { background: var(--go); }
.cx-days i.miss { background: var(--stop-soft, #fde2e1); }
.cx-dnum { font-size: 13px; white-space: nowrap; }
.cx-red { color: var(--stop); }
.cx-ok { color: var(--go); }

.cx-tiles { display: flex; gap: 5px; }
.cx-tile { width: 60px; border: 1px solid var(--line); border-radius: 8px; padding: 0 0 5px; text-align: center;
           font-size: 12px; overflow: hidden; background: var(--surface, #fff); }
.cx-tile .cx-lamp { display: block; height: 6px; margin-bottom: 4px; background: var(--line); }
.cx-tile.green .cx-lamp { background: var(--go); }
.cx-tile.red .cx-lamp { background: var(--stop); }
.cx-tile b { display: block; font-size: 12.5px; }
.cx-tile small { display: block; font-size: 10px; color: var(--muted); line-height: 1.1; }
.cx-tile .cx-when { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.cx-tile.green .cx-when { color: var(--go); font-weight: 600; }
.cx-tile.red .cx-when { color: var(--stop); }
.cx-tile.na { opacity: .6; }

.cx-act { width: 128px; text-align: center; }
.cx-act .btn { display: block; width: 100%; margin: 0 0 4px; }
.btn-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid transparent; }
.cx-signed { color: var(--go); }
.cx-status { font-size: 11.5px; margin-top: 5px; font-weight: 600; }
.cx-status.billable { color: var(--go); }
.cx-status.needs_note { color: var(--warn); }
.cx-status.not_yet { color: var(--muted); }

.cx-note textarea { width: 100%; box-sizing: border-box; }
.cx-bn { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 12.5px; }
.cx-bn td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; }
.cx-ack { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 6px; }
.cx-ack input { width: auto; margin-top: 3px; }

@media (max-width: 900px) {
  .cx-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cx-tpl { background: var(--accent-soft); border-radius: 8px; padding: 8px 10px 2px; margin-bottom: 10px; }
.cx-tpl .field { margin-bottom: 4px; }

/* Note templates screen */
.nt-off td { opacity: .55; }
.nt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; }
.nt-form textarea { width: 100%; box-sizing: border-box; }
.nt-help { font-size: 12.5px; background: var(--line-soft); border-radius: 8px; padding: 10px; align-self: start;
           max-height: 70vh; overflow: auto; }
.nt-help ul { list-style: none; padding: 0; margin: 6px 0 0; }
.nt-help li { margin-bottom: 6px; }
.nt-ph { font: 600 11.5px ui-monospace, Consolas, monospace; background: var(--surface, #fff); border: 1px solid var(--line);
         border-radius: 5px; padding: 1px 5px; cursor: pointer; color: var(--accent-dk); }
@media (max-width: 760px) { .nt-grid { grid-template-columns: 1fr; } }
/* Wider window for the template editor and the billing note */
.modal:has(#nt-form) { max-width: 900px; }
.modal:has(#cx-note) { max-width: 720px; }

/* Billing runs, cycle events (16 Oct 2026) */
.cx-run { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px;
          margin-right: 8px; max-width: 380px; background: var(--surface, #fff); }
.cx-markbar { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 13px; }
.cx-markbar label { display: flex; align-items: center; gap: 6px; }
.cx-markbar input, .cx-pick input { width: auto; }
.cx-pick { width: 28px; text-align: center; }
.cx-status.billed { color: var(--accent-dk); }
.cx-unbill { font-size: 11.5px; display: block; margin-top: 2px; }
.cx-billed { background: var(--accent-soft); color: var(--accent-dk); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.cx-early { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 6px 0 0; }
.cx-ev { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.cx-ev summary { cursor: pointer; font-size: 13px; }
.cx-events { list-style: none; padding: 0; margin: 8px 0 0; max-height: 220px; overflow: auto; }
.cx-events li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 8px; padding: 5px 0;
                border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.cx-events li:first-child { border-top: 0; }
.cx-ev-d { color: var(--muted); grid-row: span 2; }
.cx-ev-a { font-size: 12px; }
.cx-events .pill { font-size: 10.5px; padding: 1px 6px; }
.cx-seg button { white-space: nowrap; }
#topbar-actions #cx-xlsx, #topbar-actions #cx-zip { white-space: nowrap; }
.cx-confirm { margin: 8px 0 0; padding-left: 18px; font-size: 13px; max-height: 240px; overflow: auto; }
/* RPM Claims (16 Oct 2026) */
.clm-table td { vertical-align: top; }
.clm-lines { border-collapse: collapse; font-size: 12.5px; }
.clm-lines td { padding: 1px 10px 1px 0; border: 0; }
.clm-void td { opacity: .6; }
.clm-why { max-width: 220px; }
.clm-voidbtn { margin-left: 6px; }
.clm-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.clm-lines td:last-child, .clm-lines td:first-child { white-space: nowrap; }
#topbar-actions #clm-csv { white-space: nowrap; }
.cx-pick { max-width: 320px; margin-bottom: 8px; }