/* ================================================================
   BUDGEE FAMILY — Mobile Responsive CSS
   Règles actives uniquement en dessous de 992px / 768px / 480px.
   NE MODIFIE PAS le rendu desktop (aucune règle sans media query).
   ================================================================ */

/* ── 1. LAYOUT GLOBAL ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Titres de page */
    h2 {
        font-size: 1.25rem;
    }

    /* En-têtes de page : titre + bouton(s) → wrap */
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 > div,
    .d-flex.justify-content-between.align-items-center.mb-4 > a {
        flex-shrink: 1;
    }
}

/* ── 2. STATS CARDS (dashboard, balance) ───────────────────────── */
@media (max-width: 767px) {
    /* 2 cartes par ligne au lieu de 4 */
    .row.mb-4 > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Valeurs plus petites */
    .stat-card .card-body h2 {
        font-size: 1.2rem;
    }
    .stat-card .card-body h6 {
        font-size: 0.68rem;
    }

    /* 3 cartes de solde (balance.html) → 1 par ligne */
    .row.mb-4 > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ── 3. DASHBOARD — COLONNES FIXES DES LISTES ─────────────────── */
@media (max-width: 768px) {
    /* Colonne date (100px, 120px, 80px) */
    .dashboard-date-col {
        width: 72px !important;
        min-width: 72px !important;
        font-size: 0.72rem;
    }

    /* Colonne montant (200px, 150px) */
    .dashboard-amount-col {
        width: auto !important;
        min-width: 0 !important;
        font-size: 0.85rem;
    }

    /* Nom de l'élément */
    .item-label {
        max-width: 100% !important;
        font-size: 0.85rem;
    }

    /* Boutons export dans les card-headers : cachés sur mobile */
    .card-header .btn-group.btn-group-sm {
        display: none !important;
    }

    /* Card footer : boutons plus compacts */
    .card-footer {
        padding: 0.5rem 0.75rem;
    }
    .card-footer .btn {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }

    /* Card header : titre réduit */
    .card-header h5 {
        font-size: 0.9rem;
    }
}

/* ── 4. TABLEAUX ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* S'assure que le scroll horizontal est propre */
    .table-responsive {
        border: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Taille du texte dans les tableaux */
    .table td,
    .table th {
        font-size: 0.82rem;
        padding: 0.4rem 0.5rem;
        white-space: nowrap;
    }

    /* Boutons d'action dans les tableaux */
    .table .btn-group .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.78rem;
    }
}

/* ── 5. FORMULAIRES DE FILTRE ───────────────────────────────────── */
@media (max-width: 768px) {
    /* Les selects dans les filtres prennent toute la largeur */
    .card .card-body form.row.g-3 .col-md-2,
    .card .card-body form.row.g-3 .col-md-3,
    .card .card-body form.row.g-3 .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── 6. PAGE D'ACCUEIL — ILLUSTRATIONS ─────────────────────────── */
@media (max-width: 991px) {
    /* Cacher les illustrations sur mobile/tablette, garder le texte */
    .col-lg-6.order-lg-1:has(.position-relative) {
        display: none !important;
    }

    /* Les colonnes texte prennent toute la largeur */
    .col-lg-6.order-lg-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-lg-6.order-lg-1.order-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Fallback sans :has() pour les navigateurs anciens */
@supports not selector(:has(*)) {
    @media (max-width: 991px) {
        /* Cacher le premier col-lg-6 de chaque section héro */
        .row.align-items-center.py-5.my-5 > .col-lg-6:first-child {
            display: none !important;
        }
        .row.align-items-center.py-5.my-5 > .col-lg-6:last-child {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
}

/* ── 7. MODALS ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Modal preview documents */
    .document-preview-modal .modal-dialog {
        max-width: calc(100vw - 1rem) !important;
        max-height: 95vh !important;
        margin: 0.25rem auto !important;
    }
}

/* ── 8. GRAPHIQUES ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    canvas {
        max-height: 220px !important;
    }
}

/* ── 9. PAGINATION ─────────────────────────────────────────────── */
@media (max-width: 576px) {
    .pagination {
        flex-wrap: wrap;
        gap: 0.2rem;
    }
    .page-link {
        padding: 0.3rem 0.55rem;
        font-size: 0.85rem;
    }
}

/* ── 10. PRICING ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pricing-card:hover {
        transform: none; /* désactiver l'effet scale sur mobile */
    }

    /* Les cards de tarif prennent toute la largeur */
    .row > [class*="col-md"] > .pricing-card {
        margin-bottom: 1rem;
    }
}

/* ── 11. BALANCE.HTML — TABLEAU TRANSACTIONS ────────────────────── */
@media (max-width: 768px) {
    /* Navigation mois : boutons + select en pleine largeur */
    .input-group .form-select {
        min-width: 0;
    }

    /* Filtre année + état sur la même ligne (50/50) */
    #filterForm .col-md-2,
    #filterForm .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #filterForm .col-md-4:first-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #filterForm .col-md-3.d-flex {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── 12. PAGES DÉTAIL (icônes fixes) ────────────────────────────── */
@media (max-width: 768px) {
    /* Réduire les grandes icônes circulaires */
    [style*="width: 100px; height: 100px"],
    [style*="width: 80px; height: 80px"] {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
    }

    /* Ajuster le padding des pages détail */
    .container.py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ── 13. NOTIFICATIONS ──────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Alignement des badges de notification */
    .list-group-item .d-flex.align-items-start {
        gap: 0.5rem;
    }
}

/* ── 14. BOUTONS EN PIED DE PAGE ────────────────────────────────── */
@media (max-width: 480px) {
    /* Le bouton retour ne gêne pas le contenu */
    .btn.position-fixed.bottom-0.start-0 {
        width: 42px !important;
        height: 42px !important;
    }
}