/* Mobile Responsive Fixes for Admin Panel */

@media (max-width: 768px) {
    /* 1. Make all tables scrollable horizontally */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* 2. Adjust common container paddings */
    .p-6, .p-8, .p-10 {
        padding: 1rem !important; /* Force smaller padding */
    }

    /* 3. Stack flex containers that shouldn't be side-by-side on mobile */
    .flex.flex-row {
        flex-direction: column;
    }
    
    /* Exception: Keep small toolbars or icons in row */
    .flex.flex-row.items-center.justify-between, 
    .flex.flex-row.gap-2 {
        flex-direction: row; /* Keep these side-by-side if possible, or adjust specific classes if known */
    }

    /* 4. Fix sidebar/navigation if it takes up too much space (Assuming standard layout) */
    /* This might need specific targeting based on React class names which are hashed, 
       but generic structure targeting might help */
    
    /* 5. Adjust font sizes for better readability */
    body {
        font-size: 14px;
    }
    
    h1, h2 {
        font-size: 1.25rem !important;
    }

    /* 6. Fix Form Inputs */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        width: 100% !important;
    }
    
    /* 7. Hide non-essential elements if feasible (requires specific analysis) */
}

/* Scrollbar styling for tables to make it obvious they scroll */
table::-webkit-scrollbar {
    height: 6px;
}
table::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
table::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 3px;
}