/* ================================================================
   MageStock — barcodes.print.css (compatibilité historique, impression popup inline prioritaire)
   Impression fenêtre popup — rendu IDENTIQUE à la prévisualisation.
   Structure : même hiérarchie que preview (image gauche, nom haut, barcode centre, SKU bas).
   ================================================================ */

/* ─── PRINT ─── */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    font-family: Arial, Helvetica, sans-serif;
  }

  /* PLANCHE (page) */
  .lg-sheet-page {
    display: grid !important;
    grid-template-columns: repeat(var(--lg-cols), var(--lg-wmm));
    grid-auto-rows: var(--lg-hmm);
    gap: var(--lg-gapmm);
    width: calc(var(--lg-cols) * var(--lg-wmm) + (var(--lg-cols) - 1) * var(--lg-gapmm));
    margin: 0 auto !important;
    page-break-after: always;
    page-break-inside: avoid;
  }
  .lg-sheet-page:last-child {
    page-break-after: auto !important;
  }

  /* ÉTIQUETTE */
  .lg-sheet-label {
    position: relative;
    padding: 2mm;
    background: #fff;
    break-inside: avoid;
    overflow: hidden;
    box-sizing: border-box;
  }
  .lg-sheet-empty {
    border: 0.95pt dashed #000;
  }

  /* ─── REPÈRES DE DÉCOUPE ─── */
  .lg-sheet-label::before {
    content: "";
    position: absolute;
    inset: -0.5mm;
    pointer-events: none;
    background:
      /* coins haut-gauche */
      linear-gradient(#000,#000) left top / 3mm 1.15pt no-repeat,
      linear-gradient(#000,#000) left top / 1.15pt 3mm no-repeat,
      /* coins haut-droite */
      linear-gradient(#000,#000) right top / 3mm 1.15pt no-repeat,
      linear-gradient(#000,#000) right top / 1.15pt 3mm no-repeat,
      /* coins bas-gauche */
      linear-gradient(#000,#000) left bottom / 3mm 1.15pt no-repeat,
      linear-gradient(#000,#000) left bottom / 1.15pt 3mm no-repeat,
      /* coins bas-droite */
      linear-gradient(#000,#000) right bottom / 3mm 1.15pt no-repeat,
      linear-gradient(#000,#000) right bottom / 1.15pt 3mm no-repeat;
  }

  /* ─── STRUCTURE ÉTIQUETTE (identique preview) ───
     ┌────────────────────────────────┐
     │ [IMG]  Nom du produit          │
     │        ═══ CODE-BARRES ═══     │
     │        SKU                     │
     │        (code perso)            │
     └────────────────────────────────┘
  */

  /* Layout image + code */
  .lg-label-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 2mm;
    height: 100%;
  }

  .lg-label-img {
    width: 14mm !important;
    height: 14mm !important;
    flex: 0 0 14mm;
    object-fit: contain;
    border: 0.6pt solid #ddd;
    border-radius: 1mm;
  }

  .lg-label-img-full {
    width: 100%;
    max-height: 12mm;
    object-fit: contain;
    border: 0.6pt solid #ddd;
    border-radius: 1mm;
    margin-bottom: 1mm;
  }

  .lg-label-body {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    gap: 0.3mm;
  }

  /* NOM — au-dessus du code-barres */
  .lg-label-name {
    font-size: 7pt !important;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    order: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* CODE-BARRES — centré */
  .lg-bc-wrap {
    width: 100%;
    text-align: center;
    order: 2;
  }
  .lg-bc-wrap canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 10mm !important;
    display: block !important;
  }

  /* SKU — centré sous code-barres */
  .lg-label-sku {
    font-family: 'Courier New', monospace !important;
    font-size: 6pt !important;
    color: #444;
    text-align: center;
    order: 3;
    margin-top: 0.3mm;
  }

  /* CODE PERSO — sous SKU */
  .lg-label-code {
    font-family: 'Courier New', monospace !important;
    font-size: 6pt !important;
    color: #666;
    text-align: center;
    order: 4;
  }

  /* Style barcode-only */
  .lg-label-barcode-only {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5mm;
  }

  /* Style QR */
  .lg-label-qr {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5mm;
  }
  .lg-label-qr img,
  .lg-qr-wrap img {
    width: 16mm !important;
    height: 16mm !important;
  }

  /* Style full */
  .lg-label-full {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    gap: 0.5mm;
  }
}

/* ─── ÉCRAN (fenêtre popup avant impression) ─── */
@media screen {
  body {
    background: #f0f2f5;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .lg-sheet-page {
    display: grid;
    grid-template-columns: repeat(var(--lg-cols), var(--lg-wmm));
    grid-auto-rows: var(--lg-hmm);
    gap: var(--lg-gapmm);
    width: calc(var(--lg-cols) * var(--lg-wmm) + (var(--lg-cols) - 1) * var(--lg-gapmm));
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    margin: 0 auto 24px;
    padding: 8mm;
    max-width: 210mm;
    border-radius: 4px;
  }

  .lg-sheet-label {
    position: relative;
    padding: 2mm;
    background: #fff;
    overflow: hidden;
    border: 0.5px solid #e0e0e0;
    border-radius: 2px;
  }
  .lg-sheet-empty {
    border: 0.95pt dashed #000;
  }

  .lg-label-row {
    display: flex;
    align-items: flex-start;
    gap: 2mm;
    height: 100%;
  }
  .lg-label-img {
    width: 14mm;
    height: 14mm;
    flex: 0 0 14mm;
    object-fit: contain;
    border: 0.5px solid #ddd;
    border-radius: 2px;
  }
  .lg-label-img-full {
    width: 100%;
    max-height: 12mm;
    object-fit: contain;
    border: 0.5px solid #ddd;
    border-radius: 2px;
    margin-bottom: 1mm;
  }
  .lg-label-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5mm;
  }
  .lg-label-name {
    font-size: 7pt;
    font-weight: 700;
    line-height: 1.15;
    color: #111;
    order: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lg-bc-wrap { width: 100%; text-align: center; order: 2; }
  .lg-bc-wrap canvas { width: 100%; height: auto; max-height: 10mm; display: block; }
  .lg-label-sku {
    font-family: 'Courier New', monospace;
    font-size: 6pt; color: #444; text-align: center; order: 3;
  }
  .lg-label-code {
    font-family: 'Courier New', monospace;
    font-size: 6pt; color: #666; text-align: center; order: 4;
  }

  .lg-label-barcode-only { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
  .lg-label-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
  .lg-label-qr img, .lg-qr-wrap img { width: 16mm; height: 16mm; }
  .lg-label-full { display: flex; flex-direction: column; height: 100%; }
}

/* v2.3.1 — Nom sur 2 lignes max en impression */
.lg-label-name{
  white-space:normal !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
}
