body {
  margin: 0;
  padding: 0;
}

.navbar {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Increase font size for navbar tab titles */
.navbar-nav .nav-link {
  font-size: 1.1rem;
  font-weight: 500;
}

.bslib-value-box .plotly .modebar-container {
  display: none;
}

.shiny-ipywidget-output {
  display: flex;
  flex: 1 1 auto !important;
  width: 100%;
}

.shiny-ipywidget-output>* {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.shiny-ipywidget-output>*>* {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.shiny-ipywidget-output>*>*>* {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}


/*KPI Metric Classes*/
.metric-sub {
  color: #6c757d;
  text-align: center;
}

.metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

[data-bs-theme="dark"] .plotly .xtick text,
[data-bs-theme="dark"] .plotly .ytick text,
[data-bs-theme="dark"] .plotly .g-xtitle text,
[data-bs-theme="dark"] .plotly .g-ytitle text,
[data-bs-theme="dark"] .plotly .legendtext,
[data-bs-theme="dark"] .plotly .legendtitletext {
  fill: #dee2e6 !important;
}

[data-bs-theme="dark"] .plotly .hoverlayer text {
  fill: #333 !important;
}

[data-bs-theme="dark"] .shiny-data-grid thead th {
  background-color: #1e1e2e !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .shiny-data-grid tbody tr.selected,
[data-bs-theme="dark"] .shiny-data-grid tbody tr:focus,
[data-bs-theme="dark"] .shiny-data-grid tbody tr[aria-selected="true"] {
  background-color: #3a3a5c !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .shiny-data-grid tbody tr:hover {
  background-color: #2a2a3e !important;
  color: #ffffff !important;
}

.tab-pane:nth-child(2) .bslib-sidebar-layout>.sidebar {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.tab-pane:nth-child(2) .bslib-sidebar-layout>.main {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

@media (max-width: 767px) {

  .tab-pane:nth-child(2) .bslib-sidebar-layout>.sidebar,
  .tab-pane:nth-child(2) .bslib-sidebar-layout>.main {
    max-height: none;
  }
}

/* fixed height within sidebar */
.chat-container {
  height: calc(100vh - 180px) !important;
  max-height: calc(100vh - 180px) !important;
}

.row-flex {
  display: flex;
  align-items: center;
}

.badge-right {
  margin-left: auto;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #c5d8fb;
}

[data-bs-theme="dark"] .badge-right {
  background: #1f3a5f;
  color: #8ab4f8;
  border: 1px solid #3b5a8a;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: #dee2e6;
  border-color: #6c757d;
}

/* Move Shiny notifications to the bottom left */
#shiny-notification-panel {
  bottom: 20px;
  left: 20px;
  right: auto;
}

.selection-summary {
  padding: 0.5rem 0.75rem;
  background: var(--bs-light);
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .selection-summary {
  background: var(--bs-dark);
  border-color: var(--bs-border-color);
  color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-outline-primary {
  color: var(--bs-primary-text-emphasis);
  border-color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .popover {
  background-color: var(--bs-dark);
  border-color: var(--bs-border-color);
  color: var(--bs-light);
}

[data-bs-theme="dark"] .popover .popover-header {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-light);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .popover .popover-body {
  color: var(--bs-light);
}

[data-bs-theme="dark"] .popover .popover-arrow::after {
  border-bottom-color: var(--bs-border-color);
}