/* shell.css — rail de navigation partagé (voir app.js::renderAppShell),
   chargé en plus du <style> propre à chaque page. */

body { margin: 0; }
.app-shell-layout { display: flex; height: 100vh; overflow: hidden; }

.app-nav {
  width: 220px; min-width: 220px; flex-shrink: 0;
  background: #1f2937; color: #e5e7eb;
  /* Barre de défilement fine (ui.css) : sur le rail sombre, pouce plus
     clair que le fond, sinon invisible. */
  scrollbar-color: #4b5563 transparent;
  display: flex; flex-direction: column;
  transition: width .15s ease, min-width .15s ease;
}
.app-nav.collapsed { width: 64px; min-width: 64px; }
.app-nav *::-webkit-scrollbar-thumb { background: #4b5563; }

.app-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; flex-shrink: 0; }
/* Le signe (le triangle) n'apparaît plus ici — demandé explicitement,
   "dans l'app en elle-même je ne veux pas voir le logo". Ne reste que le
   mot-logo ; le I d'accent était en `text-success` (vert Bootstrap), sourd
   sur le bleu nuit du rail — passé au violet de marque. */
.app-nav-brand { display: flex; align-items: center; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; }
.app-nav .brand-i { color: #a78bfa; }
.app-nav.collapsed .app-nav-brand { display: none; }
/* Replié : chaque contrôle est centré dans les 64px — sans ces règles, le
   flex garde son alignement à gauche (space-between avec un seul enfant
   pour l'en-tête, padding horizontal asymétrique pour les liens) et les
   icônes se décalent vers le bord (retour utilisateur, capture à l'appui). */
.app-nav.collapsed .app-nav-header { justify-content: center; padding: 1rem .5rem; }
.app-nav.collapsed .app-nav-link { justify-content: center; padding: .5rem 0; gap: 0; }
.app-nav.collapsed .app-nav-user-btn { justify-content: center; padding: .4rem 0; gap: 0; }
.app-nav-collapse-btn { background: none; border: 0; color: #9ca3af; cursor: pointer; display: flex; align-items: center; padding: .25rem .45rem; border-radius: .4rem; flex-shrink: 0; }
.app-nav-collapse-btn:hover { color: #fff; background: #374151; }

.app-nav-links { flex: 1; display: flex; flex-direction: column; gap: .15rem; padding: .5rem; overflow-y: auto; overflow-x: hidden; }
.app-nav-link { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: .5rem; color: #d1d5db; text-decoration: none; font-size: .85rem; white-space: nowrap; }
.app-nav-link:hover { background: #374151; color: #fff; }
.app-nav-link.active { background: #374151; color: #fff; font-weight: 600; }
.app-nav-icon { display: flex; align-items: center; justify-content: center; width: 1.2rem; flex-shrink: 0; }
.app-nav-icon svg { display: block; }
.app-nav.collapsed .app-nav-label { display: none; }

.app-nav-user { border-top: 1px solid #374151; padding: .6rem; flex-shrink: 0; }
.app-nav-user-btn { display: flex; align-items: center; gap: .6rem; width: 100%; background: none; border: 0; color: #e5e7eb; cursor: pointer; padding: .4rem; border-radius: .5rem; }
.app-nav-user-btn:hover { background: #374151; }
.app-nav-user-avatar { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #4b5563; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; flex-shrink: 0; }
.app-nav-user-name { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav.collapsed .app-nav-user-name { display: none; }

/* Menu utilisateur maison (plus de dropdown Bootstrap : le bundle JS n'est
   plus chargé nulle part). S'ouvre vers le haut, le rail étant en bas. */
.app-nav-user-menu { background: #111827; border: 1px solid #374151; border-radius: .5rem; padding: .5rem; margin-bottom: .4rem; }
.app-nav-user-line { font-size: .72rem; color: #e5e7eb; padding: .15rem .3rem; overflow: hidden; text-overflow: ellipsis; }
.app-nav-user-line.muted { color: #9ca3af; }
/* "Mon compte" : même gabarit que "Déconnexion" juste en dessous, encre
   neutre plutôt que rouge (ce n'est pas une action destructive). */
.app-nav-user-account { display: block; width: 100%; margin-top: .35rem; background: none; border: 0;
  color: #e5e7eb; font-size: .78rem; text-align: left; text-decoration: none; padding: .35rem .3rem;
  border-radius: .35rem; cursor: pointer; font-family: inherit; box-sizing: border-box; }
.app-nav-user-account:hover { background: #374151; color: #fff; }
.app-nav-user-logout { width: 100%; margin-top: .35rem; background: none; border: 0; color: #fca5a5; font-size: .78rem; text-align: left; padding: .35rem .3rem; border-radius: .35rem; cursor: pointer; font-family: inherit; }
.app-nav-user-logout:hover { background: #374151; color: #fecaca; }

.app-page-content { flex: 1; min-width: 0; overflow-y: auto; height: 100vh; padding: 1.5rem; box-sizing: border-box; }

/* ── Cloche de notifications ──────────────────────────────────────────
   Entre la navigation et le bloc utilisateur : ce n'est pas un écran de
   plus, c'est un état du système. Le panneau s'ouvre vers le haut comme
   le menu utilisateur, le rail étant collé en bas. */
.app-nav-bell { position: relative; padding: 0 .6rem .3rem; flex-shrink: 0; }
.app-nav-bell-btn {
  display: flex; align-items: center; gap: .7rem; width: 100%; background: none;
  border: 0; color: #d1d5db; cursor: pointer; padding: .5rem .6rem; border-radius: .5rem;
  font-size: .82rem; font-family: inherit; position: relative;
}
.app-nav-bell-btn:hover { background: #374151; color: #fff; }
.app-nav.collapsed .app-nav-bell-btn { justify-content: center; }

/* Pastilles : le compte de non-lues, et un point vivant pour « ça tourne ».
   En mode replié elles se superposent à l'icône, sinon elles suivent. */
.notif-badge {
  background: #dc2626; color: #fff; font-size: .65rem; font-weight: 600;
  min-width: 1.05rem; height: 1.05rem; border-radius: 999px; padding: 0 .3rem;
  display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
}
.notif-running {
  width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e;
  display: inline-block; margin-left: .35rem; animation: notif-pulse 1.6s ease-in-out infinite;
}
@keyframes notif-pulse { 50% { opacity: .25; } }
.app-nav.collapsed .notif-badge { position: absolute; top: .15rem; right: .1rem; margin: 0; }
.app-nav.collapsed .notif-running { position: absolute; bottom: .3rem; right: .35rem; margin: 0; }

.notif-panel {
  position: absolute; bottom: calc(100% + .3rem); left: .6rem; width: 21rem; max-height: 24rem;
  overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: .55rem;
  box-shadow: 0 16px 40px rgba(16,24,40,.28); z-index: 1085; color: #111827;
}
.app-nav.collapsed .notif-panel { left: calc(100% + .4rem); bottom: 0; }
.notif-section {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280;
  padding: .55rem .75rem .3rem; background: #fbfcfd; border-bottom: 1px solid #f1f3f5;
}
.notif-read-all { background: none; border: 0; color: #4338ca; font-size: .68rem; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: inherit; }
.notif-item { display: flex; gap: .55rem; padding: .6rem .75rem; border-bottom: 1px solid #f5f6f8; cursor: pointer; }
.notif-item:hover { background: #f8fafc; }
.notif-item.running { cursor: default; }
.notif-item.unread { background: #f5f3ff; }
.notif-item.unread:hover { background: #ede9fe; }
.notif-dot { width: .5rem; height: .5rem; border-radius: 50%; margin-top: .35rem; flex-shrink: 0; background: #9ca3af; }
.notif-dot.error { background: #dc2626; }
.notif-dot.warning { background: #f59e0b; }
.notif-dot.success { background: #22c55e; }
.notif-dot.running { background: #22c55e; animation: notif-pulse 1.6s ease-in-out infinite; }
.notif-body { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.notif-title { font-size: .78rem; font-weight: 600; color: #111827; line-height: 1.35; }
.notif-text { font-size: .72rem; color: #4b5563; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-meta { font-size: .68rem; color: #9ca3af; }
.notif-empty { padding: 1.2rem .75rem; text-align: center; font-size: .75rem; color: #9ca3af; }