/* =============================================================
   Socle · Barre latérale (.sc-sidebar)
   Navigation principale d'une application, sur toute la hauteur.
   Anatomie : __header (marque) + __nav (sections et items)
              + __footer (compte, réglages).
   Composant purement CSS : l'item actif se déclare en HTML avec
   aria-current, aucune ligne de JavaScript n'est requise.
   ============================================================= */

.sc-sidebar {
  /* Dimension structurelle, sans rôle sémantique. */
  --_sidebar-width: 16rem;

  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--_sidebar-width);
  height: 100%;
  min-height: 0;
  background: var(--color-bg-surface);
  border-inline-end: var(--border-hairline) solid var(--color-border);
}

/* ---- En-tête ---- */

.sc-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  padding: var(--padding-l);
}

/* Marque ou nom d'espace de travail, cliquable ou non. */
.sc-sidebar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-s);
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-h4-size);
  font-weight: var(--text-strong-weight);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  border-radius: var(--radius-control);
}

/* ---- Zone de navigation ---- */

.sc-sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  padding: var(--padding-s);
}

/* Groupe d'items. Le premier groupe colle à l'en-tête,
   les suivants respirent. */
.sc-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  margin-block-start: var(--padding-l);
}

.sc-sidebar__section:first-child {
  margin-block-start: 0;
}

/* Sur-titre de groupe. La typographie vient de .sc-overline, dans
   css/base.css, auquel ce sélecteur est rattaché : il ne reste ici que
   le calage dans la colonne. */
.sc-sidebar__section-title {
  padding: var(--padding-2xs) var(--padding-s);
}

/* ---- Item de navigation ----
   Fonctionne sur un <a> comme sur un <button>. */

.sc-sidebar__item {
  /* Tokens de composant : l'état actif ne fait que réassigner ceci. */
  --_item-bg: transparent;
  --_item-bg-hover: var(--color-bg-hover);
  --_item-bg-active: var(--color-bg-active);
  --_item-text: var(--color-text-secondary);
  --_item-text-hover: var(--color-text);
  --_item-weight: var(--text-body-weight);

  display: flex;
  align-items: center;
  gap: var(--gap-s);
  width: 100%;
  padding: var(--padding-xs) var(--padding-s);
  border: none;
  border-radius: var(--radius-control);
  background: var(--_item-bg);
  color: var(--_item-text);
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: var(--_item-weight);
  line-height: var(--leading-snug);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-fast),
    color var(--motion-fast);
}

.sc-sidebar__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Compteur ou raccourci poussé en fin de ligne. */
.sc-sidebar__item-trailing {
  margin-inline-start: auto;
}

/* ---- États de l'item ---- */

.sc-sidebar__item:hover:not(:disabled):not([data-disabled]),
.sc-sidebar__item[data-state="hover"] {
  background: var(--_item-bg-hover);
  color: var(--_item-text-hover);
}

.sc-sidebar__item:active:not(:disabled):not([data-disabled]),
.sc-sidebar__item[data-state="active"] {
  background: var(--_item-bg-active);
  color: var(--_item-text-hover);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-sidebar__item[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Page courante : la teinte d'accent tient lieu de repère.
   Le survol reste possible, en accent adouci. */
/* N'importe quel aria-current allume l'item, pas seulement "page".
   Une page de détail garde sa section allumée pour dire où l'on se
   trouve dans l'arbre, mais l'item pointe vers la liste et non vers
   la page affichée : lui mettre "page" serait un mensonge pour un
   lecteur d'écran, qui annoncerait « page courante » sur un lien qui
   mène ailleurs. La valeur juste est alors "location". */
.sc-sidebar__item[aria-current]:not([aria-current="false"]) {
  --_item-bg: var(--color-accent-subtle);
  --_item-bg-hover: var(--color-accent-subtle-hover);
  --_item-bg-active: var(--color-accent-subtle-hover);
  --_item-text: var(--color-accent-text);
  --_item-text-hover: var(--color-accent-text);
  --_item-weight: var(--text-label-weight);
}

.sc-sidebar__item:disabled,
.sc-sidebar__item[data-disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ---- Pied ---- */

.sc-sidebar__footer {
  padding: var(--padding-l);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

/* Bloc compte : avatar, nom, information secondaire. */
.sc-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  min-width: 0;
}

.sc-sidebar__user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sc-sidebar__user-name {
  color: var(--color-text);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-snug);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sc-sidebar__user-meta {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  line-height: var(--leading-snug);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}