/* ============================================================
   XRechnungen – Forms: Labels, Inputs, Tables, Grid
   ============================================================ */

/* ── Field wrapper ───────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { margin-bottom: 4px; }

/* ── Labels ──────────────────────────────────────────────── */
label {
    display: block; font-size: 0.9em; margin-bottom: 14px;
    color: var(--fg); font-weight: 500;
}

/* ── Standalone .input class ─────────────────────────────── */
.input {
    display: block; width: 100%; max-width: 100%;
    padding: 10px 13px; font-size: 1rem;
    border: 1.5px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--fg);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

/* ── All input types inside labels ──────────────────────── */
label > input, label > select, label > textarea, .select-block select {
    display: block; width: 100%; margin-top: 5px; max-width: 100%;
    padding: 10px 13px; font-size: 1rem;
    border: 1.5px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--fg);
    transition: border-color .15s, box-shadow .15s;
}

/* ── Focus styles ────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* ── Error state (DESIGN_SYSTEM §15) — gesetzt via Fehler-Zusammenfassung ── */
input.input-error, select.input-error, textarea.input-error {
    border-color: var(--error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent);
}

/* ── Dark-mode: all input fields clearly visible ─────────── */
html[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input {
    background-color: #0f1d35;
    border-color: #2d4070;
    color: var(--fg);
}
html[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--primary);
    background-color: #0d1a30;
}

/* ── Responsive grid (form fields) ──────────────────────── */
/* minmax with 0-minimum prevents long values from blowing up cells */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 14px 24px;
}
.grid > * { min-width: 0; }

/* ── Tables ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
table th, table td {
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    font-size: 0.9em; text-align: left;
    overflow-wrap: break-word; word-break: break-word;
}
table th { background: var(--surface-alt); font-weight: 600; }

/* ── Line-items table (horizontal scroll, fixed columns) ─── */
.table-scroll {
    overflow-x: auto;
    border-radius: 8px;
    margin: 0 -4px;
    padding: 0 4px;
}
.line-table { min-width: 760px; table-layout: fixed; }
.line-table th, .line-table td { vertical-align: top; padding: 8px 6px; }
.line-table col, .line-table th, .line-table td { overflow: hidden; }
.line-table thead th { white-space: nowrap; }
.line-table input, .line-table select, .line-table textarea {
    padding: 6px 8px; font-size: 0.9em;
    width: 100%; max-width: 100%; box-sizing: border-box;
}
.line-table .desc { margin-top: 4px; font-size: 0.85em; color: var(--muted); }
/* Description textarea: manually resizable */
.line-name-ta {
    resize: vertical; min-height: 36px; max-height: 200px;
    font-family: inherit; line-height: 1.4; overflow-y: auto;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: 5px;
}
/* Column widths — Name/Beschreibung bekommt mehr Raum (P3: Text schnitt ab) */
.line-table .col-name   { width: 34%; }
.line-table .col-qty    { width: 10%; }
.line-table .col-unit   { width: 13%; }
.line-table .col-price  { width: 14%; }
.line-table .col-taxcat { width: 13%; }
.line-table .col-taxpct { width: 10%; }
.line-table .col-rm     { width: 44px; text-align: center; }

/* ── Inline select block ─────────────────────────────────── */
.select-block { margin: 16px 0 0; }

/* ── Export actions ──────────────────────────────────────── */
.export-actions {
    display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0;
}
.export-actions .btn.recommended { order: -1; }

/* ── Leitweg-ID hint ─────────────────────────────────────── */
.leitweg-hint {
    display: none;
    font-size: 0.82em; color: var(--muted);
    margin-top: 4px;
}
.leitweg-hint.visible { display: block; }

/* ── Required star for profile-conditional fields ───────── */
.profile-required::after {
    content: " *";
    color: var(--error);
}