/* ═══════════════════════════════════════════════════════════════════
   mobile-responsive.css  —  MyndTek / Data Driven Therapy
   
   Place AFTER MyndTek.css in App.razor so overrides take effect:
   <link rel="stylesheet" href="css/MyndTek.css" />
   <link rel="stylesheet" href="css/mobile-responsive.css" />
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   1. GLOBAL VIEWPORT & OVERFLOW GUARD
   ───────────────────────────────────────────────────────────────── */

html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Dynamic viewport height so the layout fills the screen on mobile
   browsers that show/hide the address bar */
.mt-layout {
    min-height: 100dvh;
}

.mt-content {
    min-height: calc(100dvh - 60px - 48px);
}


/* ─────────────────────────────────────────────────────────────────
   2. HEADER — MOBILE ADJUSTMENTS
   The hamburger toggle is already handled in MainLayout.razor via the
   CSS-only checkbox trick (.nav-toggle-checkbox).  These rules make
   the header items that aren't needed on narrow screens invisible
   so the brand stays readable.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    .mt-header-tagline {
        display: none !important;
    }

    .mt-header-secure-badge {
        display: none !important;
    }

    .mt-header-inner {
        padding: 0 0.75rem;
    }

    .mt-header-name {
        font-size: 1rem;
    }

    .mt-header-logo-mark {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
}


/* ─────────────────────────────────────────────────────────────────
   3. NAV DRAWER — already handled in MainLayout.razor via the
   checkbox/CSS technique.  These rules fill gaps not covered there.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Footer stacks on very small phones */
    .mt-footer-inner {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 0.4rem 0.75rem;
        text-align: center;
    }

    /* Ensure nav links have a comfortable touch target */
    .mt-nav-link {
        min-height: 44px;
        padding: 0.85rem 1.25rem;
    }
}


/* ─────────────────────────────────────────────────────────────────
   4. CONTENT AREA — PADDING & SPACING
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    .mt-content {
        padding: 0.75rem;
        overflow-x: hidden;
    }

    .mt-body-content {
        width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────
   5. AUTH / LOGIN PAGE
   The homepage-container sits inside mt-content.  On mobile we kill
   the centre-vertically approach so the form sits near the top
   instead of leaving a big empty gap above it.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    .homepage-container {
        padding: 0.75rem;
        max-width: 100%;
    }

    /* Auth shell — drop the side-by-side brand panel on narrow screens */
    .mt-auth-shell {
        grid-template-columns: 1fr;
    }

    .mt-auth-brand {
        display: none;
    }

    .mt-auth-form {
        padding: 1.5rem 1rem;
    }

    /* Account page split-panel (AccountPage.razor) */
    .ap-shell {
        grid-template-columns: 1fr;
        margin: -0.75rem;
    }

    .ap-brand-panel {
        padding: 1.5rem 1.25rem;
    }

    .ap-brand-body {
        padding: 1rem 0;
        gap: 0.65rem;
    }

    .ap-brand-points {
        display: none;
    }

    .ap-brand-name {
        font-size: 1.25rem;
    }

    .ap-form-panel {
        padding: 1.5rem 1rem;
        align-items: flex-start;
    }
}


/* ─────────────────────────────────────────────────────────────────
   6. LANDING PAGE (HomePage.razor)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

    .lp-hero {
        grid-template-columns: 1fr;
        padding: 3.5rem 2rem 3rem;
        min-height: auto;
        gap: 2.5rem;
    }

    .lp-hero-content {
        max-width: 100%;
    }

    .lp-mockup-card {
        transform: none;
        max-width: 460px;
        margin: 0 auto;
    }

    .lp-steps {
        grid-template-columns: 1fr;
    }

    .lp-step-connector {
        width: 2px;
        height: 28px;
        background: linear-gradient(180deg, var(--mt-sage-light), transparent);
        margin: 0 0 0 28px;
    }

    .lp-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-why-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .lp-section {
        padding: 3.5rem 2rem;
    }

    .lp-cta-section {
        padding: 4rem 2rem;
    }
}

@media (max-width: 640px) {

    .lp-hero {
        padding: 2.5rem 1.25rem;
    }

    .lp-hero-headline {
        font-size: 2.1rem;
    }

    .lp-feature-grid {
        grid-template-columns: 1fr;
    }

    .lp-btn-primary {
        width: 100%;
        justify-content: center;
    }

    .lp-stat-offset {
        margin-left: 0;
    }

    .lp-section {
        padding: 3rem 1.25rem;
    }

    .lp-cta-section {
        padding: 3.5rem 1.25rem;
    }
}


/* ─────────────────────────────────────────────────────────────────
   7. DASHBOARD PAGE — KPI CARDS & CHART GRIDS
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

    /* Dashboard wrapper max-width reset */
    .fitbit-dashboard,
    .mood-dashboard,
    .assess-dashboard {
        padding: 0.75rem;
        max-width: 100%;
    }

    /* KPI / summary card rows — 2 columns on tablet */
    .kpi-grid,
    .assess-card-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Chart grids — single column */
    .chart-grid,
    .fitbit-chart-grid,
    .mood-chart-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
}

@media (max-width: 540px) {

    /* KPI cards — single column on phones */
    .kpi-grid,
    .assess-card-row {
        grid-template-columns: 1fr !important;
    }

    /* Date range selectors — wrap and shrink */
    .range-selector {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

        .range-selector button {
            font-size: 0.7rem;
            padding: 0.3rem 0.5rem;
        }

    /* Assessment reference / gauge rows */
    .assess-gauge-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .assess-reference-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ─────────────────────────────────────────────────────────────────
   8. APEXCHARTS — PREVENT ZERO-WIDTH RENDER ERRORS ON MOBILE
   The most common cause of the dashboard error on mobile is ApexCharts
   initialising inside a hidden tab or before layout settles, giving it
   a 0px container.  These rules keep containers measurable.
   ───────────────────────────────────────────────────────────────── */

.chart-body {
    min-height: 200px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {

    .apexcharts-canvas {
        max-width: 100% !important;
    }

    /* Reduce toolbar icon size for touch */
    .apexcharts-toolbar {
        top: 2px !important;
        right: 2px !important;
    }

    .apexcharts-menu-icon,
    .apexcharts-pan-icon,
    .apexcharts-zoom-icon,
    .apexcharts-zoomin-icon,
    .apexcharts-zoomout-icon,
    .apexcharts-reset-icon {
        width: 24px !important;
        height: 24px !important;
    }

    /* Axis labels — readable but compact */
    .apexcharts-yaxis-label tspan {
        font-size: 10px !important;
    }

    .apexcharts-xaxis-label tspan {
        font-size: 9px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────
   9. MYNDTEK WIZARD (MoodLog)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    .mt-wizard-page {
        padding: 0.5rem;
    }

    .mt-wizard-shell {
        max-width: 100%;
    }

    /* Step track scrolls horizontally — never wraps */
    .mt-step-track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }

        .mt-step-track::-webkit-scrollbar {
            display: none;
        }

    .mt-step-node {
        flex-shrink: 0;
    }

    .mt-step-label {
        font-size: 0.65rem;
        max-width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mt-step-connector {
        min-width: 14px;
        flex-shrink: 0;
    }

    /* Wizard card body */
    .mt-wizard-card {
        padding: 1rem;
    }

    /* Navigation bar — wrap on very narrow screens */
    .mt-wizard-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .mt-wizard-nav-right {
        flex-wrap: wrap;
    }
}


/* ─────────────────────────────────────────────────────────────────
   10. ASSESSMENT FORMS — LIKERT SCALES (GAD-7, PHQ-9, PCL-5)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    .mt-assessment-shell {
        padding: 0.75rem;
        max-width: 100%;
    }

    /* Stack likert options vertically */
    .mt-likert {
        flex-direction: column;
        gap: 0.4rem;
    }

    .mt-likert-option {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.6rem;
        padding: 0.65rem 0.75rem;
        min-height: 44px; /* iOS minimum touch target */
    }

    .mt-likert-score {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .mt-likert-desc {
        font-size: 0.8rem;
        text-align: left;
    }

    /* Difficulty buttons — full width stack */
    .mt-difficulty-btns {
        flex-direction: column;
        gap: 0.4rem;
    }

    .mt-diff-btn {
        width: 100%;
        min-height: 44px;
        font-size: 0.8rem;
    }

    /* Question cards */
    .mt-question-card {
        padding: 0.875rem;
    }

    .mt-question-text {
        font-size: 0.875rem;
    }
}


/* ─────────────────────────────────────────────────────────────────
   11. HELP & COMPLETION DIALOGS
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Step dots — smaller and wrap cleanly */
    .moodhelp-steps,
    .dhelp-steps {
        flex-wrap: wrap;
        gap: 0.35rem;
        justify-content: center;
    }

    .moodhelp-step-dot,
    .dhelp-step-dot {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }

    /* Mood scale segments — readable on narrow screen */
    .mood-scale-bar {
        height: 26px;
    }

    .mood-scale-segment {
        font-size: 0.55rem;
    }

    /* Field type example grid */
    .field-example-grid {
        grid-template-columns: 1fr;
    }

    /* Completion dialog streak badge */
    .completion-streak {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}


/* ─────────────────────────────────────────────────────────────────
   12. TOUCH-DEVICE ENHANCEMENTS
   Prevents the 300 ms tap delay and sticky :hover states on iOS/Android.
   ───────────────────────────────────────────────────────────────── */

@media (pointer: coarse) {

    button,
    a,
    .mt-likert-option,
    .mt-diff-btn,
    .mt-nav-link,
    .range-selector button,
    .lp-btn-primary,
    .lp-btn-ghost {
        touch-action: manipulation;
    }

        /* Kill hover transforms that "stick" on first tap on iOS */
        .mt-likert-option:hover,
        .lp-feature-card:hover {
            transform: none !important;
            box-shadow: none !important;
        }
}


/* ─────────────────────────────────────────────────────────────────
   13. SAFE-AREA INSETS (iPhone notch / Dynamic Island / home bar)
   ───────────────────────────────────────────────────────────────── */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

    .mt-footer {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .mt-nav-container {
        padding-bottom: env(safe-area-inset-bottom);
    }
}