/* Ledenadministratie: theme and layout, based on the Music Tools look.
   Structure: fonts, tokens (dark, light, auto), base, app frame (rail + stage), page parts,
   forms and buttons, chips, tables, panels, narrow screens, theme button, accent swatches.
   The second half of this file (from "site specific rules") maps the Bootstrap 5 components and the
   page specific rules onto the same tokens.

   The particle background and the custom cursor come from /assets/css/particle-background/ and /assets/css/cursor/.
   This file never sets a cursor, so the cursor from cursor.css is inherited everywhere. The particles
   read --particle-color and --particle-bg, set in the tokens below. The page surfaces (--rail, --card)
   are slightly see-through so the particles show behind them. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Bricolage Grotesque", "Segoe UI Variable Display", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rail-w: 252px;
  --r-lg: 16px; --r-md: 10px; --r-sm: 7px;
  --drawer-h: clamp(220px, 46vh, 600px);

  /* dark is the default look */
  --bg: #0c0e13; --rail: rgba(9, 11, 15, 0.86); --card: rgba(20, 24, 33, 0.88); --raised: #1b212c; --code: #0e1117;
  --text: #eceff4; --muted: #8e9ab0; --border: #232a37; --border-strong: #323b4c;
  --accent: #f5b03e; --accent-hover: #ffc15c; --accent-text: #1c1303; --accent-ink: var(--accent-ink-d, #f5b03e);
  --accent-soft: rgba(245, 176, 62, 0.14);
  --ok: #4fd69c; --warn: #ff9d6b; --err: #ff6e6e;
  --err-soft: rgba(255, 110, 110, 0.12); --ok-soft: rgba(79, 214, 156, 0.12);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  --scrim: rgba(4, 6, 10, 0.66);
  color-scheme: dark;
  --particle-bg: var(--bg); --particle-color: var(--accent-ink);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #cfd2d8; --rail: rgba(193, 197, 205, 0.88); --card: rgba(224, 227, 232, 0.9); --raised: #e4e7eb; --code: #d5d8de;
    --text: #1a1d24; --muted: #596172; --border: #bbc0ca; --border-strong: #a4abb8;
    --accent: #f0a21c; --accent-hover: #f7b23c; --accent-text: #1c1303; --accent-ink: var(--accent-ink-l, #8f5600);
    --accent-soft: rgba(240, 162, 28, 0.17);
    --ok: #12804f; --warn: #b4540f; --err: #c42b2b;
    --err-soft: rgba(196, 43, 43, 0.09); --ok-soft: rgba(18, 128, 79, 0.1);
    --shadow: 0 8px 24px rgba(12, 14, 19, 0.2);
    --scrim: rgba(20, 26, 38, 0.5);
    color-scheme: light;
    --particle-bg: var(--bg); --particle-color: var(--accent-ink);
  }
}
:root[data-theme="light"] {
  --bg: #cfd2d8; --rail: rgba(193, 197, 205, 0.88); --card: rgba(224, 227, 232, 0.9); --raised: #e4e7eb; --code: #d5d8de;
  --text: #1a1d24; --muted: #596172; --border: #bbc0ca; --border-strong: #a4abb8;
  --accent: #f0a21c; --accent-hover: #f7b23c; --accent-text: #1c1303; --accent-ink: var(--accent-ink-l, #8f5600);
  --accent-soft: rgba(240, 162, 28, 0.17);
  --ok: #12804f; --warn: #b4540f; --err: #c42b2b;
  --err-soft: rgba(196, 43, 43, 0.09); --ok-soft: rgba(18, 128, 79, 0.1);
  --shadow: 0 8px 24px rgba(12, 14, 19, 0.2);
  --scrim: rgba(20, 26, 38, 0.5);
  color-scheme: light;
  --particle-bg: var(--bg); --particle-color: var(--accent-ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0; background: transparent; color: var(--text);
  font: 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); }
::selection { background: var(--accent); color: var(--accent-text); text-shadow: none; }
::-moz-selection { background: var(--accent); color: var(--accent-text); text-shadow: none; }
code { font-family: var(--font-mono); font-size: 0.88em; background: var(--code); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ---------- App frame: rail on the left, stage on the right ---------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--rail); border-right: 1px solid var(--border); padding: 18px 12px 12px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 10px 18px; font: 700 1.25rem/1 var(--font-display); letter-spacing: -0.02em; }
.brand-mark { display: flex; align-items: flex-end; gap: 3px; width: 24px; height: 22px; }
.brand-mark i { flex: 1; border-radius: 2px; background: var(--accent); height: 40%; transform-origin: bottom; }
.brand-mark i:nth-child(2) { height: 85%; }
.brand-mark i:nth-child(3) { height: 60%; }
.brand-mark i:nth-child(4) { height: 100%; }
@keyframes eq { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

.sidebar { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.nav-group { margin: 0 0 6px; }
.nav-group > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; font-size: 0.8rem; font-weight: 600; color: var(--muted); border-radius: var(--r-sm);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: var(--text); }
.nav-group > summary::after {
  content: ""; width: 6px; height: 6px; margin-right: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s;
}
.nav-group[open] > summary::after { transform: rotate(45deg); }
.nav-btn {
  position: relative; display: block; width: 100%; text-align: left; background: transparent; border: 0;
  padding: 8px 12px 8px 22px; border-radius: var(--r-md); color: var(--muted); font-weight: 500; font-size: 0.93rem;
}
.nav-btn:hover { background: var(--accent-soft); color: var(--text); }
.nav-btn.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.nav-btn.active::before {
  content: ""; position: absolute; left: 8px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--accent);
}
.rail-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); }
.rail-row { display: flex; flex-direction: column; gap: 6px; }
.rail-row > button { width: 100%; }

.conn-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; font-size: 0.84rem;
  border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.conn-chip { min-width: 0; }
.conn-chip::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn-chip.ok::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.conn-chip.off::before { background: var(--warn); box-shadow: 0 0 0 3px rgba(255, 157, 107, 0.15); }
.conn-chip.off { border-color: var(--warn); color: var(--warn); }
.conn-chip { width: 100%; justify-content: flex-start; padding: 8px 12px 8px 14px; overflow: hidden; white-space: nowrap; }
.conn-text { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.conn-gear { flex: 0 0 auto; width: 17px; height: 17px; color: var(--muted); }
.conn-chip:hover .conn-gear { color: var(--text); }
.conn-chip.active { border-color: var(--accent); background: var(--accent-soft); }
.conn-chip.active .conn-gear { color: var(--accent-ink); }


.stage { min-width: 0; padding: 22px clamp(16px, 3vw, 40px) 64px; }
.stage-inner { max-width: 1120px; margin: 0 auto; }
.stage-bar { display: flex; justify-content: flex-end; align-items: center; min-height: 0; margin-bottom: 4px; }
.stage-bar:empty, .stage-bar:has(> [hidden]:only-child) { display: none; }
.acting-wrap { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); }
.acting-wrap select { width: auto; max-width: 260px; }
.content { min-width: 0; }

/* ---------- Page header and cards ---------- */
h1 { font-size: clamp(1.7rem, 2.6vw, 2.15rem); font-weight: 700; line-height: 1.1; margin: 6px 0 10px; }
h2 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 650; margin: 0 0 12px; }
h3 { font-size: 0.98rem; font-weight: 650; }
.sub { color: var(--muted); max-width: 72ch; margin: 0 0 26px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px 22px; margin-bottom: 16px;
}
.card.disabled { opacity: 0.5; }
.step {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font: 700 0.8rem/1 var(--font-display);
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
.grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.muted { color: var(--muted); }
.small-text { font-size: 0.85rem; }
.spacer { flex: 1; }

details { margin: 8px 0; }
summary { color: var(--muted); }
summary:hover { color: var(--text); }
details.card { margin: 0 0 16px; }
details.collapsible > summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  font: 650 1.08rem/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--text);
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: 0 4px 0 3px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s;
}
details.collapsible[open] > summary::before { transform: rotate(45deg); }
.collapsible-body { margin-top: 14px; }

/* ---------- Forms and buttons ---------- */
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 5px; }
input[type=text], input[type=password], input[type=url], input[type=number], textarea, select {
  width: 100%; padding: 9px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--code); color: var(--text); font: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.75; }
textarea.drop-over { border-color: var(--accent); background: var(--accent-soft); }
input[type=file] { font: inherit; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; margin-right: 10px; padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--raised); color: var(--text); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
button:focus-visible, summary:focus-visible, .gcard:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.field { margin-bottom: 14px; }
.check { display: flex; gap: 9px; align-items: flex-start; margin: 7px 0; color: var(--text); font-size: 0.92rem; }
.check input { margin-top: 4px; }
button {
  font: inherit; font-weight: 500; padding: 8px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--raised); color: var(--text);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button:hover:not(:disabled) { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 650; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.danger { color: var(--err); }
button.danger:hover:not(:disabled) { background: var(--err-soft); border-color: var(--err); }
button:disabled { opacity: 0.45; }
button.small { padding: 5px 11px; font-size: 0.85rem; }
.button-link { text-decoration: none; }

/* ---------- Chips, pills, stats ---------- */
.chip, .pill {
  display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--code); border: 1px solid var(--border);
  font-size: 0.78rem; color: var(--muted);
}
.chip { white-space: nowrap; margin: 2px 3px 0 0; color: var(--text); }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.err { border-color: var(--err); color: var(--err); }
.chip-list { margin: 0; }
.stats { display: flex; gap: 28px; flex-wrap: wrap; margin: 6px 0 10px; }
.stats > * { color: var(--muted); font-size: 0.85rem; }
.stats b { display: block; font: 700 1.7rem/1.15 var(--font-display); color: var(--text); letter-spacing: -0.02em; }
.list { margin: 6px 0 0; padding-left: 18px; max-height: 320px; overflow: auto; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.filters button { border-radius: 999px; }
.filters button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------- Tables ---------- */
.table-scroll { max-height: 68vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
thead th { position: sticky; top: 0; background: var(--raised); z-index: 1; }
tbody tr:hover > td { background: var(--accent-soft); }
th.sortable { user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable.asc::after { content: " \25B2"; font-size: 0.7em; }
th.sortable.desc::after { content: " \25BC"; font-size: 0.7em; }
td.actions { white-space: nowrap; text-align: right; width: 1%; }
td.sel, th.sel { width: 34px; padding-right: 0; }
td[data-label="Playlist"] { min-width: 210px; }
@media (max-width: 860px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; padding: 6px 8px; background: var(--card); }
  table.stack td { border: none; padding: 4px 2px; }
  table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.8rem; }
  table.stack td.sel { width: auto; }
  .rowacts { justify-content: flex-start; } .rowacts > .slot { display: none; }
}
details.rowmenu { display: inline-block; margin: 0; vertical-align: top; }
details.rowmenu > summary {
  display: inline-block; font-size: 0.85rem; padding: 3px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text); background: var(--raised);
}
details.rowmenu[open] > summary { background: var(--accent-soft); border-color: var(--accent); }
details.rowmenu .rowmenu-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-width: 320px; }

/* Clickable things that are not links or buttons get the same animated link cursor
   (the "animate" keyframes come from /assets/css/cursor/cursor.css and do nothing if it is absent). */
summary:hover, th.sortable:hover, .pill-tag:hover, label.check:hover, label.form-check-label:hover, .nav-btn:hover, .conn-chip:hover {
  animation: animate 0.4s infinite !important;
}

/* ---------- Narrow screens: the rail becomes a top bar with a Menu button ---------- */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  :root { --rail-w: 0px; }
  .app { display: block; }
  .rail { position: sticky; z-index: 80; height: auto; max-height: 100vh; overflow-y: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand { flex: 1 1 auto; padding: 0 2px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .sidebar { display: none; flex: 0 0 100%; }
  .rail-foot { display: none; flex: 0 0 100%; }
  body.nav-open .sidebar { display: flex; max-height: none; padding-top: 6px; }
  body.nav-open .rail-foot { display: flex; }
  .stage { padding: 16px 14px 64px; }
  .card { padding: 16px; }
}
/* Appearance settings: accent colour picker */
.accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.accent-hex { font: 13px/1 var(--font-mono); color: var(--muted); min-width: 64px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--sw); }
.swatch:hover:not(:disabled) { border-color: var(--text); }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--sw); }

/* Floating theme button: a moon for dark, a sun for light and an A for auto */
.theme-float {
  position: fixed; top: 14px; right: 18px; z-index: 110; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; background: var(--raised); color: var(--text);
  border: 1px solid var(--border-strong); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.theme-float:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.theme-float svg { width: 19px; height: 19px; display: block; }
.theme-a { font: 700 1.05rem/1 var(--font-display); }
.stage-bar { padding-right: 54px; }
@media (max-width: 860px) {
  .rail { padding-right: 66px; }
  .theme-float { top: 9px; right: 12px; }
  .stage-bar { padding-right: 0; }
}

/* ---------- Site specific rules ----------
   Used to be site.css, now part of this file. It maps the Bootstrap 5 components used by the existing pages
   (grid, buttons, forms, tables, alerts, modals, badges) onto the shared tokens, so the
   pages keep their markup and behaviour. Nothing here sets a cursor. */

/* ---------- Bootstrap variables follow the tokens ---------- */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font-ui);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--muted);
  --bs-secondary-bg: var(--raised);
  --bs-tertiary-bg: var(--code);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-link-color: var(--accent-ink);
  --bs-link-hover-color: var(--text);
  --bs-link-color-rgb: 245, 176, 62;
  --bs-primary: var(--accent);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-focus-ring-color: var(--accent-soft);
}

/* ---------- Base ---------- */
.brand { color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
a.nav-btn, a.conn-chip { text-decoration: none; }
a.nav-btn:hover, a.conn-chip:hover { color: var(--text); }
a.nav-btn { font-family: inherit; }
/* Icon in front of a menu group name */
.nav-cat { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.nav-group > summary { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem; }
.nav-icon { flex: 0 0 auto; width: 16px; text-align: center; font-size: 0.85rem; color: var(--accent-ink); }
/* The menu scrollbar gets its own space beside the items instead of covering them */
.sidebar { scrollbar-gutter: stable; padding-right: 6px; scrollbar-color: var(--border-strong) transparent; }
/* ...and sits against the right edge of the menu, over the rail's own side padding */
@media (min-width: 861px) { .rail .sidebar { margin-right: -12px; } }
.nav-logout { margin-top: 2px; }
.nav-logout-form { margin: 0; }
button.nav-btn { font-family: inherit; }
.rail .brand-mark { flex: 0 0 24px; }
a { text-underline-offset: 2px; }
a:hover { color: var(--text); }
.content a:not(.btn):not(.nav-btn):not(.page-link) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.content a:not(.btn):hover { text-decoration-color: currentColor; }
hr { border-color: var(--border); opacity: 1; }
.container-fluid { padding-left: 0; padding-right: 0; }
.content .row { padding-top: 0; }
.content > .container-fluid > .row + .row { margin-top: 8px; }
h4, h5, h6 { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.01em; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--text); }
h3, .h3 { font-size: 1.08rem; margin: 18px 0 10px; }
.text-muted, .grey { color: var(--muted) !important; }
.text-dark, .linkcolor { color: var(--accent-ink) !important; }
.text-dark:hover, .linkcolor:hover { color: var(--text) !important; }
.red { color: var(--err) !important; }
.small, small { color: inherit; }
.page-title { display: block; }
.page-title h1 { margin: 6px 0 10px; }
.page-title .sub { margin-bottom: 22px; }
/* Tooltips (Bootstrap), styled here so they do not depend on the Bootstrap stylesheet version */
.tooltip { position: absolute; z-index: 2000; display: block; margin: 0; pointer-events: none; opacity: 0; font-family: var(--font-ui); font-size: 0.82rem; line-height: 1.4; word-wrap: break-word; --tt-bg: var(--accent); --tt-border: var(--accent); --tt-color: var(--accent-text); }
.tooltip.show { opacity: 1; }
/* Every tooltip has the same dark-theme look (accent colour), also in the light theme.
   .light-tooltip is still there for a tooltip that must be light (data-bs-custom-class="light-tooltip"). */
.tooltip.light-tooltip { --tt-bg: var(--raised); --tt-border: var(--border-strong); --tt-color: var(--text); }
.tooltip.fade { transition: opacity 0.15s linear; }
.tooltip .tooltip-arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; }
.tooltip .tooltip-arrow::before { content: ""; position: absolute; border-color: transparent; border-style: solid; }
.tooltip-inner { max-width: 260px; padding: 0.3rem 0.65rem; color: var(--tt-color, var(--text)); text-align: center; background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^="top"] { padding: 0.4rem 0; }
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow { bottom: 0; }
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { top: -1px; border-width: 0.4rem 0.4rem 0; border-top-color: var(--tt-border); }
.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^="bottom"] { padding: 0.4rem 0; }
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow { top: 0; }
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { bottom: -1px; border-width: 0 0.4rem 0.4rem; border-bottom-color: var(--tt-border); }
.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^="left"] { padding: 0 0.4rem; }
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow { right: 0; width: 0.4rem; height: 0.8rem; }
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { left: -1px; border-width: 0.4rem 0 0.4rem 0.4rem; border-left-color: var(--tt-border); }
.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^="right"] { padding: 0 0.4rem; }
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow { left: 0; width: 0.4rem; height: 0.8rem; }
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { right: -1px; border-width: 0.4rem 0.4rem 0.4rem 0; border-right-color: var(--tt-border); }
.max-width { width: 100%; }
.no-margin { margin: 0; }
.no-top-margin { margin-top: 0 !important; }
.no-top-padding { padding-top: 0 !important; }
.inline { display: inline; }
.float-left { float: left; }
.space-left { margin-left: 24px; }
.small-list { width: 300px; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dashdoughnut { margin: 0 auto; text-align: center; max-width: 400px; display: block; padding-bottom: 40px; }
.dashdoughnut h3 { margin-left: auto; margin-right: auto; }
.canvas-holder { margin-left: auto; margin-right: auto; }
.nonmobilehide { display: none; }
@media (max-width: 780px) {
  .mobilehide { display: none !important; }
  .nonmobilehide { display: revert; }
}
@media (min-width: 781px) { .nonmobilehide { display: none !important; } }

/* ---------- Cards, jumbotrons ---------- */
.card { --bs-card-bg: var(--card); --bs-card-color: var(--text); --bs-card-border-color: var(--border); --bs-card-border-radius: var(--r-lg); --bs-card-inner-border-radius: var(--r-lg); --bs-card-cap-bg: transparent; }
.card > .card-body { padding: 0; color: var(--text); }
.card.bg-light { background: var(--card) !important; color: var(--text); }
.card-title { font-family: var(--font-display); font-weight: 650; font-size: 1.08rem; color: var(--text); }
.card-text { color: var(--muted); }
.jumbotron { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 16px; }
.jumbotron-nomargin { padding: 20px 22px !important; }
.jumbotron > h1:first-child, .jumbotron > h2:first-child, .jumbotron > h3:first-child { margin-top: 0; }
.bg-dark { background: var(--raised) !important; color: var(--text) !important; }
.text-white { color: var(--text) !important; }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-padding-x: 15px; --bs-btn-padding-y: 8px; --bs-btn-font-size: 1rem; --bs-btn-font-weight: 500;
  --bs-btn-border-width: 1px; --bs-btn-border-radius: var(--r-md);
  --bs-btn-color: var(--text); --bs-btn-bg: var(--raised); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--raised); --bs-btn-hover-border-color: var(--muted);
  --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--raised); --bs-btn-active-border-color: var(--muted);
  --bs-btn-disabled-color: var(--text); --bs-btn-disabled-bg: var(--raised); --bs-btn-disabled-border-color: var(--border-strong);
  --bs-btn-focus-shadow-rgb: 245, 176, 62;
  font-family: inherit; line-height: 1.5; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: 0.45; }
.btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; box-shadow: none; }
.btn:focus { box-shadow: none; }
.btn-primary, .btn-success {
  --bs-btn-color: var(--accent-text); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-font-weight: 650;
  --bs-btn-hover-color: var(--accent-text); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--accent-text); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-color: var(--accent-text); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
}
.btn-danger, .btn-outline-danger {
  --bs-btn-color: var(--err); --bs-btn-bg: var(--raised); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--err); --bs-btn-hover-bg: var(--err-soft); --bs-btn-hover-border-color: var(--err);
  --bs-btn-active-color: var(--err); --bs-btn-active-bg: var(--err-soft); --bs-btn-active-border-color: var(--err);
  --bs-btn-disabled-color: var(--err); --bs-btn-disabled-bg: var(--raised); --bs-btn-disabled-border-color: var(--border-strong);
}
.btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-light, .btn-secondary, .btn-dark, .btn-light, .btn-info {
  --bs-btn-color: var(--text); --bs-btn-bg: var(--raised); --bs-btn-border-color: var(--border-strong);
}
.btn-warning, .btn-outline-warning {
  --bs-btn-color: var(--warn); --bs-btn-bg: var(--raised); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--warn); --bs-btn-hover-bg: rgba(255, 157, 107, 0.14); --bs-btn-hover-border-color: var(--warn);
  --bs-btn-active-color: var(--warn); --bs-btn-active-bg: rgba(255, 157, 107, 0.14); --bs-btn-active-border-color: var(--warn);
}
/* Button row on the member page (replaces the old Bootstrap row, so nothing bleeds out of the card) */
.member-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.member-actions .btn { flex: 1 1 160px; }
@media (max-width: 575px) { .member-actions .btn { flex-basis: 100%; } }
.btn-outline-secondary.active, .btn-outline-secondary:active, .btn-check:checked + .btn-outline-secondary {
  --bs-btn-active-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--accent);
  color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent);
}
.btn-link { --bs-btn-color: var(--accent-ink); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--text); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; text-decoration: underline; border: 0; margin-top: 0; }
.btn-sm { --bs-btn-padding-y: 5px; --bs-btn-padding-x: 11px; --bs-btn-font-size: 0.85rem; --bs-btn-border-radius: var(--r-md); }
.btn-lg { --bs-btn-padding-y: 10px; --bs-btn-padding-x: 20px; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: var(--r-md); }
.btn-close { --bs-btn-close-opacity: 0.7; --bs-btn-close-hover-opacity: 1; background-color: transparent; border: 0; padding: 0.5em; border-radius: var(--r-sm); }
.btn-close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; box-shadow: none; }
button.loginbutton, .loginbutton { width: 100%; margin-top: 8px; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 14px; }
.form-label, .col-form-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 5px; padding-top: calc(0.4rem + 1px); padding-bottom: 0; }
.col-form-label { padding-top: 9px; }
input.form-control, textarea.form-control, select.form-control, .form-select,
input[type=email], input[type=search], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
  width: 100%; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background-color: var(--code); color: var(--text); font: inherit; transition: border-color 0.12s, box-shadow 0.12s;
}
.form-control, .form-select { --bs-body-bg: var(--code); background-color: var(--code); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); }
.form-control:focus, .form-select:focus, input[type=email]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=date]:focus {
  background-color: var(--code); color: var(--text); outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--code); opacity: 0.6; }
.form-control::placeholder { color: var(--muted); opacity: 0.75; }
.form-control-sm, .form-select-sm { padding: 5px 10px; font-size: 0.88rem; border-radius: var(--r-md); }
.form-control.w-auto, .form-select.w-auto { width: auto; }
.form-control-color { padding: 0; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e9ab0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-check { display: inline-block !important; width: 200px; min-height: 0; padding-left: 1.7em; margin: 4px 0; }
.longer-check { width: 400px; max-width: 100%; }
.check-inline { display: inline; }
.centercheck { margin-left: 1rem !important; }
.form-check-input { width: 1.1em; height: 1.1em; margin-top: 0.2em; background-color: var(--code); border: 1px solid var(--border-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231c1303' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:checked[type=radio] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231c1303'/%3e%3c/svg%3e"); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231c1303'/%3e%3c/svg%3e"); }
.form-check-label { display: inline; margin: 0; font-size: 0.92rem; color: var(--text); }
label.check, .check { color: var(--text); }
.input-group-text { background: var(--raised); color: var(--muted); border: 1px solid var(--border-strong); }
.form-text { color: var(--muted); }
.invalid-feedback { color: var(--err); }

/* Login */
.login-body { min-height: 100vh; }
.login-app { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px 16px; }
.form-signin { width: 100%; max-width: 380px; margin: 0; padding: 28px 28px 22px; }
.form-signin h1 { margin: -6px 0 24px; text-align: center; }
.form-signin .sub { margin: 0 0 20px; }
.form-signin .field { margin-bottom: 14px; }
.form-signin .logo { max-width: 160px; max-height: 70px; width: auto; height: auto; }
.login-stack { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.login-stack .form-signin { max-width: none; }
.login-brand { display: flex; justify-content: center; margin: 0; }
/* 14px field gap above + 8px, 8px button margin below + 14px: 22px either side */
.form-signin .check { justify-content: center; align-items: center; margin: 8px 0 14px; }
.form-signin .check input { margin-top: 0; }
.form-signin .copyright { margin: 22px 0 0; font-size: 0.8rem; color: var(--muted); text-align: center; }

/* ---------- Tables ---------- */
.table {
  --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--accent-soft); --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--accent-soft); --bs-table-hover-color: var(--text);
  --bs-table-active-bg: var(--accent-soft); --bs-table-active-color: var(--text);
  margin-bottom: 0; font-size: 0.92rem;
}
.table > :not(caption) > * > * { padding: 9px 10px; }
/* A table that is only as wide as its content (add class table-fit) */
.updates-toggle { display: flex; align-items: center; justify-content: center; width: 100%; margin: 4px 0 0; padding: 4px; background: transparent; border: 0; border-radius: var(--r-md); color: var(--muted); }
.updates-toggle:hover { color: var(--text); background: var(--accent-soft); }
.updates-toggle svg { transition: transform 0.2s ease; }
.updates-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Checkbox + label on one line, so two columns of them line up row by row */
.consent-line { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; min-height: 26px; }
.consent-line .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
.consent-line .form-check-label { margin: 0; }
.modal-note { margin-top: 12px; padding: 8px 12px; border-left: 3px solid #f2a900; border-radius: 8px; font-size: 0.9rem; background: color-mix(in srgb, #f2a900 14%, var(--card)); color: var(--text); }
.modal-note[hidden] { display: none; }
.table.table-fit { width: auto; min-width: 360px; max-width: 100%; }
/* Tables (and titles) in one stack share one width: that of the widest of them */
.table-stack { display: grid; grid-template-columns: minmax(0, 1fr); width: fit-content; max-width: 100%; }
.table-stack > .table { width: 100%; }
/* Birthdays: two lists side by side with equal columns (the grid is as wide as the widest needs), one column when narrow */
.birthday-grid { display: inline-grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; max-width: 100%; }
.birthday-grid > section { min-width: 0; }
.birthday-grid .table { width: 100%; min-width: 0; }
.birthday-grid > section > p:first-child { margin-top: 0; margin-bottom: 10px; }
@media (max-width: 1100px) { .birthday-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: fit-content; } .birthday-grid > section + section { margin-top: 32px; } }
.table > thead > tr > th { background: var(--raised); color: var(--muted); font-weight: 600; font-size: 0.8rem; border-bottom: 1px solid var(--border-strong); }
.table-responsive { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); margin: 8px 0 16px; }
.table-responsive > .table > thead > tr > th:first-child { border-top-left-radius: var(--r-md); }
.table-responsive > .table > thead > tr > th:last-child { border-top-right-radius: var(--r-md); }
.table a { display: inline-block; }
td, .highlight, .highlight td { color: var(--text); }
tr.highlight > td, td.highlight, .highlight { background: var(--ok-soft); color: var(--text) !important; }
.controle td { vertical-align: middle; }
th.sortable { white-space: nowrap; }
th.sorted-asc::after { content: " \2193"; }
th.sorted-desc::after { content: " \2191"; }

/* ---------- Badges ---------- */
/* ---------- Toasts (Bootstrap toasts, coloured per type) ---------- */
.toast-container {
  position: fixed; right: 24px; bottom: 24px;
  z-index: 2000; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none;
}
.toast-container > :not(:last-child) { margin-bottom: 0; }  /* Bootstrap adds its own gap as well */
.toast {
  --tone: var(--border-strong);
  width: fit-content; min-width: 160px; max-width: min(380px, calc(100vw - 32px)); pointer-events: auto; overflow: hidden;
  color: var(--text);
  background: color-mix(in srgb, var(--tone) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  border-left: 3px solid var(--tone);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  font-size: 0.82rem; line-height: 1.35;
}
.toast:not(.show) { display: none; }
.toast.fade:not(.show) { opacity: 0; }
.toast.theme-success { --tone: #2fc47a; }
.toast.theme-danger { --tone: #f0545a; }
.toast.theme-warning { --tone: #f2a900; }
.toast.theme-info { --tone: #3aa0ff; }
.toast-header { display: flex; align-items: center; gap: 7px; padding: 6px 9px 6px 10px; background: transparent; border: 0; color: color-mix(in srgb, var(--tone) 60%, var(--text)); }
.toast-header strong { font-weight: 650; }
.toast-icon { flex: 0 0 auto; width: 15px; height: 15px; color: var(--tone); }
.toast-header:not(:last-child) { padding-bottom: 1px; }
.toast-body { padding: 0 10px 7px 32px; overflow-wrap: anywhere; }
.toast a { color: inherit; font-weight: 600; text-decoration: underline; }
.toast img { max-width: 100%; }
/* The close button is drawn in the colour of the toast */
.toast .btn-close {
  --x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5l11 11m0-11l-11 11' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  flex: 0 0 auto; margin: 0 0 0 8px; padding: 0; width: 0.75em; height: 0.75em; border: 0; border-radius: 0;
  background: var(--tone); opacity: 0.75; filter: none; box-shadow: none;
  -webkit-mask: var(--x) center / contain no-repeat; mask: var(--x) center / contain no-repeat;
}
.toast .btn-close:hover { opacity: 1; }
.toast .btn-close:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; }
.badge { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--code) !important; border: 1px solid var(--border); font-size: 0.78rem; font-weight: 500; color: var(--text); }
.badge.bg-success { border-color: var(--ok); color: var(--ok); }
.badge.bg-warning { border-color: var(--warn); color: var(--warn); }
.badge.bg-danger { border-color: var(--err); color: var(--err); }
.badge.bg-primary, .badge.bg-info { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- Modals ---------- */
.modal { --bs-modal-bg: var(--raised); --bs-modal-color: var(--text); --bs-modal-border-color: var(--border-strong); --bs-modal-border-radius: var(--r-lg); --bs-modal-inner-border-radius: var(--r-lg); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); --bs-modal-box-shadow: var(--shadow); }
.modal-content { background: var(--raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-title { font-family: var(--font-display); font-weight: 650; font-size: 1.08rem; color: var(--text); }
.modal-header.bg-danger { background: var(--err-soft) !important; color: var(--err) !important; }
.modal-header.bg-danger .modal-title, .modal-header.bg-danger.text-white { color: var(--err) !important; }
/* The page lives in .app (z-index 1, above the particle canvas), so a body level Bootstrap backdrop would
   cover the modal. The modal paints its own scrim instead and the backdrop element is hidden. */
.modal-backdrop { display: none !important; }
.modal.show { background: var(--scrim); backdrop-filter: blur(2px); }
.modal-footer { gap: 8px; flex-wrap: wrap; }
.modal-footer > .btn { margin: 0; flex: 0 1 auto; }

/* ---------- Lists and misc Bootstrap parts ---------- */
.list-group-item { background: var(--card); color: var(--text); border-color: var(--border); }
.dropdown-menu { --bs-dropdown-bg: var(--raised); --bs-dropdown-color: var(--text); --bs-dropdown-border-color: var(--border-strong); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--accent-soft); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-border-radius: var(--r-md); box-shadow: var(--shadow); }
.progress { background: var(--code); border: 1px solid var(--border); }
.progress-bar { background: var(--accent); color: var(--accent-text); }
.breadcrumb a { color: var(--accent-ink); }

/* ---------- Commissies: token input ---------- */
.token-input-wrap { position: relative; }
.token-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; height: auto; min-height: 42px; }
.token { display: inline-flex; align-items: center; gap: 0.1rem; background: var(--raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 12px 2px 6px; font-size: 0.88rem; line-height: 1.4; }
.token:focus, .token.active { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.token-remove { background: none; border: 0; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 0.25rem; border-radius: 999px; }
.token-remove:hover { color: var(--err); background: transparent; }
.token-field { flex: 1 1 90px; min-width: 90px; border: 0; outline: none; background: transparent; color: inherit; padding: 0.15rem; box-shadow: none; }
.token-field:focus { box-shadow: none; border: 0; }
.token-suggestions { position: absolute; z-index: 1050; left: 0; right: 0; top: 100%; margin: 0.15rem 0 0; padding: 0.25rem 0; list-style: none; background: var(--raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); max-height: 240px; overflow-y: auto; box-shadow: var(--shadow); }
.token-suggestions li { padding: 0.3rem 0.75rem; white-space: nowrap; }
.token-suggestions li.active, .token-suggestions li:hover { background: var(--accent-soft); animation: animate 0.4s infinite !important; }
tr.commissie-dirty td:first-child::after { content: " *"; color: var(--warn); font-weight: bold; }
.save-status { min-height: 1.5rem; font-size: 0.875rem; }
.save-status.success { color: var(--ok); }
.save-status.error { color: var(--err); }
.save-status.info { color: var(--accent-ink); }
.row-saving .token-input { opacity: 0.6; pointer-events: none; }

/* ---------- Settings: mail preview and logo preview ---------- */
#mail-preview { background: #fff !important; color: #222 !important; }
.logo-preview-box { display: flex; align-items: center; justify-content: center; min-height: 80px; margin-top: 0.5rem; padding: 0.5rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background-color: #d0d0d0; background-image: conic-gradient(#b8b8b8 25%, transparent 0 50%, #b8b8b8 0 75%, transparent 0); background-size: 16px 16px; }
.logo-preview-box img { max-width: 100%; max-height: 100px; }
.logo-preview-msg { padding: 0.1rem 0.4rem; border-radius: 0.25rem; background: rgba(255, 255, 255, 0.75); color: #222; font-size: 0.875rem; }

/* ---------- Voting pages ---------- */
.vote-table th, .vote-table td { vertical-align: middle; }
.vote-divider { border-right: 2px dashed var(--border-strong); }

/* ---------- Clickable things that are not links or buttons ---------- */
.hover:hover, .btn:hover, .form-check-input:hover, tr[data-href]:hover, .token-remove:hover { animation: animate 0.4s infinite !important; }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .btn, .form-control, .form-select, input[type=text], input[type=password], select { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .form-check, .longer-check { width: 100%; }
  .content .col { flex: 1 1 100%; width: 100%; }
  .dashdoughnut { padding-left: 0; }
}

/* ---------- Simple shell (gegevenscontrole and voting): a top bar instead of the rail ---------- */
.app-simple { display: block; }
.app-simple .stage-inner { max-width: 960px; }
/* More room around the content panel */
.stage { padding: 48px clamp(40px, 5vw, 72px) 88px; }
@media (max-width: 860px) { .stage { padding: 40px 36px 72px; } }
@media (max-width: 520px) { .stage { padding: 32px 28px 64px; } .stage-inner::before { inset: -16px; } }
/* Title above the panel (controle pages) */
.stage-title { margin: 0 0 44px; text-align: center; font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.stage-title span { display: inline-block; font-size: 2.2rem; }
/* A semi-transparent panel, a little bigger than the content, so the animated background shows around and through it */
.stage-inner { position: relative; isolation: isolate; }
.stage-inner::before {
  content: ""; position: absolute; inset: -24px; z-index: -1; pointer-events: none;
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Brand logo from the settings page, painted in the accent colour: the image is only used as a mask,
   its own pixels are invisible and just give the span its size. */
.brand-logo { display: block; flex: 0 0 auto; height: 30px; background: var(--accent); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.brand-logo img { display: block; height: 100%; width: auto; max-width: 120px; opacity: 0; }
/* Old markup (a plain <img class="brand-logo">) must never get the accent block: show it transparent */
img.brand-logo { background: none; -webkit-mask: none; mask: none; opacity: 1; width: auto; max-width: 120px; }
.brand, .brand:hover, .brand:focus { background: transparent; }

/* Committee pills behind a member name, and tabs at the very top of a page */
.title-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 14px; vertical-align: middle; font-family: var(--font-ui); }
.title-pills .chip { margin: 0; padding: 2px 12px; border-radius: 999px; font-size: 0.88rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; background: var(--raised); color: var(--text); border: 1px solid var(--border-strong); }
@media (min-width: 861px) { .tabs:first-child { margin-right: 54px; } }

/* ---------- Settings tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--code); }
.tab { padding: 7px 14px; border-radius: var(--r-sm); color: var(--muted); font-weight: 500; text-decoration: none !important; }
.tab:hover { background: var(--accent-soft); color: var(--text); animation: animate 0.4s infinite !important; }
.tab.active { background: var(--accent-soft); color: var(--text); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); }
.section-title { display: block; font-size: 1.08rem; margin: 22px 0 12px; }
.tab-body > .section-title:first-child { margin-top: 4px; }
@media (max-width: 860px) { .tab { flex: 1 1 auto; text-align: center; min-height: 40px; } }

/* Logo on the login pages, also painted in the accent colour on a transparent background */
.login-logo { height: 110px; }
.login-logo img { max-width: 320px; }

/* Commissies: the name field inside the token box has no border or background of its own */
.token-input input.token-field, .token-input input.token-field:focus { border: 0; background: transparent; box-shadow: none; outline: none; border-radius: 0; padding: 0.15rem 0.25rem; }

/* ---------- Ouderfiguren rows (member page): a grid that wraps instead of squeezing the inputs ---------- */
.ouder-row.row { --bs-gutter-x: 0; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; align-items: flex-start; }
.ouder-row.row > * { width: auto; max-width: none; padding: 0; margin: 0; flex: 1 1 170px; }
.ouder-row.row > .col:has(> .form-check) { flex: 0 1 auto; white-space: nowrap; }  /* the checkboxes take what they need */
.ouder-row.row > .col-auto { flex: 0 0 auto; margin-left: auto; }                   /* the remove button stays at the end */
.ouder-row .form-check { padding-left: 1.6em; }
.ouder-row + .ouder-row { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- Subtle coloured buttons (same hues as the alerts) ---------- */
.btn-subtle-success, .btn-subtle-info, .btn-subtle-warning, .btn-subtle-danger {
  --tone: var(--border-strong);
  --bs-btn-font-weight: 600;
  --bs-btn-color: color-mix(in srgb, var(--tone) 62%, var(--text));
  --bs-btn-bg: color-mix(in srgb, var(--tone) 14%, var(--raised));
  --bs-btn-border-color: color-mix(in srgb, var(--tone) 55%, transparent);
  --bs-btn-hover-color: color-mix(in srgb, var(--tone) 40%, var(--text));
  --bs-btn-hover-bg: color-mix(in srgb, var(--tone) 28%, var(--raised));
  --bs-btn-hover-border-color: var(--tone);
  --bs-btn-active-color: color-mix(in srgb, var(--tone) 40%, var(--text));
  --bs-btn-active-bg: color-mix(in srgb, var(--tone) 34%, var(--raised));
  --bs-btn-active-border-color: var(--tone);
  --bs-btn-disabled-color: color-mix(in srgb, var(--tone) 62%, var(--text));
  --bs-btn-disabled-bg: color-mix(in srgb, var(--tone) 14%, var(--raised));
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--tone) 55%, transparent);
}
.btn-subtle-success { --tone: #2fc47a; }
.btn-subtle-info { --tone: #3aa0ff; }
.btn-subtle-warning { --tone: #f2a900; }
.btn-subtle-danger { --tone: #f0545a; }

/* Show/hide password button inside the password field */
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 46px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--muted); }
.pw-toggle:hover { color: var(--text); background: var(--accent-soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.pw-toggle svg { width: 19px; height: 19px; display: block; }
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle.on { color: var(--accent-ink); }
.pw-toggle.on .pw-eye { display: none; }
.pw-toggle.on .pw-eye-off { display: block; }

/* Dragging a column header (jQuery UI sortable, axis x): sticky headers carry top:0, which made the
   dragged header jump to the top of the page. Keep it at its own height instead. */
thead th.ui-sortable-helper { top: auto; }

/* Thin progress bar while a page is being fetched without a full reload (js/pjax.js) */
#pjax-bar { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: var(--accent); z-index: 3000; pointer-events: none; opacity: 0; box-shadow: 0 0 8px var(--accent); }

/* ---------- Roles on committee members: hoofd is green (success), fiscus is blue (info) ---------- */
.token[data-role] { --tone: var(--border-strong); }
.token[data-role="hoofd"] { --tone: #2fc47a; }
.token[data-role="fiscus"] { --tone: #3aa0ff; }
.token[data-role] {
  color: color-mix(in srgb, var(--tone) 62%, var(--text));
  background: color-mix(in srgb, var(--tone) 16%, var(--raised));
  border-color: color-mix(in srgb, var(--tone) 60%, transparent);
}
.token[data-role] .token-remove { color: inherit; }
.token { user-select: none; }
/* The same colours on the committee pills behind a member name */
.title-pills .chip[data-role] { --tone: var(--border-strong); color: color-mix(in srgb, var(--tone) 62%, var(--text)); background: color-mix(in srgb, var(--tone) 16%, var(--raised)); border-color: color-mix(in srgb, var(--tone) 60%, transparent); }
.title-pills .chip[data-role="hoofd"] { --tone: #2fc47a; }
.title-pills .chip[data-role="fiscus"] { --tone: #3aa0ff; }
.token[data-role] .token-remove:hover { color: var(--err); }

/* ---------- Right click menu (names on the commissie list) ---------- */
.ctxmenu { position: fixed; z-index: 2100; min-width: 190px; padding: 6px; background: var(--raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow); }
.ctxmenu[hidden] { display: none; }
.ctxmenu .ctx-title { padding: 4px 10px 6px; font-size: 12px; color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctxmenu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; margin: 0; padding: 8px 10px; border: 0; background: transparent; color: inherit; border-radius: var(--r-sm); font: inherit; }
.ctxmenu button:hover, .ctxmenu button:focus-visible { background: var(--accent-soft); outline: none; }
.ctxmenu button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border-strong); flex: 0 0 auto; }
.ctxmenu button[data-role="hoofd"]::before { background: #2fc47a; border-color: #2fc47a; }
.ctxmenu button[data-role="fiscus"]::before { background: #3aa0ff; border-color: #3aa0ff; }
.ctxmenu button.on { font-weight: 650; }

/* Example pills in the explanation text of the commissie page */
.token.token-example { padding: 1px 10px; vertical-align: baseline; }

/* Field checks (js/formfields.js): green when tidied and fine, red when the format is wrong */
.form-control.lb-valid, .form-control.lb-valid:focus { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.form-control.lb-invalid, .form-control.lb-invalid:focus { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.form-control[name=postcode] { text-transform: uppercase; }

/* A heading that follows content (a table, a form, a button, a paragraph) gets room above it */
:is(table, form, p, ul, section, .table-responsive, .table-stack, .card, .row, a, .btn, button) + .page-title { margin-top: 34px; }

/* Links under a title, in one row */
/* IK list: the IKs on the left, the members of the chosen IK on the right */
.ik-split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 36px; align-items: start; }
.ik-row.selected > td { background: var(--accent-soft); color: var(--text); }
.ik-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ik-split .table { margin-bottom: 0; }
.ik-detail { position: sticky; top: 16px; min-height: 120px; padding: 0; }
.ik-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 12px; min-height: 38px; }
.ik-detail-title { margin: 0; font-size: 1.4rem; line-height: 1.3; }
.ik-detail-sub { color: var(--muted); }
.ik-detail-head a { margin-left: auto; }
.ik-empty { margin: 8px 0; color: var(--muted); }
@media (max-width: 900px) { .ik-split { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ik-detail { position: static; } }

/* Name of the tool, between the logo and the login card */
.login-title { margin: 0; font-size: 1.5rem; font-weight: 700; text-align: center; color: #fff; }
:root[data-theme="light"] .login-title { color: var(--text); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .login-title { color: var(--text); } }