/* ===== Blazor Responsive Breakpoint Utilities ===== */
/* Use these classes to control visibility and layout at different breakpoints */

/* ===== Display Utilities ===== */

/* Extra small screens (< 576px) */
.d-xs-none {
    @media (max-width: 575.98px) {
        display: none !important;
    }
}

.d-xs-block {
    @media (min-width: 576px) {
        display: none !important;
    }
}

/* Small screens (576px - 767px) */
.d-sm-none {
    @media (max-width: 767.98px) {
        display: none !important;
    }
}

.d-sm-block {
    @media (min-width: 768px) {
        display: none !important;
    }
}

/* Medium screens (768px - 991px) */
.d-md-none {
    @media (max-width: 991.98px) {
        display: none !important;
    }
}

.d-md-block {
    @media (min-width: 992px) {
        display: none !important;
    }
}

/* Large screens (992px - 1199px) */
.d-lg-none {
    @media (max-width: 1199.98px) {
        display: none !important;
    }
}

.d-lg-block {
    @media (min-width: 1200px) {
        display: none !important;
    }
}

/* Extra large screens (1200px+) */
.d-xl-none {
    @media (max-width: 1199.98px) {
        display: none !important;
    }
}

.d-xl-block {
    @media (min-width: 1200px) {
        display: none !important;
    }
}

/* ===== Flex Direction Utilities ===== */

/* Stack vertically on mobile, horizontally on desktop */
.flex-column-xs {
    @media (max-width: 575.98px) {
        display: flex !important;
        flex-direction: column !important;
    }
}

.flex-row-md {
    @media (min-width: 768px) {
        display: flex !important;
        flex-direction: row !important;
    }
}

/* ===== Width / Padding Utilities ===== */

/* Full width on mobile, container width on desktop */
.w-mobile-full {
    @media (max-width: 575.98px) {
        width: 100% !important;
    }
}

/* Padding adjustments */
.px-xs {
    @media (max-width: 575.98px) {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

.px-sm {
    @media (min-width: 576px) and (max-width: 767.98px) {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

.px-md {
    @media (min-width: 768px) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ===== Gap / Spacing Utilities ===== */

/* Responsive gap in flex containers */
.gap-xs {
    @media (max-width: 575.98px) {
        gap: 4px !important;
    }
}

.gap-sm {
    @media (min-width: 576px) and (max-width: 767.98px) {
        gap: 8px !important;
    }
}

.gap-md {
    @media (min-width: 768px) {
        gap: 12px !important;
    }
}

.gap-lg {
    @media (min-width: 992px) {
        gap: 16px !important;
    }
}

/* ===== Font Size Utilities ===== */

/* Responsive typography */
.text-xs-sm {
    @media (max-width: 575.98px) {
        font-size: 0.8rem !important;
    }
}

.text-sm-base {
    @media (min-width: 576px) and (max-width: 767.98px) {
        font-size: 0.875rem !important;
    }
}

.text-md-lg {
    @media (min-width: 768px) {
        font-size: 1rem !important;
    }
}

/* ===== Touch-Friendly Sizing ===== */

/* Ensure touch targets are at least 40-44px */
.touch-target-xs {
    @media (max-width: 575.98px) {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 12px !important;
    }
}

.touch-target-sm {
    @media (min-width: 576px) and (max-width: 767.98px) {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 8px 12px !important;
    }
}

/* ===== Mobile-Specific Utilities ===== */

/* Hide on mobile, show on tablet+ */
.hide-mobile {
    @media (max-width: 767.98px) {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile-only {
    @media (min-width: 768px) {
        display: none !important;
    }
}

/* Hide on tablet+, show on mobile */
.hide-tablet-up {
    @media (min-width: 768px) {
        display: none !important;
    }
}

/* ===== Horizontal Scrolling ===== */

/* Enable horizontal scroll on mobile for tables/content */
.scroll-x-mobile {
    @media (max-width: 767.98px) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Layout-Specific Utilities ===== */

/* Stack layout on mobile */
.stack-mobile {
    @media (max-width: 575.98px) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

.grid-mobile-full {
    @media (max-width: 575.98px) {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

.grid-mobile-2 {
    @media (max-width: 575.98px) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }
}

/* ===== Orientation Utilities ===== */

/* Portrait optimizations */
@media (orientation: portrait) {
    .portrait-only {
        display: block !important;
    }
    .landscape-hide {
        display: none !important;
    }
}

/* Landscape optimizations */
@media (orientation: landscape) {
    .landscape-only {
        display: block !important;
    }
    .portrait-hide {
        display: none !important;
    }
}

/* ===== Touch Device Detection ===== */

/* Only show on touch devices */
@media (hover: none) and (pointer: coarse) {
    .touch-only {
        display: block !important;
    }
    .no-touch {
        display: none !important;
    }
}

/* Only show on devices with hover (non-touch) */
@media (hover: hover) and (pointer: fine) {
    .no-touch {
        display: block !important;
    }
    .touch-only {
        display: none !important;
    }
}

/* ===== Misc Utilities ===== */

/* Full viewport height minus app bar */
.vh-mobile {
    @media (max-width: 575.98px) {
        height: calc(100vh - 120px) !important;
    }
}

/* Reduce shadow on mobile */
.shadow-mobile-sm {
    @media (max-width: 767.98px) {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Border radius adjustments */
.rounded-mobile {
    @media (max-width: 575.98px) {
        border-radius: 6px !important;
    }
}