/* ============================================
   MOBILE OPTIMIZATIONS (Ultra-Compact Layout)
   ============================================ */

@media (max-width: 640px) {

    /* Ultra-compact container padding on mobile */
    .container-responsive {
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        padding-top: var(--space-2) !important;
    }

    /* Minimal top margin */
    .mt-5 {
        margin-top: var(--space-3) !important;
    }

    /* Significantly reduce card padding */
    .card-body {
        padding: var(--space-3) !important;
    }

    .card-header {
        padding: var(--space-3) !important;
    }

    /* Minimal spacing between cards */
    .mb-4 {
        margin-bottom: var(--space-2) !important;
    }

    .mb-3 {
        margin-bottom: var(--space-2) !important;
    }

    /* Make gradient headers ultra-compact */
    .card-header.text-white h4,
    .card-header.text-white h5,
    .card-header.text-white h3,
    .card-header.text-white h2 {
        font-size: var(--font-size-base) !important;
        line-height: 1.2 !important;
    }

    /* Tiny badges */
    .badge {
        font-size: 0.6rem !important;
        padding: 1px 4px !important;
    }

    /* Compact search bars */
    .input-group-lg .form-control {
        padding: var(--space-2) !important;
        font-size: var(--font-size-sm) !important;
    }

    .input-group-lg .input-group-text {
        padding: var(--space-2) !important;
    }

    /* Minimal button padding */
    .btn {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--font-size-sm) !important;
    }

    .btn-lg {
        padding: var(--space-2) var(--space-4) !important;
        font-size: var(--font-size-base) !important;
    }

    /* Ultra-compact table cells */
    .table td,
    .table th {
        padding: var(--space-1) !important;
        font-size: var(--font-size-xs) !important;
    }

    /* Smaller icon sizes */
    .card-header i.bi,
    h1 i.bi,
    h2 i.bi,
    h3 i.bi,
    h4 i.bi,
    h5 i.bi {
        font-size: 1rem !important;
    }

    /* Compact empty states */
    .card-body.text-center i.bi {
        font-size: 2rem !important;
    }

    /* Minimal spacing in rows */
    .row.g-3 {
        gap: var(--space-1) !important;
    }

    /* Minimal shadows on mobile */
    .shadow-lg,
    .shadow-md {
        box-shadow: var(--shadow-xs) !important;
    }

    /* No card hover lift on mobile */
    .card:hover {
        transform: none !important;
    }

    /* Compact form labels */
    .form-label {
        margin-bottom: var(--space-1) !important;
        font-size: var(--font-size-xs) !important;
    }

    /* Minimal alert padding */
    .alert {
        padding: var(--space-2) !important;
        font-size: var(--font-size-xs) !important;
    }

    /* Compact form controls */
    .form-control {
        padding: var(--space-2) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Hide scrollbars but keep functionality */
    body {
        overflow-x: hidden;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    body::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .overflow-auto {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .overflow-auto::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================
   END MOBILE OPTIMIZATIONS
   ============================================ */