/*
 * djangui.css
 * ===========
 * Design system de la plateforme Djangui.
 *
 * RÈGLE ABSOLUE : zéro valeur codée en dur dans les templates.
 * Toutes les couleurs, typographies et espacements passent par
 * des variables CSS (custom properties).
 *
 * Architecture du fichier :
 *   1.  Variables — mode clair (:root)
 *   2.  Variables — mode sombre ([data-theme="sombre"])
 *   3.  Injection dynamique des couleurs depuis ParametresSite
 *       (bloc <style> dans base.html — documente le pattern ici)
 *   4.  Reset & base typographique
 *   5.  Layout — sidebar + main content
 *   6.  Navbar
 *   7.  Sidebar
 *   8.  Cartes (cards)
 *   9.  Boutons
 *   10. Formulaires
 *   11. Badges & statuts
 *   12. Tables
 *   13. Alertes & messages Django
 *   14. Composants métier — Score badge
 *   15. Composants métier — KYC status
 *   16. Composants métier — Progression défis
 *   17. Composants métier — Portefeuille
 *   18. Pagination
 *   19. États vides (empty states)
 *   20. Utilitaires
 *   21. Animations & transitions
 *   22. Responsive — mobile first
 */


/* ============================================================
   1. VARIABLES — MODE CLAIR (défaut)
   Toutes les valeurs dynamiques de la plateforme.
   Les couleurs primaire/secondaire/accent sont surchargées
   par le bloc <style> dans base.html depuis ParametresSite.
   ============================================================ */

:root {
  /* ── Couleurs de marque (surchargées dynamiquement depuis ParametresSite) ── */
  --color-primary:        #4f46e5;
  --color-primary-dark:   #3730a3;
  --color-primary-light:  #818cf8;
  --color-primary-subtle: #eef2ff;

  --color-secondary:        #7c3aed;
  --color-secondary-dark:   #6d28d9;
  --color-secondary-light:  #a78bfa;
  --color-secondary-subtle: #f5f3ff;

  --color-accent:        #059669;
  --color-accent-dark:   #047857;
  --color-accent-light:  #34d399;
  --color-accent-subtle: #ecfdf5;

  /* ── Couleurs sémantiques ── */
  --color-success:        #10b981;
  --color-success-subtle: #d1fae5;
  --color-warning:        #f59e0b;
  --color-warning-subtle: #fef3c7;
  --color-danger:         #ef4444;
  --color-danger-subtle:  #fee2e2;
  --color-info:           #3b82f6;
  --color-info-subtle:    #dbeafe;

  /* ── Niveaux de scoring ── */
  --color-score-debutant: #6b7280;
  --color-score-bronze:   #d97706;
  --color-score-argent:   #64748b;
  --color-score-or:       #ca8a04;
  --color-score-platine:  #7c3aed;

  /* ── Fonds & surfaces (mode clair) ── */
  --color-bg:           #f8fafc;
  --color-bg-card:      #ffffff;
  --color-bg-sidebar:   #1e1b4b;
  --color-bg-sidebar-hover: rgba(255,255,255,0.08);
  --color-bg-sidebar-active: rgba(255,255,255,0.15);
  --color-bg-input:     #ffffff;
  --color-bg-hover:     #f1f5f9;
  --color-bg-muted:     #f8fafc;

  /* ── Texte (mode clair) ── */
  --color-text:          #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted:    #94a3b8;
  --color-text-disabled: #cbd5e1;
  --color-text-sidebar:  rgba(255,255,255,0.85);
  --color-text-sidebar-muted: rgba(255,255,255,0.5);
  --color-text-on-primary: #ffffff;

  /* ── Bordures ── */
  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-focus:  var(--color-primary);

  /* ── Typographie ── */
  --font-family:         'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-size-xs:        0.75rem;    /* 12px */
  --font-size-sm:        0.8125rem;  /* 13px */
  --font-size-base:      0.9375rem;  /* 15px */
  --font-size-md:        1rem;       /* 16px */
  --font-size-lg:        1.125rem;   /* 18px */
  --font-size-xl:        1.25rem;    /* 20px */
  --font-size-2xl:       1.5rem;     /* 24px */
  --font-size-3xl:       1.875rem;   /* 30px */
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --line-height-tight:   1.25;
  --line-height-base:    1.6;
  --line-height-relaxed: 1.75;

  /* ── Espacements ── */
  --spacing-1:  0.25rem;   /* 4px */
  --spacing-2:  0.5rem;    /* 8px */
  --spacing-3:  0.75rem;   /* 12px */
  --spacing-4:  1rem;      /* 16px */
  --spacing-5:  1.25rem;   /* 20px */
  --spacing-6:  1.5rem;    /* 24px */
  --spacing-8:  2rem;      /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px */

  /* ── Bordures radius ── */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Ombres ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;

  /* ── Layout ── */
  --sidebar-width:        260px;
  --sidebar-width-mobile: 280px;
  --navbar-height:        64px;
  --content-max-width:    1280px;

  /* ── Z-index ── */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-sidebar:    300;
  --z-overlay:    400;
  --z-modal:      500;
  --z-toast:      600;

  /* ── Couleurs fixes (indépendantes du thème) ── */
  --color-white:         #ffffff;
  --color-danger-hover:  #dc2626;

  /* ── Couleurs de texte sur fonds colorés (accessibilité WCAG AA) ── */
  --color-warning-text:  #92400e;   /* texte sur fond warning-subtle */
  --color-danger-text:   #991b1b;   /* texte sur fond danger-subtle  */
  --color-info-text:     #1e40af;   /* texte sur fond info-subtle    */
  --color-success-text:  #065f46;   /* texte sur fond success-subtle */

  /* ── Fonds niveaux de scoring ── */
  --color-score-debutant-bg: #f3f4f6;
  --color-score-bronze-bg:   #fef3c7;
  --color-score-argent-bg:   #f1f5f9;
  --color-score-or-bg:       #fefce8;
  --color-wallet-gradient:   var(--color-wallet-gradient);
}


/* ============================================================
   2. VARIABLES — MODE SOMBRE
   Surcharge uniquement les variables qui changent.
   Le layout et les dimensions restent identiques.
   ============================================================ */

[data-theme="sombre"] {
  /* ── Couleurs de marque — légèrement plus lumineuses en sombre ── */
  --color-primary:        #6366f1;
  --color-primary-dark:   #4f46e5;
  --color-primary-light:  #a5b4fc;
  --color-primary-subtle: #1e1b4b;

  --color-secondary:        #8b5cf6;
  --color-secondary-subtle: #2e1065;

  --color-accent:        #10b981;
  --color-accent-subtle: #064e3b;

  /* ── Sémantiques ── */
  --color-success-subtle: #064e3b;
  --color-warning-subtle: #451a03;
  --color-danger-subtle:  #450a0a;
  --color-info-subtle:    #082f49;

  /* ── Fonds & surfaces ── */
  --color-bg:           #0f172a;
  --color-bg-card:      #1e293b;
  --color-bg-sidebar:   #0a0f1e;
  --color-bg-sidebar-hover:   rgba(255,255,255,0.06);
  --color-bg-sidebar-active:  rgba(99,102,241,0.25);
  --color-bg-input:     #1e293b;
  --color-bg-hover:     #1e293b;
  --color-bg-muted:     #162032;

  /* ── Texte ── */
  --color-text:           #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted:     #64748b;
  --color-text-disabled:  #334155;

  /* ── Bordures ── */
  --color-border:        #1e293b;
  --color-border-strong: #334155;

  /* ── Ombres ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}


/* ============================================================
   3. PATTERN D'INJECTION DYNAMIQUE DES COULEURS
   Ce bloc est documenté ici mais ÉCRIT dans base.html.

   Dans templates/base.html, après le <link rel="stylesheet"> :
   <style>
     :root {
       --color-primary:   {{ site.couleur_primaire }};
       --color-secondary: {{ site.couleur_secondaire }};
       --color-accent:    {{ site.couleur_accent }};
       /* Les variantes sont calculées par le CSS lui-même
          via color-mix() — pas besoin de les passer depuis Django */
     /*}
   </style>

   Résultat : l'admin change la couleur dans son dashboard
   → toute la plateforme se met à jour instantanément.
   ============================================================ */


/* ============================================================
   4. RESET & BASE TYPOGRAPHIQUE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-normal);
  line-height:      var(--line-height-base);
  color:            var(--color-text);
  background-color: var(--color-bg);
  margin:           0;
  padding:          0;
  transition:       background-color var(--transition-slow),
                    color var(--transition-slow);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Liens */
a {
  color:            var(--color-primary);
  text-decoration:  none;
  transition:       color var(--transition-fast);
}
a:hover {
  color:            var(--color-primary-dark);
  text-decoration:  underline;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  font-weight:   var(--font-weight-semibold);
  line-height:   var(--line-height-tight);
  color:         var(--color-text);
  margin-top:    0;
  margin-bottom: var(--spacing-3);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

/* Titre de page */
.page-title {
  font-size:   var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
  margin:      0 0 var(--spacing-2) 0;
}
.page-subtitle {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  margin:      0;
}

p { margin-top: 0; margin-bottom: var(--spacing-4); }
p:last-child { margin-bottom: 0; }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-6) 0;
}

/* Texte monospace */
code, pre, kbd {
  font-family:  var(--font-family-mono);
  font-size:    0.9em;
}
code {
  background-color: var(--color-bg-hover);
  color:            var(--color-primary);
  padding:          2px 6px;
  border-radius:    var(--radius-sm);
}


/* ============================================================
   5. LAYOUT — SIDEBAR + MAIN CONTENT
   Architecture :
     <body>
       <div class="dj-layout">
         <aside class="dj-sidebar">...</aside>
         <div class="dj-main">
           <nav class="dj-navbar">...</nav>
           <main class="dj-content">...</main>
         </div>
       </div>
     </body>
   ============================================================ */

.dj-layout {
  display:    flex;
  min-height: 100vh;
}

.dj-main {
  flex:       1;
  display:    flex;
  flex-direction: column;
  min-width:  0;         /* Évite le dépassement flexbox */
  margin-left: var(--sidebar-width);
  transition: margin-left var(--transition-slow);
}

.dj-content {
  flex:    1;
  padding: var(--spacing-6);
  max-width: var(--content-max-width);
  width:   100%;
}

/* En-tête de section de contenu */
.dj-content-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--spacing-4);
  margin-bottom:   var(--spacing-6);
  flex-wrap:       wrap;
}

/* Grille de dashboard */
.dj-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--spacing-5);
}
.dj-grid-2 {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--spacing-5);
}
.dj-grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--spacing-5);
}
.dj-grid-4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--spacing-4);
}


/* ============================================================
   6. NAVBAR
   ============================================================ */

.dj-navbar {
  position:         sticky;
  top:              0;
  z-index:          var(--z-sticky);
  height:           var(--navbar-height);
  background-color: var(--color-bg-card);
  border-bottom:    1px solid var(--color-border);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 var(--spacing-6);
  gap:              var(--spacing-4);
  box-shadow:       var(--shadow-xs);
  transition:       background-color var(--transition-slow),
                    border-color var(--transition-slow);
}

.dj-navbar-left {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-4);
}

.dj-navbar-right {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-3);
}

/* Bouton hamburger mobile */
.dj-sidebar-toggle {
  display:          none;
  align-items:      center;
  justify-content:  center;
  width:            40px;
  height:           40px;
  border:           none;
  background:       transparent;
  border-radius:    var(--radius-md);
  color:            var(--color-text-secondary);
  cursor:           pointer;
  transition:       background-color var(--transition-fast),
                    color var(--transition-fast);
}
.dj-sidebar-toggle:hover {
  background-color: var(--color-bg-hover);
  color:            var(--color-text);
}

/* Recherche navbar */
.dj-navbar-search {
  position:    relative;
  display:     flex;
  align-items: center;
}
.dj-navbar-search input {
  background-color: var(--color-bg-hover);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-full);
  padding:          var(--spacing-2) var(--spacing-4) var(--spacing-2) calc(var(--spacing-4) + 20px);
  font-size:        var(--font-size-sm);
  color:            var(--color-text);
  width:            240px;
  transition:       all var(--transition-fast);
}
.dj-navbar-search input:focus {
  outline:          none;
  border-color:     var(--color-primary);
  background-color: var(--color-bg-card);
  box-shadow:       0 0 0 3px var(--color-primary-subtle);
  width:            280px;
}
.dj-navbar-search .search-icon {
  position:   absolute;
  left:        var(--spacing-3);
  color:       var(--color-text-muted);
  font-size:   14px;
  pointer-events: none;
}

/* Boutons icône navbar */
.dj-icon-btn {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border:          none;
  background:      transparent;
  border-radius:   var(--radius-md);
  color:           var(--color-text-secondary);
  cursor:          pointer;
  text-decoration: none;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast);
}
.dj-icon-btn:hover {
  background-color: var(--color-bg-hover);
  color:            var(--color-text);
  text-decoration:  none;
}

/* Badge de notification */
.dj-notif-badge {
  position:         absolute;
  top:              6px;
  right:            6px;
  min-width:        18px;
  height:           18px;
  padding:          0 4px;
  background-color: var(--color-danger);
  color:            var(--color-white);
  font-size:        10px;
  font-weight:      var(--font-weight-bold);
  border-radius:    var(--radius-full);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  line-height:      1;
  border:           2px solid var(--color-bg-card);
}

/* Avatar utilisateur */
.dj-avatar {
  width:            36px;
  height:           36px;
  border-radius:    var(--radius-full);
  background:       linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color:            var(--color-text-on-primary);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-semibold);
  cursor:           pointer;
  border:           2px solid var(--color-border);
  transition:       border-color var(--transition-fast);
  overflow:         hidden;
  flex-shrink:      0;
}
.dj-avatar:hover { border-color: var(--color-primary); }
.dj-avatar img   { width: 100%; height: 100%; object-fit: cover; }

.dj-avatar-sm { width: 28px; height: 28px; font-size: var(--font-size-xs); }
.dj-avatar-lg { width: 48px; height: 48px; font-size: var(--font-size-lg); }
.dj-avatar-xl { width: 72px; height: 72px; font-size: var(--font-size-2xl); }


/* ============================================================
   7. SIDEBAR
   ============================================================ */

.dj-sidebar {
  position:         fixed;
  top:              0;
  left:             0;
  width:            var(--sidebar-width);
  height:           100vh;
  background-color: var(--color-bg-sidebar);
  display:          flex;
  flex-direction:   column;
  z-index:          var(--z-sidebar);
  overflow-y:       auto;
  overflow-x:       hidden;
  transition:       transform var(--transition-slow),
                    width var(--transition-slow);

  /* Scrollbar fine et discrète */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.dj-sidebar::-webkit-scrollbar { width: 4px; }
.dj-sidebar::-webkit-scrollbar-track { background: transparent; }
.dj-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.1);
  border-radius:    var(--radius-full);
}

/* Logo dans la sidebar */
.dj-sidebar-logo {
  display:         flex;
  align-items:     center;
  gap:             var(--spacing-3);
  padding:         var(--spacing-5) var(--spacing-5);
  border-bottom:   1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  flex-shrink:     0;
}
.dj-sidebar-logo img {
  width:  36px;
  height: 36px;
  object-fit: contain;
}
.dj-sidebar-logo-text {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color:       var(--color-white);
  letter-spacing: -0.02em;
}
.dj-sidebar-logo-text span {
  color: var(--color-primary-light);
}

/* Profil compact dans la sidebar */
.dj-sidebar-profile {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-3);
  padding:     var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.dj-sidebar-profile-info {
  flex: 1;
  min-width: 0;
}
.dj-sidebar-profile-name {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-white);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.dj-sidebar-profile-role {
  font-size: var(--font-size-xs);
  color:     var(--color-text-sidebar-muted);
}

/* Solde dans la sidebar */
.dj-sidebar-balance {
  margin:          var(--spacing-3) var(--spacing-4);
  padding:         var(--spacing-3) var(--spacing-4);
  background:      rgba(255,255,255,0.06);
  border-radius:   var(--radius-lg);
  border:          1px solid rgba(255,255,255,0.08);
}
.dj-sidebar-balance-label {
  font-size: var(--font-size-xs);
  color:     var(--color-text-sidebar-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-1);
}
.dj-sidebar-balance-amount {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color:       var(--color-accent-light);
}
.dj-sidebar-balance-currency {
  font-size: var(--font-size-xs);
  color:     var(--color-text-sidebar-muted);
  margin-left: var(--spacing-1);
}

/* Navigation */
.dj-sidebar-nav {
  flex:    1;
  padding: var(--spacing-4) var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.dj-sidebar-section {
  margin-top:    var(--spacing-4);
  margin-bottom: var(--spacing-2);
  padding:       0 var(--spacing-3);
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-sidebar-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dj-sidebar-section:first-child { margin-top: 0; }

/* Item de navigation */
.dj-nav-item {
  display:         flex;
  align-items:     center;
  gap:             var(--spacing-3);
  padding:         var(--spacing-2) var(--spacing-3);
  border-radius:   var(--radius-md);
  color:           var(--color-text-sidebar);
  text-decoration: none;
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast);
  position:        relative;
  min-height:      40px;
}
.dj-nav-item:hover {
  background-color: var(--color-bg-sidebar-hover);
  color:            var(--color-white);
  text-decoration:  none;
}
.dj-nav-item.active {
  background-color: var(--color-bg-sidebar-active);
  color:            var(--color-white);
}
.dj-nav-item.active::before {
  content:          '';
  position:         absolute;
  left:             0;
  top:              50%;
  transform:        translateY(-50%);
  width:            3px;
  height:           60%;
  background-color: var(--color-primary-light);
  border-radius:    0 var(--radius-sm) var(--radius-sm) 0;
}
.dj-nav-item .nav-icon {
  width:      20px;
  text-align: center;
  font-size:  16px;
  flex-shrink:0;
}
.dj-nav-item .nav-label {
  flex: 1;
}
.dj-nav-item .nav-badge {
  background-color: var(--color-danger);
  color:            var(--color-white);
  font-size:        10px;
  font-weight:      var(--font-weight-bold);
  padding:          1px 6px;
  border-radius:    var(--radius-full);
  line-height:      1.6;
}

/* Pied de sidebar */
.dj-sidebar-footer {
  padding:       var(--spacing-4);
  border-top:    1px solid rgba(255,255,255,0.08);
  flex-shrink:   0;
  display:       flex;
  flex-direction:column;
  gap:           var(--spacing-2);
}



/* ============================================================
   SIDEBAR — NAV DROPDOWN
   À insérer dans djangui.css juste après la règle .dj-sidebar-footer
   (section 7 du fichier, vers la ligne 764)
   ============================================================ */

/* Wrapper du dropdown */
.dj-nav-dropdown {
  display: flex;
  flex-direction: column;
}

/* Déclencheur — même apparence qu'un dj-nav-item classique */
.dj-nav-dropdown__trigger {
  width:      100%;
  background: none;
  border:     none;
  text-align: left;
}

/* Chevron — tourne à 90° quand le menu est ouvert */
.dj-nav-dropdown__chevron {
  font-size:   10px;
  margin-left: auto;
  flex-shrink: 0;
  opacity:     0.6;
  transition:  transform var(--transition-fast);
  /* Pas de width:20px ici — on laisse le margin-left:auto faire le travail */
}

.dj-nav-dropdown--open > .dj-nav-dropdown__trigger .dj-nav-dropdown__chevron {
  transform: rotate(90deg);
  opacity:   1;
}

/* Menu déroulant — fermé par défaut */
.dj-nav-dropdown__menu {
  display:    flex;
  flex-direction: column;
  gap:        var(--spacing-1);
  /* Animation hauteur : max-height + overflow hidden */
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity:    0;
}

/* Menu déroulant — ouvert */
.dj-nav-dropdown--open > .dj-nav-dropdown__menu {
  max-height: 600px;  /* Valeur haute — jamais atteinte en pratique */
  opacity:    1;
}

/* Sous-item — léger retrait visuel pour indiquer la hiérarchie */
.dj-nav-item--sub {
  padding-left: calc(var(--spacing-3) + 12px);
}

/* Barre verticale gauche pour les sous-items
   (reprend le style de l'indicateur actif mais permanent et subtil) */
.dj-nav-item--sub::after {
  content:          '';
  position:         absolute;
  left:             calc(var(--spacing-3) + 2px);
  top:              50%;
  transform:        translateY(-50%);
  width:            1px;
  height:           50%;
  background-color: rgba(255,255,255,0.15);
  border-radius:    var(--radius-full);
}

.dj-nav-item--sub.active::after {
  background-color: var(--color-primary-light);
}

/* ============================================================
   8. CARTES (CARDS)
   ============================================================ */

.dj-card {
  background-color: var(--color-bg-card);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-card);
  transition:       box-shadow var(--transition-fast),
                    border-color var(--transition-fast),
                    background-color var(--transition-slow);
  overflow:         hidden;
}

.dj-card-header {
  padding:         var(--spacing-5) var(--spacing-5) 0;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-4);
}
.dj-card-title {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
  margin:      0;
}
.dj-card-subtitle {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
  margin:    var(--spacing-1) 0 0 0;
}
.dj-card-body {
  padding: var(--spacing-5);
}
.dj-card-footer {
  padding:       var(--spacing-4) var(--spacing-5);
  border-top:    1px solid var(--color-border);
  background-color: var(--color-bg-muted);
  font-size:     var(--font-size-sm);
  color:         var(--color-text-muted);
}

/* Carte statistique (KPI) */
.dj-stat-card {
  background-color: var(--color-bg-card);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-xl);
  padding:          var(--spacing-5);
  box-shadow:       var(--shadow-card);
  display:          flex;
  align-items:      flex-start;
  gap:              var(--spacing-4);
  transition:       box-shadow var(--transition-fast);
}
.dj-stat-card:hover { box-shadow: var(--shadow-md); }

.dj-stat-icon {
  width:            48px;
  height:           48px;
  border-radius:    var(--radius-lg);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        22px;
  flex-shrink:      0;
  background-color: var(--color-primary-subtle);
  color:            var(--color-primary);
}
.dj-stat-icon.success { background-color: var(--color-success-subtle); color: var(--color-success); }
.dj-stat-icon.warning { background-color: var(--color-warning-subtle); color: var(--color-warning); }
.dj-stat-icon.danger  { background-color: var(--color-danger-subtle);  color: var(--color-danger); }
.dj-stat-icon.info    { background-color: var(--color-info-subtle);    color: var(--color-info); }

.dj-stat-body { flex: 1; min-width: 0; }
.dj-stat-label {
  font-size:      var(--font-size-xs);
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight:    var(--font-weight-medium);
}
.dj-stat-value {
  font-size:   var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
  line-height: var(--line-height-tight);
  margin:      var(--spacing-1) 0;
}
.dj-stat-change {
  font-size: var(--font-size-xs);
  display:   flex;
  align-items: center;
  gap:       var(--spacing-1);
}
.dj-stat-change.up   { color: var(--color-success); }
.dj-stat-change.down { color: var(--color-danger); }


/* ============================================================
   9. BOUTONS
   ============================================================ */

.dj-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--spacing-2);
  padding:         var(--spacing-2) var(--spacing-4);
  font-family:     var(--font-family);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     1.5;
  border-radius:   var(--radius-md);
  border:          1px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      all var(--transition-fast);
  user-select:     none;
  -webkit-user-select: none;
}
.dj-btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
  pointer-events: none;
}

/* Variantes */
.dj-btn-primary {
  background-color: var(--color-primary);
  color:            var(--color-text-on-primary);
  border-color:     var(--color-primary);
}
.dj-btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color:     var(--color-primary-dark);
  color:            var(--color-text-on-primary);
  text-decoration:  none;
  box-shadow:       0 4px 12px rgba(79,70,229,0.35);
  transform:        translateY(-1px);
}

.dj-btn-secondary {
  background-color: var(--color-bg-card);
  color:            var(--color-text);
  border-color:     var(--color-border-strong);
}
.dj-btn-secondary:hover {
  background-color: var(--color-bg-hover);
  color:            var(--color-text);
  text-decoration:  none;
}

.dj-btn-success {
  background-color: var(--color-success);
  color:            var(--color-white);
  border-color:     var(--color-success);
}
.dj-btn-success:hover {
  background-color: var(--color-accent-dark);
  border-color:     var(--color-accent-dark);
  color:            var(--color-white);
  text-decoration:  none;
}

.dj-btn-danger {
  background-color: var(--color-danger);
  color:            var(--color-white);
  border-color:     var(--color-danger);
}
.dj-btn-danger:hover {
  background-color: var(--color-danger-hover);
  border-color:     var(--color-danger-hover);
  color:            var(--color-white);
  text-decoration:  none;
}

.dj-btn-ghost {
  background-color: transparent;
  color:            var(--color-text-secondary);
  border-color:     transparent;
}
.dj-btn-ghost:hover {
  background-color: var(--color-bg-hover);
  color:            var(--color-text);
  text-decoration:  none;
}

/* Tailles */
.dj-btn-sm {
  padding:      calc(var(--spacing-1) + 2px) var(--spacing-3);
  font-size:    var(--font-size-xs);
  border-radius:var(--radius-sm);
}
.dj-btn-lg {
  padding:      var(--spacing-3) var(--spacing-6);
  font-size:    var(--font-size-md);
  border-radius:var(--radius-lg);
}
.dj-btn-block { width: 100%; }

/* Bouton icône seul */
.dj-btn-icon {
  padding:       var(--spacing-2);
  width:         36px;
  height:        36px;
  border-radius: var(--radius-md);
}
.dj-btn-icon.dj-btn-sm { width: 28px; height: 28px; padding: var(--spacing-1); }


/* ============================================================
   10. FORMULAIRES
   ============================================================ */

.dj-form-group {
  margin-bottom: var(--spacing-5);
}

.dj-label {
  display:       block;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}
.dj-label .required {
  color:      var(--color-danger);
  margin-left:var(--spacing-1);
}

.dj-input,
.dj-select,
.dj-textarea {
  display:          block;
  width:            100%;
  padding:          var(--spacing-2) var(--spacing-3);
  font-family:      var(--font-family);
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-normal);
  line-height:      1.6;
  color:            var(--color-text);
  background-color: var(--color-bg-input);
  border:           1px solid var(--color-border-strong);
  border-radius:    var(--radius-md);
  transition:       border-color var(--transition-fast),
                    box-shadow var(--transition-fast),
                    background-color var(--transition-slow);
  appearance:       none;
  -webkit-appearance: none;
}
.dj-input::placeholder  { color: var(--color-text-muted); }
.dj-select::placeholder { color: var(--color-text-muted); }

.dj-input:focus,
.dj-select:focus,
.dj-textarea:focus {
  outline:      none;
  border-color: var(--color-border-focus);
  box-shadow:   0 0 0 3px var(--color-primary-subtle);
}
.dj-input:disabled,
.dj-select:disabled,
.dj-textarea:disabled {
  background-color: var(--color-bg-muted);
  color:            var(--color-text-disabled);
  cursor:           not-allowed;
}

.dj-input.is-invalid,
.dj-select.is-invalid,
.dj-textarea.is-invalid {
  border-color: var(--color-danger);
}
.dj-input.is-invalid:focus,
.dj-select.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--color-danger-subtle);
}

.dj-textarea { resize: vertical; min-height: 100px; }

/* Input avec icône */
.dj-input-group {
  position: relative;
  display:  flex;
  align-items: center;
}
.dj-input-group .dj-input {
  padding-left: calc(var(--spacing-3) + 24px);
}
.dj-input-group .input-icon {
  position:   absolute;
  left:       var(--spacing-3);
  color:      var(--color-text-muted);
  font-size:  16px;
  pointer-events: none;
}
.dj-input-group .input-icon-right {
  left:  auto;
  right: var(--spacing-3);
}
.dj-input-group .input-icon-right ~ .dj-input {
  padding-left:  var(--spacing-3);
  padding-right: calc(var(--spacing-3) + 24px);
}

/* Messages d'erreur */
.dj-field-error {
  font-size: var(--font-size-xs);
  color:     var(--color-danger);
  margin-top:var(--spacing-1);
  display:   flex;
  align-items: center;
  gap:       var(--spacing-1);
}
.dj-field-help {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
  margin-top:var(--spacing-1);
}

/* Surcharge Bootstrap */
.form-control, .form-select {
  background-color: var(--color-bg-input) !important;
  color:            var(--color-text) !important;
  border-color:     var(--color-border-strong) !important;
  border-radius:    var(--radius-md) !important;
  font-size:        var(--font-size-sm) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-border-focus) !important;
  box-shadow:   0 0 0 3px var(--color-primary-subtle) !important;
}
.form-label {
  font-size:   var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  color:       var(--color-text-secondary) !important;
}


/* ============================================================
   11. BADGES & STATUTS
   ============================================================ */

.dj-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--spacing-1);
  padding:       2px 10px;
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semibold);
  border-radius: var(--radius-full);
  white-space:   nowrap;
  line-height:   1.6;
}

/* Couleurs de badge */
.dj-badge-primary   { background-color: var(--color-primary-subtle);   color: var(--color-primary); }
.dj-badge-success   { background-color: var(--color-success-subtle);   color: var(--color-success); }
.dj-badge-warning   { background-color: var(--color-warning-subtle);   color: var(--color-warning-text); }
.dj-badge-danger    { background-color: var(--color-danger-subtle);    color: var(--color-danger-text); }
.dj-badge-info      { background-color: var(--color-info-subtle);      color: var(--color-info-text); }
.dj-badge-secondary { background-color: var(--color-bg-hover);         color: var(--color-text-secondary); }

/* Statuts tontine */
.dj-badge-brouillon   { background-color: var(--color-bg-hover);         color: var(--color-text-muted); }
.dj-badge-ouvert      { background-color: var(--color-success-subtle);   color: var(--color-success); }
.dj-badge-en-cours    { background-color: var(--color-info-subtle);      color: var(--color-info); }
.dj-badge-complet     { background-color: var(--color-warning-subtle);   color: var(--color-warning-text); }
.dj-badge-suspendu    { background-color: var(--color-danger-subtle);    color: var(--color-danger); }
.dj-badge-termine     { background-color: var(--color-bg-hover);         color: var(--color-text-muted); }

/* Statuts cotisation */
.dj-badge-en-attente  { background-color: var(--color-warning-subtle);   color: var(--color-warning-text); }
.dj-badge-payee       { background-color: var(--color-success-subtle);   color: var(--color-success); }
.dj-badge-en-retard   { background-color: var(--color-danger-subtle);    color: var(--color-danger); }
.dj-badge-exoneree    { background-color: var(--color-secondary-subtle); color: var(--color-secondary); }

/* Indicateur point coloré */
.dj-dot {
  display:          inline-block;
  width:            8px;
  height:           8px;
  border-radius:    var(--radius-full);
  background-color: currentColor;
  flex-shrink:      0;
}


/* ============================================================
   12. TABLES
   ============================================================ */

.dj-table-wrapper {
  overflow-x:  auto;
  border:      1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-card);
}

.dj-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}
.dj-table thead th {
  padding:          var(--spacing-3) var(--spacing-4);
  text-align:       left;
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  color:            var(--color-text-muted);
  text-transform:   uppercase;
  letter-spacing:   0.05em;
  background-color: var(--color-bg-muted);
  border-bottom:    1px solid var(--color-border);
  white-space:      nowrap;
}
.dj-table thead th:first-child { border-radius: var(--radius-xl) 0 0 0; }
.dj-table thead th:last-child  { border-radius: 0 var(--radius-xl) 0 0; }

.dj-table tbody td {
  padding:       var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  color:         var(--color-text);
  vertical-align: middle;
}
.dj-table tbody tr:last-child td { border-bottom: none; }
.dj-table tbody tr:hover { background-color: var(--color-bg-hover); }


/* ============================================================
   13. ALERTES & MESSAGES DJANGO
   ============================================================ */

.dj-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--spacing-3);
  padding:       var(--spacing-4);
  border-radius: var(--radius-lg);
  border:        1px solid transparent;
  font-size:     var(--font-size-sm);
  margin-bottom: var(--spacing-4);
}
.dj-alert-icon  { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.dj-alert-body  { flex: 1; }
.dj-alert-title {
  font-weight:   var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}
.dj-alert-close {
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         currentColor;
  opacity:       0.5;
  font-size:     16px;
  padding:       0;
  transition:    opacity var(--transition-fast);
  flex-shrink:   0;
}
.dj-alert-close:hover { opacity: 1; }

.dj-alert-success {
  background-color: var(--color-success-subtle);
  border-color:     var(--color-success);
  color:            var(--color-success-text);
}
.dj-alert-warning {
  background-color: var(--color-warning-subtle);
  border-color:     var(--color-warning);
  color:            var(--color-warning-text);
}
.dj-alert-danger {
  background-color: var(--color-danger-subtle);
  border-color:     var(--color-danger);
  color:            var(--color-danger-text);
}
.dj-alert-info {
  background-color: var(--color-info-subtle);
  border-color:     var(--color-info);
  color:            var(--color-info-text);
}

/* Messages Django (adaptés automatiquement) */
.dj-alert.messages-success { @extend .dj-alert-success; }
.dj-alert.messages-error   { background-color: var(--color-danger-subtle); border-color: var(--color-danger); color: var(--color-danger-text); }
.dj-alert.messages-warning { background-color: var(--color-warning-subtle); border-color: var(--color-warning); color: var(--color-warning-text); }
.dj-alert.messages-info    { background-color: var(--color-info-subtle); border-color: var(--color-info); color: var(--color-info-text); }


/* ============================================================
   14. COMPOSANT MÉTIER — SCORE BADGE
   ============================================================ */

.dj-score-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          var(--spacing-2);
  padding:      var(--spacing-2) var(--spacing-3);
  border-radius:var(--radius-full);
  font-weight:  var(--font-weight-semibold);
  font-size:    var(--font-size-sm);
}
.dj-score-badge .score-value { font-size: var(--font-size-lg); }

.dj-score-debutant { background-color: var(--color-score-debutant-bg); color: var(--color-score-debutant); }
.dj-score-bronze   { background-color: var(--color-score-bronze-bg); color: var(--color-score-bronze); }
.dj-score-argent   { background-color: var(--color-score-argent-bg); color: var(--color-score-argent); }
.dj-score-or       { background-color: var(--color-score-or-bg); color: var(--color-score-or); }
.dj-score-platine  { background-color: var(--color-secondary-subtle); color: var(--color-score-platine); }

/* Jauge de score */
.dj-score-gauge {
  position:         relative;
  height:           8px;
  background-color: var(--color-border);
  border-radius:    var(--radius-full);
  overflow:         hidden;
}
.dj-score-gauge-fill {
  height:           100%;
  border-radius:    var(--radius-full);
  background:       linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition:       width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   15. COMPOSANT MÉTIER — KYC STATUS
   ============================================================ */

.dj-kyc-status {
  display:      inline-flex;
  align-items:  center;
  gap:          var(--spacing-2);
  font-size:    var(--font-size-xs);
  font-weight:  var(--font-weight-medium);
}

.dj-kyc-brouillon  { color: var(--color-text-muted); }
.dj-kyc-en-attente { color: var(--color-warning); }
.dj-kyc-en-cours   { color: var(--color-info); }
.dj-kyc-approuve   { color: var(--color-success); }
.dj-kyc-rejete     { color: var(--color-danger); }
.dj-kyc-expire     { color: var(--color-text-muted); }


/* ============================================================
   16. COMPOSANT MÉTIER — PROGRESSION DÉFIS
   ============================================================ */

.dj-defi-progress {
  background-color: var(--color-bg-card);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-xl);
  padding:          var(--spacing-4);
}
.dj-defi-progress-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   var(--spacing-3);
}
.dj-defi-progress-title {
  font-weight: var(--font-weight-semibold);
  font-size:   var(--font-size-sm);
  color:       var(--color-text);
}
.dj-defi-progress-pct {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
}
.dj-defi-progress-bar {
  height:           10px;
  background-color: var(--color-border);
  border-radius:    var(--radius-full);
  overflow:         hidden;
  margin-bottom:    var(--spacing-3);
}
.dj-defi-progress-fill {
  height:           100%;
  background:       linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius:    var(--radius-full);
  transition:       width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.dj-defi-progress-meta {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--font-size-xs);
  color:           var(--color-text-muted);
}

/* Badges de réussite */
.dj-defi-badge {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--spacing-1);
  padding:          var(--spacing-1) var(--spacing-2);
  background:       linear-gradient(135deg, var(--color-primary-subtle), var(--color-secondary-subtle));
  border:           1px solid var(--color-primary-light);
  border-radius:    var(--radius-md);
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  color:            var(--color-primary);
}


/* ============================================================
   17. COMPOSANT MÉTIER — PORTEFEUILLE
   ============================================================ */

.dj-wallet-card {
  background:    linear-gradient(135deg, var(--color-bg-sidebar), var(--color-wallet-gradient));
  border-radius: var(--radius-xl);
  padding:       var(--spacing-6);
  color:         var(--color-white);
  position:      relative;
  overflow:      hidden;
}
.dj-wallet-card::before {
  content:          '';
  position:         absolute;
  top:              -50%;
  right:            -20%;
  width:            200px;
  height:           200px;
  background:       radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
  border-radius:    var(--radius-full);
}
.dj-wallet-label {
  font-size:      var(--font-size-xs);
  opacity:        0.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dj-wallet-amount {
  font-size:   var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin:      var(--spacing-2) 0;
  line-height: 1;
}
.dj-wallet-currency {
  font-size: var(--font-size-lg);
  opacity:   0.7;
  margin-left: var(--spacing-2);
}
.dj-wallet-actions {
  display: flex;
  gap:     var(--spacing-3);
  margin-top: var(--spacing-5);
}
.dj-wallet-btn {
  display:          flex;
  align-items:      center;
  gap:              var(--spacing-2);
  padding:          var(--spacing-2) var(--spacing-4);
  background:       rgba(255,255,255,0.15);
  border:           1px solid rgba(255,255,255,0.2);
  border-radius:    var(--radius-md);
  color:            var(--color-white);
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-medium);
  cursor:           pointer;
  text-decoration:  none;
  transition:       background-color var(--transition-fast);
}
.dj-wallet-btn:hover {
  background:     rgba(255,255,255,0.25);
  color:          var(--color-white);
  text-decoration:none;
}


/* ============================================================
   18. PAGINATION
   ============================================================ */

.dj-pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--spacing-1);
  margin-top:      var(--spacing-6);
}
.dj-page-item {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-md);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-secondary);
  text-decoration: none;
  border:          1px solid var(--color-border);
  background-color:var(--color-bg-card);
  cursor:          pointer;
  transition:      all var(--transition-fast);
}
.dj-page-item:hover {
  border-color:     var(--color-primary);
  color:            var(--color-primary);
  text-decoration:  none;
}
.dj-page-item.active {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  color:            var(--color-text-on-primary);
}
.dj-page-item.disabled {
  opacity:          0.4;
  cursor:           not-allowed;
  pointer-events:   none;
}


/* ============================================================
   19. ÉTATS VIDES (EMPTY STATES)
   ============================================================ */

.dj-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  padding:        var(--spacing-12) var(--spacing-8);
  text-align:     center;
  color:          var(--color-text-muted);
}
.dj-empty-icon {
  font-size:     64px;
  margin-bottom: var(--spacing-4);
  opacity:       0.4;
}
.dj-empty-title {
  font-size:     var(--font-size-lg);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}
.dj-empty-desc {
  font-size:     var(--font-size-sm);
  max-width:     400px;
  margin-bottom: var(--spacing-6);
}


/* ============================================================
   20. UTILITAIRES
   ============================================================ */

/* Texte */
.text-primary   { color: var(--color-primary) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }

/* Truncate */
.dj-truncate {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Divider */
.dj-divider {
  height:     1px;
  background: var(--color-border);
  margin:     var(--spacing-4) 0;
}

/* Overlay mobile */
.dj-overlay {
  display:          none;
  position:         fixed;
  inset:            0;
  background-color: rgba(0,0,0,0.5);
  z-index:          calc(var(--z-sidebar) - 1);
  backdrop-filter:  blur(2px);
}
.dj-overlay.active { display: block; }

/* Loading spinner */
.dj-spinner {
  width:         24px;
  height:        24px;
  border:        3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation:     dj-spin 0.7s linear infinite;
  display:       inline-block;
}
@keyframes dj-spin {
  to { transform: rotate(360deg); }
}

/* Skeleton loading */
.dj-skeleton {
  background:        linear-gradient(90deg,
    var(--color-border) 25%,
    var(--color-bg-hover) 50%,
    var(--color-border) 75%
  );
  background-size:   200% 100%;
  animation:         dj-shimmer 1.5s infinite;
  border-radius:     var(--radius-md);
}
@keyframes dj-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Breadcrumb */
.dj-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-2);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  margin-bottom: var(--spacing-4);
}
.dj-breadcrumb a { color: var(--color-text-muted); }
.dj-breadcrumb a:hover { color: var(--color-primary); text-decoration: none; }
.dj-breadcrumb .current { color: var(--color-text); font-weight: var(--font-weight-medium); }
.dj-breadcrumb .sep { opacity: 0.4; }


/* ============================================================
   21. ANIMATIONS & TRANSITIONS
   ============================================================ */

/* Fade in */
@keyframes dj-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dj-fade-in {
  animation: dj-fade-in 0.2s ease forwards;
}

/* Slide in depuis la gauche (sidebar mobile) */
@keyframes dj-slide-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Pulse pour les badges de notification */
@keyframes dj-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}
.dj-pulse { animation: dj-pulse 2s ease infinite; }

/* Transition globale pour le changement de thème */
.dj-theme-transition,
.dj-theme-transition *,
.dj-theme-transition *::before,
.dj-theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease !important;
}


/* ============================================================
   22. RESPONSIVE — MOBILE FIRST
   ============================================================ */

/* Tablette (< 1024px) */
@media (max-width: 1023px) {
  .dj-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .dj-grid-4 { grid-template-columns: repeat(2, 1fr); }

  .dj-content { padding: var(--spacing-4); }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  /* Sidebar cachée par défaut — slide in au tap du hamburger */
  .dj-sidebar {
    transform: translateX(-100%);
    width:     var(--sidebar-width-mobile);
  }
  .dj-sidebar.open {
    transform: translateX(0);
    animation: dj-slide-in var(--transition-slow) ease;
  }

  .dj-main { margin-left: 0; }

  .dj-sidebar-toggle { display: flex; }

  /* Grilles */
  .dj-grid,
  .dj-grid-2,
  .dj-grid-3,
  .dj-grid-4 {
    grid-template-columns: 1fr;
  }

  /* Navbar */
  .dj-navbar-search { display: none; }
  .dj-navbar { padding: 0 var(--spacing-4); }

  /* Contenu */
  .dj-content { padding: var(--spacing-4) var(--spacing-3); }

  /* Cards */
  .dj-card-header { flex-direction: column; align-items: flex-start; }

  /* Table */
  .dj-table { font-size: var(--font-size-xs); }
  .dj-table thead th,
  .dj-table tbody td { padding: var(--spacing-2) var(--spacing-3); }

  /* Boutons sur mobile */
  .dj-btn-block-mobile { width: 100%; }

  /* Portefeuille */
  .dj-wallet-amount { font-size: var(--font-size-2xl); }
}

/* Très petit écran (< 375px) */
@media (max-width: 374px) {
  :root { --font-size-base: 0.875rem; }
  .dj-content { padding: var(--spacing-3) var(--spacing-2); }
}






/* ============================================================
   STATUT TRANSACTION — Partial HTMX polling
   À ajouter dans static/css/djangui.css
   ============================================================ */

/* Conteneur commun */
.statut-paiement {
  display: flex;
  align-items: flex-start;
  gap: var(--dj-space-4);
  padding: var(--dj-space-5);
  border-radius: var(--dj-radius-lg);
  border: 1px solid transparent;
}

/* Icône à gauche */
.statut-icone {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Corps texte */
.statut-corps {
  flex: 1;
}

.statut-titre {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: var(--dj-space-1);
}

.statut-detail {
  margin-bottom: var(--dj-space-2);
  color: var(--dj-text-secondary);
}

.statut-instruction {
  margin-bottom: var(--dj-space-1);
}

.statut-compteur {
  font-variant-numeric: tabular-nums;
}

.statut-redirect {
  font-size: 0.85rem;
}

/* ── Variante SUCCES ── */
.statut-succes {
  background-color: var(--dj-success-bg, #f0fdf4);
  border-color: var(--dj-success-border, #bbf7d0);
}

.statut-succes .statut-icone {
  color: var(--dj-success, #16a34a);
}

.statut-succes .statut-titre {
  color: var(--dj-success-dark, #15803d);
}

/* ── Variante ECHEC ── */
.statut-echec {
  background-color: var(--dj-danger-bg, #fef2f2);
  border-color: var(--dj-danger-border, #fecaca);
}

.statut-echec .statut-icone {
  color: var(--dj-danger, #dc2626);
}

.statut-echec .statut-titre {
  color: var(--dj-danger-dark, #b91c1c);
}

/* ── Variante EXPIRE ── */
.statut-expire {
  background-color: var(--dj-warning-bg, #fffbeb);
  border-color: var(--dj-warning-border, #fde68a);
}

.statut-expire .statut-icone {
  color: var(--dj-warning, #d97706);
}

.statut-expire .statut-titre {
  color: var(--dj-warning-dark, #b45309);
}

/* ── Variante ATTENTE ── */
.statut-attente {
  background-color: var(--dj-primary-bg, #eef2ff);
  border-color: var(--dj-primary-border, #c7d2fe);
}

.statut-attente .statut-icone {
  color: var(--dj-primary, #4f46e5);
}

.statut-attente .statut-titre {
  color: var(--dj-primary-dark, #3730a3);
}

/* ── Spinner rotation sur l'icône hourglass ── */
.statut-icone-spin {
  animation: dj-spin-hourglass 2s ease-in-out infinite;
}

@keyframes dj-spin-hourglass {
  0%   { transform: rotate(0deg);   opacity: 1;   }
  40%  { transform: rotate(0deg);   opacity: 0.6; }
  50%  { transform: rotate(180deg); opacity: 1;   }
  90%  { transform: rotate(180deg); opacity: 0.6; }
  100% { transform: rotate(360deg); opacity: 1;   }
}

/* ── Badges opérateur Mobile Money ── */
.badge-operateur {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--dj-radius-sm);
}

.badge-orange {
  background-color: #fff3cd;
  color: #d97706;
  border: 1px solid #fde68a;
}

.badge-mtn {
  background-color: #fef9c3;
  color: #ca8a04;
  border: 1px solid #fef08a;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .statut-succes {
  background-color: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.3);
}

[data-theme="dark"] .statut-echec {
  background-color: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .statut-expire {
  background-color: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.3);
}

[data-theme="dark"] .statut-attente {
  background-color: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.3);
}

[data-theme="dark"] .badge-orange {
  background-color: rgba(217, 119, 6, 0.2);
  color: #fbbf24;
  border-color: rgba(217, 119, 6, 0.4);
}

[data-theme="dark"] .badge-mtn {
  background-color: rgba(202, 138, 4, 0.2);
  color: #fde047;
  border-color: rgba(202, 138, 4, 0.4);
}