/* Billing Records — Customer Billing Records index + Panel 4.
   Reuses the dashboard tokens on .billable-widgets-wrapper (billable-lines.css)
   and the shared .index / .pill / .review-panel / .calc-card / .field components
   from billing-export-reports.css. Only the components unique to this surface
   live here. Billables sub-tab chrome is shared in billables-tabs.css. */

/* ============================================
   Index column template — Billing Records
   Customer · Record · Billing dates · Lines ·
   Mapping · Total · Status
============================================ */
.billable-widgets-wrapper .index--records .index__table {
  min-width: 880px;
}

.billable-widgets-wrapper .index--records .index__cols,
.billable-widgets-wrapper .index--records .index__row {
  /* Default matches the historical 7-column layout (customer, record, date
     range, lines, mapping, total, status). Live Tasks-widget config repaints
     this via --index-grid-cols (see RecordColumns.gridTemplate in
     billing-records-widget.js). */
  grid-template-columns: var(--index-grid-cols, 1.3fr 1.7fr 1.05fr 0.5fr 1fr 0.85fr 1.15fr);
  padding-left: 42px;
}

/* ============================================
   RecordColumns (kind 'cbr') class aliases — the shared registry
   (frontend/js/lib/record-columns.js) emits its own class names
   (index__head-amount/-status, index__record(-id|-sub), index__amount,
   index__status) instead of this surface's pre-existing index__col* /
   index__cell* BEM scheme, since it's shared with the Provider Pay (kind
   'ppr') index too. These rules make the registry's output visually match
   the original hardcoded layout. Plain header/body cells (no special type)
   already inherit the generic .index__col / .index__cell rules above from
   billing-export-reports.css, so only the special types need rules here.
============================================ */
.billable-widgets-wrapper .index--records .index__cols > span {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billable-widgets-wrapper .index--records .index__cols .index__head-amount { text-align: right; }
.billable-widgets-wrapper .index--records .index__cols .index__head-status { padding-left: var(--space-16); }

.billable-widgets-wrapper .index--records .index__record {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.billable-widgets-wrapper .index--records .index__record-id {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billable-widgets-wrapper .index--records .index__record-sub {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billable-widgets-wrapper .index--records .index__amount {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billable-widgets-wrapper .index--records .index__status {
  padding-left: var(--space-16);
}

/* Match the compact in-table pill sizing the old .pill markup used, and add
   back its leading status dot via ::before (the shared .status badge has no
   dot of its own). */
.billable-widgets-wrapper .index--records .index__status .status {
  gap: var(--space-1);
  font-size: 9px;
  padding: var(--space-1) var(--space-5);
}

.billable-widgets-wrapper .index--records .index__status .status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
}

.billable-widgets-wrapper .index--records .index__row-wrap {
  position: relative;
}

.billable-widgets-wrapper .index--records .index__row-wrap[hidden] {
  display: none;
}

.billable-widgets-wrapper .index--records .index__row-wrap--packaged {
  box-shadow: inset 0 0 0 2px var(--warning-border);
}

.billable-widgets-wrapper .index--records .index__row-wrap--packaged.index__row-wrap--selected .index__row--selected {
  box-shadow: inset 3px 0 0 var(--primary), inset 0 0 0 2px var(--warning-border);
}

.billable-widgets-wrapper .index--records .index__row {
  width: 100%;
}

/* ============================================
   Mapping signal — accounting-destination readiness
============================================ */
.billable-widgets-wrapper .map-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
  white-space: nowrap;
}

.billable-widgets-wrapper .map-signal__icon {
  display: inline-flex;
  flex: none;
}

.billable-widgets-wrapper .map-signal--ok { color: var(--success); }
.billable-widgets-wrapper .map-signal--warn { color: var(--warning); }
.billable-widgets-wrapper .map-signal--block { color: var(--danger); }

/* ============================================
   Line row (Panel 4) — compact line with an
   expandable source trace + return control.
   .line__source* are styled in billing-export-reports.css.
============================================ */
.billable-widgets-wrapper .line {
  border-top: 1px solid var(--border-faint);
}

.billable-widgets-wrapper .line:first-child {
  border-top: none;
}

.billable-widgets-wrapper .line__main {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--space-10);
  padding: var(--space-8) 0;
}

.billable-widgets-wrapper .line__main > span:not(.line__amount) {
  min-width: 0;
}

.billable-widgets-wrapper .line__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}

.billable-widgets-wrapper .line__toggle-icon {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.billable-widgets-wrapper .line__toggle[aria-expanded='true'] .line__toggle-icon {
  transform: rotate(90deg);
}

.billable-widgets-wrapper .line__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  min-width: 0;
}

.billable-widgets-wrapper .line__name-text {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

.billable-widgets-wrapper .line__meta {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billable-widgets-wrapper .line__amount {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.billable-widgets-wrapper .line__trace {
  border-top: 1px solid var(--border-faint);
  background: var(--surface-1);
  margin: 0 calc(-1 * var(--space-10));
  padding: var(--space-4) var(--space-10) var(--space-10);
}

.billable-widgets-wrapper .line__trace[hidden] {
  display: none;
}

.billable-widgets-wrapper .line__trace-label {
  padding: var(--space-10) 0 var(--space-6);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.billable-widgets-wrapper .calc-card--bordered:has(.line):not(.ppr-lines-card) {
  padding: 0 var(--space-10);
}

.billable-widgets-wrapper .calc-card--bordered .line__source:first-child {
  border-top: 1px solid var(--border-faint);
}

/* ============================================
   Disposition control (return ×) — returns a line
   and its source Billable Lines to Billable Lines.
============================================ */
.billable-widgets-wrapper .disp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  background: var(--surface-0);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.billable-widgets-wrapper .disp:hover {
  background: var(--danger-bg);
}

.billable-widgets-wrapper .disp[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================
   Panel 4 footnote (under the primary action)
============================================ */
.billable-widgets-wrapper .billing-records-foot-note {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--fg-muted);
}

/* ============================================
   Export packaging panel — calc rows + callout
============================================ */
.billable-widgets-wrapper .calc-row__label {
  display: block;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.billable-widgets-wrapper .calc-row__label .calc-row__basis {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-normal);
  color: var(--fg-muted);
}

.billable-widgets-wrapper .calc-card .calc-row--total {
  border-bottom: none;
  border-top: 1px solid var(--border-faint);
  margin-top: var(--space-4);
  padding-top: var(--space-12);
}

.billable-widgets-wrapper .index--records .calc-card .calc-row--last {
  border-bottom: none;
}

.billable-widgets-wrapper .calc-card + .callout--warning {
  margin-top: var(--space-10);
}

/* ============================================
   Panel 4 detail rows (RecordDetail.detailRowsHtml output) — a key/value
   grid mirroring hil-widget's .hil-record-detail-grid* (custom.css), used
   here so live detailed_view fields read consistently with HIL's own
   record-detail surface. Used by detailFieldRows() in
   billing-records-widget.js for the under_review / exported panels.
============================================ */
.billable-widgets-wrapper .record-detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-8) var(--space-10);
  font-size: var(--text-sm);
  line-height: 1.5;
  word-break: break-word;
}

.billable-widgets-wrapper .record-detail-grid-key {
  color: var(--fg-muted);
  padding-top: 1px;
}

.billable-widgets-wrapper .record-detail-grid-value {
  color: var(--fg-1);
  align-self: start;
}