/**
 * Thème dédié au ConfiguratorPanel
 * Ce thème s'applique uniquement à la zone de configuration visible par les clients
 * (Sidebar blanche + Viewer 3D)
 * Sépare complètement du thème stepn-theme.css qui est pour l'interface admin
 * 
 * IMPORTANT: Ce fichier DOIT être chargé APRÈS stepn-theme.css dans layout.tsx
 * Utilise !important partout pour surcharger les sélecteurs généraux stepn qui ont aussi !important
 * 
 * Cette version utilise une approche plus agressive avec des réinitialisations complètes
 * 
 * TEST: Si ce fichier est chargé, vous devriez voir cette règle dans les DevTools
 */
/* TEST MARKER - CONFIGURATOR PANEL THEME IS LOADED */

/* ============================================
   CONFIGURATOR PANEL - Container principal
   ============================================ */
.configurator-panel {
  /* Styles de base pour le container */
}

/* ============================================
   RÉINITIALISATION COMPLÈTE EN PREMIER
   Surcharge TOUS les styles stepn avant d'appliquer notre thème
   IMPORTANT: all: unset dans stepn-theme.css a déjà réinitialisé, on réapplique maintenant
   ============================================ */
/* Surcharge seulement les propriétés typographiques problématiques de stepn-theme */
/* NE PAS toucher aux autres styles pour ne pas casser le layout existant */
.configurator-panel {
  /* Typographie de base pour le container - Inter (style Tailwind) */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: #111827 !important;
}

/* Surcharge seulement les éléments texte qui ont des problèmes avec stepn-theme */
.configurator-panel p,
.configurator-panel span,
.configurator-panel div,
.configurator-panel label,
.configurator-panel * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
}

/* Règle très agressive pour forcer Inter sur TOUS les éléments, même avec styles inline */
.configurator-panel *[style*="fontFamily"],
.configurator-panel *[style*="font-family"],
.configurator-panel *[style*="FontFamily"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ============================================
   VARIABLES CSS - Configuration du thème
   ============================================ */
.configurator-panel {
  /* Couleurs principales - Style Tailwind CSS moderne */
  --config-panel-bg: #ffffff;
  --config-panel-sidebar-bg: #ffffff;
  --config-panel-sidebar-border: #e5e7eb;
  --config-panel-viewer-bg: #f9fafb;
  --config-panel-text-primary: #111827;
  --config-panel-text-secondary: #6b7280;
  --config-panel-accent: #3b82f6;
  --config-panel-accent-hover: #2563eb;
  --config-panel-border: #e5e7eb;
  
  /* Inputs - Style Tailwind moderne */
  --config-panel-input-bg: #ffffff;
  --config-panel-input-border: #d1d5db;
  --config-panel-input-border-focus: #3b82f6;
  
  /* Boutons - Style Tailwind moderne avec ombres douces */
  --config-panel-button-primary-bg: #3b82f6;
  --config-panel-button-primary-text: #ffffff;
  --config-panel-button-primary-hover: #2563eb;
  --config-panel-button-secondary-bg: #ffffff;
  --config-panel-button-secondary-text: #374151;
  --config-panel-button-secondary-border: #d1d5db;
  --config-panel-button-secondary-hover: #f9fafb;
  
  /* Typographie - Style Tailwind CSS moderne (Inter) */
  --config-panel-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --config-panel-font-size-base: 14px;
  --config-panel-font-size-sm: 12px;
  --config-panel-font-size-lg: 16px;
  --config-panel-font-size-xl: 18px;
  --config-panel-font-size-2xl: 20px;
  
  /* Espacements */
  --config-panel-spacing-xs: 4px;
  --config-panel-spacing-sm: 8px;
  --config-panel-spacing-md: 16px;
  --config-panel-spacing-lg: 24px;
  --config-panel-spacing-xl: 32px;
  
  /* Ombres - Style Tailwind moderne (ombres plus douces) */
  --config-panel-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --config-panel-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --config-panel-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  --config-panel-shadow-button: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  
  /* Border radius - Style Tailwind moderne (plus arrondi) */
  --config-panel-radius-sm: 6px;
  --config-panel-radius-md: 10px;
  --config-panel-radius-lg: 16px;
  
  /* Transitions */
  --config-panel-transition: all 0.2s ease-in-out;
  
  /* Styles de base */
  background-color: var(--config-panel-bg) !important;
  color: var(--config-panel-text-primary) !important;
}

/* ============================================
   TITRES - Surcharge stepn-theme.css lignes 96-125
   Surcharge aussi les styles inline avec fontFamily: 'var(--stepn-font-body)'
   ============================================ */
.configurator-panel h1,
.configurator-panel h2,
.configurator-panel h3,
.configurator-panel h4,
.configurator-panel h5,
.configurator-panel h6,
/* Surcharge aussi les titres avec styles inline stepn-font-body */
.configurator-panel h1[style*="fontFamily"],
.configurator-panel h2[style*="fontFamily"],
.configurator-panel h3[style*="fontFamily"],
.configurator-panel h4[style*="fontFamily"],
.configurator-panel h5[style*="fontFamily"],
.configurator-panel h6[style*="fontFamily"] {
  font-family: var(--config-panel-font-family) !important;
  color: var(--config-panel-text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-fill-color: var(--config-panel-text-primary) !important;
  -webkit-text-stroke-width: 0 !important;
  margin: 0 !important;
}

/* ============================================
   TEXTES - Surcharge stepn-theme.css ligne 127
   ============================================ */
.configurator-panel p,
.configurator-panel span,
.configurator-panel label,
.configurator-panel a,
.configurator-panel div,
.configurator-panel li,
.configurator-panel ul,
.configurator-panel ol {
  font-family: var(--config-panel-font-family) !important;
  color: var(--config-panel-text-primary) !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-fill-color: var(--config-panel-text-primary) !important;
}

/* Textes secondaires */
.configurator-panel .text-secondary,
.configurator-panel .text-gray-500,
.configurator-panel .text-gray-600,
.configurator-panel [class*="text-gray"] {
  color: var(--config-panel-text-secondary) !important;
}

/* ============================================
   INPUTS - Surcharge stepn-theme.css lignes 138-179
   ============================================ */
.configurator-panel input,
.configurator-panel input[type="text"],
.configurator-panel input[type="email"],
.configurator-panel input[type="password"],
.configurator-panel input[type="number"],
.configurator-panel input[type="search"],
.configurator-panel textarea,
.configurator-panel select {
  font-family: var(--config-panel-font-family) !important;
  background-color: var(--config-panel-input-bg) !important;
  border: 1px solid var(--config-panel-input-border) !important;
  color: var(--config-panel-text-primary) !important;
  font-size: var(--config-panel-font-size-base) !important;
  padding: var(--config-panel-spacing-sm) var(--config-panel-spacing-md) !important;
  border-radius: var(--config-panel-radius-md) !important;
  transition: var(--config-panel-transition) !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-fill-color: var(--config-panel-text-primary) !important;
  -webkit-opacity: 1 !important;
  -webkit-box-shadow: none !important;
}

.configurator-panel input:focus,
.configurator-panel input:active,
.configurator-panel textarea:focus,
.configurator-panel textarea:active,
.configurator-panel select:focus,
.configurator-panel select:active {
  outline: none !important;
  border-color: var(--config-panel-input-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background-color: var(--config-panel-input-bg) !important;
  color: var(--config-panel-text-primary) !important;
}

.configurator-panel input::placeholder,
.configurator-panel textarea::placeholder {
  color: var(--config-panel-text-secondary) !important;
  opacity: 1 !important;
}

.configurator-panel input:-webkit-autofill,
.configurator-panel textarea:-webkit-autofill,
.configurator-panel select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--config-panel-input-bg) inset !important;
  -webkit-text-fill-color: var(--config-panel-text-primary) !important;
  color: var(--config-panel-text-primary) !important;
  background-color: var(--config-panel-input-bg) !important;
}

/* ============================================
   BOUTONS - Style Tailwind moderne avec ombres et transitions
   ============================================ */
.configurator-panel button {
  /* Typographie */
  font-family: var(--config-panel-font-family) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  /* Style Tailwind moderne */
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
}

/* Règle très agressive pour forcer le style bleu sur tous les boutons avec fond noir */
/* Cibler tous les boutons qui pourraient avoir un fond noir via styles inline */
.configurator-panel button {
  /* Si le bouton a un fond noir (détecté via la couleur du texte blanc ou autres indices),
     forcer le style bleu moderne */
}

/* Cibler spécifiquement les boutons avec texte blanc (généralement boutons primaires noirs) */
.configurator-panel button[style*="color: #ffffff"],
.configurator-panel button[style*="color:#ffffff"],
.configurator-panel button[style*="color: '#ffffff'"],
.configurator-panel button[style*="color:'#ffffff'"] {
  /* Si c'est un bouton avec texte blanc, c'est probablement un bouton primaire */
  background-color: var(--config-panel-button-primary-bg) !important;
  border-radius: var(--config-panel-radius-md) !important;
  box-shadow: var(--config-panel-shadow-button) !important;
}

/* Boutons primaires - Style Tailwind bleu moderne */
/* Cibler les boutons avec classes, styles inline, ou attributs */
.configurator-panel button.bg-black,
.configurator-panel .btn-primary,
.configurator-panel button[class*="bg-black"],
/* Cibler les boutons avec backgroundColor: '#000000' en style inline */
.configurator-panel button[style*="backgroundColor: '#000000'"],
.configurator-panel button[style*="backgroundColor: '#000'"],
.configurator-panel button[style*="background-color: #000000"],
.configurator-panel button[style*="background-color: #000"],
.configurator-panel button[style*="background-color:#000000"],
.configurator-panel button[style*="background-color:#000"] {
  background-color: var(--config-panel-button-primary-bg) !important;
  color: var(--config-panel-button-primary-text) !important;
  border-radius: var(--config-panel-radius-md) !important;
  box-shadow: var(--config-panel-shadow-button) !important;
  border: none !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
}

.configurator-panel button.bg-black:hover,
.configurator-panel .btn-primary:hover,
.configurator-panel button[class*="bg-black"]:hover,
.configurator-panel button[style*="backgroundColor: '#000000'"]:hover,
.configurator-panel button[style*="backgroundColor: '#000'"]:hover,
.configurator-panel button[style*="background-color: #000000"]:hover,
.configurator-panel button[style*="background-color: #000"]:hover {
  background-color: var(--config-panel-button-primary-hover) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

/* Boutons secondaires - Style Tailwind moderne */
.configurator-panel button.bg-white,
.configurator-panel .btn-secondary,
.configurator-panel button[class*="bg-white"] {
  background-color: var(--config-panel-button-secondary-bg) !important;
  color: var(--config-panel-button-secondary-text) !important;
  border: 1px solid var(--config-panel-button-secondary-border) !important;
  border-radius: var(--config-panel-radius-md) !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
}

.configurator-panel button.bg-white:hover,
.configurator-panel .btn-secondary:hover,
.configurator-panel button[class*="bg-white"]:hover {
  background-color: var(--config-panel-button-secondary-hover) !important;
  border-color: #9ca3af !important;
}

/* ============================================
   LIENS - Surcharge stepn-theme.css lignes 208-216
   ============================================ */
.configurator-panel a {
  font-family: var(--config-panel-font-family) !important;
  color: var(--config-panel-text-primary) !important;
  text-decoration: none !important;
  transition: var(--config-panel-transition) !important;
  cursor: pointer !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.configurator-panel a:hover {
  opacity: 1 !important;
  color: var(--config-panel-accent-hover) !important;
}

/* ============================================
   COMPOSANTS SPÉCIFIQUES
   ============================================ */

/* Sidebar blanche */
.configurator-panel .sidebar-white {
  background-color: var(--config-panel-sidebar-bg) !important;
  border-right: 1px solid var(--config-panel-sidebar-border) !important;
  color: var(--config-panel-text-primary) !important;
}

/* Viewer 3D */
.configurator-panel .viewer-3d {
  background-color: var(--config-panel-viewer-bg) !important;
  background: linear-gradient(to bottom, #f8fafc, #e2e8f0) !important;
}

/* ============================================
   MODAUX - Les modaux peuvent être rendus en dehors de .configurator-panel
   IMPORTANT: Ces règles s'appliquent même si les modaux sont en dehors de .configurator-panel
   Utiliser directement la valeur de la police car les variables CSS ne sont pas disponibles en dehors de .configurator-panel
   ============================================ */
.configurator-panel-modal,
.configurator-panel-modal-overlay {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Tous les éléments dans les modaux - règles très agressives pour surcharger stepn-theme */
.configurator-panel-modal *,
.configurator-panel-modal-overlay * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.configurator-panel-modal h1,
.configurator-panel-modal h2,
.configurator-panel-modal h3,
.configurator-panel-modal h4,
.configurator-panel-modal h5,
.configurator-panel-modal h6,
/* Surcharge aussi les titres avec styles inline */
.configurator-panel-modal h1[style*="fontFamily"],
.configurator-panel-modal h2[style*="fontFamily"],
.configurator-panel-modal h3[style*="fontFamily"],
.configurator-panel-modal h4[style*="fontFamily"],
.configurator-panel-modal h5[style*="fontFamily"],
.configurator-panel-modal h6[style*="fontFamily"],
.configurator-panel-modal h1[style*="font-family"],
.configurator-panel-modal h2[style*="font-family"],
.configurator-panel-modal h3[style*="font-family"],
.configurator-panel-modal h4[style*="font-family"],
.configurator-panel-modal h5[style*="font-family"],
.configurator-panel-modal h6[style*="font-family"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: #111827 !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #111827 !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
}

.configurator-panel-modal p,
.configurator-panel-modal span,
.configurator-panel-modal div,
.configurator-panel-modal label,
.configurator-panel-modal button,
/* Surcharge aussi les éléments avec styles inline stepn-font-body */
.configurator-panel-modal p[style*="fontFamily"],
.configurator-panel-modal span[style*="fontFamily"],
.configurator-panel-modal div[style*="fontFamily"],
.configurator-panel-modal label[style*="fontFamily"],
.configurator-panel-modal button[style*="fontFamily"],
.configurator-panel-modal p[style*="font-family"],
.configurator-panel-modal span[style*="font-family"],
.configurator-panel-modal div[style*="font-family"],
.configurator-panel-modal label[style*="font-family"],
.configurator-panel-modal button[style*="font-family"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
}

/* ============================================
   Surcharge globale pour tous les éléments avec fontFamily stepn dans configurator-panel
   ============================================ */
.configurator-panel [style*="fontFamily"],
.configurator-panel [style*="font-family"] {
  /* Surcharge les styles inline qui utilisent var(--stepn-font-body) */
  font-family: var(--config-panel-font-family) !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-text-stroke-width: 0 !important;
}

/* ============================================
   MODAUX ZONE SELECTION - Ces modaux utilisent une classe différente
   ============================================ */
.zone-selection-modal-content,
.zone-selection-modal-content * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.zone-selection-modal-content h1,
.zone-selection-modal-content h2,
.zone-selection-modal-content h3,
.zone-selection-modal-content h4,
.zone-selection-modal-content h5,
.zone-selection-modal-content h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: #111827 !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #111827 !important;
  -webkit-text-stroke-width: 0 !important;
}

/* Cards et conteneurs */
.configurator-panel .card,
.configurator-panel .bg-white,
.configurator-panel [class*="bg-white"] {
  background-color: var(--config-panel-sidebar-bg) !important;
}

.configurator-panel .card {
  border: 1px solid var(--config-panel-border) !important;
  border-radius: var(--config-panel-radius-lg) !important;
  box-shadow: var(--config-panel-shadow-sm) !important;
}

/* Onglets/Tabs */
.configurator-panel .tab,
.configurator-panel [class*="tab"] {
  color: var(--config-panel-text-secondary) !important;
  transition: var(--config-panel-transition) !important;
  font-family: var(--config-panel-font-family) !important;
}

.configurator-panel .tab:hover,
.configurator-panel [class*="tab"]:hover {
  color: var(--config-panel-text-primary) !important;
}

.configurator-panel .tab-active,
.configurator-panel [class*="tab-active"] {
  color: var(--config-panel-text-primary) !important;
  font-weight: 600 !important;
}

/* Bordures */
.configurator-panel .border-gray-200,
.configurator-panel .border-gray-300,
.configurator-panel [class*="border-gray"] {
  border-color: var(--config-panel-border) !important;
}

/* Scrollbar personnalisée */
.configurator-panel ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.configurator-panel ::-webkit-scrollbar-track {
  background: var(--config-panel-viewer-bg) !important;
}

.configurator-panel ::-webkit-scrollbar-thumb {
  background: var(--config-panel-text-secondary) !important;
  border-radius: 4px !important;
}

.configurator-panel ::-webkit-scrollbar-thumb:hover {
  background: var(--config-panel-text-primary) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .configurator-panel {
    --config-panel-font-size-base: 14px;
    --config-panel-spacing-md: 12px;
    --config-panel-spacing-lg: 20px;
  }
}