/* Huisstijl van LSR: letterlijk uit lsr-bouwblokken, packages/platform/huisstijl-en-componenten/src/,
   in de volgorde tokens, theme, components. Alleen het lichte thema: loketsocialreturn.nl heeft geen
   donkere modus, en deze app volgt die site. Bijwerken: kopieer de drie bestanden opnieuw en haal
   de donkere blokken weg. Wat deze app afwijkend doet staat in app.css, niet hier. */

/* ===========================================================
   @lsr/huisstijl-en-componenten , ruwe design tokens
   Bron: Brand Book v2.0.
   - Kleuren: lsr-ai-systeem/references/huisstijl-tokens.csv +
     huisstijl-tokens-aanvulling.csv (Figma-export).
   - Spacing/radius/schaduw/layout/motion: het vaste blok uit
     lsr-ai-systeem/tools/huisstijl-tokens-toevoegen.ps1.

   Dit zijn de ruwe paletwaarden uit Figma; ze veranderen niet
   tussen licht en donker. Voor thema-afhankelijke rollen
   (achtergrond, tekst, rand, primaire actie) zie theme.css.
   =========================================================== */
:root {
  /* Merkkleuren */
  --color-brand-navy: #203050;
  --color-brand-navy-700: #1a2742;
  --color-brand-navy-900: #131d33;
  --color-brand-blue: #4070b0;
  --color-brand-blue-600: #35608f;
  --color-brand-sky: #a8d8f0;
  --color-brand-sky-300: #c8e6f6;
  --color-brand-sky-100: #eaf5fc;

  /* Neutraal */
  --color-neutral-white: #ffffff;
  --color-neutral-gray-50: #f6f8fb;
  --color-neutral-gray-100: #eef1f6;
  --color-neutral-gray-200: #e0e5ee;
  --color-neutral-gray-300: #c9d1de;
  --color-neutral-gray-400: #a4afc1;
  --color-neutral-gray-500: #7a8699;
  --color-neutral-gray-600: #5a6577;
  --color-neutral-gray-700: #41495a;
  --color-neutral-gray-800: #2b3242;
  --color-neutral-gray-900: #1a1f2b;

  /* Semantiek, ruwe waarden */
  --color-semantic-success: #2f9e6b;
  --color-semantic-success-bg: #e6f5ee;
  --color-semantic-warning: #e0a23a;
  --color-semantic-warning-bg: #fbf2e1;
  --color-semantic-warning-text: #9a6c14;
  --color-semantic-danger: #d64b4b;
  --color-semantic-danger-bg: #fbe9e9;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Schaduw */
  --shadow-xs: 0 1px 2px rgba(32, 48, 80, 0.06);
  --shadow-sm: 0 2px 6px rgba(32, 48, 80, 0.08);
  --shadow-md: 0 8px 20px rgba(32, 48, 80, 0.1);
  --shadow-lg: 0 18px 40px rgba(32, 48, 80, 0.14);
  --shadow-focus: 0 0 0 3px rgba(64, 112, 176, 0.35);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --header-height: 80px;
  --grid-columns: 12;
  --grid-gutter: 24px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ===========================================================
   @lsr/huisstijl-en-componenten , themarollen
   Vertaalt de ruwe tokens (tokens.css) naar rollen die van kleur
   wisselen tussen licht en donker: achtergrond, oppervlak,
   tekst, rand, primaire/secundaire actie, semantische vlakken.

   Drie standen, in deze volgorde zodat een expliciete keuze in
   beide richtingen wint:
   1. Licht , de volledige set op :root.
   2. "Volg het systeem" , herdefinitie in een
      prefers-color-scheme-blok, alleen als er geen expliciete
      keuze is gezet ([data-theme] ontbreekt of staat op "light").
   3. Expliciete keuze , [data-theme="dark"] herdefinieert de
      rollen nogmaals, buiten het media-blok.
   Zie useTheme.ts/ThemeSwitcher.tsx voor hoe [data-theme] gezet
   wordt. Geef een rol nooit alleen een waarde binnen het
   media-blok: dan wint een expliciete keuze niet.
   =========================================================== */
:root {
  --color-bg: var(--color-neutral-white);
  --color-surface: var(--color-neutral-gray-50);
  --color-surface-raised: var(--color-neutral-white);
  --color-border: var(--color-neutral-gray-200);
  --color-text: var(--color-neutral-gray-900);
  --color-text-muted: var(--color-neutral-gray-600);

  --color-primary: var(--color-brand-blue);
  --color-primary-hover: var(--color-brand-blue-600);
  --color-primary-text: var(--color-neutral-white);
  --color-secondary: var(--color-neutral-gray-100);
  --color-secondary-hover: var(--color-neutral-gray-200);
  --color-secondary-text: var(--color-brand-navy);
  --color-danger: var(--color-semantic-danger);
  --color-danger-hover: #b93e3e;
  --color-danger-text: var(--color-neutral-white);

  --color-success-bg: var(--color-semantic-success-bg);
  --color-success-text: var(--color-semantic-success);
  --color-warning-bg: var(--color-semantic-warning-bg);
  --color-warning-text: var(--color-semantic-warning-text);
  --color-danger-bg: var(--color-semantic-danger-bg);
  --color-danger-text-subtle: var(--color-semantic-danger);

  --color-focus-ring: var(--shadow-focus);
}





body {
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}

/* ===========================================================
   @lsr/huisstijl-en-componenten , componenten
   Knop, formuliervelden, badge, tabel en de themaschakelaar,
   gebouwd op de tokens uit tokens.css en de rollen uit theme.css.
   =========================================================== */

.lsr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.lsr-btn:focus-visible {
  outline: none;
  box-shadow: var(--color-focus-ring);
}

.lsr-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.lsr-btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: 0.8125rem;
}
.lsr-btn--md {
  padding: var(--space-2) var(--space-4);
  font-size: 0.9375rem;
}
.lsr-btn--lg {
  padding: var(--space-3) var(--space-5);
  font-size: 1rem;
}

.lsr-btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.lsr-btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.lsr-btn--secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}
.lsr-btn--secondary:hover:not(:disabled) {
  background: var(--color-secondary-hover);
}

.lsr-btn--danger {
  background: var(--color-danger);
  color: var(--color-danger-text);
}
.lsr-btn--danger:hover:not(:disabled) {
  background: var(--color-danger-hover);
}

.lsr-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.lsr-field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.lsr-field__input,
.lsr-field__select {
  font-family: inherit;
  font-size: 0.9375rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.lsr-field__input:focus-visible,
.lsr-field__select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--color-focus-ring);
}

.lsr-field--error .lsr-field__input,
.lsr-field--error .lsr-field__select {
  border-color: var(--color-danger);
}

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

.lsr-field__error {
  font-size: 0.8125rem;
  color: var(--color-danger);
  margin: 0;
}

.lsr-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}
.lsr-badge--neutral {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}
.lsr-badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.lsr-badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.lsr-badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text-subtle);
}

.lsr-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.lsr-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-raised);
}

.lsr-table__header {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
}

.lsr-table__header--sortable {
  cursor: pointer;
  user-select: none;
}
.lsr-table__header--sortable:hover {
  color: var(--color-text);
}

.lsr-table__cell {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.9375rem;
}

.lsr-table__row:last-child .lsr-table__cell {
  border-bottom: none;
}

.lsr-table__empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.lsr-theme-switcher {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  gap: var(--space-1);
  background: var(--color-surface);
}

.lsr-theme-switcher__option {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.lsr-theme-switcher__option--active {
  background: var(--color-primary);
  color: var(--color-primary-text);
}