/* Mobile-first tweaks for better plot usability in Dash/Plotly */

:root {
  --app-pad-x: 0.35rem;
  --graph-min-h: 64vh;
  --graph-max-h: 78vh;
}

/* Keep controls finger-friendly without wasting too much vertical space */
.btn,
.Select-control,
.Select-placeholder,
.Select-value-label,
input[type="text"] {
  min-height: 40px;
}

/* Tighten global spacing near the graph area */
.plot-wrap {
  margin-bottom: 0.25rem;
}

/* Plot area: maximize visible canvas on phones */
.main-graph {
  height: clamp(420px, var(--graph-min-h), 900px);
}

/* Let the graph consume full horizontal room */
.main-graph,
.main-graph > div,
.main-graph .js-plotly-plot,
.main-graph .plot-container,
.main-graph .svg-container {
  width: 100% !important;
}

/* Small screens: almost edge-to-edge content */
@media (max-width: 575.98px) {
  .container-fluid.mobile-optimized {
    padding-left: var(--app-pad-x);
    padding-right: var(--app-pad-x);
  }

  h1 {
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .main-graph {
    height: clamp(380px, var(--graph-max-h), 900px);
  }

  /* Reduce chart chrome and keep interaction room */
  .js-plotly-plot .plotly .modebar {
    opacity: 0.9;
  }
}

/* Tablet and up: still compact, but balanced */
@media (min-width: 576px) {
  .container-fluid.mobile-optimized {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
}

@media (min-width: 768px) {
  .container-fluid.mobile-optimized {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}