/* ── Reports chart: always-loaded baseline ──
   Overrides the inline height:50% / min-height:380px on #graph_container
   so the chart never inherits full-viewport height in windowed mode.
   When maximized, index.css loads and its .dashboard-no-scroll #graph_container
   rules (higher specificity) take over. */

#graph_container {
  height: auto !important;
  min-height: 280px !important;
  max-height: min(420px, 55vh) !important;
  overflow: hidden;
}
#graph_canvas {
  margin-top: 0 !important;
}


@media (min-width: 768px) and (max-width: 991px) {
  .dash-stats-row > [class*="col-"]:nth-child(1),
  .dash-stats-row > [class*="col-"]:nth-child(2) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .dash-stats-row > [class*="col-"]:nth-child(3) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .main-content .main-navbar .navbar {
    flex-wrap: wrap;
  }

  .main-content .main-navbar .main-navbar__search {
    display: flex !important;
    order: 10;
    width: 100%;
    border-top: 1px solid #e1e5eb;
    padding: 6px 12px;
  }

  .main-content .main-navbar .main-navbar__search .input-group {
    margin-left: 0 !important;
    width: 100%;
  }

  .main-content .main-navbar .main-navbar__search .dt-picker-group-container,
  .main-content .main-navbar .main-navbar__search .dt-picker-container {
    width: 100%;
  }
}

@media (max-width: 1025px) {
  .daterangepicker {
    position: fixed !important;
    top: 60px !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    max-height: calc(100vh - 115px) !important;
    overflow-y: auto !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding-bottom: 8px !important;
  }
}