/* Mobile Utilities CSS
   Provides responsive utility classes for mobile-first design.
   Mobile breakpoint: 600px (matches MudBlazor Breakpoint.Sm)
*/

/* Stack horizontal layouts vertically on mobile */
.stack-mobile {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

@media (max-width: 600px) {
    .stack-mobile {
        flex-direction: column;
    }
}

/* Visibility utilities */
.hide-mobile {
    display: block;
}

.show-mobile-only {
    display: none;
}

@media (max-width: 600px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile-only {
        display: block !important;
    }

    .show-mobile-only-flex {
        display: flex !important;
    }
}

/* Mobile padding overrides */
@media (max-width: 600px) {
    .pa-mobile-2 {
        padding: 8px !important;
    }

    .pa-mobile-3 {
        padding: 12px !important;
    }

    .pa-mobile-4 {
        padding: 16px !important;
    }

    .px-mobile-2 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .py-mobile-2 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .mt-mobile-0 {
        margin-top: 0 !important;
    }

    .mb-mobile-2 {
        margin-bottom: 8px !important;
    }

    .gap-mobile-2 {
        gap: 8px !important;
    }
}

/* Full width on mobile */
@media (max-width: 600px) {
    .full-width-mobile {
        width: 100% !important;
    }

    .full-width-mobile .mud-button {
        width: 100%;
    }
}

/* Mobile-specific flex utilities */
@media (max-width: 600px) {
    .flex-wrap-mobile {
        flex-wrap: wrap !important;
    }

    .justify-center-mobile {
        justify-content: center !important;
    }
}

/* Reduce minimum touch targets on mobile while staying accessible */
@media (max-width: 600px) {
    .compact-mobile {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Hide scrollbar on mobile for cleaner look */
@media (max-width: 600px) {
    .hide-scrollbar-mobile::-webkit-scrollbar {
        display: none;
    }

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