/* Billing-Sektions-Panels (SPEC-0062) — Light-DOM-Port der Bestands-Styles
   BillingDataTable.vue + BillingConfigurationDialog.vue. Token-only. */

.billing-panel { display: flex; flex-direction: column; gap: var(--core-space-md, 1rem); min-height: 0; }
.billing-dialog { display: flex; flex-direction: column; gap: var(--core-space-md, 1rem); }

.billing-card { display: flex; flex-direction: column; gap: var(--core-space-sm, 0.5rem); }
.billing-card__title { margin: 0; }
.billing-card__actions { display: flex; gap: var(--core-space-sm, 0.5rem); align-items: center; flex-wrap: wrap; margin-top: var(--core-space-sm, 0.5rem); }
.billing-interim-note { color: var(--core-color-text-muted, #64748b); font-size: 0.82rem; }

.billing-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.billing-table th,
.billing-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--core-color-border, #e2e8f0);
}
.billing-table th { color: var(--core-color-text-muted, #64748b); font-weight: 600; }

/* ---- Konfiguration ---- */
.billing-config__tabs { display: flex; gap: var(--core-space-sm, 0.5rem); flex-wrap: wrap; }
.billing-config__panel { min-width: 0; }
.billing-config__hint { margin: 0 0 var(--core-space-sm, 0.5rem); color: var(--core-color-text-muted, #64748b); font-size: 0.85rem; }
.billing-config__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.billing-config__table th,
.billing-config__table td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--core-color-border, #e2e8f0);
  vertical-align: middle;
}
.billing-config__table th { color: var(--core-color-text-muted, #64748b); font-weight: 600; }

/* ---- Konfigurations-Editoren (SPEC-0152, Port der scoped Styles aus
   BillingConfigurationDialog.vue) ---- */
.billing-config__row-actions { display: flex; gap: var(--core-space-xs, 0.35rem); justify-content: flex-end; flex-wrap: wrap; }
.billing-config__subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--core-space-md, 1rem); margin-top: var(--core-space-md, 1rem); }
.billing-config__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--core-space-xs, 0.35rem); }
.billing-config__chips li { display: inline-flex; align-items: center; gap: 2px; }
.billing-config__inline-add { display: flex; gap: var(--core-space-xs, 0.35rem); align-items: center; margin-top: var(--core-space-sm, 0.5rem); flex-wrap: wrap; }
.billing-config__inline-add input { flex: 1 1 auto; min-width: 0; }
.billing-config__limit-row { display: flex; gap: var(--core-space-xs, 0.35rem); align-items: center; margin-bottom: var(--core-space-xs, 0.35rem); }
.billing-config__limit-row input { min-width: 0; }
.billing-config__tier-row { display: flex; gap: var(--core-space-xs, 0.35rem); align-items: center; margin-bottom: var(--core-space-xs, 0.35rem); }
.billing-config__tier-row input { min-width: 0; width: 8rem; }
.billing-config__form { margin-top: var(--core-space-md, 1rem); padding-top: var(--core-space-md, 1rem); border-top: 1px solid var(--core-color-border, #e2e8f0); }
.billing-config__form h4 { margin: 0 0 var(--core-space-sm, 0.5rem); }
.billing-config__form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--core-space-sm, 0.5rem); }
.billing-config__field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.billing-config__field--inline { flex-direction: row; align-items: center; gap: var(--core-space-sm, 0.5rem); }
.billing-config__form-actions { display: flex; gap: var(--core-space-sm, 0.5rem); justify-content: flex-end; margin-top: var(--core-space-sm, 0.5rem); }
.billing-config__table input,
.billing-config__inline-add input,
.billing-config__limit-row input,
.billing-config__tier-row input,
.billing-config__field input:not([type="checkbox"]),
.billing-config__field select {
  background: var(--control-bg, var(--surface, #fff));
  color: var(--control-text, var(--text, inherit));
  border: 1px solid var(--control-border, var(--border, #cbd5e1));
  border-radius: var(--radius-md, 6px);
  padding: var(--space-2, 0.35rem) var(--space-3, 0.5rem);
  font: inherit;
  box-sizing: border-box;
}

/* Bestand BillingConfigurationDialog.vue — Rumpf und aufgeklappter Bereich.
 * `.billing-config__tabs` und `__panel` waren portiert, die Wurzel `.billing-config`
 * und `__expand` nicht: die Abschnitte lagen ohne Spaltenfluss uebereinander. */
.billing-config {
  display: flex;
  flex-direction: column;
  gap: var(--core-space-md, 1rem);
}

.billing-config__expand {
  background: var(--core-color-surface-muted, var(--surface));
}