/**
 * Hidden scrollbars, carried HERE rather than imported (15-09-2026).
 *
 * This was `@import url("../toolkit/scroll.css")`. apps/toolkit/ is an internal
 * repo: we COPY things out of it, we never wire an app to it. That import made
 * a deployed file depend on a folder that must not be deployed, so on the server
 * it resolved to a 404, the 404 handler answered with HTML, and every branded
 * page logged "Refused to apply style ... MIME type ('text/html')".
 *
 * The rules below were copied out of the toolkit on 15-09-2026 and now belong to
 * this file. There is no link back: edit them here.
 *
 * The lists and the page still scroll; only the bar itself is out of sight.
 * A scrollbar is the one sign that a list continues, so a view that needs that
 * sign asks for it back with the class `show-scrollbar`.
 *
 * The names below are MEASURED, not guessed. A headless browser walked every
 * branded screen in apps/brew_suite and site/, collected each element that
 * really scrolls, and this list is the result.
 * There is no bare `*` selector here: it hits elements that never scroll and
 * costs style time on every page.
 */

/* The page, the elements that scroll by nature, and the container families. */
html, body, pre, textarea, select,
[class*="scroll"], [class*="overflow-"],
[class*="list"], [id$="-list"], [id$="List"],
[class*="modal"], [id$="Body"], [id$="-body"],
[class*="table"], [class*="wrap"], [class*="grid"],
[class*="content"], [class*="body"], [class*="panel"], [class*="pane"],
[class*="input"], [class*="textarea"], [class*="field"], [class*="editor"],
[class*="chat"], [class*="thread"], [class*="messages"], [class*="history"],
[class*="menu"], [class*="toolbar"], [class*="sidebar"], [class*="rail"],
[class*="picker"], [class*="suggest"], [class*="stack"], [class*="column"],
[class*="form"], [class*="dock"], [class*="tab-"], [class*="preview"],
[id*="panel" i], [id*="container" i], [id*="content" i],
.dash, .main, .card, .sheet-edit main {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

:is(
  html, body, pre, textarea, select,
  [class*="scroll"], [class*="overflow-"],
  [class*="list"], [id$="list" i],
  [class*="modal"], [id$="body" i],
  [class*="table"], [class*="wrap"], [class*="grid"],
  [class*="content"], [class*="body"], [class*="panel"], [class*="pane"],
  [class*="input"], [class*="textarea"], [class*="field"], [class*="editor"],
  [class*="chat"], [class*="thread"], [class*="messages"], [class*="history"],
  [class*="menu"], [class*="toolbar"], [class*="sidebar"], [class*="rail"],
  [class*="picker"], [class*="suggest"], [class*="stack"], [class*="column"],
  [class*="form"], [class*="dock"], [class*="tab-"], [class*="preview"],
  [id*="panel" i], [id*="container" i], [id*="content" i],
  .dash, .main, .card, .sheet-edit main
)::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* The way back, for a view that must show that the content continues. */
.show-scrollbar {
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
.show-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }

/**
 * Stadsbrouwerij Veenendaal - Brand Colors
 * Centralized color system for uniform look and feel across all apps
 * 
 * Usage: Import this file in all apps to use brand colors
 * <link rel="stylesheet" href="/branding/colors.css">
 */

/* ========================================================================
   CORE BRAND COLORS
   ======================================================================== */

:root {
  /* Primary Brand Color - Signature Yellow */
  --sbv-brand-primary: #FFD900;
  --sbv-brand-primary-hover: #eab308;
  --sbv-brand-primary-active: #ca8a04;
  --sbv-brand-primary-contrast: #111827; /* Dark text on yellow */

  /* Short-form aliases used across brew_suite apps */
  --sbv-yellow: #FFD900;
  --sbv-black: #111827;
  
  /* Secondary Brand Colors */
  --sbv-brand-secondary: #282828;
  --sbv-brand-secondary-light: #3a3a3a;
  --sbv-brand-secondary-lighter: #4a4a4a;
  
  /* Neutral Palette - True Grays (no blue tint) */
  --sbv-gray-50: #f9f9f9;
  --sbv-gray-100: #f0f0f0;
  --sbv-gray-200: #e5e5e5;
  --sbv-gray-300: #d4d4d4;
  --sbv-gray-400: #a3a3a3;
  --sbv-gray-500: #737373;
  --sbv-gray-600: #525252;
  --sbv-gray-700: #404040;
  --sbv-gray-800: #262626;
  --sbv-gray-900: #171717;
  
  /* Semantic Colors */
  --sbv-success: #22c55e;
  --sbv-success-light: #86efac;
  --sbv-success-dark: #16a34a;
  
  --sbv-warning: #f59e0b;
  --sbv-warning-light: #fbbf24;
  --sbv-warning-dark: #d97706;
  
  --sbv-danger: #ef4444;
  --sbv-danger-light: #fca5a5;
  --sbv-danger-dark: #dc2626;
  
  --sbv-info: #3b82f6;
  --sbv-info-light: #93c5fd;
  --sbv-info-dark: #2563eb;
  
  /* Brewery-specific Accent Colors */
  --sbv-bronze: #d4a574;
  --sbv-copper: #b87333;
  --sbv-amber: #FFBF00;
  --sbv-hops-green: #10b981;
  --sbv-malt-brown: #8b4513;
}

/* ========================================================================
   LIGHT MODE THEME
   ======================================================================== */

:root[data-theme="light"], 
.sbv-theme-light {
  /* Backgrounds */
  --sbv-bg-primary: #ffffff;
  --sbv-bg-secondary: #f9f9f9;
  --sbv-bg-tertiary: #f0f0f0;
  --sbv-bg-elevated: #ffffff;
  
  /* Text */
  --sbv-text-primary: #171717;
  --sbv-text-secondary: #404040;
  --sbv-text-tertiary: #737373;
  --sbv-text-muted: #a3a3a3;
  --sbv-text-inverse: #ffffff;
  
  /* Borders */
  --sbv-border-light: #f0f0f0;
  --sbv-border-medium: #e5e5e5;
  --sbv-border-strong: #d4d4d4;
  
  /* Interactive Elements */
  --sbv-interactive-default: #ffffff;
  --sbv-interactive-hover: #f9f9f9;
  --sbv-interactive-active: #f0f0f0;
  --sbv-interactive-disabled: #f9f9f9;
  
  /* Shadows */
  --sbv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sbv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --sbv-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --sbv-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  /* Overlays */
  --sbv-overlay-light: rgba(0, 0, 0, 0.5);
  --sbv-overlay-medium: rgba(0, 0, 0, 0.6);
  --sbv-overlay-strong: rgba(0, 0, 0, 0.75);
  
  /* Focus */
  --sbv-focus-ring: #a7f3d0;
  --sbv-focus-ring-offset: #ffffff;

  /* Compatibility aliases (legacy apps) */
  --bg: var(--sbv-bg-primary);
  --text: var(--sbv-text-primary);
  --muted: var(--sbv-text-tertiary);
  --border: var(--sbv-border-medium);
  --card: var(--sbv-bg-elevated);
  --primary: var(--sbv-brand-primary);
  --primary-fg: var(--sbv-brand-primary-contrast);
  --brand: var(--sbv-brand-primary);
}

/* ========================================================================
   DARK MODE THEME (DEFAULT for modern apps)
   ======================================================================== */

:root[data-theme="dark"], 
.sbv-theme-dark {
  /* Backgrounds - True neutral grays */
  --sbv-bg-primary: #1a1a1a;
  --sbv-bg-secondary: #2a2a2a;
  --sbv-bg-tertiary: #3a3a3a;
  --sbv-bg-elevated: #2a2a2a;
  
  /* Text */
  --sbv-text-primary: #e5e5e5;
  --sbv-text-secondary: #cccccc;
  --sbv-text-tertiary: #999999;
  --sbv-text-muted: #737373;
  --sbv-text-inverse: #171717;
  
  /* Borders */
  --sbv-border-light: #2a2a2a;
  --sbv-border-medium: #3a3a3a;
  --sbv-border-strong: #4a4a4a;
  
  /* Interactive Elements */
  --sbv-interactive-default: #2a2a2a;
  --sbv-interactive-hover: #3a3a3a;
  --sbv-interactive-active: #404040;
  --sbv-interactive-disabled: #2a2a2a;
  
  /* Shadows */
  --sbv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sbv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --sbv-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --sbv-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  
  /* Overlays */
  --sbv-overlay-light: rgba(0, 0, 0, 0.6);
  --sbv-overlay-medium: rgba(0, 0, 0, 0.7);
  --sbv-overlay-strong: rgba(0, 0, 0, 0.85);
  
  /* Focus */
  --sbv-focus-ring: #a7f3d0;
  --sbv-focus-ring-offset: #1a1a1a;

  /* Compatibility aliases (legacy apps) */
  --bg: var(--sbv-bg-primary);
  --text: var(--sbv-text-primary);
  --muted: var(--sbv-text-tertiary);
  --border: var(--sbv-border-medium);
  --card: var(--sbv-bg-elevated);
  --primary: var(--sbv-brand-primary);
  --primary-fg: var(--sbv-brand-primary-contrast);
  --brand: var(--sbv-brand-primary);
}

/* ========================================================================
   APP-SPECIFIC ACCENT COLORS
   ======================================================================== */

/* OpsDash - Task Management */
.opsdash-theme,
.app-opsdash {
  --sbv-app-accent: var(--sbv-brand-primary);
  --sbv-app-accent-hover: var(--sbv-brand-primary-hover);
  --sbv-app-accent-contrast: var(--sbv-brand-primary-contrast);
}

/* Relatiecheck - Relationship Tool */
.relatiecheck-theme,
.app-relatiecheck {
  --sbv-app-accent: #e74c3c;
  --sbv-app-accent-hover: #c0392b;
  --sbv-app-accent-contrast: #ffffff;
}

/* BrewTrack - Brewery Management */
.brewtrack-theme,
.app-brewtrack {
  --sbv-app-accent: var(--sbv-bronze);
  --sbv-app-accent-hover: var(--sbv-copper);
  --sbv-app-accent-contrast: #ffffff;
}

/* MailAgent - Email Assistant */
.mailagent-theme,
.app-mailagent {
  --sbv-app-accent: var(--sbv-brand-primary);
  --sbv-app-accent-hover: var(--sbv-brand-primary-hover);
  --sbv-app-accent-contrast: var(--sbv-brand-primary-contrast);
}

/* Klusjes - Jobs Platform */
.klusjes-theme,
.app-klusjes {
  --sbv-app-accent: var(--sbv-brand-primary);
  --sbv-app-accent-hover: var(--sbv-brand-primary-hover);
  --sbv-app-accent-contrast: var(--sbv-brand-primary-contrast);
}

/* Condoleance - Memorial */
.condoleance-theme,
.app-condoleance {
  --sbv-app-accent: #8b7355;
  --sbv-app-accent-hover: #6d5a44;
  --sbv-app-accent-contrast: #ffffff;
}

/* LogoBier - Label Creator */
.logobier-theme,
.app-logobier {
  --sbv-app-accent: var(--sbv-amber);
  --sbv-app-accent-hover: var(--sbv-brand-primary-hover);
  --sbv-app-accent-contrast: var(--sbv-brand-primary-contrast);
}

/* Belevingen - Experiences */
.belevingen-theme,
.app-belevingen {
  --sbv-app-accent: var(--sbv-hops-green);
  --sbv-app-accent-hover: #059669;
  --sbv-app-accent-contrast: #ffffff;
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

/* Background Colors */
.sbv-bg-brand { background-color: var(--sbv-brand-primary); color: var(--sbv-brand-primary-contrast); }
.sbv-bg-primary { background-color: var(--sbv-bg-primary); }
.sbv-bg-secondary { background-color: var(--sbv-bg-secondary); }
.sbv-bg-tertiary { background-color: var(--sbv-bg-tertiary); }

/* Text Colors */
.sbv-text-brand { color: var(--sbv-brand-primary); }
.sbv-text-primary { color: var(--sbv-text-primary); }
.sbv-text-secondary { color: var(--sbv-text-secondary); }
.sbv-text-muted { color: var(--sbv-text-muted); }
.sbv-text-success { color: var(--sbv-success); }
.sbv-text-warning { color: var(--sbv-warning); }
.sbv-text-danger { color: var(--sbv-danger); }
.sbv-text-info { color: var(--sbv-info); }

/* Border Colors */
.sbv-border { border-color: var(--sbv-border-medium); }
.sbv-border-light { border-color: var(--sbv-border-light); }
.sbv-border-strong { border-color: var(--sbv-border-strong); }
.sbv-border-brand { border-color: var(--sbv-brand-primary); }
.sbv-border-success { border-color: var(--sbv-success); }
.sbv-border-warning { border-color: var(--sbv-warning); }
.sbv-border-danger { border-color: var(--sbv-danger); }
.sbv-border-info { border-color: var(--sbv-info); }

/* Shadows */
.sbv-shadow-sm { box-shadow: var(--sbv-shadow-sm); }
.sbv-shadow-md { box-shadow: var(--sbv-shadow-md); }
.sbv-shadow-lg { box-shadow: var(--sbv-shadow-lg); }
.sbv-shadow-xl { box-shadow: var(--sbv-shadow-xl); }

/* Focus Ring */
.sbv-focus-ring:focus {
  outline: 2px solid var(--sbv-focus-ring);
  outline-offset: 2px;
}

/* ========================================================================
   COMMON UI COMPONENTS
   ======================================================================== */

/* Primary Button - Yellow with Black Text */
.sbv-button-brand,
.sbv-button-primary {
  background-color: var(--sbv-brand-primary);
  color: var(--sbv-brand-primary-contrast);
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-decoration: none;
}

.sbv-button-brand > img,
.sbv-button-primary > img,
.sbv-button-app > img,
.sbv-button-accent > img,
.sbv-button-secondary-border > img,
.sbv-button-default > img,
.sbv-button-ghost > img,
.sbv-button-white > img,
.sbv-button-tertiary > img,
.sbv-button-brand > svg,
.sbv-button-primary > svg,
.sbv-button-app > svg,
.sbv-button-accent > svg,
.sbv-button-secondary-border > svg,
.sbv-button-default > svg,
.sbv-button-ghost > svg,
.sbv-button-white > svg,
.sbv-button-tertiary > svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

button.sbv-button-brand:hover,
a.sbv-button-brand:hover,
button.sbv-button-primary:hover,
a.sbv-button-primary:hover {
  background-color: #000000;
  color: #ffffff;
}

button.sbv-button-brand:active,
a.sbv-button-brand:active,
button.sbv-button-primary:active,
a.sbv-button-primary:active {
  background-color: var(--sbv-brand-primary-active);
}

/* App Button - Neutral by default, override per app when needed */
.sbv-button-app,
.sbv-button-accent {
  background-color: var(--sbv-app-button-bg, var(--sbv-gray-200));
  color: var(--sbv-app-button-fg, #111827);
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-decoration: none;
}

button.sbv-button-app:hover,
a.sbv-button-app:hover,
button.sbv-button-accent:hover,
a.sbv-button-accent:hover {
  background-color: var(--sbv-app-button-bg-hover, var(--sbv-gray-300));
  color: var(--sbv-app-button-fg, #111827);
}

button.sbv-button-app:active,
a.sbv-button-app:active,
button.sbv-button-accent:active,
a.sbv-button-accent:active {
  background-color: var(--sbv-app-button-bg-active, var(--sbv-gray-400));
}

/* Secondary Button - Black with White Text */
.sbv-button-secondary {
  background-color: #282828;
  color: #ffffff;
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-decoration: none;
}

button.sbv-button-secondary:hover,
a.sbv-button-secondary:hover {
  background-color: #3a3a3a;
  color: #ffffff;
}

button.sbv-button-secondary:active,
a.sbv-button-secondary:active {
  background-color: #4a4a4a;
  color: #ffffff;
}

/* Tertiary Button - White with Black Text */
.sbv-button-white,
.sbv-button-tertiary {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e5e5;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-decoration: none;
}

button.sbv-button-white:hover,
a.sbv-button-white:hover,
button.sbv-button-tertiary:hover,
a.sbv-button-tertiary:hover {
  background-color: #f9f9f9;
  color: #111827;
  border-color: #d4d4d4;
}

button.sbv-button-white:active,
a.sbv-button-white:active,
button.sbv-button-tertiary:active,
a.sbv-button-tertiary:active {
  background-color: #f0f0f0;
  color: #111827;
}

/* Secondary border button (previously default/ghost) - Adapts to theme */
.sbv-button-secondary-border,
.sbv-button-default,
.sbv-button-ghost {
  background-color: var(--sbv-interactive-default);
  color: var(--sbv-text-primary);
  border: 1px solid var(--sbv-border-medium);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-decoration: none;
}

button.sbv-button-secondary-border:hover,
a.sbv-button-secondary-border:hover,
button.sbv-button-default:hover,
a.sbv-button-default:hover,
button.sbv-button-ghost:hover,
a.sbv-button-ghost:hover {
  background-color: var(--sbv-interactive-hover);
}

/* Optional size modifier: compact buttons (useful for dense modal footers) */
.sbv-button-compact {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}

/* Brand Card */
.sbv-card {
  background-color: var(--sbv-bg-elevated);
  border: 1px solid var(--sbv-border-medium);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: var(--sbv-shadow-md);
  transition: all 0.2s ease;
}

.sbv-card:hover {
  box-shadow: var(--sbv-shadow-lg);
  transform: translateY(-2px);
}

/* Brand Input */
.sbv-input {
  background-color: var(--sbv-bg-primary);
  color: var(--sbv-text-primary);
  border: 1px solid var(--sbv-border-medium);
  border-radius: 0.5rem;
  padding: 0.75rem;
  width: 100%;
  transition: all 0.2s ease;
}

.sbv-input:focus {
  outline: 2px solid var(--sbv-focus-ring);
  outline-offset: 2px;
  border-color: var(--sbv-brand-primary);
}

/* Brand Badge */
.sbv-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.sbv-badge-brand {
  background-color: var(--sbv-brand-primary);
  color: var(--sbv-brand-primary-contrast);
}

.sbv-badge-success {
  background-color: var(--sbv-success-light);
  color: var(--sbv-success-dark);
}

.sbv-badge-warning {
  background-color: var(--sbv-warning-light);
  color: var(--sbv-warning-dark);
}

.sbv-badge-danger {
  background-color: var(--sbv-danger-light);
  color: var(--sbv-danger-dark);
}

/* ========================================================================
   RELATIECHECK-SPECIFIC COMPONENTS
   ======================================================================== */

/* Support Block - AI help and guidance boxes */
.sbv-support-block {
  background-color: var(--sbv-bg-secondary);
  border-left: 3px solid var(--sbv-app-accent);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  margin: 1rem 0;
}

/* Card with Accent Left Border */
.sbv-card-accent-left {
  background-color: var(--sbv-bg-elevated);
  border: 1px solid var(--sbv-border-medium);
  border-left: 3px solid var(--sbv-app-accent);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: var(--sbv-shadow-sm);
}

/* Card with Orange Accent (Relatiecheck theme) */
.sbv-card-accent-orange {
  background-color: var(--sbv-bg-elevated);
  border: 1px solid var(--sbv-border-medium);
  border-left: 3px solid #e74c3c;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: var(--sbv-shadow-sm);
}

/* Launch Container - Full-width screen wrapper */
.sbv-launch-container {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0.5rem 1.75rem;
}

/* Spacing Scale */
.sbv-space-xs { margin: 0.25rem; }
.sbv-space-sm { margin: 0.5rem; }
.sbv-space-md { margin: 1rem; }
.sbv-space-lg { margin: 1.5rem; }
.sbv-space-xl { margin: 2rem; }

.sbv-space-y-xs > * + * { margin-top: 0.25rem; }
.sbv-space-y-sm > * + * { margin-top: 0.5rem; }
.sbv-space-y-md > * + * { margin-top: 1rem; }
.sbv-space-y-lg > * + * { margin-top: 1.5rem; }
.sbv-space-y-xl > * + * { margin-top: 2rem; }

/* Typography Scale */
.sbv-text-xs { font-size: 0.75rem; line-height: 1rem; }
.sbv-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.sbv-text-base { font-size: 1rem; line-height: 1.5rem; }
.sbv-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.sbv-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.sbv-text-2xl { font-size: 1.5rem; line-height: 2rem; }
.sbv-text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

/* ========================================================================
   VANGNET: KEUZELIJSTEN OP EEN DONKERE UI
   ------------------------------------------------------------------------
   De klassieke fout, en hij is hier vaker teruggekomen dan welke andere ook:
   een <select> ziet er dicht prima uit en is open onleesbaar — lichte tekst op
   een lichte lijst.

   WAAROM HET GEBEURT. De <option>-lijst wordt door het BESTURINGSSYSTEEM
   getekend, niet door de pagina. Hij erft de kleuren van de pagina niet. Zet de
   app alleen `color` op de <select>, dan gaat die kleur wél mee naar de opties
   maar de achtergrond niet — en dan staat er lichtgrijze tekst op wit.

   DE ADDER: EEN DOORZICHTIGE ACHTERGROND. `background: rgba(255,255,255,.055)`
   op de <select> ziet er dicht perfect uit (hij composiet over de donkere kaart)
   en is open kapot (hij composiet over het WITTE systeemmenu). Dat is precies
   hoe het op 29-08-2026 opnieuw bij belevingen/admin/bookings/create.php
   binnenkwam. Een doorzichtige vulling is dus geen kleur — geef een <select>
   altijd een DEKKENDE achtergrond.

   Dit blok is het vangnet, niet de vrijbrief: apps horen hun eigen velden nog
   steeds te stylen (zie apps/local/new_project/BOOTSTRAP_GUIDE.md). Het staat
   hier omdat 66 bestanden een <select> renderen en één gemiste regel genoeg is.
   Bewaakt door apps/local/tests/ux_rules/statisch.sh.
   ======================================================================== */

:root[data-theme="dark"],
.sbv-theme-dark {
  /* Laat de browser zijn eigen bediening (scrollbars, datum-/tijdkiezers, het
     open keuzemenu) in donkere modus tekenen in plaats van in lichte. */
  color-scheme: dark;
}

/* De optielijst krijgt expliciet een DEKKENDE achtergrond en een leesbare
   tekstkleur. Apps overschrijven dit gerust met hun eigen kleuren; wat ze niet
   meer kunnen, is het per ongeluk overslaan. */
:root[data-theme="dark"] select option,
.sbv-theme-dark select option,
:root[data-theme="dark"] optgroup,
.sbv-theme-dark optgroup {
  background-color: var(--sbv-bg-secondary);
  color: var(--sbv-text-primary);
}

/* ========================================================================
   THEME INITIALIZATION SCRIPT
   Include this inline script in <head> to prevent flash
   ======================================================================== */

/*
<script>
(function() {
  // Auto-detect theme preference
  const savedTheme = localStorage.getItem('sbv-theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const theme = savedTheme || (prefersDark ? 'dark' : 'light');
  document.documentElement.setAttribute('data-theme', theme);
})();
</script>
*/