/* ============================================================
   Avison Studios Dashboard — Rechnungen (Liste + Editor)
   Die Rechnung selbst (A4) bringt ihr eigenes CSS mit, siehe
   invoiceDocHtml() in assets/rechnungen.js.
   ============================================================ */

/* ---------- Liste ---------- */
.inv-card { padding-bottom: 10px; }
.inv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-hint {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--tone-orange);
    color: var(--tone-orange-ink);
    font-size: 13px;
}
.inv-hint .link-btn { color: inherit; text-decoration: underline; padding: 0; }
.inv-group + .inv-group { margin-top: 18px; }
.inv-group-h {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.inv-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) 96px auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-2);
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}
.inv-row + .inv-row { margin-top: 6px; }
.inv-row:hover { background: color-mix(in srgb, var(--client-color, var(--orange)) 12%, var(--surface-2)); }
.inv-nr { font-family: var(--font-title); font-size: 16px; font-variant-numeric: tabular-nums; }
.inv-who { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.inv-who, .inv-title, .inv-when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--client-color, var(--ink-3)); flex-shrink: 0; }
.inv-title { color: var(--ink-2); }
.inv-when { color: var(--ink-2); font-size: 12px; }
.inv-sum { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.inv-row.draft .inv-nr { color: var(--ink-3); }
.inv-row.late { background: var(--tone-red); }
.inv-row.late .inv-when { color: var(--tone-red-ink); font-weight: 600; }
.inv-row.paid .inv-sum { color: var(--tone-moss-ink); }
.inv-row.cancelled { opacity: 0.55; }
.inv-row.cancelled .inv-sum { text-decoration: line-through; }

/* ---------- Editor ---------- */
dialog.dlg-invoice { width: min(1180px, 96vw); max-height: 94vh; padding: 0; overflow: hidden; }
.inv-close { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 22px; }
.inv-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); max-height: 94vh; }
.inv-form { padding: 24px 26px; overflow-y: auto; max-height: 94vh; }
.inv-preview { background: var(--surface-2); padding: 24px; overflow-y: auto; max-height: 94vh; }
.inv-preview-box { position: relative; width: 100%; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow-card); }
.inv-preview-box iframe {
    position: absolute; top: 0; left: 0;
    width: 794px; height: 1123px;
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
    background: #E9DAC5;
}
.inv-form-head { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
.inv-form-head h2 { margin: 0; }
.inv-status {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-2);
}
.inv-status.sent { background: var(--tone-orange); color: var(--tone-orange-ink); }
.inv-status.paid { background: var(--tone-moss); color: var(--tone-moss-ink); }
.inv-status.late { background: var(--tone-red); color: var(--tone-red-ink); }
.inv-warn {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--tone-orange);
    color: var(--tone-orange-ink);
    font-size: 13px;
}
.inv-warn .link-btn { color: inherit; text-decoration: underline; padding: 0; }
.inv-grid3 { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 12px; }
.inv-grid2 { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: 12px; }
.inv-grid3, .inv-grid2 { align-items: end; }
.inv-grid3 label, .inv-grid2 label { margin-bottom: 0; }
/* Auswahlfelder exakt so hoch wie Textfelder – sonst steht „Umsatzsteuer" über */
.inv-form label > select, .inv-form label > input, .inv-terms input { margin-top: 6px; height: 40px; }
.inv-terms input { margin-top: 0; }
.inv-pages { margin-left: 10px; }
.inv-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--tone-blue); color: var(--tone-blue-ink); font-size: 11px; font-weight: 600; }
/* Nachgetragene Rechnung: keine A4-Vorschau */
dialog.dlg-invoice.manual { width: min(560px, 96vw); }
dialog.dlg-invoice.manual .inv-edit { grid-template-columns: 1fr; }
dialog.dlg-invoice.manual .inv-preview { display: none; }
.im-drop { margin-top: 12px; }
.im-drop.over { border-color: var(--orange); background: var(--tone-orange); }
.im-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.im-file .ico { width: 14px; height: 14px; vertical-align: -2px; }
.inv-terms { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-2); }
.inv-terms input { margin: 0; width: 100%; }
.inv-duehint { margin: 6px 0 0; }

.inv-items { display: flex; flex-direction: column; gap: 8px; }
.inv-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 92px 96px 82px 28px;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    background: var(--surface-2);
}
.inv-item input, .inv-item select { margin: 0; min-width: 0; background: var(--surface); }
.inv-item .ii-qty, .inv-item .ii-price { text-align: right; font-variant-numeric: tabular-nums; }
.inv-item .ii-desc { grid-column: 1 / 6; font-size: 13px; }
.ii-sum { text-align: right; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.inv-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Summen: kleine Abrechnung, Beträge rechtsbündig untereinander */
.inv-sums {
    display: grid;
    gap: 6px;
    width: min(340px, 100%);
    margin: 16px 0 0 auto;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--tone-almond);
    font-size: 13px;
    color: var(--ink-2);
}
.inv-sums > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.inv-sums strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-sums .total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; }
.inv-sums .total strong { font-family: var(--font-title); font-weight: 400; font-size: 22px; }
.inv-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.inv-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }

.inv-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 18px 0 10px; font-size: 14px; }
.inv-facts dt { color: var(--ink-2); }
.inv-facts dd { margin: 0; }

@media (max-width: 960px) {
    .inv-edit { grid-template-columns: 1fr; max-height: none; overflow-y: auto; }
    dialog.dlg-invoice { overflow-y: auto; }
    .inv-form, .inv-preview { max-height: none; overflow: visible; }
}
@media (max-width: 640px) {
    .inv-row { grid-template-columns: 64px minmax(0, 1fr) auto; row-gap: 2px; }
    .inv-title, .inv-when { grid-column: 2 / 4; }
    .inv-sum { grid-column: 3; grid-row: 1; }
    .inv-acts { grid-column: 1 / -1; justify-content: flex-start; }
    .inv-grid3, .inv-grid2 { grid-template-columns: 1fr; }
    .inv-item { grid-template-columns: 1fr 1fr 1fr 28px; }
    .inv-item .ii-title, .inv-item .ii-desc { grid-column: 1 / -1; }
    .inv-item .ii-sum { grid-column: 1 / 4; }
    .inv-form { padding: 20px 16px; }
}