html,
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1:focus {
  outline: none;
}

a,
.btn-link {
  color: #0071c1;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: #1b6ec2;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

code {
  color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Watchlist remove-row button — always visible, turns red on hover */
.mud-table-row .remove-row-btn {
  opacity: 0.35;
  transition: opacity 0.15s ease;
}
.mud-table-row:hover .remove-row-btn {
  opacity: 0.6;
}
.mud-table-row .remove-row-btn:hover {
  opacity: 1;
  color: var(--mud-palette-error) !important;
}

/* ── Mobile: hide non-essential dashboard table columns (≤ 599px) ── */
@media (max-width: 599px) {
  .hide-xs {
    display: none !important;
  }
}

/* Auto-Trade configure toolbar: keep portfolio selector + actions visible while scrolling rows */
.auto-trade-bulk-toolbar {
  position: sticky;
  top: 0.75rem;
  z-index: 11;
  background: var(--mud-palette-surface);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.auto-trade-tabs .mud-tabs-panels,
.auto-trade-tabs .mud-tab-panel {
  overflow: visible;
}

/* ══ AutoTrade — compact expanded rows ══════════════════════════════════ */

/* Open-position badge used in the Configure table */
.ticker-open-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--mud-palette-success);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* Tighter panel content inside the per-ticker expansion panels */
.at-ticker-panels .mud-expand-panel-content {
  padding: 6px 12px 10px !important;
}

/* Strategy controls: allow wrapping so chips never run off-screen */
.at-strategy-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.at-family-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.at-strategy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 2px 0 4px;
}

.at-strategy-chips .at-chip-inactive {
  background: transparent !important;
  color: var(--mud-palette-text-secondary) !important;
  border-color: var(--mud-palette-lines-default) !important;
}

.at-top-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.at-trend-suite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 4px 8px;
  border: 1px solid var(--mud-palette-warning);
  border-radius: 8px;
  background: transparent;
}

/* Parameter flex row: items are fixed-width, never stretch on wide screens */
.at-params {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: flex-end;
  margin-top: 2px;
}

/* Confidence cell — slightly wider for slider + label */
.at-param-conf {
  flex: 2 0 150px;
  max-width: 190px;
}

/* Every numeric field cell */
.at-param {
  flex: 1 0 110px;
  max-width: 145px;
}

@media (max-width: 599.98px) {
  .at-ticker-panels .mud-expand-panel-content {
    padding: 6px 8px 10px !important;
  }

  .at-param-conf {
    flex: 2 0 140px;
    max-width: none;
  }
  .at-param {
    flex: 1 0 100px;
    max-width: none;
  }

  /* Bulk toolbar scrolls horizontally on mobile */
  .auto-trade-bulk-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px !important;
    position: static !important;
  }
}

@media (max-width: 640.98px) {
  .auto-trade-bulk-toolbar {
    top: 0.25rem;
  }
}

/* ══ Chart transition animations — Backtest & Optimizer vortex ══════════ */

@keyframes chartVortexOut {
  0% {
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1)
      skewX(0deg);
    opacity: 1;
    filter: blur(0) brightness(1) hue-rotate(0deg);
  }
  10% {
    transform: perspective(800px) rotateX(-4deg) rotateY(12deg) scale(1.06)
      skewX(1.5deg);
    opacity: 1;
    filter: blur(0) brightness(1.1) hue-rotate(15deg);
  }
  35% {
    transform: perspective(600px) rotateX(12deg) rotateY(-30deg) scale(0.78)
      skewX(-6deg) skewY(3deg);
    opacity: 0.72;
    filter: blur(2.5px) brightness(1.4) hue-rotate(45deg);
  }
  65% {
    transform: perspective(380px) rotateX(-28deg) rotateY(75deg) scale(0.38)
      skewX(-14deg) skewY(-6deg);
    opacity: 0.3;
    filter: blur(8px) brightness(2) hue-rotate(100deg);
  }
  100% {
    transform: perspective(180px) rotateX(60deg) rotateY(230deg) scale(0.02)
      skewX(-28deg) skewY(14deg);
    opacity: 0;
    filter: blur(22px) brightness(3) hue-rotate(180deg);
  }
}

@keyframes chartRevealIn {
  0% {
    transform: perspective(900px) rotateX(28deg) scale(0.35) translateY(-18px);
    opacity: 0;
    filter: blur(10px) brightness(2.2);
  }
  50% {
    transform: perspective(900px) rotateX(-5deg) scale(1.04) translateY(5px);
    opacity: 0.9;
    filter: blur(0.5px) brightness(1.06);
  }
  75% {
    transform: perspective(900px) rotateX(2deg) scale(0.99) translateY(-2px);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
  100% {
    transform: perspective(900px) rotateX(0deg) scale(1) translateY(0);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}

.chart-vortex-out {
  animation: chartVortexOut 0.72s cubic-bezier(0.55, 0, 0.88, 0.38) forwards;
  transform-origin: 50% 42%;
  will-change: transform, opacity, filter;
  pointer-events: none;
  overflow: hidden;
}

.chart-reveal-in {
  animation: chartRevealIn 0.55s cubic-bezier(0.12, 0.88, 0.32, 1.05) forwards;
  transform-origin: 50% 42%;
  will-change: transform, opacity, filter;
}

/* ══ Computing state — pulsing glow while results are loading ════════════════ */

@keyframes chartComputingGlow {
  0%,
  100% {
    box-shadow: 0 0 0px 0px transparent;
  }
  40% {
    box-shadow: 0 0 18px 3px
      color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
  }
  70% {
    box-shadow: 0 0 10px 1px
      color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
  }
}

.chart-computing {
  animation: chartComputingGlow 2.4s ease-in-out infinite;
  border-radius: 6px;
}

/* ══ Walk-Forward period region animations ══════════════════════════════════ */

@keyframes wfRegionPulse {
  0%,
  100% {
    opacity: 0.09;
  }
  50% {
    opacity: 0.26;
  }
}

.wf-region-active {
  animation: wfRegionPulse 1.3s ease-in-out infinite;
}

.wf-region-done {
  opacity: 0.08;
}

/* Dashboard portfolio picker popover */
.dashboard-portfolio-popover {
  min-width: 260px !important;
  max-width: min(90vw, 500px) !important;
}
.dashboard-portfolio-popover .mud-list-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-dash-columns {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.home-dash-columns--mobile {
  flex-direction: column;
}
.home-dash-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-dash-section {
  position: relative;
}
.home-dash-title-link {
  color: inherit !important;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: inherit;
}
.home-dash-title-link:hover {
  color: var(--mud-palette-primary) !important;
}
.home-dash-section-collapsed-lines {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 4px;
}
.home-dash-section-collapsed-line {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--mud-palette-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-dash-section-expanded {
  position: relative;
}
/* Wrapper is position:absolute so the tooltip root cannot open a line-box
   above the card (that was why the chevron sat in the gap outside the section). */
.home-dash-section-collapse {
  position: absolute;
  top: 6px;
  right: 4px;
  z-index: 3;
  line-height: 0;
  opacity: 0.5;
}
.home-dash-section-collapse:hover {
  opacity: 1;
}
.home-dash-section-collapse .mud-icon-button {
  width: 28px;
  height: 28px;
  padding: 0;
}
.home-dash-layout-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .home-dash-layout-editor {
    grid-template-columns: 1fr;
  }
}
.home-dash-section-expanded > .mud-card > .mud-card-header {
  padding-right: 40px;
}
.home-dash-section-expanded > .id-ao-card > .id-ao-topbar {
  padding-right: 40px;
}

.home-oid-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}
.home-oid-kpi-label {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}
.home-oid-kpi-value {
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 700;
}
.home-oid-kpi-sub {
  font-size: 0.65rem;
  line-height: 1.2;
}
@media (max-width: 520px) {
  .home-oid-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Home OID — stand-down / underlying count pills */
.home-oid-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-oid-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 4px 8px 4px 10px;
  border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-text-primary));
  color: var(--mud-palette-text-primary);
  font-size: 0.72rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.home-oid-pill:hover {
  border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
  background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
  text-decoration: none;
  color: var(--mud-palette-text-primary);
}
.home-oid-pill-ticker {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.home-oid-pill-label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11rem;
}
.home-oid-pill-stats {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.home-oid-pill-stat {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.home-oid-pill-meta {
  color: var(--mud-palette-text-secondary);
  font-size: 0.65rem;
  font-weight: 500;
}
.home-oid-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.home-oid-pill-count-buy {
  background: color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
  color: var(--mud-palette-success-darken);
}
.home-oid-pill-count-block {
  background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent);
  color: var(--mud-palette-warning-darken);
}
.home-oid-pill-quiet {
  opacity: 0.72;
}
.home-oid-pill-quiet .home-oid-pill-meta {
  font-style: italic;
}
.home-oid-pill-cat-thesis {
  border-color: color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
  background: color-mix(in srgb, var(--mud-palette-info) 7%, var(--mud-palette-surface));
}
.home-oid-pill-cat-risk {
  border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
  background: color-mix(in srgb, var(--mud-palette-error) 7%, var(--mud-palette-surface));
}
.home-oid-pill-cat-data,
.home-oid-pill-cat-liquidity {
  border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
  background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}
.home-oid-pill-cat-session {
  border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 28%, transparent);
}
.home-oid-pill-tip {
  font-size: 0.75rem;
  line-height: 1.35;
  max-width: 16rem;
}
.home-oid-pill-tip-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.home-oid-pill-tip-hint {
  margin-top: 6px;
  opacity: 0.8;
  font-size: 0.68rem;
}

/* Home dashboard portfolio card — isolation CSS is not linked in index.html */
.home-dash-port {
  container-type: inline-size;
}
.home-dash-port-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--mud-palette-lines-default);
  padding: 8px 10px;
}
.home-dash-port-kpi-label {
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  line-height: 1.2;
}
.home-dash-port-kpi-value {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 2px;
  white-space: nowrap;
}
.home-dash-port-kpi-sub {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
}
.home-dash-port-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
.home-dash-port-section {
  font-size: 0.65rem !important;
  letter-spacing: 0.06em;
  font-weight: 600 !important;
}
.home-dash-port-row {
  display: grid;
  /* Fixed tracks — each row is its own grid, so max-content would size cols differently per row */
  grid-template-columns: minmax(0, 1fr) 5.75rem 4rem 5.25rem;
  align-items: center;
  column-gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  cursor: pointer;
}
.home-dash-port-row > span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* MudBlazor does not ship Bootstrap's .text-right — align numeric cols ourselves */
.home-dash-port-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: clip;
}
.home-dash-port-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  white-space: nowrap;
}
.home-dash-port-weight {
  color: var(--mud-palette-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}
.home-dash-port-row--head {
  cursor: default;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding-bottom: 2px;
}
@container (min-width: 760px) {
  .home-dash-port-body--split {
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
  }
}
/* Compare equity chart — global styles (scoped .razor.css does not apply reliably here) */
.sb-compare-equity-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-compare-equity-chart .sb-compare-header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-compare-equity-chart .sb-compare-pills-panel {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--mud-palette-background-grey);
  border: 1px solid var(--mud-palette-lines-default);
}
/* Toolbar: section label + hint on the left, checkbox pinned right */
.sb-compare-equity-chart .sb-compare-pills-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.sb-compare-equity-chart .sb-compare-section-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sb-compare-equity-chart .sb-compare-section-label {
  display: block;
  font-size: 0.62rem !important;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0;
}
.sb-compare-equity-chart .sb-compare-hint {
  font-size: 0.72rem !important;
  line-height: 1.25;
  display: block;
}
.sb-compare-equity-chart .sb-compare-zero-trade-filter {
  margin: 0 0 0 auto !important;
  flex-shrink: 0;
}
.sb-compare-equity-chart .sb-compare-zero-trade-filter .mud-typography-body1,
.sb-compare-equity-chart .sb-compare-zero-trade-filter label {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  color: var(--mud-palette-text-secondary) !important;
  white-space: nowrap;
}
.sb-compare-equity-chart .sb-compare-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.sb-compare-equity-chart .sb-compare-pill {
  font-weight: 600 !important;
  cursor: pointer;
}

/* Legend — single horizontal row (also used by walk-forward charts below) */
.sb-compare-legend-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 28px;
  padding: 2px 2px 6px;
  overflow-x: auto;
}
.sb-compare-legend-item {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.sb-compare-legend-item svg {
  flex-shrink: 0;
}
.sb-compare-legend-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

/* Detail card(s) — header + pill metrics */
.sb-compare-equity-chart .sb-curve-details-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-compare-equity-chart .sb-curve-details-wrap--multi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.sb-compare-equity-chart .sb-curve-detail {
  --curve-accent: var(--mud-palette-primary);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--curve-accent) 28%, var(--mud-palette-lines-default));
  border-left: 3px solid var(--curve-accent);
  background: var(--mud-palette-surface);
}
.sb-compare-equity-chart .sb-curve-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sb-compare-equity-chart .sb-curve-detail-swatch {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--curve-accent);
}
/* Title above, description below — never jammed together */
.sb-compare-equity-chart .sb-curve-detail-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.sb-compare-equity-chart .sb-curve-detail-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--curve-accent);
}
.sb-compare-equity-chart .sb-curve-detail-sub-tooltip {
  display: block;
  max-width: 100%;
}
.sb-compare-equity-chart .sb-curve-detail-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--mud-palette-text-secondary);
  line-height: 1.35;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}
.sb-compare-equity-chart .sb-curve-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px 10px;
  margin: 10px 0 0;
}
.sb-compare-equity-chart .sb-curve-metric {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  color: var(--mud-palette-text-primary);
  cursor: help;
}
.sb-compare-equity-chart .sb-curve-metric--threshold {
  color: var(--curve-accent, var(--mud-palette-primary));
  border-color: color-mix(in srgb, var(--curve-accent, #594ae2) 40%, var(--mud-palette-lines-default));
  background: color-mix(in srgb, var(--curve-accent, #594ae2) 14%, var(--mud-palette-surface));
}
.sb-compare-equity-chart .sb-curve-metric--up {
  color: var(--mud-palette-success);
  border-color: color-mix(in srgb, var(--mud-palette-success) 45%, var(--mud-palette-lines-default));
  background: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface));
}
.sb-compare-equity-chart .sb-curve-metric--down {
  color: var(--mud-palette-error);
  border-color: color-mix(in srgb, var(--mud-palette-error) 40%, var(--mud-palette-lines-default));
  background: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-surface));
}
.sb-compare-equity-chart .sb-curve-metric--final {
  color: var(--mud-palette-info);
  border-color: color-mix(in srgb, var(--mud-palette-info) 38%, var(--mud-palette-lines-default));
  background: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface));
}
.sb-compare-equity-chart .sb-curve-detail-footer {
  font-size: 0.72rem;
  color: var(--mud-palette-text-secondary);
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px dashed var(--mud-palette-lines-default);
}

/* StrategyBacktest: action help + compare chart — see StrategyBacktest.razor.css */
.sb-grid-btn {
  width: 100%;
}
.sb-action-wrap {
  position: relative;
  width: 100%;
}
.sb-action-help-trigger {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}

/* Stock chart popup — global so IDialogService portal always applies */
.stock-chart-dialog-shell {
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 20px 50px rgba(0, 0, 0, 0.45);
}

.stock-chart-dialog-shell .mud-dialog-title {
  border-bottom: 1px solid var(--mud-palette-lines-default);
  padding: 14px 18px;
  background: var(--mud-palette-background-gray);
}

.stock-chart-dialog-shell .mud-dialog-content {
  padding: 14px 16px 10px !important;
  background: var(--mud-palette-surface);
}

.stock-chart-dialog-shell .mud-dialog-actions {
  border-top: 1px solid var(--mud-palette-lines-default);
  padding: 10px 16px 12px;
  background: var(--mud-palette-background-gray);
}

.stock-chart-dialog-body .stock-chart-row2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.stock-chart-dialog-body .stock-chart-interval-select {
  font-size: 0.78rem;
  padding: 4px 28px 4px 10px;
  min-width: 6.5rem;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 4px;
  background: var(--mud-palette-background-gray);
  color: var(--mud-palette-text-primary);
}

.stock-chart-dialog-body .stock-chart-interval-label {
  font-size: 0.78rem;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

.stock-chart-panel {
  background: var(--mud-palette-surface);
}

.stock-chart-svg {
  display: block;
  width: 100%;
  min-height: 380px;
}

/* Drawer nav: full-width active/hover row (MudTooltip root defaults to width: fit-content) */
.mud-drawer .drawer-nav-menu .mud-tooltip-root {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
}

.mud-drawer .drawer-nav-menu .mud-nav-link {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════
   Signal detail page  (global so it always applies — see SignalDetail.razor)
   ══════════════════════════════════════════════════════════════════════ */
.sig-card,
.sig-hero,
.sig-chart-wrap {
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 14px;
  background: var(--mud-palette-surface);
}

.sig-card { padding: 18px 20px; }

.sig-card__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
  margin-bottom: 8px;
}

.sig-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ── Hero (left 1/3) ──────────────────────────────────────────────────── */
.sig-hero {
  position: relative;
  height: 100%;
  padding: 20px 22px 20px 24px;
  overflow: hidden;
}

.sig-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--sig-accent, var(--mud-palette-primary));
}

.sig-hero__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.sig-hero__id { min-width: 0; }

.sig-hero__ticker-link { text-decoration: none; color: inherit; }
.sig-hero__ticker-link:hover { color: var(--sig-accent, var(--mud-palette-primary)); }

.sig-hero__head-right { flex-shrink: 0; }

.sig-hero__company {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sig-hero__price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.sig-hero__price {
  line-height: 1;
  margin: 0;
}

.sig-hero__chg {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 2px 9px 2px 5px;
  border-radius: 999px;
}

.sig-hero__chg.is-up   { color: #16a34a; background: rgba(34,197,94,0.14); }
.sig-hero__chg.is-down { color: #e11d48; background: rgba(244,63,94,0.14); }

/* OHLC tiles — clearly separated label / value, generously spaced */
.sig-hero__ohlc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.sig-hero__ohlc-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--mud-palette-background-grey);
  border: 1px solid var(--mud-palette-lines-default);
}

.sig-hero__ohlc-cell span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
}

.sig-hero__ohlc-cell strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mud-palette-text-primary);
  font-variant-numeric: tabular-nums;
}

.sig-hero__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  margin-top: 14px;
}

.sig-hero__dot { width: 8px; height: 8px; border-radius: 50%; }
.sig-hero__dot.is-open   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.sig-hero__dot.is-closed { background: var(--mud-palette-text-disabled); }

.sig-hero__split {
  height: 1px;
  background: var(--mud-palette-lines-default);
  margin: 18px 0 14px;
}

.sig-hero__counts {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.sig-hero__count {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mud-palette-text-primary);
}

.sig-hero__count small {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 4px;
  color: var(--mud-palette-text-secondary);
}

.sig-hero__count.is-buy  { color: #16a34a; }
.sig-hero__count.is-sell { color: #e11d48; }

.sig-hero__bar {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
  background: var(--mud-palette-background-grey);
}

.sig-hero__bar .seg { height: 100%; }
.sig-hero__bar .seg--buy  { background: #22c55e; }
.sig-hero__bar .seg--hold { background: var(--mud-palette-text-disabled); }
.sig-hero__bar .seg--sell { background: #f43f5e; }

.sig-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.72rem;
  color: var(--mud-palette-text-secondary);
}

/* ── Chart wrapper (right 2/3) ────────────────────────────────────────── */
.sig-chart-wrap { height: 100%; padding: 16px 18px; }

/* ── Strategy consensus banner ────────────────────────────────────────── */
.sig-consensus {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: stretch;
}

.sig-consensus__left  { flex: 1 1 280px; min-width: 260px; }
.sig-consensus__right {
  flex: 1 1 340px;
  border-left: 1px solid var(--mud-palette-lines-default);
  padding-left: 22px;
}

.sig-consensus__headline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sig-consensus__note {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mud-palette-text-primary);
}

.sig-consensus__conf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.sig-consensus__conf-track {
  flex: 1;
  height: 8px;
  border-radius: 6px;
  background: var(--mud-palette-background-grey);
  overflow: hidden;
  max-width: 280px;
}

.sig-consensus__conf-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--sig-accent, var(--mud-palette-primary));
}

.sig-consensus__conf-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--mud-palette-text-primary);
}

.sig-consensus__conf-lbl {
  font-size: 0.76rem;
  color: var(--mud-palette-text-secondary);
}

.sig-consensus__leaders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sig-lead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sig-lead:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.14); }
.sig-lead.is-buy  { color: #15803d; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.32); }
.sig-lead.is-sell { color: #be123c; background: rgba(244,63,94,0.12); border-color: rgba(244,63,94,0.32); }
.sig-lead__conf { font-weight: 800; opacity: 0.85; }

.sig-consensus__empty {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--mud-palette-text-secondary);
  height: 100%;
}

/* ── Strategy cards grid ──────────────────────────────────────────────── */
.sig-strat {
  position: relative;
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-left: 3px solid var(--sig-accent, var(--mud-palette-lines-default));
  background: var(--mud-palette-background-grey);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sig-strat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.16); }

.sig-strat__link { display: block; padding: 14px 16px 18px; text-decoration: none; color: inherit; }

.sig-strat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.sig-strat__name { font-size: 0.92rem; font-weight: 700; color: var(--mud-palette-text-primary); }

.sig-strat__tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.sig-strat__tag.is-lead { color: #e65100; background: rgba(230,81,0,0.1); border: 1px solid rgba(230,81,0,0.28); }
.sig-strat__tag.is-lag  { color: #1565c0; background: rgba(21,101,192,0.1); border: 1px solid rgba(21,101,192,0.28); }

.sig-strat__conf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.sig-strat__conf-track {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--mud-palette-lines-default);
  overflow: hidden;
}

.sig-strat__conf-fill { height: 100%; border-radius: 4px; background: var(--sig-accent, var(--mud-palette-primary)); }
.sig-strat__conf-val { font-size: 0.76rem; font-weight: 700; color: var(--mud-palette-text-primary); white-space: nowrap; }

.sig-strat__notes { font-size: 0.75rem; font-style: italic; color: var(--mud-palette-text-secondary); line-height: 1.35; }
.sig-strat__time  { font-size: 0.72rem; color: var(--mud-palette-text-secondary); margin-top: 6px; }

.sig-strat__help {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--mud-palette-primary);
  background: var(--mud-palette-surface);
  border: 1.5px solid var(--mud-palette-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: bold;
  text-decoration: none;
  line-height: 1;
}

.sig-strat__help:hover { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

@media (max-width: 900px) {
  .sig-consensus__right {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TickerPriceChart  (global so toolbar controls always style — see TickerPriceChart.razor)
   ══════════════════════════════════════════════════════════════════════ */
.tpc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
}

.tpc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.tpc__title { display: flex; align-items: center; gap: 8px; min-width: 0; }

.tpc__title-text {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mud-palette-text-primary);
}

.tpc__return {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 2px 10px 2px 4px;
  border-radius: 999px;
  line-height: 1.4;
}

.tpc__return--up   { color: var(--mud-palette-success); background: rgba(34,197,94,0.14); }
.tpc__return--down { color: var(--mud-palette-error);   background: rgba(244,63,94,0.14); }
.tpc__return-tf { font-weight: 600; opacity: 0.7; margin-left: 4px; font-size: 0.72rem; }

.tpc__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

.tpc__actions .stock-chart-interval-label {
  font-size: 0.74rem;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

.tpc__actions .stock-chart-interval-select {
  font-size: 0.76rem;
  padding: 5px 26px 5px 10px;
  min-width: 5.5rem;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 8px;
  background: var(--mud-palette-background-grey);
  color: var(--mud-palette-text-primary);
  cursor: pointer;
}

/* Line / Candle segmented control */
.tpc__seg {
  display: inline-flex;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--mud-palette-background-grey);
}

.tpc__seg-btn {
  border: 0;
  background: transparent;
  color: var(--mud-palette-text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tpc__seg-btn + .tpc__seg-btn { border-left: 1px solid var(--mud-palette-lines-default); }
.tpc__seg-btn:hover { color: var(--mud-palette-text-primary); }
.tpc__seg-btn.is-active { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

/* Timeframe pills + inline stats */
.tpc__tfs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.tpc__tf {
  border: 1px solid var(--mud-palette-lines-default);
  background: transparent;
  color: var(--mud-palette-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tpc__tf:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.tpc__tf.is-active { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

.tpc__stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.tpc__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--mud-palette-text-primary);
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--mud-palette-background-grey);
  font-variant-numeric: tabular-nums;
}

.tpc__stat-k {
  color: var(--mud-palette-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.64rem;
}

/* Chart panel */
.tpc__panel {
  position: relative;
  flex: 1;
  border-radius: 10px;
  border: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-surface);
  min-height: 300px;
  overflow: hidden;
}

.tpc__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.tpc__svg { display: block; width: 100%; height: 100%; min-height: 300px; }

.tpc--compact .tpc__panel,
.tpc--compact .tpc__loading,
.tpc--compact .tpc__svg { min-height: 252px; }

@media (max-width: 600px) {
  .tpc__panel,
  .tpc__loading,
  .tpc__svg,
  .tpc--compact .tpc__panel,
  .tpc--compact .tpc__loading,
  .tpc--compact .tpc__svg { min-height: 220px; }

  .tpc__stats { width: 100%; margin-left: 0; }
}

/* Account → Quote Source: one provider per row */
.quote-source-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.quote-source-group .mud-radio {
  width: 100%;
  margin: 0;
}

/* Reusable opt-in helper: add Class="wrap-tabs" to a MudTabs to let its tab bar wrap
   onto multiple lines instead of scrolling horizontally (which hides options behind arrows). */
.wrap-tabs .mud-tabs-tabbar-content {
  overflow: visible !important;
  white-space: normal !important;
  height: auto !important;
}

.wrap-tabs .mud-tabs-tabbar-wrapper {
  width: 100% !important;
  flex-wrap: wrap !important;
  transform: none !important;
}

.wrap-tabs .mud-tabs-tabbar {
  height: auto !important;
}

.wrap-tabs .mud-tabs-scroll-button {
  display: none !important;
}

/* App bar: single-row at every viewport width, including mobile */
.mud-appbar.appbar-main {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  overflow: hidden !important;
}
.appbar-main .mud-toolbar {
  flex-wrap: nowrap !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
}
.appbar-main .appbar-brand {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.appbar-trailing {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-width: 0;
  overflow: hidden;
}

.appbar-actions {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* ══ Debug Telemetry window — full-bleed dark HUD shell ═════════════════════ */

.debug-window-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  font-family:
    "Consolas",
    "SF Mono",
    "Cascadia Mono",
    ui-monospace,
    monospace;
  color: #d7dde6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.debug-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(180deg, #14161c 0%, #0a0b0f 100%);
  border-bottom: 1px solid #1f2430;
  flex-shrink: 0;
}

.debug-topbar-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #cfd6e6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.debug-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 8px 1px rgba(255, 59, 59, 0.85);
  animation: debugLivePulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes debugLivePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.debug-env-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: #2a3550;
  color: #8fb4ff;
}

.debug-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.debug-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #d7dde6;
  background: #1b1f29;
  border: 1px solid #2b3140;
  border-radius: 5px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.debug-btn:hover {
  background: #262c3a;
  border-color: #3a4256;
}

.debug-btn-active {
  background: #1e2a3d;
  border-color: #4a6fa5;
  color: #c5d6f0;
}

.debug-btn-danger {
  color: #ff9d9d;
  border-color: #4a2530;
}

.debug-btn-danger:hover {
  background: #341a1f;
  border-color: #6b2e38;
}

.debug-hud-line {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ff4d4d;
  background: #050505;
  border-bottom: 1px solid #1a1a1a;
  text-shadow: 0 0 6px rgba(255, 60, 60, 0.45);
}

.debug-paused-tag {
  margin-left: 10px;
  color: #ffd166;
  text-shadow: 0 0 6px rgba(255, 209, 102, 0.45);
}

.debug-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.debug-legend {
  width: 250px;
  min-width: 180px;
  max-width: 520px;
  flex-shrink: 0;
  background: #07080b;
  padding: 12px 10px;
  overflow-y: auto;
}

.debug-legend-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5c6478;
  margin: 4px 2px 8px;
}

.debug-legend-section {
  margin-top: 12px;
  margin-bottom: 4px;
  color: #7a849c;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debug-legend-section:first-of-type {
  margin-top: 2px;
}

.debug-legend-section-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 5px currentColor;
}

/* Whichever section is currently the big "hero" panel on the 3D stage — spotlighted in the
   sidebar so it's obvious what the main graph is showing, and where to look when it swaps. */
.debug-legend-section-focused {
  color: #eef3ff !important;
  background: linear-gradient(90deg, rgba(125, 211, 255, 0.14), transparent);
  border-radius: 4px;
  padding: 5px 4px 5px 2px;
  animation: debug-focus-pulse 1.8s ease-in-out infinite;
}

.debug-legend-section-onstage {
  margin-left: 8px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #08111c;
  background: #7dd3ff;
  border-radius: 3px;
  padding: 1.5px 5px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(125, 211, 255, 0.65);
}

.debug-legend-row-focused {
  border-left: 2px solid rgba(125, 211, 255, 0.55);
  padding-left: 4px;
}

@keyframes debug-focus-pulse {
  0%, 100% { background: linear-gradient(90deg, rgba(125, 211, 255, 0.14), transparent); }
  50% { background: linear-gradient(90deg, rgba(125, 211, 255, 0.32), transparent); }
}

.debug-legend-hint {
  margin-top: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #454c5e;
}

.debug-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.debug-legend-row:hover,
.debug-legend-row-active {
  background: #161b26;
}

/* A channel row the user has explicitly drilled into (pinned in the 3D mesh) — distinct from
   the softer hover-only ".debug-legend-row-active" highlight above. */
.debug-legend-row-pinned {
  background: rgba(255, 224, 102, 0.12);
  box-shadow: inset 2px 0 0 #ffe066;
}

.debug-legend-row-pinned .debug-legend-label {
  color: #ffe066;
  font-weight: 700;
}

.debug-legend-section {
  cursor: pointer;
  transition: color 0.12s ease;
}

.debug-legend-section:hover {
  color: #cfd8ec;
}

.debug-legend-caption-clickable {
  cursor: pointer;
  padding: 5px 4px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}

.debug-legend-caption-clickable:hover {
  background: #161b26;
  color: #cfd8ec;
}

.debug-legend-caption-active {
  color: #eef3ff !important;
  background: linear-gradient(90deg, rgba(125, 211, 255, 0.16), transparent);
}

.debug-legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

.debug-legend-label {
  flex: 1;
  font-size: 11.5px;
  color: #aab4c8;
  white-space: nowrap;
}

.debug-legend-value {
  font-size: 11.5px;
  font-weight: 700;
  color: #e7ecf5;
}

/* ── Baseline / delta mode — shared by legend rows, Overview stat cards, and the two ranked
   bar-chart reports. Direction is deliberately neutral (no "green=good"): whether up or down is
   desirable depends entirely on which channel it is. ── */
.debug-legend-delta {
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.debug-delta-up { color: #ffb347; }
.debug-delta-down { color: #7dd3ff; }
.debug-delta-flat { color: #5c6478; }

.debug-stat-delta {
  margin-top: 4px;
  font-size: 9.5px;
  color: #6e7690;
  font-variant-numeric: tabular-nums;
}

/* ── Stage: main-area (graph / IBKR report / overview report, stacked and toggled via
   .debug-view-hidden so the 3D canvas + its data-collection loop never actually unmount) plus
   the pills row that replaced the old in-canvas 3D shelf. ── */
.debug-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #000;
}

.debug-main-area {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.debug-view-hidden {
  display: none !important;
}

.debug-canvas-wrap {
  position: absolute;
  inset: 0;
  background: #000;
}

.debug-canvas-wrap canvas {
  will-change: transform, opacity;
}

/* ── Drag handles — let the legend (left), errors panel (bottom), and by extension the main
   3D canvas (which just fills whatever space is left) be resized. Sizes are read/written
   directly by debugResize.js via inline styles on .debug-legend / .debug-errors-panel, and
   persisted to localStorage so they stick across sessions. ── */
.debug-resizer {
  flex-shrink: 0;
  background: #1a1e28;
  position: relative;
  z-index: 6;
}

.debug-resizer::after {
  content: "";
  position: absolute;
  background: transparent;
  transition: background 0.15s ease;
}

.debug-resizer:hover::after,
.debug-resizer:active::after {
  background: #4a6fa5;
}

.debug-resizer-vertical {
  width: 5px;
  cursor: col-resize;
  border-left: 1px solid #0d0f14;
  border-right: 1px solid #0d0f14;
}

.debug-resizer-vertical::after {
  inset: 0 -3px;
}

.debug-resizer-horizontal {
  height: 5px;
  cursor: row-resize;
  border-top: 1px solid #0d0f14;
  border-bottom: 1px solid #0d0f14;
}

.debug-resizer-horizontal::after {
  inset: -3px 0;
}

/* While actively dragging, disable text-selection/pointer weirdness across the whole window
   and force the resize cursor even if the mouse strays off the thin handle mid-drag. */
body.debug-resizing-x,
body.debug-resizing-x * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.debug-resizing-y,
body.debug-resizing-y * {
  cursor: row-resize !important;
  user-select: none !important;
}

.debug-canvas-wrap canvas {
  display: block;
  cursor: grab;
}

.debug-canvas-wrap canvas:active {
  cursor: grabbing;
}

/* Fixed screen-space badge naming whichever section is on stage. Deliberately NOT rendered
   inside the 3D scene — a floating 3D label always risks the camera angle projecting it over
   the shelf (or anything else) behind it. Pinned to the canvas corner, it never occludes
   anything and is always legible regardless of rotation/zoom. */
.debug-hero-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1.5px solid #7dd3ff;
  background: rgba(8, 11, 18, 0.82);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 5;
  animation: debug-hero-badge-in 0.35s ease-out;
}

.debug-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}

.debug-hero-badge-text {
  font-family: Consolas, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #eef3ff;
  white-space: nowrap;
}

.debug-hero-badge-tag {
  margin-left: 4px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #08111c;
  background: #7dd3ff;
  border-radius: 3px;
  padding: 1.5px 5px;
  white-space: nowrap;
}

@keyframes debug-hero-badge-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Fixed screen-space badge for whichever channel is "pinned" (drilled into from the legend) —
   sits just under the hero badge, same reasoning: never rendered inside the 3D scene itself. */
.debug-pin-badge {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 10px;
  border-radius: 6px;
  border: 1.5px solid #ffe066;
  background: rgba(8, 11, 18, 0.85);
  backdrop-filter: blur(2px);
  z-index: 5;
  animation: debug-hero-badge-in 0.3s ease-out;
  font-size: 11px;
}

.debug-pin-badge-star {
  color: #ffe066;
  text-shadow: 0 0 6px rgba(255, 224, 102, 0.7);
}

.debug-pin-badge-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #08111c;
  background: #ffe066;
  border-radius: 3px;
  padding: 1.5px 5px;
}

.debug-pin-badge-name {
  color: #eef3ff;
  font-weight: 700;
  white-space: nowrap;
}

.debug-pin-badge-value {
  font-weight: 800;
  white-space: nowrap;
}

.debug-pin-badge-close {
  border: none;
  background: transparent;
  color: #8a92a6;
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
}

.debug-pin-badge-close:hover {
  color: #ff8080;
}

/* ── Pills row — replaces the old in-canvas 3D "shelf" (which ate a big chunk of the stage
   floor just to show a handful of decluttered tiles). Flat HTML pills below the main graph
   take almost no vertical room and are far easier to read/click; the "expand/collapse"
   animation that used to be the shelf-swap tween now lives entirely in the genie CSS transform
   telemetry3d.js applies to the <canvas> itself (see focusSection in that file). ── */
.debug-pills-row {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
  padding: 8px 12px;
  max-height: 40vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(0deg, #0a0b0f 0%, #060708 100%);
  border-top: 1px solid #1a1e28;
}

.debug-pill {
  /* Fixed width so severity text (QUIET ↔ CRITICAL) and label length can't reflow how
     many pills fit per row — sized for the longest section name + "ELEVATED"/"CRITICAL". */
  box-sizing: border-box;
  width: 252px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  color: #c7cede;
  background: #12141c;
  border: 1px solid #262c3a;
  border-radius: 999px;
  padding: 5px 10px 5px 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.debug-pill:hover {
  background: #1a1f2b;
  transform: translateY(-1px);
}

.debug-pill-active {
  background: #182234;
  border-color: #7dd3ff;
  box-shadow: 0 0 10px rgba(125, 211, 255, 0.35);
}

.debug-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px currentColor;
}

.debug-pill-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.debug-pill-spark {
  width: 42px;
  height: 16px;
  flex-shrink: 0;
}

.debug-pill-spark polyline {
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.debug-pill-severity {
  /* Reserve space for the longest severity label so QUIET/HOT don't shrink the pill. */
  box-sizing: border-box;
  width: 4.8em;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1.5px 0;
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
}

/* Severity buckets — shared by pills, the Overview card grid, and the legend section glow.
   Mirrors telemetry3d.js's intensityInfo() thresholds/colors. */
.debug-pill-quiet .debug-pill-severity { background: #263043; color: #8fa8d6; }
.debug-pill-active .debug-pill-severity { background: #1e3a2c; color: #7dcea0; }
.debug-pill-elevated { border-color: rgba(255, 224, 102, 0.4); }
.debug-pill-elevated .debug-pill-severity { background: #3a3410; color: #ffe066; }
.debug-pill-hot { border-color: rgba(255, 179, 71, 0.55); animation: debug-pill-pulse-amber 1.6s ease-in-out infinite; }
.debug-pill-hot .debug-pill-severity { background: #3a2a10; color: #ffb347; }
.debug-pill-critical { border-color: rgba(255, 107, 107, 0.7); animation: debug-pill-pulse-red 1.1s ease-in-out infinite; }
.debug-pill-critical .debug-pill-severity { background: #3a1414; color: #ff6b6b; }

@keyframes debug-pill-pulse-amber {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 179, 71, 0.25); }
  50% { box-shadow: 0 0 14px rgba(255, 179, 71, 0.6); }
}

@keyframes debug-pill-pulse-red {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 107, 107, 0.35); }
  50% { box-shadow: 0 0 18px rgba(255, 107, 107, 0.75); }
}

/* ── Session Overview & IBKR Account report — flashy, non-graph "textual report" main-area
   views. Shown instead of the 3D canvas when there's no time-series to draw (session summary,
   point-in-time account facts) or by default on first load. ── */
.debug-report {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 22px 26px;
  background: radial-gradient(ellipse at top, #0d1220 0%, #000 70%);
}

.debug-overview-header {
  margin-bottom: 18px;
  animation: debug-report-in 0.4s ease-out;
}

.debug-overview-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #eef3ff;
  text-shadow: 0 0 16px rgba(125, 211, 255, 0.35);
}

.debug-overview-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #6e7690;
  letter-spacing: 0.02em;
}

.debug-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
  animation: debug-report-in 0.45s ease-out;
}

.debug-stat-card {
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(20, 24, 34, 0.9), rgba(10, 12, 18, 0.95));
  border: 1px solid #232838;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.debug-stat-clickable {
  cursor: pointer;
}

.debug-stat-clickable:hover {
  transform: translateY(-2px);
}

.debug-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7a849c;
  margin-bottom: 6px;
}

.debug-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #eef3ff;
  font-variant-numeric: tabular-nums;
}

.debug-stat-value-sm {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-stat-glow-blue { box-shadow: 0 0 0 1px rgba(125, 211, 255, 0.15), 0 8px 22px -12px rgba(125, 211, 255, 0.4); }
.debug-stat-glow-blue .debug-stat-value { color: #7dd3ff; }
.debug-stat-glow-green { box-shadow: 0 0 0 1px rgba(61, 220, 132, 0.18), 0 8px 22px -12px rgba(61, 220, 132, 0.4); }
.debug-stat-glow-green .debug-stat-value { color: #3ddc84; }
.debug-stat-glow-amber { box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.2), 0 8px 22px -12px rgba(255, 179, 71, 0.45); }
.debug-stat-glow-amber .debug-stat-value { color: #ffb347; }
.debug-stat-glow-red { box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.25), 0 8px 22px -12px rgba(255, 107, 107, 0.5); animation: debug-pill-pulse-red 1.4s ease-in-out infinite; }
.debug-stat-glow-red .debug-stat-value { color: #ff6b6b; }
.debug-stat-glow-dim { opacity: 0.75; }
.debug-stat-glow-dim .debug-stat-value { color: #6e7690; }

.debug-overview-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #5c6478;
  margin-bottom: 10px;
}

.debug-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  animation: debug-report-in 0.5s ease-out;
}

.debug-overview-card {
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(20, 24, 34, 0.9), rgba(10, 12, 18, 0.95));
  border: 1px solid #232838;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.debug-overview-card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: #3a4256;
}

.debug-overview-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.debug-overview-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}

.debug-overview-card-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: #d7dde6;
  letter-spacing: 0.02em;
}

.debug-overview-card-badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
}

.debug-overview-card.debug-pill-quiet .debug-overview-card-badge { background: #263043; color: #8fa8d6; }
.debug-overview-card.debug-pill-active .debug-overview-card-badge { background: #1e3a2c; color: #7dcea0; }
.debug-overview-card.debug-pill-elevated .debug-overview-card-badge { background: #3a3410; color: #ffe066; }
.debug-overview-card.debug-pill-hot .debug-overview-card-badge { background: #3a2a10; color: #ffb347; }
.debug-overview-card.debug-pill-critical .debug-overview-card-badge { background: #3a1414; color: #ff6b6b; }
.debug-overview-card.debug-pill-hot { border-color: rgba(255, 179, 71, 0.4); }
.debug-overview-card.debug-pill-critical { border-color: rgba(255, 107, 107, 0.5); animation: debug-pill-pulse-red 1.3s ease-in-out infinite; }

.debug-overview-card-spark {
  width: 100%;
  height: 32px;
  display: block;
  margin-bottom: 6px;
}

.debug-overview-card-spark polyline {
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
}

.debug-overview-card-hint {
  font-size: 9.5px;
  color: #5c6478;
  letter-spacing: 0.02em;
}

.debug-overview-card:hover .debug-overview-card-hint {
  color: #7dd3ff;
}

@keyframes debug-report-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── IBKR account flashy report — a big pulsing status ring + a grid of point-in-time facts.
   These aren't time-series channels, so there's no graph to show; this is the "textual report"
   equivalent, styled to match the rest of the debug window's aesthetic. ── */
.debug-ibkr-report-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  animation: debug-report-in 0.4s ease-out;
}

.debug-ibkr-report-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border: 2px solid #4a5164;
  background: radial-gradient(circle, rgba(20, 24, 34, 0.9), rgba(6, 7, 10, 0.95));
}

.debug-ibkr-report-ring.debug-ibkr-dot-ok {
  border-color: #3ddc84;
  color: #3ddc84;
  box-shadow: 0 0 24px rgba(61, 220, 132, 0.45);
  animation: debug-focus-pulse 2.2s ease-in-out infinite;
}

.debug-ibkr-report-ring.debug-ibkr-dot-warn {
  border-color: #ffd166;
  color: #ffd166;
  box-shadow: 0 0 24px rgba(255, 209, 102, 0.45);
}

.debug-ibkr-report-ring.debug-ibkr-dot-bad {
  border-color: #ff3b3b;
  color: #ff3b3b;
  box-shadow: 0 0 24px rgba(255, 59, 59, 0.5);
  animation: debugLivePulse 1.4s ease-in-out infinite;
}

.debug-ibkr-report-ring.debug-ibkr-dot-off {
  color: #4a5164;
}

.debug-ibkr-report-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #eef3ff;
  margin-top: 4px;
}

.debug-ibkr-report-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9aa4b8;
}

.debug-ibkr-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  animation: debug-report-in 0.5s ease-out;
}

.debug-ibkr-report-tile {
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(20, 24, 34, 0.9), rgba(10, 12, 18, 0.95));
  border: 1px solid #232838;
}

.debug-ibkr-report-tile-wide {
  grid-column: 1 / -1;
}

.debug-ibkr-report-tile-warn {
  border-color: rgba(255, 128, 128, 0.45);
}

.debug-ibkr-report-tile-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7a849c;
  margin-bottom: 6px;
}

.debug-ibkr-report-tile-value {
  font-size: 18px;
  font-weight: 800;
  color: #eef3ff;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.debug-ibkr-report-tile-warn .debug-ibkr-report-tile-value {
  color: #ff8080;
}

.debug-ibkr-report-tile-value-sm {
  font-size: 13px;
}

.debug-ibkr-report-tile-unit {
  font-size: 11px;
  font-weight: 600;
  color: #7a849c;
}

.debug-ibkr-report-tile-sub {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #7dd3ff;
}

.debug-ibkr-report-graphlink {
  margin-top: 22px;
  text-align: center;
}

.debug-ibkr-report-empty {
  text-align: center;
  color: #7a849c;
  padding: 30px;
}

.debug-ibkr-report-empty code {
  color: #ffd166;
  background: #1b1f29;
  padding: 1px 5px;
  border-radius: 3px;
}

.debug-ibkr-report-hint-chip {
  background: #c084fc !important;
}

/* ── Top API Calls / DB Table Sizes ranked bar-chart reports ─────────────────────────────── */

.debug-metric-picker {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  animation: debug-report-in 0.4s ease-out;
}

.debug-metric-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #232838;
  background: linear-gradient(160deg, rgba(20, 24, 34, 0.9), rgba(10, 12, 18, 0.95));
  color: #9aa4b8;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.debug-metric-btn:hover {
  transform: translateY(-1px);
  color: #eef3ff;
}

.debug-metric-btn-active {
  color: #eef3ff;
  border-color: #7dd3ff55;
  box-shadow: 0 0 0 1px rgba(125, 211, 255, 0.2), 0 8px 20px -12px rgba(125, 211, 255, 0.5);
  background: linear-gradient(160deg, rgba(30, 44, 60, 0.9), rgba(10, 14, 20, 0.95));
}

.debug-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: debug-report-in 0.5s ease-out;
}

.debug-bar-chart-empty {
  text-align: center;
  color: #7a849c;
  padding: 40px 10px;
}

.debug-bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 260px) 1fr 92px minmax(120px, 170px);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(18, 21, 30, 0.7), rgba(9, 11, 16, 0.8));
  border: 1px solid #1c2030;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.debug-bar-row:hover {
  border-color: #2c3348;
  transform: translateX(2px);
}

.debug-bar-row-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.debug-bar-method {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #7dd3ff;
}

.debug-bar-route {
  font-size: 12px;
  font-weight: 600;
  color: #d7dee9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Consolas', 'Cascadia Code', monospace;
}

.debug-bar-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #12151f;
  overflow: hidden;
}

.debug-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s cubic-bezier(.2, .8, .2, 1);
}

.debug-bar-fill-api {
  background: linear-gradient(90deg, #2a6f8f, #7dd3ff);
  box-shadow: 0 0 10px rgba(125, 211, 255, 0.5);
}

.debug-bar-fill-db {
  background: linear-gradient(90deg, #2f7a52, #6ee7b7);
  box-shadow: 0 0 10px rgba(110, 231, 183, 0.5);
}

.debug-bar-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 13px;
  font-weight: 800;
  color: #eef3ff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.debug-bar-sub {
  font-size: 10px;
  color: #6e7690;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-bar-new-badge {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0a0b0f;
  background: #6ee7b7;
  box-shadow: 0 0 8px rgba(110, 231, 183, 0.6);
  animation: debug-pill-pulse-red 1.6s ease-in-out infinite;
  animation-name: debug-bar-new-pulse;
}

@keyframes debug-bar-new-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(110, 231, 183, 0.5); }
  50% { box-shadow: 0 0 14px rgba(110, 231, 183, 0.9); }
}

.debug-bar-growth {
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.debug-unavailable {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9aa4b8;
  padding: 24px;
}

.debug-unavailable h2 {
  color: #e7ecf5;
  margin-bottom: 8px;
}

.debug-unavailable p {
  margin-bottom: 16px;
}

/* --- IBKR Gateway status panel (sits in the legend sidebar) --- */

.debug-ibkr-panel {
  margin-top: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #1a1e28;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease;
}

.debug-ibkr-panel:hover {
  background: #10131b;
}

.debug-ibkr-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #d7dde6;
}

.debug-ibkr-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.debug-ibkr-dot-ok {
  background: #3ddc84;
  box-shadow: 0 0 7px 1px rgba(61, 220, 132, 0.7);
}

.debug-ibkr-dot-warn {
  background: #ffd166;
  box-shadow: 0 0 7px 1px rgba(255, 209, 102, 0.7);
}

.debug-ibkr-dot-bad {
  background: #ff3b3b;
  box-shadow: 0 0 7px 1px rgba(255, 59, 59, 0.75);
  animation: debugLivePulse 1.4s ease-in-out infinite;
}

.debug-ibkr-dot-off {
  background: #4a5164;
}

.debug-ibkr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 6px;
  font-size: 11px;
  color: #aab4c8;
}

.debug-ibkr-row span:first-child {
  color: #7a849c;
  white-space: nowrap;
}

.debug-ibkr-row span:last-child {
  color: #e7ecf5;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-ibkr-warn-text,
.debug-ibkr-warn-text span:last-child {
  color: #ffb454 !important;
}

.debug-ibkr-error-row span:last-child {
  color: #ff8080 !important;
}

/* --- Errors & Warnings panel (bottom strip, tails the Serilog file sink) --- */

.debug-errors-panel {
  flex-shrink: 0;
  height: 230px;
  min-height: 80px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  background: #07080b;
}

.debug-errors-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 14px;
  background: linear-gradient(180deg, #14161c 0%, #0a0b0f 100%);
  border-bottom: 1px solid #1f2430;
}

.debug-errors-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #cfd6e6;
}

.debug-errors-title-icon {
  color: #ffd166;
}

.debug-errors-hint {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #4a5164;
  margin-left: 6px;
}

.debug-errors-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
}

.debug-errors-count-warn {
  background: #3a2f10;
  color: #ffd166;
}

.debug-errors-count-err {
  background: #3a1414;
  color: #ff8080;
}

.debug-errors-count-fatal {
  background: #ff3b3b;
  color: #0a0b0f;
}

.debug-errors-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.debug-errors-select {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #d7dde6;
  background: #1b1f29;
  border: 1px solid #2b3140;
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
}

.debug-errors-body {
  flex: 1;
  overflow-y: auto;
  font-size: 11.5px;
}

.debug-errors-empty {
  padding: 18px;
  color: #5c6478;
  text-align: center;
}

.debug-errors-row {
  display: grid;
  grid-template-columns: 68px 56px 84px 220px 1fr;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  border-bottom: 1px solid #14161c;
  white-space: nowrap;
}

.debug-errors-row:hover {
  background: #12141c;
}

.debug-errors-time {
  color: #5c6478;
  font-variant-numeric: tabular-nums;
}

.debug-errors-category {
  color: #8fb4ff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-errors-source {
  color: #6e7690;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-errors-message {
  color: #c7cede;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  text-align: center;
}

.debug-badge-warn {
  background: #3a2f10;
  color: #ffd166;
}

.debug-badge-error {
  background: #3a1414;
  color: #ff8080;
}

.debug-badge-fatal {
  background: #ff3b3b;
  color: #0a0b0f;
}

.debug-badge-info {
  background: #1e2a3d;
  color: #8fb4ff;
}


/* OID mode badge — shared by Home card, OID page, EOD detail */
.oid-mode-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--mud-palette-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oid-mode-badge-inline {
  margin-left: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
}