/* =====================================================================
   Wiederkehrende Rechnungen (Serien) – Modal-Styles.
   Bewusst als externes Stylesheet (keine Inline-Styles), damit die
   strikte CSP (style-src 'self', kein 'unsafe-inline') greift.
   ===================================================================== */

.rec-overlay {
  position: fixed; inset: 0; background: rgba(17, 24, 39, .55);
  z-index: 9998; display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: auto;
}
.rec-modal {
  background: #fff; border-radius: 16px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden;
}

.rec-header {
  padding: 20px 24px; color: #fff;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
}
.rec-header-title { font-size: 18px; font-weight: 700; }
.rec-header-sub { opacity: .9; font-size: 13px; margin-top: 4px; }

.rec-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.rec-field { display: flex; flex-direction: column; gap: 4px; }
.rec-row { display: flex; gap: 14px; }
.rec-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rec-label { font-size: 13px; font-weight: 600; }
.rec-input {
  padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 14px; font-family: inherit;
}
.rec-hint { font-size: 12px; color: #6b7280; }
.rec-err { display: none; color: #b91c1c; font-size: 13px; }

.rec-footer {
  padding: 16px 24px; border-top: 1px solid #e5e7eb; background: #f9fafb;
  display: flex; justify-content: flex-end; gap: 12px;
}
.rec-btn-secondary {
  background: none; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 9px 18px; font-size: 14px; cursor: pointer; font-family: inherit;
}
.rec-btn-primary {
  background: #4f46e5; color: #fff; border: none; border-radius: 8px;
  padding: 9px 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}

.rec-list { padding: 20px 24px; max-height: 60vh; overflow: auto; min-height: 120px; }
.rec-error-text { color: #b91c1c; }
.rec-empty { color: #6b7280; text-align: center; padding: 24px; }

/* Tabelle: hoehere Spezifitaet als die globalen thead/tbody-Regeln in
   dashboard.css, damit deren Padding/Farben hier nicht durchschlagen. */
.rec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rec-table thead th {
  padding: 8px 6px; text-align: left; color: #6b7280;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: normal; background: transparent; border-bottom: none;
}
.rec-table tbody tr { border-top: 1px solid #eef0f3; cursor: default; }
.rec-table tbody tr:hover { background: transparent; }
.rec-table tbody td { padding: 10px 6px; font-size: 14px; }
.rec-cell-actions { white-space: nowrap; text-align: right; }

.rec-serie-title { font-weight: 600; }
.rec-serie-sub { color: #6b7280; font-size: 12px; }
.rec-status-active { color: #15803d; font-weight: 600; }
.rec-status-paused { color: #9ca3af; }
.rec-icon-btn { border: none; background: none; cursor: pointer; font-size: 16px; }