/* Correctif mobile strict : menu bas, dashboard simplifié, filtres masqués, calendrier visible.
   Présentation uniquement : aucune logique métier modifiée. */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  body {
    padding-bottom: 76px !important;
  }

  .content {
    padding: 10px 10px 92px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Header mobile : le menu principal quitte le haut et devient une barre basse type application. */
  .modern-topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 1040 !important;
    display: flex !important;
    align-items: center !important;
  }

  .modern-topbar .topbar-center {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    height: 68px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .12) !important;
    z-index: 1200 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: stretch !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .modern-topbar .top-pill {
    height: 54px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 5px 3px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .modern-topbar .top-pill i {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .modern-topbar .top-pill span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  .topbar-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .topbar-right {
    flex: 0 0 auto !important;
  }

  .topbar-left .fw-bold.fs-5 {
    max-width: calc(100vw - 184px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Accueil mobile simplifié : on garde le bloc principal avec Espace connecté + Scanner QR + Mes réservations. */
  body:has(.dashboard-hero-modern) .dashboard-modern-grid,
  body:has(.dashboard-hero-modern) section.row.g-4.mb-4,
  body:has(.dashboard-hero-modern) .dashboard-mobile-hide-scope,
  body:has(.dashboard-hero-modern) .dashboard-alert-info {
    display: none !important;
  }

  body:has(.dashboard-hero-modern) .dashboard-hero-modern {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  body:has(.dashboard-hero-modern) .dashboard-hero-content {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  body:has(.dashboard-hero-modern) .dashboard-hero-panel {
    display: none !important;
  }

  body:has(.dashboard-hero-modern) .dashboard-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body:has(.dashboard-hero-modern) .dashboard-hero-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Tous les filtres sont masqués en mode téléphone. */
  form[class*="filter"],
  form[class*="Filter"],
  div[class*="filter"],
  div[class*="Filter"],
  .mes-reservations-filters,
  .availability-filters,
  .filters,
  .filter-bar,
  .filters-bar,
  .search-filters,
  .reservation-filters,
  .admin-filters,
  .qr-filters {
    display: none !important;
  }

  /* Exceptions : ne jamais masquer la barre basse qui contient le menu mobile. */
  .modern-topbar .topbar-center,
  .modern-topbar .topbar-center * {
    display: flex !important;
  }

  .modern-topbar .topbar-center {
    display: grid !important;
  }

  /* Calendrier FullCalendar : visible, lisible, non écrasé. */
  .planning-calendar-card,
  .calendar-card,
  #calendar,
  .fc,
  .fc-view-harness,
  .fc-view-harness-active,
  .fc-scroller,
  .fc-scroller-liquid,
  .fc-scroller-liquid-absolute {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
  }

  .planning-calendar-card,
  .calendar-card {
    width: 100% !important;
    overflow: visible !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }

  #calendar {
    width: 100% !important;
    min-height: 520px !important;
  }

  .fc {
    width: 100% !important;
    min-height: 520px !important;
    font-size: 12px !important;
    background: #fff !important;
  }

  .fc .fc-view-harness,
  .fc .fc-view-harness-active {
    min-height: 430px !important;
    height: auto !important;
  }

  .fc .fc-list,
  .fc .fc-list-table,
  .fc table {
    width: 100% !important;
  }

  .fc .fc-toolbar.fc-header-toolbar,
  .fc .fc-toolbar.fc-footer-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .fc .fc-toolbar-chunk {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .fc .fc-toolbar-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .fc .fc-button,
  .fc .fc-button-primary {
    width: auto !important;
    min-width: 36px !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  .fc .fc-list-event-time {
    width: 64px !important;
    min-width: 64px !important;
    font-size: 11px !important;
    white-space: normal !important;
  }

  .fc .fc-list-event-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .fc .fc-daygrid-day-frame {
    min-height: 74px !important;
  }

  .fc .fc-daygrid-event,
  .fc .fc-timegrid-event {
    white-space: normal !important;
    overflow: visible !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .fc .fc-event-title,
  .fc .fc-event-time {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 390px) {
  .modern-topbar .top-pill span {
    display: block !important;
    font-size: 9px !important;
  }
}


/* Barre basse mobile type Facebook : icônes centrées + photo profil en bas.
   Interface uniquement, aucune logique métier modifiée. */
.mobile-bottom-profile {
  display: none !important;
}

@media (max-width: 768px) {
  .modern-topbar .topbar-center {
    height: 74px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom)) !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(15, 23, 42, .10) !important;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, .14) !important;
  }

  .modern-topbar .top-pill,
  .modern-topbar .mobile-bottom-profile {
    height: 58px !important;
    border-radius: 16px !important;
    gap: 3px !important;
    color: #64748b !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .modern-topbar .top-pill i {
    font-size: 21px !important;
    color: #64748b !important;
  }

  .modern-topbar .top-pill span {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    max-width: 100% !important;
  }

  .modern-topbar .top-pill.active,
  .modern-topbar .mobile-bottom-profile.active {
    background: #e8f3ff !important;
    color: #1877f2 !important;
  }

  .modern-topbar .top-pill.active i,
  .modern-topbar .top-pill.active span,
  .modern-topbar .mobile-bottom-profile.active span {
    color: #1877f2 !important;
  }

  .modern-topbar .mobile-bottom-profile {
    display: flex !important;
  }

  .bottom-nav-avatar {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 2px solid #1877f2 !important;
    background: #e8f3ff !important;
    color: #1877f2 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .topbar-right .profile-chip {
    display: none !important;
  }

  body {
    padding-bottom: 86px !important;
  }

  .content {
    padding-bottom: 104px !important;
  }
}

@media (max-width: 390px) {
  .modern-topbar .topbar-center {
    gap: 2px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .modern-topbar .top-pill span {
    font-size: 8.6px !important;
  }

  .modern-topbar .top-pill i {
    font-size: 19px !important;
  }

  .bottom-nav-avatar {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
  }
}