/* =========================================================
   1. STYLES GÉNÉRAUX (Structure & Typographie)
   ========================================================= */

.bgc-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #334155; /* Gris foncé moderne */
    background: #fff;
}
.bgc-wrap h2, .bgc-wrap h3 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
}

/* Grilles */
.bgc-grid { display: grid; gap: 20px; }
.bgc-grid-1 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.bgc-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.bgc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bgc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Responsive */
@media (max-width: 768px) {
    .bgc-grid-2, .bgc-grid-3, .bgc-grid-4 { grid-template-columns: 1fr; }
}

/* Alertes */
.bgc-alert { padding: 12px 16px; border-radius: 8px; font-size: .95em; margin-bottom: 20px; border-left: 4px solid; }
.bgc-alert.bgc-ok { background: #f0fdf4; border-color: #22c55e; color: #15803d; } /* Vert */
.bgc-alert.bgc-warn { background: #fffbeb; border-color: #f59e0b; color: #b45309; } /* Jaune */

/* =========================================================
   2. COMPOSANTS UI (Boutons, Tableaux, Pagination)
   ========================================================= */

/* Tables */
.bgc-table { width:100%; border-collapse:separate; border-spacing: 0; border: 1px solid #e2e8f0; border-radius:8px; overflow:hidden; margin-top:15px; }
.bgc-table th, .bgc-table td { border-bottom:1px solid #e2e8f0; padding:12px 15px; text-align:left; vertical-align:middle; }
.bgc-table th { background:#f8fafc; font-weight:600; color:#475569; text-transform:uppercase; font-size:12px; letter-spacing:0.5px; }
.bgc-table tr:last-child td { border-bottom: none; }
.bgc-table tr:hover td { background:#f1f5f9; }

/* Boutons d'icônes (Actions) */
.bgc-iconbtn {
    background:#fff; border:1px solid #cbd5e1; border-radius:6px; cursor:pointer;
    width: 32px; height: 32px; display:inline-flex; align-items:center; justify-content:center; transition:.2s;
    color: #64748b;
}
.bgc-iconbtn:hover { background:#f1f5f9; color:#1e293b; border-color:#94a3b8; }
.bgc-iconbtn.approve:hover { background:#dcfce7; color:#16a34a; border-color:#86efac; }
.bgc-iconbtn.reject:hover { background:#fee2e2; color:#dc2626; border-color:#fca5a5; }
.bgc-iconbtn .dashicons { font-size:16px; width:16px; height:16px; }

/* Pagination */
.bgc-pagination { margin-top: 30px; text-align: center; }
.bgc-pagination ul { display: inline-flex; list-style: none; gap: 5px; padding: 0; margin: 0; }
.bgc-pagination a, .bgc-pagination span { 
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; border-radius: 6px; color: #475569; text-decoration: none; font-weight:600; 
    transition: all 0.2s;
}
.bgc-pagination a:hover { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; }
.bgc-pagination .current { background: #3b82f6; color: #fff; border-color: #3b82f6; }


/* =========================================================
   3. LIENS RAPIDES (Quick Links - Dashboard)
   ========================================================= */

.bgc-quick {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 20px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 20px;
}

.bgc-q-item {
    display: inline-flex; align-items: center; padding: 10px 16px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    text-decoration: none; font-weight: 600; color: #334155; font-size: 14px;
    transition: all 0.2s ease;
}

.bgc-q-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.bgc-q-item .dashicons {
    margin-right: 10px; font-size: 18px; color: #94a3b8; transition: color 0.2s;
}

/* Couleurs spécifiques par rôle */
.bgc-role--gamer .bgc-q-item:hover { border-color: #F97316; color: #C2410C; background: #FFF7ED; }
.bgc-role--gamer .bgc-q-item .dashicons { color: #F97316; } /* Orange Gamer */

.bgc-role--publisher .bgc-q-item:hover { border-color: #d946ef; color: #a21caf; background: #fdf4ff; }
.bgc-role--publisher .bgc-q-item .dashicons { color: #d946ef; } /* Violet Publisher */

.bgc-role--retailer .bgc-q-item:hover { border-color: #10b981; color: #047857; background: #ecfdf5; }
.bgc-role--retailer .bgc-q-item .dashicons { color: #10b981; } /* Vert Retailer */

.bgc-role--admin .bgc-q-item:hover { border-color: #ef4444; color: #b91c1c; background: #fef2f2; }
.bgc-role--admin .bgc-q-item .dashicons { color: #ef4444; } /* Rouge Admin */

/* Onglet actif */
.bgc-q-item.is-active { background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; box-shadow: inset 0 2px 4px rgba(0,0,0,0.03); }


/* =========================================================
   4. WIDGETS DASHBOARD (Sales & To Do)
   ========================================================= */

/* Bloc de ventes (Publisher) */
.bgc-sales-box { margin-top: 24px; padding: 25px; }
.bgc-sales-tabs { display: flex; gap: 15px; border-bottom: 2px solid #f1f5f9; margin-bottom: 20px; }
.bgc-sales-tabs .bgc-tab-link {
    padding: 8px 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
    color: #64748b; font-weight: 600; text-decoration: none; cursor: pointer;
}
.bgc-sales-tabs .bgc-tab-link.is-active { color: #3b82f6; border-color: #3b82f6; }
.bgc-sales-content .bgc-tab-pane { display: none; }
.bgc-sales-content .bgc-tab-pane.is-active { display: block; animation: fadeIn 0.3s; }
.bgc-sales-value { font-size: 32px; font-weight: 800; color: #0f172a; letter-spacing: -1px; }

/* Cartes "To Do" (Admin) */
.bgc-todo-card {
    display: flex; align-items: center; gap: 15px;
    background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #eab308;
    border-radius: 8px; padding: 15px 20px; text-decoration: none; color: #334155;
    transition: transform 0.2s;
}
.bgc-todo-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.bgc-todo-count {
    background: #eab308; color: #fff; font-weight: 700; font-size: 13px;
    width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.bgc-todo-label { font-weight: 600; flex-grow: 1; }
.bgc-todo-action { font-size: 12px; color: #0073aa; font-weight: 600; display: flex; align-items: center; }


/* =========================================================
   5. PANIER VIDE (Suggestion Produits)
   ========================================================= */

.bgc-empty-cart-products { margin-top: 50px; padding-top: 30px; border-top: 1px solid #e2e8f0; }
.bgc-empty-cart-products h2 { text-align: center; font-size: 24px; margin-bottom: 30px; }

/* On réutilise la grille catalogue mais adaptée */
.bgc-empty-cart-products .bgc-grid-catalog {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
    list-style: none !important; padding: 0 !important; margin: 0 !important;
}

/* =========================================================
   6. ANIMATIONS & UTILITAIRES
   ========================================================= */

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bgc-spin { to { transform: rotate(360deg); } }

/* Panier Flottant (Gamer) */
.bgc-floating-cart {
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
    background: #F97316; /* Orange Gamer */
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3); z-index: 9999;
    transition: transform 0.2s; text-decoration: none;
}
.bgc-floating-cart:hover { transform: scale(1.1); background: #ea580c; }
.bgc-floating-cart .dashicons { color: #fff; font-size: 28px; width: 28px; height: 28px; }

.bgc-cart-count-bubble {
    position: absolute; top: -2px; right: -2px;
    background: #fff; color: #F97316; border: 2px solid #F97316;
    font-size: 12px; font-weight: 800; width: 22px; height: 22px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.bgc-cart-count-bubble.hidden { display: none; }

/* =========================================================
   MOBILE OPTIMIZATIONS
   ========================================================= */

@media (max-width: 768px) {
    
    /* 1. Menu Dashboard (Quick Links) : Scroll Horizontal */
    .bgc-quick {
        display: flex;
        flex-wrap: nowrap; /* Empêche le retour à la ligne */
        overflow-x: auto;  /* Active le scroll horizontal */
        gap: 10px;
        padding: 10px;
        -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */
        scrollbar-width: none; /* Cache la scrollbar (Firefox) */
    }
    /* Cache la scrollbar (Chrome/Safari) */
    .bgc-quick::-webkit-scrollbar { display: none; }

    .bgc-q-item {
        flex: 0 0 auto; /* Ne pas écraser la largeur */
        font-size: 13px;
        padding: 8px 12px;
        white-space: nowrap;
    }

    /* 2. Tableaux : Scroll Horizontal pour ne pas casser le design */
    .bgc-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* 3. Grilles : 1 colonne sur mobile */
    .bgc-grid-2, .bgc-grid-3, .bgc-grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Cartes de stats */
    .bgc-stats-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes pour les stats */
    }
}