/**
 * Vidasci UI Kit - CSS Framework
 * Version: 1.0.0
 * 
 * A lightweight, vanilla CSS framework for building modern web interfaces.
 * Features: Dark/Light theme, responsive grid, comprehensive components.
 * 
 * Table of Contents:
 * 1. CSS Custom Properties (Variables)
 * 2. Reset & Base Styles
 * 3. Layout (Sidebar, Navbar, Main Content)
 * 4. Grid System
 * 5. Components (Cards, Buttons, Dropdowns, etc.)
 * 6. Forms
 * 7. Utilities
 * 8. Responsive Breakpoints
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Color Palette (Tailwind v4 inspired)
     ------------------------------------------------------------------------- */
  
  /* Slate */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;

  /* Gray */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* Red */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;

  /* Orange */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;

  /* Amber */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;

  /* Green */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;

  /* Emerald */
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;

  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;

  /* Teal */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;

  /* Cyan */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;

  /* Sky */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;

  /* Blue */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;

  /* Indigo */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;

  /* Purple */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;

  /* Pink */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;

  /* Rose */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;

  /* -------------------------------------------------------------------------
     Semantic Colors
     ------------------------------------------------------------------------- */
  --color-primary: var(--color-blue-600);
  --color-primary-rgb: 37, 99, 235;
  --color-primary-hover: var(--color-blue-700);
  --color-primary-active: var(--color-blue-800);
  --color-primary-content: #ffffff;

  --color-secondary: var(--color-slate-800);
  --color-secondary-hover: var(--color-slate-700);
  --color-secondary-active: var(--color-slate-900);
  --color-secondary-content: var(--color-slate-200);

  --color-success: var(--color-emerald-600);
  --color-success-hover: var(--color-emerald-700);
  --color-success-active: var(--color-emerald-700);
  --color-success-content: #ffffff;

  --color-warning: var(--color-amber-500);
  --color-warning-hover: var(--color-amber-600);
  --color-warning-active: var(--color-amber-700);
  --color-warning-content: #ffffff;

  --color-danger: var(--color-red-600);
  --color-danger-hover: var(--color-red-700);
  --color-danger-active: var(--color-red-800);
  --color-danger-content: #ffffff;

  --color-info: var(--color-sky-500);
  --color-info-hover: var(--color-sky-600);
  --color-info-active: var(--color-sky-700);
  --color-info-content: #ffffff;

  /* Theme Colors (Light Mode Default) */
  --color-bg-body: var(--color-gray-50);
  --color-bg-surface: #ffffff;
  --color-text-main: var(--color-gray-800);
  --color-text-muted: var(--color-gray-600);
  --color-border: var(--color-gray-200);
  --color-shadow: rgba(0, 0, 0, 0.05);

  /* Header (Fixed Dark) */
  --color-bg-header: #101828;
  --color-header-text: #ffffff;
  --color-header-border: #1f2937;

  /* dark mode link color*/
  --color-link-dark: var(--color-blue-400);
  --color-link-dark-hover: var(--color-blue-500);


  /* -------------------------------------------------------------------------
     Layout Dimensions
     ------------------------------------------------------------------------- */
  --navbar-height: 64px;
  --sidebar-width: 280px;
  --sidebar-layout-width: var(--sidebar-width);
  --spacing-unit: 1rem;
  --spacing-layout: 1.5rem;
  --gutter-x: 1rem;
  --gutter-y: 1rem;

  /* -------------------------------------------------------------------------
     Border Radius
     ------------------------------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --radius: var(--radius-lg);

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 0.875rem;
  --line-height-base: 1.5;

  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
}

/* Dark Theme */
[data-theme="dark"] {
  --color-bg-body: #030712;
  --color-bg-surface: #101828;
  --color-text-main: var(--color-gray-50);
  --color-text-muted: var(--color-gray-300);
  --color-border: #1f2937;
  --color-shadow: rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Een anker komt onder de vaste navbar uit, niet erachter. */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + 1rem);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  transition: background-color var(--transition-slow), color var(--transition-slow);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-main);
}

/* Schaal bij een basis van 0.875rem, gelijk aan die van de oude woningstats (Tabler). */
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.875rem; }
h5 { font-size: 0.75rem; }
h6 { font-size: 0.625rem; }

/* Nadruk in lopende tekst: halfvet, niet vet. */
strong,
b {
  font-weight: 600;
}

/* Een subtiele scheidingslijn tussen secties. */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

/* De sprite zelf: onzichtbaar maar niet display: none, want dan tekenen sommige browsers de symbolen
   niet. Het hidden-attribuut werkt niet op een svg-element. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Icoon uit de sprite (templates/partials/icons.html, macro icon() in templates/macros.html). De
   lijnstijl staat hier en niet per symbool, zodat alle iconen dezelfde dikte hebben. */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-main);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: 0.02em;
}

p {
  margin-bottom: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Knoppen uitgesloten: een knop die een <a> is haalt zijn kleur uit zijn .btn-*-variant. Zonder
   deze uitzondering wint a:hover (0-1-1) van .btn-success (0-1-0) en wordt de knoptekst blauw.
   De uitzondering staat in :where(), want dat telt niet mee in de specificiteit: deze selectors
   wegen daardoor precies evenveel als het kale `a` en `a:hover` van hiervoor, en componenten die
   hun links met een klasse kleuren (.navbar-link, .dropdown-item, de footer) blijven winnen. */
a:where(:not(.btn)) {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover:where(:not(.btn)) {
  color: var(--color-primary-hover);
}

/* Onderstreping bij hover, zoals een browser standaard doet. Helemaal in :where(), dus 0-0-1: een
   component dat zijn links met een klasse stylet en text-decoration: none zet (navbar, dropdown,
   breadcrumb, footer, banners, listingtitels), houdt dat ook bij hover. */
a:where(:hover:not(.btn)) {
  text-decoration: underline;
}

[data-theme="dark"] {
  a:not(.navbar-link, .dropdown-item):where(:not(.btn)) {
    color: var(--color-link-dark);
  }
  a:not(.navbar-link, .dropdown-item):hover:where(:not(.btn)) {
    color: var(--color-link-dark-hover);
  }
}

img, svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove default button styles */
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* Sidebar Overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--color-bg-surface);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: margin-left var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-unit);
  background-color: var(--color-bg-header);
  border-bottom: 1px solid var(--color-header-border);
  border-right: 1px solid var(--color-header-border);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-header-text);
  font-size: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
}

.brand:hover {
  color: var(--color-header-text);
}

.brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Sidebar Navigation */
.sidebar-nav {
  padding: var(--spacing-unit);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-right: 1px solid var(--color-border);
}

.nav-item {
  width: 100%;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  color: var(--color-text-main);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  width: 100%;
  background: transparent;
  cursor: pointer;
  border: none;
  text-align: left;
  gap: 0.75rem;
}

.sidebar-nav .nav-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 2;
}

.sidebar-nav .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .sidebar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-nav .nav-link.active {
  background-color: rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

[data-theme="dark"] .sidebar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Collapsible Nav Group */
.nav-group-trigger {
  justify-content: space-between;
}

.nav-group-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-group-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.nav-group.open .nav-group-content {
  max-height: 200px;
}

.nav-sub-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem 0.5rem 2.75rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  margin-top: 0.125rem;
}

.nav-sub-link:hover {
  color: var(--color-text-main);
  background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .nav-sub-link:hover {
  color: var(--color-gray-50);
  background-color: rgba(255, 255, 255, 0.03);
}

.chevron {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transition: transform var(--transition-base);
}

.nav-group.open .chevron {
  transform: rotate(180deg);
}

/* Navbar */
.navbar {
  height: var(--navbar-height);
  background-color: var(--color-bg-header);
  border-bottom: 1px solid var(--color-header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-layout-width);
  z-index: 900;
  transition: left var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 var(--spacing-unit);
  color: var(--color-header-text);
}

.navbar-left,
.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-unit);
}

/* Icon Button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.icon-btn-xs {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.icon-btn-muted {
  color: var(--color-text-muted);
  background: transparent;
}

.icon-btn-muted:hover {
  color: var(--color-text-main);
  background-color: var(--color-gray-100);
}

[data-theme="dark"] .icon-btn-muted:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-gray-50);
}

/* Main Content */
.main-content {
  padding-top: calc(var(--navbar-height) + var(--spacing-layout));
  padding-bottom: var(--spacing-layout);
  padding-left: var(--spacing-layout);
  padding-right: var(--spacing-layout);
  margin-left: var(--sidebar-layout-width);
  transition: margin-left var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 100vh;
}

/* Container variants for main-content */
.main-content.container-fluid {
  max-width: 1920px;
  margin-left: max(
    var(--sidebar-layout-width),
    calc(50% + (var(--sidebar-layout-width) / 2) - 960px)
  );
  margin-right: auto;
  width: auto;
}

/* Desktop Collapsed State */
body.sidebar-collapsed {
  --sidebar-layout-width: 0px;
}

body.sidebar-collapsed .sidebar {
  margin-left: calc(var(--sidebar-width) * -1);
  transition: margin-left var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   4. GRID SYSTEM
   ========================================================================== */

/* Containers */
.container,
.container-fluid {
  width: 100%;
  padding-right: var(--spacing-unit);
  padding-left: var(--spacing-unit);
  margin-right: auto;
  margin-left: auto;
}

.container { max-width: 1280px; }

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-0.5 * var(--gutter-x, 1.5rem));
  margin-left: calc(-0.5 * var(--gutter-x, 1.5rem));
  margin-top: calc(-1 * var(--gutter-y, 0));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(0.5 * var(--gutter-x, 1.5rem));
  padding-left: calc(0.5 * var(--gutter-x, 1.5rem));
  margin-top: var(--gutter-y, 0);
}

/* Gutter utilities */
.g-0 { --gutter-x: 0; --gutter-y: 0; }
.g-1 { --gutter-x: 0.25rem; --gutter-y: 0.25rem; }
.g-2 { --gutter-x: 0.5rem; --gutter-y: 0.5rem; }
.g-3 { --gutter-x: 1rem; --gutter-y: 1rem; }
.g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.g-5 { --gutter-x: 3rem; --gutter-y: 3rem; }

/* Columns */
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Responsive columns - sm (640px) */
@media (min-width: 640px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* Responsive columns - md (768px) */
@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* Responsive columns - lg (1024px) */
@media (min-width: 1024px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* Responsive columns - xl (1280px) */
@media (min-width: 1280px) {
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px var(--color-shadow);
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.card-body {
  padding: 1rem 1.5rem;
  flex: 1 1 auto;
}

.chart-container {
  width: 100%;
  height: 280px;
}

.chart-container.chart-tall {
  height: 320px;
}

.card-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

/* Card-stamp: decoratief icoon rechtsboven in de hoek, port van Tabler (.card-stamp). Faint
   (opacity .2), een cirkel die over de hoek bloedt, 10 graden gedraaid, met het icoon uitgesneden
   in de card-achtergrondkleur. De card zelf moet position: relative hebben. */
.card-stamp {
  --stamp-size: 6rem;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--stamp-size);
  height: var(--stamp-size);
  max-height: 100%;
  border-top-right-radius: inherit; /* volgt de hoek van de card, welke radius die ook heeft */
  opacity: 0.2;
  overflow: hidden;
  pointer-events: none;
}

.card-stamp-icon {
  position: relative;
  top: calc(var(--stamp-size) * -0.25);
  right: calc(var(--stamp-size) * -0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--stamp-size);
  height: var(--stamp-size);
  border-radius: 100rem;
  background: var(--stamp-color, var(--color-primary));
  color: var(--color-bg-surface);
  transform: rotate(10deg);
}

.card-stamp-lg {
  --stamp-size: 10rem;
}

/* De inhoud na de stamp ligt erboven: anders tekent de absolute stamp over de tekst heen en kleurt
   hij bijvoorbeeld de h1 mee. */
.card-stamp ~ * {
  position: relative;
}

.card-stamp-icon svg {
  width: calc(var(--stamp-size) * 0.75);
  height: calc(var(--stamp-size) * 0.75);
  stroke-width: 2;
}

/* Een smalle card in het midden voor een tekstpagina (/zakelijk, /privacy-beleid), zoals live. De tekstkolom
   is smaller dan de card; de stamp is op een telefoon de kleine, zodat hij niet achter de kop staat. */
.card-narrow {
  position: relative; /* anker voor de stamp */
  max-width: 60rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .card-narrow > .card-body {
    padding: 2rem 2.5rem;
  }

  .card-narrow > .card-body > * {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
  }

  .card-narrow .card-stamp {
    --stamp-size: 10rem;
  }
}

/* Op desktop de ruime boven- en onderkant van live (card-lg). */
@media (min-width: 992px) {
  .card-narrow > .card-body {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Tekst die uit markdown gerenderd is: koppen, alinea's en lijsten zonder eigen klassen. Tussen de secties
   een dunne lijn, zoals .section-stack. */
.markdown h1 {
  margin-bottom: 0.5rem;
  padding-right: 2.5rem; /* ruimte voor de stamp */
}

/* De maten van live: 1rem boven en onder de lijn, een halve rem tussen kop en tekst. */
.markdown h2 {
  margin: 1rem 0 0.5rem;
}

.markdown h2 ~ h2 {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.markdown p,
.markdown li {
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* Het bolletje hangt buiten de tekst, zodat een tweede regel onder de eerste begint. */
.markdown ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  list-style-position: outside;
}

.markdown strong {
  color: var(--color-text-main);
}

.markdown > :last-child {
  margin-bottom: 0;
}

/* Shape: een icoon in een afgerond vierkant, voor de kop van een sectie (licht) of een kerncijfer
   (gevuld, .shape-lg). */
.shape {
  --shape-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--shape-size);
  height: var(--shape-size);
  border-radius: var(--radius);
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

[data-theme="dark"] .shape {
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-link-dark);
}

.shape .icon {
  width: calc(var(--shape-size) * 0.5);
  height: calc(var(--shape-size) * 0.5);
}

.shape-lg {
  --shape-size: 3.25rem;
}

[data-theme="dark"] .shape-primary,
.shape-primary {
  background: var(--color-primary);
  color: var(--color-primary-content);
}

[data-theme="dark"] .shape-success,
.shape-success {
  background: var(--color-success);
  color: var(--color-success-content);
}

[data-theme="dark"] .shape-danger,
.shape-danger {
  background: var(--color-danger);
  color: #ffffff;
}

/* Sectie met icoon (macro section() in templates/macros.html): het vierkant links, kop en inhoud
   rechts. Op smalle schermen vervalt het vierkant, dan krijgt de tekst de volle breedte. */
.icon-section {
  display: flex;
  gap: 1rem;
}

.icon-section-body {
  flex: 1;
  min-width: 0;
}

.icon-section-body > :last-child {
  margin-bottom: 0;
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.5rem;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 575px) {
  .icon-section-shape {
    display: none;
  }
}

/* Secties onder elkaar, met een subtiele lijn ertussen zoals de hr's van de oude site. */
.section-stack > * + * {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* Lopende tekst in een sectie: gedempt en met ruime regelafstand, zoals live. */
.prose {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

/* Een link met een icoon ervoor. */
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.icon-link .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Lijst met een icoon per regel (vinkjes, waarschuwingen). */
.check-list,
.caveats {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}

.check-list li,
.caveats li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.check-list li + li,
.caveats li + li {
  margin-top: 0.25rem;
}

.check-list .icon,
.caveats .icon {
  margin-top: 0.2rem;
}

.check-list .icon { color: var(--color-success); }
.caveats .icon { color: var(--color-warning); }
/* Een verwijzing naar de toelichting staat met een blauw info-icoon tussen de waarschuwingen. */
.caveats .caveat-info .icon { color: var(--color-info); }

/* De extensietip onder een schatting (/waarde en /verwachte-verkoopprijs), meestal als card-footer. */
.extension-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-text-main);
  font-weight: 600;
}

.extension-note .icon {
  color: var(--color-info);
  margin-top: 0.05rem;
}

/* Een verandering: groen omhoog, rood omlaag, gelijk in de tekstkleur. */
.trend-up { color: var(--color-success); }
.trend-down { color: var(--color-danger); }

/* -------------------------------------------------------------------------
   Partnerbanners (templates/partials/banners.html, frontend/viewmodels/banners.py)
   ------------------------------------------------------------------------- */
/* Per partner de kleur van live; de rest van de banner leunt op --banner-color. */
.banner-huisverkopen { --banner-color: #6515a8; }
.banner-makelaarkosten { --banner-color: #004a99; }
.banner-buurtcijfers { --banner-color: #ea580c; }
/* Frits: blauw zoals live, met de groene knop en donkere tekst van hun huisstijl. */
.banner-frits { --banner-color: #008bff; }

/* De plek meet zijn eigen breedte: dezelfde banner staat in de hoofdtekst, in een zijkolom en in een sheet. */
.banner-slot {
  container-type: inline-size;
}

.banner-card {
  padding: 1rem;
  border-radius: var(--radius-2xl);
  background: color-mix(in srgb, var(--banner-color) 10%, transparent);
}

[data-theme="dark"] .banner-card {
  background: color-mix(in srgb, var(--banner-color) 24%, transparent);
}

/* In een rij secties begint de card op de tekstkolom, na het vierkant (2.5rem plus 1rem), zoals live. */
@media (min-width: 576px) {
  .section-stack > .banner-slot .banner-card {
    margin-left: 3.5rem;
  }
}

.banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.banner-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 1rem;
}

/* De titel in de partnerkleur, zoals live; op donker in de tekstkleur. */
.banner-card .banner-title {
  color: var(--banner-color);
}

[data-theme="dark"] .banner-card .banner-title {
  color: var(--color-text-main);
}

.banner-compact > .banner-title {
  margin-bottom: 0.25rem;
}

/* Het logo op de maat van live: 175px breed, naast een titel 150px. */
.banner-logo {
  display: block;
  width: auto;
  height: 2.25rem;
}

.has-title .banner-logo {
  height: 1.75rem;
}

.banner-compact .banner-logo {
  height: 2rem;
}

.banner-logo.logo-dark,
[data-theme="dark"] .banner-logo.logo-light {
  display: none;
}

[data-theme="dark"] .banner-logo.logo-dark {
  display: block;
}

[data-theme="dark"] .banner-logo.logo-invert {
  filter: invert(1) brightness(2) saturate(0);
}

/* Eén regel in een donkere hero (de kleine banner van /verwachte-verkoopprijs): het logo altijd wit, want
   de achtergrond is altijd donker; de partnerkleur pas bij hover, zoals live. */
.banner-inline {
  display: flex;
  justify-content: center;
}

/* Altijd wit: met a ervoor wint hij in het donkere thema van de blauwe linkkleur van de kit. */
a.banner-inline-link,
[data-theme="dark"] a.banner-inline-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.625rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-lg);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.15s ease;
}

a.banner-inline-link:hover,
[data-theme="dark"] a.banner-inline-link:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--banner-color) 65%, transparent);
}

.banner-inline .banner-logo {
  width: auto;
  height: 1.25rem;
  filter: invert(1) brightness(2) saturate(0);
}

/* Dezelfde regel op een lichte ondergrond (banner_slot met class 'banner-on-light', de kenmerkencard van
   /woning), zoals live: de partnerkleur op 10% met de tekst in die kleur en het logo in zijn eigen kleuren. Bij
   hover dezelfde volle tint als in de hero; in het donkere thema lichte tekst en een wit logo. */
.banner-on-light a.banner-inline-link {
  color: var(--banner-color);
  background: color-mix(in srgb, var(--banner-color) 10%, transparent);
  border-radius: 0.5rem;
}

.banner-on-light a.banner-inline-link:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--banner-color) 65%, transparent);
}

.banner-on-light .banner-inline .banner-logo {
  filter: none;
}

[data-theme="dark"] .banner-on-light a.banner-inline-link {
  color: var(--color-gray-50);
}

[data-theme="dark"] .banner-on-light .banner-inline .banner-logo,
.banner-on-light a.banner-inline-link:hover .banner-logo {
  filter: invert(1) brightness(2) saturate(0);
}

.banner-card .prose {
  margin-bottom: 0.5rem;
}

.banner-subtitle {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
}

.banner-checks {
  margin: 0;
}

.banner-checks li + li {
  margin-top: 0;
}

.banner-checks strong {
  color: var(--color-text-main);
}

.banner-rating {
  display: inline-flex;
  gap: 0.125rem;
  margin: 0 0.375rem 0 0.25rem;
  vertical-align: -0.05rem;
}

.banner-rating .icon {
  width: 0.8125rem;
  height: 0.8125rem;
  margin: 0;
  color: var(--color-amber-500);
}

.banner-foot {
  display: grid;
  gap: 0.75rem;
}

.banner-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.banner-section .banner-actions {
  margin-top: 0.25rem;
}

/* .btn staat verderop in de kit, vandaar de dubbele klasse. */
.btn.banner-btn {
  width: 100%;
  padding: 0.5rem 1.5rem;
  border-radius: 0.625rem;
  color: #fff;
}

.banner-btn-partner { background: var(--banner-color); }
.banner-btn-partner:hover { background: color-mix(in srgb, var(--banner-color) 75%, transparent); }
.banner-btn-amber { background: rgb(230 154 6); }
.banner-btn-amber:hover { background: rgb(212 142 6); }
.banner-frits .btn.banner-btn-partner { background: #4bff7d; color: #1e293b; }
.banner-frits .btn.banner-btn-partner:hover { background: #75ff9b; }

.banner-shape,
[data-theme="dark"] .banner-shape {
  background: color-mix(in srgb, var(--banner-color) 12%, transparent);
}

.banner-shape img {
  width: 1.75rem;
  height: 1.75rem;
}

/* Op een smalle plek de korte teksten, de knoppen onder elkaar en naast een titel geen logo, zoals live
   op de telefoon. Vanaf 36rem de lange teksten en de knoppen naast elkaar (hoogstens 250px, zoals live);
   één knop staat dan rechts naast de vinkjes. */
.banner .text-wide,
.has-title .banner-logo-link {
  display: none;
}

/* Het kleine beeldmerk van buurtcijfers.nl past ook op een smalle plek naast de titel. */
.banner-buurtcijfers .has-title .banner-logo-link {
  display: flex;
}

/* In de tekstkleur, ook in het donkere thema: anders wint daar de blauwe linkkleur van de kit. */
.banner-logo-link:has(.banner-logo-text),
[data-theme="dark"] .banner-logo-link:has(.banner-logo-text) {
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-main);
  text-decoration: none;
}

.banner-logo-text {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.has-title .banner-logo-link:has(.banner-logo-text) .banner-logo {
  height: 1.5rem;
}

@container (min-width: 36rem) {
  .banner .text-wide {
    display: inline;
  }

  .has-title .banner-logo-link {
    display: block;
  }

  .banner .text-narrow {
    display: none;
  }

  .banner-actions {
    flex-direction: row;
    justify-content: space-between;
  }

  .banner-btn {
    max-width: 15.625rem;
  }

  .banner-foot.action-beside {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .action-beside .btn.banner-btn {
    width: auto;
  }
}

/* Op de telefoon staat een banner-lead vooraan in de secties, direct onder de kerncijfers, zoals live
   (order-2 order-md-4). In de HTML blijft de inhoud eerst. De lijn van de section-stack komt dan onder de
   banner in plaats van erboven. */
@media (max-width: 767.98px) {
  .section-stack:has(> .banner-lead) {
    display: flex;
    flex-direction: column;
  }

  .section-stack > .banner-lead {
    order: -1;
    margin: 0 0 1.5rem;
    padding: 0 0 1.5rem;
    border-top: 0;
    border-bottom: 1px solid var(--color-border);
  }
}

/* De compacte card houdt de knoppen altijd onder elkaar, ook op een bredere plek. */
.banner-compact .banner-actions {
  flex-direction: column;
}

.banner-compact .banner-btn {
  max-width: none;
}

/* -------------------------------------------------------------------------
   Melding: een regel met een icoon boven de inhoud, bijvoorbeeld bij een onbekend adres.
   ------------------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  background: var(--color-bg-body);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.notice-warning {
  border-color: var(--color-warning);
}

.notice .icon {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--color-warning);
}

/* -------------------------------------------------------------------------
   Kerncijfers als losse cards: een icoon met label, het getal, en een subregel met context. Op de
   telefoon twee bij twee, vanaf 1024px op één rij.
   ------------------------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
  .kpi-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
  }
}

.kpi-card {
  padding: 0.875rem 1rem;
}

.kpi-card-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.kpi-card-label .shape {
  --shape-size: 2rem;
}

.kpi-card-value {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.kpi-card-sub {
  margin-top: 0.1rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Kerncijfers als kleine tegel, zoals de kerncijfers van live op /woning: een avatar (gekleurd vierkant met
   een wit icoon) met het label vet en de waarde gedempt. Een tegel die een link of knop is, licht op bij
   hover. /woning en /prijsverlagingen_kaart.
   ------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #ffffff;
  border-radius: var(--radius-sm);
}

.avatar .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
}

.avatar-lg .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.avatar-primary { background: var(--color-primary); }
.avatar-success { background: var(--color-success); }
.avatar-danger { background: var(--color-danger); }

.stat-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0.75rem;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

a.stat-tile,
button.stat-tile {
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}

a.stat-tile:hover,
button.stat-tile:hover {
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
}

.stat-tile-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-tile-label {
  font-weight: 600;
}

.stat-tile-value {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Een card voor één onderwerp (macro topic_card): een kop met een icoon in een vierkant, en
   ruimte eromheen. /waarde (de bandbreedte) en /verwachte-verkoopprijs.
   ------------------------------------------------------------------------- */
.topic-card > .card-body {
  padding: 1.25rem 1rem;
}

@media (min-width: 768px) {
  .topic-card > .card-body {
    padding: 1.5rem 1.75rem;
  }
}

.card-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 1rem;
}

/* -------------------------------------------------------------------------
   Brede modal met lopende tekst (een toelichting): ca. 56rem, scrollt zelf, rustige alinea's.
   ------------------------------------------------------------------------- */
.modal.modal-wide {
  max-width: 56rem;
}

.modal-scroll {
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

.prose-block h3 {
  margin-top: 1.25rem;
}

.prose-block h3:first-child {
  margin-top: 0;
}

.prose-block p,
.prose-block dd {
  color: var(--color-text-muted);
  line-height: 1.75;
}

.prose-block blockquote {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-body);
  border-radius: var(--radius);
  font-style: italic;
}

@media (min-width: 768px) {
  .modal-wide .modal-body {
    padding: 1.75rem 2.25rem;
  }
}

/* -------------------------------------------------------------------------
   Hero met foto: achtergrondfoto met tint en een donkere, afgeronde card met H1, tekst en
   zoekveld. De home en /verwachte-verkoopprijs; het zoekveld is searchbar.css.
   ------------------------------------------------------------------------- */
.photo-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 37rem;
  padding: 4rem 0 8rem;
}

/* De hele achtergrond (foto + tint) in een eigen laag. Bewust geen isolation/negatieve z-index op
   .photo-hero zelf: dan blijft de hero geen stacking-context en kan de focus-overlay het actieve
   zoekveld boven zich uit tillen (zie .search-active in searchbar.css). */
/* De foto loopt minstens --photo-hero-bg-height door, ook als de hero zelf lager is: achter de cards die
   over de onderrand vallen. De hero houdt zijn eigen hoogte, dus de inhoud verschuift niet. */
.photo-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  min-height: var(--photo-hero-bg-height);
  overflow: hidden;
}

/* main houdt minstens de hoogte van de foto vrij: de foto staat absoluut en neemt zelf geen ruimte in, dus
   anders begint de footer terwijl de foto nog doorloopt en verdwijnt hij erachter. De hero staat altijd
   bovenaan main. */
main:has(.photo-hero) {
  --photo-hero-bg-height: 50rem;
  min-height: var(--photo-hero-bg-height);
}

/* De inhoud boven de achtergrondlaag. position:relative (zonder z-index, dus geen stacking-context)
   zodat de content boven .photo-hero-bg schildert maar de zoeker naar de root kan. */
.photo-hero .container {
  position: relative;
}

/* De foto als eigen laag, zodat de browser hem als LCP kan prioriteren. */
.photo-hero-media {
  position: absolute;
  inset: 0;
}

/* center 40%: het beeld iets omlaag zodat op brede schermen de horizon/lucht in beeld komt
   (het img-equivalent van het originele background-position: center 40%). */
.photo-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Constante tint over de foto: donker genoeg voor witte tekst, gelijk over de hele hoogte. Ligt op
   DOM-volgorde boven .photo-hero-media binnen .photo-hero-bg, dus geen z-index nodig. */
.photo-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.42);
}

.photo-hero-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rem;
  background: linear-gradient(180deg, transparent 0%, var(--color-bg-body) 100%);
}

/* De afgeronde, halftransparante kaart die de tekst en de zoekbalk draagt (de "curve"). */
.photo-hero-card {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.25rem 2rem 2.5rem;
  text-align: center;
  background-color: rgba(3, 7, 18, 0.62);
  border-radius: 2rem;
}

.photo-hero-overline {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.photo-hero-card h1 {
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
}

.photo-hero-sub {
  margin: 0 auto 1.25rem;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.6;
}

/* Zoekbalk in de kaart. position:relative zodat de suggestielijst eraan hangt; de wrapper-marges
   uit searchbar.css halen we hier weg zodat de lijst exact onder het veld uitlijnt. */
.photo-hero-search {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
}

.photo-hero-search .search-input-wrapper {
  margin-left: 0;
  margin-right: 0;
}

.photo-hero-search .search-input {
  height: 3.25rem;
  font-size: 1rem;
}

/* -------------------------------------------------------------------------
   Band: een donkere strook in de kleur van de navbar onder de navbar, met tekst en een beeld. Op
   desktop naast elkaar, daaronder onder elkaar. /extensie, de zoekpagina /waarde en /prijsverlagingen_kaart.
   ------------------------------------------------------------------------- */
.hero-band {
  padding: 2rem 0;
  background: var(--color-bg-header);
  border-bottom: 1px solid var(--color-border);
  color: #fff;
}

.hero-band-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .hero-band-grid {
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: center;
    gap: 3rem;
  }
}

.hero-band-title {
  margin-bottom: 1rem;
  margin-top: .5rem;
  color: #fff;
  font-size: 1.75rem;
}

.hero-band-tagline {
  margin-bottom: 1.25rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

/* Een afbeelding in de band, zoals de popup-tegel op /extensie. */
.hero-band-shot {
  margin: 0;
  justify-self: center;
}

.hero-band-shot img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
}

/* De band met een zoekveld (.waarde-band): de zoekpagina en de hubs van /waarde, en /prijsverlagingen_kaart. */
/* Kruimelpad, titel en zoekveld links uitgelijnd; het zoekveld vult de tekstkolom. */
.waarde-band .page-breadcrumb {
  margin-bottom: 0rem;
}

/* Geen z-index op de band: die zou een eigen stacking context maken, en dan kan het zoekveld niet boven
   de spotlight (searchbar.css) uitkomen. De dropdown valt met zijn eigen z-index al over de card. */
.waarde-band .photo-hero-search {
  max-width: 600px;
  margin: 0;
}

.waarde-band .search-box {
  margin-bottom: 0;
}

.waarde-band-list {
  margin: 1.25rem 0 0;
  color: rgba(255, 255, 255, 0.75);
}

.waarde-band-list .icon {
  color: var(--color-green-400);
}

/* Het beeld alleen naast de tekst, vanaf 992px: eronder zou het de banner op telefoon en tablet onder de
   vouw duwen. Op de telefoon ook geen lijstje, alleen titel, zin en zoekveld. */
.waarde-visual {
  display: none;
  margin: 0;
}

@media (max-width: 767.98px) {
  .waarde-band {
    padding: 1.25rem 0 1.5rem;
  }

  .waarde-band .hero-band-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .waarde-band-list {
    display: none;
  }
}

@media (min-width: 992px) {
  .waarde-visual {
    display: block;
    width: 100%;
    max-width: 440px;
    justify-self: center;
  }
}

.waarde-band .notice {
  margin-bottom: 1rem;
}

/* Een lijntekening in de band: wit op donker, met primary en groen als accent. De eigen onderdelen van een
   tekening staan in de CSS van de pagina. */
.illustration {
  display: block;
  width: 100%;
  height: auto;
  stroke-width: 3;
}

.illustration-glow {
  fill: var(--color-primary);
  opacity: 0.14;
}

.illustration-grid {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.illustration-band {
  fill: var(--color-primary);
  opacity: 0.25;
}

.illustration-line {
  stroke: var(--color-blue-400);
}

.illustration-house {
  stroke: #fff;
}

.illustration-fill {
  fill: var(--color-bg-header);
}

.illustration-tag > path:first-child {
  fill: var(--color-success);
  stroke: var(--color-success);
}

.illustration-hole {
  fill: var(--color-bg-header);
  stroke: none;
}

/* -------------------------------------------------------------------------
   Kerncijfers: label boven een vet bedrag, met een icoon in een vierkant ervoor. Onder elkaar met
   een lijn ertussen, naast elkaar zodra de container breed genoeg is. /waarde en
   /verwachte-verkoopprijs.
   ------------------------------------------------------------------------- */
/* Onder elkaar met een lijn ertussen, zoals live; naast elkaar zodra de ruimte eromheen (de
   container) breed genoeg is. Zo loopt er nooit iets buiten de card. */
.kpi-wrap {
  container-type: inline-size;
  margin-bottom: 1.5rem;
}

.kpi-row {
  display: grid;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.kpi + .kpi {
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

@container (min-width: 40rem) {
  .kpi-row {
    grid-template-columns: 1fr 1fr;
  }

  .kpi + .kpi {
    padding-top: 0;
    border-top: 0;
  }
}


.kpi {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.kpi-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1rem;
  margin-bottom: 0.1rem;
}

.kpi-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-main);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.kpi-range {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.kpi-empty {
  color: var(--color-text-muted);
}

.kpi-button {
  margin-top: 0.25rem;
}

/* Naast het vierkant staat de knop zonder label erboven, dus op het midden. */
.kpi .kpi-button {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   FAQ / Accordion
   ------------------------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .faq-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
  }
}

.faq-item {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px var(--color-shadow);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.faq-item.open {
  border-color: var(--color-primary);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-main);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}


[data-theme="dark"] .faq-question:hover {
  color: var(--color-link-dark-hover);
}

[data-theme="dark"] .faq-icon {
  color: var(--color-link-dark);
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}

.faq-answer > div {
  overflow: hidden;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer p, .faq-answer ul {
  margin: 0;
  padding: 0 1.25rem 1.125rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text-main);
}

.table thead th {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}

.table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-main);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table-condensed thead th,
.table-condensed tbody td {
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
}

.table-striped tbody tr:nth-child(odd) td {
  background-color: var(--color-slate-50);
}

[data-theme="dark"] .table-striped tbody tr:nth-child(odd) td {
  background-color: rgba(255, 255, 255, 0.04);
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll {
  max-height: 320px;
  overflow-y: auto;
}

.table-wrapper::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-wrapper::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrapper::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}

[data-theme="dark"] .table-wrapper::-webkit-scrollbar-thumb,
[data-theme="dark"] .table-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.25);
}

.table-wrapper,
.table-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .table-scroll {
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

/* Het hidden-attribuut wint van display: inline-flex, zodat een knop met hidden ook echt weg is. */
.btn[hidden] {
  display: none;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Een knop die eruitziet als een link, voor een secundaire actie onder een primaire knop. */
.btn-link {
  color: var(--color-primary);
  font-weight: 500;
}

.btn-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

[data-theme="dark"] .btn-link {
  color: var(--color-link-dark);
}

/* Een kleine ronde knop met een vraagteken, die een toelichting opent. */
.btn-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-info);
  color: var(--color-info-content);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.btn-help:hover {
  background: var(--color-info-hover);
}

/* Button Sizes */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
}

/* Button Variants */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-orange {
  background-color: var(--color-orange-600);
  color: var(--color-primary-content);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-orange:hover {
  background-color: var(--color-orange-700);
}

.btn-primary:active {
  background-color: var(--color-primary-active);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-secondary-content);
  border-color: var(--color-slate-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-hover);
  color: #ffffff;
}

.btn-success {
  background-color: var(--color-success);
  color: var(--color-success-content);
}

.btn-success:hover {
  background-color: var(--color-success-hover);
}

.btn-warning {
  background-color: var(--color-warning);
  color: var(--color-warning-content);
}

.btn-warning:hover {
  background-color: var(--color-warning-hover);
}

.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-danger-content);
}

.btn-danger:hover {
  background-color: var(--color-danger-hover);
}

.btn-info {
  background-color: var(--color-info);
  color: var(--color-info-content);
}

.btn-info:hover {
  background-color: var(--color-info-hover);
}

/* Light/Soft Button Variants */
.btn-primary-lt {
  background-color: var(--color-blue-50);
  color: var(--color-blue-700);
}

.btn-primary-lt:hover {
  background-color: var(--color-blue-100);
}

[data-theme="dark"] .btn-primary-lt {
  background-color: rgba(96, 165, 250, 0.1);
  color: var(--color-blue-400);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .btn-primary-lt:hover {
  background-color: rgba(96, 165, 250, 0.2);
}

.btn-success-lt {
  background-color: var(--color-green-50);
  color: var(--color-green-700);
}

.btn-success-lt:hover {
  background-color: var(--color-green-100);
}

[data-theme="dark"] .btn-success-lt {
  background-color: rgba(52, 211, 153, 0.1);
  color: var(--color-green-400);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .btn-success-lt:hover {
  background-color: rgba(52, 211, 153, 0.2);
}

.btn-warning-lt {
  background-color: var(--color-amber-50);
  color: var(--color-amber-700);
}

.btn-warning-lt:hover {
  background-color: var(--color-amber-100);
}

[data-theme="dark"] .btn-warning-lt {
  background-color: rgba(251, 191, 36, 0.1);
  color: var(--color-amber-400);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .btn-warning-lt:hover {
  background-color: rgba(251, 191, 36, 0.2);
}

.btn-danger-lt {
  background-color: var(--color-red-50);
  color: var(--color-red-600);
}

.btn-danger-lt:hover {
  background-color: var(--color-red-100);
}

[data-theme="dark"] .btn-danger-lt {
  background-color: rgba(248, 113, 113, 0.1);
  color: var(--color-red-400);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .btn-danger-lt:hover {
  background-color: rgba(248, 113, 113, 0.2);
}

.btn-info-lt {
  background-color: var(--color-sky-50);
  color: var(--color-sky-700);
}

.btn-info-lt:hover {
  background-color: var(--color-sky-100);
}

[data-theme="dark"] .btn-info-lt {
  background-color: rgba(56, 189, 248, 0.1);
  color: var(--color-sky-400);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .btn-info-lt:hover {
  background-color: rgba(56, 189, 248, 0.2);
}

.btn-secondary-lt {
  background-color: var(--color-slate-100);
  color: var(--color-slate-700);
}

.btn-secondary-lt:hover {
  background-color: var(--color-slate-200);
}

[data-theme="dark"] .btn-secondary-lt {
  background-color: rgba(148, 163, 184, 0.1);
  color: var(--color-slate-400);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
}

[data-theme="dark"] .btn-secondary-lt:hover {
  background-color: rgba(148, 163, 184, 0.2);
}

.btn-gray-lt {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.btn-gray-lt:hover {
  background-color: var(--color-gray-200);
}

[data-theme="dark"] .btn-gray-lt {
  background-color: rgba(156, 163, 175, 0.1);
  color: var(--color-gray-400);
}

[data-theme="dark"] .btn-gray-lt:hover {
  background-color: rgba(156, 163, 175, 0.2);
}

.btn-indigo-lt {
  background-color: var(--color-indigo-50);
  color: var(--color-indigo-700);
}

.btn-indigo-lt:hover {
  background-color: var(--color-indigo-100);
}

[data-theme="dark"] .btn-indigo-lt {
  background-color: rgba(129, 140, 248, 0.1);
  color: var(--color-indigo-400);
}

[data-theme="dark"] .btn-indigo-lt:hover {
  background-color: rgba(129, 140, 248, 0.2);
}

.btn-purple-lt {
  background-color: var(--color-purple-50);
  color: var(--color-purple-700);
}

.btn-purple-lt:hover {
  background-color: var(--color-purple-100);
}

[data-theme="dark"] .btn-purple-lt {
  background-color: rgba(192, 132, 252, 0.1);
  color: var(--color-purple-400);
}

[data-theme="dark"] .btn-purple-lt:hover {
  background-color: rgba(192, 132, 252, 0.2);
}

.btn-pink-lt {
  background-color: var(--color-pink-50);
  color: var(--color-pink-700);
}

.btn-pink-lt:hover {
  background-color: var(--color-pink-100);
}

[data-theme="dark"] .btn-pink-lt {
  background-color: rgba(244, 114, 182, 0.1);
  color: var(--color-pink-400);
}

[data-theme="dark"] .btn-pink-lt:hover {
  background-color: rgba(244, 114, 182, 0.2);
}

/* -------------------------------------------------------------------------
   Dropdowns
   ------------------------------------------------------------------------- */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  min-width: 250px;
  display: none;
  flex-direction: column;
  z-index: 1000;
  padding: 0.25rem;
  overflow: hidden;
}

.dropdown-menu.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropdown-menu.show {
  display: flex;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-main);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  background: transparent;
}

.dropdown-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.dropdown-item:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text-main);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-gray-50);
}

.dropdown-item.text-danger {
  color: var(--color-danger);
}

.dropdown-item.text-danger svg {
  color: var(--color-danger);
}

.dropdown-item.text-danger:hover {
  background-color: var(--color-danger);
  color: #ffffff !important;
}

.dropdown-item.text-danger:hover svg {
  color: #ffffff;
}

.dropdown-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: 0.25rem 0;
}

/* Instellingen-rij in de settings-dropdown: ziet eruit als een dropdown-item, maar géén
   .dropdown-item-class zodat de dropdown niet sluit bij het togglen (thema/kleurenschema). */
.dropdown-menu .settings-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  text-align: left;
  color: var(--color-text-main);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}
.dropdown-menu .settings-row svg { width: 1rem; height: 1rem; color: var(--color-text-muted); flex-shrink: 0; }
.dropdown-menu .settings-row:hover { background-color: var(--color-gray-100); }
[data-theme="dark"] .dropdown-menu .settings-row:hover { background-color: rgba(255, 255, 255, 0.05); }
.dropdown-menu .settings-row .switch { margin-left: auto; }

/* Instelling die op dit schermformaat niet van toepassing is. */
.dropdown-menu .settings-row.is-disabled { opacity: 0.45; cursor: default; }
.dropdown-menu .settings-row.is-disabled:hover { background-color: transparent; }
.dropdown-menu .settings-row.is-disabled .switch { cursor: default; }

/* Pill-switch: label.switch > input[type=checkbox] + span.switch-thumb */
.switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-thumb {
  position: absolute; inset: 0; border-radius: var(--radius-full);
  background: var(--color-gray-300); transition: background var(--transition-fast);
}
.switch-thumb::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff;
  transition: transform var(--transition-fast);
}
.switch input:checked + .switch-thumb { background: var(--color-primary); }
.switch input:checked + .switch-thumb::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[data-theme="dark"] .switch-thumb { background: rgba(255, 255, 255, 0.18); }

.dropdown-text {
  flex: 1;
}

/* Genest submenu (flyout) binnen een dropdown */
.dropdown-submenu {
  position: relative;
}

/* De flyout staat op left:100%, buiten de parent. Die heeft standaard
   overflow:hidden (afgeronde hoeken) en zou het submenu wegknippen. */
.dropdown-menu:has(.dropdown-submenu) {
  overflow: visible;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin: 0 0 0 0.25rem;
  z-index: 1001;
}

.dropdown-subtoggle .chevron-right {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Lange submenu's (bv. gemeenten per provincie) scrollen i.p.v. buiten beeld te lopen.
   Op desktop wordt de flyout via JS fixed-gepositioneerd en geklemd; deze max-height
   is een fallback. Op mobiel klapt het submenu inline uit (zie navbar.css). */
.dropdown-menu-scroll {
  max-height: min(70vh, 420px);
  overflow-y: auto;
}

/* Parent provincielijst (Cijfers) op desktop: scroll als de lijst hoger is dan het
   scherm, zodat ook de onderste provincies bereikbaar blijven op lage viewports.
   Mobiel niet nodig: daar scrollt de hele navbar-menu (navbar.css). */
@media (min-width: 981px) {
  .dropdown-menu.cijfers-menu {
    max-height: calc(100vh - var(--navbar-height) - 1rem);
    overflow-y: auto;
  }
}

/* -------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.badge-gray {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
  box-shadow: inset 0 0 0 1px rgba(156, 163, 175, 0.2);
}

[data-theme="dark"] .badge-gray {
  background-color: rgba(156, 163, 175, 0.1);
  color: var(--color-gray-400);
}

.badge-red {
  background-color: var(--color-red-50);
  color: var(--color-red-600);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.2);
}

[data-theme="dark"] .badge-red {
  background-color: rgba(248, 113, 113, 0.1);
  color: var(--color-red-400);
}

.badge-yellow {
  background-color: var(--color-amber-50);
  color: var(--color-amber-700);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.2);
}

[data-theme="dark"] .badge-yellow {
  background-color: rgba(251, 191, 36, 0.1);
  color: var(--color-amber-400);
}

.badge-orange {
  background-color: var(--color-orange-50);
  color: var(--color-orange-700);
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.25);
}

[data-theme="dark"] .badge-orange {
  background-color: rgba(251, 146, 60, 0.1);
  color: var(--color-orange-400);
}

.badge-green {
  background-color: var(--color-emerald-50);
  color: var(--color-emerald-700);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .badge-green {
  background-color: rgba(52, 211, 153, 0.1);
  color: var(--color-emerald-400);
}

.badge-blue {
  background-color: var(--color-blue-50);
  color: var(--color-blue-700);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .badge-blue {
  background-color: rgba(96, 165, 250, 0.1);
  color: var(--color-blue-400);
}

.badge-indigo {
  background-color: var(--color-indigo-50);
  color: var(--color-indigo-700);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .badge-indigo {
  background-color: rgba(129, 140, 248, 0.1);
  color: var(--color-indigo-400);
}

.badge-purple {
  background-color: var(--color-purple-50);
  color: var(--color-purple-700);
  box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.2);
}

[data-theme="dark"] .badge-purple {
  background-color: rgba(192, 132, 252, 0.1);
  color: var(--color-purple-400);
}

.badge-pink {
  background-color: var(--color-pink-50);
  color: var(--color-pink-700);
  box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.2);
}

[data-theme="dark"] .badge-pink {
  background-color: rgba(244, 114, 182, 0.1);
  color: var(--color-pink-400);
}

/* -------------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------------- */
/* Altijd één regel: past hij niet, dan scrolt hij horizontaal (zonder zichtbare scrollbar). */
.breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.breadcrumb::-webkit-scrollbar {
  display: none;
}

/* Pijlen met een verloop over de rand, zichtbaar zolang er aan die kant meer is (script.js). */
.breadcrumb-scroll {
  position: relative;
}

.breadcrumb-scroll-btn {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  align-items: center;
  padding: 0;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.breadcrumb-scroll-btn:hover {
  color: var(--color-text-main);
}

.breadcrumb-scroll-btn.visible {
  display: flex;
}

.breadcrumb-scroll-start {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(to right, var(--color-bg-body) 55%, transparent);
}

.breadcrumb-scroll-end {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(to left, var(--color-bg-body) 55%, transparent);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
}

.breadcrumb-item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--color-text-main);
}

/* Anders wint de blauwe linkkleur van het donkere thema. */
[data-theme="dark"] .breadcrumb-item a {
  color: var(--color-text-muted);
}

[data-theme="dark"] .breadcrumb-item a:hover {
  color: var(--color-text-main);
}

.breadcrumb-item.active {
  color: var(--color-text-main);
  font-weight: 500;
}

.breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  opacity: 0.6;
  user-select: none;
}

.breadcrumb-text-light .breadcrumb-item a,
.breadcrumb-text-light .breadcrumb-separator {
    color: var(--color-gray-400);
}

.breadcrumb-text-light .breadcrumb-item a:hover,
.breadcrumb-text-light .breadcrumb-item.active {
    color: var(--color-gray-50);
}


/* -------------------------------------------------------------------------
   Tabs
   ------------------------------------------------------------------------- */
.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-text-main);
}

/* Connected tabs (for cards) */
.nav-tabs-connected {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}

.nav-tabs-connected .nav-item {
  text-align: center;
  border-right: 1px solid var(--color-border);
  width: auto;
}

.nav-tabs-connected .nav-item:last-child {
  border-right: none;
}

.nav-tabs-connected .nav-link {
  width: 100%;
  color: var(--color-text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.nav-tabs-connected .nav-link.active {
  color: var(--color-text-main);
  background-color: var(--color-gray-100);
  font-weight: 600;
}

[data-theme="dark"] .nav-tabs-connected .nav-link.active {
  background-color: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.nav-tabs-connected .nav-item:first-child .nav-link {
  border-top-left-radius: calc(var(--radius) - 1px);
}

.nav-tabs-connected .nav-item:last-child .nav-link {
  border-top-right-radius: calc(var(--radius) - 1px);
}

.nav-tabs-connected.nav-auto .nav-item:last-child .nav-link {
  border-top-right-radius: 0;
}

.nav-tabs-connected.nav-auto {
  flex-wrap: wrap;
}

.nav-tabs-connected.nav-auto .nav-link {
  white-space: nowrap;
}

/* Tab variants */
.nav-fill .nav-item {
  flex: 1;
}

.nav-auto .nav-item {
  flex: 0 0 auto;
}

.nav-auto .nav-link {
  padding: 1rem 1.5rem;
  width: auto;
}

/* Tab content */
.tab-content > .tab-pane {
  display: none;
}

.tab-content > .tab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* -------------------------------------------------------------------------
   Modals
   ------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  padding: 1rem;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 100%;
  max-width: 28rem;
  background-color: var(--color-bg-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--transition-base) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Geen container-border (die botste met de donkere header); in dark mode is de
   surface gelijk aan de header, dus daar een sterkere schaduw voor afbakening. */
[data-theme="dark"] .modal {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

/* Donkere header is de default; voeg .header-light toe aan .modal-header om
   terug te vallen op het originele lichte uiterlijk (surface + muted tekst). */
.modal-header:not(.header-light) {
  background-color: var(--color-bg-header);
  border-bottom-color: var(--color-header-border);
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-main);
}

.modal-header:not(.header-light) .modal-title {
  color: var(--color-header-text);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* kleinere zij-padding op smalle schermen (modals gaan daar richting full-screen) */
@media (max-width: 640px) {
  .modal-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 640px) {
  .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
  }

  .modal-footer .btn {
    flex: 0 1 auto;
  }
}

/* Modal actions (alternative to modal-footer) */
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

@media (min-width: 640px) {
  .modal-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .modal-actions .btn {
    flex: 1;
  }
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text-main);
}

[data-theme="dark"] .modal-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ×-knop staat op de donkere header: lichte kleur i.p.v. muted-grijs.
   Bij .header-light valt hij terug op de base .modal-close-stijl hierboven. */
.modal-header:not(.header-light) .modal-close {
  color: rgba(255, 255, 255, 0.7);
}

.modal-header:not(.header-light) .modal-close:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Modal icon wrappers */
.modal-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.modal-icon-success {
  background-color: var(--color-green-100);
  color: var(--color-green-600);
}

[data-theme="dark"] .modal-icon-success {
  background-color: rgba(52, 211, 153, 0.1);
  color: var(--color-emerald-400);
}

.modal-icon-danger {
  background-color: var(--color-red-50);
  color: var(--color-red-600);
}

[data-theme="dark"] .modal-icon-danger {
  background-color: rgba(248, 113, 113, 0.1);
  color: var(--color-red-400);
}

.modal-icon-warning {
  background-color: var(--color-amber-50);
  color: var(--color-amber-600);
}

[data-theme="dark"] .modal-icon-warning {
  background-color: rgba(251, 191, 36, 0.1);
  color: var(--color-amber-400);
}

.modal-icon-info {
  background-color: var(--color-sky-50);
  color: var(--color-sky-600);
}

[data-theme="dark"] .modal-icon-info {
  background-color: rgba(56, 189, 248, 0.1);
  color: var(--color-sky-400);
}

/* -------------------------------------------------------------------------
   Toasts
   ------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  inset: auto 0 0.5rem 0;      /* top auto, links/rechts 0, ~1rem vanaf onder */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* toasts blijven rechtsonder */
  gap: 0.75rem;
  padding: 0.5rem 1rem;        /* ruimte voor de box-shadow, geen clip erop */
  overflow: hidden;            /* voorkomt horizontale overflow bij de inschuif-animatie */
  pointer-events: none;
}

.toast {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  min-width: 320px;
  max-width: 400px;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

[data-theme="dark"] .toast {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.toast-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
}

.toast-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.toast-success .toast-icon { color: var(--color-success); }
.toast-info .toast-icon { color: var(--color-info); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-danger .toast-icon { color: var(--color-danger); }
.toast-neutral .toast-icon { color: var(--color-text-muted); }

.toast-content {
  flex: 1;
  min-width: 0;
  align-self: anchor-center;
}

.toast-title {
  font-weight: 500;
  color: var(--color-text-main);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.toast-message {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.25;
  margin-bottom: 0;
}

.toast-close {
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.toast-btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toast-btn-close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text-main);
}

[data-theme="dark"] .toast-btn-close:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.toast-btn-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ==========================================================================
   6. FORMS
   ========================================================================== */

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-main);
}

/* Labels als de subheader van de oude site: klein, in hoofdletters, gedempt. Op een formulier of card met
   .form-caps (/waarde, /hypotheek-berekenen). */
.form-caps .form-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Het sterretje van live bij een verplicht veld (/hypotheek-berekenen, /contact). */
.required-mark {
  color: var(--color-danger);
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-main);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

textarea.form-control {
  resize: vertical;
  max-height: 100%;
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1);
}

.form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--color-gray-50);
  opacity: 0.8;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.05);
}

.form-text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Select */
.form-select {
  display: block;
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-main);
  background-color: var(--color-bg-surface);
  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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  cursor: pointer;
}

[data-theme="dark"] .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='%23f8fafc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1);
}

/* Input Group */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

[data-theme="dark"] .input-group-text {
  background-color: rgba(255, 255, 255, 0.05);
}

.input-group > .input-group-text:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Een tekstblok rechts van het veld (een eenheid als m²): recht aansluiten, één lijn ertussen. */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-text:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

/* Checkboxes & Radios */
.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.75rem;
  margin-bottom: 0.25rem;
  position: relative;
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.25rem;
  margin-left: -1.75rem;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-check-input[type="checkbox"] {
  border-radius: 0.25rem;
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' 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"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1);
}

.form-check-label {
  cursor: pointer;
  color: var(--color-text-main);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Switch */
.form-switch {
  padding-left: 3rem;
}

.form-switch .form-check-input {
  width: 2rem;
  height: 1.125rem;
  margin-left: -3rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: var(--radius-full);
  transition: background-position var(--transition-fast);
}

[data-theme="dark"] .form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* List group with checkboxes */
.list-group-check {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.list-group-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.list-group-check-item:last-child {
  border-bottom: none;
}

.list-group-check-item:hover {
  background-color: var(--color-gray-50);
}

[data-theme="dark"] .list-group-check-item:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.list-group-check-item .form-check-input {
  position: static;
  margin: 0;
  min-width: 1.25rem;
}

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */

/* Display */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Flexbox */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Margin */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.m-auto { margin: auto !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-auto { margin-right: auto !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }


.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }


/* Width & Height */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* Text */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }

.font-weight-normal { font-weight: 400 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-bold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.text-info-active { color: var(--color-info-active) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-main { color: var(--color-text-main) !important; }
.text-white { color: #ffffff !important; }

.text-decoration-none { text-decoration: none !important; }
.text-uppercase { text-transform: uppercase !important; }

/* Border Radius */
.rounded { border-radius: var(--radius) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.rounded-circle { border-radius: 50% !important; }

/* Border */
.border { border: 1px solid var(--color-border) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-light { border-color: var(--color-gray-200) !important; }

/* Position */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.position-static { position: static !important; }

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Overflow */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Mobile - max 768px */
@media (max-width: 768px) {
  .sidebar {
    margin-left: calc(var(--sidebar-width) * -1);
  }

  .sidebar.open {
    margin-left: 0;
    box-shadow: 2px 0 8px var(--color-shadow);
  }

  .navbar {
    left: 0;
  }

  .main-content,
  .main-content.container-fluid {
    margin-left: 0;
    width: 100%;
  }

  /* Responsive hide/show */
  .d-none-mobile { display: none !important; }
  .d-block-mobile { display: block !important; }
}

@media (min-width: 769px) {
  .d-none-desktop { display: none !important; }
  .d-block-desktop { display: block !important; }
}

/* Responsive display utilities */
@media (max-width: 639px) {
  .d-xs-none { display: none !important; }
  .d-xs-block { display: block !important; }
  .d-xs-flex { display: flex !important; }
  .d-xs-inline { display: inline !important; }

  .flex-xs-row { flex-direction: row !important; }
  .flex-xs-column { flex-direction: column !important; }
  .flex-xs-wrap { flex-wrap: wrap !important; }
  .flex-xs-grow-0 { flex-grow: 0 !important; }
  .flex-xs-grow-1 { flex-grow: 1 !important; }

  .align-items-xs-start { align-items: flex-start !important; }
  .align-items-xs-end { align-items: flex-end !important; }
  .align-items-xs-center { align-items: center !important; }

  .justify-content-xs-start { justify-content: flex-start !important; }
  .justify-content-xs-end { justify-content: flex-end !important; }
  .justify-content-xs-center { justify-content: center !important; }
  .justify-content-xs-between { justify-content: space-between !important; }
  .justify-content-xs-around { justify-content: space-around !important; }

  .m-xs-0 { margin: 0 !important; }
  .m-xs-1 { margin: 0.25rem !important; }
  .m-xs-2 { margin: 0.5rem !important; }
  .m-xs-3 { margin: 1rem !important; }
  .m-xs-4 { margin: 1.5rem !important; }
  .m-xs-5 { margin: 3rem !important; }
  .m-xs-auto { margin: auto !important; }

  .mx-xs-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-xs-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-xs-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-xs-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-xs-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-xs-auto { margin-left: auto !important; margin-right: auto !important; }

  .my-xs-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-xs-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-xs-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-xs-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-xs-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-xs-auto { margin-top: auto !important; margin-bottom: auto !important; }

  .mt-xs-0 { margin-top: 0 !important; }
  .mt-xs-1 { margin-top: 0.25rem !important; }
  .mt-xs-2 { margin-top: 0.5rem !important; }
  .mt-xs-3 { margin-top: 1rem !important; }
  .mt-xs-4 { margin-top: 1.5rem !important; }
  .mt-xs-5 { margin-top: 3rem !important; }
  .mt-xs-auto { margin-top: auto !important; }

  .mb-xs-0 { margin-bottom: 0 !important; }
  .mb-xs-1 { margin-bottom: 0.25rem !important; }
  .mb-xs-2 { margin-bottom: 0.5rem !important; }
  .mb-xs-3 { margin-bottom: 1rem !important; }
  .mb-xs-4 { margin-bottom: 1.5rem !important; }
  .mb-xs-5 { margin-bottom: 3rem !important; }

  .ms-xs-0 { margin-left: 0 !important; }
  .ms-xs-1 { margin-left: 0.25rem !important; }
  .ms-xs-2 { margin-left: 0.5rem !important; }
  .ms-xs-3 { margin-left: 1rem !important; }
  .ms-xs-auto { margin-left: auto !important; }

  .me-xs-0 { margin-right: 0 !important; }
  .me-xs-1 { margin-right: 0.25rem !important; }
  .me-xs-2 { margin-right: 0.5rem !important; }
  .me-xs-3 { margin-right: 1rem !important; }
  .me-xs-auto { margin-right: auto !important; }

  /*-sm Padding */
  .p-xs-0 { padding: 0 !important; }
  .p-xs-1 { padding: 0.25rem !important; }
  .p-xs-2 { padding: 0.5rem !important; }
  .p-xs-3 { padding: 1rem !important; }
  .p-xs-4 { padding: 1.5rem !important; }
  .p-xs-5 { padding: 3rem !important; }

  .px-xs-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-xs-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-xs-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-xs-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-xs-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

  .py-xs-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-xs-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-xs-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-xs-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-xs-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

  .text-xs-left { text-align: left !important; }
  .text-xs-center { text-align: center !important; }
  .text-xs-right { text-align: right !important; }

  .w-xs-100 { width: 100% !important; }
  .w-xs-auto { width: auto !important; }
  .h-xs-100 { height: 100% !important; }
  .h-xs-auto { height: auto !important; }

}

/* Responsive display utilities */
@media (min-width: 640px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline { display: inline !important; }

  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-column { flex-direction: column !important; }
  .flex-sm-wrap { flex-wrap: wrap !important; }
  .flex-sm-grow-0 { flex-grow: 0 !important; }
  .flex-sm-grow-1 { flex-grow: 1 !important; }

  .align-items-sm-start { align-items: flex-start !important; }
  .align-items-sm-end { align-items: flex-end !important; }
  .align-items-sm-center { align-items: center !important; }

  .justify-content-sm-start { justify-content: flex-start !important; }
  .justify-content-sm-end { justify-content: flex-end !important; }
  .justify-content-sm-center { justify-content: center !important; }
  .justify-content-sm-between { justify-content: space-between !important; }
  .justify-content-sm-around { justify-content: space-around !important; }

  .m-sm-0 { margin: 0 !important; }
  .m-sm-1 { margin: 0.25rem !important; }
  .m-sm-2 { margin: 0.5rem !important; }
  .m-sm-3 { margin: 1rem !important; }
  .m-sm-4 { margin: 1.5rem !important; }
  .m-sm-5 { margin: 3rem !important; }
  .m-sm-auto { margin: auto !important; }

  .mx-sm-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-sm-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-sm-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-sm-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-sm-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-sm-auto { margin-left: auto !important; margin-right: auto !important; }

  .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-sm-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-sm-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-sm-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-sm-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; }

  .mt-sm-0 { margin-top: 0 !important; }
  .mt-sm-1 { margin-top: 0.25rem !important; }
  .mt-sm-2 { margin-top: 0.5rem !important; }
  .mt-sm-3 { margin-top: 1rem !important; }
  .mt-sm-4 { margin-top: 1.5rem !important; }
  .mt-sm-5 { margin-top: 3rem !important; }
  .mt-sm-auto { margin-top: auto !important; }

  .mb-sm-0 { margin-bottom: 0 !important; }
  .mb-sm-1 { margin-bottom: 0.25rem !important; }
  .mb-sm-2 { margin-bottom: 0.5rem !important; }
  .mb-sm-3 { margin-bottom: 1rem !important; }
  .mb-sm-4 { margin-bottom: 1.5rem !important; }
  .mb-sm-5 { margin-bottom: 3rem !important; }

  .ms-sm-0 { margin-left: 0 !important; }
  .ms-sm-1 { margin-left: 0.25rem !important; }
  .ms-sm-2 { margin-left: 0.5rem !important; }
  .ms-sm-3 { margin-left: 1rem !important; }
  .ms-sm-auto { margin-left: auto !important; }

  .me-sm-0 { margin-right: 0 !important; }
  .me-sm-1 { margin-right: 0.25rem !important; }
  .me-sm-2 { margin-right: 0.5rem !important; }
  .me-sm-3 { margin-right: 1rem !important; }
  .me-sm-auto { margin-right: auto !important; }

  /*-sm Padding */
  .p-sm-0 { padding: 0 !important; }
  .p-sm-1 { padding: 0.25rem !important; }
  .p-sm-2 { padding: 0.5rem !important; }
  .p-sm-3 { padding: 1rem !important; }
  .p-sm-4 { padding: 1.5rem !important; }
  .p-sm-5 { padding: 3rem !important; }

  .px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-sm-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-sm-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-sm-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-sm-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

  .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-sm-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-sm-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-sm-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

  .text-sm-left { text-align: left !important; }
  .text-sm-center { text-align: center !important; }
  .text-sm-right { text-align: right !important; }

  .w-sm-100 { width: 100% !important; }
  .w-sm-auto { width: auto !important; }
  .h-sm-100 { height: 100% !important; }
  .h-sm-auto { height: auto !important; }

}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline { display: inline !important; }

  .flex-md-row { flex-direction: row !important; }
  .flex-md-column { flex-direction: column !important; }
  .flex-md-wrap { flex-wrap: wrap !important; }
  .flex-md-grow-0 { flex-grow: 0 !important; }
  .flex-md-grow-1 { flex-grow: 1 !important; }

  .align-items-md-start { align-items: flex-start !important; }
  .align-items-md-end { align-items: flex-end !important; }
  .align-items-md-center { align-items: center !important; }

  .justify-content-md-start { justify-content: flex-start !important; }
  .justify-content-md-end { justify-content: flex-end !important; }
  .justify-content-md-center { justify-content: center !important; }
  .justify-content-md-between { justify-content: space-between !important; }
  .justify-content-md-around { justify-content: space-around !important; }

  .m-md-0 { margin: 0 !important; }
  .m-md-1 { margin: 0.25rem !important; }
  .m-md-2 { margin: 0.5rem !important; }
  .m-md-3 { margin: 1rem !important; }
  .m-md-4 { margin: 1.5rem !important; }
  .m-md-5 { margin: 3rem !important; }
  .m-md-auto { margin: auto !important; }

  .mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-md-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-md-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-md-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-md-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-md-auto { margin-left: auto !important; margin-right: auto !important; }

  .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-md-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-md-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-md-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-md-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; }

  .mt-md-0 { margin-top: 0 !important; }
  .mt-md-1 { margin-top: 0.25rem !important; }
  .mt-md-2 { margin-top: 0.5rem !important; }
  .mt-md-3 { margin-top: 1rem !important; }
  .mt-md-4 { margin-top: 1.5rem !important; }
  .mt-md-5 { margin-top: 3rem !important; }
  .mt-md-auto { margin-top: auto !important; }

  .mb-md-0 { margin-bottom: 0 !important; }
  .mb-md-1 { margin-bottom: 0.25rem !important; }
  .mb-md-2 { margin-bottom: 0.5rem !important; }
  .mb-md-3 { margin-bottom: 1rem !important; }
  .mb-md-4 { margin-bottom: 1.5rem !important; }
  .mb-md-5 { margin-bottom: 3rem !important; }

  .ms-md-0 { margin-left: 0 !important; }
  .ms-md-1 { margin-left: 0.25rem !important; }
  .ms-md-2 { margin-left: 0.5rem !important; }
  .ms-md-3 { margin-left: 1rem !important; }
  .ms-md-auto { margin-left: auto !important; }

  .me-md-0 { margin-right: 0 !important; }
  .me-md-1 { margin-right: 0.25rem !important; }
  .me-md-2 { margin-right: 0.5rem !important; }
  .me-md-3 { margin-right: 1rem !important; }
  .me-md-auto { margin-right: auto !important; }

  /*-s dPadding */
  .p-md-0 { padding: 0 !important; }
  .p-md-1 { padding: 0.25rem !important; }
  .p-md-2 { padding: 0.5rem !important; }
  .p-md-3 { padding: 1rem !important; }
  .p-md-4 { padding: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }

  .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-md-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-md-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-md-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-md-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

  .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-md-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-md-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

  .text-md-left { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-right { text-align: right !important; }

  .w-md-100 { width: 100% !important; }
  .w-md-auto { width: auto !important; }
  .h-md-100 { height: 100% !important; }
  .h-md-auto { height: auto !important; }

}


@media (min-width: 1024px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline { display: inline !important; }

  .flex-lg-row { flex-direction: row !important; }
  .flex-lg-column { flex-direction: column !important; }
  .flex-lg-wrap { flex-wrap: wrap !important; }
  .flex-lg-grow-0 { flex-grow: 0 !important; }
  .flex-lg-grow-1 { flex-grow: 1 !important; }

  .align-items-lg-start { align-items: flex-start !important; }
  .align-items-lg-end { align-items: flex-end !important; }
  .align-items-lg-center { align-items: center !important; }

  .justify-content-lg-start { justify-content: flex-start !important; }
  .justify-content-lg-end { justify-content: flex-end !important; }
  .justify-content-lg-center { justify-content: center !important; }
  .justify-content-lg-between { justify-content: space-between !important; }
  .justify-content-lg-around { justify-content: space-around !important; }

  .m-lg-0 { margin: 0 !important; }
  .m-lg-1 { margin: 0.25rem !important; }
  .m-lg-2 { margin: 0.5rem !important; }
  .m-lg-3 { margin: 1rem !important; }
  .m-lg-4 { margin: 1.5rem !important; }
  .m-lg-5 { margin: 3rem !important; }
  .m-lg-auto { margin: auto !important; }

  .mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-lg-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-lg-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-lg-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-lg-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }

  .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-lg-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-lg-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-lg-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-lg-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; }

  .mt-lg-0 { margin-top: 0 !important; }
  .mt-lg-1 { margin-top: 0.25rem !important; }
  .mt-lg-2 { margin-top: 0.5rem !important; }
  .mt-lg-3 { margin-top: 1rem !important; }
  .mt-lg-4 { margin-top: 1.5rem !important; }
  .mt-lg-5 { margin-top: 3rem !important; }
  .mt-lg-auto { margin-top: auto !important; }

  .mb-lg-0 { margin-bottom: 0 !important; }
  .mb-lg-1 { margin-bottom: 0.25rem !important; }
  .mb-lg-2 { margin-bottom: 0.5rem !important; }
  .mb-lg-3 { margin-bottom: 1rem !important; }
  .mb-lg-4 { margin-bottom: 1.5rem !important; }
  .mb-lg-5 { margin-bottom: 3rem !important; }

  .ms-lg-0 { margin-left: 0 !important; }
  .ms-lg-1 { margin-left: 0.25rem !important; }
  .ms-lg-2 { margin-left: 0.5rem !important; }
  .ms-lg-3 { margin-left: 1rem !important; }
  .ms-lg-auto { margin-left: auto !important; }

  .me-lg-0 { margin-right: 0 !important; }
  .me-lg-1 { margin-right: 0.25rem !important; }
  .me-lg-2 { margin-right: 0.5rem !important; }
  .me-lg-3 { margin-right: 1rem !important; }
  .me-lg-auto { margin-right: auto !important; }

  /*-slgPadding */
  .p-lg-0 { padding: 0 !important; }
  .p-lg-1 { padding: 0.25rem !important; }
  .p-lg-2 { padding: 0.5rem !important; }
  .p-lg-3 { padding: 1rem !important; }
  .p-lg-4 { padding: 1.5rem !important; }
  .p-lg-5 { padding: 3rem !important; }

  .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-lg-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-lg-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-lg-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-lg-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

  .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-lg-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-lg-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-lg-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-lg-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

  .text-lg-left { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-right { text-align: right !important; }

  .w-lg-100 { width: 100% !important; }
  .w-lg-auto { width: auto !important; }
  .h-lg-100 { height: 100% !important; }
  .h-lg-auto { height: auto !important; }

}

@media (min-width: 1280px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-inline { display: inline !important; }

  .flex-xl-row { flex-direction: row !important; }
  .flex-xl-column { flex-direction: column !important; }
  .flex-xl-wrap { flex-wrap: wrap !important; }
  .flex-xl-grow-0 { flex-grow: 0 !important; }
  .flex-xl-grow-1 { flex-grow: 1 !important; }

  .align-items-xl-start { align-items: flex-start !important; }
  .align-items-xl-end { align-items: flex-end !important; }
  .align-items-xl-center { align-items: center !important; }

  .justify-content-xl-start { justify-content: flex-start !important; }
  .justify-content-xl-end { justify-content: flex-end !important; }
  .justify-content-xl-center { justify-content: center !important; }
  .justify-content-xl-between { justify-content: space-between !important; }
  .justify-content-xl-around { justify-content: space-around !important; }

  .m-xl-0 { margin: 0 !important; }
  .m-xl-1 { margin: 0.25rem !important; }
  .m-xl-2 { margin: 0.5rem !important; }
  .m-xl-3 { margin: 1rem !important; }
  .m-xl-4 { margin: 1.5rem !important; }
  .m-xl-5 { margin: 3rem !important; }
  .m-xl-auto { margin: auto !important; }

  .mx-xl-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-xl-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-xl-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-xl-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-xl-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-xl-auto { margin-left: auto !important; margin-right: auto !important; }

  .my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-xl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-xl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-xl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-xl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; }

  .mt-xl-0 { margin-top: 0 !important; }
  .mt-xl-1 { margin-top: 0.25rem !important; }
  .mt-xl-2 { margin-top: 0.5rem !important; }
  .mt-xl-3 { margin-top: 1rem !important; }
  .mt-xl-4 { margin-top: 1.5rem !important; }
  .mt-xl-5 { margin-top: 3rem !important; }
  .mt-xl-auto { margin-top: auto !important; }

  .mb-xl-0 { margin-bottom: 0 !important; }
  .mb-xl-1 { margin-bottom: 0.25rem !important; }
  .mb-xl-2 { margin-bottom: 0.5rem !important; }
  .mb-xl-3 { margin-bottom: 1rem !important; }
  .mb-xl-4 { margin-bottom: 1.5rem !important; }
  .mb-xl-5 { margin-bottom: 3rem !important; }

  .ms-xl-0 { margin-left: 0 !important; }
  .ms-xl-1 { margin-left: 0.25rem !important; }
  .ms-xl-2 { margin-left: 0.5rem !important; }
  .ms-xl-3 { margin-left: 1rem !important; }
  .ms-xl-auto { margin-left: auto !important; }

  .me-xl-0 { margin-right: 0 !important; }
  .me-xl-1 { margin-right: 0.25rem !important; }
  .me-xl-2 { margin-right: 0.5rem !important; }
  .me-xl-3 { margin-right: 1rem !important; }
  .me-xl-auto { margin-right: auto !important; }

  /*-slgPadding */
  .p-xl-0 { padding: 0 !important; }
  .p-xl-1 { padding: 0.25rem !important; }
  .p-xl-2 { padding: 0.5rem !important; }
  .p-xl-3 { padding: 1rem !important; }
  .p-xl-4 { padding: 1.5rem !important; }
  .p-xl-5 { padding: 3rem !important; }

  .px-xl-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-xl-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-xl-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-xl-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-xl-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

  .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-xl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-xl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-xl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-xl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

  .text-xl-left { text-align: left !important; }
  .text-xl-center { text-align: center !important; }
  .text-xl-right { text-align: right !important; }

  .w-xl-100 { width: 100% !important; }
  .w-xl-auto { width: auto !important; }
  .h-xl-100 { height: 100% !important; }
  .h-xl-auto { height: auto !important; }

}

/* tooltip */
[data-tooltip] {
  cursor: help;
}
button[data-tooltip] {
  cursor: pointer;
}

.tooltip-popup {
  position: fixed;
  width: max-content;
  max-width: 260px;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-md, 0.375rem);
  background: #111827de;
  color: #f3f4f6;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* In donker dekkend en een tint lichter dan de pagina, met een dunne rand: anders leest de tekst eronder door. */
[data-theme="dark"] .tooltip-popup {
  background: #1f2937;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.4);
}

.tooltip-popup.show {
  opacity: 1;
}
.tooltip-popup.tooltip-light {
  background: var(--color-bg-surface);
  color: var(--color-text-main);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 14px var(--color-shadow);
}
[data-theme="dark"] .tooltip-popup.tooltip-light {
  background: var(--color-gray-900, #111827);
  color: #f3f4f6;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Info-icoon: een kleine cirkel met een i, als aanleiding voor een tooltip. */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background: var(--color-slate-100);
  color: var(--color-slate-600);
  flex-shrink: 0;
  cursor: help;
  vertical-align: middle;
  font-size: 0.65rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.info-icon:hover {
  background: var(--color-slate-300);
  color: var(--color-slate-800);
}
[data-theme="dark"] .info-icon {
  background: var(--color-slate-700);
  color: var(--color-slate-300);
}
[data-theme="dark"] .info-icon:hover {
  background: var(--color-slate-600);
  color: var(--color-slate-100);
}

/* Colors */

.bg-body {
  background: var(--color-bg-body);
}

.bg-surface {
  background: var(--color-bg-surface);
}

.bg-primary {
  background: var(--color-primary);
}

.bg-secondary {
  background: var(--color-secondary);
}

.bg-success {
  background: var(--color-success);
}

.bg-warning {
  background: var(--color-warning);
}

.bg-danger {
  background: var(--color-danger);
}

.bg-info {
  background: var(--color-info);
}

.bg-info-active {
  background: var(--color-info-active);
}

.shadow {
  box-shadow: 0 1px 3px var(--color-shadow);
}

ul {
  list-style-position: inside;
}


a.underline {
    text-decoration: underline!important;
    text-decoration-color: var(--color-border)!important;
    text-underline-offset: 3px;
}

a.underline:hover {
    text-decoration-color: var(--color-text-main)!important;
}


.bnr-btn {
  color: white!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--color-orange-600);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background var(--transition-fast, 150ms) ease, transform var(--transition-fast, 150ms) ease;
}
.bnr-btn:hover { background: var(--color-orange-700); transform: translateY(-1px); color: white; }


/* Naamlabel bij de cursor op een kaart (window.attachHoverLabel, zie macros.html).
   Positionering gaat via transform in JS; de MapLibre-container is al position:relative.
   z-index onder de kaartpanelen: het label zweeft mee met de muis en mag nooit over een
   bedieningselement heen vallen. */
.map-hover-label {
  position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none;
  padding: .2rem .5rem; border-radius: var(--radius-md);
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  box-shadow: 0 1px 4px var(--color-shadow);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity var(--transition-fast);
}
.map-hover-label.is-zichtbaar { opacity: 1; }

/* ==========================================================================
   WONINGCARDS: gedeeld door /verwachte-verkoopprijs en /woning
   ========================================================================== */

/* Een woning te koop als card met luchtfoto (partials/verkoopprijs/listing_card.html). */
.listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.listing-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Is de card hoger dan nodig (een buur heeft een adres over twee regels), dan gaat de extra hoogte naar
     de body, boven de vraagprijs, en blijft de knop even hoog. */
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.listing-photo {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--color-bg-body);
}

.listing-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* De speld op het adres: het midden van de uitsnede. */
.listing-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  color: #ffffff;
  transform: translate(-50%, -85%);
  filter: drop-shadow(0 1px 2px rgba(3, 7, 18, 0.6));
}

.listing-pin .icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* Het verschil met de vraagprijs, op de foto altijd met een vlak erachter. Gezien vanuit de koper: boven de
   vraagprijs (overbieden) rood, eronder groen, zoals live. */
.listing-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-gray-600);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.listing-badge.price-above {
  background: var(--color-danger);
  color: #ffffff;
}

.listing-badge.price-below {
  background: var(--color-success);
  color: #ffffff;
}

/* Een prijsverlaging: een daling, dus rood. */
.listing-badge.price-drop {
  background: var(--color-danger);
  color: #ffffff;
}

.listing-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.75rem 1rem 0.5rem;
}

.listing-title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.listing-title a {
  color: var(--color-text-main);
  text-decoration: none;
}

.listing-title a:hover {
  color: var(--color-primary);
}

/* Anders maakt de kit hem in het donkere thema blauw. */
[data-theme="dark"] .listing-title a {
  color: var(--color-text-main);
}

.listing-details {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.listing-nearby {
  display: block;
}

.listing-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.875rem;
}

.listing-price span {
  color: var(--color-text-muted);
}

.listing-price strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* De oorspronkelijke vraagprijs, doorgestreept onder de vraagprijs (de prijsverlagingenkaart). */
.listing-was {
  padding-top: 0;
  margin-top: 0;
  color: var(--color-text-muted);
}

.listing-was s {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* De advertentie zelf, klein onder de knop. */
.listing-source {
  justify-content: center;
  margin: -0.5rem 1rem 0.75rem;
  font-size: 0.75rem;
}

/* Een subtiele rand in de tekstkleur van de knop; in het donkere thema geeft de kit hem al een rand. Na
   .btn-success-lt, anders wint de rand van de kit. Ook voor dezelfde knop bij de kerncijfers van /waarde. */
.listing-button,
.kpi-button {
  border-color: #15803d21;
}

[data-theme="dark"] .listing-button,
[data-theme="dark"] .kpi-button {
  border-color: transparent;
}

.listing-button {
  justify-content: center;
  margin: 0.25rem 1rem 1rem;
}

/* Op de telefoon liggend: de foto links over de volle hoogte, rechts adres, vraagprijs en een kleinere knop.
   Zo staan er vier woningen op anderhalf scherm. De fotokolom schaalt mee, zodat het label tot 360px op één
   regel past; daaronder loopt het binnen de knop over twee regels. */
@media (max-width: 575.98px) {
  .listing-card {
    grid-template-columns: clamp(5.75rem, 30%, 10rem) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }

  .listing-photo {
    grid-row: 1 / -1;
    aspect-ratio: auto;
  }

  .listing-body {
    padding: 0.65rem 0.75rem 0.5rem;
  }

  .listing-title {
    font-size: 0.875rem;
  }

  .listing-button {
    grid-column: 2;
    margin: 0 0.75rem 0.75rem;
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
    font-size: 0.75rem;
    white-space: normal;
    text-align: center;
  }

  .listing-button .icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }
}

@media (min-width: 576px) {
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .listing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Dezelfde kleuren als tekst, in de tabel met woonplaatsen. */
.price-above {
  color: var(--color-danger);
}

.price-below {
  color: var(--color-success);
}

/* De card met de woning: luchtfoto, adres, de banner van de buurt en de kenmerken. */
.woning-photo {
  position: relative;
  margin: 1rem 1.2rem 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background: var(--color-bg-body);
}

/* Op een tablet staat de card over de volle breedte: daar een bredere uitsnede, anders wordt hij erg hoog. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .woning-photo {
    aspect-ratio: 2 / 1;
  }
}

.woning-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Laadt de luchtfoto niet, dan zet script.js een tekening van het woningtype neer (img/svg/photo_fallback.svg)
   en vervallen het plaatje en de speld. De tekening erft de lijn van hier en leest de tokens zelf. */
.photo-failed img,
.photo-failed .listing-pin {
  display: none;
}

.photo-fallback {
  --photo-fallback-glow: 0.09;
  --photo-fallback-ground: var(--color-border);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-theme="dark"] .photo-fallback {
  --photo-fallback-glow: 0.22;
  --photo-fallback-ground: var(--color-gray-600);
}



.woning-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 1rem 1.25rem 1.25rem;
}

.woning-features > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--color-border);
}

/* De twee links staan onderaan, zonder lijn eronder, zoals live. */
.woning-features > div:has(a) {
  border-bottom: 0;
}

.woning-features dt {
  font-weight: 600;
}

.woning-features dd {
  margin: 0;
  color: var(--color-text-muted);
}

.woning-features a,
[data-theme="dark"] .woning-features a {
  color: inherit;
  text-decoration: none;
}

.woning-features a:hover,
[data-theme="dark"] .woning-features a:hover {
  color: var(--color-primary);
}

/* Het energielabel als pijl in de kleur van het label. */
.energy-label {
  display: inline-block;
  min-width: 3.5rem;
  padding: 0 1.1rem 0 0.5rem;
  clip-path: polygon(0 0, calc(100% - 0.6rem) 0, 100% 50%, calc(100% - 0.6rem) 100%, 0 100%);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--label-color);
}

.label-aplusplusplusplus,
.label-aplusplusplus,
.label-aplusplus,
.label-aplus,
.label-a { --label-color: #009036; }
.label-b { --label-color: #55ab26; }
.label-c { --label-color: #c8d200; color: #1f2937; }
.label-d { --label-color: #ffed00; color: #1f2937; }
.label-e { --label-color: #fbba00; color: #1f2937; }
.label-f { --label-color: #ec6608; }
.label-g { --label-color: #e30613; }


/* ==========================================================================
   SCHEIDINGSLIJN, TABS IN EEN CARDKOP EN EEN SMALLE CARDKOP (Tabler-port, eerst op /woning)
   ========================================================================== */

/* Een kop als scheiding tussen twee blokken: klein, in hoofdletters, gecentreerd tussen twee lijnen. */
.hr-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hr-text::before,
.hr-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Een smalle cardkop met de titel in het midden. */
.card-header-center {
  justify-content: center;
  padding: 0.25rem 1.5rem;
}

.card-header-sm {
  padding-block: 0.375rem;
}

.card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
}

.card-header-sm .card-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

/* Tabs in een cardkop: het actieve tabblad sluit met een rand aan op de inhoud eronder. */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}

.nav-tabs .nav-item {
  width: auto;
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-tabs .nav-link:hover {
  color: var(--color-text-main);
}

.nav-tabs .nav-link.active {
  color: var(--color-text-main);
  background: var(--color-bg-surface);
  border-color: var(--color-border) var(--color-border) var(--color-bg-surface);
}