/* Huisstijl van de klant-app (frontend/customer-app/src/index.css)
   over Material heen. Bron-tokens: accent #0ea45a, surface #f3f4f1,
   ink #101928, witte kaarten met #e9eae4-rand, systeem-font. */

:root {
  --ss-accent:       #0ea45a;
  --ss-accent-soft:  #ddf4e6;
  --ss-surface:      #f3f4f1;
  --ss-card:         #ffffff;
  --ss-card-border:  #e9eae4;
  --ss-ink:          #101928;
  --ss-ink-mute:     #64748b;
}

/* Material-kernkleuren - geldt voor beide schema's */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--ss-accent);
  --md-primary-fg-color--dark: #0b8047;
  --md-accent-fg-color: #0b8047;
  --md-typeset-a-color: var(--ss-accent);
}
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--ss-surface);
  --md-default-fg-color: var(--ss-ink);
  --md-default-fg-color--light: var(--ss-ink-mute);
  --md-code-bg-color: #eceee9;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Inter,
    "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Witte content-kaart op het grijze vlak, zoals de app-tegels */
[data-md-color-scheme="default"] .md-content {
  background: var(--ss-card);
  border: 1px solid var(--ss-card-border);
  border-radius: 1.25rem;
  margin: 0.8rem 0 1.6rem;
  box-shadow: 0 1px 2px rgba(16, 25, 40, 0.04);
}
.md-content__inner { padding: 0.4rem 1.2rem 1rem; }

/* Koppen in app-ink, iets strakker */
.md-typeset h1, .md-typeset h2 { color: var(--ss-ink); font-weight: 700; }
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 { color: inherit; }

/* Tip/notes in de accent-tint van de app */
.md-typeset .admonition.tip, .md-typeset details.tip {
  border-color: var(--ss-accent);
}
.md-typeset .tip > .admonition-title { background: var(--ss-accent-soft); }

/* ── Telefoonlijstje om de schermafbeeldingen ─────────────────────
   Puur CSS op de <img class="phone">: donkere bezel, iPhone-achtige
   hoekradius, zwevende schaduw. De afbeelding zelf is 390x844@2x. */
.md-typeset img.phone {
  border: 11px solid #10131a;
  border-radius: 2.6rem;
  box-shadow:
    0 0 0 1.5px #3a3f4a,                 /* stalen randje */
    0 18px 40px -14px rgba(16, 25, 40, 0.45);
  background: #10131a;
}

/* Klanten hoeven onze Forgejo niet te zien: de repo-knop in de header
   weg. Het bewerk-potlood op de pagina's blijft - dat is de
   onderhoudsroute en stoort niemand. */
.md-header__source { display: none; }

/* Het app-icoon (groen huisje, favicon.png) wit gemaakt voor de groene
   balk - het volledige logo.svg heeft de merknaam als paden ingebakken
   en werd op headerformaat onleesbaar. */
.md-header__button.md-logo img {
  filter: brightness(0) invert(1);
  height: 1.6rem;
  width: 1.6rem;
}