/* Custom styles for Retirement Calculator App */

/* Card styling */
.card {
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-title {
    color: #0d6efd;
    font-weight: 600;
}

/* Form section styling */
.form-section {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Badge colors for funding status */
.badge.bg-insufficient {
    background-color: #dc3545 !important;
}

.badge.bg-questionable {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-sufficient {
    background-color: #28a745 !important;
}

/* Table output styling */
.table-output {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre;
    font-family: 'Courier New', Courier, monospace;
}

/* Pre-formatted text styling */
pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
}

/* Chart container styling */
canvas {
    max-height: 400px;
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Summary section styling */
.summary-metric {
    padding: 0.5rem 0;
}

.summary-metric strong {
    color: #495057;
}

/* List group styling for recommendations */
.list-group-item {
    border-left: 3px solid #0d6efd;
    margin-bottom: 0.5rem;
}

/* Button styling */
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    canvas {
        max-height: 300px;
    }
    
    .table-output {
        font-size: 0.75rem;
    }
}