/* ========================================
   GO WORK - MOBILE RESPONSIVE STYLES OPTIMIZED
   Utilise TailwindCSS avec overrides spécifiques mobile
   ======================================== */

/* 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 MOBILE === */
    .main-content {
        margin-left: 0 !important;
        margin-top: 60px !important;
        padding: 16px !important;
        min-height: calc(100vh - 60px) !important;
    }

    .go-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 20px !important;
    }

    /* === SIDEBAR MOBILE === */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        transform: translateX(-100%) !important;
        z-index: 9999 !important;
        transition: transform 0.3s ease !important;
        background: white !important;
        box-shadow: 0 0 20px rgba(0,0,0,0.3) !important;
    }

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

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

    .mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .desktop-header {
        display: none !important;
    }

    .mobile-menu-toggle {
        background: none !important;
        border: none !important;
        font-size: 20px !important;
        color: var(--text-color) !important;
        cursor: pointer !important;
        padding: 8px !important;
    }

    .mobile-logo {
        cursor: pointer !important;
    }

    .mobile-logo .logo-img {
        height: 32px !important;
    }

    /* === DASHBOARD MOBILE === */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 30px !important;
    }

    .welcome-header {
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .welcome-header h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .welcome-subtitle {
        font-size: 1rem !important;
    }

    /* === CARDS MOBILE === */
    .next-session-card,
    .victory-card,
    .content-section,
    .go-card {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }

    /* === PAGES GRID MOBILE === */
    .pages-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

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

    .page-content-wrapper {
        padding: 16px !important;
    }

    .page-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    /* === BOUTONS MOBILE === */
    .btn,
    .go-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .go-btn-sm {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .session-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

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

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

    .go-input,
    .go-textarea,
    .go-select {
        padding: 14px 16px !important;
        font-size: 16px !important; /* Évite le zoom sur iOS */
        border-radius: 8px !important;
    }

    .go-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    /* === MODAL MOBILE === */
    .go-modal-content {
        max-width: calc(100vw - 32px) !important;
        margin: 16px !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
    }

    .go-modal-header {
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    .go-modal-title {
        font-size: 1.1rem !important;
    }

    /* === TABLES MOBILE === */
    .go-table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .go-table {
        min-width: 500px !important;
    }

    .go-table-cell {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* === NAVIGATION MOBILE === */
    .go-breadcrumb {
        font-size: 11px !important;
        flex-wrap: wrap !important;
    }

    /* === ALERTS MOBILE === */
    .go-alert {
        padding: 12px 16px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* === BADGES MOBILE === */
    .go-badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* === GRID RESPONSIVE MOBILE === */
    .go-grid-responsive {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* === SPACING MOBILE === */
    .go-card-header {
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    .go-card-footer {
        padding-top: 12px !important;
        margin-top: 12px !important;
    }

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

    /* === SESSION INFO MOBILE === */
    .session-info {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .session-details h3 {
        font-size: 1.1rem !important;
    }

    .session-details p {
        font-size: 0.9rem !important;
    }

    /* === VICTORY CARD MOBILE === */
    .victory-content {
        text-align: center !important;
    }

    .victory-count {
        font-size: 2rem !important;
        margin: 12px 0 !important;
    }

    .victory-action {
        margin-top: 16px !important;
    }

    /* === TOUCH IMPROVEMENTS === */
    .page-card-link,
    .btn,
    .go-btn,
    button,
    a {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    }

    /* === HIDE ELEMENTS ON MOBILE === */
    .go-hidden-mobile {
        display: none !important;
    }

    .go-mobile-only {
        display: block !important;
    }

    /* === SCROLLING IMPROVEMENTS === */
    .main-content {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
    }

    /* === KEYBOARD HANDLING === */
    input:focus,
    textarea:focus,
    select:focus {
        transform: none !important; /* Évite les bugs de zoom iOS */
    }

}

/* Très petits écrans (max-width: 400px) */
@media (max-width: 400px) {

    .go-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .main-content {
        padding: 12px !important;
    }

    .welcome-header h1 {
        font-size: 1.5rem !important;
    }

    .go-card,
    .next-session-card,
    .victory-card,
    .content-section {
        padding: 12px !important;
    }

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

    .page-content-wrapper {
        padding: 12px !important;
    }

    .go-modal-content {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }

}