/* Arbre — des dossiers imbriqués : `ul.tree` > `li` > `tree__row` (et `tree__edit`), les enfants
   dans un `ul.tree__group`. L'indentation vient de l'imbrication seule ; un nœud se replie par
   `hidden` sur son groupe et `aria-expanded` sur son `tree__toggle`. Référence : docs/design-system.md § Composants. */

.tree,
.tree__group {
  list-style: none;
}

.tree__group {
  padding-left: var(--space-4);
}

/* La hauteur d'un bouton d'action (`btn--sm`, 22 px ; `btn`, 26 px et un filet en bordé) :
   la rangée ne grandit pas quand ses actions apparaissent au survol. */
.tree__row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  min-height: calc(22px + 2 * var(--space-1));
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-13);
}

.tree__row:hover {
  background: var(--color-bg-hover);
}

/* Une rangée qui se sélectionne au clic (data-action) */
.tree__row[data-action] {
  cursor: pointer;
  user-select: none;
}

.tree__row--active {
  background: var(--color-bg-active);
  font-weight: var(--weight-semibold);
}

.tree__row--drop {
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
  background: var(--color-bg-hover);
}

/* Une classe qui pose `display` l'emporte sur le `[hidden]` du navigateur */
.tree__row[hidden],
.tree__edit[hidden] {
  display: none;
}

/* Le chevron dit l'état de `aria-expanded` ; une feuille (un `<span>` sans état) montre un point */
.tree__toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  position: relative;
  color: var(--color-text-secondary);
  line-height: 1;
  cursor: pointer;
}

/* Une cible de 24 px (WCAG 2.5.8) autour d'un chevron de 16 */
.tree__toggle::after {
  position: absolute;
  inset: -4px;
  content: "";
}

.tree__toggle::before {
  content: "·";
}

.tree__toggle[aria-expanded="true"]::before {
  content: "▾";
}

.tree__toggle[aria-expanded="false"]::before {
  content: "▸";
}

.tree__toggle[aria-expanded]:hover {
  color: var(--color-text);
}

.tree__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.tree__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.tree__ref {
  flex-shrink: 0;
  min-width: 32px;
  color: var(--color-text-secondary);
  font-size: var(--text-11);
  font-weight: var(--weight-semibold);
}

.tree__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree__count {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-11);
}

.tree__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-1);
  margin-left: auto;
}

/* Hors survol et focus, les actions sortent du flux sans quitter l'ordre de tabulation :
   le focus clavier les révèle (un `display: none` les rendrait inatteignables). Sur un
   écran tactile, sans survol, elles restent visibles. */
@media (hover: hover) {
  .tree__row:not(:hover, :focus-within) .tree__actions {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.tree__edit {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-bg-subtle);
}

/* Bordé : des rangées filetées dans un cadre, et un filet qui suit chaque sous-arbre */
.tree--bordered {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.tree--bordered .tree__row {
  gap: var(--space-2);
  min-height: calc(26px + 2 * var(--space-2) + 1px);
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
}

.tree--bordered .tree__row,
.tree--bordered .tree__edit {
  border-top: 1px solid var(--color-border);
}

.tree--bordered > li:first-child > .tree__row,
.tree--bordered > li:first-child > .tree__edit {
  border-top: 0;
}

.tree--bordered .tree__group {
  margin-left: var(--space-3);
  padding-left: 0;
  border-left: 2px solid var(--color-border);
}