html { font-size: 12px; }
html, body { height: 100%; margin: 0; font-family: "Segoe UI", Arial, sans-serif; }

.page { position: relative; display: flex; flex-direction: row; min-height: 100vh; }

/* Breedte wordt versleept via #sidebar-splitter (splitter.js, zie MainLayout.razor) en
   rechtstreeks in de DOM gezet + onthouden in localStorage - hier alleen een redelijke
   default als startbreedte. */
.sidebar {
    background-color: #0b3d64; width: 320px; flex-shrink: 0;
    display: flex; flex-direction: column; min-width: 0;
}

/* ---- Verslepbare scheidingslijnen ("splitters"), zie wwwroot/js/splitter.js ---- */
.splitter { flex-shrink: 0; background-color: #d6d6d6; }
.splitter:hover, .splitter:active { background-color: #0b6efd; }

.splitter-vertical { width: 6px; cursor: col-resize; }
.splitter-horizontal { height: 6px; cursor: row-resize; margin: 0.5rem 0; }

main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d6d6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 3.5rem;
}

/* Compacte hoofdbalk op exact dezelfde hoogte als de titelbalk links. */
.app-command-row {
    justify-content: flex-start; height: 3.5rem; padding: 0;
    background: #454545; border-bottom-color: #2f2f2f; color: #fff;
}
.lead-actionbar {
    display: flex; align-self: stretch; align-items: stretch; min-width: 0; overflow-x: auto;
}
.lead-action {
    display: inline-flex; flex: 0 0 auto; min-width: 88px; padding: 5px 12px;
    flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: #fff; text-decoration: none; border-right: 1px solid #626262;
    font-size: 0.85rem; line-height: 1.2;
}
.lead-action i { font-size: 1.45rem; line-height: 1; }
.lead-action:hover, .lead-action.active { color: #fff; background: #166fa8; }
.lead-action:focus-visible { outline: 3px solid #f7a81b; outline-offset: -3px; }
.lead-accountbar {
    display: flex; flex: 0 0 auto; align-items: center; gap: 1rem;
    height: 100%; margin-left: auto; padding: 0 1rem; white-space: nowrap;
    background: #454545;
}
.lead-accountbar a, .lead-accountbar .btn-link { color: #fff; }
.lead-accountbar form { margin: 0; }
.lead-accountbar .btn-link { padding: 0; font-size: inherit; }

.content { flex: 1; padding-top: 1.5rem; }

.navbar-brand { color: #fff !important; font-weight: 600; padding: 1rem; display: block; }

/* flex:1 + min-height:0 zorgt dat dit het enige scrollende deel van de sidebar is, en dat de
   schuifregelaar (.sidebar-resize) daaronder altijd in beeld blijft staan. */
.nav-scrollable { flex: 1; min-height: 0; overflow-y: auto; }

.nav-item { padding: 0.25rem 0; }

/* Bewust geschoold tot .sidebar (i.p.v. het generieke .nav-item .nav-link): dit is de opmaak voor
   de donkerblauwe zijbalk-navigatie (Commissies/Declaraties/...). Zonder deze schoping botste de
   regel met Bootstrap's eigen .nav-tabs (die dezelfde .nav-item/.nav-link-klassen gebruikt, zie
   MemberEditDialog.razor/ClubEditDialog.razor/MemberList.razor se detail-tabbladen) - de witte
   tekstkleur op een wit dialoogvenster maakte de actieve/gehoverde tab onleesbaar. */
.sidebar .nav-item .nav-link {
    color: #d7e3ec;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.sidebar .nav-item .nav-link.active,
.sidebar .nav-item .nav-link:hover { color: #fff; background-color: rgba(255, 255, 255, 0.12); }

/* ---- Bootstrap .nav-tabs (bewerkdialogen, ledendetailscherm) - expliciete, altijd leesbare
   opmaak i.p.v. op Bootstrap's defaults te vertrouwen. !important omdat Bootstrap 5.3 zijn eigen
   .nav-link-kleur via een CSS-variabele (--bs-nav-link-color) zet - die kan, afhankelijk van
   laadvolgorde/CDN-versie, deze regel alsnog overschrijven zodat de tabbladtekst onleesbaar wordt
   (bv. wit-op-wit voor het actieve tabblad) - zie de door de gebruiker gemelde onleesbare
   tabbladen in ActiviteitEditDialog.razor. ---- */
.nav-tabs .nav-link {
    color: #495057 !important; border-color: transparent !important;
    background-color: transparent !important; opacity: 1 !important;
}
.nav-tabs .nav-link:hover { color: #0d6efd !important; border-color: #e9ecef #e9ecef #dee2e6 !important; }
.nav-tabs .nav-link.active {
    color: #0b3d64 !important; font-weight: 600; background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff !important; opacity: 1 !important;
}

.navbar-toggler { display: none; }

/* Zie AuthLayout.razor: full-page centrering voor de inlog-flow, zonder sidebar. */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    padding: 1rem;
}

.login-card, .mfa-setup-card {
    max-width: 480px;
    width: 100%;
    margin: 2rem auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
}

.privacy-lock { color: #6c757d; margin-right: 0.35rem; }
.privacy-open { color: #0b6efd; margin-right: 0.35rem; }

.member-tree { list-style: none; padding-left: 0.75rem; }
.member-tree li { margin: 0.15rem 0; }

/* ---- Boomweergave: in-/uitklaptoggle en icoon per organisatieniveau ---- */
.tree-row {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.3rem; border-radius: 4px; box-sizing: border-box;
}
.tree-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem; color: #6c757d; text-decoration: none; flex-shrink: 0;
}
.tree-toggle i { font-size: 0.7rem; transition: transform 0.12s ease-in-out; }
.tree-toggle.expanded i { transform: rotate(90deg); }
.tree-toggle-spacer { display: inline-block; width: 1rem; flex-shrink: 0; }
.tree-icon { flex-shrink: 0; font-size: 0.85rem; }
.tree-icon-International, .tree-icon-Zone { color: #6c757d; }
.tree-icon-Land { color: #0b6efd; }
.tree-icon-District, .tree-icon-Club { color: #d4890b; }
.tree-icon-Regio { color: #2e8b3d; }
/* Clubtype-onderscheid (zie OrgUnit.IsRotaract): een gewone Rotaryclub blijft goudgeel (bovenstaande
   .tree-icon-Club-regel), een Rotaract-club krijgt hier een roze/roodachtige kleur - moet ná de
   .tree-icon-Club-regel staan om die te overschrijven (zelfde CSS-specificiteit, dus bron-volgorde
   bepaalt). .tree-icon-rotary voegt bewust niets toe: dat IS al de standaardkleur van .tree-icon-Club. */
.tree-icon-rotaract { color: #d6336c; }

/* ---- Linker accordeonmenu (Eigen club / Rotary adresboek / Zoeken / Bladeren), zit in de
   donkerblauwe sidebar - eigen (lichtere) kleuren omdat de standaard tekstkleuren daar niet goed
   leesbaar zijn. ---- */
.sidebar .org-accordion { margin-top: 0.5rem; }
.sidebar .org-accordion-header {
    display: flex; align-items: center; justify-content: space-between;
    background-color: #5aa8e6; color: #fff; padding: 0.5rem 0.75rem;
    font-weight: 600; cursor: pointer; border-radius: 4px; margin-bottom: 2px;
}
.sidebar .org-accordion-header:hover { background-color: #4a98d8; }
.sidebar .org-accordion-header.actief { background-color: #1d8fe0; }
.sidebar .org-accordion-body { padding: 0.5rem 0.25rem 1rem; color: #d7e3ec; }
.sidebar .org-accordion-body a { color: #eaf3fc; text-decoration: none; }
.sidebar .org-accordion-body a:hover { text-decoration: underline; }
.sidebar .org-accordion-body .text-muted { color: #9fb6c9 !important; }
.sidebar .org-accordion-body hr { border-color: rgba(255, 255, 255, 0.25); }
.sidebar .org-accordion-body .tree-toggle { color: #9fb6c9; }
.sidebar .org-accordion-body .tree-icon-International,
.sidebar .org-accordion-body .tree-icon-Zone { color: #9fb6c9; }
.sidebar .org-accordion-body .tree-icon-Land { color: #6fb1ff; }
.sidebar .org-accordion-body .tree-icon-District,
.sidebar .org-accordion-body .tree-icon-Club { color: #f0ad4e; }
.sidebar .org-accordion-body .tree-icon-Regio { color: #6bcb77; }
.sidebar .org-accordion-body .tree-icon-rotaract { color: #ff6b9d; }
/* Duidelijke markering van de geselecteerde club: een volledig gevulde balk (dezelfde blauwtint
   als een "actief" accordeonkopje) over de hele regel, niet alleen vetgedrukte tekst - een lichte
   transparante overlay bleek in de praktijk nauwelijks zichtbaar tegen de donkere achtergrond. */
.sidebar .org-accordion-body li.actief > .tree-row { background-color: #1d8fe0; }
.sidebar .org-accordion-body li.actief > .tree-row a {
    font-weight: 700; color: #fff; text-decoration: none;
}

.member-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.25; }
.member-table th, .member-table td {
    text-align: left; padding: 0.25rem 0.5rem; border-bottom: 1px solid #e5e5e5;
}
.member-table thead th { background-color: #f0f2f4; }
.member-table tbody tr:nth-child(odd) { background-color: #fff; }
.member-table tbody tr:nth-child(even) { background-color: #f5f5f5; }
.member-table tr.selected { background-color: #eaf2fb; }
.member-table tr:hover { background-color: #f5f9fd; cursor: pointer; }

/* ---- Ledenscherm layout (startscherm, komt overeen met screenshot 3) ----
   .ledenscherm-splitwrap is een flex-column over de volle hoogte van .content (die hoogte krijgt
   het via de flex-chain .page > main > .content, zie hierboven). Daarbinnen: #ledenscherm-top-pane
   (lijst, vaste/versleepbare hoogte via #ledenscherm-splitter), optioneel de horizontale splitter,
   en .ledenscherm-detail die de resterende ruimte vult (flex:1). Zonder detailpaneel (geen lid/club
   gekozen) is er geen splitter en neemt de lijst gewoon de volledige hoogte. */
.ledenscherm-splitwrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }

#ledenscherm-top-pane { flex-shrink: 0; height: 360px; overflow-y: auto; }
.ledenscherm { display: flex; gap: 1.5rem; align-items: flex-start; }
.ledenscherm-boom { width: 260px; flex-shrink: 0; }
.ledenscherm-boom li.actief a { font-weight: 600; }
.ledenscherm-lijst { flex: 1; min-width: 0; }

.ledenscherm-detail { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid #ddd; padding-top: 1rem; }
.detail-header { display: flex; align-items: center; justify-content: space-between; }

.detail-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 12px; line-height: 1.25; }
.detail-table th, .detail-table td { text-align: left; padding: 0.25rem 0.5rem; border-bottom: 1px solid #e5e5e5; }
.detail-table tr:nth-child(odd) { background-color: #fff; }
.detail-table tr:nth-child(even) { background-color: #f5f5f5; }
.detail-table th { width: 220px; color: #555; font-weight: 600; }

.veldgroep { margin-bottom: 1rem; }

.form-veld { margin-bottom: 0.75rem; max-width: 480px; }
.form-veld label { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.form-veld-inline { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }

/* Eén herkenbare neerwaartse pijl voor alle keuzelijsten in de applicatie. */
select:not([multiple]) {
    appearance: none !important;
    padding-right: 2.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23405563' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m3.5 6 4.5 4 4.5-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
    background-size: 16px 16px !important;
}

/* ---- Bewerk-dialoog (modal), komt overeen met "Bewerk Rotary-lid" screenshots ---- */
.dialog-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 2rem 1rem; overflow-y: auto; z-index: 1000;
}
.dialog-venster {
    background: #fff; border-radius: 8px; width: 100%; max-width: 700px;
    padding: 1.5rem; max-height: 90vh; overflow-y: auto;
}
/* position:sticky zorgt dat de titelbalk (met het sluitkruisje) en de OK/Annuleren-knoppen altijd
   in beeld en klikbaar blijven, ook als de inhoud van een lang tabblad (bv. Activiteiten defaults
   met meerdere tabellen) de dialoog laat scrollen - anders kon het lijken alsof het venster niet te
   sluiten was zodra je in zo'n tabblad naar beneden scrolde. */
.dialog-titelbalk {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;
    position: sticky; top: -1.5rem; background: #fff; z-index: 2; padding: 0.25rem 0;
}
.dialog-footer {
    margin-top: 1.5rem; display: flex; gap: 0.5rem;
    position: sticky; bottom: -1.5rem; background: #fff; padding: 0.75rem 0 0.25rem;
}
.btn-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.tab-content-blok { padding-top: 1rem; }

/* ---- Rechtermuisknop-context-menu (bv. "Eigen club" in NavMenu.razor) ---- */
.context-menu-overlay { position: fixed; inset: 0; z-index: 1040; background: transparent; }
.context-menu {
    position: fixed; z-index: 1050; background: #fff; border: 1px solid #ccc; border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); min-width: 160px; padding: 0.25rem 0;
}
.context-menu a, .context-menu .context-menu-disabled { display: block; padding: 0.4rem 1rem; color: #212529; text-decoration: none; }
.context-menu a:hover { background: #f0f0f0; cursor: pointer; }
.context-menu .context-menu-disabled { color: #999; font-style: italic; }

/* ---- Rich-text editor (EmailGegevensDialog.razor), zie wwwroot/js/richtext.js ---- */
.richtext-toolbar { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.richtext-toolbar-sep { width: 1px; background: #ddd; margin: 0 0.25rem; }
.richtext-editor {
    min-height: 180px; border: 1px solid #ced4da; border-radius: 0.375rem; padding: 0.5rem 0.75rem;
    background: #fff; overflow-y: auto;
}
.richtext-editor:focus { outline: 2px solid #86b7fe; outline-offset: -1px; }

/* ---- Moderne e-mail- en nieuwsbriefwerkruimte ---- */
.mail-page { --mail-blue:#0b5d91; --mail-navy:#12324a; --mail-border:#d8e1e8; max-width:1500px; margin:0 auto; padding:0 0 2rem; color:#263746; }
.mail-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; margin-bottom:1.25rem; }
.mail-page-header h1 { margin:.15rem 0; color:var(--mail-navy); font-size:2rem; }
.mail-page-header p { margin:0; color:#637482; }
.mail-eyebrow { color:var(--mail-blue); font-size:.75rem; font-weight:700; letter-spacing:.12em; }
.mail-steps { display:flex; gap:.4rem; flex-wrap:wrap; }
.mail-steps span { padding:.45rem .7rem; border-radius:20px; background:#edf2f5; color:#64737f; font-size:.8rem; }
.mail-steps .active { background:#dceefe; color:#075c91; font-weight:700; }
.mail-card { background:#fff; border:1px solid var(--mail-border); border-radius:12px; box-shadow:0 2px 10px rgba(25,55,75,.06); padding:1.25rem; }
.mail-card h2 { color:var(--mail-navy); font-size:1.25rem; margin:0 0 1rem; }
.mail-card label { display:block; margin-bottom:.85rem; color:#405563; font-weight:600; }
.mail-card label .form-control { margin-top:.3rem; }
.mail-compose-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(520px,1fr); gap:1rem; align-items:start; }
.mail-two-fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.mail-editor-tools { padding:.45rem; margin:0; border:1px solid var(--mail-border); border-bottom:0; border-radius:8px 8px 0 0; background:#f6f8fa; }
.mail-editor { min-height:260px; border-radius:0 0 8px 8px; }
.mail-tag-help { margin:-.15rem 0 .65rem; padding:.6rem .7rem; border-radius:7px; background:#eef5fa; color:#486170; font-size:.78rem; line-height:1.8; }
.mail-tag-help button { margin:0 .25rem .15rem 0; padding:.16rem .38rem; border:1px solid #c8dce9; border-radius:4px; background:#fff; color:#075c91; font:inherit; font-family:monospace; cursor:pointer; }
.mail-tag-help button:hover,.mail-tag-help button:focus-visible { border-color:#0b5d91; background:#dceefe; outline:none; }
.mail-recipients { position:sticky; top:1rem; }
.mail-card label.mail-filter-row { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; gap:.75rem; margin-bottom:.75rem; }
.mail-filter-row .form-select { width:100%; min-height:38px; padding:.4rem 2.25rem .4rem .7rem; cursor:pointer; }
.mail-recipient-actions { display:flex; align-items:center; gap:.55rem; margin:.4rem 0 .7rem; }
.mail-recipient-actions strong { margin-right:auto; }
.mail-recipient-actions button { border:0; background:transparent; color:var(--mail-blue); padding:.2rem; }
.mail-recipient-list { max-height:370px; overflow:auto; margin-top:.5rem; border-top:1px solid var(--mail-border); }
.mail-recipient-list label { display:flex; align-items:center; gap:.7rem; padding:.65rem .2rem; margin:0; border-bottom:1px solid #edf1f4; font-weight:400; }
.mail-recipient-list label span { min-width:0; }
.mail-recipient-list small { display:block; color:#71818c; overflow:hidden; text-overflow:ellipsis; }
.mail-function-filter { max-height:150px; overflow:auto; margin:.25rem 0 .8rem; padding:.65rem .75rem; border:1px solid var(--mail-border); border-radius:8px; }
.mail-function-filter legend { float:none; width:auto; padding:0 .25rem; margin:0; color:#405563; font-size:.85rem; font-weight:700; }
.mail-function-filter label { display:flex; align-items:center; gap:.45rem; margin:.35rem 0; font-weight:400; }
.mail-recipient-grid { max-height:390px; overflow:auto; margin-top:.5rem; border:1px solid var(--mail-border); border-radius:8px; }
.mail-recipient-grid table { width:100%; min-width:760px; border-collapse:separate; border-spacing:0; font-size:.8rem; }
.mail-recipient-grid th { position:sticky; top:0; z-index:1; padding:0; background:#f3f6f8; border-bottom:1px solid var(--mail-border); text-align:left; }
.mail-recipient-grid th button { width:100%; padding:.6rem .5rem; border:0; background:transparent; color:#405563; font:inherit; font-weight:700; text-align:left; cursor:pointer; white-space:nowrap; }
.mail-recipient-grid th button:hover { background:#e6edf2; color:var(--mail-blue); }
.mail-recipient-grid td { padding:.6rem .5rem; border-bottom:1px solid #edf1f4; vertical-align:top; color:#405563; }
.mail-recipient-grid tbody tr:hover { background:#f4f9fc; }
.mail-recipient-grid td strong { color:#263746; }
.mail-recipient-grid .mail-check-column { width:34px; }
.mail-preview { margin-top:1rem; }
.mail-preview-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; }
.mail-preview-head span { color:var(--mail-blue); font-size:.72rem; font-weight:700; letter-spacing:.1em; }
.mail-preview-head h2 { margin:.1rem 0 0; }
.mail-preview-paper { min-height:150px; padding:1.5rem; border:1px solid #dfe5e9; border-radius:8px; background:#fff; box-shadow:0 4px 18px rgba(20,45,65,.08); overflow-wrap:anywhere; }
.mail-footer-actions { display:flex; align-items:center; justify-content:flex-end; gap:1rem; margin-top:1rem; }
.mail-confirm { display:flex; align-items:center; gap:.5rem; margin:0 auto 0 0; }
.newsletter-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:1rem; align-items:start; }
.newsletter-list { padding:0; overflow:hidden; }
.newsletter-filter { display:grid; grid-template-columns:1fr 1fr; padding:.6rem; gap:.4rem; border-bottom:1px solid var(--mail-border); }
.newsletter-filter button { border:0; border-radius:7px; padding:.55rem; background:#f0f3f5; color:#50616e; }
.newsletter-filter button.active { background:#dceefe; color:#075c91; font-weight:700; }
.newsletter-item { display:flex; width:100%; flex-direction:column; align-items:flex-start; gap:.2rem; padding:.9rem 1rem; border:0; border-bottom:1px solid #e8edf0; background:#fff; text-align:left; color:#263746; }
.newsletter-item:hover,.newsletter-item.selected { background:#eef7fd; }
.newsletter-item small,.newsletter-item time { color:#71818c; font-size:.78rem; }
.newsletter-status { display:inline-block; padding:.18rem .5rem; border-radius:12px; background:#eef1f3; color:#586771; font-size:.7rem; font-weight:700; }
.newsletter-status.verzonden { background:#e3f4e9; color:#187044; }
.newsletter-status.mislukt { background:#fde7e5; color:#a52a24; }
.newsletter-workspace { min-height:500px; }
.newsletter-editor-head,.newsletter-view-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.newsletter-editor-head>div { display:flex; gap:.5rem; }
.newsletter-preview-block { margin-top:1.25rem; padding-top:1.2rem; border-top:1px solid var(--mail-border); }
.newsletter-sendbar { display:flex; align-items:center; gap:1rem; margin:1rem -1.25rem -1.25rem; padding:1rem 1.25rem; border-top:1px solid var(--mail-border); background:#f7f9fa; border-radius:0 0 12px 12px; }
.newsletter-sendbar>div { margin-right:auto; }
.newsletter-sendbar small { display:block; color:#6b7b87; }
.mail-empty,.mail-empty-state { padding:1.5rem; text-align:center; color:#71818c; }
.mail-empty-state { display:grid; place-items:center; min-height:420px; align-content:center; }
.mail-empty-state i { font-size:3rem; color:#9bb4c5; }
.newsletter-sent-preview { margin-top:1rem; }

/* Phone: administration opens at full width; navigation is an explicit toggle. */
.mobile-admin-bar { display:none; }
.sidebar > .top-row, .sidebar .top-row { background:#0b3d64; }
@media (max-width: 767px) {
    html { font-size:15px; }
    .page { flex-direction:column; width:100%; }
    .mobile-admin-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; background:#fff; border-bottom:1px solid #ddd; }
    #app-sidebar { display:none; width:100% !important; max-width:100%; }
    .mobile-menu-open #app-sidebar { display:flex; }
    #sidebar-splitter { display:none; }
    .page > main { width:100%; }
    .page > main > .top-row { height:auto; min-height:48px; flex-wrap:wrap; padding:0 !important; gap:0; }
    .page > main > .top-row span { overflow-wrap:anywhere; min-width:0; }
    .lead-actionbar { width:100%; height:56px; order:2; }
    .lead-action { min-width:88px; padding:7px 10px; font-size:0.78rem; }
    .lead-accountbar { width:100%; height:48px; order:1; overflow-x:auto; padding:0 12px; }
    .page > main > .content { padding:12px !important; overflow-x:auto; }
    .sidebar .navbar-brand { white-space:normal; }
    .ledenscherm { max-height:none !important; height:auto !important; }
    .ledenscherm-lijst { overflow-x:auto; max-width:100%; }
    .login-card, .mfa-setup-card { padding:20px; }
    .mail-page-header,.mail-footer-actions,.newsletter-sendbar { align-items:stretch; flex-direction:column; }
    .mail-compose-grid,.newsletter-layout,.mail-two-fields { grid-template-columns:1fr; }
    .mail-recipients { position:static; }
    .newsletter-list { max-height:320px; overflow:auto; }
    .mail-confirm { margin:0; }
}