/* Shared responsive behavior for application pages and interactive forms. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.page-container,
.page-container > *,
.row > *,
.card,
.card-body,
.card-header,
.modal-content,
.modal-body,
.offcanvas,
.offcanvas-body {
  min-width: 0;
}

.page-container img,
.page-container svg,
.page-container canvas,
.page-container video {
  max-width: 100%;
}

.page-container p,
.page-container li,
.page-container td,
.page-container th,
.page-container code,
.page-container pre,
.modal p,
.modal li,
.modal code,
.modal pre {
  overflow-wrap: anywhere;
}

.table-responsive {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.table-responsive::after {
  content: "";
  display: block;
  width: 1px;
  height: 1px;
}

.nav-tabs,
.nav-pills {
  max-width: 100%;
}

.modal-dialog,
.offcanvas {
  max-width: 100vw;
}

.modal-footer,
.card-header,
.card-body > .d-flex,
.page-container .d-flex {
  min-width: 0;
}

.ai-hero .col-lg-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ai-hero .col-lg-4 > form,
.ai-hero .col-lg-4 > a {
  margin-left: 0 !important;
}

.ai-advisor-entry .card-body > div:first-child {
  flex: 1 1 28rem;
  min-width: 0;
}

.ai-advisor-entry h5,
.ai-advisor-entry p,
.ai-review-card,
.ai-response,
.ai-evidence {
  overflow-wrap: anywhere;
}

#plotly-chart,
#signal-live-chart,
.plotly-graph-div,
.js-plotly-plot,
.apexcharts-canvas {
  max-width: 100% !important;
}

@media (max-width: 1199.98px) {
  .page-container {
    padding-inline: 1rem;
  }

  .ai-hero .col-lg-4 {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .page-content {
    padding-top: 0.75rem !important;
  }

  .page-container {
    padding-inline: 0.75rem;
  }

  .app-topbar .topbar-menu {
    padding-inline: 0.75rem;
  }

  .app-topbar .topbar-menu > .d-flex {
    gap: 0.25rem !important;
  }

  .app-topbar .topbar-link,
  .app-topbar .sidenav-toggle-button,
  .app-topbar .topnav-toggle-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .card {
    margin-bottom: 0.875rem;
  }

  .card-body,
  .card-header {
    padding: 0.875rem;
  }

  .card-header.d-flex,
  .card-header > .d-flex,
  .page-container .card-body > .d-flex:not(.input-group) {
    flex-wrap: wrap;
  }

  .card-header h1,
  .card-header h2,
  .card-header h3,
  .card-header h4,
  .card-header h5,
  .card-header h6 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ai-hero .card-body {
    padding: 1rem !important;
  }

  .ai-hero h2 {
    font-size: clamp(1.55rem, 8vw, 2rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .ai-hero .col-lg-4,
  .ai-hero .col-lg-4 > form,
  .ai-hero .col-lg-4 > a,
  .ai-hero .col-lg-4 > form > button {
    width: 100%;
  }

  .ai-hero .col-lg-4 > a,
  .ai-hero .col-lg-4 > form > button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
  }

  .ai-advisor-entry .card-body {
    align-items: stretch !important;
  }

  .ai-advisor-entry .card-body > div:first-child,
  .ai-advisor-entry [data-ai-advisor-open] {
    width: 100%;
    flex-basis: 100%;
  }

  .ai-advisor-entry .d-flex.align-items-center {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .ai-advisor-entry [data-ai-advisor-open] {
    min-height: 2.75rem;
  }

  .form-control,
  .form-select,
  .input-group-text,
  textarea.form-control {
    font-size: 1rem;
  }

  .form-floating,
  .chart-field-with-hint,
  .parameter-row,
  .parameter-row .row,
  .filter-row,
  .filter-inputs {
    max-width: 100% !important;
  }

  .condition-row,
  .condition-controls,
  .condition-group-header,
  .parameter-row .row {
    flex-wrap: wrap !important;
  }

  .condition-row .form-select,
  .condition-row .form-control,
  .condition-row .value-input,
  .condition-controls > *,
  .parameter-row [class*="col-"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .btn-group-conditions,
  .btn-remove-condition {
    margin-left: 0 !important;
  }

  .modal {
    padding: 0 !important;
  }

  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    width: calc(100% - 1rem);
    max-width: none;
    min-height: calc(100% - 1rem);
    margin: 0.5rem;
  }

  .modal-dialog-scrollable {
    height: calc(100% - 1rem);
  }

  .modal-content {
    max-height: calc(100dvh - 1rem);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 0.875rem;
  }

  .modal-title {
    min-width: 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .modal-footer > * {
    width: 100%;
    margin: 0 !important;
  }

  .offcanvas.offcanvas-start,
  .offcanvas.offcanvas-end {
    width: min(100vw, 30rem) !important;
  }

  .offcanvas-footer {
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .nav-tabs,
  .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    white-space: nowrap;
  }

  .table-responsive {
    position: relative;
    border-radius: inherit;
  }

  #plotly-chart,
  #signal-live-chart {
    height: min(32rem, 62vh) !important;
  }

  .backtest-bar,
  .backtest-bar .backtest-actions,
  .backtest-bar .backtest-params,
  .backtest-bar .backtest-result-wrap {
    width: 100% !important;
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .backtest-bar .backtest-result-wrap {
    justify-content: flex-start !important;
  }

  .filter-inputs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
}

@media (max-width: 359.98px) {
  .page-container,
  .app-topbar .topbar-menu {
    padding-inline: 0.5rem;
  }

  .card-body,
  .card-header,
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 0.75rem;
  }

  .btn:not(.btn-link):not(.btn-close),
  .input-group,
  .form-control,
  .form-select {
    max-width: 100%;
  }
}