/* Police Inter - Alternative moderne et professionnelle à Marianne */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Application de la police Inter sur tout le site */
* {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* Amélioration de l'affichage des textes */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Styles pour les badges de priorité */
.badge-haute {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge-moyenne {
  background-color: #fef3c7;
  color: #92400e;
}

.badge-normale {
  background-color: #dcfce7;
  color: #166534;
}

/* Styles pour les statuts d'assignation */
.status-valide {
  background-color: #dcfce7;
  color: #166534;
}

.status-en-attente {
  background-color: #fef3c7;
  color: #92400e;
}

.status-libre {
  background-color: #f3f4f6;
  color: #4b5563;
}

/* Animation de chargement */
.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Cartes compagnies/brigades hover effect */
.card-hover {
  transition: all 0.2s ease-in-out;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Animations d'apparition */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Animation de slide-in depuis la gauche */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.4s ease-out forwards;
}

/* Transitions fluides */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient backgrounds */
.gradient-blue {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #065f46 0%, #059669 100%);
}

/* Shadow effects */
.shadow-glow-blue {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
}

.shadow-glow-green {
  box-shadow: 0 0 20px rgba(22, 163, 74, 0.3);
}

/* Amélioration de la lisibilité des tableaux */
table {
  font-variant-numeric: tabular-nums;
}

/* ==================== RESPONSIVE DESIGN ==================== */

/* Breakpoints :
   - Mobile : < 640px (sm)
   - Tablette : 640px - 1024px (md/lg)
   - Desktop : > 1024px (xl)
*/

/* Mobile - Optimisations tactiles */
@media (max-width: 640px) {
  /* Augmentation de la taille des zones tactiles */
  button, a, input, select, textarea {
    min-height: 44px !important;
    min-width: 44px;
  }
  
  /* Navigation mobile */
  .mobile-menu {
    display: block;
  }
  
  .desktop-menu {
    display: none;
  }
  
  /* Grilles en colonne unique */
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  /* Espacement réduit pour mobile */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Cartes full-width sur mobile */
  .card-hover {
    border-radius: 0.5rem;
  }
  
  /* Tables responsives - scroll horizontal */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    min-width: 600px;
  }
  
  /* Modales plein écran sur mobile */
  .modal-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  /* Textes adaptés mobile */
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  /* Navigation sticky sur mobile */
  nav {
    position: sticky;
    top: 0;
    z-index: 40;
  }
  
  /* Fil d'ariane responsive */
  .breadcrumb {
    font-size: 0.75rem;
    flex-wrap: wrap;
  }
  
  /* Boutons stack sur mobile */
  .button-group {
    flex-direction: column;
    width: 100%;
  }
  
  .button-group > * {
    width: 100%;
  }
}

/* Tablette - Optimisations intermédiaires */
@media (min-width: 641px) and (max-width: 1024px) {
  .mobile-menu {
    display: none;
  }
  
  .desktop-menu {
    display: flex;
  }
  
  /* Grilles 2 colonnes sur tablette */
  .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  /* Espacement tablette */
  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  /* Modales adaptées tablette */
  .modal-content {
    max-width: 90vw !important;
    max-height: 90vh !important;
  }
}

/* Desktop - Affichage par défaut */
@media (min-width: 1025px) {
  .mobile-menu {
    display: none;
  }
  
  .desktop-menu {
    display: flex;
  }
}

/* Menu hamburger pour mobile */
.hamburger-menu {
  display: none;
  flex-direction: column;
  cursor: pointer;
  z-index: 50;
}

.hamburger-menu span {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 3px;
}

.hamburger-menu.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

@media (max-width: 640px) {
  .hamburger-menu {
    display: flex;
  }
}

/* Menu mobile overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100vh;
  background-color: #1e3a8a;
  z-index: 45;
  transition: left 0.3s ease-in-out;
  padding: 5rem 1.5rem 1.5rem;
  overflow-y: auto;
}

.mobile-nav-overlay.active {
  left: 0;
}

.mobile-nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 44;
  display: none;
}

.mobile-nav-backdrop.active {
  display: block;
}

/* Optimisations tactiles générales */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  -webkit-touch-callout: none;
}

button, a {
  -webkit-tap-highlight-color: rgba(59, 130, 246, 0.3);
}

/* Scroll smooth sur toute la page */
html {
  scroll-behavior: smooth;
}

/* Amélioration des inputs tactiles */
input, select, textarea {
  font-size: 16px !important; /* Évite le zoom automatique sur iOS */
}

/* Cartes empilées sur mobile */
@media (max-width: 640px) {
  .mission-card, .brigade-card, .compagnie-card {
    margin-bottom: 0.75rem;
  }
}

/* Boutons flottants sur mobile */
.floating-action-button {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  .floating-action-button {
    bottom: 1rem;
    right: 1rem;
  }
}