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

/* Ne PAS réserver de hauteur sur les îlots vides : des composants « gate » (return null,
   ex. PublicPageVisitorChatGate, GlobalAppNavBarGate sans token) laissaient 200px × N de
   fond body clair = bande blanche énorme sous le header fixe. */
astro-island:empty {
  display: none;
}

/* Empêcher spécifiquement les fonts web de décaler la mise en page (CLS). */
@font-face {
  font-family: 'Poppins-fallback';
  size-adjust: 112%;
  src: local('Arial');
}
@font-face {
  font-family: 'Inter-fallback';
  size-adjust: 107%;
  src: local('Arial');
}

:root {
  --color-primary: 91 126 250; /* #5B7EFA */
  --color-secondary: 108 116 247; /* #6C74F7 */
  --color-light: 236 238 240; /* #ECEEF0 */
  --color-background: 249 250 251;
  --color-text: 31 41 55;
  --sidebar-width: 16rem; /* 256px */
  --sidebar-width-collapsed: 4rem; /* 64px */
}

body {
  background-color: rgb(249, 250, 251);
  color: rgb(31, 41, 55);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow-x: hidden; /* Empêcher le débordement horizontal */
}

/* Solution améliorée pour le responsive */
@media (min-width: 768px) {
  /* État par défaut - menu ouvert */
  body[data-sidebar-collapsed="false"] > div:not(#app-sidebar):not(#toast-container),
  body[data-sidebar-collapsed="false"] > main, 
  body[data-sidebar-collapsed="false"] [class*="dashboard-container"], 
  body[data-sidebar-collapsed="false"] [class*="content-container"],
  body[data-sidebar-collapsed="false"] [class*="app-container"],
  body[data-sidebar-collapsed="false"] #script-editor-container,
  body[data-sidebar-collapsed="false"] #list-stats-container,
  body[data-sidebar-collapsed="false"] #campaign-stats-container,
  body[data-sidebar-collapsed="false"] #callbacks-container {
    margin-left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
  }
  
  /* État réduit - menu replié */
  body[data-sidebar-collapsed="true"] > div:not(#app-sidebar):not(#toast-container),
  body[data-sidebar-collapsed="true"] > main, 
  body[data-sidebar-collapsed="true"] [class*="dashboard-container"], 
  body[data-sidebar-collapsed="true"] [class*="content-container"],
  body[data-sidebar-collapsed="true"] [class*="app-container"],
  body[data-sidebar-collapsed="true"] #script-editor-container,
  body[data-sidebar-collapsed="true"] #list-stats-container,
  body[data-sidebar-collapsed="true"] #campaign-stats-container,
  body[data-sidebar-collapsed="true"] #callbacks-container {
    margin-left: var(--sidebar-width-collapsed) !important;
    width: calc(100% - var(--sidebar-width-collapsed)) !important;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
  }
}

/* Style pour les appareils mobiles */
@media (max-width: 767px) {
  body > div:not(#app-sidebar):not(#toast-container),
  body > main, 
  [class*="dashboard-container"], 
  [class*="content-container"],
  [class*="app-container"],
  #script-editor-container,
  #list-stats-container,
  #campaign-stats-container,
  #callbacks-container {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* Lorsque le menu mobile est ouvert */
  body #app-sidebar.mobile-open {
    transform: translateX(0) !important;
  }
}

/* Correction pour les icônes SVG dans la sidebar (fusionné depuis svg-fix.css : un seul fichier = moins de requêtes bloquantes) */
svg {
  color: #9ca3af !important;
}

.bg-red-700 svg {
  color: white !important;
}