/* =====================================================================
   responsive.css — Améliorations responsive globales de l'application
   Chargé après typography.css dans le <head>. Certaines règles utilisent
   !important pour primer sur les blocs <style> inline présents dans
   chaque vue (qui apparaissent plus loin dans le document).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Base : éviter les débordements horizontaux et fluidifier les médias
   --------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Les tableaux non enveloppés dans .table-responsive peuvent déborder :
   on s'assure que leur conteneur direct permet le défilement horizontal. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------
   Barres de défilement : visibles et homogènes dans toute l'application
   --------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 #f1f1f1;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: #b0b0b0;
    border-radius: 5px;
    border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #8a8a8a;
}

/* Conteneur générique défilable pour les blocs très chargés.
   À ajouter sur un élément qui doit afficher sa propre barre de défilement. */
.scroll-box {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
}

/* En-têtes de tableau collants à l'intérieur d'un conteneur défilable
   (utile quand .table-responsive ou .scroll-box est limité en hauteur). */
.table-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ---------------------------------------------------------------------
   Tablette et mobile (< 992px)
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .main-content {
        padding: 1.25rem;
    }

    .navbar {
        padding: 0.75rem 1rem !important;
    }

    /* En-têtes de page : empiler titre + actions et réduire l'espace */
    .page-title {
        padding: 1.1rem 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }

    /* Les lignes d'en-tête "titre à gauche / boutons à droite" passent
       en colonne pour éviter le débordement. */
    .page-title .d-flex.justify-content-between,
    .page-title .row.align-items-center {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* ---------------------------------------------------------------------
   Mobile (< 768px)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .main-content {
        padding: 0.85rem;
    }

    .page-title h1,
    .page-title h2 {
        font-size: 1.4rem !important;
    }

    /* Cartes : un peu d'air entre elles quand elles s'empilent */
    .card,
    .stats-card,
    .detail-card {
        margin-bottom: 1rem;
    }

    .card-header,
    .card-body {
        padding: 1rem !important;
    }

    /* Tableaux plus compacts et lisibles sur petit écran */
    .table thead th,
    .table tbody td {
        padding: 0.6rem 0.5rem !important;
        font-size: 0.85rem !important;
    }

    /* Le zoom des lignes au survol provoque un débordement horizontal
       sur mobile : on le neutralise. */
    .table tbody tr:hover {
        transform: none !important;
    }

    /* Boutons d'action : pleine largeur et empilés pour faciliter le tap */
    .action-buttons {
        width: 100%;
    }

    .action-buttons .btn {
        flex: 1 1 100%;
    }

    /* Groupes de boutons d'en-tête : autoriser le retour à la ligne */
    .page-title .btn,
    .card-header .btn {
        margin-bottom: 0.25rem;
    }

    /* Contrôles DataTables : empilés et centrés pour éviter le débordement */
    .dataTables_wrapper .row > div {
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center !important;
        float: none !important;
        margin-bottom: 0.5rem;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: auto;
        max-width: 70%;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_info {
        text-align: center !important;
    }

    /* Modales : utiliser quasiment toute la largeur de l'écran */
    .modal-dialog {
        max-width: 95vw !important;
        margin: 0.5rem auto !important;
    }

    /* Sélecteur d'entité dans la navbar : ne pas écraser le texte */
    .navbar .dropdown-toggle {
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------
   Petit mobile (< 576px)
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .main-content {
        padding: 0.65rem;
    }

    .page-title h1,
    .page-title h2 {
        font-size: 1.2rem !important;
    }

    .table thead th,
    .table tbody td {
        padding: 0.5rem 0.4rem !important;
        font-size: 0.8rem !important;
    }

    /* Boutons légèrement plus compacts */
    .btn {
        padding: 0.45rem 0.7rem;
    }

    /* Masquer le texte de bienvenue très long sur très petit écran */
    .navbar-text {
        font-size: 0.85rem;
    }

    /* Pagination plus compacte */
    .pagination .page-link {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }
}
