/* ============================================================
   RESPONSIVE — Support Mobile & Tablette Complet
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   TOPBAR : menu hamburger + collapse
────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Menu déroulant collapsé positionné sous la barre */
    .swift-topbar .navbar-collapse {
        background: var(--swift-dark);
        padding: 0.5rem 1rem 1rem;
        border-top: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .swift-topbar .navbar-collapse .nav-item {
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .swift-topbar .navbar-collapse .nav-item:last-child { border-bottom: none; }

    /* Barre de recherche pleine largeur dans le menu collapsé */
    .swift-search-group { width: 100%; }
    .swift-search-group .form-control { min-width: 100% !important; width: 100%; }
}

@media (max-width: 575.98px) {
    .swift-platform-label { display: none !important; }
    .swift-topbar .navbar-brand span.swift-brand-main { font-size: 1rem; }
}

/* ────────────────────────────────────────────────────────────
   ADMIN SIDEBAR : barre horizontale défilante sur mobile
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Empiler la sidebar au-dessus du contenu */
    .container-fluid.px-0 > .row.g-0 {
        flex-direction: column !important;
    }

    /* Transformer la sidebar en barre horizontale */
    .admin-sidebar {
        min-width: 0 !important;         /* override du style inline min-width:220px */
        width: 100% !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-right: none !important;
        border-bottom: 2px solid rgba(0,166,81,0.3);
    }
    .admin-sidebar::-webkit-scrollbar { display: none; }

    .admin-sidebar .nav-link {
        white-space: nowrap;
        font-size: 0.72rem !important;
        padding: 0.65rem 0.9rem !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-bottom: 2px solid transparent !important;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-shrink: 0;
    }
    .admin-sidebar .nav-link.active,
    .admin-sidebar .nav-link:hover {
        border-left: none !important;
        border-bottom: 2px solid var(--swift-green) !important;
        background: rgba(0,166,81,0.12) !important;
    }

    /* Masquer "ADMINISTRATION" et les séparateurs */
    .admin-sidebar > div:first-child,
    .admin-sidebar hr { display: none !important; }

    /* Contenu admin : padding réduit */
    .col.px-4.py-3 { padding: 1rem 0.75rem !important; }
}

/* Tablet (768px–991px) : sidebar légèrement plus étroite */
@media (min-width: 768px) and (max-width: 991.98px) {
    .admin-sidebar { min-width: 180px !important; }
    .admin-sidebar .nav-link { font-size: 0.8rem; padding: 0.55rem 1rem; }
}

/* ────────────────────────────────────────────────────────────
   SECTION TITLES & HEADERS
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .section-title { font-size: 1rem; }
    .swift-card-header h5,
    .swift-card-header h6 { font-size: 0.88rem; }
    .swift-card-header { padding: 0.75rem 1rem; }
}

/* ────────────────────────────────────────────────────────────
   STAT CARDS (Dashboard)
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .stat-card { padding: 0.85rem 0.75rem; gap: 0.6rem; }
    .stat-value { font-size: 1.35rem; }
    .stat-label { font-size: 0.68rem; }
    .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 10px; }
}

/* ────────────────────────────────────────────────────────────
   TABLES
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Swift tables (admin) */
    .swift-table { font-size: 0.76rem; }
    .swift-table thead th { font-size: 0.65rem; padding: 0.55rem 0.5rem; }
    .swift-table tbody td { padding: 0.55rem 0.5rem; }

    /* NAB tables (transaction history) */
    .nab-table thead th { padding: 0.55rem 0.5rem; font-size: 0.68rem; }
    .nab-table tbody td { padding: 0.6rem 0.5rem; font-size: 0.76rem; }

    /* Detail expandable panel */
    .detail-panel { padding: 1rem; }
    .detail-info-table td { padding: 0.3rem 0.5rem; font-size: 0.76rem; }
    .detail-info-table td:first-child { width: 110px; font-size: 0.72rem; }
}

/* ────────────────────────────────────────────────────────────
   TRANSACTION HISTORY — barre de filtres
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .swift-main-content .container-fluid > .row.mb-3 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Boutons Print/CSV/New Payment : wrappent sur mobile */
    .swift-main-content .d-flex.gap-2,
    .swift-main-content .d-flex.gap-3 {
        flex-wrap: wrap;
    }
}

/* ────────────────────────────────────────────────────────────
   GPI TIMELINE HORIZONTALE
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .gpi-timeline-wrapper { padding: 1rem 0.5rem; }
    .bank-card { padding: 0.65rem 0.6rem; font-size: 0.72rem; }
    .bank-card-name { font-size: 0.78rem; }
    .bank-card-type { font-size: 0.6rem; }
    .bank-bic-code { font-size: 0.68rem; }

    /* Barre de montants : empiler verticalement */
    .tracker-amounts-bar {
        flex-direction: column !important;
        gap: 0.5rem;
        padding: 0.85rem 1rem;
    }
    .amount-arrow { transform: rotate(90deg); align-self: center; }
}

/* ────────────────────────────────────────────────────────────
   LOGIN PAGE
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .login-card { margin: 0.75rem; max-width: calc(100vw - 1.5rem); }
    .login-card-header { padding: 1.5rem 1.25rem; }
    .login-card-body { padding: 1.25rem; }
    .login-page { padding: 1rem; }
}

/* ────────────────────────────────────────────────────────────
   FORM CARDS (New Payment, Admin forms)
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .swift-form-body { padding: 1rem; }
    .swift-form-header { padding: 1rem 1.25rem; }
    .swift-form-header h5 { font-size: 0.95rem; }
}

/* ────────────────────────────────────────────────────────────
   MODALS (Add Bank, etc.)
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .modal-dialog.modal-lg {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
    .modal-body { padding: 1rem; }
    .modal-footer { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
    .modal-content .row.g-3 > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ────────────────────────────────────────────────────────────
   BREADCRUMB
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .swift-breadcrumb { font-size: 0.72rem; }
    .swift-breadcrumb .container-fluid { padding: 0 0.75rem; }
}

/* ────────────────────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .swift-footer { font-size: 0.72rem; text-align: center; }
    .swift-footer .d-flex { flex-direction: column; gap: 0.25rem !important; }
}

/* ────────────────────────────────────────────────────────────
   ÉVITER LE DÉFILEMENT HORIZONTAL GLOBAL
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    .container-fluid { overflow-x: hidden; }
}