:root {
    color-scheme: light dark;
    --page-background: #f3f7f2;
    --page-accent: #dcebdd;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --text: #173224;
    --text-muted: #587060;
    --border: #cbd8cc;
    --primary: #176b43;
    --primary-hover: #105637;
    --primary-text: #ffffff;
    --danger-surface: #fff1f0;
    --danger-border: #e6aaa5;
    --danger-text: #8c2d26;
    --focus-ring: #e69f32;
    --shadow: 0 1.25rem 3.5rem rgb(22 58 37 / 14%);
    --radius-card: 1.25rem;
    --radius-control: 0.625rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-background: #102319;
        --page-accent: #193b28;
        --surface: #173224;
        --surface-raised: #1c3a29;
        --text: #edf7ef;
        --text-muted: #b7cab9;
        --border: #3d5e49;
        --primary: #5bc987;
        --primary-hover: #7bdb9f;
        --primary-text: #102319;
        --danger-surface: #472322;
        --danger-border: #98514c;
        --danger-text: #ffd1cd;
        --focus-ring: #ffca6b;
        --shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 30%);
    }
}

.kleurmodus--licht {
    color-scheme: light;
    --page-background: #f3f7f2;
    --page-accent: #dcebdd;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --text: #173224;
    --text-muted: #587060;
    --border: #cbd8cc;
    --primary: #176b43;
    --primary-hover: #105637;
    --primary-text: #ffffff;
    --danger-surface: #fff1f0;
    --danger-border: #e6aaa5;
    --danger-text: #8c2d26;
    --focus-ring: #e69f32;
    --shadow: 0 1.25rem 3.5rem rgb(22 58 37 / 14%);
}

.kleurmodus--donker {
    color-scheme: dark;
    --page-background: #102319;
    --page-accent: #193b28;
    --surface: #173224;
    --surface-raised: #1c3a29;
    --text: #edf7ef;
    --text-muted: #b7cab9;
    --border: #3d5e49;
    --primary: #5bc987;
    --primary-hover: #7bdb9f;
    --primary-text: #102319;
    --danger-surface: #472322;
    --danger-border: #98514c;
    --danger-text: #ffd1cd;
    --focus-ring: #ffca6b;
    --shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 30%);
}

* {
    box-sizing: border-box;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.web-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

.web-icon--small {
    width: 1rem;
    height: 1rem;
}

.web-icon--large {
    width: 1.5rem;
    height: 1.5rem;
}

.web-icon--extra-large {
    width: 2rem;
    height: 2rem;
}

body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 5% 5%, var(--page-accent), transparent 32rem),
        var(--page-background);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    line-height: 1.5;
}

.login-body {
    --login-backdrop: rgb(246 249 244 / 78%);
    --login-card-divider: #d8e1d5;
    --login-input-border: #c8d6b8;
    --login-input-surface: #fffde5;
    --login-presentation-overlay: rgb(238 245 233 / 96%);
    --login-presentation-surface: #eef5e9;
    --login-presentation-text: #123f2c;
    background:
        linear-gradient(var(--login-backdrop), var(--login-backdrop)),
        url('/assets/images/beheer-dashboard-hero.png') center / cover fixed;
}

@media (prefers-color-scheme: dark) {
    .login-body:not(.kleurmodus--licht):not(.kleurmodus--donker) {
        --login-backdrop: rgb(6 18 13 / 82%);
        --login-card-divider: #2d4a3b;
        --login-input-border: #45614f;
        --login-input-surface: #183126;
        --login-presentation-overlay: #10271d;
        --login-presentation-surface: #10271d;
        --login-presentation-text: #effaf3;
    }
}

.login-body.kleurmodus--donker {
    --login-backdrop: rgb(6 18 13 / 82%);
    --login-card-divider: #2d4a3b;
    --login-input-border: #45614f;
    --login-input-surface: #183126;
    --login-presentation-overlay: #10271d;
    --login-presentation-surface: #10271d;
    --login-presentation-text: #effaf3;
}

.login-page {
    display: grid;
    min-height: 100svh;
    place-items: center;
    padding: clamp(1.25rem, 4vw, 3.5rem);
}

.login-shell {
    width: min(100%, 68rem);
}

.login-card {
    display: grid;
    min-height: 42rem;
    grid-template-columns: minmax(0, 1.04fr) minmax(22rem, 0.96fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 2rem 5rem rgb(22 58 37 / 18%);
    overflow: hidden;
}

.login-presentation {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: clamp(2.25rem, 5vw, 4rem);
    background-color: var(--login-presentation-surface);
    background-image:
        linear-gradient(
            180deg,
            var(--login-presentation-overlay) 0 44%,
            color-mix(in srgb, var(--login-presentation-overlay) 88%, transparent) 58%,
            color-mix(in srgb, var(--login-presentation-overlay) 62%, transparent) 74%,
            color-mix(in srgb, var(--login-presentation-overlay) 32%, transparent) 90%,
            transparent 100%
        ),
        url('/assets/images/beheer-dashboard-hero.png');
    background-position: center, right bottom;
    background-repeat: no-repeat;
    background-size: cover, auto 58%;
    border-right: 1px solid var(--login-card-divider);
    color: var(--login-presentation-text);
}

.login-presentation .login-brand {
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
}

.login-presentation-title {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(2.15rem, 4vw, 3rem);
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.login-presentation-introduction {
    max-width: 31rem;
    margin: 1rem 0 2rem;
    color: color-mix(in srgb, var(--login-presentation-text) 84%, transparent);
    font-size: 1.0625rem;
}

.login-features {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: color-mix(in srgb, var(--login-presentation-surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--login-presentation-text) 10%, transparent);
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    box-shadow: 0 0.75rem 2rem rgb(20 63 43 / 8%);
}

.login-feature {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    align-items: center;
    gap: 0.875rem;
}

.login-feature-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    border-radius: 50%;
    color: var(--primary);
    place-items: center;
}

.login-feature-title,
.login-feature-description {
    margin: 0;
}

.login-feature-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.login-feature-description {
    margin-top: 0.125rem;
    color: color-mix(in srgb, var(--login-presentation-text) 78%, transparent);
    font-size: 0.875rem;
}

.login-authentication {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.25rem, 5vw, 4rem);
}

.login-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 clamp(3rem, 8vh, 5rem);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-brand .web-icon {
    width: 1rem;
    height: 1rem;
}

.login-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.login-introduction {
    margin: 0.75rem 0 2rem;
    color: var(--text-muted);
}

.login-error {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    background: var(--danger-surface);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-control);
    color: var(--danger-text);
}

.login-form {
    display: grid;
    gap: 1.375rem;
}

.login-field {
    display: grid;
    gap: 0.5rem;
}

.login-label {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 650;
}

.login-input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 0.875rem;
    background: var(--login-input-surface);
    border: 1px solid var(--login-input-border);
    border-radius: var(--radius-control);
    color: var(--text);
    font: inherit;
}

.login-input:focus-visible,
.login-submit:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.login-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.login-submit {
    min-height: 3.5rem;
    margin-top: 0.375rem;
    padding: 0.625rem 1rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    color: var(--primary-text);
    cursor: pointer;
    font: inherit;
    font-weight: 400;
    box-shadow: 0 0.75rem 1.5rem rgb(23 107 67 / 18%);
}

.login-submit:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

@media (max-width: 52rem) {
    .login-shell {
        width: min(100%, 30rem);
    }

    .login-card {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .login-presentation {
        display: none;
    }

    .login-authentication {
        padding: clamp(1.5rem, 8vw, 3rem);
    }

    .login-card-header {
        margin-bottom: 2.75rem;
    }
}

@media (max-width: 23rem) {
    .login-page {
        padding: 0.75rem;
    }

    .login-card {
        border-radius: 1rem;
    }
}

.beheer-body {
    min-width: 20rem;
    color-scheme: light;
    --page-background: #f7f8f8;
    --page-accent: #f1f3f4;
    --surface: #ffffff;
    --surface-raised: #fbfcfc;
    --text: #111b32;
    --text-muted: #48556b;
    --border: #e9dfcd;
    --primary: #176b43;
    --primary-hover: #105637;
    --primary-text: #ffffff;
    --shadow: 0 1.25rem 3.5rem rgb(30 37 45 / 12%);
    --beheer-icon: #cf9c39;
    --beheer-navigation-active-surface: #e4f3eb;
    --beheer-navigation-active-border: #a7dfc4;
    --beheer-navigation-hover-surface: #f2f8f4;
    --beheer-navigation-hover-border: #c9e8d7;
    --beheer-navigation-active-hover-surface: #dcefe4;
    --beheer-paneel-header-background:
        radial-gradient(ellipse 42% 190% at 18% -104%, #ffffff 0 62%, transparent 63%),
        linear-gradient(105deg, #dcefe4 0%, #edf7f0 42%, #ffffff 72%);
    --beheer-paneel-icon-surface: #ffffff;
    --beheer-paneel-icon-border: #c9dfd0;
    --beheer-dashboard-hero-image-opacity: 0.95;
    background: var(--page-background);
}

@media (prefers-color-scheme: dark) {
    .beheer-body:not(.kleurmodus--licht):not(.kleurmodus--donker) {
        color-scheme: dark;
        --page-background: #071b16;
        --page-accent: #0b2b21;
        --surface: #0c211a;
        --surface-raised: #112a22;
        --text: #effaf3;
        --text-muted: #a9c0b4;
        --border: #29483b;
        --primary: #21b96d;
        --primary-hover: #37d686;
        --primary-text: #ffffff;
        --focus-ring: #f0bf48;
        --shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 32%);
        --beheer-icon: #e5b337;
        --beheer-navigation-active-surface: #0d3728;
        --beheer-navigation-active-border: #218455;
        --beheer-navigation-hover-surface: #112d23;
        --beheer-navigation-hover-border: #35634d;
        --beheer-navigation-active-hover-surface: #10412f;
        --beheer-paneel-header-background:
            radial-gradient(ellipse 42% 190% at 18% -104%, #1d5740 0 62%, transparent 63%),
            linear-gradient(105deg, #102f24 0%, #0e281f 58%, #0c211a 100%);
        --beheer-paneel-icon-surface: #1a3c2e;
        --beheer-paneel-icon-border: #315f49;
        --beheer-dashboard-hero-image-opacity: 0.28;
    }
}

.beheer-body.kleurmodus--donker {
    color-scheme: dark;
    --page-background: #071b16;
    --page-accent: #0b2b21;
    --surface: #0c211a;
    --surface-raised: #112a22;
    --text: #effaf3;
    --text-muted: #a9c0b4;
    --border: #29483b;
    --primary: #21b96d;
    --primary-hover: #37d686;
    --primary-text: #ffffff;
    --focus-ring: #f0bf48;
    --shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 32%);
    --beheer-icon: #e5b337;
    --beheer-navigation-active-surface: #0d3728;
    --beheer-navigation-active-border: #218455;
    --beheer-navigation-hover-surface: #112d23;
    --beheer-navigation-hover-border: #35634d;
    --beheer-navigation-active-hover-surface: #10412f;
    --beheer-paneel-header-background:
        radial-gradient(ellipse 42% 190% at 18% -104%, #1d5740 0 62%, transparent 63%),
        linear-gradient(105deg, #102f24 0%, #0e281f 58%, #0c211a 100%);
    --beheer-paneel-icon-surface: #1a3c2e;
    --beheer-paneel-icon-border: #315f49;
    --beheer-dashboard-hero-image-opacity: 0.28;
}

.beheer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.75rem;
    padding: 0.75rem clamp(1rem, 4vw, 3rem);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.beheer-brand-kicker,
.beheer-kicker {
    margin: 0;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.beheer-brand-title {
    margin: 0.125rem 0 0;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}

.beheer-header-actions,
.beheer-profiel {
    display: flex;
    align-items: center;
}

.beheer-header-actions {
    gap: 1rem;
}

.kleurmodus-toggle {
    display: grid;
    position: relative;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0;
    place-items: center;
}

.kleurmodus-toggle .web-icon {
    grid-area: 1 / 1;
}

.kleurmodus-toggle .web-icon--lichte-modus {
    display: none;
}

.kleurmodus-toggle:hover {
    background: var(--surface-raised);
    border-color: var(--primary);
    color: var(--primary);
}

.kleurmodus-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.kleurmodus--donker .kleurmodus-toggle .web-icon--donkere-modus {
    display: none;
}

.kleurmodus--donker .kleurmodus-toggle .web-icon--lichte-modus {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    body:not(.kleurmodus--licht):not(.kleurmodus--donker) .kleurmodus-toggle .web-icon--donkere-modus {
        display: none;
    }

    body:not(.kleurmodus--licht):not(.kleurmodus--donker) .kleurmodus-toggle .web-icon--lichte-modus {
        display: inline-block;
    }
}

.beheer-profiel {
    position: relative;
}

.beheer-profiel-avatar {
    display: grid;
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--primary);
    border-radius: 999px;
    color: var(--primary-text);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1;
    place-items: center;
}

.beheer-profiel-avatar::after {
    position: absolute;
    z-index: 1;
    top: calc(100% + 0.5rem);
    right: 0;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.5rem 0.625rem;
    background: var(--text);
    border-radius: var(--radius-control);
    color: var(--primary-text);
    content: attr(data-tooltip);
    font-size: 0.875rem;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.beheer-profiel-avatar:hover::after {
    opacity: 1;
}

.beheer-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: center;
    min-height: 2rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
}

.beheer-logout .web-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.beheer-logout:hover {
    background: var(--surface-raised);
    border-color: var(--primary);
}

.beheer-logout:focus-visible,
.beheer-navigation-link:focus-visible,
.beheer-primary-action:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-layout {
    display: flex;
    min-height: calc(100vh - 4.75rem);
}

.beheer-toast {
    --beheer-toast-status: #21a744;
    display: flex;
    position: fixed;
    z-index: 10;
    top: 1.5rem;
    right: 1.5rem;
    width: min(26rem, calc(100vw - 3rem));
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 0.3125rem solid var(--beheer-toast-status);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
}

.beheer-toast-icon {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    background: var(--beheer-toast-status);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
}

.beheer-toast-icon .web-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.beheer-toast--info {
    --beheer-toast-status: #2c6ecb;
}

.beheer-toast--warning {
    --beheer-toast-status: #d88719;
}

.beheer-toast--error {
    --beheer-toast-status: #b9352e;
}

.beheer-toast-title,
.beheer-toast-message {
    margin: 0;
}

.beheer-toast-close {
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0;
}

.beheer-toast-close .web-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.beheer-toast-close:hover {
    color: var(--text);
}

.beheer-toast-close:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-toast-title {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 700;
}

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

.beheer-navigation {
    box-sizing: border-box;
    display: grid;
    position: relative;
    align-content: start;
    gap: 0.25rem;
    min-width: 4rem;
    padding: 1rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
    flex: 0 0 auto;
    width: 17.5rem;
    transition: width 360ms cubic-bezier(0.2, 0.7, 0.2, 1), padding 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.beheer-navigation-toggle {
    display: grid;
    position: absolute;
    z-index: 1;
    top: 1.5rem;
    right: -1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 0.25rem 0.75rem rgb(22 58 37 / 12%);
    color: var(--primary);
    cursor: pointer;
    font-size: 0;
    place-items: center;
}

.beheer-navigation-toggle .web-icon--navigatie-uitklappen {
    display: none;
}

.beheer-layout--collapsed {
}

.beheer-layout--collapsed .beheer-navigation {
    width: 6rem;
    padding: 1rem 0.5rem;
}

.beheer-layout--collapsed .beheer-navigation-link {
    box-sizing: border-box;
    justify-self: center;
    justify-content: center;
    width: 3rem;
    min-height: 3rem;
    height: 3rem;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    font-size: 0;
}

.beheer-layout--collapsed .beheer-navigation-toggle {
    top: 1.25rem;
    right: -1.5rem;
}

.beheer-layout--collapsed .beheer-navigation-link .web-icon {
    margin-right: 0;
}

.beheer-layout--collapsed .beheer-navigation-toggle .web-icon--navigatie-inklappen {
    display: none;
}

.beheer-layout--collapsed .beheer-navigation-toggle .web-icon--navigatie-uitklappen {
    display: inline-block;
}

.beheer-navigation-link {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    margin-right: 1rem;
    overflow: hidden;
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--text);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: padding 360ms cubic-bezier(0.2, 0.7, 0.2, 1), font-size 180ms ease, background-color 180ms ease;
}

.beheer-content {
    flex: 1 1 auto;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .beheer-layout,
    .beheer-navigation,
    .beheer-navigation-link {
        transition: none;
    }
}

.beheer-navigation-link .web-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    color: var(--beheer-icon);
}

.beheer-navigation-link--active {
    background: var(--beheer-navigation-active-surface);
    border-color: var(--beheer-navigation-active-border);
    color: var(--primary);
}

.beheer-navigation-link:hover {
    background: var(--beheer-navigation-hover-surface);
    border-color: var(--beheer-navigation-hover-border);
}

.beheer-navigation-link--active:hover {
    background: var(--beheer-navigation-active-hover-surface);
}

.beheer-content {
    display: grid;
    align-content: start;
    width: min(100%, 96rem);
    padding: clamp(1.5rem, 5vw, 4rem);
}

.beheer-title {
    max-width: 40rem;
    margin: 0.25rem 0 0;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.beheer-introduction {
    max-width: 40rem;
    margin: 1rem 0 2rem;
    color: var(--text-muted);
    font-size: 1.0625rem;
}

.beheer-card {
    display: grid;
    gap: 1rem;
    max-width: 32rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

.beheer-card-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.beheer-card-text {
    margin: 0;
    color: var(--text-muted);
}

.beheer-overzicht-card {
    max-width: 100%;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.datatable-empty-state {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.5rem;
    min-height: 14rem;
    padding: 1.5rem 2.5rem 2rem;
    text-align: center;
}

.datatable-empty-state-icon {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.5rem;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    border-radius: 999px;
    color: var(--text-muted);
    place-items: center;
}

.datatable-empty-state-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
}

.datatable-empty-state-description {
    margin: 0;
    color: var(--text-muted);
}

.datatable {
    display: grid;
}

.datatable-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 3rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.datatable-filter-cell {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    background: var(--surface);
    vertical-align: top;
}

.datatable-filter {
    display: grid;
    flex: 1 1 16rem;
    gap: 0.375rem;
}

.datatable-filter-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 650;
}

.datatable-filter-control {
    position: relative;
}

.datatable-filter-input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    font: 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

.datatable-filter-control > .web-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    opacity: 0.8;
    pointer-events: none;
    transform: translateY(-50%);
}

.datatable-filter-input:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.datatable-table-scroll {
    padding: 0 1.5rem;
    overflow-x: auto;
}

.datatable-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: left;
}

.datatable-table th,
.datatable-table td {
    padding: 0.625rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.datatable-table th {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 750;
}

.datatable-table td {
    font-size: 0.9375rem;
    vertical-align: middle;
}

.datatable-table tbody tr {
    height: 3.5rem;
}

.datatable-table tbody td {
    box-sizing: border-box;
    height: 3.5rem;
}

.datatable-row-action {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--primary);
    cursor: pointer;
    font-size: 0;
    text-decoration: none;
}

.datatable-action-cell {
    text-align: right;
}

.datatable-row-action--portaal {
    width: auto;
    height: auto;
    min-height: 2rem;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border: 0;
    border-radius: var(--radius-control);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
}

.datatable-row-action--beheeractie {
    width: auto;
    height: auto;
    min-height: 2rem;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border: 0;
    border-radius: var(--radius-control);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
}

.datatable-row-action--portaal:hover,
.datatable-row-action--beheeractie:hover {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--primary);
}

.datatable-action-cell--portaal {
    width: 12rem;
}

.datatable-action-cell--beheeractie {
    width: 10rem;
}

.datatable-row-action:hover {
    background: var(--surface-raised);
    color: var(--primary-hover);
}

.datatable-row-action:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-iframe-modal {
    width: min(calc(100% - 2rem), 40rem);
    max-height: min(calc(100vh - 2rem), 44rem);
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 4rem rgb(20 31 48 / 24%);
    color: var(--text);
    overflow: hidden;
}

.beheer-iframe-modal::backdrop {
    background: rgb(26 39 58 / 48%);
    backdrop-filter: blur(0.25rem);
}

.beheer-iframe-modal-close {
    display: grid;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    place-items: center;
}

.beheer-iframe-modal-close:hover {
    background: var(--surface-raised);
}

.beheer-iframe-modal-close:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-iframe-modal-frame {
    display: block;
    width: 100%;
    height: min(33rem, calc(100vh - 2rem));
    border: 0;
}

.beheer-iframe-form-body {
    height: 100vh;
    min-height: 0;
    background: var(--surface);
    overflow: hidden;
}

.beheer-iframe-form {
    display: grid;
    height: 100vh;
    min-height: 0;
    grid-template-rows: auto 1fr auto;
}

.beheer-iframe-form-header {
    padding: 1.5rem 5rem 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
}

.beheer-iframe-form-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.beheer-iframe-form-header-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.beheer-iframe-form-title {
    margin: 0;
    font-size: 1.25rem;
}

.beheer-iframe-form-description {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.beheer-iframe-form-content {
    display: grid;
    align-content: start;
    min-height: 0;
    padding: 1.75rem 2rem;
    gap: 1.5rem;
    overflow-y: auto;
}

.beheer-iframe-form-current {
    display: grid;
    gap: 0.75rem;
}

.beheer-iframe-form-current-title {
    margin: 0;
    font-size: 1rem;
}

.beheer-iframe-form-current-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 0.75rem;
}

.beheer-iframe-form-current-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.beheer-iframe-form-current-copy {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.beheer-iframe-form-current-summary,
.beheer-iframe-form-current-meta {
    margin: 0;
    line-height: 1.5;
}

.beheer-iframe-form-current-summary {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.beheer-iframe-form-current-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.beheer-iframe-form-end-date {
    display: grid;
    gap: 0.5rem;
}

.beheer-iframe-form-end-date .beheer-form-label {
    font-size: 0.9375rem;
    font-weight: 500;
}

.beheer-iframe-form-end-date .beheer-form-input {
    height: 3rem;
    background: var(--surface);
}

.beheer-iframe-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.beheer-iframe-form-footer .beheer-iframe-form-action {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
}

.datatable-table tbody tr:nth-child(even) {
    background: var(--surface-raised);
}

.datatable-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.datatable-table tbody tr.datatable-row--actionable {
    cursor: pointer;
}

.datatable-table tbody tr[hidden] {
    display: none;
}

.datatable-result-count {
    margin: 0;
    padding: 1.25rem 3rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.beheer-form {
    display: grid;
    grid-template-rows: auto auto;
}

.beheer-form-card {
    gap: 0;
    max-width: 100%;
    padding: 0;
    box-shadow: 0 0.75rem 2rem rgb(30 37 45 / 8%);
    overflow: hidden;
}

.beheer-medewerker-overzicht-content {
    padding: 0;
}

.paneel-acties {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: relative;
    padding: 1.5rem 2.5rem;
}

.paneel-acties::after {
    position: absolute;
    right: 2.5rem;
    bottom: 0;
    left: 2.5rem;
    height: 1px;
    background: var(--border);
    content: '';
}

.paneel-acties-primair,
.paneel-acties-menu-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-control);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-decoration: none;
}

.paneel-acties-primair {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--primary-text);
}

.paneel-acties-primair:not(:disabled):hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.paneel-acties-primair:disabled {
    background: color-mix(in srgb, var(--text-muted) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--text-muted) 42%, var(--border));
    color: color-mix(in srgb, var(--text-muted) 72%, var(--surface));
    box-shadow: none;
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.72;
}

.paneel-acties-primair:focus-visible,
.paneel-acties-menu-knop:focus-visible,
.paneel-acties-secundair:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.paneel-acties-menu {
    position: relative;
}

.paneel-acties-menu-knop {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--text);
    list-style: none;
    user-select: none;
}

.paneel-acties-menu-knop::-webkit-details-marker {
    display: none;
}

.paneel-acties-menu-knop:hover,
.paneel-acties-menu[open] .paneel-acties-menu-knop {
    border-color: var(--primary);
    color: var(--primary);
}

.paneel-acties-menu-knop .web-icon--uitklappen,
.beheer-paneel-header-acties-knop .web-icon--uitklappen {
    transition: transform 160ms ease;
}

.paneel-acties-menu[open] .web-icon--uitklappen,
.beheer-paneel-header-acties[open] .web-icon--uitklappen {
    transform: rotate(180deg);
}

.paneel-acties-menu-lijst {
    position: absolute;
    z-index: 10;
    top: calc(100% + 0.5rem);
    left: 0;
    display: grid;
    min-width: 15rem;
    margin: 0;
    padding: 0.375rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
    list-style: none;
}

.paneel-acties-form {
    margin: 0;
}

.paneel-acties-secundair {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
}

.paneel-acties-secundair:hover {
    background: var(--page-accent);
    color: var(--primary);
}

.beheer-paneel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 6rem;
    padding: 1.25rem 1.5rem;
    background: var(--beheer-paneel-header-background);
    border-bottom: 1px solid var(--border);
}

.beheer-paneel-icon {
    display: grid;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    place-items: center;
    position: relative;
    background: var(--beheer-paneel-icon-surface);
    border: 1px solid var(--beheer-paneel-icon-border);
    border-radius: 999px;
    color: var(--beheer-icon);
}

.beheer-paneel-header-copy {
    display: grid;
    gap: 0.25rem;
}

.beheer-paneel-title {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
}

.beheer-paneel-subtitle {
    margin: 0;
    color: var(--text-muted);
}

.beheer-paneel-header-acties {
    position: relative;
    margin-left: auto;
}

.beheer-paneel-header-acties-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    list-style: none;
    user-select: none;
    white-space: nowrap;
}

.beheer-paneel-header-acties-knop::-webkit-details-marker {
    display: none;
}

.beheer-paneel-header-acties-knop:hover,
.beheer-paneel-header-acties[open] .beheer-paneel-header-acties-knop {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-raised));
    border-color: var(--primary);
}

.beheer-paneel-header-acties-knop:focus-visible,
.beheer-paneel-header-acties-item:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-paneel-header-acties-lijst {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.5rem);
    right: 0;
    display: grid;
    min-width: 15rem;
    margin: 0;
    padding: 0.375rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
    list-style: none;
}

.beheer-paneel-header-acties-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
}

.beheer-paneel-header-acties-item:hover {
    background: var(--page-accent);
    color: var(--primary);
}

.beheer-form-content {
    display: grid;
    grid-template-columns: minmax(0, 58rem);
    gap: 0.625rem;
    align-content: start;
    justify-content: center;
    padding: 1.5rem;
}

.beheer-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border);
}

.beheer-tabs-list {
    display: flex;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0 1.5rem;
    list-style: none;
}

.beheer-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.125rem;
    padding: 0.75rem 0.875rem 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.beheer-tab:hover {
    color: var(--primary);
}

.beheer-tab:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.beheer-tab--active {
    color: var(--primary);
}

.beheer-tab-label {
    display: flex;
    align-self: stretch;
    align-items: center;
    margin-bottom: -1px;
    padding-bottom: 0.625rem;
    border-bottom: 0.1875rem solid transparent;
}

.beheer-tab--active .beheer-tab-label {
    border-bottom-color: var(--primary);
}

.beheer-tab-count {
    display: grid;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    place-items: center;
}

.beheer-form-field {
    display: grid;
    gap: 0.375rem;
}

.beheer-form-instruction {
    margin: 0 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.beheer-form-label {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.beheer-form-input {
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    font: 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

.beheer-form-input--unavailable {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface-raised) 70%, var(--border));
    cursor: default;
}

.beheer-form-help {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

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

.beheer-form-input:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.beheer-form-error {
    margin: 0;
    padding: 0.75rem 1rem;
    background: #fff7f6;
    border: 1px solid #e8b5b0;
    border-left: 0.25rem solid #b9352e;
    border-radius: 0.5rem;
    color: #7b2420;
    font-size: 0.875rem;
}

.beheer-form-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    background: var(--surface-raised);
    border-top: 1px solid var(--border);
}

.beheer-form-footer .beheer-primary-action {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

.beheer-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: fit-content;
    min-height: 3rem;
    padding: 0.625rem 1rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    color: var(--primary-text);
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
}

.beheer-primary-action:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.beheer-secondary-action {
    display: inline-flex;
    width: fit-content;
    min-height: 3rem;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.625rem 1rem;
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    color: var(--primary);
    font-weight: 400;
    text-decoration: none;
}

.beheer-secondary-action:hover {
    background: var(--page-accent);
}

.beheer-secondary-action:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 46rem) {
    .beheer-layout {
        display: grid;
        grid-template-columns: 1fr;
    }

    .beheer-navigation {
        width: auto;
        padding: 0.75rem 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .beheer-navigation-link {
        width: fit-content;
    }

    .beheer-paneel-header,
    .beheer-form-content,
    .beheer-form-footer {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .beheer-paneel-header {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1.25rem;
    }

    .datatable-filters,
    .datatable-result-count {
        padding-right: 2.5rem;
        padding-left: 2.5rem;
    }

    .datatable-table th,
    .datatable-table td {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .datatable-table-scroll {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .paneel-acties {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

.hovenierportaal-content {
    padding: clamp(1.5rem, 4vw, 3rem);
}

.beheer-dashboard {
    display: grid;
    width: 100%;
    gap: 1.25rem;
}

.beheer-dashboard-hero,
.beheer-dashboard-statistic,
.beheer-dashboard-section,
.beheer-dashboard-about {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 0.75rem 2rem rgb(30 37 45 / 7%);
}

.beheer-dashboard-hero {
    display: grid;
    position: relative;
    min-height: 12.75rem;
    align-items: center;
    overflow: hidden;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background:
        radial-gradient(circle at 82% 140%, color-mix(in srgb, var(--primary) 18%, transparent) 0 18rem, transparent 18.1rem),
        linear-gradient(105deg, var(--surface) 0 62%, color-mix(in srgb, var(--primary) 9%, var(--surface)) 100%);
}

.beheer-dashboard-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 47rem;
}

.beheer-dashboard-kicker {
    margin: 0 0 0.875rem;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.beheer-dashboard-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.beheer-dashboard-introduction {
    max-width: 43rem;
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.beheer-dashboard-hero-art {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            var(--surface) 0%,
            color-mix(in srgb, var(--surface) 96%, transparent) 32%,
            transparent 68%
        ),
        url('/assets/images/beheer-dashboard-hero.png') center / cover no-repeat;
    opacity: var(--beheer-dashboard-hero-image-opacity);
    pointer-events: none;
}

.beheer-dashboard-statistics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.beheer-dashboard-statistic {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 1rem;
    min-height: 8rem;
    padding: 1.25rem 1.5rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

a.beheer-dashboard-statistic:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-0.125rem);
}

.beheer-dashboard-statistic:focus-visible,
.beheer-dashboard-quick-action:focus-visible,
.beheer-dashboard-activity-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-dashboard-statistic > .web-icon--volgende,
.beheer-dashboard-quick-action > .web-icon--volgende {
    color: var(--text-muted);
}

.beheer-dashboard-statistic-icon,
.beheer-dashboard-activity-icon,
.beheer-dashboard-about-icon {
    display: grid;
    flex: 0 0 auto;
    border-radius: 999px;
    place-items: center;
}

.beheer-dashboard-statistic-icon {
    width: 4.5rem;
    height: 4.5rem;
}

.beheer-dashboard-statistic-icon .web-icon {
    width: 2rem;
    height: 2rem;
}

.beheer-dashboard-statistic-icon--green,
.beheer-dashboard-activity-icon--green {
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
    color: var(--primary);
}

.beheer-dashboard-statistic-icon--amber,
.beheer-dashboard-activity-icon--amber {
    background: color-mix(in srgb, #dda52f 18%, var(--surface));
    color: color-mix(in srgb, #b87b00 82%, var(--text));
}

.beheer-dashboard-statistic-icon--red,
.beheer-dashboard-activity-icon--red {
    background: color-mix(in srgb, #d6534d 15%, var(--surface));
    color: color-mix(in srgb, #c33934 82%, var(--text));
}

.beheer-dashboard-statistic-title,
.beheer-dashboard-statistic-value,
.beheer-dashboard-statistic-description {
    display: block;
    margin: 0;
}

.beheer-dashboard-statistic-copy,
.beheer-dashboard-quick-action-copy {
    display: grid;
    min-width: 0;
}

.beheer-dashboard-statistic-title {
    font-size: 0.9375rem;
}

.beheer-dashboard-statistic-value {
    margin-top: 0.125rem;
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.beheer-dashboard-statistic-description {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.beheer-dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1.25rem;
}

.beheer-dashboard-section {
    min-width: 0;
    padding: 1.5rem;
}

.beheer-dashboard-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    justify-content: space-between;
}

.beheer-dashboard-section-title,
.beheer-dashboard-section-introduction {
    margin: 0;
}

.beheer-dashboard-section-title {
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}

.beheer-dashboard-section-introduction {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.beheer-dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.beheer-dashboard-quick-action {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    min-height: 5.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    text-decoration: none;
}

.beheer-dashboard-quick-action:hover {
    background: var(--beheer-navigation-hover-surface);
    border-color: var(--primary);
}

.beheer-dashboard-quick-action-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary);
    place-items: center;
}

.beheer-dashboard-quick-action-icon .web-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.beheer-dashboard-quick-action-title,
.beheer-dashboard-quick-action-description {
    display: block;
    margin: 0;
}

.beheer-dashboard-quick-action-title {
    font-size: 0.875rem;
    font-weight: 700;
}

.beheer-dashboard-quick-action-description {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.beheer-dashboard-activity-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-size: 0.8125rem;
    text-decoration: none;
}

.beheer-dashboard-activity-link:hover {
    text-decoration: underline;
}

.beheer-dashboard-activity-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.beheer-dashboard-activity-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}

.beheer-dashboard-activity-item:last-child {
    border-bottom: 0;
}

.beheer-dashboard-activity-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.beheer-dashboard-activity-title,
.beheer-dashboard-activity-description {
    margin: 0;
}

.beheer-dashboard-activity-title {
    font-size: 0.875rem;
}

.beheer-dashboard-activity-description,
.beheer-dashboard-activity-time {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.beheer-dashboard-activity-description {
    margin-top: 0.125rem;
}

.beheer-dashboard-activity-time {
    white-space: nowrap;
}

.beheer-dashboard-about {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.beheer-dashboard-about-icon {
    width: 3rem;
    height: 3rem;
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
    color: var(--primary);
}

.beheer-dashboard-about-title,
.beheer-dashboard-about-text {
    margin: 0;
}

.beheer-dashboard-about-title {
    font-size: 1rem;
}

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

.hovenierportaal-welcome {
    max-width: 46rem;
}

.exception-shell-body {
    background: var(--page-background);
}

.exception-shell-main {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    align-content: start;
    width: min(100%, 96rem);
    padding: clamp(1.5rem, 5vw, 4rem);
}

.not-found-main {
    display: grid;
    width: min(100%, 96rem);
    min-height: calc(100vh - 4.75rem);
    align-content: start;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 4rem);
}

.exception-generic-content {
    display: grid;
    width: min(100%, 42rem);
    align-self: center;
    justify-self: center;
    justify-items: center;
    text-align: center;
}

.not-found-card {
    width: 100%;
    align-self: start;
    justify-self: stretch;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.75rem rgb(30 37 45 / 8%);
}

.not-found-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: var(--beheer-paneel-header-background);
    border-bottom: 1px solid var(--border);
}

.not-found-banner-icon {
    display: grid;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    background: var(--surface);
    border-radius: 999px;
    color: #d99a22;
    place-items: center;
}

.not-found-banner-icon .web-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.not-found-banner-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.not-found-banner-message {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.not-found-content {
    display: grid;
    min-height: 35rem;
    justify-items: center;
    align-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.not-found-illustration {
    display: grid;
    position: relative;
    width: 9rem;
    height: 8rem;
    margin-bottom: 1.25rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-radius: 50% 45% 48% 42%;
    color: #3a8a67;
    place-items: center;
}

.not-found-document-icon .web-icon {
    width: 5rem;
    height: 5rem;
}

.not-found-error-icon {
    display: grid;
    position: absolute;
    right: 0;
    bottom: 0.5rem;
    width: 3.25rem;
    height: 3.25rem;
    background: var(--surface);
    border: 0.25rem solid var(--surface);
    border-radius: 999px;
    color: #d6534d;
    filter: drop-shadow(0 0.3rem 0.4rem rgb(30 37 45 / 15%));
    place-items: center;
}

.not-found-error-icon .web-icon {
    width: 2.75rem;
    height: 2.75rem;
}

.not-found-title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: -0.04em;
}

.not-found-message {
    max-width: 35rem;
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.75rem;
}

.not-found-actions .beheer-primary-action,
.not-found-actions .beheer-secondary-action {
    min-width: 9.5rem;
}

.not-found-content .exception-id {
    min-width: min(100%, 25rem);
    margin-top: 2rem;
}

.exception-alert-icon {
    display: grid;
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: 1.25rem;
    background: color-mix(in srgb, #d6534d 16%, var(--surface));
    border-radius: 999px;
    color: #ad201d;
    place-items: center;
}

.exception-alert-icon .web-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.exception-alert-icon--small {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
}

.exception-alert-icon--small .web-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.exception-generic-title,
.bootstrap-exception-title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.exception-generic-message,
.bootstrap-exception-message {
    margin: 0.125rem 0;
    color: var(--text-muted);
    font-size: 1.0625rem;
}

.exception-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.exception-action {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.625rem;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    font-weight: 400;
    text-decoration: none;
}

.exception-action--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
}

.exception-action--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.exception-action--secondary {
    background: var(--surface);
    color: var(--text);
}

.exception-action--secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.exception-action:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.exception-id {
    min-width: min(100%, 20rem);
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
    text-align: center;
}

.exception-detail-content {
    display: grid;
    position: relative;
    width: min(100%, 76rem);
    gap: 1rem;
    justify-self: center;
}

.exception-environment-badge {
    position: absolute;
    z-index: 1;
    top: -3.5rem;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, #e48356 16%, var(--surface));
    border-radius: 0 0 0.5rem 0.5rem;
    color: #a53a2d;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.03em;
}

.exception-summary-card,
.exception-panel,
.exception-collapsed-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 0.5rem 1.5rem rgb(30 37 45 / 5%);
}

.exception-summary-card {
    overflow: hidden;
    background: color-mix(in srgb, #d6534d 7%, var(--surface));
    border-color: color-mix(in srgb, #d6534d 38%, var(--border));
}

.exception-detail-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
}

.exception-detail-title {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.5rem, 4vw, 2rem);
    letter-spacing: -0.03em;
}

.exception-detail-message {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
}

.exception-location {
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
    color: color-mix(in srgb, #d6534d 72%, var(--text));
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
}

.exception-summary-card .exception-actions {
    justify-content: flex-start;
    margin: 0;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-top: 1px solid color-mix(in srgb, #d6534d 38%, var(--border));
}

.exception-panel {
    padding: 1.5rem;
}

.exception-panel-title {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.exception-trace {
    max-height: 28rem;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    background: var(--page-background);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    font: 0.8125rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
}

.exception-request-grid {
    display: grid;
    gap: 0.5rem;
}

.exception-request-value {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    gap: 1rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
}

.exception-request-value strong {
    color: var(--text-muted);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
}

.exception-request-value span {
    overflow-wrap: anywhere;
}

.exception-collapsed-panel {
    overflow: hidden;
}

.exception-collapsed-panel summary {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 650;
}

.exception-collapsed-panel summary .web-icon--uitklappen {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 160ms ease;
}

.exception-collapsed-panel[open] > summary .web-icon--uitklappen {
    transform: rotate(180deg);
}

.exception-panel-count {
    min-width: 1.5rem;
    padding: 0.125rem 0.375rem;
    background: var(--page-accent);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
}

.exception-collapsed-panel .exception-request-grid,
.exception-collapsed-copy {
    margin: 0;
    padding: 0 1.5rem 1.25rem;
}

.exception-collapsed-copy {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.bootstrap-exception-body {
    background: var(--page-background);
}

.bootstrap-exception-page {
    display: grid;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 2rem;
    place-items: center;
}

.bootstrap-exception-page::before,
.bootstrap-exception-page::after {
    position: absolute;
    width: min(42vw, 34rem);
    height: min(35vw, 25rem);
    background: #e7f4eb;
    content: '';
    opacity: 0.9;
    transform: rotate(-18deg);
}

.bootstrap-exception-page::before {
    top: -13rem;
    left: -9rem;
    border-radius: 42% 58% 64% 36%;
}

.bootstrap-exception-page::after {
    right: -10rem;
    bottom: -12rem;
    border-radius: 58% 42% 35% 65%;
}

.bootstrap-exception-content {
    display: grid;
    position: relative;
    z-index: 1;
    width: min(100%, 36rem);
    justify-items: center;
    text-align: center;
}

.bootstrap-exception-brand {
    margin: 0 0 2.25rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bootstrap-exception-content .exception-action {
    margin-top: 2rem;
}

@media (max-width: 46rem) {
    .exception-shell-main {
        min-height: calc(100vh - 5rem);
        padding: 1.25rem;
    }

    .not-found-main {
        padding: 1.25rem;
    }

    .exception-detail-heading,
    .exception-summary-card .exception-actions,
    .exception-panel {
        padding: 1.25rem;
    }

    .exception-request-value {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .exception-environment-badge {
        top: -1.25rem;
        right: -1.25rem;
    }

    .not-found-banner {
        align-items: flex-start;
        padding: 1.25rem;
    }

    .not-found-content {
        min-height: 30rem;
        padding: 2rem 1.25rem;
    }

    .not-found-actions,
    .not-found-actions .beheer-primary-action,
    .not-found-actions .beheer-secondary-action {
        width: 100%;
    }

    .beheer-dashboard-statistics,
    .beheer-dashboard-columns,
    .beheer-dashboard-quick-actions {
        grid-template-columns: 1fr;
    }

    .beheer-dashboard-hero-art {
        background-position: 68% center;
        opacity: 0.2;
    }

    .beheer-dashboard-statistic {
        grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    }

    .beheer-dashboard-statistic-icon {
        width: 3.5rem;
        height: 3.5rem;
    }

    .beheer-dashboard-section-heading {
        display: grid;
    }

    .beheer-dashboard-activity-item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .beheer-dashboard-activity-time {
        grid-column: 2;
    }
}