/* ============================================================
   responsive.css – Filet de sécurité global multi-écrans
   Android & iOS – S'ajoute aux CSS existants SANS les modifier.
   Chargé automatiquement sur toutes les pages via css_link().
   ============================================================ */

/* --- 1. Base : éviter le zoom texte iOS, les débordements --- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* Empêche le zoom automatique iOS sur les champs quand on tape */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px;
    }
}

/* --- 2. Images, canvas (graphiques) et vidéos ne débordent jamais --- */
img, canvas, video, svg, iframe {
    max-width: 100%;
}

.chart-container canvas,
.chart-wrapper canvas,
canvas.chart,
#chartContainer canvas {
    max-width: 100% !important;
}

/* --- 3. Hauteurs dynamiques (barre d'adresse mobile Android/iOS) --- */
@supports (height: 100dvh) {
    body, .main-container, .sidebar, .form-bg-gradient {
        min-height: 100dvh;
    }
    @media (max-width: 780px) {
        .sidebar, .sidebar.active,
        .sidebar-overlay {
            height: 100dvh;
        }
    }
}

/* --- 4. Zones sûres iOS (encoche / barre d'accueil) --- */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    @media (max-width: 780px) {
        .main-content {
            padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
        }
        .sidebar {
            padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
        }
        .popup-content, .modal-content {
            padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
        }
    }
}

/* --- 5. Barres d'outils & conteneurs de filtres flexibles --- */
@media (max-width: 780px) {
    .filter-bar, .filter-section, .toolbar,
    .flex-actions, .action-buttons {
        flex-wrap: wrap;
    }

    .filter-bar > *, .filter-section > *, .toolbar > * {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .filter-bar input, .filter-bar select,
    .filter-section input, .filter-section select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* --- 6. DataTables : filtres, pagination et tableau utilisables --- */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter {
        text-align: left;
        width: 100%;
        float: none;
        margin: 8px 0;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }
    .dataTables_wrapper .dataTables_length {
        width: 100%;
        float: none;
        margin-bottom: 8px;
        text-align: left;
    }
    .dataTables_wrapper .dataTables_info {
        text-align: center;
        width: 100%;
        float: none;
        padding: 8px 0;
        font-size: 0.85rem;
    }
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        width: 100%;
        float: none;
        padding-top: 8px;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 5px 10px;
        margin: 2px;
    }
    .dataTables_wrapper .dataTables_scrollHeadInner table {
        width: 100% !important;
    }
}

/* --- 7. Tableaux en général : jamais de rupture de mise en page --- */
@media (max-width: 640px) {
    table {
        table-layout: auto;
    }
    /* Ligne/colonne d'actions reste alignée à gauche */
    .actions, td.actions, .table-actions {
        text-align: left;
        justify-content: flex-start;
    }
    .table-actions {
        flex-wrap: wrap;
    }
}

/* --- 8. Fenêtres modales & popups sur très petits écrans --- */
@media (max-width: 480px) {
    .popup-content, .modal-content, .modal {
        width: 94% !important;
        max-width: 94% !important;
        margin: 2% auto !important;
        padding: 14px;
        max-height: 88vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .popup-header, .modal-header {
        padding-bottom: 10px;
    }
}

/* --- 9. Boutons pleine largeur dans les boîtes d'action --- */
@media (max-width: 480px) {
    .form-actions, .confirm-actions,
    .action-buttons, .modal-footer {
        flex-direction: column;
    }
    .form-actions button, .confirm-actions button,
    .action-buttons .btn, .modal-footer .btn {
        width: 100%;
        margin: 4px 0;
    }
}

/* --- 10. Grilles "cartes" complémentaires : repli propre --- */
@media (max-width: 560px) {
    .cards-grid, .dashboard-cards, .info-grid, .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 11. Correctifs paysage mobile (hauteur limitée) --- */
@media (max-height: 520px) and (orientation: landscape) {
    .main-content {
        padding-top: 6px;
    }
    .header {
        padding: 10px 12px;
        margin-bottom: 12px;
    }
    .header .logo {
        max-height: 42px;
    }
    .header h1 {
        font-size: 1.15rem;
    }
    .sidebar-nav a {
        padding: 10px 14px;
    }
}

/* --- 12. Écrans très étroits (<360px) --- */
@media (max-width: 360px) {
    body {
        font-size: 14px;
    }
    .main-content {
        padding-left: 6px;
        padding-right: 6px;
    }
    .header h1 {
        font-size: 1.05rem;
        letter-spacing: 0;
    }
    .header .subtitle {
        font-size: 0.78rem;
    }
    .stat-label {
        letter-spacing: 0;
    }
}

/* --- 13. Cartes interactives (Leaflet) : la sidebar reste au-dessus --- */
@media (max-width: 780px) {
    .leaflet-container {
        width: 100% !important;
    }
    .leaflet-control-container .leaflet-control {
        margin-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* --- 14. Accessibilité tactile : zones cliquables minimum --- */
@media (hover: none) and (pointer: coarse) {
    .pagination-wrapper a, .pagination-wrapper span {
        min-width: 40px;
        min-height: 40px;
        line-height: 1.4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn, button, .pagination-wrapper a {
        min-height: 40px;
    }
    input[type="checkbox"], input[type="radio"] {
        width: 20px;
        height: 20px;
    }
}