/* ============================================
    RESPONSIVE GLOBAL — TABLET (≤1024px)
============================================ */
@media (max-width: 1024px) {
    /* Le tiroir (drawer) passe AU-DESSUS du top-bar (200) ET des pages en plein
       écran mobile (Chat inter-agences / Chat client : position:fixed dans
       .content-container zoomé → leur z-index ~1000 « remonte » ; cf. style.css).
       1200 > 1000 pour que « Menu » ne s'ouvre plus derrière le chat. */
    .sidebar { transform: translateX(-100%); z-index: 1200; }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; width: 100%; }
    .mobile-toggle { display: block; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* TABLETTE + mobile : tableaux -> FICHES (sinon, sur tablette, les colonnes et les
   BOUTONS D'ACTION debordent et sont coupes). Format fiches deja valide. */
@media (max-width: 1024px) {
    .table-as-cards thead, .data-table thead, .factures-table thead, .reg-table thead, .daily-table thead, .chauffeurs-table thead, .am__table thead, .rdv-table thead { display: none; }
    .table-as-cards tbody tr, .data-table tr, .factures-table tr, .reg-table tr, .daily-table tr, .chauffeurs-table tr, .am__table tr, .rdv-table tr {
        display: block; background: white !important; border-radius: 10px; border: 1px solid #e2e8f0; margin-bottom: 8px; padding: 6px 10px; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.04);
    }
    .table-as-cards tbody td, .data-table td, .factures-table td, .reg-table td, .daily-table td, .chauffeurs-table td, .am__table td, .rdv-table td {
        display: flex; justify-content: space-between; align-items: center; text-align: right; border: none; padding: 5px 2px !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 11.5px;
    }
    .table-as-cards tbody td:last-child, .data-table td:last-child, .factures-table td:last-child, .reg-table td:last-child, .daily-table td:last-child, .chauffeurs-table td:last-child, .am__table td:last-child, .rdv-table td:last-child { border-bottom: none !important; }
    .table-as-cards tbody td::before, .data-table td::before, .factures-table td::before, .reg-table td::before, .daily-table td::before, .chauffeurs-table td::before, .am__table td::before, .rdv-table td::before {
        content: attr(data-label); font-weight: 600; color: #64748b; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; padding-right: 10px; flex-shrink: 0;
    }
    .row-actions, .td-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; max-width: 100% !important; margin-top: 5px; }
    .search-filter { min-width: 0; width: 100%; }
}

/* ============================================
    OVERLAY SIDEBAR MOBILE
============================================ */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    /* AU-DESSUS du top-bar (200) et des chats plein écran (~1000) pour que le clic
       dans le vide ferme le menu partout, et JUSTE SOUS le tiroir (1200). */
    z-index: 1199;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block; }

/* ============================================
    BOTTOM NAVIGATION MOBILE
============================================ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: white;
    border-top: 1px solid #e2e8f0;
    z-index: 150;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    transition: color 0.15s;
    position: relative;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item i {
    font-size: 20px;
    line-height: 1;
}

.bottom-nav-item.active {
    color: #1d4ed8;
}

.bottom-nav-item.active::after {
    content: '';
    position: absolute;
    top: 6px;
    width: 4px;
    height: 4px;
    background: #dc2626;
    border-radius: 50%;
    display: none; 
}

.nav-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 20px);
    background: #ef4444;
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    line-height: 14px;
    border: 1.5px solid white;
}

/* ============================================
    FAB — BOUTON ACTION PRINCIPAL
============================================ */
.fab-btn {
    display: none;
    position: fixed;
    bottom: 72px;
    right: 16px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #1d4ed8 0%, #dc2626 100%);
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    z-index: 148;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.45);
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.fab-btn:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.35);
}

/* ============================================
    RESPONSIVE — MOBILE (≤768px)
============================================ */
@media (max-width: 768px) {
    /* Le menu doit passer AU-DESSUS du voile sombre (.sidebar-overlay z-index:1199)
       ET des chats plein écran (~1000) sinon il s'ouvre derrière eux. */
    .sidebar { width: 82vw; max-width: 290px; z-index: 1200; }
    .sidebar.open { z-index: 1200; }
    .main-content { margin-left: 0; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .top-bar { padding: 10px 14px; height: 52px; }
    .page-title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
    #userName { display: none; }
    .content-container { padding: 12px 14px; }
    
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
    .stat-card { padding: 14px; border-radius: 14px; }
    .stat-value { font-size: 22px; }
    .stat-label { font-size: 11px; }
    .stat-icon { width: 38px; height: 38px; font-size: 18px; margin-bottom: 10px; }

    .form-grid { grid-template-columns: 1fr; gap: 14px; }
    .form-group.full-width { grid-column: 1; }
    .form-card { padding: 16px; border-radius: 14px; }
    
    .form-group label { font-size: 11px; }
    .form-group input, .form-group select, .form-group textarea { font-size: 13px; padding: 8px 12px; }

    .tabs-header { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs-header::-webkit-scrollbar { display: none; }
    .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
    .data-table th { font-size: 10px; padding: 10px 12px; }
    .data-table td { font-size: 12px; padding: 10px 12px; }

    /* Transformation Tableaux -> Cartes */
    .table-as-cards thead, .data-table thead, .factures-table thead, .reg-table thead, .daily-table thead, .chauffeurs-table thead, .am__table thead, .rdv-table thead { display: none; }
    
    .table-as-cards tbody tr, .data-table tr, .factures-table tr, .reg-table tr, .daily-table tr, .chauffeurs-table tr, .am__table tr, .rdv-table tr {
        display: block; background: white !important; border-radius: 10px; border: 1px solid #e2e8f0; margin-bottom: 8px; padding: 6px 10px; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.04);
    }
    .table-as-cards tbody td, .data-table td, .factures-table td, .reg-table td, .daily-table td, .chauffeurs-table td, .am__table td, .rdv-table td {
        display: flex; justify-content: space-between; align-items: center; text-align: right; border: none; padding: 5px 2px !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 11.5px;
    }
    .table-as-cards tbody td:last-child, .data-table td:last-child, .factures-table td:last-child, .reg-table td:last-child, .daily-table td:last-child, .chauffeurs-table td:last-child, .am__table td:last-child, .rdv-table td:last-child {
        border-bottom: none !important;
    }
    .table-as-cards tbody td::before, .data-table td::before, .factures-table td::before, .reg-table td::before, .daily-table td::before, .chauffeurs-table td::before, .am__table td::before, .rdv-table td::before {
        content: attr(data-label); font-weight: 600; color: #64748b; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; padding-right: 10px; flex-shrink: 0;
    }
    
    .data-table td > *, .factures-table td > * { max-width: 65%; text-align: right; }
    .row-actions, .td-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; max-width: 100% !important; margin-top: 5px; }
    /* Le filtre de recherche (min-width 250px par défaut) débordait sur petit écran. */
    .search-filter { min-width: 0; width: 100%; }

    /* Reset pour les cartes ultra-compactes */
    tr.compact-row { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; margin-bottom: 12px !important; }
    tr.compact-row td { padding: 0 !important; border: none !important; width: 100% !important; }
    tr.compact-row td::before { display: none !important; }

    /* Modales Mobile */
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-content { border-radius: 20px 20px 0 0; max-width: 100%; width: 100%; max-height: 90vh; padding: 8px 18px 32px; position: relative; margin: auto auto 0 auto !important; animation: slideUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;}
    .modal-content::before { content: ''; display: block; width: 36px; height: 4px; background: #e2e8f0; border-radius: 2px; margin: 8px auto 16px; }
    @keyframes slideUpModal { from { transform: translateY(100%); } to { transform: translateY(0); } }

    .btn { min-height: 40px; padding: 10px 16px; font-size: 12px; }
    
    .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 65px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-top: 1px solid #e2e8f0; z-index: 990; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 15px rgba(0,0,0,0.03); }
    .fab-btn { display: flex; position: fixed; bottom: 85px; right: 16px; width: 56px; height: 56px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 50%; border: none; color: white; font-size: 24px; cursor: pointer; z-index: 980; box-shadow: 0 6px 16px rgba(59,130,246,0.4); align-items: center; justify-content: center; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .fab-btn:active { transform: scale(0.9); }
    .mobile-toggle { display: none; }
}

/* Pages de scan (cockpit) : on masque le bouton flottant + (il chevauchait la
   caméra et n'a aucune action utile sur ces écrans). */
body:has(.sw-page) .fab-btn { display: none !important; }

/* ============================================
    DESKTOP : Cacher éléments purement mobile
============================================ */
@media (min-width: 769px) {
    .bottom-nav { display: none !important; }
    .fab-btn    { display: none !important; }
    .sidebar-overlay { display: none !important; }
    .mobile-toggle { display: block; }
}
/* ── Totaux/KPI des pages de SCAN : compacts sur mobile (gagne de la place) ── */
/* Les compteurs (.sm__kpi : Total/Succès/Doublon/Erreur) restent sur UNE rangée
   de 4, en version réduite, au lieu de passer en 2 colonnes (2 rangées). */
@media (max-width: 640px) {
  .sm__kpi-row { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; margin: 10px 0 12px !important; }
  .sm__kpi { padding: 8px 3px 7px !important; border-radius: 10px !important; }
  .sm__kpi-val { font-size: 18px !important; margin-bottom: 1px !important; }
  .sm__kpi-lbl { font-size: 8.5px !important; letter-spacing: .02em !important; }
  /* Variante « cockpit » (fond sombre des scans) */
  .sw-page .sm__kpi-row { gap: 6px !important; margin: 10px 0 0 !important; }
  .sw-page .sm__kpi { padding: 8px 3px 7px !important; border-radius: 11px !important; }
  .sw-page .sm__kpi-val { font-size: 18px !important; }
  .sw-page .sm__kpi-lbl { font-size: 8px !important; margin-top: 3px !important; }
}

/* ============================================
   MOBILE (≤640px) — En-têtes & filtres compacts (GLOBAL, toutes les pages)
   - Masque les sous-titres descriptifs des en-têtes de page (ex. « Gestion des
     factures et colis envoyés ») : inutiles sur téléphone, ils prennent de la
     hauteur. On GARDE .cd-header__subtitle (tél + adresse du client dans sa fiche).
   - Resserre les zones de filtre partageant les classes génériques
     .filter-group / .filter-input / .filter-select : 2 colonnes au lieu d'un
     empilement vertical, libellés et champs réduits.
============================================ */
@media (max-width: 640px) {
    /* Sous-titres de page → masqués (sauf la fiche détail client) */
    [class$="-header__subtitle"]:not(.cd-header__subtitle),
    .am__subtitle, .al__subtitle, .ci-subtitle { display: none !important; }

    /* Filtres génériques : 2 colonnes, champs compacts */
    .filter-group { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }
    .filter-group--wide { flex: 1 1 100% !important; } /* la recherche reste pleine largeur */
    .filter-label { font-size: 10px !important; margin-bottom: 3px !important; }
    .filter-input, .filter-select { padding: 8px 10px !important; font-size: 13px !important; border-radius: 8px !important; }

    /* Conteneurs de filtres connus : padding et marges réduits */
    .factures-filters, .cl-filters-card, .arr-filters, .al__filters, .sh-filters,
    .filters-section, .departures-filters, .history-filters, .chauffeurs-filters,
    .prog-filters, .rdv-filters {
        padding: 12px !important; gap: 8px 10px !important; margin-bottom: 14px !important;
    }
    .filters-grid { gap: 8px 10px !important; } /* rangée interne (scan-historique départ) */

    /* ── Barres de filtre/outils « bespoke » (autres que .filter-group) ──────
       Journal d'audit, Scan-historique (Arrivée), Prospection, Réception colis,
       Suivi conteneurs, Parrainage. Elles ont des largeurs mini (140–250px) qui
       débordent sur téléphone : on les enlève, la recherche passe pleine largeur
       et les listes déroulantes se partagent la rangée (2 colonnes). */
    .al__filters, .sh-filters, .filter-bar, .toolbar { padding: 12px !important; margin-bottom: 14px !important; }
    .al__filter-row, .sh-filters, .filter-bar, .rc-toolbar, .sc-toolbar,
    .toolbar, .toolbar__left { gap: 8px 10px !important; flex-wrap: wrap !important; }
    .filter-fields { gap: 6px 10px !important; }

    /* Champs de recherche (texte) → pleine largeur */
    .toolbar__search, .al__input, .sh-input,
    .rc-toolbar input, .sc-toolbar input, .filter-bar input {
        min-width: 0 !important; flex: 1 1 100% !important;
        font-size: 13px !important; padding: 9px 11px !important;
    }
    /* Listes déroulantes → 2 colonnes */
    .toolbar__select, .al__select, .sh-select,
    .rc-toolbar select, .sc-toolbar select, .filter-bar select {
        min-width: 0 !important; flex: 1 1 calc(50% - 5px) !important;
        font-size: 13px !important; padding: 9px 11px !important;
    }

    /* ── Cartes KPI (.stats-grid / .kpi-grid) : 2 colonnes compactes sur tél. ─
       Plusieurs pages forcent en inline `auto-fit minmax(180px)` (→ 1 colonne
       sur mobile). On rétablit 2 colonnes, comme le tableau de bord. */
    .stats-grid, .kpi-grid, .kpi-grid--3, .am__kpi-row, .du-kpis { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    /* Bilan par utilisateur : KPI compacts en 2 colonnes */
    .du-kpis .du-kpi { padding: 12px 12px !important; gap: 10px !important; }
    .du-kpis .du-kpi__ic { width: 38px !important; height: 38px !important; font-size: 18px !important; }
    .du-kpis .du-kpi__val { font-size: 17px !important; }
    /* Cartes de totaux (.totals-container) : 2 colonnes dès le mobile (≤768px), pas seulement <640px */
    .totals-container { gap: 10px !important; }
    .totals-container .total-card { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }
    .stats-grid .stat-card { padding: 13px 14px !important; gap: 10px !important; }
    .kpi-grid .kpi-card { padding: 13px 14px !important; }
    .kpi-grid .kpi-card__header { margin-bottom: 8px !important; }
    .kpi-grid .kpi-card__value { font-size: 19px !important; margin-bottom: 7px !important; }
    .am__kpi-row .am__kpi { padding: 13px 14px !important; gap: 10px !important; }
    .am__kpi-row .am__kpi-icon { width: 42px !important; height: 42px !important; font-size: 22px !important; }
    /* Salaire (et autres finances) : .totals-container est en FLEX → on agit sur les enfants */
    .totals-container { gap: 10px !important; }
    .totals-container .total-card { flex: 1 1 calc(50% - 5px) !important; min-width: 0 !important; }
}

/* ============================================================================
   PRINCIPE RESPONSIVE MOBILE AMT — classe réutilisable « .mob-compact »
   ----------------------------------------------------------------------------
   Recette (issue de « Nouvelle Facture ») pour raccourcir une page FORMULAIRE
   sur mobile SANS rien retirer. APPLIQUÉE GLOBALEMENT : la classe .mob-compact
   est posée sur #contentContainer (index.html) -> toute page qui utilise les
   classes standard en profite AUTOMATIQUEMENT. Rien à faire par page, sauf :
     • marquer .form-group.full-width les champs LONGS (noms, adresses, longs
       menus) qui doivent garder toute la largeur (sinon ils se mettent à côté
       d'un autre champ) ;
     • après CHAQUE modif de CE fichier : incrémenter ?v= sur responsive.css
       dans index.html (sinon le cache mobile garde l'ancienne feuille).
   Classes standard attendues : .form-card (section), .form-grid (grille de
   champs), .form-group (un champ). Les champs COURTS passent en 2 colonnes.
   PIÈGES (appris à la dure) :
     • NE JAMAIS scoper avec :not(.native-app) — cette classe est posée sur TOUT
       mobile ≤768px (pas que l'app native, cf. index.html) : l'exclure tue tout.
     • Tester sur un VRAI téléphone (en émulation PC, .native-app dépend de la
       largeur au chargement et peut fausser le résultat).
     • Détails propres à une page (en-tête, blocs côte à côte) : les scoper par
       id/classe de page pour ne pas toucher les autres écrans.
   ============================================================================ */
@media (max-width: 768px) {
    /* ---- Baseline RÉUTILISABLE : il suffit d'ajouter class="mob-compact" ---- */
    .mob-compact .form-card { padding: 12px 14px !important; margin-bottom: 3px !important; }
    .mob-compact .form-card h3 { font-size: 15px !important; padding-bottom: 8px !important; margin-bottom: 10px !important; }
    .mob-compact .form-group { margin-bottom: 8px !important; }
    /* auto-fit : 2+ champs courts -> côte à côte ; UN seul champ -> pleine largeur
       (évite le « demi-champ » disgracieux sur les pages à nombre impair de champs). */
    .mob-compact .form-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 8px 10px !important; }
    .mob-compact .form-group.full-width { grid-column: 1 / -1 !important; }

    /* ---- Spécifique « Nouvelle Facture » : en-tête sur 1 ligne + blocs collés ---- */
    #vue-nouvellefacture-app .nf-header {
        padding: 8px 12px !important; margin-bottom: 3px !important; border-radius: 12px !important;
        flex-wrap: nowrap !important; gap: 8px !important;
    }
    #vue-nouvellefacture-app .nf-header > div:first-child { min-width: 0 !important; gap: 8px !important; }
    #vue-nouvellefacture-app .nf-header h2 {
        font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
    #vue-nouvellefacture-app .nf-header-icon {
        width: 30px !important; height: 30px !important; font-size: 14px !important; border-radius: 9px !important;
    }
    #vue-nouvellefacture-app #nfActiveContainerBadge {
        padding: 4px 9px !important; font-size: 13px !important; flex: 0 0 auto !important; white-space: nowrap !important;
    }
    /* Espaces réduits entre les blocs côte à côte (Expéditeur/Destinataire, Paiement/Notes) */
    #vue-nouvellefacture-app > div[style*="minmax(min(100%, 350px)"] {
        gap: 3px !important; margin-bottom: 3px !important;
    }
}

/* ----------------------------------------------------------------------------
   Bandeaux d'alerte GLOBAUX du haut (colis jamais scannés / clients à traiter) :
   police et hauteur nettement réduites sur mobile (ils prennent trop de place).
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #phantomAlertBar, #clientMsgAlertBar {
        font-size: 11px !important; padding: 6px 11px !important; gap: 7px !important; line-height: 1.25 !important;
    }
    #phantomAlertBar span[style*="font-size:18px"], #clientMsgAlertBar span[style*="font-size:18px"] { font-size: 13px !important; }
    #phantomAlertBar [style*="margin-left:auto"], #clientMsgAlertBar [style*="margin-left:auto"] {
        padding: 4px 9px !important; font-size: 10.5px !important;
    }
}

/* ----------------------------------------------------------------------------
   PERFORMANCE MOBILE / iPhone (Safari WebKit) — 2026-08-08
   Safari gère très mal `backdrop-filter: blur()` : le flou est RECALCULÉ à chaque
   image pendant le défilement (surtout la barre du bas, visible en permanence) →
   gros ralentissement sur iPhone, alors qu'Android (Chrome/Blink) l'absorbe sans
   effort. On DÉSACTIVE le flou partout sur mobile ; les fonds restent semi-opaques
   donc le rendu visuel est quasi identique, sans le coût. AUCUN changement de
   mise en page. Gain de fluidité notable sur iPhone.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* La barre du bas était translucide + floue (repeinte en continu) → fond plein. */
    .bottom-nav { background: #ffffff !important; }
}