/**
 * My Elia — Mobile Responsive Fixes v1
 * Comprehensive mobile audit fixes for all pages.
 * Tested for: iPhone SE (375px), iPhone 14 (390px), iPhone 14 Pro Max (430px), Android (360px)
 *
 * Bottom nav: 64px + env(safe-area-inset-bottom) on screens <= 768px
 */

/* ══════════════════════════════════════════════════════════════════
   1. GLOBAL: Prevent horizontal overflow on ALL pages
══════════════════════════════════════════════════════════════════ */
html {
    overflow-x: hidden;
}

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

/* ══════════════════════════════════════════════════════════════════
   2. GLOBAL: iOS zoom prevention — inputs < 16px trigger auto-zoom
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   3. GLOBAL: Touch target minimum 44x44px (WCAG 2.5.8)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Date navigation buttons (checkin header) — were 36x36 */
    .date-nav-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
    }

    /* Generic small buttons that need bigger targets */
    .topbar-close {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    /* Filter selects */
    .filter-group select {
        min-height: 44px;
    }

    /* Rating pills — ensure sufficient height */
    .rating-pill {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Flow pills — ensure sufficient target */
    .flow-pill {
        min-height: 52px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   4. CHAT PAGE: Critical layout fix for bottom nav
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Use dynamic viewport height (dvh) to account for mobile browser chrome */
    body:has(.chat-container) {
        height: 100dvh;
        height: -webkit-fill-available;
    }

    /* Chat input bar must sit above the bottom nav */
    .input-bar {
        padding-bottom: max(12px, calc(64px + env(safe-area-inset-bottom) + 8px)) !important;
    }

    /* Chat container needs reduced height to not overlap with input + bottom nav */
    .chat-container {
        padding-bottom: 8px !important;
    }

    /* Chat input field — prevent iOS zoom */
    .input-row input {
        font-size: 16px !important;
    }

    /* Suggestion chips — better wrap on small screens */
    .suggestion-chips {
        gap: 6px;
    }

    .suggestion-chip {
        padding: 10px 14px;
        font-size: 13px;
    }

    /* Message bubbles — slightly wider on small screens */
    .message {
        max-width: 90% !important;
    }

    /* Welcome card — tighter padding on mobile */
    .welcome-card {
        padding: 24px 20px;
    }

    /* Upsell card — account for bottom nav */
    .upsell-card {
        padding-bottom: calc(40px + 64px + env(safe-area-inset-bottom)) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   5. CHECKIN PAGE: Save button + bottom nav clearance
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Sticky save button must clear the bottom nav */
    .btn-save {
        bottom: max(80px, calc(64px + env(safe-area-inset-bottom) + 12px)) !important;
    }

    /* Success toast — above save button and bottom nav */
    .success-toast {
        bottom: max(140px, calc(130px + env(safe-area-inset-bottom))) !important;
    }

    /* Body padding — already set by navigation.css, reinforce */
    body:has(.checkin-header) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom) + 80px) !important;
    }

    /* Checkin header — ensure it doesn't stick on top since nav is at bottom */
    .checkin-header {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    /* Post-save choice overlay — pad for bottom nav */
    #postSaveChoice {
        padding-bottom: max(32px, calc(64px + env(safe-area-inset-bottom) + 16px)) !important;
    }

    /* Push modal inner — pad for bottom nav */
    .push-modal-inner {
        padding-bottom: calc(32px + 64px + env(safe-area-inset-bottom)) !important;
    }

    /* Rating pills — on 360px screens, 5 pills in a row is tight */
    .rating-pills {
        gap: 4px !important;
    }

    .rating-pill {
        min-width: 54px !important;
        padding: 8px 4px !important;
        font-size: 11px !important;
    }

    /* Flow pills — ensure they fit on narrow screens */
    .flow-pills {
        gap: 4px !important;
    }

    .flow-pill {
        padding: 8px 2px !important;
        font-size: 10px !important;
    }

    .flow-pill img {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Extra small screens (360px and below) */
@media (max-width: 374px) {
    .rating-pill {
        min-width: 48px !important;
        font-size: 10px !important;
    }

    .flow-pill {
        font-size: 9px !important;
    }

    .flow-pill img {
        width: 28px !important;
        height: 28px !important;
    }

    .pill {
        padding: 7px 10px !important;
        font-size: 12px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   6. DASHBOARD: Layout fixes for small screens
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* NOTE: body padding-bottom for bottom nav is handled by navigation.css
       .main internal padding-bottom is set per-page (80-100px) — do NOT override here */

    /* Stats grid — single column on mobile */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Profile summary grid — 2 columns on mobile is fine, but on tiny screens go to 1 */
    .profile-summary-grid {
        gap: 8px !important;
    }

    /* Phase cards grid — single column on mobile */
    .phase-cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Hero ring — ensure it fits */
    .hero-ring-container .cycle-ring {
        width: min(220px, 60vw) !important;
        height: min(220px, 60vw) !important;
    }

    /* Cycle wheel wrapper — prevent overflow */
    .cycle-wheel-wrapper {
        padding: 0 12px 32px !important;
    }

    .wheel-container {
        width: min(85vw, 320px) !important;
    }

    /* Trial banner — better stacking on small screens */
    #trial-banner {
        flex-wrap: wrap !important;
    }

    /* Protection widget body — tighter padding */
    .prot-body {
        padding: 16px 20px 24px !important;
    }

    .prot-header {
        padding: 20px 20px 0 !important;
    }

    /* BBT chart — ensure horizontal scroll hint */
    .bbt-chart-wrap {
        margin: 0 -8px;
        padding: 16px 8px 0;
    }

    /* Daily summary — full width */
    .daily-summary {
        max-width: 100% !important;
    }

    /* Wellness widget — full width */
    .wellness-widget {
        max-width: 100% !important;
    }

    .wellness-widget-content {
        gap: 14px !important;
    }

    .wellness-widget-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 26px !important;
    }
}

/* Dashboard — extra small screens */
@media (max-width: 374px) {
    .profile-summary-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .profile-summary-value {
        font-size: 18px !important;
    }

    .hero-message {
        font-size: 20px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   7. SETTINGS PAGE: Save section above bottom nav
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .save-section {
        bottom: max(80px, calc(64px + env(safe-area-inset-bottom) + 12px)) !important;
    }

    /* Toggle switch — ensure proper touch area */
    .toggle-switch {
        min-width: 48px;
        min-height: 28px;
    }

    .setting-item {
        padding: 14px 0;
        gap: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   8. BIEN-ETRE PAGE: Grid overflow fix
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Activities grid — prevent overflow from minmax(300px) on small screens */
    .activities-grid {
        grid-template-columns: 1fr !important;
    }

    /* Filter groups — stack vertically */
    .filters-row {
        flex-direction: column !important;
    }

    .filter-group {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Hero section — tighter padding */
    .hero {
        padding: 28px 20px !important;
    }

    .hero h1 {
        font-size: 24px !important;
    }

    /* Daily recommendation — tighter padding */
    .daily-rec {
        padding: 24px 20px !important;
    }

    .daily-rec h2 {
        font-size: 20px !important;
    }

    /* Modal — full screen on mobile */
    .modal.active {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        padding: 24px 20px 20px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   9. CALENDAR PAGE: Day cell touch targets + grid fit
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Calendar top bar — sticky at top (nav is at bottom) */
    .cal-topbar {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    /* Calendar day cells — minimum touch targets */
    .day-cell {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Month navigation buttons */
    .month-nav-btn,
    .cal-nav-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* View toggle buttons — taller touch targets */
    .view-toggle button {
        padding: 10px 16px !important;
        min-height: 40px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   10. MEDICAL PROFILE PAGE: Form layout on mobile
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Medical profile body uses flex center — needs bottom nav padding */
    body:has(.container > .card > .step) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom) + 24px) !important;
    }

    /* Tighter card padding */
    body:has(.step) .card {
        padding: 24px 20px !important;
    }

    /* Chip grid — ensure wrap and spacing */
    .chip-grid {
        gap: 8px !important;
    }

    .chip {
        padding: 10px 14px !important;
        font-size: 13px !important;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Button row — stack on very small screens */
    .btn-row {
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════════════════════════════════════
   11. ONBOARDING PAGE: Better mobile layout
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Onboarding body — don't center vertically on mobile (wastes space) */
    body:has(.step-indicator) {
        justify-content: flex-start !important;
        padding-top: 16px !important;
    }

    /* Symptom chips — ensure wrapping */
    .symptom-chips {
        gap: 8px !important;
    }

    .symptom-chip {
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
    }

    /* Action cards in welcome step */
    .action-card {
        padding: 14px 16px !important;
    }

    .action-card .action-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 28px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   12. PROFESSIONAL EMAIL PAGE: Mobile layout
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Professional email form — full width */
    .email-form-container,
    .report-container {
        max-width: 100% !important;
        padding: 0 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   13. NOTIFICATIONS PAGE: Mobile layout
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .notification-card {
        padding: 16px !important;
    }

    .notification-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .notification-actions button,
    .notification-actions a {
        min-height: 44px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   14. PROGRAMMES PAGE: Card layout
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .programme-card,
    .program-card {
        padding: 20px 16px !important;
    }

    .programme-grid,
    .programs-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   15. ALL MODALS / BOTTOM SHEETS: Mobile safe area
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Bottom sheets — ensure safe-area padding */
    .register-period-sheet,
    .prot-higham-sheet {
        padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)) !important;
    }

    /* Fixed overlays — z-index above bottom nav (500) */
    .register-period-overlay,
    .prot-higham-overlay,
    .upsell-overlay,
    .push-modal,
    .modal {
        z-index: 600 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   16. GLOBAL: Card and content spacing on narrow screens
══════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    /* Reduce side padding for content areas */
    .main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Cards — slightly tighter padding */
    .settings-section,
    .bilans-section {
        padding: 20px 16px !important;
    }

    /* Profile link card */
    .profile-link-card {
        padding: 12px 14px !important;
    }

    /* Chat preview card */
    .chat-preview-card {
        padding: 20px 16px !important;
    }

    .chat-preview-title {
        font-size: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   17. GLOBAL: Text truncation protection
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Prevent long words from overflowing containers */
    .phase-card-text,
    .action-card p,
    .daily-summary-advice,
    .bbt-ai-box,
    .higham-explanation,
    .prot-daily-conclusion,
    .wellness-widget-desc,
    .chat-preview-bubble,
    .msg-bubble p {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }

    /* Ensure long email addresses / URLs don't overflow */
    .setting-label,
    .profile-link-text strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ══════════════════════════════════════════════════════════════════
   18. QUALITE DE VIE PAGE: Questionnaire mobile layout
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* QDV radio/checkbox groups — bigger targets */
    .qdv-option,
    .qol-option {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }

    /* QDV slider — full width */
    .qdv-slider,
    .qol-slider {
        width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   19. EDUCATION / LECON PAGES: Content readability
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .lesson-content,
    .education-content {
        padding: 20px 16px !important;
    }

    .lesson-content img,
    .education-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Programme cards */
    .education-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   20. HISTORIQUE PAGE: Timeline on mobile
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .historique-item,
    .history-item {
        padding: 16px !important;
    }

    .historique-grid,
    .history-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   21. ABONNEMENT PAGE: Pricing cards mobile
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pricing-grid,
    .plans-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .pricing-card,
    .plan-card {
        padding: 24px 20px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   22. BILAN PAGE: Charts on mobile
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .bilan-chart-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .bilan-chart-container svg {
        min-width: 500px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   23. SCORE HIGHAM PAGE: Layout on mobile
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .higham-gauge-svg {
        max-width: 240px !important;
    }

    .higham-gauge-score {
        font-size: 40px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   24. PROFIL PAGE: Cycle summary grid + data rows
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Cycle summary 3-col grid — tighter on mobile */
    .cycle-summary {
        padding: 24px 16px !important;
        gap: 12px !important;
    }

    .cs-value {
        font-size: 24px !important;
    }

    /* Data rows — allow wrapping for long labels */
    .data-row {
        flex-wrap: wrap;
        gap: 4px;
    }

    .data-label {
        max-width: 100% !important;
    }

    .data-value {
        max-width: 100% !important;
    }

    /* Tags — wrap to start */
    .tags {
        justify-content: flex-start !important;
    }

    /* Edit modal — fit mobile viewport */
    .edit-modal-content {
        max-width: calc(100vw - 32px) !important;
        max-height: 90vh !important;
        overflow-y: auto;
    }
}

@media (max-width: 374px) {
    .cs-value {
        font-size: 20px !important;
    }

    .cs-label {
        font-size: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   25. LOGIN/SIGNUP PAGES: Mobile layout
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Auth containers — full width on mobile */
    .auth-container,
    .login-container,
    .signup-container {
        max-width: 100% !important;
        padding: 24px 20px !important;
    }

    .auth-card,
    .login-card,
    .signup-card {
        padding: 28px 20px !important;
        border-radius: 20px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   27. MEDICAL PROFILE PAGE: Mobile-responsive (etapes 1/10 - 10/10)
       - Card padding: compact on very small screens
       - Bottom nav spacing: proper safe-area padding
       - Touch targets: minimum 44px
       - Font size: 16px to prevent iOS auto-zoom
       - Chip grids: wrap gracefully
       - Form layout: full-width inputs
       - Scroll behavior: smooth step transitions
══════════════════════════════════════════════════════════════════ */

/* --- Very small phones (≤375px) --- */
@media (max-width: 375px) {
  .medical-profile-page .card,
  body:not(.has-nav) .card {
    padding: 20px 16px !important;
  }

  .medical-profile-page .step h2,
  .step h2 {
    font-size: 20px !important;
  }

  .medical-profile-page .form-group input,
  .medical-profile-page .form-group select,
  .medical-profile-page .form-group textarea {
    padding: 14px 12px !important;
  }

  .medical-profile-page .chip {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* --- All mobile screens (≤768px) --- */
@media (max-width: 768px) {
  /* Body: reduce padding for more vertical space */
  body {
    padding: 16px 12px calc(80px + env(safe-area-inset-bottom, 20px)) 12px !important;
  }

  /* Container: full width, no horizontal constraints */
  .medical-profile-page .container,
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Card: compact vertical padding, thin horizontal padding */
  .medical-profile-page .card,
  .card {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }

  /* Typography */
  .medical-profile-page .subtitle,
  .subtitle {
    font-size: 14px !important;
  }

  .medical-profile-page .step h2,
  .step h2 {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }

  .medical-profile-page .step p.desc,
  .step p.desc {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Form groups: consistent spacing */
  .medical-profile-page .form-group,
  .form-group {
    margin-bottom: 16px !important;
  }

  /* Inputs: 16px font = no iOS auto-zoom, 48px min-height = easy tap */
  .medical-profile-page .form-group input,
  .medical-profile-page .form-group select,
  .medical-profile-page .form-group textarea,
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;
    padding: 14px 14px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
  }

  .medical-profile-page .form-group textarea,
  .form-group textarea {
    min-height: 90px !important;
  }

  /* Buttons: full width, minimum 48px touch target */
  .medical-profile-page .btn-primary,
  .btn-primary {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
  }

  .medical-profile-page .btn-secondary,
  .btn-secondary {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  .medical-profile-page .btn-row,
  .btn-row {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .medical-profile-page .btn-skip,
  .btn-skip {
    font-size: 13px !important;
    padding: 10px !important;
  }

  /* Chip grids: wrap naturally, consistent chip sizing */
  .medical-profile-page .chip-grid,
  .chip-grid {
    gap: 8px !important;
  }

  .medical-profile-page .chip,
  .chip {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Radio options: full tap target */
  .medical-profile-page .radio-option,
  .radio-option {
    padding: 12px 14px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
  }

  /* Progress bar: full width */
  .medical-profile-page .progress-bar,
  .progress-bar {
    margin-bottom: 16px !important;
  }

  /* Step counter */
  .medical-profile-page .step-counter,
  .step-counter {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }

  /* Info box: readable on mobile */
  .medical-profile-page .info-box,
  .info-box {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  /* Medication entries */
  .medical-profile-page .medication-entry,
  .medication-entry {
    padding: 14px !important;
  }

  .medical-profile-page .add-medication,
  .add-medication {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  /* Smooth scroll to top on step change */
  .medical-profile-page .step,
  .step {
    animation: fadeInMobile 0.25s ease !important;
  }
}

@media (max-width: 768px) {
  @keyframes fadeInMobile {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* --- Tablets (769px - 1024px): modest adjustments --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .medical-profile-page .card,
  .card {
    padding: 28px 24px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   26. PRINT: Hide mobile-only elements
══════════════════════════════════════════════════════════════════ */
@media print {
    #elia-nav-container,
    #elia-mobile-tabs,
    .elia-chat-fab {
        display: none !important;
    }
}