/* ============================================================
   RiverIndex Main Stylesheet
   Shared styles for all pages — consistent with frontpage genre
   ============================================================ */

/* --- Hero / Jumbotron (frontpage style) --- */
.hero-section {
    background-color: #f8f9fa;
    padding: 3rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.hero-section h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 300;
    line-height: 1.2;
}

.hero-section .lead {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 300;
}

/* --- Page header (replaces colored card-header) --- */
.page-header {
    background-color: #f8f9fa;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #0d6efd;
}

.page-header h2 {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.page-header p {
    margin-bottom: 0;
    color: #6c757d;
}

/* --- Card refinements (frontpage style) --- */
.card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.card-header {
    border-bottom: 1px solid #e9ecef;
    background-color: #fff;
    padding: 1rem 1.25rem;
}

.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    margin-bottom: 0;
    font-weight: 600;
}

/* --- Index card hover (frontpage style) --- */
.index-card {
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 1.25rem;
}

.index-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* --- Chart container (frontpage style) --- */
.chart-container {
    background: white;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- Stat display cards --- */
.stat-card {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    height: 100%;
}

.stat-card .stat-value {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* --- Feature cards (frontpage style) --- */
.feature-card {
    text-align: center;
    padding: 1.5rem;
    border-radius: 0.5rem;
    height: 100%;
}

.feature-card .feature-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.feature-card h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: #6c757d;
    font-size: 0.95rem;
}

/* --- Info alert refinements --- */
.alert {
    border-radius: 0.5rem;
    border: none;
}

.alert h5 {
    font-weight: 600;
}

/* --- Section spacing --- */
.section-title {
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

/* --- Timeline (dashboard) --- */
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.25rem;
}

.timeline-marker {
    position: absolute;
    left: -2rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e9ecef;
}

.timeline-content {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.timeline-item:last-child .timeline-content {
    border-bottom: none;
    padding-bottom: 0;
}

/* --- Quick actions grid --- */
.quick-action-btn {
    text-align: left !important;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s;
}

.quick-action-btn:hover {
    background-color: #f8f9fa;
}

/* --- Category tabs (list page) --- */
.category-tabs {
    margin-bottom: 2rem;
    border-bottom: 2px solid #dee2e6;
}

.category-tabs .nav-link {
    border: none;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
}

.category-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom: 3px solid #0d6efd;
    background: transparent;
}

/* --- Index catalog header (list page) --- */
.index-catalog-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* --- Example visualization placeholder --- */
.example-visualization {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Key metrics list --- */
.key-metrics {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.key-metrics li {
    padding: 0.25rem 0;
    color: #6c757d;
}

.key-metrics li i {
    width: 1.25rem;
    color: #0d6efd;
}

/* --- Explore map button --- */
.explore-map-btn {
    background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.explore-map-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(13,110,253,0.3);
    color: white;
}

/* --- Code blocks (api docs) --- */
.code-block {
    background-color: #212529;
    color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}

.code-block code {
    color: #e9ecef;
}

/* --- Accordion refinements --- */
.accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #212529;
    font-weight: 600;
}

/* --- Form refinements --- */
.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.15);
}

/* --- Footer --- */
footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

/* --- Control panel (one-page index layout) --- */
.control-panel {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    height: 100%;
}

.control-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.control-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.control-section h5 {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: 600;
    margin-bottom: 1rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.stat-item {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

.stat-item .stat-value {
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--index-color-primary, #0d6efd);
}

.stat-item .stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .control-panel {
        padding: 0.75rem;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Responsive helpers --- */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 1.5rem;
    }
    .page-header {
        padding: 1rem 1.25rem;
    }
    .index-catalog-header {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 1.5rem 1rem;
    }
    .index-catalog-header h1 {
        font-size: 1.75rem;
    }
    .index-catalog-header p {
        font-size: 0.95rem;
    }
    .index-card .card-body {
        padding: 1rem;
    }
    .index-card .card-body h5 {
        font-size: 1rem;
    }
    .category-nav .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}