/* Huisstijl Utrecht Atletiek voor het beheerscherm.
   Basiskleuren van de club: blauw #005db9, rood #dd001c, geel #ffde00.
   Lettertype Urbanist, zelf gehost zodat er geen verzoeken naar Google gaan. */

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/urbanist-latin.40fbb0c52f0d.woff2") format("woff2");
}

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --ua-blauw: #005db9;
  --ua-blauw-donker: #004a94;
  --ua-rood: #dd001c;
  --ua-rood-donker: #b00016;
  --ua-geel: #ffde00;
  --ua-zwart: #212529;

  --font-family-primary: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Django gebruikt de header-kleuren ook voor alle gekleurde balken
     (sectiekoppen, filterkoppen, keuzelijsten). Die worden blauw met witte
     tekst; de kopbalk zelf krijgt hieronder apart de witte websitestijl. */
  --header-bg: var(--ua-blauw);
  --header-color: #ffffff;
  --header-link-color: #ffffff;
  --header-branding-color: #ffffff;

  --primary: var(--ua-blauw);
  --secondary: var(--ua-blauw-donker);
  --accent: var(--ua-geel);
  --primary-fg: #ffffff;

  --breadcrumbs-bg: var(--ua-zwart);
  --breadcrumbs-fg: #ffffff;
  --breadcrumbs-link-fg: #ffffff;

  --button-bg: var(--ua-blauw);
  --button-hover-bg: var(--ua-blauw-donker);
  --default-button-bg: var(--ua-blauw-donker);
  --default-button-hover-bg: #003a75;
  --delete-button-bg: var(--ua-rood);
  --delete-button-hover-bg: var(--ua-rood-donker);
  --object-tools-bg: var(--ua-blauw);
  --object-tools-hover-bg: var(--ua-blauw-donker);
}

/* Licht thema (standaard). */
:root {
  --link-fg: var(--ua-blauw);
  --link-hover-color: var(--ua-rood);
  --link-selected-fg: var(--ua-blauw-donker);
  --selected-row: #fff8cc;
  --message-warning-bg: #fff5b3;
}

/* Donker thema: lichtere linkkleuren voor voldoende contrast, en een donkere selectie. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --link-fg: #7fb4ee;
    --link-hover-color: #ff6b7c;
    --link-selected-fg: #a9cdf5;
    --selected-row: #2b3a4d;
    --message-warning-bg: #4a4100;
  }
}

html[data-theme="dark"] {
  --link-fg: #7fb4ee;
  --link-hover-color: #ff6b7c;
  --link-selected-fg: #a9cdf5;
  --selected-row: #2b3a4d;
  --message-warning-bg: #4a4100;
}

html[data-theme="light"] {
  --link-fg: var(--ua-blauw);
  --link-hover-color: var(--ua-rood);
  --link-selected-fg: var(--ua-blauw-donker);
  --selected-row: #fff8cc;
  --message-warning-bg: #fff5b3;
}

/* Kopbalk zoals op de website: wit met zwarte tekst en het logo. */
#header {
  background: #ffffff;
  color: var(--ua-zwart);
  border-bottom: 4px solid var(--ua-rood);
  padding-top: 12px;
  padding-bottom: 12px;
}

#branding h1,
#branding h1 a:link,
#branding h1 a:visited {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ua-zwart);
  font-weight: 700;
}

#branding .ua-logo {
  height: 36px;
  width: auto;
}

#branding .ua-onderdeel {
  color: var(--ua-zwart);
  padding-left: 14px;
  border-left: 2px solid var(--ua-geel);
  font-size: 1rem;
  font-weight: 600;
}

#header #user-tools,
#header #user-tools a,
#header #logout-form button {
  color: var(--ua-zwart);
}

#user-tools a {
  border-bottom-color: var(--ua-rood);
}

#header .theme-toggle svg.theme-icon-when-auto,
#header .theme-toggle svg.theme-icon-when-dark,
#header .theme-toggle svg.theme-icon-when-light {
  fill: var(--ua-zwart);
  color: #ffffff;
}

/* Login-pagina: de kop staat daar in een eigen kader. */
.login #header h1,
.login #header h1 a {
  color: var(--ua-zwart);
}

h1, h2, h3, .module caption, .module h2 {
  font-weight: 700;
}

/* Ook de sectiekop van het actieve onderdeel in de zijbalk blijft wit op blauw. */
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: #ffffff;
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input {
  border-radius: 0;
  font-weight: 700;
}

ul.messagelist li.warning {
  color: var(--body-fg);
}

/* Signalen in het lesoverzicht: te vol / wachtlijst te lang (rood), ruimte voor wachtenden (groen). */
.ua-signaal {
  display: inline-block;
  padding: 2px 8px;
  margin: 1px 0;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
}
.ua-signaal-rood { background: #dd001c; }
.ua-signaal-groen { background: #1b7a35; }

/* Rijen die je met een dubbelklik opent (zie rij-dubbelklik.js). */
#result_list tbody tr.ua-rij-klikbaar { cursor: pointer; }
#result_list tbody tr.ua-rij-klikbaar:hover td,
#result_list tbody tr.ua-rij-klikbaar:hover th { background: var(--darkened-bg); }
.ua-signaal-geel { background: #ffde00; color: #212529; }
.ua-signaal-grijs { background: #6c757d; }

/* E-mail: voorbeeld, variabelen en ontvangers */
.ua-mailvoorbeeld { width: 100%; max-width: 720px; height: 560px; border: 1px solid var(--hairline-color, #ddd); border-radius: 6px; background: #fff; }
table.ua-variabelen td, .ua-variabelen table td { padding: 3px 12px 3px 0; border: 0; }
.ua-variabelen summary { cursor: pointer; font-weight: 600; margin: 12px 0 6px; }
.ua-variabelen code { white-space: nowrap; }
table.ua-ontvangers { width: 100%; max-width: 900px; }
.ua-mail textarea { width: min(100%, 720px); font-family: inherit; }