/* --- 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;
    }

    /* Stack table rows as cards when marked for mobile */
    .table-mobile-cards thead {
        display: none;
    }

    .table-mobile-cards tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border-radius: var(--radius-md, 12px);
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
        padding: 0.5rem 0;
    }

    .table-mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.5rem 1rem !important;
        border: none !important;
        text-align: right;
    }

    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted, #64748b);
        text-align: left;
        flex: 1;
    }
}

/* Live region helper for biometric / status announcements */
.ui-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}