/* ======================================
   DASHBOARD MOBILE RESPONSIVE
   Optimisation de l'affichage du tableau de bord sur mobile
   ====================================== */

/* ================================================
   DESKTOP - Masquer l'IMC de la colonne centrale
   ================================================ */
@media (min-width: 992px) {
  /* En mode desktop, l'IMC est dans la sidebar droite uniquement */
  .dashboard-center .dashboard-imc-row {
    display: none !important;
  }
}

/* ================================================
   MOBILE - Masquer les métriques du haut
   ================================================ */
@media (max-width: 991.98px) {
  /* Masquer les métriques du haut en mode mobile/PWA */
  .dashboard-metrics-row {
    display: none !important;
  }
  
  /* Masquer les métriques trainings en mode mobile/PWA */
  .trainings-metrics-row {
    display: none !important;
  }
}


/* ================================================
   ANALYTICS - Règles globales (desktop + mobile)
   ================================================ */
/* Centrer le contenu des cartes analytics */
.analytics-metrics-row .card-body {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.analytics-metrics-row .d-flex {
  flex-direction: column !important;
  align-items: center !important;
}

.analytics-metrics-row .flex-shrink-0,
.analytics-metrics-row .flex-grow-1 {
  flex: none !important;
  margin: 0 !important;
}

.analytics-metrics-row .flex-grow-1 {
  margin-top: 0.75rem !important;
}

/* ================================================
   DESKTOP - Règles pour écrans larges
   ================================================ */
@media (min-width: 1200px) {
  /* Padding normal pour le tableau sur desktop */
  .table-responsive {
    padding: 1.5rem !important;
  }
}

/* ================================================
   METRIC CARDS - Cartes métriques
   ================================================ */
@media (max-width: 1199.98px) {
  /* Masquer le fil d'Ariane (breadcrumb) sur mobile */
  nav[aria-label="breadcrumb"],
  .breadcrumb {
    display: none !important;
  }
  
  /* Forcer les colonnes des metric cards en 100% sur tablette/mobile - DASHBOARD */
  .dashboard-metrics-row .dashboard-metric-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-top: 0.5rem !important;
  }
  
  .dashboard-metrics-row .dashboard-metric-col:last-child {
    margin-bottom: 1rem;
  }
  
  /* Forcer les colonnes des metric cards en 100% sur tablette/mobile - TRAININGS */
  .trainings-metrics-row .trainings-metric-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-top: 0.5rem !important;
  }
  
  .trainings-metrics-row .trainings-metric-col:last-child {
    margin-bottom: 1rem;
  }
  
  /* Forcer les colonnes des metric cards en 100% sur tablette/mobile - ANALYTICS */
  .analytics-metrics-row .analytics-metric-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-top: 0.5rem !important;
  }
  
  /* Retirer h-100 des graphiques analytics sur mobile pour éviter qu'ils soient trop hauts */
  .analytics-chart-card.h-100 {
    height: inherit !important;
  }
  
  .analytics-chart-card .card-body {
    height: inherit !important;
  }

  /* .analytics-metrics-row .analytics-metric-col:last-child {
    margin-bottom: 1rem;
  }
   */
  .metric-card {
    width: 100%;

  }
  
  /* Divider après les metrics cards sur mobile */
  .dashboard-metrics-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1) 50%, transparent);
    margin: 1rem 0;
  }
  
  /* Cards Mood et Énergie en 100% aussi */
  .dashboard-mood-energy-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Masquer les boutons en bas de "Aujourd'hui" sur mobile (doublon avec bottom nav) */
  .dashboard-bottom-buttons {
    display: none !important;
  }
}


/* ================================================
   DASHBOARD LAYOUT - Layout principal responsive
   ================================================ */
@media (max-width: 1199.98px) {
  /* Masquer la sidebar sur mobile pour éviter les décalages */
  .sidebar {
    display: none !important;
  }
  
  /* Ajuster le header sur mobile */
  .app-header {
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
  
  /* Ajuster le main content pour occuper toute la largeur */
  .app-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    /* padding-top: 60px !important; */
  }
  
  /* Ajuster le main-content */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* DataTables mobile - Masquer les éléments inutiles */
  .dataTables_length,
  .dataTables_filter,
  .dataTables_info {
    display: none !important;
  }
  
  /* Enlever le padding du table-responsive sur mobile */
  .table-responsive {
    padding: 0 !important;
  }
  
  /* Enlever le padding des cellules sur mobile - Trainings */
  #trainingsTable th,
  #trainingsTable td {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  #trainingsTable th:first-child,
  #trainingsTable td:first-child {
    padding-left: 0.75rem !important;
  }
  
  #trainingsTable th:last-child,
  #trainingsTable td:last-child {
    padding-right: 0.75rem !important;
  }
  
  /* DataTables search visible sur admin/users */
  #usersTable_wrapper .dataTables_filter {
    display: none !important;
  }
  
  #usersTable_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  /* Masquer les onglets Sessions et Permissions sur mobile */
  #userTabs #sessions-tab,
  #userTabs #permissions-tab {
    display: none !important;
  }
  
  /* Badge Total sous le titre sur mobile - page users */
  .users-header-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  
  .users-total-badge {
    margin-left: 0 !important;
  }
  
  /* Badge sous le titre sur mobile - page tracker */
  .tracker-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  
  /* Badge Premium dans header - masquer texte sur mobile */
  .premium-badge-header .premium-text {
    display: none !important;
  }
  
  /* Quill toolbar - cacher boutons natifs sur mobile, garder emoji et file */
  .compose-editor .ql-toolbar {
    padding: 8px 12px !important;
  }
  
  /* Cacher tous les boutons natifs Quill sur mobile */
  .compose-editor .ql-toolbar .ql-bold,
  .compose-editor .ql-toolbar .ql-italic,
  .compose-editor .ql-toolbar .ql-underline,
  .compose-editor .ql-toolbar .ql-list {
    display: none !important;
  }
  
  /* Cacher les ql-formats vides */
  .compose-editor .ql-toolbar .ql-formats:empty {
    display: none !important;
  }
  
  /* S'assurer que emoji et file restent visibles */
  .compose-editor .ql-toolbar .ql-emoji-custom,
  .compose-editor .ql-toolbar .ql-file-custom {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
  }
  
  /* Padding pour le wrapper du tableau users */
  #usersTable_wrapper {
    padding: 0 1rem !important;
  }
  
  /* Supprimer le gutter sur tous les container-fluid */
  .container-fluid {
    --bs-gutter-x: 0rem !important;
  }

  .container {
    --bs-gutter-x: 0rem !important;
  }
  
  /* Supprimer le gutter uniquement sur le row du dashboard */
  .dashboard-main-layout {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .dashboard-main-layout > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Sur tablette et mobile, passer en mode vertical */
  .dashboard-main-layout .dashboard-sidebar-left,
  .dashboard-main-layout .dashboard-center,
  .dashboard-main-layout .dashboard-sidebar-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Ordre des colonnes principales */
  .dashboard-sidebar-left {
    order: 1;
  }
  
  .dashboard-center {
    order: 2;
  }
  
  .dashboard-sidebar-right {
    order: 3;
  }
  
  /* Dashboard center : afficher en flex column pour réorganiser */
  .dashboard-center {
    display: flex;
    flex-direction: column;
  }
  
  /* Prochaines séances en premier */
  .dashboard-upcoming-workouts {
    order: 1;
  }
  
  /* IMC en 2ème */
  .dashboard-imc-row {
    order: 2;
  }
  
  /* Charts row (poids, mood, énergie) en 3ème */
  .dashboard-charts-row {
    order: 3;
  }
  
  /* Dashboard sidebar right : afficher en flex column */
  .dashboard-sidebar-right {
    display: flex;
    flex-direction: column;
  }
  
  /* Masquer l'IMC de la sidebar right sur mobile (elle est maintenant dans center) */
  .dashboard-sidebar-right .dashboard-imc-card {
    display: none;
  }
  
  /* Autres cards de la sidebar right */
  .dashboard-sidebar-right > .card {
    order: 4;
  }
  
  /* Uniformiser la largeur des cards sur mobile */
  .dashboard-main-layout .card,
  .dashboard-center .card,
  .dashboard-sidebar-right .card {
    max-width: 100%;
  }
}


/* ================================================
   UPCOMING WORKOUTS - Prochaines séances
   ================================================ */
@media (max-width: 991.98px) {
  /* Espacer les séances sur mobile - SAUF les suggestions de recherche */
  .list-group-item:not(#food-suggestions .list-group-item) {
    padding: 0.75rem 0 !important;
  }
  
  /* Badges de date plus visibles */
  .list-group-item .badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
  }
  
  /* Texte légèrement plus grand pour lisibilité mobile */
  .list-group-item .text-dark {
    font-size: 0.95rem;
  }
  
  .list-group-item .small {
    font-size: 0.8rem !important;
  }

  /* Masquer l'IMC de la sidebar right sur mobile (elle est maintenant dans center) */
  .dashboard-sidebar-right .dashboard-imc-card {
    display: none;
  }
}


/* ================================================
   CHARTS - Graphiques
   ================================================ */
@media (max-width: 991.98px) {
  /* Réduire la hauteur des graphiques sur mobile */
  .card-body canvas {
    max-height: 180px !important;
  }
  
  /* Headers des cartes de charts plus compacts */
  .card-header h6 {
    font-size: 0.9rem;
  }
  
  .card-header .card-title i {
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  /* Encore plus compact sur très petits écrans */
  .card-body canvas {
    max-height: 150px !important;
  }
}


/* ================================================
   IMC GAUGE - Jauge IMC
   ================================================ */
@media (max-width: 991.98px) {
  /* Jauge IMC: garder lisible mais compacter */
  #imcGauge {
    max-width: 150px !important;
    max-height: 85px !important;
  }
  
  /* Légende des zones IMC: vertical sur mobile pour économiser l'espace */
  .d-flex.justify-content-center.gap-2.mb-3 {
    flex-wrap: wrap;
    gap: 0.5rem !important;
    justify-content: center !important;
    text-align: center;
  }
  
  .d-flex.justify-content-center.gap-2.mb-3 > div {
    flex: 0 0 48%;
    font-size: 0.65rem !important;
    justify-content: center !important;
  }
}


/* ================================================
   SIDEBAR RIGHT CHARTS - Charts colonne droite
   ================================================ */
/* Pas de modification des colonnes - laisser Bootstrap gérer */


/* ================================================
   NOTES SECTION - Notes récentes
   ================================================ */
@media (max-width: 991.98px) {
  /* Réduire la hauteur max des notes sur mobile */
  .timeline-notes {
    max-height: 200px !important;
  }
  
  /* Timeline items plus compacts */
  .timeline-item {
    padding: 0.5rem 0 !important;
  }
  
  .timeline-item strong,
  .timeline-item .text-muted {
    font-size: 0.8rem !important;
  }
  
  /* Badge compteur plus petit */
  .card-header .badge {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.4rem;
  }
}


/* ================================================
   BUTTONS & INTERACTIONS - Boutons optimisés tactile
   ================================================ */
@media (max-width: 991.98px) {
  /* Tous les boutons: cibles tactiles plus grandes (min 44x44px) */
  .btn-sm {
    min-height: 38px;
    padding: 0.5rem 0.75rem;
  }
  
  .btn-lg {
    min-height: 50px;
    font-size: 1rem !important;
  }
  
  /* Boutons "COMMENCER MAINTENANT" très visibles */
  .btn-success.fw-bold,
  .btn-warning.fw-bold {
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
  }
}


/* ================================================
   SPACING & PADDING - Espacement général mobile
   ================================================ */
@media (max-width: 991.98px) {
  /* Réduire l'espacement entre les cartes sur mobile */
  .row.g-3 {
    gap: 0.75rem !important;
  }
  
  /* Card body padding réduit sur mobile */
  .card-body {
    padding: 1rem !important;
  }
  
  /* Card header padding réduit */
  .card-header {
    padding: 0.75rem 1rem !important;
  }
  
  /* Breadcrumb plus compact */
  .main-breadcrumb {
    padding: 0.75rem 0 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .breadcrumb-title {
    font-size: 1.25rem !important;
  }
}


/* ================================================
   TEXT OPTIMIZATION - Optimisation du texte
   ================================================ */
@media (max-width: 991.98px) {
  /* Textes légèrement plus grands pour lisibilité mobile */
  .small {
    font-size: 0.8rem !important;
  }
  
  /* Badges plus lisibles */
  .badge {
    font-size: 0.75rem;
  }
  
  /* Icons proportionnés */
  .fs-4 {
    font-size: 1.25rem !important;
  }
}


/* ================================================
   SCROLL BEHAVIOR - Comportement de défilement
   ================================================ */
@media (max-width: 991.98px) {
  /* Smooth scroll pour les zones scrollables */
  .timeline-notes {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Empêcher le zoom sur double-tap des boutons */
  .btn,
  button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }
}


/* ================================================
   BOTTOM NAV SPACING - Espace pour la navigation
   ================================================ */
@media (max-width: 991.98px) {
  /* S'assurer que le contenu ne passe pas sous la bottom nav */
  .main-breadcrumb:last-of-type {
    margin-bottom: 1rem;
  }
  
  /* Dernière carte: marge supplémentaire pour éviter la bottom nav */
  .row.g-3:last-child {
    padding-bottom: 1rem;
  }
}


/* ================================================
   PERFORMANCE - Optimisations de performance
   ================================================ */
@media (max-width: 991.98px) {
  /* Accélération matérielle pour les animations */
  .card,
  .btn {
    transform: translateZ(0);
    will-change: transform;
  }
  
  /* Réduire les ombres sur mobile (performance) */
  .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  }
}