/* =====================================================================
   De Mirandabuurt — portaalthema
   Look & feel afgestemd op de WordPress-buurtwebsite:
   crème achtergrond, navy tekst, framboos/magenta primair, teal accent,
   sterk afgeronde vormen, pill-navigatie en -knoppen, gekleurde tegels.

   Het AANTAL basiskleuren is configureerbaar via inc/mbPalette.php.
   Dat bestand zet --mb-base-count + --mb-base-1..N; de regenboogstreep,
   tegels en icoon-badges cyclen daar automatisch doorheen.
   ===================================================================== */

:root {
  /* ---- Merk / semantische kleuren ---- */
  --mb-cream:      #FBF6EE;   /* paginatint            */
  --mb-cream-2:    #F4ECDF;   /* iets dieper crème     */
  --mb-surface:    #FFFFFF;   /* kaarten / velden      */
  --mb-ink:        #21294D;   /* koppen / hoofdtekst   */
  --mb-ink-soft:   #5B6178;   /* bijschrift / muted    */
  --mb-line:       #ECE6DB;   /* randen                */

  /* Primair = accentkleur van de administratie (geïnjecteerd in pageHeader),
     met framboos als terugval. */
  --mb-accent:     #9E1C5E;
  --mb-primary:    var(--mb-accent, #9E1C5E);
  --mb-primary-700:#7E144A;
  --mb-primary-50: #F7E6EF;
  --mb-teal:       #138A6E;   /* sectielabels / accenten */

  /* ---- Vorm & diepte ---- */
  --mb-radius:     18px;
  --mb-radius-sm:  12px;
  --mb-radius-lg:  26px;
  --mb-pill:       999px;
  --mb-shadow:     0 14px 34px -16px rgba(33,41,77,.22);
  --mb-shadow-sm:  0 6px 16px -10px rgba(33,41,77,.20);
  --mb-navbar-h:   68px;

  /* ---- Typografie ---- */
  --mb-font-head: 'Poppins','Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mb-font-body: 'Figtree','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ---- Basispalet (standaard; overschreven door inc/mbPalette.php) ---- */
  --mb-base-count: 8;
  --mb-base-1: #21294D;  /* navy   */
  --mb-base-2: #2BA6DA;  /* blauw  */
  --mb-base-3: #138A6E;  /* teal   */
  --mb-base-4: #F1C232;  /* geel   */
  --mb-base-5: #9E1C5E;  /* magenta*/
  --mb-base-6: #A98BD6;  /* paars  */
  --mb-base-7: #A7DCC8;  /* mint   */
  --mb-base-8: #F0D9C4;  /* perzik */
  --mb-base-9: #2BA6DA;
  --mb-base-10:#138A6E;
  --mb-base-11:#F1C232;
  --mb-base-12:#9E1C5E;

  /* Bootstrap-overrides */
  --bs-body-font-family: var(--mb-font-body);
  --bs-body-color: var(--mb-ink);
  --bs-link-color: var(--mb-primary);
  --bs-link-hover-color: var(--mb-primary-700);
  --bs-primary: var(--mb-primary);
  --bs-border-radius: var(--mb-radius-sm);
}

/* ============================ Basis ============================ */
body {
  font-family: var(--mb-font-body);
  color: var(--mb-ink);
  background: var(--mb-cream);
  background-image:
    radial-gradient(1200px 500px at 100% -10%, #fff 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 400px at -10% 0%, var(--mb-cream-2) 0%, rgba(244,236,223,0) 50%);
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5 {
  font-family: var(--mb-font-head);
  font-weight: 700;
  color: var(--mb-ink);
  letter-spacing: -.01em;
}
a { text-decoration: none; }
a:hover { text-decoration: none; }
.text-muted, .text-secondary { color: var(--mb-ink-soft) !important; }
::selection { background: var(--mb-primary-50); color: var(--mb-primary-700); }

.container, .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; }
body > .container, body > .container-fluid { padding-top: 1.5rem; padding-bottom: 3rem; }

/* ====================== Sectielabel + titels ====================== */
.mb-eyebrow, .mb-section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mb-font-head);
  font-weight: 700; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mb-teal);
}
.mb-eyebrow::before, .mb-section-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mb-teal);
}
.mb-page-title { font-family: var(--mb-font-head); font-weight: 700; font-size: 1.9rem; line-height: 1.1; color: var(--mb-ink); }
.mb-breadcrumb { color: var(--mb-ink-soft); font-size: .92rem; margin-top: .15rem; }

/* ====================== Navigatiebalk ====================== */
.mb-navbar {
  background: var(--mb-surface) !important;
  border-bottom: 1px solid var(--mb-line);
  box-shadow: 0 6px 24px -18px rgba(33,41,77,.5);
  padding-top: .35rem; padding-bottom: .35rem;
  position: sticky; top: 0; z-index: 1030;
  min-height: var(--mb-navbar-h);
}
.mb-navbar .navbar-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mb-font-head); font-weight: 800; font-size: 1.12rem;
  color: var(--mb-ink) !important; letter-spacing: -.01em;
}
.mb-navbar .navbar-brand img { height: 34px; width: auto; background: transparent; border-radius: 6px; padding: 0; }

.mb-navbar .navbar-nav .nav-link {
  color: var(--mb-ink) !important;
  font-weight: 600; font-size: .96rem;
  padding: .5rem .9rem !important;
  border-radius: var(--mb-pill);
  transition: background-color .15s ease, color .15s ease;
}
.mb-navbar .navbar-nav .nav-link:hover { background: var(--mb-primary-50); color: var(--mb-primary-700) !important; }
.mb-navbar .navbar-nav .nav-link.active,
.mb-navbar .navbar-nav .nav-item.show > .nav-link {
  background: var(--mb-primary-50); color: var(--mb-primary-700) !important;
}
.mb-navbar .nav-link.dropdown-toggle::after { vertical-align: .12em; margin-left: .35em; opacity: .65; }
.mb-menu-ico { margin-right: .42rem; font-size: 1.02em; opacity: .9; vertical-align: -.06em; }

/* Toggler (mobiel) */
.mb-navbar .navbar-toggler { border: 1px solid var(--mb-line); border-radius: var(--mb-radius-sm); padding: .35rem .55rem; }
.mb-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--mb-primary-50); }
.mb-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2321294D' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Gebruikerschip rechtsboven */
.mb-navbar .navbar-nav .nav-link.mb-user-chip {
  background: var(--mb-ink); color: #fff !important;
  border-radius: var(--mb-pill); padding: .45rem 1.1rem !important; font-weight: 600;
}
.mb-navbar .navbar-nav .nav-link.mb-user-chip:hover,
.mb-navbar .navbar-nav .nav-item.show > .nav-link.mb-user-chip {
  background: #2c3563; color: #fff !important;
}
.mb-navbar .nav-link.mb-user-chip::after { opacity: .85; }
/* Logo-only merk linksboven */
.mb-navbar .navbar-brand .mb-brand-logo { height: 42px; width: auto; }

/* Dropdowns */
.mb-navbar .dropdown-menu {
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow); padding: .4rem; margin-top: .55rem;
  background: var(--mb-surface);
  width: max-content; min-width: 12rem; max-width: 92vw;
}
.mb-navbar .dropdown-item {
  border-radius: 10px; padding: .5rem .75rem; font-weight: 500; color: var(--mb-ink); white-space: nowrap;
}
.mb-navbar .dropdown-item:hover, .mb-navbar .dropdown-item:focus { background: var(--mb-primary-50); color: var(--mb-primary-700); }
.mb-navbar .dropdown-item.active, .mb-navbar .dropdown-item:active { background: var(--mb-primary); color: #fff; }
.mb-navbar .dropdown-header { font-family: var(--mb-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: var(--mb-ink-soft); }

/* Hover-submenu's (zonder Popper), tot elke diepte */
@media (min-width: 992px) {
  .mb-navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
  .mb-navbar .dropdown-submenu { position: relative; }
  .mb-navbar .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin: -.4rem 0 0 .2rem; display: none; }
  .mb-navbar .dropdown-submenu:hover > .dropdown-menu { display: block; }
  .mb-navbar .dropdown-submenu > .mb-submenu-toggle { display: flex; align-items: center; }
  .mb-navbar .dropdown-submenu > .mb-submenu-toggle::after { content: "\203A"; margin-left: auto; padding-left: 1.25rem; opacity: .6; float: none; }
  .mb-navbar .nav-item.dropdown:hover > .dropdown-menu::before { content:""; position:absolute; top:-.6rem; left:0; right:0; height:.6rem; }
  .mb-navbar .dropdown-menu-end { right: 0; left: auto; }
}

/* Mobiel (<992px): submenu's uitklappen als accordeon, meerdere niveaus diep */
@media (max-width: 991.98px) {
  .mb-navbar .dropdown-submenu > .dropdown-menu { display: none; border: 0; box-shadow: none; margin: 0; padding: 0 0 0 1rem; }
  .mb-navbar .dropdown-submenu > .dropdown-menu.show { display: block; }
  .mb-navbar .dropdown-submenu > .mb-submenu-toggle { display: flex; align-items: center; }
  .mb-navbar .dropdown-submenu > .mb-submenu-toggle::after { content: "\203A"; margin-left: auto; padding-left: 1rem; opacity: .6; transition: transform .15s ease; }
  .mb-navbar .dropdown-submenu > .mb-submenu-toggle.mb-open::after { transform: rotate(90deg); }
}

/* ====================== Regenboog-kleurstreep ====================== */
.mb-color-stripe { display: flex; height: 6px; width: 100%; }
.mb-color-stripe > span { flex: 1 1 0; }

/* ====================== Knoppen ====================== */
.btn { border-radius: var(--mb-pill); font-weight: 600; padding: .55rem 1.25rem; transition: all .15s ease; }
.btn-lg { padding: .7rem 1.6rem; }
.btn-sm { padding: .35rem .85rem; }

.btn-primary {
  background: var(--mb-primary); border-color: var(--mb-primary); color: #fff;
  box-shadow: 0 10px 22px -12px var(--mb-primary);
}
.btn-primary:hover, .btn-primary:focus { background: var(--mb-primary-700); border-color: var(--mb-primary-700); color:#fff; box-shadow: 0 12px 24px -10px var(--mb-primary); }
.btn-primary:active { background: var(--mb-primary-700) !important; border-color: var(--mb-primary-700) !important; }

.btn-outline-primary { color: var(--mb-primary); border-color: var(--mb-primary); }
.btn-outline-primary:hover { background: var(--mb-primary); border-color: var(--mb-primary); color:#fff; }

.btn-outline-light, .btn-outline-secondary {
  color: var(--mb-ink); border-color: var(--mb-line); background: var(--mb-surface);
}
.btn-outline-light:hover, .btn-outline-secondary:hover { background: var(--mb-cream-2); color: var(--mb-ink); border-color: var(--mb-line); }

.btn-secondary { background: var(--mb-ink); border-color: var(--mb-ink); color:#fff; }
.btn-secondary:hover { background:#2c3563; border-color:#2c3563; }
.btn-success { background: var(--mb-teal); border-color: var(--mb-teal); }
.btn-success:hover { background:#0f6f58; border-color:#0f6f58; }
.btn-danger { background:#C4384B; border-color:#C4384B; }
.btn-link { color: var(--mb-primary); }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .22rem var(--mb-primary-50); }

/* ====================== Kaarten ====================== */
.card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow-sm);
}
.card-header {
  background: transparent; border-bottom: 1px solid var(--mb-line);
  font-family: var(--mb-font-head); font-weight: 700; color: var(--mb-ink);
  padding: 1rem 1.25rem; font-size: 1.02rem;
}
.card-body { padding: 1.25rem; }
.card-footer { background: transparent; border-top: 1px solid var(--mb-line); }

/* Icoon-badge (afgeronde gekleurde tegel met icoon) */
.mb-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; color: #fff; font-size: 1.25rem;
  background: var(--mb-primary); box-shadow: 0 8px 18px -10px rgba(33,41,77,.5);
}

/* Feature-kaarten ("Wat we doen") */
.mb-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.25rem; }
.mb-feature-card { background: var(--mb-surface); border:1px solid var(--mb-line); border-radius: var(--mb-radius); padding: 1.5rem; box-shadow: var(--mb-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.mb-feature-card:hover { transform: translateY(-3px); box-shadow: var(--mb-shadow); }
.mb-feature-card h3 { font-size: 1.1rem; margin: 1rem 0 .4rem; }
.mb-feature-card p { color: var(--mb-ink-soft); margin: 0; font-size: .94rem; }

/* Kleurrijke tegels (Groen/Samen/Leefbaar/Stem) */
.mb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; }
.mb-tile { border-radius: var(--mb-radius); padding: 1.25rem; color:#fff; min-height: 130px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow: var(--mb-shadow-sm); }
.mb-tile h4 { color:#fff; margin:.2rem 0 .15rem; font-size:1.15rem; }
.mb-tile p { margin:0; font-size:.85rem; opacity:.92; }

/* Palet-cycling voor badges + tegels */
.mb-feature-grid > .mb-feature-card:nth-child(8n+1) .mb-ico, .mb-tiles > .mb-tile:nth-child(8n+1) { background: var(--mb-base-1); }
.mb-feature-grid > .mb-feature-card:nth-child(8n+2) .mb-ico, .mb-tiles > .mb-tile:nth-child(8n+2) { background: var(--mb-base-2); }
.mb-feature-grid > .mb-feature-card:nth-child(8n+3) .mb-ico, .mb-tiles > .mb-tile:nth-child(8n+3) { background: var(--mb-base-3); }
.mb-feature-grid > .mb-feature-card:nth-child(8n+4) .mb-ico, .mb-tiles > .mb-tile:nth-child(8n+4) { background: var(--mb-base-4); color: var(--mb-ink); }
.mb-feature-grid > .mb-feature-card:nth-child(8n+4) .mb-ico { color:#fff; }
.mb-feature-grid > .mb-feature-card:nth-child(8n+5) .mb-ico, .mb-tiles > .mb-tile:nth-child(8n+5) { background: var(--mb-base-5); }
.mb-feature-grid > .mb-feature-card:nth-child(8n+6) .mb-ico, .mb-tiles > .mb-tile:nth-child(8n+6) { background: var(--mb-base-6); }
.mb-feature-grid > .mb-feature-card:nth-child(8n+7) .mb-ico, .mb-tiles > .mb-tile:nth-child(8n+7) { background: var(--mb-base-7); color: var(--mb-ink); }
.mb-feature-grid > .mb-feature-card:nth-child(8n+7) .mb-ico { color:#fff; }
.mb-feature-grid > .mb-feature-card:nth-child(8n+0) .mb-ico, .mb-tiles > .mb-tile:nth-child(8n+0) { background: var(--mb-base-8); color: var(--mb-ink); }
.mb-feature-grid > .mb-feature-card:nth-child(8n+0) .mb-ico { color:#fff; }

.mb-c1{background:var(--mb-base-1)!important}.mb-c2{background:var(--mb-base-2)!important}
.mb-c3{background:var(--mb-base-3)!important}.mb-c4{background:var(--mb-base-4)!important}
.mb-c5{background:var(--mb-base-5)!important}.mb-c6{background:var(--mb-base-6)!important}
.mb-c7{background:var(--mb-base-7)!important}.mb-c8{background:var(--mb-base-8)!important}

/* ====================== Statistiek / dashboard ====================== */
.mb-stat { background: var(--mb-surface); border:1px solid var(--mb-line); border-radius: var(--mb-radius); padding: 1.25rem 1.4rem; box-shadow: var(--mb-shadow-sm); }
.mb-stat .mb-stat-label { color: var(--mb-ink-soft); font-size: .85rem; font-weight:600; }
.mb-stat .mb-stat-value { font-family: var(--mb-font-head); font-weight:800; font-size: 1.9rem; color: var(--mb-ink); line-height:1.1; }
a.mb-stat { display:block; color:inherit; text-decoration:none; transition: transform .15s ease, box-shadow .15s ease; }
a.mb-stat:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow); color:inherit; }
.mb-stat.mb-stat-on { border-color: var(--mb-primary); box-shadow: 0 0 0 2px var(--mb-primary-50) inset; }
.mb-stat-sub { font-size:.8rem; color: var(--mb-ink-soft); margin-top:.2rem; }
.mb-stat-trend { position: relative; overflow: hidden; }
.mb-stat-trend > * { position: relative; z-index: 1; }
.mb-stat-spark { position:absolute; left:0; right:0; bottom:0; height:60%; width:100%; opacity:.16; pointer-events:none; z-index:0; }

/* ====================== Tabellen (DataTables) ====================== */
.table { --bs-table-bg: transparent; color: var(--mb-ink); }
table.dataTable thead th, .table thead th {
  font-family: var(--mb-font-head); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--mb-ink-soft);
  border-bottom: 2px solid var(--mb-line) !important; background: transparent;
}
table.dataTable tbody td, .table tbody td { border-top: 1px solid var(--mb-line); padding-top: .7rem; padding-bottom: .7rem; vertical-align: middle; }
table.dataTable tbody tr:hover td { background: var(--mb-cream); }
.table > :not(caption) > * > * { box-shadow: none; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--mb-line); border-radius: var(--mb-pill); padding: .4rem .9rem; background: var(--mb-surface);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--mb-primary); box-shadow: 0 0 0 .2rem var(--mb-primary-50); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--mb-primary) !important; border-radius: var(--mb-pill); color: #fff !important; border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--mb-pill) !important; }
.dt-buttons .dt-button, .dt-button {
  background: var(--mb-surface) !important; border: 1px solid var(--mb-line) !important;
  border-radius: var(--mb-pill) !important; color: var(--mb-ink) !important; font-weight: 600; padding: .4rem 1rem !important;
}
.dt-buttons .dt-button:hover { background: var(--mb-cream-2) !important; }

/* ====================== Formulieren ====================== */
.form-label { font-weight: 600; color: var(--mb-ink); margin-bottom: .35rem; }
.form-control, .form-select {
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius-sm);
  padding: .55rem .85rem; background: var(--mb-surface); color: var(--mb-ink);
}
.form-control:focus, .form-select:focus { border-color: var(--mb-primary); box-shadow: 0 0 0 .2rem var(--mb-primary-50); }
.form-control::placeholder { color: #9aa0b4; }
.form-control-color { padding: .25rem; height: calc(2.4rem + 2px); width: 3.2rem; border-radius: var(--mb-radius-sm); }
.input-group-text { background: var(--mb-cream-2); border:1px solid var(--mb-line); color: var(--mb-ink-soft); }
.form-text { color: var(--mb-ink-soft); }

/* ====================== Badges / pills ====================== */
.badge { font-weight: 600; border-radius: var(--mb-pill); padding: .35em .7em; }
.bg-primary { background: var(--mb-primary) !important; }
.bg-success { background: var(--mb-teal) !important; }
.mb-pill-badge { display:inline-flex; align-items:center; gap:.45rem; background: var(--mb-primary-50); color: var(--mb-primary-700); font-weight:700; border-radius: var(--mb-pill); padding:.4rem .9rem; font-size:.82rem; }
.mb-pill-badge .dot { width:8px; height:8px; border-radius:50%; background: var(--mb-teal); }

/* ====================== Alerts ====================== */
.alert { border: none; border-radius: var(--mb-radius); padding: .9rem 1.1rem; }
.alert-success { background: #E4F3EC; color: #0c5b46; }
.alert-danger { background: #FBE7EA; color: #97233a; }
.alert-warning { background: #FCF2DC; color: #8a5a00; }
.alert-info { background: #E4F1FA; color: #1c5b86; }

/* ====================== Toasts ====================== */
#mbToastContainer .toast {
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow); overflow: hidden; background: var(--mb-surface);
}
#mbToastContainer .toast .toast-body { padding: .9rem 1rem; font-weight: 500; color: var(--mb-ink); }
#mbToastContainer .toast.mb-toast-success { border-left: 5px solid var(--mb-teal); }
#mbToastContainer .toast.mb-toast-danger  { border-left: 5px solid #C4384B; }
#mbToastContainer .toast.mb-toast-warning { border-left: 5px solid #E0A106; }

/* ====================== CTA-blok ====================== */
.mb-cta {
  border-radius: var(--mb-radius-lg); padding: 2.4rem; color:#fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--mb-primary) 0%, var(--mb-primary-700) 100%);
  box-shadow: var(--mb-shadow);
}
.mb-cta h2 { color:#fff; }
.mb-cta .btn-light { background:#fff; color: var(--mb-primary); border-radius: var(--mb-pill); font-weight:700; }

/* ====================== Footer ====================== */
.mb-footer { background: var(--mb-ink); color: #c9cde0; margin-top: 3rem; }
.mb-footer .container { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.mb-footer a { color: #c9cde0; }
.mb-footer a:hover { color: #fff; }
.mb-footer .mb-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 1.5rem; padding: 1rem 0; color: #9aa0c0; font-size: .85rem; }
.mb-social { display:inline-flex; gap:.6rem; }
.mb-social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); color:#fff; }
.mb-social a:hover { background: var(--mb-primary); }

/* ====================== Login ====================== */
.mb-login-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 2rem 1rem;
  background:
    radial-gradient(800px 380px at 100% 0%, var(--mb-primary-50) 0%, rgba(247,230,239,0) 60%),
    var(--mb-cream); }
.mb-login-card { width: 100%; max-width: 410px; background: var(--mb-surface); border:1px solid var(--mb-line); border-radius: var(--mb-radius-lg); box-shadow: var(--mb-shadow); padding: 2.2rem; }
.mb-login-card .mb-login-logo { text-align:center; margin-bottom: 1.25rem; }
.mb-login-card .mb-login-logo img { max-height: 72px; max-width: 220px; }
.mb-login-card h1 { font-size: 1.4rem; text-align:center; margin-bottom: 1.4rem; }

/* ====================== Diversen ====================== */
hr { border-color: var(--mb-line); opacity: 1; }
code { color: var(--mb-primary-700); background: var(--mb-primary-50); padding: .1rem .35rem; border-radius: 6px; }
.shadow-sm { box-shadow: var(--mb-shadow-sm) !important; }
.rounded, .rounded-3 { border-radius: var(--mb-radius) !important; }
.bg-light { background: var(--mb-cream) !important; }
.bg-dark { background: var(--mb-ink) !important; }
.text-primary { color: var(--mb-primary) !important; }

/* Bootstrap 5 kent geen .form-group-marge meer; behouden zoals voorheen. */
.form-group { margin-bottom: 1rem; }
.form-group.row { margin-bottom: 1rem; }