/* ========================================
   GLOBAL HEADER (Bitbucket-style)
   ======================================== */

.global-header {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 50;
  height: var(--header-height, 88px);
  min-height: var(--header-height, 88px);
  max-height: var(--header-height, 88px);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  transition: transform 0.3s ease-out;
  overflow: visible; /* Allow dropdowns to extend beyond header */
}

.global-header.header-hidden {
  transform: translateY(-100%);
}

/* Header content */
.header-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  height: 100%;
  padding: 0 1rem;
}

/* Ensure all direct children stay inline */
.header-content > * {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header-content {
    padding: 0 1.5rem;
  }
}

/* Desktop header actions - hidden on mobile, flex on md+ */
.desktop-header-actions {
  display: none !important;
}

@media (min-width: 768px) {
  .desktop-header-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
}

/* Header logo */
.header-logo {
  height: 28px;
  width: auto;
  transition: transform 0.2s ease;
}

.header-logo:hover {
  transform: scale(1.03);
}

/* Header icon button */
.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Mobile-only hamburger menu - hidden on desktop (lg+) */
.mobile-hamburger {
  display: flex;
}

@media (min-width: 1024px) {
  .mobile-hamburger {
    display: none !important;
  }
}

.header-icon-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.header-icon-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

/* ========================================
   SIDEBAR
   ======================================== */

/* CSS Custom Properties for sidebar dimensions (--sidebar-width defined in design_tokens.css) */
:root {
  --sidebar-collapsed-width: 60px;
  --sidebar-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-label-transition: 0.18s ease;
}

/* Base sidebar: width driven by CSS variable */
.sidebar {
  background: var(--sidebar-bg);
  border-inline-end: 1px solid var(--sidebar-border);
  position: relative;
  width: var(--sidebar-width);
  overflow: hidden;
}

/* ========================================
   MOBILE: Off-screen drawer
   ======================================== */

@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(calc(var(--dir, 1) * -100%));
    transition: transform var(--sidebar-transition);
    /* Always expanded width on mobile */
    width: var(--sidebar-width);
  }

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

  /* Never show collapse button on mobile */
  .sidebar-collapse-btn {
    display: none !important;
  }

  /* Never show collapsed state on mobile */
  .sidebar.collapsed {
    width: var(--sidebar-width);
  }
}

/* Mobile overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  top: 56px;
  background: rgba(26, 60, 107, 0.8);
  backdrop-filter: blur(4px);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
   DESKTOP: Static sidebar with collapse
   ======================================== */

@media (min-width: 1024px) {
  /* Cancel any transform (prevents containing block for fixed children) */
  .sidebar {
    transform: none !important;
    transition: width var(--sidebar-transition);
  }

  /* Collapsed state */
  .sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
  }

  /* ---- Labels & badges fade out ---- */
  .sidebar .sidebar-label,
  .sidebar .sidebar-badge {
    transition: opacity var(--sidebar-label-transition),
                transform var(--sidebar-label-transition),
                width var(--sidebar-label-transition);
    white-space: nowrap;
    overflow: hidden;
  }

  .sidebar.collapsed .sidebar-label {
    opacity: 0;
    transform: translateX(calc(var(--dir, 1) * -8px));
    width: 0;
    min-width: 0;
    pointer-events: none;
  }

  .sidebar.collapsed .sidebar-badge {
    opacity: 0;
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* ---- Section labels & dividers collapse ---- */
  .sidebar .sidebar-section-label,
  .sidebar .sidebar-section-title {
    transition: opacity 0.15s ease, height 0.15s ease, padding 0.15s ease, margin 0.15s ease;
    overflow: hidden;
  }

  .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .sidebar-section-title {
    opacity: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
  }

  .sidebar.collapsed .sidebar-section-toggle {
    display: none;
  }

  .sidebar .sidebar-divider {
    transition: margin 0.15s ease;
  }

  .sidebar.collapsed .sidebar-divider {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  /* ---- Links center in collapsed mode ---- */
  .sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 0.5rem;
    gap: 0;
  }

  .sidebar.collapsed nav {
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
  }

  /* ---- User section collapsed ---- */
  .sidebar .sidebar-user-details {
    transition: opacity var(--sidebar-label-transition),
                width var(--sidebar-label-transition);
    overflow: hidden;
  }

  .sidebar.collapsed .sidebar-user-details {
    opacity: 0;
    width: 0;
    min-width: 0;
    pointer-events: none;
  }

  .sidebar.collapsed .sidebar-user-trigger {
    justify-content: center;
    padding: 0.375rem;
    gap: 0;
  }

  .sidebar.collapsed .sidebar-user-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 0.75rem;
  }

  .sidebar.collapsed .sidebar-bottom-section {
    padding: 0.5rem;
  }

  /* Dropup menu: position to the right in collapsed mode */
  .sidebar.collapsed .sidebar-bottom-section .dropdown-menu {
    inset-inline-start: 0.5rem;
    inset-inline-end: auto;
    min-width: 220px;
  }

  /* ---- Collapsible "Outils" section ---- */
  .sidebar.collapsed [data-controller="collapsible-menu"] > button {
    display: none;
  }

  .sidebar.collapsed [data-controller="collapsible-menu"] [data-collapsible-menu-target="submenu"] {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* ---- Organization switcher collapsed ---- */
  .sidebar.collapsed .sidebar-org-switcher .sidebar-label {
    opacity: 0;
    width: 0;
  }

  .sidebar.collapsed .sidebar-org-switcher button {
    justify-content: center;
    padding: 0.375rem;
  }

  /* ---- Collapse row centered ---- */
  /* Le bouton reste à GAUCHE en mode réduit : c'est ce `center` qui le
     faisait sauter de ~190 px d'un état à l'autre. */
  .sidebar.collapsed .sidebar-collapse-row {
    justify-content: flex-start;
  }

  /* ---- Collapse button chevron rotation ---- */
  .sidebar-collapse-btn svg {
    transition: transform var(--sidebar-transition);
  }

  .sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
  }

  /* ---- Settings sidebar collapsed ---- */
  .sidebar.collapsed .sidebar-settings-header-content {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity var(--sidebar-label-transition), width var(--sidebar-label-transition);
  }

  /* ---- Coach sidebar collapsed ---- */
  .sidebar.collapsed .coach-sidebar-header-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity var(--sidebar-label-transition), width var(--sidebar-label-transition);
  }

  .sidebar.collapsed .coach-sidebar-edit-btn {
    display: none;
  }

  .sidebar.collapsed .coach-all-conversations-text,
  .sidebar.collapsed .coach-all-conversations-badge {
    opacity: 0;
    width: 0;
    overflow: hidden;
  }

  .sidebar.collapsed .coach-theme-grid {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .sidebar.collapsed .coach-theme-grid span {
    display: none;
  }

  .sidebar.collapsed .coach-theme-grid .coach-mini-icon {
    padding: 0.25rem;
  }

  .sidebar.collapsed .coach-new-conv-text {
    display: none;
  }

  .sidebar.collapsed .coach-new-conv-btn {
    padding: 0.5rem;
  }

  .sidebar.collapsed .session-pill-title,
  .sidebar.collapsed .session-pill-time,
  .sidebar.collapsed .session-pill-pin,
  .sidebar.collapsed .session-pill-actions {
    display: none;
  }

  .sidebar.collapsed .session-pill-link {
    justify-content: center;
    padding: 0.375rem;
  }

  .sidebar.collapsed .session-pill-dot {
    margin: 0;
  }

  .sidebar.collapsed .coach-empty-state p,
  .sidebar.collapsed .coach-empty-state form {
    display: none;
  }

  .sidebar.collapsed .sidebar-group-label {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  .sidebar.collapsed .coach-sidebar-section {
    padding: 0.375rem;
  }

  /* ════════════════════════════════════════════════════════════════════════
     ÉTAT RÉDUIT DE LA SIDEBAR COACH — portées depuis layouts/sidebar.css
     le 2026-07-30, où elles étaient INERTES.
     Seul `layouts/bundle.css` est chargé par le layout ; `layouts/sidebar.css`
     n'est jamais servi. Ces 7 règles n'avaient donc AUCUN effet en production :
     sur « Mes Coach Idia » replié, la barre de recherche restait affichée, les
     pastilles de session gardaient titre et horodatage dans un rail de 60 px,
     et les infobulles au survol ne se déclenchaient pas.
     Le garde-fou `served_css_spec` ne les voyait pas : il ne contrôlait qu'une
     liste blanche codée en dur — il protégeait ce qu'on avait pensé à y mettre,
     pas ce qui manquait. Il compare désormais les deux fichiers.
     ════════════════════════════════════════════════════════════════════════ */

  .sidebar.collapsed .session-pill-title,
  .sidebar.collapsed .session-pill-time,
  .sidebar.collapsed .session-pill-pin,
  .sidebar.collapsed .session-pill-actions {
    display: none;
  }

  .sidebar.collapsed .session-pill-link {
    justify-content: center;
    padding: 0.375rem;
    position: relative;
  }

  .sidebar.collapsed .session-pill-dot {
    margin: 0;
  }

  .sidebar.collapsed .coach-session-title,
  .sidebar.collapsed .coach-session-time,
  .sidebar.collapsed .coach-session-star,
  .sidebar.collapsed .coach-session-actions,
  .sidebar.collapsed .session-provider-badge,
  .sidebar.collapsed .session-content {
    display: none;
  }

  .sidebar.collapsed .coach-session-item .session-item-link {
    justify-content: center;
    padding: 0.375rem;
  }

  .sidebar.collapsed .coach-session-dot {
    margin: 0;
  }

  /* La recherche n'a pas de place dans un rail de 60 px : elle y débordait. */
  .sidebar.collapsed [data-controller="coach-sidebar-search"] {
    display: none;
  }

  /* Le titre disparaissant, l'infobulle est le SEUL moyen d'identifier une
     conversation en mode réduit. Sans elle, le rail devient une colonne de
     pastilles indiscernables. */
  .sidebar.collapsed .session-pill-link[data-tooltip] {
    position: relative;
  }

  .sidebar.collapsed .session-pill-link[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    inset-inline-start: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(calc(var(--dir, 1) * -4px));
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 60;
  }

  .sidebar.collapsed .session-pill:hover .session-pill-link[data-tooltip]::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* ========================================
   SIDEBAR LINK (Compact)
   ======================================== */

.sidebar-link {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.625rem;
  padding: 0.5rem 0.6875rem;
  border-radius: 0.625rem; /* Refonte Bento : pill plus doux (10px, était 6px) */
  color: var(--nav-item-color);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 640px) {
  .sidebar-link {
    font-size: 1rem;
    min-height: 44px;
    padding: 0.625rem 0.75rem;
  }
}

.sidebar-link:hover {
  background: var(--nav-item-hover-bg);
  color: var(--nav-item-hover-color);
}

.sidebar-link.active {
  background: var(--nav-item-active-bg);
  color: var(--nav-item-active-color);
  font-weight: 600;
}

.sidebar-link svg {
  flex-shrink: 0;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-link:hover svg {
  transform: scale(1.08);
}

/* Link group (sidebar-link + view-all button) */
.sidebar-link-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.sidebar-link-group .sidebar-link {
  flex: 1;
  min-width: 0;
}

.sidebar-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0.375rem;
  color: var(--nav-item-color);
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.sidebar-link-group:hover .sidebar-view-all {
  opacity: 0.6;
}

.sidebar-view-all:hover {
  opacity: 1 !important;
  background: var(--nav-item-hover-bg);
  color: var(--nav-item-hover-color);
}

html[data-sidebar-collapsed] .sidebar .sidebar-view-all {
  display: none;
}

/* Sub-link style (indented, smaller) */
.sidebar-sublink {
  padding-inline-start: 2.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

.sidebar-sublink svg {
  width: 1rem;
  height: 1rem;
}

/* Section labels & dividers compact */
.sidebar-section-label {
  padding: 0.25rem 0.75rem;
}

/* ========================================
   SIDEBAR SECTION TOGGLE (Foldable headers)
   ======================================== */

.sidebar-section-toggle {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  transition: all 0.15s ease;
  text-align: start;
}

/* Small chevron indicator after the label — visible on hover */
.sidebar-section-toggle::after {
  content: '‹';
  font-size: 0.65rem;
  line-height: 1;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.2s ease;
  transform: rotate(-90deg);
}

/* When section is collapsed, rotate chevron to point right */
.sidebar-section-toggle.collapsed::after {
  transform: rotate(0deg);
}

/* Show chevron on hover */
.sidebar-section-toggle:hover::after {
  opacity: 1;
}

.sidebar-section-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-section-toggle:hover .sidebar-section-label {
  color: var(--text-secondary) !important;
}

.sidebar-divider {
  margin: 0.375rem 0;
}

/* Sidebar nav padding */
.sidebar nav {
  padding-top: 0.5rem;
}

/* ========================================
   COLLAPSE BUTTON
   ======================================== */

.sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 0.375rem;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

/* ════════════════════════════════════════════════════════════════════════
   REPLI DE LA SIDEBAR — le bouton devient un PIVOT IMMOBILE
   ════════════════════════════════════════════════════════════════════════
   AVANT : la ligne passait de `justify-end` (centre du bouton à ~217 px) à
   `justify-content: center` (~30 px). Le bouton SAUTAIT de près de 190 px à
   chaque bascule : impossible de faire un aller-retour sans déplacer le
   curseur, et l'œil devait le rechercher après chaque clic.

   MAINTENANT : aligné à gauche, centre à 31 px dans les DEUX états — soit la
   colonne d'icônes elle-même (33 px étendu, 30 px réduit). Le bouton ne bouge
   plus d'un pixel : c'est la sidebar qui coulisse DERRIÈRE lui. Le geste
   devient réversible au même point, ce qui est la moitié du plaisir.
   Calcul : le centre tombe à 30 px dans les deux états (voir la compensation
   de padding juste en dessous — le <nav> ne garde pas la même gouttière).
   ════════════════════════════════════════════════════════════════════════ */

.sidebar-collapse-row {
  padding-inline-start: 4px;
}

/* Le <nav> resserre son padding de 12 px à 8 px en mode réduit : sans cette
   compensation de 4 px, le bouton dériverait de 4 px — invisible à l'œil, mais
   c'est justement l'immobilité qui est demandée. 8 + 8 + 14 = 30 px, comme
   4 + 12 + 14 = 30 px en mode étendu. Écart mesuré : 0 px. */
.sidebar.collapsed .sidebar-collapse-row,
html[data-sidebar-collapsed] .sidebar .sidebar-collapse-row {
  padding-inline-start: 8px;
}

/* ── Le geste, en trois couches ────────────────────────────────────────────
   Tout passe par transform/opacity (couche compositeur) : aucun reflow, donc
   60 fps alors même que la sidebar redimensionne en parallèle.

   ⚠️ Les ondes restent CONTENUES dans le bouton. Le <nav> parent est en
   `overflow-y: auto`, ce qui force `overflow-x` : en mode réduit il ne fait
   que 36 px de contenu et rognerait net toute onde débordante. Seul le halo
   sort — en box-shadow, qui n'est clippé qu'à 10 px et tient dans le padding.

   `will-change` n'est posé QUE le temps de l'animation, via `.is-toggling` :
   le laisser en permanence maintiendrait une couche GPU pour rien. */

.sidebar-collapse-btn {
  position: relative;
  overflow: hidden;
  /* Le halo doit pouvoir sortir sans repeindre les voisins. */
  isolation: isolate;
}

/* Couche 1 — l'onde de contact, qui part du centre sous le doigt. */
.sidebar-collapse-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, var(--accent) 0%, transparent 72%);
  opacity: 0;
  transform: scale(0.35);
  pointer-events: none;
}

/* Couche 2 — le reflet qui balaie, dans le sens de la bascule. */
.sidebar-collapse-btn::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  inset-inline-start: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  opacity: 0;
  transform: translateX(calc(var(--dir, 1) * -160%)) skewX(-18deg);
  pointer-events: none;
}

.sidebar-collapse-btn.is-toggling {
  will-change: box-shadow;
  animation: sidebar-collapse-halo 0.62s var(--dop-snappy, cubic-bezier(0.19, 1, 0.22, 1));
  /* La bordure prend l'accent le temps du geste : c'est ce qui rend l'action
     perceptible en vision périphérique, quand le regard est ailleurs dans la
     page. Le halo seul se remarque trop peu sur fond clair. */
  border-color: var(--accent);
  color: var(--accent);
}

.sidebar-collapse-btn.is-toggling::before {
  will-change: transform, opacity;
  animation: sidebar-collapse-ripple 0.52s var(--dop-snappy, cubic-bezier(0.19, 1, 0.22, 1));
}

.sidebar-collapse-btn.is-toggling::after {
  will-change: transform, opacity;
  animation: sidebar-collapse-sheen 0.6s 0.06s var(--dop-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
}

@keyframes sidebar-collapse-ripple {
  0%   { transform: scale(0.3);  opacity: 0.55; }
  60%  {                         opacity: 0.22; }
  100% { transform: scale(1.05); opacity: 0; }
}

@keyframes sidebar-collapse-sheen {
  0%   { transform: translateX(calc(var(--dir, 1) * -160%)) skewX(-18deg); opacity: 0; }
  22%  {                                             opacity: 0.75; }
  100% { transform: translateX(calc(var(--dir, 1) * 320%))  skewX(-18deg); opacity: 0; }
}

/* Le halo sort du bouton : c'est le seul signal visible à la périphérie,
   celui qui fait dire « il s'est passé quelque chose » sans regarder. */
@keyframes sidebar-collapse-halo {
  0%   { box-shadow: 0 0 0 0 var(--accent-30); }
  55%  { box-shadow: 0 0 0 7px var(--accent-10); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

/* Couche 3 — le chevron, en ressort. L'overshoot du spring donne au demi-tour
   une élasticité que le easing linéaire de la sidebar n'a pas : le chevron
   arrive AVANT la fin du redimensionnement et dépasse légèrement, ce qui fait
   lire le geste comme « déjà accompli ». */
.sidebar-collapse-btn svg {
  transition: transform 0.46s var(--dop-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* Survol : glow et accent uniquement — JAMAIS de zoom (règle projet). */
.sidebar-collapse-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-10), 0 4px 14px var(--accent-20);
}

/* L'enfoncement, lui, se sent : c'est un appui, pas un survol. */
.sidebar-collapse-btn:active {
  transform: scale(0.86);
  transition-duration: 70ms;
}

.sidebar-collapse-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Le plaisir ne se négocie pas contre l'accessibilité : qui demande moins de
   mouvement garde la bascule, instantanée et sans onde. */
@media (prefers-reduced-motion: reduce) {
  .sidebar-collapse-btn svg {
    transition-duration: 0.01ms;
  }

  .sidebar-collapse-btn.is-toggling,
  .sidebar-collapse-btn.is-toggling::before,
  .sidebar-collapse-btn.is-toggling::after {
    animation: none;
  }

  .sidebar-collapse-btn:active {
    transform: none;
  }
}


/* ========================================
   SIDEBAR CUSTOMIZER — bandeau d'édition + catalogue

   ⚠️ CE FICHIER EST CELUI QUI EST SERVI (application.html.erb, <link>
      layouts/bundle.css). `layouts/sidebar.css` ne l'est PAS : il en est la
      source théorique, maintenue à la main et divergente (cf. l'en-tête de
      lib/tasks/css.rake, étape C2). Un miroir identique de ce bloc y vit —
      toute modif ici doit y être répercutée. Écrire uniquement dans sidebar.css
      revient à écrire dans le vide : c'est exactement la cause du bug des
      boutons d'édition affichés en permanence (2026-07-18).
   ======================================== */

/* Wrapper du contenu sidebar : porte le contrôleur sidebar-customizer et sert
   de référentiel de position au panneau catalogue (overlay absolu). */
.sidebar-content-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  /* flex + height : le parent est <turbo-frame class="lg:flex lg:flex-col h-full"> */
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ---- Entrée « Personnaliser le menu » (bas de sidebar) ---- */

.sidebar-customize-entry {
  width: 100%;
  background: transparent;
  border: 0;
  /* font-family seule : la shorthand `font: inherit` écrasait le font-size de
     .sidebar-link (0.875rem) par celui du parent, et le libellé se faisait
     couper par son overflow:hidden. */
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.sidebar-customize-entry:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.sidebar-customize-entry.is-active {
  background: var(--accent-10);
  color: var(--accent);
}

/* ---- Rail 60px : aucun contrôle d'édition n'y survit ----
   Les deux familles de sélecteurs sont nécessaires : `.collapsed` est posée par
   sidebar_controller.js, `html[data-sidebar-collapsed]` par le script anti-FOUC
   du layout (elle s'applique avant que Stimulus ait booté). */
.sidebar.collapsed .sidebar-customize-entry-wrap,
html[data-sidebar-collapsed] .sidebar .sidebar-customize-entry-wrap,
.sidebar.collapsed .sidebar-hide-collapsed,
html[data-sidebar-collapsed] .sidebar .sidebar-hide-collapsed,
.sidebar.collapsed .sidebar-edit-banner,
html[data-sidebar-collapsed] .sidebar .sidebar-edit-banner {
  display: none !important;
}

/* ---- Bandeau d'édition ---- */

.sidebar-edit-banner {
  display: none;
}

.sidebar-editing .sidebar-edit-banner {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--accent-10);
  border: 1px solid var(--accent);
}

.sidebar-edit-banner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sidebar-edit-banner__title {
  /* Ni uppercase ni letter-spacing large : à 256px de sidebar, le titre
     poussait le bouton « Terminer » hors du bandeau. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.sidebar-edit-banner__done {
  flex-shrink: 0;
  min-height: 28px;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  /* bg-accent gère son propre contraste — jamais text-white en dur. */
  color: var(--accent-contrast);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.sidebar-edit-banner__done:hover {
  box-shadow: 0 0 0 3px var(--accent-10);
}

.sidebar-edit-banner__hint {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.sidebar-edit-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.sidebar-edit-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 32px;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sidebar-edit-action:hover {
  background: var(--bg-surface);
  border-color: var(--border-default);
}

.sidebar-edit-action svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* ---- Items en mode édition ---- */

.sidebar-editing .sidebar-link {
  cursor: grab;
}

.sidebar-editing .sidebar-link:active {
  cursor: grabbing;
}

.sidebar-editing .sortable-ghost {
  opacity: 0.3;
  background: var(--accent-10);
  border-radius: 0.375rem;
}

.sidebar-editing .sortable-drag {
  opacity: 0.9;
  background: var(--sidebar-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
}

/* Toggle œil injecté par sidebar_customizer_controller.js (_injectToggles).
   La couleur dérive de [data-visible] — le JS ne pose plus de style inline. */
.sidebar-edit-toggle-btn {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  z-index: 2;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.sidebar-edit-toggle-btn[data-visible="true"] {
  color: var(--accent);
}

.sidebar-edit-toggle-btn:hover {
  background: var(--accent-10);
}

/* ---- Panneau catalogue : overlay slide-in ---- */

.sidebar-catalog-panel {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--sidebar-bg);
  overflow-y: auto;
  transform: translateX(calc(var(--dir, 1) * -100%));
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-catalog-panel.open {
  transform: translateX(0);
}

.sidebar-catalog-panel button:hover {
  background: var(--bg-surface-hover);
}

/* ---- Cibles tactiles (WCAG 2.5.5) — laptops tactiles ≥ 1024px, seul cas où
        le bandeau est à la fois affiché et manipulé au doigt. ---- */
@media (pointer: coarse) {
  .sidebar-edit-action,
  .sidebar-edit-banner__done,
  .sidebar-customize-entry {
    min-height: 44px;
  }

  .sidebar-edit-toggle-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-catalog-panel {
    transition: none;
  }
}

[data-animations="off"] .sidebar-catalog-panel {
  transition: none;
}

/* ---- Chips « espaces de travail » du catalogue ----
   Portés depuis sidebar.css : le catalogue était inatteignable (son bouton
   était hors du scope Stimulus), donc ces chips n'avaient jamais été vues
   non stylées. Le rendre fonctionnel les expose. */

.sidebar-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  min-height: 36px;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 9999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sidebar-preset-chip:hover {
  background: var(--accent-10);
  border-color: var(--accent);
}

.sidebar-preset-chip .truncate {
  max-width: 9rem;
}

.sidebar-preset-chip--add {
  border-style: dashed;
  color: var(--text-secondary);
}

/* ---- Filet « Annuler » après application d'un espace de travail
        (workspace_undo_controller.js). Vit dans le conteneur de toasts du
        layout, et devient atteignable maintenant que le catalogue s'ouvre. ---- */

.workspace-undo-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 24rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.workspace-undo-bar__label {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.workspace-undo-bar__action {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--accent);
  /* bg-accent gère son propre contraste — jamais text-white en dur. */
  color: var(--accent-contrast);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.workspace-undo-bar__action:hover {
  background: var(--accent-hover);
}

/* ========================================
   HEADER SPACE SWITCHER

   Porté depuis sidebar.css : le switcher d'organisation est rendu par
   shared/_global_header.html.erb mais n'avait AUCUN style servi — il
   s'affichait nu dans le header pour tout compte multi-organisations.
   ======================================== */

.header-space-switcher-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-space-badge {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

html:not(.dark) .header-space-badge {
  background: var(--bg-surface-hover);
  border-color: var(--border-default);
}

.header-space-badge:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

html:not(.dark) .header-space-badge:hover {
  background: var(--border-default);
  border-color: var(--border-default);
}

/* Small status dot replacing the big square avatar */
.header-space-dot {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  min-width: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.header-space-name {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* button_to generates <form> inside dropdown */
.header-space-switcher-wrap .dropdown-menu > form {
  display: block;
}

.header-space-switcher-wrap .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ========================================
   CSS TOOLTIPS (collapsed only, desktop)
   ======================================== */

/* CSS tooltips replaced by sidebar_tooltip_controller.js
   (position:fixed avoids overflow clipping from sidebar container) */

/* ========================================
   FOUC PREVENTION
   ======================================== */

html[data-sidebar-collapsed] .sidebar {
  width: var(--sidebar-collapsed-width, 60px);
}

html[data-sidebar-collapsed] .sidebar .sidebar-label,
html[data-sidebar-collapsed] .sidebar .sidebar-section-label,
html[data-sidebar-collapsed] .sidebar .sidebar-section-title,
html[data-sidebar-collapsed] .sidebar .sidebar-user-details {
  opacity: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

html[data-sidebar-collapsed] .sidebar .sidebar-badge {
  opacity: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

html[data-sidebar-collapsed] .sidebar .sidebar-link {
  justify-content: center;
  padding: 0.5rem;
  gap: 0;
}

html[data-sidebar-collapsed] .sidebar nav {
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
}

html[data-sidebar-collapsed] .sidebar .sidebar-section-toggle {
  display: none;
}

/* Second chemin vers l'état réduit : l'attribut est posé sur <html> AVANT le
   JS, pour éviter le flash au chargement. Il doit dire la même chose que
   `.sidebar.collapsed`, sinon le bouton se recentre au premier rendu et
   reprend sa place ensuite — pire qu'un simple saut. */
html[data-sidebar-collapsed] .sidebar .sidebar-collapse-row {
  justify-content: flex-start;
}

html[data-sidebar-collapsed] .sidebar .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

html[data-sidebar-collapsed] .sidebar .sidebar-divider {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

html[data-sidebar-collapsed] .sidebar .sidebar-view-all {
  display: none;
}

html[data-sidebar-collapsed] .sidebar [data-controller="collapsible-menu"] > button {
  display: none;
}

html[data-sidebar-collapsed] .sidebar [data-controller="collapsible-menu"] [data-collapsible-menu-target="submenu"] {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}

html[data-sidebar-collapsed] .sidebar .sidebar-bottom-section {
  padding: 0.5rem;
}

html[data-sidebar-collapsed] .sidebar .sidebar-user-trigger {
  justify-content: center;
  padding: 0.375rem;
  gap: 0;
}

html[data-sidebar-collapsed] .sidebar .sidebar-user-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  font-size: 0.75rem;
}

/* ========================================
   BOTTOM SECTION
   ======================================== */

/* Dropup menu: opens upward from bottom section */
.sidebar-bottom-section .dropdown-menu {
  top: auto;
  transform-origin: bottom center;
}

.sidebar-bottom-section .dropdown-menu:not(.open) {
  transform: translateY(8px) scale(0.98);
}

.sidebar-bottom-section .dropdown-menu.open {
  transform: translateY(0) scale(1);
}

/* Sidebar user avatar - base dimensions */
.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  transition: all var(--sidebar-label-transition);
}

/* ========================================
   CONTEXTUAL SIDEBAR
   ======================================== */

/* Back button in contextual sidebars */
.sidebar-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-back-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

/* Contextual sidebar links (with left border indicator) */
.sidebar-context-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  border-inline-start: 3px solid transparent;
  margin-inline-start: 0.25rem;
  transition: all 0.15s ease;
  text-decoration: none;
}

.sidebar-context-link:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.sidebar-context-link.active {
  background: var(--accent-10, rgba(56, 178, 172, 0.1));
  color: var(--accent);
  border-inline-start-color: var(--accent);
  font-weight: 600;
}

/* Group labels in contextual sidebars */
.sidebar-group-label {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

/* Coach session pills in sidebar */
.session-pill {
  position: relative;
  margin: 1px 0;
  border-radius: 999px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.session-pill:hover {
  background: var(--bg-surface-hover);
}

.session-pill.active {
  background: var(--accent-10, rgba(139, 92, 246, 0.1));
}

.session-pill.pinned {
  background: rgba(245, 158, 11, 0.04);
}

.session-pill-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  text-decoration: none;
  min-width: 0;
}

.session-pill-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.session-pill:hover .session-pill-dot {
  transform: scale(1.3);
}

.session-pill-title {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  transition: color 0.15s ease;
}

.session-pill:hover .session-pill-title {
  color: var(--text-primary);
}

.session-pill.active .session-pill-title {
  color: var(--accent);
  font-weight: 500;
}

.session-pill-pin {
  flex-shrink: 0;
  color: #f59e0b;
  line-height: 0;
  opacity: 0.7;
}

.session-pill-time {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.15s ease;
  letter-spacing: -0.01em;
}

.session-pill:hover .session-pill-time {
  opacity: 1;
}

.session-pill-actions {
  position: absolute;
  inset-inline-end: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  background: var(--bg-surface-hover);
  border-radius: 999px;
  padding: 2px;
  z-index: 2;
}

.session-pill:hover .session-pill-actions {
  opacity: 1;
  pointer-events: auto;
}

.session-pill-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.session-pill-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.session-pill-btn.active {
  color: #f59e0b;
}

.session-pill-btn.active svg {
  fill: #f59e0b;
}

.session-pill-btn.active:hover {
  color: #d97706;
  background: rgba(245, 158, 11, 0.1);
}

.session-pill-btn.archive:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ========================================
   CONFIRM POPUP (positioned at cursor)
   ======================================== */

.confirm-popup {
  position: fixed;
  z-index: 10000;
  animation: confirmPopupIn 0.15s ease-out;
}

.confirm-popup.closing {
  animation: confirmPopupOut 0.15s ease-out forwards;
}

@keyframes confirmPopupIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes confirmPopupOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
  }
}

.confirm-popup-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  max-width: 280px;
}

.confirm-popup-message {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 0.875rem 0;
  text-align: center;
}

.confirm-popup-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.confirm-popup-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.confirm-popup-btn-cancel {
  background: var(--bg-surface-hover);
  color: var(--text-secondary);
}

.confirm-popup-btn-cancel:hover {
  background: var(--border-default);
  color: var(--text-primary);
}

.confirm-popup-btn-confirm {
  background: var(--color-red);
  color: white;
}

.confirm-popup-btn-confirm:hover {
  background: var(--color-red);
  filter: brightness(0.9);
}

/* ========================================
   SIDEBAR BADGES - DARK MODE VISIBILITY FIX
   ======================================== */

html.dark .sidebar .badge-accent,
[data-theme="dark"] .sidebar .badge-accent,
[data-mode="dark"] .sidebar .badge-accent {
  background-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}

/* ========================================
   REDUCED MOTION / ANIMATIONS OFF
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar .sidebar-label,
  .sidebar .sidebar-badge,
  .sidebar .sidebar-section-label,
  .sidebar .sidebar-section-title,
  .sidebar .sidebar-divider,
  .sidebar .sidebar-link,
  .sidebar .sidebar-user-details,
  .sidebar .sidebar-user-avatar,
  .sidebar-collapse-btn svg,
  .sidebar .sidebar-link::after {
    transition-duration: 0.01ms !important;
  }
}

[data-animations="off"] .sidebar,
[data-animations="off"] .sidebar .sidebar-label,
[data-animations="off"] .sidebar .sidebar-badge,
[data-animations="off"] .sidebar .sidebar-section-label,
[data-animations="off"] .sidebar .sidebar-section-title,
[data-animations="off"] .sidebar .sidebar-divider,
[data-animations="off"] .sidebar .sidebar-link,
[data-animations="off"] .sidebar .sidebar-user-details,
[data-animations="off"] .sidebar .sidebar-user-avatar,
[data-animations="off"] .sidebar-collapse-btn svg,
[data-animations="off"] .sidebar .sidebar-link::after {
  transition-duration: 0.01ms !important;
}
/* ========================================
   LANDING FOOTER - Premium Gradient
   ======================================== */

.landing-footer {
  margin-top: 0;
  width: 100%;
}

.landing-footer__bg {
  background:
    linear-gradient(
      135deg,
      #0f172a 0%,
      #1e293b 40%,
      #1a2744 70%,
      #0f172a 100%
    );
}

/* Light mode: slightly warmer with navy tones */
html:not(.dark):not([data-mode="dark"]) .landing-footer__bg {
  background:
    linear-gradient(
      135deg,
      #0d1b2a 0%,
      #1a3050 35%,
      #1e3a5f 60%,
      #0d1b2a 100%
    );
}

.landing-footer__link {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
  text-decoration: none;
}

.landing-footer__link:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(calc(var(--dir, 1) * 3px));
}

/* ========================================
   MOBILE USER MENU
   ======================================== */

.mobile-user-menu {
  position: absolute;
  inset-inline-end: 1rem;
  top: calc(100% + 0.5rem);
  min-width: 280px;
  max-width: calc(100vw - 2rem);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 60;
  overflow: hidden;
}

html.dark .mobile-user-menu,
[data-mode="dark"] .mobile-user-menu {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.mobile-user-menu-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface-hover);
}

.mobile-user-menu-header .user-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-user-menu-header .user-email {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

.mobile-user-menu-body {
  padding: 0.5rem;
}

.mobile-user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  text-align: start;
}

.mobile-user-menu-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.mobile-user-menu-item svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.mobile-user-menu-item.danger {
  color: #DC2626;
}

.mobile-user-menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

.mobile-user-menu-divider {
  height: 1px;
  background: var(--border-default);
  margin: 0.5rem 0;
}

/* User avatar trigger button */
.user-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px; /* Refonte Bento : carré arrondi (était cercle) */
  background: var(--accent-gradient); /* gradient orange comme la maquette */
  color: var(--accent-contrast);
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: var(--font-heading);
  border: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

/* Glow au hover, jamais de scale (feedback Nelwep : glow/shadow uniquement). */
.user-avatar-btn:hover {
  box-shadow: 0 6px 18px -6px hsla(var(--accent-h), var(--accent-s), var(--accent-l), .65);
}

.user-avatar-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent);
}

/* ========================================
   RESPONSIVE FIXES
   ======================================== */

/* Use dynamic viewport height on supported browsers (fixes iOS Safari bottom bar) */
@supports (height: 100dvh) {
  .app-shell {
    height: calc(100dvh - 56px) !important;
  }
}

/* Compact stat cards on small mobile */
@media (max-width: 639px) {
  .dashboard-block-stats .card.card-flat,
  .dashboard-block-stats .card.card-premium {
    padding: 0.75rem;
  }
}

/* Prevent horizontal scroll globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Main content container */
.main-content {
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile-specific fixes */
@media (max-width: 1023px) {
  /* Sidebar max width on mobile */
  .sidebar {
    max-width: 85vw;
  }

  /* Ensure cards don't overflow */
  .card {
    max-width: 100%;
    word-break: break-word;
  }

  /* Fix filter tabs horizontal scroll */
  .filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Content padding adjustments */
  .content-padding {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }
}

/* Page title styling */
.page-title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .page-title {
    font-size: 2rem;
  }
}

/* Page header section */
.page-header {
  padding: 1.25rem 1rem;
}

@media (min-width: 1024px) {
  .page-header {
    padding: 1.5rem 1.5rem;
  }
}

@media (min-width: 1280px) {
  .page-header {
    padding: 1.5rem 2rem;
  }
}


/* ====================================================================
   MOBILE TOUCH TARGETS - Phase 1.5
   ==================================================================== */

/*
  WCAG 2.1 Success Criterion 2.5.5 (Level AAA):
  Touch targets should be at least 44x44 CSS pixels (or 48x48 for Level AAA).

  This ensures comfortable tapping on mobile devices and improves accessibility
  for users with motor impairments, older users, and users with larger fingers.
*/

@media (max-width: 640px) {
  /* Buttons - Ensure minimum touch target size */
  .btn,
  button[type="submit"],
  button[type="button"],
  a.btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .btn-accent {
    min-height: 44px;
    min-width: 44px;
    padding-top: 0.625rem; /* 10px */
    padding-bottom: 0.625rem; /* 10px */
  }

  /* Small buttons get adjusted to meet minimum */
  .btn-sm {
    min-height: 44px;
    padding-top: 0.75rem; /* 12px */
    padding-bottom: 0.75rem; /* 12px */
  }

  /* Form inputs - Ensure comfortable tap targets */
  .form-input,
  .form-textarea,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Textareas maintain their rows but ensure tap target height */
  textarea.form-textarea {
    min-height: 88px; /* At least 2 lines */
  }

  /* Checkboxes and Radio Buttons */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    /* Ensure parent label provides 44px touch target */
  }

  /* Labels for checkboxes/radios should be tappable */
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem; /* Negative margin to maintain spacing */
  }

  /* Links - Especially important for nav and action links */
  a:not(.btn) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Icon-only buttons need extra care */
  button:has(svg:only-child),
  a:has(svg:only-child) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
  }

  /* Dropdown triggers */
  .dropdown-trigger,
  [data-action*="click->modal#"],
  [data-action*="click->dropdown#"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem;
  }

  /* Tab navigation */
  .tab,
  [role="tab"],
  button[role="tab"] {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Pagination buttons */
  .pagination button,
  .pagination a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Close buttons in modals/alerts */
  .modal-close,
  .alert-close,
  .flash-message-close,
  button[aria-label*="Close"],
  button[aria-label*="Fermer"] {
    min-width: 44px;
    min-height: 44px;
    padding: 0.625rem;
  }

  /* Card/List item actions */
  .card-action,
  .list-item-action {
    min-height: 44px;
    padding: 0.625rem;
  }

  /* Floating Action Button */
  .fab {
    min-width: 56px;
    min-height: 56px;
  }

  /* Ensure adequate spacing between touch targets */
  .btn + .btn,
  button + button,
  a.btn + a.btn {
    margin-inline-start: 0.5rem; /* 8px spacing between buttons */
  }

  /* Vertical button groups */
  .btn-group-vertical .btn,
  .btn-group-vertical button {
    margin-bottom: 0.5rem;
  }

  /* File inputs - Make label the touch target */
  input[type="file"] + label,
  label:has(input[type="file"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1rem;
  }

  /* Range sliders */
  input[type="range"] {
    min-height: 44px;
    cursor: pointer;
  }

  /* Toggle switches */
  .toggle,
  .switch,
  [role="switch"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Tablet breakpoint - slightly relaxed but still accessible */
@media (min-width: 641px) and (max-width: 1024px) {
  .btn-sm,
  button.btn-sm {
    min-height: 40px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
}

/* Accessibility: Focus visible for keyboard navigation */
@media (max-width: 640px) {
  *:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  /* Ensure focus is visible even on dark backgrounds */
  .bg-flowayz-navy *:focus-visible,
  .bg-accent *:focus-visible,
  [data-mode="dark"] *:focus-visible {
    outline-color: rgba(255, 255, 255, 0.8);
  }
}