/* ========================================
   ADN - CSS OPTIMISÉ POUR PERFORMANCE
   ======================================== */

/* ===== VARIABLES CSS CUSTOM (PRIORITÉ 1) ===== */
:root {
  /* Thème clair (défaut) */
  --adn-base-100: oklch(100% 0 0);
  --adn-base-200: oklch(93% 0 0);
  --adn-base-300: oklch(86% 0 0);
  --adn-base-content: oklch(35.519% 0.032 262.988);
  --adn-primary: oklch(76.662% 0.135 153.45);
  --adn-primary-content: oklch(33.387% 0.04 162.24);
  --adn-secondary: oklch(61.302% 0.202 261.294);
  --adn-secondary-content: oklch(100% 0 0);
  --adn-accent: oklch(72.772% 0.149 33.2);
  --adn-accent-content: oklch(0% 0 0);
  --adn-neutral: oklch(35.519% 0.032 262.988);
  --adn-neutral-content: oklch(98.462% 0.001 247.838);
  --adn-info: oklch(72.06% 0.191 231.6);
  --adn-info-content: oklch(0% 0 0);
  --adn-success: oklch(64.8% 0.15 160);
  --adn-success-content: oklch(0% 0 0);
  --adn-warning: oklch(84.71% 0.199 83.87);
  --adn-warning-content: oklch(0% 0 0);
  --adn-error: oklch(71.76% 0.221 22.18);
  --adn-error-content: oklch(0% 0 0);
  --adn-radius: 1rem;
  --adn-radius-field: 0.5rem;
  --adn-border: 1px;
}

[data-theme="dark"] {
  --adn-base-100: oklch(20.84% 0.008 17.911);
  --adn-base-200: oklch(18.522% 0.007 17.911);
  --adn-base-300: oklch(16.203% 0.007 17.911);
  --adn-base-content: oklch(83.768% 0.001 17.911);
  --adn-primary: oklch(68.628% 0.185 148.958);
  --adn-primary-content: oklch(0% 0 0);
  --adn-secondary: oklch(69.776% 0.135 168.327);
  --adn-secondary-content: oklch(13.955% 0.027 168.327);
  --adn-accent: oklch(70.628% 0.119 185.713);
  --adn-accent-content: oklch(14.125% 0.023 185.713);
  --adn-neutral: oklch(30.698% 0.039 171.364);
  --adn-neutral-content: oklch(86.139% 0.007 171.364);
  --adn-info: oklch(72.06% 0.191 231.6);
  --adn-info-content: oklch(0% 0 0);
  --adn-success: oklch(64.8% 0.15 160);
  --adn-success-content: oklch(0% 0 0);
  --adn-warning: oklch(84.71% 0.199 83.87);
  --adn-warning-content: oklch(0% 0 0);
  --adn-error: oklch(71.76% 0.221 22.18);
  --adn-error-content: oklch(0% 0 0);
  --adn-radius: 1rem;
  --adn-radius-field: 2rem;
  --adn-border: 1px;
}

/* ===== CORRECTIONS SPÉCIFIQUES POUR LES PROBLÈMES IDENTIFIÉS ===== */

/* 1. Correction de la responsivité de la grille principale */
@media (max-width: 1024px) {
  .lg\:col-span-8 {
    grid-column: span 12 / span 12;
  }
  
  .lg\:col-span-4 {
    grid-column: span 12 / span 12;
  }
}

/* 2. Amélioration de la gestion des textes longs */
.text-break-words {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.text-break-all {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 3. Correction des problèmes de troncature dans la sidebar */
@media (max-width: 1280px) {
  .sidebar-content {
    min-width: 0;
    overflow: hidden;
  }
  
  .sidebar-content h2,
  .sidebar-content h3 {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .sidebar-content .text-lg {
    font-size: 0.875rem;
  }
  
  .sidebar-content .text-base {
    font-size: 0.75rem;
  }
}

/* 4. Amélioration de la responsivité des cartes d'information */
@media (max-width: 768px) {
  .info-card {
    padding: 0.75rem;
  }
  
  .info-card .text-xl {
    font-size: 1.125rem;
  }
  
  .info-card .text-lg {
    font-size: 1rem;
  }
}

/* 5. Correction des problèmes de hauteur dans les sections */
.activity-section {
  max-height: 24rem; /* 384px au lieu de 320px */
}

.revenue-section {
  height: 18rem; /* 288px au lieu de 320px */
}

/* 6. Amélioration de la lisibilité des alertes */
.alert-content {
  min-width: 0;
  flex: 1;
}

.alert-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}

/* 7. Correction des problèmes de navigation mobile */
@media (max-width: 1024px) {
  .mobile-menu {
    width: 100vw;
    max-width: 100vw;
  }
  
  .mobile-menu-content {
    padding: 1rem;
  }
}

/* 8. Amélioration de la responsivité des graphiques */
@media (max-width: 640px) {
  .chart-container {
    height: 16rem; /* 256px */
    padding: 0.5rem;
  }
  
  .chart-indicators {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* 9. Correction des problèmes de spacing dans les grilles */
@media (max-width: 1024px) {
  .dashboard-grid {
    gap: 1rem;
  }
  
  .dashboard-section {
    margin-bottom: 1rem;
  }
}

/* 10. Amélioration de l'accessibilité pour les textes tronqués */
.truncate-fallback {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-fallback:hover {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===== CLASSES UTILITAIRES ESSENTIELLES (PRIORITÉ 2) ===== */

/* Couleurs de base - Utilisées partout */
.adn-bg-base-100 { background-color: var(--adn-base-100); }
.adn-bg-base-200 { background-color: var(--adn-base-200); }
.adn-bg-base-300 { background-color: var(--adn-base-300); }
.adn-text-base-content { color: var(--adn-base-content); }

/* Couleurs principales - Boutons et liens */
.adn-bg-primary { background-color: var(--adn-primary); }
.adn-text-primary { color: var(--adn-primary); }
.adn-text-primary-content { color: var(--adn-primary-content); }
.adn-bg-secondary { background-color: var(--adn-secondary); }
.adn-text-secondary { color: var(--adn-secondary); }
.adn-text-secondary-content { color: var(--adn-secondary-content); }
.adn-bg-accent { background-color: var(--adn-accent); }
.adn-text-accent { color: var(--adn-accent); }
.adn-text-accent-content { color: var(--adn-accent-content); }

/* Couleurs sémantiques - Alertes et notifications */
.adn-bg-info { background-color: var(--adn-info); }
.adn-text-info { color: var(--adn-info); }
.adn-text-info-content { color: var(--adn-info-content); }
.adn-bg-success { background-color: var(--adn-success); }
.adn-text-success { color: var(--adn-success); }
.adn-text-success-content { color: var(--adn-success-content); }
.adn-bg-warning { background-color: var(--adn-warning); }
.adn-text-warning { color: var(--adn-warning); }
.adn-text-warning-content { color: var(--adn-warning-content); }
.adn-bg-error { background-color: var(--adn-error); }
.adn-text-error { color: var(--adn-error); }
.adn-text-error-content { color: var(--adn-error-content); }

/* Bordures et rayons - Utilisés dans les formulaires et cartes */
.adn-border { border: var(--adn-border) solid var(--adn-neutral); }
.adn-border-primary { border-color: var(--adn-primary); }
.adn-rounded { border-radius: var(--adn-radius); }

/* ===== COMPOSANTS PRINCIPAUX (PRIORITÉ 3) ===== */

/* Boutons - Composant le plus utilisé */
.adn-btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--adn-radius);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  gap: 0.5rem;
  min-height: 2.75rem;
  white-space: nowrap;
  user-select: none;
}

.adn-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  min-height: 2.25rem;
}

.adn-btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
  min-height: 3.25rem;
}

.adn-btn-primary {
  background-color: var(--adn-primary);
  color: var(--adn-primary-content);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.adn-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.adn-btn-secondary {
  background-color: var(--adn-secondary);
  color: var(--adn-secondary-content);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.adn-btn-secondary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.adn-btn-outline {
  background-color: transparent;
  color: var(--adn-primary);
  border: 2px solid var(--adn-primary);
}

.adn-btn-outline:hover {
  background-color: var(--adn-primary);
  color: var(--adn-primary-content);
}

/* Boutons d'action spécifiques pour les tableaux */
.adn-btn-action {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.75rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  gap: 0.25rem;
  min-height: 1.75rem;
  white-space: nowrap;
  user-select: none;
}

.adn-btn-action-preview {
  background-color: var(--adn-info);
  color: white;
}

.adn-btn-action-preview:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.adn-btn-action-detail {
  background-color: var(--adn-secondary);
  color: var(--adn-secondary-content);
}

.adn-btn-action-detail:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.adn-btn-action-payment {
  background-color: var(--adn-success);
  color: white;
}

.adn-btn-action-payment:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Cartes - Deuxième composant le plus utilisé */
.adn-card {
  background-color: var(--adn-base-100);
  color: var(--adn-base-content);
  border-radius: 0.75rem;
  border: 1px solid var(--adn-neutral);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  overflow: hidden;
}

.adn-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.adn-card-header {
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  border-bottom: 1px solid var(--adn-neutral);
}

.adn-card-body {
  padding: 1.5rem;
}

/* Formulaires - Troisième composant le plus utilisé */
.adn-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--adn-base-100);
  color: var(--adn-base-content);
  border: 2px solid var(--adn-neutral);
  border-radius: var(--adn-radius-field);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.adn-input::placeholder {
  color: var(--adn-neutral);
  opacity: 0.7;
}

.adn-input:focus {
  outline: none;
  border-color: var(--adn-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.adn-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--adn-base-content);
  margin-bottom: 0.5rem;
}

.adn-form-group {
  margin-bottom: 1.5rem;
}

/* Alertes - Quatrième composant le plus utilisé */
.adn-alert {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.adn-alert:last-child {
  margin-bottom: 0;
}

.adn-alert-info {
  background-color: var(--adn-info);
  color: var(--adn-info-content);
  border-color: var(--adn-info);
}

.adn-alert-success {
  background-color: var(--adn-success);
  color: var(--adn-success-content);
  border-color: var(--adn-success);
}

.adn-alert-warning {
  background-color: var(--adn-warning);
  color: var(--adn-warning-content);
  border-color: var(--adn-warning);
}

.adn-alert-error {
  background-color: var(--adn-error);
  color: var(--adn-error-content);
  border-color: var(--adn-error);
}

/* ===== LAYOUT & CONTAINERS (PRIORITÉ 4) ===== */

.adn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.adn-container-sm {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem;
}

.adn-container-lg {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.adn-section {
  padding: 3rem 0;
}

.adn-section-sm {
  padding: 2rem 0;
}

.adn-section-lg {
  padding: 4rem 0;
}

/* ===== TYPOGRAPHY (PRIORITÉ 5) ===== */

.adn-text-hero {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--adn-base-content);
}

.adn-text-title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--adn-base-content);
}

.adn-text-subtitle {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--adn-base-content);
}

.adn-text-heading {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--adn-base-content);
}

.adn-text-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--adn-base-content);
}

.adn-text-small {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--adn-neutral);
}

.adn-text-caption {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--adn-neutral);
}

/* ===== GRID LAYOUTS (PRIORITÉ 6) ===== */

.adn-grid {
  display: grid;
  gap: 1.5rem;
}

.adn-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.adn-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.adn-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* ===== SPACING UTILITIES (PRIORITÉ 7) ===== */

.adn-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.adn-stack-sm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.adn-stack-lg {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.adn-stack-xl {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.adn-p-sm { padding: 0.5rem; }
.adn-p-md { padding: 1rem; }
.adn-p-lg { padding: 1.5rem; }
.adn-p-xl { padding: 2rem; }

/* ===== NAVIGATION (PRIORITÉ 8) ===== */

.adn-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.adn-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--adn-base-content);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.adn-nav-item:hover {
  background-color: var(--adn-base-200);
  color: var(--adn-primary);
}

.adn-nav-item.active {
  background-color: var(--adn-primary);
  color: var(--adn-primary-content);
}

/* ===== TRANSITIONS THÈME (PRIORITÉ 9) ===== */
/* Désactiver les transitions pendant le chargement initial pour éviter le flash */
html:not(.theme-applied) * {
  transition: none !important;
}

/* Activer les transitions après l'application du thème */
html.theme-applied * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Transition spécifique pour le changement de thème */
html.theme-transitioning * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Assurer que le body a la bonne couleur de fond dès le chargement */
html:not(.theme-applied) body {
  background-color: var(--adn-base-100);
}

/* ===== RESPONSIVE (PRIORITÉ 10) ===== */
@media (max-width: 768px) {
  .adn-container {
    padding: 0 0.75rem;
  }
  
  .adn-section {
    padding: 2rem 0;
  }
  
  .adn-section-lg {
    padding: 3rem 0;
  }
  
  .adn-grid-2,
  .adn-grid-3,
  .adn-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .adn-text-hero {
    font-size: 2rem;
  }
  
  .adn-text-title {
    font-size: 1.5rem;
  }
  
  .adn-text-subtitle {
    font-size: 1.25rem;
  }
  
  .adn-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .adn-container {
    padding: 0 0.5rem;
  }
  
  .adn-card-body {
    padding: 1rem;
  }
  
  .adn-card-header {
    padding: 1rem 1rem 0.75rem 1rem;
  }
}

/* ===== ANIMATIONS ET TRANSITIONS POUR STATISTIQUES (PRIORITÉ 11) ===== */

/* Animation d'entrée pour les statistiques */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Classes d'animation pour les statistiques */
.stat-card-animate {
  animation: slideInUp 0.6s ease-out;
}

.stat-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card-hover:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animation pour les compteurs */
@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.stat-counter {
  animation: countUp 0.5s ease-out;
}

/* Responsive spécifique pour les statistiques */
@media (max-width: 1024px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-icon {
    width: 2rem;
    height: 2rem;
  }
  
  .stat-value {
    font-size: 1.25rem;
  }
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .stat-card-animate,
  .stat-card-hover,
  .stat-counter {
    animation: none;
    transition: none;
  }
}

/* Mode sombre optimisé pour les statistiques */
[data-theme="dark"] .stat-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.8));
  border: 1px solid rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .stat-card:hover {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(51, 65, 85, 0.9));
  border-color: rgba(71, 85, 105, 0.5);
}