*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --font-display: "Fraunces", serif;
    --font-body: "General Sans", sans-serif;
    --font-mono: "Geist Mono", monospace;
    --radius: 0.625rem;

    /* Warm paper base — calm, archival, not sterile white */
    --background: 0.975 0.006 95;
    --foreground: 0.235 0.018 190;
    --card: 0.995 0.003 95;
    --card-foreground: 0.235 0.018 190;
    --popover: 0.995 0.003 95;
    --popover-foreground: 0.235 0.018 190;

    /* Deep slate-teal — settled, civic, trustworthy (not corporate navy) */
    --primary: 0.42 0.062 187;
    --primary-foreground: 0.975 0.006 95;

    --secondary: 0.945 0.008 185;
    --secondary-foreground: 0.3 0.02 190;
    --muted: 0.945 0.008 185;
    --muted-foreground: 0.5 0.014 190;

    /* Warm brass accent — the building's entrance plaque */
    --accent: 0.68 0.115 72;
    --accent-foreground: 0.22 0.03 72;

    --destructive: 0.53 0.19 27;
    --destructive-foreground: 0.975 0.006 95;

    --success: 0.55 0.13 155;
    --success-foreground: 0.975 0.006 95;
    --warning: 0.72 0.14 78;
    --warning-foreground: 0.22 0.03 78;

    --border: 0.895 0.009 185;
    --input: 0.895 0.009 185;
    --ring: 0.42 0.062 187;

    --chart-1: 0.42 0.062 187;
    --chart-2: 0.68 0.115 72;
    --chart-3: 0.58 0.09 235;
    --chart-4: 0.55 0.13 155;
    --chart-5: 0.6 0.11 320;

    --sidebar: 0.955 0.007 185;
    --sidebar-foreground: 0.235 0.018 190;
    --sidebar-primary: 0.42 0.062 187;
    --sidebar-primary-foreground: 0.975 0.006 95;
    --sidebar-accent: 0.92 0.012 185;
    --sidebar-accent-foreground: 0.3 0.02 190;
    --sidebar-border: 0.895 0.009 185;
    --sidebar-ring: 0.42 0.062 187;

    /* Gradients & effects */
    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.42 0.062 187),
      oklch(0.36 0.055 195)
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.975 0.006 95),
      oklch(0.955 0.008 185)
    );
    --gradient-plaque: linear-gradient(
      90deg,
      oklch(0.68 0.115 72),
      oklch(0.6 0.1 62)
    );
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Inline-editable admin value — a soft brass-tinted well that reads as
       "this figure can be changed" without shouting. Reuses existing hues. */
    --editable-surface: 0.965 0.012 78;
    --editable-border: 0.85 0.03 76;
    --editable-ring: 0.68 0.115 72;

    /* Maatregelen measure rows — the requested light green, RGB 190 226 203,
       exactly matching the Bouwelementen cards. Converted to OKLCH:
       sRGB 190,226,203 -> linear -> OKLab -> oklch(0.880 0.049 157.2)
       (verified with an sRGB -> OKLab -> sRGB round-trip). Scoped to this
       page only; the global --primary stays deep slate-teal. */
    --measure-surface: 0.88 0.049 157.2;
    --measure-surface-hover: 0.845 0.058 157.2;
    --measure-surface-foreground: 0.26 0.06 158;
    --measure-surface-muted: 0.42 0.055 158;
    --measure-chip: 0.78 0.1 155;

    /* Maatregelen action buttons (toevoegen, bewerken, opslaan, annuleren) —
       the same requested light green, RGB 190 226 203 -> oklch(0.880 0.049
       157.2). The hover/border steps are derived from that exact base. */
    --measure-action: 0.88 0.049 157.2;
    --measure-action-hover: 0.845 0.058 157.2;
    --measure-action-foreground: 0.26 0.06 158;
    --measure-action-border: 0.83 0.052 157.2;

    /* Maatregelen > 10 jaar vooruit: neutral grey variant. Same lightness and
       chroma structure as the green tokens above, but chroma 0 — a quiet,
       achromatic slate that still belongs to the warm-paper system. Hue is
       dropped entirely (0) so the row reads as "later / not yet relevant"
       rather than as a second accent colour. The surface token is named
       --measure-surface-muted-surface so it never collides with the
       pre-existing green meta-text token --measure-surface-muted above. */
    --measure-surface-muted-surface: 0.88 0 0;
    --measure-surface-muted-hover: 0.845 0 0;
    --measure-surface-muted-foreground: 0.26 0 0;
    --measure-surface-muted-meta: 0.42 0 0;
    --measure-chip-muted: 0.78 0 0;

    --measure-action-muted: 0.88 0 0;
    --measure-action-muted-hover: 0.845 0 0;
    --measure-action-muted-foreground: 0.26 0 0;
    --measure-action-muted-border: 0.83 0 0;

    --measure-border-muted: 0.845 0 0;

    /* Decompositie > Bouwelementen: the element cards are buttons too, so they
       carry the same requested light green (RGB 190 226 203 -> oklch(0.880
       0.049 157.2)). Scoped to this page only; the global --primary stays deep
       slate-teal for every other page. */
    --decompositie-action: 0.88 0.049 157.2;
    --decompositie-action-hover: 0.845 0.058 157.2;
    --decompositie-action-foreground: 0.26 0.06 158;
    --decompositie-action-border: 0.83 0.052 157.2;

    /* Neutral media placeholder behind missing logbook/relation photos. */
    --media-placeholder: 0.93 0.007 185;
    --media-placeholder-foreground: 0.6 0.014 190;

    /* Algemeen > Leden: table-specific surfaces. Additive, same hues as the
       rest of the app — a slightly raised header band and a whisper-quiet
       zebra stripe, so the table reads as an official register. */
    --table-header: 0.955 0.008 185;
    --table-row-alt: 0.968 0.006 185;
    --table-row-hover: 0.945 0.012 78;
    --table-cell-divider: 0.925 0.009 185;
    --table-yes: 0.55 0.13 155;
    --table-no: 0.62 0.012 190;

    /* Onderhoud > Garanties: page-scoped surfaces for the warranty card-buttons.
       The buttons themselves stay dark green (the global --primary), so no new
       button colour is introduced here — only the supporting surfaces the list
       needs: a quiet certificate well and a neutral missing-certificate state.
       Additive, same hues as the rest of the warm-paper system. */
    --garantie-cert-surface: 0.955 0.008 185;
    --garantie-cert-border: 0.895 0.009 185;
    --garantie-cert-foreground: 0.42 0.062 187;
    --garantie-missing-border: 0.86 0.012 185;
    --garantie-missing-foreground: 0.5 0.014 190;
  }

  .dark {
    /* Deep slate-teal charcoal — calm evening archive */
    --background: 0.185 0.014 195;
    --foreground: 0.93 0.008 95;
    --card: 0.225 0.016 195;
    --card-foreground: 0.93 0.008 95;
    --popover: 0.245 0.016 195;
    --popover-foreground: 0.93 0.008 95;

    --primary: 0.72 0.085 183;
    --primary-foreground: 0.185 0.014 195;

    --secondary: 0.265 0.018 195;
    --secondary-foreground: 0.88 0.008 95;
    --muted: 0.265 0.018 195;
    --muted-foreground: 0.63 0.012 190;

    --accent: 0.76 0.12 74;
    --accent-foreground: 0.185 0.014 74;

    --destructive: 0.62 0.17 25;
    --destructive-foreground: 0.185 0.014 25;

    --success: 0.68 0.13 155;
    --success-foreground: 0.185 0.014 155;
    --warning: 0.78 0.13 80;
    --warning-foreground: 0.185 0.014 80;

    --border: 0.3 0.018 195;
    --input: 0.3 0.018 195;
    --ring: 0.72 0.085 183;

    --chart-1: 0.72 0.085 183;
    --chart-2: 0.76 0.12 74;
    --chart-3: 0.66 0.1 235;
    --chart-4: 0.68 0.13 155;
    --chart-5: 0.7 0.11 320;

    --sidebar: 0.225 0.016 195;
    --sidebar-foreground: 0.93 0.008 95;
    --sidebar-primary: 0.72 0.085 183;
    --sidebar-primary-foreground: 0.185 0.014 195;
    --sidebar-accent: 0.265 0.018 195;
    --sidebar-accent-foreground: 0.88 0.008 95;
    --sidebar-border: 0.3 0.018 195;
    --sidebar-ring: 0.72 0.085 183;

    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.72 0.085 183),
      oklch(0.62 0.075 195)
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.185 0.014 195),
      oklch(0.215 0.016 195)
    );
    --gradient-plaque: linear-gradient(
      90deg,
      oklch(0.76 0.12 74),
      oklch(0.66 0.1 64)
    );

    --editable-surface: 0.265 0.022 76;
    --editable-border: 0.4 0.035 74;
    --editable-ring: 0.76 0.12 74;

    /* Maatregelen measure rows — the same light green as the Bouwelementen
       cards in dark mode, so both pages stay consistent in both themes. */
    --measure-surface: 0.72 0.085 155;
    --measure-surface-hover: 0.78 0.09 155;
    --measure-surface-foreground: 0.2 0.05 158;
    --measure-surface-muted: 0.32 0.05 158;
    --measure-chip: 0.6 0.1 155;

    /* Maatregelen action buttons — the same light green as the Bouwelementen
       cards in dark mode. */
    --measure-action: 0.72 0.085 155;
    --measure-action-hover: 0.78 0.09 155;
    --measure-action-foreground: 0.2 0.05 158;
    --measure-action-border: 0.8 0.075 155;

    /* Maatregelen > 10 jaar vooruit: neutral grey variant, tuned for the dark
       archive. Mirrors the green lightness/chroma structure with chroma 0 so
       the far-future rows recede instead of glowing. The surface token is
       named --measure-surface-muted-surface so it never collides with the
       pre-existing green meta-text token --measure-surface-muted above. */
    --measure-surface-muted-surface: 0.72 0 0;
    --measure-surface-muted-hover: 0.78 0 0;
    --measure-surface-muted-foreground: 0.2 0 0;
    --measure-surface-muted-meta: 0.32 0 0;
    --measure-chip-muted: 0.6 0 0;

    --measure-action-muted: 0.72 0 0;
    --measure-action-muted-hover: 0.78 0 0;
    --measure-action-muted-foreground: 0.2 0 0;
    --measure-action-muted-border: 0.8 0 0;

    --measure-border-muted: 0.78 0 0;

    /* Decompositie > Bouwelementen: light-green element cards, tuned for the
       dark archive so they still read as lighter than the dark card surface. */
    --decompositie-action: 0.72 0.085 155;
    --decompositie-action-hover: 0.78 0.09 155;
    --decompositie-action-foreground: 0.2 0.05 158;
    --decompositie-action-border: 0.8 0.075 155;

    /* Neutral media placeholder behind missing logbook/relation photos. */
    --media-placeholder: 0.28 0.018 195;
    --media-placeholder-foreground: 0.6 0.012 190;

    /* Algemeen > Leden: table-specific surfaces, tuned for the dark archive. */
    --table-header: 0.275 0.02 195;
    --table-row-alt: 0.245 0.017 195;
    --table-row-hover: 0.315 0.026 76;
    --table-cell-divider: 0.31 0.018 195;
    --table-yes: 0.68 0.13 155;
    --table-no: 0.6 0.012 190;

    /* Onderhoud > Garanties: page-scoped surfaces for the warranty
       card-buttons, tuned for the dark archive. The buttons keep the global
       dark-green --primary; only the certificate well and the neutral
       missing-certificate state are re-tuned for dark mode. */
    --garantie-cert-surface: 0.275 0.02 195;
    --garantie-cert-border: 0.34 0.018 195;
    --garantie-cert-foreground: 0.72 0.085 183;
    --garantie-missing-border: 0.36 0.018 195;
    --garantie-missing-foreground: 0.63 0.012 190;
  }

  * {
  border-color: oklch(var(--border));
}
  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  h1,
  h2,
  h3 {
  font-family: var(--font-display), serif;
}
  /* Algemeen > Welkom bewoners: the three document-cover buttons.
     Each button is a portrait "document cover": a 3/4 media well with a
     spine-like brass hairline on the left edge, and a caption band beneath
     that names the linked document. Scoped to this page so no other button
     in the app changes. */
  .cover-button {
    display: flex;
    flex-direction: column;
  }
  .cover-button__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: oklch(var(--media-placeholder));
  }
  /* The spine: a thin brass rule down the left edge, so the image reads as a
     bound cover rather than a plain photo. */
  .cover-button__spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.375rem;
    background-image: var(--gradient-plaque);
    opacity: 0.85;
  }
  .cover-button__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem 0.75rem;
    border-top: 1px solid oklch(var(--border));
  }
  .cover-button__title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: oklch(var(--foreground));
    overflow-wrap: anywhere;
  }
  .cover-button__meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground));
  }
  .cover-button__placeholder {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: oklch(var(--muted-foreground));
  }
  /* A disabled cover (no document linked) must still read clearly: keep the
     placeholder legible instead of letting the browser grey it out. */
  .cover-button:disabled {
    opacity: 1;
  }
  .cover-button:disabled .cover-button__media {
    filter: saturate(0.6);
  }
  /* Algemeen > Welkom bewoners: the three document-cover buttons are 40%
     smaller in both width and height than the base .cover-button, so the
     column reads as a compact stack. Scoped to this page via .welkom-covers,
     so no cover button anywhere else changes. The portrait 3/4 media well is
     preserved; only the scale of the cover's own padding, type and spine is
     reduced to match the smaller footprint. */
  .welkom-covers .cover-button__spine {
    width: 0.25rem;
  }
  .welkom-covers .cover-button__body {
    gap: 0.1875rem;
    padding: 0.375rem 0.5rem 0.5rem;
  }
  .welkom-covers .cover-button__title {
    font-size: 0.8125rem;
  }
  .welkom-covers .cover-button__meta {
    gap: 0.25rem;
    font-size: 0.6875rem;
  }
  .welkom-covers .cover-button__placeholder {
    gap: 0.25rem;
    font-size: 0.75rem;
  }
  /* Algemeen > Welkom bewoners: the three document-cover buttons sit in one
     full-width row below the welcome text. On desktop they share the row in
     three equal columns; on narrow screens they stack in a single column so
     each cover keeps a comfortable, readable width. */
  .welkom-covers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
  }
  @media (max-width: 640px) {
    .welkom-covers-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[3\/4\] {
  aspect-ratio: 3/4;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-20 {
  width: 5rem;
  height: 5rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[85vh\] {
  height: 85vh;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-24 {
  max-height: 6rem;
}
.max-h-44 {
  max-height: 11rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[20rem\] {
  max-height: 20rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[45vh\] {
  max-height: 45vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[50vh\] {
  min-height: 50vh;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-1\/4 {
  width: 25%;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-2\/5 {
  width: 40%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\/4 {
  width: 75%;
}
.w-3\/5 {
  width: 60%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-56 {
  width: 14rem;
}
.w-64 {
  width: 16rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[10\%\] {
  width: 10%;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[12\%\] {
  width: 12%;
}
.w-\[14\%\] {
  width: 14%;
}
.w-\[18\%\] {
  width: 18%;
}
.w-\[28\%\] {
  width: 28%;
}
.w-\[4\.5rem\] {
  width: 4.5rem;
}
.w-\[720px\] {
  width: 720px;
}
.w-\[min\(56vw\2c 504px\)\] {
  width: min(56vw, 504px);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-56 {
  min-width: 14rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-28 {
  max-width: 7rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes banner-slide {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
.animate-banner-slide {
  animation: banner-slide 26s linear infinite;
}
@keyframes fade-up {

  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fade-up 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: oklch(var(--border));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-r-2 {
  border-right-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-border {
  border-color: oklch(var(--border));
}
.border-destructive\/20 {
  border-color: oklch(var(--destructive) / 0.2);
}
.border-destructive\/30 {
  border-color: oklch(var(--destructive) / 0.3);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/30 {
  border-color: oklch(var(--primary) / 0.3);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: oklch(var(--destructive) / 0.1);
}
.bg-destructive\/15 {
  background-color: oklch(var(--destructive) / 0.15);
}
.bg-destructive\/5 {
  background-color: oklch(var(--destructive) / 0.05);
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/5 {
  background-color: oklch(var(--primary) / 0.05);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/30 {
  background-color: oklch(var(--secondary) / 0.3);
}
.bg-secondary\/40 {
  background-color: oklch(var(--secondary) / 0.4);
}
.bg-secondary\/50 {
  background-color: oklch(var(--secondary) / 0.5);
}
.bg-secondary\/60 {
  background-color: oklch(var(--secondary) / 0.6);
}
.bg-secondary\/70 {
  background-color: oklch(var(--secondary) / 0.7);
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-success\/15 {
  background-color: oklch(var(--success) / 0.15);
}
.bg-transparent {
  background-color: transparent;
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-destructive\/80 {
  color: oklch(var(--destructive) / 0.8);
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-success {
  --tw-text-opacity: 1;
  color: oklch(var(--success) / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.underline {
  text-decoration-line: underline;
}
.decoration-primary\/40 {
  text-decoration-color: oklch(var(--primary) / 0.4);
}
.decoration-1 {
  text-decoration-thickness: 1px;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-subtle {
  --tw-shadow: 0 1px 3px 0 rgba(30,45,45,0.06), 0 1px 2px -1px rgba(30,45,45,0.05);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.drop-shadow-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
  --tw-drop-shadow: drop-shadow(0 1px 3px rgba(0,0,0,0.75));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.running {
  animation-play-state: running;
}
  .transition-smooth {
    transition: var(--transition-smooth);
  }

  .bg-gradient-primary {
    background-image: var(--gradient-primary);
  }
  .bg-gradient-subtle {
    background-image: var(--gradient-subtle);
  }
  .bg-gradient-plaque {
    background-image: var(--gradient-plaque);
  }

  /* Signature: brass plaque hairline under section labels */
  .rule-plaque {
    position: relative;
    padding-bottom: 0.5rem;
  }
  .rule-plaque::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5rem;
    height: 2px;
    background-image: var(--gradient-plaque);
    border-radius: 9999px;
  }

  .text-balance {
    text-wrap: balance;
  }

  /* Upload feedback: progress bar built from existing tokens */
  .upload-progress {
    position: relative;
    height: 0.5rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background-color: oklch(var(--muted));
  }
  .upload-progress__fill {
    height: 100%;
    border-radius: 9999px;
    background-image: var(--gradient-primary);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Indeterminate state while the server has not reported a percentage yet */
  .upload-progress__fill--indeterminate {
    width: 40%;
    animation: upload-indeterminate 1.4s ease-in-out infinite;
  }

  /* Notice surfaces: thin left rule + tinted fill, one per upload outcome */
  .notice {
    border-radius: calc(var(--radius) - 2px);
    border-left-width: 3px;
    border-left-style: solid;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .notice-error {
    border-left-color: oklch(var(--destructive));
    background-color: oklch(var(--destructive) / 0.1);
    color: oklch(var(--foreground));
  }
  .notice-success {
    border-left-color: oklch(var(--success));
    background-color: oklch(var(--success) / 0.12);
    color: oklch(var(--foreground));
  }
  .notice-info {
    border-left-color: oklch(var(--accent));
    background-color: oklch(var(--accent) / 0.12);
    color: oklch(var(--foreground));
  }

  /* Inline-editable financial figure (e.g. Onderhoudsreserve 31-12).
     Read-only members see a plain figure; bestuurders see the same well with
     a dashed brass border and a pencil affordance until they enter edit mode. */
  .editable-figure {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    transition: var(--transition-smooth);
  }
  .editable-figure--readonly {
    background-color: oklch(var(--muted) / 0.5);
    border-color: oklch(var(--border));
  }
  .editable-figure--editable {
    background-color: oklch(var(--editable-surface));
    border-style: dashed;
    border-color: oklch(var(--editable-border));
    cursor: pointer;
  }
  .editable-figure--editable:hover {
    border-style: solid;
    border-color: oklch(var(--accent));
    box-shadow: 0 1px 3px 0 rgba(120, 90, 35, 0.12);
  }
  .editable-figure--editing {
    border-style: solid;
    border-color: oklch(var(--editable-border));
    background-color: oklch(var(--card));
    box-shadow: 0 1px 3px 0 rgba(120, 90, 35, 0.12);
  }
  /* The amount itself: tabular mono digits so the figure never shifts width. */
  .editable-figure__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  /* The euro amount input keeps the same mono rhythm while typing. */
  .editable-figure__input {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    background-color: transparent;
    border: none;
    outline: none;
    width: 8ch;
    color: oklch(var(--foreground));
  }
  .editable-figure__input::-moz-placeholder {
    color: oklch(var(--muted-foreground));
  }
  .editable-figure__input::placeholder {
    color: oklch(var(--muted-foreground));
  }

  /* Document picker rows: whole row is the checkbox hit target. */
  .picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    padding: 0.5rem 0.75rem;
    transition: var(--transition-smooth);
  }
  .picker-row:hover {
    background-color: oklch(var(--muted) / 0.6);
  }
  .picker-row--selected {
    background-color: oklch(var(--accent) / 0.1);
  }

  /* Homepage Logboek: compact rows, 150x150 square media on the left and
     logbook metadata on the right. Fixed row height keeps the list scannable. */
  .logbook-item {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 150px;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
    overflow: hidden;
    transition: var(--transition-smooth);
  }
  .logbook-item:hover {
    border-color: oklch(var(--accent) / 0.5);
    box-shadow: 0 1px 3px 0 rgba(30, 45, 45, 0.06);
  }

  /* 150x150 media thumb — shared by logbook rows and relation cards. */
  .media-thumb-150 {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    background-color: oklch(var(--media-placeholder));
  }

  /* Neutral placeholder shown where a photo is missing (same 150x150 slot). */
  .media-placeholder-150 {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: oklch(var(--media-placeholder));
    color: oklch(var(--media-placeholder-foreground));
  }

  /* Algemeen/Onderhoud > Logboek: the document cell.
     A quiet well that holds the linked document name above its download
     shortcut, so the column reads as one unit and never widens the row. */
  .logbook-doc {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
  }
  .logbook-doc__name {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    color: oklch(var(--foreground));
    overflow-wrap: anywhere;
  }
  .logbook-doc__missing {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: oklch(var(--destructive));
  }

  /* Onderhoud > Maatregelen: light-green action buttons (toevoegen, bewerken,
     opslaan, annuleren). Scoped to this page so the global primary button
     stays deep slate-teal everywhere else. */
  .measure-action {
    background-color: oklch(var(--measure-action));
    color: oklch(var(--measure-action-foreground));
    border-color: oklch(var(--measure-action-border));
  }
  .measure-action:hover {
    background-color: oklch(var(--measure-action-hover));
    color: oklch(var(--measure-action-foreground));
  }
  /* Maatregelen action buttons for far-future measures (> current year + 10):
     identical sizing/border/hover contract, neutral grey tokens instead of
     green. The Button variant='measure' + this modifier keeps the same
     dimensions; only the colour palette changes. */
  .measure-action--muted {
    background-color: oklch(var(--measure-action-muted));
    color: oklch(var(--measure-action-muted-foreground));
    border-color: oklch(var(--measure-action-muted-border));
  }
  .measure-action--muted:hover {
    background-color: oklch(var(--measure-action-muted-hover));
    color: oklch(var(--measure-action-muted-foreground));
    border-color: oklch(var(--measure-action-muted-border));
  }

  /* Decompositie > Bouwelementen: the element cards are the page's buttons.
     A private-property element carries the requested light green (RGB 190 226
     203); a common-property element carries the same quiet grey tint as the
     maatregel rows on /onderhoud/maatregelen. Scoped to this page so the global
     primary button stays deep slate-teal everywhere else. */
  .decompositie-action {
    background-color: oklch(var(--decompositie-action));
    color: oklch(var(--decompositie-action-foreground));
    border-color: oklch(var(--decompositie-action-border));
  }
  .decompositie-action:hover {
    background-color: oklch(var(--decompositie-action-hover));
    color: oklch(var(--decompositie-action-foreground));
    border-color: oklch(var(--decompositie-action-border));
  }
  /* Common property (gemeenschappelijke zaak): the same neutral grey surface as
     the maatregel rows, so the two pages read as one system. Declared after the
     base rule so the grey tokens win for these cards. */
  .decompositie-action--muted {
    background-color: oklch(var(--measure-surface-muted-surface));
    color: oklch(var(--measure-surface-muted-foreground));
    border-color: oklch(var(--measure-surface-muted-hover));
  }
  .decompositie-action--muted:hover {
    background-color: oklch(var(--measure-surface-muted-hover));
    color: oklch(var(--measure-surface-muted-foreground));
    border-color: oklch(var(--measure-surface-muted-hover));
  }
  /* An element without a stored reglement status: a neutral, unassigned
     surface that reads as "not yet classified" — quieter than the grey common
     tint and clearly distinct from the light green private tint. */
  .decompositie-action--neutral {
    background-color: oklch(var(--card));
    color: oklch(var(--muted-foreground));
    border-color: oklch(var(--border));
    border-style: dashed;
  }
  .decompositie-action--neutral:hover {
    background-color: oklch(var(--secondary));
    color: oklch(var(--foreground));
    border-color: oklch(var(--border));
  }
  /* Deels gemeenschappelijk / deels privé: the element card carries the exact
     same 135deg light-green/grey gradient as the legend swatch
     .decompositie-legend__swatch--deelsGemeenschappelijkDeelsPrive, so the card
     and its legend key read as one system. Only the colour differs from
     .decompositie-action and .decompositie-action--muted — the shape,
     dimensions, border and hover behaviour are inherited unchanged. The
     gradient stops use the same tokens as the swatch, so both themes adapt
     automatically; the foreground and border are set explicitly for contrast. */
  .decompositie-action--mixed {
    background-image: linear-gradient(
      135deg,
      oklch(var(--decompositie-action)) 0 50%,
      oklch(var(--measure-surface-muted-surface)) 50% 100%
    );
    color: oklch(var(--decompositie-action-foreground));
    border-color: oklch(var(--decompositie-action-border));
  }
  .decompositie-action--mixed:hover {
    background-image: linear-gradient(
      135deg,
      oklch(var(--decompositie-action-hover)) 0 50%,
      oklch(var(--measure-surface-muted-hover)) 50% 100%
    );
    color: oklch(var(--decompositie-action-foreground));
    border-color: oklch(var(--decompositie-action-border));
  }
  /* Dark mode: the same 135deg light-green/grey gradient, driven by the dark
     --decompositie-action and --measure-surface-muted-surface tokens so the
     card stays lighter than the dark archive surface. Mirrors the existing
     dark-mode treatment of .decompositie-action and .decompositie-action--muted. */
  .dark .decompositie-action--mixed {
    background-image: linear-gradient(
      135deg,
      oklch(var(--decompositie-action)) 0 50%,
      oklch(var(--measure-surface-muted-surface)) 50% 100%
    );
    color: oklch(var(--decompositie-action-foreground));
    border-color: oklch(var(--decompositie-action-border));
  }
  .dark .decompositie-action--mixed:hover {
    background-image: linear-gradient(
      135deg,
      oklch(var(--decompositie-action-hover)) 0 50%,
      oklch(var(--measure-surface-muted-hover)) 50% 100%
    );
    color: oklch(var(--decompositie-action-foreground));
    border-color: oklch(var(--decompositie-action-border));
  }
  /* Decompositie > Bouwelementen: the legend that sits top-right, on the same
     line as the 'Bouwelementen' heading. Two swatches — grey for common
     property, light green for private property — each with its label. It wraps
     beneath the heading on narrow screens instead of overflowing. */
  .decompositie-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
  }
  .decompositie-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: oklch(var(--muted-foreground));
    white-space: nowrap;
  }
  .decompositie-legend__swatch {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: calc(var(--radius) - 6px);
    border: 1px solid oklch(var(--border));
  }
  .decompositie-legend__swatch--common {
    background-color: oklch(var(--measure-surface-muted-surface));
    border-color: oklch(var(--measure-surface-muted-hover));
  }
  .decompositie-legend__swatch--private {
    background-color: oklch(var(--decompositie-action));
    border-color: oklch(var(--decompositie-action-border));
  }
  /* Legend swatches keyed by the stored reglement status. */
  .decompositie-legend__swatch--gemeenschappelijkeZaken {
    background-color: oklch(var(--measure-surface-muted-surface));
    border-color: oklch(var(--measure-surface-muted-hover));
  }
  .decompositie-legend__swatch--priveGedeelte {
    background-color: oklch(var(--decompositie-action));
    border-color: oklch(var(--decompositie-action-border));
  }
  .decompositie-legend__swatch--deelsGemeenschappelijkDeelsPrive {
    background: linear-gradient(
      135deg,
      oklch(var(--decompositie-action)) 0 50%,
      oklch(var(--measure-surface-muted-surface)) 50% 100%
    );
    border-color: oklch(var(--decompositie-action-border));
  }

  /* Onderhoud > Maatregelen: full-width measure buttons, ~20% shorter than the
     previous card-height rows, on a distinctly lighter surface than bg-card.
     Every measure row now uses the neutral grey tint — the same quiet,
     achromatic surface the far-future rows already used — so measures within
     the ten-year horizon and measures beyond it read identically. Only the
     colour tokens change; the geometry (gap, padding, radius, hover timing) is
     untouched, so the rows stay aligned with the .measure-columns heading row.
     The orange negative-value treatment is applied inline on the page and is
     unaffected. */
  .measure-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid oklch(var(--measure-surface-muted-hover));
    background-color: oklch(var(--measure-surface-muted-surface));
    color: oklch(var(--measure-surface-muted-foreground));
    padding: 0.75rem 1rem;
    transition: var(--transition-smooth);
  }
  .measure-button:hover {
    background-color: oklch(var(--measure-surface-muted-hover));
  }
  /* Maatregelen > 10 jaar vooruit: the same button geometry, padding, radius,
     flex layout and hover timing as .measure-button. Since every row now uses
     the neutral grey tokens, this modifier simply restates the base surface so
     the far-future rows keep their explicit grey contract. Only colour is
     declared — every dimension and the hover behaviour are inherited
     untouched. */
  .measure-button--muted {
    border-color: oklch(var(--measure-surface-muted-hover));
    background-color: oklch(var(--measure-surface-muted-surface));
    color: oklch(var(--measure-surface-muted-foreground));
  }
  .measure-button--muted:hover {
    background-color: oklch(var(--measure-surface-muted-hover));
  }
  .measure-button--muted .measure-button__year {
    background-color: oklch(var(--measure-chip-muted));
    color: oklch(var(--measure-surface-muted-foreground));
  }
  .measure-button--muted .measure-button__meta {
    color: oklch(var(--measure-surface-muted-meta));
  }
  .measure-button--muted .measure-button__status {
    border-color: oklch(var(--measure-surface-muted-hover));
    color: oklch(var(--measure-surface-muted-foreground));
  }
  /* GESPAARD column: a content-sized, right-aligned slot. The value is
     deliberately quiet — muted grey text, one step lighter than the row's own
     foreground — so it reads as supporting context rather than a headline
     figure. A modest min-width keeps the amounts right-aligned across rows
     without reserving the large fixed block (and the 50px margin) that used to
     squeeze the flexible name column. */
  .measure-button__saved {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: oklch(var(--measure-surface-muted-meta));
  }
  /* On the grey rows the muted grey text must stay legible against the grey
     surface, so it steps up to the row's own muted foreground. */
  .measure-button--muted .measure-button__saved {
    color: oklch(var(--measure-surface-muted-foreground));
  }
  /* SALDO column: GESPAARD minus the inflation-indexed cost. It is the last
     value column, sitting directly right of NA INFLATIE. It shares the
     GESPAARD slot's content-sized min-width so the value columns and their
     headings stay on the same x-positions. The value is filled only on the rows
     within the current year + 10 horizon; on the far-future rows the slot stays
     empty. */
  .measure-button__after-expenses {
    flex: 0 0 auto;
    min-width: 5.5rem;
    padding-left: 0.75rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: oklch(var(--measure-surface-muted-foreground));
  }
  .measure-button__year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: calc(var(--radius) - 4px);
    background-color: oklch(var(--measure-chip-muted));
    color: oklch(var(--measure-surface-muted-foreground));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
  }
  .measure-button__meta {
    color: oklch(var(--measure-surface-muted-meta));
  }
  /* Status column: a content-sized slot that left-aligns the pill, so the three
     status labels ('In gang gezet', 'nog opstarten', 'Inschatting') start on the
     same left edge in every row and line up with the 'Status' heading above
     them. The min-width is sized to the longest label plus the pill's own
     horizontal padding instead of the old generous 11rem, so the GESPAARD
     column sits closer to Status while the name column keeps its room. */
  .measure-button__status-slot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 8.5rem;
    /* The shared Status alignment line: this negative margin is the exact left
       offset the 'Status' heading carries too (.measure-columns__status), so the
       badge's left edge and the heading text begin on the same horizontal line,
       slightly left of the previous position. */
    margin-left: -0.375rem;
  }
  /* Status label in the elongated measure button: a small pill with its own
     weight and letter-spacing so it reads as a distinct field. */
  .measure-button__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 9999px;
    border: 1px solid oklch(var(--measure-surface-muted-hover));
    background-color: oklch(var(--card) / 0.7);
    color: oklch(var(--measure-surface-muted-foreground));
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.125rem 0.625rem;
    white-space: nowrap;
  }
  /* Both amount columns carry a content-sized min-width so the values line up
     across rows and the heading labels above them can mirror the exact same
     geometry, without reserving more space than the figures need. */
  .measure-button__amount {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  /* The inflation-indexed amount sits in its own right-hand column, set off
     from the original amount by a hairline rule and the same content-sized
     min-width so the two columns line up across rows. */
  .measure-button__amount--indexed {
    min-width: 5.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid oklch(var(--measure-surface-muted-hover));
    color: oklch(var(--measure-surface-muted-foreground));
  }
  /* Far-future rows: the indexed amount's hairline rule and text follow the
     grey surface instead of the green one. Declared after the base rule so the
     base geometry stays the single source of truth. */
  .measure-button--muted .measure-button__amount--indexed {
    border-left-color: oklch(var(--measure-surface-muted-hover));
    color: oklch(var(--measure-surface-muted-foreground));
  }
  /* Trailing chevron spacer: the measure button ends with a size-4 ChevronRight
     after the row gap. The heading row reserves the identical slot so its
     labels never drift left of the columns they name. */
  .measure-button__chevron-spacer {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
  }
  /* Narrow screens: the status slot and amount columns would push the row past
     the button edge. Drop their min-widths and let the row wrap so every field
     stays inside the button; the desktop right-alignment is untouched. */
  @media (max-width: 640px) {
    .measure-button {
      flex-wrap: wrap;
      row-gap: 0.5rem;
    }
    .measure-button__status-slot {
      min-width: 0;
      margin-left: auto;
    }
    .measure-button__amount,
    .measure-button__amount--indexed,
    .measure-button__saved,
    .measure-button__after-expenses {
      min-width: 0;
    }
  }

  /* Onderhoud > Maatregelen: the column-heading row above the measure list.
     It mirrors the exact flex geometry of .measure-button — same gap, same
     padding, same content-sized status slot and amount columns — so each label
     sits on the same x-position as the column it names. The labels are
     right-aligned wherever the values below them are right-aligned. */
  .measure-columns {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
  /* Jaar — centred over the year chip. */
  .measure-columns__year {
    flex: 0 0 auto;
    text-align: center;
  }
  /* Onderhoud — left-aligned over the name/meta column. */
  .measure-columns__name {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* GESPAARD — right-aligned over the saved amount, sharing its content-sized
     min-width so the label sits exactly above the values. */
  .measure-columns__saved {
    flex: 0 0 auto;
    min-width: 5.5rem;
    text-align: right;
  }
  /* SALDO — right-aligned over the SALDO amount, the last value column. It
     shares the GESPAARD heading's content-sized min-width and the same
     padding-left as the value slot so the label sits exactly above the values. */
  .measure-columns__after-expenses {
    flex: 0 0 auto;
    min-width: 5.5rem;
    padding-left: 0.75rem;
    text-align: right;
  }
  /* Status — left-aligned inside the same content-sized slot as the pill. The
     heading carries the exact same left offset as the data row's status slot
     (.measure-button__status-slot): the same negative margin-left and no extra
     padding-left. Because both slots are content-sized (min-width 8.5rem) and
     the flexible name column absorbs the same difference in both rows, the
     'Status' heading text and the status badge below it now begin on the exact
     same horizontal line, slightly left of the previous position. */
  .measure-columns__status {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 8.5rem;
    /* The same left offset as .measure-button__status-slot, so the heading and
       the badge share one left alignment line. */
    margin-left: -0.375rem;
    padding-left: 0;
    text-align: left;
  }
  /* Kosten MJOP — right-aligned over the original amount, sharing its
     content-sized min-width so the label sits exactly above the values. */
  .measure-columns__amount {
    flex: 0 0 auto;
    min-width: 5.5rem;
    text-align: right;
  }
  /* met inflatie — right-aligned over the indexed amount, sharing its
     content-sized min-width and hairline rule so the two amount columns line
     up. */
  .measure-columns__indexed {
    flex: 0 0 auto;
    min-width: 5.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid oklch(var(--measure-surface-muted-hover));
    text-align: right;
  }
  /* Trailing chevron spacer — mirrors the button's ChevronRight slot so the
     heading labels stay horizontally aligned with their columns. */
  .measure-columns__chevron-spacer {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
  }
  /* Narrow screens: the heading row wraps exactly like the measure rows, so
     the labels stay attached to their columns instead of overflowing. */
  @media (max-width: 640px) {
    .measure-columns {
      flex-wrap: wrap;
      row-gap: 0.25rem;
    }
    .measure-columns__status {
      min-width: 0;
      margin-left: auto;
    }
    .measure-columns__amount,
    .measure-columns__indexed,
    .measure-columns__saved,
    .measure-columns__after-expenses {
      min-width: 0;
    }
  }

  /* Agenda > Vergaderingen: a meeting row that lies in the future carries the
     requested light green (RGB 190 226 203 -> oklch(0.880 0.049 157.2)), the
     same token the Bouwelementen cards and the maatregel rows use, so the pages
     read as one system. Only the colour tokens change — the row keeps its
     existing geometry, radius, hover timing and focus ring. Past meetings keep
     the default card surface. */
  .agenda-meeting--future {
    border-color: oklch(var(--decompositie-action-border));
    background-color: oklch(var(--decompositie-action));
    color: oklch(var(--decompositie-action-foreground));
  }
  .agenda-meeting--future:hover {
    border-color: oklch(var(--decompositie-action-border));
    background-color: oklch(var(--decompositie-action-hover));
  }
  /* The date block steps from the green-tinted secondary to a white surface so
     it stands apart from the light-green row while staying legible. */
  .agenda-meeting--future .agenda-meeting__date {
    background-color: oklch(var(--card));
    color: oklch(var(--decompositie-action-foreground));
  }
  .agenda-meeting--future .agenda-meeting__date .text-muted-foreground {
    color: oklch(var(--decompositie-action-foreground));
  }
  .agenda-meeting--future .agenda-meeting__title {
    color: oklch(var(--decompositie-action-foreground));
  }
  .agenda-meeting--future .agenda-meeting__meta {
    color: oklch(var(--decompositie-action-foreground));
  }
  .agenda-meeting--future .agenda-meeting__chevron {
    color: oklch(var(--decompositie-action-foreground));
  }
  .agenda-meeting--future:hover .agenda-meeting__chevron {
    color: oklch(var(--decompositie-action-foreground));
  }
  /* The 'gepland' chip keeps its pill shape but swaps to a white surface with
     the deep green foreground so it stays readable on the light-green row. */
  .agenda-meeting--future .agenda-meeting__chip {
    background-color: oklch(var(--card));
    color: oklch(var(--decompositie-action-foreground));
  }

  /* Decompositie > Relaties: 4-up grid of relation cards. Each card shows a
     company image with name and maintenance-category labels beneath. */
  .relation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  @media (max-width: 1024px) {
    .relation-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 640px) {
    .relation-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .relation-card {
    display: flex;
    flex-direction: column;
    border-radius: calc(var(--radius) - 2px);
    /* The base radius stays for every other page; /onderhoud/relaties squares
       it via the page-scoped .relaties-page rule below. */
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
    overflow: hidden;
    text-align: left;
    transition: var(--transition-smooth);
  }
  .relation-card:hover {
    border-color: oklch(var(--accent) / 0.5);
    box-shadow: 0 1px 3px 0 rgba(30, 45, 45, 0.06);
  }
  /* Media band is ~25% shorter than the original 4/3 box (16/9 keeps the same
     full width, so the buttons stay equally wide but lose height). */
  .relation-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    background-color: oklch(var(--media-placeholder));
  }
  .relation-card__placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: oklch(var(--media-placeholder));
    color: oklch(var(--media-placeholder-foreground));
  }
  .relation-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem 0.875rem;
  }
  .relation-card__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: oklch(var(--foreground));
  }
  .relation-card__labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  /* Maintenance-category label — a quiet pill, not a loud badge. */
  .relation-label {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background-color: oklch(var(--secondary));
    color: oklch(var(--secondary-foreground));
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.125rem 0.5rem;
  }

  /* Onderhoud > Relaties: every button and clickable relation card on this page
     is square — no rounded corners. Scoped to the page via .relaties-page so the
     shared Button primitive and the relation cards on every other page keep
     their existing rounding. Only the corner radius changes; layout, spacing,
     colours and hover behaviour are untouched. */
  .relaties-page .relation-card {
    border-radius: 0;
  }
  .relaties-page button,
  .relaties-page [data-slot="button"] {
    border-radius: 0;
  }

  /* Relation detail surface: media header + definition list of relation data. */
  .relation-detail__media {
    width: 100%;
    max-height: 320px;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    border-radius: calc(var(--radius) - 2px);
    background-color: oklch(var(--media-placeholder));
  }
  .relation-detail__placeholder {
    width: 100%;
    aspect-ratio: 16 / 7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) - 2px);
    background-color: oklch(var(--media-placeholder));
    color: oklch(var(--media-placeholder-foreground));
  }
  .relation-detail__row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid oklch(var(--border));
  }
  .relation-detail__row:last-child {
    border-bottom: none;
  }
  .relation-detail__term {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
  .relation-detail__value {
    color: oklch(var(--foreground));
    overflow-wrap: anywhere;
  }

  /* Algemeen > Leden: the member register.
     A real table — header band, zebra striping, hairline cell dividers — so it
     reads as an official register rather than a stack of cards. On mobile the
     wrapper scrolls horizontally instead of reflowing, keeping the columns
     aligned and comparable. No filtering/sorting affordances are designed. */
  .member-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid oklch(var(--border));
    border-radius: calc(var(--radius) - 2px);
    background-color: oklch(var(--card));
    box-shadow: 0 1px 3px 0 rgba(30, 45, 45, 0.06);
    -webkit-overflow-scrolling: touch;
  }
  .member-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.45;
    /* The register is a data surface, not prose: every cell — header, rows and
       the total row — renders upright, never italic. */
    font-style: normal;
  }
  .member-table th,
  .member-table td,
  .member-table caption {
    font-style: normal;
  }
  .member-table caption {
    text-align: left;
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    border-bottom: 1px solid oklch(var(--border));
  }
  .member-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: oklch(var(--table-header));
    color: oklch(var(--foreground));
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid oklch(var(--border));
    white-space: nowrap;
  }
  .member-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid oklch(var(--table-cell-divider));
    color: oklch(var(--foreground));
    vertical-align: top;
  }
  /* Zebra striping: every second row carries a whisper-quiet teal tint. */
  .member-table tbody tr:nth-child(even) {
    background-color: oklch(var(--table-row-alt));
  }
  .member-table tbody tr:hover {
    background-color: oklch(var(--table-row-hover));
  }
  .member-table tbody tr:last-child td {
    border-bottom: none;
  }
  /* Huisnummer — the row's anchor. Mono tabular so numbers align vertically. */
  .member-table__house {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
  }
  /* Namen bewoners — display face, the human centre of each row. */
  .member-table__residents {
    font-family: var(--font-display);
    font-weight: 600;
    color: oklch(var(--foreground));
  }
  /* Activiteiten — quiet secondary text, may wrap. */
  .member-table__activities {
    color: oklch(var(--muted-foreground));
    max-width: 22rem;
  }
  /* Algemeen > Algemene kosten: the total row's label. It is a row header in
     the first column, so it must sit on the same left edge as the rubriek
     names above it — the table's own cell padding already provides that, and
     this rule only restores the display-face weight the header band uses so
     'Totaal' reads as the column's closing label rather than a stray word. */
  .algemene-kosten__total-label {
    font-family: var(--font-display);
    font-weight: 600;
    color: oklch(var(--foreground));
    text-align: left;
    white-space: nowrap;
  }
  /* Algemeen > Algemene kosten: the relation column. One or more relation
     chips wrap together inside the cell instead of overflowing it. */
  .algemene-kosten__relations {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
  }
  /* Algemeen > Algemene kosten: page-scoped typography that mirrors Onderhoud >
     Maatregelen. The wrapper only overrides the internal type treatment of the
     register table on this page — the base .member-table rules stay untouched
     for Algemeen > Leden and every other table. */
  .algemene-kosten-page .member-table caption {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
  /* Column headings: the same small, wide-tracked uppercase label as the
     .measure-columns heading row on Maatregelen. */
  .algemene-kosten-page .member-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
  /* Rubriek names: the display face at the same weight as the measure name. */
  .algemene-kosten-page .member-table__residents {
    font-family: var(--font-display);
    font-weight: 600;
    color: oklch(var(--foreground));
  }
  /* Amounts: mono tabular figures at the measure amount weight, so the column
     reads exactly like the Kosten MJOP column on Maatregelen. */
  .algemene-kosten-page .member-table__house {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  /* The total row's amount cell lives in the tfoot, which the base table never
     pads. Restoring the same horizontal padding as the header and body cells
     keeps the total's right edge on the 'BEDRAG PER JAAR' heading's right edge. */
  .algemene-kosten-page .member-table tfoot td {
    padding: 0.75rem 1rem;
    border-top: 2px solid oklch(var(--border));
  }
  /* Algemeen > Algemene kosten: every rubriek row carries the requested white
     fill instead of the register's teal zebra stripe. The page-scoped selector
     outranks the base `.member-table tbody tr:nth-child(even)` rule, so both the
     odd and even rows read as one uniform white surface. Only the row colour
     changes — the cell padding, dividers and typography stay untouched. */
  .algemene-kosten-page .member-table tbody tr {
    background-color: oklch(var(--card));
  }
  .algemene-kosten-page .member-table tbody tr:hover {
    background-color: oklch(var(--table-row-hover));
  }
  /* Algemeen > Algemene kosten: the column-heading band carries the requested
     deep orange fill rgb(204, 85, 0) with white text, so the header row reads as
     a distinct band above the white rubriek rows. The page-scoped selector
     outranks the base `.member-table thead th` surface. */
  .algemene-kosten-page .member-table thead th {
    background-color: rgb(204, 85, 0);
    color: rgb(255, 255, 255);
  }
  /* The 'Totaal' row header sits in the first column, the same column the
     rubriek names occupy. The base table only pads tbody cells, so the tfoot
     row header needs the identical horizontal padding to share the rubriek
     names' left edge. */
  .algemene-kosten-page .member-table tfoot th {
    padding: 0.75rem 1rem;
    border-top: 2px solid oklch(var(--border));
  }
  /* The amount column is shifted 100px to the left of its natural position,
     while the right-aligned 'BEDRAG PER JAAR' heading stays put. A transform
     moves only the painted cell content, so the table's column geometry and the
     heading's right edge are untouched. */
  .algemene-kosten-page .member-table .algemene-kosten__amount {
    transform: translateX(-100px);
  }
  /* Algemeen > Algemene kosten: the kostentabel adopts the same fixed table
     layout as the ledenregister on /algemeen/leden. A fixed layout lets the
     explicit equal widths below be honoured instead of being sized by content,
     so the three content columns (Rubriek, Bedrag per jaar, Relatie) keep the
     same share of the row. The optional Acties column for bestuurders keeps a
     compact fixed width beside them. Scoped to this page so the shared
     .member-table primitive and every other table stay unchanged. */
  .algemene-kosten-page .member-table {
    table-layout: fixed;
  }
  .algemene-kosten-page .member-table thead th:nth-child(-n + 3) {
    width: 33.3333%;
  }
  .algemene-kosten-page .member-table thead th:nth-child(4) {
    width: 3rem;
  }
  /* Algemeen > Leden: the member register adopts the exact table treatment of
     Algemeen > Algemene kosten. The wrapper only overrides the internal type
     and colour of the register table on this page — the base .member-table
     rules stay untouched for every other table. */
  .algemene-leden-page .member-table caption {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
  /* Column headings: the same small, wide-tracked uppercase label as the
     .measure-columns heading row on Maatregelen. */
  .algemene-leden-page .member-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
  /* Resident names: the same text style and proportions as the measure names on
     Onderhoud > Maatregelen — the body face at font-medium (500), upright, in
     the row's own size and line-height. The display face (Fraunces serif) is
     deliberately dropped here so the names no longer read as italic/serif. */
  .algemene-leden-page .member-table__residents {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    color: oklch(var(--foreground));
  }
  /* House numbers: mono tabular figures, matching the amount column. */
  .algemene-leden-page .member-table__house {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  /* Every member row carries the requested white fill instead of the register's
     teal zebra stripe. The page-scoped selector outranks the base
     `.member-table tbody tr:nth-child(even)` rule, so both the odd and even rows
     read as one uniform white surface. */
  .algemene-leden-page .member-table tbody tr {
    background-color: oklch(var(--card));
  }
  .algemene-leden-page .member-table tbody tr:hover {
    background-color: oklch(var(--table-row-hover));
  }
  /* The column-heading band carries the requested deep orange fill
     rgb(204, 85, 0) with white text, so the header row reads as a distinct band
     above the white member rows. */
  .algemene-leden-page .member-table thead th {
    background-color: rgb(204, 85, 0);
    color: rgb(255, 255, 255);
  }
  /* Algemeen > Leden: the six register columns (Huisnummer, Namen bewoners,
     Activiteiten, Airconditioning, Zonnepanelen, SITE RECHTEN) are horizontally
     evenly distributed and equally wide. A fixed table layout lets the explicit
     equal widths below be honoured instead of being sized by content, so every
     column keeps the same share of the row. The optional Acties column for
     bestuurders keeps a compact fixed width beside the six. Scoped to this page
     so no other .member-table changes. */
  .algemene-leden-page .member-table {
    table-layout: fixed;
  }
  .algemene-leden-page .member-table thead th:nth-child(-n + 6) {
    width: 16.6667%;
  }
  .algemene-leden-page .member-table thead th:nth-child(7) {
    width: 3rem;
  }
  /* Site rechten: the member's role on the site, shown as plain register text. */
  .algemene-leden-page .member-table__site-rights {
    color: oklch(var(--foreground));
    white-space: nowrap;
  }
  /* Ja/Nee markers: a small dot + word, colour-coded but never a loud badge. */
  .member-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .member-flag__dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    background-color: currentColor;
  }
  .member-flag--yes {
    color: oklch(var(--table-yes));
  }
  .member-flag--no {
    color: oklch(var(--table-no));
  }

  /* Shared empty state for the member table and the drawings page: a centred
     dashed well inside the card, never a bare line of grey text. */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed oklch(var(--border));
    border-radius: calc(var(--radius) - 2px);
    background-color: oklch(var(--card));
  }
  .empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: oklch(var(--muted));
    color: oklch(var(--muted-foreground));
  }
  .empty-state__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: oklch(var(--foreground));
  }
  .empty-state__description {
    max-width: 32rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: oklch(var(--muted-foreground));
  }

  /* Algemeen > Bouwtekeningen: the drawing library.
     A responsive grid of drawing cards — larger than the relation cards and
     with a document-glyph placeholder, because drawings are sheets, not
     photos. Reuses the card, badge and upload language of the app. */
  .drawing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  @media (max-width: 1024px) {
    .drawing-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 640px) {
    .drawing-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .drawing-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
    padding: 1rem;
    transition: var(--transition-smooth);
  }
  .drawing-card:hover {
    border-color: oklch(var(--accent) / 0.5);
    box-shadow: 0 1px 3px 0 rgba(30, 45, 45, 0.06);
  }
  .drawing-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .drawing-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: calc(var(--radius) - 4px);
    background-color: oklch(var(--muted));
    color: oklch(var(--primary));
  }
  .drawing-card__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: oklch(var(--foreground));
    overflow-wrap: anywhere;
  }
  .drawing-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground));
  }
  .drawing-card__meta-item {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .drawing-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
  }
  /* Compact action buttons on the drawing cards (Openen, Bewerken, Verwijderen
     and the confirm pair). Smaller padding and icon sizing than the default
     `sm` button, while the 28px height keeps a comfortable click/tap target.
     Scoped to this page so every other button in the app is untouched. */
  .drawing-card__action {
    height: 1.75rem;
    gap: 0.375rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    font-size: 0.8125rem;
  }
  .drawing-card__action[class*="has-[>svg]"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Onderhoud > Garanties: the warranty list.
     A vertical stack of full-width card-buttons, one per active warranty. The
     button surface is the global dark-green --primary (like every other page
     except Onderhoud > Maatregelen and Decompositie > Bouwelementen), so this
     page introduces no new button colour. The geometry reuses the
     .measure-button / .drawing-card language: same radius, padding, hover
     timing and trailing chevron slot. */
  .garantie-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .garantie-button {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    text-align: left;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid oklch(var(--primary));
    background-color: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    padding: 0.875rem 1rem;
    transition: var(--transition-smooth);
  }
  .garantie-button:hover {
    /* Deepen the same dark green rather than introducing a second hue. */
    background-color: oklch(var(--primary) / 0.88);
    border-color: oklch(var(--primary) / 0.88);
  }
  .garantie-button:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
  /* No certificate linked: the button still reads as a warranty row, but the
     certificate slot is a quiet dashed well and the whole row opens nothing. */
  .garantie-button--nocert {
    cursor: default;
  }
  .garantie-button--nocert:hover {
    background-color: oklch(var(--primary));
    border-color: oklch(var(--primary));
  }
  /* The body column: title on top, meta line beneath. */
  .garantie-button__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .garantie-button__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: oklch(var(--primary-foreground));
    overflow-wrap: anywhere;
  }
  .garantie-button__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: oklch(var(--primary-foreground) / 0.78);
  }
  /* Jaar einde garantie — a mono tabular chip so the years align down the list. */
  .garantie-button__year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: calc(var(--radius) - 4px);
    background-color: oklch(var(--primary-foreground) / 0.16);
    color: oklch(var(--primary-foreground));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
  }
  /* Relatie — the company name, set off by a separator from the year chip. */
  .garantie-button__relation {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
  }
  /* Garantiecertificaat — a document pill inside the dark-green row. When a
     certificate exists it is a real link (PDF opens in a new tab); when it does
     not, it renders as the neutral dashed missing state. */
  .garantie-cert {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    border: 1px solid oklch(var(--primary-foreground) / 0.28);
    background-color: oklch(var(--primary-foreground) / 0.12);
    color: oklch(var(--primary-foreground));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.1875rem 0.625rem;
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .garantie-cert:hover {
    background-color: oklch(var(--primary-foreground) / 0.2);
  }
  .garantie-cert--missing {
    border-style: dashed;
    border-color: oklch(var(--garantie-missing-border));
    background-color: transparent;
    color: oklch(var(--garantie-missing-foreground));
  }
  .garantie-cert--missing:hover {
    background-color: transparent;
  }
  /* Trailing chevron slot — mirrors the measure-button chevron spacer so every
     row ends on the same right edge. */
  .garantie-button__chevron {
    flex: 0 0 auto;
    color: oklch(var(--primary-foreground) / 0.7);
  }
  /* Narrow screens: let the row wrap so the certificate pill and chevron stay
     inside the button instead of pushing it past the viewport. */
  @media (max-width: 640px) {
    .garantie-button {
      flex-wrap: wrap;
      row-gap: 0.5rem;
    }
    .garantie-button__chevron {
      margin-left: auto;
    }
  }

  /* Onderhoud > Garanties: the certificate picker in the add/edit dialog.
     The central document database can hold many documents, so the picker gets
     a search field above the trigger and the dropdown itself is given an
     explicit, generous max-height (20rem) with vertical scrolling. This keeps
     the list predictable instead of clipping it to the viewport space Radix
     computes. Scoped to this dialog so no other Select changes. */
  .garantie-doc-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .garantie-doc-picker__search {
    position: relative;
    display: flex;
    align-items: center;
  }
  .garantie-doc-picker__search-icon {
    position: absolute;
    left: 0.625rem;
    width: 1rem;
    height: 1rem;
    color: oklch(var(--muted-foreground));
    pointer-events: none;
  }
  .garantie-doc-picker__search-input {
    padding-left: 2rem;
  }
  /* Empty state inside the dropdown when the filter matches no documents. */
  .garantie-doc-picker__empty {
    padding: 0.75rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: oklch(var(--muted-foreground));
    text-align: center;
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono.woff2") format("woff2");
  font-display: swap;
}

.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}

.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}

.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}

.file\:inline-flex::file-selector-button {
  display: inline-flex;
}

.file\:h-7::file-selector-button {
  height: 1.75rem;
}

.file\:rounded-md::file-selector-button {
  border-radius: calc(var(--radius) - 2px);
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-secondary::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:py-1\.5::file-selector-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}

.file\:text-secondary-foreground::file-selector-button {
  color: oklch(var(--secondary-foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
  .agenda-meeting--future .agenda-meeting__date .placeholder\:text-muted-foreground::-moz-placeholder {
    color: oklch(var(--decompositie-action-foreground));
  }
  .agenda-meeting--future .agenda-meeting__date .placeholder\:text-muted-foreground::placeholder {
    color: oklch(var(--decompositie-action-foreground));
  }

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child {
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-accent:hover {
  --tw-border-opacity: 1;
  border-color: oklch(var(--accent) / var(--tw-border-opacity, 1));
}

.hover\:border-accent\/60:hover {
  border-color: oklch(var(--accent) / 0.6);
}

.hover\:border-primary\/40:hover {
  border-color: oklch(var(--primary) / 0.4);
}

.hover\:bg-\[rgb\(204_85_0\)\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(204 85 0 / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}

.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}

.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}

.hover\:bg-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary\/40:hover {
  background-color: oklch(var(--secondary) / 0.4);
}

.hover\:bg-secondary\/50:hover {
  background-color: oklch(var(--secondary) / 0.5);
}

.hover\:bg-secondary\/60:hover {
  background-color: oklch(var(--secondary) / 0.6);
}

.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}

.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:text-\[rgb\(255_255_255\)\]:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}

.hover\:text-destructive:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}

.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:decoration-primary:hover {
  text-decoration-color: oklch(var(--primary) / 1);
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-elevated:hover {
  --tw-shadow: 0 8px 24px -8px rgba(30,45,45,0.14), 0 2px 6px -2px rgba(30,45,45,0.08);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color), 0 2px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-4:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
  .agenda-meeting--future .agenda-meeting__date .hover\:text-muted-foreground:hover {
    color: oklch(var(--decompositie-action-foreground));
  }

.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}

.focus\:z-10:focus {
  z-index: 10;
}

.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:z-10:focus-visible {
  z-index: 10;
}

.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.focus-visible\:bg-\[rgb\(204_85_0\)\]:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(204 85 0 / var(--tw-bg-opacity, 1));
}

.focus-visible\:text-\[rgb\(255_255_255\)\]:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}

.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: oklch(var(--background));
}

.focus-visible\:ring-offset-card:focus-visible {
  --tw-ring-offset-color: oklch(var(--card));
}

.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:hover\:border-border:hover:disabled {
  border-color: oklch(var(--border));
}

.disabled\:hover\:shadow-subtle:hover:disabled {
  --tw-shadow: 0 1px 3px 0 rgba(30,45,45,0.06), 0 1px 2px -1px rgba(30,45,45,0.05);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-foreground {
  color: oklch(var(--primary-foreground));
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}

.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}

.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
  .agenda-meeting--future .agenda-meeting__date .aria-selected\:text-muted-foreground[aria-selected="true"] {
    color: oklch(var(--decompositie-action-foreground));
  }

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}

.data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
}

.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}

.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}

.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}

.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}

.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}

.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}

.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}

.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}

.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}

.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}

.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}

.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}

.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}

.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}

.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}

.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}

.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}

.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}

.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}

.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}

.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}

.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}

.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}

.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}

.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}

.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
  .agenda-meeting--future .agenda-meeting__date .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
    color: oklch(var(--decompositie-action-foreground));
  }
  .agenda-meeting--future .agenda-meeting__date .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
    color: oklch(var(--decompositie-action-foreground));
  }

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}

.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:animate-none {
    animation: none;
  }
}

.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}

.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
  .agenda-meeting--future .agenda-meeting__date .dark\:text-muted-foreground:is(.dark *) {
    color: oklch(var(--decompositie-action-foreground));
  }

.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}

.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}

@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:max-w-2xl {
    max-width: 42rem;
  }

  .sm\:max-w-4xl {
    max-width: 56rem;
  }

  .sm\:max-w-lg {
    max-width: 32rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:max-w-xl {
    max-width: 36rem;
  }

  .sm\:max-w-xs {
    max-width: 20rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:pl-2\.5 {
    padding-left: 0.625rem;
  }

  .sm\:pr-2\.5 {
    padding-right: 0.625rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:min-h-0 {
    min-height: 0px;
  }

  .md\:w-\[300px\] {
    width: 300px;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-stretch {
    align-items: stretch;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:pt-9 {
    padding-top: 2.25rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:opacity-0 {
    opacity: 0;
  }

  .md\:after\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 1024px) {

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 3fr\)\] {
    grid-template-columns: minmax(0,2fr) minmax(0,3fr);
  }
}

.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>button\]\:hidden>button {
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}

.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}

.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}

.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}

.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}

.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}
  .agenda-meeting--future .agenda-meeting__date .\[\&\>svg\]\:text-muted-foreground>svg {
    color: oklch(var(--decompositie-action-foreground));
  }

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: oklch(var(--muted-foreground) / 1);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
  .agenda-meeting--future .agenda-meeting__date .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
    color: oklch(var(--decompositie-action-foreground));
  }

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
  .agenda-meeting--future .agenda-meeting__date .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
    color: oklch(var(--decompositie-action-foreground));
  }

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}

[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}

[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}

a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}

a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}

a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}

a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}