/* ================================================================
   NETKUBE — RESPONSIVE v3 (complet)
   
   Breakpoints :
     - Desktop  : ≥ 1024px  (layout original intact)
     - Tablette : 768px - 1023px (sidebar compacte en icônes)
     - Mobile   : ≤ 767px (sidebar en drawer, burger)
     
   Utilisation : ce fichier doit être chargé EN DERNIER après tous
   les autres CSS (dashboard, factures, clients, produits...).
   ================================================================ */

/* ---------- BASE (toutes tailles) ---------- */

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* Burger et backdrop cachés par défaut sur desktop */
.topbar-burger {
    display: none;
}

.sidebar-backdrop {
    display: none;
}


/* ============================================================
   TABLETTE : 768px - 1023px
   Sidebar réduite en icônes seules (64px de large)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    .sidebar {
        width: 64px !important;
    }

    .sidebar-logo {
        padding: 1rem .5rem !important;
        justify-content: center !important;
    }

    .sidebar-logo>div:last-child {
        display: none !important;
    }

    .nav-section-title {
        display: none !important;
    }

    .nav-item {
        justify-content: center !important;
        padding: .7rem .5rem !important;
        margin: .15rem .5rem !important;
        gap: 0 !important;
        font-size: 0 !important;
    }

    .nav-item .icon {
        font-size: 1.15rem !important;
        width: auto !important;
    }

    .sidebar-user {
        padding: .75rem .5rem !important;
        justify-content: center !important;
    }

    .sidebar-user .user-info,
    .sidebar-user .logout-btn {
        display: none !important;
    }

    .main {
        margin-left: 64px !important;
    }

    .content {
        padding: 1.25rem !important;
    }

    .topbar {
        padding: .75rem 1.25rem !important;
    }

    /* KPI en 2 colonnes */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Formulaires en 1 colonne */
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    /* Toolbars compactes */
    .factures-toolbar input,
    .produits-toolbar input,
    .clients-toolbar input {
        min-width: 180px !important;
    }
}


/* ============================================================
   MOBILE : ≤ 767px
   Sidebar en drawer coulissant + burger dans la topbar
   Tout en 1 colonne, modales plein écran
   ============================================================ */
@media (max-width: 767px) {

    /* -------- Sidebar en drawer -------- */
    .sidebar {
        width: 260px !important;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1000 !important;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, .25);
    }

    /* Dans le mobile, la sidebar a TOUJOURS son layout complet (pas d'icônes seules) */
    .sidebar-logo {
        padding: 1.5rem !important;
        justify-content: flex-start !important;
    }

    .sidebar-logo>div:last-child {
        display: block !important;
    }

    .logo-text,
    .logo-sub {
        display: block !important;
    }

    .nav-section-title {
        display: block !important;
        padding: .5rem 1rem .25rem !important;
        font-size: .65rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
    }

    .nav-item {
        justify-content: flex-start !important;
        gap: .75rem !important;
        font-size: .875rem !important;
        padding: .6rem 1rem !important;
        margin: .1rem .75rem !important;
    }

    .nav-item .icon {
        font-size: 1rem !important;
        width: 20px !important;
        text-align: center !important;
    }

    .sidebar-user {
        padding: 1rem !important;
        justify-content: flex-start !important;
    }

    .sidebar-user .user-info {
        display: block !important;
        flex: 1;
    }

    .sidebar-user .logout-btn {
        display: inline-flex !important;
    }

    /* -------- Backdrop (fond noir derrière la sidebar) -------- */
    .sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, .6);
        z-index: 999 !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .sidebar-backdrop.open {
        opacity: 1;
        visibility: visible;
    }

    /* -------- Main -------- */
    .main {
        margin-left: 0 !important;
    }

    /* -------- Topbar -------- */
    .topbar {
        padding: .75rem 1rem !important;
        gap: .5rem !important;
        display: flex !important;
        align-items: center !important;
    }

    .topbar-burger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border: 1px solid #e2e8f0 !important;
        background: white !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-size: 1.4rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        color: #0f172a !important;
        padding: 0 !important;
        font-family: inherit !important;
    }

    .topbar-burger:hover {
        background: #f8fafc !important;
    }

    .topbar-title {
        font-size: 1rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .topbar-actions {
        gap: .4rem !important;
    }

    .topbar-actions .btn-primary {
        padding: .5rem .75rem !important;
        font-size: .78rem !important;
        white-space: nowrap;
    }

    /* -------- Content -------- */
    .content {
        padding: 1rem !important;
    }

    /* -------- Toolbars (barres de recherche) -------- */
    .factures-toolbar,
    .produits-toolbar,
    .clients-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .6rem !important;
    }

    .factures-toolbar input,
    .factures-toolbar select,
    .produits-toolbar input,
    .produits-toolbar select,
    .clients-toolbar input,
    .clients-toolbar select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .spacer {
        display: none !important;
    }

    /* -------- KPI -------- */
    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: .85rem !important;
        margin-bottom: 1.5rem !important;
    }

    .kpi-card {
        padding: 1.15rem !important;
    }

    .kpi-value {
        font-size: 1.5rem !important;
    }

    /* -------- Cards / Graphiques dashboard -------- */
    .content>div[style*="grid-template-columns"],
    .content>div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .card-header {
        padding: 1rem 1.15rem !important;
        flex-wrap: wrap !important;
        gap: .5rem !important;
    }

    .card-title {
        font-size: .9rem !important;
    }

    /* -------- Tableaux : scroll horizontal par défaut -------- */
    .card>table,
    .card table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .card>table thead,
    .card>table tbody,
    .card>table tr {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    /* Même traitement pour les tableaux qui ne sont pas dans des cards */
    .content>table {
        display: block !important;
        overflow-x: auto !important;
    }

    /* Table en mode carte (opt-in via la classe table-stack) */
    table.table-stack thead {
        display: none !important;
    }

    table.table-stack,
    table.table-stack tbody,
    table.table-stack tr {
        display: block !important;
        width: 100% !important;
    }

    table.table-stack tr {
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: .85rem !important;
        margin-bottom: .75rem !important;
        background: white !important;
    }

    table.table-stack tr:hover td {
        background: transparent !important;
    }

    table.table-stack td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 1rem !important;
        text-align: right !important;
        border: none !important;
        padding: .35rem 0 !important;
        font-size: .875rem !important;
        white-space: normal !important;
    }

    table.table-stack td[data-label]:before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        text-align: left;
        flex-shrink: 0;
    }

    table.table-stack td:first-child {
        border-bottom: 1px solid #f1f5f9 !important;
        padding-bottom: .6rem !important;
        margin-bottom: .4rem !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        font-size: 1rem !important;
        display: block !important;
        text-align: left !important;
    }

    table.table-stack td:first-child:before {
        display: none !important;
    }

    table.table-stack td:last-child {
        justify-content: flex-end !important;
        padding-top: .6rem !important;
        margin-top: .3rem !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    /* -------- Modales plein écran -------- */
    .modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .modal {
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-header {
        flex-shrink: 0 !important;
    }

    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 1rem !important;
    }

    .modal-footer {
        flex-shrink: 0 !important;
        padding: .75rem 1rem !important;
    }

    /* -------- Onglets (dans les modales) : scroll horizontal -------- */
    .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .tab {
        flex-shrink: 0 !important;
    }

    /* -------- Formulaires -------- */
    .form-grid {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
        gap: 1rem !important;
    }

    /* Grilles internes avec styles inline grid-template-columns */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Détail de facture / autres */
    .detail-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* -------- Sélecteur de période dashboard -------- */
    .periode-switcher {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .periode-btn {
        flex: 1 !important;
        min-width: 0 !important;
        padding: .5rem .4rem !important;
        font-size: .72rem !important;
    }

    .periode-btn-custom {
        flex-basis: 100% !important;
        border-left: none !important;
        border-top: 1px solid #e2e8f0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        padding-top: .4rem !important;
        margin-top: .3rem !important;
        justify-content: center !important;
    }

    /* -------- Lignes facture plus compactes -------- */
    .lignes-table th,
    .lignes-table td {
        padding: .3rem .2rem !important;
        font-size: .72rem !important;
    }

    .lignes-table {
        font-size: .75rem !important;
    }

    /* -------- Totaux -------- */
    .totaux-grid {
        min-width: 0 !important;
        width: 100% !important;
    }

    .totaux-box {
        justify-content: stretch !important;
    }

    /* -------- Titres réduits -------- */
    h1,
    h2 {
        font-size: 1.1rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    /* Inputs à 16px pour éviter le zoom iOS */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Ajustement spécifique : bouton dashboard "period" */
    .dashboard-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem !important;
    }
}


/* ============================================================
   PETIT MOBILE : ≤ 480px (très petits écrans)
   ============================================================ */
@media (max-width: 480px) {
    .topbar-actions .btn-primary {
        padding: .45rem .6rem !important;
        font-size: .72rem !important;
    }

    .kpi-value {
        font-size: 1.35rem !important;
    }

    .content {
        padding: .75rem !important;
    }

    .card-header,
    .modal-body,
    .modal-header {
        padding: .85rem 1rem !important;
    }
}