/* ============================================================================
   QLOA Affiliation — tokens Liquid Glass (canon Qloa, cf ~/.claude/knowledge/
   design-system*.md). Tailwind CSS gère l'essentiel des utilitaires (CDN,
   templates/base.html) ; ce fichier ne couvre QUE ce que Tailwind ne fait pas
   nativement : transitions de layout (sidebar), drawer mobile, keyframes,
   scrollbar. JAMAIS de couleur/spacing/radius inventé ici hors de la grille
   dorée du design system.
   ============================================================================ */

:root {
  /* Grille dorée (pattern Nacarat/QLOA — 55px = base, 34px = 55/φ) */
  --qaff-bar-h: 55px;
  --qaff-rail-h: 34px;
  --qaff-sidebar-w: 233px;
  --qaff-sidebar-w-collapsed: 55px;

  /* Rayons canon */
  --qaff-radius-nav: 9.8px; /* ratio arrondi logo — items nav, pills */
  --qaff-radius-card: 16px; /* rounded-2xl */
}

html, body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* ── Sidebar : largeur repliée/dépliée, transition sur width uniquement ── */
.qaff-sidebar {
  width: var(--qaff-sidebar-w);
  transition: width 0.2s ease-out;
}

.qaff-sidebar.qaff-collapsed {
  width: var(--qaff-sidebar-w-collapsed);
}

.qaff-sidebar.qaff-collapsed .qaff-label {
  display: none;
}

.qaff-sidebar.qaff-collapsed .qaff-nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* ── Sidebar mobile : drawer plein écran sous lg (1024px) ── */
@media (max-width: 1023px) {
  .qaff-sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--qaff-sidebar-w) !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
  }

  .qaff-sidebar.qaff-mobile-open {
    transform: translateX(0);
  }

  .qaff-sidebar.qaff-collapsed .qaff-label {
    display: block; /* sur mobile, le drawer est toujours "déplié" visuellement */
  }
}

/* ── Recherche sur-bandeau : ne doit jamais forcer le débordement de la barre ── */
.qaff-search-wrap {
  min-width: 120px;
  max-width: 220px;
  flex-shrink: 1;
}

#qaff-search-input {
  min-width: 0;
}

/* ── Animations (design-system-patterns.md) ── */
@keyframes qaffFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.qaff-animate-fade-in {
  animation: qaffFadeIn 0.3s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .qaff-sidebar,
  .qaff-animate-fade-in {
    transition: none !important;
    animation: none !important;
  }
}