/* ════════════════════════════════════════════════════════
   APP-SHELL.CSS — Cadre commun des pages applicatives
   MateXP · Sidebar (desktop) + bottom-nav (mobile) + pied de
   sidebar (identité, progression, score). Partagé entre
   dashboard.html et profile.html pour un cadre identique.
   Le grille .app-shell/.app-sidebar/.app-main vit dans
   layout.css ; ici, le style des éléments internes.
   ════════════════════════════════════════════════════════ */

/* Marque en haut de la sidebar */
.side-brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-6); }

/* Barre du haut : marque (gauche) + actions thème/cloche/avatar (droite).
   Hauteur FIXE var(--topbar-h) (== navbar publique nav) : `height` et non
   `min-height`, pour ne jamais dépasser 60px (la nav clippe pareil). */
.app-topbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); height: var(--topbar-h); margin-bottom: var(--sp-6); border-bottom: 0.5px solid var(--border-1); }

/* Marque de la topbar : MÊME logo que la sidebar (.nav-logo → .mx-logo via
   nav.js transformLogos, taille héritée de la navbar). margin-right:auto la
   pousse à gauche sans casser le flex-end des actions. */
.topbar-brand { display: flex; align-items: center; gap: var(--sp-2); margin-right: auto; text-decoration: none; }

/* Navigation latérale */
.side-nav { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3); min-height: 44px; border-radius: var(--r-md);
  color: var(--text-4); font-size: var(--text-sm); font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.nav-item:hover { background: var(--bg-2); color: var(--text-2); }
.nav-item[aria-current="page"] { background: var(--accent-dim); color: var(--accent); }
.nav-item svg { flex-shrink: 0; }
.nav-item-badge { margin-left: auto; }

/* Pied de sidebar : thème, identité, progression, score */
.side-foot { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 0.5px solid var(--border-1); }
/* Groupe de liens du bas (Profil/Paramètres/Aide) : même espacement serré que .side-nav,
   sans resserrer le reste de .side-foot (bloc user, progression, score restent à --sp-3). */
.side-foot-nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.side-user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); }

/* Indicateur en ligne (point vert, statique — épuré) */
.online-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--success); flex-shrink: 0; }

/* Widget de progression du profil (sidebar) */
.pp-card { display: block; padding: var(--sp-2) 0; text-decoration: none; }
a.pp-card:hover .pp-label { color: var(--text-1); }
.pp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.pp-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-2); transition: color var(--dur-fast) var(--ease-out); }
.pp-bar { height: 6px; border-radius: var(--r-full); background: var(--bg-4); overflow: hidden; }
.pp-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-out); }
.pp-hint { display: block; margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--text-4); }
.pp-done .pp-label { color: var(--success); }
.pp-done .pp-fill { background: var(--success); }

/* Bottom-nav mobile — état actif « pastille » : les inactifs sont atténués
   (≈45 % du contraste, via color-mix → compatible thème clair), l'actif
   gagne une pastille accent derrière l'icône. Le padding de l'icône est
   CONSTANT (actif ou non) : aucune icône ne se décale à l'activation. */
.bnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; flex: 1; min-height: 44px; position: relative;
  color: color-mix(in srgb, var(--text-1) 45%, transparent);
  font-size: var(--text-2xs); font-weight: 500;
  transition: color 150ms ease;
}
.bnav-item svg {
  border-radius: var(--r-full); padding: 4px 16px; box-sizing: content-box;
  background: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.bnav-item[aria-current="page"] { color: var(--text-1); font-weight: 600; }
.bnav-item[aria-current="page"] svg {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Badge (« 3 » sur Mates/Demandes) : perché sur le coin de la pastille,
   au-dessus d'elle (z-index) — offset constant, la pastille ne bouge pas. */
.bnav-badge { position: absolute; top: 2px; right: 50%; transform: translateX(22px); z-index: 1; }

/* ─── Topbar mobile : sticky ──────────────────────────────
   Fond OPAQUE volontaire (PAS de backdrop-filter ici : il créerait un
   containing block qui casserait le position:fixed du panneau
   notifications, ancré dans .nav-actions). Desktop (≥1024) : inchangé.
   Alignement : .topbar-brand garde son margin-right:auto (règle de base)
   → logo à gauche, actions à droite. */
@media (max-width: 1023px) {
  .app-topbar {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: var(--bg-1);
  }
}