<script setup>
import AppLayout from '@/layouts/AppLayout.vue'
import { ref, computed } from 'vue'

const steps = [
    { number: 1, label: 'Empfänger' },
    { number: 2, label: 'Positionen' },
    { number: 3, label: 'Vorschau & Freigabe' },
]

const currentStep = ref(1)
const pdfLoading = ref(false)

const today = new Date().toISOString().split('T')[0]
const in14Days = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]

const form = ref({
    kontaktSuche: '',
    organisation: '',
    anrede: '',
    vorname: '',
    nachname: '',
    adresse: '',
    plz: '',
    ort: '',
    email: '',
    rechnungsnummer: '',
    rechnungsdatum: today,
    zahlungsziel: in14Days,
    bic: '',
    iban: '',
    absenderEmail: 'finanzen@sachsen.pfadfinden.de',
    absenderTelefon: '',
    datenSpeichern: false,
    positionen: [
        { bezeichnung: '', menge: 1, einheit: 'Stk.', einzelpreis: '' },
    ],
    mwstSatz: 19,
})

const nettoSumme = computed(() =>
    form.value.positionen.reduce((sum, p) => {
        return sum + (parseFloat(p.menge) || 0) * (parseFloat(p.einzelpreis) || 0)
    }, 0)
)
const mwstBetrag = computed(() => nettoSumme.value * form.value.mwstSatz / 100)
const brutto = computed(() => nettoSumme.value + mwstBetrag.value)

function posGesamt(pos) {
    return (parseFloat(pos.menge) || 0) * (parseFloat(pos.einzelpreis) || 0)
}

function formatPreis(value) {
    return (parseFloat(value) || 0).toLocaleString('de-DE', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    }) + ' €'
}

function addPosition() {
    form.value.positionen.push({ bezeichnung: '', menge: 1, einheit: 'Stk.', einzelpreis: '' })
}

function removePosition(i) {
    if (form.value.positionen.length > 1) {
        form.value.positionen.splice(i, 1)
    }
}

async function openPdf() {
    pdfLoading.value = true
    try {
        const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? ''
        const res = await fetch('/rechnung/pdf', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
            body: JSON.stringify(form.value),
        })
        if (!res.ok) return
        const blob = await res.blob()
        window.open(URL.createObjectURL(blob), '_blank')
    } finally {
        pdfLoading.value = false
    }
}

const habenPositionen = computed(() =>
    form.value.positionen.some(p => p.bezeichnung.trim() !== '')
)
</script>

<template>
    <AppLayout title="Rechnung erstellen">
        <div class="page">

            <!-- ── Breadcrumb + Aktionen ── -->
            <div class="page-header">
                <nav class="breadcrumb">
                    <a href="/" class="bc-link">Startseite</a>
                    <font-awesome-icon icon="chevron-right" class="bc-sep" />
                    <span class="bc-current">Rechnung erstellen</span>
                </nav>
                <div class="header-actions">
                    <a href="/" class="btn-cancel">Abbrechen</a>
                </div>
            </div>

            <!-- ── Stepper ── -->
            <div class="stepper">
                <template v-for="(step, i) in steps" :key="step.number">
                    <div class="step"
                         :class="{
                             'step--active': step.number === currentStep,
                             'step--done':   step.number < currentStep,
                             'step--future': step.number > currentStep,
                         }">
                        <div class="step-circle">
                            <font-awesome-icon v-if="step.number < currentStep" icon="check" />
                            <span v-else>{{ step.number }}</span>
                        </div>
                        <span class="step-label">{{ step.label }}</span>
                    </div>
                    <div v-if="i < steps.length - 1" class="step-connector"></div>
                </template>
            </div>

            <!-- ── Seitentitel ── -->
            <div class="page-title">
                <div class="title-icon">
                    <font-awesome-icon icon="file-invoice" />
                </div>
                <div>
                    <h1 class="title-text">Rechnung erstellen</h1>
                    <p class="title-sub">Erstelle eine Rechnung nach BdP Vorlage.</p>
                </div>
            </div>

            <!-- ── Hauptbereich ── -->
            <div class="main-grid">

                <!-- ── SCHRITT 1: Empfänger ── -->
                <div v-if="currentStep === 1" class="card">
                    <h2 class="card-heading">Empfänger</h2>

                    <div class="search-row">
                        <div class="search-wrap">
                            <font-awesome-icon icon="magnifying-glass" class="search-icon" />
                            <input
                                type="text"
                                v-model="form.kontaktSuche"
                                placeholder="Kontakt suchen..."
                                class="input search-input"
                            />
                        </div>
                        <button class="btn-outline">
                            <font-awesome-icon icon="user" />
                            Neuer Kontakt
                        </button>
                    </div>

                    <div class="divider"></div>

                    <div class="fields">
                        <div class="field">
                            <label class="label">Firma / Organisation</label>
                            <input type="text" class="input" v-model="form.organisation" placeholder="BdP Landesverband e.V." />
                        </div>

                        <div class="field">
                            <label class="label">Anrede</label>
                            <select class="input" v-model="form.anrede">
                                <option value="">— bitte wählen —</option>
                                <option>Herr</option>
                                <option>Frau</option>
                                <option>Divers</option>
                            </select>
                        </div>

                        <div class="field-row">
                            <div class="field">
                                <label class="label">Vorname</label>
                                <input type="text" class="input" v-model="form.vorname" placeholder="Max" />
                            </div>
                            <div class="field">
                                <label class="label">Nachname</label>
                                <input type="text" class="input" v-model="form.nachname" placeholder="Mustermann" />
                            </div>
                        </div>

                        <div class="field">
                            <label class="label">Adresse</label>
                            <input type="text" class="input" v-model="form.adresse" placeholder="Musterstraße 1" />
                        </div>

                        <div class="field-row">
                            <div class="field field--plz">
                                <label class="label">PLZ</label>
                                <input type="text" class="input" v-model="form.plz" placeholder="12345" />
                            </div>
                            <div class="field">
                                <label class="label">Ort</label>
                                <input type="text" class="input" v-model="form.ort" placeholder="Musterstadt" />
                            </div>
                        </div>

                        <div class="field">
                            <label class="label">E-Mail</label>
                            <input type="email" class="input" v-model="form.email" placeholder="max@mustermann.de" />
                        </div>

                        <div class="divider"></div>

                        <div class="field-row">
                            <div class="field">
                                <label class="label">Rechnungsnummer</label>
                                <input type="text" class="input" v-model="form.rechnungsnummer" placeholder="2024-001" />
                            </div>
                            <div class="field">
                                <label class="label">Rechnungsdatum</label>
                                <input type="date" class="input" v-model="form.rechnungsdatum" />
                            </div>
                        </div>

                        <div class="field">
                            <label class="label">Zahlungsziel</label>
                            <input type="date" class="input" v-model="form.zahlungsziel" />
                        </div>

                        <div class="divider"></div>

                        <div class="field">
                            <label class="label">IBAN</label>
                            <input type="text" class="input" v-model="form.iban" placeholder="DE12 3456 7890 1234 5678 90" />
                        </div>

                        <div class="field">
                            <label class="label">BIC</label>
                            <input type="text" class="input" v-model="form.bic" placeholder="BELADEBEXXX" />
                        </div>

                        <div class="divider"></div>

                        <div class="field">
                            <label class="label">Absender-E-Mail</label>
                            <input type="email" class="input" v-model="form.absenderEmail" placeholder="finanzen@sachsen.pfadfinden.de" />
                        </div>

                        <div class="field">
                            <label class="label">Telefon (optional)</label>
                            <input type="tel" class="input" v-model="form.absenderTelefon" placeholder="+49 123 456789" />
                        </div>
                    </div>

                    <label class="dsgvo-row">
                        <input type="checkbox" class="checkbox" v-model="form.datenSpeichern" />
                        <span>
                            Daten für diesen Kontakt speichern und bei künftigen Rechnungen vorausfüllen.
                        </span>
                    </label>
                </div>

                <!-- ── SCHRITT 2: Positionen ── -->
                <div v-else-if="currentStep === 2" class="card">
                    <h2 class="card-heading">Positionen</h2>

                    <div class="pos-table-wrap">
                        <table class="pos-edit-table">
                            <thead>
                                <tr>
                                    <th class="col-nr">Nr.</th>
                                    <th class="col-bez">Bezeichnung</th>
                                    <th class="col-menge">Menge</th>
                                    <th class="col-einheit">Einheit</th>
                                    <th class="col-preis">Einzelpreis</th>
                                    <th class="col-gesamt">Gesamt</th>
                                    <th class="col-del"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(pos, i) in form.positionen" :key="i">
                                    <td class="col-nr td-nr">{{ i + 1 }}</td>
                                    <td class="col-bez">
                                        <input
                                            type="text"
                                            class="pos-input pos-input--wide"
                                            v-model="pos.bezeichnung"
                                            placeholder="Bezeichnung der Leistung"
                                        />
                                    </td>
                                    <td class="col-menge">
                                        <input
                                            type="number"
                                            class="pos-input pos-input--num"
                                            v-model="pos.menge"
                                            min="0"
                                            step="1"
                                        />
                                    </td>
                                    <td class="col-einheit">
                                        <select class="pos-input pos-select" v-model="pos.einheit">
                                            <option>Stk.</option>
                                            <option>Std.</option>
                                            <option>Tage</option>
                                            <option>Pauschal</option>
                                        </select>
                                    </td>
                                    <td class="col-preis">
                                        <div class="preis-wrap">
                                            <input
                                                type="number"
                                                class="pos-input pos-input--num"
                                                v-model="pos.einzelpreis"
                                                min="0"
                                                step="0.01"
                                                placeholder="0,00"
                                            />
                                            <span class="preis-suffix">€</span>
                                        </div>
                                    </td>
                                    <td class="col-gesamt td-gesamt">{{ formatPreis(posGesamt(pos)) }}</td>
                                    <td class="col-del">
                                        <button
                                            class="del-btn"
                                            :disabled="form.positionen.length === 1"
                                            @click="removePosition(i)"
                                            title="Position entfernen"
                                        >
                                            <font-awesome-icon icon="trash" />
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <button class="add-pos-btn" @click="addPosition">
                        <font-awesome-icon icon="plus" />
                        Position hinzufügen
                    </button>

                    <div class="divider"></div>

                    <div class="summen-row">
                        <div class="mwst-group">
                            <span class="mwst-label">Mehrwertsteuer</span>
                            <div class="mwst-badges">
                                <button
                                    v-for="satz in [0, 7, 19]"
                                    :key="satz"
                                    class="mwst-badge"
                                    :class="{ 'mwst-badge--active': form.mwstSatz === satz }"
                                    @click="form.mwstSatz = satz"
                                >
                                    {{ satz }}&thinsp;%
                                </button>
                            </div>
                        </div>

                        <table class="summen-table">
                            <tr>
                                <td class="sum-key">Nettobetrag</td>
                                <td class="sum-val">{{ formatPreis(nettoSumme) }}</td>
                            </tr>
                            <tr>
                                <td class="sum-key">zzgl. {{ form.mwstSatz }}&thinsp;% MwSt.</td>
                                <td class="sum-val">{{ formatPreis(mwstBetrag) }}</td>
                            </tr>
                            <tr class="sum-total-row">
                                <td class="sum-key">Gesamtbetrag</td>
                                <td class="sum-val sum-val--total">{{ formatPreis(brutto) }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- ── SCHRITT 3: Vorschau & Freigabe ── -->
                <div v-else class="card release-card">
                    <div class="release-icon-wrap">
                        <font-awesome-icon icon="file-pdf" class="release-icon" />
                    </div>
                    <h2 class="release-heading">Rechnung bereit</h2>
                    <p class="release-sub">Prüfe die Vorschau rechts und lade die Rechnung anschließend als PDF herunter.</p>

                    <div class="release-summary">
                        <div class="release-row">
                            <span class="release-key">Empfänger</span>
                            <span class="release-val">
                                {{ [form.organisation, [form.anrede, form.vorname, form.nachname].filter(Boolean).join(' ')].filter(Boolean).join(' · ') || '—' }}
                            </span>
                        </div>
                        <div class="release-row">
                            <span class="release-key">Rechnungs-Nr.</span>
                            <span class="release-val">{{ form.rechnungsnummer || '(wird automatisch vergeben)' }}</span>
                        </div>
                        <div class="release-row">
                            <span class="release-key">Datum</span>
                            <span class="release-val">{{ form.rechnungsdatum || '—' }}</span>
                        </div>
                        <div class="release-row">
                            <span class="release-key">Zahlungsziel</span>
                            <span class="release-val">{{ form.zahlungsziel || '—' }}</span>
                        </div>
                        <div class="release-row release-row--total">
                            <span class="release-key">Gesamtbetrag</span>
                            <span class="release-val release-val--total">{{ formatPreis(brutto) }}</span>
                        </div>
                    </div>

                    <button class="btn-download" :disabled="pdfLoading" @click="openPdf">
                        <font-awesome-icon :icon="pdfLoading ? 'file-invoice' : 'download'" />
                        {{ pdfLoading ? 'PDF wird generiert…' : 'PDF herunterladen' }}
                    </button>
                </div>

                <!-- ── Vorschau-Panel (immer sichtbar) ── -->
                <div class="card preview-card">
                    <div class="preview-header">
                        <span class="preview-title">Vorschau</span>
                    </div>

                    <div class="invoice-wrap">
                        <div class="invoice-doc">

                            <div class="inv-top">
                                <div></div>
                                <div class="inv-sender">
                                    <svg viewBox="0 0 100 100" width="32" height="32">
                                        <circle cx="50" cy="50" r="49" fill="#f5c400"/>
                                        <circle cx="50" cy="50" r="38" fill="#1a4799"/>
                                        <path d="M50,44 C47,36 44,24 47,16 C48.5,12 51.5,12 53,16 C56,24 53,36 50,44Z" fill="white"/>
                                        <path d="M49,44 C45,41 38,37 30,32 C25,28 25,22 29,20 C33,18 38,23 43,32 C46,37 48,41 49,44Z" fill="white"/>
                                        <path d="M51,44 C55,41 62,37 70,32 C75,28 75,22 71,20 C67,18 62,23 57,32 C54,37 52,41 51,44Z" fill="white"/>
                                        <ellipse cx="50" cy="47" rx="8.5" ry="3.5" fill="white"/>
                                        <rect x="48" y="50" width="4" height="13" rx="1.5" fill="white"/>
                                        <rect x="41" y="62" width="18" height="4" rx="2" fill="white"/>
                                    </svg>
                                    <div class="inv-sender-text">
                                        <strong>BdP Landesverband Sachsen</strong>
                                        <span>c/o Mandy Grazek</span>
                                        <span>Weststraße 53c, 09212 Limbach-Oberfrohna</span>
                                        <span class="inv-muted">sachsen@pfadfinden.de</span>
                                    </div>
                                </div>
                            </div>

                            <div class="inv-address-row">
                                <div class="inv-recipient">
                                    <div class="inv-recipient-label">Rechnungsempfänger</div>
                                    <div v-if="form.organisation">{{ form.organisation }}</div>
                                    <div>{{ [form.anrede, form.vorname, form.nachname].filter(Boolean).join(' ') || '—' }}</div>
                                    <div>{{ form.adresse || '—' }}</div>
                                    <div>{{ [form.plz, form.ort].filter(Boolean).join(' ') || '—' }}</div>
                                </div>
                                <div class="inv-meta">
                                    <div class="inv-rechnung-title">RECHNUNG</div>
                                    <div class="inv-meta-row">
                                        <span class="inv-meta-key">Rechnungs-Nr.</span>
                                        <span>{{ form.rechnungsnummer || '—' }}</span>
                                    </div>
                                    <div class="inv-meta-row">
                                        <span class="inv-meta-key">Datum</span>
                                        <span>{{ form.rechnungsdatum || '—' }}</span>
                                    </div>
                                    <div class="inv-meta-row">
                                        <span class="inv-meta-key">Zahlungsziel</span>
                                        <span>{{ form.zahlungsziel || '—' }}</span>
                                    </div>
                                </div>
                            </div>

                            <hr class="inv-hr" />

                            <table class="inv-table">
                                <thead>
                                    <tr>
                                        <th>Nr.</th>
                                        <th>Bezeichnung</th>
                                        <th class="ta-r">Menge</th>
                                        <th class="ta-r">Einzelpreis</th>
                                        <th class="ta-r">Gesamt</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-if="habenPositionen">
                                        <tr v-for="(pos, i) in form.positionen.filter(p => p.bezeichnung)" :key="i">
                                            <td>{{ i + 1 }}</td>
                                            <td>{{ pos.bezeichnung }}</td>
                                            <td class="ta-r">{{ pos.menge }} {{ pos.einheit }}</td>
                                            <td class="ta-r">{{ formatPreis(pos.einzelpreis) }}</td>
                                            <td class="ta-r">{{ formatPreis(posGesamt(pos)) }}</td>
                                        </tr>
                                    </template>
                                    <tr v-else>
                                        <td colspan="5" class="inv-empty">
                                            Positionen werden in Schritt 2 erfasst.
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="inv-summen">
                                <div class="inv-sum-row">
                                    <span>Nettobetrag</span>
                                    <span>{{ formatPreis(nettoSumme) }}</span>
                                </div>
                                <div class="inv-sum-row">
                                    <span>zzgl. {{ form.mwstSatz }}&thinsp;% MwSt.</span>
                                    <span>{{ formatPreis(mwstBetrag) }}</span>
                                </div>
                                <div class="inv-total">
                                    <span class="inv-total-label">Gesamtbetrag</span>
                                    <span class="inv-total-value">{{ formatPreis(brutto) }}</span>
                                </div>
                            </div>

                            <div class="inv-bank">
                                Bitte überweisen Sie auf IBAN:
                                <strong>{{ form.iban || '—' }}</strong>
                                <span v-if="form.bic"> · BIC: {{ form.bic }}</span>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <!-- ── Seitennavigation ── -->
            <div class="page-nav">
                <button v-if="currentStep > 1" class="btn-back" @click="currentStep--">
                    <font-awesome-icon icon="chevron-left" />
                    Zurück
                </button>
                <div v-else></div>

                <button v-if="currentStep < 3" class="btn-next" @click="currentStep++">
                    {{ currentStep === 1 ? 'Weiter: Positionen' : 'Weiter: Vorschau' }}
                    <font-awesome-icon icon="chevron-right" />
                </button>
            </div>

        </div>
    </AppLayout>
</template>

<style scoped>
/* ── Layout ── */
.page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Breadcrumb + Header-Aktionen ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6b7280;
}

.bc-link { color: #1d4899; text-decoration: none; }
.bc-link:hover { text-decoration: underline; }
.bc-sep { font-size: 0.7rem; color: #9ca3af; }
.bc-current { color: #374151; font-weight: 500; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-cancel {
    font-size: 0.875rem;
    color: #6b7280;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 7px;
    transition: background 0.15s;
}
.btn-cancel:hover { background: #f3f4f6; }

/* ── Stepper ── */
.stepper {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 10px;
    padding: 16px 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step--active .step-circle,
.step--done .step-circle  { background: #27ae60; color: white; }
.step--future .step-circle { background: #f3f4f6; color: #9ca3af; border: 2px solid #e5e7eb; }

.step-label { font-size: 0.875rem; font-weight: 500; }
.step--active .step-label { color: #111827; font-weight: 600; }
.step--done .step-label   { color: #374151; }
.step--future .step-label { color: #9ca3af; }

.step-connector { flex: 1; height: 2px; background: #e5e7eb; margin: 0 16px; }

/* ── Seitentitel ── */
.page-title { display: flex; align-items: center; gap: 14px; }

.title-icon {
    width: 44px;
    height: 44px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.title-text { margin: 0 0 3px; font-size: 1.25rem; font-weight: 700; color: #111827; }
.title-sub  { margin: 0; font-size: 0.85rem; color: #6b7280; }

/* ── Hauptgitter ── */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* ── Karte ── */
.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 24px;
    border: 1px solid #f0f0f0;
}

.card-heading { margin: 0 0 18px; font-size: 1rem; font-weight: 700; color: #111827; }

/* ── Kontaktsuche ── */
.search-row { display: flex; gap: 10px; align-items: center; }
.search-wrap { flex: 1; position: relative; }
.search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.82rem;
}
.search-input { padding-left: 32px !important; }

.btn-outline {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: white;
    font-size: 0.82rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.btn-outline:hover { background: #f9fafb; border-color: #9ca3af; }

/* ── Trennlinie ── */
.divider { height: 1px; background: #f0f0f0; margin: 16px 0; }

/* ── Formularfelder (Schritt 1) ── */
.fields { display: flex; flex-direction: column; gap: 12px; }
.field  { display: flex; flex-direction: column; gap: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field--plz { max-width: 120px; }

.label { font-size: 0.8rem; font-weight: 600; color: #374151; }

.input {
    padding: 8px 11px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 0.875rem;
    color: #111827;
    background: white;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.input:focus { border-color: #1d4899; box-shadow: 0 0 0 3px rgba(29,72,153,0.08); }
select.input { cursor: pointer; }

/* ── DSGVO ── */
.dsgvo-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    cursor: pointer;
}
.checkbox { margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: #1d4899; }
.dsgvo-row span { font-size: 0.78rem; color: #6b7280; line-height: 1.5; }

/* ── Positionen-Tabelle (Schritt 2) ── */
.pos-table-wrap {
    overflow-x: auto;
    margin-bottom: 12px;
}

.pos-edit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.pos-edit-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.pos-edit-table td {
    padding: 5px 4px;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
}

.pos-edit-table tbody tr:last-child td { border-bottom: none; }
.pos-edit-table tbody tr:hover td { background: #fafafa; }

.col-nr      { width: 34px; }
.col-bez     { width: auto; }
.col-menge   { width: 64px; }
.col-einheit { width: 90px; }
.col-preis   { width: 110px; }
.col-gesamt  { width: 82px; }
.col-del     { width: 34px; }

.td-nr      { color: #9ca3af; font-size: 0.75rem; text-align: center; }
.td-gesamt  { text-align: right; color: #374151; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pos-input {
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #111827;
    background: white;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
    box-sizing: border-box;
}
.pos-input:focus { border-color: #1d4899; box-shadow: 0 0 0 2px rgba(29,72,153,0.08); }

.pos-input--wide { width: 100%; }
.pos-input--num  { width: 100%; text-align: right; }
.pos-select      { width: 100%; cursor: pointer; }

.preis-wrap { display: flex; align-items: center; gap: 4px; }
.preis-suffix { font-size: 0.8rem; color: #6b7280; flex-shrink: 0; }

.del-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.7rem;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.del-btn:hover:not(:disabled) { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
.del-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.add-pos-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px dashed #d1d5db;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: 4px;
}
.add-pos-btn:hover { color: #1d4899; border-color: #1d4899; }

/* ── MwSt + Summen (Schritt 2) ── */
.summen-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.mwst-group { display: flex; flex-direction: column; gap: 8px; }
.mwst-label { font-size: 0.78rem; font-weight: 600; color: #374151; }

.mwst-badges { display: flex; gap: 6px; }
.mwst-badge {
    padding: 5px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: white;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
}
.mwst-badge:hover { border-color: #1d4899; color: #1d4899; }
.mwst-badge--active { background: #1d4899; border-color: #1d4899; color: white; }

.summen-table { font-size: 0.85rem; border-collapse: collapse; }
.summen-table td { padding: 3px 0 3px 20px; }
.sum-key { color: #6b7280; }
.sum-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-total-row td {
    border-top: 1.5px solid #1d4899;
    padding-top: 8px;
    font-weight: 700;
    color: #111827;
}
.sum-val--total { color: #1d4899; font-size: 1rem; }

/* ── Freigabe-Karte (Schritt 3) ── */
.release-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.release-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.release-icon { font-size: 1.4rem; color: #1d4899; }

.release-heading { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: #111827; }
.release-sub { margin: 0 0 24px; font-size: 0.83rem; color: #6b7280; line-height: 1.5; }

.release-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.release-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.85rem;
}
.release-row:last-child { border-bottom: none; }
.release-row--total { background: #f8faff; }

.release-key { color: #6b7280; font-weight: 500; }
.release-val { color: #111827; text-align: right; }
.release-val--total { font-size: 1.1rem; font-weight: 700; color: #1d4899; }

.btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px;
    background: #1d4899;
    color: white;
    border: none;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-download:hover:not(:disabled) { background: #163a7a; }
.btn-download:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Vorschau-Panel ── */
.preview-card { padding: 0; overflow: hidden; }

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.preview-title { font-size: 0.9rem; font-weight: 700; color: #111827; }

.invoice-wrap { padding: 16px; background: #f5f6fa; min-height: 420px; }

.invoice-doc {
    background: white;
    border-radius: 6px;
    padding: 20px;
    font-size: 0.72rem;
    color: #111827;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    line-height: 1.5;
}

.inv-top { display: flex; justify-content: flex-end; margin-bottom: 20px; }

.inv-sender { display: flex; gap: 10px; align-items: flex-start; text-align: right; }

.inv-sender-text {
    display: flex;
    flex-direction: column;
    font-size: 0.68rem;
    color: #374151;
    text-align: right;
    line-height: 1.6;
}

.inv-muted { color: #9ca3af; }

.inv-address-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.inv-recipient { font-size: 0.7rem; line-height: 1.7; color: #374151; }

.inv-recipient-label {
    font-size: 0.6rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.inv-meta { text-align: right; flex-shrink: 0; }

.inv-rechnung-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1d4899;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.inv-meta-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    font-size: 0.68rem;
    color: #374151;
}

.inv-meta-key { color: #9ca3af; }

.inv-hr { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0; }

.inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    margin-bottom: 8px;
}

.inv-table th {
    text-align: left;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    padding: 5px 6px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inv-table td { padding: 5px 6px; color: #374151; border-bottom: 1px solid #f3f4f6; }
.inv-table tr:last-child td { border-bottom: none; }
.ta-r { text-align: right; }

.inv-empty {
    text-align: center;
    color: #9ca3af !important;
    font-style: italic;
    padding: 14px 0 !important;
}

/* ── Summen in Vorschau ── */
.inv-summen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin-bottom: 14px;
}

.inv-sum-row {
    display: flex;
    gap: 24px;
    font-size: 0.66rem;
    color: #6b7280;
}

.inv-sum-row span:last-child { min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }

.inv-total {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 6px;
    border-top: 1.5px solid #1d4899;
    margin-top: 3px;
}

.inv-total-label { font-weight: 600; font-size: 0.72rem; color: #374151; }
.inv-total-value { font-weight: 800; font-size: 0.88rem; color: #1d4899; font-variant-numeric: tabular-nums; }

.inv-bank {
    font-size: 0.62rem;
    color: #9ca3af;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

/* ── Seitennavigation ── */
.page-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-back:hover { background: #f9fafb; border-color: #d1d5db; }

.btn-next {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1d4899;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-next:hover { background: #163a7a; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .main-grid { grid-template-columns: 1fr; }
    .preview-card { display: none; }
}

@media (max-width: 640px) {
    .field-row { grid-template-columns: 1fr; }
    .field--plz { max-width: none; }
    .stepper { flex-wrap: wrap; gap: 8px; }
    .step-connector { display: none; }
    .summen-row { flex-direction: column; }
}
</style>
