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

.global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 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-right: 1px solid var(--sidebar-border);
  position: relative;
  width: var(--sidebar-width);
  overflow: hidden;
}

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

@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-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(-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-left: 0.5rem;
    padding-right: 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 {
    left: 0.5rem;
    right: 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 ---- */
  .sidebar.collapsed .sidebar-collapse-row {
    justify-content: center;
  }

  /* ---- 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;
  }
}

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

.sidebar-link {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.625rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  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-left: 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: left;
}

/* 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);
}

/* ========================================
   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: left;
  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: left;
  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;
  right: 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(-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-left: 0.5rem;
  padding-right: 0.5rem;
}

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

html[data-sidebar-collapsed] .sidebar .sidebar-collapse-row {
  justify-content: center;
}

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-left: 3px solid transparent;
  margin-left: 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-left-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;
  right: 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(3px);
}

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

.mobile-user-menu {
  position: absolute;
  right: 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: left;
}

.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: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.user-avatar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.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-left: 1rem;
    padding-right: 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-left: 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);
  }
}