/**
 * NeuroEEAT - Styles Responsive & Mobile
 * Inclure ce fichier dans toutes les pages après Tailwind
 */

/* CSS Custom Properties - Breakpoints Centralisés */
:root {
    --mobile: 480px;
    --tablet: 768px;
    --desktop: 1024px;
    --wide: 1280px;
    --transition-fast: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Base responsive */
* {
    -webkit-tap-highlight-color: transparent;
}

body {
    overflow-x: hidden;
}

/* Disable hover effects on touch devices */
@media (hover: none) {
    .lab-card:hover {
        transform: none !important;
    }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Smooth transitions */
    .sidebar {
        transition: all var(--transition-fast);
        z-index: 50;
    }

    .main-content {
        transition: all var(--transition-fast);
    }

    #sidebar-toggle i {
        transition: transform var(--transition-fast);
    }
}

/* Respect user color scheme preference */
@media (prefers-color-scheme: light) {
    /* Light mode support (optional - currently dark theme only) */
    :root {
        /* Add light theme variables if needed */
    }
}

@media (prefers-color-scheme: dark) {
    /* Already using dark theme */
}

/* High contrast support */
@media (prefers-contrast: more) {
    body {
        background-color: #000 !important;
    }

    .lab-card, .stat-card {
        border: 1px solid #fff !important;
    }

    button, a {
        text-decoration: underline;
    }
}

/* Orientation changes (tablets) */
@media (orientation: landscape) and (max-height: 500px) {
    .sidebar {
        position: fixed !important;
        left: -100%;
        width: 200px;
    }

    header {
        height: auto;
    }
}

/* Sidebar collapsed state (Desktop) */
.sidebar.collapsed { width: 80px; }
.main-content.collapsed { margin-left: 80px; width: calc(100% - 80px); }
.sidebar.collapsed .sidebar-text { display: none; }
.sidebar.collapsed #sidebar-toggle i { transform: rotate(180deg); }

/* Mobile Menu Button */
.mobile-menu-btn { display: none; }
.mobile-overlay { display: none; }

/* Tablette (768px - 1024px) */
@media (max-width: 1024px) {
    .sidebar:not(.mobile-open) { width: 80px; }
    .main-content:not(.collapsed) { margin-left: 80px; width: calc(100% - 80px); }
    .sidebar:not(.mobile-open) .sidebar-text { display: none; }
    
    .header-actions .btn-text { display: none; }
    .header-actions button { padding: 0.5rem; }
    
    /* Formulaires */
    .form-grid { grid-template-columns: 1fr !important; }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .mobile-menu-btn { display: flex !important; }
    
    .sidebar {
        position: fixed !important;
        left: -100%;
        width: 280px !important;
        height: 100vh;
        z-index: 100;
        background: rgba(15, 15, 30, 0.98) !important;
    }
    
    .sidebar.mobile-open {
        left: 0;
    }
    
    .sidebar.mobile-open .sidebar-text {
        display: inline !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .main-content.collapsed {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 90;
    }
    
    .mobile-overlay.active {
        display: block;
    }
    
    #sidebar-toggle { display: none !important; }
    
    .header-title { font-size: 1.25rem !important; }
    .project-selector-wrapper { display: none !important; }
    
    main, .main-padding { padding: 1rem !important; }
    header, .header-padding { padding: 0.75rem 1rem !important; }
    
    .notifications-dropdown {
        width: calc(100vw - 2rem) !important;
        inset-x-0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 400px;
        right: auto !important;
    }
    
    .user-name-text { display: none !important; }
    
    /* Tables responsive */
    .table-responsive { overflow-x: auto; }
    .table-responsive table { min-width: 600px; }
    
    /* Cards responsive */
    .stat-card h3 { font-size: 0.875rem; }
    .stat-card p { font-size: 1.75rem; }
    
    /* Grilles */
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    
    /* Modals - Adapt width to screen size */
    .modal-content {
        max-width: calc(100vw - 2rem) !important;
        margin: 1rem;
    }

    /* Full height on small screens */
    .modal-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Boutons flottants mobile */
    .mobile-fab {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 40;
    }
}

/* Very small mobile (< 480px) */
@media (max-width: 480px) {
    .stat-card h3 { font-size: 0.75rem; }
    .stat-card p { font-size: 1.5rem; }
    
    .text-3xl { font-size: 1.5rem !important; }
    .text-2xl { font-size: 1.25rem !important; }
    .text-xl { font-size: 1rem !important; }
    
    .p-6 { padding: 1rem !important; }
    .p-8 { padding: 1rem !important; }
    
    .space-x-4 { gap: 0.5rem !important; }
    
    /* Hide less important elements */
    .hide-mobile { display: none !important; }
}

/* Pull to refresh feel */
@media (max-width: 768px) {
    body {
        overscroll-behavior-y: contain;
    }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .sidebar {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Animation for mobile menu */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.sidebar.mobile-open {
    animation: slideIn 0.3s ease forwards;
}

/* Touch target optimization for mobile devices */
@media (pointer: coarse) {
    /* Minimum 44x44px touch targets (Apple + Android standard) */
    button,
    a,
    input,
    select,
    textarea,
    [role="button"],
    [role="link"],
    [role="menuitem"],
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.625rem 0.75rem;
    }

    /* Ensure adequate spacing between interactive elements */
    button + button,
    a + a,
    .btn + .btn {
        margin-left: 0.5rem;
    }

    /* Form elements */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
        margin: 0.5rem;
    }

    /* Navigation links */
    nav a,
    .nav-link {
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
        display: flex;
        align-items: center;
    }

    /* Dropdown items */
    .dropdown-item {
        padding: 0.75rem 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Disable hover state effects on coarse pointers */
    button:hover,
    a:hover,
    .btn:hover {
        transform: none !important;
    }
}

/* Fine pointer devices (mouse/trackpad) - keep existing hover effects */
@media (pointer: fine) {
    button:hover,
    a:hover,
    .btn:hover {
        /* Hover effects enabled */
    }
}