/* Import docs B's text font (Inter) so both docs share the same typography.
   @import must be the first statement in the stylesheet. */
@import url('https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,500,600,700&display=fallback');

/* Unify the color palette across both docs, aligned to docs B (Observability). */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1a1a2e !important;
  --md-primary-fg-color--light: #0a60ff !important;
  --md-primary-fg-color--dark: #0f0f1e !important;
  --md-accent-fg-color: #0891b2 !important;
  --md-typeset-a-color: #0a60ff !important;
  --md-text-font: "Inter";
}

/* --- Unified header (docs B style: light, blurred, dark text) --- */
.md-header {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1a1a2e !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.md-header__title,
.md-header__topic {
  color: #1a1a2e !important;
  font-weight: 600;
}
.md-header__button,
.md-header__source {
  color: #1a1a2e !important;
}

/* Search field: light to match the light header. */
.md-search__input {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1a1a2e !important;
}
.md-search__input::placeholder {
  color: rgba(26, 26, 46, 0.55) !important;
}
.md-search__icon {
  color: rgba(26, 26, 46, 0.7) !important;
}

/* --- Unified navigation tabs (docs B style: white, dark links) --- */
.md-tabs {
  background: #ffffff !important;
  color: #1a1a2e !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.md-tabs__link {
  color: rgba(26, 26, 46, 0.55) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}
.md-tabs__link:hover {
  color: #1a1a2e !important;
}
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: #1a1a2e !important;
  font-weight: 600;
}

/* OTT (Monitoring) only: its header logo (wxsre.svg) is white and hidden.
   Show it left of the title and darken it so it reads on the light header. */
[data-md-color-primary="indigo"] .md-header__button.md-logo {
  display: inline-flex !important;
  align-items: center;
}
[data-md-color-primary="indigo"] .md-header__button.md-logo img,
[data-md-color-primary="indigo"] .md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
  filter: brightness(0);
}

/* OTT (Monitoring) only: match docs B content width (1220px) so both pages
   use the same content-to-page ratio. OTT's own rule sets it wider. */
[data-md-color-primary="indigo"] .md-grid {
  max-width: 1220px !important;
}