/* Rechnungsgenerator (TOOL-001). Nutzt die Tokens und Bausteine aus site.css. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Klassen mit display würden sonst das hidden-Attribut überstimmen. */
.invoice-tool [hidden] { display: none !important; }

.invoice-tool { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1000px) { .invoice-tool { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); } }

.invoice-form { display: grid; gap: var(--space-6); min-width: 0; }
.invoice-form-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.invoice-form > .field-hint { margin-top: calc(-1 * var(--space-4)); }

.invoice-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    padding: var(--space-4) var(--space-4) var(--space-6);
    margin: 0;
    min-width: 0;
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 640px) { .invoice-fieldset { padding: var(--space-4) var(--space-6) var(--space-6); } }
.invoice-fieldset legend { font-weight: 700; font-size: 1.1rem; padding: 0 var(--space-2); }
.invoice-fieldset .field label:not(:first-child) { margin-top: var(--space-2); }
@media (min-width: 640px) { .invoice-fieldset .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field-narrow { max-width: 12rem; }
.textarea.textarea-short { min-height: 3.5rem; }

.invoice-check { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 600; }
.invoice-check input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex-shrink: 0; accent-color: var(--green); }

.logo-preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.logo-preview img { max-height: 4rem; max-width: 10rem; border: 1px solid var(--border); border-radius: var(--radius-small); background: #fff; }

.invoice-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: item; }
.invoice-item {
    counter-increment: item;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--surface-soft);
}
.invoice-item-name { grid-column: 1 / -1; }
.invoice-item-name label::before { content: "Position " counter(item) ": "; }
.invoice-item-total { margin: 0; align-self: center; display: flex; gap: var(--space-2); align-items: baseline; font-variant-numeric: tabular-nums; }
.invoice-item-total span { color: var(--text-muted); font-size: var(--text-small); }
.invoice-item [data-item-remove] { grid-column: -2; justify-self: end; align-self: center; }
@media (min-width: 640px) {
    .invoice-item { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); }
    .invoice-item-total { grid-column: 1 / 3; }
}

.invoice-result {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    min-width: 0;
}
@media (min-width: 1000px) { .invoice-result { position: sticky; top: var(--space-4); max-height: calc(100vh - 2rem); overflow-y: auto; } }
.invoice-result h2 { margin: 0; font-size: 1.25rem; }

.invoice-summary { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.invoice-summary th, .invoice-summary td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-weight: 400; text-align: left; }
.invoice-summary .numeric { text-align: right; white-space: nowrap; }
.invoice-summary-total th, .invoice-summary-total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--text); }

.invoice-missing { background: var(--warning-surface); color: var(--warning); border-radius: var(--radius-small); padding: var(--space-3) var(--space-4); font-size: var(--text-small); }
.invoice-missing p { margin: 0 0 var(--space-1); }
.invoice-missing ul { margin: 0; padding-left: 1.2rem; }

.invoice-actions { display: grid; gap: var(--space-2); }
.invoice-result .field-error:empty { display: none; }

.invoice-preview { display: grid; gap: var(--space-3); }
.invoice-preview canvas { width: 100%; height: auto; border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; }

/* Die native Ladesperre soll das bestehende Formlayout nicht verändern. */
.invoice-fields { margin: 0; padding: 0; border: 0; min-width: 0; }

/* Nächster Schritt nach dem Download (KLAR-169). */
.invoice-next { border: 1px solid var(--border); border-radius: var(--radius-small); padding: var(--space-3) var(--space-4); font-size: var(--text-small); }
.invoice-next p { margin: 0 0 var(--space-2); }
.invoice-next a { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-3); align-items: center; color: inherit; }
.invoice-next a[hidden] { display: none; }
.invoice-next img { width: 100%; height: auto; border-radius: var(--radius-small); }