/* Minimal style overrides for Forecasting UI */

/* Import Source Sans 3 font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* Apply Source Sans site-wide */
body, .btn, .form-control, .card, .badge, .nav-link, input, select, textarea {
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Card hover effects for experiment list */
.list-group-item-action:hover {
    background-color: #f8f9fa;
}

/* Ensure charts are responsive */
.js-plotly-plot {
    width: 100% !important;
}

/* Ensure plot containers don't overflow their parent cards */
.js-plotly-plot .plotly {
    width: 100% !important;
}

/* Charts container - prevent flex overflow */
#charts-container {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

#charts-col {
    min-width: 0;  /* Prevents flex items from overflowing */
}

/* Card body containing charts should handle overflow */
.card-body .js-plotly-plot {
    max-width: 100%;
}

/* Ensure SVG plots are responsive */
.js-plotly-plot .main-svg {
    max-width: 100%;
    height: auto !important;
}

/* Status badge alignment */
.badge {
    font-size: 0.75em;
}

/* Better spacing for parameter display */
.card-body > div > div {
    font-size: 0.95em;
}

/* Spinner alignment */
.spinner-border-sm {
    vertical-align: middle;
}

/* Active nav link styling - make it more visible */
.navbar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-weight: 600;
}

.navbar .nav-link {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    transition: background-color 0.2s ease;
}

.navbar .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Delete button (icon): gray by default, red on hover */
.delete-btn-muted {
    color: #6c757d !important;
    transition: color 0.15s ease-in-out;
}

.delete-btn-muted:hover {
    color: #dc3545 !important;
}

/* Delete button (outline): gray by default, red on hover */
.delete-btn-outline {
    transition: all 0.15s ease-in-out;
}

.delete-btn-outline:hover {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
}