/*
  The Support brand, applied to Material.

  VIOLET, not the red (2026-08-27). Support wears the aurora gradient as its
  mark (the wordmark's b and dot, the favicon); everything that must be one
  solid colour takes the gradient's anchor, royal violet #6E4BD8 — the same
  ramp the portal's Fluent theme derives every state from
  (docs/support-color-assesment.md). The header stays WHITE with dark text,
  matching the portal's own bar. Values are duplicated rather than imported
  because MkDocs is a Python build with no access to the TypeScript package.

  If the brand changes, change these. There is no build step that will tell you.
*/

:root {
  /* Fluent's stack, which is what Business Central and the portal render in.
     Material appends its own system fallbacks after these. */
  --md-text-font: "Segoe UI Variable Text", "Segoe UI";
  --md-code-font: "Cascadia Mono", "Cascadia Code", Consolas;

  /* Icon for the custom `sample` admonition, declared below. */
  --md-admonition-icon--sample: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z"/></svg>');
}

/* --- light ---------------------------------------------------------------- */

[data-md-color-primary="custom"] {
  /* The portal's header is white with dark text; the docs header matches.
     The dark is the huisstijl ink — one dark across the brand, not a
     near-black that only nearly matches it. */
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #0f0826;  /* the crossbar band, in ink */
  --md-primary-bg-color: #0f0826;        /* text ON the header */
  --md-primary-bg-color--light: rgba(15, 8, 38, 0.6);
}

/* A white header needs its own edge, exactly as the portal's bar has one. */
.md-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: #6140c2;         /* ramp 70 — one step darker for hover */
  --md-accent-fg-color--transparent: rgba(110, 75, 216, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #e4e2f6;  /* ramp 150 */
}

/*
  Body links sit on white and documentation is read at length by people who
  did not choose to be reading it. Ramp 70 passes AA at 6.95:1.
*/
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #6140c2;         /* violet passes AA on white at this step */
}

/* --- dark ----------------------------------------------------------------- */

/*
  Material's slate surface sits near #1f2129. The light end of the ramp is what
  stays legible there — the same adjustment theme.ts documents for Fluent's dark
  theme, where the derived brand foregrounds read washed out and get pinned
  lighter.
*/
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #9d93e1;         /* ramp 110 — 5.88:1 on slate */
}

[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #1f2129;        /* the slate surface itself */
  --md-primary-fg-color--light: #262933;
  --md-primary-fg-color--dark: #14161c;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #9d93e1;
  --md-accent-fg-color--transparent: rgba(157, 147, 225, 0.15);
}

/* --- structure ------------------------------------------------------------ */

/*
  A measure, not a full-bleed page. Material's default content column runs the
  full width of the viewport on a wide monitor, which puts documentation at
  180 characters a line. The portal settles at 1120px for the same reason.
*/
.md-grid {
  max-width: 1220px;
}

/*
  Fluent headings are semibold and full-strength. Material's default h1 is weight
  300 in a lightened foreground, which reads as a different product to anyone
  arriving here from the portal — the whole reason for sharing a brand ramp is
  that the two should not feel like separate companies.
*/
.md-typeset h1 {
  font-weight: 600;
  color: var(--md-default-fg-color);
  letter-spacing: -0.01em;
}

.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Field-reference tables read better with a firmer header than the default. */
.md-typeset table:not([class]) th {
  font-weight: 600;
}

/* --- the cross-site strip ------------------------------------------------- */

/*
  Sits directly under the header and names the other half of the pair. Both sites
  carry the same strip so a reader moving between them stays inside one product;
  see overrides/main.html.
*/
.bd-crossbar {
  background-color: var(--md-primary-fg-color--dark);
  color: #ffffff;
  font-size: 0.7rem;
}

.bd-crossbar__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0.3rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.bd-crossbar__label {
  font-weight: 600;
  opacity: 0.85;
}

.bd-crossbar__link {
  margin-left: auto;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.bd-crossbar__link:hover,
.bd-crossbar__link:focus {
  text-decoration: underline;
}

/* --- the sample-content banner -------------------------------------------- */

/*
  Every page of the POC Sandbox docs carries one of these. It has to be
  impossible to skim past: the failure it guards against is a customer reading
  fictional documentation about a product that does not exist and believing it.

  Amber rather than red — red is reserved for warnings about the reader's own
  data, and a colour that means two things means neither.
*/
.md-typeset .admonition.sample,
.md-typeset details.sample {
  border-color: #bf8700;
}

.md-typeset .sample > .admonition-title,
.md-typeset .sample > summary {
  background-color: rgba(191, 135, 0, 0.12);
}

.md-typeset .sample > .admonition-title::before,
.md-typeset .sample > summary::before {
  background-color: #bf8700;
  -webkit-mask-image: var(--md-admonition-icon--sample);
          mask-image: var(--md-admonition-icon--sample);
}

/* --- the wordmark header -------------------------------------------------- */

/*
  The logo partial inlines the full bydynamics wordmark (currentColor + the
  brand-red marks), so the header reads exactly like the portal's bar. The
  bold "bydynamics Docs" title next to it is therefore redundant furniture:
  its text is muted to zero and replaced with a quiet "Docs" label. site_name
  stays "bydynamics Docs" for the browser tab and search results — only the
  header rendering changes (2026-08-26).
*/
.md-header__button.md-logo {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.md-header__button.md-logo .bd-wordmark {
  /* 1.48rem, not 1.05: the payoff lockup's box is 824.11 tall against the
     horizontal's 593.91, so at an equal height the wordmark inside it renders
     29% smaller. x1.41 holds it at the size the header was designed around.
     See docs/portal-lockup-assesment.md. */
  height: 1.48rem;
  width: auto;
  display: block;
  color: var(--md-primary-bg-color);
}
.md-header__topic:first-child .md-ellipsis {
  font-size: 0;
}
.md-header__topic:first-child .md-ellipsis::after {
  content: "Docs";
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--md-primary-bg-color--light);
}

/*
  The sidebar prints the full site_name too, double-branding the same way the
  header title did — the wordmark above it already says whose docs these are.
  Same treatment: the text collapses to zero and a quiet "Docs" takes its
  place. site_name itself stays "bydynamics Docs" for the tab and search.
*/
.md-nav--primary > .md-nav__title {
  font-size: 0;
}
.md-nav--primary > .md-nav__title::after {
  content: "Docs";
  font-size: 0.7rem;
  font-weight: 700;
}