/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Modification d’une fiche produit en modale, onglets et champs compacts.
 * Chargement : private/view.php.
 * Interactions : public/product-editor-modal.js.
 * Les couleurs et tailles paramétrables utilisent les variables --app-* / --product-*.
 * Les blocs @media adaptent la même interface à la largeur de l’écran.
 * Conserver l’ordre des règles : les ajustements spécialisés suivent le socle commun.
 */

/* Fiche complète en modale : application isolée, onglets et sauvegarde conservés. */
.product-editor-modal  {
  width:60vw;
  max-width:none;
  height:85vh;
  max-height:90vh;
  padding:14px;
  border:1px solid #ccd9e3;
  border-radius:10px;
}

.product-editor-modal[open]  {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.product-editor-modal::backdrop  {
  background:#142c4866;
}

.product-editor-modal-top  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.product-editor-modal-top h2  {
  margin:0;
  font-size:calc(16px * var(--app-font-scale, 1));
  color:var(--app-primary-color, #1c75bc);
}

.product-editor-modal-top button  {
  font-size:calc(12px * var(--app-font-scale, 1));
  padding:5px 10px;
}

.product-editor-modal > p  {
  margin:0;
  font-size:calc(12px * var(--app-font-scale, 1));
}

.product-editor-modal > p:empty  {
  display:none;
}

.product-editor-modal iframe  {
  flex:1;
  min-height:0;
  width:100%;
  border:0;
  background:white;
}

/* Chargement commun à la galerie et aux produits associés d'un fournisseur.
 * L'iframe conserve ses dimensions pour préparer les onglets sans les montrer. */
.product-editor-loading {
  position:absolute;
  inset:65px 20px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:16px;
  text-align:center;
  color:var(--app-primary-color, #1c75bc);
  font-size:calc(14px * var(--app-font-scale, 1));
}
.product-editor-loading[hidden],.product-editor-loading [hidden] {display:none!important}
.product-editor-loading progress {
  width:min(300px, 80%);
  height:8px;
  accent-color:var(--app-primary-color, #1c75bc);
}

.product-editor-embedded > aside,.product-editor-embedded .top  {
  display:none!important;
}

body.product-editor-embedded  {
  display:block;
  margin:0;
  min-width:0;
}

.product-editor-embedded main  {
  margin:0!important;
  width:100%!important;
  min-width:0;
}

.product-editor-embedded .content  {
  padding:10px;
}

.product-editor-embedded .field,.product-editor-embedded label,.product-editor-embedded legend  {
  font-size:calc(11px * var(--app-font-scale, 1))!important;
  color:var(--app-primary-color, #1c75bc)!important;
}

.product-editor-embedded input,.product-editor-embedded select,.product-editor-embedded textarea  {
  font-size:calc(11px * var(--app-font-scale, 1))!important;
  color:#111!important;
}

.product-editor-embedded .tab,.product-editor-embedded button  {
  font-size:calc(11px * var(--app-font-scale, 1));
}

@media(max-width:700px)  {
  .product-editor-modal  {
    width:96vw;
    padding:8px;
  }

}

/* Barre de titre compacte et menu d’actions de la fiche. */
.product-editor-modal  {
  overflow:hidden;
}

.product-editor-modal-top h2  {
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
  font-size:calc(13px * var(--app-font-scale, 1));
}

.product-editor-modal-top h2  {
  flex-wrap:wrap;
}

.product-editor-modal-top .product-modal-supplier  {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  font-size:calc(11px * var(--app-font-scale,1));
  font-weight:400;
  line-height:1.3;
  color:#687580!important;
  overflow-wrap:anywhere;
}

.product-editor-modal-top .product-modal-supplier>span  {
  color:inherit!important;
}

.product-editor-modal-top .product-modal-supplier .supplier-country-flag  {
  width:16px;
  height:12px;
  flex:none;
  object-fit:contain;
}

.product-modal-name  {
  display:flex;
  align-items:center;
  gap:5px;
  overflow-wrap:anywhere;
}

.product-modal-name svg,.product-modal-name img,.product-modal-name .record-icon  {
  width:20px!important;
  height:20px!important;
  font-size:calc(16px * var(--app-font-scale, 1))!important;
  flex-shrink:0;
}

.product-editor-modal-top .product-status  {
  font-size:calc(10px * var(--app-font-scale, 1));
  white-space:nowrap;
}

.product-modal-options  {
  position:relative;
  font-size:calc(11px * var(--app-font-scale, 1));
}

.product-modal-options summary  {
  cursor:pointer;
  padding:5px 8px;
}

.product-modal-options > div  {
  position:absolute;
  right:0;
  top:100%;
  z-index:10;
  width:200px;
  padding:6px;
  background:white;
  border:1px solid #ccd9e3;
  border-radius:6px;
  box-shadow:0 4px 14px #0002;
}

.product-modal-options button  {
  display:block;
  width:100%;
  margin:2px 0;
  text-align:left;
}

/* Seul le panneau d’onglet actif défile ; titre, onglets et sauvegarde restent fixes. */
html:has(body.product-editor-tabs-mode),body.product-editor-tabs-mode  {
  height:100%;
  overflow:hidden!important;
}

.product-editor-tabs-mode main,.product-editor-tabs-mode main > .content  {
  height:100%;
  min-height:0;
  box-sizing:border-box;
  overflow:hidden;
}

.product-editor-tabs-mode .content  {
  display:flex;
  flex-direction:column;
}

.product-editor-tabs-mode .content > .back,.product-editor-tabs-mode .content > .pagehead, .product-editor-tabs-mode .content > details,.product-editor-tabs-mode .content > form, .product-editor-tabs-mode .product-detail-toolbar,.product-editor-tabs-mode #record-editor > .form-footer  {
  display:none!important;
}

.product-editor-tabs-mode .content > section:has(#record-editor)  {
  flex:1;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
}

.product-editor-tabs-mode #record-editor,.product-editor-tabs-mode #record-editor > .form-body  {
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.product-modal-tabbar  {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.product-modal-tabbar .tabs  {
  flex:1;
  min-width:0;
  margin:0;
}

.product-modal-tabbar > button  {
  padding:4px 7px;
  font-size:calc(11px * var(--app-font-scale, 1));
  flex-shrink:0;
}

.product-editor-tabs-mode .product-detail-panel:not([hidden])  {
  flex:1;
  min-height:0;
  overflow-y:auto;
  margin:6px 0 0;
  box-sizing:border-box;
}

.product-editor-embedded #record-editor input,.product-editor-embedded #record-editor textarea, .product-editor-embedded #record-editor select,.product-editor-embedded #record-editor option, .product-editor-embedded #record-editor .choice-dropdown > summary,.product-editor-embedded #record-editor .choice-dropdown > summary *, .product-editor-embedded #record-editor label:has(input[type=checkbox]),.product-editor-embedded #record-editor label:has(input[type=checkbox]) *  {
  color:#111!important;
  font-size:calc(11px * var(--app-font-scale, 1))!important;
}

.product-editor-embedded #record-editor .field  {
  font-size:calc(11px * var(--app-font-scale, 1))!important;
}

@media(max-width:700px)  {
  .product-editor-modal  {
    width:96vw;
  }

}

/* Présentation compacte : paires de champs et actions alignées. */
.product-editor-tabs-mode .product-modal-field-pair  {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  align-items:start;
}

.product-editor-tabs-mode .product-modal-field-pair > .field  {
  min-width:0;
  margin:0;
}

.product-editor-tabs-mode .product-modal-field-pair select  {
  min-width:0;
  width:100%;
}

.product-editor-tabs-mode .product-modal-supplier-row  {
  display:flex;
  align-items:flex-end;
  gap:6px;
}

.product-editor-tabs-mode .product-modal-supplier-row .supplier-picker  {
  flex:1;
  min-width:0;
  display:flex;
  align-items:flex-end;
  gap:4px;
}

.product-editor-tabs-mode .product-modal-supplier-row .supplier-picker > .field  {
  flex:1;
  min-width:0;
  margin:0;
}

.product-editor-tabs-mode .product-modal-supplier-row select  {
  height:30px;
  min-height:30px;
  margin:0;
}

.product-editor-tabs-mode .product-modal-supplier-row [data-new-supplier]  {
  height:30px;
  min-height:30px;
  width:28px;
  padding:3px;
  margin:0;
}

.product-editor-tabs-mode .product-modal-supplier-row > .check-field  {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:3px;
  height:30px;
  margin:0;
  white-space:nowrap;
}

.product-editor-tabs-mode .product-modal-criterion-pair textarea  {
  height:42px!important;
  min-height:42px!important;
  padding:5px;
  line-height:calc(15px * var(--app-font-scale, 1));
  resize:vertical;
}

.product-editor-tabs-mode .product-modal-criterion-pair .choice-dropdown > summary, .product-editor-tabs-mode .product-modal-criterion-pair select:not([hidden])  {
  min-height:42px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
}

.product-editor-tabs-mode .product-modal-website  {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 5px;
  align-items:center;
}

.product-editor-tabs-mode .product-modal-website > label,.product-editor-tabs-mode .product-modal-website > span  {
  grid-column:1 / -1;
}

.product-editor-tabs-mode .product-modal-website input  {
  min-width:0;
  width:100%;
  margin:0;
}

.product-editor-tabs-mode .product-modal-website [data-address-action]  {
  margin:0;
}

.product-editor-tabs-mode .product-modal-website .address-link  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:30px;
  padding:3px;
  box-sizing:border-box;
  margin:0;
}

.product-editor-tabs-mode [hidden]  {
  display:none!important;
}

/* Présentation et caractéristiques : libellés alignés et saisie peu espacée.
   Le sous-grillage aligne aussi les champs quand un libellé occupe deux lignes. */
.product-editor-tabs-mode #group-0 .product-detail-column  {
  gap:8px;
}

.product-editor-tabs-mode #group-0 .field  {
  gap:3px;
  margin:0;
}

.product-editor-tabs-mode #group-0 .field input:not([type=checkbox]):not([type=range]):not(.choice-native), .product-editor-tabs-mode #group-0 .field select:not(.choice-native), .product-editor-tabs-mode #group-0 .field textarea  {
  padding:4px 6px;
  box-sizing:border-box;
  line-height:calc(15px * var(--app-font-scale,1));
}

.product-editor-tabs-mode #group-0 .product-modal-field-pair  {
  row-gap:3px;
  align-items:start;
}

.product-editor-tabs-mode #group-0 .product-modal-field-pair > .field  {
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
  align-items:start;
}

.product-editor-tabs-mode #group-0 .product-modal-field-pair > .field > :first-child  {
  align-self:end;
  line-height:1.3;
}

.product-editor-tabs-mode #group-0 .product-modal-criterion-pair  {
  --product-control-min-height:calc(30px * var(--app-font-scale,1) + 10px);
}

.product-editor-tabs-mode #group-0 .product-modal-criterion-pair textarea  {
  height:var(--product-detail-height,var(--product-control-min-height))!important;
  min-height:var(--product-control-min-height)!important;
}

.product-editor-tabs-mode #group-0 .product-modal-criterion-pair select:not(.choice-native)  {
  height:var(--product-control-min-height);
  min-height:var(--product-control-min-height);
}

.product-editor-tabs-mode #group-0 .choice-dropdown  {
  margin:0;
}

.product-editor-tabs-mode #group-0 .choice-dropdown > summary  {
  min-height:36px;
  padding:4px 6px;
  box-sizing:border-box;
  line-height:calc(15px * var(--app-font-scale,1));
}

.product-editor-tabs-mode #group-0 .product-modal-criterion-pair .choice-dropdown > summary  {
  min-height:calc(var(--product-control-min-height) - 2px);
}

/* L'ouverture de la liste conserve la hauteur compacte du champ de précision. */
.product-editor-tabs-mode #group-0 .choice-options  {
  padding:4px 6px;
  gap:1px;
}

.product-editor-tabs-mode #group-0 .choice-options label  {
  min-height:0;
  margin:0;
  padding:2px 0;
  gap:5px;
  line-height:1.2;
}

.product-editor-tabs-mode #group-0 .choice-options input[type=checkbox]  {
  width:13px!important;
  height:13px!important;
  min-height:0;
  margin:0;
  padding:0!important;
}

.product-editor-tabs-mode #group-0 .choice-error  {
  margin:0;
}

.product-editor-tabs-mode #group-0 .choice-error:empty  {
  display:none;
}

/* Synthèse et coûts : dépenses repliées, applications et conclusion sur six lignes. */
.product-editor-tabs-mode .product-modal-costs  {
  margin-bottom:10px;
  border:1px solid #dce5ed;
  border-radius:5px;
}

.product-editor-tabs-mode .product-modal-costs > summary  {
  padding:7px;
  color:var(--app-primary-color, #1c75bc)!important;
  font-weight:600;
  cursor:pointer;
}

.product-editor-tabs-mode .product-modal-costs > div  {
  display:grid;
  gap:8px;
  padding:8px;
}

.product-editor-tabs-mode .product-modal-six-lines textarea  {
  min-height:102px!important;
  height:102px;
  line-height:calc(15px * var(--app-font-scale, 1));
  padding:5px;
  box-sizing:border-box;
  resize:vertical;
}

/* Synthèse et indices : lecture compacte dans la modale produit. */
.product-editor-tabs-mode textarea.product-modal-eight-lines  {
  height:132px!important;
  min-height:132px!important;
  line-height:calc(15px * var(--app-font-scale, 1));
  padding:5px;
  box-sizing:border-box;
}

.product-editor-tabs-mode .list-help-icon  {
  width:13px!important;
  height:13px!important;
  min-height:0!important;
  padding:0!important;
  font-size:calc(10px * var(--app-font-scale, 1))!important;
  line-height:calc(13px * var(--app-font-scale, 1))!important;
}

/* Statut pilotable depuis le titre, sans doublon dans l'onglet de présentation. */
.product-editor-modal-top [data-product-header-status]  {
  flex:0 0 auto;
  width:auto;
  max-width:130px;
  min-height:28px;
  height:28px;
  margin:0;
  padding:3px 7px;
  font-family:inherit;
  font-size:calc(11px * var(--app-font-scale,1));
}

.product-detail-toolbar [data-product-status-field]  {
  min-width:120px;
  max-width:180px;
}

.product-detail-toolbar [data-product-status-field] .field  {
  margin:0;
}

/* Tarifs, conditionnement et relevé manuel du stock : trois rubriques facultatives. */
.product-commercial-grid  {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.product-commercial-section  {
  min-width:0;
}

.product-commercial-section h3  {
  font-size:calc(13px * var(--app-font-scale,1));
  color:var(--app-primary-color,#227e9d);
  margin:0 0 10px;
}

.product-commercial-section .field  {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  margin:0 0 8px;
  gap:4px;
}

.product-commercial-section .field input,.product-commercial-section .field textarea  {
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.product-commercial-section .muted  {
  font-size:calc(11px * var(--app-font-scale,1));
  margin:0 0 8px;
}

.product-commercial-section textarea  {
  min-height:62px;
  resize:vertical;
}

@media(max-width:700px)  {
  .product-commercial-grid  {
    grid-template-columns:1fr;
  }

}