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

.mobile-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.mobile-scroll-x::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.responsive-auth-card {
  max-width: 500px;
  width: 100%;
}

.responsive-video {
  min-height: 400px;
  object-fit: cover;
}

@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid var(--bs-border-color) !important;
    }
    .border-top-md-0 {
        border-top: 0 !important;
    }
}

@media (max-width: 768px) {
    .responsive-auth-card {
        max-width: 100% !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }
    
    .responsive-video {
        min-height: 50vh !important;
    }

    /* Improve touch targets for bottom nav / buttons */
    .btn-lg {
        min-height: 48px; /* Accessibility standard */
    }

    /* Typography Overrides */
    .mobile-h2 {
        font-size: 1.5rem !important;
    }

    .mobile-display-3 {
        font-size: 2.5rem !important;
    }

    /* Layout Utilities */
    .mobile-d-none {
        display: none !important;
    }
    
    .mobile-mb-3 {
        margin-bottom: 1rem !important;
    }

    /* Gap adjustments */
    .gap-3 {
        gap: 0.75rem !important;
    }
    
    /* Reduce padding in glass panels to save space */
    .glass-panel {
        padding: 1rem !important;
    }
    
    /* Ensure charts have explicit height */
    canvas {
        min-height: 250px;
    }
}