/* Make the selected tab indicator thicker */
#navigation-tabs .mantine-Tabs-tab[data-active="true"] {
  border-bottom: 4px solid #940F1A !important;
}

/* Keep the faded blue background for the tabs container */
#navigation-tabs .mantine-Tabs-tabsList {
  background-color: #e0e9f7 !important;
}

.hoverlayer .hovertext {
  z-index: 9999 !important;
}

.dmc-slider-track {
    &::before {
      background-color: white;
    }
  }
.dmc-slider-bar {
color:   #940F1A;
background-color: #940F1A;
}

.dmc-slider-thumb {
  color: #940F1A;
  background-color: white;
  border: 3px solid #940F1A;
}
.dmc-slider-markLabel {
  font-size: 13px;
  margin-left : 5px /* Adjust this value to make it smaller or larger */
}

@media (max-width: 767px) {
  .responsive-text {
      font-size: 10px;
  }
}

@media (min-width: 768px) {
  .responsive-text {
      font-size: 16px;
  }
}

@media (max-width: 767px) {
  .figure2-class {
      height: 700px;
  }
}

@media (min-width: 768px) {
  .figure2-class {
      height: 520px;
  }
}

.responsive-button {
  height:20px;
  font-size: 10px;
  padding: 0 14px;
}

@media (min-width: 768px) {
  .responsive-button {
      height: 30px;
      font-size: 14px;
      padding: 0 18px;
  }
}

@media (max-width: 768px) {
  #image-container {
      display: none;
  }
}

@media (max-width: 768px) {
  /* Option 1: Adjust the fixed position top value for mobile */
  .tabs-list {
    top: 150px !important; /* Adjust this value based on your mobile header height */
  }
  .tabs-list {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
    left: auto !important;
    top: auto !important;
    margin-top: 40px;
  }
  
  .tab-panel {
    margin-left: 0 !important;
    margin-top: 50px;
    padding: 10px !important;
  }
}

@media (max-width: 768px) {
  .dmc-tabLabel {
      font-size: 13px !important;
  }
}


@media (max-width: 768px) {
  #collapse-sidebar {
      margin-top:140px;
  }
}

@media (max-width: 768px) {
  #header-space {
      margin-top: 40px;
  }
}

/* Mobile-responsive cards and stacks */
.mobile-card-stack {
  min-height: 300px;
  height: auto;
}

.mobile-card-stack-large {
  min-height: 400px;
  height: auto;
}

.mobile-card-stack-controls {
  min-height: 350px;
  height: auto;
}

.mobile-card-stack-dual {
  min-height: 500px;
  height: auto;
}

/* Responsive titles */
.responsive-title {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .responsive-title {
      font-size: 16px;
      line-height: 1.4;
      margin-bottom: 15px;
  }
}

/* Responsive captions */
.responsive-caption {
  font-size: 10px;
  margin-top: 5px;
}

@media (min-width: 768px) {
  .responsive-caption {
      font-size: 12px;
      margin-top: 10px;
  }
}

/* Mobile graph responsiveness */
.responsive-graph {
  width: 100% !important;
  height: 250px !important;
}

.responsive-graph-large {
  width: 100% !important;
  height: 350px !important;
}

@media (min-width: 768px) {
  .mobile-card-stack {
      height: 340px;
  }
  
  .mobile-card-stack-large {
      height: 680px;
  }
  
  .mobile-card-stack-controls {
      height: 430px;
  }
  
  .mobile-card-stack-dual {
      height: 600px;
  }
  
  .responsive-graph {
      width: 100% !important;
      height: 400px !important;
  }
  
  .responsive-graph-large {
      width: 100% !important;
      height: 500px !important;
  }
}

/* Mobile control groups */
.mobile-control-group {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

@media (min-width: 768px) {
  .mobile-control-group {
      flex-direction: row;
      align-items: center;
      gap: 20px;
  }
}

/* Responsive switches */
.responsive-switch {
  transform: scale(0.8);
}

@media (min-width: 768px) {
  .responsive-switch {
      transform: scale(1);
  }
}

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

.js-plotly-plot .svg-container {
  width: 100% !important;
  height: 100% !important;
}

/* Mobile spacing adjustments */
@media (max-width: 767px) {
  .dmc-Space {
      height: 5px !important;
  }
  
  /* Make text more readable on small screens */
  .dmc-Text {
      word-wrap: break-word;
      overflow-wrap: break-word;
  }
  
  /* Ensure tables are scrollable on mobile */
  .dash-table-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }
  
  /* Mobile-friendly loading indicators */
  .dash-loading {
      min-height: 200px;
  }
}

/* Ensure graphs fit within their containers */
@media (max-width: 767px) {
  .dcc-graph {
      overflow: hidden;
  }
  
  /* Force Plotly to respect container bounds */
  .plotly-graph-div {
      width: 100% !important;
      max-width: 100vw;
  }
}

/* Grid responsive behavior for dual charts */
@media (max-width: 767px) {
  .mantine-Grid-root {
      margin: 0 !important;
  }
  
  .mantine-GridCol-root {
      padding: 5px !important;
      margin-bottom: 10px;
  }
}

/* Bubble chart responsive styles - targets the specific card stack */
.bubble-chart-stack {
  width: 100%;
  height: 550px;
}

@media (max-width: 767px) {
  .bubble-chart-stack {
    height: 400px !important;
  }
  
  /* Make all text in bubble chart smaller on mobile */
  .bubble-chart-stack .js-plotly-plot .plotly text {
    font-size: 3px !important;
  }
  
  /* Specifically target bubble text labels */
  .bubble-chart-stack .scatterlayer .textpoint text {
    font-size: 8px !important;
  }
  
  /* Make axis labels smaller */
  .bubble-chart-stack .xtick text,
  .bubble-chart-stack .ytick text {
    font-size: 8px !important;
  }
  
  /* Make axis titles smaller */
  .bubble-chart-stack .xtitle text,
  .bubble-chart-stack .ytitle text {
    font-size: 9px !important;
  }
  
  /* Make annotations (category labels) much smaller */
  .bubble-chart-stack .annotation text {
    font-size: 0px !important;
  }
  
  /* Reduce the graph height within the container */
  .bubble-chart-stack .js-plotly-plot {
    height: 280px !important;
  }
}

@media (min-width: 768px) {
  .bubble-chart-stack {
    height: 650px;
  }
}

@media (max-width: 767px) {
  /* Reduce bubble size for mobile */
  .bubble-chart-stack .js-plotly-plot .scatterlayer .scatterpts {
    stroke-width: 1px !important;
    stroke: white !important;
  }

  .bubble-chart-stack .js-plotly-plot .scatterlayer .point {
    opacity: 0.7 !important;
  }
}