/* ═══════════════════════════════════════════════════════
   APPEZY CRM — Mobile Layer (Phases 1-4)
   100% dans des @media → zero impact desktop
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   SMARTPHONE PORTRAIT (< 576px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {

    body {
        padding-bottom: 40px;
        font-size: 13px;
    }

    /* ─── PHASE 1 : Navbar ─── */
    .navbar { padding: .4rem .5rem; }
    .navbar-brand img { width: 36px; }
    .navbar-collapse {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: .5rem 0;
    }
    .navbar-collapse .navbar-nav { flex-direction: column; }
    .navbar-collapse .navbar-nav .nav-link {
        padding: .6rem .75rem;
        font-size: 14px;
        border-radius: 6px;
    }
    .navbar-collapse .navbar-nav .nav-link span { display: inline !important; }
    .navbar-collapse .navbar-nav .nav-link i { width: 24px; text-align: center; }
    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none;
        box-shadow: none;
        border: none;
        background: rgba(0,0,0,.3);
        border-radius: 6px;
        margin: 0 0 .5rem .5rem;
        padding: .25rem .5rem;
    }
    .navbar-collapse .dropdown-item {
        color: #fff;
        font-size: 13px;
        padding: .5rem .75rem;
    }
    .navbar-collapse .dropdown-item:hover,
    .navbar-collapse .dropdown-item:active {
        background: rgba(255,255,255,.2);
        color: #fff;
    }

    /* ─── PHASE 2 : Listing clients → cards ─── */

    /* Masquer le header du tableau */
    #table thead { display: none !important; }

    /* Transformer chaque ligne en card — pas de background ici, géré par rowStyle inline */
    #table tbody tr {
        display: block !important;
        position: relative;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        margin: 8px 6px;
        padding: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    /* Le fond coloré est géré par rowStyle inline (background-color sur le tr) */

    /* Toutes les cellules en block */
    #table tbody td {
        display: block !important;
        border: none !important;
        padding: 2px 0 !important;
        text-align: left !important;
        background: transparent !important;
    }

    /* Col 1 : Actions → en haut a droite */
    #table tbody td:nth-child(1) {
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto;
    }
    #table tbody td:nth-child(1) .act-col { gap: 4px; }
    #table tbody td:nth-child(1) .act-btn { width: 36px; height: 36px; }

    /* Col 2 : #ID + tags */
    #table tbody td:nth-child(2) {
        font-size: 11px;
        margin-bottom: 4px;
        padding-right: 100px !important;
    }

    /* Col 3 : Nom + adresse + CP */
    #table tbody td:nth-child(3) {
        font-size: 14px;
        margin-bottom: 4px;
        padding-right: 100px !important;
    }
    #table tbody td:nth-child(3) b { font-size: 15px; }

    /* Col 4 : Telephone */
    #table tbody td:nth-child(4) {
        font-size: 13px;
        margin-bottom: 4px;
    }
    #table tbody td:nth-child(4) a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        background: #f1f5f9;
        border-radius: 6px;
        color: #0f172a;
        font-weight: 500;
    }

    /* Col 5 : Regie */
    #table tbody td:nth-child(5) { font-size: 12px; color: #64748b; }
    #table tbody td:nth-child(5)::before { content: "Regie: "; font-weight: 600; color: #94a3b8; }

    /* Col 6 : Telepro */
    #table tbody td:nth-child(6) { font-size: 12px; color: #64748b; }
    #table tbody td:nth-child(6)::before { content: "Telepro: "; font-weight: 600; color: #94a3b8; }

    /* Col 7 : Commercial */
    #table tbody td:nth-child(7) { font-size: 12px; color: #64748b; margin-bottom: 4px; }
    #table tbody td:nth-child(7)::before { content: "Commercial: "; font-weight: 600; color: #94a3b8; }

    /* Col 8 : Installation (dates RDV) */
    #table tbody td:nth-child(8) { font-size: 12px; margin-bottom: 4px; }
    #table tbody td:nth-child(8) ul { display: flex; flex-wrap: wrap; gap: 6px; }
    #table tbody td:nth-child(8) ul li { margin: 0; }

    /* Col 9 : Produit */
    #table tbody td:nth-child(9) { margin-bottom: 2px; font-size: 11px; }
    #table tbody td:nth-child(9) ul { margin: 0 !important; padding: 0 !important; }
    #table tbody td:nth-child(9) ul li { margin-bottom: 0 !important; padding: 0 !important; line-height: 1.3; }
    #table tbody td:nth-child(9) ul li[style*="text-align: right"] { font-size: 15px !important; margin-top: 2px; padding-top: 2px; border-top: none; }
    #table tbody td:nth-child(9) ul li[style*="text-align: left"] { font-size: 11px; }
    #table tbody td:nth-child(9) ul li[style*="max-width"] { font-size: 10px; line-height: 1.2; margin: 0; }

    /* Col 10 : Commentaire → tap pour deployer */
    #table tbody td:nth-child(10) {
        font-size: 11px;
        color: #64748b;
        max-height: 38px;
        overflow: hidden;
        cursor: pointer;
        transition: max-height .3s ease;
        position: relative;
        padding-top: 4px !important;
        line-height: 1.4;
    }
    #table tbody td:nth-child(10)::before {
        content: "Commentaires";
        display: block;
        font-weight: 600;
        color: #94a3b8;
        font-size: 10px;
        margin-bottom: 2px;
    }
    #table tbody td:nth-child(10).expanded {
        max-height: 500px;
        overflow: visible;
    }
    #table tbody td:nth-child(10)::after {
        content: "voir +";
        display: block;
        color: var(--color-primary, #059669);
        font-size: 10px;
        font-weight: 600;
        margin-top: 2px;
    }
    #table tbody td:nth-child(10).expanded::after {
        content: "voir -";
    }
    #table tbody td:nth-child(10):empty::before,
    #table tbody td:nth-child(10):empty::after {
        display: none;
    }

    /* Col 11 : Statut */
    #table tbody td:nth-child(11) {
        font-size: 12px;
        font-weight: 600;
        margin-top: 4px;
        padding-top: 4px !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    /* Supprimer les stripes sur les cards */
    #table tbody tr.progress-bar-striped { background-image: none !important; }

    /* Hover card : ombre seulement, pas de reset fond */
    #table tbody tr:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

    /* ─── PHASE 3 : Fiche client + formulaires ─── */

    /* Modals plein ecran */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100vh;
    }
    .modal-content {
        border-radius: 0 !important;
        min-height: 100vh;
        padding-bottom: 50px;
    }
    /* Boutons en bas de modal : au dessus du bandeau */
    .modal .btn.bg-gradient.w-100,
    .modal .btn.w-100,
    .modal .modal-footer,
    .modal form > .btn:last-child,
    .modal .tab-content .btn.w-100 {
        margin-bottom: 50px;
    }

    /* Header fiche client */
    .navbar.bg-gradient.rounded-top {
        border-radius: 0 !important;
        padding: .5rem .75rem;
    }
    .navbar.bg-gradient .navbar-brand {
        font-size: 14px;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .navbar.bg-gradient .btn-dark {
        display: none;
    }
    .navbar.bg-gradient .close {
        font-size: 1.5rem;
        padding: .5rem;
    }

    /* Tabs client : scroll horizontal */
    #nav-tab-client {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: .3rem !important;
        gap: 2px !important;
    }
    #nav-tab-client::-webkit-scrollbar { display: none; }
    #nav-tab-client .nav-link {
        white-space: nowrap;
        font-size: 11px !important;
        padding: .35rem .5rem !important;
    }

    /* Formulaires fiche client : plus espaces */
    .tab-content .form-row {
        margin-bottom: 6px;
    }
    .tab-content .form-row .col-md-3 {
        font-size: 12px;
        margin-bottom: 2px;
    }
    .tab-content .form-control {
        font-size: 14px;
        padding: .5rem .6rem;
    }
    .tab-content select.form-control {
        font-size: 14px;
    }
    /* Labels plein largeur */
    .tab-content .form-row > [class*="col-md-3"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .tab-content .form-row > [class*="col-md-9"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* RDV modal */
    #rdvModal .modal-dialog {
        margin: 0;
        max-width: 100% !important;
    }

    /* Recherche avancee */
    .search-forms .form-row .col-lg {
        margin-bottom: .5rem;
    }
    .search-forms .form-row .col-lg-1 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* Dropdown filters : pleine largeur */
    .search-forms .dropdown-parent .dropdown-menu {
        width: calc(100vw - 40px) !important;
        max-height: 50vh !important;
    }

    /* ─── PHASE 4 : Stats ─── */

    /* Selecteur de periode : empile */
    .filter-bar {
        padding: .3rem .5rem !important;
    }
    .filter-bar .form-control-sm {
        font-size: 11px;
    }
    .filter-bar .row {
        flex-wrap: wrap;
    }

    /* Stats : header + selecteur compact */
    .month-selector .current-month {
        font-size: .8rem;
        min-width: 70px;
    }
    .month-selector .btn-nav {
        width: 28px;
        height: 28px;
    }
    #period-presets {
        flex-wrap: wrap;
    }
    #period-presets .btn {
        font-size: .6rem;
        padding: .15rem .3rem;
    }

    /* Stats : KPI cards 2x2 */
    .kpi-card .kpi-value { font-size: 1.3rem; }
    .kpi-card .kpi-label { font-size: .65rem; }
    .install-kpi { padding: 8px; border-radius: 8px; }
    .install-kpi .install-value { font-size: 1.1rem; }
    .install-kpi .install-label { font-size: .6rem; }

    /* Stats : comparaisons empilees */
    .comp-card .card-body {
        padding: .4rem .5rem;
    }
    .comp-card .comp-value { font-size: .9rem; }
    .comp-card .d-flex {
        flex-direction: column;
        gap: 2px;
    }
    .comp-card .d-flex > div {
        display: flex;
        justify-content: space-between;
    }

    /* Stats : suivi dossiers scroll */
    #dossiers-mois-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #dossiers-mois-row > .col {
        min-width: 80px;
        flex: 0 0 auto;
    }

    /* Stats : charts hauteur reduite */
    .chart-card canvas {
        max-height: 200px;
    }

    /* Stats : tableaux scroll horizontal */
    .chart-card .table-stats {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stats : tables details scroll */
    .table-stats th, .table-stats td {
        white-space: nowrap;
        font-size: 11px;
    }

    /* Pagination en bas */
    .fixed-table-pagination {
        padding: .2rem .5rem !important;
        font-size: 11px;
        bottom: 32px;
    }

    /* Bandeau switch */
    #view-switch-banner {
        font-size: 11px;
        padding: 6px 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   SMARTPHONE PAYSAGE + PETITE TABLETTE (< 768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    body { padding-bottom: 36px; }

    /* Tables : scroll horizontal */
    .fixed-table-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Listing clients en cards (aussi en paysage) */
    #table thead { display: none !important; }
    #table tbody tr {
        display: block !important;
        position: relative;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        margin: 6px;
        padding: 10px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    #table tbody td {
        display: block !important;
        border: none !important;
        padding: 2px 0 !important;
        text-align: left !important;
        background: transparent !important;
    }
    /* Colonnes en block, toutes visibles */
    #table tbody td:nth-child(1) { position: absolute; top: 8px; right: 8px; width: auto; }
    #table tbody td:nth-child(3) { padding-right: 100px !important; }
    /* Labels inline */
    #table tbody td:nth-child(5) { font-size: 12px; color: #64748b; }
    #table tbody td:nth-child(5)::before { content: "Regie: "; font-weight: 600; color: #94a3b8; }
    #table tbody td:nth-child(6) { font-size: 12px; color: #64748b; }
    #table tbody td:nth-child(6)::before { content: "Telepro: "; font-weight: 600; color: #94a3b8; }
    #table tbody td:nth-child(7) { font-size: 12px; color: #64748b; }
    #table tbody td:nth-child(7)::before { content: "Commercial: "; font-weight: 600; color: #94a3b8; }
    /* Commentaire */
    #table tbody td:nth-child(10) { font-size: 11px; color: #64748b; max-height: 38px; overflow: hidden; cursor: pointer; transition: max-height .3s ease; padding-top: 4px !important; line-height: 1.4; }
    #table tbody td:nth-child(10)::before { content: "Commentaires"; display: block; font-weight: 600; color: #94a3b8; font-size: 10px; margin-bottom: 2px; }
    #table tbody td:nth-child(10).expanded { max-height: 500px; overflow: visible; }
    #table tbody td:nth-child(10)::after { content: "voir +"; display: block; color: var(--color-primary, #059669); font-size: 10px; font-weight: 600; margin-top: 2px; }
    #table tbody td:nth-child(10).expanded::after { content: "voir -"; }
    #table tbody td:nth-child(10):empty::before, #table tbody td:nth-child(10):empty::after { display: none; }
    /* Produit compact */
    #table tbody td:nth-child(9) ul { margin: 0 !important; padding: 0 !important; }
    #table tbody td:nth-child(9) ul li { margin-bottom: 0 !important; padding: 0 !important; line-height: 1.3; font-size: 10px; }
    #table tbody td:nth-child(9) ul li[style*="text-align: right"] { font-size: 15px !important; margin-top: 2px; border-top: none; }
    /* Statut */
    #table tbody td:nth-child(11) { font-size: 12px; font-weight: 600; margin-top: 4px; padding-top: 4px !important; border-top: 1px solid #f1f5f9 !important; }
    #table tbody tr.progress-bar-striped { background-image: none !important; }

    /* Modals */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem) !important;
    }
    .modal-content { border-radius: 8px; }

    /* Stats comparaisons */
    .comp-card .d-flex { flex-wrap: wrap; gap: 4px; }

    /* Stats selecteur dates sur 2 lignes */
    #date-from, #date-to {
        width: 110px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   TABLETTE (< 992px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* Navbar collapse actif : afficher les labels */
    .navbar-collapse .navbar-nav .nav-link span.d-none {
        display: inline !important;
    }

    /* Stats tables : scroll si besoin */
    .chart-card .card-body .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stats : selecteur de periode compact */
    #period-presets .btn {
        font-size: .7rem;
        padding: .2rem .5rem;
    }
}

/* ═══════════════════════════════════════════════════════
   FIX RESPONSIVE COMPLET — avril 2026
   Optimise pour iPhone Pro Max (430px) et tous mobiles
   ═══════════════════════════════════════════════════════ */

/* ─── Notification panel ─── */
@media (max-width: 480px) {
    #notifPanel {
        width: 100% !important;
        max-width: 100% !important;
    }
    #notifPanel:not(.notif-open) {
        right: -100% !important;
    }
    #notifPanel.notif-open {
        right: 0 !important;
    }
}

/* ─── Empêcher scroll horizontal sur mobile ─── */
@media (max-width: 575px) {
    html, body {
        overflow-x: hidden !important;
    }
}

/* ─── Chat box ─── */
@media (max-width: 575px) {
    #chatBox.open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        z-index: 10200 !important;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #chatWidget {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
        z-index: 10000 !important;
    }
}

/* ─── Fiche client : boutons navbar sur 2 lignes mobile ─── */
@media (max-width: 575px) {
    .navbar.bg-gradient.rounded-top {
        flex-wrap: wrap !important;
        padding: 6px 10px !important;
    }
    .navbar.bg-gradient.rounded-top .navbar-brand {
        font-size: 12px !important;
        max-width: 70% !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .navbar.bg-gradient.rounded-top .btn {
        font-size: 10px !important;
        padding: 2px 6px !important;
        margin: 1px !important;
    }
    /* Tabs fiche client: scroll horizontal propre */
    #nav-tab-client {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #nav-tab-client::-webkit-scrollbar { display: none; }
    #nav-tab-client .nav-link {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

/* ─── Menus dropdown ─── */
@media (max-width: 575px) {
    .dropdown-menu {
        max-width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
    .dropdown-menu-right {
        right: 0 !important;
        left: auto !important;
    }
}

/* ─── Tables : scroll horizontal ─── */
@media (max-width: 767px) {
    .bootstrap-table .fixed-table-container,
    .fixed-table-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── Pagination : safe area iPhone ─── */
@media (max-width: 575px) {
    .fixed-table-pagination {
        bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    }
}

/* ─── Modales : safe area + dvh ─── */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
    }
    .modal-content {
        border-radius: 0 !important;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    }
}

/* ─── Tooltip commentaire ─── */
@media (max-width: 575px) {
    #commentTooltip {
        max-width: calc(100% - 24px) !important;
        left: 12px !important;
        right: 12px !important;
    }
}

/* ─── Boutons action : taille tactile ─── */
@media (max-width: 575px) {
    .fixed-table-body [data-tooltip],
    .equip-row .btn {
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 14px !important;
    }
}

/* ─── Fiche client mobile : bandeau statut ─── */
@media (max-width: 575px) {
    #nav-tab-client {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #nav-tab-client::-webkit-scrollbar { display: none; }
    #nav-tab-client .nav-link {
        white-space: nowrap;
        padding: .4rem .6rem !important;
        font-size: 12px !important;
    }
}

/* ─── Admin dropdown responsive ─── */
@media (max-width: 575px) {
    #navbarDropdown + .dropdown-menu {
        width: calc(100% - 16px) !important;
        min-width: unset !important;
        max-height: 70vh !important;
        left: 8px !important;
        right: 8px !important;
        position: fixed !important;
        top: 56px !important;
        background: #1e293b !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,.4) !important;
        overflow-y: auto !important;
        z-index: 10050 !important;
    }
    #navbarDropdown + .dropdown-menu .dropdown-item {
        color: #e2e8f0 !important;
        padding: .5rem .75rem;
    }
    #navbarDropdown + .dropdown-menu .dropdown-item:hover,
    #navbarDropdown + .dropdown-menu .dropdown-item:active {
        background: rgba(255,255,255,.1) !important;
        color: #fff !important;
    }
    #navbarDropdown + .dropdown-menu .dropdown-divider {
        border-color: rgba(255,255,255,.1);
    }
    #navbarDropdown + .dropdown-menu .dropdown-header {
        color: rgba(255,255,255,.5) !important;
    }
}