/* Anaqsim brand — aligned with cloud app (tailwind primary/secondary) */
:root {
  --anaqsim-primary: #4158f4;
  --anaqsim-primary-light: #3385ff;
  --anaqsim-navy: #030040;
  --anaqsim-pale: #f8f8f8;
  --anaqsim-mid: #888c96;
  --anaqsim-dark: #333740;
}

/* Material primary / accent overrides */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #4158f4;
  --md-primary-fg-color--light: #6b7af6;
  --md-primary-fg-color--dark: #2f3fd4;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #3385ff;
  --md-typeset-a-color: #4158f4;
  --md-default-bg-color: #ffffff;
  --md-footer-bg-color: #030040;
  --md-footer-bg-color--dark: #02002e;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #4158f4;
  --md-primary-fg-color--light: #6b7af6;
  --md-primary-fg-color--dark: #2f3fd4;
  --md-accent-fg-color: #3385ff;
  --md-typeset-a-color: #6b7af6;
  --md-footer-bg-color: #030040;
}

/* Light header keeps the primary black/blue logo legible. */
.md-header {
  background: #ffffff;
  color: var(--anaqsim-navy);
  border-bottom: 1px solid #e7e8ed;
}

.md-header__button,
.md-header__title,
.md-search__icon {
  color: var(--anaqsim-navy);
}

.md-search__form {
  background-color: #f1f2f5;
}

.md-search__input,
.md-search__input::placeholder {
  color: var(--anaqsim-dark);
}

/* Place the colour-scheme switch after the search control. */
.md-header__option[data-md-component="palette"] {
  order: 1;
}

.md-tabs {
  background: #030040;
}

/* Nested section pages sit under Dashboard, indented past Dashboard and Modelling screen. */
.md-nav__item--section .md-nav__item--section > .md-nav {
  margin-left: 0;
}

.md-nav__item--section .md-nav__item--section > .md-nav__link,
.md-nav__item--section .md-nav__item--section > .md-nav__container > .md-nav__link {
  font-weight: 400;
}

/* Use the wordmark in the header and the square mark in the navigation drawer. */
.md-header__button.md-logo .anaqsim-wordmark {
  height: 1.6rem;
}

.md-header__button.md-logo .anaqsim-mark,
.md-nav__button.md-logo .anaqsim-wordmark {
  display: none;
}

.md-nav__button.md-logo .anaqsim-mark {
  width: 1.6rem;
  height: 1.6rem;
  background: #ffffff;
  border-radius: 0.2rem;
}

.md-header__option[data-md-component="palette"] .md-icon svg {
  fill: none;
}

/* Screenshot with hover regions that link to the matching description. */
.md-typeset .shot {
  position: relative;
  display: block;
  margin: 1.25rem 0;
}

.md-typeset .shot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.md-typeset .shot__hot {
  position: absolute;
  border: 2px solid rgba(146, 90, 20, 0.4);
  border-radius: 4px;
  background: rgba(180, 120, 40, 0.08);
  z-index: 1;
}

.md-typeset .shot__hot:hover,
.md-typeset .shot__hot:focus-visible {
  z-index: 3;
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.22);
  outline: none;
}

.md-typeset .shot__hot::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--anaqsim-dark);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.md-typeset .shot__hot:hover::after,
.md-typeset .shot__hot:focus-visible::after {
  opacity: 1;
}

/* Small control icons that sit in a sentence. */
.md-typeset img.inline-icon {
  display: inline;
  width: 1.15em;
  height: 1.15em;
  max-width: none;
  max-height: none;
  margin: 0 0.15em;
  vertical-align: -0.25em;
  object-fit: contain;
}

/* Keep legacy documentation figures compact and centred. */
.md-typeset img[src*="documentation_images"] {
  display: block;
  width: auto;
  max-width: 85%;
  max-height: 30rem;
  margin: 1.25rem auto;
  object-fit: contain;
}

@media screen and (max-width: 44.984375em) {
  .md-typeset img[src*="documentation_images"] {
    max-width: 100%;
  }
}

/* Match sticky navigation headings to their sidebar backgrounds. */
.md-sidebar .md-nav__title,
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
  background: transparent;
  box-shadow: none;
}

.md-sidebar .md-nav__title::after,
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link::before {
  display: none;
}

/* Soft page background like app palegray */
[data-md-color-scheme="default"] .md-main {
  background-color: var(--anaqsim-pale);
}

[data-md-color-scheme="default"] .md-content {
  background-color: #ffffff;
}

.md-typeset h1,
.md-typeset h2 {
  color: var(--anaqsim-navy);
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #ffffff;
}

/* Admonitions / buttons feel closer to app primary */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--anaqsim-primary);
}

.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
  background-color: rgba(65, 88, 244, 0.1);
}

.md-typeset .admonition.note > .admonition-title::before,
.md-typeset details.note > summary::before {
  background-color: var(--anaqsim-primary);
}

/* Keep screenshots distinct from the documentation page. */
.md-typeset img.app-shot,
.md-typeset .shot img {
  border: 1px solid #d9dee5;
  border-radius: 0.35rem;
}

.md-typeset .shot--labeled > p {
  margin: 0;
}

.md-typeset .shot--labeled .shot__hot {
  font-size: 0;
}

.md-typeset .shot--labeled .shot__hot--region::after {
  top: 0.45rem;
}

.md-typeset .shot--labeled .shot__hot--right::after {
  right: 0;
  left: auto;
  transform: none;
}

.md-typeset .shot--labeled .shot__hot--left::after {
  left: 0;
  transform: none;
}

/* The Model Build tab and sidebar form a single clickable region. */
.md-typeset .shot--labeled .shot__hot--model-build {
  clip-path: polygon(0 0, 49.7% 0, 49.7% 5.4%, 100% 5.4%, 100% 100%, 0 100%);
}

.md-typeset .shot--labeled .shot__hot--model-build::after {
  top: 7%;
  max-width: 100%;
  white-space: normal;
}

.md-typeset .shot__hot--display {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.2);
}

.md-typeset .shot__hot--probes {
  border-color: #087e74;
  background: rgba(8, 126, 116, 0.2);
}

.md-typeset .shot__hot--views {
  border-color: #823ec1;
  background: rgba(130, 62, 193, 0.2);
}