/*
 * calculator-responsive.css
 * Shared responsive fixes for all 148 calculator templates.
 * Loaded on all single-tool pages via functions.php.
 */

/* ============================================================
   UNIVERSAL BASE FIXES
   ============================================================ */
.tool-main-content,
.tool-main-content * {
    box-sizing: border-box;
}

.tool-main-content canvas {
    max-width: 100% !important;
    height: auto !important;
}

.tool-main-content input,
.tool-main-content select,
.tool-main-content textarea {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .tool-main-content input,
    .tool-main-content select,
    .tool-main-content button {
        min-height: 40px;
    }
}

/* ============================================================
   PATTERN B: Modern CSS Grid Calculators
   ============================================================ */
.mc-wrap {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.mc-input-card,
.mc-result-card {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}



@media (max-width: 900px) {
    .mc-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .mc-grid {
        gap: 16px !important;
    }
}

/* Date selector rows */
.date-selector-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.date-selector-row > * {
    flex: 1 1 70px !important;
    min-width: 70px !important;
}

.date-selector-row .mc-input-year {
    flex: 1 1 80px !important;
    min-width: 80px !important;
    width: auto !important;
}

.mc-input-time {
    min-width: 55px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.mc-select-date {
    min-width: 75px !important;
    box-sizing: border-box !important;
}

/* Force all inline flex rows inside form groups to wrap on small mobile */
@media (max-width: 480px) {
    .mc-form-group > div[style*="display: flex"],
    .mc-form-group > div[style*="display:flex"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .mc-form-group > div[style*="display: flex"] > *,
    .mc-form-group > div[style*="display:flex"] > * {
        flex-grow: 1 !important;
    }
}

.mc-subtitle-notice {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .mc-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .mc-advanced-grid,
    .mc-macro-grid,
    .mc-time-grid,
    .payment-grid,
    .split-grid,
    .rec-grid {
        grid-template-columns: 1fr !important;
    }
    .action-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 400px) {
    .mc-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tabs wrapping */
@media (max-width: 480px) {
    .mc-tabs {
        flex-wrap: wrap !important;
    }
    .mc-tab {
        flex: none !important;
        width: 50% !important;
        font-size: 12px !important;
        padding: 10px 4px !important;
    }
    .mc-header {
        font-size: 22px !important;
    }
    .mc-result-header-text {
        font-size: 18px !important;
    }
    .mc-val-badge-num {
        font-size: 18px !important;
        word-break: break-all !important;
    }
    .mc-header-container {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ============================================================
   PATTERN A: Old Flexbox + Fixed Panel + HTML Table Forms
   ============================================================ */
@media (max-width: 768px) {

    /* All input panels full-width */
    .mc-input-panel, .lc-input-panel, .cic-input-panel,
    .alc-input-panel, .apr-input-panel, .cb-input-panel,
    .cdc-input-panel, .dp-input-panel, .dti-input-panel,
    .est-input-panel, .fha-input-panel, .fin-input-panel,
    .hac-input-panel, .hel-input-panel, .heloc-input-panel,
    .int-input-panel, .inv-input-panel, .ir-input-panel,
    .mar-input-panel, .pay-input-panel, .rc-input-panel,
    .ref-input-panel, .rpc-input-panel, .sal-input-panel,
    .sav-input-panel, .sic-input-panel, .tax-input-panel,
    .va-input-panel {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
        box-sizing: border-box !important;
    }

    /* All output panels full-width */
    .mc-output-panel, .lc-output-panel, .cic-output-panel,
    .alc-output-panel, .apr-output-panel, .cb-output-panel,
    .cdc-output-panel, .dp-output-panel, .dti-output-panel,
    .est-output-panel, .fha-output-panel, .fin-output-panel,
    .hac-output-panel, .hel-output-panel, .heloc-output-panel,
    .int-output-panel, .inv-output-panel, .ir-output-panel,
    .mar-output-panel, .pay-output-panel, .rc-output-panel,
    .ref-output-panel, .rpc-output-panel, .sal-output-panel,
    .sav-output-panel, .sic-output-panel, .tax-output-panel,
    .va-output-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Stack all grids vertically */
    .lc-grid, .cic-grid, .alc-grid, .apr-grid, .cb-grid,
    .cdc-grid, .dp-grid, .dti-grid, .est-grid, .fha-grid,
    .fin-grid, .hac-grid, .hel-grid, .heloc-grid, .int-grid,
    .inv-grid, .ir-grid, .mar-grid, .pay-grid, .rc-grid,
    .ref-grid, .rpc-grid, .rvb-columns-grid, .sal-grid,
    .sav-grid, .sic-grid, .tax-grid, .va-grid {
        flex-direction: column !important;
        width: 100% !important;
        gap: 16px !important;
    }

    /* HTML table forms: block layout */
    .mc-form-table, .lc-form-table, .cic-form-table,
    .alc-form-table, .apr-form-table, .cb-form-table,
    .cdc-form-table, .dp-form-table, .dti-form-table,
    .est-form-table, .fha-form-table, .fin-form-table,
    .hac-form-table, .hel-form-table, .heloc-form-table,
    .int-form-table, .inv-form-table, .ir-form-table,
    .mar-form-table, .pay-form-table, .rc-form-table,
    .ref-form-table, .rpc-form-table, .rvb-form-table,
    .sal-form-table, .sav-form-table, .sic-form-table,
    .tax-form-table, .va-form-table {
        display: block !important;
        width: 100% !important;
    }

    .mc-form-table tbody, .lc-form-table tbody,
    .cic-form-table tbody, [class$="-form-table"] tbody {
        display: block !important;
        width: 100% !important;
    }

    .mc-form-table tr, .lc-form-table tr,
    .cic-form-table tr, [class$="-form-table"] tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin-bottom: 10px !important;
        gap: 6px !important;
    }

    .mc-form-table td, .lc-form-table td,
    .cic-form-table td, [class$="-form-table"] td {
        display: block !important;
        padding: 2px 4px !important;
        white-space: normal !important;
    }

    /* Labels full-width and left-aligned */
    .mc-label, .lc-label, [class$="-label"] {
        text-align: left !important;
        width: 100% !important;
        padding-right: 0 !important;
        font-weight: 700 !important;
    }

    .mc-field, .lc-field, [class$="-field"] {
        width: 100% !important;
        white-space: normal !important;
    }

    /* Fixed-width inputs → fluid */
    .mc-w-large, .mc-w-small, .mc-w-med,
    .lc-w-large, .lc-w-small, .lc-w-med,
    [class$="-w-large"], [class$="-w-small"], [class$="-w-med"] {
        width: 100% !important;
        max-width: 200px !important;
        box-sizing: border-box !important;
    }

    /* Compound interest fixed input */
    .inlong {
        width: 100% !important;
        max-width: 200px !important;
        box-sizing: border-box !important;
    }

    .mc-input, .lc-input, .cic-input, [class$="-input"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Result/schedule tables: scrollable */
    .mc-output-panel table, .lc-output-panel table,
    [class$="-output-panel"] table,
    .mc-schedule-table, .lc-schedule-table,
    [class$="-schedule-table"] {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   SPECIFIC EDGE CASES
   ============================================================ */

/* Matrix calculator inputs */
@media (max-width: 600px) {
    .matrix-grid {
        gap: 4px !important;
    }
    .matrix-grid input {
        font-size: 11px !important;
        padding: 4px !important;
        min-height: 34px !important;
    }
}

/* Calendar grid (day-of-week) */
@media (max-width: 480px) {
    .calendar-grid {
        font-size: 11px !important;
    }
}

/* ============================================================
   SINGLE-TOOL.PHP WRAPPER FIXES
   ============================================================ */

/* Prevent the tool wrapper itself from causing overflow */
.tool-single-container {
    overflow-x: hidden !important;
}

@media (max-width: 1200px) {
    .tool-layout-wrapper {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 900px) {
    .tool-layout-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 12px !important;
    }

    .tool-main-content {
        max-width: 100% !important;
        width: 100% !important;
    }

    .tool-ad-left,
    .tool-ad-right {
        display: none !important;
    }
}

.tool-sidebar-right {
    box-sizing: border-box !important;
}

@media (max-width: 1200px) {
    .tool-sidebar-right {
        width: 100% !important;
        max-width: 850px !important;
        margin: 40px auto 0 !important;
        flex-shrink: 1 !important;
    }
}

@media (max-width: 900px) {
    .tool-sidebar-right {
        max-width: 100% !important;
        margin-top: 30px !important;
    }
}

@media (max-width: 768px) {
    .tool-layout-wrapper {
        padding: 0 8px !important;
    }

    .tool-main-content {
        padding: 0 !important;
    }
    
    .tool-sidebar-right {
        gap: 16px !important;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .mc-print-btn, .mc-btn-primary, .mc-btn-secondary,
    .tool-ad-left, .sidebar-calculators { display: none !important; }
    .mc-grid { grid-template-columns: 1fr 1fr !important; }
}