/* ========================================
   Mobile Responsive Styles
   Dashboard Colab - Consumer Workflow
   ======================================== */

/* Step 3: File structure created */

/* Step 5: Navigation Styles */
@media (max-width: 767px) {
    /* Navbar improvements */
    .navbar-nav .nav-item {
        padding: 4px 0;
    }

    .navbar-nav .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px 16px;
        font-size: 16px;
    }

    /* Dropdown menu optimization */
    .settings-dropdown .dropdown-menu {
        width: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }

    .settings-dropdown .dropdown-item {
        min-height: 52px;
        padding: 14px 20px;
        font-size: 16px;
    }
}

/* Step 6: Touch Target Base Styles (All Viewports) */

/* Minimum touch target size - WCAG 2.1 Level AA */
a, button, input, select, textarea {
    min-height: 44px;
}

/* Icon-only buttons need larger click area */
button:not(:has(span:not(.spinner-border))):not(:has(i + *)) {
    min-width: 44px;
    min-height: 44px;
}

/* Ensure padding and min-height for comfortable tapping */
.btn {
    min-height: 44px;
    padding: 12px 16px;
}

.nav-link {
    min-height: 44px;
    padding: 12px 16px;
}

/* Step 8: Power BI Embed Container Styles */
@media (max-width: 767px) {
    /* Adjust embed container for mobile browser chrome */
    .embed-container {
        height: calc(100vh - 120px) !important;
    }

    .report-container {
        height: 100% !important;
    }

    /* Report navigation buttons - stack vertically */
    #reportButtons {
        flex-direction: column !important;
        padding: 12px;
    }

    #reportButtons p {
        margin-bottom: 8px !important;
    }

    #reportButtons button {
        width: 100%;
        margin: 6px 0 !important;
        min-height: 48px;
        font-size: 16px;
    }

    /* Persona selector - stack vertically */
    #personaForm {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px;
        width: 100%;
    }

    #personaForm label {
        margin-bottom: 8px;
        text-align: center;
    }

    #personaForm select {
        width: 100% !important;
        margin-bottom: 12px;
        min-height: 48px;
        font-size: 16px;
    }

    #personaForm button {
        width: 100%;
        min-height: 48px;
    }

    /* Step 13: Modal Optimization */

    .modal-lg {
        /* Make large modals fullscreen on mobile */
        max-width: 100% !important;
        margin: 0 !important;
    }

    .modal-lg .modal-content {
        height: 100vh;
        border-radius: 0 !important;
    }

    .modal-lg .modal-body {
        /* Scrollable content area */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;  /* iOS momentum scrolling */
    }

    /* Step 15: Form Input Optimization */

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        min-height: 48px;
        font-size: 16px;  /* Prevent iOS zoom on focus */
    }

    textarea {
        min-height: 120px;
    }

    /* Feedback button */
    #feedbackModalTrigger {
        width: calc(100% - 24px);
        margin: 12px;
        min-height: 56px;
    }
}

/* Step 17: iOS Specific Fixes */

@supports (-webkit-touch-callout: none) {
    /* Fix iOS Safari address bar height issues */
    .embed-container {
        height: -webkit-fill-available;
    }

    /* Prevent iOS text size adjustment */
    body {
        -webkit-text-size-adjust: 100%;
    }
}

/* Prevent double-tap zoom on buttons and links */
button, a {
    touch-action: manipulation;
}

/* Landscape orientation optimizations */
@media (max-width: 767px) and (orientation: landscape) {
    .embed-container {
        height: calc(100vh - 60px) !important;
    }

    /* Hide report buttons in landscape for more space */
    #reportButtons {
        display: none;
    }
}