/* ==========================================================================
   Rechnungsliste und -detail. Farben nur über Klassen (CSP: keine Inline-Styles).
   ========================================================================== */

.rechnung-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kachel--achtung { border-color: var(--warning); }
.kachel--achtung .kachel-wert { color: var(--warning); }

.rechnung-tabelle td { vertical-align: top; }
/* Engere Zellen und gekürzte E-Mail-Adressen, damit die Aktionen ohne seitliches Scrollen sichtbar bleiben */
.rechnung-tabelle th, .rechnung-tabelle td { padding-left: 14px; padding-right: 14px; }
.rechnung-email { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rechnung-tabelle td:last-child { width: 1%; white-space: nowrap; }
.rechnung-sub { font-size: 0.8rem; }
.rechnung-ueber { font-size: 0.82rem; color: var(--warning); font-weight: 560; }
.rechnung-hinweis { margin-top: 4px; }

/* Zeile, bei der eine Erinnerung oder Mahnung ansteht: Farbstreifen am linken Rand */
.rechnung--faellig td:first-child { box-shadow: inset 4px 0 0 var(--warning); }
.rechnung--mahnung_1 td:first-child,
.rechnung--mahnung_2 td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.rechnung--faellig td { background: color-mix(in srgb, var(--warning-soft) 45%, transparent); }
.rechnung--mahnung_1 td,
.rechnung--mahnung_2 td { background: color-mix(in srgb, var(--danger-soft) 45%, transparent); }
.rechnung--geloescht td { color: var(--text-muted); }
.rechnung--geloescht td .mono { text-decoration: line-through; }

/* Vom System erstellt, aber noch nicht per E-Mail versendet -- soll in der Masse auffallen */
.rechnung--erstellt td:first-child { box-shadow: inset 4px 0 0 var(--info); }
.rechnung--erstellt td { background: color-mix(in srgb, var(--info-soft) 55%, transparent); }

.rechnung-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.rechnung-aktionen form { margin: 0; }

.rechnung-tabelle tfoot td { font-weight: 620; background: var(--surface-2); border-top: 1px solid var(--border); }

.filter-feld--haken { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }

@media (max-width: 560px) {
    .rechnung-aktionen { justify-content: flex-start; }
}