/* Design-Token-Grundstein (A-17-Anfang, kein Vollausbau): Farben, Abstände und
   semantische Zustände zentral als Custom Properties — Screens beziehen Werte nur
   von hier. Die Ampel-/Erfolgs-Tokens sind semantisch benannt (ok/Warnung/kritisch),
   nie nach Farbe. Mandanten-Branding (Phase 4) tauscht diese Werte, keinen Code. */
:root {
    --finanz-color-text: #1d1d1f;
    --finanz-color-muted: #6b6b70;
    --finanz-color-surface: #ffffff;
    --finanz-color-surface-alt: #f4f4f6;
    --finanz-color-border: #d9d9de;
    --finanz-color-accent: #2f6f4f;
    --finanz-color-state-ok: #2f6f4f;
    --finanz-color-state-ok-surface: #e8f2ec;
    --finanz-color-state-warn: #8a6d1a;
    --finanz-color-state-warn-surface: #fdf3d8;
    --finanz-color-state-critical: #a33333;
    --finanz-color-state-critical-surface: #f9e8e8;
    --finanz-space-1: 0.25rem;
    --finanz-space-2: 0.5rem;
    --finanz-space-3: 1rem;
}

/* ---- Basisklassen der RCL-Komponenten (vorher ungestylt) ---- */

.document-table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--finanz-space-2);
}

.document-table th,
.document-table td {
    padding: var(--finanz-space-1) var(--finanz-space-2);
    border-bottom: 1px solid var(--finanz-color-border);
    text-align: left;
    vertical-align: top;
}

.document-table th {
    color: var(--finanz-color-muted);
    font-weight: 600;
}

.empty-hint {
    color: var(--finanz-color-muted);
}

.review-reason {
    background: var(--finanz-color-state-warn-surface);
    color: var(--finanz-color-state-warn);
    padding: var(--finanz-space-2) var(--finanz-space-3);
    border-radius: 0.375rem;
}

/* ---- Monatsblick (F-ANA-001, 04-mvp 6.3) ---- */

.monthly-view {
    max-width: 56rem;
}

.monthly-header {
    display: flex;
    align-items: center;
    gap: var(--finanz-space-3);
}

.monthly-header h2 {
    margin: 0;
    min-width: 12rem;
    text-align: center;
}

.month-nav {
    border: 1px solid var(--finanz-color-border);
    background: var(--finanz-color-surface);
    border-radius: 0.375rem;
    padding: var(--finanz-space-1) var(--finanz-space-3);
    font-size: 1.1rem;
    cursor: pointer;
}

/* Erfolgsmoment-Satz: Erfolg = semantisches Token; der „Mehr"-Fall bleibt bewusst
   neutral (Ton-Regel Story 02 — nie Alarmfarbe, nie Vorwurf). */
.success-sentence {
    font-size: 1.15rem;
    margin-block: var(--finanz-space-3);
}

.success-sentence.success {
    color: var(--finanz-color-state-ok);
    background: var(--finanz-color-state-ok-surface);
    padding: var(--finanz-space-2) var(--finanz-space-3);
    border-radius: 0.375rem;
}

.category-list {
    display: flex;
    flex-direction: column;
}

/* Mobile-first (U-01: Handy zuerst): Name/Betrag/Delta in einer Zeile, der Balken
   volle Breite darunter; erst ab Tablet-Breite die einzeilige Vier-Spalten-Form. */
.category-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "name amount delta"
        "bar bar bar";
    gap: var(--finanz-space-1) var(--finanz-space-2);
    align-items: center;
    padding: var(--finanz-space-2) 0;
    border-bottom: 1px solid var(--finanz-color-border);
    cursor: pointer;
}

.category-name { grid-area: name; }
.category-bar { grid-area: bar; }
.category-amount { grid-area: amount; }
.category-delta { grid-area: delta; }

@media (min-width: 48rem) {
    .category-row {
        grid-template-columns: 11rem 1fr 7rem 7rem;
        grid-template-areas: "name bar amount delta";
    }
}

.category-row:hover {
    background: var(--finanz-color-surface-alt);
}

.category-bar {
    display: block;
    height: 0.9rem;
    background: var(--finanz-color-surface-alt);
    border-radius: 0.45rem;
    overflow: hidden;
}

.category-bar-fill {
    display: block;
    height: 100%;
    background: var(--finanz-color-accent);
}

.category-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.category-delta {
    text-align: right;
    color: var(--finanz-color-muted);
    font-variant-numeric: tabular-nums;
}

.category-positions {
    margin-inline: var(--finanz-space-3);
}

/* Bon-Foto an der Ausgabe (Ebene 3, FK-011) */
.expense-photo {
    max-width: 22rem;
    max-height: 30rem;
    object-fit: contain;
    border: 1px solid var(--finanz-color-border);
    border-radius: 0.375rem;
}

/* ---- Kontenkreis + Klärung (K2: F-HHB-008, Story 06) ---- */

.muted {
    color: var(--finanz-color-muted);
}

.import-result {
    background: var(--finanz-color-state-ok-surface);
    color: var(--finanz-color-state-ok);
    padding: var(--finanz-space-2) var(--finanz-space-3);
    border-radius: 0.375rem;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: var(--finanz-space-2);
    max-width: 24rem;
}

.account-form label {
    display: flex;
    flex-direction: column;
    gap: var(--finanz-space-1);
}

.account-form label.checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--finanz-space-2);
}

.clearing-card {
    border: 1px solid var(--finanz-color-border);
    border-radius: 0.375rem;
    padding: var(--finanz-space-2) var(--finanz-space-3);
    margin-block: var(--finanz-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--finanz-space-1);
}

.clearing-head {
    display: flex;
    gap: var(--finanz-space-3);
    align-items: baseline;
}

.clearing-head .amount {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.clearing-head .amount.negative {
    color: var(--finanz-color-state-critical);
}

.clearing-head .amount.positive {
    color: var(--finanz-color-state-ok);
}

.clearing-body .muted {
    margin-left: var(--finanz-space-2);
}

/* Karten-Hinweise („Gehört das zusammen?", Duplikat-Verdacht) — Warn-Ton, nie Alarm. */
.clarification-hint {
    background: var(--finanz-color-state-warn-surface);
    color: var(--finanz-color-state-warn);
    padding: var(--finanz-space-2) var(--finanz-space-3);
    border-radius: 0.375rem;
    display: flex;
    gap: var(--finanz-space-2);
    align-items: center;
    flex-wrap: wrap;
}

.clearing-actions {
    display: flex;
    gap: var(--finanz-space-2);
    align-items: center;
    flex-wrap: wrap;
}

.rule-suggestion {
    background: var(--finanz-color-state-ok-surface);
    padding: var(--finanz-space-2) var(--finanz-space-3);
    border-radius: 0.375rem;
    display: flex;
    gap: var(--finanz-space-2);
    align-items: center;
    flex-wrap: wrap;
}

/* ---- Restbudget-Ampel + Schnell-Buchung + Infoboard (F-ANA-005, F-HHB-004/005, F-BEN-004) ---- */

/* Farben ausschließlich über semantische Zustands-Tokens (F-QS-006). */
.headroom-bar {
    border-left: 0.5rem solid var(--finanz-color-border);
    background: var(--finanz-color-surface-alt);
    padding: var(--finanz-space-2) var(--finanz-space-3);
    border-radius: 0.375rem;
    margin-block: var(--finanz-space-2);
}

.headroom-bar.zone-green { border-left-color: var(--finanz-color-state-ok); background: var(--finanz-color-state-ok-surface); }
.headroom-bar.zone-yellow { border-left-color: var(--finanz-color-state-warn); background: var(--finanz-color-state-warn-surface); }
.headroom-bar.zone-red { border-left-color: var(--finanz-color-state-critical); background: var(--finanz-color-state-critical-surface); }

.headroom-main {
    display: flex;
    align-items: baseline;
    gap: var(--finanz-space-2);
    flex-wrap: wrap;
}

.headroom-amount {
    font-size: 1.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tile-row {
    display: flex;
    gap: var(--finanz-space-2);
    flex-wrap: wrap;
    margin-block: var(--finanz-space-2);
}

.favorite-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--finanz-space-1);
    padding: var(--finanz-space-2) var(--finanz-space-3);
    border: 1px solid var(--finanz-color-border);
    border-radius: 0.375rem;
    background: var(--finanz-color-surface);
    cursor: pointer;
    min-width: 6rem;
}

.favorite-tile:hover { background: var(--finanz-color-surface-alt); }

.tile-amount { font-variant-numeric: tabular-nums; color: var(--finanz-color-muted); }

.undo-line {
    background: var(--finanz-color-state-ok-surface);
    padding: var(--finanz-space-2) var(--finanz-space-3);
    border-radius: 0.375rem;
    display: flex;
    gap: var(--finanz-space-2);
    align-items: center;
}

.board-card {
    border: 1px solid var(--finanz-color-border);
    border-radius: 0.375rem;
    padding: var(--finanz-space-2) var(--finanz-space-3);
    margin-block: var(--finanz-space-2);
    display: flex;
    justify-content: space-between;
    gap: var(--finanz-space-2);
    align-items: center;
    flex-wrap: wrap;
}

.board-card.kind-systemerror {
    background: var(--finanz-color-state-warn-surface);
    border-color: var(--finanz-color-state-warn);
}

.board-actions {
    display: flex;
    gap: var(--finanz-space-1);
    flex-wrap: wrap;
}