/* Portfolio Optimizer - Microsoft-Inspired Color Theme */

:root {
  /* Primary Color Palette - Blues */
  --po-primary-light: rgb(225, 233, 242);
  --po-primary-200: rgb(194, 210, 231);
  --po-primary-300: rgb(166, 190, 219);
  --po-primary-400: rgb(102, 143, 193);
  --po-primary-500: rgb(44, 74, 110);
  --po-primary-600: rgb(33, 55, 82);
  --po-primary-dark: rgb(22, 37, 54);

  /* Secondary Color Palette - Light Blue */
  --po-secondary-light: rgb(225, 233, 242);
  --po-secondary-300: rgb(194, 210, 231);
  --po-secondary-500: rgb(107, 147, 195);
  --po-secondary-600: rgb(65, 108, 160);
  --po-secondary-dark: rgb(44, 72, 107);

  /* Success/Green Palette */
  --po-success-light: rgb(233, 240, 227);
  --po-success-300: rgb(210, 226, 201);
  --po-success-500: rgb(145, 185, 121);
  --po-success-600: rgb(106, 151, 79);
  --po-success-dark: rgb(70, 101, 52);

  /* Warning/Orange Palette */
  --po-warning-light: rgb(255, 244, 223);
  --po-warning-300: rgb(255, 235, 193);
  --po-warning-500: rgb(254, 203, 102);
  --po-warning-600: rgb(254, 176, 14);
  --po-warning-dark: rgb(177, 120, 1);

  /* Danger/Red Palette */
  --po-danger-light: rgb(249, 232, 230);
  --po-danger-300: rgb(241, 209, 205);
  --po-danger-500: rgb(222, 141, 130);
  --po-danger-600: rgb(204, 78, 60);
  --po-danger-dark: rgb(139, 50, 37);

  /* Purple Accent */
  --po-purple-light: rgb(240, 234, 239);
  --po-purple-300: rgb(224, 214, 223);
  --po-purple-500: rgb(179, 151, 175);
  --po-purple-600: rgb(142, 104, 137);
  --po-purple-dark: rgb(95, 69, 90);

  /* Neutral/Gray Palette */
  --po-neutral-light: rgb(234, 234, 234);
  --po-neutral-200: rgb(233, 234, 227);
  --po-neutral-300: rgb(213, 213, 213);
  --po-neutral-400: rgb(192, 192, 192);
  --po-neutral-500: rgb(151, 151, 151);
  --po-neutral-600: rgb(113, 113, 113);
  --po-neutral-dark: rgb(75, 75, 75);

  /* Nature Green Accents */
  --po-nature-light: rgb(233, 234, 227);
  --po-nature-300: rgb(210, 213, 202);
  --po-nature-500: rgb(143, 150, 122);
  --po-nature-600: rgb(108, 114, 90);
  --po-nature-dark: rgb(72, 75, 61);
}

/* REMOVED: Bootstrap button overrides - now using Tailwind button classes in input.css
   These were causing conflicts with Tailwind .btn-primary and .btn-success classes

.btn-primary { ... }
.btn-secondary { ... }

*/

/* Navigation Bar */
.navbar-dark.bg-primary {
  background: linear-gradient(135deg, var(--po-primary-500), var(--po-primary-600)) !important;
}

.navbar-brand {
  font-weight: bold;
  color: white !important;
}

/* Navbar Logo Styling */
.navbar-logo {
  height: 45px;
  width: auto;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

/* Hero Logo Styling */
.hero-logo {
  max-width: 200px;
  width: 100%;
  height: auto;
}

/* Alert Colors */
.alert-success {
  background-color: var(--po-success-light);
  border-color: var(--po-success-300);
  color: var(--po-success-dark);
}

.alert-warning {
  background-color: var(--po-warning-light);
  border-color: var(--po-warning-300);
  color: var(--po-warning-dark);
}

.alert-danger {
  background-color: var(--po-danger-light);
  border-color: var(--po-danger-300);
  color: var(--po-danger-dark);
}

.alert-info {
  background-color: var(--po-secondary-light);
  border-color: var(--po-secondary-300);
  color: var(--po-secondary-dark);
}

/* Card Components */
.card-header {
  background-color: var(--po-neutral-200) !important;
  font-weight: bold;
  color: var(--po-primary-dark);
  border-bottom: 2px solid var(--po-primary-300);
}

.card {
  border: 1px solid var(--po-neutral-300);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Progress Bars and Status Indicators */
.status-running {
  background-color: var(--po-warning-light);
  border: 1px solid var(--po-warning-300);
  color: var(--po-warning-dark);
}

.status-completed {
  background-color: var(--po-success-light);
  border: 1px solid var(--po-success-300);
  color: var(--po-success-dark);
}

.status-error {
  background-color: var(--po-danger-light);
  border: 1px solid var(--po-danger-300);
  color: var(--po-danger-dark);
}

/* Portfolio Constraints Display */
.constraint-box {
  background: linear-gradient(135deg, var(--po-neutral-light), var(--po-neutral-300));
  border: 2px solid var(--po-primary-300);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.constraint-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(44, 74, 110, 0.15);
}

/* Asset Color Classes */
.asset-equity {
  background-color: var(--po-primary-500) !important;
  color: white;
}

.asset-fixed-income {
  background-color: var(--po-success-500) !important;
  color: white;
}

.asset-alternatives {
  background-color: var(--po-warning-600) !important;
  color: white;
}

.asset-cash {
  background-color: var(--po-neutral-500) !important;
  color: white;
}

/* Risk Weight Colors */
.risk-high {
  background-color: var(--po-danger-600) !important;
  color: white;
}

.risk-medium-high {
  background-color: var(--po-warning-600) !important;
  color: white;
}

.risk-medium {
  background-color: var(--po-warning-500) !important;
  color: var(--po-warning-dark);
}

.risk-low {
  background-color: var(--po-neutral-500) !important;
  color: white;
}

/* Weight Progress Bars */
.weight-bar {
  height: 20px;
  background-color: var(--po-neutral-300);
  border-radius: 4px;
  overflow: hidden;
}

.weight-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--po-success-500), var(--po-success-300));
  transition: width 0.3s ease;
}

/* Tables */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--po-neutral-200);
}

.table-dark {
  background-color: var(--po-primary-dark) !important;
  color: white;
}

.table-dark th {
  background-color: var(--po-primary-600) !important;
  border-color: var(--po-primary-500);
}

/* Accordion Components */
.accordion-button:not(.collapsed) {
  background-color: var(--po-secondary-light) !important;
  color: var(--po-secondary-dark) !important;
}

.accordion-button {
  background-color: var(--po-neutral-light);
  color: var(--po-primary-dark);
  border-color: var(--po-neutral-300);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(44, 74, 110, 0.25);
}

/* Badges */
.badge.bg-primary {
  background-color: var(--po-primary-500) !important;
}

.badge.bg-success {
  background-color: var(--po-success-600) !important;
}

.badge.bg-warning {
  background-color: var(--po-warning-600) !important;
}

.badge.bg-danger {
  background-color: var(--po-danger-600) !important;
}

.badge.bg-info {
  background-color: var(--po-secondary-500) !important;
}

.badge.bg-secondary {
  background-color: var(--po-neutral-500) !important;
}

/* Header Gradients */
.page-header {
  background: linear-gradient(135deg, var(--po-primary-500), var(--po-secondary-500)) !important;
  color: white;
}

.visual-section {
  background: linear-gradient(135deg, var(--po-neutral-light), var(--po-neutral-300));
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--po-primary-300);
}

.metric-highlight {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(44, 74, 110, 0.1);
  border: 1px solid var(--po-primary-200);
}

/* Form Controls */
.form-control:focus {
  border-color: var(--po-primary-400);
  box-shadow: 0 0 0 0.2rem rgba(44, 74, 110, 0.25);
}

.form-select:focus {
  border-color: var(--po-primary-400);
  box-shadow: 0 0 0 0.2rem rgba(44, 74, 110, 0.25);
}

/* Custom Utility Classes */
.text-primary {
  color: var(--po-primary-600) !important;
}

.text-secondary {
  color: var(--po-secondary-600) !important;
}

.bg-light {
  background-color: var(--po-neutral-200) !important;
}

.border-primary {
  border-color: var(--po-primary-300) !important;
}

/* REMOVED: .btn:hover - now handled by Tailwind button classes in input.css */

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
}

/* Loading States */
.loading {
  background: linear-gradient(90deg, var(--po-neutral-300), var(--po-neutral-200), var(--po-neutral-300));
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Equity Assets - Match the blue from US Small Cap badge */
.card.border-primary .card-header,
.equity-header {
  background-color: rgb(0, 123, 255) !important;
  color: white !important;
}

/* Fixed Income Assets - Match the green from Corp/Treasury badges */
.card.border-success .card-header,
.fixed-income-header {
  background-color: rgb(40, 167, 69) !important;
  color: white !important;
}

/* Alternative Assets - Match the orange from Gold/Real Estate badges */
.card.border-warning .card-header,
.alternatives-header {
  background-color: rgb(255, 149, 5) !important;
  color: white !important;
}

/* =============================================================================
   ENHANCED METRICS DISPLAY STYLES - Add to portfolio-theme.css
   ============================================================================= */

/* Allocation Weights Styling */
.allocation-weights-section {
    background: var(--po-neutral-200);
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
    border: 1px solid var(--po-neutral-300);
}

.section-header {
    color: var(--po-primary-600);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--po-primary-300);
}

.weight-item {
    transition: all 0.2s ease;
}

.weight-item:hover {
    transform: translateY(-1px);
}

.asset-name {
    font-size: 0.85rem;
    color: var(--po-neutral-600);
    font-weight: 500;
}

.weight-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--po-primary-600);
}

.weight-bar-container {
    height: 4px;
    background: var(--po-neutral-300);
    border-radius: 2px;
    overflow: hidden;
}

.weight-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--po-primary-500), var(--po-success-500));
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Metrics Grid Styling */
.metrics-grid {
    padding-left: 1rem;
}

.metrics-category-card {
    border: 1px solid var(--po-neutral-300);
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(44, 74, 110, 0.05);
}

.metrics-category-card:hover {
    box-shadow: 0 4px 12px rgba(44, 74, 110, 0.1);
    transform: translateY(-2px);
}

.metrics-category-card .card-header {
    border-radius: 8px 8px 0 0;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.metrics-category-card .card-body {
    padding: 0.75rem;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--po-neutral-600);
    font-weight: 500;
    padding: 0.25rem 0;
}

.metric-value {
    font-size: 0.8rem;
    padding: 0.25rem 0;
}

.metric-value .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

/* Loading States */
.spinner-border {
    width: 2rem;
    height: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .metrics-grid {
        padding-left: 0;
        margin-top: 1rem;
    }

    .allocation-weights-section {
        margin-bottom: 1rem;
    }

    .metrics-category-card {
        margin-bottom: 1rem;
    }
}

/* Badge Color Variations */
.badge.bg-light {
    color: var(--po-neutral-600) !important;
    border: 1px solid var(--po-neutral-300);
    background-color: white !important;
}

/* Hover Effects for Interactive Elements */
.weight-item:hover .weight-bar {
    background: linear-gradient(90deg, var(--po-primary-600), var(--po-success-600));
}

/* Alert Styling Override */
.alert-info {
    border-left: 4px solid var(--po-secondary-500);
    background: rgba(107, 147, 195, 0.05);
    font-size: 0.85rem;
}

/* =============================================================================
   OUTPUT DASHBOARD LAYOUT FIXES - Add to portfolio-theme.css
   ============================================================================= */

/* Chart Container Sizing */
.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
    margin: 1rem 0;
}

/* Apply Changes Button Spacing */
.row.mt-3 {
    margin-top: 1.5rem !important;
}

/* Card Body Padding for Charts */
.card-body {
    padding: 1.25rem;
}

/* Scatter Plot Specific Sizing */
#riskReturnChart,
#fitnessReturnChart,
#scatterPlot {
    max-width: 100%;
    height: 400px;
}

/* Debug Info Styling */
.mt-3 small.text-muted {
    margin-top: 1rem;
    display: block;
}

/* Legend Card Styling */
.card.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Dual Chart Layout Responsive Fixes */
.row.mb-4 {
    margin-bottom: 1.5rem !important;
}

.row.mb-4 .col-md-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Ensure proper spacing between elements */
.container-fluid > .card {
    margin-bottom: 1.5rem;
}

/* Dropdown section spacing */
.card-body .row {
    margin-bottom: 0;
}

.card-body .row + .row {
    margin-top: 1rem;
}

/* Apply button container */
.text-center {
    padding: 1rem 0;
}

/* Loading spinner alignment */
.spinner-border-sm {
    margin-left: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chart-container {
        height: 300px;
    }

    #riskReturnChart,
    #fitnessReturnChart,
    #scatterPlot {
        height: 300px;
    }

    .row.mb-4 .col-md-6 {
        margin-bottom: 1rem;
    }
}

/* =============================================================================
   MISSING DROPDOWN SECTION AND CARD STYLES - Add to portfolio-theme.css
   ============================================================================= */

/* Dropdown Section Container */
.dropdown-section {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--po-neutral-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Apply Button Wrapper - Proper Padding */
.dropdown-section .row.mt-3 .col-12.text-center {
    padding: 1.5rem 0 1rem 0;
}

/* Form Labels in Dropdown Section */
.dropdown-section .form-label {
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--po-primary-600);
}

/* Badge Styles for Legend */
.top-allocations-badge {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.25rem;
    font-weight: 500;
    margin: 0.2rem;
}

.badge-regular {
    background-color: var(--po-primary-500);
    color: white;
}

.badge-diversified {
    background-color: var(--po-success-500);
    color: white;
}

/* Metric Cards (from your original template) */
.metric-card {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    border: 1px solid var(--po-neutral-300);
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.metric-card:hover {
    box-shadow: 0 4px 8px rgba(44, 74, 110, 0.1);
    transform: translateY(-1px);
}

.metric-card .metric-label {
    font-size: 0.8rem;
    color: var(--po-neutral-600);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.metric-card .metric-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--po-primary-600);
}

/* Container Fluid Proper Spacing */
.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Chart Container Height Fix */
.card-body .chart-container {
    height: 400px;
    position: relative;
    margin: 0.5rem 0;
}

/* Debug Counter Styling */
#dataPointCount {
    font-weight: bold;
    color: var(--po-primary-600);
}

/* Loading Spinner in Apply Button */
#loadingSpinner.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
}

/* Card Headers in Dashboard */
.card .card-header h5 {
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.card .card-header small.text-muted {
    font-size: 0.85rem;
    line-height: 1.2;
}

/* Ensure proper card spacing */
.container-fluid .card {
    margin-bottom: 1.5rem;
}

/* Row spacing fixes */
.row.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Column padding adjustments */
.col-md-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Apply button specific styling */
#applyButton {
    min-width: 200px;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Form select styling in dropdown section */
.dropdown-section .form-select {
    padding: 0.75rem;
    font-size: 1rem;
    border: 2px solid var(--po-neutral-300);
    border-radius: 0.5rem;
}

.dropdown-section .form-select:focus {
    border-color: var(--po-primary-400);
    box-shadow: 0 0 0 0.25rem rgba(44, 74, 110, 0.25);
}

/* ========================================
   ENHANCED METRICS DISPLAY STYLING
   Add these styles to portfolio-theme.css
   ======================================== */

.metrics-layout {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

.allocation-weights-section {
    flex: 0 0 300px;
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1.5rem;
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.metrics-grid-section {
    flex: 1;
    min-width: 0;
}

.allocation-weights-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.weight-item {
    background: white;
    border-radius: 0.375rem;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.weight-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.weight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.asset-name {
    font-size: 0.875rem;
    color: #495057;
    font-weight: 500;
}

.weight-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d6efd;
}

.weight-bar-container {
    width: 100%;
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.weight-bar {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #6610f2);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.metrics-category {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease;
}

.metrics-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.metrics-category-header {
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metrics-category-header i {
    opacity: 0.9;
}

.metrics-category-body {
    padding: 1.25rem;
}

.metrics-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.metrics-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.metrics-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.metrics-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
}

.metrics-value.positive {
    color: #198754;
}

.metrics-value.negative {
    color: #dc3545;
}

.metrics-value.neutral {
    color: #6c757d;
}

/* Category color themes */
.category-performance {
    background: linear-gradient(135deg, #0d6efd, #6610f2);
}

.category-risk {
    background: linear-gradient(135deg, #fd7e14, #e25440);
}

.category-monte-carlo {
    background: linear-gradient(135deg, #6f42c1, #d63384);
}

.category-historical {
    background: linear-gradient(135deg, #198754, #20c997);
}

.category-crisis {
    background: linear-gradient(135deg, #dc3545, #fd7e14);
}

/* Responsive design */
@media (max-width: 992px) {
    .metrics-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    .allocation-weights-section {
        flex: none;
        position: static;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .allocation-weights-section {
        padding: 1rem;
    }

    .metrics-category-body {
        padding: 1rem;
    }

    .weight-item {
        padding: 0.5rem;
    }
}

/* =============================================================================
   STANDARDIZED PAGE HEADER AND BUTTON STYLES
   Consistent headers and buttons across all pages
   ============================================================================= */

/* Standard Blue Page Header - Used by most pages */
.page-header-blue {
    background: linear-gradient(135deg, rgb(44, 74, 110), rgb(33, 55, 82)) !important;
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* Admin Maroon Page Header - Used by admin pages - Muted red/maroon */
.page-header-red {
    background: linear-gradient(135deg, #8B4049, #6B2D35) !important;
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* Page Header Typography */
.page-header-blue h2,
.page-header-red h2 {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.page-header-blue p,
.page-header-red p {
    margin-bottom: 0;
    opacity: 0.9;
}

/* REMOVED: Old Bootstrap button overrides - now using Tailwind button classes in input.css
   .btn-back-dashboard, .btn-action-*, .btn-outline-light
   All button styling is now handled by Tailwind classes: .btn, .btn-primary, .btn-success, etc.
*/

/* Standardized Section Headers (for forms and content sections) */
.section-header-gradient {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.section-header-gradient h4,
.section-header-gradient h5 {
    margin-bottom: 0;
}

/* Card Section with Border */
.card-section {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Bokeh Responsive Layout - Make scatter plot responsive */
/* Container styling */
#bokehPlotsContainer {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure scatter plot section doesn't overlap with content below */
#scatterPlotCharts {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 2rem !important;
}

/* Target all possible Bokeh container structures */
#bokehPlotsContainer > div,
#bokehPlotsContainer .bk-root,
#bokehPlotsContainer .bk-root > div,
#bokehPlotsContainer .bk-FlexBox,
#bokehPlotsContainer .bk-GridBox,
#bokehPlotsContainer .bokeh-responsive-layout {
    display: flex !important;
    width: 100% !important;
}

#bokehPlotsContainer .bokeh-widget-pane,
#bokehPlotsContainer .bokeh-scatter-pane {
    display: flex !important;
    width: 100% !important;
}

/* On mobile (< 992px), stack widgets above the plot */
@media (max-width: 991px) {
    /* Force column layout on responsive layout + panes */
    #bokehPlotsContainer .bokeh-responsive-layout,
    #bokehPlotsContainer .bk-root,
    #bokehPlotsContainer .bk-root > div,
    #bokehPlotsContainer .bk-FlexBox,
    #bokehPlotsContainer .bk-GridBox {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #bokehPlotsContainer .bokeh-widget-pane,
    #bokehPlotsContainer .bokeh-scatter-pane {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }

    #bokehPlotsContainer .bokeh-scatter-pane .bk-Figure,
    #bokehPlotsContainer .bokeh-scatter-pane .bk-Plot,
    #bokehPlotsContainer .bokeh-scatter-pane canvas.bk-canvas {
        min-height: 800px !important;
        height: 800px !important;
        max-height: 800px !important;
        width: 100% !important;
    }

    #bokehPlotsContainer .bokeh-scatter-pane canvas {
        width: 100% !important;
    }
}

/* On desktop (>= 992px), keep side-by-side layout */
@media (min-width: 992px) {
    #bokehPlotsContainer .bokeh-responsive-layout {
        display: grid !important;
        grid-template-columns: minmax(320px, 28vw) minmax(0, 1fr);
        column-gap: 1.5rem !important;
        align-items: start !important;
    }

    #bokehPlotsContainer .bokeh-widget-pane {
        width: 100% !important;
        min-width: 320px !important;
        max-width: 420px !important;
        margin-right: 0 !important;
    }

    #bokehPlotsContainer .bokeh-scatter-pane {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Ensure the plot canvas expands properly */
    #bokehPlotsContainer .bokeh-scatter-pane canvas {
        width: 100% !important;
    }

    /* Desktop plot height */
    #bokehPlotsContainer .bokeh-scatter-pane .bk-Figure {
        height: 600px !important;
    }
}