/* ============================================================
   Étiquettes de tableau électrique — styles.css
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#0f172a;background:#f6f7fb}

/* header */
/* --- Barre d’outils modernisée --- */
/* --- Barre d’outils modernisée avec icônes --- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.8rem;
}

.toolbar button,
.toolbar .file-btn {
  position: relative;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  display: inline-flex;
  align-items: center;
  gap: 6px;                     /* espace entre icône et texte */
  height: 38px;
}

.toolbar button:hover,
.toolbar .file-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.toolbar button:active,
.toolbar .file-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.1);
}

.file-btn input[type="file"] {
  display: none;
}

.toolbar .btn.primary {
  background: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
}
.toolbar .btn.primary:hover {
  background: #1d4ed8;
}

/* Petits ajustements pour les icônes */
.toolbar button::first-letter,
.toolbar .file-btn::first-letter {
  font-size: 15px;
}



/* layout */
.layout{display:grid;grid-template-columns:400px 1fr;gap:16px;padding:16px}
.side{display:flex;flex-direction:column;gap:16px}
.panel{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:14px 14px 16px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.panel h2{margin:0 0 10px;font-size:20px;font-weight:800}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.panel label{display:flex;flex-direction:column;gap:6px;font-size:12px}
.panel input,.panel select{width:100%;min-width:0;padding:10px 12px;border:1px solid #d1d5db;border-radius:12px;font-size:14px;background:#fff}
.row-actions{display:flex;gap:10px;margin-top:10px}

/* picto lib */
.picto-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.picto-list img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fafafa;border:1px dashed #e5e7eb;border-radius:12px;padding:6px}
.picto-list.empty{display:block}
.empty-hint{color:#6b7280;font-size:12px}

/* board */
.canvas-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:16px;overflow:auto}
.board{position:relative;background:#fff;padding:5mm;width:fit-content}
.row{display:grid;gap:var(--gap-x);grid-auto-flow:column;margin-bottom:var(--gap-y)}
.cell,.module{height:var(--mod-h)}
.cell{outline:1px dashed #cbd5e1;background:#f8fafc}

/* module */
.module{position:relative;outline:1px solid #0f172a;border-radius:0;background:#fff;overflow:hidden;display:grid;grid-template-rows:var(--code-h) var(--picto-h) calc(var(--mod-h) - var(--code-h) - var(--picto-h));print-color-adjust:exact;-webkit-print-color-adjust:exact}
.module.mode-compact{grid-template-rows:var(--picto-h) calc(var(--mod-h) - var(--picto-h))}
.module.mode-compact .code{display:none}
.module .code{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:var(--fs-code,3.8mm);border-bottom:1px solid #e5e7eb}
.module .picto{display:flex;align-items:center;justify-content:center}
.module .picto img{max-height:100%;max-width:100%;object-fit:contain}
.module .text{display:grid;grid-template-rows:var(--title-h) 1fr;color:#0f172a}
.module .title{background:var(--title-bg,#f7e26d);print-color-adjust:exact;-webkit-print-color-adjust:exact;font-weight:800;text-align:center;display:flex;align-items:center;justify-content:center;font-size:var(--fs-title,3.2mm);line-height:1.1;padding:0 2mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module .desc{text-align:center;font-size:var(--fs-desc,2.8mm);line-height:1}
.module .desc.lines-3{display:grid;grid-template-rows:1fr 1fr 1fr}
.module .desc.lines-2{display:grid;grid-template-rows:1fr 1fr}
.module .desc div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 1.2mm}

/* modal */
dialog{border:none;border-radius:20px;padding:0;max-width:980px;width:96vw}
dialog::backdrop{background:rgba(0,0,0,.35)}
.sheet{display:flex;flex-direction:column}
.sheet-head{padding:16px 22px;border-bottom:1px solid #e5e7eb;background:#f9fafb;border-top-left-radius:20px;border-top-right-radius:20px}
.sheet-title{display:flex;align-items:center;gap:10px}
.badge{background:#111827;color:#fff;font-weight:800;font-size:11px;padding:4px 8px;border-radius:999px;letter-spacing:.3px;text-transform:uppercase}
.sheet-head h3{margin:0;font-size:22px;font-weight:800}
.sheet-body{padding:18px;display:flex;flex-direction:column;gap:16px}
.edit-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.card{background:#fff;border:1px solid #eef0f3;border-radius:16px;padding:14px}
.section-title{font-weight:800;color:#374151;margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.6px}

/* form-grid */
.form-grid{display:grid;grid-template-columns:180px 1fr;gap:10px 14px;align-items:center}
.fg-label{font-size:13px;font-weight:700;color:#334155}
.fg-field input,.fg-field select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:12px;font-size:14px}
.with-counter{position:relative}
.with-counter .counter{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:#6b7280}

/* palette & mini preview */
.color-row{display:flex;gap:10px;align-items:center}
.btn.tiny{padding:6px 10px;border-radius:10px;font-size:12px}
.color-palette{display:flex;flex-wrap:wrap;gap:10px}
.color-chip{position:relative;width:32px;height:32px;border-radius:10px;border:1px solid #e5e7eb;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);transition:transform .12s ease}
.color-chip:hover{transform:translateY(-1px)}
/* jolie croix */
.color-remove{position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;font-weight:800;line-height:16px;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.08);opacity:0;transform:scale(.8);transition:opacity .12s ease,transform .12s ease}
.color-chip:hover .color-remove{opacity:1;transform:scale(1)}

.picto-chooser{display:flex;align-items:center;gap:10px}
.picto-preview{width:64px;height:64px;border:1px solid #e5e7eb;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fafafa;overflow:hidden}
.picto-preview img{max-width:100%;max-height:100%;object-fit:contain}
dialog .sheet img{max-width:100%;height:auto}
.pm-picto img{max-height:100%;max-width:100%;object-fit:contain}

.preview-card{background:#f8fafc;border:1px dashed #e5e7eb;border-radius:14px;padding:10px}
.preview-module{--pm-h:var(--mod-h);width:72mm;height:var(--pm-h);border:1px solid #0f172a;border-radius:0;background:#fff;overflow:hidden;display:grid;grid-template-rows:var(--pm-code) var(--pm-picto) calc(var(--pm-h) - var(--pm-code) - var(--pm-picto))}
.pm-code{display:flex;align-items:center;justify-content:center;font-weight:900;border-bottom:1px solid #e5e7eb}
.pm-picto{display:flex;align-items:center;justify-content:center;font-size:18px}
.pm-title{display:flex;align-items:center;justify-content:center;font-weight:800}
.pm-desc{display:grid;grid-template-rows:1fr 1fr 1fr;text-align:center;font-size:12px}
.pm-desc div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.muted{color:#6b7280}

/* aperçu réel */
.live-preview{background:#f8fafc;border:1px dashed #e5e7eb;border-radius:14px;padding:10px;overflow:auto}
.live-preview .module{width:var(--live-w);height:var(--mod-h)}

/* footer */
.sheet-foot{padding:12px 18px;border-top:1px solid #e5e7eb;display:flex;gap:10px;justify-content:flex-end}
.btn{border:1px solid #d1d5db;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:800}
.btn.primary{background:#111827;color:#fff;border-color:#111827}
.btn.danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.btn.ghost{background:#fff}

.btn{
  padding: .6rem 1rem;
  border-radius: .6rem;
  border: 1px solid #d1d5db;
  background:#fff;
  color:#111827;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.btn:hover{ background:#f9fafb }
@media print{
  .btn{ display:none } /* on masque les boutons à l’impression */
}


/* print */
@media print{
  .app-header,.side{display:none!important}
  .layout{display:block;padding:0}
  .canvas-wrap{border:none;padding:0;overflow:visible}
  .board{padding:4mm;margin:0 auto;background:#fff}
  .module,.module .title,.module .code{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  @page{size:A4 landscape;margin:8mm}
}

/* --- Pliage des panneaux (ajout très discret) --- */
.panel h2{ position:relative; padding-right:26px; } /* réserve la place de la flèche sans changer le style */
.fold-btn{
  position:absolute; right:0; top:0;
  height:100%; width:24px;
  border:none; background:transparent; cursor:pointer;
  font-size:12px; line-height:1; color:#6b7280;
}
.panel.collapsed .panel-body{ display:none; }
.panel.collapsed .fold-btn{ color:#9ca3af; }

/* --- Amélioration esthétique des flèches pliantes --- */
.fold-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: #f2f3f5;               /* cercle gris clair */
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.fold-btn::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #555;         /* flèche gris foncé */
  transition: transform 0.2s;
}

.panel.collapsed .fold-btn::before {
  transform: rotate(180deg);          /* flèche vers le bas */
}

.fold-btn:hover {
  background: #e5e7eb;                /* survol légèrement plus sombre */
}

/* Marge à gauche pour les champs avancés de la modale */
/* Ajustement de largeur des champs avancés */
#advancedFields {
  max-width: 360px;       /* largeur max du bloc complet */
}

#advancedFields .fg-field input,
#advancedFields .fg-field select {
  width: 100%;            /* occupe toute la cellule */
  max-width: 220px;       /* limite la largeur réelle */
  box-sizing: border-box; /* évite le débordement */
  height: 28px;
  padding: 3px 6px;
  font-size: 12px;
}

#advancedFields .fg-label {
  font-size: 12px;
  white-space: nowrap;    /* évite le retour à la ligne */
}


/* Bloc avancé compact sous l’aperçu rapide */
.form-grid.compact {
  grid-template-columns: 120px 1fr;  /* plus étroit que la colonne de gauche */
  gap: 6px 10px;
}

.form-grid.compact .fg-label {
  font-size: 12px;
}

.form-grid.compact .fg-field input,
.form-grid.compact .fg-field select {
  height: 30px;
  padding: 4px 8px;
  font-size: 12px;
}

/* Inputs/Selects de la modale, même style que 'Pôles' */
#moduleDialog .field .form-control,
#moduleDialog .field select,
#moduleDialog .field input[type="text"],
#moduleDialog .field input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--input-border, #d1d5db);
  border-radius: 8px; /* mêmes arrondis */
  background: var(--input-bg, #fff);
  color: var(--text, #111827);
}

/* Harmonise le select (flèche native) */
#moduleDialog .field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

.panel textarea{
  width:100%;
  min-width:0;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:12px;
  font-size:14px;
  background:#fff;
  resize:vertical;
}

/* ===== Amélioration visuelle : ligne "Picto EDF" ===== */
.edf-picto-row {
  margin-top: 6px;
}

.edf-picto-row .picto-chooser {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items: center;
}

/* Aperçu plus grand et net */
#edfPictoPreview.picto-preview {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#edfPictoPreview.picto-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Select lisible sur toute la largeur disponible */
#edfPictoSelect {
  min-width: 260px;   /* évite l’abréviation "Di…" */
  width: 100%;
  height: 40px;
  padding: 0 10px;
}

/* Bouton fichier plus confortable */
#edfPictoFile {
  min-width: 160px;
  height: 40px;
}

/* ===== Ligne "Picto EDF" — layout soigné, sans débordement ===== */
.edf-picto-row {
  display: grid;
  grid-template-columns: 20% 1fr auto; /* ~20% pour le picto */
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden; /* rien ne dépasse du cadre parent */
}

/* Colonne 1 : aperçu carré, bien visible */
.edf-picto-preview {
  width: 100%;
}
#edfPictoPreview.picto-preview {
  width: 100%;
  aspect-ratio: 1 / 1;              /* carré */
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;                      /* évite l’effet “trop fin” collé au bord */
  box-sizing: border-box;
  overflow: hidden;
}
#edfPictoPreview.picto-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* Colonne 2 : select lisible et fluide */
.edf-picto-select {
  min-width: 0;                      /* autorise le shrink sans overflow */
}
#edfPictoSelect {
  width: 100%;
  min-width: 280px;                  /* évite les libellés tronqués "Di…" */
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Colonne 3 : "ou" + input fichier, pas de dépassement */
.edf-picto-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.edf-picto-file .or {
  color: #6b7280;
  font-size: 14px;
  white-space: nowrap;
}
#edfPictoFile {
  height: 40px;
  max-width: 220px;                  /* reste dans le bloc */
  box-sizing: border-box;
}

/* Responsif : en colonnes sur petits écrans, rien ne dépasse */
@media (max-width: 900px) {
  .edf-picto-row {
    grid-template-columns: 25% 1fr;  /* picto + select sur la 1ère ligne */
    grid-template-rows: auto auto;   /* fichier à la ligne suivante */
  }
  .edf-picto-file {
    grid-column: 1 / -1;             /* toute la largeur en dessous */
    justify-content: flex-start;
  }
}

/* Forcer le bloc Picto EDF à s'étaler sur toute la grille du panneau */
.grid2 .edf-picto-row{ grid-column:1 / -1; }



/* Réduction responsive si le panneau devient étroit */
@media (max-width: 900px){
  .edf-picto-row{
    grid-template-columns: 28% 1fr;   /* picto + select sur 1e ligne */
    grid-template-rows: auto auto;
  }
  .edf-picto-file{ grid-column:1 / -1; justify-content:flex-start; }
}

/* ===== Picto EDF — version stable : picto à gauche, champs empilés à droite ===== */

.edf-picto-row {
  display: grid;
  grid-template-columns: 20% 1fr; /* picto 20 %, zone champs 80 % */
  gap: 16px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Picto carré à gauche */
.edf-picto-preview {
  width: 100%;
}
#edfPictoPreview.picto-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
#edfPictoPreview.picto-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Colonne de droite : champs empilés */
.edf-picto-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Select et file bien dimensionnés */
#edfPictoSelect {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}
.edf-picto-file {
  display: flex;
  align-items: center;
  gap: 8px;
}
.edf-picto-file .or {
  color: #6b7280;
  font-size: 14px;
  white-space: nowrap;
}
#edfPictoFile {
  height: 40px;
  max-width: 250px;
  box-sizing: border-box;
}

/* Responsive : le picto passe au-dessus sur petits écrans */
@media (max-width: 700px) {
  .edf-picto-row {
    grid-template-columns: 1fr;
  }
}


/* variables */
:root{
  --mod-w:18mm;
  --mod-h:45mm;
  --gap-x:0mm;
  --gap-y:0mm;
  --code-h:7mm;
  --picto-h:14mm;
  --title-h:9mm;
  --fs-code:3.8mm;
  --fs-title:3.2mm;
  --fs-desc:2.8mm;
  --pm-code:7mm;
  --pm-picto:14mm;
  --live-w:calc(var(--mod-w))
}

/* Personnalisation et déplacement des étiquettes */
.appearance-controls{display:grid;gap:8px}
.appearance-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.appearance-row>span{flex:1;min-width:135px}
.appearance-row label{display:flex;align-items:center;gap:5px;font-size:13px}
.appearance-row input[type=color]{width:40px;height:30px;padding:2px;cursor:pointer}
#board .module{cursor:grab}
#board .module.dragging{opacity:.45;cursor:grabbing}
#board .move-target{outline:3px solid #16a34a;outline-offset:-3px}
#board .move-invalid{outline:3px solid #dc2626;outline-offset:-3px}
.module .desc>div{print-color-adjust:exact;-webkit-print-color-adjust:exact}
@media print{#board .module.dragging{opacity:1}#board .move-target,#board .move-invalid{outline:1px solid #0f172a}}

/* Centrage dans toute la surface colorée, y compris à l’impression. */
.module .desc>div,.pm-desc>div{display:flex;align-items:center;justify-content:center;min-height:0;text-align:center}

.theme-panel{display:grid;gap:10px}
.theme-panel select,.theme-panel input[type=text]{width:100%;box-sizing:border-box}
.theme-actions{display:flex;gap:8px;flex-wrap:wrap}
#themeColors{display:grid;gap:8px}

/* Fond et texte d’une zone restent groupés, même dans une colonne étroite. */
.appearance-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.appearance-row>span{min-width:0;font-size:12px;overflow-wrap:anywhere}
.appearance-row label{white-space:nowrap;gap:4px;font-size:12px;margin:0}
.appearance-row input[type=color]{width:34px;min-width:34px;height:28px;margin:0}
#moduleThemeSelect{width:100%;min-width:0;margin-bottom:8px}
@media(max-width:760px){.edit-layout{grid-template-columns:minmax(0,1fr)}}