/* Couche CSS « core » (voir Theme::buildCoreHeaders) : gagne sur BootstrapVendor, perd contre tout CSS sans couche (Theme.css, pages Produit). */
@layer core {
/*!
 * TabsView.css — mécanique seulement (positionnement, remplissage, orientation).
 * Volontairement PAS de hook d'accent dédié (contrairement à FlexLayout/TreeView/
 * Modal...) : l'état actif d'un onglet vient déjà nativement de BootstrapVendor
 * (.nav-tabs/.nav-pills .nav-link.active, réactif à data-bs-theme via les tokens
 * --bs-*) - lui ajouter un accent maison recolorerait ce que Bootstrap gère déjà
 * correctement, à l'encontre de l'esprit "extension du Vendor". Même décision
 * documentée que Notify (Conventions, « Couleur d'accent ») pour l'absence de hook.
 *
 * Aucune reconstruction de "boîte" ici : le ✕ (options.removable) vit DANS le
 * nav-link (voir TabsView.js), donc la boîte native nav-tabs/nav-pills n'a jamais
 * besoin d'être déplacée/recalculée à la main - fini les bugs de coins/débordement
 * d'une tentative précédente. Rien dans ce fichier ne dépend de FlexLayout.
 */

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

.bootstrap-tabsview-host {
  width: 100%;
  height: 100%;
}

.bootstrap-tabsview-root {
  display: flex;
  flex-direction: column;
  min-height: 0; /* permet à .bootstrap-tabsview-content de défiler dans un parent flex */
}

/* ---- options.bare:true - retire le contour ci-dessous (ex. TabsView déjà inséré
   dans un cadre existant, comme FlexLayout, qui dessine le sien) ---- */
.bootstrap-tabsview-bare .bootstrap-tabsview-content {
  border: none;
}

/* ---- options.fitContent:true - TabsView s'ajuste à son contenu plutôt que de
   remplir 100% du conteneur (défaut - usage LAYOUT, voir bare ci-dessus) - pour un
   usage en simple regroupement dans une page qui défile déjà elle-même. ---- */
.bootstrap-tabsview-host.bootstrap-tabsview-fit-content {
  height: auto;
}

.bootstrap-tabsview-fit-content > .bootstrap-tabsview-content {
  overflow: visible;
}

.bootstrap-tabsview-nav {
  flex: 0 0 auto;
}

.bootstrap-tabsview-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--bs-border-color);
  border-top: none; /* le nav-tabs actif fait déjà le "seam" (fond identique, bordure du bas invisible) - voir bootstrap.css */
}

/* ---- Padding de confort par onglet (config.padding !== false, défaut actif) ----
   Même valeur que FlexLayout.pane-content - mettre padding:false (ou
   data-no-padding en déclaratif) pour un contenu qui remplit déjà l'espace lui-même. */
.bootstrap-tabsview-pane-padded {
  padding: .75rem .875rem;
}

/* ---- Orientation verticale (options.orientation:'vertical') ---- */

.bootstrap-tabsview-root.bootstrap-tabsview-vertical {
  flex-direction: row;
}
.bootstrap-tabsview-root.bootstrap-tabsview-vertical > .bootstrap-tabsview-nav {
  flex: 0 0 auto;
  margin-right: 1rem;
}
.bootstrap-tabsview-root.bootstrap-tabsview-vertical > .bootstrap-tabsview-content {
  min-width: 0;
  border-top: 1px solid var(--bs-border-color); /* nav-pills n'a pas de "seam" comme nav-tabs - bordure complète sur les 4 côtés */
}
.bootstrap-tabsview-vertical .bootstrap-tabsview-item {
  width: 100%;
}

/* ---- Glyphe (mécanique seulement, hérite de currentColor - comme TreeView/FlexLayout) ---- */

.bootstrap-tabsview-icon {
  margin-right: .375rem;
  font-size: var(--bootstrap-fs-sm, .875rem);
}

/* ---- Item (positionnement relatif : ancre le ✕ superposé, voir plus bas) ---- */

.bootstrap-tabsview-item {
  position: relative;
}

/* Réserve la place du ✕ dans le nav-link natif (sinon le texte passerait dessous) -
   seulement sur les onglets retirables (voir TabsView.js, options.removable). */
.bootstrap-tabsview-item-removable > .bootstrap-tabsview-link {
  padding-right: 1.875rem;
}

/* ---- Bouton de retrait (options.removable) - SIBLING du nav-link (voir TabsView.js
   pour la raison : capture-phase du data-api de bootstrap.Tab, aucun contournement
   possible depuis un descendant). Superposé visuellement au coin du nav-link en
   position:absolute plutôt que déplacé en DOM - la boîte active/inactive reste
   100% native nav-tabs/nav-pills, ce style ne gère que le carré cliquable
   lui-même. Même esprit que le ✕ tiny de FlexLayout (ButtonBar.css) : discret au
   repos, cadre visible au survol/focus. */

.bootstrap-tabsview-remove {
  position: absolute;
  top: 50%;
  right: .375rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border-radius: var(--bs-border-radius-sm);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.bootstrap-tabsview-remove:hover,
.bootstrap-tabsview-remove:focus-visible {
  background: color-mix(in srgb, currentColor 20%, transparent);
}
.bootstrap-tabsview-remove i {
  font-size: var(--bootstrap-fs-xs, .75rem);
}
}