/* MTM Erscheinungsbild.
   Gemeinsame Grundlage fuer die eigenen Seiten und die Django-Verwaltung.
   Die Farbwelt stammt aus dem Werkstoff: Glaskantengruen und Aluminium. */

:root {
  --mtm-ground: #e9eded;
  --mtm-surface: #ffffff;
  --mtm-sunk: #dfe5e6;
  --mtm-ink: #121a1d;
  --mtm-muted: #5a696e;
  --mtm-line: #c3cfd1;
  --mtm-line-soft: #d8e0e1;
  --mtm-accent: #0d6874;
  --mtm-accent-hell: #12808e;
  --mtm-accent-soft: #d5e8ea;
  --mtm-ok: #2b6647;
  --mtm-ok-soft: #d7e8de;
  --mtm-warn: #9a5410;
  --mtm-warn-soft: #f2e2ce;
  --mtm-stop: #a3261b;

  --mtm-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mtm-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mtm-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

html[data-theme="dark"],
html[data-theme="auto"][data-mtm-dark] {
  --mtm-ground: #0d1416;
  --mtm-surface: #151f22;
  --mtm-sunk: #101a1c;
  --mtm-ink: #e2ebec;
  --mtm-muted: #93a5a9;
  --mtm-line: #2a3a3e;
  --mtm-line-soft: #223034;
  --mtm-accent: #5cc3ce;
  --mtm-accent-hell: #7ad6df;
  --mtm-accent-soft: #16333a;
  --mtm-ok: #79c39a;
  --mtm-ok-soft: #17302a;
  --mtm-warn: #d79c56;
  --mtm-warn-soft: #33261a;
  --mtm-stop: #e08278;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --mtm-ground: #0d1416;
    --mtm-surface: #151f22;
    --mtm-sunk: #101a1c;
    --mtm-ink: #e2ebec;
    --mtm-muted: #93a5a9;
    --mtm-line: #2a3a3e;
    --mtm-line-soft: #223034;
    --mtm-accent: #5cc3ce;
    --mtm-accent-hell: #7ad6df;
    --mtm-accent-soft: #16333a;
    --mtm-ok: #79c39a;
    --mtm-ok-soft: #17302a;
    --mtm-warn: #d79c56;
    --mtm-warn-soft: #33261a;
    --mtm-stop: #e08278;
  }
}

/* --- Wortmarke ---------------------------------------------------------- */

.mtm-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--mtm-display);
}
.mtm-marke .zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 8px;
  background: var(--mtm-accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .09em;
}
.mtm-marke .wort {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  color: inherit;
}
.mtm-marke .zusatz {
  font-family: var(--mtm-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}

/* --- Django-Verwaltung neu eingekleidet --------------------------------- */

body.mtm-admin,
body {
  --primary: #0d6874;
  --secondary: #0b4d56;
  --accent: #12808e;
  --primary-fg: #ffffff;

  --header-color: #cfe7ea;
  --header-branding-color: #ffffff;
  --header-bg: #0b2b31;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #cfe7ea;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #0d6874;

  --link-fg: #0d6874;
  --link-hover-color: #0b4d56;
  --link-selected-fg: #0b4d56;

  --button-bg: #0d6874;
  --button-fg: #ffffff;
  --button-hover-bg: #0b4d56;
  --default-button-bg: #0b4d56;
  --default-button-hover-bg: #093c43;
  --close-button-bg: #5a696e;
  --close-button-hover-bg: #455357;
  --delete-button-bg: #a3261b;
  --delete-button-hover-bg: #862016;
  --object-tools-bg: #5a696e;
  --object-tools-hover-bg: #0b2b31;

  --selected-bg: #eef3f4;
  --selected-row: #fdf6e3;
  --hairline-color: #dde4e5;
  --border-color: #c8d2d4;

  --font-family-primary: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-family-monospace: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.mtm-admin {
  --primary: #12808e;
  --secondary: #0d6874;
  --accent: #5cc3ce;
  --header-bg: #0a1417;
  --breadcrumbs-bg: #123840;
  --link-fg: #5cc3ce;
  --link-hover-color: #7ad6df;
  --link-selected-fg: #7ad6df;
  --button-bg: #12808e;
  --button-hover-bg: #16a0b1;
  --default-button-bg: #0d6874;
  --default-button-hover-bg: #12808e;
  --selected-bg: #16333a;
  --selected-row: #33261a;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body {
    --primary: #12808e;
    --secondary: #0d6874;
    --accent: #5cc3ce;
    --header-bg: #0a1417;
    --breadcrumbs-bg: #123840;
    --link-fg: #5cc3ce;
    --link-hover-color: #7ad6df;
    --link-selected-fg: #7ad6df;
    --button-bg: #12808e;
    --button-hover-bg: #16a0b1;
    --default-button-bg: #0d6874;
    --default-button-hover-bg: #12808e;
    --selected-bg: #16333a;
    --selected-row: #33261a;
  }
}

#header {
  padding: 12px 24px;
  border-bottom: 3px solid var(--mtm-accent-hell);
}
#branding h1 { margin: 0; font-weight: 600; }
#branding h1 a:link,
#branding h1 a:visited { color: #fff; }
div.breadcrumbs {
  font-family: var(--mtm-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#content h1,
.module h2,
.module caption {
  font-family: var(--mtm-display);
  letter-spacing: -.008em;
}
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 0;
  font-family: var(--mtm-display);
  font-weight: 600;
  letter-spacing: .01em;
}
.module { border-radius: 0; }
#user-tools { font-size: 12px; }