/* ============================================
   MOBILE RESPONSIVE STYLES
   Target: Mobile devices (up to 768px)
   ============================================ */

/* ============================================
   GENERAL STYLES - ALL SCREEN SIZES
   ============================================ */

/* SCROLLBAR WITH DEBUG */
.desktop-table > div::-webkit-scrollbar {
    height: 16px !important;
    width: 16px !important;
    -webkit-appearance: none !important;
}

.desktop-table > div::-webkit-scrollbar-track {
    background: #e5e7eb !important;
    border: 1px solid #cbd5e1 !important;
}

.desktop-table > div::-webkit-scrollbar-thumb {
    background: #2563eb !important;
    border-radius: 4px !important;
    border: 2px solid #e5e7eb !important;
    min-width: 80px !important;
}

.desktop-table > div::-webkit-scrollbar-thumb:hover {
    background: #1d4ed8 !important;
}

.desktop-table > div {
    scrollbar-width: auto !important;
    scrollbar-color: #2563eb #e5e7eb !important;
}

/* Always show scrollbars */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Table container scrollbar */
.overflow-x-scroll {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* ===== USER MANAGEMENT MODAL - ALL SCREENS ===== */

/* Remove gap between header and button */
.max-w-4xl > div > .flex.items-center.justify-between.p-6.pb-4 {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Remove gap between button and table */
.max-w-4xl .flex-1.overflow-y-auto {
    padding-top: 0 !important;
}

.max-w-4xl button.w-full.mb-4 {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

/* Remove gap for store info box */
.max-w-4xl .bg-blue-50.rounded-lg {
    margin-bottom: 0 !important;
}

/* Table should start immediately */
.max-w-4xl table.w-full {
    margin-top: 0 !important;
}

/* ============================================ */

/* Hide desktop table, show mobile cards */
@media (max-width: 768px) {
    
    /* ===== LOGIN SCREEN - PASSWORD EYE ICON ===== */
    
    /* Login screen container */
    .min-h-screen.flex.items-center.justify-center {
        padding: 16px !important;
    }
    
    .min-h-screen .max-w-md {
        max-width: 100% !important;
        padding: 20px !important;
    }
    
    /* Login title */
    .min-h-screen .text-6xl {
        font-size: 48px !important;
    }
    
    .min-h-screen .text-3xl {
        font-size: 24px !important;
    }
    
    /* Password field with eye icon */
    .relative input[type="password"],
    .relative input[type="text"] {
        padding-right: 12px !important;
        padding-left: 40px !important;
    }
    
    .relative button {
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%);
    }
    
    .relative button svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* ===== STATISTICS CARDS - MOBILE ===== */
    
    /* ONLY statistics cards in ONE ROW - very specific selector */
    .flex.justify-center.mb-4 > .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;  /* 3 בשורה אחת! */
        gap: 4px !important;
        width: 100% !important;
        padding: 0 8px !important;
        display: grid !important;
    }
    
    /* Statistics cards - super compact */
    .flex.justify-center.mb-4 > .grid.grid-cols-3 > div {
        min-width: auto !important;
        padding: 6px 3px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Statistics text - very small */
    .flex.justify-center.mb-4 > .grid.grid-cols-3 .text-sm {
        font-size: 8px !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    
    /* Statistics numbers - compact */
    .flex.justify-center.mb-4 > .grid.grid-cols-3 .text-3xl {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
    
    /* Stats wrapper - minimal space */
    .flex.justify-center.mb-4 {
        padding: 0 !important;
        margin-bottom: 6px !important;

    }
    
    /* ===== GENERAL ===== */
    body {
        font-size: 14px;
        overflow-x: hidden;
    }
    
    /* Prevent horizontal scroll on body */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Main container - remove side padding on mobile */
    .min-h-screen.bg-gray-50 {
        padding: 0 !important;
    }
    
    /* Max-width container */
    .max-w-\\[98vw\\] {
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Reduce padding on mobile */
    .p-6 {
        padding: 0.75rem !important;
    }
    
    .p-8 {
        padding: 1rem !important;
    }
    
    .p-4 {
        padding: 0.5rem !important;
    }
    
    .p-3 {
        padding: 0.4rem !important;
    }
    
    .py-20 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Reduce margin */
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    
    .mb-8 {
        margin-bottom: 1rem !important;
    }
    
    /* All buttons smaller */
    button {
        font-size: 13px !important;
    }
    
    button:not(.mobile-campaign-actions button):not(.mobile-filter-button) {
        padding: 8px 14px !important;
    }
    
    /* ===== HEADER & NAVIGATION ===== */
    
    /* Main sticky header - reduce padding and margins */
    .sticky.top-0.z-50.bg-white.rounded-lg.shadow-md {
        padding: 12px 8px !important;
        margin-bottom: 12px !important;
        border-radius: 0 !important;
    }
    
    /* Header title */
    .sticky.top-0.z-50.bg-white h1 {
        font-size: 20px !important;
    }
    
    /* Header buttons */
    .sticky.top-0.z-50.bg-white button {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    /* Header greeting box */
    .sticky.top-0.z-50.bg-white .bg-gray-100 {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    /* Reduce gap between elements */
    .sticky.top-0.z-50.bg-white .gap-4 {
        gap: 8px !important;
    }
    
    .sticky.top-0.z-50.bg-white .gap-3 {
        gap: 6px !important;
    }
    
    .mobile-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 10px 12px;
    }
    
    .mobile-header .text-xs {
        font-size: 10px !important;
    }
    
    .mobile-header .font-bold {
        font-size: 13px !important;
    }
    
    .mobile-header button {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    /* Store selector dropdown */
    .mobile-store-selector {
        width: 100%;
        font-size: 14px;
        padding: 8px;
    }
    
    /* ===== SEARCH & FILTERS - 2 ROWS LAYOUT ===== */
    .mobile-search-filters-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        background: white;
        border-bottom: 1px solid #e5e7eb;
    }
    
    /* Row 1: Search bar (full width) */
    .mobile-search-row {
        display: flex;
        width: 100%;
    }
    
    .mobile-search-row input {
        flex: 1;
        padding: 10px 14px !important;
        font-size: 15px !important;
        border-radius: 6px !important;
        border: 1px solid #d1d5db !important;
    }
    
    /* Row 2: Filter buttons (compact) */
    .mobile-filters-row {
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-filter-button {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
        white-space: nowrap;
        min-width: auto !important;
        height: 32px !important;
        flex-shrink: 0;
    }
    
    .mobile-filter-button select {
        padding: 4px 8px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
        height: 32px !important;
        border: 1px solid #d1d5db;
    }
    
    /* Hide scrollbar but keep functionality */
    .mobile-filters-row::-webkit-scrollbar {
        display: none;
    }
    
    /* Action buttons - stack vertically */
    .mobile-action-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .mobile-action-buttons button {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }
    
    /* Mobile cards section */
    .mobile-cards {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* ===== EMPTY STATES & MESSAGES ===== */
    .mobile-empty-state {
        padding: 40px 20px;
        text-align: center;
    }
    
    .mobile-empty-state .text-6xl {
        font-size: 2.5rem !important; /* Instead of 3.75rem */
    }
    
    .mobile-empty-state .text-xl {
        font-size: 1rem !important; /* Instead of 1.25rem */
    }
    
    /* ===== GENERAL TEXT SIZES ===== */
    .mobile-text-sm {
        font-size: 11px !important;
    }
    
    .mobile-text-base {
        font-size: 13px !important;
    }
    
    .mobile-text-lg {
        font-size: 15px !important;
    }
    
    .mobile-text-xl {
        font-size: 17px !important;
    }
    
    .mobile-text-2xl {
        font-size: 20px !important;
    }
    
    .mobile-text-3xl {
        font-size: 24px !important;
    }
    
    /* Override all large text in mobile */
    h1, h2, h3 {
        font-size: 18px !important;
    }
    
    h4, h5 {
        font-size: 15px !important;
    }
    
    .text-3xl {
        font-size: 20px !important;
    }
    
    .text-2xl {
        font-size: 18px !important;
    }
    
    .text-xl {
        font-size: 16px !important;
    }
    
    .text-lg {
        font-size: 14px !important;
    }
    
    .text-6xl {
        font-size: 2.5rem !important;
    }
    
    .text-5xl {
        font-size: 2rem !important;
    }
    
    .text-4xl {
        font-size: 1.75rem !important;
    }
    .mobile-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .mobile-stat-card {
        padding: 8px;
        font-size: 11px;
    }
    
    .mobile-stat-card .stat-value {
        font-size: 16px;
        font-weight: 700;
    }
    
    .mobile-stat-card .text-xs {
        font-size: 10px !important;
    }
    
    /* ===== TABLE TO CARDS CONVERSION ===== */
    .desktop-table {
        display: none !important;
    }
    
    .mobile-cards {
        display: block !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .mobile-campaign-card {
        background: white;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 8px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        border-right: 3px solid #3b82f6;
        position: relative !important;
    }
    
    .mobile-campaign-card.completed {
        border-right-color: #10b981;
        background: #f0fdf4;
    }
    
    .mobile-campaign-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .mobile-campaign-title {
        font-size: 14px;
        font-weight: 700;
        color: #1f2937;
        flex: 1;
        line-height: 1.3;
    }
    
    .mobile-campaign-status {
        padding: 3px 8px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        margin-right: 6px;
    }
    
    .mobile-campaign-status.open {
        background: #dbeafe;
        color: #1e40af;
    }
    
    .mobile-campaign-status.closed {
        background: #d1fae5;
        color: #065f46;
    }
    
    .mobile-campaign-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .mobile-detail-item {
        display: flex;
        flex-direction: column;
    }
    
    .mobile-detail-label {
        font-size: 10px;
        color: #6b7280;
        margin-bottom: 2px;
        font-weight: 500;
    }
    
    .mobile-detail-value {
        font-size: 13px;
        color: #111827;
        font-weight: 600;
    }
    
    .mobile-campaign-actions {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }
    
    .mobile-campaign-actions button {
        flex: 1;
        min-width: 70px;
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 4px;
        font-weight: 500;
    }
    
    /* ===== MODALS - COMPREHENSIVE MOBILE FIX ===== */
    
    /* All modals full screen on mobile */
    .fixed.inset-0 > div:not(.mobile-bottom-nav) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Modal overlay - no padding */
    .mobile-modal-overlay {
        padding: 0 !important;
    }
    
    /* Generic modal */
    .mobile-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* All modal headers - sticky and compact */
    .fixed.inset-0 h2,
    .fixed.inset-0 h3 {
        font-size: 18px !important;
        padding: 12px !important;
    }
    
    .mobile-modal-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        padding: 10px !important;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .mobile-modal-header h2,
    .mobile-modal-header h3 {
        font-size: 16px !important;
        font-weight: 700;
    }
    
    /* Modal content - scrollable with proper height */
    .mobile-modal-content {
        padding: 10px !important;
        overflow-y: auto;
        height: calc(100vh - 60px) !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Tables inside modals - horizontal scroll */
    .fixed.inset-0 table {
        min-width: 600px;
    }
    
    .fixed.inset-0 .overflow-y-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Table wrapper for horizontal scroll */
    .fixed.inset-0 table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .fixed.inset-0 thead,
    .fixed.inset-0 tbody,
    .fixed.inset-0 tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    
    /* Table headers - dark background */
    .fixed.inset-0 thead {
        background: #111827 !important;
        color: white !important;
    }
    
    .fixed.inset-0 thead th {
        background: #111827 !important;
        color: white !important;
        font-weight: 600;
        padding: 8px !important;
        font-size: 13px !important;
    }
    
    /* Reduce padding everywhere in modals */
    .fixed.inset-0 .p-6 {
        padding: 10px !important;
    }
    
    .fixed.inset-0 .p-4 {
        padding: 8px !important;
    }
    
    .fixed.inset-0 .p-3 {
        padding: 6px !important;
    }
    
    .fixed.inset-0 .mb-6 {
        margin-bottom: 12px !important;
    }
    
    .fixed.inset-0 .mb-4 {
        margin-bottom: 10px !important;
    }
    
    .fixed.inset-0 .gap-4 {
        gap: 8px !important;
    }
    
    /* Buttons in modals */
    .fixed.inset-0 button {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    
    /* Input fields in modals */
    .fixed.inset-0 input,
    .fixed.inset-0 select,
    .fixed.inset-0 textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 10px !important;
    }
    
    /* Labels in modals */
    .fixed.inset-0 label {
        font-size: 13px !important;
    }
    
    /* Checkbox containers */
    .fixed.inset-0 .space-y-2 {
        gap: 6px !important;
    }
    
    .mobile-modal-footer {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 12px;
        border-top: 1px solid #e5e7eb;
    }
    
    .mobile-modal-footer button {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        margin-bottom: 6px;
        border-radius: 4px;
    }
    
    /* ===== SPECIFIC MODALS OVERRIDE ===== */
    
    /* User Management Modal */
    .max-w-4xl {
        max-width: 100vw !important;
    }
    
    /* Campaign Modal */
    .max-w-6xl {
        max-width: 100vw !important;
    }
    
    /* Permissions Modal */
    .max-w-2xl {
        max-width: 100vw !important;
    }
    
    /* All max-w classes */
    .max-w-xl,
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl,
    .max-w-5xl,
    .max-w-6xl,
    .max-w-7xl {
        max-width: 100vw !important;
        margin: 0 !important;
    }
    
    /* Ensure full height for modal containers */
    .flex.flex-col {
        max-height: 100vh !important;
    }
    
    /* Scrollable content area */
    .flex-1.overflow-y-auto {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 120px) !important;
    }
    
    /* If content has horizontal scroll */
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ===== GANTT CHART - MOBILE ===== */
    
    /* Gantt buttons - smaller on mobile */
    .bg-gray-100.p-1.rounded-lg {
        padding: 2px !important;
    }
    
    .bg-gray-100.p-1.rounded-lg button {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    /* Navigation arrows - smaller */
    .flex.gap-2 button {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
    
    /* Gantt legend - 2 columns on mobile */
    .gantt-legend {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }
    
    .gantt-legend > div {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        font-size: 11px !important;
    }
    
    .gantt-legend .w-3 {
        width: 10px !important;
        height: 10px !important;
    }
    
    #gantt-chart-container {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 200px);
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin: 10px;
    }
    
    #gantt-chart-container table {
        min-width: 800px;
        font-size: 11px;
    }
    
    /* Gantt table headers - make dates visible */
    #gantt-chart-container th {
        padding: 6px 4px !important;
        font-size: 10px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        min-width: 50px !important;
    }
    
    #gantt-chart-container td {
        padding: 4px 2px !important;
        font-size: 10px !important;
    }
    
    /* Arrows in Gantt */
    #gantt-chart-container .text-xs {
        font-size: 14px !important;
    }
    
    /* ===== CAMPAIGN MODAL - SOCIAL NETWORKS ===== */
    
    /* Social networks grid - make smaller on mobile - NOT statistics */
    .fixed.inset-0 .grid.grid-cols-3:not(.flex.justify-center.mb-4 > .grid) > div:has(input[type="checkbox"]) {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    
    /* Alternative - target parent with specific content */
    div:has(> label:has(input[type="checkbox"])) {
        padding: 6px 8px !important;
    }
    
    .grid.grid-cols-3 input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
    }
    
    .grid.grid-cols-3 span {
        font-size: 11px !important;
    }
    
    /* Social network delete buttons */
    .grid.grid-cols-3 > div > button,
    .grid.grid-cols-3 button[title="מחק רשת"] {
        padding: 2px 4px !important;
        font-size: 14px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    
    /* Make gap smaller for social networks */
    .grid.grid-cols-3.gap-2:not(.flex.justify-center.mb-4 > .grid) {
        gap: 6px !important;
    }
    
    /* ===== USER MANAGEMENT MODAL - COMPLETE MOBILE REDESIGN ===== */
    
    /* Modal container - full screen */
    .max-w-4xl {
        border-radius: 0 !important;
    }
    
    /* Header - ZERO bottom padding */
    .max-w-4xl .p-6.pb-4,
    .max-w-4xl > div > .p-6.pb-4 {
        padding: 10px 12px 0 12px !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }
    
    .max-w-4xl h2 {
        font-size: 18px !important;
        margin: 0 !important;
    }
    
    /* Content area - ZERO padding */
    .max-w-4xl .p-4.pt-3,
    .max-w-4xl .flex-1.overflow-y-auto {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Add user button - directly under header */
    .max-w-4xl .mb-4,
    .max-w-4xl button.w-full.mb-4 {
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    /* Store info box - REMOVE COMPLETELY or make it part of table */
    .max-w-4xl .mb-3,
    .max-w-4xl .bg-blue-50 {
        display: none !important;  /* Hide on mobile - takes too much space */
    }
    
    /* Table container - with horizontal scroll */
    .max-w-4xl .overflow-y-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Table - full width with scroll */
    .max-w-4xl table {
        margin: 0 !important;
        width: 100% !important;
        min-width: 600px !important;  /* Force horizontal scroll if needed */
        border-collapse: collapse !important;
    }
    
    /* Table header - STICKY under modal header */
    .max-w-4xl thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        background: #111827 !important;
    }
    
    .max-w-4xl thead th {
        padding: 8px 4px !important;
        font-size: 11px !important;
        background: #111827 !important;
        color: white !important;
        white-space: nowrap !important;
        position: sticky !important;
        top: 0 !important;
    }
    
    /* Table cells - compact */
    .max-w-4xl tbody td {
        padding: 6px 4px !important;
        font-size: 10px !important;
        vertical-align: top !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    /* Username column */
    .max-w-4xl tbody td:first-child {
        font-weight: 600 !important;
        white-space: nowrap !important;
        min-width: 80px !important;
    }
    
    /* Stores list - very small */
    .max-w-4xl tbody td .text-xs {
        font-size: 9px !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
    }
    
    /* Permissions column - scrollable */
    .max-w-4xl tbody td:nth-child(2) {
        max-width: 200px !important;
        overflow-y: auto !important;
        max-height: 150px !important;
    }
    
    .max-w-4xl tbody td:nth-child(2) > div {
        font-size: 9px !important;
        line-height: 1.3 !important;
        padding: 1px 0 !important;
        white-space: nowrap !important;
    }
    
    /* Buttons column */
    .max-w-4xl tbody td:last-child {
        white-space: nowrap !important;
    }
    
    /* Buttons in table - very small */
    .max-w-4xl tbody button,
    .max-w-4xl tbody span {
        padding: 3px 6px !important;
        font-size: 10px !important;
        margin: 2px !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
    
    /* ===== CAMPAIGN TABLE - MOBILE ===== */
    .desktop-table {
        margin: 10px !important;
        border-radius: 8px !important;
    }
    
    .desktop-table > div {
        max-height: calc(100vh - 300px) !important;
    }
    
    .campaign-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 10px;
    }
    
    table.campaigns-table {
        min-width: 1200px;
        font-size: 12px;
    }
    
    table.campaigns-table th,
    table.campaigns-table td {
        padding: 6px !important;
        font-size: 11px !important;
    }
    
    /* Table headers in main table */
    .desktop-table thead th {
        font-size: 11px !important;
        padding: 8px 4px !important;
        min-width: 60px !important;
    }
    
    .desktop-table tbody td {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
    
    /* Action buttons in table */
    .desktop-table button {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    
    /* ===== REPORTS - MOBILE ===== */
    .reports-container {
        padding: 10px !important;
    }
    
    .reports-container table {
        overflow-x: auto;
        display: block;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ===== INFLUENCERS - MOBILE ===== */
    .influencers-container {
        padding: 10px !important;
    }
    
    .influencers-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ===== FORMS ===== */
    .mobile-form-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }
    
    .mobile-form-label {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
    }
    
    .mobile-checkbox {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* ===== TABS ===== */
    .mobile-tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-tab {
        display: inline-block;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    /* ===== USER MANAGEMENT ===== */
    .mobile-user-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .mobile-user-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    
    .mobile-user-name {
        font-size: 16px;
        font-weight: 700;
    }
    
    .mobile-user-actions {
        display: flex;
        gap: 4px;
        margin-top: 12px;
    }
    
    .mobile-user-actions button {
        flex: 1;
        padding: 6px 8px;
        font-size: 11px;
        border-radius: 4px;
    }
    
    /* ===== STORE MANAGEMENT ===== */
    .mobile-store-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* ===== GANTT CHART ===== */
    .mobile-gantt-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-gantt-card {
        background: white;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    /* ===== REPORTS ===== */
    .mobile-report-section {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* ===== INFLUENCERS ===== */
    .mobile-influencer-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* ===== FILTERS ===== */
    .mobile-filters {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .mobile-filter-toggle {
        width: 100%;
        padding: 12px;
        background: #f3f4f6;
        border-radius: 8px;
        font-weight: 600;
        margin-bottom: 12px;
    }
    
    /* ===== FLOATING ACTION BUTTON ===== */
    .mobile-fab {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #3b82f6;
        color: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        z-index: 40;
    }
    
    /* ===== PERMISSIONS TABLE ===== */
    .mobile-permissions-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .mobile-permission-item {
        padding: 12px;
        background: #f9fafb;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .mobile-permission-item input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }
    
    .mobile-permission-label {
        flex: 1;
        font-size: 14px;
    }
    
    /* ===== SEARCH ===== */
    .mobile-search {
        position: sticky;
        top: 0;
        background: white;
        padding: 12px;
        z-index: 10;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .mobile-search input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
    }
    
    /* ===== BOTTOM NAVIGATION ===== */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-around;
        padding: 6px 0;
        z-index: 50;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    }
    
    .mobile-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4px 8px;
        font-size: 10px;
        color: #6b7280;
        text-decoration: none;
    }
    
    .mobile-bottom-nav-item.active {
        color: #3b82f6;
    }
    
    .mobile-bottom-nav-icon {
        font-size: 20px;
        margin-bottom: 2px;
    }
    
    /* ===== HIDE DESKTOP ELEMENTS ===== */
    .desktop-only {
        display: none !important;
    }
    
    /* ===== SHOW MOBILE ELEMENTS ===== */
    .mobile-only {
        display: block !important;
    }
    
    .mobile-search-filters-container {
        display: flex !important;
    }
    
    /* ===== SCROLLBAR ===== */
    .mobile-scroll::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    
    .mobile-scroll::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 4px;
    }
    
    /* ===== LOADING SPINNER ===== */
    .mobile-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
        font-size: 18px;
    }
    
    /* ===== TOAST NOTIFICATIONS ===== */
    .mobile-toast {
        position: fixed;
        bottom: 80px;
        left: 16px;
        right: 16px;
        background: #1f2937;
        color: white;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 60;
    }
    
    /* ===== PULL TO REFRESH ===== */
    .mobile-pull-refresh {
        display: flex;
        justify-content: center;
        padding: 20px;
        color: #6b7280;
    }
}

/* ============================================
   TABLET (768px - 1024px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .mobile-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .mobile-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   DESKTOP (above 768px)
   ============================================ */
@media (min-width: 769px) {
    /* Desktop table scrollable wrapper - BOTH scrollbars on wrapper */
    .desktop-table-wrapper {
        overflow: auto !important;  /* Both horizontal AND vertical scroll */
        height: calc(100vh - 300px) !important;  /* Fixed height - forces scroll */
        max-height: calc(100vh - 300px) !important;
        position: relative !important;
        width: 100% !important;
        border: 2px solid #d1d5db !important;
        border-radius: 8px !important;
        margin-top: 20px !important;
        background: white !important;
    }
    
    /* Force table to always be wider - horizontal scrollbar ALWAYS visible */
    .desktop-table table {
        min-width: 2200px !important;
    }
    
    /* Allow normal page scrolling */
    html {
        overflow-x: hidden !important;
    }
    
    body {
        overflow-x: hidden !important;
        min-height: 100vh !important;
    }
    
    /* Scrollbar styling - BOTH scrollbars on wrapper */
    .desktop-table-wrapper::-webkit-scrollbar {
        height: 20px !important;  /* Horizontal - LARGE */
        width: 16px !important;   /* Vertical - LARGE */
    }
    
    .desktop-table-wrapper::-webkit-scrollbar-track {
        background: #e5e7eb !important;
        box-shadow: inset 0 0 2px rgba(0,0,0,0.1) !important;
    }
    
    .desktop-table-wrapper::-webkit-scrollbar-thumb {
        background: #6b7280 !important;
        border-radius: 8px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        border: 3px solid #e5e7eb !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    
    .desktop-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: #374151 !important;
        border: 3px solid #d1d5db !important;
    }
    
    .desktop-table-wrapper::-webkit-scrollbar-thumb:active {
        background: #1f2937 !important;
    }
    
    .desktop-table-wrapper::-webkit-scrollbar-corner {
        background: #e5e7eb !important;
        border: 1px solid #d1d5db !important;
    }
    
    /* Firefox scrollbar */
    .desktop-table-wrapper {
        scrollbar-width: auto !important;
        scrollbar-color: #6b7280 #e5e7eb !important;
    }

    .min-h-screen {
        overflow-x: visible !important;
        min-height: 100vh !important;
    }
    
    .mobile-cards {
        display: none !important;
    }
    
    .desktop-table {
        display: table !important;
        margin-top: 0 !important;  /* Remove margin since wrapper has it */
    }
    
    /* Gantt monthly-vertical scroll styling - same as table wrapper */
    .gantt-scroll::-webkit-scrollbar {
        height: 20px !important;  /* Horizontal - LARGE */
        width: 16px !important;   /* Vertical - LARGE */
    }
    
    .gantt-scroll::-webkit-scrollbar-track {
        background: #e5e7eb !important;
        box-shadow: inset 0 0 2px rgba(0,0,0,0.1) !important;
    }
    
    .gantt-scroll::-webkit-scrollbar-thumb {
        background: #6b7280 !important;
        border-radius: 8px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        border: 3px solid #e5e7eb !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    
    .gantt-scroll::-webkit-scrollbar-thumb:hover {
        background: #374151 !important;
        border: 3px solid #d1d5db !important;
    }
    
    .gantt-scroll::-webkit-scrollbar-thumb:active {
        background: #1f2937 !important;
    }
    
    .gantt-scroll::-webkit-scrollbar-corner {
        background: #e5e7eb !important;
        border: 1px solid #d1d5db !important;
    }
    
    .gantt-scroll {
        scrollbar-width: auto !important;
        scrollbar-color: #6b7280 #e5e7eb !important;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    .mobile-fab {
        display: none !important;
    }
    
    .mobile-bottom-nav {
        display: none !important;
    }
}