/* ---- Layout : grille 2 colonnes (sidebar + contenu) ---- */
.admin-layout{
  display: grid !important;
  grid-template-columns: 340px minmax(0,1fr) !important;
  gap: var(--space-xl);
  align-items: start;
}

/* Sidebar sticky + scroll interne (confort) */
.admin-tree{
  position: sticky;
  top: 96px; /* ajuste selon la hauteur de ton header */
  max-height: calc(100vh - 140px);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  padding: var(--space-md);
}

/* Liens dans l'admin (évite bleu/violet) */
.admin-page a,
.admin-page a:visited { color: var(--color-foreground); text-decoration: none; }
.admin-page a:hover { text-decoration: underline; }

/* En-tête du bloc tree */
.tree-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: var(--space-sm);
}

/* ===== Tree (vertical, premium, lisible) ===== */

/* Structure de base */
.tree{ --indent: 20px; --line: color-mix(in oklab, var(--color-border) 92%, transparent); }
.tree-root, .tree ul{
  list-style: none !important;
  margin: 0;
  padding-left: var(--indent);
}
.tree-root{ padding-left: 0; }

/* No bullets (tue tout marqueur résiduel) */
.tree li::marker{ content: ""; }

/* Lignes connecteurs */
.tree li{
  position: relative;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
}
.tree li:last-child{ border-left-color: transparent; }
.tree li::before{
  content: "";
  position: absolute;
  top: 1.2em; left: -1px;
  width: var(--indent);
  border-top: 1px solid var(--line);
}

/* Lignes cliquables */
.tree .tree-row{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  transition: background .15s, border-color .15s;
  line-height: 1.25; font-size: .95rem;
}
.tree .tree-row:hover{ background: var(--color-surface-3); }

/* Pastilles type (plus lisibles que des emojis) */
.tree .dot{ width: 8px; height: 8px; border-radius: 999px; display:inline-block; }
.tree .dot--branch{ background: var(--color-primary); }
.tree .dot--pf{ background: color-mix(in oklab, var(--color-primary) 65%, white 35%); }
.tree .dot--sim{ background: color-mix(in oklab, var(--color-primary) 50%, black 20%); }

/* Label (ellipsis propre + contraste) */
.tree .label-text{
  color: var(--color-foreground);
  max-width: 240px;              /* ↑ largeur utile pour lecture */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Actions à droite (discrètes) */
.tree .row-actions{
  margin-left: auto; display:flex; gap:6px;
  opacity: 0; transition: opacity .12s;
}
.tree .tree-row:hover .row-actions,
.tree .tree-row.is-active .row-actions{ opacity: .9; }
.btn--xxs{ padding: 2px 8px; font-size: 12px; height: 24px; line-height: 22px; }

/* Chevron (toggle) */
.twisty{
  border: none; background: transparent; cursor: pointer;
  width: 18px; height: 18px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 6px; transition: transform .15s, background .15s;
  color: var(--color-foreground);
}
.twisty:hover{ background: var(--color-surface-3); }
.node.closed > .tree-row .twisty{ transform: rotate(-90deg); }

/* Enfants (retrait) */
.children{ margin: 0; padding-left: var(--indent); }
.node.closed > .children{ display: none; }

/* Sélection courante bien visible */
.tree .tree-row.is-active{
  border: 1px solid var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
}