/* ──────────────────────────────────────────────────────────
   1) La modale au complet doit avoir une hauteur fixe à 80 vh
   et être un flex‐container vertical (header/body/footer)
   ────────────────────────────────────────────────────────── */
.modal-dialog.modal-lg.modal-dialog-centered {
  max-width: 25vw;     /* largeur max = 90 % du viewport */
  margin: auto;        /* centrage horizontal */
}
.modal-dialog.modal-lg .modal-content {
  height: 80vh;        /* hauteur fixe = 80 % de la fenêtre */
  display: flex;
  flex-direction: column;
}

/* 2) Le <div class="modal-body"> ne doit pas scroller lui‐même,
   il faut qu’il devienne un rang flex-column occupé par :
   - d’abord la partie “options” (radios+async+suppliers) en haut,
   - puis le volet “arbre” qui prend tout le reste. */
.modal-body {
  padding: 0;            /* on gère le padding dans les sous-blocs */
  flex: 1 1 auto;        /* occupe tout l’espace restant après header */
  display: flex;
  flex-direction: column;
  overflow: hidden;       /* on masque tout scroll direct sur modal-body */
}

/* 3) Le conteneur “flex-grow-1” autour de l’UL
   doit prendre tout l’espace restant et l’UL défile à l’intérieur */
.modal-body > .px-4.flex-grow-1 {
  flex: 1 1 auto;         /* occupe tout l’espace restant */
  display: flex;
  flex-direction: column;
}

/* 4) Enfin, l’UL (#product-import-treeview) doit se redimensionner
   à 100 % du conteneur parent et scroller en interne */
#product-import-treeview {
  background-color: #1e1e23;  /* gris très foncé */
  border-radius: 6px;
  padding: 0.3em 0.4em;
  flex: 1 1 auto;             /* occupe tout l’espace vertical qui reste */
  overflow-y: auto;           /* seul cet UL va défiler verticalement */
  margin-bottom: 0.5em;        /* un tout petit espacement en bas */
}

/* 5) Reste du style (hover, checkbox, toggle, etc.) */
#product-import-treeview .d-flex,
#product-import-treeview .jstree-anchor {
  font-size: 0.92em;
  color: #e0e0e0;
  margin-bottom: 0.25em;
  white-space: nowrap;
  transition: background-color 0.12s, color 0.12s;
}
#product-import-treeview .d-flex:hover {
  background-color: #2a2a33;
  color: #ffffff;
}
.toggle-btn {
  background: none;
  border: none;
  color: #888888;
  font-size: 0.95em;
  line-height: 1;
  width: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: color 0.12s;
}
.toggle-btn:focus {
  outline: none;
  box-shadow: none;
}
.toggle-btn:hover {
  color: #73c2fb;
}
.toggle-btn[aria-expanded="true"] {
  transform: rotate(90deg);
}
#product-import-treeview .form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.6em;
  flex-shrink: 0;
}
#product-import-treeview i.bi {
  color: #b0b0b0;
  font-size: 1em;
  margin-right: 0.5em;
  flex-shrink: 0;
}
#product-import-treeview .ps-4 > li .d-flex {
  padding-left: 1.0rem;
}

/* 6) Responsive (mobilité) : agrandir un peu sur petit écran */
@media (max-width: 767px) {
  .modal-dialog.modal-xl.modal-dialog-centered {
    max-width: 98vw;
  }
  .modal-dialog.modal-xl .modal-content {
    height: 85vh;
  }
  #product-import-treeview {
    padding: 0.4em 0.3em;
  }
  #product-import-treeview .d-flex {
    font-size: 1em;
  }
  #product-import-treeview .form-check-input {
    width: 1.3em;
    height: 1.3em;
    margin-right: 0.7em;
  }
  .toggle-btn {
    width: 1.4rem;
  }
}

/* Fixe la hauteur à 0/auto pour l'UL */
.modal-body > .flex-grow-1 {
  min-height: 0 !important;
  /* Obligatoire pour que l'enfant flex puisse shrink si besoin */
}
#product-import-treeview {
  min-height: 0 !important;
  /* Pour s'assurer que flex:1 shrink bien */
}

#product-import-treeview .d-flex {
    align-items: center;     /* vertical-align des enfants */
    gap: 0.40em;             /* espace constant entre items */
}
#product-import-treeview i.bi {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.4em;
    font-size: 1.08em;
    /* Le line-height du label prendra le dessus */
}
#product-import-treeview label {
    margin-bottom: 0;
    vertical-align: middle;
}

/* Aligne mieux l’icône et le texte */
#product-import-treeview i.bi { line-height: 1; }
#product-import-treeview label { line-height: 1.35; }

/* ─────────  TOGGLE (flèche d’expansion) ───────── */
.toggle-btn{
  /* zone cliquable confortable */
  width: 2rem;               /* ≃ 32 px */
  height: 2rem;
  display: flex;             /* centre l’icône */
  align-items: center;
  justify-content: center;

  border: none;
  background: transparent;
  cursor: pointer;

  /* look par défaut */
  color: #b0b0b0;            /* gris clair  */
  transition: color .15s, transform .15s;
  flex-shrink: 0;            /* ne se réduit pas */
}

.toggle-btn:hover{ color:#73c2fb; }          /* bleu doux au survol */

/* rotation automatique quand aria-expanded="true" (nœud ouvert) */
.toggle-btn[aria-expanded="true"]{ transform:rotate(90deg); }

/* icône (Bootstrap-icons) un peu plus grosse */
.toggle-btn i{ font-size:1.15rem; line-height:1; }

/* (optionnel) légère augmentation sur mobile pour le confort tactile */
@media(max-width:767px){
  .toggle-btn{ width:2.4rem;height:2.4rem; }
  .toggle-btn i{ font-size:1.3rem; }
  .modal-dialog.modal-lg.modal-dialog-centered {
  max-width: 90vw;     /* largeur max = 90 % du viewport */
  margin: auto;        /* centrage horizontal */
  }
}

#product-import-error .alert {
    margin-bottom: 0.4em;
    font-size: 1em;
    padding: 0.65em 1em;
}

.btn-group.justify-content-center {
    display: flex;
    justify-content: center;
    gap: 0.5em;
}

#product-import-treeview .form-check-input {
  width: 1.0em;
  height: 1.0em;
  margin-right: 0.4em;
}
@media (max-width: 767px) {
  #product-import-treeview .form-check-input {
    width: 0.95em;
    height: 0.95em;
    margin-right: 0.3em;
  }
}