/**
 * Optimisations responsive pour PC, Tablette et Smartphone
 * - Desktop : > 1024px (styles par défaut)
 * - Tablette : 768px - 1024px (landscape et portrait)
 * - Smartphone : < 768px
 */

/* ========================================
   RÈGLE GLOBALE - Module content header + position
   ======================================== */
/* Masquer uniquement le titre du module de monitoring détaillé */
.module-content:not(.hidden) .detailed-monitoring-module .module-content-title {
    display: none !important;
}

/* Header compact pour le module de monitoring détaillé */
.module-content:not(.hidden) .detailed-monitoring-module .module-content-header {
    padding: 0.2rem 0.4rem !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    justify-content: space-between !important;
}

/* Garder le badge de cible visible dans le module de monitoring détaillé */
.module-content:not(.hidden) .detailed-monitoring-module .header-left-section {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.module-content:not(.hidden) .detailed-monitoring-module .target-badge {
    display: flex !important;
}

/* Masquer le dashboard quand un module est ouvert */
.module-content:not(.hidden) ~ .dashboard-modules,
.dashboard-content:has(.module-content:not(.hidden)) .dashboard-modules {
    display: none !important;
}

/* ========================================
   TABLETTE - MODE PAYSAGE (Landscape)
   ======================================== */
@media (max-width: 1366px) and (orientation: landscape) {
    
    /* ==============================
       UNIFORMISATION GLOBALE
       ============================== */
    
    /* Police de caractère identique partout */
    body, body *, 
    .navbar, .navbar *,
    .dashboard-content, .dashboard-content *,
    .module-content, .module-content *,
    .system-module, .system-module *,
    .server-content, .server-content *,
    input, select, button, textarea {
        font-family: var(--font-sans) !important;
    }
    
    /* ==============================
       NAVBAR - Hauteur minimale
       ============================== */
    body .navbar {
        padding: 0.2rem 0.4rem !important;
        min-height: 2.2rem !important;
        z-index: 10000 !important;
    }
    
    body .navbar .kiwi-logo {
        height: 1.8rem !important;
    }
    
    body .navbar .navbar-user {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    
    body .navbar .navbar-user button {
        height: 1.8rem !important;
        width: 1.8rem !important;
        font-size: 0.7rem !important;
        padding: 0 !important;
    }
    
    body .navbar .language-selector-mini,
    body .navbar .language-selector-compact {
        position: relative !important;
        z-index: 9999 !important;
    }
    
    body .navbar .navbar-brand h1 {
        font-size: 0.9rem !important;
    }
    
    /* ==============================
       DASHBOARD CONTENT - ÉCRAN D'ACCUEIL
       ============================== */
    
    /* Optimisations de taille uniquement, pas de modification d'affichage */
    .dashboard-content {
        padding: 0.25rem !important;
        position: relative !important;
        height: var(--available-height) !important;
        min-height: var(--available-height) !important;
        max-height: var(--available-height) !important;
    }
    
    .dashboard-modules {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
        margin-bottom: 0.4rem !important;
        padding: 0.2rem !important;
    }
    
    /* Quand un module est ouvert, il prend toute la place */
    .module-content:not(.hidden) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
        background-color: var(--bg-secondary) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Masquer seulement le titre, garder le bouton retour */
    .module-content:not(.hidden) .module-content-title {
        display: none !important;
    }
    
    .module-content:not(.hidden) .module-content-header {
        padding: 0.2rem 0.4rem !important;
        min-height: auto !important;
        margin-bottom: 0.3rem !important;
        border-bottom: none !important;
    }
    
    /* Contenu scrollable */
    .module-content:not(.hidden) > *:not(.module-content-header) {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 0.25rem !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Monitoring détaillé: pas de padding/scroll global ici, le scroll doit rester dans les sous-zones (tableau) */
    .module-content:not(.hidden) > .detailed-monitoring-module {
        padding: 0 !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    /* Système: même principe — la spécificité 0-3-0 de la règle générale écrase
       le padding:0 du sélecteur .system-module (0-1-0) ; on corrige ici
       pour éviter les 8 px de padding vertical qui coupent le contenu en bas */
    .module-content:not(.hidden) > .system-module {
        padding: 0 !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }
    
    .module-card {
        padding: 0.5rem !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    .module-icon {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
        border-radius: 6px !important;
    }
    
    .module-title {
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.2 !important;
    }
    
    .module-description {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    /* Scrollbars fines */
    .dashboard-content::-webkit-scrollbar {
        width: 6px;
    }
    
    .dashboard-content::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .dashboard-content::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    .dashboard-content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* ==============================
       MODULE MONITORING DÉTAILLÉ
       ============================== */
    .detailed-monitoring-module {
        height: var(--available-height) !important;
        max-height: var(--available-height) !important;
        overflow: hidden !important;
    }
    
    .module-content-header {
        padding: 0.2rem 0.4rem !important;
        min-height: 1.5rem !important;
    }
    
    .module-content-title {
        font-size: 0.75rem !important;
    }
    
    .target-selector-wrapper label {
        font-size: 0.7rem !important;
    }
    
    .target-selector-detailed {
        min-width: 90px !important;
        font-size: 0.7rem !important;
        height: 1.1rem !important;
        padding: 0.05rem 0.2rem !important;
    }
    
    .btn-back {
        font-size: 0.7rem !important;
        height: 1.1rem !important;
        padding: 0.1rem 0.3rem !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    .header-buttons button {
        font-size: 0.7rem !important;
        height: 1.1rem !important;
        padding: 0.1rem 0.3rem !important;
    }
    
    /* Header monitoring - ultra compact */
    .monitoring-header {
        padding: 0.3rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .monitoring-header h2 {
        font-size: 0.95rem !important;
    }
    
    .config-display {
        gap: 0.25rem !important;
        margin-top: 0.2rem !important;
    }
    
    .config-item {
        padding: 0.2rem 0.3rem !important;
        font-size: 0.65rem !important;
    }
    
    /* Contenu TOEM */
    .monitoring-content {
        max-height: var(--available-height) !important;
        overflow: hidden !important;
    }
    
    .toem-container {
        padding: 0.2rem 0.3rem !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    #toem-monitoring-container {
        max-height: var(--toem-container-height, 100%) !important;
        height: var(--toem-container-height, 100%) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
    }
    
    /* ==============================
       LAYOUT TROIS COLONNES TOEM
       ============================== */
    .toem-three-column-layout {
        gap: 0.3rem !important;
        padding: 0.3rem !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }
    
    /* Colonne gauche - Boutons */
    .toem-side-panel {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        padding: 0.3rem !important;
        gap: 0.25rem !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        height: 100% !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    
    .toem-side-panel button {
        padding: 0.25rem 0.3rem !important;
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        height: auto !important;
        min-height: 1.4rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        text-align: center !important;
    }
    
    .toem-side-panel .zoom-select {
        margin-top: 0.3rem !important;
        padding: 0.3rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Colonne centrale - SVG Cibles */
    .toem-center-panel {
        flex: 1 1 auto !important;
        min-width: 200px !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        height: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    #zoom-cible-svg {
        flex: 1 !important;
        max-height: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    #zoom-cible-svg svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
    }
    
    .scene-container {
        gap: 0.3rem !important;
        margin-bottom: 0.4rem !important;
        display: block !important;
    }
    
    .scene-container h3 {
        font-size: 0.85rem !important;
        margin-bottom: 0.2rem !important;
        padding-bottom: 0.15rem !important;
    }
    
    .scene-container svg {
        max-height: 160px !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Colonne droite - Tableau */
    .toem-right-panel {
        flex: 0 0 380px !important;
        min-width: 380px !important;
        max-width: 380px !important;
        gap: 0.3rem !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        height: 100% !important;
    }
    
    .toem-right-panel h3 {
        font-size: 0.85rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    .table-section {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        min-height: 0 !important;
    }
    
    .table-wrapper {
        flex: 1 1 auto !important;
        max-height: var(--available-height) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
    }
    
    #shot-data-table {
        font-size: 0.65rem !important;
    }

    #group-coordinates-display {
        font-size: 0.65rem !important;
    }
    
    #shot-data-table th,
    #shot-data-table td {
        padding: 0.12rem 0.15rem !important;
        font-size: 0.6rem !important;
    }
    
    #shot-data-table th {
        font-size: 0.6rem !important;
        font-weight: 600 !important;
    }
    
    /* Checkbox plus petites */
    #shot-data-table input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
    }
    
    /* ==============================
       SCROLLBARS FINES
       ============================== */
    .table-wrapper::-webkit-scrollbar,
    #toem-monitoring-container::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .table-wrapper::-webkit-scrollbar-track,
    #toem-monitoring-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .table-wrapper::-webkit-scrollbar-thumb,
    #toem-monitoring-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    .table-wrapper::-webkit-scrollbar-thumb:hover,
    #toem-monitoring-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* ==============================
       MODAL DE CONFIGURATION
       ============================== */
    .modal-content {
        max-height: 85vh !important;
        width: 85% !important;
    }
    
    .modal-header {
        padding: 0.5rem !important;
    }
    
    .modal-header h3 {
        font-size: 0.95rem !important;
    }
    
    .modal-body {
        padding: 0.5rem !important;
    }
    
    .modal-footer {
        padding: 0.5rem !important;
    }
    
    .config-section {
        margin-bottom: 0.75rem !important;
    }
    
    .config-section h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    #target-preview-canvas {
        max-width: 180px !important;
        max-height: 180px !important;
        width: 180px !important;
        height: 180px !important;
    }
    
    /* ==============================
       DIVERS
       ============================== */
    
    /* Compacter tous les titres */
    h2, h3, h4 {
        margin-top: 0.3rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    /* Réduire les gaps partout */
    .monitoring-content > *,
    .toem-container > * {
        margin-bottom: 0.3rem !important;
    }
    
    /* Supprimer les marges inutiles */
    .toem-container > *:last-child {
        margin-bottom: 0 !important;
    }
    
    /* ==============================
       MODULE SYSTÈME - OPTIMISATION
       ============================== */
    
    .system-module {
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .system-module .module-content-header {
        padding: 0.3rem 0.5rem !important;
        min-height: 2.2rem !important;
        gap: 0.5rem !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }
    
    .system-module .module-content-title {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .system-module .target-selector-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .system-module .target-selector-wrapper label {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .system-module .target-selector-wrapper select {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.3rem !important;
        height: 1.6rem !important;
        line-height: 1.2 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .system-module .btn-sm {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
        height: 1.6rem !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .system-module .header-left-section {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }
    
    .system-module .module-content-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        flex-shrink: 0 !important;
        justify-content: flex-end !important;
    }
    
    #systemStatus {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        height: auto !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Onglets système compacts */
    .system-tabs {
        padding: 0 0.15rem !important;
        gap: 0.15rem !important;
        overflow-x: auto !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        min-height: 1.8rem !important;
    }
    
    .system-tab {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.65rem !important;
        min-width: 50px !important;
        height: auto !important;
        line-height: 1.2 !important;
        color: var(--text-primary, #e0e0e0) !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .system-tab.active {
        color: var(--primary-color, #9ACD32) !important;
    }
    
    /* Contenu des onglets - UNIFORMISATION COMPLÈTE */
    .system-tab-content {
        padding: 0.2rem 0.3rem !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* UNIFORMISATION: Tous les textes dans system-tab-content */
    .system-tab-content,
    .system-tab-content *,
    .system-tab-content h1,
    .system-tab-content h2,
    .system-tab-content h3,
    .system-tab-content h4,
    .system-tab-content h5,
    .system-tab-content p,
    .system-tab-content span,
    .system-tab-content td,
    .system-tab-content th,
    .system-tab-content li,
    .system-tab-content label,
    .system-tab-content strong {
        font-size: 0.55rem !important;
        line-height: 1.1 !important;
    }
    
    /* Léger ajustement pour h3 (titre de section) */
    .system-tab-content h3 {
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        margin: 0 0 0.2rem 0 !important;
        padding-bottom: 0.15rem !important;
    }
    
    .system-tab-content h4 {
        font-size: 0.55rem !important;
        font-weight: 600 !important;
        font-size: 0.7rem !important;
        margin: 0.2rem 0 0.15rem 0 !important;
    }
    
    /* Tables de registres */
    .register-table-container {
        margin: 0.2rem 0 !important;
        max-height: calc(100vh - 6rem) !important;
        overflow: auto !important;
    }
    
    .register-table {
        font-size: 0.6rem !important;
    }
    
    .register-table th {
        padding: 0.2rem 0.3rem !important;
        font-size: 0.6rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        line-height: 1.1 !important;
    }
    
    .register-table td {
        padding: 0.15rem 0.3rem !important;
        font-size: 0.6rem !important;
        line-height: 1.1 !important;
    }
    
    .field-name {
        max-width: 100px !important;
        font-size: 0.6rem !important;
    }
    
    .field-value {
        min-width: 40px !important;
        font-size: 0.6rem !important;
    }
    
    .field-desc {
        font-size: 0.55rem !important;
        line-height: 1.1 !important;
    }
    
    /* Cartes d'information */
    .info-card,
    .diagnostic-card {
        padding: 0.2rem !important;
        margin-bottom: 0.15rem !important;
        border-radius: 3px !important;
    }
    
    .info-card h4,
    .diagnostic-card h4 {
        font-size: 0.6rem !important;
        margin-bottom: 0.1rem !important;
        line-height: 1 !important;
        padding-bottom: 0.05rem !important;
    }
    
    .info-card h5,
    .diagnostic-card h5 {
        font-size: 0.58rem !important;
        margin-bottom: 0.1rem !important;
        line-height: 1 !important;
        padding-bottom: 0.05rem !important;
    }
    
    .info-card p,
    .diagnostic-card p {
        font-size: 0.55rem !important;
        margin-bottom: 0.05rem !important;
        line-height: 1.1 !important;
    }
    
    .diagnostic-card p strong {
        font-size: 0.55rem !important;
        margin-right: 0.15rem !important;
    }
    
    .info-card button,
    .diagnostic-card button {
        padding: 0.1rem 0.25rem !important;
        font-size: 0.55rem !important;
        height: 1.1rem !important;
        line-height: 1 !important;
    }
    
    /* Grid de cartes - 3 colonnes pour plus de densité */
    .diagnostic-grid,
    .info-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 0.15rem !important;
        margin: 0.15rem 0 !important;
    }
    
    /* Status indicators compacts */
    .status-indicator {
        padding: 0.1rem 0.3rem !important;
        font-size: 0.55rem !important;
        border-radius: 2px !important;
    }
    
    .status-result {
        padding: 0.05rem 0.25rem !important;
        font-size: 0.55rem !important;
        min-width: 15px !important;
    }
    
    /* Sections */
    .section-header {
        padding: 0.15rem 0.25rem !important;
        margin-bottom: 0.15rem !important;
    }
    
    .section-header h4 {
        font-size: 0.65rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    /* Formulaires */
    .form-group {
        margin-bottom: 0.5rem !important;
    }
    
    .form-group label {
        font-size: 0.875rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.2 !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
        height: auto !important;
        min-height: 2rem !important;
        line-height: 1.2 !important;
    }
    
    /* Boutons d'action */
    .action-buttons {
        gap: 0.3rem !important;
        margin-top: 0.3rem !important;
    }
    
    .action-buttons button {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    /* SVG dans système - SAUF monitoring */
    .system-tab-content:not(#system-tab-monitoring) svg:not(.config-targets-svg) {
        max-height: 300px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* SVG dans monitoring - hauteur complète */
    #system-tab-monitoring svg {
        max-height: none !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Logs */
    .log-container {
        max-height: calc(100vh - 13rem) !important;
        overflow-y: auto !important;
        font-size: 0.65rem !important;
    }
    
    .log-entry {
        padding: 0.2rem 0.3rem !important;
        font-size: 0.65rem !important;
    }
    
    /* Status indicators */
    .status-indicator {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.3rem !important;
    }
    
    /* Onglet monitoring système spécifique - même chaîne de hauteur que la vue cible */
    #system-tab-monitoring {
        padding: 0 !important;
        overflow: hidden !important;
        height: 100% !important;
    }
    
    #system-tab-monitoring #zoom-cible-svg {
        max-height: none !important;
        height: 100% !important;
        display: block !important;
    }
    
    #system-tab-monitoring #zoom-cible-svg svg {
        max-height: none !important;
        height: 100% !important;
        display: block !important;
    }
    
    #system-monitoring-container {
        max-height: none !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    #system-monitoring-module {
        height: 100% !important;
        max-height: none !important;
        overflow: hidden !important;
    }
    
    #system-monitoring-content {
        max-height: none !important;
        height: 100% !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }
    
    /* Configuration forms dans système */
    .config-form {
        max-height: calc(100vh - 12rem) !important;
        overflow-y: auto !important;
    }
    
    .config-section {
        margin-bottom: 0.4rem !important;
    }
    
    .config-section h4 {
        font-size: 0.75rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    /* No data displays */
    .no-data {
        padding: 0.5rem !important;
        font-size: 0.7rem !important;
    }
    
    /* ==============================
       ONGLET CONFIGURATION - OPTIMISATION
       ============================== */
    
    /* Section de programmation */
    .programming-section {
        padding: 0.1rem !important;
    }
    
    .programming-section h4 {
        font-size: 0.65rem !important;
        margin: 0.1rem 0 !important;
        padding-bottom: 0.05rem !important;
        line-height: 1 !important;
    }
    
    /* Grid de cartes de configuration - 4 / 2 / 1 colonnes */
    .programming-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.1rem !important;
        margin: 0.1rem 0 !important;
        align-items: start !important;
    }

    @media (max-width: 900px) {
        .programming-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 599px) {
        .programming-grid {
            grid-template-columns: 1fr !important;
        }
    }
    
    /* Cartes de configuration */
    .programming-card {
        padding: 0.1rem !important;
        margin-bottom: 0 !important;
        border-radius: 2px !important;
    }
    
    .programming-card h5 {
        font-size: 0.55rem !important;
        margin-bottom: 0.05rem !important;
        padding-bottom: 0.03rem !important;
        line-height: 1 !important;
    }
    
    .programming-card-wide {
        grid-column: 1 / -1 !important;
    }
    
    /* Formulaires de configuration */
    .programming-form {
        padding: 0.1rem !important;
    }
    
    .programming-form-group {
        margin-bottom: 0.1rem !important;
    }
    
    .programming-form-group label {
        font-size: 0.55rem !important;
        margin-bottom: 0.03rem !important;
        line-height: 1 !important;
        display: block !important;
    }
    
    .programming-form-group select,
    .programming-form-group input[type="number"] {
        font-size: 0.55rem !important;
        padding: 0.05rem 0.1rem !important;
        height: 1rem !important;
        line-height: 1 !important;
        width: 100% !important;
    }
    
    /* Grille de coordonnées */
    .coordinates-grid,
    .servo-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.08rem !important;
        margin-bottom: 0.1rem !important;
    }
    
    .coordinates-pair,
    .servo-pair {
        display: grid !important;
        grid-template-columns: 20px 1fr 1fr !important;
        gap: 0.1rem !important;
        align-items: center !important;
    }
    
    .servo-pair {
        grid-template-columns: max-content 1fr !important;
    }
    
    .coordinates-label,
    .servo-label {
        font-size: 0.5rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }
    
    .coordinates-pair input,
    .servo-pair input {
        font-size: 0.55rem !important;
        padding: 0.05rem 0.1rem !important;
        height: 1rem !important;
        line-height: 1 !important;
    }
    
    /* Boutons de programmation */
    .programming-btn {
        padding: 0.1rem 0.2rem !important;
        font-size: 0.55rem !important;
        height: 1rem !important;
        line-height: 1 !important;
        width: 100% !important;
        margin-top: 0.1rem !important;
    }
    
    /* File input wrapper */
    .file-input-wrapper {
        display: flex !important;
        gap: 0.1rem !important;
    }
    
    .file-input-display {
        font-size: 0.55rem !important;
        padding: 0.05rem 0.1rem !important;
        height: 1rem !important;
        line-height: 1rem !important;
        flex: 1 !important;
    }
    
    .file-browse-btn {
        font-size: 0.55rem !important;
        padding: 0.05rem 0.15rem !important;
        height: 1rem !important;
        line-height: 1 !important;
    }
    
    /* Infos des cibles */
    .targets-info {
        font-size: 0.55rem !important;
        padding: 0.1rem !important;
        margin-bottom: 0.1rem !important;
        line-height: 1.1 !important;
    }
    
    /* SVG Container - hauteur réduite */
    .svg-container,
    #config-targets-svg-container {
        height: 150px !important;
        max-height: 150px !important;
        min-height: 150px !important;
        overflow: hidden !important;
    }
    
    #config-targets-svg-container svg {
        max-height: 150px !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* ========================================
       TAB: ADC & PDVAL - OPTIMISATION ULTRA-COMPACTE
       ======================================== */
    
    /* Tables ADC et PDVAL - structure matricielle optimisée */
    .adc-table,
    .pdval-table {
        font-size: 0.55rem !important;
        border-collapse: collapse !important;
    }
    
    .adc-table th,
    .adc-table td,
    .pdval-table th,
    .pdval-table td {
        padding: 0.15rem 0.2rem !important;
        font-size: 0.55rem !important;
        line-height: 1 !important;
        text-align: center !important;
    }
    
    /* Colonne Index (première colonne) */
    .adc-table th:first-child,
    .adc-table td:first-child,
    .pdval-table th:first-child,
    .pdval-table td:first-child {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        font-weight: 700 !important;
        font-size: 0.5rem !important;
        padding: 0.15rem 0.1rem !important;
    }
    
    /* Colonnes de valeurs (slaves) */
    .adc-table .field-value,
    .pdval-table .field-value,
    .adc-cell,
    .pdval-cell {
        min-width: 40px !important;
        max-width: 55px !important;
        font-size: 0.55rem !important;
        font-weight: 600 !important;
        padding: 0.15rem 0.2rem !important;
    }
    
    /* Headers des slaves */
    .adc-table th:not(:first-child),
    .pdval-table th:not(:first-child) {
        font-size: 0.55rem !important;
        font-weight: 700 !important;
        padding: 0.15rem 0.2rem !important;
    }
    
    /* Hover effects - désactivés sur mobile pour économiser espace */
    .adc-cell:hover,
    .pdval-cell:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Info box compacte */
    .adc-table ~ .info-box,
    .pdval-table ~ .info-box {
        padding: 0.15rem 0.2rem !important;
        margin: 0.2rem 0 !important;
    }
    
    .adc-table ~ .info-box h4,
    .pdval-table ~ .info-box h4 {
        font-size: 0.6rem !important;
        margin: 0.05rem 0 !important;
    }
    
    .adc-table ~ .info-box ul,
    .pdval-table ~ .info-box ul {
        margin: 0.1rem 0 !important;
        padding-left: 0.8rem !important;
    }
    
    .adc-table ~ .info-box li,
    .pdval-table ~ .info-box li {
        font-size: 0.55rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.05rem !important;
    }
    
    /* Boutons de mesure auto */
    .adc-action-btn,
    .pdval-action-btn {
        padding: 0.15rem 0.3rem !important;
        font-size: 0.6rem !important;
        height: 1.2rem !important;
        line-height: 1 !important;
    }

    /* ========================================
       TAB: LOGS (Server Management) - ULTRA-COMPACT
       ======================================== */
    
    .server-header {
        text-align: center !important;
        margin-bottom: 4px !important;
        padding-bottom: 2px !important;
        border-bottom: 1px solid var(--primary-color, #4a90e2) !important;
    }
    
    .server-header h2 {
        font-size: 0.8rem !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.05 !important;
        font-weight: 600 !important;
    }
    
    .server-description {
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
        margin: 0 !important;
    }
    
    .server-section {
        margin-bottom: 4px !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
    }
    
    .server-section h3 {
        font-size: 0.75rem !important;
        margin: 0 0 4px 0 !important;
        padding-bottom: 2px !important;
        line-height: 1.05 !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }
    
    .server-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 10px !important;
    }
    
    .server-card {
        padding: 6px 8px !important;
        border-radius: 4px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #e9ecef !important;
        background: white !important;
    }
    
    .server-card h4 {
        font-size: 0.75rem !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.05 !important;
        font-weight: 600 !important;
        color: #2c3e50 !important;
        padding-bottom: 2px !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    .server-card p {
        font-size: 0.7rem !important;
        margin: 0 0 3px 0 !important;
        line-height: 1.1 !important;
    }
    
    .status-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 2px !important;
        padding: 1px 0 !important;
    }
    
    .status-label {
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }
    
    .status {
        padding: 2px 4px !important;
        border-radius: 3px !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }
    
    .server-btn {
        padding: 4px 8px !important;
        border-radius: 3px !important;
        font-size: 0.7rem !important;
        margin-top: 3px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        width: 100% !important;
    }
    
    .retention-info {
        margin: 3px 0 !important;
        padding: 4px 6px !important;
        border-radius: 3px !important;
        background: #e3f2fd !important;
    }
    
    .retention-form {
        margin-top: 3px !important;
    }
    
    .input-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 3px !important;
        gap: 2px !important;
    }
    
    .input-group label {
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
        margin-bottom: 1px !important;
        font-weight: 500 !important;
    }
    
    .input-group-with-clear {
        margin-bottom: 3px !important;
    }
    
    .input-with-button {
        display: flex !important;
        gap: 3px !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .retention-input,
    .date-input,
    .level-select,
    .source-select {
        padding: 3px 4px !important;
        font-size: 0.7rem !important;
        border-radius: 3px !important;
        border: 1px solid #dee2e6 !important;
        width: 100% !important;
    }
    
    .input-unit {
        margin-left: 3px !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }
    
    .clear-btn {
        padding: 3px 6px !important;
        font-size: 0.7rem !important;
        border-radius: 3px !important;
        white-space: nowrap !important;
    }
    
    .checkbox-group {
        gap: 3px !important;
        margin: 3px 0 !important;
        padding: 4px 6px !important;
        border-radius: 3px !important;
        background: #f8f9fa !important;
    }
    
    .checkbox-group label {
        gap: 3px !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }
    
    .checkbox-group input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
    }
    
    .preview-result {
        margin-top: 3px !important;
        padding: 4px 6px !important;
        border-radius: 3px !important;
        border-left: 2px solid #007bff !important;
        background: #e7f3ff !important;
    }
    
    .preview-result h5 {
        margin: 0 0 3px 0 !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
        font-weight: 600 !important;
    }
    
    .info-box {
        padding: 4px 6px !important;
        border-radius: 3px !important;
        border-left: 2px solid #ffc107 !important;
        margin-top: 3px !important;
        background: #fff8e1 !important;
    }
    
    .info-box p {
        margin: 1px 0 !important;
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
    
    .action-buttons {
        display: flex !important;
        gap: 3px !important;
        margin-top: 3px !important;
        flex-wrap: wrap !important;
    }
    
    .action-buttons .server-btn {
        margin-top: 0 !important;
        flex: 1 !important;
    }
    
    #server-notification.notification {
        padding: 4px 8px !important;
        border-radius: 3px !important;
        margin-bottom: 4px !important;
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
    
    .server-placeholder {
        padding: 8px !important;
        border-radius: 4px !important;
        border: 1px dashed #ddd !important;
        text-align: center !important;
    }
    
    .server-placeholder p {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        margin: 2px 0 !important;
    }
    
    .download-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }
    
    .download-form .input-group {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .download-form select,
    .download-form input {
        width: 100% !important;
    }
    
    /* ========================================
       MODE SOMBRE - GESTION SERVEUR
       ======================================== */
    body.dark-mode .server-section {
        background: #242424 !important;
        border-color: #333333 !important;
    }
    
    body.dark-mode .server-card {
        background: #242424 !important;
        border-color: #333333 !important;
    }
    
    body.dark-mode .server-card h4 {
        color: #D0D0D0 !important;
        border-bottom-color: #333333 !important;
    }
    
    body.dark-mode .server-card p {
        color: #A0A0A0 !important;
    }
    
    body.dark-mode .retention-info {
        background: rgba(66, 165, 245, 0.15) !important;
        border-color: #42A5F5 !important;
        color: #C5C5C5 !important;
    }
    
    body.dark-mode .retention-input,
    body.dark-mode .date-input,
    body.dark-mode .level-select,
    body.dark-mode .source-select,
    body.dark-mode input[type="number"],
    body.dark-mode input[type="text"],
    body.dark-mode input[type="date"] {
        background-color: #2D2D2D !important;
        color: #C5C5C5 !important;
        border-color: #404040 !important;
    }
    
    body.dark-mode .cleanup-field label,
    body.dark-mode .input-group label {
        color: #C5C5C5 !important;
    }
    
    body.dark-mode .cleanup-options {
        color: #C5C5C5 !important;
    }
    
    body.dark-mode .preview-compact {
        background: #2D2D2D !important;
        border-color: #404040 !important;
        color: #C5C5C5 !important;
    }
    
    body.dark-mode .checkbox-group {
        background: #2D2D2D !important;
        border-color: #404040 !important;
    }
    
    body.dark-mode .checkbox-group label {
        color: #C5C5C5 !important;
    }
}

/* ========================================
   SUITE - TABLETTE PAYSAGE (autres éléments - déplacés depuis ligne dupliquée)
   ======================================== */
@media (max-width: 1366px) and (orientation: landscape) {
    .checkbox-group label {
        gap: 4px !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }
    
    .checkbox-group input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Dark mode file input */
    body.dark-mode .file-input-display {
        background: #2D2D2D !important;
        color: #C5C5C5 !important;
        border-color: #404040 !important;
    }
    
    .preview-result {
        margin-top: 4px !important;
        padding: 4px 6px !important;
        border-radius: 3px !important;
        border-left: 2px solid #007bff !important;
        background: #e7f3ff !important;
    }
    
    .preview-result h5 {
        margin: 0 0 4px 0 !important;
        font-size: 0.75rem !important;
        line-height: 1.05 !important;
        font-weight: 600 !important;
    }
    
    .info-box {
        padding: 4px 6px !important;
        border-radius: 3px !important;
        border-left: 2px solid #ffc107 !important;
        margin-top: 4px !important;
        background: #fff8e1 !important;
    }
    
    .info-box p {
        margin: 2px 0 !important;
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
    
    .action-buttons {
        display: flex !important;
        gap: 4px !important;
        margin-top: 4px !important;
        flex-wrap: wrap !important;
    }
    
    .action-buttons .server-btn {
        margin-top: 0 !important;
        flex: 1 !important;
        min-width: 120px !important;
    }
    
    #server-notification.notification {
        padding: 4px 8px !important;
        border-radius: 3px !important;
        margin-bottom: 6px !important;
        font-size: 0.75rem !important;
        line-height: 1.1 !important;
    }
    
    .server-placeholder {
        padding: 8px !important;
        border-radius: 4px !important;
        border: 1px dashed #ddd !important;
        text-align: center !important;
    }
    
    .server-placeholder p {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        margin: 2px 0 !important;
    }
    
    .download-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .download-form .input-group {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .download-form select,
    .download-form input {
        width: 100% !important;
    }
}

/* Note: Les media queries pour .server-grid ont été supprimés car le grid auto-fit
   dans le media query principal (max-width: 1024px, landscape) gère déjà le responsive */

/* ========================================
   TABLETTE PORTRAIT - Mode responsive spécifique
   ======================================== */
@media (min-width: 1024px) {
    /* Note: .server-grid retiré car le grid auto-fit gère déjà le responsive */
    
    .server-section {
        padding: 6px 12px !important;
        margin-bottom: 8px !important;
    }
    
    .server-card {
        padding: 8px 10px !important;
    }
    
    .server-card h4 {
        font-size: 0.8rem !important;
    }
    
    .server-card p {
        font-size: 0.75rem !important;
    }
    
    .status-label,
    .status,
    .input-unit {
        font-size: 0.75rem !important;
    }
    
    .server-btn {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }
    
    /* ADC & PDVAL Tables - PC (1024px+) */
    .adc-table,
    .pdval-table {
        font-size: 0.8rem !important;
    }
    
    .adc-table th,
    .adc-table td,
    .pdval-table th,
    .pdval-table td {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }
    
    .adc-table th:first-child,
    .adc-table td:first-child,
    .pdval-table th:first-child,
    .pdval-table td:first-child {
        width: 70px !important;
        min-width: 70px !important;
        font-weight: 700 !important;
    }
    
    .adc-table .field-value,
    .pdval-table .field-value,
    .adc-cell,
    .pdval-cell {
        min-width: 60px !important;
        font-size: 0.75rem !important;
    }
    
    .adc-action-btn,
    .pdval-action-btn {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }
}

/* ========================================
   LOGS - RESPONSIVE GRAND ÉCRAN (1440px+)
   ======================================== */
@media (min-width: 1440px) {
    /* Note: .server-grid retiré car le grid auto-fit gère déjà le responsive */
    
    .server-section {
        padding: 8px 14px !important;
    }
    
    .server-card {
        padding: 10px 12px !important;
    }
    
    /* ADC & PDVAL Tables - Grand écran (1440px+) */
    .adc-table,
    .pdval-table {
        font-size: 0.85rem !important;
    }
    
    .adc-table th,
    .adc-table td,
    .pdval-table th,
    .pdval-table td {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .adc-table .field-value,
    .pdval-table .field-value,
    .adc-cell,
    .pdval-cell {
        min-width: 70px !important;
        font-size: 0.8rem !important;
    }
}

/* Mode sombre - ajustements pour tablette */
@media (max-width: 1100px) and (max-height: 800px) {
    body.dark-mode .table-wrapper::-webkit-scrollbar-track,
    body.dark-mode #toem-monitoring-container::-webkit-scrollbar-track,
    body.dark-mode .register-table-container::-webkit-scrollbar-track,
    body.dark-mode .system-tab-content::-webkit-scrollbar-track {
        background: #1a1a1a;
    }
    
    body.dark-mode .table-wrapper::-webkit-scrollbar-thumb,
    body.dark-mode #toem-monitoring-container::-webkit-scrollbar-thumb,
    body.dark-mode .register-table-container::-webkit-scrollbar-thumb,
    body.dark-mode .system-tab-content::-webkit-scrollbar-thumb {
        background: #444;
    }
    
    body.dark-mode .table-wrapper::-webkit-scrollbar-thumb:hover,
    body.dark-mode #toem-monitoring-container::-webkit-scrollbar-thumb:hover,
    body.dark-mode .register-table-container::-webkit-scrollbar-thumb:hover,
    body.dark-mode .system-tab-content::-webkit-scrollbar-thumb:hover {
        background: #666;
    }
}

/* ========================================================================
   MODE PORTRAIT - TABLETTE
   ========================================================================
   NOTE: Le mode portrait tablette (iPad Air 820x1180, iPad Pro, Surface Pro 7)
   utilise maintenant les styles par défaut et paysage pour éviter les conflits.
   Un responsive simple qui s'adapte naturellement.
   ======================================================================== */

/* ========================================
   NAVBAR USER-INFO - TABLETTE PORTRAIT (769px – 1023px)
   Masque le nom d'utilisateur pour libérer la place ;
   le badge/select de rôle reste visible et accessible.
   ======================================== */
@media (min-width: 769px) and (max-width: 1023px) {
    body .navbar #user-info {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        max-width: none !important;
        overflow: visible !important;
    }
    body .navbar #user-info strong {
        display: none !important;
    }
    body .navbar #user-info .badge {
        font-size: 0.7rem !important;
        padding: 0.15rem 0.4rem !important;
        white-space: nowrap !important;
    }
    body .navbar #user-info .role-switcher-select {
        font-size: 0.7rem !important;
        padding: 0.15rem 0.3rem !important;
    }
}

/* ========================================
   SMARTPHONE - MODE PORTRAIT ET PAYSAGE
   ======================================== */
@media (max-width: 768px) {
    
    /* ==============================
       UNIFORMISATION GLOBALE
       ============================== */
    
    /* Police de caractère identique partout */
    body, body *, 
    .navbar, .navbar *,
    .dashboard-content, .dashboard-content *,
    .module-content, .module-content *,
    .system-module, .system-module *,
    .server-content, .server-content *,
    input, select, button, textarea {
        font-family: var(--font-sans) !important;
    }
    
    /* ==============================
       NAVBAR - Hauteur minimale
       ============================== */
    body .navbar {
        padding: 0.3rem 0.5rem !important;
        min-height: 2.5rem !important;
        flex-wrap: wrap !important;
        z-index: 10000 !important;
    }
    
    body .navbar .kiwi-logo {
        height: 2rem !important;
    }
    
    body .navbar .navbar-user {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    
    body .navbar .navbar-user button {
        height: 2rem !important;
        width: 2rem !important;
        font-size: 0.8rem !important;
        padding: 0 !important;
    }
    
    body .navbar .language-selector-mini,
    body .navbar .language-selector-compact {
        position: relative !important;
        z-index: 9999 !important;
    }
    
    body .navbar .navbar-brand h1 {
        font-size: 1rem !important;
    }
    
    /* Masque le nom d'utilisateur, garde le badge de rôle visible */
    body .navbar #user-info {
        display: flex !important;
        align-items: center !important;
        gap: 0.2rem !important;
    }
    body .navbar #user-info strong {
        display: none !important;
    }
    body .navbar #user-info .badge,
    body .navbar #user-info .role-switcher-select {
        font-size: 0.65rem !important;
        padding: 0.1rem 0.3rem !important;
        white-space: nowrap !important;
    }
    
    /* ==============================
       DASHBOARD CONTENT - ÉCRAN D'ACCUEIL
       ============================== */
    
    .dashboard-content {
        padding: 0.5rem !important;
        height: calc(100vh - 2.5rem) !important;
        overflow-y: auto !important;
        position: relative !important;
    }
    
    .dashboard-modules {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 0.6rem !important;
        padding: 0.3rem !important;
    }

    /* Smartphone étroit: revenir à 1 colonne */
    @media (max-width: 599px) {
        .dashboard-modules {
            grid-template-columns: 1fr !important;
        }
    }
    
    .dashboard-module {
        padding: 0.8rem !important;
        min-height: 4rem !important;
    }
    
    .dashboard-module h2,
    .module-card .module-title {
        font-size: 1.05rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.25 !important;
    }
    
    .dashboard-module p,
    .module-card .module-description {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }
    
    .dashboard-module .module-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1.2rem !important;
    }
    
    /* ==============================
       MODULE CONTENT - Position absolue pour overlay
       ============================== */
    .module-content:not(.hidden) {
        position: fixed !important;
        top: calc(var(--navbar-height, 2.5rem) + var(--banner-height, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1000 !important;
        background-color: var(--bg-secondary) !important;
        height: var(--available-height, calc(100vh - 2.5rem)) !important;
        width: 100vw !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Masquer seulement le titre du module de monitoring détaillé */
    .module-content:not(.hidden) .detailed-monitoring-module .module-content-title {
        display: none !important;
    }
    
    .module-content:not(.hidden) .detailed-monitoring-module .module-content-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 0.3rem 0.5rem !important;
        min-height: 2.2rem !important;
        margin-bottom: 0.2rem !important;
        border-bottom: none !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .module-content:not(.hidden) .detailed-monitoring-module .header-left-section {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        order: 2 !important;
    }
    
    .module-content:not(.hidden) .detailed-monitoring-module .header-left-section .btn-back {
        display: flex !important;
        order: -1 !important;
        font-size: 0.8rem !important;
        padding: 0.3rem 0.5rem !important;
        height: 1.8rem !important;
        min-width: 60px !important;
        flex-shrink: 0 !important;
    }
    
    .module-content:not(.hidden) .detailed-monitoring-module .target-selector-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    
    .module-content:not(.hidden) .detailed-monitoring-module .header-buttons {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        order: 3 !important;
    }
    
    .module-content:not(.hidden) .detailed-monitoring-module .header-buttons button {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.5rem !important;
        height: 1.8rem !important;
        min-width: auto !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .module-content:not(.hidden) .detailed-monitoring-module .target-badge {
        font-size: 0.7rem !important;
        padding: 0.15rem 0.35rem !important;
        height: 1.4rem !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* Contenu du module scrollable */
    .module-content:not(.hidden) > *:not(.module-content-header):not(.module-header) {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0.4rem !important;
    }
    
    /* ==============================
       MODULE HEADER - Navigation du module
       ============================== */
    .module-header {
        padding: 0.4rem !important;
        min-height: 2.5rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: var(--bg-primary, #fff) !important;
    }
    
    .module-header h2 {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }
    
    .module-header button {
        height: 2rem !important;
        padding: 0 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    /* ==============================
       SYSTEM MODULE - Onglets
       ============================== */
    .system-module {
        height: calc(100vh - 2.5rem) !important;
        overflow: hidden !important;
    }
    
    .system-module-header {
        padding: 0.3rem !important;
        min-height: 2rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    
    .system-module-header h2 {
        font-size: 0.9rem !important;
    }
    
    .system-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.2rem !important;
        padding: 0.2rem !important;
        overflow-x: auto !important;
        border-bottom: 1px solid var(--border-color, #ddd) !important;
    }
    
    .system-tab {
        padding: 0.4rem 0.5rem !important;
        min-width: 70px !important;
        height: 2rem !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        border-radius: 3px 3px 0 0 !important;
    }
    
    .system-tab.active {
        font-weight: 600 !important;
    }
    
    .system-tab-content {
        height: calc(100vh - 6.5rem) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0.5rem !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Forcer le scroll sur les conteneurs internes */
    .system-tab-content > div,
    .register-table-container,
    .table-wrapper {
        overflow-y: auto !important;
        overflow-x: auto !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Uniformisation des polices dans le contenu des onglets */
    .system-tab-content,
    .system-tab-content *,
    .system-tab-content h1, h2, h3, h4, h5,
    .system-tab-content p, span, td, th, li, label, strong {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }
    
    .system-tab-content h2 {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.4rem !important;
    }
    
    .system-tab-content h3 {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.3rem !important;
    }
    
    .system-tab-content h4 {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.2rem !important;
    }
    
    /* Tables - Scroll horizontal plutôt que de tronquer */
    .system-tab-content table {
        width: auto !important;
        min-width: 100% !important;
        font-size: 0.6rem !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }
    
    .system-tab-content thead {
        display: table-header-group !important;
    }
    
    .system-tab-content tbody {
        display: table-row-group !important;
    }
    
    .system-tab-content tr {
        display: table-row !important;
    }
    
    .system-tab-content th,
    .system-tab-content td {
        padding: 0.25rem 0.35rem !important;
        font-size: 0.6rem !important;
        white-space: nowrap !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
    
    .system-tab-content th {
        font-weight: 600 !important;
        background: #f8f9fa !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        font-size: 0.58rem !important;
        line-height: 1.2 !important;
    }

    body.dark-mode .system-tab-content th {
        background: #2D2D2D !important;
        color: #9ACD32 !important;
    }
    
    /* Fix pour les en-têtes avec data-short - cacher le texte long */
    #shot-data-table th[data-short] {
        font-size: 0 !important;
    }
    
    #shot-data-table th[data-short]::before {
        content: attr(data-short) !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
    }
    
    /* Wrapper de tableau scrollable horizontalement */
    .table-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0.3rem 0 !important;
        width: 100% !important;
    }
    
    .system-tab-content button,
    .system-tab-content input,
    .system-tab-content select {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
        min-height: 2rem !important;
    }
    
    /* ==============================
       DIAGNOSTIC - Cartes d'action (1 colonne)
       ============================== */
    .diagnostic-grid {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
        padding: 0.3rem !important;
    }
    
    .diagnostic-card {
        padding: 0.5rem !important;
    }
    
    .diagnostic-card h3 {
        font-size: 0.75rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .diagnostic-card button {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.6rem !important;
        min-height: 2rem !important;
    }
    
    /* ==============================
       CONFIG - Programmation cibles (4 / 2 / 1)
       ============================== */
    .programming-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
        padding: 0.3rem !important;
        align-items: start !important;
    }

    @media (max-width: 900px) {
        .programming-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 599px) {
        .programming-grid {
            grid-template-columns: 1fr !important;
        }
    }
    
    .programming-card {
        padding: 0.5rem !important;
    }
    
    .programming-card h3 {
        font-size: 0.75rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    #config-targets-svg-container {
        height: 170px !important;
        max-height: 170px !important;
        min-height: 170px !important;
        margin: 0.5rem 0 !important;
        overflow: hidden !important;
    }

    #config-targets-svg-container svg {
        width: 100% !important;
        height: 100% !important;
        max-height: 170px !important;
    }
    
    /* ==============================
       LOGS / SERVER MANAGEMENT (1 colonne)
       ============================== */
    .server-section *,
    .server-section h2, h3, h4, h5, p, span, label, button, input, select, div {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }
    
    .server-header h2 {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
    }
    
    .server-section h3 {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
    }
    
    .server-card h4 {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
    }
    
    .server-grid {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    
    .server-card {
        padding: 0.5rem !important;
    }
    
    .server-content input,
    .server-content select,
    .server-content button {
        font-size: 0.65rem !important;
        padding: 0.4rem 0.5rem !important;
        min-height: 2rem !important;
    }
    
    /* Carte MariaDB cleanup en pleine largeur */
    .mariadb-cleanup-card {
        grid-column: span 1 !important;
    }
    
    /* ==============================
       VISUALISATION DES CIBLES (Empilé verticalement)
       ============================== */
    .targets-visualization-container {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 2.5rem) !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }
    
    .visualization-side-panel {
        width: 100% !important;
        height: auto !important;
        min-height: 150px !important;
        order: 1 !important;
    }
    
    .visualization-center {
        flex: 1 !important;
        width: 100% !important;
        order: 2 !important;
        min-height: 200px !important;
    }
    
    .visualization-right-panel {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        order: 3 !important;
    }
    
    /* ==============================
       MONITORING DES ATHLÈTES
       ============================== */
    .athlete-monitoring-container {
        padding: 0.5rem !important;
    }
    
    .monitoring-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .athlete-card {
        padding: 0.6rem !important;
    }
    
    .athlete-card h3 {
        font-size: 0.8rem !important;
    }
    
    .athlete-card p {
        font-size: 0.65rem !important;
    }
    
    /* ==============================
       MONITORING TOEM - Boutons de contrôle
       ============================== */
    
    /* Layout TOEM en colonne unique sur smartphone */
    .toem-three-column-layout {
        flex-direction: column !important;
        gap: 0.3rem !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    
    /* Container monitoring scrollable */
    #toem-monitoring-container,
    .toem-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: var(--available-height) !important;
        height: var(--available-height) !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .toem-side-panel {
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 0.25rem !important;
        gap: 0.25rem !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .toem-side-panel button {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.65rem !important;
        min-height: 1.6rem !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .toem-side-panel button.toggle,
    .toem-side-panel button.toggle-btn,
    .toem-side-panel button.system-only {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.4rem !important;
        min-height: 1.6rem !important;
        max-width: none !important;
    }
    
    .toem-side-panel select {
        font-size: 0.65rem !important;
        padding: 0.25rem !important;
        min-height: 1.6rem !important;
        width: 100% !important;
        grid-column: span 2 !important;
    }
    
    .toem-center-panel,
    .toem-right-panel {
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .toem-center-panel {
        min-height: 400px !important;
        max-height: 70vh !important;
        order: 2 !important;
    }
    
    .toem-right-panel {
        order: 3 !important;
    }
    
    /* ==============================
       SCROLLBAR CUSTOM
       ============================== */
    .table-wrapper::-webkit-scrollbar,
    #toem-monitoring-container::-webkit-scrollbar,
    .register-table-container::-webkit-scrollbar,
    .system-tab-content::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }
}