/* Billing Export Reports — index, pills, panel variants (handoff) */

.billable-widgets-wrapper .index {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--surface-0);
}

.billable-widgets-wrapper .index__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border);
}

.billable-widgets-wrapper .index__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: 1.2;
}

.billable-widgets-wrapper .index__subtitle {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.billable-widgets-wrapper .index__tools {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: none;
}

.billable-widgets-wrapper .index__tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: var(--surface-0);
  transition: background var(--dur-fast) var(--ease-standard);
}

.billable-widgets-wrapper .index__tool:hover {
  background: var(--surface-2);
}

.billable-widgets-wrapper .index__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.billable-widgets-wrapper .index--reports .index__table {
  min-width: 880px;
}

.billable-widgets-wrapper .index--reports .index__cols,
.billable-widgets-wrapper .index--reports .index__row {
  /* Default matches the historical 7-column layout (report, records, lines,
     last updated, issues, total, status). Live Tasks-widget config repaints
     this via --index-grid-cols (see ReportColumns.gridTemplate in
     billing-export-reports-widget.js). The fallback below is identical to
     ReportColumns' kind 'billing' DEFAULTS widths, so this rule renders the
     same whether or not the JS has run yet. */
  grid-template-columns: var(--index-grid-cols, 1.6fr 0.7fr 0.6fr 1.05fr 0.95fr 0.9fr 1.45fr);
}

/* ============================================
   ReportColumns (kind 'billing') class aliases — the shared registry
   (frontend/js/lib/report-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 the registry is shared with the (future)
   Provider Pay Export Reports (kind 'pay') 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, so only the special types need
   rules here. Mirrors the bridging billing-records.css does for
   RecordColumns (kind 'cbr').
============================================ */
.billable-widgets-wrapper .index--reports .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--reports .index__cols .index__head-amount { text-align: right; }
.billable-widgets-wrapper .index--reports .index__cols .index__head-status { padding-left: var(--space-16); }

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

.billable-widgets-wrapper .index--reports .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--reports .index__record-sub {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billable-widgets-wrapper .index--reports .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;
}

/* .index__status carries the live row's status pill + optional op-chip
   (ReportColumns' 'status' type prefers rep.statusHtml, which is
   renderStatusCell()'s output verbatim — same pill/op-chip markup the
   widget always rendered). Reproduces the original
   .index__cell-stack.index__cell--status layout (stacked, left-padded)
   under the registry's own class name. */
.billable-widgets-wrapper .index--reports .index__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-left: var(--space-16);
  min-width: 0;
}

.billable-widgets-wrapper .index__cols,
.billable-widgets-wrapper .index__row {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-8) var(--space-16);
}

.billable-widgets-wrapper .index__cols {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--border-faint);
  background: var(--surface-0);
}

.billable-widgets-wrapper .index__col {
  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__col--right { text-align: right; }
.billable-widgets-wrapper .index__col--center { text-align: center; }
.billable-widgets-wrapper .index__col--status { padding-left: var(--space-16); }

.billable-widgets-wrapper .index__cell--status {
  padding-left: var(--space-16);
}

.billable-widgets-wrapper .index__table .index__cell--status .pill,
.billable-widgets-wrapper .index__table .index__status .pill {
  font-size: 9px;
  padding: var(--space-1) var(--space-5);
  gap: var(--space-1);
}

.billable-widgets-wrapper .index__table .index__cell--status .pill__dot,
.billable-widgets-wrapper .index__table .index__status .pill__dot {
  width: 5px;
  height: 5px;
}

.billable-widgets-wrapper .index__row {
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border-faint);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.billable-widgets-wrapper .index__row:hover {
  background: var(--surface-inset, var(--surface-2));
}

.billable-widgets-wrapper .index__row--selected {
  background: var(--surface-tint);
  box-shadow: inset 3px 0 0 var(--primary);
}

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

.billable-widgets-wrapper .index__cell {
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billable-widgets-wrapper .index__cell--strong {
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.billable-widgets-wrapper .index__cell--right {
  text-align: right;
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.billable-widgets-wrapper .index__cell--center { text-align: center; }

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

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

.billable-widgets-wrapper .index__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: 15px 16px;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* Status pill */
.billable-widgets-wrapper .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.billable-widgets-wrapper .pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
}

.billable-widgets-wrapper .pill--review { color: var(--review); background: var(--review-bg); border-color: var(--review-border); }
.billable-widgets-wrapper .pill--success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.billable-widgets-wrapper .pill--info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.billable-widgets-wrapper .pill--warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.billable-widgets-wrapper .pill--danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.billable-widgets-wrapper .pill--neutral { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-border); }

/* Operational chip */
.billable-widgets-wrapper .op-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}

.billable-widgets-wrapper .op-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex: none;
  background: var(--neutral);
}

.billable-widgets-wrapper .op-chip--info .op-chip__dot { background: var(--info); }
.billable-widgets-wrapper .op-chip--warning .op-chip__dot { background: var(--warning); }
.billable-widgets-wrapper .op-chip--danger .op-chip__dot { background: var(--danger); }
.billable-widgets-wrapper .op-chip--success .op-chip__dot { background: var(--success-solid, var(--success)); }

/* Panel section helpers */
.billable-widgets-wrapper .panel4__eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
  margin: 0 0 var(--space-6);
}

.billable-widgets-wrapper .panel4__section-label {
  margin: var(--space-14) 0 var(--space-8);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

.billable-widgets-wrapper .panel4__section-label:first-child {
  margin-top: 0;
}

.billable-widgets-wrapper .panel4__note {
  margin-top: var(--space-10);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.5;
}

.billable-widgets-wrapper .review-panel__title .pill {
  vertical-align: middle;
}

/* Readiness checklist */
.billable-widgets-wrapper .readiness {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-faint);
}

.billable-widgets-wrapper .readiness:first-of-type { border-top: none; }

.billable-widgets-wrapper .readiness__icon {
  display: inline-flex;
  flex: none;
  margin-top: 1px;
  color: var(--fg-muted);
}

.billable-widgets-wrapper .readiness--ok .readiness__icon { color: var(--success); }
.billable-widgets-wrapper .readiness--blocked .readiness__icon { color: var(--danger); }

.billable-widgets-wrapper .readiness__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}

.billable-widgets-wrapper .readiness__note {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* Callouts */
.billable-widgets-wrapper .callout {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-10);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}

.billable-widgets-wrapper .callout__title {
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}

.billable-widgets-wrapper .callout--warning {
  background: var(--warning-callout);
  border-color: var(--warning-border);
  color: var(--warning);
}

.billable-widgets-wrapper .callout--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.billable-widgets-wrapper .callout--info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

.billable-widgets-wrapper .callout--success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

/* Result / record rows */
.billable-widgets-wrapper .result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-faint);
}

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

.billable-widgets-wrapper .result__label {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.billable-widgets-wrapper .result__value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.billable-widgets-wrapper .line__source {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-faint);
}

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

.billable-widgets-wrapper .line__source-id {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.billable-widgets-wrapper .line__source-meta {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.45;
}

.billable-widgets-wrapper .calc-card--bordered {
  background: var(--surface-0);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
}

/* Button modifiers for export panel actions */
.billable-widgets-wrapper .btn--secondary {
  background: var(--surface-0);
  border: 1px solid var(--border-strong);
  color: var(--fg-2);
}

.billable-widgets-wrapper .btn--secondary:hover {
  background: var(--surface-2);
}

.billable-widgets-wrapper .btn--sm {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-xs);
}

.billable-widgets-wrapper .billable-list__tools [data-ber-toggle-btn],
.billable-widgets-wrapper .billable-list__tools [data-pper-toggle-btn] {
  width: 5.5rem;
  height: var(--header-tool-height, 26px);
  min-height: var(--header-tool-height, 26px);
  padding: 0 var(--space-12);
  line-height: 1;
  font-weight: var(--fw-regular);
  justify-content: center;
}

.billable-widgets-wrapper .btn--full {
  width: 100%;
}

.billable-widgets-wrapper .btn--md {
  padding: var(--space-10) var(--space-16);
}

.billable-widgets-wrapper .btn svg {
  flex: none;
}

.billable-widgets-wrapper .review-panel__title--with-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.billable-widgets-wrapper .review-panel__title-main {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  min-width: 0;
}

.billable-widgets-wrapper .review-panel__workflow-status {
  display: inline-flex;
  align-items: center;
  flex: none;
}