/**
 * Mobile-first responsive styles for Admin Dashboard
 * Version optimisée avec haute spécificité
 */
:root {
    /* Noir & Or */
    --noir: #141414;
    --anthracite: #f6f6f6;
    --surface: #1f1f1f;
    --surface-2: #242424;
    --surface-3: #2a2a2a;

    --gold: #c9a227;
    --gold-hi: #e2c044;
    --gold-deep: #a3821b;
    --gold-glow: rgba(201, 162, 39, 0.35);

    --cream: #1f2937;
    --muted: #5c5240;
    --dim: #857d68;

    --ok: #7dc98f;
    --warn: #e0b34c;
    --danger: #e06565;
    --info: #a9bed8;

    --primary: var(--gold);
    --primary-dark: var(--gold-deep);
    --primary-light: var(--gold-hi);
    --success: var(--ok);
    --warning: var(--warn);
    --info: var(--info);

    --line: rgba(201, 162, 39, 0.16);
    --line-gold: rgba(201, 162, 39, 0.35);
    --line-strong: rgba(201, 162, 39, 0.55);

    --border-light: var(--line);
    --border-medium: var(--line-gold);

    --bg-body: radial-gradient(1400px 700px at 85% -10%, rgba(201, 162, 39, 0.07), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(201, 162, 39, 0.05), transparent 55%),
               var(--anthracite);
    --bg-card: linear-gradient(180deg, #f6f6f6 0%,#eaeaea 100%);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 5px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 16px 10px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 24px 15px rgba(0, 0, 0, 0.1);
    --shadow-gold: 0 1px 3px rgba(201, 162, 39, 0.1);
}
/* ============================================
   TOUS LES ÉCRANS - Base Mobile
   ============================================ */
html {
    font-size: 14px;
}

/* ============================================
   CORRECTIONS BODY MOBILE
   ============================================ */
@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }

    /* Scroll smooth pour tout le site */
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    }

    /* Empêcher le zoom sur les inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ============================================
   MOBILE (< 768px) - Styles par défaut
   ============================================ */
@media screen and (max-width: 768px) {
    /* ========== Reset et Base ========== */
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    }

    body {
        font-size: 14px !important;
        overflow-x: hidden !important;
    }

    /* ========== Header Mobile ========== */
    .admin-header,
    body > header.admin-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 12px !important;
        border-bottom: 1px solid #3A3A3A !important;
        z-index: 40 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }

    /* Titre dans header */
    .admin-header > div:first-of-type,
    .admin-header .text-left {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .admin-header h1,
    .admin-header .text-left h1 {
        font-size: 16px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Cacher éléments non essentiels */
    .admin-header .search-form,
    .admin-header .user-name,
    .admin-header .btn-plus span,
    .admin-header [class*="chevron"] {
        display: none !important;
    }

    /* Bouton hamburger */
    .admin-header .hamburger-btn,
    .admin-header button[onclick="toggleSidebar()"] {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Boutons icônes header */
    .admin-header .icon-btn,
    .admin-header .icon-btn,
    .admin-header button[onclick="toggleNotifications()"],
    .admin-header a[target="_blank"] {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        text-decoration: none !important;
    }

    /* Bouton Actions */
    .admin-header .btn-plus {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Menu utilisateur */
    .admin-header .user-menu {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .admin-header .user-menu > div:first-child {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    /* Espacement header actions */
    .admin-header .flex.items-center.gap-2 {
        gap: 4px !important;
    }

    /* ========== Sidebar Mobile ========== */
    #sidebar,
    body > aside#sidebar,
    aside#sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-right: 1px solid #3A3A3A !important;
        z-index: 50 !important;
        transition: transform 0.3s ease-in-out !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #sidebar.show,
    #sidebar.transform-none {
        transform: translateX(0) !important;
    }

    /* Overlay sidebar */
    #sidebarOverlay,
    body > div#sidebarOverlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 45 !important;
        display: none !important;
    }

    #sidebarOverlay.show,
    #sidebarOverlay:not(.hidden) {
        display: block !important;
    }

    /* Sidebar header */
    #sidebar > div:first-child,
    #sidebar .p-6 {
        padding: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid #3A3A3A !important;
        flex-shrink: 0 !important;
    }

    #sidebar .sidebar-close {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        cursor: pointer !important;
    }

    /* Navigation sidebar */
    #sidebar nav,
    #sidebar .px-4.py-6 {
        padding: 12px !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }

    #sidebar nav a, #sidebar nav > a {padding:5px !important;}


    #sidebar nav a i,
    #sidebar nav a span {
        font-size: 16px !important;
    }

    /* Sidebar footer */
    #sidebar .border-t,
    #sidebar > div:last-child {
        padding: 12px !important;
        border-top: 1px solid #3A3A3A !important;
    }

    /* ========== Main Content Mobile ========== */
    main,
    body > main {
        margin-left: 0 !important;
        padding: 68px 12px 20px !important;
        min-height: 100vh !important;
        display: block !important;
    }

    /* Page header */
    .page-header,
    main .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #3A3A3A !important;
    }

    .page-header h1,
    main .page-header h1 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #F5EFE0 !important;
    }

    .page-header p,
    main .page-header p {
        font-size: 12px !important;
        color: #9A917C !important;
    }

    .page-header .flex.items-center {
        align-self: flex-end !important;
    }

    .page-header .flex.items-center.gap-3 {
        gap: 8px !important;
    }

    /* Date badge */
    .page-header span[class*="rounded-full"] {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    /* ========== Stats Cards Mobile ========== */
    .stats-grid,
    main .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .stat-card,
    .stats-grid .stat-card {
        padding: 14px !important;
        border-radius: 14px !important;
        background: #1F1F1F !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .stat-card > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .stat-card h3 {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #F5EFE0 !important;
        line-height: 1.2 !important;
    }

    .stat-card p {
        font-size: 10px !important;
        color: #9A917C !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        margin: 0 !important;
    }

    .stat-card .w-12,
    .stat-card .h-12 {
        display: none !important;
    }

    /* Très petits écrans - 1 colonne */
    @media screen and (max-width: 380px) {
        .stats-grid {
            grid-template-columns: 1fr !important;
        }
    }

    /* ========== Content Cards Mobile ========== */
    .content-card,
    main .content-card {
        padding: 14px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
        border: 1px solid #3A3A3A !important;
        box-shadow: none !important;
    }

    .content-card h2 {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #F5EFE0 !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #3A3A3A !important;
    }

    .content-card h2 ~ a,
    .content-card h2 + a {
        font-size: 12px !important;
    }

    /* Grille 2 colonnes -> 1 colonne */
    .grid-2cols,
    main .grid-2cols {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .grid-2cols > * {
        width: 100% !important;
    }

    /* ========== Tables Mobile ========== */
    .table-responsive,
    .table-responsive * {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table-responsive {
        margin: 0 -14px !important;
        padding: 0 14px !important;
    }

    .table-responsive table {
        min-width: 480px !important;
        font-size: 11px !important;
    }

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

    .table-responsive th {
        font-size: 10px !important;
        color: var(--muted) !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
    }

    .table-responsive td {
        color: var(--muted) !important;
    }

    .table-responsive tbody tr {
        border-bottom: 1px solid #242424 !important;
    }

    /* Cellule statut */
    .table-responsive td span[class*="rounded-full"] {
        padding: 4px 8px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* ========== Quick Actions Mobile ========== */
    .quick-actions {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        margin: 12px -14px 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .quick-actions a,
    .quick-actions a * {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
        color: #F5EFE0 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        backdrop-filter: blur(4px) !important;
    }

    .quick-actions span.full-text {
        display: none !important;
    }

    .quick-actions span:not(.full-text) {
        display: inline !important;
    }

    /* ========== Alerts / Maintenance ========== */
    .alert-card {
        padding: 12px !important;
    }

    .alert-card .bg-gray-50 {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .alert-card .progress-bar,
    .alert-card .h-1\.5 {
        height: 4px !important;
    }

    /* Empty state */
    main .py-8.text-center {
        padding: 30px 15px !important;
    }

    main .py-8.text-center i {
        font-size: 36px !important;
        color: #4A463A !important;
        margin-bottom: 10px !important;
    }

    /* ========== Boutons Mobile ========== */
    .btn,
    main .btn,
    a.btn,
    button.btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        min-height: 44px !important;
        cursor: pointer !important;
        border: none !important;
        text-decoration: none !important;
        transition: all 0.2s !important;
    }

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

    .btn-block,
    .btn-block-mobile {
        width: 100% !important;
    }

    /* Inline actions */
    .inline-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .inline-actions .btn {
        flex: 1 !important;
        min-width: calc(50% - 4px) !important;
    }

    /* ========== Formulaires Mobile ========== */
    form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .form-group {
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .form-group label {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--muted) !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid #4A463A !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }

    .form-group textarea {
        min-height: 80px !important;
        resize: vertical !important;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none !important;
        border-color: #C9A227 !important;
        box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1) !important;
    }

    /* Input avec icône */
    .input-icon {
        position: relative !important;
    }

    .input-icon input {
        padding-left: 40px !important;
    }

    .input-icon i {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #857D68 !important;
    }

    /* ========== Badges ========== */
    .status-badge,
    span[class*="rounded-full"] {
        display: inline-flex !important;
        align-items: center !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }


    .badge-warning,
    .bg-yellow-100.text-yellow-700 {
        background: #fff3cd !important;
        color: #856404 !important;
    }

    .badge-danger,
    .bg-red-100.text-red-700 {
        background: #f8d7da !important;
        color: #721c24 !important;
    }

    .badge-info,
    .bg-cyan-50.text-cyan-700 {
        background: #d1ecf1 !important;
        color: #0c5460 !important;
    }

    .badge-gray,
    .bg-gray-100.text-gray-600 {
        background: #6c757d !important;
        color: #ffffff !important;
    }

    /* ========== Pagination ========== */
    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 16px !important;
        padding: 0 10px !important;
    }

    .pagination a,
    .pagination span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        background: #1F1F1F !important;
        border: 1px solid #3A3A3A !important;
        color: #B0A78E !important;
        text-decoration: none !important;
    }

    .pagination a:active {
        background: #242424 !important;
    }

    .pagination .active {
        background: #C9A227 !important;
        color: #F5EFE0 !important;
        border-color: #C9A227 !important;
    }

    /* ========== Alerts / Flash Messages ========== */
    .alert,
    [class*="alert-"] {
        padding: 12px 14px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        margin-bottom: 12px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .alert i {
        font-size: 16px !important;
        margin-top: 2px !important;
    }

    .alert-success,
    .bg-green-50.text-green-700 {
        background: rgba(125,201,143,0.12) !important;
        color: #7DC98F !important;
        border-left: 4px solid #7DC98F !important;
    }

    .alert-error,
    .bg-red-50.text-red-700 {
        background: rgba(224,101,101,0.12) !important;
        color: #F0A8A2 !important;
        border-left: 4px solid #E06565 !important;
    }

    /* ========== Notifications Panel ========== */
    #notificationPanel {
        position: fixed !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 65vh !important;
        background: #1F1F1F !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
        z-index: 50 !important;
        overflow-y: auto !important;
    }

    /* ========== Dropdowns ========== */
    [x-show].absolute,
    .dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        background: #1F1F1F !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
        padding: 8px !important;
        z-index: 50 !important;
    }

    [x-show].absolute a,
    [x-show].absolute button,
    .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 8px !important;
        min-height: 48px !important;
        font-size: 14px !important;
        color: #B0A78E !important;
        text-decoration: none !important;
    }

    [x-show].absolute a:active {
        background: #242424 !important;
    }

    /* ========== Footer Actions Sticky ========== */
    .footer-actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #1F1F1F !important;
        padding: 12px 14px !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        display: flex !important;
        gap: 10px !important;
        z-index: 30 !important;
        border-top: 1px solid #3A3A3A !important;
    }

    .footer-actions .btn {
        flex: 1 !important;
    }

    .has-footer-actions {
        padding-bottom: 80px !important;
    }

    /* ========== Filtres ========== */
    .filters-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        background: #1F1F1F !important;
        border-radius: 12px !important;
        border: 1px solid #3A3A3A !important;
    }

    .filters-bar form {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .filters-bar input,
    .filters-bar select {
        flex: 1 !important;
        padding: 10px 12px !important;
        border: 1px solid #4A463A !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        min-height: 40px !important;
        background: #1F1F1F !important;
    }

    .filters-bar button {
        min-height: 40px !important;
        padding: 0 14px !important;
        background: #C9A227 !important;
        color: #F5EFE0 !important;
        border: none !important;
        border-radius: 8px !important;
    }

    /* ========== Tabs ========== */
    .tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        border-bottom: 1px solid #3A3A3A !important;
        margin-bottom: 12px !important;
        background: #1F1F1F !important;
        padding: 0 !important;
    }

    .tabs a {
        flex-shrink: 0 !important;
        padding: 12px 16px !important;
        font-size: 12px !important;
        color: #9A917C !important;
        text-decoration: none !important;
        border-bottom: 2px solid transparent !important;
        white-space: nowrap !important;
    }

    .tabs a.active {
        color: #C9A227 !important;
        border-bottom-color: #C9A227 !important;
    }

    /* ========== Hide Classes ========== */
    .hide-mobile {
        display: none !important;
    }
}

/* ============================================
   TABLETTE (768px - 1024px)
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Header tablette */
    .admin-header {
        height: 60px !important;
        padding: 0 16px !important;
    }

    .admin-header h1 {
        font-size: 18px !important;
    }

    .admin-header .flex.items-center.gap-2 {
        gap: 8px !important;
    }

    .admin-header .icon-btn,
    .admin-header .btn-plus,
    .admin-header button[onclick="toggleNotifications()"],
    .admin-header a[target="_blank"] {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .admin-header .user-menu > div:first-child {
        width: 38px !important;
        height: 38px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-2cols {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .page-header {
        flex-direction: row !important;
        align-items: center !important;
    }

    .admin-header .search-form {
        display: block !important;
    }
}

/* ============================================
   DESKTOP (> 1024px)
   ============================================ */
@media screen and (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }

    main {
        margin-left: 205px !important;
        padding: 20px !important;
        padding-top: 90px !important;
    }
    .sidebar-collapsed main {
        margin-left: 80px !important;
        width:calc(100% - 80px) !important;
    }
    body.sidebar-collapsed header{margin-left:0px!important;left:0px!important;padding-left:85px;}

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

/* ============================================
   FORCE MOBILE LAYOUT - Styles critiques
   Ces styles forcent le layout mobile avec
   très haute spécificité
   ============================================ */
@media screen and (max-width: 768px) {
    /* Forcer le body flex-direction column */
    body.flex {
        flex-direction: column !important;
        display: flex !important;
    }

    /* Forcer main à prendre toute la largeur */
    body.flex main,
    body > main {
        width: 100% !important;
        flex: 1 !important;
        margin-left: 0 !important;
    }

    /* Stats en grille 2x2 */
    .stats-grid.grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Stat cards styles forcés */
    .stat-card,
    [class*="stat-card"],
    div[class*="border-l-4"] {
        padding: 14px !important;
        border-radius: 14px !important;
        background: #1F1F1F !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }

    /* Card content */
    .content-card,
    [class*="content-card"],
    .rounded-2xl {
        border-radius: 14px !important;
        padding: 14px !important;
    }

    /* Grille layout */
    .grid.grid-cols-1,
    .grid.grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Table container */
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Quick actions barre horizontale */
    .quick-actions,
    .flex.gap-3 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
    }

    /* Page header vertical */
    .page-header,
    .flex.justify-between {
        align-items: flex-start !important;
        gap: 5px !important;
    }

    /* Hide on mobile via classe */
    .lg\:hidden,
    .lg\:px-8 {
        display: flex !important;
    }

    span:where(.lg\:hidden) {
        display: none !important;
    }
}