/**
 * Corrections Automatiques pour les Problèmes Mobile Identifiés
 * 
 * Ce fichier corrige :
 * 1. Tables non responsive
 * 2. Formulaires non adaptés
 * 3. Modals non optimisées
 * 4. Navigation mobile
 */

/* ============================================
   1. TABLES - Corrections Automatiques
   ============================================ */

/* S'assurer que toutes les tables ont un wrapper responsive */
table.table {
  width: 100%;
  margin-bottom: 0;
}

/* Si une table n'a pas de wrapper, elle sera corrigée par JS */
/* Mais on peut aussi forcer le comportement responsive */
@media (max-width: 767.98px) {
  /* Forcer le scroll horizontal si nécessaire */
  table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Masquer les colonnes non importantes */
  table.table th.d-none-mobile,
  table.table td.d-none-mobile {
    display: none !important;
  }
  
  /* Réduire le padding des cellules */
  table.table th,
  table.table td {
    padding: 0.5rem 0.375rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  
  /* Colonnes importantes - garder visible */
  table.table th.important,
  table.table td.important {
    white-space: normal;
    min-width: 100px;
  }
}

/* Mode card pour très petits écrans (optionnel) */
@media (max-width: 575.98px) {
  /* Si la table a la classe table-card-view, utiliser le mode card */
  .table-card-view {
    display: block;
  }
  
  .table-card-view thead {
    display: none;
  }
  
  .table-card-view tbody,
  .table-card-view tr,
  .table-card-view td {
    display: block;
    width: 100%;
  }
  
  .table-card-view tr {
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    background: white;
  }
  
  .table-card-view td {
    border: none;
    padding: 0.5rem 0;
    text-align: left !important;
  }
  
  .table-card-view td:before {
    content: attr(data-label) ": ";
    font-weight: bold;
    display: inline-block;
    min-width: 100px;
    margin-right: 0.5rem;
  }
}

/* ============================================
   2. FORMULAIRES - Corrections Automatiques
   ============================================ */

/* Empiler les champs côte à côte sur mobile */
@media (max-width: 767.98px) {
  .mobile-stacked,
  .d-flex.gap-2:not(.keep-inline),
  .d-flex.gap-3:not(.keep-inline) {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  /* Filtres de recherche - full width */
  .filter-field {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem;
  }
  
  /* Selects - full width */
  .form-select.w-auto,
  .form-select[style*="width"] {
    width: 100% !important;
  }
  
  /* Labels au-dessus des champs */
  .form-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    display: block;
  }
  
  /* Groupes de champs */
  .input-group {
    flex-wrap: wrap;
  }
  
  .input-group > .form-control,
  .input-group > .form-select {
    flex: 1 1 100%;
    margin-bottom: 0.5rem;
  }
  
  /* Champs dans les rows Bootstrap */
  .row > [class*="col-"] {
    margin-bottom: 1rem;
  }
}

/* ============================================
   3. MODALS - Corrections Automatiques
   ============================================ */

@media (max-width: 767.98px) {
  /* Modals optimisées pour mobile */
  .modal-dialog.mobile-optimized,
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100%;
  }
  
  .modal-dialog.mobile-optimized .modal-content,
  .modal-dialog .modal-content {
    border-radius: 0;
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .modal-dialog.mobile-optimized .modal-header,
  .modal-dialog .modal-header {
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
    flex-shrink: 0;
  }
  
  .modal-dialog.mobile-optimized .modal-body,
  .modal-dialog .modal-body {
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }
  
  .modal-dialog.mobile-optimized .modal-footer,
  .modal-dialog .modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  
  .modal-dialog.mobile-optimized .modal-footer .btn,
  .modal-dialog .modal-footer .btn {
    flex: 1 1 auto;
    margin: 0.25rem;
    min-width: calc(50% - 0.5rem);
  }
}

/* ============================================
   4. NAVIGATION - Corrections Automatiques
   ============================================ */

@media (max-width: 991.98px) {
  /* Menu horizontal - vertical sur mobile */
  .horizontal-menu .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  
  .horizontal-menu .nav-link {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  /* Dropdowns full-width */
  .dropdown-menu {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    position: static !important;
    transform: none !important;
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  /* Masquer le texte des icônes */
  .horizontal-menu .nav-link span:not(.badge):not(.icon-only) {
    display: none;
  }
  
  /* Logo réduit */
  .navbar-brand {
    font-size: 1rem !important;
  }
  
  /* Texte utilisateur réduit */
  .user-info {
    font-size: 0.875rem;
  }
  
  /* Dropdown utilisateur optimisé */
  .user-dropdown .dropdown-toggle {
    padding: 0.5rem;
  }
  
  .user-dropdown .dropdown-toggle span {
    display: none;
  }
}

/* ============================================
   5. CORRECTIONS GLOBALES
   ============================================ */

/* S'assurer que les images sont toujours responsive */
img:not([style*="width"]):not([style*="height"]) {
  max-width: 100%;
  height: auto;
}

/* Cards dans les grilles */
@media (max-width: 767.98px) {
  .row > [class*="col-"] {
    margin-bottom: 1rem;
  }
  
  .card {
    margin-bottom: 1rem;
  }
}

/* Pagination mobile */
@media (max-width: 575.98px) {
  .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .pagination .page-link {
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Breadcrumbs mobile */
@media (max-width: 575.98px) {
  .breadcrumb {
    font-size: 0.875rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
}

/* Alerts mobile */
@media (max-width: 575.98px) {
  .alert {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  
  .alert .d-flex {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Containers - padding réduit */
@media (max-width: 575.98px) {
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .content {
    padding: 1rem 0.75rem !important;
  }
  
  .card-body {
    padding: 1rem !important;
  }
}