/* ========================================
   🔥 MOBILE UX PREMIUM ULTIMATE 2025 - BOOKINGPARK
   Optimisation responsive révolutionnaire ABSOLUE
   Toutes pages admin - Expérience premium SANS FAILLE
   ======================================== */

/* ========================================
   VARIABLES CSS PREMIUM RÉVOLUTIONNAIRES
   ======================================== */
:root {
    /* PALETTE STRICTE AUTORISÉE UNIQUEMENT */
    --blanc: #FFFFFF;
    --orange: #FF6600;
    --bleu-clair: #33CCFF;
    --text-primary: #333333;
    --text-secondary: #666666;
    --border-color: #E5E5E5;

    /* RESPONSIVE DYNAMIQUE RÉVOLUTIONNAIRE */
    --sidebar-width: clamp(250px, 20vw, 280px);
    --content-padding: clamp(0.75rem, 3vw, 1.5rem);
    --content-width: clamp(300px, 100vw, 100%);
    --mobile-header-height: clamp(56px, 12vw, 72px);
    --button-height: clamp(44px, 10vw, 48px);
    --button-width: clamp(44px, 10vw, auto);
    --font-responsive: clamp(0.875rem, 3.5vw, 1rem);
    --gap-responsive: clamp(0.5rem, 2vw, 1rem);

    /* ANIMATIONS PREMIUM FLUIDES */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-ultra-smooth: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --shadow-premium: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 12px 48px rgba(255, 102, 0, 0.25);
    --shadow-button: 0 4px 16px rgba(255, 102, 0, 0.2);
}

/* ========================================
   🎨 ARCHITECTURE RESPONSIVE RÉVOLUTIONNAIRE ABSOLUE
   ======================================== */

/* CONTAINER PRINCIPAL ULTRA-FLEXIBLE */
.admin-container,
.admin-pro-container,
.dashboard-container {
    display: flex !important;
    min-height: 100vh !important;
    background: var(--blanc) !important;
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* SIDEBAR DYNAMIQUE PREMIUM RÉVOLUTIONNAIRE */
.admin-sidebar,
.sidebar-pro,
.dashboard-sidebar {
    width: var(--sidebar-width) !important;
    min-width: 250px !important;
    max-width: 300px !important;
    background: var(--blanc) !important;
    border-right: 1px solid var(--border-color) !important;
    transition: var(--transition-smooth) !important;
    z-index: 1000 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

/* CONTENU PRINCIPAL ULTRA-FLUIDE - SOLUTION ENCART CENTRAL */
.admin-content,
.main-content,
.dashboard-content {
    flex: 1 1 auto !important;
    width: var(--content-width) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: var(--content-padding) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--blanc) !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

/* ========================================
   📱 RESPONSIVE MOBILE PREMIUM RÉVOLUTIONNAIRE
   ======================================== */

@media screen and (max-width: 768px) {
    /* ARCHITECTURE MOBILE-FIRST RÉVOLUTIONNAIRE */
    .admin-container,
    .admin-pro-container,
    .dashboard-container {
        flex-direction: column !important;
        overflow: visible !important;
        width: 100vw !important;
        max-width: 100% !important;
    }

    /* SIDEBAR MOBILE OVERLAY PREMIUM */
    .admin-sidebar,
    .sidebar-pro,
    .dashboard-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: min(280px, 85vw) !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transform: translateX(0) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: var(--shadow-premium) !important;
        border-right: 2px solid var(--border-color) !important;
    }

    .admin-sidebar.active,
    .sidebar-pro.active,
    .dashboard-sidebar.active {
        left: 0 !important;
    }

    /* CONTENU MOBILE PLEINE LARGEUR - SOLUTION ENCART CENTRAL */
    .admin-content,
    .main-content,
    .dashboard-content {
        width: 100vw !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: calc(var(--mobile-header-height) + 0.5rem) var(--gap-responsive) var(--gap-responsive) var(--gap-responsive) !important;
        min-height: 100vh !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* HEADER MOBILE ULTRA-OPTIMISÉ - SOLUTION BOUTONS COUPÉS */
    .admin-header,
    .header-pro,
    .dashboard-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: var(--mobile-header-height) !important;
        background: var(--blanc) !important;
        border-bottom: 2px solid var(--border-color) !important;
        z-index: 1040 !important;
        padding: var(--gap-responsive) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        gap: var(--gap-responsive) !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* MENU TOGGLE PREMIUM RÉVOLUTIONNAIRE */
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--button-height) !important;
        height: var(--button-height) !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: var(--blanc) !important;
        border: 2px solid var(--border-color) !important;
        border-radius: 12px !important;
        color: var(--text-primary) !important;
        font-size: 1.25rem !important;
        cursor: pointer !important;
        transition: var(--transition-ultra-smooth) !important;
        z-index: 1051 !important;
        position: relative !important;
        flex-shrink: 0 !important;
        touch-action: manipulation !important;
        box-shadow: var(--shadow-button) !important;
    }

    .menu-toggle:hover {
        background: rgba(255, 102, 0, 0.1) !important;
        border-color: var(--orange) !important;
        color: var(--orange) !important;
        transform: scale(1.05) !important;
        box-shadow: var(--shadow-hover) !important;
    }

    .menu-toggle.active {
        background: var(--orange) !important;
        border-color: var(--orange) !important;
        color: var(--blanc) !important;
        transform: rotate(90deg) scale(1.1) !important;
        box-shadow: var(--shadow-hover) !important;
    }
    
    /* BOUTONS HEADER ULTRA-RESPONSIVE - SOLUTION BOUTONS COUPÉS */
    .header-right,
    .header-left,
    .admin-header .col-auto,
    .admin-header .col {
        display: flex !important;
        align-items: center !important;
        gap: var(--gap-responsive) !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .header-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .header-right {
        flex: 0 0 auto !important;
        max-width: 50% !important;
        justify-content: flex-end !important;
    }

    /* BOUTONS PREMIUM TACTILES - JAMAIS COUPÉS */
    .header-right .btn,
    .admin-header .btn,
    .header-actions .btn {
        min-height: var(--button-height) !important;
        min-width: var(--button-width) !important;
        padding: var(--gap-responsive) !important;
        font-size: var(--font-responsive) !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        transition: var(--transition-ultra-smooth) !important;
        flex-shrink: 0 !important;
        touch-action: manipulation !important;
        box-shadow: var(--shadow-button) !important;
        border: 2px solid var(--border-color) !important;
    }

    /* BOUTONS COMPACTS MOBILE PREMIUM */
    .btn-success,
    .btn-primary,
    .btn-pro,
    .btn-secondary {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
        font-size: 0 !important; /* Masquer texte, garder icônes */
        position: relative !important;
        overflow: hidden !important;
    }

    /* ICÔNES SEULES VISIBLES - DESIGN PREMIUM */
    .btn .fa,
    .btn i {
        margin: 0 !important;
        font-size: 1.1rem !important;
        display: block !important;
        line-height: 1 !important;
        color: inherit !important;
    }

    .btn .fa + span,
    .btn i + span,
    .btn span {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ========================================
   🎯 OPTIMISATIONS SPÉCIFIQUES MOBILE
   ======================================== */

@media screen and (max-width: 480px) {
    /* TRÈS PETIT ÉCRAN - ULTRA COMPACT */
    .admin-content,
    .main-content {
        padding: calc(var(--mobile-header-height) + 0.5rem) 0.75rem 0.75rem 0.75rem !important;
    }
    
    .menu-toggle {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }
    
    .header-right .btn,
    .admin-header .btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
        min-height: 40px !important;
    }
    
    /* SIDEBAR PLEINE LARGEUR */
    .admin-sidebar,
    .sidebar-pro {
        width: 100vw !important;
    }
}

/* ========================================
   ✨ ANIMATIONS ET MICRO-INTERACTIONS
   ======================================== */

/* OVERLAY SIDEBAR */
.sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1049 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: var(--transition-smooth) !important;
    backdrop-filter: blur(4px) !important;
}

.sidebar-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ANIMATIONS CARTES */
.customer-card,
.card-pro,
.overview-card {
    transition: var(--transition-smooth) !important;
}

.customer-card:hover,
.card-pro:hover,
.overview-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--orange) !important;
}

/* BOUTONS PREMIUM */
.btn-action,
.btn-pro,
.btn {
    transition: var(--transition-bounce) !important;
    border-radius: 8px !important;
}

.btn-action:hover,
.btn-pro:hover,
.btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   🔧 CORRECTIONS SPÉCIFIQUES PAGES
   ======================================== */

/* STATS OVERVIEW RESPONSIVE */
.stats-overview {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
}

@media screen and (max-width: 768px) {
    .stats-overview {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

@media screen and (max-width: 480px) {
    .stats-overview {
        grid-template-columns: 1fr !important;
    }
}

/* FILTRES RESPONSIVE */
.filters-section {
    background: var(--blanc) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: 1.5rem !important;
}

@media screen and (max-width: 768px) {
    .filters-section .row > div {
        margin-bottom: 0.75rem !important;
    }
    
    .filters-section .col-md-2,
    .filters-section .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* TABLEAUX RESPONSIVE */
@media screen and (max-width: 768px) {
    .table-responsive {
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .table {
        font-size: 0.875rem !important;
    }
    
    .table th,
    .table td {
        padding: 0.5rem !important;
        white-space: nowrap !important;
    }
}

/* ========================================
   🎨 DESIGN SYSTEM COHÉRENT RÉVOLUTIONNAIRE
   ======================================== */

/* COULEURS STRICTES APPLIQUÉES - PALETTE BOOKINGPARK */
.btn-primary {
    background: var(--bleu-clair) !important;
    border-color: var(--bleu-clair) !important;
    color: var(--blanc) !important;
    transition: var(--transition-ultra-smooth) !important;
}

.btn-success {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: var(--blanc) !important;
    transition: var(--transition-ultra-smooth) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: color-mix(in srgb, var(--bleu-clair) 85%, black) !important;
    border-color: color-mix(in srgb, var(--bleu-clair) 85%, black) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: var(--shadow-hover) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: color-mix(in srgb, var(--orange) 85%, black) !important;
    border-color: color-mix(in srgb, var(--orange) 85%, black) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* FOCUS STATES PREMIUM RÉVOLUTIONNAIRES */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: var(--bleu-clair) !important;
    box-shadow: 0 0 0 0.25rem rgba(51, 204, 255, 0.25) !important;
    outline: none !important;
    transform: scale(1.01) !important;
    transition: var(--transition-ultra-smooth) !important;
}

/* SCROLLBAR PREMIUM RÉVOLUTIONNAIRE */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--blanc) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color) !important;
    border-radius: 4px !important;
    transition: var(--transition-smooth) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bleu-clair) !important;
    transform: scale(1.1) !important;
}

::-webkit-scrollbar-corner {
    background: var(--blanc) !important;
}

/* ========================================
   🚀 OPTIMISATIONS FINALES RÉVOLUTIONNAIRES
   ======================================== */

/* CORRECTION GLOBALE ENCART CENTRAL TROP ÉTROIT */
@media (max-width: 768px) {
    /* FORCER LARGEUR MAXIMALE CONTENU */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--gap-responsive) !important;
        padding-right: var(--gap-responsive) !important;
        margin: 0 !important;
    }

    /* GRIDS ET FLEXBOX OPTIMISÉS */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .col,
    .col-md-6,
    .col-md-8,
    .col-md-12,
    .col-lg-6,
    .col-lg-8,
    .col-lg-12 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--gap-responsive) !important;
        padding-right: var(--gap-responsive) !important;
        flex: 1 1 100% !important;
    }

    /* CARDS ET SECTIONS PLEINE LARGEUR */
    .card,
    .card-pro,
    .modern-card,
    .customer-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow-premium) !important;
        transition: var(--transition-smooth) !important;
    }

    .card:hover,
    .card-pro:hover,
    .modern-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: var(--shadow-hover) !important;
        border-color: var(--orange) !important;
    }
}

/* ANIMATIONS MICRO-INTERACTIONS PREMIUM */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* CLASSES UTILITAIRES PREMIUM */
.animate-fade-in {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.animate-slide-in {
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.animate-pulse {
    animation: pulse 2s infinite !important;
}

/* HOVER EFFECTS ORANGE UNIFORMES */
.btn:hover,
.card:hover,
.nav-link:hover,
.sidebar-menu a:hover {
    color: var(--orange) !important;
    border-color: var(--orange) !important;
    transition: var(--transition-ultra-smooth) !important;
}

/* RESPONSIVE FINAL ULTRA-PREMIUM */
@media (max-width: 480px) {
    :root {
        --content-padding: 0.75rem !important;
        --gap-responsive: 0.5rem !important;
        --mobile-header-height: 56px !important;
        --button-height: 44px !important;
    }

    .admin-content,
    .main-content,
    .dashboard-content {
        padding: calc(var(--mobile-header-height) + 0.5rem) 0.75rem 0.75rem 0.75rem !important;
    }

    .menu-toggle {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    .header-right .btn,
    .admin-header .btn {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0.4rem !important;
        font-size: 0.9rem !important;
    }
}

/* ========================================
   🚨 CORRECTION DÉBORDEMENT BOUTONS - SOLUTION RÉVOLUTIONNAIRE ABSOLUE
   ======================================== */

/* MASQUER ÉLÉMENTS NON ESSENTIELS SUR MOBILE */
@media (max-width: 768px) {
    /* MASQUER RECHERCHE ET ÉLÉMENTS ENCOMBRANTS */
    .search-global,
    .search-input,
    .header-right .search-global,
    .global-search,
    .search-form {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
    }

    /* TITRES RESPONSIFS */
    .page-title,
    h1, h2 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* USER INFO COMPACT */
    .user-info,
    .user-avatar {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        font-size: 0.875rem !important;
        flex-shrink: 0 !important;
    }

    .user-info div:last-child,
    .user-info small {
        display: none !important;
    }
}

/* CORRECTION SPÉCIFIQUE ADMIN-PRO */
@media (max-width: 768px) {
    .admin-pro-container .header-pro {
        padding: 0.5rem !important;
        gap: 0.5rem !important;
        height: var(--mobile-header-height) !important;
    }

    .admin-pro-container .header-left {
        flex: 1 1 60% !important;
        min-width: 0 !important;
    }

    .admin-pro-container .header-right {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        justify-content: flex-end !important;
        gap: 0.25rem !important;
    }
}
        height: 36px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 0 !important;
    }

    /* CORRECTION TITRES LONGS */
    .page-title,
    h1.page-title,
    .header-left h1 {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 150px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* CORRECTION SPÉCIFIQUE ADMIN-CUSTOMERS */
    .admin-header .col-auto {
        max-width: 45% !important;
        overflow: hidden !important;
    }

    .admin-header .btn-group {
        gap: 3px !important;
    }

    /* CORRECTION DÉBORDEMENT TEXTE BOUTONS */
    .btn span:not(.icon):not(.fa):not(.fas) {
        display: none !important;
    }

    /* FORCER ICÔNES VISIBLES */
    .btn .fa,
    .btn .fas,
    .btn i {
        display: inline-block !important;
        margin: 0 !important;
        font-size: 14px !important;
    }

    /* ========================================
       🎯 CORRECTIONS SPÉCIFIQUES PROBLÈMES IDENTIFIÉS
       ======================================== */

    /* CORRECTION BOUTON DÉCONNEXION ADMIN-PRO */
    .header-pro .header-right .btn-pro[onclick*="logout"] {
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        font-size: 0 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .header-pro .header-right .btn-pro[onclick*="logout"] i {
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* CORRECTION BOUTONS ADMIN-CUSTOMERS */
    .admin-header .btn-success,
    .admin-header .btn[onclick*="showCreateModal"],
    .admin-header .btn[onclick*="exportData"] {
        min-width: 32px !important;
        width: auto !important;
        max-width: 80px !important;
        height: 32px !important;
        padding: 4px 6px !important;
        font-size: 10px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* MASQUER TEXTE LONG DES BOUTONS */
    .admin-header .btn-success span:not(.fa):not(.fas):not(.icon),
    .admin-header .btn span:not(.fa):not(.fas):not(.icon) {
        display: none !important;
    }
}

/* ========================================
   🎯 OPTIMISATIONS SPÉCIFIQUES BOUTONS CRITIQUES RÉVOLUTIONNAIRES
   ======================================== */

/* BOUTON DÉCONNEXION - TOUJOURS VISIBLE ET ACCESSIBLE */
@media (max-width: 768px) {
    .btn-logout,
    .logout-btn,
    a[onclick*="logout"],
    .sidebar-menu a[onclick*="logout"],
    .header-right .btn-pro[onclick*="logout"] {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        font-size: 0 !important;
        background: var(--orange) !important;
        color: var(--blanc) !important;
        border: 2px solid var(--orange) !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
        touch-action: manipulation !important;
        transition: var(--transition-ultra-smooth) !important;
        box-shadow: var(--shadow-button) !important;
        z-index: 1000 !important;
    }

    .btn-logout:hover,
    .logout-btn:hover,
    a[onclick*="logout"]:hover,
    .header-right .btn-pro[onclick*="logout"]:hover {
        transform: scale(1.1) !important;
        box-shadow: var(--shadow-hover) !important;
        background: color-mix(in srgb, var(--orange) 85%, black) !important;
    }

    .btn-logout i,
    .logout-btn i,
    a[onclick*="logout"] i,
    .header-right .btn-pro[onclick*="logout"] i {
        font-size: 1.2rem !important;
        margin: 0 !important;
        color: var(--blanc) !important;
        line-height: 1 !important;
    }

    /* BOUTONS CRÉATION - COMPACTS MAIS LISIBLES */
    .btn-create-user,
    .create-user-btn,
    button[onclick*="createUser"],
    button[onclick*="createPartner"],
    .btn[onclick*="create"],
    .header-right .btn-success {
        min-width: 44px !important;
        min-height: 44px !important;
        width: auto !important;
        max-width: 120px !important;
        height: 44px !important;
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
        background: var(--bleu-clair) !important;
        color: var(--blanc) !important;
        border: 2px solid var(--bleu-clair) !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 0 !important;
        touch-action: manipulation !important;
        transition: var(--transition-ultra-smooth) !important;
        box-shadow: var(--shadow-button) !important;
    }

    .btn-create-user:hover,
    .create-user-btn:hover,
    button[onclick*="createUser"]:hover,
    button[onclick*="createPartner"]:hover,
    .header-right .btn-success:hover {
        transform: scale(1.05) !important;
        box-shadow: var(--shadow-hover) !important;
        background: color-mix(in srgb, var(--bleu-clair) 85%, black) !important;
    }
        display: none !important;
    }

    /* CORRECTION ADMIN-PARKINGS - SÉLECTEURS AÉROPORTS */
    .form-select[id*="airport"],
    .form-control[id*="airport"],
    select[name*="airport"] {
        font-size: 11px !important;
        padding: 4px 6px !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* CORRECTION FILTRES QUI DÉBORDENT */
    .filters-section .form-select,
    .filters-section .form-control {
        font-size: 11px !important;
        padding: 4px 6px !important;
        height: 32px !important;
    }

    /* CORRECTION COLONNES RESPONSIVE */
    .filters-section .col-md-2,
    .filters-section .col-md-3,
    .filters-section .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
        padding: 0 4px !important;
    }

    /* CORRECTION HEADER ACTIONS GÉNÉRALES */
    .admin-header .col-auto,
    .header-right {
        max-width: 40% !important;
        overflow: hidden !important;
        gap: 2px !important;
    }

    /* CORRECTION TITRES TROP LONGS */
    .page-title,
    h1,
    .admin-header h1 {
        font-size: 14px !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* CORRECTION BOUTONS AVEC TEXTE LONG */
    .btn[title*="Créer"],
    .btn[title*="Nouveau"],
    .btn[title*="Ajouter"] {
        font-size: 0 !important;
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
    }

    .btn[title*="Créer"] i,
    .btn[title*="Nouveau"] i,
    .btn[title*="Ajouter"] i {
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* ========================================
       🚨 CORRECTIONS ULTRA-SPÉCIFIQUES DÉBORDEMENTS
       ======================================== */

    /* FORCER TOUS LES BOUTONS HEADER À ÊTRE COMPACTS */
    .header-pro .header-right > *,
    .admin-header .col-auto > * {
        max-width: 35px !important;
        height: 32px !important;
        padding: 4px !important;
        font-size: 0 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        margin: 0 2px !important;
    }

    /* EXCEPTION POUR LES ICÔNES */
    .header-pro .header-right i,
    .admin-header .col-auto i {
        font-size: 12px !important;
        display: block !important;
        margin: 0 !important;
    }

    /* CORRECTION RADICALE POUR ÉVITER TOUT DÉBORDEMENT */
    .header-pro,
    .admin-header {
        padding: 6px 8px !important;
        gap: 4px !important;
    }

    .header-left,
    .admin-header .col {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .header-right,
    .admin-header .col-auto {
        flex: 0 0 auto !important;
        max-width: 35% !important;
        overflow: hidden !important;
        display: flex !important;
        gap: 2px !important;
    }

    /* MASQUER COMPLÈTEMENT LES TEXTES LONGS */
    .btn-success span,
    .btn-primary span,
    .btn-secondary span {
        display: none !important;
    }

    /* CORRECTION SPÉCIALE POUR LES DROPDOWNS */
    .dropdown-toggle::after {
        display: none !important;
    }

    /* ========================================
       🎯 CORRECTIONS ADMIN-PARKINGS.HTML SPÉCIFIQUES
       ======================================== */

    /* CORRECTION BOUTONS HEADER ADMIN-PARKINGS */
    .admin-header .btn[onclick*="showCreateParkingModal"],
    .admin-header .btn[onclick*="resetDemo"] {
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        font-size: 0 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .admin-header .btn[onclick*="showCreateParkingModal"] i,
    .admin-header .btn[onclick*="resetDemo"] i {
        font-size: 12px !important;
        margin: 0 !important;
        display: block !important;
    }

    /* CORRECTION SÉLECTEURS FILTRES ADMIN-PARKINGS */
    #filterAirport,
    #filterType,
    #filterStatus {
        max-width: 100px !important;
        font-size: 11px !important;
        padding: 4px 6px !important;
        height: 32px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* CORRECTION COLONNES FILTRES */
    .filters-section .row .col-md-4,
    .filters-section .row .col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
        padding: 0 4px !important;
    }

    /* CORRECTION LABELS FILTRES */
    .filters-section label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    /* CORRECTION SECTION FILTRES COMPLÈTE */
    .filters-section {
        padding: 8px !important;
        margin-bottom: 12px !important;
    }

    .filters-section .row {
        margin: 0 !important;
        gap: 4px !important;
    }

    /* CORRECTION BOUTONS ACTIONS PARKINGS */
    .parking-actions .btn,
    .table .btn {
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
        padding: 2px !important;
        font-size: 0 !important;
        margin: 0 1px !important;
    }

    .parking-actions .btn i,
    .table .btn i {
        font-size: 10px !important;
        margin: 0 !important;
    }

    /* ========================================
       🔥 CORRECTIONS ULTRA-SPÉCIFIQUES ADMIN-PARKINGS
       FORCE MAXIMALE POUR CONTRER AUTRES CSS
       ======================================== */

    /* FORCER BOUTONS HEADER ADMIN-PARKINGS */
    body .admin-header .btn[onclick*="showCreateParkingModal"],
    body .admin-header .btn[onclick*="resetDemo"],
    body .admin-header .btn-success,
    body .admin-header .btn-primary {
        min-width: 32px !important;
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        font-size: 0px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        text-indent: -9999px !important;
        white-space: nowrap !important;
    }

    /* FORCER ICÔNES VISIBLES */
    body .admin-header .btn[onclick*="showCreateParkingModal"] i,
    body .admin-header .btn[onclick*="resetDemo"] i,
    body .admin-header .btn-success i,
    body .admin-header .btn-primary i {
        font-size: 12px !important;
        margin: 0 !important;
        display: block !important;
        text-indent: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* FORCER SÉLECTEURS FILTRES ADMIN-PARKINGS */
    body #filterAirport,
    body #filterType,
    body #filterStatus,
    body select[id="filterAirport"],
    body select[id="filterType"],
    body select[id="filterStatus"] {
        max-width: 100px !important;
        width: 100px !important;
        font-size: 11px !important;
        padding: 4px 6px !important;
        height: 32px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    /* FORCER COLONNES FILTRES */
    body .filters-section .row .col-md-4,
    body .filters-section .row .col-lg-3,
    body .filters-section .col-md-4,
    body .filters-section .col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 8px !important;
        padding: 0 4px !important;
    }

    /* FORCER HEADER ACTIONS COMPACTES */
    body .admin-header .col-auto {
        max-width: 30% !important;
        overflow: hidden !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
    }

    /* MASQUER TEXTE SPANS */
    body .admin-header .btn span:not(.fa):not(.fas):not(.icon),
    body .admin-header .btn-success span,
    body .admin-header .btn-primary span {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* ========================================
       🎯 CORRECTION BOUTON DÉCONNEXION ADMIN-PRO.HTML
       FORCE MAXIMALE POUR RÉSOUDRE LE DÉBORDEMENT
       ======================================== */

    /* BOUTON DÉCONNEXION ULTRA-SPÉCIFIQUE */
    body .header-pro .header-right .btn-pro.btn-pro-primary[onclick="logout()"],
    body .header-right .btn-pro[onclick="logout()"],
    body .btn-pro[onclick="logout()"] {
        min-width: 32px !important;
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        font-size: 0px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        text-indent: -9999px !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
    }

    /* ICÔNE DÉCONNEXION VISIBLE */
    body .header-pro .header-right .btn-pro.btn-pro-primary[onclick="logout()"] i,
    body .header-right .btn-pro[onclick="logout()"] i,
    body .btn-pro[onclick="logout()"] i {
        font-size: 12px !important;
        margin: 0 !important;
        display: block !important;
        text-indent: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        color: white !important;
    }

    /* MASQUER TEXTE "DÉCONNEXION" */
    body .btn-pro[onclick="logout()"] {
        color: transparent !important;
        text-shadow: none !important;
    }

    /* FORCER HEADER-RIGHT COMPACT */
    body .header-pro .header-right {
        max-width: 25% !important;
        overflow: hidden !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
    }

    /* CORRECTION RECHERCHE MASQUÉE */
    body .header-pro .search-global,
    body .header-right .search-global {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* ========================================
       🔥 SPÉCIFICITÉ MAXIMALE - DERNIÈRE SOLUTION
       ======================================== */

    /* BOUTON DÉCONNEXION - SPÉCIFICITÉ MAXIMALE */
    html body .header-pro .header-right .btn-pro[onclick="logout()"],
    html body .header-right .btn-pro[onclick="logout()"],
    html body .btn-pro[onclick="logout()"] {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        font-size: 0px !important;
        padding: 4px !important;
        overflow: hidden !important;
        text-indent: -9999px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
        color: transparent !important;
    }

    /* ICÔNE DÉCONNEXION - SPÉCIFICITÉ MAXIMALE */
    html body .btn-pro[onclick="logout()"] i {
        font-size: 12px !important;
        margin: 0 !important;
        display: block !important;
        text-indent: 0 !important;
        color: white !important;
        position: relative !important;
        z-index: 999 !important;
    }

    /* HEADER-RIGHT - SPÉCIFICITÉ MAXIMALE */
    html body .header-pro .header-right {
        max-width: 25% !important;
        overflow: hidden !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   🔥 ANALYTICS MOBILE OPTIMIZATIONS 2025
   Graphiques Chart.js responsive premium
   ======================================== */

/* Conteneur responsive pour graphiques */
.chart-responsive-container {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 60% !important; /* Ratio 5:3 pour mobile */
}

.chart-responsive-container canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Canvas responsive pour tous les graphiques */
canvas {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Canvas dans les cards analytics */
.card-pro canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* MOBILE RESPONSIVE ANALYTICS */
@media screen and (max-width: 768px) {
    /* Métriques mobile - 2 colonnes */
    .metric-card {
        margin-bottom: 15px !important;
        padding: 15px !important;
        text-align: center !important;
    }

    .metric-card h3 {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    .metric-card p {
        font-size: 0.85rem !important;
        margin-bottom: 5px !important;
    }

    /* Graphiques mobile */
    .card-pro {
        margin-bottom: 20px !important;
        padding: 15px !important;
    }

    .card-header h4 {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }

    /* Canvas mobile optimisé */
    .chart-responsive-container {
        padding-bottom: 50% !important; /* Ratio plus compact sur mobile */
    }

    canvas {
        max-height: 250px !important;
    }

    /* Top parkings mobile */
    .top-parkings .parking-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
        font-size: 0.9rem !important;
    }

    .top-parkings .rank {
        width: 25px !important;
        height: 25px !important;
        font-size: 0.8rem !important;
    }
}

/* MOBILE SMALL (< 480px) */
@media screen and (max-width: 480px) {
    .metric-card {
        padding: 10px !important;
    }

    .metric-card h3 {
        font-size: 1.3rem !important;
    }

    .metric-card p {
        font-size: 0.8rem !important;
    }

    .card-pro {
        padding: 10px !important;
    }

    .chart-responsive-container {
        padding-bottom: 45% !important;
    }

    canvas {
        max-height: 200px !important;
    }
}