/* ========================================
   FINAL MOBILE LAYOUT FIXES
   Edge-to-edge native app styling for mobile
   ======================================== */

@media (max-width: 768px) {

    /* CRITICAL: Override compatibility-page padding from main.css line 2780 */
    .compatibility-page {
        padding: 0 !important;
    }

    /* CRITICAL: Make compatibility-container single column on mobile (main.css line 2830 has 2 columns) */
    .compatibility-container {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* FORCE EVERYTHING TO FULL WIDTH - ZERO PADDING! */
    html,
    body,
    .main-content,
    .page-content,
    .jodiac-ai-page,
    .jodiac-ai-container,
    .ai-chat-section,
    .chart-selection-section,
    .compatibility-form-section,
    .compatibility-results-section,
    .person-section,
    .form-card,
    .results-card,
    .divisional-charts-page,
    .complete-kundali-container,
    .numerology-page,
    .your-charts-section,
    .chart-card,
    .section-card,
    .card,
    .feature-card {
        max-width: 100vw !important;
        width: 100% !important;
        margin: 0 !important;
        /* ZERO HORIZONTAL PADDING - Edge-to-edge */
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* Add minimal padding ONLY for text readability */
    .person-section>h3,
    .person-section>.form-row,
    .form-card>.form-header,
    .ai-chat-section>p,
    .chart-selection-section>h2 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Add minimal vertical spacing */
    .person-section,
    .form-card,
    .ai-chat-section,
    .chart-selection-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Remove ALL max-width constraints globally */
    * {
        max-width: 100vw !important;
    }

    /* Allow horizontal scroll on tables ONLY */
    table,
    .table-responsive,
    .planetary-table,
    .data-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }

    /* Prevent page horizontal scroll */
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-width: 100vw !important;
    }

    /* ========================================
       CHART IMAGE ENLARGEMENT FOR READABILITY
       ======================================== */
    .chart-image,
    .main-chart-image,
    .divisional-chart-image,
    .kundali-chart-image {
        max-width: 100vw !important;
        /* FIX: Changed from 90vw to fill screen */
        width: 100% !important;
        /* FIX: Changed from auto for proper sizing */
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }

    /* Ensure chart containers don't limit image size */
    .chart-image-container,
    .chart-visual-display,
    .chart-display-section {
        max-width: 100vw !important;
        overflow: visible !important;
    }

    /* ========================================
       DIVISIONAL CHARTS TABLE HORIZONTAL SCROLL
       ======================================== */

    /* Ensure table containers allow horizontal scroll */
    .divisional-charts-table-container,
    .table-container,
    .planetary-positions-table-container,
    .table-responsive,
    .data-table-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Ensure tables expand to show all columns */
    .divisional-charts-table,
    .planetary-positions-table,
    .data-table,
    table.planetary-table {
        min-width: 100%;
        width: max-content !important;
        display: table !important;
    }

    /* Make table cells readable */
    .divisional-charts-table td,
    .divisional-charts-table th,
    .planetary-positions-table td,
    .planetary-positions-table th {
        white-space: nowrap !important;
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
    }

    /* ========================================
       JODIAC AI FULL SCREEN - ChatGPT Style
       ======================================== */
    .jodiac-ai-page,
    .jodiac-ai-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        gap: 0 !important;
        /* FIX: Remove 2rem gap for true fullscreen */
    }

    /* AI sections - edge to edge with minimal padding */
    .chart-selection-section,
    .ai-chat-section,
    .ai-interpretation-section,
    .jodiac-ai-page .chart-selection-section,
    .jodiac-ai-page .ai-chat-section,
    .jodiac-ai-page .ai-interpretation-section {
        border-radius: 0 !important;
        /* No rounded corners */
        padding: 0 !important;
        /* FIX: Zero padding for true fullscreen */
        margin: 0 !important;
        max-width: 100vw !important;
        box-shadow: none !important;
        /* No shadows - flat design */
    }

    /* AI Chat specific - maximize message area */
    .ai-chat-container {
        padding: 0 !important;
        /* FIX: Zero padding */
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* ========================================
       FIX DIVISIONAL CHARTS TABLE TRUNCATION
       ======================================== */

    /* Force divisional charts to load all columns */
    .planets-table,
    .divisional-planets-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        display: block !important;
    }

    .planets-table table,
    .divisional-planets-table table {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }

    /* Ensure all table cells render */
    .planets-table td,
    .planets-table th {
        display: table-cell !important;
        white-space: nowrap !important;
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
}