/*
 * app-mobile.css — refactoring de layout "Mobile App Native" (< 768px)
 * Le theme visuel (couleurs, composants AdminLTE) est conserve tel quel.
 *
 * Scoping :
 *   - .zl-bottom-nav / .zl-fab / .zl-search / .zl-floating-cta ne sont
 *     presentes QUE sur les pages client (marquage PHP par role dans
 *     footer.php / vues) : leurs styles ne dependent pas de body class.
 *   - Les transformations qui touchent l'AdminLTE (sidebar, footer, wrapper)
 *     sont limitees a body.zl-mobile-app et body.zl-cards, poses par JS
 *     (footer.php) : < 768px uniquement, jamais sur les pages admin/desktop.
 */

/* ==========================================================================
   2. Tableaux -> Cartes
   ========================================================================== */
body.zl-cards .zl-card-list { margin: 0 -2px; }

body.zl-cards .zl-card {
    margin-bottom: 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .35rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
body.zl-cards .zl-card:last-child { margin-bottom: 0; }

/* Tag distinctif par type d'offre (couleurs du theme deja utilisees sur le dashboard) */
body.zl-cards .zl-tag { display: inline-block; margin-bottom: 8px; }
body.zl-cards .zl-tag .badge { font-size: .75rem; }

body.zl-cards .zl-card .zl-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: inherit;
    word-break: break-word;
    margin: 0;
}
body.zl-cards .zl-card .zl-card-sub { font-size: .82rem; color: #6c757d; margin-bottom: 4px; }
body.zl-cards .zl-card .zl-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
body.zl-cards .zl-card .zl-card-meta .zl-date { font-size: .78rem; color: #6c757d; }
body.zl-cards .zl-card .zl-card-meta .zl-date i { margin-right: 4px; }

body.zl-cards .zl-card .card-footer { background: transparent; border-top: 1px solid rgba(0,0,0,.06); }
body.zl-cards .zl-card .btn {
    min-height: 46px;
    height: auto;
    white-space: normal;
    line-height: 1.35;
    padding: 7px 10px;
}

/* ==========================================================================
   TOUS LES STYLES MOBILE — actifs uniquement en dessous de 768px
   ========================================================================== */
@media (max-width: 767.98px) {

    /* ========== 1. Bottom Navigation Bar ========== */
    .zl-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, .1);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
        padding: 2px 0 calc(2px + env(safe-area-inset-bottom));
        display: flex;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .zl-bottom-nav::-webkit-scrollbar { display: none; }

    .zl-bottom-nav .zl-nav-item {
        min-width: 68px;
        flex: 1 0 auto;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 4px 2px;
        color: #6c757d;
        font-size: .68rem;
        text-decoration: none;
    }
    .zl-bottom-nav .zl-nav-item i { font-size: 1.1rem; line-height: 1; }
    .zl-bottom-nav .zl-nav-item span { white-space: nowrap; }

    /* Onglet actif : couleur d'accent du theme (navbar-danger AdminLTE) */
    .zl-bottom-nav .zl-nav-item.active,
    .zl-bottom-nav .zl-nav-item.active:hover {
        color: #dc3545;
        font-weight: 600;
    }

    /* ========== 3. Page Services : FAB generique "+" et CTA "Commander un
       hebergement" (ouvre la modale de recherche en haut) masques — le
       filtre/bottom-sheet est la priorite. ========== */
    body.zl-no-fab .zl-fab,
    body.zl-no-fab .zl-floating-cta { display: none !important; }

    /* ========== 4. Barre de recherche mobile (pleine largeur) ========== */
    .zl-search {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .zl-search .zl-search-input {
        flex: 1;
        min-width: 0;
        border-radius: .3rem;
        height: 42px;
    }
    .zl-search .zl-search-btn {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: .3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ========== 5. FAB "Nouveau Service +" ========== */
    .zl-fab {
        position: fixed;
        right: 16px;
        bottom: calc(52px + env(safe-area-inset-bottom));
        z-index: 999;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        padding: 0;
    }
    .zl-fab:hover { color: #fff; }

    /* --- Pages CLIENT uniquement : masquer la sidebar + son burger --- */
    body.zl-mobile-app .main-sidebar,
    body.zl-mobile-app .main-sidebar::before { display: none !important; }
    body.zl-mobile-app .main-header .nav-link[data-widget="pushmenu"] { display: none !important; }

    /* Le content-wrapper prend toute la largeur (pas de sidebar) */
    body.zl-mobile-app .content-wrapper,
    body.zl-mobile-app .main-sidebar {
        margin-left: 0 !important;
    }

    /* --- Masquer les tableaux deja remplaces par des cartes --- */
    body.zl-cards table.table,
    body.zl-cards .dataTables_wrapper { display: none !important; }
    body.zl-cards .zl-card-list { display: block !important; }

    /* --- Masquer le footer du site (cede la place a la bottom nav) --- */
    body.zl-mobile-app .main-footer { display: none !important; }

    /* --- Padding bas du wrapper pour que la derniere carte ne soit jamais masquee --- */
    body.zl-mobile-app .content-wrapper { padding-bottom: 62px; }

    /* --- Zone sous le header : recherche pleine largeur --- */
    body.zl-mobile-app .content-header .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* --- Headers de page compactes --- */
    body.zl-mobile-app .content-header h1,
    body.zl-mobile-app .content-header h5 { font-size: 1.1rem; }
    body.zl-mobile-app .content-header .breadcrumb { font-size: .75rem; }

    /* --- Transformation du bouton "Commander un hebergement" (flottant haut-droite)
           en FAB rond ancre au-dessus de la bottom nav --- */
    .zl-floating-cta {
        position: fixed !important;
        right: 16px;
        bottom: calc(52px + env(safe-area-inset-bottom));
        top: auto !important;
        left: auto !important;
        width: 56px;
        height: 56px;
        border-radius: 50% !important;
        z-index: 999;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .25) !important;
    }
    .zl-floating-cta h5 { display: none !important; }
    .zl-floating-cta::before {
        content: "\f067"; /* fa-plus */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 1.4rem;
    }
}

/* Desktop intacts : on cache les elements purement mobiles.
   NB : .zl-floating-cta n'est PAS masque en desktop — il garde son style
   natif (position:absolute inline) si la classe est posee. */
@media (min-width: 768px) {
    .zl-bottom-nav { display: none !important; }
    .zl-search { display: none !important; }
    .zl-fab { display: none !important; }
    body.zl-cards .zl-card-list { display: none !important; }
}

/* ==========================================================================
   MODÈLE "Factures" (mamoni_choisir) — partagé avec les pages Services.
   Pills Hébergements / Noms de domaine, trie (recherche + filtre), cartes,
   pagination tactile et bottom-sheets. Réutilisable sur les pages client
   qui adoptent le même gabarit que la page des factures.
   ========================================================================== */

/* ── Onglets + pills côte à côte sur mobile ────────────── */
#mpFacturesTabs,
#mpAvenirPills{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#mpFacturesTabs::-webkit-scrollbar,
#mpAvenirPills::-webkit-scrollbar{display:none}
@media (max-width:767.98px){
  #mpFacturesTabs .nav-item{flex:1 1 0;min-width:0}
  #mpFacturesTabs .nav-link{
    font-size:12.5px;
    padding:10px 6px;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mpFacturesTabs .badge{font-size:10px;vertical-align:top;margin-left:2px}
  #mpAvenirPills .nav-item{flex:1 1 0;min-width:0}
  #mpAvenirPills .nav-link{
    font-size:12.5px;
    padding:10px 6px;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mpAvenirPills .badge{font-size:10px;vertical-align:top;margin-left:2px}
}

/* ── Toolbar recherche/filtre ─────────────────────────── */
.mp-toolbar{margin-bottom:14px}
.mp-toolbar input.form-control{min-height:48px;border-radius:10px}
.mp-toolbar .input-group-append .btn{min-width:48px;min-height:48px;border-radius:0 10px 10px 0;position:relative}
.mp-toolbar #mp-filter-count{position:absolute;top:-6px;right:-6px;font-size:10px}

/* ── Cartes services/factures (mobile) ────────────────── */
.mp-card{border:1px solid #e9ecef;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.05);background:#fff}
.mp-card-title{font-size:15px;word-break:break-word}
.mp-label{font-size:11px;color:#9aa0a6;margin-bottom:2px}
.mp-relatif{font-size:13px;line-height:1.3}
.mp-subdate{font-size:11px;margin-top:1px}
.mp-card-amount{font-size:17px}
.mp-pay-btn{min-height:48px;border-radius:10px;font-size:14px;font-weight:600;height:auto}

/* ── Pagination tactile ───────────────────────────────── */
.mp-pager .pagination{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.mp-pager .page-link{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;margin:0 3px;font-size:14px}
.mp-pager .page-item.disabled .page-link{opacity:.4}
.mp-pager .page-link i{font-size:12px}

/* ── Chips de filtre ──────────────────────────────────── */
.mp-chip{border:1px solid #ced4da;background:#fff;color:#495057;border-radius:999px;padding:9px 16px;font-size:13px;margin:0 6px 8px 0;min-height:44px;transition:all .15s}
.mp-chip.active{background:#007bff;border-color:#007bff;color:#fff}
.mp-chip.active i.fa-circle{color:#fff !important}

/* ── Bottom sheet filtres ─────────────────────────────── */
.modal.mp-sheet .mp-sheet-handle{display:none}
.modal.mp-sheet .modal-dialog{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100%;margin:0}
.modal.mp-sheet .modal-content{border:none;border-radius:16px 16px 0 0;max-height:92vh;overflow-y:auto}
.modal.mp-sheet .modal-header{border-bottom:1px solid #eef0f2}
@media (max-width:767.98px){
  .modal.mp-sheet .mp-sheet-handle{display:block}
}
@media (min-width:768px){
  .modal.mp-sheet .modal-dialog{position:relative;bottom:auto;left:auto;right:auto;width:auto;max-width:420px;margin:1.75rem auto}
  .modal.mp-sheet .modal-content{max-height:none;overflow:visible}
}