/* Beheer (Django admin) in de huisstijl van de systeemmonitor.
 *
 * De kleuren staan in static/base/tokens.css (--sf-*); hier worden ze gekoppeld
 * aan de variabelen die het beheer zelf gebruikt (--primary, --body-bg, ...).
 * Zo volgt het hele beheer dezelfde set zonder dat de opbouw van Django's
 * stylesheets aangeraakt wordt.
 *
 * De koppeling staat bewust op één plek: alle waarden komen uit --sf-*, en die
 * wisselen al mee met het thema. Er is dus geen aparte donkere blok nodig.
 *
 * Volgorde: dit bestand wordt geladen ná admin/css/base.css en
 * admin/css/dark_mode.css, maar vóór admin/css/responsive.css. De dubbele
 * :root maakt de specificiteit hoger dan Django's eigen themablokken; dat is
 * hier nodig omdat die hetzelfde element met een klasse/attribuut aanspreken.
 */

:root:root {
  --primary: var(--sf-accent);
  --secondary: var(--sf-accent);
  --primary-fg: var(--sf-vlak);
  /* Let op: --accent is in het beheer niet een achtergrondkleur maar de
     tekstkleur van de merknaam in de kop (#site-name a). De bleke tint hoort
     hier dus níet: die valt weg tegen de donkere kop. */
  --accent: var(--sf-accent);

  --body-fg: var(--sf-tekst);
  --body-bg: var(--sf-achtergrond);
  --body-quiet-color: var(--sf-tekst-zwak);
  --body-medium-color: var(--sf-tekst-zwak);
  --body-loud-color: var(--sf-tekst);

  --header-color: var(--sf-tekst);
  --header-bg: var(--sf-vlak);
  --header-link-color: var(--sf-tekst);
  --breadcrumbs-fg: var(--sf-tekst-zwak);
  --breadcrumbs-link-fg: var(--sf-accent);
  --breadcrumbs-bg: var(--sf-vlak-2);

  --link-fg: var(--sf-accent);
  --link-hover-color: var(--sf-accent);
  --link-selected-fg: var(--sf-accent);
  --hairline-color: var(--sf-rand);
  --border-color: var(--sf-rand);
  --error-fg: var(--sf-fout);

  --message-success-bg: var(--sf-accent-zwak);
  --message-warning-bg: var(--sf-let-op-zwak);
  --message-error-bg: var(--sf-fout-zwak);

  --darkened-bg: var(--sf-vlak-2);
  --selected-bg: var(--sf-accent-zwak);
  --selected-row: var(--sf-accent-zwak);

  --button-fg: var(--sf-vlak);
  --button-bg: var(--sf-accent);
  --button-hover-bg: var(--sf-accent);
  --default-button-bg: var(--sf-accent);
  --default-button-hover-bg: var(--sf-accent);
  --close-button-bg: var(--sf-grijs);
  --close-button-hover-bg: var(--sf-tekst-zwak);
  --delete-button-bg: var(--sf-fout);
  --delete-button-hover-bg: var(--sf-fout);

  --object-tools-fg: var(--sf-vlak);
  --object-tools-bg: var(--sf-tekst-zwak);
  --object-tools-hover-bg: var(--sf-tekst);

  --font-family-primary: system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Cijfers in tabellen en formulieren even breed, net als in de monitor. */
body {
  font-variant-numeric: tabular-nums;
}

/* Kop: de merknaam blijft de ingang naar het beheer, de rest van de balk
 * verwijst naar de plekken waar je als beheerder begint. */
#header {
  border-bottom: 1px solid var(--sf-rand);
}

#site-name a {
  font-weight: 600;
}

.sf-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.85rem;
}

.sf-nav a {
  color: var(--sf-tekst-zwak);
  text-decoration: none;
}

.sf-nav a:focus,
.sf-nav a:hover {
  color: var(--sf-accent);
  text-decoration: underline;
}

/* Miniatuur in de fotolijst. */
.sf-thumb {
  max-height: 40px;
  max-width: 60px;
  border: 1px solid var(--sf-rand);
  border-radius: 3px;
  vertical-align: middle;
}

/* De datumkiezer gebruikt --accent als achtergrond met een vaste donkere
   tekstkleur. Ons accent is daar in het lichte thema te donker en in het
   donkere te licht voor; een neutrale tint leest in beide gevallen. */
.calendar caption,
.calendarbox h2 {
  color: var(--sf-tekst);
  background: var(--sf-vlak-2);
}

/* De verhuispagina van de bulkactie op devices (templates/admin/api_v1/device/
 * move_to_fieldlab.html): de selectie als tabel, want de beheerder hoort te
 * kunnen zien wat er meeverhuist voordat hij het doet. De kopregel blijft staan
 * bij het scrollen, zodat de kolommen leesbaar blijven bij een lange selectie. */
.sf-note {
  max-width: 75ch;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--sf-let-op);
  background: var(--sf-let-op-zwak);
}

.sf-move-list {
  max-height: 60vh;
  margin: 0 0 16px;
  overflow: auto;
  border: 1px solid var(--sf-rand);
  border-radius: 3px;
}

.sf-move-list table {
  width: 100%;
  border-collapse: collapse;
}

.sf-move-list caption {
  padding: 6px 10px;
  color: var(--sf-tekst-zwak);
  text-align: left;
}

.sf-move-list th,
.sf-move-list td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--sf-rand);
  text-align: left;
  vertical-align: top;
}

.sf-move-list tbody th {
  font-weight: 500;
}

.sf-move-list thead th {
  position: sticky;
  top: 0;
  background: var(--sf-vlak-2);
  color: var(--sf-tekst-zwak);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.sf-move-list tbody tr:last-child th,
.sf-move-list tbody tr:last-child td {
  border-bottom: 0;
}