/* Style Pro Mobile-First pour Wattrelos FC U13 Coach App */

:root {
  --club-navy: #0b1329;
  --club-dark: #080d1a;
  --club-blue: #1d4ed8;
  --club-light-blue: #3b82f6;
  --club-gold: #f59e0b;
  --club-card: #131e36;
  --club-border: #1f2e4d;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--club-dark);
  color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* Safe areas pour encoches et barre système iOS/Android */
.safe-area-pt {
  padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
}

.safe-area-pb {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

/* Dégagement du contenu principal au-dessus de la bottom nav fixe */
main {
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* Empêcher le zoom automatique intempestif sur iOS Safari */
input, select, textarea {
  font-size: 16px !important;
  touch-action: manipulation;
  max-width: 100%;
}

/* Boutons tactiles et contrôles d'interface sans bloquer le scroll natif */
button, .touch-target, .nav-btn, .att-btn, .btn-behavior, [role="button"], header, nav {
  touch-action: manipulation;
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

/* Scrollbar invisible pour les pills horizontaux */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animation Bottom Sheet Mobile (Inactif = transparent aux clics et masqué) */
.bottom-sheet {
  width: 100% !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.75);
  max-height: 85vh;
  max-height: 85dvh;
  pointer-events: none !important;
  visibility: hidden !important;
}

.bottom-sheet.sheet-open {
  transform: translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

@media (min-width: 640px) {
  .bottom-sheet {
    max-width: 32rem !important; /* 512px (max-w-lg) */
    left: 50% !important;
    right: auto !important;
    margin: 0 auto !important;
    border-radius: 1.5rem !important;
  }
  .bottom-sheet.sheet-open {
    transform: translate(-50%, -50%) !important;
    top: 50% !important;
    bottom: auto !important;
  }
}

/* Backdrop */
#sheet-backdrop {
  pointer-events: none;
}

#sheet-backdrop.active {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Badges distinctifs haute visibilité */
.badge-mutated {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.badge-unqualified {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
  color: #ffffff;
  animation: pulse-danger 2s infinite ease-in-out;
}

@keyframes pulse-danger {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

/* Bottom Navigation Bar fixée en bas pour mobile */
.bottom-nav {
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.nav-btn.active {
  color: #3b82f6 !important;
}
.nav-btn.active span {
  font-weight: 900;
}

/* Dispatch tabs */
.dispatch-tab.active {
  background-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(29, 78, 216, 0.5);
}

/* Boutons tactiles et retour d'appui */
.att-btn:active, .btn-behavior:active, .nav-btn:active, .btn-preset:active {
  transform: scale(0.96);
}

/* Feedback toast */
#toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  width: 90%;
  max-width: 400px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}