/* Huisstijl van Gloei Communicatie voor de beheeromgeving.
   Kleuren uit het logo en de website: roze #E7417A naar oranje #EE7048, donkergrijze tekst.
   De kop blijft in beide thema's wit (het logo heeft een witte achtergrond). Geen externe lettertypes:
   staan Open Sans en Raleway op de computer, dan worden ze gebruikt, anders Segoe UI/Calibri. */

:root {
  --gloei-roze: #e7417a;
  --gloei-oranje: #ee7048;
  --gloei-verloop: linear-gradient(90deg, #e7417a, #ee7048);

  --primary: #fbe9f0;
  --primary-fg: #272727;
  --secondary: #c92f66;
  --accent: #ee7048;

  --body-fg: #272727;
  --body-bg: #ffffff;
  --body-quiet-color: #6b6b6b;
  --body-medium-color: #454545;
  --body-loud-color: #000000;

  --header-color: #6b6b6b;
  --header-branding-color: #272727;
  --header-bg: #ffffff;
  --header-link-color: #c92f66;

  --breadcrumbs-fg: #6b6b6b;
  --breadcrumbs-link-fg: #c92f66;
  --breadcrumbs-bg: #f6f6f6;

  --link-fg: #c92f66;
  --link-hover-color: #9f1f4d;
  --link-selected-fg: #c92f66;

  --hairline-color: #ececec;
  --border-color: #d3d3d3;

  --darkened-bg: #f8f8f8;
  --selected-bg: #fbe9f0;
  --selected-row: #fff5f8;

  --button-fg: #454545;
  --button-bg: #e3e3e3;
  --button-hover-bg: #d3d3d3;
  --default-button-bg: #c92f66;
  --default-button-hover-bg: #9f1f4d;
  --close-button-bg: #727272;
  --close-button-hover-bg: #454545;
  --object-tools-fg: #454545;
  --object-tools-bg: #e3e3e3;
  --object-tools-hover-bg: #d3d3d3;

  --message-info-bg: #fbe9f0;

  --font-family-primary: "Open Sans", "Segoe UI", Calibri, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gloei-font-koppen: Raleway, "Segoe UI", Calibri, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #3a2230;
    --primary-fg: #f6e3ec;
    --body-fg: #eeeeee;
    --body-bg: #161616;
    --body-quiet-color: #bdbdbd;
    --body-medium-color: #e0e0e0;
    --body-loud-color: #ffffff;
    --breadcrumbs-fg: #bdbdbd;
    --breadcrumbs-link-fg: #f58db0;
    --breadcrumbs-bg: #1f1f1f;
    --link-fg: #f58db0;
    --link-hover-color: #ffb3cd;
    --link-selected-fg: #f58db0;
    --hairline-color: #2b2b2b;
    --border-color: #3a3a3a;
    --darkened-bg: #202020;
    --selected-bg: #3a2230;
    --selected-row: #2a1a23;
    --button-fg: #eeeeee;
    --button-bg: #3a3a3a;
    --button-hover-bg: #4a4a4a;
    --close-button-bg: #3a3a3a;
    --close-button-hover-bg: #666666;
    --object-tools-fg: #eeeeee;
    --object-tools-bg: #3a3a3a;
    --object-tools-hover-bg: #4a4a4a;
    --message-info-bg: #3a2230;
  }
}

html[data-theme="dark"] {
  --primary: #3a2230;
  --primary-fg: #f6e3ec;
  --body-fg: #eeeeee;
  --body-bg: #161616;
  --body-quiet-color: #bdbdbd;
  --body-medium-color: #e0e0e0;
  --body-loud-color: #ffffff;
  --breadcrumbs-fg: #bdbdbd;
  --breadcrumbs-link-fg: #f58db0;
  --breadcrumbs-bg: #1f1f1f;
  --link-fg: #f58db0;
  --link-hover-color: #ffb3cd;
  --link-selected-fg: #f58db0;
  --hairline-color: #2b2b2b;
  --border-color: #3a3a3a;
  --darkened-bg: #202020;
  --selected-bg: #3a2230;
  --selected-row: #2a1a23;
  --button-fg: #eeeeee;
  --button-bg: #3a3a3a;
  --button-hover-bg: #4a4a4a;
  --close-button-bg: #3a3a3a;
  --close-button-hover-bg: #666666;
  --object-tools-fg: #eeeeee;
  --object-tools-bg: #3a3a3a;
  --object-tools-hover-bg: #4a4a4a;
  --message-info-bg: #3a2230;
}

/* Een uitdrukkelijk gekozen licht thema wint ook als het systeem donker is. */
html[data-theme="light"] {
  color-scheme: light;
  --primary: #fbe9f0;
  --primary-fg: #272727;
  --body-fg: #272727;
  --body-bg: #ffffff;
  --body-quiet-color: #6b6b6b;
  --body-medium-color: #454545;
  --body-loud-color: #000000;
  --breadcrumbs-fg: #6b6b6b;
  --breadcrumbs-link-fg: #c92f66;
  --breadcrumbs-bg: #f6f6f6;
  --link-fg: #c92f66;
  --link-hover-color: #9f1f4d;
  --link-selected-fg: #c92f66;
  --hairline-color: #ececec;
  --border-color: #d3d3d3;
  --darkened-bg: #f8f8f8;
  --selected-bg: #fbe9f0;
  --selected-row: #fff5f8;
  --button-fg: #454545;
  --button-bg: #e3e3e3;
  --button-hover-bg: #d3d3d3;
  --close-button-bg: #727272;
  --close-button-hover-bg: #454545;
  --object-tools-fg: #454545;
  --object-tools-bg: #e3e3e3;
  --object-tools-hover-bg: #d3d3d3;
  --message-info-bg: #fbe9f0;
}

/* --- Kop: wit met het logo en een roze-oranje streep --- */

#header {
  background: #ffffff;
  color: #6b6b6b;
  padding: 10px 24px 14px;
  border-bottom: 4px solid transparent;
  border-image: var(--gloei-verloop) 1;
  align-items: center;
}

#header a:link,
#header a:visited {
  color: #c92f66;
}

/* Het themaknopje: het icoon in roze, met een witte uitsparing (de kleur van de kop). */
#header .theme-toggle svg {
  fill: #c92f66;
  color: #ffffff;
}

#header a:hover {
  color: #9f1f4d;
}

#branding {
  display: flex;
  align-items: center;
}

#site-name {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

#site-name a:link,
#site-name a:visited {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #272727;
}

#site-name img {
  display: block;
  height: 46px;
  width: auto;
}

#site-name .app-naam {
  font-family: var(--gloei-font-koppen);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
}

#user-tools {
  color: #6b6b6b;
}

#user-tools strong {
  color: #272727;
}

#user-tools button {
  color: #c92f66;
}

/* De titel van het onderdeel waar je nu in zit (zijbalk): goed leesbaar op de roze balk. */
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--primary-fg);
  font-weight: 700;
}

#nav-sidebar .current-model {
  background: var(--selected-row);
}

/* --- Koppen en kaders --- */

h1,
h2,
h3 {
  font-family: var(--gloei-font-koppen);
  color: var(--body-fg);
}

h1 {
  font-weight: 600;
}

.module h2,
.module caption,
.inline-group h2 {
  background: var(--primary);
  color: var(--primary-fg);
  border-left: 4px solid var(--gloei-roze);
  font-family: var(--gloei-font-koppen);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}

.module h2 a:link,
.module h2 a:visited,
.module caption a:link,
.module caption a:visited {
  color: var(--primary-fg);
}

.breadcrumbs,
div.breadcrumbs {
  border-bottom: 1px solid var(--hairline-color);
}

/* --- Knoppen --- */

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  border-radius: 4px;
}

input[type="submit"].default,
.submit-row input.default,
.login .submit-row input[type="submit"],
.button.default {
  background: var(--gloei-verloop);
  color: #ffffff;
  border: 0;
  font-weight: 600;
}

input[type="submit"].default:hover,
.submit-row input.default:hover,
.login .submit-row input[type="submit"]:hover,
.button.default:hover {
  background: linear-gradient(90deg, #c92f66, #d95a32);
}

.object-tools a:link,
.object-tools a:visited {
  border-radius: 999px;
}

.object-tools a.addlink,
.object-tools a.addlink:visited {
  background: var(--gloei-verloop);
  color: #ffffff;
}

/* --- Inlogpagina --- */

.login #container {
  max-width: 26rem;
  margin: 3rem auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.login #header {
  justify-content: center;
}

.login #content {
  padding: 24px 28px;
}

.login .submit-row input {
  width: 100%;
  padding: 10px;
}

/* --- Snelkoppelingen op de voorpagina --- */

.snelkoppelingen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

#content-main .snelkoppelingen a.snel:link,
#content-main .snelkoppelingen a.snel:visited {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--darkened-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--gloei-roze);
  color: var(--body-fg);
  font-family: var(--gloei-font-koppen);
  font-weight: 600;
  text-decoration: none;
}

#content-main .snelkoppelingen a.snel:hover,
#content-main .snelkoppelingen a.snel:focus {
  background: var(--selected-bg);
  color: var(--body-fg);
  text-decoration: none;
}

.snelkoppelingen a.snel small {
  display: block;
  font-family: var(--font-family-primary);
  font-weight: 400;
  color: var(--body-quiet-color);
}