/* ============================================================
   Mijn BBBtriple1 — Klantenpaneel & Admin
   Nieuw Design System (Hanken Grotesk + Inline UI)
   ============================================================ */

/* Design-tokens: gebruikt door de factuur-/offerte-/contract-documentpagina's.
   Zonder deze definities viel de achtergrond/rand/schaduw van o.a. de tools-balk weg. */
:root {
  --surface: #ffffff;
  --surface-2: #f7f9fa;
  --surface-3: #f4f6f7;
  --border: #e8ebed;
  --border-2: #e3e7e9;
  --text-1: #16232b;
  --text-2: #5b6670;
  --accent: #555555;
  --accent-deep: #111111;
  --green: #111111;
  --red: #111111;
  --r: 12px;
  --r-sm: 9px;
  --r-xl: 14px;
  --shadow-soft: 0 2px 8px rgba(16, 32, 40, .06);
  --shadow-md: 0 12px 34px rgba(16, 32, 40, .12);
  --ease: cubic-bezier(.2, .8, .3, 1);
  --btn-ink: #111111;
  --btn-ink-fg: #ffffff;
  --btn-ink-hover: #000000;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #16232b; background: #f4f6f7; -webkit-font-smoothing: antialiased; }
a { color: #111111; text-decoration: none; }
a:hover { color: #555555; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d7dde0; border-radius: 6px; }

/* Custom elements */
/* Standaard transparant (geen zwart vierkant tijdens het laden). De icoon-loader zet
   per gemaskeerd icoon de kleur pas aan zodra het masker klaarstaat. */
bbb-icon { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: middle; background-color: transparent; }

/* Interactive elements */
[style*="cursor:pointer"], [style*="cursor: pointer"] { transition: transform .12s cubic-bezier(.2,.7,.3,1), filter .15s ease, background-color .15s ease, box-shadow .15s ease; }
[style*="cursor:pointer"]:hover, [style*="cursor: pointer"]:hover { filter: brightness(1.02); }
[style*="cursor:pointer"]:active, [style*="cursor: pointer"]:active { transform: scale(.975); }

/* Forms */
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { border-color: #111111 !important; box-shadow: 0 0 0 3px rgba(0,0,0,.10); outline: none; }

/* Animations */
@keyframes bbbCheck { to { stroke-dashoffset: 0; } }
@keyframes bbbPop { 0%{transform:scale(.5);} 60%{transform:scale(1.15);} 100%{transform:scale(1);} }
@keyframes bbbToastIn { from { opacity:0; transform: translateY(16px) translateX(-50%);} to { opacity:1; transform: translateY(0) translateX(-50%);} }
@keyframes bbbRowIn { from { opacity:0; transform: translateY(-7px);} to { opacity:1; transform:none;} }
@keyframes bbbMenuIn { from { opacity:0; transform: translateY(-6px) scale(.98);} to { opacity:1; transform:none;} }
.bbb-toast { animation: bbbToastIn .3s cubic-bezier(.2,.85,.3,1); }
.bbb-pop { animation: bbbPop .34s cubic-bezier(.3,1.3,.5,1); }

/* ---- Dark mode (React serialises inline colours to rgb()) ---- */
[data-theme="dark"] { background:#0b141a !important; color:#dbe9ee; }
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background: #ffffff"] { background:#111d25 !important; }
[data-theme="dark"] [style*="background: rgb(244, 246, 247)"], [data-theme="dark"] [style*="background:#f4f6f7"], [data-theme="dark"] [style*="background: #f4f6f7"] { background:#0b141a !important; }
[data-theme="dark"] [style*="background: rgb(247, 249, 250)"], [data-theme="dark"] [style*="background:#f7f9fa"], [data-theme="dark"] [style*="background: #f7f9fa"], [data-theme="dark"] [style*="background: rgb(249, 251, 251)"], [data-theme="dark"] [style*="background:#f9fbfb"], [data-theme="dark"] [style*="background: #f9fbfb"], [data-theme="dark"] [style*="background: rgb(242, 244, 245)"], [data-theme="dark"] [style*="background:#f2f4f5"], [data-theme="dark"] [style*="background: #f2f4f5"], [data-theme="dark"] [style*="background: rgb(240, 242, 243)"], [data-theme="dark"] [style*="background:#f0f2f3"], [data-theme="dark"] [style*="background: #f0f2f3"] { background:#16232c !important; }
[data-theme="dark"] [style*="background: rgb(238, 241, 242)"], [data-theme="dark"] [style*="background:#eef1f2"], [data-theme="dark"] [style*="background: #eef1f2"], [data-theme="dark"] [style*="background: rgb(238, 241, 243)"], [data-theme="dark"] [style*="background:#eef1f3"], [data-theme="dark"] [style*="background: #eef1f3"], [data-theme="dark"] [style*="background: rgb(238, 244, 240)"], [data-theme="dark"] [style*="background:#eef4f0"], [data-theme="dark"] [style*="background: #eef4f0"] { background:#22333f !important; }
[data-theme="dark"] [style*="background: rgb(240, 253, 255)"], [data-theme="dark"] [style*="background:#f0fdff"], [data-theme="dark"] [style*="background: #f0fdff"], [data-theme="dark"] [style*="background: rgb(233, 251, 254)"], [data-theme="dark"] [style*="background:#e9fbfe"], [data-theme="dark"] [style*="background: #e9fbfe"], [data-theme="dark"] [style*="background: rgb(240, 244, 233)"], [data-theme="dark"] [style*="background:#f0f4e9"], [data-theme="dark"] [style*="background: #f0f4e9"], [data-theme="dark"] [style*="background: rgb(242, 249, 251)"], [data-theme="dark"] [style*="background:#f2f9fb"], [data-theme="dark"] [style*="background: #f2f9fb"] { background:#0f2b33 !important; }
[data-theme="dark"] [style*="solid rgb(232, 235, 237)"], [data-theme="dark"] [style*="solid #e8ebed"], [data-theme="dark"] [style*="solid rgb(227, 231, 233)"], [data-theme="dark"] [style*="solid #e3e7e9"], [data-theme="dark"] [style*="solid rgb(240, 242, 243)"], [data-theme="dark"] [style*="solid #f0f2f3"], [data-theme="dark"] [style*="solid rgb(244, 246, 247)"], [data-theme="dark"] [style*="solid #f4f6f7"], [data-theme="dark"] [style*="solid rgb(238, 241, 242)"], [data-theme="dark"] [style*="solid #eef1f2"], [data-theme="dark"] [style*="solid rgb(242, 244, 245)"], [data-theme="dark"] [style*="solid #f2f4f5"], [data-theme="dark"] [style*="solid rgb(182, 240, 248)"], [data-theme="dark"] [style*="solid #b6f0f8"], [data-theme="dark"] [style*="solid rgb(214, 246, 251)"], [data-theme="dark"] [style*="solid #d6f6fb"], [data-theme="dark"] [style*="solid rgb(205, 238, 244)"], [data-theme="dark"] [style*="solid #cdeef4"] { border-color:#26373f !important; }
[data-theme="dark"] [style*="color: rgb(22, 35, 43)"], [data-theme="dark"] [style*="color:#16232b"], [data-theme="dark"] [style*="color: #16232b"], [data-theme="dark"] [style*="color: rgb(14, 28, 34)"], [data-theme="dark"] [style*="color:#0e1c22"], [data-theme="dark"] [style*="color: #0e1c22"] { color:#e6f2f5 !important; }
[data-theme="dark"] [style*="color: rgb(91, 102, 112)"], [data-theme="dark"] [style*="color:#5b6670"], [data-theme="dark"] [style*="color: #5b6670"], [data-theme="dark"] [style*="color: rgb(58, 71, 78)"], [data-theme="dark"] [style*="color:#3a474e"], [data-theme="dark"] [style*="color: #3a474e"], [data-theme="dark"] [style*="color: rgb(138, 150, 157)"], [data-theme="dark"] [style*="color:#8a969d"], [data-theme="dark"] [style*="color: #8a969d"], [data-theme="dark"] [style*="color: rgb(154, 165, 171)"], [data-theme="dark"] [style*="color:#9aa5ab"], [data-theme="dark"] [style*="color: #9aa5ab"] { color:#93a5ae !important; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background:#16232c !important; color:#e6f2f5 !important; border-color:#2b3d48 !important; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#2b3d48; }

/* ---- Mobile ---- */
[data-scrim] { display:none; }
@media (max-width: 760px) {
  aside { position:fixed !important; top:0; left:0; height:100%; z-index:130; transform:translateX(-100%); transition:transform .26s cubic-bezier(.2,.8,.3,1); box-shadow:0 0 60px rgba(0,0,0,.18); }
  [data-mobile-open="1"] aside { transform:none !important; }
  [data-mobile-open="1"] [data-scrim] { display:block; position:fixed; inset:0; background:rgba(6,20,26,.45); z-index:120; }
  main { padding:18px 15px 60px !important; }
  [data-hide-mobile] { display:none !important; }
  [data-show-mobile] { display:flex !important; }
  header { padding:0 14px !important; gap:10px !important; }
  [data-topsearch] { max-width:none !important; }
}
[data-show-mobile] { display:none; }
@media (max-width: 1000px) { [data-hide-narrow] { display:none !important; } }

/* ---- Klantportaal: mobiel + thema ---- */
/* Hamburger alleen tonen wanneer de zijbalk een drawer wordt. */
.mbbbt-menu-btn { display:none; }
@media (max-width: 760px) {
  .mbbbt-menu-btn { display:inline-flex !important; align-items:center; justify-content:center; }
  /* De hoofdcontainer mag op mobiel meescrollen i.p.v. vaste 100vh-kolom. */
  .mbbbt-app-body > div[style*="height:100vh"],
  .mbbbt-app-body > div[style*="height: 100vh"] { height:auto !important; min-height:100vh; overflow:visible !important; }
  .mbbbt-app-body main { height:auto !important; }
}
/* Tabelrijen (facturen/offertes) → nette kaartjes op smalle schermen. */
@media (max-width: 640px) {
  .mbbbt-kcards { grid-template-columns:1fr !important; }
  .mbbbt-khead { display:none !important; }
  .mbbbt-krow { grid-template-columns:1fr !important; gap:6px !important; padding:14px 16px !important; }
  .mbbbt-krow > div { text-align:left !important; justify-content:flex-start !important; }
}
/* Klein-tablet: statistiekkaarten in twee kolommen. */
@media (min-width: 641px) and (max-width: 900px) {
  .mbbbt-kcards { grid-template-columns:repeat(2,1fr) !important; }
}
/* Tikdoelen wat ruimer op touch. */
@media (max-width: 760px) {
  .mbbbt-app-body aside nav a { padding-top:13px !important; padding-bottom:13px !important; }
}

/* Iconen/knoppen die de themakleur moeten volgen. */
[data-theme="dark"] .mbbbt-user-dropdown { box-shadow:0 16px 44px rgba(0,0,0,.5) !important; }
[data-theme="dark"] [data-mbbbt-theme-toggle]:hover,
[data-theme="dark"] .mbbbt-user-dropdown a:hover { background:#16232c; }
[data-mbbbt-theme-toggle]:hover { background:#f4f6f7; }
/* Accentkleuren (cyaan/teal) blijven in dark mode goed leesbaar op donkere vlakken. */
[data-theme="dark"] [style*="color:#063d47"], [data-theme="dark"] [style*="color: rgb(6, 61, 71)"] { color:#ffffff !important; }

/* ============================================================
   Legacy (Invoice / Contract Document Styles)
   Do not touch.
   ============================================================ */
.mbbbt-invoice-shell { display: grid; gap: 28px; grid-template-columns: 300px minmax(0, 1fr); margin: 0 auto; max-width: 1300px; padding: 28px; }
.mbbbt-invoice-tools { align-self: start; animation: mbbbtScaleIn 0.34s var(--ease) both; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); display: grid; gap: 20px; padding: 22px; position: sticky; top: 28px; overflow: hidden; }
.mbbbt-invoice-tools::before { content: ""; height: 3px; position: absolute; top: 0; left: 18px; right: 18px; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.mbbbt-invoice-tools h1 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-1); margin: 4px 0 8px; }
.mbbbt-invoice-tools > div > strong { font-size: 24px; font-weight: 800; display: block; margin-bottom: 10px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mbbbt-invoice-tools .mbbbt-kicker { font-size: 11px; color: var(--accent-deep); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.mbbbt-tool-actions { display: grid; gap: 10px; }
.mbbbt-tool-actions a, .mbbbt-tool-actions button { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: var(--r); font-size: 13.5px; font-weight: 800; color: var(--text-1); border: 1px solid var(--border); background: var(--surface); transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.mbbbt-tool-actions a:hover, .mbbbt-tool-actions button:hover { background: var(--surface-3); border-color: var(--border-2); transform: translateY(-1px); }
.mbbbt-tool-actions a svg, .mbbbt-tool-actions button svg { width: 17px; height: 17px; flex-shrink: 0; }
.mbbbt-tool-primary { background: var(--btn-ink) !important; color: var(--btn-ink-fg) !important; border-color: var(--btn-ink) !important; box-shadow: 0 14px 28px rgba(13,27,42,0.16); }
.mbbbt-tool-primary:hover { background: var(--btn-ink-hover) !important; }
.mbbbt-tool-link { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13.5px; font-weight: 500; border-radius: var(--r-sm); padding: 6px 8px; margin: -6px -8px 4px; transition: all 0.15s; }
.mbbbt-tool-link:hover { background: var(--surface-2); }
.mbbbt-tool-link svg { width: 16px; height: 16px; }
.mbbbt-invoice-preview { min-width: 0; }
.mbbbt-invoice-paper { width: 794px; height: 1123px; margin: 0 auto; animation: mbbbtScaleIn 0.34s var(--ease) both; background: #fff; border-radius: 0; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; }
.mbbbt-invoice-paper.is-overflow { height: auto; overflow: visible; }
.mbbbt-invoice-doc { width: 794px; min-height: 1123px; box-sizing: border-box; padding: 52px 56px; color: #081423; display: flex; flex-direction: column; transform-origin: top left; position: relative; }
.mbbbt-invoice-doc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; background: linear-gradient(90deg, #0D1B2A, #0891B2 48%, #8BEBFD); }
.mbbbt-doc-spacer { flex: 1 1 auto; min-height: 24px; }
.mbbbt-paid-stamp { position: absolute; top: 112px; right: 56px; border: 3px solid var(--green); color: var(--green); font-size: 24px; font-weight: 800; letter-spacing: 0.08em; padding: 7px 18px; border-radius: 12px; transform: rotate(-10deg); opacity: 0.88; text-transform: uppercase; pointer-events: none; }
.mbbbt-doc-signature { margin: 24px 0 20px; }
.mbbbt-doc-signature .mbbbt-doc-label { margin-bottom: 8px; }
.mbbbt-sig-img { display: block; height: 72px; max-width: 290px; object-fit: contain; object-position: left center; }
.mbbbt-sig-meta { margin-top: 4px; border-top: 1px solid #000; padding-top: 6px; display: inline-block; min-width: 240px; }
.mbbbt-sig-meta strong { font-size: 14px; font-weight: 700; }
.mbbbt-sig-meta span { font-size: 12px; color: #555; margin-left: 8px; }
.mbbbt-sig-note { margin-top: 8px; max-width: 420px; font-size: 10.5px; line-height: 1.45; color: #777; }
.mbbbt-invoice-brandline { margin-bottom: 38px; }
.mbbbt-invoice-title h1 { color: #081423; font-size: 46px; font-weight: 800; letter-spacing: -0.045em; line-height: .94; margin: 0; text-wrap: balance; }
.mbbbt-invoice-title img { height: 46px; margin-bottom: 14px; max-width: 190px; object-fit: contain; }
.mbbbt-invoice-meta-row { align-items: end; border-bottom: 2px solid #0D1B2A; display: grid; gap: 24px; grid-template-columns: 1.25fr 1fr auto; margin-bottom: 10px; padding-bottom: 18px; }
.mbbbt-invoice-meta-row strong { display: block; font-size: 15px; line-height: 1.25; }
.mbbbt-invoice-meta-row h2 { font-size: 40px; font-weight: 900; letter-spacing: -0.035em; line-height: .9; margin: 0; }
.mbbbt-invoice-table { border-collapse: collapse; width: 100%; margin-top: 10px; table-layout: fixed; }
.mbbbt-invoice-table th, .mbbbt-invoice-table td { padding: 12px 6px; text-align: right; border-bottom: 1px solid #E5ECF4; white-space: nowrap; }
.mbbbt-invoice-table th:first-child, .mbbbt-invoice-table td:first-child { text-align: left; width: 52%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.mbbbt-invoice-table th { color: #081423; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.mbbbt-invoice-table td { font-size: 13px; font-weight: 600; }
.mbbbt-invoice-summary { align-items: flex-end; display: flex; flex-direction: column; margin: 18px 0 0; }
.mbbbt-invoice-summary div { display: flex; justify-content: space-between; min-width: 300px; font-size: 14px; padding: 4px 0; }
.mbbbt-invoice-summary strong { margin-left: 28px; }
.mbbbt-invoice-summary .mbbbt-total { border-top: 2px solid #0D1B2A; color: #081423; font-size: 21px; font-weight: 900; margin-top: 8px; padding-top: 10px; }
.mbbbt-invoice-notes { margin-top: 10px; text-align: right; font-size: 11px; font-weight: 700; color: #333; }
.mbbbt-invoice-notes p { margin: 0; }
.mbbbt-invoice-payment { border-top: 2px solid #0D1B2A; display: grid; gap: 28px; grid-template-columns: 1fr 1fr; padding-top: 18px; margin-top: 22px; }
.mbbbt-invoice-payment h2 { font-size: 28px; font-weight: 900; letter-spacing: -0.035em; line-height: .9; margin: 0 0 14px; }
.mbbbt-invoice-payment p, .mbbbt-invoice-payment small, .mbbbt-invoice-payment span { display: block; font-size: 11px; font-weight: 650; line-height: 1.45; color: #253348; }
.mbbbt-invoice-payment strong { color: #081423; }

/* Contractdocument */
.mbbbt-contract-doc { background: #fff; color: #1c1c1c; max-width: 820px; margin: 0 auto; padding: 48px 56px; border-radius: 4px; box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.7; }
.mbbbt-contract-head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #111; padding-bottom: 18px; margin-bottom: 26px; }
.mbbbt-contract-head img { height: 40px; max-width: 170px; object-fit: contain; }
.mbbbt-contract-head strong { display: block; font-size: 18px; font-weight: 800; color: #000; }
.mbbbt-contract-head span { font-size: 13px; color: #666; }
.mbbbt-contract-body { color: #222; }
.mbbbt-contract-body h1, .mbbbt-contract-body h2, .mbbbt-contract-body h3 { color: #000; margin: 20px 0 8px; line-height: 1.3; }
.mbbbt-contract-body p { margin: 0 0 12px; }
.mbbbt-contract-body ul, .mbbbt-contract-body ol { margin: 0 0 12px 22px; }
.mbbbt-contract-body li { margin-bottom: 5px; }
.mbbbt-contract-body a { color: var(--accent-deep); }
.mbbbt-contract-signature { margin-top: 36px; padding-top: 18px; border-top: 1px solid #ccc; }
.mbbbt-quote-decision { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.mbbbt-quote-decision > b { font-size: 14px; font-weight: 600; color: var(--text-1); }
.mbbbt-quote-decision.is-accepted { color: var(--green); }
.mbbbt-quote-signed { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.mbbbt-quote-signed svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; }
.mbbbt-quote-signed strong { color: var(--text-1); }

/* Labeled document meta */
.mbbbt-doc-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6C82A0; margin-bottom: 3px; }
.mbbbt-doc-billto strong { display: block; font-size: 15px; font-weight: 700; }
.mbbbt-doc-billto span { display: block; font-size: 13px; color: #3a4654; line-height: 1.45; }
.mbbbt-doc-fields { display: flex; flex-direction: column; gap: 9px; }
.mbbbt-doc-field strong { display: block; font-size: 14px; font-weight: 700; }

/* Payment result popup */
.mbbbt-result-modal { background: rgba(13,27,42,0.55); backdrop-filter: blur(4px); }
.mbbbt-result-ic { width: 76px; height: 76px; margin: 0 auto 8px; }
.mbbbt-result-ic svg { width: 76px; height: 76px; }
.mbbbt-result-ic .ring { fill: none; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: mbbbtRing 0.55s var(--ease) forwards; }
.mbbbt-result-ic .mark { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: mbbbtMark 0.45s var(--ease) 0.5s forwards; }
.mbbbt-result-ic.is-success .ring, .mbbbt-result-ic.is-success .mark { stroke: var(--green); }
.mbbbt-result-ic.is-failed .ring, .mbbbt-result-ic.is-failed .mark { stroke: var(--red); }
.mbbbt-result-ic.is-pending .ring, .mbbbt-result-ic.is-pending .mark { stroke: var(--accent-deep); }
.mbbbt-result-ic.is-success { animation: mbbbtPop 0.4s var(--ease) 0.55s both; }
@keyframes mbbbtRing { to { stroke-dashoffset: 0; } }
@keyframes mbbbtMark { to { stroke-dashoffset: 0; } }
@keyframes mbbbtPop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

@media (max-width: 768px) {
  .mbbbt-invoice-shell { grid-template-columns: 1fr; padding: 12px; }
  .mbbbt-invoice-tools { position: static; }
  .mbbbt-invoice-preview { overflow-x: auto; }
}

/* Print: nette marge rondom, alles op 1 pagina (de JS schaalt het document zodat het
   binnen de printbare zone past). Zelfde layout als de preview, alleen kleiner. */
@media print {
  /* margin:0 op de pagina zelf → de browser tekent GEEN datum/titel/URL/paginanummer
     meer in de marge. De nette witruimte rondom komt uit de padding van het document
     (.mbbbt-invoice-doc), zodat de inhoud nooit tot de rand loopt. */
  @page { size: A4; margin: 0; }
  html, body, body.mbbbt-app-body, body.mbbbt-invoice-body { background: #fff !important; margin: 0 !important; }
  .mbbbt-toast-area, .mbbbt-invoice-tools, .mbbbt-modal, .mbbbt-result-modal, .mbbbt-bottom-nav, .mbbbt-sidebar, .mbbbt-topbar, .mbbbt-dashboard { display: none !important; }
  .mbbbt-invoice-shell { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; gap: 0 !important; }
  .mbbbt-invoice-preview { min-width: 0 !important; overflow: visible !important; }
  /* Papier vult de volledige A4; hoogte volgt het (geschaalde) document.
     JS (fitInvoiceForPrint) zet de exacte px-maat + schaal. Rechte hoeken. */
  .mbbbt-invoice-paper { box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; overflow: visible !important; }
  .mbbbt-invoice-paper.is-overflow { height: auto !important; overflow: visible !important; }
  /* Ruime, gelijkmatige binnenmarge = de printmarge (≈14mm). */
  .mbbbt-invoice-doc { padding: 54px 56px 48px !important; }
  .mbbbt-contract-doc { box-shadow: none !important; border-radius: 0 !important; max-width: none !important; margin: 0 !important; padding: 14mm 16mm !important; }
  .mbbbt-contract-body h1, .mbbbt-contract-body h2, .mbbbt-contract-body h3, .mbbbt-contract-signature { break-inside: avoid; }
  /* Vangnet: nooit midden in een regel/bedrag afbreken als de fit onverhoopt faalt. */
  .mbbbt-invoice-table tr, .mbbbt-invoice-summary, .mbbbt-doc-signature, .mbbbt-invoice-payment, .mbbbt-invoice-meta-row { break-inside: avoid; }
  .mbbbt-invoice-table thead { display: table-header-group; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ==========================================================================
   MIJN BBBtriple1 — ADMIN FORMS, COMPONENTS & SETTINGS (new light design)
   Appended block: styles for admin create/edit forms, line editors,
   project pickers, tables, badges, dashboard legacy widgets and the
   settings page. Uses the shared light design tokens (Hanken Grotesk
   inherited). Does not modify any existing rules above.
   ========================================================================== */

/* ---- Form layout ---- */
.mbbbt-admin-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
}

.mbbbt-card {
  background: #ffffff;
  border: 1px solid #e8ebed;
  border-radius: 14px;
  overflow: hidden;
}
.mbbbt-card__head {
  padding: 16px 22px;
  border-bottom: 1px solid #f0f2f3;
}
.mbbbt-card__head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #16232b;
}
.mbbbt-card__body {
  padding: 22px;
}

.mbbbt-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mbbbt-field-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.mbbbt-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #5b6670;
  margin-bottom: 6px;
}

.mbbbt-admin-form input[type=text],
.mbbbt-admin-form input[type=email],
.mbbbt-admin-form input[type=date],
.mbbbt-admin-form input[type=number],
.mbbbt-admin-form select,
.mbbbt-admin-form textarea {
  width: 100%;
  height: 40px;
  border: 1px solid #e3e7e9;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  color: #16232b;
  background: #ffffff;
  box-sizing: border-box;
}
.mbbbt-admin-form textarea {
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
}
.mbbbt-admin-form select {
  cursor: pointer;
}
.mbbbt-admin-form input::placeholder,
.mbbbt-admin-form textarea::placeholder {
  color: #9aa5ab;
}

.mbbbt-admin-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 4px;
}

.mbbbt-backbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* ---- Buttons ---- */
.mbbbt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all .15s;
  line-height: 1;
}
.mbbbt-btn svg {
  width: 16px;
  height: 16px;
}
.mbbbt-btn--primary {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}
.mbbbt-btn--primary:hover {
  background: #000000;
  border-color: #000000;
}
.mbbbt-btn--ghost {
  background: #ffffff;
  color: #16232b;
  border-color: #e3e7e9;
}
.mbbbt-btn--ghost:hover {
  background: #f7f9fa;
}
.mbbbt-btn--danger {
  background: #ffffff;
  color: #111111;
  border-color: #f0d0d0;
}
.mbbbt-btn--danger:hover {
  background: #eeeeee;
}
.mbbbt-btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}
.mbbbt-btn--lg {
  padding: 12px 22px;
  font-size: 15px;
}

/* ---- Invoice / quote line editor (render_doc_edit) ---- */
.mbbbt-adminlines {
  display: block;
}
.mbbbt-adminlines__head {
  display: grid;
  grid-template-columns: 2fr 70px 110px 120px 40px;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #8a969d;
  text-transform: uppercase;
  padding: 0 4px 8px;
}
.mbbbt-adminlines.has-opt .mbbbt-adminlines__head {
  grid-template-columns: 2fr 70px 110px 120px 60px 40px;
}
.mbbbt-adminlines__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mbbbt-adminline {
  display: grid;
  grid-template-columns: 2fr 70px 110px 120px 40px;
  gap: 10px;
  align-items: center;
}
.mbbbt-adminlines.has-opt .mbbbt-adminline,
.has-opt .mbbbt-adminline {
  grid-template-columns: 2fr 70px 110px 120px 60px 40px;
}
.mbbbt-adminline input[type=text],
.mbbbt-adminline input[type=number],
.mbbbt-adminline select {
  width: 100%;
  height: 38px;
  border: 1px solid #e3e7e9;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  color: #16232b;
  background: #ffffff;
  box-sizing: border-box;
}
.mbbbt-adminline select {
  cursor: pointer;
}

.mbbbt-adminline__del {
  width: 34px;
  height: 34px;
  border: 1px solid #e3e7e9;
  border-radius: 8px;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mbbbt-adminline__del:hover {
  background: #eeeeee;
}
.mbbbt-adminline__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mbbbt-adminlines__total {
  margin-top: 16px;
  margin-left: auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mbbbt-adminlines__total div {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #5b6670;
}
.mbbbt-adminlines__total .grand {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #eef1f2;
  font-size: 16px;
  font-weight: 700;
  color: #16232b;
}

/* ---- Project stage picker + agree checkbox (render_project_edit) ---- */
.mbbbt-stage-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mbbbt-stage-picker label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e3e7e9;
  border-radius: 9px;
  font-size: 13.5px;
  cursor: pointer;
  background: #ffffff;
}
.mbbbt-sign-agree {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 13.5px;
  color: #5b6670;
  cursor: pointer;
}

/* ---- Misc admin ---- */
.mbbbt-notice {
  padding: 12px 16px;
  border-radius: 9px;
  background: #eeeeee;
  color: #111111;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}
.mbbbt-notice.is-error {
  background: #eeeeee;
  color: #111111;
}

.mbbbt-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.mbbbt-section-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #16232b;
}
.mbbbt-section-head p {
  margin: 4px 0 0;
  color: #8a969d;
  font-size: 14px;
}

.mbbbt-empty {
  text-align: center;
  padding: 48px;
  color: #8a969d;
}
.mbbbt-empty svg {
  width: 34px;
  height: 34px;
  color: #c4ccd0;
}
.mbbbt-empty b {
  display: block;
  margin: 12px 0 4px;
  color: #16232b;
  font-weight: 600;
}
.mbbbt-empty p {
  margin: 0;
  font-size: 14px;
}

.mbbbt-table-wrap {
  overflow-x: auto;
}
.mbbbt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.mbbbt-table th {
  text-align: left;
  padding: 13px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a969d;
  text-transform: uppercase;
  border-bottom: 1px solid #eef1f2;
}
.mbbbt-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f4f6f7;
  color: #16232b;
}
.mbbbt-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.mbbbt-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #eef1f2;
  color: #5b6670;
}
.mbbbt-badge.is-betaald { background: #111111; color: #ffffff; }
.mbbbt-badge.is-openstaand { background: #eeeeee; color: #111111; }
.mbbbt-badge.is-vervallen { background: #eeeeee; color: #111111; }
.mbbbt-badge.is-draft { background: #eef1f2; color: #5b6670; }
.mbbbt-badge.is-verlopen { background: #f0f2f3; color: #8a969d; }
.mbbbt-badge.is-in-behandeling { background: #eeeeee; color: #111111; }

/* ---- Dashboard legacy widgets ---- */
.mbbbt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.mbbbt-stat {
  background: #ffffff;
  border: 1px solid #e8ebed;
  border-radius: 13px;
  padding: 18px;
}
.mbbbt-stat__ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #eeeeee;
  color: #111111;
  margin-bottom: 12px;
}
.mbbbt-stat__ic.is-green { background: #eeeeee; color: #111111; }
.mbbbt-stat__ic.is-amber { background: #eeeeee; color: #111111; }
.mbbbt-stat__ic.is-blue { background: #eeeeee; color: #111111; }
.mbbbt-stat__ic.is-accent { background: #eeeeee; color: #111111; }
.mbbbt-stat__label {
  font-size: 12.5px;
  color: #8a969d;
}
.mbbbt-stat__value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  color: #16232b;
}
.mbbbt-stat__meta {
  font-size: 12.5px;
  color: #8a969d;
  margin-top: 4px;
}

.mbbbt-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.mbbbt-quick {
  background: #ffffff;
  border: 1px solid #e8ebed;
  border-radius: 13px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #16232b;
  font-weight: 600;
  transition: border-color .15s;
}
.mbbbt-quick:hover {
  border-color: #111111;
}

.mbbbt-greeting h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #16232b;
}
.mbbbt-greeting p {
  color: #8a969d;
  margin: 4px 0 0;
}

/* ---- Settings page (render_settings_page) ---- */
.mbbbt-admin-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.mbbbt-admin-wrap h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #16232b;
}
.mbbbt-lead {
  color: #8a969d;
  font-size: 14px;
  margin: 0 0 20px;
}

.mbbbt-panel {
  background: #ffffff;
  border: 1px solid #e8ebed;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
}
.mbbbt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mbbbt-panel-head h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #16232b;
}

.mbbbt-brand-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mbbbt-brand {
  border: 1px solid #eef1f2;
  border-radius: 11px;
  padding: 16px;
  background: #fafbfb;
}

.mbbbt-panel input[type=text],
.mbbbt-panel input[type=email],
.mbbbt-panel input[type=date],
.mbbbt-panel input[type=number],
.mbbbt-panel select,
.mbbbt-panel textarea,
.mbbbt-brand input[type=text],
.mbbbt-brand input[type=email],
.mbbbt-brand input[type=date],
.mbbbt-brand input[type=number],
.mbbbt-brand select,
.mbbbt-brand textarea {
  width: 100%;
  height: 40px;
  border: 1px solid #e3e7e9;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  color: #16232b;
  background: #ffffff;
  box-sizing: border-box;
}
.mbbbt-panel textarea,
.mbbbt-brand textarea {
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
}
.mbbbt-panel select,
.mbbbt-brand select {
  cursor: pointer;
}

.mbbbt-field {
  margin-bottom: 12px;
}
.mbbbt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* ---- Responsive: collapse field rows on small screens ---- */
@media (max-width: 640px) {
  .mbbbt-field-row,
  .mbbbt-field-row-3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MONOCHROOM THEMA — het dashboard is zwart/wit.
   Inline accent- en statuskleuren uit de views worden hier
   centraal naar zwart/wit/grijs vertaald, zodat er geen
   andere kleuren in de interface verschijnen.
   ============================================================ */
/* Primaire teal-knoppen en -vlakken → zwart */
[style*="background:#12889b"], [style*="background: #12889b"] { background:#111111 !important; }
[style*="background:#0f7488"] { background:#000000 !important; }
/* Diepe teal (avatars, headers) → zwart met witte inhoud */
[style*="background:#063d47"], [style*="background: #063d47"] { background:#111111 !important; color:#ffffff !important; }
/* Cyaan accentvlakken (o.a. Betalen-knop) → zwart met witte tekst */
[style*="background:#8CF5FF"], [style*="background: #8CF5FF"] { background:#111111 !important; color:#ffffff !important; }
/* Gradients met merk-teal → grijstinten */
[style*="linear-gradient(135deg,#063d47,#12889b)"] { background:#111111 !important; }
[style*="linear-gradient(180deg,#8CF5FF,#12889b)"] { background:linear-gradient(180deg,#666666,#111111) !important; }
/* Lichtcyaan/paarse vlakken → lichtgrijs */
[style*="background:#e9fbfe"], [style*="background:#f0fdff"], [style*="background:#dff8fb"], [style*="background:#d6f6fb"], [style*="background:#eef6fb"], [style*="background:#f2f9fb"], [style*="background:#f5f0ff"], [style*="background:#e2fbff"] { background:#f2f2f2 !important; }
/* Statusvlakken (groen/rood/oranje) → grijs */
[style*="background:#e7f6ee"], [style*="background:#fdeeee"], [style*="background:#fdf3e6"], [style*="background:#eef4f0"] { background:#eeeeee !important; }
/* Groene statusbalk (Betaald) → zwart met wit */
[style*="background:#1b7a4b"] { background:#111111 !important; color:#ffffff !important; }
/* Gekleurde teksten → zwart */
[style*="color:#0b6d80"], [style*="color:#0b7d91"], [style*="color:#0b8ba3"], [style*="color:#063d47"], [style*="color:#1b7a4b"], [style*="color:#a5691a"], [style*="color:#b23b3b"], [style*="color:#5b4a8a"], [style*="color:#7c5cc4"] { color:#111111 !important; }
/* Cyaan teksten/iconen → wit op donker, anders donkergrijs via filter */
[style*="color:#8CF5FF"] { color:#ffffff !important; }
/* Sidebar-letterlabels (cyaan met brightness-filter) → grijs */
[style*="color:#8CF5FF"][style*="brightness"] { color:#111111 !important; filter:none !important; }
/* Cyaan/paarse randen (o.a. dropzones) → grijs */
[style*="dashed #8CF5FF"] { border-color:#999999 !important; }
[style*="solid #cdeef4"], [style*="solid #b6f0f8"], [style*="solid #b7e9f2"], [style*="solid #d6f6fb"], [style*="solid #e2d8f5"] { border-color:#dddddd !important; }
/* Donkerteal login/avatar-invullingen in het klantportaal zijn hierboven al gedekt. */