/**
 * ============================================================
 * MOBILE ENHANCEMENTS - Fidoren (P5)
 * ============================================================
 * Améliorations UX pour mobile et tablette:
 * - Menu hamburger amélioré (P5.1)
 * - Touch gestures / swipe (P5.2)
 * - Bottom navigation mobile (P5.3)
 * - Optimisations responsive (P5.4)
 * ============================================================
 */

/* ============================================================
   P5.1 - MENU HAMBURGER AMELIORE
   ============================================================ */

/* Animation hamburger vers X */
.hamburger-icon {
  width: 24px;
  height: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Animation vers X quand actif */
.hamburger-icon.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-icon.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-icon.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Sidebar mobile améliorée */
@media (max-width: 1024px) {
  .pc-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .pc-sidebar.mob-sidebar-active {
    transform: translateX(0);
    box-shadow: 4px 0 20px var(--shadow-md);
  }

  /* Overlay - l'overlay est enfant de .pc-sidebar, donc z-index négatif
     pour qu'il apparaisse derrière le contenu de la sidebar */
  .pc-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-medium);
    z-index: -1;
    animation: fadeIn 0.3s ease;
  }

  /* Focus trap visual indicator */
  .pc-sidebar.mob-sidebar-active:focus-within {
    outline: none;
  }

  .pc-sidebar.mob-sidebar-active .pc-link:focus-visible {
    background: var(--bg-white-10);
    outline: 2px solid var(--bs-warning);
    outline-offset: -2px;
  }
}

/* Bouton fermeture sidebar mobile */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-white-10);
  color: var(--theme-surface);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease;
}

.sidebar-close-btn:hover {
  background: var(--bg-white-20);
}

.sidebar-close-btn:focus-visible {
  outline: 2px solid var(--bs-warning);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   P5.2 - TOUCH GESTURES / SWIPE
   ============================================================ */

/* Container swipeable */
.swipe-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.swipe-container::-webkit-scrollbar {
  display: none;
}

/* Items swipeables */
.swipe-item {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Cards swipeables horizontales */
.swipe-cards {
  display: flex;
  gap: 16px;
  padding: 10px 0;
}

.swipe-cards .card {
  min-width: 280px;
  max-width: 320px;
  scroll-snap-align: center;
}

/* Indicateurs de swipe */
.swipe-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
}

.swipe-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-gray-300);
  transition: all 0.3s ease;
}

.swipe-indicator.active {
  width: 24px;
  border-radius: 4px;
  background: var(--bs-primary);
}

/* Pull to refresh indicator */
.pull-to-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-primary);
  color: var(--theme-surface);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 9999;
}

.pull-to-refresh.visible {
  transform: translateY(0);
}

.pull-to-refresh .spinner-border {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

/* ============================================================
   P5.3 - BOTTOM NAVIGATION MOBILE - SUPPRIMÉ
   ============================================================ */
/* Bottom nav désactivé - navigation via header hamburger uniquement */

/* ============================================================
   P5.4 - OPTIMISATIONS RESPONSIVE
   ============================================================ */

/* Lazy loading images */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* Placeholder pour images lazy */
.img-placeholder {
  background: linear-gradient(
    90deg,
    var(--bs-gray-200) 0%,
    var(--bs-gray-100) 50%,
    var(--bs-gray-200) 100%
  );
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Touch targets minimum 48px */
@media (max-width: 768px) {
  .btn,
  button,
  [role="button"],
  .nav-link,
  .dropdown-item {
    min-height: 48px;
  }

  /* Links dans le texte: padding pour touch */
  p a,
  .text-link {
    padding: 4px 0;
    display: inline-block;
  }

  /* Form controls */
  .form-control,
  .form-select {
    min-height: 48px;
    font-size: 16px; /* Éviter zoom iOS */
  }

  /* Checkbox et radio plus grands */
  .form-check-input {
    width: 24px;
    height: 24px;
  }

  .form-check-label {
    padding-left: 8px;
    line-height: 24px;
  }
}

/* Amélioration du scroll sur mobile */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
  }

  /* Momentum scrolling */
  .scroll-container,
  .table-responsive,
  .modal-body {
    -webkit-overflow-scrolling: touch;
  }

  /* Éviter le bounce scroll sur iOS */
  body.no-bounce {
    overscroll-behavior: none;
  }
}

/* Cards responsives */
@media (max-width: 576px) {
  .card {
    border-radius: 12px;
  }

  .card-body {
    padding: 1rem;
  }

  .card-header,
  .card-footer {
    padding: 0.75rem 1rem;
  }
}

/* Tables responsives améliorées */
@media (max-width: 768px) {
  .table-responsive-stack {
    display: block;
  }

  .table-responsive-stack thead {
    display: none;
  }

  .table-responsive-stack tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-gray-200);
    border-radius: 8px;
    padding: 1rem;
    background: var(--theme-surface);
  }

  .table-responsive-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid var(--bs-gray-100);
  }

  .table-responsive-stack tbody td:last-child {
    border-bottom: none;
  }

  .table-responsive-stack tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-gray-600);
    flex-shrink: 0;
    margin-right: 1rem;
  }
}

/* Modals plein écran sur mobile */
@media (max-width: 576px) {
  /* Règles uniquement pour les modales Bootstrap classiques, pas les modales Alpine.js */
  .modal-dialog:not(.alpine-modal) {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
  }

  .modal-content:not([x-html]) {
    border: none;
    border-radius: 0;
    min-height: 100vh;
  }

  /* Exception pour les modales Alpine.js */
  .alpine-modal {
    margin: auto !important;
    min-height: auto !important;
    height: auto !important;
  }

  .modal-header {
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
  }

  /* Option pour modal en bas (bottom sheet) */
  .modal-bottom-sheet .modal-dialog {
    margin: auto 0 0 0;
    min-height: auto;
  }

  .modal-bottom-sheet .modal-content {
    border-radius: 16px 16px 0 0;
    min-height: auto;
    max-height: 90vh;
  }

  .modal-bottom-sheet .modal-body {
    max-height: calc(90vh - 60px);
    overflow-y: auto;
  }
}

/* Dropdowns optimisés mobile */
@media (max-width: 768px) {
  /* Amélioration des dropdowns sur mobile - comportement normal mais optimisé */
  .dropdown-menu {
    min-width: 280px !important;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--shadow-md) !important;
  }

  /* Overlay sombre pour fermer le dropdown en cliquant à l'extérieur */
  .dropdown-menu.show {
    z-index: 1050;
  }

  /* Touch targets plus grands sur mobile */
  .dropdown-item {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
  }
}

/* Safe area pour appareils avec notch */
@supports (padding: env(safe-area-inset-bottom)) {
  .pc-header {
    padding-top: env(safe-area-inset-top);
  }
}

/* ============================================================
   UTILITIES MOBILE
   ============================================================ */

/* Cacher sur mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Afficher uniquement sur mobile */
.show-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .show-mobile {
    display: block !important;
  }

  .show-mobile-flex {
    display: flex !important;
  }

  .show-mobile-inline {
    display: inline !important;
  }
}

/* Texte plus grand sur mobile pour lisibilité */
@media (max-width: 576px) {
  .text-mobile-lg {
    font-size: 1.1rem;
  }

  .text-mobile-xl {
    font-size: 1.25rem;
  }
}

/* Espacement mobile */
@media (max-width: 768px) {
  .p-mobile-3 {
    padding: 1rem !important;
  }

  .px-mobile-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-mobile-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .m-mobile-0 {
    margin: 0 !important;
  }

  .gap-mobile-2 {
    gap: 0.5rem !important;
  }
}