.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}






.bd-mode-toggle {
  z-index: 1500;
}

/* Fixed sun-yellow/moon-blue for the theme dropdown's "Light"/"Dark" entries
   specifically (Bootstrap's own built-in modes) - intentionally not theme
   vars, since these represent universal light/dark concepts independent of
   whichever accent theme is currently active. */
.theme-icon-sun {
  color: #ffc107;
}

.theme-icon-moon {
  color: #0d6efd;
}

/* Cursor affordance for the info-icon tooltips scattered across forms. */
.tooltip-icon {
  cursor: pointer;
}

.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}



.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}

html {
  /* Reserve the vertical scrollbar's gutter on every page, whether or not
     it currently overflows. Without this, pages that don't need to scroll
     report a wider viewport than pages that do, and the fixed-position
     sidebar (width is a % of viewport) ends up a few px different between
     pages depending on their content height. */
  scrollbar-gutter: stable;
}

body {
  height: 100%;
}

.sidebar-toggle-btn {
  margin-right: 10px;
  padding: 2px 6px;
}

aside {
  position: fixed;
  overflow: auto;
  height: calc(100vh - 12px);
  justify-content: flex-start;
  align-self: flex-start;
}

aside .nav-link {
  white-space: nowrap;
}

.brand-first {
  color: #ff8c00;
  font-weight: bold;
}

.brand-second {
  color: #ffffff;
  font-weight: bold;
}

nav {
  position: sticky;
}

main {
  position: relative;
  overflow: visible;
  margin-left: auto;
  justify-content: flex-end;
  align-self: flex-end;
}

/* Make solid "primary" treatments (active nav-pill, filled buttons, sidebar
   active highlight) follow each theme's accent color, same as .btn-outline-primary
   already does. Themes that don't set --bs-primary-contrast-color keep the
   default Bootstrap blue + white text untouched. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-link-active-color: var(--bs-primary-contrast-color, #fff);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-color: var(--bs-primary-contrast-color, #fff);
  --bs-btn-hover-color: var(--bs-primary-contrast-color, #fff);
  --bs-btn-active-color: var(--bs-primary-contrast-color, #fff);
}

/* Bootstrap bakes .btn-success/.btn-danger backgrounds to static hex at build
   time, same as .btn-primary above, so they don't pick up --bs-success/
   --bs-danger overrides on their own. */
.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-bg: var(--bs-success);
  --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-warning {
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-info {
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-bg: var(--bs-info);
  --bs-btn-active-border-color: var(--bs-info);
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}

/* Bootstrap bakes .btn-outline-* colors to static hex at build time (same
   reason .btn-primary/.btn-success/etc. above need var() rebinds). Previously
   duplicated per theme file with each theme's own hardcoded hex; rewritten to
   read the active theme's own --bs-primary/success/danger/warning/info vars
   instead, so one generic rule covers every theme, current and future.
   Hover text color reuses --bs-primary-contrast-color for every variant
   (not just primary) - matching prior behavior, where each theme hardcoded
   the same body-bg-equivalent hex as the hover text color across all five. */
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-color: transparent;
}

.btn-outline-primary:hover {
  color: var(--bs-primary-contrast-color, #fff);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-success {
  color: var(--bs-success);
  border-color: var(--bs-success);
  background-color: transparent;
}

.btn-outline-success:hover {
  color: var(--bs-primary-contrast-color, #fff);
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.btn-outline-danger {
  color: var(--bs-danger);
  border-color: var(--bs-danger);
  background-color: transparent;
}

.btn-outline-danger:hover {
  color: var(--bs-primary-contrast-color, #fff);
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.btn-outline-warning {
  color: var(--bs-warning);
  border-color: var(--bs-warning);
  background-color: transparent;
}

.btn-outline-warning:hover {
  color: var(--bs-primary-contrast-color, #fff);
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.btn-outline-info {
  color: var(--bs-info);
  border-color: var(--bs-info);
  background-color: transparent;
}

.btn-outline-info:hover {
  color: var(--bs-primary-contrast-color, #fff);
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

/* Bootstrap bakes the active pagination page number to a static blue at
   build time (--bs-pagination-active-bg/-border-color: #0d6efd, -active-color:
   #fff), same root cause as .btn-primary/.btn-outline-* above - unlike the
   rest of .pagination's variables (color, bg, hover, focus, disabled), which
   already reference theme-aware vars like --bs-link-color/--bs-body-bg out of
   the box. This is what colors the current-page circle in every DataTable's
   pager (DataTables' bs5 integration renders plain Bootstrap .pagination/
   .page-item/.page-link markup, no DataTables-specific CSS of its own), so
   fixing it here covers every table in the app with no per-page changes. */
.pagination {
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-active-color: var(--bs-primary-contrast-color, #fff);
}

/* Bootstrap's own .btn-close already reads --bs-btn-close-filter (built into
   bootstrap.min.css, normally set by Bootstrap's own [data-bs-theme=dark]
   rule) - our custom theme names don't match that literal selector, so each
   theme sets the same variable itself. .navbar-toggler-icon has no equivalent
   Bootstrap-provided variable, so --bs-navbar-toggler-icon-filter below is
   this app's own, with a no-op ("none") fallback for any theme that doesn't
   set it - e.g. a future light custom theme, where inverting would be wrong. */
.navbar-toggler-icon {
  filter: var(--bs-navbar-toggler-icon-filter, none);
}

/* Forces Bootstrap's .bg-body-tertiary utility to match the body background
   exactly rather than Bootstrap's own (lighter/darker) tertiary shade - a
   deliberate per-theme design choice for darkblue-orange/matrix specifically,
   not a universal rule, so it stays gated behind a var each theme opts into
   rather than reading --bs-body-bg directly (which would also repaint
   Bootstrap's own built-in "light"/"dark" theme options, never themed here). */
.bg-body-tertiary {
  background-color: var(--bs-body-tertiary-bg, var(--bs-tertiary-bg)) !important;
}

.sidebar-link-active {
  background-color: var(--bs-primary);
  color: var(--bs-primary-contrast-color, #fff) !important;
}

/* Flash-message toasts default to the theme's accent color rather than
   Bootstrap's static blue, same as .btn-primary above. Success/danger/warning
   toasts keep Bootstrap's semantic colors since those meanings shouldn't
   shift with the accent theme. */
.toast.text-bg-primary {
  --bs-toast-bg: var(--bs-primary);
  --bs-toast-color: var(--bs-primary-contrast-color, #fff);
}

/* By default a Bootstrap card/dropdown-menu background equals the page
   background exactly, with only a faint translucent border for definition
   - easy to lose track of against dark pages. Give both a background that's
   always nudged away from the body background (lighter in dark themes,
   darker in light ones, since --bs-emphasis-color flips with the theme) and
   swap the near-invisible translucent border for the theme's solid one. */
.card {
  --bs-card-bg: color-mix(in srgb, var(--bs-body-bg), var(--bs-emphasis-color) 6%);
  --bs-card-border-color: var(--bs-border-color);
}

.dropdown-menu {
  --bs-dropdown-bg: color-mix(in srgb, var(--bs-body-bg), var(--bs-emphasis-color) 8%);
  --bs-dropdown-border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
}

/* TradingView's own colorTheme:"dark" param has proven unreliable in the wild
   (confirmed: some visitors get TradingView's light rendering back regardless
   of the param, even in a clean incognito session with the OS set to dark -
   likely a per-visitor decision made inside TradingView's own iframe that we
   have no way to inspect or override from the embedding page, since the
   widget is cross-origin). Rather than depend on that, request TradingView's
   light theme (their best-tested, default-supported state) and force it dark
   ourselves with a CSS filter, which is 100% within our control and immune to
   whatever TradingView decides to do server-side.
   invert()/hue-rotate() alone can't tint the resulting near-black/white pixels
   toward the theme's own surface color - hue-rotate has nothing to rotate on
   a desaturated (gray/black/white) pixel, and the inverted widget's own
   background lands much darker than the page's actual card surface - so a
   separate, unfiltered tint overlay (.tv-widget-tint) sits on top of the
   filtered widget to blend it toward the same color .card itself uses
   (see the .card rule above). The tint has to be a sibling of the filtered
   element, not a descendant, otherwise the filter would distort its color too.
   Settled on plain alpha at 0.6 after trying two other approaches that both
   read worse in practice: var(--bs-body-bg) at low opacity left it too close
   to black, and mix-blend-mode:overlay pushed toward the true navy body
   color but crushed contrast on the widget's own text and red/green accents.
   At 0.6, alpha blending also flattens contrast on the widget's own content
   (it pulls light text down and dark background up toward the same tint
   color), reading as pale/washed out - so contrast()/saturate() are boosted
   on the filtered widget itself, before the tint is applied, to give it more
   punch to lose in the blend. */
.tv-widget-frame {
  position: relative;
}
.tv-widget-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--bs-body-bg), var(--bs-emphasis-color) 6%);
  opacity: 0;
}
.tv-widget-frame.tv-dark .tradingview-widget-container {
  filter: invert(0.9) hue-rotate(180deg) contrast(1.3) saturate(1.15);
}
.tv-widget-frame.tv-dark .tv-widget-tint {
  opacity: 0.6;
}

/* DataTables Responsive's own row-expand control renders as a low-contrast
   grey triangle (rgba(0,0,0,.5) light / rgba(255,255,255,.5) dark) that
   ignores the active theme and is easy to miss. Replace it with a solid
   circle in the theme's accent color, using the same --bs-primary /
   --bs-primary-contrast-color pair .btn-primary already relies on above, so
   it re-colors automatically per theme with no extra per-theme CSS.
   The vendor's own selector has the same specificity as a naive override
   here, and its CDN stylesheet loads after this file (each page's own
   {% block styles %} pulls it in downstream of main.css) - so `content`,
   `border` and `display` would silently lose to source order. The doubled
   class (`.dtr-control.dtr-control`) exists purely to outrank it regardless
   of load order, not for any styling effect. The expanded-row rule below
   repeats every property (not just `background`) for the same reason: the
   vendor's own `tr.dtr-expanded` rule adds one class over its base rule,
   which ties our *base* (non-expanded) rule's specificity - and since the
   vendor stylesheet loads later, that tie silently let the vendor's
   triangle border reappear around our circle on expanded rows. Only the
   expanded rule's own 6-class selector reliably outranks it.
   Sized in fixed px (not em, which risks compounding against its own
   font-size) and drawn as two layered gradient bars rather than a text
   glyph (content: "+"/"-"): a font glyph's centering depends on that font's
   own metrics, which differ across OS/browser, so the only way to guarantee
   identical, truly centered rendering everywhere is to draw the mark as
   plain geometry rather than typeset it. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.dtr-control.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.control.control:before,
table.dataTable.dtr-column > tbody > tr > th.control.control:before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(var(--bs-primary-contrast-color, #fff), var(--bs-primary-contrast-color, #fff)) center / 10px 2px no-repeat,
    linear-gradient(var(--bs-primary-contrast-color, #fff), var(--bs-primary-contrast-color, #fff)) center / 2px 10px no-repeat,
    var(--bs-primary);
}

table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded > td.dtr-control.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded > th.dtr-control.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded > td.control.control:before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded > th.control.control:before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(var(--bs-primary-contrast-color, #fff), var(--bs-primary-contrast-color, #fff)) center / 10px 2px no-repeat,
    var(--bs-primary);
}

/* select2's stock stylesheet doesn't follow the app's theme: result text
   renders in select2's own black-on-white regardless of --bs-body-color, and
   selected-choice pills keep select2's light grey rather than the theme's
   surface color. Centralized here (like the DataTables/TradingView overrides
   above) even though only a handful of pages load select2, matching this
   file's existing convention for third-party widget theming. */
.select2-results {
  color: black;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-selection__choice {
  background-color: #212a33 !important;
}

.select2-selection__choice {
  color: #fff !important;
}

/* Fixed-width middle/last columns so rows with a shorter first column
   (e.g. issuer name) don't shift the amount/badge columns out of vertical
   alignment with the rows above/below them, as plain flex justify-content-between
   sizes each row independently based on its own content. */
.list-group-item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 1fr) auto;
}