/* =====================================================================
   SchoolMboa — Charte graphique v2 (globale, réutilisable)
   Bleu = primaire. Vert/ambre/rouge = SÉMANTIQUES uniquement.
   À plat : aucun dégradé décoratif (foncé = --mboa-blue-deep).
   Utilisez les variables --mboa-* et les classes .mboa-* partout.
   ===================================================================== */

:root {
    /* Bleu — primaire */
    --mboa-blue: #2563EB;
    --mboa-blue-dark: #1D4ED8;   /* survol */
    --mboa-blue-deep: #1E40AF;   /* accent foncé, remplace tout dégradé */
    --mboa-blue-soft: #DBEAFE;   /* fond badge / pastille */
    --mboa-blue-bg: #EFF6FF;     /* nav active, surfaces subtiles */

    /* Succès (vert) */
    --mboa-success: #16A34A;
    --mboa-success-text: #15803D;
    --mboa-success-soft: #DCFCE7;

    /* Info / temporel (ambre) */
    --mboa-warning: #D97706;
    --mboa-warning-text: #B45309;
    --mboa-warning-soft: #FEF3C7;

    /* Danger (rouge) */
    --mboa-danger: #DC2626;
    --mboa-danger-text: #B91C1C;
    --mboa-danger-soft: #FEE2E2;

    /* Neutres */
    --mboa-ink: #111827;
    --mboa-text: #374151;
    --mboa-muted: #6B7280;
    --mboa-line: #E5E7EB;
    --mboa-surface: #FFFFFF;
    --mboa-bg: #F9FAFB;
    --mboa-bg-2: #F3F4F6;

    /* WhatsApp — exception (≠ vert succès) */
    --mboa-wa: #25D366;
    --mboa-wa-dark: #1DA851;

    /* Formes */
    --mboa-radius: 12px;
    --mboa-radius-sm: 8px;
    --mboa-radius-pill: 999px;

    /* Alias sémantiques génériques (Statistic, KPI…) : couleur = remplissage/icône */
    --primary-color: var(--mboa-blue);
    --info-color: var(--mboa-blue);
    --success-color: var(--mboa-success);
    --warning-color: var(--mboa-warning);
    --error-color: var(--mboa-danger);
    --ink-color: var(--mboa-ink);
    --muted-color: var(--mboa-muted);
}

/* ====================== Normalisation AntDesign ====================== */

/* Bouton primaire → bleu charte (au lieu du bleu AntDesign par défaut) */
.ant-btn-primary {
    background: var(--mboa-blue);
    border-color: var(--mboa-blue);
}

    .ant-btn-primary:hover,
    .ant-btn-primary:focus {
        background: var(--mboa-blue-dark);
        border-color: var(--mboa-blue-dark);
    }

    .ant-btn-primary:active {
        background: var(--mboa-blue-deep);
        border-color: var(--mboa-blue-deep);
    }

/* Liens */
a {
    color: var(--mboa-blue);
}

    a:hover {
        color: var(--mboa-blue-dark);
    }

/* ====================== Conteneurs & cartes ====================== */

.mboa-page {
    background: var(--mboa-bg);
    color: var(--mboa-text);
}

/* Carte plate charte (à ajouter en Class sur une AntDesign.Card ou un div) */
.mboa-card {
    background: var(--mboa-surface);
    border: 1px solid var(--mboa-line);
    border-radius: var(--mboa-radius);
}

/* Titre de section */
.mboa-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--mboa-ink);
    margin: 0 0 16px;
}

    .mboa-section-title .anticon {
        color: var(--mboa-blue);
    }

/* En-tête de carte AntDesign → titre en encre */
.mboa-card .ant-card-head-title,
.academic-section .ant-card-head-title,
.financial-section .ant-card-head-title,
.operational-section .ant-card-head-title,
.establishment-section .ant-card-head-title,
.kpi-section .ant-card-head-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mboa-ink);
}

/* ====================== Barre de filtres ====================== */

.filter-card .ant-card-body {
    padding: 16px 24px;
}

.filter-item {
    margin-bottom: 0;
}

.filter-label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--mboa-text);
}

    .filter-label .anticon {
        margin-right: 8px;
        color: var(--mboa-blue);
    }

/* ====================== Cartes KPI ====================== */

.kpi-card {
    border-radius: var(--mboa-radius);
    border: 1px solid var(--mboa-line);
    transition: box-shadow .2s ease, transform .2s ease;
}

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(17, 24, 39, .08);
    }

.kpi-content {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 16px;
}

.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--mboa-radius-sm);
    background: var(--mboa-blue-soft);
    color: var(--mboa-blue);
    flex-shrink: 0;
}

.kpi-data {
    flex: 1;
}

/* Variantes sémantiques (aplats, pas de dégradés) */
.kpi-info .kpi-icon {
    background: var(--mboa-blue-soft);
    color: var(--mboa-blue);
}

.kpi-success .kpi-icon {
    background: var(--mboa-success-soft);
    color: var(--mboa-success);
}

.kpi-warning .kpi-icon {
    background: var(--mboa-warning-soft);
    color: var(--mboa-warning);
}

.kpi-error .kpi-icon {
    background: var(--mboa-danger-soft);
    color: var(--mboa-danger);
}

/* ====================== Élément de performance / ligne ====================== */

.performance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--mboa-bg);
    border: 1px solid var(--mboa-line);
    border-radius: var(--mboa-radius-sm);
}

/* ====================== Badges (pilule : fond -soft + texte -text) ====================== */

.mboa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--mboa-radius-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.mboa-badge--info {
    background: var(--mboa-blue-soft);
    color: var(--mboa-blue-dark);
}

.mboa-badge--success {
    background: var(--mboa-success-soft);
    color: var(--mboa-success-text);
}

.mboa-badge--warning {
    background: var(--mboa-warning-soft);
    color: var(--mboa-warning-text);
}

.mboa-badge--danger {
    background: var(--mboa-danger-soft);
    color: var(--mboa-danger-text);
}

/* ====================== Utilitaires texte (variante -text pour la lisibilité) ====================== */

.mboa-ink {
    color: var(--mboa-ink) !important;
}

.mboa-text {
    color: var(--mboa-text) !important;
}

.mboa-muted {
    color: var(--mboa-muted) !important;
}

.mboa-txt-blue {
    color: var(--mboa-blue) !important;
}

.mboa-txt-success {
    color: var(--mboa-success-text) !important;
}

.mboa-txt-warning {
    color: var(--mboa-warning-text) !important;
}

.mboa-txt-danger {
    color: var(--mboa-danger-text) !important;
}

/* ====================== Responsive commun ====================== */

@media (max-width: 768px) {
    .filter-item .ant-select,
    .filter-item .ant-picker {
        margin-bottom: 16px;
    }

    .kpi-content {
        flex-direction: column;
        text-align: center;
    }

        .kpi-content .kpi-icon {
            margin-bottom: 12px;
        }
}

@media (max-width: 576px) {
    .ant-col {
        margin-bottom: 8px;
    }
}