/* ============================================================
   v19.27 — Mobile responsive global
   Applique a toutes les pages (dashboard, escalades, settings, facturation, pilotage, login)
   Breakpoints : 768px (tablette) | 480px (phone)
   NE TOUCHE PAS : pieuvre (octopus), Agent Alfred contenu interne
============================================================ */

/* ===== Hamburger button (cache en desktop, affiche en mobile) ===== */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}
.mobile-menu-btn svg {
    width: 22px;
    height: 22px;
    stroke: #1d1d1f;
}

/* ===== Sidebar overlay (mobile only) ===== */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 998;
    backdrop-filter: blur(3px);
}
.mobile-sidebar-overlay.active { display: block; }

/* ============================================================
   TABLETTE - 1024px (avant phone)
============================================================ */
@media (max-width: 1024px) {
    /* Dashboard /escalades : split 60/40 -> col stack */
    .dashboard-split-layout.visible {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .split-col-left, .split-col-right {
        height: auto !important;
    }

    /* Grilles premium 3 cols -> 2 cols */
    .premium-grid-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ============================================================
   MOBILE - 768px (tablette petit + phone)
============================================================ */
@media (max-width: 768px) {
    /* === Hamburger visible === */
    .mobile-menu-btn { display: inline-flex !important; }

    /* === Sidebar en drawer (cache par defaut) === */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 999 !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        width: 260px !important;
        max-width: 80vw;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* === Contenu principal : pleine largeur === */
    .main, .dashboard-main, .content, main, .page-main {
        margin-left: 0 !important;
        padding-top: 56px !important;  /* place pour hamburger */
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* === Grilles : toujours 1 col === */
    .premium-grid-3, .premium-grid-2,
    .dashboard-split-layout.visible,
    .settings-grid, .billing-grid,
    .plans-grid, .usage-grid, .credits-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* === Cartes premium : padding reduit === */
    .plan-card, .info-card, .actions-wrapper,
    .card, .settings-card, .billing-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    /* === Dashboard KPIs : plus petit === */
    .plan-card .kpi-value, .kpi-number {
        font-size: 22px !important;
    }

    /* === Headers cartes === */
    .info-card-header h3,
    .actions-header,
    .card h3 { font-size: 14px !important; }

    /* === Liste escalations (gauche /escalades) === */
    /* Sur mobile, la liste occupe toute la largeur quand sidebar fermee */
    .esc-list-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* === Modals : quasi fullscreen === */
    .sav-modal-overlay.active .sav-modal,
    .modal-overlay.active > div,
    .email-modal-overlay.active .email-modal {
        max-width: 94vw !important;
        max-height: 90vh !important;
        margin: 20px !important;
        border-radius: 14px !important;
    }
    .sav-modal-body { padding: 16px !important; }
    .sav-modal-header { padding: 14px 16px !important; }
    .sav-modal-header h3 { font-size: 15px !important; }

    /* === Boutons touch-friendly === */
    .action-btn, button.primary, .btn, .save-btn {
        min-height: 44px;
    }

    /* === Inputs touch === */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], select, textarea {
        font-size: 16px !important;  /* evite zoom iOS */
        min-height: 40px;
    }

    /* === Tableaux scrollable horizontal === */
    .table-container, table.data-table {
        overflow-x: auto;
        display: block;
    }

    /* === Pieuvre : reduite sur mobile === */
    .octopus-ui { transform: scale(0.6) translateY(-20%); }

    /* === /escalades sidebar liste : devient plein ecran quand escalation ouverte === */
    body.mobile-esc-open .esc-sidebar { display: none !important; }

    /* === Intent cards (modals) === */
    .intent-card { padding: 14px 14px !important; gap: 10px !important; }
    .intent-title { font-size: 13px !important; }
    .intent-desc { font-size: 11.5px !important; }

    /* === Settings : section dividers plus visibles === */
    .section-divider {
        position: sticky;
        top: 56px;
        background: #f8fafc;
        z-index: 10;
        margin: 16px -16px 12px !important;
        padding: 12px 16px !important;
    }

    /* === Facturation table mobile === */
    .invoice-table { font-size: 12px !important; }
    .invoice-table th, .invoice-table td { padding: 8px !important; }

    /* === Centre pilotage cards === */
    .pilotage-card, .tenant-card { padding: 14px !important; }
    .pilotage-stats { flex-direction: column !important; gap: 8px !important; }
}

/* ============================================================
   PHONE - 480px (petit ecran)
============================================================ */
@media (max-width: 480px) {
    /* Padding encore plus reduit */
    .main, .dashboard-main, .content, main, .page-main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .plan-card, .info-card, .actions-wrapper,
    .card, .settings-card { padding: 12px !important; }

    /* Headers compacts */
    h1 { font-size: 20px !important; }
    h2 { font-size: 17px !important; }
    h3 { font-size: 14px !important; }

    /* Badges compacts */
    .badge, .period-pill, .tag {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    /* Selecteur periode : horizontal scroll */
    .period-pills {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .period-pill { flex-shrink: 0; }

    /* Pieuvre encore plus petite */
    .octopus-ui { transform: scale(0.45) translateY(-30%); }

    /* Login: plein ecran */
    .login-container, .auth-box {
        width: 94vw !important;
        padding: 24px !important;
    }
}

/* ============================================================
   Touch-specific (tablet + phone)
============================================================ */
@media (hover: none) and (pointer: coarse) {
    /* Pas de hover transforms gourmands en touch */
    .action-btn:hover, .intent-card:hover, .info-card:hover {
        transform: none !important;
    }
    /* Boutons plus gros en touch */
    button, .btn, a.link {
        -webkit-tap-highlight-color: transparent;
    }
}