/* ========================================
   FIX LAYOUT - Corrections Largeur & Thème
   ======================================== */

/* Variables pour le thème sombre par défaut */
:root {
  --dashboard-bg: #0f172a;
  --dashboard-card: #1e293b;
  --dashboard-card-hover: #334155;
  --dashboard-text: #f1f5f9;
  --dashboard-text-muted: #94a3b8;
  --dashboard-primary: #3b82f6;
  --dashboard-primary-hover: #2563eb;
  --dashboard-accent: #8b5cf6;
  --dashboard-success: #10b981;
  --dashboard-danger: #ef4444;
  --dashboard-warning: #f59e0b;
}

/* Mode sombre par défaut */
body {
  background: var(--dashboard-bg) !important;
  color: var(--dashboard-text) !important;
}

/* Mode clair */
.light-mode {
  --dashboard-bg: #f8fafc;
  --dashboard-card: #ffffff;
  --dashboard-card-hover: #f1f5f9;
  --dashboard-text: #1e293b;
  --dashboard-text-muted: #64748b;
  --dashboard-primary: #3b82f6;
  --dashboard-primary-hover: #2563eb;
  --dashboard-accent: #8b5cf6;
  --dashboard-success: #10b981;
  --dashboard-danger: #ef4444;
  --dashboard-warning: #f59e0b;
}

.light-mode body {
  background: var(--dashboard-bg) !important;
  color: var(--dashboard-text) !important;
}

/* Dashboard - Pleine largeur */
.playlist-container {
  width: 100% !important;
  max-width: none !important;
  padding: 90px 10px 40px !important;
}

.dashboard-wrapper {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Grille de playlists - Pleine largeur */
.playlists-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  padding: 0 10px !important;
}

/* Header dashboard - Pleine largeur */
.dashboard-header {
  width: 100% !important;
  padding: 0 10px !important;
}

/* Stats cards - Pleine largeur */
.dashboard-stats {
  width: 100% !important;
  padding: 0 10px !important;
}

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Search bar - Pleine largeur */
.search-filter-bar {
  width: 100% !important;
  padding: 0 10px !important;
}

/* Add playlist section - Pleine largeur */
.add-playlist-section {
  width: 100% !important;
  padding: 20px 10px !important;
}

/* Auth container - Centré mais largeur limitée */
.auth-container {
  max-width: 450px !important;
  width: 100% !important;
  margin: 40px auto !important;
  padding: 40px 20px !important;
}

/* Landing pages - Largeur optimisée */
.hero-container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 10px !important;
}

.section-container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 10px !important;
}

.contact-content {
  max-width: 800px !important;
  width: 100% !important;
  margin: -40px auto 80px !important;
  padding: 60px 40px !important;
}

.faq-container {
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 60px 20px !important;
}

/* Features et pricing grids - Largeur optimisée */
.features-grid {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 10px !important;
}

  .pricing-grid {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
  }

/* Mode clair - Auth container */
.light-mode .auth-container {
  background: white !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.light-mode .auth-container input {
  background: white !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

/* Mode sombre - Auth container */
.dark-mode .auth-container {
  background: #1e293b !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .auth-container input {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

/* Mode clair - Formulaires */
.light-mode .form-group input,
.light-mode .form-group textarea {
  background: white !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

.light-mode .form-group input:focus,
.light-mode .form-group textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Mode sombre - Formulaires */
.dark-mode .form-group input,
.dark-mode .form-group textarea {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.dark-mode .form-group input::placeholder,
.dark-mode .form-group textarea::placeholder {
  color: #94a3b8 !important;
}

/* Mode clair - Boutons */
.light-mode .btn,
.light-mode .btn-primary {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

.light-mode .btn:hover,
.light-mode .btn-primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

/* Mode sombre - Boutons */
.dark-mode .btn,
.dark-mode .btn-primary {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

.dark-mode .btn:hover,
.dark-mode .btn-primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Mode clair - Contact Info */
.light-mode .contact-info {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

.light-mode .info-card {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Mode sombre - Contact Info */
.dark-mode .contact-info {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

.dark-mode .info-card {
  background: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  border-color: #475569 !important;
}

/* Mode clair - Landing pages */
.light-mode .hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.light-mode .features {
  background: #ffffff !important;
}

.light-mode .feature-card {
  background: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.light-mode .pricing {
  background: #f8fafc !important;
}

.light-mode .pricing-card {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Mode sombre - Landing pages */
.dark-mode .hero {
  background: linear-gradient(135deg, #391d45 0%, #10111e 100%) !important;
}

.dark-mode .features {
  background: #0f172a !important;
}

.dark-mode .feature-card {
  background: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .pricing {
  background: #0f172a !important;
}

.dark-mode .pricing-card {
  background: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Contact et Support - Mode clair */
.light-mode .contact-content,
.light-mode .faq-container {
  background: white !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

.light-mode .faq-item {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Contact et Support - Mode sombre */
.dark-mode .contact-content,
.dark-mode .faq-container {
  background: #1e293b !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .faq-item {
  background: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Transitions fluides pour tous les éléments */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .playlist-container {
    padding: 90px 5px 40px !important;
  }
  
  .playlists-grid {
    grid-template-columns: 1fr !important;
    padding: 0 5px !important;
  }
  
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  .hero-container,
  .section-container,
  .contact-content,
  .faq-container {
    padding: 0 5px !important;
  }
}

/* Responsive - Tablette */
@media (min-width: 769px) and (max-width: 1024px) {
  .playlists-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
}

/* Responsive - Desktop */
@media (min-width: 1025px) {
  .playlists-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  }
}

/* Responsive - Large Desktop */
@media (min-width: 1440px) {
  .playlists-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  }
}

/* Responsive - Ultra Large */
@media (min-width: 1920px) {
  .playlists-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
  }
}

/* Icône YAPlayer */
.nav-logo-icon {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  margin-right: 8px !important;
}