/* Dashboard Adaptif - CSS complet pour le repli contextuel */

/* Mobile responsive navbar adjustments */
@media (max-width: 1023px) {
  .navbar {
    min-height: 3rem !important;
    padding: 0.5rem !important;
  }
  
  .navbar .btn {
    min-height: 2rem !important;
    height: 2rem !important;
  }
  
  .navbar .input {
    min-height: 2rem !important;
    height: 2rem !important;
  }
  
  .navbar .tabs .tab {
    min-height: 2rem !important;
    height: 2rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* Animation de repli principal */
.collapsed {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0.2;
  pointer-events: none;
  transform: scale(0.95);
  transition: max-height 0.4s ease-in-out, opacity 0.4s, transform 0.4s;
}

/* Pour une transition plus douce et un effet minimaliste */
.collapsed > * {
  opacity: 0;
  transition: opacity 0.3s;
}

/* Layout principal du dashboard adaptif SANS header/footer */
.dashboard-adaptif-layout {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 1.5rem;
  align-items: start;
  margin: 0 auto;
  max-width: 1400px;
  min-height: 100vh;
  padding-top: 2rem;
  padding-right: 350px; /* Espace pour la recherche fixe */
}

/* Card de recherche fixe en haut à droite */
.search-card-fixed {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

/* Styles pour les onglets de recherche */
.search-content {
  transition: all 0.3s ease;
}

.search-content.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Responsive design */
@media (max-width: 1200px) {
  .dashboard-adaptif-layout {
    grid-template-columns: 200px 1fr 200px;
    gap: 1rem;
    padding-right: 320px; /* Ajusté pour écrans moyens */
  }
}

@media (max-width: 900px) {
  .dashboard-adaptif-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-right: 1rem;
    padding-top: 130px; /* Plus d'espace pour la recherche sur mobile */
  }
  
  /* Recherche plus compacte sur mobile */
  .search-card-fixed .card {
    width: 90vw !important;
    max-width: 350px;
  }
  
  #guildMembersList,
  #guildInfoBlock {
    order: 2;
  }
  
  main {
    order: 1;
  }
}

/* Pour les modules principaux */
#characterTalents, 
#characterEquipment, 
#characterProfessions {
  min-width: 0;
  transition: all 0.4s ease-in-out;
}

/* États non-repliés avec animation */
#characterTalents:not(.collapsed),
#characterEquipment:not(.collapsed),
#characterProfessions:not(.collapsed) {
  opacity: 1;
  transform: scale(1);
  max-height: none;
}

/* Pour la liste des membres repliée avec animation fluide */
#guildMembersList.collapsed {
  min-width: 60px;
  max-width: 60px;
  opacity: 0.2;
  transform: translateX(-20px);
}

#guildMembersList:not(.collapsed) {
  transform: translateX(0);
  opacity: 1;
}

/* Pour le bloc d'infos guilde replié */
#guildInfoBlock.collapsed {
  min-width: 60px;
  max-width: 60px;
  opacity: 0.2;
  transform: translateX(20px);
}

#guildInfoBlock:not(.collapsed) {
  transform: translateX(0);
  opacity: 1;
}

/* Animation d'apparition pour les modules personnage */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#characterTalents:not(.collapsed),
#characterEquipment:not(.collapsed),
#characterProfessions:not(.collapsed) {
  animation: slideInUp 0.5s ease-out;
}

/* Amélioration des cartes */
.card {
  transition: all 0.3s ease;
}

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

/* Style du header */
.navbar {
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Style des boutons de navigation contextuels */
.context-switch-btn {
  transition: all 0.3s ease;
}

.context-switch-btn:hover {
  transform: scale(1.05);
}

/* Personnalisation des stats */
.stat {
  transition: all 0.3s ease;
}

.stat:hover {
  background: rgba(255,255,255,0.05);
  transform: scale(1.02);
}

/* Style pour les tooltips d'items */
.equipment-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.equipment-item:hover {
  transform: scale(1.1);
  z-index: 10;
}

/* Style pour les toasts de notification */
#toastContainer {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  pointer-events: none;
}

#toastContainer .alert {
  pointer-events: auto;
  animation: slideInRight 0.3s ease-out;
  margin-bottom: 0.5rem;
  max-width: 20rem; /* Largeur fixe pour éviter les débordements */
  word-wrap: break-word; /* Forcer les retours à la ligne */
  white-space: normal; /* Permettre les retours à la ligne */
}

/* Animation d'entrée optimisée */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Animation de disparition améliorée */
.toast-fadeout {
  animation: fadeOutRight 0.3s ease-out forwards;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
}

/* Amélioration pour les longs textes dans les toasts */
#toastContainer .alert .flex {
  min-height: auto;
  align-items: flex-start; /* Alignement en haut pour les textes longs */
}

#toastContainer .alert span {
  line-height: 1.4; /* Meilleur espacement des lignes */
  word-break: break-word; /* Casser les mots longs */
}