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

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