/* ============================================
   RESPONSIVE UTILITIES - Planning BSM
   ============================================
   Système de classes utilitaires pour une approche
   responsive cohérente sur toute l'application
   ============================================ */

/* ============================================
   1. VARIABLES CSS GLOBALES
   ============================================ */
:root {
  /* Breakpoints standards */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1400px;
  --breakpoint-ultrawide: 1920px;
  
  /* Padding adaptatif pour modales */
  --modal-padding-mobile: 20px;
  --modal-padding-tablet: 40px;
  --modal-padding-desktop: 60px;
  
  /* Marges de sécurité */
  --safe-area-mobile: 20px;
  --safe-area-tablet: 40px;
  --safe-area-desktop: 60px;
  
  /* Tailles de police adaptatives */
  --font-size-base-mobile: 14px;
  --font-size-base-tablet: 16px;
  --font-size-base-desktop: 18px;
  
  /* Z-index hiérarchie */
  --z-index-modal-overlay: 1000;
  --z-index-modal-content: 1001;
  --z-index-modal-header: 1002;
  --z-index-dropdown: 1100;
  --z-index-tooltip: 1200;
}

/* ============================================
   2. CLASSES UTILITAIRES POUR MODALES
   ============================================ */

/* Classe de base pour toutes les modales responsives */
.modal-responsive {
  width: calc(100% - var(--safe-area-mobile) * 2);
  max-width: 95vw;
  margin: var(--safe-area-mobile) auto;
  padding: var(--modal-padding-mobile);
  max-height: calc(100vh - var(--safe-area-mobile) * 2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-responsive .modal-header {
  flex-shrink: 0;
}

.modal-responsive .modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
}

.modal-responsive .modal-footer,
.modal-responsive .modal-actions {
  flex-shrink: 0;
  margin-top: auto;
}

/* ============================================
   3. SYSTÈME DE TAILLES POUR MODALES
   ============================================ */

/* Petite modale (formulaires simples) */
.modal--small {
  max-width: min(400px, 90vw);
}

/* Modale moyenne (défaut) */
.modal--medium {
  max-width: min(600px, 90vw);
}

/* Grande modale (tableaux, gestion complexe) */
.modal--large {
  max-width: min(900px, 95vw);
}

/* Modale extra large (vues détaillées) */
.modal--xlarge {
  max-width: min(1200px, 95vw);
}

/* Plein écran sur mobile automatiquement */
.modal--fullscreen-mobile {
  /* Sera appliqué via media query */
}

/* ============================================
   4. MEDIA QUERIES PRINCIPALES
   ============================================ */

/* Mobile portrait (< 480px) */
@media (max-width: 480px) {
  .modal-responsive,
  .modal--fullscreen-mobile {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: var(--modal-padding-mobile);
  }
  
  .modal-responsive .modal-header {
    padding: 15px var(--modal-padding-mobile);
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
  }
  
  .modal-responsive .modal-body {
    padding: var(--modal-padding-mobile);
  }
  
  .modal-responsive .modal-footer,
  .modal-responsive .modal-actions {
    padding: 15px var(--modal-padding-mobile);
    position: sticky;
    bottom: 0;
    background: inherit;
    z-index: 10;
  }
}

/* Mobile paysage et petites tablettes (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .modal-responsive {
    width: calc(100% - var(--safe-area-mobile) * 2);
    margin: var(--safe-area-mobile) auto;
    padding: 30px;
    max-height: calc(100vh - var(--safe-area-mobile) * 2);
  }
  
  /* Ajustement des tailles sur tablette */
  .modal--small { max-width: min(450px, 85vw); }
  .modal--medium { max-width: min(650px, 85vw); }
  .modal--large { max-width: min(850px, 90vw); }
}

/* Tablettes et petits laptops (769px - 1024px) - CRITIQUE POUR VOTRE CAS */
@media (min-width: 769px) and (max-width: 1024px) {
  .modal-responsive {
    width: calc(100% - var(--safe-area-tablet) * 2);
    margin: var(--safe-area-tablet) auto;
    padding: var(--modal-padding-tablet);
    max-height: calc(100vh - var(--safe-area-tablet) * 2);
  }
  
  /* Tailles ajustées pour cette plage */
  .modal--small { max-width: min(400px, 80vw); }
  .modal--medium { max-width: min(550px, 80vw); }
  .modal--large { max-width: min(800px, 85vw); }
  .modal--xlarge { max-width: min(950px, 90vw); }
}

/* Desktop standard (1025px - 1400px) */
@media (min-width: 1025px) and (max-width: 1400px) {
  .modal-responsive {
    padding: var(--modal-padding-desktop);
    margin: var(--safe-area-desktop) auto;
  }
  
  /* Tailles desktop */
  .modal--small { max-width: 450px; }
  .modal--medium { max-width: 650px; }
  .modal--large { max-width: 950px; }
  .modal--xlarge { max-width: 1200px; }
}

/* Écrans larges (> 1400px) */
@media (min-width: 1401px) {
  .modal-responsive {
    padding: var(--modal-padding-desktop);
  }
  
  /* Limiter la taille max sur très grands écrans */
  .modal--small { max-width: 500px; }
  .modal--medium { max-width: 700px; }
  .modal--large { max-width: 1000px; }
  .modal--xlarge { max-width: 1300px; }
}

/* ============================================
   5. UTILITAIRES POUR TABLES RESPONSIVES
   ============================================ */

.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.table-responsive {
  min-width: 100%;
  width: max-content;
}

/* Indicateur de scroll horizontal sur mobile */
@media (max-width: 768px) {
  .table-responsive-wrapper {
    box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.3);
    position: relative;
  }
  
  .table-responsive-wrapper::after {
    content: '→';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: rgba(0,0,0,0.3);
    pointer-events: none;
  }
  
  .table-responsive-wrapper.scrolled-right::after {
    display: none;
  }
}

/* ============================================
   6. HELPERS POUR FORMULAIRES RESPONSIVES
   ============================================ */

.form-responsive {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group-responsive {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Grille de formulaires sur desktop */
@media (min-width: 769px) {
  .form-grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
  
  .form-grid-responsive.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-grid-responsive.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   7. BOUTONS RESPONSIVES
   ============================================ */

.btn-responsive {
  padding: clamp(12px, 2vw, 18px) clamp(20px, 3vw, 32px);
  font-size: clamp(14px, 1.5vw, 16px);
  min-height: 44px; /* Taille min pour accessibilité tactile */
  touch-action: manipulation; /* Évite le zoom sur double tap */
}

/* Groupe de boutons responsive */
.btn-group-responsive {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .btn-group-responsive {
    flex-direction: column;
  }
  
  .btn-group-responsive .btn {
    width: 100%;
  }
}

/* ============================================
   8. UTILITAIRES DE VISIBILITÉ
   ============================================ */

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

/* Masquer sur tablette */
.hide-tablet {
  @media (min-width: 769px) and (max-width: 1024px) {
    display: none !important;
  }
}

/* Masquer sur desktop */
.hide-desktop {
  @media (min-width: 1025px) {
    display: none !important;
  }
}

/* Afficher uniquement sur mobile */
.show-mobile-only {
  display: none !important;
  @media (max-width: 768px) {
    display: block !important;
  }
}

/* ============================================
   9. ANIMATIONS RESPONSIVES
   ============================================ */

/* Désactiver les animations sur mobile si performance faible */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .modal-responsive,
  .modal-responsive * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   10. CORRECTIFS SPÉCIFIQUES
   ============================================ */

/* Fix pour la login-box sur écrans moyens */
@media (min-width: 769px) and (max-width: 1024px) {
  .login-box {
    padding: 25px 35px !important;
    max-width: min(420px, 85vw) !important;
    margin: auto;
  }
  
  .login-box h1 {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }
  
  .login-box img {
    height: 80px !important;
    width: 80px !important;
    margin-bottom: 15px !important;
  }
  
  /* Réduire l'espace du wrapper du logo */
  .login-box > div:first-child {
    margin-bottom: 20px !important;
  }
  
  /* Ajuster les form-groups */
  .login-box .form-group {
    margin-bottom: 15px !important;
  }
  
  .login-box .form-group label {
    font-size: 15px !important;
    margin-bottom: 5px !important;
  }
  
  .login-box .form-group input,
  .login-box .form-group select {
    padding: 12px 15px !important;
    font-size: 15px !important;
  }
  
  /* S'assurer que le bouton est visible */
  .login-box .btn-full {
    margin-top: 10px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
  }
  
  .login-container {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Fix pour la login-box sur écrans moyens/grands avec hauteur limitée */
@media (min-width: 1025px) and (max-height: 850px) {
  .login-box {
    padding: 35px 50px !important;
    max-width: min(500px, 85vw) !important;
  }
  
  .login-box h1 {
    font-size: 28px !important;
    margin-bottom: 25px !important;
  }
  
  .login-box img {
    height: 110px !important;
    width: 110px !important;
    margin-bottom: 20px !important;
  }
  
  .login-box > div:first-child {
    margin-bottom: 30px !important;
  }
  
  .login-box .form-group {
    margin-bottom: 18px !important;
  }
  
  .login-box .btn-full {
    margin-top: 15px !important;
  }
}

/* ============================================
   11. SUPPORT POUR SAFE AREAS (iPhone X+)
   ============================================ */

@supports (padding: max(0px)) {
  .modal-responsive {
    padding-left: max(var(--modal-padding-mobile), env(safe-area-inset-left));
    padding-right: max(var(--modal-padding-mobile), env(safe-area-inset-right));
    padding-bottom: max(var(--modal-padding-mobile), env(safe-area-inset-bottom));
  }
}

/* ============================================
   12. CORRECTIFS PAGE PRINCIPALE
   ============================================ */

/* SUPPRIMÉ - Header: mode mobile unifié < 1000px */

/* SUPPRIMÉ - Table planning: mode mobile unifié < 1000px */

/* SUPPRIMÉ - Mode tablette, remplacé par mode mobile unifié < 1000px */

/* DÉSACTIVÉ - Conflits avec nouveau système responsive unifié */
/*
@media (min-width: 1000px) and (max-width: 1024px) {
  .controls {
    padding: 10px !important;
    overflow: visible !important;
  }
  
  .controls-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Première ligne : Store selector et Navigation semaine */
  .store-selector-wrapper {
    order: 1;
    flex: 0 0 auto;
    width: 160px !important;
  }
  
  .week-selector {
    order: 2;
    flex: 1 1 auto;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .week-selector h2 {
    font-size: 15px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  
  /* Les chevrons restent de part et d'autre */
  .week-selector .nav-button {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }
  
  /* Masquer le menu dropdown pour cette résolution */
  .actions-dropdown-container {
    display: none !important;
  }
  
  /* Deuxième ligne : Tous les boutons alignés horizontalement */
  /* SUPPRIMÉ - Règle qui forçait l'affichage de tous les boutons en mobile */
  
  /* SUPPRIMÉ - Règle qui forçait l'affichage des boutons desktop en mobile */
  
  /* Forcer les boutons sur une nouvelle ligne */
  .controls-flex > button:nth-child(3) {
    flex-basis: 100% !important; /* Force le saut de ligne après la navigation */
  }
  
  /* Ajuster la taille du texte pour que tout rentre */
  .controls-flex .btn {
    font-size: 11px !important;
    padding: 6px 8px !important;
    min-height: 32px !important;
  }
  
  /* Calendrier reste avec la navigation */
  .week-selector .btn-calendar {
    font-size: 18px !important;
    padding: 6px !important;
    margin-left: 8px !important;
  }
}
*/

/* Style pour le menu déroulant */
.actions-dropdown {
  position: relative;
  display: inline-block;
}

.actions-dropdown-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.3s;
}

.actions-dropdown-btn:hover {
  background: #5a6268;
}

.actions-dropdown-content {
  display: none;
  position: fixed;  /* Changé de absolute à fixed */
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 5px;
  z-index: 1000;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.actions-dropdown-content.show {
  display: block;
}

.actions-dropdown-content button {
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  border-bottom: 1px solid #e0e0e0;
}

.actions-dropdown-content button:last-child {
  border-bottom: none;
}

.actions-dropdown-content button:hover {
  background: #f5f5f5;
}

/* SUPPRIMÉ - Mode mobile unifié pour toutes largeurs < 1000px */

/* SUPPRIMÉ - Grille couverture: mode mobile unifié < 1000px */

/* SUPPRIMÉ - Ajustements hauteur: mode mobile unifié < 1000px */

/* Support écrans larges mais peu hauts (ex: 1366x768) */
@media (min-width: 1025px) and (max-width: 1400px) and (max-height: 800px) {
  .header {
    padding: 12px 20px !important;
  }
  
  .header h1 {
    font-size: 26px !important;
  }
  
  .main-content {
    padding: 15px !important;
  }
  
  .planning-table td {
    height: 60px !important;
    padding: 8px !important;
  }
  
  .controls {
    padding: 12px !important;
  }
  
  .btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
}

/* ============================================
   13. PRINT STYLES
   ============================================ */

@media print {
  .modal {
    position: relative !important;
    box-shadow: none !important;
  }
  
  .modal-overlay {
    display: none !important;
  }
  
  .btn-group-responsive,
  .modal-actions {
    display: none !important;
  }
}