:root {
    --vv-bg: #FAF8F5;
    --vv-surface: #FFFFFF;
    --vv-surface-warm: #F2EDE4;
    --vv-surface-sand: #EBE5DB;
    --vv-border: #E5DBCC;
    --vv-border-light: #F0EAE1;
    --vv-text: #191919;
    --vv-text-secondary: #4A4A4A;
    --vv-text-muted: #595959;
    --vv-accent: #EDFF00;
    --vv-accent-dark: #191919;
    --vv-radius-sm: 6px;
    --vv-radius-md: 10px;
    --vv-radius-lg: 16px;
    --vv-radius-full: 9999px;
    --vv-shadow-sm: 0 1px 3px rgba(25, 25, 25, 0.04);
    --vv-shadow-md: 0 4px 12px rgba(25, 25, 25, 0.06);
    --vv-shadow-lg: 0 12px 30px rgba(25, 25, 25, 0.08);
    --vv-font: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

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

body {
    font-family: var(--vv-font);
    background-color: var(--vv-bg);
    color: var(--vv-text);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
    color: var(--vv-text);
    font-weight: 700;
    line-height: 1.25;
}

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

:focus-visible {
    outline: 2px solid var(--vv-text);
    outline-offset: 2px;
}

::placeholder {
    color: var(--vv-text-muted);
    opacity: 1;
}

.skip-to-content {
    position: absolute;
    top: -9999px;
    left: 16px;
    background: var(--vv-text);
    color: #FFFFFF;
    padding: 10px 18px;
    border-radius: var(--vv-radius-md);
    font-weight: 700;
    font-size: 14px;
    z-index: 9999;
    text-decoration: underline;
    transition: top 0.15s ease;
}

.skip-to-content:focus {
    top: 16px;
    outline: 3px solid var(--vv-accent);
}

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Knoppen */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--vv-radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-primary {
    background-color: var(--vv-text);
    color: #FFFFFF;
    border-color: var(--vv-text);
}

.btn-primary:hover {
    background-color: #333333;
    border-color: #333333;
}

.btn-secondary {
    background-color: var(--vv-surface);
    color: var(--vv-text);
    border-color: var(--vv-border);
}

.btn-secondary:hover {
    background-color: var(--vv-surface-warm);
    border-color: var(--vv-text);
}

.btn-danger {
    background-color: #FFF0F0;
    color: #C00000;
    border-color: #FFCCCC;
}

.btn-danger:hover {
    background-color: #C00000;
    color: #FFFFFF;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-xs {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-block {
    width: 100%;
}

/* Badges & Pills */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--vv-radius-full);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.badge-concept {
    background-color: #FFF3CD;
    color: #856404;
    border: 1px solid #FFEEBA;
}

.badge-warning {
    background-color: #F8D7DA;
    color: #721C24;
    border: 1px solid #F5C6CB;
}

.badge-success {
    background-color: #D1E7DD;
    color: #0F5132;
    border: 1px solid #BADBCC;
}

.badge-accent {
    background-color: var(--vv-accent);
    color: var(--vv-text);
    border: 1px solid rgba(0,0,0,0.1);
}

.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--vv-radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.role-hoofdbeheerder {
    background-color: var(--vv-accent);
    color: var(--vv-text);
}

.role-redacteur {
    background-color: #E2E8F0;
    color: #334155;
}

.role-medewerker {
    background-color: var(--vv-surface-sand);
    color: var(--vv-text-secondary);
}

/* Alerts */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--vv-radius-md);
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-success {
    background-color: #EDF7ED;
    color: #1E4620;
    border: 1px solid #C8E6C9;
}

.alert-error {
    background-color: #FDF2F2;
    color: #9B1C1C;
    border: 1px solid #F8B4B4;
}

/* Login Scherm */
.login-body {
    background-color: var(--vv-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.login-wrapper {
    width: 100%;
    max-width: 440px;
}

.login-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 40px 36px;
    box-shadow: var(--vv-shadow-lg);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo {
    height: 38px;
    width: auto;
    margin-bottom: 14px;
}

.badge-intranet {
    display: inline-block;
    background-color: var(--vv-accent);
    color: var(--vv-text);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 2px 10px;
    border-radius: var(--vv-radius-full);
    margin-bottom: 12px;
}

.login-title {
    font-size: 22px;
    margin-bottom: 6px;
}

.login-subtitle {
    font-size: 13px;
    color: var(--vv-text-muted);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--vv-text-secondary);
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.form-row .form-group {
    margin-bottom: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    background-color: var(--vv-surface);
    color: var(--vv-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--vv-text);
    box-shadow: 0 0 0 3px rgba(25, 25, 25, 0.08);
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.login-footer {
    margin-top: 24px;
    text-align: center;
}

.text-xs { font-size: 12px; }
.text-muted { color: var(--vv-text-muted); }

/* Hoofd Navigatie / Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 24px;
    background-color: var(--vv-surface);
    border-bottom: 1px solid var(--vv-border);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vv-text);
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: var(--vv-radius-sm);
}

.btn-sidebar-toggle:hover {
    background-color: var(--vv-surface-warm);
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    height: 24px;
    width: auto;
}

.brand-badge {
    background-color: var(--vv-accent);
    color: var(--vv-text);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: var(--vv-radius-full);
}

/* Zoek trigger */
.topbar-center {
    flex: 1;
    max-width: 460px;
    margin: 0 24px;
}

.topbar-search-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background-color: var(--vv-bg);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-full);
    color: var(--vv-text-muted);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.topbar-search-btn:hover {
    background-color: var(--vv-surface);
    border-color: var(--vv-text);
    color: var(--vv-text);
}

.topbar-search-btn span {
    flex: 1;
    text-align: left;
}

.kbd-shortcut {
    background-color: var(--vv-surface-sand);
    color: var(--vv-text);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--vv-border);
}

/* Topbar Rechterzijde */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--vv-radius-full);
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    color: var(--vv-text);
    transition: all 0.15s ease;
}

.topbar-nav-link:hover,
.topbar-nav-link.active {
    background-color: var(--vv-text);
    color: #FFFFFF;
    border-color: var(--vv-text);
}

/* Knop Bekijken als gebruiker / Voorvertoning (icon-only knop) */
.btn-preview-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    color: var(--vv-text-secondary);
    transition: all 0.15s ease;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-preview-mode:hover {
    background-color: var(--vv-text);
    color: #FFFFFF;
    border-color: var(--vv-text);
}

.btn-preview-mode.active {
    background-color: #FFF2D6;
    border-color: #F5A623;
    color: #C26A00;
}

.btn-preview-mode.active:hover {
    background-color: #C26A00;
    border-color: #C26A00;
    color: #FFFFFF;
}

/* CMS Dropdown in topbar */
.topbar-dropdown {
    position: relative;
    display: inline-block;
}

.topbar-dropdown-toggle {
    cursor: pointer;
    border: 1px solid var(--vv-border);
}

.dropdown-chevron {
    transition: transform 0.2s ease;
}

.topbar-dropdown.is-open .dropdown-chevron {
    transform: rotate(180deg);
}

.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 230px;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    box-shadow: 0 12px 32px rgba(25, 25, 25, 0.15), 0 2px 6px rgba(25, 25, 25, 0.06);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 1000;
}

.topbar-dropdown.is-open .topbar-dropdown-menu {
    display: flex;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--vv-radius-sm);
    color: var(--vv-text);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover {
    background-color: var(--vv-surface-warm);
    color: var(--vv-text);
}

.dropdown-item.active {
    background-color: var(--vv-surface-warm);
    font-weight: 600;
}

.dropdown-item svg {
    flex-shrink: 0;
    color: var(--vv-text-muted);
}

.dropdown-item:hover svg,
.dropdown-item.active svg {
    color: var(--vv-text);
}

.dropdown-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dropdown-item-text strong {
    font-size: 13px;
    line-height: 1.2;
    color: var(--vv-text);
}

.dropdown-item-text span {
    font-size: 11.5px;
    color: var(--vv-text-muted);
    line-height: 1.2;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--vv-border-light);
    margin: 4px 0;
}

.dropdown-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--vv-text-muted);
    padding: 6px 12px 2px 12px;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 3px;
    height: 34px;
    background-color: var(--vv-surface-warm);
    border-radius: var(--vv-radius-full);
    border: 1px solid var(--vv-border);
}

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--vv-text);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--vv-text);
    line-height: 1;
}

/* Dikke rolstip rechts van de naam */
.role-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: -2px;
}

.role-dot-hoofdbeheerder {
    background-color: var(--vv-accent);
    border: 1.5px solid rgba(25, 25, 25, 0.25);
}

.role-dot-redacteur {
    background-color: #CBD5E1;
    border: 1.5px solid #475569;
}

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    color: var(--vv-text-secondary);
    transition: all 0.15s ease;
}

.btn-logout:hover {
    background-color: #FFF0F0;
    color: #C00000;
    border-color: #FFCCCC;
}

/* Hoofd Applicatie Layout */
.app-layout {
    display: flex;
    min-height: calc(100vh - 64px - 60px);
}

/* Zijbalk */
.sidebar {
    width: 320px;
    flex-shrink: 0;
    background-color: var(--vv-surface);
    border-right: 1px solid var(--vv-border);
    padding: 24px 16px;
    height: calc(100vh - 64px);
    position: sticky;
    top: 64px;
    overflow-y: auto;
    transition: transform 0.2s ease, width 0.2s ease;
}

.sidebar.collapsed {
    display: none;
}

.sidebar-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vv-text-muted);
    padding: 0 10px 14px 10px;
    display: block;
}

.nav-item-overview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--vv-radius-md);
    font-weight: 600;
    font-size: 14px;
    color: var(--vv-text);
    margin-bottom: 16px;
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    transition: all 0.15s ease;
}

.nav-item-overview:hover,
.nav-item-overview.active {
    background-color: var(--vv-text);
    color: #FFFFFF;
    border-color: var(--vv-text);
}

.sidebar-gids-box {
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 10px 12px;
    margin-bottom: 16px;
}

.sidebar-gids-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--vv-text);
    padding: 7px 10px;
    border-radius: var(--vv-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.12s ease;
    border: 1px solid transparent;
}

.sidebar-gids-header:hover,
.sidebar-gids-header.active {
    background-color: var(--vv-text);
    color: #FFFFFF;
    border-color: var(--vv-text);
}

.sidebar-gids-header svg {
    flex-shrink: 0;
}

.sidebar-gids-divider {
    height: 1px;
    background-color: var(--vv-border);
    margin: 4px 0 8px 0;
}

.sidebar-gids-box .nav-category-group {
    margin-bottom: 6px;
}

.sidebar-gids-box .nav-category-group:last-child {
    margin-bottom: 0;
}

.sidebar-gids-box .nav-category-title {
    background-color: var(--vv-surface-sand);
    border: 1px solid var(--vv-border);
    color: var(--vv-text);
    font-size: 11.5px;
    font-weight: 800;
    padding: 8px 10px;
    border-radius: var(--vv-radius-sm);
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
}

.sidebar-gids-box .nav-category-title:hover {
    background-color: #E2DBD0;
    border-color: #D6CCA;
    color: var(--vv-text);
}

.sidebar-gids-box details.nav-category-group[open] > .nav-category-title {
    background-color: #E2DBD0;
    border-color: var(--vv-border);
    color: var(--vv-text);
    margin-bottom: 6px;
}

.sidebar-gids-box details.nav-category-group[open] .nav-chapter-list {
    padding: 2px 0 4px 4px;
}

.nav-category-group {
    margin-bottom: 8px;
}

.nav-category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--vv-text);
    padding: 8px 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: var(--vv-radius-sm);
    user-select: none;
    list-style: none;
}

.nav-category-title::-webkit-details-marker {
    display: none;
}

.nav-category-title:hover {
    color: var(--vv-text);
    background-color: var(--vv-bg);
}

.cat-chevron {
    transition: transform 0.2s ease;
    opacity: 0.8;
    color: var(--vv-text);
}

details.nav-category-group[open] .cat-chevron,
details.cms-cat-group[open] .cat-chevron {
    transform: rotate(180deg);
}

.nav-chapter-list {
    list-style: none;
}

.nav-chapter-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--vv-radius-sm);
    font-size: 13px;
    color: var(--vv-text-secondary);
    transition: all 0.12s ease;
}

.nav-chapter-link:hover {
    background-color: var(--vv-bg);
    color: var(--vv-text);
}

.nav-chapter-link.active {
    background-color: var(--vv-accent);
    color: var(--vv-text);
    font-weight: 700;
}

.chapter-num {
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
}

.chapter-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dot-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dot-concept {
    background-color: #E2A03F;
}

/* Inhoud / Main Content Area */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 40px 48px;
}

.main-content:has(.cms-layout),
.main-content.main-content-cms {
    padding: 0;
}

.content-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Hero Dashboard */
.hero-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 48px;
    margin-bottom: 40px;
    box-shadow: var(--vv-shadow-sm);
    position: relative;
    overflow: hidden;
}

.hero-pill {
    display: inline-block;
    background-color: var(--vv-accent);
    color: var(--vv-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--vv-radius-full);
    margin-bottom: 16px;
}

.hero-title {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.hero-description {
    font-size: 16px;
    color: var(--vv-text-secondary);
    max-width: 680px;
    margin-bottom: 28px;
    line-height: 1.6;
}

.hero-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background-color: var(--vv-bg);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-full);
    cursor: pointer;
    max-width: 600px;
    transition: all 0.15s ease;
}

.hero-search-bar:hover {
    border-color: var(--vv-text);
    box-shadow: var(--vv-shadow-md);
    background-color: #FFFFFF;
}

.hero-search-placeholder {
    flex: 1;
    font-size: 14px;
    color: var(--vv-text-muted);
}

/* Uitgelichte Tools Dashboard */
.quick-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.quick-tool-card {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--vv-border);
    background-color: var(--vv-surface);
    border-radius: var(--vv-radius-md);
    text-decoration: none;
    box-shadow: var(--vv-shadow-sm);
    transition: all 0.15s ease;
}

.quick-tool-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vv-shadow-md);
    border-color: var(--vv-text);
}

.quick-tool-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--vv-radius-md);
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    color: var(--vv-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.quick-tool-card:hover .quick-tool-icon {
    background-color: var(--vv-accent);
    border-color: var(--vv-accent);
    color: var(--vv-text);
}

.quick-tool-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--vv-text);
    display: block;
    margin-bottom: 2px;
}

.quick-tool-desc {
    font-size: 13px;
    color: var(--vv-text-muted);
}

/* Quick Grid */
.section-block {
    margin-bottom: 48px;
}

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
}

.section-subtitle {
    font-size: 13px;
    color: var(--vv-text-muted);
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.quick-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.15s ease;
    box-shadow: var(--vv-shadow-sm);
}

.quick-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vv-shadow-md);
    border-color: var(--vv-text);
}

.quick-num {
    font-size: 12px;
    font-weight: 800;
    color: var(--vv-text-muted);
    margin-bottom: 8px;
}

.quick-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.quick-link-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--vv-text);
}

/* Categorie Grid (Masonry kolommen voor flexibele hoogte zonder witruimte) */
.categories-grid {
    columns: 2 340px;
    column-gap: 24px;
}

.category-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 24px;
    box-shadow: var(--vv-shadow-sm);
    break-inside: avoid;
    margin-bottom: 24px;
    display: inline-block;
    width: 100%;
}

.category-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--vv-border-light);
}

.category-card-title {
    font-size: 16px;
    font-weight: 700;
}

.category-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--vv-text-muted);
}

.category-ch-list {
    list-style: none;
}

.cat-ch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--vv-radius-sm);
    font-size: 13px;
    transition: background-color 0.12s ease;
}

.cat-ch-item:hover {
    background-color: var(--vv-bg);
}

.cat-ch-num {
    font-weight: 700;
    color: var(--vv-text-muted);
    font-size: 12px;
    width: 20px;
}

.cat-ch-name {
    flex: 1;
}

/* Reader Weergave */
.reader-layout {
    display: flex;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
}

.reader-main {
    flex: 1;
    min-width: 0;
}

.reader-toc {
    width: 260px;
    flex-shrink: 0;
}

.toc-sticky-box {
    position: sticky;
    top: 96px;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 20px;
    box-shadow: var(--vv-shadow-sm);
}

.toc-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vv-text-muted);
    margin-bottom: 12px;
}

.toc-list {
    list-style: none;
}

.toc-link {
    display: block;
    font-size: 13px;
    color: var(--vv-text-secondary);
    padding: 5px 0;
    line-height: 1.35;
    transition: color 0.12s ease;
}

.toc-link:hover {
    color: var(--vv-text);
    text-decoration: underline;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vv-text-muted);
    margin-bottom: 24px;
}

.breadcrumb a:hover {
    color: var(--vv-text);
    text-decoration: underline;
}

/* Chapter Header */
.chapter-header {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 36px;
    margin-bottom: 32px;
    box-shadow: var(--vv-shadow-sm);
}

.chapter-meta-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.chapter-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--vv-text-secondary);
    background-color: var(--vv-surface-warm);
    padding: 3px 10px;
    border-radius: var(--vv-radius-full);
}

.btn-edit-chapter {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--vv-radius-full);
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    color: var(--vv-text);
    transition: all 0.15s ease;
}

.btn-edit-chapter:hover {
    background-color: var(--vv-text);
    color: #FFFFFF;
}

.chapter-title-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.chapter-title-main {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.chapter-anchor {
    margin-top: 4px;
    flex-shrink: 0;
}

.chapter-title-num {
    color: var(--vv-text-muted);
    margin-right: 8px;
}

.chapter-intro {
    font-size: 16px;
    color: var(--vv-text-secondary);
    line-height: 1.6;
    border-left: 3px solid var(--vv-accent);
    padding-left: 16px;
}

.chapter-intro a {
    color: var(--vv-text);
    text-decoration: underline;
    text-decoration-color: var(--vv-text-muted);
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.chapter-intro a:hover {
    color: var(--vv-text);
    text-decoration-color: var(--vv-text);
}

/* Paragrafen Artikelen */
.section-article {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--vv-shadow-sm);
    scroll-margin-top: 80px;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vv-border-light);
}

.section-heading {
    font-size: 20px;
    font-weight: 700;
}

.section-anchor {
    color: var(--vv-text-muted);
    opacity: 0.45;
    padding: 6px;
    border-radius: var(--vv-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-article:hover .section-anchor,
.chapter-header:hover .chapter-anchor {
    opacity: 0.85;
}

.section-anchor:hover {
    opacity: 1;
    color: var(--vv-text) !important;
    background-color: var(--vv-surface-warm);
}

.section-anchor.copied {
    opacity: 1 !important;
    color: #107C41 !important;
    background-color: #E8F5E9;
}

/* Prose Tekstweergave */
.prose {
    font-size: 15px;
    line-height: 1.7;
    color: #262626;
}

.prose p {
    margin-bottom: 14px;
}

.prose h3 {
    font-size: 17px;
    margin: 22px 0 10px 0;
}

.prose h4 {
    font-size: 15px;
    margin: 18px 0 8px 0;
    color: var(--vv-text);
}

.prose a, .editor-visual a {
    color: var(--vv-text);
    text-decoration: underline;
    text-decoration-color: var(--vv-text-muted);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    font-weight: 500;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.prose a:hover, .editor-visual a:hover {
    color: var(--vv-text);
    text-decoration-color: var(--vv-text);
}

.prose code, .editor-visual code {
    font-family: inherit;
    font-size: inherit;
}

/* Lijsten & Sub-lijsten (Prose & CMS Editor) */
.prose ul, .editor-visual ul {
    list-style-type: disc;
    margin: 12px 0 16px 26px;
    padding-left: 0;
}

.prose ol, .editor-visual ol {
    list-style-type: decimal;
    margin: 12px 0 16px 26px;
    padding-left: 0;
}

.prose li, .editor-visual li {
    margin-bottom: 6px;
}

/* Sub-lijst Niveau 2: open bullets voor ul, letters (a, b, c) voor ol */
.prose ul ul, .prose ol ul,
.editor-visual ul ul, .editor-visual ol ul {
    list-style-type: circle;
    margin: 6px 0 6px 22px;
}

.prose ol ol, .prose ul ol,
.editor-visual ol ol, .editor-visual ul ol {
    list-style-type: lower-alpha;
    margin: 6px 0 6px 22px;
}

/* Sub-lijst Niveau 3: vierkante bullets voor ul, romeinse cijfers (i, ii, iii) voor ol */
.prose ul ul ul, .prose ol ol ul, .prose ul ol ul, .prose ol ul ul,
.editor-visual ul ul ul, .editor-visual ol ol ul, .editor-visual ul ol ul, .editor-visual ol ul ul {
    list-style-type: square;
    margin: 4px 0 4px 20px;
}

.prose ol ol ol, .prose ul ul ol, .prose ol ul ol, .prose ul ol ol,
.editor-visual ol ol ol, .editor-visual ul ul ol, .editor-visual ol ul ol, .editor-visual ul ol ol {
    list-style-type: lower-roman;
    margin: 4px 0 4px 20px;
}

.prose blockquote {
    background-color: var(--vv-bg);
    border-left: 3px solid var(--vv-text);
    padding: 12px 18px;
    margin: 16px 0;
    border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
}

.section-footer-meta {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px dashed var(--vv-border-light);
    font-size: 12px;
    color: var(--vv-text-muted);
    display: flex;
    gap: 12px;
}

/* Pagination */
.chapter-pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px;
}

.pagination-link {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    min-width: 220px;
    transition: all 0.15s ease;
}

.pagination-link:hover {
    border-color: var(--vv-text);
    transform: translateY(-2px);
    box-shadow: var(--vv-shadow-md);
}

.pagination-next {
    text-align: right;
    margin-left: auto;
}

.pag-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--vv-text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pag-title {
    font-size: 14px;
    font-weight: 700;
}

/* CMS Layout */
.cms-layout {
    display: flex;
    min-height: calc(100vh - 64px - 60px);
}

.cms-sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--vv-surface);
    border-right: 1px solid var(--vv-border);
    padding: 20px 14px;
    height: calc(100vh - 64px);
    position: sticky;
    top: 64px;
    overflow-y: auto;
}

.cms-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 6px;
}

.cms-sidebar-title {
    font-size: 14px;
    font-weight: 700;
}

.cms-cat-group {
    margin-bottom: 6px;
}

.cms-cat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vv-text);
    background-color: var(--vv-surface-sand);
    border: 1px solid var(--vv-border);
    padding: 8px 10px;
    border-radius: var(--vv-radius-sm);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: all 0.15s ease;
}

.cms-cat-heading::-webkit-details-marker {
    display: none;
}

.cms-cat-heading:hover {
    background-color: #E2DBD0;
    border-color: #D6CCA;
    color: var(--vv-text);
}

details.cms-cat-group[open] > .cms-cat-heading {
    background-color: #E2DBD0;
    border-color: var(--vv-border);
    color: var(--vv-text);
    margin-bottom: 6px;
}

details.cms-cat-group[open] .cms-ch-list {
    padding: 2px 0 4px 4px;
}

.cms-ch-list {
    list-style: none;
}

.cms-ch-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--vv-radius-sm);
    font-size: 13px;
    color: var(--vv-text-secondary);
}

.cms-ch-link:hover {
    background-color: var(--vv-bg);
}

.cms-ch-link.active {
    background-color: var(--vv-text);
    color: #FFFFFF;
    font-weight: 600;
}

.cms-ch-num {
    font-weight: 700;
    font-size: 11px;
}

.cms-ch-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-main {
    flex: 1;
    padding: 32px 40px;
    max-width: 960px;
}

.cms-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.cms-heading {
    font-size: 26px;
    font-weight: 700;
    margin-top: 6px;
}

.cms-details-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 16px 20px;
    margin-bottom: 30px;
}

.cms-details-summary {
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.cms-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--vv-border-light);
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.col-3 { flex: 3; }
.col-6 { flex: 6; }
.col-12 { flex: 12; width: 100%; }

.cms-sections-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.cms-subheading {
    font-size: 18px;
    font-weight: 700;
}

.cms-new-section-card {
    background-color: var(--vv-surface-warm);
    border: 2px dashed var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 24px;
    margin-bottom: 24px;
}

.new-sec-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

.form-actions-inline {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.cms-section-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--vv-shadow-sm);
}

.sec-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sec-card-index {
    font-size: 12px;
    font-weight: 800;
    color: var(--vv-text-muted);
    width: 20px;
}

.sec-title-input {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 12px;
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-sm);
}

.btn-icon-del {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vv-text-muted);
    padding: 6px;
    border-radius: var(--vv-radius-sm);
}

.btn-icon-del:hover {
    color: #C00000;
    background-color: #FFF0F0;
}

/* WYSIWYG & HTML Editor */
.editor-wrapper {
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    overflow: hidden;
    background-color: #FFFFFF;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background-color: var(--vv-bg);
    border-bottom: 1px solid var(--vv-border);
}

.tb-btn {
    background: none;
    border: 1px solid transparent;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: var(--vv-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tb-btn svg {
    flex-shrink: 0;
}

.tb-btn:hover {
    background-color: var(--vv-surface-sand);
}

.tb-btn.active {
    background-color: var(--vv-surface-sand);
    border-color: var(--vv-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Tekstkleur Toolbar Knop */
.tb-color-btn {
    padding: 3px 6px;
}

.tb-color-indicator-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 16px;
}

.tb-color-letter {
    font-weight: 700;
    font-size: 13px;
    line-height: 12px;
    color: var(--vv-text);
}

.tb-color-stripe {
    display: block;
    width: 13px;
    height: 3px;
    background-color: #191919;
    border-radius: 1px;
    margin-top: 1px;
    transition: background-color 0.15s ease;
}

/* Tekstkleur Popover */
.tb-color-popover {
    position: absolute;
    z-index: 1050;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    box-shadow: var(--vv-shadow-lg);
    padding: 10px;
    width: 176px;
    box-sizing: border-box;
}

.tb-color-popover-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--vv-text-muted);
    margin-bottom: 8px;
}

.tb-color-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.tb-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tb-color-swatch:hover {
    transform: scale(1.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.tb-color-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--vv-border-light);
}

.tb-color-custom-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--vv-text);
    cursor: pointer;
    user-select: none;
}

.tb-color-custom-btn input[type="color"] {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--vv-border);
    border-radius: 3px;
    cursor: pointer;
    background: none;
}

.tb-color-reset-btn {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--vv-text-muted);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.tb-color-reset-btn:hover {
    color: #DC2626;
    background-color: var(--vv-surface-sand);
}

.tb-toggle-html {
    margin-left: auto;
    background-color: var(--vv-surface-sand);
    border-color: var(--vv-border);
    font-family: monospace;
}

.tb-toggle-html.active {
    background-color: var(--vv-text);
    color: var(--vv-accent);
}

.editor-visual {
    padding: 16px;
    min-height: 180px;
    max-height: 500px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
    outline: none;
}

.editor-visual p {
    margin-bottom: 12px;
}

.editor-visual h3 {
    font-size: 17px;
    margin: 18px 0 8px 0;
}

.editor-visual h4 {
    font-size: 15px;
    margin: 14px 0 6px 0;
}

.editor-visual blockquote {
    background-color: var(--vv-bg);
    border-left: 3px solid var(--vv-text);
    padding: 10px 16px;
    margin: 14px 0;
    border-radius: 0 var(--vv-radius-sm) var(--vv-radius-sm) 0;
}

.editor-html {
    width: 100%;
    min-height: 180px;
    max-height: 500px;
    padding: 16px;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    background-color: #1A1A1A;
    color: #00FF88;
    border: none;
    resize: vertical;
    outline: none;
}

.sec-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
}

.sec-meta-info {
    font-size: 12px;
    color: var(--vv-text-muted);
}

/* Gebruikersbeheer Tabel */
.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
}

.page-subtitle {
    font-size: 14px;
    color: var(--vv-text-muted);
    margin-top: 4px;
}

.users-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    overflow: hidden;
    box-shadow: var(--vv-shadow-sm);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th {
    background-color: var(--vv-bg);
    padding: 12px 18px;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vv-text-muted);
    border-bottom: 1px solid var(--vv-border);
}

.data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--vv-border-light);
    vertical-align: middle;
}

.text-right { text-align: right; }
.block { display: block; }
.mt-1 { margin-top: 6px; }

.user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-cell {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--vv-text);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.user-cell-name {
    font-weight: 700;
}

.user-cell-you {
    font-size: 11px;
    font-weight: 700;
    color: #2E7D32;
    background-color: #E8F5E9;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.action-btn-group {
    display: inline-flex;
    gap: 6px;
}

/* Modals */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(25, 25, 25, 0.6);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-box {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 32px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--vv-shadow-lg);
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* Zoek Modal */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}

.search-modal.active {
    display: flex;
}

.search-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(25, 25, 25, 0.5);
    backdrop-filter: blur(4px);
}

.search-modal-content {
    position: relative;
    z-index: 1;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    width: 100%;
    max-width: 620px;
    box-shadow: var(--vv-shadow-lg);
    overflow: hidden;
}

.search-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--vv-border);
    background-color: var(--vv-surface);
}

.search-modal-header input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    background: transparent;
    color: var(--vv-text);
}

.search-esc-hint {
    font-size: 11px;
    font-weight: 700;
    color: var(--vv-text-muted);
    background-color: var(--vv-bg);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--vv-border);
}

.search-results {
    max-height: 420px;
    overflow-y: auto;
    padding: 12px;
}

.search-placeholder {
    padding: 36px 20px;
    text-align: center;
    color: var(--vv-text-muted);
    font-size: 14px;
}

.search-result-item {
    display: block;
    padding: 12px 14px;
    border-radius: var(--vv-radius-md);
    margin-bottom: 4px;
    transition: background-color 0.12s ease;
}

.search-result-item:hover,
.search-result-item:focus {
    background-color: var(--vv-bg);
}

.s-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.s-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vv-text);
}

.s-item-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--vv-text-muted);
}

.s-item-snippet {
    font-size: 12px;
    color: var(--vv-text-secondary);
    line-height: 1.4;
}

/* Footer */
.site-footer {
    background-color: var(--vv-surface);
    border-top: 1px solid var(--vv-border);
    padding: 18px 24px;
    font-size: 12px;
    color: var(--vv-text-muted);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-brand {
    font-weight: 700;
    color: var(--vv-text);
}

.footer-brand-link {
    font-weight: 700;
    color: var(--vv-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-brand-link:hover {
    color: var(--vv-text-secondary);
}

.footer-link {
    color: var(--vv-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-link:hover {
    color: var(--vv-text-secondary);
}

.footer-sep {
    color: var(--vv-text-muted);
}

/* Responsiveness */
@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 64px;
        bottom: 0;
        z-index: 90;
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--vv-shadow-lg);
    }

    .reader-layout {
        flex-direction: column;
    }

    .reader-toc {
        display: none;
    }

    .main-content {
        padding: 24px 16px;
    }

    .hero-card {
        padding: 28px 20px;
    }

    .cms-layout {
        flex-direction: column;
    }

    .cms-sidebar {
        width: 100%;
        height: auto;
        position: static;
    }

    .cms-main {
        padding: 24px 16px;
        max-width: 100%;
    }
}

/* Smoelenboek & Team Grid */
.team-filter-bar {
    margin-bottom: 24px;
}

.team-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-full);
    padding: 6px 16px;
    max-width: 480px;
    box-shadow: var(--vv-shadow-sm);
    transition: border-color 0.15s ease;
}

.team-search-input-wrap:focus-within {
    border-color: var(--vv-text);
}

.team-search-input-wrap svg {
    color: var(--vv-text-muted);
    flex-shrink: 0;
    margin-right: 10px;
}

.team-search-input-wrap input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--vv-text);
    flex: 1;
}

.team-count-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--vv-text-muted);
    background-color: var(--vv-surface-warm);
    padding: 3px 8px;
    border-radius: var(--vv-radius-full);
    white-space: nowrap;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.team-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    overflow: hidden;
    box-shadow: var(--vv-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.team-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--vv-shadow-md);
    border-color: var(--vv-text);
}

.team-photo-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--vv-surface-sand);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    transition: transform 0.3s ease;
}

.team-card:hover .team-photo {
    transform: scale(1.03);
}

.team-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--vv-surface-warm);
    color: var(--vv-text-muted);
    font-size: 48px;
    font-weight: 700;
    user-select: none;
}

.team-info {
    padding: 18px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.team-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--vv-text);
    margin-bottom: 4px;
    line-height: 1.3;
}

.team-role {
    font-size: 12px;
    font-weight: 600;
    color: var(--vv-text-muted);
    margin-bottom: 14px;
}

.team-contact-list {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--vv-border-light);
}

.team-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vv-text-secondary);
    text-decoration: none;
    transition: color 0.12s ease;
}

.team-contact-item:hover {
    color: var(--vv-text);
    text-decoration: underline;
}

.team-contact-item svg {
    color: var(--vv-text-muted);
    flex-shrink: 0;
}

/* Avatar thumbnails in management table */
.table-avatar-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--vv-radius-sm);
    object-fit: cover;
    border: 1px solid var(--vv-border);
}

.table-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: var(--vv-radius-sm);
    background-color: var(--vv-surface-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--vv-text-muted);
}

.empty-state-card {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 60px 24px;
    text-align: center;
    box-shadow: var(--vv-shadow-sm);
}

.empty-state-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.empty-state-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.empty-state-text {
    color: var(--vv-text-muted);
    font-size: 14px;
    max-width: 420px;
    margin: 0 auto;
}

.no-results-box {
    padding: 40px 20px;
    text-align: center;
    color: var(--vv-text-muted);
    background-color: var(--vv-surface);
    border: 1px dashed var(--vv-border);
    border-radius: var(--vv-radius-md);
    margin-top: 16px;
}

/* Verjaardags-banner & Badges */
.birthday-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    margin-bottom: 24px;
    box-shadow: var(--vv-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.birthday-banner:hover {
    box-shadow: var(--vv-shadow-md);
}

.birthday-banner.birthday-today {
    border-color: #EDFF00;
    background: linear-gradient(135deg, #FFFDEB 0%, var(--vv-surface) 100%);
    box-shadow: 0 4px 16px rgba(237, 255, 0, 0.25);
}

.birthday-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--vv-surface-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    border: 1px solid var(--vv-border-light);
}

.birthday-banner-content {
    flex: 1;
    min-width: 0;
}

.birthday-badge-soon {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vv-text-muted);
    display: inline-block;
    margin-bottom: 3px;
}

.birthday-badge-today {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #191919;
    background-color: var(--vv-accent);
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}

.birthday-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--vv-text);
    line-height: 1.35;
    margin-bottom: 2px;
}

.birthday-sub {
    font-size: 13px;
    color: var(--vv-text-muted);
    margin: 0;
}

.birthday-btn {
    flex-shrink: 0;
}

.team-birthday-row {
    margin-bottom: 12px;
}

.team-birthday-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vv-text-secondary);
    background-color: var(--vv-surface-warm);
    padding: 3px 9px;
    border-radius: var(--vv-radius-full);
}

.team-birthday-text.is-today {
    background-color: var(--vv-accent);
    color: #191919;
    font-weight: 700;
}

@media (max-width: 640px) {
    .birthday-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .birthday-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Checklist Digitoegankelijke PDF
   ========================================================================== */

.checklist-page {
    padding-bottom: 60px;
}

/* Voortgangsbalk & Samenvatting */
.checklist-progress-card {
    padding: 24px;
    margin-bottom: 28px;
    background: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    box-shadow: var(--vv-shadow-sm);
}

.checklist-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.progress-stat-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.progress-percent {
    font-size: 32px;
    font-weight: 800;
    color: var(--vv-text);
    line-height: 1;
    font-feature-settings: "tnum";
    min-width: 70px;
}

.progress-stat-labels {
    display: flex;
    flex-direction: column;
}

.progress-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--vv-text);
}

.progress-sub {
    font-size: 13px;
    color: var(--vv-text-muted);
}

.progress-filter-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--vv-surface-warm);
    padding: 4px;
    border-radius: var(--vv-radius-full);
}

.pill-filter {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--vv-text-secondary);
    padding: 6px 12px;
    border-radius: var(--vv-radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pill-filter:hover {
    color: var(--vv-text);
}

.pill-filter.active {
    background: var(--vv-surface);
    color: var(--vv-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-weight: 700;
}

.checklist-progress-bar-bg {
    width: 100%;
    height: 10px;
    background-color: var(--vv-surface-warm);
    border-radius: var(--vv-radius-full);
    overflow: hidden;
    margin-bottom: 20px;
}

.checklist-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #059669);
    border-radius: var(--vv-radius-full);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.checklist-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--vv-border-light);
}

.checklist-fase-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fase-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--vv-text-muted);
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fase-btn {
    border: 1px solid var(--vv-border);
    background: var(--vv-surface);
    color: var(--vv-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--vv-radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
}

.fase-btn:hover {
    background: var(--vv-surface-warm);
    border-color: var(--vv-text-muted);
    color: var(--vv-text);
}

.fase-btn.active {
    background: var(--vv-text);
    border-color: var(--vv-text);
    color: #FFFFFF;
    font-weight: 600;
}

.checklist-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 260px;
    max-width: 420px;
}

.checklist-search-box svg {
    position: absolute;
    left: 12px;
    color: var(--vv-text-muted);
    pointer-events: none;
}

.checklist-search-box input {
    width: 100%;
    height: 38px;
    padding: 0 32px 0 36px;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-full);
    background: var(--vv-surface-warm);
    color: var(--vv-text);
    outline: none;
    transition: all 0.15s ease;
}

.checklist-search-box input:focus {
    background: var(--vv-surface);
    border-color: var(--vv-text);
    box-shadow: 0 0 0 3px rgba(25, 25, 25, 0.08);
}

.search-clear-btn {
    position: absolute;
    right: 10px;
    border: none;
    background: none;
    font-size: 18px;
    color: var(--vv-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
}

/* Layout Grid */
.checklist-layout-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1080px) {
    .checklist-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Categorie Blokken */
.checklist-category-block {
    margin-bottom: 32px;
}

.checklist-cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--vv-text);
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--vv-border);
}

.cat-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    background-color: var(--vv-surface-sand);
    color: var(--vv-text-secondary);
    border-radius: var(--vv-radius-full);
}

.checklist-items-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Checklist Kaart */
.checklist-card {
    background: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    box-shadow: var(--vv-shadow-sm);
    transition: all 0.2s ease;
    overflow: hidden;
    scroll-margin-top: 80px;
}

.checklist-card:hover {
    border-color: #C8BCAC;
    box-shadow: var(--vv-shadow-md);
}

.checklist-card.is-completed {
    background-color: #F8FCFA;
    border-color: #C4E5D4;
}

.checklist-card.is-completed .checklist-item-title {
    color: #2D3748;
}

.checklist-card.highlight-pulse {
    animation: pulseHighlight 1.8s ease;
}

@keyframes pulseHighlight {
    0% { outline: 4px solid var(--vv-accent); }
    50% { outline: 4px solid var(--vv-accent); transform: scale(1.01); }
    100% { outline: 0px solid transparent; }
}

.checklist-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    cursor: pointer;
    user-select: none;
}

/* Custom Checkbox */
.checklist-checkbox-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding-top: 2px;
    flex-shrink: 0;
}

.checklist-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checklist-checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--vv-border);
    border-radius: 6px;
    background-color: var(--vv-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.checklist-checkbox:hover ~ .checklist-checkmark {
    border-color: var(--vv-text);
}

.checklist-checkbox:checked ~ .checklist-checkmark {
    background-color: #10B981;
    border-color: #10B981;
}

.checklist-checkbox:checked ~ .checklist-checkmark::after {
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    border: solid #FFFFFF;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.checklist-header-main {
    flex: 1;
    min-width: 0;
}

.checklist-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.badge-step-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--vv-text-muted);
    font-feature-settings: "tnum";
}

.badge-fase {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: var(--vv-radius-full);
    letter-spacing: 0.03em;
}

.badge-fase.fase-indesign {
    background-color: #FCE7F3;
    color: #9D174D;
}

.badge-fase.fase-acrobat {
    background-color: #FEE2E2;
    color: #B91C1C;
}

.badge-fase.fase-controle {
    background-color: #E0E7FF;
    color: #3730A3;
}

.badge-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: var(--vv-radius-full);
    letter-spacing: 0.03em;
    background-color: var(--vv-surface-sand, #F3EFE6);
    color: var(--vv-text-muted);
    border: 1px solid var(--vv-border);
    transition: all 0.15s ease;
}

.checklist-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--vv-text);
    line-height: 1.35;
    margin: 0;
}

.checklist-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-copy-link {
    border: none;
    background: transparent;
    color: var(--vv-text-muted);
    padding: 6px;
    border-radius: var(--vv-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-copy-link:hover {
    color: var(--vv-text);
    background-color: var(--vv-surface-warm);
}

.btn-copy-link.copied {
    color: #107C41 !important;
    background-color: #E8F5E9 !important;
}

.btn-card-chevron {
    border: none;
    background: transparent;
    color: var(--vv-text-muted);
    padding: 6px;
    border-radius: var(--vv-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-card-chevron:hover {
    color: var(--vv-text);
    background-color: var(--vv-surface-warm);
}

.chevron-icon {
    transition: transform 0.2s ease;
}

.checklist-card.is-open .chevron-icon {
    transform: rotate(180deg);
}

/* Kaart Details / Toelichting */
.checklist-card-body {
    padding: 0 16px 18px 52px;
    border-top: 1px solid var(--vv-border-light);
    background-color: #FCFBF9;
}

.checklist-toelichting-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--vv-text-secondary);
    margin: 14px 0 12px 0;
}

.checklist-subhead {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vv-text);
    margin-bottom: 8px;
    margin-top: 14px;
}

.checklist-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checklist-steps-list > li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vv-text-secondary);
}

.checklist-steps-list > li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--vv-text);
    font-weight: 700;
}

/* Geneste genummerde sub-opsommingen */
.checklist-steps-sublist {
    list-style: none;
    counter-reset: sublist-counter;
    margin: 8px 0 4px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checklist-steps-sublist > li {
    position: relative;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vv-text-secondary);
}

.checklist-steps-sublist > li::before {
    counter-increment: sublist-counter;
    content: counter(sublist-counter) '.';
    position: absolute;
    left: 0;
    color: var(--vv-text);
    font-weight: 700;
}

/* Sneltoets badges */
.checklist-shortcuts-wrap {
    margin-top: 14px;
}

.shortcuts-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kbd-keys {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mac-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--vv-text);
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-bottom: 2px solid #9CA3AF;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

.shortcut-label {
    font-size: 13px;
    color: var(--vv-text-secondary);
}

/* Waarschuwing / Belangrijk Callout */
.checklist-alert-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: #FEF3C7;
    border: 1px solid #FDE68A;
    border-left: 4px solid #F59E0B;
    border-radius: var(--vv-radius-sm);
    padding: 10px 14px;
    margin-top: 14px;
}

.checklist-alert-callout svg {
    color: #B45309;
    flex-shrink: 0;
    margin-top: 2px;
}

.callout-text {
    font-size: 13px;
    color: #78350F;
    line-height: 1.5;
}

/* Media / Voorbeeldafbeeldingen in checklist (forse thumbnails max 300px) */
.checklist-media-wrap {
    margin-top: 14px;
}

.checklist-media-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-top: 8px;
}

.checklist-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    max-width: 300px;
}

.checklist-media-wrap:not(.has-multiple) .checklist-figure {
    max-width: 300px;
}

.checklist-media-wrap.has-multiple .checklist-figure {
    flex: 0 1 auto;
    max-width: 300px;
}

.checklist-img-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vv-radius-sm);
    overflow: hidden;
    border: 1px solid var(--vv-border);
    background-color: #FFFFFF;
    box-shadow: var(--vv-shadow-sm);
    transition: all 0.2s ease;
    cursor: zoom-in;
    max-width: 300px;
    max-height: 300px;
}

.checklist-img-link:hover {
    border-color: var(--vv-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.checklist-img {
    display: block;
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    background-color: #FAFAFA;
}

.checklist-img-zoom-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--vv-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vv-text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    opacity: 0.85;
    transition: all 0.15s ease;
}

.checklist-img-link:hover .checklist-img-zoom-badge {
    opacity: 1;
    background-color: var(--vv-primary);
    color: #FFFFFF;
    border-color: var(--vv-primary);
}

.checklist-figcaption {
    font-size: 12px;
    line-height: 1.4;
    color: var(--vv-text-secondary);
    margin-top: 6px;
    max-width: 300px;
}

/* Lightbox modal voor schermvullende weergave */
.checklist-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.15s ease-out;
}

.lightbox-content-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 95vw;
    max-height: 95vh;
}

.lightbox-close-btn {
    position: absolute;
    top: -44px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #FFFFFF;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.lightbox-close-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

.lightbox-img {
    max-width: 90vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--vv-radius-md);
    background-color: #FFFFFF;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
    color: #F3F4F6;
    font-size: 13.5px;
    margin-top: 12px;
    text-align: center;
    max-width: 800px;
}

/* Links */
.checklist-links-wrap {
    margin-top: 14px;
}

.checklist-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checklist-tool-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vv-text);
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    padding: 5px 12px;
    border-radius: var(--vv-radius-full);
    transition: all 0.15s ease;
}

.checklist-tool-link:hover {
    background-color: var(--vv-text);
    color: #FFFFFF;
    border-color: var(--vv-text);
}

/* Zijbalk componenten */
.sidebar-info-card {
    padding: 18px;
    margin-bottom: 20px;
    background: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    box-shadow: var(--vv-shadow-sm);
}

.sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sidebar-card-icon {
    font-size: 18px;
}

.sidebar-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--vv-text);
}

.sidebar-card-p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--vv-text-secondary);
    margin-bottom: 10px;
}

.help-contacts {
    background-color: var(--vv-surface-warm);
    border-radius: var(--vv-radius-sm);
    padding: 12px;
}

.help-highlight {
    font-size: 13.5px;
    color: var(--vv-text);
    margin-bottom: 4px;
}

.help-sub {
    font-size: 12px;
    color: var(--vv-text-muted);
}

.key-legend-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.key-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--vv-text-secondary);
}

.sidebar-tools-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-tool-anchor {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background-color: var(--vv-surface-warm);
    border-radius: var(--vv-radius-sm);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.sidebar-tool-anchor:hover {
    border-color: var(--vv-border);
    background-color: var(--vv-surface-sand);
}

.sidebar-tool-anchor strong {
    font-size: 13px;
    color: var(--vv-text);
}

.sidebar-tool-anchor span {
    font-size: 11px;
    color: var(--vv-text-muted);
}

.text-muted-box {
    background-color: #F8F6F2;
}

/* Toast */
.checklist-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--vv-text);
    color: #FFFFFF;
    padding: 10px 18px;
    border-radius: var(--vv-radius-full);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--vv-shadow-lg);
    z-index: 9999;
    animation: toastFadeIn 0.2s ease;
    max-width: calc(100vw - 48px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

@keyframes toastFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Inline links binnen checklist teksten */
.link-inline {
    color: var(--vv-primary, #C83727);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2.5px;
    word-break: break-word;
    transition: all 0.15s ease;
}

.link-inline:hover {
    color: var(--vv-primary-dark, #9C2215);
    text-decoration-thickness: 2px;
}

.link-download {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.link-download-icon {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
}

@media print {
    .topbar, .sidebar, .checklist-progress-card, .page-header-actions, .checklist-sidebar-col, .btn-copy-link, .btn-card-chevron {
        display: none !important;
    }
    .app-layout {
        display: block !important;
    }
    .checklist-layout-grid {
        display: block !important;
    }
    .checklist-card-body {
        display: block !important;
    }
}

/* Checklist: duiding, voorwaardelijk n.v.t. en lokale beoordeling. */
.checklist-page .progress-filter-badges {
    flex-wrap: wrap;
    border-radius: 16px;
}

.checklist-page .checklist-progress-note,
.checklist-page .checklist-guidance-note,
.checklist-page .checklist-local-note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--vv-text-secondary);
    margin: 0 0 12px;
}

.checklist-page .checklist-progress-note {
    font-weight: 600;
}

.checklist-page .checklist-local-note {
    color: var(--vv-text-muted);
    font-size: 12px;
}

.checklist-page .checklist-storage-notice {
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
    margin: 0 0 14px;
    border: 1px solid #C98742;
    background: #FFF8EB;
    color: #75421D;
    border-radius: var(--vv-radius-sm);
}

.checklist-page .badge-guidance {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--vv-radius-full);
    color: #33445A;
    background: #EBF0F6;
    border: 1px solid #D2DDEB;
}

.checklist-page .guidance-aanbevolen {
    color: #4F493F;
    background: #F3F0E9;
    border-color: #DCD5C7;
}

.checklist-page .guidance-werkafspraak {
    color: #5F456C;
    background: #F2EDF5;
    border-color: #DFD3E6;
}

.checklist-page .checklist-item-status {
    color: var(--vv-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.checklist-page .is-completed .checklist-item-status {
    color: #21633B;
}

.checklist-page .checklist-card.is-not-applicable {
    border-color: #B9C4CF;
    background: #F5F7F9;
}

.checklist-page .is-not-applicable .checklist-item-status {
    color: #415064;
}

.checklist-page .checklist-na-option {
    padding: 0 16px 16px 52px;
    font-size: 12px;
    line-height: 1.5;
}

.checklist-page .checklist-na-label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: var(--vv-text);
    cursor: pointer;
    font-weight: 600;
}

.checklist-page .checklist-na-checkbox {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #415064;
}

.checklist-page .checklist-na-option p {
    color: var(--vv-text-secondary);
    margin: 4px 0 0 23px;
}

.checklist-page .checklist-review-card .sidebar-card-title {
    margin-bottom: 12px;
}

.checklist-page .checklist-review-fields {
    display: grid;
    gap: 6px;
    margin: 12px 0;
}

.checklist-page .checklist-review-fields label {
    color: var(--vv-text);
    font-size: 12px;
    font-weight: 600;
}

.checklist-page .checklist-review-fields input {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    margin-bottom: 5px;
    font: inherit;
    font-size: 13px;
    background: var(--vv-surface);
    color: var(--vv-text);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-sm);
}

.checklist-page button:focus-visible,
.checklist-page a:focus-visible,
.checklist-page input:focus-visible,
.checklist-page .checklist-checkbox:focus-visible + .checklist-checkmark {
    outline: 3px solid #335B92;
    outline-offset: 3px;
}

.checklist-page .checklist-item-title,
.checklist-page .checklist-na-option {
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .checklist-page .checklist-card-header { gap: 10px; padding: 12px; }
    .checklist-page .checklist-na-option { padding: 0 12px 12px; }
    .checklist-page .checklist-card-body { padding-left: 16px; }
    .checklist-page .checklist-header-actions { flex-wrap: wrap; max-width: 64px; }
}

/* ==========================================================================
   Kalender & Agenda Styles
   ========================================================================== */
.section-title-link {
    color: var(--vv-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.section-title-link:hover {
    text-decoration: underline;
}

.section-subtitle-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--vv-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.section-subtitle-link:hover {
    color: var(--vv-text);
}

.calendar-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.calendar-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 14px 20px;
    margin-bottom: 20px;
    box-shadow: var(--vv-shadow-sm);
    gap: 16px;
    flex-wrap: wrap;
}

.calendar-month-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calendar-month-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--vv-text);
    margin: 0;
}

.calendar-btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: var(--vv-radius-sm);
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    color: var(--vv-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-nav-btn:hover {
    background-color: var(--vv-text);
    color: #FFFFFF;
    border-color: var(--vv-text);
}

.calendar-view-toggle {
    display: flex;
    gap: 4px;
    background-color: var(--vv-surface-warm);
    padding: 3px;
    border-radius: var(--vv-radius-sm);
    border: 1px solid var(--vv-border);
}

.calendar-toggle-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--vv-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.calendar-toggle-btn.active {
    background-color: var(--vv-surface);
    color: var(--vv-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Kalender Grid Container */
.calendar-grid-container {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    box-shadow: var(--vv-shadow-sm);
    overflow: hidden;
    margin-bottom: 32px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background-color: var(--vv-surface-warm);
    border-bottom: 1px solid var(--vv-border);
}

.calendar-weekday {
    padding: 12px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vv-text-muted);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background-color: var(--vv-border);
    gap: 1px;
}

.calendar-cell {
    background-color: var(--vv-surface);
    min-height: 110px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background-color 0.15s ease;
    overflow: hidden;
}

.calendar-cell:hover {
    background-color: #FAF8F5;
}

.calendar-cell.other-month {
    background-color: #F8F6F2;
    opacity: 0.6;
}

.calendar-cell-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.calendar-cell-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--vv-text-secondary);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.calendar-cell.today .calendar-cell-date {
    background-color: var(--vv-accent);
    color: var(--vv-text);
    font-weight: 800;
}

.calendar-btn-add-day {
    display: none;
    background: transparent;
    border: none;
    color: var(--vv-text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
}

.calendar-cell:hover .calendar-btn-add-day {
    display: inline-flex;
}

.calendar-btn-add-day:hover {
    background-color: var(--vv-surface-warm);
    color: var(--vv-text);
}

.calendar-events-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.event-pill {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Event categories */
.event-pill-meeting {
    background-color: #EEF2FF;
    color: #3730A3;
    border-color: #C7D2FE;
}

.event-pill-teams {
    background-color: #EFF6FF;
    color: #1E40AF;
    border-color: #BFDBFE;
}

.event-pill-verjaardag {
    background-color: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.event-pill-workshop {
    background-color: #FDF2F8;
    color: #9D174D;
    border-color: #FBCFE8;
}

.event-pill-uitje {
    background-color: #ECFDF5;
    color: #065F46;
    border-color: #A7F3D0;
}

.event-pill-deadline {
    background-color: #FEF2F2;
    color: #991B1B;
    border-color: #FECACA;
}

.event-pill-algemeen {
    background-color: var(--vv-surface-warm);
    color: var(--vv-text);
    border-color: var(--vv-border);
}

.event-pill-time {
    font-weight: 700;
    opacity: 0.85;
    flex-shrink: 0;
}

.event-pill-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Event Detail & Form Modals */
.event-detail-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vv-text-secondary);
    background-color: var(--vv-surface-warm);
    padding: 4px 10px;
    border-radius: var(--vv-radius-full);
    margin-bottom: 14px;
}

.event-detail-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--vv-text);
    margin-bottom: 14px;
}

.event-detail-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--vv-text);
    background-color: var(--vv-bg);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 14px 16px;
    margin-bottom: 18px;
    white-space: pre-line;
}

.btn-teams-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #464EB8;
    color: #FFFFFF !important;
    padding: 10px 18px;
    border-radius: var(--vv-radius-md);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn-teams-action:hover {
    background-color: #373C99;
}

/* Calendar List View */
.calendar-list-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.calendar-list-item {
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.15s ease;
    box-shadow: var(--vv-shadow-sm);
    text-decoration: none;
    cursor: pointer;
}

.calendar-list-item:hover {
    box-shadow: var(--vv-shadow-md);
    border-color: var(--vv-text);
    transform: translateY(-1px);
}

.calendar-list-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.calendar-list-datebox {
    width: 52px;
    height: 52px;
    border-radius: var(--vv-radius-md);
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calendar-list-daynum {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--vv-text);
}

.calendar-list-monthname {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--vv-text-muted);
}

.calendar-list-item.is-today .calendar-list-datebox {
    background-color: var(--vv-accent);
    border-color: var(--vv-accent);
}

.calendar-list-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--vv-text);
    margin-bottom: 4px;
}

.calendar-list-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--vv-text-muted);
    flex-wrap: wrap;
}

@media (max-width: 800px) {
    .calendar-grid-container {
        display: none;
    }
    .calendar-list-view {
        display: flex;
    }
}

/* Herhalende afspraken (Kalender) */
.event-pill-repeat {
    font-size: 10px;
    margin-left: auto;
    opacity: 0.85;
    flex-shrink: 0;
}

.badge-repeat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--vv-text-muted);
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    padding: 2px 8px;
    border-radius: 9999px;
    vertical-align: middle;
    margin-left: 6px;
}

.event-detail-recurrence-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1E40AF;
    background-color: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 6px 12px;
    border-radius: var(--vv-radius-md);
    margin-bottom: 14px;
}

.alert-single-instance {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background-color: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: var(--vv-radius-md);
    color: #92400E;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 16px;
}

.btn-recurrence-choice {
    display: block;
    width: 100%;
    text-align: left;
    background-color: var(--vv-surface);
    border: 1.5px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-recurrence-choice:hover {
    border-color: var(--vv-text);
    background-color: var(--vv-surface-warm);
    transform: translateY(-1px);
    box-shadow: var(--vv-shadow-sm);
}

.btn-recurrence-choice .choice-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vv-text);
    margin-bottom: 4px;
}

.btn-recurrence-choice .choice-desc {
    font-size: 12px;
    color: var(--vv-text-muted);
    line-height: 1.4;
}

.btn-recurrence-choice.danger-choice:hover {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.btn-recurrence-choice.danger-choice:hover .choice-title {
    color: #DC2626;
}

/* ==========================================================================
   CMS: Categorieënbeheer
   ========================================================================== */
.reorder-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--vv-surface-warm);
    padding: 3px 6px;
    border-radius: var(--vv-radius-md);
    border: 1px solid var(--vv-border);
}

.btn-reorder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: var(--vv-radius-sm);
    color: var(--vv-text);
    font-size: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-reorder:hover:not(:disabled) {
    background-color: var(--vv-surface);
    color: var(--vv-text);
}

.btn-reorder:active:not(:disabled) {
    transform: scale(0.92);
}

.btn-reorder:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.order-number {
    font-weight: 700;
    font-size: 12px;
    min-width: 16px;
    text-align: center;
    color: var(--vv-text);
}

.cat-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: var(--vv-surface-warm);
    border-radius: var(--vv-radius-md);
    color: var(--vv-text);
    border: 1px solid var(--vv-border);
}

.cat-slug-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    background-color: var(--vv-surface-warm);
    padding: 3px 8px;
    border-radius: var(--vv-radius-sm);
    color: var(--vv-text-muted);
    border: 1px solid var(--vv-border);
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    background-color: var(--vv-surface-warm);
    border-radius: var(--vv-radius-md);
    border: 1px solid var(--vv-border);
}

.icon-picker-item {
    cursor: pointer;
}

.icon-picker-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.icon-picker-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-sm);
    transition: all 0.15s ease;
    text-align: center;
}

.icon-picker-box small {
    font-size: 10.5px;
    color: var(--vv-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.icon-picker-item:hover .icon-picker-box {
    border-color: var(--vv-text);
}

.icon-picker-item input[type="radio"]:checked + .icon-picker-box {
    border-color: var(--vv-text);
    background-color: var(--vv-accent);
    color: var(--vv-accent-dark);
    box-shadow: 0 0 0 1px var(--vv-text);
}

.icon-picker-item input[type="radio"]:checked + .icon-picker-box small {
    color: var(--vv-accent-dark);
    font-weight: 700;
}

/* ==========================================================================
   CMS: Huisstijl & CSS-beheer (Thema-editor)
   ========================================================================== */
.theme-editor-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
}

@media (max-width: 1024px) {
    .theme-editor-grid {
        grid-template-columns: 1fr;
    }
}

.color-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--vv-border-light);
}

.color-picker-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.color-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--vv-text);
}

.color-desc {
    font-size: 12.5px;
    color: var(--vv-text-muted);
    line-height: 1.35;
}

.color-preset-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.color-preset-chip {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-preset-chip:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.color-picker-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.color-picker-inputs input[type="color"] {
    -webkit-appearance: none;
    width: 40px;
    height: 38px;
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    background: transparent;
    cursor: pointer;
    padding: 2px;
}

.color-picker-inputs input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-inputs input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--vv-radius-md) - 2px);
}

.color-hex-input {
    width: 95px !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
}

.radius-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.radius-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radius-box {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.radius-box strong {
    font-size: 13.5px;
    color: var(--vv-text);
    margin-bottom: 2px;
}

.radius-box small {
    font-size: 11px;
    color: var(--vv-text-muted);
}

.radius-option:hover .radius-box {
    border-color: var(--vv-text);
}

.radius-option input[type="radio"]:checked + .radius-box {
    border-color: var(--vv-text);
    background-color: var(--vv-surface-warm);
    box-shadow: 0 0 0 2px var(--vv-text);
}

.code-editor {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    background-color: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    tab-size: 2;
}

/* Live Preview Sticky Sidebar */
.preview-sticky-card {
    position: sticky;
    top: 90px;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    box-shadow: var(--vv-shadow-md);
    overflow: hidden;
}

.preview-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--vv-surface-warm);
    border-bottom: 1px solid var(--vv-border);
}

.preview-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--vv-text);
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: var(--vv-radius-full);
}

.preview-note {
    font-size: 11px;
    color: var(--vv-text-muted);
}

.preview-stage {
    padding: 20px;
    background-color: var(--prev-bg, #FAF8F5);
    font-family: var(--prev-font, 'DM Sans', sans-serif);
    color: var(--prev-text, #191919);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.preview-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--prev-border, #E5DBCC);
}

.preview-brand {
    display: flex;
    align-items: center;
    gap: 6px;
}

.preview-brand-name {
    font-weight: 800;
    font-size: 16px;
    color: var(--prev-text, #191919);
}

.preview-brand-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 6px;
    background-color: var(--prev-accent, #EDFF00);
    color: var(--prev-text, #191919);
    border-radius: 4px;
}

.preview-user-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    background-color: var(--prev-surface-warm, #F2EDE4);
    border-radius: 9999px;
    border: 1px solid var(--prev-border, #E5DBCC);
    color: var(--prev-text, #191919);
}

.preview-component-card {
    background-color: var(--prev-surface, #FFFFFF);
    border: 1px solid var(--prev-border, #E5DBCC);
    border-radius: var(--prev-radius-lg, 16px);
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 16px;
}

.preview-component-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.preview-icon-box {
    width: 28px;
    height: 28px;
    border-radius: var(--prev-radius-sm, 6px);
    background-color: var(--prev-surface-warm, #F2EDE4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--prev-text, #191919);
}

.preview-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: var(--prev-text, #191919);
}

.preview-pill {
    font-size: 11px;
    font-weight: 600;
    color: var(--vv-text-muted);
}

.preview-text {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--prev-text, #191919);
    opacity: 0.85;
    margin-bottom: 14px;
}

.preview-buttons-row {
    display: flex;
    gap: 8px;
}

.preview-btn-primary {
    background-color: var(--prev-text, #191919);
    color: #FFFFFF;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 9999px;
    border: none;
    cursor: default;
    font-family: inherit;
}

.preview-btn-secondary {
    background-color: var(--prev-surface, #FFFFFF);
    color: var(--prev-text, #191919);
    border: 1px solid var(--prev-border, #E5DBCC);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 9999px;
    cursor: default;
    font-family: inherit;
}

.preview-sidebar-box {
    background-color: var(--prev-surface-warm, #F2EDE4);
    border-radius: var(--prev-radius-md, 10px);
    border: 1px solid var(--prev-border, #E5DBCC);
    padding: 10px;
}

.preview-sidebar-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 8px;
    color: var(--prev-text, #191919);
}

.preview-sidebar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    font-size: 11.5px;
    border-radius: var(--prev-radius-sm, 6px);
    color: var(--prev-text, #191919);
    margin-bottom: 3px;
}

.preview-sidebar-item.active {
    background-color: var(--prev-surface, #FFFFFF);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.preview-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--prev-accent, #EDFF00);
}

/* Checklist Categoriekleuren Beheer */
.cat-colors-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cat-color-row:hover {
    border-color: var(--vv-text);
    background-color: var(--vv-surface-warm);
}

.cat-color-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.cat-color-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vv-text);
    white-space: nowrap;
}

.cat-color-badge-sample {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 9999px;
    letter-spacing: 0.03em;
    border-width: 1px;
    border-style: solid;
    transition: all 0.15s ease;
}

.preview-checklist-box {
    margin-top: 14px;
    background-color: var(--prev-surface, #FFFFFF);
    border-radius: var(--prev-radius-md, 10px);
    border: 1px solid var(--prev-border, #E5DBCC);
    padding: 12px;
}

.preview-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 2px solid;
    transition: border-color 0.15s ease;
}

.preview-checklist-card-sample {
    padding: 10px 12px;
    background-color: var(--prev-surface-warm, #F2EDE4);
    border-radius: var(--prev-radius-sm, 6px);
    border: 1px solid var(--prev-border, #E5DBCC);
}

/* ==========================================================================
   Nieuws & Mededelingen Styles
   ========================================================================== */
.news-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--vv-radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--vv-text-secondary);
    background-color: var(--vv-surface);
    border: 1px solid var(--vv-border);
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
}

.news-filter-chip:hover {
    border-color: var(--vv-text);
    color: var(--vv-text);
    transform: translateY(-1px);
}

.news-filter-chip.active {
    background-color: var(--vv-text);
    color: #FFFFFF;
    border-color: var(--vv-text);
    box-shadow: var(--vv-shadow-sm);
}

.news-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 9999px;
    background-color: var(--vv-surface-warm);
    color: var(--vv-text-muted);
    font-weight: 700;
    line-height: 1.2;
}

.news-filter-chip.active .news-filter-count {
    background-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vv-shadow-md);
}

.news-card-important {
    border-left: 4px solid var(--vv-primary, #C83727) !important;
}

.quick-card-important {
    border-left: 4px solid var(--vv-primary, #C83727) !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFDFD 100%);
}

.btn-action-icon:hover {
    box-shadow: var(--vv-shadow-sm);
    transform: translateY(-1px);
}

/* ==========================================================================
   ZDWDH AI Assistent Widget
   ========================================================================== */
.zdwdh-bot-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    font-family: var(--vv-font);
}

/* Floating Action Button (FAB) */
.zdwdh-bot-fab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #000000;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--vv-radius-full);
    padding: 10px 18px 10px 14px;
    font-family: var(--vv-font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.zdwdh-bot-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.16);
    background: #000000;
}

.zdwdh-bot-fab:focus-visible {
    outline: 2px solid var(--vv-accent);
    outline-offset: 3px;
}

.zdwdh-bot-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #000000;
    color: var(--vv-accent, #EDFF00);
}

.zdwdh-bot-fab-label {
    letter-spacing: -0.01em;
}

.zdwdh-bot-fab-sparkle {
    color: var(--vv-accent, #EDFF00);
    font-size: 13px;
    animation: zdwdhSparklePulse 2.5s infinite ease-in-out;
}

@keyframes zdwdhSparklePulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Chat Window */
.zdwdh-bot-window {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: 410px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 120px);
    background: var(--vv-surface, #FFFFFF);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg, 16px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom right;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.zdwdh-bot-window.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Window Header */
.zdwdh-bot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--vv-surface-warm, #F2EDE4);
    border-bottom: 1px solid var(--vv-border);
    flex-shrink: 0;
}

.zdwdh-bot-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zdwdh-bot-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--vv-radius-md, 10px);
    background: #191919;
    color: var(--vv-accent, #EDFF00);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zdwdh-bot-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--vv-text);
    margin: 0;
    line-height: 1.2;
}

.zdwdh-bot-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--vv-text-muted);
    font-weight: 500;
}

.zdwdh-bot-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.zdwdh-bot-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.zdwdh-bot-btn-icon {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: var(--vv-radius-sm);
    color: var(--vv-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.zdwdh-bot-btn-icon:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--vv-text);
}

/* Messages container */
.zdwdh-bot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--vv-bg, #FAF8F5);
}

/* Individual message */
.zdwdh-msg {
    display: flex;
    flex-direction: column;
    max-width: 86%;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
}

.zdwdh-msg-bot {
    align-self: flex-start;
}

.zdwdh-msg-user {
    align-self: flex-end;
}

.zdwdh-msg-bubble {
    padding: 11px 14px;
    border-radius: 14px;
}

.zdwdh-msg-bot .zdwdh-msg-bubble {
    background: var(--vv-surface, #FFFFFF);
    color: var(--vv-text);
    border: 1px solid var(--vv-border-light);
    border-bottom-left-radius: 3px;
    box-shadow: var(--vv-shadow-sm);
}

.zdwdh-msg-user .zdwdh-msg-bubble {
    background: #191919;
    color: #FFFFFF;
    border-bottom-right-radius: 3px;
}

.zdwdh-msg-bubble p {
    margin: 0 0 8px 0;
}

.zdwdh-msg-bubble p:last-child {
    margin-bottom: 0;
}

.zdwdh-msg-bubble ul, .zdwdh-msg-bubble ol {
    margin: 6px 0 8px 18px;
    padding: 0;
}

.zdwdh-msg-bubble li {
    margin-bottom: 4px;
}

.zdwdh-msg-bubble strong {
    font-weight: 700;
}

.zdwdh-msg-bubble a.zdwdh-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--vv-surface-warm, #F2EDE4);
    color: var(--vv-text);
    padding: 3px 8px;
    border-radius: var(--vv-radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 12.5px;
    margin: 3px 2px;
    border: 1px solid var(--vv-border);
    transition: all 0.15s ease;
}

.zdwdh-msg-bubble a.zdwdh-ref-link:hover {
    background: var(--vv-accent, #EDFF00);
    color: #191919;
    border-color: transparent;
}

/* Quick prompt chips */
.zdwdh-quick-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.zdwdh-chip-btn {
    background: var(--vv-surface, #FFFFFF);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-full);
    padding: 5px 11px;
    font-size: 12px;
    font-family: var(--vv-font);
    color: var(--vv-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.zdwdh-chip-btn:hover {
    background: #191919;
    color: #FFFFFF;
    border-color: #191919;
    transform: translateY(-1px);
}

/* Typing indicator */
.zdwdh-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: var(--vv-surface);
    border: 1px solid var(--vv-border-light);
    border-radius: 14px 14px 14px 3px;
    width: fit-content;
}

.zdwdh-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vv-text-muted);
    animation: zdwdhBounce 1.2s infinite ease-in-out;
}

.zdwdh-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.zdwdh-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes zdwdhBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Input Form */
.zdwdh-bot-footer {
    padding: 12px 14px;
    background: var(--vv-surface);
    border-top: 1px solid var(--vv-border-light);
    flex-shrink: 0;
}

.zdwdh-bot-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--vv-bg, #FAF8F5);
    border: 1.5px solid var(--vv-border);
    border-radius: var(--vv-radius-full);
    padding: 4px 5px 4px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zdwdh-bot-input-wrapper:focus-within {
    border-color: var(--vv-text);
    box-shadow: 0 0 0 3px rgba(25, 25, 25, 0.08);
    background: #FFFFFF;
}

.zdwdh-bot-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--vv-font);
    font-size: 13.5px;
    color: var(--vv-text);
    outline: none;
    padding: 6px 0;
}

.zdwdh-bot-input::placeholder {
    color: var(--vv-text-muted);
    opacity: 0.8;
}

.zdwdh-bot-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #191919;
    color: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.zdwdh-bot-send-btn:hover:not(:disabled) {
    background: #000000;
    transform: scale(1.05);
}

.zdwdh-bot-send-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--vv-border);
    color: var(--vv-text-muted);
}

.zdwdh-bot-disclaimer {
    font-size: 10.5px;
    color: var(--vv-text-muted);
    text-align: center;
    margin-top: 7px;
    line-height: 1.2;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .zdwdh-bot-container {
        bottom: 16px;
        right: 16px;
    }
    .zdwdh-bot-window {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        height: 85vh;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }
    .zdwdh-bot-window.is-open {
        transform: translateY(0);
    }
}

/* ==========================================================================
   Declaratie Module (declaratie.php)
   ========================================================================== */
.declaratie-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 0 48px 0;
}

.declaratie-hero {
    background: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--vv-shadow-sm);
    position: relative;
    overflow: hidden;
}

.declaratie-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--vv-accent);
}

.declaratie-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.declaratie-hero-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 26px;
    font-weight: 800;
    color: var(--vv-text);
}

.declaratie-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vv-accent);
    color: #191919;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--vv-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.declaratie-hero-desc {
    color: var(--vv-text-secondary);
    font-size: 14.5px;
    max-width: 780px;
    line-height: 1.6;
    margin: 0;
}

.declaratie-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 14px 18px;
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--vv-text-secondary);
}

.declaratie-info-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--vv-text);
}

.declaratie-info-banner a {
    color: var(--vv-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.declaratie-card {
    background: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--vv-shadow-sm);
}

.declaratie-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--vv-text);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vv-border-light);
}

.declaratie-card-title svg {
    color: var(--vv-text-muted);
}

/* Grid & Form fields */
.declaratie-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.declaratie-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.declaratie-form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--vv-text);
}

.declaratie-form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--vv-bg);
    border: 1.5px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    font-family: var(--vv-font);
    font-size: 14px;
    color: var(--vv-text);
    transition: all 0.2s ease;
}

.declaratie-form-input:focus {
    outline: none;
    border-color: var(--vv-text);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(25, 25, 25, 0.08);
}

.declaratie-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--vv-text-secondary);
    cursor: pointer;
}

.declaratie-checkbox-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #191919;
    cursor: pointer;
}

/* Interactive Table */
.declaratie-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    background: var(--vv-surface);
}

.declaratie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    text-align: left;
}

.declaratie-table th {
    background: var(--vv-surface-warm);
    color: var(--vv-text);
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 1.5px solid var(--vv-border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.declaratie-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--vv-border-light);
    vertical-align: middle;
}

.declaratie-table tr:nth-child(even) td {
    background: #FAF8F5;
}

.declaratie-table tr:hover td {
    background: rgba(237, 255, 0, 0.12);
}

.declaratie-table input[type="text"],
.declaratie-table input[type="date"],
.declaratie-table input[type="number"],
.declaratie-table textarea {
    width: 100%;
    padding: 7px 10px;
    background: #FFFFFF;
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-sm);
    font-family: var(--vv-font);
    font-size: 13.5px;
    color: var(--vv-text);
    transition: all 0.15s ease;
}

.declaratie-table input:focus,
.declaratie-table textarea:focus {
    outline: none;
    border-color: var(--vv-text);
    box-shadow: 0 0 0 2px rgba(25, 25, 25, 0.1);
}

.declaratie-table textarea.inp-omschrijving {
    resize: vertical;
    min-height: 38px;
    height: 38px;
    line-height: 1.35;
    box-sizing: border-box;
    display: block;
}

.declaratie-table textarea.inp-omschrijving.is-multiline {
    height: 52px;
    min-height: 48px;
    font-size: 13px;
    line-height: 1.3;
}

.declaratie-table .td-amount {
    width: 120px;
}

.declaratie-table .td-amount input {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.declaratie-table .td-km {
    width: 90px;
}

.declaratie-table .td-km input {
    text-align: center;
}

.declaratie-table .td-check {
    width: 65px;
    text-align: center;
}

.declaratie-table .td-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #191919;
    cursor: pointer;
    vertical-align: middle;
}

.declaratie-table .td-action {
    width: 50px;
    text-align: center;
}

.btn-del-row {
    background: transparent;
    border: none;
    color: var(--vv-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--vv-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-del-row:hover {
    background: #FEE2E2;
    color: #DC2626;
}

.declaratie-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: var(--vv-surface-warm);
    border-top: 1.5px solid var(--vv-border);
}

.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--vv-surface);
    color: var(--vv-text);
    border: 1.5px solid var(--vv-border);
    padding: 8px 16px;
    border-radius: var(--vv-radius-md);
    font-family: var(--vv-font);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-add-row:hover {
    background: #191919;
    color: #FFFFFF;
    border-color: #191919;
}

.declaratie-summary-box {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.declaratie-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.declaratie-summary-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--vv-text-muted);
    font-weight: 600;
}

.declaratie-summary-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--vv-text);
    font-variant-numeric: tabular-nums;
}

.declaratie-summary-val.total-bedrag {
    font-size: 22px;
    color: #191919;
    background: var(--vv-accent);
    padding: 2px 10px;
    border-radius: var(--vv-radius-sm);
}

/* Upload Dropzone */
.declaratie-dropzone {
    border: 2px dashed var(--vv-border);
    border-radius: var(--vv-radius-lg);
    background: var(--vv-bg);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.declaratie-dropzone:hover,
.declaratie-dropzone.is-dragover {
    border-color: var(--vv-text);
    background: var(--vv-surface-warm);
    transform: translateY(-2px);
}

.declaratie-dropzone-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--vv-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vv-text);
    box-shadow: var(--vv-shadow-sm);
}

.declaratie-dropzone-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--vv-text);
}

.declaratie-dropzone-subtitle {
    font-size: 12.5px;
    color: var(--vv-text-muted);
}

/* Uploaded files preview list */
.declaratie-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.declaratie-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--vv-text);
    box-shadow: var(--vv-shadow-sm);
    animation: fadeIn 0.2s ease;
}

.declaratie-file-badge {
    background: #191919;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: var(--vv-radius-sm);
    text-transform: uppercase;
}

.declaratie-file-badge.pdf {
    background: #DC2626;
}

.declaratie-file-name {
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.declaratie-file-size {
    color: var(--vv-text-muted);
    font-size: 11.5px;
}

.declaratie-file-remove {
    background: transparent;
    border: none;
    color: var(--vv-text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.declaratie-file-remove:hover {
    color: #DC2626;
    background: rgba(220, 38, 38, 0.1);
}

/* Actions Bar */
.declaratie-actions-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 28px;
    background: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    box-shadow: var(--vv-shadow-md);
}

.declaratie-actions-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-declaratie-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #191919;
    color: #FFFFFF;
    border: none;
    padding: 12px 22px;
    border-radius: var(--vv-radius-md);
    font-family: var(--vv-font);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-declaratie-primary:hover {
    background: #000000;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.btn-declaratie-primary svg {
    color: var(--vv-accent);
}

.btn-declaratie-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--vv-surface-warm);
    color: var(--vv-text);
    border: 1.5px solid var(--vv-border);
    padding: 11px 18px;
    border-radius: var(--vv-radius-md);
    font-family: var(--vv-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-declaratie-secondary:hover {
    background: var(--vv-surface-sand);
    border-color: var(--vv-text);
    transform: translateY(-1px);
}

.btn-declaratie-primary:disabled,
.btn-declaratie-secondary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}


.btn-declaratie-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--vv-text-muted);
    border: none;
    padding: 10px 14px;
    font-family: var(--vv-font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-declaratie-outline:hover {
    color: var(--vv-text);
}

/* Modal / Toast Notifications */
.declaratie-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #191919;
    color: #FFFFFF;
    padding: 14px 20px;
    border-radius: var(--vv-radius-md);
    box-shadow: var(--vv-shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    z-index: 9999;
    animation: slideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.declaratie-toast.success {
    border-left: 4px solid #10B981;
}

.declaratie-toast.error {
    border-left: 4px solid #DC2626;
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .declaratie-hero {
        padding: 20px;
    }
    .declaratie-card {
        padding: 18px;
    }
    .declaratie-actions-card {
        flex-direction: column;
        align-items: stretch;
    }
    .declaratie-actions-buttons {
        flex-direction: column;
        width: 100%;
    }
    .btn-declaratie-primary,
    .btn-declaratie-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Woon-werkverkeer Calculator */
.woonwerk-panel {
    background: var(--vv-surface-warm);
    border: 1.5px solid var(--vv-border);
    border-radius: var(--vv-radius-lg);
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: var(--vv-shadow-sm);
    animation: fadeIn 0.25s ease;
}

.woonwerk-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vv-border);
}

.woonwerk-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--vv-text);
}

.woonwerk-rate-badge {
    background: var(--vv-accent);
    color: #191919;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--vv-radius-full);
}

.woonwerk-cal-container {
    background: var(--vv-surface);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 16px 20px;
    margin: 16px 0;
}

.woonwerk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.woonwerk-cal-header-cell {
    font-size: 11px;
    font-weight: 700;
    color: var(--vv-text-muted);
    text-align: center;
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woonwerk-cal-day {
    height: 42px;
    border: 1.5px solid var(--vv-border);
    background: #FFFFFF;
    border-radius: var(--vv-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--vv-font);
    color: var(--vv-text);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.woonwerk-cal-day:hover {
    background: var(--vv-surface-sand);
    border-color: var(--vv-text);
    transform: translateY(-1px);
}

.woonwerk-cal-day.is-selected {
    background: #191919;
    color: #FFFFFF;
    border-color: #191919;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
}

.woonwerk-cal-day.is-selected::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 14px;
    height: 2px;
    background: var(--vv-accent);
    border-radius: 1px;
}

.woonwerk-cal-day.is-weekend {
    background: #F7F5F2;
    color: var(--vv-text-muted);
    border-style: dashed;
}

.woonwerk-cal-day.is-empty {
    visibility: hidden;
    pointer-events: none;
}

.woonwerk-quick-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.btn-cal-chip {
    background: var(--vv-surface-warm);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius-full);
    padding: 5px 12px;
    font-size: 12px;
    font-family: var(--vv-font);
    font-weight: 600;
    color: var(--vv-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cal-chip:hover {
    background: #191919;
    color: #FFFFFF;
    border-color: #191919;
}

.woonwerk-calc-summary {
    background: var(--vv-surface);
    border: 1.5px solid var(--vv-border);
    border-radius: var(--vv-radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.woonwerk-calc-summary-left {
    font-size: 13.5px;
    color: var(--vv-text-secondary);
    line-height: 1.5;
}

.woonwerk-calc-summary-right {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.woonwerk-calc-amount {
    font-size: 20px;
    font-weight: 800;
    color: #191919;
    background: var(--vv-accent);
    padding: 2px 8px;
    border-radius: var(--vv-radius-sm);
}

.woonwerk-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.declaratie-saved-profile-box {
    margin-top: 16px;
    background: #FAF7F0;
    border: 1.5px solid #E5DEC9;
    border-radius: var(--vv-radius-md);
    padding: 14px 18px;
}

.declaratie-saved-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #E8E0D2;
}

.declaratie-saved-profile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
}

.saved-profile-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--vv-text-secondary);
    flex-wrap: wrap;
}

.saved-profile-item strong {
    color: var(--vv-text);
    font-weight: 700;
}

.btn-profile-shortcut {
    color: #191919;
    font-weight: 700;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    font-size: 13px;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-profile-shortcut:hover {
    color: #000;
    text-decoration: none;
}

/* Concept Banner Declaraties */
.declaratie-concept-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left: 4px solid #D97706;
    border-radius: var(--vv-radius-md);
    padding: 14px 18px;
    margin-bottom: 24px;
    box-shadow: var(--vv-shadow-xs);
}

.concept-banner-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #92400E;
    font-size: 14px;
}

.concept-banner-info svg {
    color: #D97706;
    flex-shrink: 0;
}

.concept-banner-sub {
    font-size: 12.5px;
    color: #B45309;
    margin-top: 2px;
}

.btn-concept-discard {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    color: #92400E;
    padding: 6px 13px;
    border-radius: var(--vv-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.btn-concept-discard:hover {
    background: #FDE68A;
    border-color: #F59E0B;
    color: #78350F;
}

@keyframes vvSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vv-spin {
    animation: vvSpin 0.9s linear infinite;
}