/* =========================================================
   DRUCKLAYOUT – mofixx Reparatur-Begleitschein (V2)
   Minimalistisch, stabil, browserunabhängig
   ========================================================= */

@media print {

    /* ---------------------------------------------
       1) GLOBAL: Dark-Mode neutralisieren & Basis
       --------------------------------------------- */
    html,
    body {
        color-scheme: light !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background: #ffffff !important;
        color: #000000 !important;
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 10pt !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Web-Elemente ausblenden */
    header,
    footer,
    nav,
    .sticky-print-container,
    .btn-floating,
    .hamburger-menu,
    #theme-toggle,
    #scroll-to-top {
        display: none !important;
    }

    /* Globale Bereinigung: Schatten, Rundungen, Hintergründe, Pagebreaks */
    * {
        box-shadow: none !important;
        border-radius: 0 !important;
        background: none !important;
        /*background: #ffffff !important;*/
        page-break-before: avoid !important;
        page-break-after: avoid !important;
        break-before: avoid !important;
        break-after: avoid !important;
    }

    /* ---------------------------------------------
       2) Container & Struktur
       --------------------------------------------- */
    .content-wrapper,
    .main-card,
    .form-section,
    .form-group,
    .ruecksendung-box {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid im ersten Abschnitt: Absender + Rücksendeadresse nebeneinander */
    .form-section:first-of-type .form-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 10mm !important;
    }

    .form-section:first-of-type .form-grid>div {
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Vertikale Abstände zwischen Sektionen */
    .form-section {
        margin-top: 4mm !important;
        margin-bottom: 4mm !important;
    }

    /* ---------------------------------------------
       3) Typografie
       --------------------------------------------- */
    h1.main-title {
        font-size: 14pt !important;
        text-align: center !important;
        margin: 0 0 4mm 0 !important;
        padding: 0 0 2mm 0 !important;
        border-bottom: 1pt solid #000 !important;
    }

    .form-section h2 {
        font-size: 11pt !important;
        margin: 3mm 0 2mm 0 !important;
        padding: 0 0 1mm 0 !important;
        border-bottom: 0.5pt solid #000 !important;
    }

    .form-group label {
        font-size: 9pt !important;
        margin-bottom: 1mm !important;
    }

    .checkbox-item,
    .radio-item {
        font-size: 9pt !important;
        margin-bottom: 2mm !important;
        gap: 3pt !important;
    }

    /* ---------------------------------------------
       4) Eingabefelder (Unterstrich & Textflächen)
       --------------------------------------------- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"] {
        border: none !important;
        border-bottom: 0.5pt solid #000 !important;
        padding: 1pt 0 !important;
        margin-bottom: 2mm !important;
        width: 100% !important;
        font-size: 10pt !important;
        /*background: none !important;*/
        background: #ffffff !important;
    }

    textarea {
        border: 0.5pt solid #000 !important;
        min-height: 25mm !important;
        resize: none !important;
        margin-bottom: 3mm !important;
        /*background: none !important;*/
        background: #ffffff !important;
        page-break-inside: avoid !important;
    }

    /* Chrome/Edge Dark-Mode-Fix für Inputs */
    input,
    textarea,
    select {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        filter: none !important;
        background-image: none !important;
    }

    /* ---------------------------------------------
       5) Checkboxen & Radios – X-System
       --------------------------------------------- */

    /* Inputs unsichtbar machen */
    input[type="checkbox"],
    input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sichtbare Box (für Checkboxen & Radios) */
    .checkbox-x,
    .radio-x {
        display: inline-block !important;
        width: 12pt !important;
        height: 12pt !important;
        border: 1pt solid #000 !important;
        margin-right: 4pt !important;
        vertical-align: middle !important;
        position: relative !important;
    }

    /* X-Zeichen in der Box (zentrierter, eleganter) */
    input[type="checkbox"]:checked+.checkbox-x::after,
    input[type="radio"]:checked+.radio-x::after {
        content: "X" !important;
        position: absolute !important;
        top: -1pt !important;
        left: 2pt !important;
        font-size: 10pt !important;
        font-weight: 600 !important;
    }

    /* Deaktivierte Checkbox-/Radio-Labels ggf. etwas blasser (falls verwendet) */
    .checkbox-item.disabled,
    .radio-item.disabled {
        opacity: 0.6 !important;
    }

    /* ---------------------------------------------
   6) Signaturbereich – optimiert (Datum stabiler)
   --------------------------------------------- */
    .signature-section {
        display: flex !important;
        flex-direction: row !important;
        gap: 10mm !important;
        align-items: flex-end !important;
        margin-top: 6mm !important;
    }

    /* Kompaktere Höhe → Datum wirkt nicht verloren */
    .signature-field {
        border-bottom: 0.6pt solid #000 !important;
        height: 15mm !important;
        background: transparent !important;
        /* vorher 17mm */
        position: relative !important;
        margin-bottom: 0 !important;
        padding-bottom: 2pt !important;
        /* Luft zwischen Linie & Label */
    }

    /* Datum-Feld etwas schmaler */
    .signature-section .signature-field:first-child {
        flex: 0 0 35mm !important;
        /* vorher 38mm */
    }

    /* Unterschrift breiter */
    .signature-section .signature-field:last-child {
        flex: 1 !important;
    }

    /* Datum-Input – größer, mittig, stabil */
    .signature-field input[type="text"] {
        border: none !important;
        /*background: none !important;*/
        background: #ffffff !important;
        width: 100% !important;
        height: 100% !important;
        padding: 2pt 0 0 0 !important;
        /* hebt Text leicht an */
        margin: 0 !important;
        font-size: 12pt !important;
        /* vorher 9pt */
        line-height: 1.3 !important;
        text-align: center !important;
        /* NEU: Datum mittig */
    }

    /* Label unter der Linie – harmonischer Abstand */
    .signature-label {
        position: absolute !important;
        bottom: -12pt !important;
        /* vorher -10pt */
        left: 0 !important;
        font-size: 8pt !important;
    }


    /* ---------------------------------------------
       7) Versandbox
       --------------------------------------------- */
    /* Versandbox – harmonisiert und hochwertig */
    .shipping-info-box {
        border: 0.4pt dashed #000 !important;
        /* dezenter, eleganter */
        padding: 5mm !important;
        /* mehr Luft innen */
        font-size: 10pt !important;
        /* besser lesbar */
        margin-top: 8mm !important;
        /* mehr Abstand zur Signatur */
        line-height: 1.3 !important;
        /* ruhiger Textfluss */
    }

    /* ---------------------------------------------
       8) Pagebreaks & Seitenlogik
       --------------------------------------------- */

    /* Abschnitt 4 (Kostenvoranschlag & Freigabe) → neue Seite */
    .cut-kvo {
        page-break-before: always !important;
        break-before: page !important;
    }

    /* Überschriften nicht alleine am Seitenende hängen lassen */
    .form-section h2 {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* Wichtige Blöcke nicht mitten drin brechen */
    .form-section,
    .ruecksendung-box {
        page-break-inside: avoid !important;
    }

    /* ---------------------------------------------
       9) Seitenränder
       --------------------------------------------- */
    @page {
        size: A4;
        margin: 10mm;
    }
}