/* Couche CSS « core » (voir Theme::buildCoreHeaders) : gagne sur BootstrapVendor, perd contre tout CSS sans couche (Theme.css, pages Produit). */
@layer core {
/* body (pas :root) : data-bs-theme vit sur <body>, pas sur <html> - voir FlexLayout.css
   pour l'explication complète. */
body {
  --bootstrap-treeview-bg: var(--bs-body-bg);
  --bootstrap-treeview-text: var(--bs-body-color);
  --bootstrap-treeview-text-dim: var(--bs-secondary-color);
  --bootstrap-treeview-hover-bg: color-mix(in srgb, var(--bs-emphasis-color) 6%, transparent);
  --bootstrap-treeview-current-bg: var(--bootstrap-treeview-accent);
  --bootstrap-treeview-current-text: var(--bootstrap-treeview-accent-contrast);
  --bootstrap-treeview-accent: var(--bs-primary);
  --bootstrap-treeview-accent-contrast: #ffffff; /* texte quand --bootstrap-treeview-accent sert de fond (bouton toolbar primary) */
  --bootstrap-treeview-twisty: var(--bs-secondary-color);
  --bootstrap-treeview-indent: 1.125rem;
  --bootstrap-treeview-row-height: var(--bootstrap-control-h, 1.625rem);
  /* Aucune font-family ici : un module ne fixe jamais la police de <body> (voir Skin.css). */
}

.bootstrap-treeview-root, .bootstrap-treeview-root * { box-sizing: border-box; }

/* ---- Racine et listes ---- */

.bootstrap-treeview-root,
.bootstrap-treeview-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bootstrap-treeview-root {
  background: var(--bootstrap-treeview-bg);
  color: var(--bootstrap-treeview-text);
  font-size: var(--bootstrap-fs-sm, .875rem);
  padding: .25rem 0;
  user-select: none;
}

.bootstrap-treeview-children {
  padding-left: var(--bootstrap-treeview-indent);
}

/* ---- <details> natif : on retire le triangle par défaut du navigateur,
   on dessine le nôtre (discret, animé en CSS pur via [open]) ---- */

.bootstrap-treeview-branch > details { display: block; }

.bootstrap-treeview-branch > details > summary.bootstrap-treeview-node {
  list-style: none;
  cursor: pointer;
}
.bootstrap-treeview-branch > details > summary.bootstrap-treeview-node::-webkit-details-marker { display: none; }
.bootstrap-treeview-branch > details > summary.bootstrap-treeview-node::marker { content: ""; }

/* ---- Ligne d'un noeud (feuille ou en-tête de branche) ---- */

.bootstrap-treeview-node {
  display: flex;
  align-items: center;
  gap: .25rem;
  height: var(--bootstrap-treeview-row-height);
  padding: 0 .5rem 0 .25rem;
  border-radius: var(--bs-border-radius-sm);
  white-space: nowrap;
  cursor: pointer;
}

.bootstrap-treeview-node:hover { background: var(--bootstrap-treeview-hover-bg); }
.bootstrap-treeview-node:focus-visible { outline: 1px solid var(--bootstrap-treeview-accent); outline-offset: -1px; }

/* feuille : pas de triangle, on compense l'espace pour que les libellés
   des feuilles et des branches restent alignés verticalement */
.bootstrap-treeview-leaf > .bootstrap-treeview-node { padding-left: 1.25rem; }

.bootstrap-treeview-twisty {
  flex: 0 0 auto;
  width: .875rem;
  height: .875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease;
}
.bootstrap-treeview-twisty::before {
  content: '';
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--bootstrap-treeview-twisty);
}
/* rotation pure CSS pilotée par l'attribut natif [open] de <details> —
   aucun JS n'anime ou ne recalcule cette rotation */
.bootstrap-treeview-branch > details[open] > summary.bootstrap-treeview-node .bootstrap-treeview-twisty {
  transform: rotate(90deg);
}

.bootstrap-treeview-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Glyphe - mécanique seulement, hérite de currentColor comme
   .bootstrap-flexlayout-pane-icon (pas de variable de couleur dédiée). */
.bootstrap-treeview-icon {
  flex: 0 0 auto;
  font-size: var(--bootstrap-fs-sm, .875rem);
}

/* ---- Élément courant (menu) — piloté par l'attribut ARIA natif
   aria-current="true", pas de classe dédiée à synchroniser en parallèle ---- */

.bootstrap-treeview-item[aria-current="true"] > .bootstrap-treeview-node,
.bootstrap-treeview-item[aria-current="true"] > details > summary.bootstrap-treeview-node {
  background: var(--bootstrap-treeview-current-bg);
  color: var(--bootstrap-treeview-current-text);
}
.bootstrap-treeview-item[aria-current="true"] > .bootstrap-treeview-node:hover,
.bootstrap-treeview-item[aria-current="true"] > details > summary.bootstrap-treeview-node:hover {
  background: var(--bootstrap-treeview-current-bg);
}
/* Le triangle (twisty) a sa propre couleur, indépendante du texte (ex. Theme.css
   peut le teinter en --bootstrap-accent pour le distinguer du texte normal) - mais
   sur un item courant, le fond DEVIENT cette même couleur d'accent (--current-bg),
   ce qui rend le triangle invisible (même couleur que ce sur quoi il est dessiné).
   Corrigé en le faisant basculer vers --current-text (la même couleur que le texte
   du libellé courant) - juste pour cet état, le reste du temps il garde sa couleur
   dédiée. */
.bootstrap-treeview-item[aria-current="true"] > details > summary.bootstrap-treeview-node .bootstrap-treeview-twisty::before {
  border-left-color: var(--bootstrap-treeview-current-text);
}

/* ---- Toolbar de démo (autonome, même look que FlexLayout) ---- */

.bootstrap-treeview-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  min-height: 2.25rem;
  padding: .375rem .75rem;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  flex: 0 0 auto;
}
.bootstrap-treeview-toolbar button {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bootstrap-treeview-text);
  font-size: var(--bootstrap-fs-xs, .75rem);
  padding: .3125rem .625rem;
  border-radius: var(--bs-border-radius-sm);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.bootstrap-treeview-toolbar button:hover { background: var(--bs-tertiary-bg); }
.bootstrap-treeview-toolbar button.primary { background: var(--bootstrap-treeview-accent); border-color: var(--bootstrap-treeview-accent); color: var(--bootstrap-treeview-accent-contrast); }
.bootstrap-treeview-toolbar button.primary:hover { background: color-mix(in srgb, var(--bootstrap-treeview-accent) 85%, var(--bs-emphasis-color)); }
}