/* ================================================================
   StockMaster Pro — barcodes.css (refonte v2.3)
   Page "Codes à barres" : prévisualisation, étiquettes, sélection.
   Portée : classes .lg-* uniquement (zéro régression).
   ================================================================ */

/* SECTIONS */
.page-body{display:block}
.page-sect{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:18px;margin-bottom:18px;
}
.sect-hdr h3{font-size:16px;font-weight:800;color:var(--text-primary)}

/* HEADER ACTIONS */
.lg-hdr-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* GENERATOR SHELL */
.lg-shell{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;margin-top:14px}
.lg-panel,.lg-preview{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;
}
.lg-panel{padding:14px}
.lg-preview{display:flex;flex-direction:column}

/* TABS */
.lg-tabs{
  display:flex;gap:8px;padding:8px;
  background:rgba(0,0,0,0.04);border-radius:var(--r-lg);border:1px solid var(--border);
}
[data-theme="dark"] .lg-tabs{background:rgba(255,255,255,0.04)}
.lg-tab{
  appearance:none;border:1px solid transparent;background:transparent;
  color:var(--text-secondary);font-weight:800;font-size:13px;
  padding:10px 12px;border-radius:var(--r-lg);cursor:pointer;transition:all var(--tr);
}
.lg-tab:hover{background:var(--bg-hover);color:var(--text-primary)}
.lg-tab.active{
  background:var(--bg-card);border-color:var(--border);
  color:var(--text-primary);box-shadow:var(--shadow);
}
.lg-tabpane{display:none;padding-top:12px}
.lg-tabpane.active{display:block}

/* CHOICE CARDS */
.lg-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lg-choice{
  display:flex;gap:10px;align-items:flex-start;padding:12px;
  border-radius:var(--r-xl);border:1px solid var(--border);background:var(--bg-card);
  cursor:pointer;transition:transform var(--tr),border-color var(--tr),background var(--tr);
}
.lg-choice:hover{transform:translateY(-1px);border-color:rgba(59,130,246,0.45)}
.lg-choice input{margin-top:2px}
.lg-choice-title{font-weight:900;color:var(--text-primary);font-size:13px}
.lg-choice-desc{color:var(--text-muted);font-size:12px;margin-top:2px;line-height:1.25}

/* FIELDSETS */
.lg-fieldset{margin-top:10px}
.lbl{display:block;color:var(--text-secondary);font-size:12px;font-weight:800;margin-bottom:6px}
.inp,.sel{width:100%}

/* TOGGLES */
.lg-toggles{display:flex;flex-wrap:wrap;gap:10px}
.lg-toggles .tog{
  display:flex;gap:8px;align-items:center;padding:10px 12px;
  border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg-card);cursor:pointer;
}
.lg-toggles .tog span{font-size:12px;font-weight:800;color:var(--text-primary)}

/* PREVIEW HEADER */
.lg-preview-hdr{
  padding:14px 16px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--border);background:var(--bg-card);
}
.lg-preview-title{font-size:14px;font-weight:900;color:var(--text-primary)}
.lg-preview-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.lg-preview-meta{font-size:12px;color:var(--text-secondary);text-align:right;white-space:nowrap}
.lg-preview-card{padding:16px}

/* PREVIEW CONTAINER */
.lg-sample{
  background:var(--bg-card);border:1px dashed rgba(148,163,184,0.45);
  border-radius:var(--r-xl);min-height:220px;padding:14px;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);

  max-height:520px;overflow:auto;
}
.lg-sample.has-items{display:block;color:inherit}

/* ═══════════════════════════════════════════════════════
   PREVIEW GRID — Structure stricte responsive
   ═══════════════════════════════════════════════════════ */
.lg-sample-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fill,var(--lg-tile-w,240px));
  gap:var(--lg-gap,10px);
  align-items:start;
  justify-content:start;
  grid-auto-flow:row dense;
}

/* ═══════════════════════════════════════════════════════
   ÉTIQUETTE (preview écran)
   ┌──────────────────────────────────┐
   │ [IMAGE]  Nom du produit          │
   │          ══ CODE-BARRES ══       │
   │          SKU                     │
   │          (code personnalisé)     │
   └──────────────────────────────────┘
   ═══════════════════════════════════════════════════════ */
.lg-preview-label{
  background:#fff;border:1px solid #dee2e6;border-radius:3px;
  padding:8px;overflow:hidden;position:relative;
  /* Repères découpe — coins discrets */
  box-shadow:
    inset 6px 0 0 -5px #ccc,inset -6px 0 0 -5px #ccc,
    inset 0 6px 0 -5px #ccc,inset 0 -6px 0 -5px #ccc;
}
[data-theme="dark"] .lg-preview-label{
  background:var(--bg-elevated);border-color:var(--border);
  box-shadow:
    inset 6px 0 0 -5px rgba(255,255,255,.12),inset -6px 0 0 -5px rgba(255,255,255,.12),
    inset 0 6px 0 -5px rgba(255,255,255,.12),inset 0 -6px 0 -5px rgba(255,255,255,.12);
}

/* ROW : image gauche + body droite */
.lg-label-row{
  display:flex;align-items:flex-start;gap:8px;height:100%;
}
.lg-label-img{
  width:44px;height:44px;flex:0 0 44px;object-fit:contain;
  border-radius:3px;border:1px solid #dee2e6;background:#f8f9fa;
}
[data-theme="dark"] .lg-label-img{border-color:var(--border);background:var(--bg-card)}
.lg-label-img-full{
  width:100%;max-height:36px;object-fit:contain;border-radius:3px;
  border:1px solid #dee2e6;margin-bottom:4px;
}
[data-theme="dark"] .lg-label-img-full{border-color:var(--border)}

/* BODY (colonne droite) */
.lg-label-body{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
}

/* NOM — toujours au-dessus du code-barres (order:1) */
.lg-label-name{
  font-weight:800;font-size:11px;line-height:1.2;color:#1a1a1a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;order:1;
}
[data-theme="dark"] .lg-label-name{color:var(--text-primary)}

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

/* SKU — centré sous code-barres (order:3) */
.lg-label-sku{
  font-family:var(--font-mono,'Courier New',monospace);font-size:10px;
  color:#666;text-align:center;order:3;
}
[data-theme="dark"] .lg-label-sku{color:var(--text-muted)}

/* CODE PERSO — sous SKU (order:4) */
.lg-label-code{
  font-family:var(--font-mono,'Courier New',monospace);font-size:10px;
  color:#888;text-align:center;order:4;
}
[data-theme="dark"] .lg-label-code{color:var(--text-secondary)}

/* QR wrapper */
.lg-qr-wrap{text-align:center;order:2}
.lg-qr-wrap img{display:inline-block;max-width:56px;max-height:56px}

/* Variantes de style */
.lg-preview-label.barcode-only .lg-label-body{text-align:center}
.lg-preview-label.qr-style .lg-label-body{text-align:center}
.lg-preview-label.full-style{display:flex;flex-direction:column}
.lg-preview-label.full-style .lg-label-body{width:100%}

/* ═══════════════════════════════════════════════════════
   SÉLECTION PRODUITS
   ═══════════════════════════════════════════════════════ */
.lg-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inp-search{min-width:280px}
.lg-prod-grid{
  padding:14px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}

/* CARTE PRODUIT — checkbox visible, état sélectionné clair */
.lg-prod-card{
  position:relative;border:2px solid var(--border);
  border-radius:var(--r-xl);background:var(--bg-elevated);
  overflow:hidden;cursor:pointer;padding:12px;
  display:flex;flex-direction:column;gap:6px;
  transition:transform var(--tr),border-color var(--tr),background var(--tr),box-shadow var(--tr);
  -webkit-user-select:none;user-select:none;
  outline:none;
}
.lg-prod-card:hover{
  transform:translateY(-2px);border-color:rgba(59,130,246,0.4);
  box-shadow:0 6px 16px rgba(59,130,246,0.1);
}
.lg-prod-card:active{transform:translateY(0)}
.lg-prod-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* État sélectionné */
.lg-prod-card.selected{
  border-color:var(--blue);background:var(--blue-pale);
  box-shadow:0 0 0 3px rgba(59,130,246,0.15);
}

/* CHECKBOX — haut-droite, toujours visible */
.lg-prod-check{
  position:absolute;top:8px;right:8px;
  width:22px;height:22px;border-radius:6px;
  border:2px solid var(--border);background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:transparent;
  transition:all var(--tr);z-index:1;flex-shrink:0;
  pointer-events:none; /* click géré par le card parent */
}
.lg-prod-card:hover .lg-prod-check{
  border-color:rgba(59,130,246,0.4);
}
.lg-prod-card.selected .lg-prod-check{
  border-color:var(--blue);background:var(--blue);color:#fff;
}

/* Image produit */
.lg-prod-img{
  width:44px;height:44px;object-fit:contain;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-size:20px;
}
.lg-prod-img img{width:100%;height:100%;object-fit:contain;border-radius:10px}

/* Textes produit */
.lg-prod-name{
  font-weight:900;color:var(--text-primary);font-size:13px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:26px;
}
.lg-prod-sku{color:var(--text-muted);font-size:12px;font-family:var(--font-mono)}

/* EMPTY */
.lg-empty{padding:24px;color:var(--text-muted);font-weight:700;text-align:center}

/* PRINT OVERLAY */
.lg-print-sheet{padding:20px}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media(max-width:1200px){
  .lg-shell{grid-template-columns:1fr}
  .lg-prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .lg-choice-grid{grid-template-columns:1fr}
  .lg-prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inp-search{min-width:220px}
}
@media(max-width:560px){
  .page-sect{padding:14px}
  .lg-prod-grid{grid-template-columns:1fr}
  .lg-hdr-actions{width:100%;justify-content:flex-start}
}
@media print{body>*:not(.print-overlay){display:none!important}.print-overlay{display:block!important}}

/* v2.3.1 — taille fixe des tuiles en preview (pilotée par format) */
.lg-preview-label{
  width:var(--lg-tile-w,240px);
  height:var(--lg-tile-h,110px);
  box-sizing:border-box;
}
.lg-label-row{height:100%;}
.lg-label-body{min-height:0;}

/* Nom: 2 lignes max (pas de débordement) */
.lg-label-name{
  white-space:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
