/**
 * ManageMate Synapse - Responsive Mobile
 * Media queries pour rendre l'application utilisable sur mobile
 * ⚠️ NE TOUCHE PAS AU DESKTOP - Ajoute seulement des règles pour mobile
 *
 * Breakpoints modernes 2025:
 * - Mobile: 320px - 479px
 * - Mobile Large: 480px - 767px
 * - Tablet: 768px - 1023px
 * - Desktop: 1024px+ (inchangé)
 */

/* ========================================
   TYPOGRAPHIE FLUIDE - Scaling automatique
   ======================================== */

/* Titres avec scaling fluide */
h1 {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
}

h2 {
    font-size: clamp(1.25rem, 4vw, 1.875rem);
}

h3 {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
}

h4 {
    font-size: clamp(1rem, 3vw, 1.25rem);
}

h5, h6 {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
}

/* Texte de base responsive */
body {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

/* ========================================
   TABLET - 768px - 1023px
   ======================================== */

@media (max-width: 1023px) {
    /* Container principal */
    .container,
    .full-page {
        padding: 0 1rem;
        max-width: 100%;
    }

    /* Sidebar devient collapsible */
    .with-sidebar {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-primary);
        max-height: 60vh;
    }

    .main-content {
        width: 100%;
        padding: 1rem;
    }

    /* Grilles - 2 colonnes max sur tablet */
    .grid-cols-4,
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Cards plus compactes */
    .card-body {
        padding: 1rem;
    }

    .page-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

/* ========================================
   MOBILE LARGE - 480px - 767px
   ======================================== */

@media (max-width: 767px) {
    /* Container encore plus compact */
    .container,
    .full-page {
        padding: 0 0.75rem;
    }

    /* Header de page stack vertical */
    .page-header {
        padding: 0.75rem;
    }

    /* Sidebar complètement cachée par défaut sur mobile */
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 280px;
        height: 100vh;
        z-index: 1040;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .sidebar.mobile-open {
        left: 0;
    }

    /* Overlay pour fermer la sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1030;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Main content pleine largeur */
    .main-content {
        padding: 0.75rem;
    }

    /* Toutes les grilles deviennent 1 colonne */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Cards optimisées mobile */
    .card {
        border-radius: var(--radius-md);
    }

    .card-header,
    .card-footer {
        padding: 0.75rem 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Boutons adaptés mobile */
    .btn,
    .action-btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }

    .btn-lg {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    /* Formulaires mobile */
    input,
    select,
    textarea {
        font-size: 1rem; /* Évite le zoom automatique sur iOS */
        padding: 0.75rem;
    }

    /* Badges plus petits */
    .badge,
    .status-badge {
        font-size: 0.625rem;
        padding: 0.25rem 0.75rem;
    }

    /* Modales adaptées sur mobile - SANS HEIGHT 100% */
    .modal {
        padding: 0;
        align-items: flex-end; /* Modals du bas sur mobile */
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 85vh; /* Hauteur max pour laisser respirer */
        border-radius: 1rem 1rem 0 0; /* Arrondi en haut seulement */
        padding: 1rem;
        overflow-y: auto; /* Scroll interne si contenu trop grand */
        display: flex;
        flex-direction: column;
    }

    /* Contenu scrollable dans le modal */
    .modal-body,
    .modal-content > div:not(.modal-header):not(.modal-footer) {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 1rem;
    }

    /* Footer sticky en bas */
    .modal-footer,
    .modal-content > div:last-child,
    .modal-actions {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 1rem;
        margin: 0 -1rem -1rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .dark .modal-footer,
    .dark .modal-content > div:last-child,
    .dark .modal-actions {
        background: #1e293b;
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    /* Boutons pleine largeur sur mobile */
    .modal-footer button,
    .modal-actions button {
        flex: 1;
        min-width: 120px;
    }

    /* Tableaux - scroll horizontal avec indicateur */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }

    .table-container::after {
        content: '← Glisser →';
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.625rem;
        pointer-events: none;
        opacity: 0.5;
    }

    table {
        min-width: 600px;
        font-size: 0.875rem;
    }

    /* Cellules de tableau plus compactes */
    table th,
    table td {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap;
    }

    /* Espacements réduits */
    .gap-8 { gap: 1rem; }
    .gap-6 { gap: 0.75rem; }
    .p-8 { padding: 1rem; }
    .p-6 { padding: 0.75rem; }
    .py-8 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-6 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .px-8 { padding-left: 1rem; padding-right: 1rem; }
    .px-6 { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Timeline plus compacte */
    .timeline-line {
        left: 0.75rem;
    }

    .comment-bubble {
        max-width: 95%;
    }

    .comment-avatar {
        width: 32px;
        height: 32px;
    }

    /* Boutons tech-action en mode icône seulement */
    .tech-action-btn {
        padding: 0.5rem;
        min-width: 2.5rem;
    }

    .tech-action-btn span {
        display: none;
    }

    .tech-action-btn i {
        margin-right: 0;
    }

    /* Brand buttons adaptés */
    .brand-button {
        padding: 0.75rem 1rem;
    }

    /* Admin cards */
    .admin-card {
        padding: 1rem;
    }
}

/* ========================================
   MOBILE SMALL - 320px - 479px
   ======================================== */

@media (max-width: 479px) {
    /* Container très compact */
    .container,
    .full-page {
        padding: 0 0.5rem;
    }

    /* Titres encore plus petits si nécessaire */
    h1 {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }

    h2 {
        font-size: clamp(1.125rem, 5vw, 1.5rem);
    }

    /* Cards minimales */
    .card-header,
    .card-footer,
    .card-body {
        padding: 0.75rem;
    }

    /* Boutons compacts mais toujours touch-friendly */
    .btn,
    .action-btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
        min-height: 44px; /* Touch target minimum */
    }

    /* Formulaires */
    input,
    select,
    textarea {
        padding: 0.625rem;
        font-size: 16px; /* Évite le zoom iOS */
    }

    /* Espacements minimaux */
    .main-content {
        padding: 0.5rem;
    }

    .page-header {
        padding: 0.5rem;
    }

    /* Status badges lisibles mais compacts */
    .status-badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
    }

    /* Boutons d'action en mode icône */
    .btn-group .btn span,
    .action-buttons .btn span {
        display: none;
    }

    .btn-group .btn,
    .action-buttons .btn {
        padding: 0.5rem;
        min-width: 44px;
    }
}

/* ========================================
   HEADER MOBILE - OPTIMISATIONS
   ======================================== */

@media (max-width: 767px) {
    /* Header mobile - meilleure accessibilité */
    header {
        padding: 0.75rem 1rem !important;
        position: sticky;
        top: 0;
        z-index: 30;
    }

    /* Bouton hamburger bien visible */
    #sidebar-toggle,
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }

    /* Titre header plus petit */
    header h1 {
        font-size: 1.125rem !important;
    }

    /* Boutons header */
    .header-icon-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
}

/* ========================================
   PAGES DE TICKETS - OPTIMISATIONS MOBILE
   ======================================== */

@media (max-width: 767px) {

    /* Filtres - Réduire le nombre visible par défaut */
    #ticketsFilterForm {
        grid-template-columns: 1fr;
    }

    /* Pagination compacte sur mobile */
    .flex.items-center.justify-between.mt-6 {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    /* Boutons de pagination - Plus compacts */
    #ticketsPerPageGroup {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
        width: 100%;
    }

    #ticketsPerPageGroup button {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
        border-radius: 0.375rem !important;
        border: 1px solid var(--border-primary) !important;
    }

    /* Cacher les options 100 et 200 sur mobile */
    #ticketsPerPageGroup button[data-value="100"],
    #ticketsPerPageGroup button[data-value="200"] {
        display: none;
    }

    /* Info pagination centrée et en haut */
    #paginationInfo {
        text-align: center;
        width: 100%;
        order: -1;
        font-weight: 600;
    }

    /* Boutons précédent/suivant - Pleine largeur */
    .flex.items-center.gap-2:has(#prevPage, #nextPage) {
        width: 100%;
        gap: 0.5rem;
    }

    #prevPage, #nextPage {
        flex: 1;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* Groupe affichage - Plus compact */
    .flex.items-center.gap-4:has(#ticketsPerPageGroup) {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    .flex.items-center.gap-4:has(#ticketsPerPageGroup) > span {
        text-align: center;
        width: 100%;
    }

    /* Header de section plus compact */
    .bg-gradient-to-r.from-blue-50,
    .bg-gradient-to-r.from-teal-50 {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
        padding: 1rem !important;
    }

    /* Compteur de tickets */
    #ticket-count {
        align-self: flex-end;
        font-size: 0.75rem;
    }

    /* Cards de section */
    .app-card.p-6 {
        padding: 1rem !important;
    }

    .app-card.p-4 {
        padding: 0.75rem !important;
    }
}

/* Tablet - Ajustements intermédiaires */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Filtres en 2 colonnes sur tablet */
    #ticketsFilterForm {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pagination - Garder tous les boutons sur tablet */
    #ticketsPerPageGroup {
        flex-wrap: wrap;
    }
}

/* ========================================
   CARTES ET CONTENEURS - MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Cards responsive */
    .app-card {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 1rem !important;
    }

    /* Stats cards en grille optimisée */
    .stats-grid,
    [class*="grid-cols"] {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 0.75rem !important;
    }

    /* Liste de tickets optimisée */
    #ticketsList > div,
    #recentTicketsList > div {
        padding: 0.75rem !important;
        border-left-width: 3px;
    }

    /* Badges plus lisibles */
    .status-badge,
    .priority-badge,
    .type-badge {
        font-size: 0.625rem !important;
        padding: 0.25rem 0.625rem !important;
        white-space: nowrap;
    }
}

/* ========================================
   UTILITAIRES RESPONSIVE
   ======================================== */

/* Classes d'affichage responsive */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .show-mobile-flex {
        display: flex !important;
    }

    .show-mobile-inline {
        display: inline !important;
    }

    .show-mobile-inline-flex {
        display: inline-flex !important;
    }
}

/* ========================================
   IMAGES ET MEDIA - MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Avatars plus petits */
    .avatar,
    [class*="avatar"] {
        width: 2rem !important;
        height: 2rem !important;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }

    .show-desktop-flex {
        display: flex !important;
    }
}

/* ========================================
   OPTIMISATIONS TOUCH
   ======================================== */

@media (max-width: 1023px) {
    /* Zone de touch plus grande */
    button,
    .btn,
    .action-btn,
    a.card,
    .hover-card {
        min-height: 44px; /* Taille minimum recommandée Apple/Google */
        min-width: 44px;
    }

    /* Scroll momentum sur mobile */
    .main-content,
    .sidebar,
    .comments-container {
        -webkit-overflow-scrolling: touch;
    }

    /* Désactiver les effets hover sur touch */
    .hover-card:hover {
        transform: none;
    }

    /* Focus plus visible sur mobile */
    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }
}

/* ========================================
   CONTAINER QUERIES (2025)
   Pour composants vraiment modulaires
   ======================================== */

@supports (container-type: inline-size) {
    .card-container {
        container-type: inline-size;
        container-name: card;
    }

    @container card (max-width: 400px) {
        .card-header {
            flex-direction: column;
            gap: 0.5rem;
        }

        .card-body {
            padding: 0.75rem;
        }
    }
}

/* ========================================
   ORIENTATION
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    /* En mode paysage sur mobile, optimiser la hauteur */
    .sidebar {
        max-height: 50vh;
    }

    /* Modal en paysage - plus compact */
    .modal-content {
        max-height: 80vh;
    }

    .modal-body {
        max-height: calc(80vh - 120px);
    }
}

/* ========================================
   SAFE AREA (Notch iPhone, etc.)
   ======================================== */

@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 767px) {
        .container,
        .full-page {
            padding-left: max(0.75rem, env(safe-area-inset-left));
            padding-right: max(0.75rem, env(safe-area-inset-right));
        }

        .sidebar,
        .app-sidebar {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }

        header {
            padding-top: max(0.75rem, env(safe-area-inset-top));
        }

        /* Boutons sticky en bas */
        .sticky-bottom,
        .fixed-bottom {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
    }
}

/* ========================================
   NAVIGATION MOBILE AMÉLIORÉE
   ======================================== */

@media (max-width: 767px) {
    /* Main content avec sidebar */
    .app-main {
        width: 100% !important;
        margin-left: 0 !important;
        min-height: 100vh;
    }

    /* Container app */
    .app-container {
        display: flex;
        flex-direction: column;
    }

    /* Sidebar backdrop */
    .app-sidebar-overlay,
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 40;
        display: none;
    }

    .app-sidebar-overlay.active,
    .sidebar-backdrop.active {
        display: block;
    }

    /* Sidebar mobile */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 50;
    }

    .app-sidebar.open {
        transform: translateX(0);
    }

    /* Mobile menu toggle visible */
    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Scroll lock quand sidebar ouverte */
    body.sidebar-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* ========================================
   TEXTES ET TYPOGRAPHIE MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Textes plus lisibles */
    p {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    /* Liens plus facilement cliquables */
    a:not(.sidebar-link):not(.nav-link):not([class*="text-"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Labels de formulaire */
    label {
        font-size: 0.875rem;
        font-weight: 600;
    }
}

/* ========================================
   UTILITAIRES TABLETTE
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }

    .show-tablet {
        display: block !important;
    }

    .show-tablet-flex {
        display: flex !important;
    }

    .show-tablet-grid {
        display: grid !important;
    }

    /* Grilles optimisées tablette */
    .tablet\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tablet\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* Flex adaptations tablette */
    .tablet\:flex-row {
        flex-direction: row !important;
    }

    .tablet\:flex-col {
        flex-direction: column !important;
    }

    /* Gap tablette */
    .tablet\:gap-4 {
        gap: 1rem !important;
    }

    .tablet\:gap-3 {
        gap: 0.75rem !important;
    }
}

/* ========================================
   AMÉLIORATION DROPDOWNS ET MENUS MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Dropdowns en plein écran sur mobile */
    .dropdown-menu,
    [class*="dropdown"] > div,
    .context-menu {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-height: 70vh;
        border-radius: 1rem 1rem 0 0 !important;
        padding: 1rem;
        transform: translateY(0) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Items de dropdown plus grands pour touch */
    .dropdown-item,
    .dropdown-menu a,
    .dropdown-menu button {
        padding: 0.875rem 1rem !important;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Notifications dropdown */
    #notification-dropdown {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-height: 80vh;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        width: 100% !important;
    }
}

/* ========================================
   AMÉLIORATION FORMULAIRES MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Formulaires en colonnes sur mobile */
    .form-row,
    .form-group-row,
    form .grid-cols-2,
    form .grid-cols-3,
    form .flex.gap-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Inputs pleine largeur */
    .form-input,
    .form-select,
    .form-textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="search"],
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important; /* Évite le zoom iOS */
        padding: 0.75rem !important;
        border-radius: 0.5rem !important;
    }

    /* Labels plus visibles */
    .form-label,
    label {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.375rem;
        display: block;
    }

    /* Boutons de formulaire */
    form .btn,
    form button[type="submit"],
    form button[type="button"] {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1rem;
        min-height: 48px;
    }

    /* Checkboxes et radios plus grands */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    /* Switch toggles */
    .toggle-switch,
    [role="switch"] {
        min-width: 48px;
        min-height: 28px;
    }
}

/* ========================================
   AMÉLIORATION PAGINATION MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Pagination en mode compact */
    .pagination,
    .pagination-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .pagination .page-item,
    .pagination-btn {
        flex: 0 0 auto;
    }

    .pagination .page-link,
    .pagination-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
    }

    /* Cacher les numéros de page intermédiaires */
    .pagination .page-item:not(:first-child):not(:last-child):not(.active):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none;
    }

    /* Afficher les ellipses */
    .pagination .page-item.ellipsis {
        display: flex;
    }
}

/* ========================================
   AMÉLIORATION CARTES DE STATS MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Stats cards en grille 2 colonnes */
    .stats-container,
    .stats-grid,
    .widget-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .stat-card,
    .widget-card {
        padding: 0.875rem !important;
    }

    .stat-card .stat-value,
    .stat-number {
        font-size: 1.5rem !important;
    }

    .stat-card .stat-label,
    .stat-label {
        font-size: 0.75rem !important;
    }

    .stat-card .stat-icon,
    .stat-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

@media (max-width: 479px) {
    /* Stats en 1 colonne sur très petits écrans */
    .stats-container,
    .stats-grid,
    .widget-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   AMÉLIORATION LISTES ET ITEMS MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Items de liste plus espacés */
    .list-item,
    .ticket-item,
    .intervention-item,
    li.flex {
        padding: 0.875rem !important;
        gap: 0.75rem;
    }

    /* Swipe actions (si implémenté) */
    .swipe-actions {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: stretch;
    }

    .swipe-action-btn {
        min-width: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ========================================
   AMÉLIORATION TABS MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Tabs scrollable horizontalement */
    .tabs,
    .tab-list,
    [role="tablist"] {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .tabs::-webkit-scrollbar,
    .tab-list::-webkit-scrollbar,
    [role="tablist"]::-webkit-scrollbar {
        display: none;
    }

    .tab,
    .tab-item,
    [role="tab"] {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.625rem 1rem !important;
        min-height: 44px;
        font-size: 0.875rem;
    }
}

/* ========================================
   FIXES DIVERS MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Empêcher le débordement horizontal */
    body {
        overflow-x: hidden;
    }

    /* Fix pour les longues URLs et textes */
    .break-words {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Cacher les éléments secondaires */
    .mobile-hidden,
    .desktop-only {
        display: none !important;
    }

    /* Afficher les éléments mobiles */
    .mobile-only {
        display: block !important;
    }

    .mobile-only-flex {
        display: flex !important;
    }

    /* Scroll snap pour les carousels */
    .scroll-snap-container {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .scroll-snap-item {
        scroll-snap-align: start;
    }

    /* Loading states plus visibles */
    .loading-spinner {
        width: 40px !important;
        height: 40px !important;
    }

    /* Empty states */
    .empty-state {
        padding: 2rem 1rem;
        text-align: center;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
    }
}