/* Site shell: sticky main bar with centred app links, each app's own sticky menu, theme switch. */

:root { --kp-nav-h: 56px; }

/* ---- Main bar ---- */
.kp-mainnav { z-index: 1030; }

@media (min-width: 992px) {
  /* Centre the app links on the bar itself, independent of logo and user-menu widths. */
  .kp-mainnav .container-fluid { position: relative; }
  .kp-mainnav .kp-apps { position: absolute; left: 50%; transform: translateX(-50%); }
}

@media (max-width: 991.98px) {
  .kp-mainnav .navbar-collapse { max-height: calc(100vh - 56px); overflow-y: auto; }
}

.kp-mainnav .kp-apps .nav-link.active { box-shadow: inset 0 -2px 0 #4fb3d9; }

.kp-mainnav .kp-theme-toggle { background: none; border: 0; white-space: nowrap; }

/* ---- Per-app menus: Trading, Market Data, ML, System (Equity and Quant style) ---- */
.kp-subnav {
  position: sticky;
  top: var(--kp-nav-h);
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 0 16px;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 13.5px;
}

.kp-subnav-brand {
  font-weight: 600;
  font-size: 15px;
  margin-right: 12px;
  padding: 8px 0;
  color: var(--bs-emphasis-color);
  white-space: nowrap;
}

.kp-subnav-link {
  display: inline-block;
  color: var(--bs-secondary-color);
  text-decoration: none;
  padding: 10px 11px;
  font-weight: 500;
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.kp-subnav-link:hover { color: var(--bs-emphasis-color); }

.kp-subnav-link.is-active {
  color: var(--bs-emphasis-color);
  font-weight: 600;
  border-bottom-color: var(--bs-primary);
}

/* Equity and Quant draw their own menus; keep them under the main bar while scrolling. */
.eqd .eq-tabs,
.qd .qd-tabs {
  position: sticky;
  top: var(--kp-nav-h);
  z-index: 1020;
}

/* ---- Dark theme: Bootstrap 5.3 utilities that keep light colours in dark mode ---- */
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .text-bg-light { color: var(--bs-body-color) !important; background-color: var(--bs-tertiary-bg) !important; }
/* Dark text stays dark on the yellow and cyan fills it is paired with. */
[data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.text-bg-warning):not(.text-bg-info) {
  color: var(--bs-emphasis-color) !important;
}
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-secondary-bg);
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-active-bg: var(--bs-secondary-bg);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: var(--bs-secondary-bg);
  --bs-table-hover-color: var(--bs-emphasis-color);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: #dee2e6;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #dee2e6;
  --bs-btn-hover-border-color: #dee2e6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #dee2e6;
  --bs-btn-active-border-color: #dee2e6;
}

@media (max-width: 991.98px) {
  /* One scrollable row on small screens instead of several wrapped rows pinned to the top. */
  .kp-subnav,
  .eqd .eq-tabs,
  .qd .qd-tabs { flex-wrap: nowrap; overflow-x: auto; }
}