/* Mobile responsive CSS for track.dracoxlux.com admin pages */
@media (max-width: 768px) {
    /* Main content area - offset for hidden sidebar */
    .main-content, main, [class*="ml-64"], [class*="ml-[256px]"] {
        margin-left: 0 !important;
        padding: 16px 12px !important;
    }

    /* Cards grid - stack on mobile */
    .grid, [class*="grid-cols"] {
        grid-template-columns: 1fr !important;
    }

    /* Tables - horizontal scroll */
    .overflow-x-auto, table {
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    /* Form groups - stack on mobile */
    .form-group, [class*="flex"][class*="gap"] {
        flex-direction: column;
    }

    /* Modal - full width on mobile */
    .modal-content, [class*="max-w-"], [role="dialog"] {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    /* Button groups */
    .btn-group, [class*="flex"][class*="gap-2"] {
        flex-wrap: wrap;
    }

    /* Stats cards */
    .stats-grid, [class*="grid-cols-4"], [class*="grid-cols-3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Hide desktop-only elements */
    .desktop-only, [class*="hidden md:block"] {
        display: none !important;
    }

    /* Font size adjustments */
    h1, .text-2xl, .text-3xl {
        font-size: 1.25rem !important;
    }

    /* Search inputs - full width */
    input[type="text"], input[type="search"], input[type="date"], select {
        width: 100% !important;
    }

    /* Action buttons - smaller on mobile */
    .btn, button {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    /* Pagination */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .stats-grid, [class*="grid-cols-2"] {
        grid-template-columns: 1fr !important;
    }

    body {
        font-size: 14px;
    }
}