.metric-gauge-slot,
.test-pic-gauge-shell,
.test-consideration-gauge-slot {
  --test-gauge-width: clamp(230px, 86%, 360px);
  --test-gauge-height: calc(var(--test-gauge-width) * 0.328);
  --test-gauge-badge-gap: calc(var(--test-gauge-width) * 0.018);
  --test-gauge-badge-offset: calc(var(--test-gauge-width) * 0.012);
  --test-gauge-icon-size: calc(var(--test-gauge-width) * 0.088);
  --test-gauge-label-size: calc(var(--test-gauge-width) * 0.041);
  --test-gauge-pill-height: calc(var(--test-gauge-width) * 0.068);
  --test-gauge-pill-width: calc(var(--test-gauge-width) * 0.205);
  --test-gauge-pill-icon-size: calc(var(--test-gauge-width) * 0.052);
  min-height: calc(var(--test-gauge-height) + var(--test-gauge-icon-size) + 10px);
}

.test-consideration-metrics-page .tile-card {
  border: 1px solid rgba(126, 148, 198, 0.24) !important;
  border-radius: 0.7rem !important;
  background: linear-gradient(135deg, #1e2a4a 0%, #1B1D3C 40%, #162040 100%) !important;
  box-shadow: 0 1.15rem 2.8rem rgba(0, 0, 0, 0.18) !important;
}

.test-consideration-metrics-page .card-body {
  min-width: 0;
}

.metric-page-tabs {
  border-bottom: 1px solid rgba(126, 148, 198, 0.24) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.metric-page-tabs .nav-item { margin-bottom: -1px; }

.metric-page-tabs .nav-link {
  color: rgba(226, 232, 240, 0.72) !important;
  border: 1px solid transparent !important;
  border-radius: 0.35rem 0.35rem 0 0 !important;
  background: transparent !important;
}

.metric-page-tabs .nav-link:hover {
  color: #f8fafc !important;
  border-color: rgba(126, 148, 198, 0.24) !important;
}

.metric-page-tabs .nav-link.active,
.metric-page-tabs .nav-item.show .nav-link {
  color: #162040 !important;
  border-color: #ffffff #ffffff transparent !important;
  background-color: #ffffff !important;
}

.test-consideration-chart-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.test-consideration-chart-header h6 {
  margin: 0;
  flex: 0 0 auto;
}

.test-consideration-chart-toggle {
  flex: 1 1 auto;
  min-width: 0;
}

.test-metric-trend-dropdown-wrapper {
  flex: 0 0 210px;
  margin-left: auto;
}

.test-metric-trend-dropdown { width: 210px; }
.test-metric-trend-dropdown .Select-control,
.test-metric-trend-dropdown .Select-menu-outer,
.test-metric-trend-dropdown .Select-value,
.test-metric-trend-dropdown .Select-placeholder {
  background: rgba(8, 14, 34, 0.88) !important;
  color: #f8fafc !important;
}
.test-metric-trend-dropdown .Select-control {
  height: 34px;
  border: 1px solid rgba(126, 148, 198, 0.48);
  border-radius: 5px;
  box-shadow: none;
}
.test-metric-trend-dropdown .Select-value,
.test-metric-trend-dropdown .Select-placeholder { line-height: 32px; font-size: 0.82rem; }
.test-metric-trend-dropdown .Select-arrow-zone { width: 32px; }
.test-metric-trend-dropdown .Select-arrow { border-top-color: rgba(255, 255, 255, 0.74); }
.test-metric-trend-dropdown.is-focused .Select-control {
  border-color: #18f0ff;
  box-shadow: 0 0 0 2px rgba(24, 240, 255, 0.14);
}
.test-metric-trend-dropdown .Select-menu-outer {
  margin-top: 5px;
  border: 1px solid rgba(126, 148, 198, 0.38);
  border-radius: 5px;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.test-metric-trend-dropdown .Select-input > input { color: #f8fafc; }
.test-metric-trend-dropdown .VirtualizedSelectOption { background: rgba(8, 14, 34, 0.98); color: #f8fafc; font-size: 0.82rem; }
.test-metric-trend-dropdown .VirtualizedSelectFocusedOption { background: rgba(24, 240, 255, 0.16); color: #ffffff; }

.test-consideration-chart-body,
.test-consideration-ucs-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.test-consideration-chart-graph,
.test-consideration-ucs-graph {
  flex: 1 1 0;
  height: auto !important;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: transparent !important;
}

.test-consideration-metrics-page [data-dash-is-loading="true"],
.test-consideration-metrics-page .dash-graph,
.test-consideration-metrics-page .dash-graph > div,
.test-consideration-metrics-page .js-plotly-plot,
.test-consideration-metrics-page .plot-container,
.test-consideration-metrics-page .svg-container,
.test-consideration-metrics-page .main-svg {
  background: transparent !important;
}

.test-consideration-metrics-page .main-svg .bg {
  fill: transparent !important;
}

.test-consideration-metrics-page .dash-graph[data-dash-is-loading="true"] {
  opacity: 0 !important;
}

.test-consideration-intro-body {
  max-height: 104px;
  overflow-y: auto;
  padding-right: 0.35rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.45;
}

.test-consideration-intro-body::-webkit-scrollbar { width: 6px; }
.test-consideration-intro-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 999px; }
.test-consideration-intro-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); border-radius: 999px; }

.metric-gauge,
.test-pic-gauge-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: calc(var(--test-gauge-height) + var(--test-gauge-icon-size) + 10px);
}

.metric-gauge-visual, .test-pic-gauge-visual { width: min(100%, var(--test-gauge-width)); height: var(--test-gauge-height); }
.metric-gauge-svg, .test-pic-gauge-svg { display: block; width: 100%; height: var(--test-gauge-height); object-fit: contain; overflow: visible; }
.metric-gauge-readout, .test-pic-gauge-readout { display: flex; align-items: center; justify-content: center; margin-top: var(--test-gauge-badge-offset); }
.test-consideration-gauge-title { padding-right: 0; }

.metric-gauge-change, .test-pic-change-badge { display: inline-flex; align-items: center; justify-content: center; gap: var(--test-gauge-badge-gap); color: rgba(255, 255, 255, 0.72); font-size: var(--test-gauge-label-size); line-height: 1.15; }
.metric-gauge-change-pill, .test-pic-change-pill { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0; height: var(--test-gauge-pill-height); }
.metric-gauge-change-icon, .test-pic-change-badge-icon { width: calc(var(--test-gauge-pill-icon-size) * 1.22); height: calc(var(--test-gauge-pill-icon-size) * 1.40); flex: 0 0 auto; }
.test-pic-change-badge-icon-placeholder { visibility: hidden; display: inline-block; }
.metric-gauge-change-label, .test-pic-change-badge-label { color: rgba(255, 255, 255, 0.58); font-weight: 400; font-size: var(--test-gauge-label-size); white-space: nowrap; }
.metric-gauge-change-detail, .test-pic-change-badge-detail { font-size: calc(var(--test-gauge-label-size) * 1.30); font-weight: 600; }
.metric-gauge-change:not(.metric-gauge-change-directional) .metric-gauge-change-detail,
.test-pic-change-badge:not(.test-pic-change-badge-directional) .test-pic-change-badge-detail { font-size: calc(var(--test-gauge-label-size) * 1.65); font-weight: 700; }
.metric-gauge-change:not(.metric-gauge-change-directional) .metric-gauge-change-icon,
.test-pic-change-badge:not(.test-pic-change-badge-directional) .test-pic-change-badge-icon { width: calc(var(--test-gauge-pill-icon-size) * 1.50); height: calc(var(--test-gauge-pill-icon-size) * 1.72); }
.metric-gauge-change-up .metric-gauge-change-icon,
.metric-gauge-change-up .metric-gauge-change-detail,
.test-pic-change-badge-up .test-pic-change-badge-icon,
.test-pic-change-badge-up .test-pic-change-badge-detail { color: #06A26B !important; }
.metric-gauge-change-down .metric-gauge-change-icon,
.metric-gauge-change-down .metric-gauge-change-detail,
.test-pic-change-badge-down .test-pic-change-badge-icon,
.test-pic-change-badge-down .test-pic-change-badge-detail { color: #FF7775 !important; }
.metric-gauge-change-directional .metric-gauge-change-icon,
.metric-gauge-change-directional .metric-gauge-change-detail,
.test-pic-change-badge-directional .test-pic-change-badge-icon,
.test-pic-change-badge-directional .test-pic-change-badge-detail { opacity: 0.65; }
.metric-gauge-change-neutral .metric-gauge-change-icon,
.metric-gauge-change-neutral .metric-gauge-change-detail,
.test-pic-change-badge-neutral .test-pic-change-badge-icon,
.test-pic-change-badge-neutral .test-pic-change-badge-detail { color: #FDC501 !important; }
.test-pic-empty { display: grid; min-height: 220px; place-items: center; color: rgba(255, 255, 255, 0.72); }

.test-consideration-gauge-slot .test-pic-gauge-shell,
.test-consideration-gauge-slot .test-pic-gauge-custom { min-height: calc(var(--test-gauge-height) + var(--test-gauge-icon-size) + 10px); }
.test-consideration-gauge-slot .test-pic-gauge-readout { margin-top: calc(var(--test-gauge-badge-offset) * 1.25); }

@media (max-width: 991.98px) {
  .test-pic-gauge-shell, .test-consideration-gauge-slot { --test-gauge-width: clamp(230px, 60vw, 265px); }
  .test-consideration-intro-body { max-height: none; overflow-y: visible; }
  .test-pic-gauge-readout { margin-top: var(--test-gauge-badge-offset); }
}

@media (min-width: 992px) {
  .test-consideration-gauge-slot { --test-gauge-width: 265px; }
}

@media (max-width: 720px) {
  .metric-page-tabs .nav-item { flex: 1 1 auto; }
  .metric-page-tabs .nav-link { width: 100%; }
  .test-consideration-gauge-slot { --test-gauge-width: clamp(230px, 70vw, 320px); }
  .test-metric-trend-dropdown-wrapper { flex-basis: min(210px, 55vw); }
  .test-metric-trend-dropdown { width: 100%; }
}