/* ========================================
   GO WORK - MOBILE RESPONSIVE STYLES
   ======================================== */

/* Variables CSS pour hauteur viewport mobile */
:root {
    --vh: 1vh;
}

/* Styles généraux pour mobile */
html {
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
}

body {
    min-height: 100%;
    min-height: calc(var(--vh, 1vh) * 100);
}

/* Classes utilitaires pour touch */
.touch-active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Base mobile styles (max-width: 768px) */
@media (max-width: 768px) {

    /* === LAYOUT GÉNÉRAL === */
    /* Force la bonne structure pour TOUTES les pages en mobile */
    .main-content {
        margin-left: 0 !important;
        margin-top: 60px !important;
        padding: 20px !important;
        min-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
    }

    .container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* === SIDEBAR MOBILE === */
    /* Belle sidebar qui slide depuis la gauche avec scroll qui marche ! */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 1000 !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;

        /* Animation depuis la gauche */
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;

        /* Scroll naturel qui marche maintenant ! */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar.show {
        transform: translateX(0) !important;
    }

    /* Header avec logo */
    .sidebar-header {
        padding: 15px 20px !important;
        border-bottom: 1px solid #e5e5e5 !important;
        background: #ffffff !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }

    /* Bouton fermer dans le header */
    .mobile-close-btn {
        background: none !important;
        border: none !important;
        font-size: 20px !important;
        color: #666 !important;
        cursor: pointer !important;
        padding: 5px !important;
        margin-left: auto !important;
    }

    /* Contenu scrollable */
    .sidebar-nav {
        flex: 1 !important;
        padding: 16px 0 !important;
    }

    /* Footer utilisateur */
    .sidebar-footer {
        padding: 12px !important;
        border-top: 1px solid #e5e5e5 !important;
        background: #ffffff !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
    }

    /* Navigation propre */
    .sidebar .nav-section {
        margin-bottom: 20px !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style: none !important;
    }

    .sidebar .nav-item {
        margin: 1px 8px !important;
        padding-left: 0 !important;
    }

    /* Overlay sombre derrière la sidebar */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease !important;
    }

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

    /* Empêcher le scroll du body quand sidebar ouverte */
    body.sidebar-open {
        overflow: hidden !important;
    }

    .nav-title {
        padding: 0 16px 8px 16px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .nav-item .nav-link {
        padding: 8px 12px !important;
        margin: 1px 8px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #374151 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }

    .nav-item .nav-link:hover {
        background-color: #f3f4f6 !important;
        color: #1f2937 !important;
    }

    .nav-item.active .nav-link {
        background: var(--main-bg-color) !important;
        color: #ffffff !important;
        border-right: none !important;
    }
    .nav-item.active .nav-link:hover {
        background: var(--main-bg-color) !important;
        color: #ffffff !important;
    }

    .nav-link i {
        width: 16px !important;
        text-align: center !important;
        font-size: 14px !important;
    }

    /* Pastilles de notification - seulement le style, pas le display */
    .notification-badge {
        margin-left: auto !important;
        background: #ef4444 !important;
        color: white !important;
        border-radius: 10px !important;
        padding: 2px 6px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        min-width: 18px !important;
        height: 18px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Quand elle s'affiche, utiliser flex */
    .notification-badge:not([style*="display: none"]) {
        display: flex !important;
    }

    /* === HEADER === */
    .main-header {
        height: 60px !important;
        margin-left: 0 !important;
    }

    /* Cache le header desktop sur mobile */
    .desktop-header {
        display: none !important;
    }

    /* === HEADER MOBILE === */
    .mobile-header,
    header .mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e5e5e5 !important;
        height: 60px !important;
        position: relative !important;
        z-index: 50 !important;
    }

    /* Cache le header desktop sur mobile */
    .desktop-header {
        display: none !important;
    }

    .header {
        padding: 10px 15px !important;
        height: 60px !important;
    }

    /* === LOGO === */
    .mobile-logo img,
    .header .logo img,
    .mobile-header .logo img,
    .logo img {
        height: 35px !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    .header .user-info {
        font-size: 14px !important;
    }

    /* === BOUTONS === */
    .btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }

    .btn-primary {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* === FORMULAIRES === */
    .form-group {
        margin-bottom: 15px !important;
    }

    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px !important; /* Évite le zoom sur iOS */
        padding: 12px !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    .form-control:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: none !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    }

    .form-row {
        flex-direction: column !important;
    }

    .form-row .form-group {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* Styles spécifiques pour les inputs de type file */
    input[type="file"] {
        padding: 8px !important;
        background: #f9fafb !important;
    }

    /* Labels */
    label {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #374151 !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    /* Textarea plus haute sur mobile */
    textarea {
        min-height: 100px !important;
        resize: vertical !important;
    }

    /* Select avec icône custom */
    select {
        background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%236B7280"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>') !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 16px !important;
        padding-right: 40px !important;
    }

    /* Groupes de checkboxes et radios */
    .form-check {
        padding: 8px 0 !important;
    }

    .form-check-input {
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important;
    }

    .form-check-label {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    /* === CARTES === */
    .card {
        margin-bottom: 15px !important;
        border-radius: 8px !important;
    }

    .card-header {
        padding: 15px !important;
        font-size: 16px !important;
    }

    .card-body {
        padding: 15px !important;
    }

    /* === TABLEAUX === */
    .table-responsive {
        border: none !important;
    }

    .table {
        font-size: 14px !important;
    }

    .table th,
    .table td {
        padding: 8px 5px !important;
        white-space: nowrap !important;
    }

    /* === MODALES === */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-content {
        border-radius: 8px !important;
    }

    .modal-header {
        padding: 15px !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    /* === PAGINATION === */
    .pagination {
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .pagination-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    /* === SESSIONS/REPLAYS === */
    .session-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 15px !important;
    }

    .session-thumbnail {
        width: 100% !important;
        height: 180px !important;
        margin-right: 0 !important;
    }

    .session-content {
        width: 100% !important;
    }

    .session-title {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /* === TÂCHES === */
    .task-item {
        padding: 12px !important;
        margin-bottom: 8px !important;
    }

    .task-title {
        font-size: 14px !important;
    }

    .task-meta {
        font-size: 12px !important;
        flex-wrap: wrap !important;
    }

    /* === DISCUSSIONS === */
    .message-item {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .message-content {
        font-size: 14px !important;
    }

    .message-meta {
        font-size: 12px !important;
    }

    /* === FAQ === */
    .faq-item {
        margin-bottom: 10px !important;
    }

    .faq-question {
        padding: 12px !important;
        font-size: 15px !important;
    }

    .faq-answer {
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* === PROFIL === */
    .profile-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }

    .profile-avatar {
        width: 80px !important;
        height: 80px !important;
    }

    /* === ADMIN === */
    .admin-stats {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .stat-card {
        padding: 20px !important;
    }

    /* Pages admin avec Tailwind */
    .admin-container {
        padding: 15px !important;
        max-width: 100% !important;
    }

    .admin-header {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
    }

    .admin-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .admin-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .admin-table {
        min-width: 600px !important;
        font-size: 14px !important;
    }

    .admin-table th,
    .admin-table td {
        padding: 8px 4px !important;
        white-space: nowrap !important;
    }

    /* Formulaires admin */
    .admin-form-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .admin-form-section {
        padding: 15px !important;
    }

    .admin-form-section h2 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    /* Editor.js mobile */
    .codex-editor {
        padding: 10px !important;
    }

    .ce-block__content {
        max-width: none !important;
        margin: 0 !important;
        padding: 8px !important;
    }

    .ce-toolbar__content {
        max-width: none !important;
    }

    .ce-toolbar__actions {
        right: 10px !important;
    }

    /* YouTube search modal mobile */
    .youtube-search-modal {
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    .youtube-video-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .youtube-video-thumbnail {
        width: 100% !important;
        height: 120px !important;
    }

    /* Filtres admin */
    .admin-filters {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .admin-filter-group {
        width: 100% !important;
    }

    /* Actions en lot */
    .bulk-actions {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .bulk-actions button {
        width: 100% !important;
    }

    /* === NAVIGATION TABS === */
    .nav-tabs {
        flex-wrap: wrap !important;
        border-bottom: 1px solid #dee2e6 !important;
    }

    .nav-tabs .nav-link {
        padding: 8px 12px !important;
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }

    /* === ALERTS === */
    .alert {
        padding: 10px !important;
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    /* === BOUTON FLOTTANT === */
    .floating-btn {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 20px !important;
    }

    /* === ÉLÉMENTS CACHÉS SUR MOBILE === */
    .hide-mobile {
        display: none !important;
    }

    /* === ÉLÉMENTS VISIBLES UNIQUEMENT SUR MOBILE === */
    .show-mobile {
        display: block !important;
    }

    /* === MENU BURGER === */
    .mobile-menu-toggle,
    .mobile-header .mobile-menu-toggle,
    header .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        color: #374151 !important;
        padding: 0 !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 100 !important;
    }

    .mobile-menu-toggle:hover,
    .mobile-header .mobile-menu-toggle:hover {
        background-color: #f3f4f6 !important;
        color: #111827 !important;
    }

    /* S'assurer que l'icône à l'intérieur est visible */
    .mobile-menu-toggle i,
    .mobile-menu-toggle .fas {
        display: inline-block !important;
        color: inherit !important;
        font-size: inherit !important;
    }

    /* === OVERLAY POUR 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: 999 !important;
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .sidebar-overlay.show {
        display: block !important;
        opacity: 1 !important;
    }

    /* === BODY AVEC SIDEBAR OUVERTE === */
    body.sidebar-open {
        overflow: hidden !important;
    }

    /* === TEXTES === */
    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    h4 {
        font-size: 16px !important;
    }

    /* === ESPACEMENT === */
    .mb-1 { margin-bottom: 0.25rem !important; }
    .mb-2 { margin-bottom: 0.5rem !important; }
    .mb-3 { margin-bottom: 1rem !important; }
    .mb-4 { margin-bottom: 1.5rem !important; }
    .mb-5 { margin-bottom: 3rem !important; }

    .mt-1 { margin-top: 0.25rem !important; }
    .mt-2 { margin-top: 0.5rem !important; }
    .mt-3 { margin-top: 1rem !important; }
    .mt-4 { margin-top: 1.5rem !important; }
    .mt-5 { margin-top: 3rem !important; }

    .p-1 { padding: 0.25rem !important; }
    .p-2 { padding: 0.5rem !important; }
    .p-3 { padding: 1rem !important; }
    .p-4 { padding: 1.5rem !important; }
    .p-5 { padding: 3rem !important; }
}

/* Très petits écrans (max-width: 480px) */
@media (max-width: 480px) {
    .main-content {
        padding: 15px !important;
    }

    .btn {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    .form-control {
        padding: 10px !important;
    }

    .card-header {
        padding: 12px !important;
        font-size: 15px !important;
    }

    .card-body {
        padding: 12px !important;
    }

    .session-item {
        padding: 12px !important;
    }

    .session-thumbnail {
        height: 160px !important;
    }

    h1 {
        font-size: 22px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }
}