/**
 * Mobile Enhancements for SaleTracker
 * Améliorations responsive design pour une meilleure expérience mobile
 */

/* ===============================================
   VARIABLES CSS POUR MOBILE
   =============================================== */
:root {
    --mobile-header-height: 60px;
    --mobile-footer-height: 80px;
    --mobile-padding: 1rem;
    --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-area-top: env(safe-area-inset-top, 0px);
    --touch-target-min: 44px;
    --mobile-breakpoint: 768px;
    --mobile-container-padding: 0.75rem;
}

/* ===============================================
   RESPONSIVE CONTAINERS
   =============================================== */
@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }
    
    /* Utilisation de l'espace disponible */
    .container-mobile-full {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 var(--mobile-container-padding);
    }
    
    /* Cards responsive */
    .card {
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
        font-size: 1.1rem;
    }
}

/* ===============================================
   NAVIGATION MOBILE AMÉLIORÉE
   =============================================== */
@media (max-width: 768px) {
    /* Header mobile optimisé */
    .navbar {
        height: var(--mobile-header-height);
        padding: 0.5rem var(--mobile-container-padding);
        position: sticky;
        top: var(--mobile-safe-area-top);
        z-index: 1030;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    /* Bouton menu hamburger amélioré */
    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        transition: background-color 0.2s ease;
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        outline: none;
    }
    
    /* Menu latéral mobile (offcanvas) */
    .offcanvas {
        max-width: 300px;
        border-radius: 0 1rem 1rem 0;
    }
    
    .offcanvas-header {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        padding: 1.5rem 1rem 1rem;
        border-radius: 0 1rem 0 0;
    }
    
    .offcanvas-title {
        font-weight: 600;
        margin: 0;
    }
    
    .offcanvas-body {
        padding: 1rem;
    }
    
    /* Navigation mobile avec icônes */
    .offcanvas .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        margin-bottom: 0.25rem;
        transition: all 0.2s ease;
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
    }
    
    .offcanvas .nav-link:hover,
    .offcanvas .nav-link:focus {
        background-color: rgba(13, 110, 253, 0.1);
        color: #0056b3;
    }
    
    .offcanvas .nav-link i {
        width: 20px;
        text-align: center;
        margin-right: 0.75rem;
    }
    
    /* Sections du menu */
    .nav-section-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: #6c757d;
        margin: 1.5rem 0 0.5rem;
        padding: 0 1rem;
    }
}

/* ===============================================
   FORMULAIRES MOBILE
   =============================================== */
@media (max-width: 768px) {
    /* Formulaires full-width sur mobile */
    .form-control,
    .form-select {
        font-size: 16px; /* Évite le zoom iOS */
        min-height: var(--touch-target-min);
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
    }
    
    /* Labels mobile */
    .form-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }
    
    /* Groups de formulaire stack sur mobile */
    .form-group.row {
        margin-bottom: 1.5rem;
    }
    
    .form-group.row .col-sm-4,
    .form-group.row .col-sm-8 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .form-group.row .col-sm-4 {
        margin-bottom: 0.25rem;
    }
    
    /* Input groups responsive */
    .input-group {
        flex-wrap: nowrap;
    }
    
    .input-group-text {
        min-width: 50px;
        justify-content: center;
        font-size: 0.9rem;
    }
    
    /* Fieldsets mobile */
    fieldset {
        margin-bottom: 2rem;
        padding: 1rem;
        background-color: #f8f9fa;
        border-radius: 0.75rem;
        border: 1px solid #e9ecef;
    }
    
    fieldset legend {
        font-size: 1.1rem;
        font-weight: 600;
        padding: 0 0.5rem;
        margin-bottom: 1rem;
        color: #495057;
    }
    
    /* Boutons mobile */
    .btn {
        min-height: var(--touch-target-min);
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
    }
    
    .btn-lg {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
    
    .btn-sm {
        min-height: 36px;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Groupe de boutons mobile */
    .d-flex.gap-2 {
        gap: 0.75rem !important;
        flex-wrap: wrap;
    }
    
    .d-flex.gap-2 .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* ===============================================
   TABLEAUX RESPONSIVE
   =============================================== */
@media (max-width: 768px) {
    /* Table scrolling horizontal */
    .table-responsive {
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .table {
        margin-bottom: 0;
        font-size: 0.9rem;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }
    
    /* Actions sur mobile - boutons plus gros */
    .table .btn {
        min-height: 36px;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Colonnes prioritaires sur mobile */
    .table .d-none.d-md-table-cell {
        display: none !important;
    }
    
    .table .mobile-priority-1 {
        display: table-cell !important;
    }
    
    /* Card-style pour très petit écran */
    @media (max-width: 576px) {
        .table-card-mobile {
            border: 0;
        }
        
        .table-card-mobile thead {
            display: none;
        }
        
        .table-card-mobile tbody tr {
            display: block;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            padding: 1rem;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .table-card-mobile tbody td {
            display: block;
            padding: 0.5rem 0;
            border: 0;
            text-align: left !important;
        }
        
        .table-card-mobile tbody td::before {
            content: attr(data-label) ": ";
            font-weight: 600;
            color: #495057;
            display: inline-block;
            width: 40%;
        }
    }
}

/* ===============================================
   PAGINATION MOBILE
   =============================================== */
@media (max-width: 768px) {
    .pagination {
        justify-content: center;
        margin: 2rem 0;
    }
    
    .pagination .page-link {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        margin: 0 0.125rem;
        border-radius: 0.5rem;
    }
    
    /* Masquer certains numéros sur très petit écran */
    @media (max-width: 576px) {
        .pagination .page-item:not(.active):not(.disabled):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
            display: none;
        }
    }
}

/* ===============================================
   MODALES MOBILE
   =============================================== */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .modal-dialog-centered {
        min-height: calc(100vh - 2rem - var(--mobile-safe-area-top) - var(--mobile-safe-area-bottom));
    }
    
    .modal-content {
        border-radius: 1rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    
    .modal-header {
        padding: 1.5rem 1.5rem 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    
    .modal-body {
        padding: 1rem 1.5rem;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 1rem 1.5rem 1.5rem;
        border-top: 1px solid #e9ecef;
    }
    
    .modal-footer .btn {
        flex: 1;
        margin: 0 0.25rem;
    }
}

/* ===============================================
   FILTRES ET RECHERCHE MOBILE
   =============================================== */
@media (max-width: 768px) {
    .search-filters-mobile {
        position: sticky;
        top: calc(var(--mobile-header-height) + var(--mobile-safe-area-top));
        background-color: white;
        z-index: 1020;
        border-bottom: 1px solid #e9ecef;
        padding: 1rem;
        margin: 0 calc(-1 * var(--mobile-container-padding));
    }
    
    .search-filters-mobile .form-control {
        border-radius: 2rem;
        padding-left: 2.5rem;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868e96' stroke-width='2'%3e%3ccircle cx='11' cy='11' r='8'%3e%3c/circle%3e%3cpath d='m21 21-4.35-4.35'%3e%3c/path%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: 0.75rem center;
        background-size: 1rem;
    }
    
    .filter-toggle-mobile {
        min-height: var(--touch-target-min);
        width: var(--touch-target-min);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        margin-left: 0.5rem;
    }
}

/* ===============================================
   STATISTIQUES DASHBOARD MOBILE
   =============================================== */
@media (max-width: 768px) {
    .dashboard-stats-mobile {
        margin: 1rem calc(-1 * var(--mobile-container-padding));
    }
    
    .dashboard-stats-mobile .col-6,
    .dashboard-stats-mobile .col-md-3 {
        padding: 0.5rem;
    }
    
    .stats-card {
        text-align: center;
        padding: 1.5rem 1rem;
        border-radius: 1rem;
        border: 1px solid #dee2e6;
        height: 100%;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    /* Appliquer le fond clair uniquement quand il n'y a pas de bg-* */
    .stats-card:not([class*="bg-"]) {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .stats-card[class*="bg-"] {
        color: #fff;
        border: none;
    }

    .stats-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stats-card .card-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }
    
    .stats-card h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }
    
    .stats-card small {
        font-size: 0.75rem;
        color: #868e96;
    }
}

/* ===============================================
   GRAPHIQUES MOBILE
   =============================================== */
@media (max-width: 768px) {
    .chart-container {
        position: relative;
        height: 250px;
        margin: 1rem 0;
        background-color: white;
        border-radius: 0.75rem;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .chart-container canvas {
        max-height: 200px;
    }
    
    .chart-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        text-align: center;
        color: #495057;
    }
}

/* ===============================================
   TOUCHES POUR DISPOSITIFS TACTILES
   =============================================== */
@media (hover: none) and (pointer: coarse) {
    /* Styles spécifiques aux écrans tactiles */
    .btn,
    .nav-link,
    .page-link,
    .form-control,
    .form-select {
        transition: none;
    }
    
    .btn:active,
    .nav-link:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* Suppression des effets hover sur tactile */
    .btn:hover,
    .nav-link:hover,
    .card:hover {
        transform: none;
        box-shadow: initial;
    }
}

/* ===============================================
   ACCESSIBILITÉ MOBILE
   =============================================== */
@media (max-width: 768px) {
    /* Focus visible plus marqué sur mobile */
    .btn:focus,
    .form-control:focus,
    .form-select:focus,
    .nav-link:focus {
        outline: 3px solid #007bff;
        outline-offset: 2px;
        box-shadow: none;
    }
    
    /* Zone de texte pour lecteurs d'écran */
    .sr-only-mobile {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    
    /* Annonces pour lecteurs d'écran */
    .mobile-announcements {
        position: fixed;
        top: -9999px;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
}

/* ===============================================
   SAFE AREA POUR iPhone X+
   =============================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-safe-bottom {
        padding-bottom: calc(1rem + var(--mobile-safe-area-bottom));
    }
    
    .mobile-safe-top {
        padding-top: calc(1rem + var(--mobile-safe-area-top));
    }
    
    .footer-mobile {
        padding-bottom: var(--mobile-safe-area-bottom);
    }
}

/* ===============================================
   ANIMATIONS PERFORMANCE MOBILE
   =============================================== */
@media (max-width: 768px) {
    /* Réduction des animations sur mobile pour performance */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Animations GPU-accelerated */
    .animate-mobile {
        will-change: transform;
        transform: translateZ(0);
    }
}

/* ===============================================
   DARK MODE MOBILE
   =============================================== */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .stats-card,
    .card,
    .modal-content {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .form-control,
    .form-select {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .form-control:focus,
    .form-select:focus {
        background-color: #2d3748;
        border-color: #63b3ed;
        color: #e2e8f0;
    }
}