/* Styles uniquement pour les appareils mobiles */
@media screen and (max-width: 767px) {
    /* Styles de base pour le corps de la page */
    body.not-connected {
        padding-top: 0 !important; 
        display: flex !important;
        flex-direction: column !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    /* HEADER ET NAVIGATION */
    body.not-connected #main-navbar {
        position: relative !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        z-index: 2 !important;
    }

    /* Style pour les logos sur la page de connexion */
    body.not-connected .navbar-left {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
    }

    body.not-connected .navbar-left img {
        max-height: 80px !important;
        width: auto !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ajustement du conteneur principal */
    body.not-connected .container {
        width: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
        order: 2 !important;
        margin-top: 175px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Ajustement du contenu central */
    body.not-connected .center-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        padding: 0 15px !important;
        overflow: hidden !important;
        height: auto !important;
    }

    /* Ajustement du formulaire */
    body.not-connected fieldset#connexion {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 15px !important;
    }

    /* Ajustement de la légende du formulaire */
    body.not-connected fieldset#connexion legend {
        margin-bottom: 30px !important;
    }

    /* Garder les styles existants pour l'état connecté */
    body.connected {
        padding-top: 50px !important;
    }

    /* Style pour les logos quand connecté */
    body.connected .navbar-left img {
        max-height: 40px !important;
        width: auto !important;
        margin-right: 1px !important;
    }

    /* Cacher le bouton hamburger sur la page de connexion */
    body.not-connected .navbar-toggle {
        display: none !important;
    }

    /* Toujours afficher le contenu sur la page de connexion */
    body.not-connected .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    
    /* Style pour les logos sur la page de connexion */
    body.not-connected .navbar-left {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
    }
    
    body.not-connected .navbar-left img {
        max-height: 80px !important;
        width: auto !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Garder le comportement hamburger quand connecté */
    body.connected .navbar-toggle {
        display: block !important;
        margin-right: 15px !important;
        float: right !important;
        margin-top: 8px !important;
    }
    
    /* Assurer que la navbar ne prend pas trop de place */
    #main-navbar {
        min-height: 50px !important;
    }
    
    /* Améliorer l'affichage du menu déroulant sur mobile */
    body.connected .navbar-collapse {
        max-height: none !important;
        padding: 0 15px !important;
    }
    
    /* Centrer les logos dans le menu déroulant sur mobile quand connecté */
    body.connected .navbar-left {
        float: none !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }

    /* Réduire la taille du texte d'accueil sur mobile */
    .navbar-text {
        font-size: 12px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        line-height: 1.2 !important;
    }
    
    /* Afficher les boutons de navigation à l'horizontal sur mobile */
    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-evenly !important;
        margin: 0 !important;
        float: none !important;
        width: 100% !important;
    }
    
    .navbar-nav > li {
        float: none !important;
        display: inline-block !important;
        margin: 0 10px !important;
    }
    
    .navbar-nav > li > a {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    /* Augmenter la taille des icônes pour une meilleure visibilité sur mobile */
    .navbar-nav > li > a > .glyphicon {
        font-size: 15px !important;
    }
    
    /* BOUTONS ET FORMULAIRES */
    /* Style pour les boutons dans le header */
    .navbar button, .navbar .btn {
        margin: 5px 3px !important;
        padding: 6px 10px !important;
        font-size: 14px !important;
        display: inline-block !important;
    }
    
    /* Conteneur pour les boutons */
    .navbar-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin: 10px 0 !important;
    }
    
    /* Ajuster les boutons sur mobile */
    .btn {
        padding: 5px 10px !important;
        font-size: 14px !important;
    }
    
    /* Styles pour les boutons d'action sur mobile */
    #liste-beneficiaires,
    #calendrier-seance,
    #creneau-modal {
        padding: 8px 12px !important;
        font-size: 14px !important;
        margin: 5px !important;
    }
    
    /* Ajuster les formulaires sur mobile */
    .form-group {
        margin-bottom: 8px !important;
    }
    
    .form-control {
        height: 30px !important;
        padding: 5px 10px !important;
        font-size: 14px !important;
    }
    
    /* Ajuster les labels sur mobile */
    label {
        font-size: 14px !important;
        margin-bottom: 3px !important;
    }
    
    /* Ajuster les filtres de recherche sur mobile */
    #champ_tri, .mot_cle {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 5px !important;
    }
    
    /* MODALS ET POPUPS */
    .modal-dialog {
        width: 95% !important;
        margin: 10px auto !important;
    }
    
    /* Réorganiser les boutons du footer UNIQUEMENT sur mobile */
    .modal-footer {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 15px !important;
        align-items: stretch !important;
    }
    
    /* Réduire la taille des boutons sur mobile */
    .modal-footer .btn,
    .modal-footer button,
    .modal .btn,
    .modal button {
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        height: auto !important;
        min-height: 44px !important;
        line-height: 1.2 !important;
        border-radius: 6px !important;
        text-align: center !important;
        display: block !important;
        float: none !important;
    }
    
    /* TABLEAUX ET DATATABLES */
    .table-responsive {
        border: none !important;
        margin-bottom: 10px !important;
    }
    
    /* Ajuster les tableaux DataTables sur mobile */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        float: none !important;
        margin: 5px 0 !important;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        width: 80% !important;
        margin-left: 0 !important;
    }
    
    /* Ajuster les cellules des tableaux sur mobile */
    table.dataTable th,
    table.dataTable td {
        padding: 5px !important;
        font-size: 12px !important;
        vertical-align: middle !important;
    }
    
    /* Améliorer la lisibilité des tableaux sur mobile */
    table.dataTable.stripe tbody tr.odd,
    table.dataTable.display tbody tr.odd {
        background-color: #f9f9f9 !important;
    }
    
    table.dataTable.hover tbody tr:hover,
    table.dataTable.display tbody tr:hover {
        background-color: #f5f5f5 !important;
    }
    
    /* MISE EN PAGE ET CONTENEURS */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Ajuster l'espacement des colonnes sur mobile */
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
    .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Ajuster les marges des rangées sur mobile */
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
        margin-bottom: 15px !important;
    }
    
    /* Ajuster les panneaux sur mobile */
    .panel {
        margin-bottom: 15px !important;
    }
    
    .panel-heading {
        padding: 8px 10px !important;
    }
    
    .panel-body {
        padding: 10px !important;
    }
    
    /* Ajuster les conteneurs spécifiques */
    #ConteneurGauche {
        margin-top: 15px !important;
    }
    
    /* TYPOGRAPHIE */
    h1 {
        font-size: 22px !important;
        margin: 15px 0 !important;
    }
    
    h2 {
        font-size: 20px !important;
        margin: 12px 0 !important;
    }
    
    h3 {
        font-size: 18px !important;
        margin: 10px 0 !important;
    }
    
    h4 {
        font-size: 14px !important;
        margin: 8px 0 !important;
    }
    
    /* Ajuster les sections avec titres */
    .section-titre-noir {
        font-size: 16px !important;
        padding: 5px 10px !important;
    }
    
    /* Ajuster les légendes sur mobile */
    #legendPatient,
    #legendSeance {
        font-size: 16px !important;
        padding: 8px !important;
    }
    
    /* Améliorer la navigation entre les sections */
    #select-section .btn-group-vertical {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    #select-section .btn {
        margin: 3px !important;
        flex: 1 1 45% !important;
        font-size: 12px !important;
        padding: 8px 5px !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 50px !important;
    }
    
    /* Ajuster la mise en page générale du tableau de bord */
    .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding: 0 10px !important;
    }
    
    .col-lg-2, .col-lg-10 {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Ajuster les filtres */
    #filtres .row {
        margin-bottom: 10px !important;
    }
    
    #filtres .col-md-2 {
        display: none !important;
    }
    
    #filtres .col-md-3 {
        width: 50% !important;
        padding: 0 5px !important;
        float: left !important;
    }
    
    #filtres label {
        text-align: left !important;
        padding-top: 7px !important;
    }
    
    /* Ajuster les sections */
    .section-noir {
        padding: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .section-titre-noir {
        font-size: 16px !important;
        padding: 5px 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* TABLEAUX SPÉCIFIQUES */
    
    /* Tableaux dans les onglets information orientations, professionnels de sante, mutuelles */
    #nombre-orientations-table,
    #prise-en-charge-mois-table,
    #nombre-prescriptions-table,
    #repartition-mutuelles-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #nombre-orientations-table th,
    #nombre-orientations-table td,
    #prise-en-charge-mois-table th,
    #prise-en-charge-mois-table td,
    #nombre-prescriptions-table th,
    #nombre-prescriptions-table td,
    #repartition-mutuelles-table th,
    #repartition-mutuelles-table td {
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 5px !important;
    }
    
    /* Réduire la largeur de la première colonne pour les tableaux spécifiques */
    #nombre-orientations-table th:first-child,
    #nombre-orientations-table td:first-child,
    #prise-en-charge-mois-table th:first-child,
    #prise-en-charge-mois-table td:first-child,
    #nombre-prescriptions-table th:first-child,
    #nombre-prescriptions-table td:first-child,
    #repartition-mutuelles-table th:first-child,
    #repartition-mutuelles-table td:first-child {
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* GRAPHIQUES */
    
    /* Ajuster tous les graphiques pour qu'ils soient responsives */
    canvas {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        position: relative !important;
        z-index: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Préserver la cliquabilité des graphiques dans l'onglet objectifs */
    #objectifs canvas,
    #repartition-objectif {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
        touch-action: auto !important;
    }
    
    /* Conteneur du graphique d'objectifs */
    #objectifs .col-md-12 {
        position: relative !important;
        z-index: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Ajuster la disposition des graphiques */
    #main .col-md-3,
    #activites-patients .col-md-3,
    #orientation .col-md-3,
    #evaluation .col-md-6,
    #evaluation .col-md-12,
    #questionnaires .col-md-4,
    #questionnaires .col-md-8,
    #objectifs .col-md-12 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
    }
    
    /* Graphiques spécifiques dans l'onglet évaluations */
    #amelioration-phys,
    #amelioration-distance-parcourue,
    #amelioration-force-mb-sup,
    #amelioration-equilibre-statique,
    #amelioration-souplesse,
    #evolution-mobilite-scapulo-humerale,
    #evolution-endurance-mb-inf {
        margin-bottom: 20px !important;
    }
    
    /* Graphiques spécifiques dans l'onglet objectifs */
    #repartition-objectif {
        height: auto !important;
        min-height: 250px !important;
        max-height: 350px !important;
    }
    
    /* Ajuster les contrôles de filtre */
    #specialite {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Améliorer la lisibilité des légendes des graphiques */
    .chartjs-legend li {
        font-size: 12px !important;
        margin-right: 10px !important;
        padding: 2px 5px !important;
    }
    
    /* Ajuster l'espacement entre les graphiques */
    .row {
        margin-bottom: 10px !important;
    }
    
    /* Améliorer l'affichage du tableau principal */
    #tableau-bord {
        font-size: 12px !important;
    }
    
    #tableau-bord th,
    #tableau-bord td {
        padding: 5px !important;
        white-space: nowrap !important;
    }
    
    /* Ajouter un indicateur de défilement horizontal pour les tableaux */
    .table-responsive::after {
        content: "← Faites défiler →" !important;
        display: block !important;
        text-align: center !important;
        font-size: 12px !important;
        color: #666 !important;
        padding: 5px !important;
    }
    
    /* Correction spécifique pour le graphique d'orientation sur mobile */
    #orientation {
        position: relative !important;
        z-index: 1 !important;
    }

    #orientation .col-md-3 {
        position: static !important;
    }

    #repartition-orientation,
    #orientation canvas {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        position: relative !important;
        z-index: 1000 !important;
        cursor: pointer !important;
    }

    /* Augmenter la zone cliquable en ajoutant un padding invisible */
    #orientation canvas {
        padding: 15px !important;
        margin: -15px !important;
        box-sizing: content-box !important;
    }

    /* S'assurer qu'aucun élément ne bloque les interactions */
    #orientation * {
        pointer-events: auto !important;
    }

    /* Désactiver temporairement les animations sur mobile pour ce graphique */
    #orientation {
        touch-action: auto !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        }
        
    /* Forcer le rendu hardware pour de meilleures performances */
    #repartition-orientation {
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        perspective: 1000px !important;
    }

    /* Afficher le tableau uniquement sur mobile */
    .mobile-only-table {
        display: none !important;
    }

    .mobile-only-table {
        display: block !important;
    }
    
    /* Styles pour le tableau d'orientation sur mobile */
    #repartition-orientation-table-container {
        margin-top: 20px !important;
        padding: 0 5px !important;
    }
    
    #repartition-orientation-table {
        width: 100% !important;
        font-size: 14px !important;
        border-collapse: collapse !important;
    }
    
    #repartition-orientation-table th,
    #repartition-orientation-table td {
        padding: 8px !important;
        text-align: left !important;
        border-bottom: 1px solid #ddd !important;
    }
    
    #repartition-orientation-table th {
        background-color: #f2f2f2 !important;
        font-weight: bold !important;
    }
    
    /* Conserver l'affichage du graphique même sur mobile */
    #orientation .col-md-3 {
        display: block !important;
        width: 100% !important;
    }
    /* Style pour les conteneurs de graphiques */
[id$="-chart"] {
    position: relative;
    min-height: 300px;
    width: 100%;
}

    [id$="-chart"] {
        min-height: 250px;
    }
    
    /* Améliorer la lisibilité des légendes sur mobile */
    .chartjs-legend {
        font-size: 12px !important;
        margin-top: 10px !important;
    }
    
    /* Assurer que les tooltips restent visibles */
    .chartjs-tooltip {
        z-index: 1000 !important;
    }

    /* Ajustement du formulaire de connexion */
    body.not-connected .container {
        padding: 0 15px !important;
        overflow: hidden !important;
        height: 100vh !important;
    }

    body.not-connected {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Style pour les conteneurs de graphiques */
.chart-container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 300px;
    margin-bottom: 20px;
}

/* Style pour les graphiques sur mobile */
@media (max-width: 768px) {
    .chart-container {
        min-height: 250px;
    }
}

/* Style pour les données sous les graphiques sur mobile */
.mobile-chart-data {
    display: none;
}

@media (max-width: 768px) {
    .mobile-chart-data {
        display: block;
        margin-top: 15px;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }
    
    .mobile-chart-data ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-chart-data li {
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
    }
    
    .mobile-chart-data li:last-child {
        border-bottom: none;
    }
    
    .mobile-chart-data .data-label {
        font-weight: bold;
    }
    
    .mobile-chart-data .data-value {
        text-align: right;
    }
}

/* Ajustements pour très petits écrans */
@media (max-width: 480px) {
    body.not-connected .navbar-left img {
        max-height: 60px !important;
    }

    body.not-connected .center-content {
        margin-top: 0px !important;
    }
}

/* Ajout d'une media query spécifique pour les appareils mobiles */
@media only screen and (max-device-width: 767px) {
    .navbar-collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .navbar-left {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
    }

    .navbar-left img {
        max-height: 80px !important;
        width: auto !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media screen and (max-width: 768px) {
    .navbar-collapse {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        background-color: #191970;
        z-index: 1000;
        transition: all 0.35s ease;
    }

    .navbar-collapse.collapse {
        display: none !important;
        height: 0 !important;
        opacity: 0;
    }

    .navbar-collapse.in {
        display: block !important;
        overflow-y: auto;
        max-height: calc(100vh - 50px);
        opacity: 1;
        height: auto !important;
    }

    .navbar-collapse.collapsing {
        height: auto !important;
        opacity: 0;
        transition: all 0.35s ease;
    }

    /* Style pour les liens dans le menu mobile */
    .navbar-nav {
        margin: 0;
        width: 100%;
    }

    .navbar-nav > li {
        float: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.35s ease;
    }

    .navbar-collapse.in .navbar-nav > li {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    .navbar-nav > li > a {
        padding: 15px;
        color: white;
    }
}