/* Mobile responsiveness for the retirement calculator */

/* General mobile styles */
@media screen and (max-width: 768px) {
    #retirement-calculator {
        margin: 10px;
        padding: 15px;
        flex-direction: column;
    }
    
    #calculator-form {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }
    
    #chart-container {
        width: 100%;
        height: 250px;
    }
    
    /* Input slider styles */
    .slider-row {
        margin-bottom: 15px;
    }
    
    .slider-row label {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    .slider-row input[type="range"] {
        width: 100%;
    }
    
    .slider-value {
        font-size: 14px;
    }
    
    /* Results container styles */
    .results-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-bottom: 60px; /* More space for the calculate button on mobile */
    }
    
    .result-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .result-value {
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .result-label {
        text-align: center;
    }
    
    .calculate-button-container {
        bottom: 15px;
        right: 50%;
        transform: translateX(50%);
        width: 80%;
    }
    
    #main-calculate-btn {
        width: 100%;
    }
    
    /* Post-retirement table styles */
    .returns-table {
        font-size: 12px;
    }
    
    .returns-table th,
    .returns-table td {
        padding: 6px 4px;
    }
    
    /* Hide specific columns on mobile */
    .returns-table th:nth-child(3),
    .returns-table th:nth-child(4),
    .returns-table td:nth-child(3),
    .returns-table td:nth-child(4),
    .returns-table th:nth-child(2),
    .returns-table td:nth-child(2) {
        display: none;
    }
    
    /* Make the visible columns wider */
    .returns-table th:nth-child(1),
    .returns-table td:nth-child(1),
    .returns-table th:nth-child(5),
    .returns-table td:nth-child(5) {
        width: 50%;
    }
    
    /* Accordion styles */
    .accordion {
        font-size: 14px;
        padding: 10px;
    }
    
    .panel p, .panel li {
        font-size: 13px;
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    #retirement-calculator {
        margin: 5px;
        padding: 10px;
    }
    
    #chart-container {
        height: 200px;
    }
    
    .result-value {
        font-size: 14px;
    }
    
    .result-label {
        font-size: 12px;
    }
    
    .returns-table {
        font-size: 11px;
    }
    
    .returns-table th,
    .returns-table td {
        padding: 4px 2px;
    }
    
    /* Improve table layout on very small screens */
    .returns-table th:nth-child(1),
    .returns-table td:nth-child(1) {
        width: 30%;
    }
    
    .returns-table th:nth-child(5),
    .returns-table td:nth-child(5) {
        width: 70%;
    }
}