/* ============================================
   ADMIN TEMPLATE — Industrial Refined
   Slate + Amber, geometric precision
   ============================================ */

/* Only the monospace face still comes from Google; Outfit is served below. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- Outfit ---
   Self-hosted rather than fetched from Google, so the portal does not depend on
   a third party and renders without a round trip. Two weights carry everything:
   regular for body text, bold for headings and emphasis. Black is the brand
   mark alone. */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit-Regular.woff2') format('woff2'),
       url('/fonts/Outfit-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit-Bold.woff2') format('woff2'),
       url('/fonts/Outfit-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit-Black.woff2') format('woff2'),
       url('/fonts/Outfit-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Variables --- */
:root {
  /* One size for body text: tables, inputs, labels, menus, modals and .text-sm
     all use it, so copy does not change size as it moves between them.
     Headings, buttons, form hints and alerts keep their own scale. */
  --text-body: 0.85rem;

  --slate-950: #121110;
  --slate-900: #1a1918;
  --slate-850: #201f1d;
  --slate-800: #2a2826;
  --slate-700: #3d3a36;
  --slate-600: #5c5751;
  --slate-500: #7a746d;
  --slate-400: #9e978f;
  --slate-300: #bfb9b1;
  --slate-200: #d9d4ce;
  --slate-100: #ece9e5;
  --slate-50: #f7f5f3;

  --amber-500: #eb8a00;
  --amber-400: #f4a42e;
  --amber-300: #f8bd5c;
  --amber-200: #fbd68a;
  --amber-600: #c47300;
  --amber-glow: rgba(235, 138, 0, 0.15);
  --amber-glow-strong: rgba(235, 138, 0, 0.3);

  --success: #34c77b;
  --success-bg: rgba(52, 199, 123, 0.1);
  --danger: #ef4565;
  --danger-bg: rgba(239, 69, 101, 0.1);
  --info: #4ca8e8;
  --info-bg: rgba(76, 168, 232, 0.1);
  --warning: #eb8a00;
  --warning-bg: rgba(235, 138, 0, 0.1);

  --font-body: 'Outfit', sans-serif;
  --font-display: 'Outfit', var(--font-body);
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 20px var(--amber-glow), 0 0 60px var(--amber-glow);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  --navbar-height: 64px;
}

/* --- Light Mode --- */
[data-theme="light"] {
  color-scheme: light;

  /* Warm off-white base with subtle depth */
  --slate-950: #f5f3f0;
  --slate-900: #ffffff;
  --slate-850: #fafaf9;
  --slate-800: #e8e5e0;
  --slate-700: #d4d0ca;
  --slate-600: #a8a29e;
  --slate-500: #78716c;
  --slate-400: #57534e;
  --slate-300: #44403c;
  --slate-200: #292524;
  --slate-100: #1d1d1b;
  --slate-50: #1d1d1b;

  /* Slightly richer PechPlan orange for light bg contrast */
  --amber-500: #d07800;
  --amber-400: #a86000;
  --amber-300: #8a5000;
  --amber-600: #a86000;
  --amber-glow: rgba(235, 138, 0, 0.1);
  --amber-glow-strong: rgba(235, 138, 0, 0.2);

  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.08);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --info: #2563eb;
  --info-bg: rgba(37, 99, 235, 0.08);
  --warning: #d07800;
  --warning-bg: rgba(235, 138, 0, 0.08);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-glow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Light: no noise grain */
[data-theme="light"] body::before {
  display: none;
}

/* Light: navbar — clean white bar with subtle shadow */
[data-theme="light"] .navbar {
  background: #ffffff;
  border-bottom-color: var(--slate-800);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}


/* Light: dropdowns */
[data-theme="light"] .dropdown-menu {
  background: #fff;
  border-color: var(--slate-800);
  box-shadow: var(--shadow-lg);
}

[data-theme="light"] .dropdown-menu li a:hover {
  background: var(--slate-850);
}

/* Light: cards get elevation instead of borders */
[data-theme="light"] .card,
[data-theme="light"] .stat-card {
  border-color: var(--slate-800);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .card:hover,
[data-theme="light"] .stat-card:hover {
  box-shadow: var(--shadow-md);
}

/* Light: table wrapper */
[data-theme="light"] .table-wrapper {
  box-shadow: var(--shadow-sm);
}

/* Light: buttons */
[data-theme="light"] .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
  border-color: var(--amber-500);
  box-shadow: 0 1px 3px var(--amber-glow-strong);
}

[data-theme="light"] .btn-primary:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--amber-600), var(--amber-400));
  box-shadow: 0 4px 12px var(--amber-glow-strong);
}

[data-theme="light"] .btn-secondary {
  background: #fff;
  border-color: var(--slate-800);
}

[data-theme="light"] .btn-ghost {
  border-color: var(--slate-800);
}

/* Light: pagination */
[data-theme="light"] .pagination button.active {
  color: #fff;
  background: var(--amber-500);
  border-color: var(--amber-500);
}

/* Light: toggle */
[data-theme="light"] .toggle-switch input:checked + .toggle-track {
  background: var(--amber-500);
}

[data-theme="light"] .toggle-switch input:checked + .toggle-track::after {
  background: #fff;
}

/* Light: inputs */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff;
  border-color: #d4d0ca;
  color: #1d1d1b;
  color-scheme: light;
}

/* Native picker icons (Chrome/Safari) */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* Date and time fields.

   A datetime-local renders as a row of little spin fields, which next to a
   plain text input reads as something half-finished. Giving the segments room
   and marking the focused one makes it behave like the rest of the form: click
   a part, type it, tab on. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  font-variant-numeric: tabular-nums;
}

input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  padding: 0;
}

input[type="date"]::-webkit-datetime-edit-field-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-field-wrapper,
input[type="time"]::-webkit-datetime-edit-field-wrapper {
  padding: 0;
}

/* The separators sit quieter than the numbers they divide. */
input[type="date"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text {
  color: var(--text-muted);
  padding: 0 0.1em;
}

/* Which part you are about to type over, in the same amber the rest of the
   form uses for focus. */
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus {
  background: var(--amber-500);
  color: #1d1d1b;
  border-radius: 3px;
  outline: none;
}

/* An empty field shows dd-mm-jjjj as placeholder text, which should read as a
   hint rather than as an entered value. */
input[type="date"]:not(:focus)::-webkit-datetime-edit-day-field[aria-valuenow=""],
input[type="datetime-local"]:not(:focus)::-webkit-datetime-edit-day-field[aria-valuenow=""] {
  color: var(--text-muted);
}

/* The calendar button: a target of its own rather than a grey speck against
   the edge of the field. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  padding: 0.25rem;
  margin-left: 0.25rem;
  border-radius: var(--radius-sm, 4px);
  opacity: 0.65;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--amber-500) 20%, transparent);
}

/* Light: user avatar */
[data-theme="light"] .user-avatar {
  background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
  border-color: var(--amber-500);
  color: #fff;
}

/* Light: login page. Het neutrale inlogscherm; de PechPlan-variant staat bij de
   overige login-stijlen verderop in dit bestand. */
[data-theme="light"] .login-left::before {
  background:
    radial-gradient(ellipse at 30% 50%, var(--amber-glow) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(37, 99, 235, 0.03) 0%, transparent 50%);
}

[data-theme="light"] .login-right {
  background: linear-gradient(135deg, #1d1d1b, #2a2826);
  border-left-color: transparent;
}

[data-theme="light"] .login-right .login-right-content h2 {
  color: #fff;
}

[data-theme="light"] .login-right .login-right-content p {
  color: #a8a29e;
}

[data-theme="light"] .login-right-content .brand-icon-lg {
  color: #1d1d1b;
}

[data-theme="light"] .login-right::before {
  opacity: 0.08;
}

/* Light: mobile menu */
[data-theme="light"] .navbar-menu {
  background: #fff;
  border-right-color: var(--slate-800);
}

[data-theme="light"] .navbar-right {
  background: #fff;
}

/* Light: bar chart — use deeper amber */
[data-theme="light"] .bar-chart .bar {
  background: linear-gradient(180deg, var(--amber-500), var(--amber-600));
}

/* Light: notification badge */
[data-theme="light"] .notification-badge {
  box-shadow: 0 0 0 2px #fff;
}

/* Light: alert borders */
[data-theme="light"] .alert-success { border-color: rgba(22,163,74,0.2); }
[data-theme="light"] .alert-danger { border-color: rgba(220,38,38,0.2); }
[data-theme="light"] .alert-warning { border-color: var(--amber-glow-strong); }
[data-theme="light"] .alert-info { border-color: rgba(37,99,235,0.2); }

/* Light: progress bar track */
[data-theme="light"] .progress-bar {
  background: var(--slate-850);
}

[data-theme="light"] .progress-bar .progress-fill {
  background: linear-gradient(90deg, var(--amber-500), var(--amber-400));
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  color: var(--slate-300);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--slate-800);
  color: var(--slate-50);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: inline;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: inline;
}

/* Color scheme for native elements */
:root, [data-theme="dark"] {
  color-scheme: dark;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
  background: #1a1918;
}

html[data-theme="light"] {
  background: #ffffff;
}

body {
  font-family: var(--font-body);
  background: var(--slate-950);
  color: var(--slate-200);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Subtle noise texture overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

a { color: var(--amber-400); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--amber-300); }

h1, h2, h3, h4 { color: var(--slate-50); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* --- Page Layout --- */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  padding: 2rem;
  margin-top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
  max-width: 1400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 0;
}


/* --- Page Header --- */
.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--slate-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--slate-50), var(--slate-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-header .subtitle {
  color: var(--slate-400);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background-color: #1a1918;
  border-bottom: 1px solid var(--slate-800);
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  z-index: 1000;
  transform: translateZ(0);
  isolation: isolate;
}

[data-theme="light"] .navbar {
  background-color: #ffffff;
}

.navbar-brand {
  display: flex;
  align-items: center;
  margin-right: 2.5rem;
  flex-shrink: 0;
  position: relative;
  height: 36px;
  width: 160px;
}

.navbar-brand .brand-logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
  transition: opacity 1s ease;
}

/* Registered-teken rechtsboven het logo, met dezelfde maatvoering als op
   pechplan.nl: 0.94rem groot, 0.15rem vanaf de bovenkant, en de rechterrand
   0.32rem voorbij die van het logo.

   De positie hangt aan het logo en niet aan .navbar-brand: die is 160px breed
   terwijl het logo er op 36px hoogte 150px van vult (verhouding 283.46:68.03).
   Zonder die correctie van 10px zou het teken los naast het logo komen te
   hangen. Verandert de hoogte van de balk of het logobestand, dan moet dit
   getal mee.

   De kleur volgt --slate-100, dezelfde variabele die het portaal voor donkere
   tekst gebruikt: zwart in de lichte modus, licht in de donkere, passend bij de
   logovariant die op dat moment zichtbaar is. */
.navbar-brand .brand-r {
  position: absolute;
  top: 0.15rem;
  right: calc(160px - (36px * 283.46 / 68.03) - 0.32rem);
  font-size: 0.94rem;
  line-height: 1;
  font-weight: 500;
  color: var(--slate-100);
  pointer-events: none;
}

/* Dark mode: show dark logo, hide light logo */
.navbar-brand .brand-logo.logo-dark {
  opacity: 1;
}

.navbar-brand .brand-logo.logo-light {
  opacity: 0;
}

/* Light mode: show light logo, hide dark logo */
[data-theme="light"] .navbar-brand .brand-logo.logo-dark {
  opacity: 0;
}

[data-theme="light"] .navbar-brand .brand-logo.logo-light {
  opacity: 1;
}

/* Navbar menu */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  list-style: none;
}

.navbar-menu > li {
  flex: 0 0 auto;
}

.navbar-menu > li {
  position: relative;
}

.navbar-menu > li > a,
.navbar-menu > li > button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-md);
  color: var(--slate-300);
  font-size: 0.88rem;
  font-weight: 400;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}

.navbar-menu > li > a:hover,
.navbar-menu > li > button:hover,
.navbar-menu > li.active > a,
.navbar-menu > li.active > button {
  background: var(--slate-800);
  color: var(--slate-50);
}

.navbar-menu > li.active > a,
.navbar-menu > li.active > button {
  color: var(--amber-400);
}

/* Dropdown arrow */
.navbar-menu .dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--transition-fast);
}

.navbar-menu li:hover > .dropdown-toggle::after,
.navbar-menu li.dropdown-open > .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Dropdown menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--slate-850);
  border: 1px solid var(--slate-700);
  border-radius: var(--radius-lg);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  list-style: none;
}

.navbar-menu li:hover > .dropdown-menu,
.navbar-menu li.dropdown-open > .dropdown-menu,
.navbar-right li:hover > .dropdown-menu,
.navbar-right li.dropdown-open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--slate-300);
  font-size: var(--text-body);
  font-weight: 400;
  transition: all var(--transition-fast);
}

.dropdown-menu li a:hover {
  background: var(--slate-700);
  color: var(--slate-50);
}

.dropdown-menu .divider {
  height: 1px;
  background: var(--slate-700);
  margin: 0.35rem 0.5rem;
}

.dropdown-menu .menu-label {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-500);
}

/* Icons in menus */
.navbar-menu i,
.dropdown-menu i,
.navbar-right i {
  width: 18px;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Navbar right section */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  list-style: none;
}

.navbar-right > li {
  position: relative;
}

.navbar-right > li > a,
.navbar-right > li > button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--slate-300);
  font-size: 0.85rem;
  font-weight: 400;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.navbar-right > li > a:hover,
.navbar-right > li > button:hover {
  background: var(--slate-800);
  color: var(--slate-50);
}

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

.notification-badge {
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  position: absolute;
  top: 2px;
  right: 2px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--slate-600), var(--slate-700));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber-400);
  border: 2px solid var(--slate-600);
}

/* Hamburger */
.navbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

.navbar-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--slate-300);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.navbar-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.navbar-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--slate-900);
  border: 1px solid var(--slate-800);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--slate-700);
}

/* Verticale ritmiek tussen de blokken op een pagina.
   Bewust niet op .card zelf: binnen een raster (.stats-grid, .grid-2) regelt de
   gap de afstand al, en een marge erbovenop zou die rasters scheeftrekken.
   Daarom alleen blokken die rechtstreeks onder elkaar op de pagina staan --
   ook wanneer een formulier meerdere kaarten omsluit, zoals het vraagscherm. */
.page-content > .card,
.page-content > .table-wrapper,
.page-content > .alert,
.page-content > form > .card,
.page-content > form > .table-wrapper {
  margin-bottom: 1.5rem;
}

.page-content > :last-child,
.page-content > form > :last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--slate-800);
}

.card-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

/* Stat cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--slate-900);
  border: 1px solid var(--slate-800);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stat-accent, var(--amber-500));
}

.stat-card:hover {
  border-color: var(--slate-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card .stat-label {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.stat-card .stat-value {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--slate-50);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-card .stat-change {
  font-size: 0.78rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }

.stat-card .stat-icon {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.2rem;
  opacity: 0.08;
  color: var(--stat-accent, var(--amber-500));
}

/* ============================================
   TABLES
   ============================================ */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--slate-800);
  background: var(--slate-900);
}

.table-wrapper .table-toolbar {
  position: sticky;
  left: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}

thead {
  background: var(--slate-850);
}

thead th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-400);
  border-bottom: 1px solid var(--slate-800);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

thead th:hover {
  color: var(--slate-200);
}

thead th.sorted {
  color: var(--amber-400);
}

thead th .sort-icon {
  display: inline-block;
  margin-left: 0.3rem;
  opacity: 0.4;
  font-size: 0.7rem;
}

thead th.sorted .sort-icon {
  opacity: 1;
}

/* Server-side sort headers: the whole label is a link, so it must inherit the
   header's typography rather than the default link colour. */
.sort-header {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.sort-header:hover {
  color: var(--slate-200);
}

.sort-header--active {
  color: var(--amber-400);
}

.sort-header--active:hover {
  color: var(--amber-400);
}

.sort-header__icon {
  margin-left: 0.3rem;
  opacity: 0.4;
  font-size: 0.7rem;
}

.sort-header--active .sort-header__icon {
  opacity: 1;
}

tbody tr {
  border-bottom: 1px solid var(--slate-850);
  transition: background var(--transition-fast);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--slate-850);
}

tbody td {
  padding: 0.75rem 1rem;
  color: var(--slate-300);
  vertical-align: middle;
}

/* Pass-overview tables: month columns grouped two-deep (New / Extended).
   Fixed layout so every formula card lines its columns up identically, and
   non-sortable headers should not look clickable. */
.pass-overview-table {
  table-layout: fixed;
}

.pass-overview-table thead th {
  cursor: default;
  text-align: right;
  vertical-align: bottom;
}

.pass-overview-table thead th:hover {
  color: var(--slate-400);
}

.pass-overview-table thead th.col-garage {
  text-align: left;
  width: 30%;
}

.pass-overview-table thead th.col-group {
  text-align: center;
}

.pass-overview-table th.col-sep,
.pass-overview-table td.col-sep {
  border-left: 1px solid var(--slate-850);
}

.pass-overview-table td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pass-overview-table tfoot td {
  padding: 0.75rem 1rem;
  font-weight: 700;
  color: var(--slate-200);
  border-top: 2px solid var(--slate-800);
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: var(--info-bg); color: var(--info); }

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Table toolbar */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem;
  flex-wrap: wrap;
}

.table-toolbar .search-box {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}

.table-info {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--slate-800);
  font-size: var(--text-body);
  color: var(--slate-400);
}

/* Pagination */
.pagination {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}

.pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-700);
  background: transparent;
  color: var(--slate-300);
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.pagination button:hover {
  background: var(--slate-800);
  color: var(--slate-50);
}

.pagination button.active {
  background: var(--amber-500);
  color: var(--slate-950);
  border-color: var(--amber-500);
  font-weight: 700;
}

.pagination button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--slate-300);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

.form-group label .required {
  color: var(--danger);
  margin-left: 2px;
}

/* A field the browser has judged invalid, but only once it has been marked as
   touched: [aria-invalid] alone would paint every empty required field red the
   moment the page loads, which reads as a page full of mistakes the user has
   not made yet. The script sets the attribute on blur.

   :focus wins it back -- while someone is fixing the field, shouting at them
   about it is noise. */
input[aria-invalid="true"]:not(:focus),
select[aria-invalid="true"]:not(:focus),
textarea[aria-invalid="true"]:not(:focus) {
  border-color: var(--danger);
}

.field-error {
  display: block;
  font-size: 0.75rem;
  color: var(--danger);
  margin-top: 0.3rem;
}

/* Not scoped to .form-group: hints also sit under a checkbox label or beside a
   toggle, and there they would otherwise inherit the surrounding size and read
   as ordinary body text. */
.form-hint {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin-top: 0.3rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--slate-700);
  border-radius: var(--radius-md);
  background: var(--slate-850);
  color: var(--slate-100);
  font-family: var(--font-body);
  font-size: var(--text-body);
  transition: all var(--transition-fast);
  outline: none;
  color-scheme: dark;
}

input[type="time"],
input[type="datetime-local"],
input[type="date"] {
  min-height: 40px;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  color-scheme: light;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

input::placeholder,
textarea::placeholder {
  color: var(--slate-600);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a92b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

/* Checkbox & Radio

   One look for every tick box in the app. This is deliberately not scoped to a
   wrapper class: the same 18px amber box was being redeclared under half a
   dozen names (.form-check, .ci-checkbox-row, .ci-addon, .ci-agreement-row),
   while markup using .checkbox-label, .gi-option or .garage-option fell through
   to the browser default and looked nothing like the rest. Styling the input
   itself means new markup inherits the house style without opting in.

   The native control is kept -- appearance stays auto and accent-color does the
   colouring -- so focus rings, keyboard behaviour and the indeterminate state
   remain the browser's. Wrapper classes below only handle layout.

   The .toggle-switch pattern is a separate, deliberate control: it hides the
   input outright and draws its own track, in a rule further down. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: var(--amber-500);
  cursor: pointer;
  margin: 0;
  appearance: auto;
  -webkit-appearance: auto;
  padding: 0;
  box-shadow: none;

  /* Unchecked, the browser paints the box from the page's colour scheme, which
     on the dark theme comes out near-black and reads as a filled-in box rather
     than an empty one. Giving it the same grey as the other field backgrounds
     makes it look like something waiting to be ticked. Checked, accent-color
     takes over and paints it amber, so this only styles the empty state. */
  background-color: var(--slate-800);
  border: 1px solid var(--slate-700);
  border-radius: 4px;
  color-scheme: dark;
}

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

/* The tick and the dot are drawn by the browser on top of accent-color; our
   own background would show through around them, so it is dropped once the
   control is checked. */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: transparent;
  border-color: transparent;
}

input[type="checkbox"]:hover:not(:checked),
input[type="radio"]:hover:not(:checked) {
  border-color: var(--slate-600);
}

[data-theme="light"] input[type="checkbox"],
[data-theme="light"] input[type="radio"] {
  color-scheme: light;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  flex-wrap: nowrap;
}

.form-check label {
  display: inline;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--slate-300);
  margin-bottom: 0;
  cursor: pointer;
}

/* Toggle switch */
.toggle-switch,
.form-group label.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  margin-bottom: 0;
  font-size: var(--text-body);
  font-weight: 400;
  color: inherit;
  letter-spacing: normal;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 40px;
  min-width: 40px;
  height: 22px;
  border-radius: 99px;
  background: var(--slate-700);
  position: relative;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slate-300);
  transition: all var(--transition-fast);
}

.toggle-switch input:checked + .toggle-track {
  background: var(--amber-500);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(18px);
  background: var(--slate-950);
}

.toggle-label {
  font-size: var(--text-body);
  color: var(--slate-300);
}

/* Form grid */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Een filterbalk draagt korte keuzelijsten in plaats van invulvelden, dus die
   mogen smaller beginnen dan de 250px van een gewoon formulier: zo passen vijf
   filters naast elkaar. Nog steeds auto-fit, dus bij een smaller venster vouwen
   ze vanzelf terug naar minder kolommen -- de browserbreedte bepaalt het aantal,
   niet een vast getal. */
.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
}

/* De onderrand van een filterblok: keuzevakjes links, knoppen rechtsonder. De
   knoppen blijven rechts staan ook wanneer de vakjes ervoor op een smaller
   scherm terugvouwen, zodat je ze altijd op dezelfde plek zoekt. */
.filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}

.filter-actions .filter-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.filter-actions .filter-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
  color: var(--slate-950);
  border-color: var(--amber-500);
  box-shadow: 0 2px 8px var(--amber-glow-strong);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--amber-400), var(--amber-500));
  box-shadow: 0 4px 16px var(--amber-glow-strong);
  transform: translateY(-1px);
  color: var(--slate-950);
}

.btn-secondary {
  background: var(--slate-800);
  color: var(--slate-200);
  border-color: var(--slate-700);
}

.btn-secondary:hover {
  background: var(--slate-700);
  color: var(--slate-50);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.btn-danger:hover {
  background: #d93a58;
  box-shadow: 0 4px 16px rgba(239, 69, 101, 0.3);
}

.btn-ghost {
  background: transparent;
  color: var(--slate-300);
  border-color: var(--slate-700);
}

.btn-ghost:hover {
  background: var(--slate-800);
  color: var(--slate-50);
}

.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
}

.btn-icon {
  padding: 0.5rem;
  min-width: 36px;
}

/* Button group */
.btn-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ============================================
   GRID LAYOUTS
   ============================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.grid-sidebar {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.grid-sidebar > .card {
  display: flex;
  flex-direction: column;
}

.grid-sidebar > .card .chart-container,
.grid-sidebar > .card .activity-list {
  flex: 1;
}

.grid-sidebar > .card .bar-chart {
  height: 100%;
  min-height: 220px;
}

/* ============================================
   CHARTS (CSS-only bar chart)
   ============================================ */
.chart-container {
  padding: 0.5rem 0;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 220px;
  padding-top: 1rem;
}

.bar-chart .bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  justify-content: flex-end;
}

.bar-chart .bar {
  width: 100%;
  max-width: 60px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, var(--amber-400), var(--amber-600));
  transition: all var(--transition-slow);
  position: relative;
  min-height: 4px;
  animation: barGrow 0.8s ease-out both;
}

.bar-chart .bar:hover {
  opacity: 0.85;
  transform: scaleY(1.02);
  transform-origin: bottom;
}

.bar-chart .bar-label {
  font-size: 0.68rem;
  color: var(--slate-500);
  font-weight: 400;
}

.bar-chart .bar-value {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--slate-400);
  font-weight: 400;
}

@keyframes barGrow {
  from { height: 0 !important; }
}

/* Mini sparkline-style list */
.activity-list {
  list-style: none;
}

.activity-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--slate-850);
  font-size: var(--text-body);
}

.activity-list li:last-child {
  border-bottom: none;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.activity-list .activity-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--slate-500);
  margin-left: auto;
  flex-shrink: 0;
}

/* Progress bar */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--slate-800);
  border-radius: 99px;
  overflow: hidden;
}

.progress-bar .progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--amber-500), var(--amber-400));
  transition: width 1s ease;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-page {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

/* Het neutrale inlogscherm, voor elke huisstijl zonder eigen behandeling.
   PechPlan krijgt verderop zijn eigen groene variant. */
.login-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
}

.login-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, var(--amber-glow) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(76, 168, 232, 0.05) 0%, transparent 50%);
}

.login-right {
  flex: 1;
  background: var(--slate-900);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--slate-800);
}

.login-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      var(--slate-850) 40px,
      var(--slate-850) 41px
    );
  opacity: 0.5;
}

.login-right-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
  max-width: 400px;
}

.login-right-content .brand-icon-lg {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--slate-950);
  transform: rotate(-3deg);
  box-shadow: var(--shadow-glow);
  margin-bottom: 1.5rem;
}

.login-right-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.login-right-content p {
  color: var(--slate-400);
  font-size: 0.92rem;
  line-height: 1.6;
}

.login-box {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}

/* Login logo above form */
.login-logo {
  position: relative;
  height: 40px;
  width: 180px;
  margin-bottom: 2rem;
}

.login-logo .brand-logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
}

.login-logo .brand-logo.logo-dark { opacity: 1; }
.login-logo .brand-logo.logo-light { opacity: 0; }
[data-theme="light"] .login-logo .brand-logo.logo-dark { opacity: 0; }
[data-theme="light"] .login-logo .brand-logo.logo-light { opacity: 1; }

/* Login right branding logo */
.login-logo-right {
  margin-bottom: 1.5rem;
}

.login-logo-right img {
  height: 50px;
  width: auto;
}

/* ==========================================================================
   PechPlan-inlogscherm

   Alles hieronder hangt aan [data-brand="pechplan"] op <html>, dat volgt uit de
   huisstijl van de site. Een kennisbank met een andere huisstijl houdt het
   neutrale inlogscherm hierboven.

   De kleuren komen van pechplan.nl: #121c18 is daar --color-pech-green-dark,
   de gloed gebruikt --color-pech-green-bright (#3f8367) en -pale (#6fc7a7).
   ========================================================================== */

/* Donkere modus: één groen vlak in plaats van grijs met een oranje waas. */
[data-brand="pechplan"] .login-left {
  background: #121c18;
}

[data-brand="pechplan"] .login-left::before {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(63, 131, 103, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(111, 199, 167, 0.06) 0%, transparent 50%);
}

/* Geen scheidslijn en geen diagonale arcering: het logo is hier het enige
   beeldelement en de arcering concurreerde daarmee. */
[data-brand="pechplan"] .login-right {
  background: #121c18;
  border-left: none;
}

[data-brand="pechplan"] .login-right::before {
  content: none;
}

/* Lichte modus: het groen is voorbehouden aan de donkere modus. Hier een licht
   vlak met de logovariant waarin "Pech" zwart is, en geen gekleurde waas. */
[data-theme="light"][data-brand="pechplan"] .login-left {
  background: transparent;
}

[data-theme="light"][data-brand="pechplan"] .login-left::before {
  background: none;
}

[data-theme="light"][data-brand="pechplan"] .login-right {
  background: var(--slate-850);
  border-left: none;
}

[data-theme="light"][data-brand="pechplan"] .login-right .login-right-content h2 {
  color: var(--slate-100);
}

[data-theme="light"][data-brand="pechplan"] .login-right .login-right-content p {
  color: var(--slate-500);
}

/* Het logovlak is precies zo groot als het logo (verhouding 283.46:68.03 uit het
   bestand), zodat het registered-teken aan de rechterrand van het logo hangt en
   niet aan het midden van de kolom. */
[data-brand="pechplan"] .login-logo-right {
  --logo-hoogte: 50px;
  position: relative;
  display: inline-block;
  height: var(--logo-hoogte);
  width: calc(var(--logo-hoogte) * 283.46 / 68.03);
}

[data-brand="pechplan"] .login-logo-right img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  transition: opacity 1s ease;
}

[data-brand="pechplan"] .login-logo-right .logo-dark {
  opacity: 1;
}

[data-brand="pechplan"] .login-logo-right .logo-light {
  opacity: 0;
}

[data-theme="light"][data-brand="pechplan"] .login-logo-right .logo-dark {
  opacity: 0;
}

[data-theme="light"][data-brand="pechplan"] .login-logo-right .logo-light {
  opacity: 1;
}

/* Exact dezelfde verhouding als in de navigatiebalk: daar is het teken 0.94rem
   bij een logo van 36px hoog, 0.15rem vanaf de bovenkant, met de rechterrand
   0.32rem voorbij het logo. Hier als fractie van de logohoogte, zodat het bij
   50px hetzelfde oogt en meeschaalt als --logo-hoogte verandert. */
[data-brand="pechplan"] .login-logo-right .brand-r {
  position: absolute;
  top: calc(var(--logo-hoogte) * 0.0667);
  right: calc(var(--logo-hoogte) * -0.1422);
  font-size: calc(var(--logo-hoogte) * 0.4178);
  line-height: 1;
  font-weight: 500;
  color: #fff;
  pointer-events: none;
}

[data-theme="light"][data-brand="pechplan"] .login-logo-right .brand-r {
  /* Dezelfde zwarttint als de "Pech" in de lichte logovariant. */
  color: #1d1d1b;
}

/* De knop staat op een gekleurd vlak; witte tekst en een wit icoon lezen daar
   rustiger dan de donkere tekst die de knop elders draagt. */
[data-brand="pechplan"] .login-page .btn-primary,
[data-brand="pechplan"] .login-page .btn-primary:hover {
  color: #fff;
}

/* De invoervelden dragen elders een warm grijs; op het groen leest dat als een
   bruine vlek. Hier dezelfde groenfamilie als het vlak eronder. */
[data-brand="pechplan"] .login-page input[type="text"],
[data-brand="pechplan"] .login-page input[type="email"],
[data-brand="pechplan"] .login-page input[type="password"],
[data-brand="pechplan"] .login-page input[type="search"],
[data-brand="pechplan"] .login-page textarea,
[data-brand="pechplan"] .login-page select {
  background: rgba(43, 68, 58, 0.5);
  border-color: rgba(111, 199, 167, 0.18);
}

[data-brand="pechplan"] .login-page input[type="text"]:focus,
[data-brand="pechplan"] .login-page input[type="email"]:focus,
[data-brand="pechplan"] .login-page input[type="password"]:focus,
[data-brand="pechplan"] .login-page input[type="search"]:focus {
  background: rgba(43, 68, 58, 0.75);
}

[data-theme="light"][data-brand="pechplan"] .login-page input[type="text"],
[data-theme="light"][data-brand="pechplan"] .login-page input[type="email"],
[data-theme="light"][data-brand="pechplan"] .login-page input[type="password"],
[data-theme="light"][data-brand="pechplan"] .login-page input[type="search"],
[data-theme="light"][data-brand="pechplan"] .login-page textarea,
[data-theme="light"][data-brand="pechplan"] .login-page select {
  background: #ffffff;
  border-color: #d4d0ca;
}

.login-box h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
}

.login-box .login-subtitle {
  color: var(--slate-400);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.login-box .form-group {
  margin-bottom: 1.1rem;
}

.login-box .form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: var(--text-body);
}

.login-box .btn-primary {
  width: 100%;
  padding: 0.7rem;
  font-size: 0.95rem;
}

/* ============================================
   UTILITIES
   ============================================ */
.text-muted { color: var(--slate-500); }
.text-amber { color: var(--amber-400); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-mono { font-family: var(--font-mono); }
.text-sm { font-size: var(--text-body); }
.text-xs { font-size: 0.72rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* Table action buttons */
.table-actions {
  display: flex;
  gap: 0.35rem;
}

.table-actions .btn-sm {
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
}

/* Alert box */
.alert {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid transparent;
}

.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(52,199,123,0.2); }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,69,101,0.2); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--amber-glow-strong); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: rgba(76,168,232,0.2); }

/* --- Floating flash messages ---
   Confirmation stays in view wherever the action happened, rather than
   scrolling back to the top of the page to find out what changed. */
.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast-stack .toast {
  margin-bottom: 0;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  /* The alert backgrounds are translucent, so the page would otherwise show
     through a floating one. Same surface the cards use, in both themes. */
  background-color: var(--slate-900);
  background-image: linear-gradient(var(--toast-tint, transparent), var(--toast-tint, transparent));
  animation: toastIn 0.22s ease-out both;
}

.toast-stack .toast.alert-success { --toast-tint: var(--success-bg); }
.toast-stack .toast.alert-danger { --toast-tint: var(--danger-bg); }

.toast-stack .toast.is-leaving {
  opacity: 0;
  transform: translateX(0.75rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 640px) {
  .toast-stack { left: 1rem; right: 1rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toast-stack .toast { animation: none; }
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-body);
  margin-bottom: 1.25rem;
  color: var(--slate-500);
}

.breadcrumb a { color: var(--slate-400); }
.breadcrumb a:hover { color: var(--amber-400); }
.breadcrumb .separator { color: var(--slate-700); }
.breadcrumb .current { color: var(--slate-200); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-sidebar { grid-template-columns: 1fr; }
}

/* Portrait tablet: hide the navbar logo to give the menu more room. The logo
   stays visible on desktop (> 1024px) and on mobile (<= 768px, where the
   hamburger menu takes over). */
@media (min-width: 769px) and (max-width: 1280px) {
  .navbar-brand {
    display: none;
  }
}

@media (max-width: 768px) {
  html { font-size: 14px; }

  .navbar-hamburger {
    display: flex;
  }

  /* Hide original menus on mobile */
  .navbar-menu,
  .navbar-right {
    display: none !important;
  }

  /* Prevent body scroll when menu is open */
  body.mobile-menu-open {
    overflow: hidden;
  }

  .page-content {
    padding: 1.25rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-toolbar .search-box {
    max-width: 100%;
  }

  /* Login responsive */
  .login-page {
    flex-direction: column;
  }

  .login-right {
    display: none;
  }

  .login-left {
    min-height: 100vh;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-row,
  .filter-row {
    grid-template-columns: 1fr;
  }

  /* Responsive stacked tables */
  .table-wrapper {
    overflow-x: visible;
    border: none;
    background: transparent;
    border-radius: 0;
  }

  .table-wrapper .table-toolbar {
    position: static;
  }

  table:not([role="presentation"]),
  table:not([role="presentation"]) thead,
  table:not([role="presentation"]) tbody,
  table:not([role="presentation"]) tr,
  table:not([role="presentation"]) th,
  table:not([role="presentation"]) td {
    display: block;
    width: auto;
  }

  table:not([role="presentation"]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table:not([role="presentation"]) tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    border: 1px solid var(--slate-800);
    border-radius: var(--radius-lg);
    background: var(--slate-900);
    padding: 0.5rem 0.25rem;
  }

  table:not([role="presentation"]) tbody tr:last-child {
    margin-bottom: 0;
  }

  table:not([role="presentation"]) tbody tr:hover {
    background: var(--slate-900);
  }

  table:not([role="presentation"]) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--slate-850);
    text-align: right;
    min-height: 2.25rem;
    white-space: normal;
    word-break: break-word;
  }

  table:not([role="presentation"]) tbody td:last-child {
    border-bottom: none;
  }

  table:not([role="presentation"]) tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-400);
    text-align: left;
    flex-shrink: 0;
  }

  table:not([role="presentation"]) tbody td:not([data-label])::before {
    content: "";
    display: none;
  }

  table:not([role="presentation"]) tbody td:not([data-label]) {
    justify-content: flex-end;
  }

  table:not([role="presentation"]) tbody td .table-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .page-header h1 { font-size: 1.4rem; }
  .stat-card .stat-value { font-size: 1.4rem; }
}

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ============================================
   MOBILE PANEL (injected by JS)
   ============================================ */
#mobilePanel {
  display: none;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--slate-900);
  z-index: 999;
  overflow-y: auto;
  flex-direction: column;
  padding: 0;
}

[data-theme="light"] #mobilePanel {
  background: #fff;
}

#mobilePanel.open {
  display: flex;
}

#mobilePanel .mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.15rem;
  flex: 1;
}

#mobilePanel .mobile-nav-list > li {
  position: relative;
}

#mobilePanel .mobile-nav-list > li > a,
#mobilePanel .mobile-nav-list > li > button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  color: var(--slate-300);
  font-size: 1rem;
  font-weight: 400;
  transition: background var(--transition-fast);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  width: 100%;
  text-align: left;
}

#mobilePanel .mobile-nav-list > li > a:hover,
#mobilePanel .mobile-nav-list > li > button:hover {
  background: var(--slate-800);
  color: var(--slate-50);
}

#mobilePanel .mobile-nav-list > li.active > a {
  color: var(--amber-500);
  background: var(--slate-850);
}

/* Dropdown in mobile panel */
#mobilePanel .dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: auto;
  transition: transform var(--transition-fast);
}

#mobilePanel .dropdown-open > .dropdown-toggle::after {
  transform: rotate(180deg);
}

#mobilePanel .dropdown-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  background: var(--slate-850);
  margin: 0.25rem 0 0 1.5rem;
  padding: 0.25rem;
  display: none;
  border-radius: var(--radius-md);
  min-width: auto;
}

[data-theme="light"] #mobilePanel .dropdown-menu {
  background: var(--slate-850);
}

#mobilePanel .dropdown-open > .dropdown-menu {
  display: block;
}

#mobilePanel .dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--slate-300);
  font-size: var(--text-body);
}

#mobilePanel .dropdown-menu li a:hover {
  background: var(--slate-700);
  color: var(--slate-50);
}

#mobilePanel .dropdown-menu .divider {
  height: 1px;
  background: var(--slate-700);
  margin: 0.25rem 0.5rem;
}

#mobilePanel .dropdown-menu .menu-label {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-500);
}

/* Right section (theme, notifications, user) */
#mobilePanel .mobile-nav-right {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem 1rem;
  gap: 0.15rem;
  border-top: 1px solid var(--slate-800);
}

#mobilePanel .mobile-nav-right > li {
  position: relative;
}

#mobilePanel .mobile-nav-right > li > a,
#mobilePanel .mobile-nav-right > li > button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  color: var(--slate-300);
  font-size: 0.95rem;
  font-weight: 400;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  width: 100%;
  text-align: left;
  transition: background var(--transition-fast);
}

#mobilePanel .mobile-nav-right > li > a:hover,
#mobilePanel .mobile-nav-right > li > button:hover {
  background: var(--slate-800);
  color: var(--slate-50);
}

#mobilePanel .mobile-nav-right .notification-badge {
  position: static;
  display: inline-flex;
  margin-left: 0.25rem;
}

#mobilePanel .mobile-nav-right .dropdown-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  background: var(--slate-850);
  margin: 0.25rem 0 0 1.5rem;
  padding: 0.25rem;
  display: none;
  border-radius: var(--radius-md);
  right: auto;
  left: 0;
  min-width: auto;
}

#mobilePanel .mobile-nav-right .dropdown-open > .dropdown-menu {
  display: block;
}

/* ============================================
   MODAL
   ============================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.modal-backdrop.open {
  display: flex;
  opacity: 1;
}

[data-theme="light"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.modal {
  background: var(--slate-900);
  border: 1px solid var(--slate-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(-8px);
  transition: transform var(--transition-base);
}

[data-theme="light"] .modal {
  background: #ffffff;
  border-color: var(--slate-800);
}

.modal-backdrop.open .modal {
  transform: translateY(0);
}

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

.modal-header h3 {
  font-size: 1rem;
  margin: 0;
  color: var(--slate-50);
}

.modal-close {
  background: none;
  border: none;
  color: var(--slate-500);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem;
  line-height: 1;
}

.modal-close:hover {
  color: var(--slate-200);
}

.modal-body {
  padding: 1.5rem;
  color: var(--slate-300);
  font-size: var(--text-body);
  line-height: 1.6;
}

.modal-body p {
  margin: 0 0 0.75rem;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--slate-800);
}