/* ============================================
   RESPONSIVE UTILITIES
   Global responsive adjustments for Dourfor
   ============================================ */

/* ============================================
   TOUCH TARGET MINIMUM SIZE (44px)
   WCAG 2.5.5 Target Size (Enhanced)
   ============================================ */

/* Buttons and interactive elements */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* MudBlazor component adjustments for mobile */
@media (max-width: 959.95px) {
    /* Icon buttons */
    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Chips as buttons */
    .mud-chip.mud-chip-clickable {
        min-height: 36px;
    }

    /* List items */
    .mud-list-item {
        min-height: 48px;
    }

    /* Nav links */
    .mud-nav-link {
        min-height: 48px;
    }

    /* Menu items */
    .mud-menu-item {
        min-height: 48px;
    }
}

/* ============================================
   CONTAINER ADJUSTMENTS
   ============================================ */

/* Reduce padding on very small screens */
@media (max-width: 400px) {
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Reduce card padding */
    .mud-card-content {
        padding: 12px !important;
    }
}

/* ============================================
   TYPOGRAPHY RESPONSIVE
   ============================================ */

/* Scale down headings on mobile */
@media (max-width: 600px) {
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }

    .mud-typography-h5 {
        font-size: 1.25rem !important;
    }

    .mud-typography-h6 {
        font-size: 1rem !important;
    }
}

/* ============================================
   FORM ELEMENTS MOBILE
   ============================================ */

@media (max-width: 600px) {
    /* Ensure inputs are not too small */
    .mud-input-control {
        min-height: 44px;
    }

    /* Stack form buttons on mobile */
    .form-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .form-actions .mud-button {
        width: 100%;
    }
}

/* ============================================
   DIALOG/MODAL RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
    /* Full-width dialogs on mobile */
    .mud-dialog {
        margin: 16px !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 32px) !important;
    }

    .mud-dialog .mud-dialog-content {
        padding: 16px !important;
    }

    .mud-dialog .mud-dialog-actions {
        padding: 12px 16px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mud-dialog .mud-dialog-actions .mud-button {
        flex: 1;
        min-width: 120px;
    }
}

/* ============================================
   TABLE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Horizontal scroll for tables */
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce padding in table cells */
    .mud-table-cell {
        padding: 8px 12px !important;
    }

    /* Hide less important columns */
    .hide-on-mobile {
        display: none !important;
    }
}

/* ============================================
   GRID ADJUSTMENTS
   ============================================ */

@media (max-width: 600px) {
    /* Force single column on very small screens */
    .force-single-column-xs .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   BOTTOM NAV SAFE AREA
   Prevent content from being hidden by bottom nav
   ============================================ */

@media (max-width: 599.95px) {
    /* Add padding to main content to account for bottom nav */
    .main-content-modern > .mud-container {
        padding-bottom: calc(var(--df-bottom-nav-height, 64px) + var(--df-spacing-lg, 24px)) !important;
    }

    /* Exception for messages page which handles its own height */
    .main-content-modern:has(.messages-page) > .mud-container {
        padding-bottom: 0 !important;
    }
}

/* ============================================
   DRAWER ADJUSTMENTS
   ============================================ */

@media (max-width: 959.95px) {
    /* Ensure drawer doesn't cover too much on tablets */
    .mud-drawer {
        max-width: 85vw !important;
    }
}

/* ============================================
   CARD LAYOUTS
   ============================================ */

@media (max-width: 600px) {
    /* Full-width cards on mobile */
    .card-responsive {
        margin-left: -12px;
        margin-right: -12px;
        border-radius: 0 !important;
    }

    /* Reduce card elevation on mobile for cleaner look */
    .mud-card {
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }
}

/* ============================================
   SPACING UTILITIES RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
    .pa-4-xs {
        padding: 16px !important;
    }

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

    .pa-2-xs {
        padding: 8px !important;
    }

    .mx-0-xs {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

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

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus visible for all interactive elements */
:focus-visible {
    outline: 2px solid var(--df-primary, #2563eb) !important;
    outline-offset: 2px !important;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--df-primary);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    transition: top 0.2s;
}

.skip-to-content:focus {
    top: 0;
}

/* Ensure sufficient color contrast for disabled elements */
.mud-input-control.mud-disabled .mud-input-label {
    opacity: 0.6 !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .bottom-nav,
    .mud-drawer,
    .mud-appbar,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        background: white !important;
    }
}

/* ============================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce heights in landscape mode on phones */
    .mud-appbar {
        min-height: 48px !important;
    }

    .bottom-nav {
        display: none !important;
    }

    /* Full height for content */
    .messages-page {
        height: calc(100dvh - 48px) !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
    .mud-card,
    .mud-paper {
        border: 2px solid currentColor !important;
    }

    .mud-button {
        border: 2px solid currentColor !important;
    }

    .mud-input-outlined .mud-input-outlined-border {
        border-width: 2px !important;
    }
}