/**
 * CallMeBack Themes
 * Styles pour les thèmes light et dark avec glassmorphism
 * Version: 1.0.0
 */

/* ========================================
   NAVBAR GLASSMORPHISM
   ======================================== */

.navbar-glass {
  /* Rendre la barre totalement opaque pour éviter de voir le contenu derrière */
  background: var(--color-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-base);
  z-index: 1050; /* Au-dessus du contenu et de l'overlay mobile */
}

.theme-dark .navbar-glass {
  /* Idem en thème sombre: opaque, pas de verre */
  background: var(--color-surface) !important;
  border-bottom-color: var(--color-border);
  box-shadow: var(--glass-shadow-dark);
}

.navbar-glass .navbar-brand {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  transition: all var(--transition-base);
}

.navbar-glass .navbar-brand:hover {
  color: var(--color-primary) !important;
  transform: scale(1.05);
}

.navbar-glass .nav-link {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-lg);
  transition: color var(--transition-base), background-color var(--transition-base), transform var(--transition-base);
  position: relative;
}

.navbar-glass .nav-link:hover {
  color: var(--color-primary) !important;
  background: rgba(0, 102, 255, 0.1);
  transform: translateY(-1px);
}

.navbar-glass .nav-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.navbar-glass .dropdown-menu {
  background: rgba(30, 30, 40, 0.98) !important; /* Fond opaque sombre */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  margin-top: var(--space-2);
  color: #ffffff !important;
}

.theme-dark .navbar-glass .dropdown-menu {
  background: rgba(20, 20, 30, 0.98) !important; /* Fond encore plus sombre pour dark */
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--glass-shadow-dark);
}

.navbar-glass .dropdown-item {
  color: #ffffff !important; /* Texte blanc */
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-1);
  transition: all var(--transition-base);
}

.navbar-glass .dropdown-item:hover {
  background: rgba(79, 70, 229, 0.3) !important; /* Violet au survol */
  color: #ffffff !important;
  transform: translateX(4px);
}

.navbar-glass .dropdown-item:focus {
  outline: 2px solid rgba(79, 70, 229, 0.5);
  outline-offset: 2px;
}

.navbar-glass .dropdown-header {
  color: rgba(255, 255, 255, 0.8) !important;
}

.navbar-glass .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1) !important;
  margin: var(--space-2) 0;
}

/* ========================================
   SIDEBAR GLASSMORPHISM
   ======================================== */

.sidebar-glass {
  background: var(--glass-background);
  backdrop-filter: blur(var(--glass-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-base);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Masquer la scrollbar mais permettre le scroll si nécessaire */
.sidebar-glass::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.sidebar-glass {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.theme-dark .sidebar-glass {
  background: var(--glass-background-dark);
  border-right-color: var(--glass-border-dark);
  box-shadow: var(--glass-shadow-dark);
}

.sidebar-glass h5,
.sidebar-glass .sidebar-main-title {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  margin-bottom: 1rem;
  margin-top: 0;
  /* Padding-top réduit car le sidebar commence déjà à top: 56px (sous la navbar) */
  padding: 1.5rem 1.25rem 0; /* Espacement normal pour le titre */
  letter-spacing: 0.02em;
}

.sidebar-glass h6,
.sidebar-glass .sidebar-section-title {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 2rem 0 1rem 0;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary-50);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-left: 0;
  margin-right: 0.5rem;
  position: relative;
}

.sidebar-glass h6::before,
.sidebar-glass .sidebar-section-title::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
}

.theme-dark .sidebar-glass h6,
.theme-dark .sidebar-glass .sidebar-section-title {
  background: var(--color-gray-800);
  color: var(--color-text);
  border-left-color: var(--color-primary-400);
}

.sidebar-glass .nav-link {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  transition: color var(--transition-base), background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar-glass .nav-link:hover {
  background: rgba(79, 70, 229, 0.1);
  color: var(--color-primary) !important;
  transform: translateX(6px);
  box-shadow: var(--shadow-sm);
}

.sidebar-glass .nav-link.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-inverse) !important;
  box-shadow: var(--shadow-primary);
  transform: translateX(8px);
}

.sidebar-glass .nav-link.active::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 28px;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}

.sidebar-glass .nav-link i {
  font-size: var(--font-size-lg);
  width: 20px;
  text-align: center;
  margin-right: var(--space-3);
  transition: all var(--transition-base);
}

.sidebar-glass .nav-link:hover i {
  transform: scale(1.15);
}

.sidebar-glass .nav-link.active i {
  transform: scale(1.15);
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

/* ========================================
   FOOTER GLASSMORPHISM
   ======================================== */

.footer-glass {
  /* Harmonisé avec la navbar : opaque pour cohérence visuelle */
  background: var(--color-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  transition: all var(--transition-base);
}

.theme-dark .footer-glass {
  /* Idem en thème sombre: opaque, pas de verre */
  background: var(--color-surface) !important;
  border-top-color: var(--color-border);
  box-shadow: var(--shadow-lg);
}

.footer-glass .text-muted {
  color: var(--color-text-muted) !important;
  transition: color var(--transition-base);
}

/* ========================================
   CONTENU PRINCIPAL
   ======================================== */

.main-content {
  background: var(--color-background);
  min-height: calc(100vh - 56px);
  transition: all var(--transition-base);
  position: relative;
}

.theme-dark .main-content {
  background: var(--color-background);
  transition: background-color var(--transition-base);
}

/* ========================================
   HEADERS DE PAGES
   ======================================== */

.page-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-inverse);
  padding: var(--space-8) 0;
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.page-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.page-header p {
  font-size: var(--font-size-lg);
  opacity: 0.9;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* ========================================
   CARTES DE DASHBOARD
   ======================================== */

.dashboard-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-inverse);
  padding: var(--space-8) 0;
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}

.dashboard-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.dashboard-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.dashboard-header p {
  font-size: var(--font-size-lg);
  opacity: 0.9;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* ========================================
   BADGES ET TAGS
   ======================================== */

.badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition-base);
}

.badge.bg-primary {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse);
}

.badge.bg-success {
  background: var(--color-success) !important;
  color: var(--color-text-inverse);
}

.badge.bg-warning {
  background: var(--color-warning) !important;
  color: var(--color-text-inverse);
}

.badge.bg-danger {
  background: var(--color-danger) !important;
  color: var(--color-text-inverse);
}

.badge.bg-info {
  background: var(--color-info) !important;
  color: var(--color-text-inverse);
}

.badge.bg-secondary {
  background: var(--color-secondary) !important;
  color: var(--color-text-inverse);
}

/* ========================================
   ALERTES
   ======================================== */

.alert {
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  font-weight: var(--font-weight-medium);
  position: relative;
  overflow: hidden;
}

.alert::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.alert-success {
  background: var(--color-success-50);
  color: var(--color-success-700);
  border-left: 4px solid var(--color-success);
}

.theme-dark .alert-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success-100);
}

.alert-danger {
  background: var(--color-danger-50);
  color: var(--color-danger-700);
  border-left: 4px solid var(--color-danger);
}

.theme-dark .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger-100);
}

.alert-warning {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
  border-left: 4px solid var(--color-warning);
}

.theme-dark .alert-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning-100);
}

.alert-info {
  background: var(--color-info-50);
  color: var(--color-info-800);
  border-left: 4px solid var(--color-info);
}

.theme-dark .alert-info {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-info-200);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .navbar-glass .navbar-brand {
    font-size: var(--font-size-lg);
  }
  
  .page-header h1 {
    font-size: var(--font-size-3xl);
  }
  
  .dashboard-header h1 {
    font-size: var(--font-size-3xl);
  }
  
  .sidebar-glass .nav-link {
    padding: var(--space-4);
  }
  
  .sidebar-glass .nav-link:hover {
    transform: none;
  }
}

/* ========================================
   ANIMATIONS D'ENTRÉE
   ======================================== */

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.navbar-glass {
  animation: slideInDown var(--transition-slow) ease-out;
}

.sidebar-glass {
  animation: slideInLeft var(--transition-slow) ease-out;
}

.footer-glass {
  animation: slideInUp var(--transition-slow) ease-out;
}

.main-content {
  animation: fadeIn var(--transition-slow) ease-out;
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

.navbar-glass .nav-link:focus-visible,
.sidebar-glass .nav-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Mode contraste élevé */
@media (prefers-contrast: high) {
  .navbar-glass,
  .sidebar-glass,
  .footer-glass {
    background: var(--color-surface-elevated);
    border: 2px solid var(--color-border);
  }
  
  .theme-dark .navbar-glass,
  .theme-dark .sidebar-glass,
  .theme-dark .footer-glass {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
}