/* Copyright (C) 2024 Thomas Ghozlan <contact@ghz-solutions.fr>
 * PdfDesigner module CSS
 */

/* =====================================================
   LAYOUT DEUX COLONNES — 50 / 50
   Dolibarr v19 can override display:flex via higher-specificity
   rules — !important forces the layout in all versions.
   ===================================================== */
.pdfdesigner-layout {
    display: -webkit-box   !important;
    display: -webkit-flex  !important;
    display: -ms-flexbox   !important;
    display: flex          !important;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 0;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Panneau de gauche : paramètres — percentage width to fit any container */
.pdfdesigner-settings {
    -webkit-flex: 0 0 48%;
    -ms-flex: 0 0 48%;
    flex: 0 0 48%;
    width: 48%;
    max-width: 520px;
    box-sizing: border-box;
}

/* Panneau de droite : aperçu — fills remaining space next to settings */
.pdfdesigner-preview-wrap {
    -webkit-flex: 1 1 48%;
    -ms-flex: 1 1 48%;
    flex: 1 1 48%;
    min-width: 0;
    align-self: flex-start;
    /* sticky handled via JS translateY — CSS sticky is blocked by Dolibarr's display:table-cell ancestor */
}

.pdfdesigner-preview-label {
    font-size: 0.95em;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pdfdesigner-preview-outer {
    background: #e8e8e8;
    border-radius: 6px;
    padding: 20px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pdfdesigner-annex-page {
    position: relative;
}

.pdfdesigner-annex-page .pds-annex-label {
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 7px;
    color: #bbb;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;
}


/* =====================================================
   APERÇU PDF — page A4 proportionnelle
   ===================================================== */
.pdfdesigner-page {
    background: #fff;
    width: 100%;
    max-width: 460px;
    min-height: 500px; /* fallback when aspect-ratio is not supported */
    aspect-ratio: 210 / 297;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
    border-radius: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 9px;
    color: #222;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
/* When aspect-ratio is supported, let it control height naturally */
@supports (aspect-ratio: 1) {
    .pdfdesigner-page { min-height: 0; }
}

/* =====================================================
   EN-TÊTE
   ===================================================== */
.pdf-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #003366;
    color: #fff;
    min-height: 62px;
    position: relative;
}

.pdf-header-logo {
    position: absolute;     /* top/left set by JS to match PHP formula: offset% of available space */
    top: 0;
    z-index: 1;
    background: rgba(255,255,255,0.2);
    border: 1px dashed rgba(255,255,255,0.5);
    border-radius: 3px;
    width: 44px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    color: rgba(255,255,255,0.8);
}

/* Bloc titre + dates : positionné en absolu dans la bande, centré verticalement.
   L'alignement horizontal (gauche/centre/droite) est piloté par JS via align-items. */
#prev-title-block {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    pointer-events: none;
    padding: 0 14px;          /* overridden by JS from header margins */
}

#prev-title {
    display: flex;
    flex-direction: column;
    align-items: center;      /* overridden by JS */
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1;
}

#prev-dates {
    display: flex;
    flex-direction: column;
    align-items: center;      /* overridden by JS */
    font-size: 7.5px;
    font-weight: normal;
    opacity: 0.9;
    line-height: 1.35;
}

/* Custom header text — thin bar below the colored band */
.pdf-custom-header-text {
    padding: 3px 14px;
    font-size: 7px;
    color: #666;
    font-style: italic;
    border-bottom: 1px solid #eee;
    text-align: center;
}

/* =====================================================
   BANDEAU INFOS
   ===================================================== */
.pdf-inforow {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid #eee;
    font-size: 7.5px;
    line-height: 1.5;
}

.pdf-client  { flex: 1; }
.pdf-company { flex: 1; text-align: right; color: #444; }

/* =====================================================
   TABLEAU DES LIGNES
   ===================================================== */
.pdf-table {
    margin: 6px 14px 0;
    font-size: 7.5px;
    overflow: hidden;
}

.pdf-table-head,
.pdf-table-row {
    display: flex;
    align-items: flex-start;
    padding: 3px 0;
}

.pdf-table-head {
    font-weight: bold;
    font-size: 7px;
}

.pdf-table-row {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.col-num {
    text-align: center;
}

.col-num,
.col-ref,
.col-label,
.col-desc,
.col-qty,
.col-unit,
.col-pu,
.col-total {
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 1px 3px;
    min-width: 0;
}

.col-num,
.col-ref,
.col-label,
.col-qty,
.col-unit,
.col-pu,
.col-total {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-desc {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    line-height: 1.35;
}

.col-qty,
.col-unit  { text-align: center; }
.col-pu    { text-align: right; }
.col-total { text-align: right; font-weight: bold; }

/* =====================================================
   DOC INFO (conditions de règlement, banque, etc.)
   ===================================================== */
.pdf-doc-info {
    margin: 6px 14px 4px;
    font-size: 7px;
    color: #444;
    line-height: 1.6;
}

.pdf-doc-info-row {
    display: flex;
    gap: 6px;
}

.pdf-doc-info-label {
    font-weight: bold;
    white-space: nowrap;
    min-width: 90px;
    color: #333;
}

/* =====================================================
   BLOC BANCAIRE (police réduite, interligne serré)
   ===================================================== */
.pdf-bank-info {
    margin: 2px 0 4px;
    font-size: 6px;
    color: #444;
    line-height: 1.35;
    flex: 1 1 0;
    min-width: 0;
}

.pdf-bank-info-title {
    font-weight: bold;
    margin-bottom: 1px;
    color: #333;
}

.pdf-bank-info-row {
    display: flex;
    gap: 4px;
}

.pdf-bank-info-label {
    font-weight: bold;
    white-space: nowrap;
    color: #333;
}

/* =====================================================
   TOTAUX
   ===================================================== */
.pdf-totals {
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 7.5px;
    gap: 2px;
    width: 100%;
}

.pdf-total-row,
.pdf-total-ht,
.pdf-total-final {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.pdf-total-row { color: #555; }

.pdf-total-hdr {
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 7px;
    padding: 1px 6px;
    border-radius: 2px;
    background: #fff !important;
    width: 100%;
}

.pdf-total-ht {
    font-weight: bold;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 2px;
}

.pdf-total-final {
    font-weight: bold;
    font-size: 9px;
    padding: 3px 6px;
    border-radius: 2px;
}

.pdf-total-row span:last-child,
.pdf-total-ht  span:last-child,
.pdf-total-final span:last-child {
    min-width: 60px;
    text-align: right;
}

/* =====================================================
   BLOC SIGNATURE — taille réduite
   ===================================================== */
.pdf-signature-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 6px 14px 0;
}

.pdf-signature-box {
    width: 38%;
    min-width: 80px;
    height: 26px;
    border: 1px solid #aaa;
    border-radius: 2px;
    display: flex;
    align-items: flex-start;
    padding: 2px 4px;
    box-sizing: border-box;
}

.pdf-signature-hint {
    font-size: 6px;
    color: #bbb;
}

.pdf-signature-label {
    font-size: 7px;
    font-style: italic;
    color: #555;
    margin-top: 2px;
    text-align: center;
    width: 38%;
    min-width: 80px;
}

/* =====================================================
   PIED DE PAGE
   ===================================================== */
.pdf-footer {
    margin-top: auto;
    border-top: 1px solid #ddd;
    padding: 4px 14px;
    display: flex;
    justify-content: space-between;
    font-size: 6.5px;
    color: #888;
}

/* =====================================================
   FILIGRANE
   ===================================================== */
/* ── Text block overlay (preview) ───────────────────── */
.pds-tb-block {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.3;
    padding: 1px 2px;
    border: 1px dashed rgba(0,100,200,0.4);
    border-radius: 2px;
    min-width: 12px;
    min-height: 8px;
    z-index: 15;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}
.pds-tb-block:hover, .pds-tb-block.pds-tb-active {
    border-color: rgba(0,100,200,0.8);
    outline: 1px solid rgba(0,100,200,0.3);
}

/* ── Text block form cards (admin) ───────────────────── */
.pds-tb-card {
    border: 1px solid #d0d8e0;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #f9fbfd;
}
.pds-tb-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 12px;
    color: #333;
}
.pds-tb-card label {
    font-size: 11px;
    color: #555;
    margin-right: 4px;
}
.pds-tb-card input[type=number],
.pds-tb-card select {
    width: 56px;
    font-size: 11px;
}
.pds-tb-card textarea {
    width: 100%;
    font-size: 11px;
    resize: vertical;
    min-height: 38px;
    box-sizing: border-box;
    margin-bottom: 4px;
}
.pds-tb-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 11px;
}

.pdf-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 56px;
    font-weight: bold;
    color: rgba(200,200,200,0.45);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.1em;
    z-index: 10;
}

/* =====================================================
   TITRES DE SECTION (formulaire) + ACCORDION
   ===================================================== */
.pdfdesigner-section-title {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin-top: 16px;
    margin-bottom: 0;
    padding: 6px 4px;
    border-bottom: 2px solid #003366;
    border-radius: 2px 2px 0 0;
}

.pdfdesigner-collapsible {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.pdfdesigner-collapsible:hover {
    background: rgba(0,51,102,0.05);
}
.pds-chevron {
    display: inline-block;
    margin-right: 5px;
    font-style: normal;
    transition: transform 0.15s;
}

.pdfdesigner-section-body {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    margin-bottom: 10px;
}

/* =====================================================
   BANDEAU INFOS — layout empilé (stacked)
   ===================================================== */
.pdf-inforow.layout-stacked {
    flex-direction: column;
    gap: 4px;
}
.pdf-inforow.layout-stacked .pdf-client,
.pdf-inforow.layout-stacked .pdf-company {
    flex: 1 1 100%;
    text-align: left !important;
    color: inherit;
}

input[type="color"] {
    width: 48px;
    height: 30px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
}

/* =====================================================
   COLONNES LOGISTIQUES (BL, Réception, BOM, OF)
   Cellules flex à largeur fixe dans les previews logistiques.
   ===================================================== */
.pds-log-col {
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 1px 3px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pds-log-col.pds-log-flex {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    flex: 1 1 0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 700px) {
    .pdfdesigner-settings     { -webkit-flex: 1 1 100% !important; -ms-flex: 1 1 100% !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
    .pdfdesigner-preview-wrap { -webkit-flex: 1 1 100% !important; -ms-flex: 1 1 100% !important; flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; }
}