/* =============================================================================
   F-QM-04 Formular-Darstellung — gemeinsam von Druckansicht und Dashboard-Vorschau.
   =============================================================================
   ALLE Regeln sind auf .fqm04-doc gescoped. Ungescopt würden `table`/`th`/`td`
   die Dashboard-Tabellen überschreiben. Neue Regeln daher IMMER mit .fqm04-doc
   davor.

   Bewusst nicht theme-aware: das Formular ist ein Papier-Abbild und bleibt in
   Hell- wie Dunkelmodus weiss — sonst stimmt die Druckvorschau nicht mit dem
   Ausdruck überein.
   ========================================================================== */

.fqm04-doc {
    position: relative;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 10pt;
    color: #333;
    background: #fff;
    line-height: 1.4;
}
.fqm04-doc * { box-sizing: border-box; margin: 0; padding: 0; }

/* === A4-Blatt (Druckansicht) === */
.fqm04-doc.page {
    width: 210mm;
    min-height: 297mm;
    margin: 10mm auto;
    padding: 10mm 12mm;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* === Header === */
.fqm04-doc .form-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 2mm;
    border-bottom: 1.5px solid #333;
    margin-bottom: 3mm;
}
.fqm04-doc .form-header .nza-id { font-size: 16pt; font-weight: 700; color: #0080C9; }
.fqm04-doc .form-header .header-right { text-align: right; font-size: 9pt; color: #555; }
.fqm04-doc .form-header .header-right .status-badge {
    display: inline-block;
    padding: 0.5mm 3mm;
    border-radius: 3px;
    font-size: 8pt;
    font-weight: 600;
    margin-left: 3mm;
}
.fqm04-doc .status-neu { background: #e3f2fd; color: #1565c0; }
.fqm04-doc .status-bearbeitung { background: #fff3e0; color: #e65100; }
.fqm04-doc .status-abgeschlossen { background: #e8f5e9; color: #2e7d32; }
.fqm04-doc .status-entwurf { background: #fff8e1; color: #e65100; border: 1.5px dashed #e65100; }

/* === ENTWURF-Wasserzeichen ===
   absolute statt fixed: in der verkleinerten Vorschau würde `fixed` das
   Wasserzeichen am Viewport verankern statt am Blatt. */
.fqm04-doc .draft-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 100pt;
    font-weight: 900;
    color: rgba(220, 80, 15, 0.10);
    letter-spacing: 10mm;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    user-select: none;
}

/* === Stammdaten-Grid === */
.fqm04-doc .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; margin-bottom: 2mm; }
.fqm04-doc .form-field {
    display: flex;
    align-items: baseline;
    padding: 1.5mm 0;
    border-bottom: 0.5px solid #bbb;
    min-height: 6mm;
}
.fqm04-doc .form-field .label {
    text-align: right;
    font-size: 10pt;
    color: #333;
    white-space: nowrap;
    padding-right: 2mm;
    min-width: 32mm;
    flex-shrink: 0;
}
.fqm04-doc .form-field .value { font-size: 10pt; flex: 1; }
.fqm04-doc .form-field.small .label { font-size: 8.5pt; color: #555; }
.fqm04-doc .form-field.small .value { font-size: 9pt; }
.fqm04-doc .field-separator { grid-column: 1 / -1; border-bottom: 1px solid #333; margin: 1mm 0; }

/* === Section-Titel === */
.fqm04-doc .section-bar {
    background: #f0f0f0;
    padding: 1.5mm 3mm;
    font-size: 14pt;
    font-weight: 700;
    font-style: italic;
    color: #333;
    margin-top: 3mm;
    margin-bottom: 2mm;
}
.fqm04-doc .section-sep { border-bottom: 1px solid #333; margin: 2mm 0; }

/* === Freitext === */
.fqm04-doc .text-area {
    border: 0.5px solid #bbb;
    min-height: 16mm;
    padding: 2mm 3mm;
    font-size: 9pt;
    white-space: pre-wrap;
    margin-bottom: 2mm;
}

/* === Fehlerkategorie === */
.fqm04-doc .kat-line { display: flex; align-items: baseline; padding: 1.5mm 0; margin-bottom: 1mm; }
.fqm04-doc .kat-line .label { font-size: 10pt; font-weight: 700; margin-right: 3mm; white-space: nowrap; }
.fqm04-doc .kat-line .value { font-size: 10pt; border-bottom: 0.5px solid #bbb; flex: 1; padding-bottom: 0.5mm; }

/* === Tabellen === */
.fqm04-doc table { width: 100%; border-collapse: collapse; font-size: 9pt; margin-bottom: 1mm; }
.fqm04-doc th {
    font-weight: 700;
    font-size: 9pt;
    text-align: left;
    padding: 1mm 2mm;
    border-left: 0.5px solid #bbb;
    border-right: 0.5px solid #bbb;
    border-bottom: 0.5px solid #bbb;
    color: #333;
    background: none;
}
.fqm04-doc th:first-child { border-left: none; }
.fqm04-doc th:last-child { border-right: none; }
.fqm04-doc td { padding: 1.5mm 2mm; border: 0.5px solid #bbb; vertical-align: top; }
.fqm04-doc td:first-child { border-left: none; }
.fqm04-doc td:last-child { border-right: none; }
.fqm04-doc .col-nr { width: 6mm; text-align: center; }
.fqm04-doc .sum-row td { font-weight: 700; border-top: 1px solid #333; }
.fqm04-doc .mass-table th { background: #f0f0f0; }

/* === Kosten-Box === */
.fqm04-doc .kosten-box { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2mm; margin-top: 3mm; margin-bottom: 2mm; }
.fqm04-doc .kosten-item { text-align: center; padding: 2mm; border: 0.5px solid #0080C9; border-radius: 2px; background: #f0f7ff; }
.fqm04-doc .kosten-item .k-label { font-size: 7pt; color: #666; }
.fqm04-doc .kosten-item .k-value { font-size: 10pt; font-weight: 700; color: #0080C9; }
.fqm04-doc .kosten-item.total { background: #0080C9; }
.fqm04-doc .kosten-item.total .k-label { color: rgba(255,255,255,0.8); }
.fqm04-doc .kosten-item.total .k-value { color: white; }

/* === Footer === */
.fqm04-doc .footer {
    margin-top: 4mm;
    padding-top: 2mm;
    border-top: 1px solid #999;
    display: flex;
    justify-content: space-between;
    font-size: 7pt;
    color: #999;
}

/* =============================================================================
   Entwurfs-Vorschau-Modal (v2.12.5)
   ========================================================================== */

.draft-preview-content {
    width: 95%;
    max-width: 900px;
}
.draft-preview-content .dp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Das Blatt ist 210mm breit und passt nicht in jedes Fenster — grauer
   Leuchttisch drumherum, horizontal scrollbar statt Layout sprengen. */
.draft-preview-content .dp-body {
    background: #eceff3;
    padding: 16px;
    overflow: auto;
}
[data-theme="dark"] .draft-preview-content .dp-body {
    background: #0b1220;
}
.draft-preview-content .fqm04-doc.page {
    margin: 0 auto;
    box-shadow: 0 2px 14px rgba(0,0,0,0.18);
}

/* Schmale Fenster: Blatt proportional verkleinern, damit es ohne
   Horizontal-Scrollen lesbar bleibt. */
@media (max-width: 940px) {
    .draft-preview-content .fqm04-doc.page {
        transform: scale(0.72);
        transform-origin: top center;
        margin-bottom: -84mm;   /* skalierte Resthöhe zurücknehmen */
    }
}
@media (max-width: 700px) {
    .draft-preview-content .fqm04-doc.page {
        transform: scale(0.5);
        margin-bottom: -149mm;
    }
}

/* === Print === */
@media print {
    /* box-sizing NUR hier auf dem Wurzelelement: die *-Regel oben trifft nur Nachkommen,
       nicht .fqm04-doc.page selbst. Ohne border-box addierte sich das padding (20mm) zur
       width:100% (= bedruckbare Breite bei @page margin) → Blatt zu breit, rechts abgeschnitten. */
    .fqm04-doc.page { margin: 0; padding: 8mm 10mm; box-shadow: none; width: 100%; min-height: auto; box-sizing: border-box; }
    .fqm04-doc .kosten-item,
    .fqm04-doc .kosten-item.total,
    .fqm04-doc .section-bar,
    .fqm04-doc .draft-watermark,
    .fqm04-doc .mass-table th,
    .fqm04-doc .status-neu,
    .fqm04-doc .status-bearbeitung,
    .fqm04-doc .status-abgeschlossen,
    .fqm04-doc .status-entwurf {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}