/* The manual takes its look from the app: the color tokens, font stack, radius, header and sidebar
   styling below mirror src/Frontend/src/index.css and src/Frontend/src/layouts/. When the app's
   default palette changes, change it here too. */

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root,
[data-md-color-scheme="default"] {
  --app-background: hsl(35 20% 98%);
  --app-background-soft: hsl(35 30% 95%);
  --app-card: hsl(0 0% 100%);
  --app-border: hsl(35 25% 88%);
  --app-text-primary: hsl(220 20% 18%);
  --app-text-strong: hsl(220 12% 38%);
  --app-text-secondary: hsl(220 10% 45%);
  --app-text-muted: hsl(220 10% 60%);
  --app-primary: hsl(45 93% 53%);
  --app-primary-hover: hsl(45 93% 47%);
  --app-primary-foreground: hsl(30 10% 14%);
  --app-accent: hsl(45 100% 95%);
  --app-accent-foreground: hsl(220 15% 30%);
  /* Gold is too light for link text on a light background; links use a darkened gold. */
  --app-link: hsl(40 85% 32%);
  --app-radius: 0.6rem;
}

[data-md-color-scheme="slate"] {
  --app-background: hsl(0 0% 10%);
  --app-background-soft: hsl(0 0% 15%);
  --app-card: hsl(0 0% 12%);
  --app-border: hsl(0 0% 25%);
  --app-text-primary: hsl(0 0% 95%);
  --app-text-strong: hsl(0 0% 73%);
  --app-text-secondary: hsl(0 0% 65%);
  --app-text-muted: hsl(0 0% 55%);
  --app-primary: hsl(40 75% 65%);
  --app-primary-hover: hsl(40 70% 55%);
  --app-primary-foreground: hsl(30 10% 14%);
  --app-accent: hsl(0 0% 18%);
  --app-accent-foreground: hsl(0 0% 95%);
  --app-link: hsl(40 75% 65%);
}

/* Material's own variables, mapped onto the app tokens. */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--app-background);
  --md-default-fg-color: var(--app-text-primary);
  --md-default-fg-color--light: var(--app-text-secondary);
  --md-default-fg-color--lighter: var(--app-text-muted);
  --md-default-fg-color--lightest: var(--app-border);
  --md-typeset-color: var(--app-text-primary);
  --md-typeset-a-color: var(--app-link);
  --md-accent-fg-color: var(--app-primary-hover);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--app-primary) 15%, transparent);
  /* The header is the page background with dark text, as in the app — not a colored bar. */
  --md-primary-fg-color: var(--app-background);
  --md-primary-fg-color--light: var(--app-background);
  --md-primary-fg-color--dark: var(--app-background);
  --md-primary-bg-color: var(--app-text-primary);
  --md-primary-bg-color--light: var(--app-text-secondary);
  --md-footer-bg-color: var(--app-background-soft);
  --md-footer-bg-color--dark: var(--app-background-soft);
  --md-footer-fg-color: var(--app-text-primary);
  --md-footer-fg-color--light: var(--app-text-secondary);
  --md-footer-fg-color--lighter: var(--app-text-muted);
  --md-code-bg-color: var(--app-background-soft);
}

/* The app's system font stack. */
:root {
  --md-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

body,
input {
  font-family: var(--md-text-font-family);
}

/* ── Header ────────────────────────────────────────────────────────────── */

.md-header,
.md-header--shadow {
  box-shadow: none;
  border-bottom: 1px solid var(--app-border);
}

.md-header__inner {
  height: 4rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
  width: 2rem;
}

.md-header__title {
  font-weight: 600;
  font-size: 1rem;
}

/* The search field looks like the app's inputs: card surface, border, rounded. */
.md-search__form,
.md-search__form:hover {
  background-color: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: var(--app-text-secondary);
}

/* ── Sidebar navigation ────────────────────────────────────────────────── */

@media screen and (min-width: 76.25em) {
  /* Section titles: uppercase and spaced like the app's sidebar section labels, but bold and in full
     text color, with clear space above, so a section reads as a heading over its pages. */
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-text-primary);
    margin-top: 1.8em;
    margin-bottom: 0.3em;
    padding-left: 0;
    margin-left: 0;
  }

  /* A section with its own overview page puts the title in a link inside the wrapper above; the link
     carries the title look too, not the look of a page entry. */
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link > a.md-nav__link {
    font-weight: 600;
    color: var(--app-text-primary);
    padding-left: 0;
  }

  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link > a.md-nav__link:hover {
    background: none;
    color: var(--app-primary-hover);
  }

  .md-nav--primary > .md-nav__title {
    display: none;
  }
}

.md-nav__link {
  border-radius: calc(var(--app-radius) - 0.15rem);
  font-weight: 400;
  color: var(--app-text-strong);
}

.md-nav--primary .md-nav__item .md-nav__link {
  padding: 0.4em 0.6em;
  margin-top: 0.1em;
}

.md-nav--primary .md-nav__link:hover {
  background-color: var(--app-background-soft);
  color: var(--app-text-primary);
}

/* The current page: soft gold surface and a gold bar on the left, as the app marks the active row. */
.md-nav--primary a.md-nav__link--active {
  position: relative;
  background-color: var(--app-accent);
  color: var(--app-accent-foreground);
  font-weight: 600;
}

.md-nav--primary a.md-nav__link--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background-color: var(--app-primary);
}

/* Table of contents on the right: quiet, with the current section emphasized. */
.md-nav--secondary .md-nav__link {
  font-weight: 400;
  color: var(--app-text-secondary);
}

.md-nav--secondary .md-nav__link--active {
  color: var(--app-text-primary);
  font-weight: 600;
}

.md-nav__title,
.md-nav--secondary .md-nav__title {
  color: var(--app-text-secondary);
  background-color: transparent;
  box-shadow: none;
}

/* ── Content ───────────────────────────────────────────────────────────── */

/* Body text a little smaller than Material's default, and bold only half a step up, so a page reads
   as calmly as the app does. */
.md-typeset {
  font-size: 0.75rem;
  line-height: 1.65;
}

.md-typeset strong {
  font-weight: 600;
}

.md-typeset h1 {
  font-size: 1.75em;
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: 0.4em;
}

/* The one-line summary under the page title. */
.md-typeset h1 + p {
  font-size: 1.05em;
  color: var(--app-text-secondary);
}

/* Each task starts with a rule above its heading, so the page reads as separate sections. */
.md-typeset h2 {
  font-size: 1.25em;
  font-weight: 600;
  color: var(--app-text-primary);
  margin-top: 2.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--app-border);
}

.md-typeset h3 {
  font-size: 1.05em;
  font-weight: 600;
  color: var(--app-text-primary);
  margin-top: 1.8em;
}

.md-typeset a:hover {
  color: var(--app-primary-hover);
}

/* Numbered steps: the number in a gold circle with dark text, like the app's primary buttons, so a
   run of steps stands apart from the explanatory text. Top-level ordered lists only. */
.md-typeset > ol {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}

.md-typeset > ol > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4em;
  margin-bottom: 0.7em;
}

.md-typeset > ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--app-primary);
  color: var(--app-primary-foreground);
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.6em;
  text-align: center;
}

/* Tables as the app draws them: a card with a border and rounded corners. */
.md-typeset table:not([class]) {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background-color: var(--app-card);
}

.md-typeset table:not([class]) th {
  background-color: var(--app-background-soft);
  color: var(--app-text-secondary);
  font-weight: 600;
}

.md-typeset code,
.md-typeset kbd {
  border-radius: calc(var(--app-radius) - 0.25rem);
}

/* Screenshots: taken at twice the size for sharp displays, shown no wider than a dialog is on
   screen, and framed like the app's cards. */
.md-typeset img[src*="screenshots/"] {
  display: block;
  /* About the size a dialog has on screen: the shots are taken at twice the size, and a dialog is
     roughly 500 to 700 pixels wide. */
  max-width: min(100%, 28rem);
  margin: 1.2em 0 1.6em;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: 0 1px 3px hsl(220 20% 18% / 0.08), 0 4px 16px hsl(220 20% 18% / 0.06);
}

/* A screenshot of a whole page area, marked `{ .wide }`, uses the full text width. */
.md-typeset img.wide[src*="screenshots/"] {
  max-width: 100%;
}

/* Subsections inside a section (e.g. „Dokumente archivieren“ under „Archiv“) are always open, so their
   expand toggle is hidden; their pages hang off a thin line, like nested rows in the app. */
.md-nav--primary .md-nav__container > .md-nav__link:not(a),
.md-nav--primary .md-nav__item--section .md-nav__item--nested > label.md-nav__link .md-nav__icon {
  display: none;
}

.md-nav--primary .md-nav__item--section .md-nav__item--nested > .md-nav > .md-nav__list {
  margin-left: 0.85em;
  padding-left: 0.35em;
  border-left: 1px solid var(--app-border);
}

/* Such a subsection's title is a link inside a wrapper that also carries the link class; only the link
   gets the row padding, so the title lines up with the pages around it. */
.md-nav--primary .md-nav__item .md-nav__link.md-nav__container {
  padding: 0;
  margin-top: 0;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

/* The previous/next links at the bottom of a page: one low row in the page's own colors. Material
   floats „Zurück“/„Weiter“ above the title with a large top padding and cuts long titles off; here
   both sit in normal flow and a title takes the room it needs. */
.md-footer {
  background-color: var(--app-background);
  color: var(--app-text-primary);
  border-top: 1px solid var(--app-border);
}

.md-footer__inner {
  padding: 0;
}

.md-footer__link {
  align-items: center;
  overflow: visible;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  flex-grow: 1;
}

.md-footer__link--next {
  justify-content: flex-end;
}

.md-footer__title {
  flex-grow: 0;
  max-width: none;
  margin-bottom: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
}

.md-footer__title .md-ellipsis {
  overflow: visible;
  text-overflow: clip;
}

.md-footer__direction {
  position: static;
  display: block;
  margin-top: 0;
  padding: 0;
  font-size: 0.6rem;
  color: var(--app-text-secondary);
  opacity: 1;
}

.md-footer__button {
  margin: 0;
  padding: 0.2rem;
}

.md-footer__button svg {
  width: 1rem;
  height: 1rem;
}

/* Without a generator line, copyright or social links the bar below has nothing to show. */
.md-footer-meta {
  display: none;
}