/* ============================================================
   Cleaning module — Billing Workflow aggregator.
   Layout: filter bar → patient list → patient record modal
   (fullscreen medical-record style organized per Datacleaning.pdf).
   ============================================================ */

/* --- Organization picker (required first step, freezable) ------------- */
.cleaning-org-bar {
  margin: 0 0 12px;
}
.cleaning-org-choose {
  padding: 14px 16px;
  background: #eef2fb;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cleaning-org-choose-label {
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1e3a8a;
}
.cleaning-org-choose select {
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  font-size: calc(13px * var(--ui-font-scale, 1));
  font-weight: 500;
  background: #fff;
  color: #1e293b;
  min-width: 260px;
}

.cleaning-org-locked {
  padding: 12px 16px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cleaning-org-locked-label {
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #166534;
}
.cleaning-org-locked-value {
  font-size: calc(13.5px * var(--ui-font-scale, 1));
  font-weight: 600;
  color: #14532d;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cleaning-org-change {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #16a34a;
  background: #fff;
  color: #166534;
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: 600;
  cursor: pointer;
}
.cleaning-org-change:hover {
  background: #16a34a;
  color: #fff;
}

.cleaning-org-empty {
  padding: 14px 16px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  color: #92400e;
  font-size: calc(12px * var(--ui-font-scale, 1));
}

/* Gate shown until an organization is committed. */
.cleaning-org-gate {
  margin: 20px auto;
  padding: 30px 24px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  text-align: center;
  color: #475569;
  max-width: 620px;
}
.cleaning-org-gate-icon {
  font-size: calc(33px * var(--ui-font-scale, 1));
  margin-bottom: 8px;
}
.cleaning-org-gate h3 {
  margin: 0 0 8px;
  font-size: calc(14.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: #1e293b;
}
.cleaning-org-gate p {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale, 1));
  line-height: 1.5;
}

/* --- Filter bar ------------------------------------------------------- */
.cleaning-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-2, #f5f6f8);
  border: 1px solid var(--border, #d6dadf);
  border-radius: 10px;
  margin: 0 0 12px;
}
.cleaning-toolbar label {
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, #6b7280);
  font-weight: 700;
  white-space: nowrap;
}
.cleaning-toolbar select,
.cleaning-toolbar input[type="month"] {
  padding: 7px 10px;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 8px;
  font-size: calc(12px * var(--ui-font-scale, 1));
  background: var(--surface, #fff);
  color: inherit;
  min-width: 150px;
}
.cleaning-summary {
  margin-left: auto;
  font-size: calc(11px * var(--ui-font-scale, 1));
  color: var(--muted, #6b7280);
}

.cleaning-warnings { display: block; margin: 0 0 12px; }
.cleaning-warning {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
  font-size: calc(11px * var(--ui-font-scale, 1));
  margin-bottom: 6px;
}

/* --- Patient list ---------------------------------------------------- */
.cleaning-list-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d6dadf);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cleaning-list-search {
  padding: 8px 10px;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 8px;
  font-size: calc(12px * var(--ui-font-scale, 1));
  background: var(--surface, #fff);
  color: inherit;
}
.cleaning-patient-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Shared 6-column grid for header + data rows so columns align exactly. */
.cleaning-patient-header,
.cleaning-patient-row {
  display: grid;
  grid-template-columns: 90px 100px minmax(0, 1.4fr) minmax(0, 1.4fr) 90px 90px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
}

.cleaning-patient-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cleaning-patient-header .cp-count { text-align: right; }

.cleaning-patient-row {
  border: 1px solid var(--border-soft, #eef0f3);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: inherit;
  font-family: inherit;
  font-size: calc(12px * var(--ui-font-scale, 1));
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease, border-color 100ms ease;
}
.cleaning-patient-row:hover {
  background: var(--surface-3, #eef2fb);
  border-color: var(--primary, #4f46e5);
}

.cleaning-patient-row .cp-month {
  color: #475569;
  font-weight: 500;
  font-size: calc(11px * var(--ui-font-scale, 1));
  white-space: nowrap;
}
.cleaning-patient-row .cp-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: #1e40af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cleaning-patient-row .cp-name {
  font-weight: 600;
  color: var(--text, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cleaning-patient-row .cp-physician {
  color: var(--muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cleaning-patient-row .cp-count {
  font-size: calc(11px * var(--ui-font-scale, 1));
  color: var(--muted, #6b7280);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cleaning-patient-row .cp-status { text-align: left; }

/* Status pill — green "Active" indicator replacing the old "Open →". */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: calc(10px * var(--ui-font-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-active {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

/* Narrower screens: collapse to key columns so it's still legible. */
@media (max-width: 900px) {
  .cleaning-patient-header,
  .cleaning-patient-row {
    grid-template-columns: 80px 90px 1fr 80px 80px;
  }
  .cleaning-patient-header .cp-physician,
  .cleaning-patient-row .cp-physician { display: none; }
}
@media (max-width: 700px) {
  .cleaning-patient-header,
  .cleaning-patient-row {
    grid-template-columns: 1fr 1fr;
  }
  .cleaning-patient-header .cp-month,
  .cleaning-patient-header .cp-physician,
  .cleaning-patient-header .cp-count,
  .cleaning-patient-row .cp-month,
  .cleaning-patient-row .cp-physician,
  .cleaning-patient-row .cp-count { display: none; }
}
.cleaning-empty {
  padding: 32px 12px;
  color: var(--muted, #6b7280);
  font-size: calc(12px * var(--ui-font-scale, 1));
  text-align: center;
}

/* ============================================================
   Fullscreen record modal — medical-record document layout.
   ============================================================ */

.cleaning-record-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: stretch;
  justify-content: stretch;
  z-index: 200;
  padding: 24px;
}
.cleaning-record-backdrop.active { display: flex; }

.cleaning-record-frame {
  background: #f8fafc;
  border-radius: 12px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.cleaning-record-header {
  padding: 14px 20px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cleaning-record-header h2 {
  margin: 0;
  font-size: calc(16px * var(--ui-font-scale, 1));
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cleaning-record-header .meta {
  font-size: calc(11px * var(--ui-font-scale, 1));
  opacity: 0.85;
  margin-top: 2px;
}
.cleaning-record-header .btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.cleaning-record-header .btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.cleaning-record-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background: #f8fafc;
}

.record-shell { display: flex; flex-direction: column; gap: 16px; }

/* --- Source-doc strip (top of each patient record) ------------------- */
.record-source-strip {
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: calc(11px * var(--ui-font-scale, 1));
}
.record-source-label {
  color: var(--muted, #6b7280);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  white-space: nowrap;
}
.record-source-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.record-source-none { color: var(--muted, #6b7280); font-style: italic; font-size: calc(11px * var(--ui-font-scale, 1)); }
.record-source-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2fb;
  color: #1e40af;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  font-size: calc(11px * var(--ui-font-scale, 1));
}
.record-source-pill:hover { background: #dbeafe; }

/* "Attributes" button pinned to the right end of the strip. */
.record-attr-btn {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #2563eb;
  background: #fff;
  color: #1d4ed8;
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: 600;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.record-attr-btn:hover { background: #2563eb; color: #fff; }

/* --- Section card ---------------------------------------------------- */
.record-section {
  background: #fff;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.record-section-title {
  margin: 0 0 12px;
  font-size: calc(12px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Field grid — now tighter since tier badges moved to Attributes ---- */
.field-grid {
  display: grid;
  gap: 6px 12px;
}
.field-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .field-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .field-grid-4, .field-grid-3, .field-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .field-grid-4, .field-grid-3, .field-grid-2 { grid-template-columns: 1fr; }
}

.field {
  padding: 6px 10px;
  border: 1px solid var(--border-soft, #eef0f3);
  border-radius: 6px;
  background: #fafbfc;
  min-width: 0;
}
/* Column names: bold + subtle gray so the label reads as a heading. */
.field-name {
  font-size: calc(10px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
/* Values: less gray than the label — darker slate, medium weight — so the
   value stands out as the meaningful content. */
.field-value {
  font-size: calc(11.5px * var(--ui-font-scale, 1));
  color: #1e293b;
  font-weight: 500;
  word-break: break-word;
  line-height: 1.4;
}
.field-multi { font-size: calc(11px * var(--ui-font-scale, 1)); }
.field-multi-count {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2fb;
  color: #1e40af;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  margin-bottom: 4px;
}
.field-multi-list {
  margin: 0;
  padding-left: 16px;
  color: #1e293b;
  font-size: calc(11.5px * var(--ui-font-scale, 1));
}
.field-multi-list li { margin: 1px 0; word-break: break-word; }

/* --- Tier badges ----------------------------------------------------- */
.tier-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: calc(9px * var(--ui-font-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tier-DIRECT   { background: #dcfce7; color: #166534; border-color: #86efac; }
.tier-DERIVED  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.tier-NO_SOURCE { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* --- Payer 2-column card -------------------------------------------- */
.payer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .payer-grid { grid-template-columns: 1fr; } }
.payer-col {
  padding: 10px 12px;
  border: 1px solid var(--border-soft, #eef0f3);
  border-radius: 8px;
  background: #fafbfc;
}
.payer-col-title {
  margin: 0 0 8px;
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 4px;
}
.payer-defs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 12px;
  margin: 0;
  font-size: calc(11px * var(--ui-font-scale, 1));
}
.payer-defs dt {
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: calc(10px * var(--ui-font-scale, 1));
  display: flex;
  align-items: center;
  gap: 4px;
}
.payer-defs dd {
  margin: 0;
  color: #1e293b;
  font-weight: 500;
  word-break: break-word;
}
.payer-empty {
  color: var(--muted, #6b7280);
  font-size: calc(11px * var(--ui-font-scale, 1));
  padding: 8px 0;
}

/* --- Medical Condition (full-width block) ---------------------------- */
.med-condition-section {
  background: #fff;
}
.med-condition-body {
  padding: 4px 0;
}
.med-condition-text,
.med-condition-list {
  margin: 0;
  color: #1e293b;
  font-size: calc(12.5px * var(--ui-font-scale, 1));
  line-height: 1.55;
  text-align: justify;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.med-condition-list {
  padding-left: 20px;
  list-style-type: disc;
}
.med-condition-list li { margin: 2px 0; }

/* --- Census calendar (compact month grid) -----------------------------
   The code colours below are the single source of truth: the same class
   tints a whole day cell in the grid and the small chip in the legend, so
   a month reads as one band of colour. Day cells stay on a white panel in
   both themes — the palette is pastel and needs a light surface. */
.cal-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px 11px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-head {
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  color: #6b7280;
  text-align: center;
  padding: 0 0 5px;
}
.cal-head-we { color: #a3aab6; }
.cal-cell {
  position: relative;
  min-height: 42px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.cal-blank { background: transparent; border-color: transparent; }
.cal-cell:not(.cal-blank):hover {
  outline: 2px solid rgba(30, 64, 175, 0.35);
  outline-offset: -1px;
}
/* Day number in the corner; it inherits the cell's own code colour so the
   cell stays one tone. The 1st appends the month — "1 Dec". */
.cal-day {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  line-height: 1;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}
.cal-day-mon {
  margin-left: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cal-mark {
  font-size: calc(12px * var(--ui-font-scale, 1));
  font-weight: 800;
  letter-spacing: 0.2px;
  padding-top: 6px;   /* clears the corner day number */
}
.cal-status {
  font-size: calc(10px * var(--ui-font-scale, 1));
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  min-width: 20px;
  text-align: center;
}
.cal-A  { background: #dcfce7; color: #166534; }  /* admission */
.cal-P  { background: #dcfce7; color: #166534; }  /* present */
.cal-RA { background: #bbf7d0; color: #14532d; }  /* readmission */
.cal-D  { background: #e5e7eb; color: #374151; }  /* discharge */
.cal-L  { background: #fef3c7; color: #92400e; }  /* leave */
.cal-BH { background: #fde68a; color: #78350f; }  /* bed hold */
.cal-H  { background: #fee2e2; color: #991b1b; }  /* hospital */
.cal-T  { background: #fed7aa; color: #7c2d12; }  /* transfer */
.cal-none  { background: #f3f4f6; color: #9ca3af; }
.cal-other { background: #ede9fe; color: #5b21b6; }  /* code not in legend */
/* An unmarked day is a near-blank cell, not a grey block — the marks are
   what the eye should catch. */
.cal-cell.cal-none { background: #fafbfc; color: #c3cbd5; }

/* Legend doubles as the month's tally: chip · meaning · count. */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #eef2f6;
  font-size: calc(10px * var(--ui-font-scale, 1));
  color: #6b7280;
}
.cal-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-key.is-unused { opacity: 0.45; }
.cal-key-n {
  font-weight: 700;
  color: #334155;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Treatments container (table-like frame, card rows) --------------- */
.tx-container {
  border: 1px solid var(--border, #d6dadf);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
/* Column-label strip at the top of the container so cards below make
   sense at a glance. Mimics a table header row. */
.tx-container-head {
  display: grid;
  grid-template-columns: 60px 140px 1fr minmax(220px, 30%);
  gap: 12px;
  padding: 8px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (max-width: 900px) {
  .tx-container-head { grid-template-columns: 60px 1fr; }
  .tx-container-head .tx-h-name,
  .tx-container-head .tx-h-meta { display: none; }
}
.tx-container-body {
  display: flex;
  flex-direction: column;
}

/* --- Individual treatment card --------------------------------------- */
.tx-card {
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f3;
  background: #fff;
  transition: background 100ms ease;
}
.tx-card:last-child { border-bottom: 0; }
.tx-card:hover { background: #fafbfc; }

.tx-card-head {
  display: grid;
  grid-template-columns: 60px 140px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .tx-card-head { grid-template-columns: 60px 1fr; }
  .tx-type-badge { grid-column: 1 / -1; }
  .tx-name-block { grid-column: 1 / -1; }
}

.tx-line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  background: #eef2fb;
  color: #1e40af;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: calc(11px * var(--ui-font-scale, 1));
}
.tx-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #475569;
  background: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  height: 24px;
}
.tx-type-badge.tx-type-med { background: #dbeafe; color: #1e3a8a; }
.tx-type-badge.tx-type-tx  { background: #fef3c7; color: #92400e; }
.tx-type-badge.tx-type-nut { background: #dcfce7; color: #14532d; }

.tx-name-block { min-width: 0; }
.tx-name-label {
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--muted, #6b7280);
}
.tx-name-value {
  font-size: calc(12.5px * var(--ui-font-scale, 1));
  color: #1e293b;
  line-height: 1.4;
  font-weight: 500;
  /* Critical: allow long treatment descriptions to wrap cleanly. */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* --- L1 validation chip + popover ------------------------------------ */
.l1-chip {
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  padding: 3px 10px;
  transition: transform 60ms ease;
}
.l1-chip:hover { transform: translateY(-1px); }
.l1-chip .l1-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
/* Fully saturated backgrounds so the L1/L2 status reads at a glance from
   across the treatment table. Compound selectors (.l1-chip.l1-clean) so they
   always win over the neutral .tx-chip base — the color is permanent, not a
   hover-only effect. */
.l1-chip.l1-clean {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
  box-shadow: 0 1px 2px rgba(22, 101, 52, 0.25);
}
.l1-chip.l1-clean:hover { background: #15803d; }
.l1-chip.l1-clean .l1-dot { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }

.l1-chip.l1-dirty {
  background: #dc2626;
  color: #fff;
  border-color: #b91c1c;
  box-shadow: 0 1px 2px rgba(153, 27, 27, 0.28);
}
.l1-chip.l1-dirty:hover { background: #b91c1c; }
.l1-chip.l1-dirty .l1-dot { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }

/* Keep the label text white too — the .tx-chip-value default is dark. */
.l1-chip.l1-clean .tx-chip-value,
.l1-chip.l1-dirty .tx-chip-value { color: #fff; }

.l1-pin { font-size: calc(9.5px * var(--ui-font-scale, 1)); opacity: 0.95; filter: grayscale(0) drop-shadow(0 0 1px rgba(0,0,0,0.15)); }

/* L2 chip is the same shape as L1 but a hair narrower and slightly
   flatter so the pair reads as two distinct validations at a glance. */
.l2-chip {
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Popover reused for L2 — chip listing the matched keywords. */
.l2-hit-chip {
  display: inline-block;
  padding: 1px 6px;
  margin: 2px 3px 0 0;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: calc(10px * var(--ui-font-scale, 1));
  font-weight: 600;
}

/* Highlight matched supply keywords inside the treatment Name so users
   see what phrases drove the L2 decision. Warm amber underline — reads
   as an annotation rather than a warning. */
mark.tx-kw-hit {
  background: linear-gradient(180deg, transparent 55%, #fde68a 55%);
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  cursor: help;
}

/* Popover — absolute-positioned singleton, appended to body. */
.l1-popover {
  position: absolute;
  z-index: 240;
  width: 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 12px 14px;
  font-size: calc(11.5px * var(--ui-font-scale, 1));
  color: #1e293b;
}
.l1-popover.hidden { display: none; }
.l1-pop-arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
}
.l1-pop-head {
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
  margin-bottom: 6px;
}
.l1-pop-current {
  padding: 6px 8px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: calc(11px * var(--ui-font-scale, 1));
  margin-bottom: 10px;
}
.l1-clean-text { color: #166534; }
.l1-dirty-text { color: #991b1b; }
.l1-source { color: #64748b; font-size: calc(10.5px * var(--ui-font-scale, 1)); }
.l1-current-reason {
  margin-top: 3px;
  color: #475569;
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-style: italic;
}
.l1-pop-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.l1-pop-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.l1-pop-radio:hover { background: #f1f5f9; }
.l1-radio-label.l1-clean-label { color: #166534; }
.l1-radio-label.l1-dirty-label { color: #991b1b; }
.l1-pop-reason { display: flex; flex-direction: column; gap: 4px; }
.l1-pop-reason span {
  font-size: calc(10px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.l1-pop-reason textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d6dadf;
  border-radius: 6px;
  font-family: inherit;
  font-size: calc(11px * var(--ui-font-scale, 1));
  resize: vertical;
  min-height: 44px;
}
.l1-pop-reason textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.l1-pop-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Metadata chips (Category, Keyword, Count, Time, MarTarId). */
.tx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
  padding-left: 72px;  /* align under the name column, not under the line/type */
}
@media (max-width: 900px) { .tx-chips { padding-left: 0; } }
.tx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: calc(10.5px * var(--ui-font-scale, 1));
}
.tx-chip-label {
  font-weight: 700;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: calc(9px * var(--ui-font-scale, 1));
}
.tx-chip-value {
  color: #1e293b;
  font-weight: 500;
  word-break: break-word;
}

/* --- Daily schedule strip -------------------------------------------- */
.tx-schedule {
  padding-left: 72px;
  margin-top: 4px;
}
@media (max-width: 900px) { .tx-schedule { padding-left: 0; } }
.tx-schedule-label {
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--muted, #6b7280);
  margin-bottom: 4px;
}
.tx-shift-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-shift-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items: center;
}
@media (max-width: 700px) {
  .tx-shift-row { grid-template-columns: 1fr; }
}
.tx-shift-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  min-width: 0;
}
.tx-shift-time-label {
  font-size: calc(9px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.tx-shift-time-value {
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: 600;
  color: #1e293b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}
.tx-shift-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.tx-cells {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}
.tx-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 2px;
  border-radius: 4px;
  border: 1px solid #eef0f3;
  background: #fff;
  min-width: 0;
}
.tx-cell-day {
  font-size: calc(9px * var(--ui-font-scale, 1));
  color: var(--muted, #6b7280);
  font-weight: 600;
  line-height: 1;
}
.tx-cell-value {
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Color-coded value backgrounds (retain the palette from the old table). */
.tx-cell.tx-day-blank .tx-cell-value { color: #cbd5e1; }
.tx-cell.tx-day-num   { background: #eef2fb; border-color: #dbeafe; }
.tx-cell.tx-day-num .tx-cell-value { color: #1e40af; font-family: ui-monospace, monospace; }
.tx-cell.tx-day-A     { background: #dcfce7; border-color: #bbf7d0; }
.tx-cell.tx-day-A .tx-cell-value { color: #166534; }
.tx-cell.tx-day-X     { background: #fee2e2; border-color: #fecaca; }
.tx-cell.tx-day-X .tx-cell-value { color: #991b1b; }
.tx-cell.tx-day-tick  { background: #f0fdf4; border-color: #bbf7d0; }
.tx-cell.tx-day-tick .tx-cell-value { color: #15803d; font-size: calc(9.5px * var(--ui-font-scale, 1)); }
.tx-cell.tx-day-other { background: #f8fafc; border-color: #e2e8f0; }
.tx-cell.tx-day-other .tx-cell-value { color: #475569; }

/* Long dose readings (e.g. "√ tprn") need more room — expand the row. */
@media (max-width: 700px) {
  .tx-cells { grid-template-columns: repeat(7, 1fr); }
}

/* ============================================================
   Editable Billing section — one card per column with a stack of
   value inputs. "+ Add value" appends; each row has its own remove.
   ============================================================ */
.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.billing-field {
  padding: 8px 10px;
  border: 1px solid var(--border-soft, #eef0f3);
  border-radius: 8px;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.billing-field-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 0;
}
.billing-edited-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.3px;
}
.billing-value-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.billing-value-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.billing-value-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 6px;
  background: #fff;
  color: #1e293b;
  font-size: calc(11.5px * var(--ui-font-scale, 1));
  font-family: inherit;
  min-width: 0;
}
.billing-value-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.billing-remove-btn {
  border: 1px solid #fecaca;
  background: #fff;
  color: #991b1b;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  font-size: calc(13px * var(--ui-font-scale, 1));
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.billing-remove-btn:hover { background: #fee2e2; }
.billing-add-btn {
  align-self: flex-start;
  border: 1px dashed #94a3b8;
  background: transparent;
  color: #475569;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: 600;
  cursor: pointer;
}
.billing-add-btn:hover {
  background: #f1f5f9;
  border-color: #64748b;
  color: #1e293b;
}

/* ============================================================
   Attributes modal — column-to-mapping reference.
   Nested inside the fullscreen patient record modal.
   ============================================================ */
.cleaning-attr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: none;
  align-items: stretch;
  justify-content: center;
  z-index: 220;   /* above the record modal (z=200) */
  padding: 40px 24px;
}
.cleaning-attr-backdrop.active { display: flex; }
.cleaning-attr-frame {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.cleaning-attr-header {
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cleaning-attr-header h3 {
  margin: 0;
  font-size: calc(13.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: #1e293b;
}
.cleaning-attr-header .meta {
  font-size: calc(11px * var(--ui-font-scale, 1));
  color: var(--muted, #6b7280);
  margin-top: 2px;
}
.cleaning-attr-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  background: #fff;
}

.attr-legend {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr max-content 1fr;
  gap: 6px 10px;
  align-items: center;
  font-size: calc(11px * var(--ui-font-scale, 1));
  color: #475569;
  padding: 8px 10px;
  margin-bottom: 14px;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
}
@media (max-width: 700px) {
  .attr-legend { grid-template-columns: max-content 1fr; }
}

.attr-group { margin-bottom: 14px; }
.attr-group h4 {
  margin: 0 0 6px;
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, #6b7280);
  font-weight: 700;
}
.attr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(11px * var(--ui-font-scale, 1));
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.attr-table thead th {
  background: #f1f5f9;
  padding: 7px 10px;
  text-align: left;
  font-weight: 700;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.attr-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #eef0f3;
  vertical-align: top;
}
.attr-table tbody tr:last-child td { border-bottom: 0; }
.attr-table tbody tr:hover { background: #fafbfc; }
.attr-table .attr-name {
  width: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: 500;
  color: #1e293b;
  word-break: break-word;
}
.attr-table .attr-mapping {
  display: table-cell;
  color: #475569;
  line-height: 1.4;
}
.attr-table .attr-source {
  display: inline-block;
  margin-left: 8px;
  color: #475569;
}

/* --- "Clean records only" toggle (UAT 26 / 27) ------------------------ */
.cleaning-clean-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(11.5px * var(--ui-font-scale, 1)); white-space: nowrap; cursor: pointer;
}
.cleaning-clean-toggle input { margin: 0; }

/* --- Billing / Facility values come from the upload (UAT 17) ----------- */
/* The "+ Add value" control was removed; its rule is retained only so any
   cached markup can't render an unstyled orphan button. */
.billing-add-btn { display: none !important; }
.billing-source-note {
  font-size: calc(11px * var(--ui-font-scale, 1)); color: var(--muted, #6b7280);
  margin: -2px 0 10px; line-height: 1.45;
}

/* =====================================================================
   L1 validation group — Rule 1 + Rule 2 under one L1 heading.
   ===================================================================== */
.l1-group {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border, #d5d9e0); border-radius: 7px;
  overflow: hidden; margin-right: 4px;
}
.l1-group-label {
  display: inline-flex; align-items: center; padding: 0 8px;
  font-size: calc(10px * var(--ui-font-scale, 1)); font-weight: 800; letter-spacing: .06em;
  background: #f1f5f9; color: #475569;
  border-right: 1px solid var(--border, #d5d9e0);
}
/* The group's outer edge carries the combined verdict: L1 is clean only when
   both rules are clean. */
.l1-group-clean { border-color: #15803d; }
.l1-group-dirty { border-color: #b91c1c; }
.l1-group-clean .l1-group-label { background: #dcfce7; color: #14532d; }
.l1-group-dirty .l1-group-label { background: #fee2e2; color: #7f1d1d; }
.l1-group .l1-chip { border-radius: 0; border-top: 0; border-bottom: 0; margin: 0; }
.l1-group .l1-chip:last-child { border-right: 0; }

/* =====================================================================
   Burst Scrub — the Clean/Dirty verdict that came in with the upload.
   A deliberately different palette (teal / violet) from the green-red
   L1 rules: this verdict is the agency's, not one this system derived,
   and the two must stay visually separable where they disagree.
   ===================================================================== */
.burst-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 3px 7px; border-radius: 7px;
  border: 1px solid #99f6e4; background: #f0fdfa;
}
.burst-chip-label {
  font-size: calc(10px * var(--ui-font-scale, 1)); font-weight: 800; letter-spacing: .04em;
  color: #0f766e; text-transform: uppercase; white-space: nowrap;
}
.burst-chip-mixed { border-color: #fcd34d; background: #fffbeb; }
.burst-chip-mixed .burst-chip-label { color: #92400e; }
.burst-chip-dirty { border-color: #ddd6fe; background: #f5f3ff; }
.burst-chip-dirty .burst-chip-label { color: #5b21b6; }

.burst-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: 999px;
  font-size: calc(10.5px * var(--ui-font-scale, 1)); line-height: 1.7; white-space: nowrap;
  border: 1px solid transparent;
}
.burst-pill-time { font-weight: 700; opacity: .82; }
.burst-pill-status { font-weight: 600; }
/* Clean = teal, Dirty = violet — neither is the L1 green/red. */
.burst-clean { background: #ccfbf1; color: #0f766e; border-color: #5eead4; }
.burst-dirty { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.burst-none  { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }

/* Patient-level Burst Scrub block, under the name. */
.burst-section { margin-bottom: 14px; }
.burst-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.burst-summary {
  padding: 2px 10px; border-radius: 999px;
  font-size: calc(11px * var(--ui-font-scale, 1)); font-weight: 700;
  border: 1px solid #99f6e4; background: #f0fdfa; color: #0f766e;
}
.burst-summary.burst-chip-mixed { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.burst-summary.burst-chip-dirty { border-color: #ddd6fe; background: #f5f3ff; color: #5b21b6; }
.burst-note { font-size: calc(11px * var(--ui-font-scale, 1)); color: var(--muted, #6b7280); margin: 3px 0 7px; }
.burst-pill-row { display: flex; flex-wrap: wrap; gap: 5px; }

@media (prefers-color-scheme: dark) {
  .l1-group-label { background: #1e293b; color: #cbd5e1; }
  .burst-chip     { background: #0b2f2c; border-color: #115e59; }
  .burst-summary  { background: #0b2f2c; border-color: #115e59; color: #5eead4; }
  .burst-clean    { background: #134e4a; color: #99f6e4; border-color: #0f766e; }
  .burst-dirty    { background: #2e1065; color: #ddd6fe; border-color: #6d28d9; }
  .burst-none     { background: #1e293b; color: #94a3b8; border-color: #334155; }
}

/* --- Order window & schedule coverage ---------------------------------
   Marks are shown exactly as the sheet wrote them — an X stays red wherever it
   falls, because that is the record of what happened. A blank cell is the one
   that gets interpreted: the sheet recorded nothing, so it reads N/A (see
   .tx-cell-na). Whether a mark counts toward Rule 1 is decided separately, by
   the order's own start / discontinue dates. */
.tx-cell-blank { background: #fff; }
.tx-cell-blank .tx-cell-value { color: #cbd5e1; }

.tx-chip-window .tx-chip-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(10.5px * var(--ui-font-scale, 1));
}

.tx-shift-coverage {
  margin-top: 2px;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Some scheduled day inside the window carries no mark — worth a second look,
   so it is coloured rather than left to blend in with the label above it. */
.tx-shift-coverage-gap { color: #b45309; }

/* The parts the row's number is made of. Each segment is tinted to match the
   day cells it counts, so the eye can check the arithmetic against the grid
   immediately to its right rather than taking the total on trust. */
.tx-cov-head { font-variant-numeric: tabular-nums; }
.tx-cov-seg::before {
  content: '·';
  margin: 0 3px;
  color: #cbd5e1;
}
.tx-cov-given   { color: #15803d; }
.tx-cov-refused { color: #b91c1c; }
.tx-cov-gap     { color: #b45309; }
.tx-cov-outside { color: #94a3b8; }
/* The sheet's own Count for this row. Neutral while it agrees with the day
   cells; called out when it does not, because that disagreement is a finding
   about the source sheet, not a rendering detail. */
.tx-cov-src      { color: #64748b; font-style: italic; }
.tx-cov-src-diff { color: #b45309; font-style: normal; font-weight: 700; }

/* --- Rule 1: the N/A outcome ------------------------------------------
   The order was not in effect during this month, so there was nothing to
   judge. Deliberately a neutral slate — not green (nothing passed) and not
   red (nothing failed), because reading it as either is the mistake this
   state exists to prevent. */
.l1-chip.l1-na {
  background: #64748b;
  border-color: #64748b;
  color: #fff;
}
.l1-chip.l1-na:hover { background: #475569; }
.l1-chip.l1-na .l1-dot { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.l1-chip.l1-na .tx-chip-value { color: #fff; }
.l1-na-text { color: #475569; }
.l1-group-na { border-color: #64748b; }
.l1-group-na .l1-group-label { background: #e2e8f0; color: #334155; }

/* A day outside the order's own dates. Struck through rather than blanked so
   it reads as "not applicable", never as a missing entry. */
.tx-cell-na {
  background: repeating-linear-gradient(
    -45deg, #f8fafc, #f8fafc 3px, #eef1f5 3px, #eef1f5 6px);
  border-color: #e8ebef;
}
.tx-cell-na .tx-cell-day { color: #cbd5e1; }
.tx-cell-na .tx-cell-value {
  color: #94a3b8;
  font-size: calc(8.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* --- Piped multi-values ------------------------------------------------
   Several values for one field read inline — "45 | 67 | 58" — and wrap to a
   second line only when they need to. The dark-blue pipe is what makes the
   boundaries scannable at a glance; without it the run of numbers reads as one
   value. */
.field-piped {
  font-size: calc(11.5px * var(--ui-font-scale, 1));
  color: #1e293b;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}
.field-pipe {
  color: #1e3a8a;              /* dark blue — the separator, not a value */
  font-weight: 700;
  margin: 0 5px;
  user-select: none;
}
.field-val { white-space: nowrap; }
/* Piped fields put the count after the values, inline, so it costs no row. */
.field-multi-piped .field-multi-count {
  margin: 2px 0 0;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  padding: 0 6px;
  opacity: 0.85;
}
.med-condition-text.field-piped { margin: 0; }

/* --- Compact Patient identifiers --------------------------------------
   This section is nearly all short values (IDs, dates, a sex flag), so the
   roomy card used for narrative sections wasted most of its height on padding.
   Denser columns, tighter rows, and a label/value pair per line. */
.record-section[data-section="identifiers"] { padding: 12px 14px; }
.record-section[data-section="identifiers"] .record-section-title {
  margin-bottom: 8px;
  padding-bottom: 6px;
  font-size: calc(11px * var(--ui-font-scale, 1));
}
.record-section[data-section="identifiers"] .field-grid {
  gap: 4px 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.record-section[data-section="identifiers"] .field {
  padding: 3px 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: #fafbfc;
}
.record-section[data-section="identifiers"] .field-name {
  margin-bottom: 0;
  flex: 0 0 auto;
  max-width: 46%;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
}
.record-section[data-section="identifiers"] .field-value,
.record-section[data-section="identifiers"] .field-multi {
  margin-left: auto;
  text-align: right;
  font-size: calc(11px * var(--ui-font-scale, 1));
}
.record-section[data-section="identifiers"] .field-multi-piped {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.record-section[data-section="identifiers"] .field-multi-piped .field-piped {
  text-align: right;
  font-size: calc(11px * var(--ui-font-scale, 1));
}
/* A stacked list inside the compact grid would break the one-line rhythm, so
   it spans the full row instead of squeezing into a column. */
.record-section[data-section="identifiers"] .field:has(.field-multi-list) {
  grid-column: 1 / -1;
  display: block;
}

/* Editable Billing values stay as inputs (they must remain editable, so they
   can't be piped text), but they wrap side by side instead of stacking one per
   row — a field with four claim numbers now costs one line, not four. */
.billing-value-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.billing-value-row { flex: 1 1 150px; min-width: 0; }
.billing-value-input { padding: 4px 7px; font-size: calc(11px * var(--ui-font-scale, 1)); }
.billing-remove-btn { width: 22px; height: 22px; font-size: calc(12px * var(--ui-font-scale, 1)); }
.billing-field { padding: 6px 9px; gap: 4px; }

/* The unmapped-columns section is the same shape as identifiers — short values,
   many of them — so it gets the same dense treatment. */
.record-section[data-section="unmapped"] { padding: 12px 14px; }
.record-section[data-section="unmapped"] .field-grid {
  gap: 4px 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.record-section[data-section="unmapped"] .field { padding: 3px 8px; }

/* ======================================================================
   Heading hierarchy on the patient screen
   ----------------------------------------------------------------------
   Two levels, two colours, so the eye can find its way down a long record:

     orange  — main section headers ("Patient identifiers", "Billing",
               "MAR / TAR treatments", "Census", …)
     dark blue — sub-headings: the column names inside a section
               (AdmitLatest, InitialAdmitDate, Billing Code, …)

   Both shades are picked to clear WCAG AA on white (orange #c2410c ≈ 5.9:1,
   blue #1e3a8a ≈ 10.9:1) rather than for brightness — these sit behind dense
   clinical data and have to stay legible. Dark-theme variants follow at the
   bottom of this block.
   ====================================================================== */

/* --- Main headers (orange, bold) --------------------------------------- */
.record-section-title {
  color: #c2410c;
  font-weight: 800;
  border-bottom-color: #fed7aa;
}
/* The count badge inside a title keeps its own colour — it is data, not a
   heading, and inheriting orange would flatten the distinction. */
.record-section-title .tier-badge { color: inherit; }

/* --- Sub-headings: column names (dark blue, bold) ---------------------- */
.field-name,
.payer-defs dt,
.payer-col-title,
.tx-container-head > span,
.billing-field-head .field-name {
  color: #1e3a8a;
  font-weight: 700;
}
/* Values must stay darker-neutral so a bold blue label never competes with the
   value it labels. */
.field-value,
.field-piped,
.field-multi-list,
.payer-defs dd { color: #1e293b; }

@media (prefers-color-scheme: dark) {
  .record-section-title { color: #fdba74; border-bottom-color: #7c2d12; }
  .field-name,
  .payer-defs dt,
  .payer-col-title,
  .tx-container-head > span,
  .billing-field-head .field-name { color: #93c5fd; }
  .field-value,
  .field-piped,
  .field-multi-list,
  .payer-defs dd { color: #e2e8f0; }
  .field-pipe { color: #93c5fd; }
}
/* The app's own theme switch stamps data-theme on the root, which must win over
   the OS preference in both directions. */
[data-theme="dark"] .record-section-title { color: #fdba74; border-bottom-color: #7c2d12; }
[data-theme="dark"] .field-name,
[data-theme="dark"] .payer-defs dt,
[data-theme="dark"] .payer-col-title,
[data-theme="dark"] .tx-container-head > span,
[data-theme="dark"] .billing-field-head .field-name { color: #93c5fd; }
[data-theme="dark"] .field-value,
[data-theme="dark"] .field-piped,
[data-theme="dark"] .field-multi-list,
[data-theme="dark"] .payer-defs dd { color: #e2e8f0; }
[data-theme="dark"] .field-pipe { color: #93c5fd; }
[data-theme="light"] .record-section-title { color: #c2410c; border-bottom-color: #fed7aa; }
[data-theme="light"] .field-name,
[data-theme="light"] .payer-defs dt,
[data-theme="light"] .payer-col-title,
[data-theme="light"] .tx-container-head > span,
[data-theme="light"] .billing-field-head .field-name { color: #1e3a8a; }
[data-theme="light"] .field-pipe { color: #1e3a8a; }

/* ---- correction provenance (P-07) -------------------------------------
   A value that differs from the workbook it came from should say so. The
   badge marks the record; the panel says what changed, who changed it and
   why — which is what an audit asks and what "updated_at" alone could not
   answer. */

.cl-corrected {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  font-weight: 600;
  background: var(--warning-soft);
  color: var(--warning);
  cursor: pointer;
  border: none;
}
.cl-corrected:hover { filter: brightness(.96); }

.cl-edits {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
}
.cl-edits h5 {
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cl-edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 0;
  font-size: calc(12px * var(--ui-font-scale, 1));
  border-bottom: 1px solid var(--divider);
}
.cl-edit-row:last-child { border-bottom: none; }
.cl-edit-field { font-weight: 600; color: var(--text); }
.cl-edit-was {
  color: var(--text-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.cl-edit-now {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cl-edit-who { color: var(--text-muted); font-size: calc(11px * var(--ui-font-scale, 1)); margin-left: auto; }
.cl-edit-why { flex: 1 1 100%; color: var(--text-muted); font-size: calc(11px * var(--ui-font-scale, 1)); }