@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(120, 61%, 34%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(35, 100%, 47%);
  --accent-foreground: hsl(0, 0%, 100%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;
  
  /* Custom La Foir'Fouille colors */
  --surface: hsl(0, 0%, 98%);
  --delivered: hsl(0, 0%, 46%);
}

.dark {
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --popover: hsl(240, 10%, 3.9%);
  --popover-foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 3.9%);
  --card-foreground: hsl(0, 0%, 98%);
  --border: hsl(240, 3.7%, 15.9%);
  --input: hsl(240, 3.7%, 15.9%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(120, 61%, 34%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(35, 100%, 47%);
  --accent-foreground: hsl(0, 0%, 100%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(240, 4.9%, 83.9%);
  --radius: 0.5rem;
  
  --surface: hsl(240, 10%, 8%);
  --delivered: hsl(0, 0%, 46%);
}

@layer base {
  * {
    @apply border-border;
  }
  
  html, body {
    @apply font-sans antialiased bg-surface text-foreground;
    max-width: 100vw;
    height: 100%;
    overflow-x: hidden;
  }
  
  #root {
    max-width: 100vw;
    min-height: 100%;
    overflow-x: hidden;
  }
  
  /* Éviter le débordement horizontal sur mobile */
  * {
    box-sizing: border-box;
  }
  
  /* Forcer les conteneurs à ne pas déborder */
  .container, .main-content, [data-testid*="task"] {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Forcer la cohérence des largeurs de sidebar */
  .sidebar-collapsed {
    width: 4rem !important;
    min-width: 4rem !important;
    max-width: 4rem !important;
  }
  
  .sidebar-tablet {
    width: 12rem !important;
    min-width: 12rem !important;
    max-width: 12rem !important;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 30;
  }
  
  .sidebar-expanded {
    width: 16rem !important;
    min-width: 16rem !important;
    max-width: 16rem !important;
  }
}

@layer utilities {
  .bg-surface {
    background-color: var(--surface);
  }
  
  .bg-primary {
    background-color: var(--primary);
  }
  
  /* Optimisation des ascenseurs pour les tableaux */
  .table-container {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: hsl(20, 5.9%, 80%) transparent;
  }
  
  .table-container::-webkit-scrollbar {
    height: 6px;
  }
  
  .table-container::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .table-container::-webkit-scrollbar-thumb {
    background: hsl(20, 5.9%, 80%);
    border-radius: 3px;
  }
  
  .table-container::-webkit-scrollbar-thumb:hover {
    background: hsl(20, 5.9%, 70%);
  }
  
  /* Masquer l'ascenseur horizontal sauf si nécessaire */
  .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  
  /* Solution pour masquer l'ascenseur vertical de droite */
  html, body {
    height: 100%;
    overflow: hidden !important;
  }
  
  #root {
    height: 100%;
    overflow: hidden !important;
  }
  
  .layout-container {
    height: 100vh;
    overflow: hidden !important;
  }
  
  .bg-secondary {
    background-color: var(--secondary);
  }
  
  .bg-accent {
    background-color: var(--accent);
  }
  
  .bg-delivered {
    background-color: var(--delivered);
  }
  
  .text-primary {
    color: var(--primary);
  }
  
  .text-secondary {
    color: var(--secondary);
  }
  
  .text-accent {
    color: var(--accent);
  }
  
  .text-delivered {
    color: var(--delivered);
  }
  
  .border-primary {
    border-color: var(--primary);
  }
  
  .border-secondary {
    border-color: var(--secondary);
  }
  
  .border-accent {
    border-color: var(--accent);
  }
  
  .hover\:bg-primary:hover {
    background-color: var(--primary);
  }
  
  .hover\:bg-secondary:hover {
    background-color: var(--secondary);
  }
  
  .hover\:bg-accent:hover {
    background-color: var(--accent);
  }
}

/* Supprimer le contour orange de la date du jour dans le calendrier */
button[aria-selected="true"][aria-current="date"],
button[aria-current="date"],
.rdp-day_today,
.rdp-day_selected,
[data-today="true"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  ring: 0 !important;
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
}

button[aria-selected="true"][aria-current="date"]:focus,
button[aria-current="date"]:focus,
.rdp-day_today:focus,
.rdp-day_selected:focus,
[data-today="true"]:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  ring: 0 !important;
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
}

/* Cibler spécifiquement le calendrier dans Tasks */
.rounded-md.border button[aria-current="date"],
.rounded-md.border button[data-today],
.rounded-md.border .rdp-day_today {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  ring: 0 !important;
}

/* Suppression spécifique du contour orange sur la date du jour */
.rdp button,
.rdp-day,
.rdp-day_today,
.rdp-day_selected {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Cibler spécifiquement les pseudo-éléments qui créent le contour orange */
.rdp-day_today::before,
.rdp-day_today::after,
.rdp-day_selected::before,
.rdp-day_selected::after {
  display: none !important;
}

/* Suppression de la bordure orange Tailwind */
.bg-blue-600 {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: none !important;
}

/* Cibler toutes les variantes possibles du contour orange */
button[aria-current="date"],
button[data-today="true"],
.rdp-day[aria-current="date"],
.rdp-day_today,
.rdp-button[aria-current="date"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-width: 0px !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-width: 0px !important;
}

/* Force suppression avec sélecteurs très spécifiques */
.rounded-md button[aria-current="date"],
.rounded-md .rdp-day_today,
[role="gridcell"] button[aria-current="date"] {
  border-color: transparent !important;
  outline-color: transparent !important;
}

/* Force suppression contour sur focus */
.rdp-day_today:focus-visible,
.rdp-day_today:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: none !important;
}

/* REMPLACEMENT COULEUR ORANGE PAR BLEU POUR SÉLECTION */
*:focus-visible {
  outline: 2px solid #2563eb !important; /* Bleu au lieu d'orange */
  outline-offset: 2px !important;
}

/* Couleur de sélection bleue pour le calendrier */
button[aria-current="date"]:focus,
button[aria-current="date"]:focus-visible,
.rdp-day:focus,
.rdp-day:focus-visible {
  outline: 2px solid #2563eb !important; /* Bleu comme la date du jour */
  outline-offset: 2px !important;
  border: none !important;
}

/* Variables CSS pour forcer le bleu sur tous les focus */
:root {
  --focus-color: #2563eb !important; /* Bleu */
}

/* Override focus sur tous les éléments pour utiliser le bleu */
* {
  --tw-ring-color: #2563eb !important;
}

/* Focus bleu spécifique pour les boutons du calendrier */
.rdp button:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* Style pour les weekends dans le calendrier - FOND GRIS CLAIR */
.weekend-day,
.rdp-day.weekend-day,
.rdp-button.weekend-day {
  background-color: #f3f4f6 !important; /* bg-gray-100 */
}

.dark .weekend-day,
.dark .rdp-day.weekend-day,
.dark .rdp-button.weekend-day {
  background-color: #1f2937 !important; /* bg-gray-800 */
}

/* Forcer le style weekend sur tous les samedis et dimanches */
[data-day-weekend="true"],
button[data-day-weekend="true"],
.rdp-day[data-day-weekend="true"] {
  background-color: #f3f4f6 !important;
}

.dark [data-day-weekend="true"],
.dark button[data-day-weekend="true"],
.dark .rdp-day[data-day-weekend="true"] {
  background-color: #1f2937 !important;
}

/* Nouvelles couleurs pour le calendrier moderne */
.bg-gray-25 {
  background-color: #fafafa;
}

.bg-slate-25 {
  background-color: #f8fafc;
}

.hover\:from-gray-25:hover {
  --tw-gradient-from: #fafafa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-slate-25:hover {
  --tw-gradient-to: #f8fafc var(--tw-gradient-to-position);
}

.hover\:from-slate-50:hover {
  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-gray-50:hover {
  --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
}

/* Couleur grise personnalisée pour les jours hors mois */
.bg-gray-150 {
  background-color: #f1f3f4;
}

/* Styles pour le mode téléphone */
.phone-mode {
  /* Classe principale pour le mode téléphone */
}

/* Safe area pour la bottom navigation */
.safe-area-pb {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Optimisations pour le mode téléphone */
.layout-container.phone-mode {
  /* Assurer que le layout prend toute la hauteur */
  height: 100vh;
  overflow: hidden;
}

.phone-mode main {
  /* Optimisation pour le scroll sur téléphone */
  overflow-x: hidden;
}

.phone-mode .main-content {
  /* Padding bottom pour éviter que le contenu soit caché par la bottom nav */
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Animation de transition pour le basculement de mode */
.layout-container {
  transition: all 0.3s ease-in-out;
}

/* Styles spécifiques pour la bottom navigation */
.bottom-nav {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
}

/* Dark mode pour la bottom navigation */
.dark .bottom-nav {
  background-color: rgba(26, 26, 26, 0.95);
}

/* Optimisation des cartes pour le mode téléphone */
.phone-mode .card {
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Optimisation des boutons pour le mode téléphone */
.phone-mode button {
  min-height: 48px;
}

/* Style pour les éléments interactifs en mode téléphone */
.phone-mode .interactive-element {
  min-height: 48px;
  min-width: 48px;
  padding: 12px;
}

/* Adaptation des formulaires pour téléphone */
.phone-mode .form-container {
  padding: 16px;
  max-width: 100%;
}

.phone-mode input, 
.phone-mode select, 
.phone-mode textarea {
  min-height: 48px;
  font-size: 16px; /* Évite le zoom automatique sur iOS */
}

/* Optimisation des modals pour téléphone */
.phone-mode .modal-content {
  margin: 8px;
  max-height: calc(100vh - 16px);
  border-radius: 16px;
}

/* Style pour les alertes en mode téléphone */
.phone-mode .alert {
  margin: 8px;
  border-radius: 12px;
  padding: 16px;
}