/* ============================================
   DASHBOARD - STYLES DESKTOP + MOBILE
   ============================================ */

 /* ==========================================
   STYLES COMMUNS (Desktop & Mobile)
   ========================================== */

 .dash-dashboard-section {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }

 .dash-balance-content {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 16px;
 }

 .dash-balance-icon {
     width: 60px;
     height: 60px;
     flex-shrink: 0;
     opacity: 0.4;
 }

 .dash-balance-icon svg {
     width: 100%;
     height: 100%;
 }

 /* ==========================================
   STYLES DESKTOP (par défaut)
   ========================================== */

 /* En-tête avec les deux cartes principales */
 .dash-header-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 20px;
 }

 /* Carte Cagnottes actives (Gauche - Violet) */
 .dash-campaigns-card {
     background: linear-gradient(135deg, #6648FE 0%, #B6ACFF 100%);
     border-radius: 16px;
     padding: 24px;
     color: white;
     box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
 }

 .dash-campaigns-label {
     font-size: 14px;
     opacity: 0.9;
     margin-bottom: 12px;
     font-weight: 400;
 }

 .dash-campaigns-count {
     font-size: 48px;
     font-weight: 700;
     line-height: 1;
     margin-bottom: 8px;
 }

 .dash-campaigns-total {
     font-size: 20px;
     opacity: 0.85;
 }

 /* Carte Solde disponible (Droite - Blanc) */
 .dash-balance-card {
     background: white;
     border-radius: 16px;
     padding: 24px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .dash-balance-label {
     font-size: 14px;
     color: #666;
     margin-bottom: 8px;
 }

 .dash-balance-amount {
     font-size: 32px;
     font-weight: 700;
     color: #1a1a1a;
     margin-bottom: 16px;
 }

 .dash-transfer-btn {
     padding: 8px 16px;
     background: #F2E8FF;
     border: 1px solid #6648FE;
     color: #6366f1;
     border-radius: 20px;
     font-size: 0.85rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
 }

 /* Carte "Créer une cagnotte" - CACHÉE sur desktop */
 .dash-create-card {
     display: none;
 }

 /* Section Statistiques */
 .dash-stats-section {
     background: white;
     border-radius: 16px;
     padding: 24px;
     margin-bottom: 20px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }

 .dash-stats-header-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
 }

 .dash-stats-title {
     font-size: 18px;
     font-weight: 600;
     color: #1a1a1a;
     margin: 0;
 }

 /* Dropdown - VISIBLE sur desktop */
 .dash-period-selector {
     background: white;
     /* border: 1px solid #e0e0e0; */
     border-radius: 8px;
     padding: 8px 16px;
     font-size: 13px;
     color: #666;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 /* Tabs pills - CACHÉES sur desktop */
 .dash-period-tabs {
     display: none;
 }

 .dash-stats-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
 }

 /* Partie gauche - Montant collecté */
 .dash-stats-left {
     display: flex;
     flex-direction: column;
 }

 .dash-stat-label {
     font-size: 14px;
     color: #666;
     margin-bottom: 8px;
 }

 .dash-stat-amount {
     font-size: 32px;
     font-weight: 700;
     color: #1a1a1a;
     margin-bottom: 16px;
 }

 .dash-stat-details {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 13px;
     color: #666;
 }

 .dash-donations-count {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .dash-cagnots-count {
     display: flex;
     align-items: center;
     gap: 6px;
     color: #6817f5
 }

 .dash-red-dot {
     width: 8px;
     height: 8px;
     background: #ef4444;
     border-radius: 50%;
 }

 /* Partie droite - Donateurs */
 .dash-stats-right {
     display: flex;
     flex-direction: column;
 }

 .dash-donors-title {
     font-size: 14px;
     color: #666;
     margin-bottom: 12px;
 }

 .dash-progress-bar-container {
     height: 8px;
     background: #f0f0f0;
     border-radius: 4px;
     overflow: hidden;
     margin-bottom: 20px;
 }

 .dash-progress-fill {
     height: 100%;
     background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
     transition: width 0.3s ease;
 }

 .dash-chart-legend {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .dash-chart-item {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
 }

 .dash-chart-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .dash-dot-visible {
     background: #7c3aed;
 }

 .dash-dot-anonymous {
     background: #e5e7eb;
 }

 .dash-chart-label {
     flex: 1;
     color: #666;
 }

 .dash-chart-percentage {
     font-weight: 600;
     color: #1a1a1a;
 }

 /* Section Transactions récentes */
 .dash-transactions-section {
     background: white;
     border-radius: 16px;
     padding: 24px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }

 .dash-transactions-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .dash-transactions-title {
     font-size: 18px;
     font-weight: 600;
     color: #1a1a1a;
     margin: 0;
 }

 .dash-view-all-btn {
     color: #7c3aed;
     font-size: 13px;
     text-decoration: none;
     font-weight: 500;
     transition: opacity 0.3s ease;
 }

 .dash-view-all-btn:hover {
     opacity: 0.8;
 }

 /* Liste des transactions */
 .dash-transaction-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .dash-transaction-item {
     display: flex;
     align-items: center;
     padding: 16px;
     border: 1px solid #f0f0f0;
     border-radius: 12px;
     transition: background 0.2s ease;
 }

 .dash-transaction-item:hover {
     background: #fafafa;
 }

 .dash-transaction-icon {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 16px;
     flex-shrink: 0;
 }

 .dash-icon-deposit {
     background: #dcfce7;
 }

 .dash-icon-deposit svg {
     width: 20px;
     height: 20px;
     fill: #16a34a;
 }

 .dash-icon-withdraw {
     background: #fef3c7;
 }

 .dash-icon-withdraw svg {
     width: 20px;
     height: 20px;
     fill: #f59e0b;
 }

 .dash-transaction-info {
     flex: 1;
     min-width: 0;
 }

 .dash-transaction-title {
     font-size: 14px;
     font-weight: 500;
     color: #1a1a1a;
     margin-bottom: 4px;
 }

 .dash-transaction-date {
     font-size: 12px;
     color: #999;
 }

 .dash-transaction-right {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 4px;
     flex-shrink: 0;
 }

 .dash-transaction-status {
     font-size: 11px;
     padding: 4px 10px;
     border-radius: 12px;
     font-weight: 500;
 }

 .dash-status-completed,
 .status-completed {
     background: #dcfce7;
     color: #16a34a;
 }

 .dash-status-pending,
 .status-pending {
     background: #fef3c7;
     color: #f59e0b;
 }

 .dash-transaction-amount {
     font-size: 14px;
     font-weight: 600;
 }

 .dash-amount-positive {
     color: #16a34a;
 }

 .dash-amount-negative {
     color: #333;
 }

 .dash-no-transactions {
     text-align: center;
     padding: 32px;
     color: #999;
     font-size: 14px;
 }

 /* ==========================================
   STYLES MOBILE (Media Queries)
   ========================================== */

 @media (max-width: 768px) {

     body {
         background: #f5f5f7;
     }

     .dash-dashboard-section {
         padding: 0;
     }

     /* RÉORGANISATION : Solde en premier, puis 2 cartes */
     .dash-header-cards {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 12px;
         margin-bottom: 16px;
         padding: 0 16px;
     }

     /* Carte Cagnottes - Reste à gauche */
     .dash-campaigns-card {
         background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
         border-radius: 12px;
         padding: 20px;
         min-height: 140px;
         box-shadow: 0 2px 12px rgba(124, 58, 237, 0.2);
         /* Ordre 2 pour mobile */
         order: 2;
     }

     .dash-campaigns-label {
         font-size: 14px;
         opacity: 0.95;
         margin-bottom: 8px;
         font-weight: 500;
     }

     .dash-campaigns-count {
         font-size: 48px;
         font-weight: 700;
         line-height: 1;
         margin-bottom: 4px;
     }

     .dash-campaigns-total {
         font-size: 13px;
         opacity: 0.85;
     }

     /* Carte Solde - Pleine largeur EN HAUT */
     .dash-balance-card {
         background: white;
         border-radius: 12px;
         padding: 20px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         /* Ordre 1 pour mobile - apparaît en premier */
         order: 1;
         /* Prend les 2 colonnes (pleine largeur) */
         grid-column: 1 / -1;
         margin: 0 16px 16px 16px;
         position: relative;
     }

     .dash-balance-label {
         font-size: 13px;
         color: #8e8e93;
         margin-bottom: 6px;
     }

     .dash-balance-amount {
         font-size: 26px;
         font-weight: 700;
         color: #1d1d1f;
         line-height: 1.2;
     }

     .dash-balance-icon {
         width: 80px;
         height: 80px;
         opacity: 0.08;
         position: absolute;
         right: 20px;
         top: 50%;
         transform: translateY(-50%);
     }

     .dash-transfer-btn {
         width: auto;
         padding: 8px 20px;
         background: white;
         border: 1.5px solid #7c3aed;
         color: #7c3aed;
         border-radius: 20px;
         font-size: 13px;
         font-weight: 500;
     }

     /* ⭐ Carte "Créer une cagnotte" - VISIBLE sur mobile */
     .dash-create-card {
         display: flex !important;
         background: #f3f0ff;
         border-radius: 12px;
         padding: 20px;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
         min-height: 140px;
         cursor: pointer;
         /* Ordre 3 pour mobile - à droite */
         order: 3;
     }

     .dash-create-label {
         font-size: 13px;
         color: #1d1d1f;
         margin-bottom: 12px;
         font-weight: 500;
         line-height: 1.3;
     }

     .dash-create-icon {
         width: 48px;
         height: 48px;
         background: #7c3aed;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 28px;
         box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
     }

     /* Section Statistiques */
     .dash-stats-section {
         border-radius: 12px;
         padding: 20px 16px;
         margin: 0 16px 16px 16px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     }

     .dash-stats-header-top {
         margin-bottom: 16px;
     }

     .dash-stats-title {
         font-size: 17px;
         font-weight: 600;
         color: #1d1d1f;
     }

     /* ⭐ CACHER le dropdown sur mobile */
     .dash-period-selector {
         display: none !important;
     }

     /* ⭐ AFFICHER les tabs pills sur mobile */
     .dash-period-tabs {
         display: flex !important;
         gap: 8px;
         margin-bottom: 20px;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
     }

     .dash-period-tabs::-webkit-scrollbar {
         display: none;
     }

     .dash-period-tab {
         padding: 6px 14px;
         background: white;
         border: 1px solid #e5e5ea;
         border-radius: 16px;
         font-size: 12px;
         color: #8e8e93;
         cursor: pointer;
         white-space: nowrap;
         transition: all 0.2s;
         flex-shrink: 0;
     }

     .dash-period-tab.active {
         background: #7c3aed;
         border-color: #7c3aed;
         color: white;
     }

     /* Stats content - Stack vertical */
     .dash-stats-content {
         display: flex;
         flex-direction: column;
         gap: 24px;
     }

     .dash-stat-label {
         font-size: 13px;
         color: #8e8e93;
         margin-bottom: 6px;
     }

     .dash-stat-amount {
         font-size: 28px;
         font-weight: 700;
         color: #1d1d1f;
         margin-bottom: 12px;
         letter-spacing: -0.5px;
         line-height: 1.1;
     }

     .dash-stat-details {
         font-size: 12px;
         color: #8e8e93;
         padding-bottom: 24px;
         border-bottom: 1px solid #f0f0f0;
     }

     .dash-donations-count {
         color: #1d1d1f;
     }

     .dash-red-dot {
         width: 6px;
         height: 6px;
         background: #ff3b30;
     }

     .dash-cagnots-count {
         color: #7c3aed;
         font-weight: 500;
     }

     .dash-donors-title {
         font-size: 13px;
         color: #8e8e93;
         margin-bottom: 10px;
     }

     .dash-progress-bar-container {
         height: 6px;
         background: #e5e5ea;
         margin-bottom: 16px;
     }

     .dash-progress-fill {
         background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
     }

     .dash-chart-item {
         font-size: 14px;
     }

     .dash-chart-label {
         color: #1d1d1f;
     }

     .dash-chart-percentage {
         color: #1d1d1f;
     }

     /* Transactions */
     .dash-transactions-section {
         border-radius: 12px;
         padding: 20px 16px;
         margin: 0 16px 80px 16px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     }

     .dash-transactions-title {
         font-size: 17px;
     }

     .dash-transaction-list {
         gap: 10px;
     }

     .dash-transaction-item {
         padding: 12px;
         background: #fafafa;
         border-radius: 10px;
     }

     .dash-transaction-icon {
         width: 38px;
         height: 38px;
         margin-right: 12px;
     }

     .dash-transaction-title {
         font-size: 13px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }

     .dash-transaction-amount {
         font-size: 13px;
         font-weight: 700;
     }

     /* Cacher la sidebar sur mobile */
     .sidebardash {
         display: none !important;
     }

     .col-xl-9.col-lg-9.col-md-12 {
         padding: 0;
     }

     .dashboard__content__wraper {
        /* padding-left: 0;
        padding-right: 0; */
        padding-top: 16px;
        padding-bottom: 16px;
        width: 100%;
        box-sizing: border-box;
    }

     .dashboard {
        padding-top: 0;
    }
 }

 /* Très petits écrans */
 @media (max-width: 374px) {

     .dash-balance-amount,
     .dash-stat-amount {
         font-size: 24px;
     }

     .dash-campaigns-count {
         font-size: 42px;
     }
 }