/* ==========================================================================
   Luchtpost v2 — visuele laag bovenop site.css / theme.css / sidebar.css
   Laadt als laatste. Rustig licht papier, donkere inkt, zacht blauwgrijs als
   accent. Elk lid heeft een eigen kleur (kaart, zegel, tags, knop).
   De luchtpoststreep komt maar op één plek voor: bovenaan de pagina.
   ========================================================================== */

:root {
    --ink: #26304a;
    --ink-soft: #4d5a78;
    --muted: #6b7893;
    --page: #eef1f6;
    --card: #ffffff;
    --accent: #5a7fb0;
    --accent-deep: #3f6396;
    --yellow: #f2c14e;
    --yellow-deep: #d9a52f;
    --line: rgba(38, 48, 74, .10);
    --shadow-soft: 0 14px 34px -22px rgba(38, 48, 74, .55);
    --shadow-lift: 0 22px 40px -22px rgba(38, 48, 74, .6);
    --topbar-h: 68px;

    --font-ui: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    --font-letter: 'Newsreader', Georgia, 'Times New Roman', serif;

    --airmail: repeating-linear-gradient(
        -45deg,
        #d8362f 0 12px, #fff 12px 20px, #4f74b8 20px 32px, #fff 32px 40px
    );

    --primary: var(--ink);
    --primary-highlight: var(--accent);
    --bs-primary: #3f6396;
    --bs-primary-rgb: 63, 99, 150;
    --bs-link-color: #3f6396;
    --bs-link-hover-color: #26304a;
    --bs-body-font-family: var(--font-ui);
    --bs-body-color: #232c47;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-ui);
    color: #232c47;
    background-color: var(--page);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
/* de illustraties blijven zichtbaar, maar fluisteren */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(238, 241, 246, .86);
    z-index: -98;
    pointer-events: none;
}
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3, h4, h5 { font-family: var(--font-ui); letter-spacing: -.02em; color: var(--ink); }

/* --------------------------------------------------------------------------
   Bovenbalk (desktop)
   -------------------------------------------------------------------------- */
#topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    z-index: 1030;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px -24px rgba(38, 48, 74, .6);
}
/* de enige luchtpoststreep */
#topbar::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--airmail);
}
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 4px 32px 0;
}
.topbar-brand { font-size: 1.4rem; letter-spacing: -.03em; text-decoration: none; margin-right: 20px; }
.topbar-brand .helvetica { font-family: var(--font-ui); }
.topbar-brand i { color: var(--accent); }

.topbar-nav { display: flex; gap: 2px; }
.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .5rem .95rem;
    border-radius: 999px;
    color: var(--ink-soft);
    font-weight: 560;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.topbar-link i { color: var(--accent); }
.topbar-link:hover { background: #e7ecf4; color: var(--ink); }
.topbar-link.is-active { background: #e2e8f2; color: var(--ink); font-weight: 680; }

.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar-cta { padding: .45rem 1.1rem; }

.credits-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--yellow);
    color: var(--ink);
    font-weight: 650;
    font-size: .92rem;
    padding: .38rem .95rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .15s;
}
.credits-pill:hover { background: #f7d378; color: var(--ink); }
.credits-pill i, .credits-pill .credits-amount { color: var(--ink); }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    transition: background-color .15s;
}
.topbar-user:hover, .topbar-user[aria-expanded="true"] { background: #e7ecf4; }
.topbar-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    background: #dbe5f4;
}
.topbar-avatar--initial { display: grid; place-items: center; color: var(--accent-deep); font-weight: 750; }
.topbar-caret { font-size: .7rem; color: var(--muted); }

.topbar-menu {
    border: 0;
    border-radius: 16px;
    padding: 8px;
    min-width: 240px;
    box-shadow: 0 24px 50px -20px rgba(38, 48, 74, .55);
}
.topbar-menu .dropdown-item { border-radius: 10px; padding: .55rem .8rem; color: var(--ink); font-weight: 520; }
.topbar-menu .dropdown-item i { color: var(--accent); width: 1.3em; text-align: center; }
.topbar-menu .dropdown-item:hover { background: #eef2f8; }
.topbar-menu .dropdown-item--admin { font-size: .9rem; color: var(--ink-soft); padding-top: .4rem; padding-bottom: .4rem; }
.topbar-menu .dropdown-divider { margin: 6px 4px; border-color: var(--line); }

.lang-switch--topbar .lang-switch-track { background: rgba(38, 48, 74, .08); padding: 3px; border-radius: 999px; }
.lang-switch--topbar .lang-switch-option { color: var(--ink-soft); padding: .25rem .8rem; border-radius: 999px; }
.lang-switch--topbar .lang-switch-option:hover { color: var(--ink); }
.lang-switch--topbar .lang-switch-option.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(38, 48, 74, .2); }
.lang-switch--topbar { padding: 0; border: 0; }

.unread-badge { background: #c4554b; color: #fff; }

/* geen zijbalk meer: de inhoud krijgt de volle breedte */
@media (min-width: 1199.98px) {
    #main { margin-left: 0; padding-top: var(--topbar-h); }
    footer { margin-left: 0; }
    .dirty-save-bar { left: 0; }
    .art-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-top: -2.5rem; }
}
body:has(.site-index) .main-content { max-width: 1480px; }
.main-content { padding-left: 32px; padding-right: 32px; }
@media (max-width: 1199.98px) { .main-content { padding-left: 15px; padding-right: 15px; } }

/* --------------------------------------------------------------------------
   Mobiele navigatiebalk (licht)
   -------------------------------------------------------------------------- */
.modern-navbar, .navbar.fixed-top {
    background: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-bottom: 0;
    box-shadow: 0 10px 30px -24px rgba(38, 48, 74, .6);
}
.modern-navbar::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--airmail);
}
.navbar-brand { font-family: var(--font-ui); text-shadow: none !important; font-weight: 800; }
.navbar-brand i { color: var(--accent); }
.modern-toggler .icon-bar { background-color: var(--ink) !important; }
.navbar-nav .nav-link, .navbar-nav .nav-item a.nav-link { color: var(--ink) !important; text-shadow: none; border-radius: 10px; }
.navbar-nav .nav-link.active { background: #e2e8f2 !important; color: var(--ink) !important; }
.navbar-nav li.nav-item:hover { background: #e7ecf4; }
.navbar-collapse { background: transparent; }
.user-credits { background: var(--yellow); color: var(--ink); font-weight: 650; border-radius: 999px; padding: .25rem .7rem; }
.user-credits .credits-amount, .user-credits i { color: var(--ink); }
.lang-switch--navbar .lang-switch-track { background: rgba(38, 48, 74, .08); }
.lang-switch--navbar .lang-switch-option { color: var(--ink-soft); }
.lang-switch--navbar .lang-switch-option.is-active { background: #fff; color: var(--ink); }

/* --------------------------------------------------------------------------
   Paginakop: licht, geen blok meer
   -------------------------------------------------------------------------- */
.page-header { background: transparent; box-shadow: none; }
.page-header::before, .page-header::after { display: none; }
.page-header-inner { padding-top: 34px; padding-bottom: 6px; }
.page-header-eyebrow { display: none; }
.page-header i, .page-header .fa, .page-header .fas, .page-header .far, .page-header .fab, .page-header .fal, .page-header .fad { color: var(--accent); }
.page-header-title {
    font-family: var(--font-ui);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--ink);
    text-shadow: none;
    margin: 0 0 6px;
}
.page-header-title::after { display: none; }
.page-header-subtitle { color: var(--muted); font-family: var(--font-letter); font-size: 1.12rem; font-style: italic; }
.page-header-btn {
    border-radius: 999px;
    background: #fff;
    border: 0;
    color: var(--ink);
    box-shadow: 0 6px 16px -10px rgba(38, 48, 74, .5);
    text-transform: none; letter-spacing: -.01em; font-size: .9rem; font-weight: 600;
}
.page-header-btn:hover { background: var(--ink); color: #fff; }
.page-header-btn:hover i { color: #fff; }

/* --------------------------------------------------------------------------
   Vlakken
   -------------------------------------------------------------------------- */
.zijvak, .whiteBg, .whiteBgNoShadow, .whiteBgTable, .whiteBgTableGrid, .panel.panel-default {
    background: var(--card);
    border: 0;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}
.zijvak { padding: 18px; }
.whiteBg { padding: 20px 18px; }
.whiteBgNoShadow { padding: 24px 20px 20px; }
.panel.panel-default .whiteBgNoShadow { box-shadow: none; background: transparent; }
.faq-page.whiteBg { background: none; box-shadow: none; padding: 0; margin-top: 0; }
.faq-section.whiteBg, .faq-cta.whiteBg { margin-top: 0; }
.table { color: inherit; }

.whiteBg h1, .zijvak h1, .whiteBgNoShadow h1 {
    color: var(--ink); text-shadow: none; backdrop-filter: none;
    padding: 0; font-size: 1.6rem; font-weight: 800; margin: 6px 0 16px;
}
.whiteBg h1::after, .zijvak h1::after, .whiteBgNoShadow h1::after { display: none; }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.btn { font-family: var(--font-ui); font-weight: 620; letter-spacing: -.005em; border-radius: 999px; transition: background-color .15s, color .15s, box-shadow .15s, transform .12s; }
.btn:active { transform: translateY(1px); }

.btn.btn-primary, .btn.btn-success {
    background: var(--ink); color: #fff; border: 1.5px solid var(--ink); box-shadow: none;
}
.btn.btn-primary:hover, .btn.btn-success:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; box-shadow: none; }
.btn.btn-primary:active, .btn.btn-success:active { background: #2f4f7e !important; box-shadow: none; }

.btn.btn-warning {
    background: var(--yellow); color: var(--ink); border: 1.5px solid var(--yellow); box-shadow: none;
}
.btn.btn-warning:hover { background: #f7d378; border-color: #f7d378; color: var(--ink); box-shadow: none; }
.btn.btn-warning:active { background: #e5ad34 !important; border-color: #e5ad34 !important; color: var(--ink); }
.btn.btn-warning i, .btn.btn-warning .fa, .btn.btn-warning .fas, .btn.btn-warning .far, .btn.btn-warning .fab,
.btn.btn-warning:hover i, .btn.btn-warning:hover .fa, .btn.btn-warning:hover .fas {
    background: none; -webkit-text-fill-color: currentColor; color: inherit;
}
.btn.btn-outline-success, .btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-secondary {
    background: transparent; color: var(--ink); border: 1.5px solid rgba(38, 48, 74, .35); box-shadow: none;
}
.btn.btn-outline-success:hover, .btn.btn-outline-primary:hover, .btn.btn-outline-secondary:hover, .btn.btn-secondary:hover {
    background: var(--ink); border-color: var(--ink); color: #fff;
}
.btn.btn-outline-success i, .btn.btn-outline-primary i, .btn.btn-outline-secondary i, .btn.btn-secondary i { background: none; -webkit-text-fill-color: currentColor; }

/* --------------------------------------------------------------------------
   Formulieren
   -------------------------------------------------------------------------- */
.form-control, .form-select { border-radius: 12px; border: 1.5px solid rgba(38, 48, 74, .2); background-color: #fff; color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(90, 127, 176, .2); }
.form-floating > label { color: var(--muted); }
.form-check-input:checked { background-color: var(--accent-deep); border-color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   Homepage: welkom, zoeken, blogbanner, ledenraster
   -------------------------------------------------------------------------- */
.site-index { margin-top: 6px; }

.welcome {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: stretch;
    background: var(--card);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin-bottom: 30px;
}
.welcome__text { padding: clamp(24px, 4vw, 56px); align-self: center; }
.welcome h1.welcome__title {
    display: block; width: auto; padding: 0; margin: 0 0 16px;
    font-size: clamp(2rem, 3.6vw, 3.3rem); font-weight: 800; line-height: 1.04; letter-spacing: -.04em;
    color: var(--ink); text-shadow: none; backdrop-filter: none;
}
.welcome h1.welcome__title::after { display: none; }
.welcome__lead { font-family: var(--font-letter); font-size: 1.3rem; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; margin: 0 0 26px; }
.welcome__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.welcome__image { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; }
@media (max-width: 900px) {
    .welcome { grid-template-columns: 1fr; }
    .welcome__image { order: -1; height: 220px; }
}

.finder {
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 14px;
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}
.index-top--single .finder { max-width: none; }
.finder__image { width: 132px; min-height: 132px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.finder__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 2px 6px 2px 0; }
.finder__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 5px 5px 18px;
    background: var(--page);
    border-radius: 999px;
    transition: box-shadow .15s, background-color .15s;
}
.finder__form:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.finder__icon { color: var(--accent); }
.finder__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    padding: .55rem 0;
}
.finder__input::placeholder { color: var(--muted); }
.finder__button { padding: .6rem 1.5rem; }
.finder__help { display: inline-flex; font-size: 1.2rem; color: var(--accent); margin-right: 10px; }
.finder__help a, .finder__help i { color: var(--accent) !important; }
.finder__tags { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.finder__tag {
    display: inline-block;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: var(--page);
    color: var(--ink-soft);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.finder__tag:hover, .finder__tag.is-active { background: var(--ink); color: #fff; }
@media (max-width: 480px) { .finder__image { display: none; } }

/* bovenste rij: zoeken links, blog rechts, op dezelfde kolommen als het ledenraster */
.index-top {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr));
    gap: 26px 24px;
    align-items: stretch;
    margin-bottom: 28px;
}
.index-top--single { grid-template-columns: 1fr; }

.blog-banner {
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 14px;
    background: #fff;
    border-radius: 18px;
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: box-shadow .2s;
}
.blog-banner:hover { box-shadow: var(--shadow-lift); color: var(--ink); }
.blog-banner__image { width: 132px; min-height: 132px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.blog-banner__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; padding: 4px 6px 2px 0; }
.blog-banner__kicker { font-size: .85rem; font-weight: 600; color: var(--accent-deep); }
.blog-banner__kicker i { color: var(--accent); }
.blog-banner__title { font-size: 1.2rem; font-weight: 740; letter-spacing: -.025em; line-height: 1.25; }
.blog-banner__lead {
    font-family: var(--font-letter);
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink-soft);
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-banner__more { margin-top: auto; padding-top: 4px; color: var(--accent-deep); font-weight: 650; }
.blog-banner:hover .blog-banner__more { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .blog-banner__image { width: 84px; min-height: 84px; } }

/* ledenraster: één kolom, vanaf grote schermen twee of meer */
.member-grid .grid-view, .member-grid .table-responsive { overflow: visible; }
.member-grid table, .member-grid tbody { display: block; width: 100%; }
.member-grid tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr));
    gap: 26px 24px;
}
.member-grid tbody > tr { display: flex; background: none; border: 0; }
.member-grid tbody > tr:not(:has(.member-card)) { grid-column: 1 / -1; display: block; }
.member-grid tbody > tr > td { display: flex; flex: 1; padding: 0; border: 0; background: none; }
.member-grid .member-card { flex: 1; margin: 0; }

/* --------------------------------------------------------------------------
   Het lid: eigen kleur, een postzegel en een bericht
   -------------------------------------------------------------------------- */
.member-card {
    --tint: #fdf1cf;
    --paper: #f6dd8f;
    --deep: #7a5a00;
    --tilt: -2deg;
    gap: 26px;
    border: 0;
    border-left: 0;
    border-radius: 18px;
    padding: 28px 28px 22px 0;
    margin: 16px 0;
    background: var(--tint);
    box-shadow: var(--shadow-soft);
}
.member-card::before, .member-card::after { display: none; }
.member-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift) !important; }

.card-p-0 { --tint: #fdf1cf; --paper: #f6dd8f; --deep: #7a5a00; --tilt: -2.4deg; }
.card-p-1 { --tint: #def0e5; --paper: #b9dcc7; --deep: #1f5c3a; --tilt: 1.8deg; }
.card-p-2 { --tint: #fbe0e3; --paper: #f2bcc3; --deep: #8a2030; --tilt: -1.2deg; }
.card-p-3 { --tint: #dfeafb; --paper: #b8cff0; --deep: #1d4a96; --tilt: 2.4deg; }
.card-p-4 { --tint: #eae1f9; --paper: #cdbdee; --deep: #4b2f94; --tilt: -1.8deg; }
.card-p-0, .card-p-1, .card-p-2, .card-p-3, .card-p-4 { background: var(--tint); border-left-color: transparent; box-shadow: var(--shadow-soft); }
.card-p-0::before, .card-p-1::before, .card-p-2::before, .card-p-3::before, .card-p-4::before { display: none; }

.member-card__photo {
    width: 160px;
    padding-left: 26px;
    min-height: 0;
    filter: drop-shadow(0 8px 10px rgba(38, 48, 74, .26));
    transform: rotate(var(--tilt));
    transition: transform .25s ease;
}
.member-card:hover .member-card__photo { transform: rotate(0); }

/* de postzegel: tandrand via masker, zegelpapier in de kleur van het lid */
.member-card__photo .mypicture,
.member-card__photo .profile-avatar {
    --tile: 16px;
    --hole: 4.4px;
    display: block;
    width: 100%;
    max-width: 134px;
    height: auto;
    padding: 11px;
    background: var(--paper);
    border-radius: 0;
    box-shadow: none;
    position: relative;
    -webkit-mask:
        radial-gradient(circle at 0 0, transparent var(--hole), #000 calc(var(--hole) + .6px)) 0 0 / var(--tile) var(--tile) round,
        linear-gradient(#000 0 0) content-box;
            mask:
        radial-gradient(circle at 0 0, transparent var(--hole), #000 calc(var(--hole) + .6px)) 0 0 / var(--tile) var(--tile) round,
        linear-gradient(#000 0 0) content-box;
    -webkit-mask-clip: border-box, content-box;
            mask-clip: border-box, content-box;
}
.member-card__photo .penvrienden-plaatje {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
    box-shadow: none;
    outline: 1px solid rgba(38, 48, 74, .16);
    outline-offset: -1px;
}
/* poststempel met een @: de brief komt per e-mail aan */
.member-card__photo .mypicture::after {
    content: '';
    position: absolute;
    right: -14px; bottom: -8px;
    width: 76px; height: 76px;
    background-color: var(--deep);
    opacity: .5;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='24' stroke-width='1.2'/%3E%3Ctext x='40' y='51' font-size='32' font-family='Arial,sans-serif' font-weight='700' text-anchor='middle' fill='%23000' stroke='none'%3E@%3C/text%3E%3Cpath d='M-8 36 q8 -6 16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='24' stroke-width='1.2'/%3E%3Ctext x='40' y='51' font-size='32' font-family='Arial,sans-serif' font-weight='700' text-anchor='middle' fill='%23000' stroke='none'%3E@%3C/text%3E%3Cpath d='M-8 36 q8 -6 16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    mix-blend-mode: multiply;
}
.member-card__photo .profile-avatar { aspect-ratio: auto; background: var(--paper); color: var(--deep); }
.member-card__photo .profile-avatar::before { content: none; }
.card-p-0 .profile-avatar, .card-p-1 .profile-avatar, .card-p-2 .profile-avatar,
.card-p-3 .profile-avatar, .card-p-4 .profile-avatar { background: var(--paper); color: var(--deep); }
.member-card--full .member-card__photo { width: 230px; }

.member-card__body { gap: 10px; }
.member-card__naam { font-family: var(--font-ui); font-style: normal; font-weight: 750; font-size: 1.45rem; letter-spacing: -.03em; color: var(--ink); }
.member-card__leeftijd { background: rgba(255, 255, 255, .7); border: 0; color: var(--deep); border-radius: 999px; padding: 2px 11px; font-weight: 600; }
.member-card__bericht { font-family: var(--font-letter); font-size: 1.12rem; line-height: 1.7; color: #232c47; max-width: 60ch; }
.member-card__bericht b, .member-card__bericht strong { font-weight: 650; }

/* tags: ruime pillen in de kleur van het lid */
.member-card__tags { display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 8px; }
.drawTag, .drawTagOdd {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    margin: 0;
    background: rgba(255, 255, 255, .75);
    color: var(--deep, var(--ink));
    border: 0;
    border-radius: 999px;
    font-weight: 620;
    font-size: .88rem;
    line-height: 1.2;
    box-shadow: none;
    transition: background-color .15s, color .15s;
}
.drawTag i, .drawTagOdd i { font-size: .75em; opacity: .55; }
.drawTag:hover, .drawTagOdd:hover { background: var(--deep, var(--ink)); color: #fff; box-shadow: none; transform: none; }
.drawTag:active, .drawTagOdd:active { background: var(--deep, var(--ink)); transform: none; box-shadow: none; }

.member-card__footer { padding-top: 8px; }
.member-card .btn.btn-warning { background: var(--deep); border-color: var(--deep); color: #fff; padding: .6rem 1.35rem; }
.member-card .btn.btn-warning:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.member-card .btn.btn-outline-secondary, .member-card .btn.btn-outline-success, .member-card .btn.btn-outline-primary { color: var(--deep); border-color: var(--deep); background: rgba(255, 255, 255, .4); }
.member-card .btn.btn-outline-secondary:hover, .member-card .btn.btn-outline-success:hover, .member-card .btn.btn-outline-primary:hover { background: var(--deep); color: #fff; }

.card-responded::after { display: none; }
.member-card__badge { top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; background: var(--deep); color: #fff; box-shadow: none; }
.member-card__badge i { font-size: 1rem; }

@media (max-width: 640px) {
    .member-card { padding: 24px 18px 18px; gap: 18px; }
    .member-card__photo { width: 150px; padding-left: 0; align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   Artikelen en blog
   -------------------------------------------------------------------------- */
.article-hero-card, .article-blog-card, .art-hero { border-radius: 18px; }
.article-hero-card, .article-blog-card { box-shadow: var(--shadow-soft); }
.article-hero-card:hover, .article-hero-card:focus { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.article-hero-bg, .article-blog-bg { background-color: var(--ink); }
.article-hero-overlay, .article-blog-overlay { background: linear-gradient(175deg, rgba(38, 48, 74, .55) 0%, rgba(38, 48, 74, .2) 40%, rgba(38, 48, 74, .78) 100%); }
.article-hero-lead-area, .article-blog-lead-area { background: rgba(38, 48, 74, .6); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; }
.article-hero-title, .article-blog-title, .art-hero-title { font-family: var(--font-ui); font-weight: 800; letter-spacing: -.03em; text-shadow: 0 2px 14px rgba(38, 48, 74, .8); }
.article-hero-eyebrow, .article-blog-eyebrow, .art-hero-eyebrow { letter-spacing: -.01em; text-transform: none; font-weight: 600; color: var(--yellow); }
.article-hero-lead-text, .article-blog-lead-text, .art-hero-lead { font-family: var(--font-letter); font-size: 1.05rem; }
.article-hero-read-cta, .article-blog-read-cta { color: var(--yellow); letter-spacing: 0; text-transform: none; }
.article-hero-btn, .article-all-bar { background: rgba(255, 255, 255, .92); border: 0; border-radius: 999px; color: var(--ink); letter-spacing: 0; text-transform: none; font-size: .85rem; }
.article-hero-btn i, .article-all-bar i { color: var(--accent); }
.article-hero-btn:hover, .article-all-bar:hover { background: var(--ink); color: #fff; }
.art-content { font-family: var(--font-letter); font-size: 1.2rem; line-height: 1.75; color: #232c47; }
.art-content h2, .art-content h3 { font-family: var(--font-ui); color: var(--ink); }
.art-content p { max-width: 68ch; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-section__title { font-family: var(--font-ui); color: var(--ink); text-transform: none; letter-spacing: -.02em; font-size: 1.3rem; font-weight: 750; }
.faq-section__title i, .faq-btn-icon { color: var(--accent); }
.faq-item { border-radius: 12px; border: 0; background: #f6f8fb; margin-bottom: 8px; }
.faq-btn { font-family: var(--font-ui); color: var(--ink); font-weight: 600; background: transparent; }
.faq-body { font-family: var(--font-letter); font-size: 1.08rem; line-height: 1.7; }
.faq-img { border-radius: 18px; box-shadow: var(--shadow-soft); }

/* illustraties naast formulieren: een ansichtkaart die een beetje scheef staat */
.featurette-image {
    border: 10px solid #fff;
    border-bottom-width: 26px;
    border-radius: 2px;
    box-shadow: 0 22px 36px -18px rgba(38, 48, 74, .6);
    transform: rotate(1.6deg);
}

/* --------------------------------------------------------------------------
   Voettekst
   -------------------------------------------------------------------------- */
#footer { background: transparent !important; color: var(--muted); font-size: .9rem; opacity: 1 !important; }
#footer a { color: var(--ink-soft); }

/* achtergrond: de oude bosfoto's vervangen door de gouache-illustraties */
.backgroundOne  { background-image: url(../backgrounds/luchtpost-dawn.jpg)  !important; }
.backgroundTwo  { background-image: url(../backgrounds/luchtpost-noon.jpg)  !important; }
.backgroundTree { background-image: url(../backgrounds/luchtpost-dusk.jpg)  !important; }
.backgroundFour { background-image: url(../backgrounds/luchtpost-night.jpg) !important; }
.backgroundFive { background-image: url(../backgrounds/luchtpost-noon.jpg)  !important; }
.backgroundSix  { background-image: url(../backgrounds/luchtpost-dawn.jpg)  !important; }
.backgroundCarouselItem { background-size: cover !important; background-position: center bottom !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* restjes van het oude groene menu */
.nav-link, .nav-link.active, .nav-link:hover, .navbar-nav .nav-link.active { border-left: 0 !important; }

/* --------------------------------------------------------------------------
   Mijn berichten: op een groot scherm ontvangen en verzonden naast elkaar
   -------------------------------------------------------------------------- */
body:has(.mail-page) .main-content { max-width: 1480px; }
.container.mail-page { max-width: none; padding: 1.5rem 0 3rem; }
.mail-page.whiteBg { background: none; box-shadow: none; border-radius: 0; }
.mail-page.whiteBg::before { display: none; }
.mail-section-separator { display: none; }
.mail-section { margin: 0 0 24px; padding: 22px 22px 16px; }
@media (min-width: 1199.98px) {
    .container.mail-page {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }
    .mail-section { margin: 0; }
}

.mail-section-header { border-bottom: 1px solid var(--line); }
.mail-section-icon { border-radius: 12px; box-shadow: none; }
.mail-section-icon--inbox { background: var(--accent-deep); box-shadow: none; }
.mail-section-icon--sent { background: var(--accent); box-shadow: none; }
.mail-section-title { font-family: var(--font-ui); font-size: 1.25rem; font-weight: 750; letter-spacing: -.025em; color: var(--ink); }
.mail-section-subtitle { color: var(--muted); font-size: .85rem; }
.mail-section-count { background: var(--page); color: var(--ink-soft); }

.mail-card {
    background: #f5f7fb;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
}
.mail-card:hover { background: #fff; box-shadow: var(--shadow-soft); transform: none; }
.mail-card--inbox, .mail-card--sent { border-left: 0; }
.mail-avatar--inbox { background: var(--accent-deep); }
.mail-avatar--sent { background: var(--accent); }
.mail-card__subject { color: var(--ink); font-family: var(--font-ui); font-weight: 700; }
.mail-card__participants, .mail-card__date { color: var(--muted); }
.mail-card__participants a, .mail-card__participants a:visited { color: var(--accent-deep); }
.mail-card__body { font-family: var(--font-letter); font-size: 1.05rem; line-height: 1.65; color: #232c47; }
.mail-card__divider { background: var(--line); }

.mail-empty { background: #f5f7fb; border: 0; border-radius: 14px; color: var(--muted); }
.mail-pager .page-link { color: var(--ink-soft); border-color: var(--line); }
.mail-pager .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: #fff; }
.mail-pager .page-link:hover { background: var(--page); color: var(--ink); }

/* zoekwoord markeren als een stift, niet als rood blok */
span.highlight {
    background: #ffe08a;
    color: var(--ink);
    border: 0;
    border-radius: 4px;
    padding: 0 3px;
    box-shadow: none;
}
.member-card__footer { gap: 10px; align-items: center; }

/* ==========================================================================
   Uitleg-popups (Help::show). Papieren kaart, geen gekleurde kop.
   De uitleg op de homepage krijgt een illustratie bovenaan.
   ========================================================================== */
.help-dialog .modal-content {
    border: 0;
    border-radius: 22px;
    background: var(--card);
    box-shadow: 0 40px 80px -30px rgba(38, 48, 74, .7);
    overflow: hidden;
}
.help-dialog .modal-dialog { max-width: 480px; }
.help-dialog .modal-header.bootstrap-dialog-header,
.help-dialog .modal-header.btn-warning {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 14px 14px 0 22px;
    color: var(--ink) !important;
}
.help-dialog .bootstrap-dialog-header { display: flex; align-items: center; justify-content: space-between; width: 100%; flex-direction: row-reverse; }
.help-dialog .bootstrap-dialog-title { width: auto; font-family: var(--font-ui); font-weight: 700; color: var(--ink) !important; }
.help-dialog .bootstrap-dialog-close-button { width: auto; }
.help-dialog .modal-header .btn-modal-close,
.help-dialog .modal-header.btn-warning .bootstrap-dialog-close-button .btn-modal-close {
    width: 36px; height: 36px; padding: 0;
    border-radius: 50% !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .85) !important;
    color: var(--ink) !important;
    font-size: 1.4rem; line-height: 1;
    box-shadow: 0 2px 8px -2px rgba(38, 48, 74, .4) !important;
}
.help-dialog .modal-body { padding: 18px 24px 26px; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.help-dialog .modal-footer { display: none; }

/* variant met illustratie: de kop zweeft, alleen de sluitknop blijft */
.help-dialog .modal-content:has(.help-hero) .modal-header.bootstrap-dialog-header {
    position: absolute; top: 0; right: 0; z-index: 2; width: auto; padding: 12px;
}
.help-dialog .modal-content:has(.help-hero) .bootstrap-dialog-title { display: none; }
.help-dialog .modal-content:has(.help-hero) .modal-body { padding: 0 28px 28px; }

.help-hero { margin: 0 -28px 8px; }
.help-hero img {
    display: block; width: 100%; height: auto; aspect-ratio: 480 / 268; object-fit: cover;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
            mask-image: linear-gradient(#000 70%, transparent);
}
.help-title {
    margin: -18px 0 18px;
    position: relative;
    font-family: var(--font-letter);
    font-size: 1.75rem; font-weight: 500; line-height: 1.15;
    color: var(--ink);
}
.help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.help-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
.help-steps__icon {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: #e3ebf6; color: var(--accent-deep);
}
.help-steps b { color: var(--ink); }
@media (max-width: 575.98px) {
    .help-title { font-size: 1.5rem; }
}

/* ==========================================================================
   Paginakop met illustratie (params['headerImage']) en melding "bericht niet zichtbaar"
   ========================================================================== */
.page-header--art .page-header-inner { position: relative; min-height: 190px; isolation: isolate; }
.page-header-art {
    position: absolute; z-index: -1;
    top: 8px; right: 0; bottom: -4px;
    width: min(58%, 640px); height: calc(100% - 4px);
    object-fit: cover; object-position: left center;
    border-radius: 26px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
            mask-image: linear-gradient(to right, transparent, #000 45%);
}
@media (max-width: 767.98px) {
    .page-header--art .page-header-inner { min-height: 0; }
    .page-header-art { width: 100%; opacity: .35; }
}

.nudge {
    display: grid; grid-template-columns: 112px 1fr auto; gap: 8px 22px; align-items: center;
    margin: 0 0 20px; padding: 14px 22px 14px 14px;
    background: linear-gradient(100deg, #fff6dc, #fffaf0 70%);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}
.nudge__image { width: 112px; height: 112px; object-fit: cover; border-radius: 18px; transform: rotate(-3deg); box-shadow: 0 10px 22px -14px rgba(38, 48, 74, .7); }
.nudge__title { margin: 0 0 4px; font-family: var(--font-letter); font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.nudge__text { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.nudge__text b { color: var(--ink); }
.nudge__button { white-space: nowrap; }
@media (max-width: 767.98px) {
    .nudge { grid-template-columns: 84px 1fr; padding: 12px; }
    .nudge__image { width: 84px; height: 84px; }
    .nudge__button { grid-column: 1 / -1; justify-self: start; }
}

/* schuifje "bericht is te zien": licht kort op als je vanaf de melding op de homepage komt */
.visible-switch { border-radius: 16px; transition: background-color .4s ease; }
.visible-switch.is-spotlight { animation: spotlight 2.6s ease-out 1; }
@keyframes spotlight {
    0%   { background-color: rgba(216, 54, 47, 0);  box-shadow: 0 0 0 0 rgba(216, 54, 47, .65); }
    18%  { background-color: rgba(216, 54, 47, .30); box-shadow: 0 0 0 10px rgba(216, 54, 47, .30); }
    55%  { background-color: rgba(216, 54, 47, .22); box-shadow: 0 0 0 18px rgba(216, 54, 47, 0); }
    100% { background-color: rgba(216, 54, 47, 0);  box-shadow: 0 0 0 0 rgba(216, 54, 47, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .visible-switch.is-spotlight { animation-duration: 1.2s; }
}

/* minder lucht tussen paginakop en inhoud */
.page-header + .main-content,
.page-header + .main-content:not(.presentation),
.page-header + .main-content.presentation { padding-top: 6px; }
.page-header--art .page-header-inner { padding-bottom: 0; }

/* beheerbalk boven het artikelvoorbeeld (articles/view) */
.art-admin-bar {
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
    margin: 12px 0 18px; padding: 10px 14px;
    background: #fff; border-radius: 16px; box-shadow: var(--shadow-soft);
}
.art-admin-status { font-weight: 600; color: var(--ink); }
.art-admin-status::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--yellow-deep); }
.art-admin-status.is-live::before { background: #3f9a62; }
.art-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* iconen op donkere/gekleurde knoppen in de paginakop (o.a. terugknop) wit */
.page-header .btn i, .page-header .btn .fa, .page-header .btn .fas, .page-header .btn .fa-solid { color: #fff; }

/* het artikelvoorbeeld kruipt normaal onder de bovenbalk; met beheerbalk erboven niet */
.art-admin-bar { position: relative; z-index: 3; }
.art-admin-bar + .art-hero { margin-top: 4px; }

/* lead mag <p>-tags bevatten: de wrapper is een div, binnenin erft alles de lead-stijl */
.art-hero-lead p { margin: 0 0 .6em; color: inherit; font: inherit; line-height: inherit; max-width: none; }
.art-hero-lead p:last-child { margin-bottom: 0; }

/* ---------- Superadmin dashboard ---------- */
.dash { max-width: 1180px; margin: 0 auto; padding: 0 16px 32px; }
.dash-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dash-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 2px; }
.dash-tile-label { font-size: .85rem; color: var(--muted); }
.dash-tile strong { font-size: 1.5rem; color: var(--ink); font-weight: 700; }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dash-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-soft); min-width: 0; }
.dash-card h2 { font-size: 1.1rem; margin: 0 0 4px; color: var(--ink); }
.dash-wide { grid-column: span 2; }
.dash-full { grid-column: 1 / -1; }
.dash-hint { color: var(--muted); font-size: .85rem; margin: 0 0 10px; }
.dash-counts { text-align: center; margin: 10px 0 0; }
td .dash-hint { display: block; margin: 0; }
@media (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-wide { grid-column: auto; }
}

/* ---------- Partner card (Emailkaarten) ---------- */
.promo-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 24px 0 8px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); }
.promo-card-text { flex: 1 1 260px; min-width: 0; }
.promo-card-text strong { color: var(--ink); }
.promo-card-text p { margin: 4px 0 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Beheerschermen: rollen, rechten, groepen, bezoeklog ---------- */
.adm-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); padding: 18px 20px; min-width: 0; overflow-x: auto; }
.adm-card--form { max-width: 760px; }
.adm-card h2 { font-size: 1.1rem; color: var(--ink); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.adm-card h2 .fa-solid { color: var(--accent); }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.adm-card-head h2 { margin: 0; }
.adm-card-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-hint { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.adm-split { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.adm-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-form-actions { margin-top: 16px; }

.adm-table { margin: 0; --bs-table-bg: transparent; }
.adm-table thead th { color: var(--muted); font-weight: 600; font-size: .9rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table thead th a { color: inherit; text-decoration: none; }
.adm-table thead th a:hover { color: var(--accent-deep); }
.adm-table tbody td { vertical-align: middle; border-color: var(--line); }
.adm-table tbody tr:hover > td { background: #f4f7fb; }
.adm-table .filters td { padding-top: 8px; padding-bottom: 8px; background: transparent !important; }
.adm-table .filters .form-control, .adm-table .filters .form-select { font-size: .9rem; border-radius: 8px; }
.adm-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.adm-link:hover { color: var(--accent-deep); text-decoration: underline; }
.adm-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--ink-soft); }
.adm-actions { text-align: right; white-space: nowrap; width: 1%; }
.adm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: .9rem; }
.adm-foot .pagination { margin: 0; }
.adm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-soft); text-decoration: none; transition: background-color .15s, color .15s; }
.adm-icon-btn:hover { background: rgba(90, 127, 176, .14); color: var(--accent-deep); }
.adm-icon-btn--danger:hover { background: rgba(216, 54, 47, .12); color: #b5271f; }
.adm-chip { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(242, 193, 78, .35); color: var(--ink); font-size: .8rem; font-weight: 600; }
.adm-detail { margin: 0; }
.adm-detail th { width: 30%; color: var(--muted); font-weight: 600; }
.adm-detail td, .adm-detail th { border-color: var(--line); word-break: break-word; }

/* keuzelijsten: elke keuze is een pil die kleurt als hij aanstaat */
.rbac-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 22px; }
.rbac-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.rbac-group legend { float: none; width: auto; font-size: .95rem; font-weight: 700; color: var(--ink); padding: 0; margin: 0 0 8px; }
.rbac-list { display: flex; flex-direction: column; gap: 6px; }
.rbac-row { display: flex; align-items: center; gap: 4px; }
.rbac-pick { flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; color: var(--ink-soft); transition: background-color .12s, border-color .12s, color .12s; }
.rbac-pick:hover { border-color: rgba(90, 127, 176, .5); }
.rbac-pick input { accent-color: var(--accent-deep); width: 1.05em; height: 1.05em; flex: none; margin: 0; }
.rbac-pick:has(input:checked) { background: rgba(90, 127, 176, .12); border-color: rgba(90, 127, 176, .55); color: var(--ink); }
.rbac-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rbac-pick:has(input:disabled) { opacity: .6; cursor: default; }
.rbac-readonly { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; color: var(--ink-soft); }

.rbac-routes-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 2; background: var(--card); padding: 8px 0; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.rbac-routes-bar input[type="search"] { flex: 1 1 200px; min-width: 0; border-radius: 999px; }
.rbac-routes-bar .btn.active { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
.rbac-routes { display: flex; flex-direction: column; max-height: 62vh; overflow: auto; }
.rbac-route { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 10px 4px calc(10px + var(--depth, 0) * 22px); border-radius: 8px; cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--ink-soft); }
.rbac-route[hidden] { display: none; }
.rbac-route:hover { background: #f4f7fb; }
.rbac-route input { accent-color: var(--accent-deep); flex: none; margin: 0; }
.rbac-route:has(input:checked) { background: rgba(90, 127, 176, .12); color: var(--ink); }

@media (max-width: 900px) {
    .adm-split, .adm-split--even { grid-template-columns: 1fr; }
}

/* artikelen-overzicht: hele rij klikbaar, grote iconen met eigen actie */
.art-index-table { table-layout: auto; }
.art-index-table thead th { padding-top: 12px; padding-bottom: 12px; }
.art-index-table tbody td { padding: 16px 12px; vertical-align: top; }
.art-row { cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.art-row:hover > td { background: #eef3fa !important; }
.art-row:hover > td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.art-row:hover .art-title { color: var(--accent-deep); }
.art-col-status { width: 1%; white-space: nowrap; }
.art-col-date { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.art-col-title { min-width: 240px; max-width: 380px; }
.art-title { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.3; transition: color .15s; }
.art-lead, .art-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.art-lead { margin-top: 4px; }
.art-col-body { max-width: 360px; }
.art-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.art-pill.is-live { background: rgba(46, 150, 90, .14); color: #1f7a45; }
.art-pill.is-draft { background: rgba(242, 193, 78, .35); color: #7a5a10; }
.adm-icon-btn--lg { width: 44px; height: 44px; font-size: 1.25rem; }
.art-row .adm-icon-btn--lg { color: var(--ink-soft); }
.art-row .adm-icon-btn--lg:hover { background: rgba(90, 127, 176, .18); color: var(--accent-deep); transform: scale(1.08); }
.art-row .adm-icon-btn--danger:hover { background: rgba(216, 54, 47, .14); color: #b5271f; }
@media (max-width: 900px) {
    .art-col-body { display: none; }
}

/* mobiel menu: Beheer is een compact 2x2-blok boven het gewone menu, zonder koppen */
.nav-admin-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(242, 193, 78, .16); border-radius: 14px; padding: 6px; margin: 4px 0 10px; }
.nav-admin-list .nav-item { margin: 0 !important; }
.nav-admin-list .nav-link { display: flex; align-items: center; gap: 8px; padding: .5rem .6rem !important; font-size: .88rem; font-weight: 600; line-height: 1.2; background: rgba(255, 255, 255, .7); }
.nav-admin-list .nav-link i { color: var(--accent-deep); width: 1.2em; text-align: center; flex: none; }
.modern-navbar .navbar-nav:not(.nav-admin-list) .nav-item { margin: 0 !important; }
.modern-navbar .navbar-nav:not(.nav-admin-list) .nav-link { padding-top: .5rem !important; padding-bottom: .5rem !important; }

.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-card-head h2 .fa-solid { color: var(--accent); }

/* mobiel menu: zelf scrollbaar als het hoger is dan het scherm; de pagina erachter blijft staan */
@media (max-width: 1199.98px) {
    .modern-navbar .navbar-collapse { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* hub-pagina (Rollen en rechten): grote kaarten met icoon, uitleg en knop */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.hub-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(90, 127, 176, .5); color: var(--ink); }
.hub-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(90, 127, 176, .14); color: var(--accent-deep); font-size: 1.7rem; transition: background-color .18s, color .18s; }
.hub-card:hover .hub-icon { background: var(--accent-deep); color: #fff; }
.hub-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hub-title { font-size: 1.2rem; font-weight: 800; }
.hub-text { color: var(--ink-soft); line-height: 1.5; }
.hub-cta { font-weight: 700; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 8px; }
.hub-card:hover .hub-cta i { transform: translateX(4px); }
.hub-cta i { transition: transform .18s; }

/* nieuwe berichten: duidelijke rand, zachte achtergrond en een Nieuw-label */
.mail-card--new { background: #fffaf0; box-shadow: inset 4px 0 0 var(--yellow-deep), var(--shadow-soft); }
.mail-card--new:hover { background: #fff8e6; }
.mail-new-badge { display: inline-block; margin-right: 8px; padding: 1px 10px; border-radius: 999px; background: #c4554b; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.mail-section-subtitle .mail-new-badge { margin: 0 0 0 6px; }