/* ===========================================================================
   invoice-designer-doc.css — FEUILLES DU DOCUMENT (designer Orion Invoice)
   ---------------------------------------------------------------------------
   Rendu des pages A4 et de leurs éléments, partagé par :
     • le canevas du designer (Pages/InvoiceDesigner.razor) ;
     • le document autoportant construit par oiDesigner.buildHtml() pour le
       PDF (serveur, Chromium), l'e-mail, le SMS et l'impression : ce fichier
       est alors INLINÉ tel quel dans le <style> du document (body.dsg-doc).
   Règle : uniquement ce qui se voit sur la feuille. L'interface (barres,
   poignées, panneaux) reste dans invoice-designer.css.
   Les tailles sont posées en ligne par le designer (px à 96 dpi × zoom) :
   ce fichier ne fixe ni position ni dimension d'élément.
   =========================================================================== */

/* ---------------------------------------------------------------- Feuilles */
.dsg-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.dsg-pagewrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
}

.dsg-page {
    position: relative;
    flex: none;
    overflow: hidden;
    background: #fff;
    color: #1a1a1a;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Les fonds (filets, rectangles, zones colorées) s'impriment comme à l'écran. */
.dsg-page,
.dsg-page * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- Éléments */
.dsg-el {
    position: absolute;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
}

.dsg-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.dsg-img-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    font-size: 10px;
    color: #9aa0b0;
    border: 1px dashed #c5c9d4;
    background: #f6f7fa;
}

/* Filets du document : petits SVG « stroke » insérés par DocRules (Rule / Fill),
   IDENTIQUES écran / PDF. Une bordure CSS devient dans le PDF un rectangle plein
   que les lecteurs PDF épaississent ou font disparaître selon le zoom. */
.dsg-table th,
.dsg-table td,
.dsg-totals-ttc {
    position: relative;
    border-top: none !important;
    border-bottom: none !important;
}

.dsg-rule {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + 1px);   /* recouvre l'arrondi entre deux cellules */
    height: 1px;
    overflow: visible;
    pointer-events: none;
}

.dsg-rule-top {
    top: 0;
    bottom: auto;
}

.dsg-rule-fill {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ------------------------------------------------------ Tableau des lignes */
.dsg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: inherit;
    table-layout: auto;
}

    .dsg-table th {
        position: relative;
        text-align: center;
        font-weight: 600;
        padding: 2px 4px;
        vertical-align: bottom;
    }

    .dsg-table td {
        position: relative;
        padding: 2px 4px;
        text-align: center;
        vertical-align: top;
    }

    /* Ligne de commentaire (texte libre sur toute la largeur) */
    .dsg-table tr.dsg-tr-text td,
    .dsg-table td.dsg-td-text {
        font-style: italic;
        color: #444;
        text-align: left;
    }

.dsg-table-more {
    font-size: .85em;
    color: #8a8f9c;
    font-style: italic;
    text-align: right;
    padding-top: 2px;
}

/* Report / À reporter : sous-total des lignes en bas de page et en haut de la suivante */
.dsg-table tr.dsg-tr-report td {
    padding-top: 3px;
    padding-bottom: 3px;
    font-style: italic;
    color: #333;
    background: #f6f7f9;
}

    .dsg-table tr.dsg-tr-report td > span,
    .dsg-table tr.dsg-tr-report td > b {
        display: inline-block;
    }

    .dsg-table tr.dsg-tr-report td {
        text-align: right;
    }

        .dsg-table tr.dsg-tr-report td > b {
            min-width: 30mm;
            margin-left: 6mm;
            font-style: normal;
            font-variant-numeric: tabular-nums;
        }

/* En-tête de rappel de la page qui ne porte que la section paiement QR */
.dsg-qrhead {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6mm;
    padding-bottom: 3mm;
    color: #1a1a1a;
    line-height: 1.35;
    z-index: 800;
}

    .dsg-qrhead > div {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .dsg-qrhead .dsg-qrhead-l {
        flex-direction: row;
        align-items: flex-end;
        gap: 4mm;
    }

        .dsg-qrhead .dsg-qrhead-l > div {
            display: flex;
            flex-direction: column;
        }

        .dsg-qrhead .dsg-qrhead-l img {
            object-fit: contain;
            object-position: left bottom;
        }

    .dsg-qrhead .dsg-qrhead-c {
        flex: 1;
    }

    .dsg-qrhead .dsg-qrhead-r {
        align-items: flex-end;
        text-align: right;
    }

    .dsg-qrhead span {
        color: #555;
    }

.dsg-qrhead-note {
    position: absolute;
    text-align: center;
    color: #777;
    letter-spacing: .02em;
    z-index: 800;
}

/* ------------------------------------------------------------------- Totaux */
.dsg-totals {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .dsg-totals > div {
        position: relative;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 1px 4px;
        font-variant-numeric: tabular-nums;
    }

.dsg-totals-ttc {
    font-weight: 700;
    margin-top: 2px;
    padding-top: 3px !important;
}

.dsg-totals > .dsg-totals-note {
    display: block;
    margin-top: 3px;
    font-size: .85em;
    font-style: italic;
    color: #555;
    text-align: right;
}

/* --------------------------------------------------------------- QR suisse */
.dsg-qr-only,
.dsg-qr-only svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Section paiement officielle (210 × 105 mm) en bas de la dernière page */
.dsg-pp {
    position: absolute;
    left: 0;
    right: 0;
    overflow: visible;
    pointer-events: none;
    background: #fff;
    z-index: 900;
}

    .dsg-pp::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        border-top: 0.3mm dashed #000;
        pointer-events: none;
        z-index: 1;
    }

    .dsg-pp svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.dsg-pp-err {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a05a20;
    background: repeating-linear-gradient(45deg, #fff8ec 0 12px, #fdf1da 12px 24px);
    font-size: 11px;
    text-align: center;
    padding: 8px;
}

    .dsg-pp-err ul {
        margin: 4px 0 0;
        text-align: left;
    }

/* ----------------------------------------------------- Dessin, tampons, n° */
.dsg-draw {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.dsg-stamp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid;
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
    line-height: 1.05;
    padding: 2px 6px;
    opacity: .85;
    font-size: inherit;
    overflow: hidden;
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.dsg-el-stamp {
    overflow: visible;
}

.dsg-pagenum {
    position: absolute;
    font-size: 8px;
    color: #999;
    user-select: none;
    pointer-events: none;
    z-index: 950;
}

/* Filigrane « BROUILLON » : présent tant que le document n'est pas émis
   (aussi dans le PDF d'un brouillon — on ne l'envoie pas par erreur). */
.dsg-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-32deg);
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(190, 30, 45, .09);
    pointer-events: none;
    user-select: none;
    z-index: 999;
}

/* ===================================================== Document autoportant */
/* body.dsg-doc = HTML envoyé au PDF / e-mail / impression : feuilles collées,
   sans ombre ni espace, une page A4 par feuille. */
body.dsg-doc {
    margin: 0;
    padding: 0;
    background: #fff;
}

    body.dsg-doc .dsg-pages {
        display: block;
        gap: 0;
        padding: 0;
        margin: 0;
    }

    body.dsg-doc .dsg-pagewrap {
        display: block;
        margin: 0;
        break-after: page;
        page-break-after: always;
    }

        body.dsg-doc .dsg-pagewrap:last-child {
            break-after: auto;
            page-break-after: auto;
        }

    body.dsg-doc .dsg-page {
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0;
    }

    body.dsg-doc .dsg-el {
        outline: none !important;
        cursor: default;
    }

@media print {
    .dsg-page {
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .dsg-pp {
        border-top: none;
    }
}