/* ===== CONFIDO Responsive Helpers ===== */
:root{
  --confido-max-width: 1280px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Make all graphs and cards stack nicely on small screens */
.confido-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
/* Utility areas (12 cols desktop) */
.confido-col-12 { grid-column: span 12; }
.confido-col-6  { grid-column: span 6; }
.confido-col-4  { grid-column: span 4; }
.confido-col-3  { grid-column: span 3; }

/* Breakpoints */
@media (max-width: 1199.98px) {
  .confido-col-lg-6 { grid-column: span 12; }
  .confido-col-lg-4 { grid-column: span 6; }
}
@media (max-width: 991.98px) {
  .confido-grid { gap: 0.75rem; }
  .confido-col-md-6 { grid-column: span 12; }
  .confido-col-md-4 { grid-column: span 12; }
  .confido-hide-md { display: none !important; }
}
@media (max-width: 767.98px) {
  .confido-grid { gap: 0.75rem; }
  .confido-col-sm-12 { grid-column: span 12; }
  .confido-col-sm-6  { grid-column: span 12; }
  .confido-py-mobile { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  .confido-hide-sm { display: none !important; }
  h1, .h1 { font-size: 1.6rem; }
  h2, .h2 { font-size: 1.35rem; }
  h3, .h3 { font-size: 1.2rem; }
}

/* Let Plotly graphs shrink gracefully; parent controls height */
.js-plotly-plot, .dash-graph {
  width: 100% !important;
}

/* Ensure Dash DataTable scrolls horizontally on phones */
.dash-table-container {
  overflow-x: auto;
}

/* Tabs: make pill tabs scrollable on mobile */
.confido-tabbar {
  overflow-x: auto;
  white-space: nowrap;
}
.confido-tabbar > * { display: inline-block; }

/* Containers */
.confido-container {
  max-width: var(--confido-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Fix bootstrap icons size on small screens */
.bi { vertical-align: -0.125em; }

/* Navbar tweaks on mobile */
.navbar .navbar-brand img { max-height: 40px; height: auto; }
@media (max-width: 767.98px){
  .navbar .navbar-brand img { max-height: 34px; }
}