/* ============================================================
   Chit Fund ROI Calculator — Page-Specific Layout Override
   Loaded AFTER all global stylesheets via header.php dynamic loader.
   Purpose: Override global .main-container grid pollution from
   other calculator stylesheets (har-ghar-lakhpati, mssc, etc.)
   ============================================================ */

/* Reset the polluted grid layout for this page */
.main-container {
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    grid-template-columns: unset !important;
}

/* --- No-Results State (default / first load) ---
   When .has-results is NOT present, calculator takes full
   centered width so the form isn't squished to 33% of screen. */
@media (min-width: 992px) {
    .main-container:not(.has-results) {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .main-container:not(.has-results) .calculator-column {
        flex: 0 0 auto;
        width: 100%;
        max-width: 680px;
        position: static; /* No sticky needed when single column */
    }
}

/* --- With-Results State (after form submit) ---
   Two-column layout: inputs left, results right. */
@media (min-width: 992px) {
    .main-container.has-results {
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
    }

    .main-container.has-results .calculator-column {
        flex: 0 0 42%;
        max-width: 480px;
        position: sticky;
        top: 2rem;
    }

    .main-container.has-results .content-column {
        flex: 1 1 0%;
        min-width: 0; /* Prevent flex blowout from wide tables */
    }
}

/* --- Calculator card padding correction ---
   The global .card adds 2.5rem (40px) padding which is fine,
   but .calculator inside adds more. Keep it lean. */
#calculator-card .calculator {
    padding: 0;
}

/* --- Form section inside card ---
   Inherits .form-section from post-office-mis-calculator.min.css
   (background: #f8f9fa; border; padding: 1.5rem) — that's fine.
   No override needed; just ensure form groups fill width. */
.form-group {
    width: 100%;
}

.input-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* --- Results card: prevent overflow from tables ---
   Tables with many columns can break the flex layout. */
.results-card {
    overflow: hidden;
    min-width: 0;
}

.results-card .table-container {
    overflow-x: auto;
}

/* --- Mobile: single column, no sticky --- */
@media (max-width: 991px) {
    .main-container,
    .main-container.has-results {
        flex-direction: column !important;
    }

    .main-container:not(.has-results) .calculator-column,
    .main-container.has-results .calculator-column {
        max-width: 100%;
        position: static;
        width: 100%;
        flex: none;
    }

    .main-container.has-results .content-column {
        width: 100%;
        flex: none;
    }
}