/* De app-pagina laadt v2.css eerst en dit bestand erna, zodat de
   paginaovergang en de voettekst dezelfde zijn als op de rest van
   theseo.nl terwijl de app zijn eigen vormtaal houdt. De sneden staan
   hier ook, want dit bestand moet los kunnen staan.
   Licentie SIL Open Font, zelf hosten is toegestaan. */
@font-face { font-family: Inter; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-800.woff2') format('woff2'); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url('/assets/fonts/instrument-serif-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }

/* Restyle 17-08: zelfde skelet en klassen, rustiger huid. Micro-labels van
   8 en 9px naar 10px, zachtere kleuraccenten, consistente hoeken en
   schaduwen. Gedrag en plek van elke functie zijn ongewijzigd. */
:root {
  --app-bg: #050916;
  --app-bg-2: #081022;
  --app-panel: rgba(10, 19, 41, .82);
  --app-panel-2: #0d1730;
  --app-line: rgba(146, 161, 211, .16);
  --app-line-2: rgba(139, 149, 255, .32);
  --app-text: #e9efff;
  --app-muted: #8492b3;
  --app-blue: #5575ff;
  --app-violet: #7f68ff;
  --app-green: #51dfa0;
  --app-amber: #ffc267;
  --app-red: #ff7487;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--app-bg); color: var(--app-text); font: 15px/1.55 Inter, system-ui, sans-serif; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.mpp-grid { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 74% -10%, rgba(80,110,255,.1), transparent 40%), linear-gradient(rgba(117,135,195,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(117,135,195,.025) 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; }
.mpp-previewbar { position: relative; z-index: 120; height: 34px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid rgba(255,194,103,.18); background: #14121f; color: #a29aae; font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.mpp-previewbar strong { color: var(--app-amber); font-weight: 600; }
.mpp-previewbar a { color: #c3ccff; margin-left: 14px; }
/* Het woordmerk van de site staat ook in een applicatie linksboven, zodat
   op elke pagina van theseo.nl op dezelfde plek de weg terug staat. */
.mpp-terug { margin-left: 0 !important; display: inline-flex; align-items: center; color: #fff !important; font: 800 13px/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; text-transform: none; text-decoration: none; }
/* Boven de kantelbreedte staat de balk gecentreerd; het woordmerk hoort
   dan links in de hoek en mag de centrering niet verschuiven. Daaronder
   breekt de balk af en loopt het woordmerk gewoon mee in de rij. */
@media (min-width: 861px) { .mpp-terug { position: absolute; left: 20px; } }
.mpp-terug i { font-style: normal; color: #8b95ff; }
.mpp-shell { position: relative; height: calc(100vh - 34px); display: grid; grid-template-columns: 248px minmax(0, 1fr); }
/* De sitevoettekst staat ook onder de applicatie, maar in één smalle regel:
   de standaardmarge en de ruime binnenruimte horen bij een scrollende
   inhoudspagina, niet bij een venstervullend werkvlak. */
body:has(.mpp-shell) .v2foot { margin-top: 0; flex: 0 0 auto; }
body:has(.mpp-shell) .v2foot-in { padding: 13px 20px calc(13px + env(safe-area-inset-bottom)); gap: 8px 20px; }
/* overflow-y:auto is hier geen luxe maar de rem op de onderkant. De schil is
   boven de kantelbreedte precies zo hoog als het venster min de meldingsbalk en
   min de voettekst. Past de zijbalk daar niet in, dan liep hij zonder deze regel
   gewoon door onder zijn eigen rand: op 1280 bij 800 hoog stak het onderblok
   74px uit en stonden Weergavevoorkeuren, Documentatie, Veiligheidsstatus en
   Previewomgeving dwars door de voettekst heen. Gemeten 25-08. Op een venster
   vanaf ongeveer 918 hoog viel het niet op, want dan past alles wel. Nu schuift
   de zijbalk in zichzelf en blijft de voettekst vrij. */
.mpp-sidebar { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 26px 16px 18px; border-right: 1px solid var(--app-line); background: rgba(5, 10, 23, .88); backdrop-filter: blur(20px); }
.mpp-brand { padding: 0 10px 26px; }
.mpp-brand a { display: inline-flex; flex-direction: column; color: #fff; text-decoration: none; }
.mpp-brand a > span { font-size: 1.5rem; font-weight: 820; letter-spacing: -.055em; }
.mpp-brand i { color: #8b95ff; font-style: normal; }
.mpp-brand small { margin-top: 7px; color: #6a7799; font: 600 10px/1 var(--mono); letter-spacing: .12em; }
.mpp-tenant { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; margin-bottom: 24px; padding: 12px; border: 1px solid var(--app-line); border-radius: 10px; background: rgba(12,23,47,.6); }
.mpp-tenant-logo { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #4a6cff, #826bff); color: #fff; font: 700 10px/1 var(--mono); }
.mpp-tenant strong, .mpp-tenant span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-tenant strong { font-size: .8rem; letter-spacing: -.01em; }
.mpp-tenant span { margin-top: 4px; color: #6e7d9d; font: 500 10px/1 var(--mono); }
.mpp-tenant button { border: 0; background: transparent; color: #7180a1; cursor: pointer; border-radius: 6px; transition: color .2s; }
.mpp-tenant button:hover { color: #c6cfe8; }
.mpp-nav { display: flex; flex-direction: column; gap: 3px; }
.mpp-nav-label { display: block; margin: 20px 10px 8px; color: #5b6986; font: 600 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.mpp-nav-label:first-child { margin-top: 0; }
.mpp-nav button { position: relative; min-height: 42px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #8592b0; font-size: .84rem; font-weight: 500; text-align: left; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.mpp-nav button:hover { color: #d9e1f6; background: rgba(90,110,210,.07); }
.mpp-nav button.is-active { color: #edf2ff; font-weight: 600; border-color: rgba(103,124,255,.22); background: linear-gradient(90deg, rgba(76,99,225,.15), rgba(76,99,225,.04)); }
.mpp-nav button.is-active::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--app-blue), var(--app-violet)); }
.mpp-nav-ic { width: 20px; color: #7787ff; font: 600 13px/1 var(--mono); text-align: center; }
.mpp-nav b { min-width: 24px; padding: 4px 6px; border-radius: 20px; background: rgba(113,126,167,.12); color: #8895b4; font: 600 10px/1 var(--mono); text-align: center; }
.mpp-nav b.is-alert { color: #ff99a8; background: rgba(255,116,135,.12); }
/* HIER GING HET MIS, gevonden 25-08 doordat Gianluca in het MyParcel-dashboard
   losse pijltjes zag zweven naast de voettekst.

   Deze knoppen en links stonden op justify-content: space-between in een balk
   van 195 pixels. Bij een lang label valt dat niet op, maar bij "Documentatie"
   of "Veiligheidsstatus" duwt die regel het pijltje negentig pixels naar
   rechts, los van het woord waar het bij hoort. Op zijn scherm leek het daardoor
   alsof er willekeurige pijlen over de voettekst heen stonden.

   Nu flex-start met een gat van zes pixels, dus het pijltje volgt de tekst waar
   het bij hoort, ongeacht hoe lang die is. */
.mpp-sidebar-foot { margin-top: auto; padding: 17px 10px 0; border-top: 1px solid var(--app-line); }
.mpp-sidebar-foot a { display: flex; justify-content: flex-start; gap: 6px; padding: 7px 0; color: #7b89a8; font-size: .76rem; text-decoration: none; transition: color .2s; }
.mpp-sidebar-foot a:hover { color: #d3dbef; }
.mpp-sidebar-foot > div { margin-top: 15px; color: #63718f; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.mpp-live-dot { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--app-green); box-shadow: 0 0 0 4px rgba(81,223,160,.07), 0 0 12px rgba(81,223,160,.3); }
.mpp-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: 70px minmax(0,1fr); }
.mpp-topbar { min-width: 0; display: flex; align-items: center; gap: 16px; padding: 0 26px; border-bottom: 1px solid var(--app-line); background: rgba(6,11,25,.7); backdrop-filter: blur(17px); }
.mpp-menu { display: none; }
.mpp-top-title { min-width: 155px; }
.mpp-top-title span, .mpp-top-title strong { display: block; }
.mpp-top-title span { color: #667597; font: 600 10px/1 var(--mono); letter-spacing: .09em; }
.mpp-top-title strong { margin-top: 5px; font-size: .95rem; letter-spacing: -.015em; }
.mpp-search { min-width: 0; width: min(420px, 36vw); height: 38px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-left: auto; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 9px; background: rgba(11,21,43,.66); color: #6e7c9c; text-align: left; cursor: pointer; transition: border-color .2s, color .2s; }
.mpp-search:hover { border-color: var(--app-line-2); color: #93a1c2; }
.mpp-search span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.mpp-search kbd { padding: 4px 6px; border: 1px solid var(--app-line); border-radius: 5px; color: #5f6d8c; font: 500 10px/1 var(--mono); }
.mpp-sync { color: #6e7c9c; font: 500 10px/1 var(--mono); white-space: nowrap; }
.mpp-icon-btn, .mpp-user { border: 1px solid var(--app-line); background: rgba(11,21,43,.72); color: #8b98b6; cursor: pointer; transition: color .2s, border-color .2s; }
.mpp-icon-btn { width: 38px; height: 38px; border-radius: 9px; }
.mpp-icon-btn:hover { color: #dbe3f7; border-color: var(--app-line-2); }
.mpp-user { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #4c6eff, #7f67fc); color: white; font: 700 10px/1 var(--mono); border-color: transparent; box-shadow: 0 4px 12px rgba(85,110,255,.2); }
.mpp-content { min-width: 0; overflow: auto; padding: 34px clamp(24px, 3vw, 50px) 64px; scrollbar-width: thin; scrollbar-color: rgba(104,122,184,.3) transparent; }
/* Het werkvlak krijgt na elke weergavewissel programmatisch focus voor
   toetsenbordgebruik; de standaard focusrand hoort daar niet bij. */
.mpp-content:focus, .mpp-content:focus-visible { outline: 0; }
.mpp-content::-webkit-scrollbar, .mpp-drawer::-webkit-scrollbar, .mpp-modal-card::-webkit-scrollbar, .mpp-search-results::-webkit-scrollbar, .mpp-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.mpp-content::-webkit-scrollbar-thumb, .mpp-drawer::-webkit-scrollbar-thumb, .mpp-modal-card::-webkit-scrollbar-thumb, .mpp-search-results::-webkit-scrollbar-thumb, .mpp-table-wrap::-webkit-scrollbar-thumb { background: rgba(104,122,184,.26); border-radius: 8px; }
.mpp-content::-webkit-scrollbar-thumb:hover, .mpp-drawer::-webkit-scrollbar-thumb:hover, .mpp-modal-card::-webkit-scrollbar-thumb:hover, .mpp-search-results::-webkit-scrollbar-thumb:hover, .mpp-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(104,122,184,.42); }
.mpp-pagehead { display: flex; justify-content: space-between; gap: 34px; align-items: flex-end; margin-bottom: 26px; }
.mpp-pagehead h1 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.08; letter-spacing: -.035em; }
.mpp-pagehead h1 em { color: #aab5ff; font-family: "Instrument Serif", serif; font-weight: 400; }
.mpp-pagehead p { max-width: 600px; margin: 10px 0 0; color: #8b99b8; font-size: .88rem; }
.mpp-eyebrow, .mpp-mono { color: #6d7c9c; font: 600 10px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.mpp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mpp-btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(12,23,47,.66); color: #b6c1da; font: 600 .78rem/1 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.mpp-btn:hover { border-color: var(--app-line-2); background: rgba(17,30,60,.8); color: var(--app-text); }
.mpp-btn--primary { border-color: transparent; background: linear-gradient(135deg, var(--app-blue), var(--app-violet)); color: #fff; box-shadow: 0 4px 14px rgba(85,110,255,.24); }
.mpp-btn--primary:hover { background: linear-gradient(135deg, var(--app-blue), var(--app-violet)); color: #fff; filter: brightness(1.07); }
.mpp-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.mpp-metric { position: relative; padding: 18px 20px 20px; border: 1px solid var(--app-line); border-radius: 12px; background: linear-gradient(145deg, rgba(12,23,48,.8), rgba(8,16,35,.72)); overflow: hidden; }
.mpp-metric span { color: #74829f; font: 600 10px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.mpp-metric b { display: block; margin-top: 13px; font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mpp-metric small { margin-left: 8px; padding: 3px 7px 4px; border-radius: 5px; background: rgba(81,223,160,.1); color: var(--app-green); font: 600 9.5px/1 var(--mono); vertical-align: 4px; }
.mpp-metric.is-warn b, .mpp-metric.is-warn small { color: var(--app-amber); }
.mpp-metric.is-warn small { background: rgba(255,194,103,.1); }
.mpp-metric.is-alert b, .mpp-metric.is-alert small { color: var(--app-red); }
.mpp-metric.is-alert small { background: rgba(255,116,135,.1); }
.mpp-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 12px; }
.mpp-layout > * { min-width: 0; }
.mpp-card { border: 1px solid var(--app-line); border-radius: 12px; background: rgba(9,17,37,.76); overflow: hidden; box-shadow: 0 14px 40px rgba(2,5,13,.22); }
.mpp-card + .mpp-card { margin-top: 12px; }
.mpp-card-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--app-line); background: rgba(255,255,255,.012); }
.mpp-card-head h2 { margin: 0; font-size: .92rem; letter-spacing: -.015em; }
.mpp-card-head span { color: #6a7898; font: 500 10px/1.4 var(--mono); }
.mpp-card-body { padding: 20px; }
.mpp-chart { height: 230px; position: relative; overflow: hidden; }
.mpp-chart::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 45px, rgba(145,160,210,.06) 45px 46px); }
.mpp-chart svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.mpp-chart-area { fill: url(#mpp-area); }
/* DE ACCENTKEUZE BEREIKTE DE GRAFIEKEN NIET. De lijn, het vlak eronder en de
   balken stonden hier op vaste violette waarden, dus wie in Weergavevoorkeuren
   Signaal cyaan koos zag alles meekleuren behalve juist de twee vlakken waar je
   naar kijkt. Een voorkeur die de helft van het scherm overslaat is geen
   voorkeur. Ze lezen nu dezelfde variabele als de rest, zodat de keuze in één
   keer overal doorwerkt. */
.mpp-chart-line { fill: none; stroke: var(--app-violet); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(101,128,255,.35)); }
.mpp-chart-labels { display: flex; justify-content: space-between; margin-top: 10px; color: #637090; font: 500 10px/1 var(--mono); }
.mpp-attention { display: grid; gap: 8px; }
.mpp-attn { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 64px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 10px; background: rgba(13,24,48,.52); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.mpp-attn:hover { border-color: var(--app-line-2); background: rgba(16,29,58,.66); }
.mpp-attn-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,194,103,.09); color: var(--app-amber); font: 700 10px/1 var(--mono); }
/* De twee regels hieronder gingen ook over het ronde tekentje links (.mpp-attn-ic),
   want dat is ook een span in .mpp-attn. Met .mpp-attn span (0,1,1) wonnen ze van
   .mpp-attn-ic (0,1,0) een regel hoger. Daardoor werd het tekentje display:block in
   plaats van grid, viel place-items:center weg en stond de letter linksboven, net
   buiten zijn eigen vakje; hij kreeg bovendien de grijze tekstkleur en de grotere
   maat van de onderregel plus 3px marge. Gevonden 25-08 op /myparcel-dashboard/app/,
   op alle vier de maten. Nu sluiten ze het tekentje uit, zodat zijn eigen regel geldt. */
.mpp-attn strong, .mpp-attn span:not(.mpp-attn-ic) { display: block; }
.mpp-attn strong { font-size: .8rem; }
.mpp-attn span:not(.mpp-attn-ic) { margin-top: 3px; color: #74819f; font-size: .73rem; }
.mpp-attn > b { color: #7887a7; font: 500 10px/1 var(--mono); }
.mpp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.mpp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mpp-pill { min-height: 31px; padding: 0 13px; border: 1px solid var(--app-line); border-radius: 20px; background: rgba(10,20,42,.6); color: #8c99b7; font: 600 .73rem/1 Inter, system-ui, sans-serif; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.mpp-pill:hover { color: #c3cce8; border-color: var(--app-line-2); }
.mpp-pill.is-active { border-color: rgba(91,116,255,.42); background: rgba(74,97,218,.2); color: #d3daff; }
.mpp-toolbar .mpp-actions { margin-left: auto; }
.mpp-table-wrap { min-width: 0; max-width: 100%; overflow: auto; }
.mpp-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.mpp-table th { height: 42px; padding: 0 15px; border-bottom: 1px solid var(--app-line); background: rgba(8,15,33,.5); color: #77869f; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.mpp-table td { height: 52px; padding: 0 15px; border-bottom: 1px solid rgba(146,161,211,.08); color: #a9b4cf; font-size: .82rem; font-variant-numeric: tabular-nums; }
.mpp-table tbody tr:last-child td { border-bottom: 0; }
.mpp-table th:first-child, .mpp-table td:first-child { padding-left: 20px; }
.mpp-table th:last-child, .mpp-table td:last-child { padding-right: 20px; }
.mpp-table tbody tr { transition: background .18s; }
.mpp-table tbody tr:hover { background: rgba(91,113,218,.05); }
.mpp-table td strong { color: #e6ecf9; font-weight: 600; }
.mpp-link { border: 0; background: transparent; padding: 0; color: #b3bdff; font: 500 .75rem/1.3 var(--mono); text-decoration: underline; text-decoration-color: rgba(174,185,255,.22); text-underline-offset: 4px; cursor: pointer; transition: text-decoration-color .2s, color .2s; }
.mpp-link:hover { color: #d3daff; text-decoration-color: rgba(211,218,255,.6); }
.mpp-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 23px; padding: 0 9px; border: 1px solid rgba(81,223,160,.24); border-radius: 6px; background: rgba(81,223,160,.08); color: var(--app-green); font: 600 .7rem/1 Inter, system-ui, sans-serif; letter-spacing: .01em; }
.mpp-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mpp-badge--blue { color: #94a9ff; border-color: rgba(85,117,255,.26); background: rgba(85,117,255,.08); }
.mpp-badge--warn { color: var(--app-amber); border-color: rgba(255,194,103,.26); background: rgba(255,194,103,.08); }
.mpp-badge--alert { color: var(--app-red); border-color: rgba(255,116,135,.26); background: rgba(255,116,135,.08); }
.mpp-row-actions { display: flex; gap: 5px; }
.mpp-row-actions button { min-width: 30px; height: 30px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(12,23,47,.6); color: #7b8aa9; font: 600 10px/1 var(--mono); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.mpp-row-actions button:hover { color: #dbe3f7; border-color: var(--app-line-2); background: rgba(17,30,60,.8); }
.mpp-shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mpp-shop { min-height: 196px; padding: 20px; border: 1px solid var(--app-line); border-radius: 12px; background: rgba(10,20,42,.64); transition: border-color .2s; }
.mpp-shop:hover { border-color: var(--app-line-2); }
.mpp-shop-top { display: flex; align-items: center; gap: 12px; }
.mpp-shop-logo { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; background: var(--shop-color, #506cff); color: white; font: 700 10px/1 var(--mono); }
.mpp-shop h3 { margin: 0; font-size: .92rem; letter-spacing: -.01em; }
.mpp-shop p { margin: 5px 0 0; color: #72809f; font: 500 10px/1 var(--mono); }
.mpp-shop-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 20px; }
.mpp-shop-stats div { padding: 11px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(8,16,34,.42); }
.mpp-shop-stats b, .mpp-shop-stats span { display: block; }
.mpp-shop-stats b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mpp-shop-stats span { margin-top: 5px; color: #687693; font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.mpp-shop .mpp-btn { width: 100%; margin-top: 18px; }
.mpp-bars { display: grid; gap: 15px; }
.mpp-bar { display: grid; grid-template-columns: 110px 1fr 42px; align-items: center; gap: 12px; }
.mpp-bar span { overflow: hidden; color: #8c99b6; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.mpp-bar-track { height: 6px; border-radius: 10px; background: rgba(112,127,173,.12); overflow: hidden; }
.mpp-bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-blue), var(--app-violet)); }
.mpp-bar b { color: #8593b1; font: 600 10px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.mpp-destination-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mpp-destination { padding: 16px 10px; border: 1px solid var(--app-line); border-radius: 10px; background: rgba(11,21,43,.55); text-align: center; }
.mpp-destination strong { display: block; font-size: 1.2rem; letter-spacing: -.02em; }
.mpp-destination span { display: block; margin-top: 7px; color: #72809e; font: 500 9.5px/1 var(--mono); }
.mpp-scrim { position: fixed; inset: 0; z-index: 135; background: rgba(2,5,13,.67); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.mpp-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s; }
.mpp-drawer { position: fixed; top: 34px; right: 0; bottom: 0; z-index: 150; width: min(520px, 94vw); overflow: auto; padding: 28px; border-left: 1px solid var(--app-line-2); background: rgba(6,12,26,.98); box-shadow: -30px 0 80px rgba(0,0,0,.35); transform: translateX(104%); transition: transform .5s var(--ease); scrollbar-width: thin; scrollbar-color: rgba(104,122,184,.3) transparent; }
.mpp-drawer.is-open { transform: none; }
.mpp-drawer-head, .mpp-modal-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--app-line); }
.mpp-drawer h2, .mpp-modal h2 { margin: 8px 0 0; font-size: 1.18rem; letter-spacing: -.02em; }
.mpp-drawer-head button, .mpp-modal-head button { border: 0; background: transparent; color: #7583a3; font: 300 26px/1 Inter; cursor: pointer; transition: color .2s; }
.mpp-drawer-head button:hover, .mpp-modal-head button:hover { color: #dfe6f8; }
.mpp-detail-status { display: flex; gap: 8px; margin: 22px 0; }
.mpp-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mpp-detail-field { padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 9px; background: rgba(11,21,43,.5); }
.mpp-detail-field span, .mpp-detail-field strong { display: block; }
.mpp-detail-field span { color: #667595; font: 600 9.5px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.mpp-detail-field strong { margin-top: 7px; color: #dce4f6; font-size: .81rem; font-weight: 600; }
.mpp-detail-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 18px; }
.mpp-detail-actions .mpp-btn { padding-inline: 8px; }
.mpp-timeline { margin-top: 28px; }
.mpp-timeline h3 { font-size: .86rem; letter-spacing: -.01em; }
.mpp-timeline-item { position: relative; min-height: 59px; padding: 0 0 18px 25px; border-left: 1px solid var(--app-line); color: #7e8caa; font-size: .78rem; }
.mpp-timeline-item::before { content: ""; position: absolute; left: -4px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #6d81ff; box-shadow: 0 0 0 5px rgba(109,129,255,.08); }
.mpp-timeline-item b { display: block; margin-bottom: 4px; color: #cfd8ea; font-weight: 600; }
.mpp-modal { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 20px; background: rgba(2,5,13,.75); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.mpp-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s; }
.mpp-modal-card { width: min(560px, 100%); max-height: 86vh; overflow: auto; padding: 26px; border: 1px solid var(--app-line-2); border-radius: 14px; background: #091329; box-shadow: 0 40px 120px rgba(0,0,0,.5); transform: translateY(15px); transition: transform .4s var(--ease); scrollbar-width: thin; scrollbar-color: rgba(104,122,184,.3) transparent; }
.mpp-modal.is-open .mpp-modal-card { transform: none; }
.mpp-form { display: grid; gap: 14px; margin-top: 22px; }
.mpp-field label { display: block; margin-bottom: 7px; color: #74829f; font: 600 10px/1.35 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.mpp-field input, .mpp-field select, .mpp-field textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 9px; outline: 0; background: rgba(5,12,27,.72); color: #dbe3f5; transition: border-color .2s, box-shadow .2s; }
.mpp-field input:disabled, .mpp-field select:disabled, .mpp-field textarea:disabled { color: #8794b2; }
.mpp-field textarea { min-height: 92px; resize: vertical; }
.mpp-field input:focus, .mpp-field textarea:focus, .mpp-field select:focus { border-color: rgba(97,121,255,.55); box-shadow: 0 0 0 3px rgba(97,121,255,.09); }
.mpp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mpp-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.mpp-search-overlay { position: fixed; inset: 0; z-index: 180; display: grid; align-items: start; justify-items: center; padding: 11vh 20px 20px; background: rgba(2,5,13,.76); backdrop-filter: blur(9px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.mpp-search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s; }
.mpp-search-box { width: min(720px, 100%); overflow: hidden; border: 1px solid var(--app-line-2); border-radius: 14px; background: #091329; box-shadow: 0 40px 120px rgba(0,0,0,.48); }
.mpp-search-input { min-height: 62px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--app-line); }
.mpp-search-input input { width: 100%; border: 0; outline: 0; background: transparent; color: #e8efff; font-size: 1rem; }
.mpp-search-input button { border: 1px solid var(--app-line); border-radius: 5px; background: transparent; color: #6f7c9c; font: 600 10px/1 var(--mono); padding: 6px; cursor: pointer; }
.mpp-search-box > p { margin: 0; padding: 12px 16px; color: #6a7896; font-size: .76rem; }
.mpp-search-results { max-height: 52vh; overflow: auto; border-top: 1px solid var(--app-line); scrollbar-width: thin; scrollbar-color: rgba(104,122,184,.3) transparent; }
.mpp-search-row { min-height: 62px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid rgba(146,161,211,.09); cursor: pointer; }
.mpp-search-row:hover { background: rgba(91,113,218,.06); }
.mpp-search-type { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(86,116,255,.1); color: #96a6ff; font: 700 9px/1 var(--mono); }
.mpp-search-row strong, .mpp-search-row span { display: block; }
.mpp-search-row strong { font-size: .8rem; }
.mpp-search-row span { margin-top: 3px; color: #6b7a99; font-size: .73rem; }
.mpp-search-row > time { color: #6c7a98; font: 500 10px/1 var(--mono); }
.mpp-empty { display: grid; justify-items: center; gap: 13px; padding: 42px 24px 44px; color: #8794b3; text-align: center; font-size: .83rem; }
.mpp-empty::before { content: ""; width: 34px; height: 34px; border: 1px dashed rgba(139,149,255,.42); border-radius: 50%; background: radial-gradient(circle, rgba(85,117,255,.14), transparent 72%); }
.mpp-card .mpp-empty { margin: 20px; border: 1px dashed var(--app-line-2); border-radius: 10px; background: rgba(11,21,43,.28); }
.mpp-alert-text { color: var(--app-red) !important; font-weight: 650; }
.mpp-btn:focus-visible, .mpp-nav button:focus-visible, .mpp-search:focus-visible, .mpp-link:focus-visible, .mpp-pill:focus-visible, .mpp-row-actions button:focus-visible, .mpp-attn:focus-visible, .mpp-icon-btn:focus-visible, .mpp-user:focus-visible, .mpp-top-action:focus-visible { outline: 2px solid #8d9cff; outline-offset: 2px; }
.mpp-toast { position: fixed; right: 22px; bottom: 22px; z-index: 200; max-width: 380px; display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border: 1px solid var(--app-line-2); border-radius: 10px; background: rgba(8,14,30,.97); color: #c8d3ea; font-size: .8rem; box-shadow: 0 20px 55px rgba(0,0,0,.4); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s; }
.mpp-toast::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--app-green); box-shadow: 0 0 10px rgba(81,223,160,.55); }
.mpp-toast.is-visible { opacity: 1; transform: none; }
.mpp-wallboard { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, rgba(62,89,221,.2), transparent 50%), #040712; }
.mpp-wallboard-inner { width: min(1500px, 92vw); text-align: center; }
.mpp-wallboard-time { color: #7c8aab; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.mpp-wallboard h1 { margin: 28px 0 50px; font-size: clamp(3rem,7vw,7rem); letter-spacing: -.06em; }
.mpp-wallboard-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.mpp-wallboard-grid div { padding: 35px 15px; border: 1px solid var(--app-line); border-radius: 14px; background: rgba(11,21,43,.66); }
.mpp-wallboard-grid b { display: block; font-size: clamp(2.5rem,5vw,5.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.mpp-wallboard-grid span { display: block; margin-top: 17px; color: #78859f; font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.mpp-wallboard-close { position: fixed; right: 24px; top: 24px; min-height: 40px; padding: 0 14px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(11,21,43,.8); color: #9ba7c2; cursor: pointer; transition: color .2s, border-color .2s; }
.mpp-wallboard-close:hover { color: #dfe6f8; border-color: var(--app-line-2); }

/* Persoonlijke werkplek: kleur, dichtheid en zichtbare informatie. */
.mpp-top-action { min-height: 38px; padding: 0 13px; border: 1px solid var(--app-line); border-radius: 9px; background: rgba(11,21,43,.72); color: #a0adc8; font: 600 .73rem/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s; }
.mpp-top-action:hover, .mpp-sidebar-foot button:hover { border-color: var(--app-line-2); color: var(--app-text); }
.mpp-sidebar-foot button { width: 100%; display: flex; justify-content: flex-start; gap: 6px; margin: 0 0 4px; padding: 7px 0; border: 0; border-bottom: 1px solid var(--app-line); background: transparent; color: #909dbb; font-size: .76rem; text-align: left; cursor: pointer; transition: color .2s; }
.mpp-form-note { margin: 0; color: var(--app-muted); font-size: .8rem; }
.mpp-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mpp-check-option { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 9px; color: #a8b3cc; cursor: pointer; transition: border-color .2s; }
.mpp-check-option:hover { border-color: var(--app-line-2); }
.mpp-check-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--app-violet); }
.mpp-table [data-col].is-column-hidden { display: none; }
.mpp-hide-metrics .mpp-metrics { display: none; }

:root[data-accent="blue"] { --app-blue: #3864ea; --app-violet: #587cff; --app-line-2: rgba(66,100,232,.34); }
:root[data-accent="cyan"] { --app-blue: #1478a6; --app-violet: #19a4b8; --app-line-2: rgba(25,164,184,.34); }

:root[data-density="compact"] .mpp-workspace { grid-template-rows: 60px minmax(0,1fr); }
:root[data-density="compact"] .mpp-sidebar { padding-top: 18px; }
:root[data-density="compact"] .mpp-brand { padding-bottom: 17px; }
:root[data-density="compact"] .mpp-tenant { margin-bottom: 16px; padding: 9px; }
:root[data-density="compact"] .mpp-nav button { min-height: 35px; }
:root[data-density="compact"] .mpp-content { padding-top: 24px; }
:root[data-density="compact"] .mpp-pagehead { margin-bottom: 18px; }
:root[data-density="compact"] .mpp-metric { padding: 14px 16px 16px; }
:root[data-density="compact"] .mpp-metric b { margin-top: 9px; font-size: 1.45rem; }
:root[data-density="compact"] .mpp-card-head { min-height: 46px; }
:root[data-density="compact"] .mpp-table td { height: 44px; }
:root[data-density="compact"] .mpp-shop { min-height: 176px; padding: 16px; }

/* Dagmodus is bewust papierachtig: dezelfde TheSEO-blauwdruk, meer daglicht. */
:root[data-theme="light"] {
  color-scheme: light;
  --app-bg: #eef3fb;
  --app-bg-2: #f7f9fd;
  --app-panel: rgba(255,255,255,.86);
  --app-panel-2: #ffffff;
  --app-line: rgba(28,55,105,.14);
  --app-line-2: rgba(67,82,190,.3);
  --app-text: #12203c;
  --app-muted: #64728d;
  --app-green: #16865a;
  --app-amber: #a96508;
  --app-red: #c63e55;
}
:root[data-theme="light"] body { background: var(--app-bg); color: var(--app-text); }
:root[data-theme="light"] .mpp-grid { background: radial-gradient(circle at 74% -10%, rgba(80,110,255,.09), transparent 40%), linear-gradient(rgba(36,69,130,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(36,69,130,.03) 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; }
:root[data-theme="light"] .mpp-previewbar { border-color: rgba(169,101,8,.18); background: #f5efe4; color: #766b5d; }
:root[data-theme="light"] .mpp-previewbar a { color: #354c9d; }
:root[data-theme="light"] .mpp-sidebar { background: rgba(248,250,255,.92); box-shadow: 15px 0 45px rgba(30,48,89,.05); }
:root[data-theme="light"] .mpp-brand a { color: #101d37; }
:root[data-theme="light"] .mpp-brand small, :root[data-theme="light"] .mpp-nav-label, :root[data-theme="light"] .mpp-top-title span, :root[data-theme="light"] .mpp-eyebrow, :root[data-theme="light"] .mpp-mono { color: #687895; }
:root[data-theme="light"] .mpp-tenant, :root[data-theme="light"] .mpp-search, :root[data-theme="light"] .mpp-icon-btn, :root[data-theme="light"] .mpp-top-action, :root[data-theme="light"] .mpp-btn, :root[data-theme="light"] .mpp-pill { background: rgba(255,255,255,.72); }
:root[data-theme="light"] .mpp-tenant span, :root[data-theme="light"] .mpp-tenant button, :root[data-theme="light"] .mpp-search, :root[data-theme="light"] .mpp-sync, :root[data-theme="light"] .mpp-icon-btn, :root[data-theme="light"] .mpp-top-action { color: #64728b; }
:root[data-theme="light"] .mpp-nav button { color: #596985; }
:root[data-theme="light"] .mpp-nav button:hover { color: #1a2946; background: rgba(65,87,181,.06); }
:root[data-theme="light"] .mpp-nav button.is-active { color: #1b2b50; border-color: rgba(78,94,204,.2); background: linear-gradient(90deg, rgba(78,94,204,.1), rgba(78,94,204,.03)); }
:root[data-theme="light"] .mpp-nav b { color: #5f6e89; background: rgba(62,78,125,.08); }
:root[data-theme="light"] .mpp-sidebar-foot a, :root[data-theme="light"] .mpp-sidebar-foot button, :root[data-theme="light"] .mpp-sidebar-foot > div { color: #687791; }
:root[data-theme="light"] .mpp-sidebar-foot a:hover, :root[data-theme="light"] .mpp-sidebar-foot button:hover { color: #1a2946; }
:root[data-theme="light"] .mpp-topbar { background: rgba(249,251,255,.78); }
:root[data-theme="light"] .mpp-menu { background: rgba(255,255,255,.8); color: #40506b; }
:root[data-theme="light"] .mpp-search kbd { color: #5b6985; }
:root[data-theme="light"] .mpp-pagehead h1 em { color: #5f64be; }
:root[data-theme="light"] .mpp-pagehead p, :root[data-theme="light"] .mpp-metric span, :root[data-theme="light"] .mpp-card-head span, :root[data-theme="light"] .mpp-attn span, :root[data-theme="light"] .mpp-bar span, :root[data-theme="light"] .mpp-bar b, :root[data-theme="light"] .mpp-destination span, :root[data-theme="light"] .mpp-form-note { color: #65738c; }
:root[data-theme="light"] .mpp-btn { color: #34435f; }
:root[data-theme="light"] .mpp-btn:hover { background: #ffffff; color: #12203c; }
:root[data-theme="light"] .mpp-btn--primary { background: linear-gradient(135deg, var(--app-blue), var(--app-violet)); color: #fff; box-shadow: 0 4px 14px rgba(59,78,196,.18); }
:root[data-theme="light"] .mpp-btn--primary:hover { background: linear-gradient(135deg, var(--app-blue), var(--app-violet)); color: #fff; }
:root[data-theme="light"] .mpp-metric { background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(242,246,255,.88)); box-shadow: 0 12px 34px rgba(35,54,96,.045); }
:root[data-theme="light"] .mpp-metric small { background: rgba(22,134,90,.08); }
:root[data-theme="light"] .mpp-metric.is-warn small { background: rgba(169,101,8,.09); }
:root[data-theme="light"] .mpp-metric.is-alert small { background: rgba(198,62,85,.08); }
:root[data-theme="light"] .mpp-card, :root[data-theme="light"] .mpp-shop { background: rgba(255,255,255,.82); box-shadow: 0 12px 34px rgba(35,54,96,.045); }
:root[data-theme="light"] .mpp-card-head { background: rgba(28,55,105,.015); }
:root[data-theme="light"] .mpp-attn, :root[data-theme="light"] .mpp-shop-stats div, :root[data-theme="light"] .mpp-destination, :root[data-theme="light"] .mpp-detail-field { background: rgba(241,245,253,.76); }
:root[data-theme="light"] .mpp-attn:hover { background: rgba(233,239,252,.95); }
:root[data-theme="light"] .mpp-attn strong, :root[data-theme="light"] .mpp-shop h3, :root[data-theme="light"] .mpp-detail-field strong, :root[data-theme="light"] .mpp-timeline-item b, :root[data-theme="light"] .mpp-table td strong, :root[data-theme="light"] .mpp-search-row strong { color: #1b2943; }
:root[data-theme="light"] .mpp-table th { color: #61718c; background: rgba(28,55,105,.045); }
:root[data-theme="light"] .mpp-table td { color: #50617d; border-bottom-color: rgba(28,55,105,.08); }
:root[data-theme="light"] .mpp-table tbody tr:hover, :root[data-theme="light"] .mpp-search-row:hover { background: rgba(70,91,181,.05); }
:root[data-theme="light"] .mpp-link { color: #4e57b8; text-decoration-color: rgba(78,87,184,.25); }
:root[data-theme="light"] .mpp-link:hover { color: #343d99; text-decoration-color: rgba(52,61,153,.55); }
:root[data-theme="light"] .mpp-row-actions button { background: #f7f9fd; color: #52627d; }
:root[data-theme="light"] .mpp-row-actions button:hover { background: #ffffff; color: #12203c; }
:root[data-theme="light"] .mpp-bar-track { background: rgba(48,65,108,.1); }
:root[data-theme="light"] .mpp-drawer { background: rgba(249,251,255,.99); box-shadow: -30px 0 80px rgba(32,46,77,.18); }
:root[data-theme="light"] .mpp-modal-card, :root[data-theme="light"] .mpp-search-box { background: #f9fbff; box-shadow: 0 40px 120px rgba(31,46,82,.23); }
:root[data-theme="light"] .mpp-field label, :root[data-theme="light"] .mpp-search-box > p, :root[data-theme="light"] .mpp-search-row span, :root[data-theme="light"] .mpp-search-row > time, :root[data-theme="light"] .mpp-timeline-item { color: #64738d; }
:root[data-theme="light"] .mpp-field input, :root[data-theme="light"] .mpp-field select, :root[data-theme="light"] .mpp-field textarea { background: #fff; color: #182641; }
:root[data-theme="light"] .mpp-field input:disabled, :root[data-theme="light"] .mpp-field select:disabled, :root[data-theme="light"] .mpp-field textarea:disabled { color: #64728b; }
:root[data-theme="light"] .mpp-search-input input { color: #182641; }
:root[data-theme="light"] .mpp-check-option { color: #34435f; background: rgba(255,255,255,.65); }
:root[data-theme="light"] .mpp-empty { color: #64738d; }
:root[data-theme="light"] .mpp-empty::before { border-color: rgba(67,82,190,.38); background: radial-gradient(circle, rgba(67,82,190,.1), transparent 72%); }
:root[data-theme="light"] .mpp-card .mpp-empty { background: rgba(241,245,253,.6); }
:root[data-theme="light"] .mpp-toast { background: #ffffff; color: #2c3c5c; border-color: rgba(28,55,105,.16); box-shadow: 0 20px 55px rgba(31,46,82,.18); }
:root[data-theme="light"] .mpp-wallboard { background: radial-gradient(circle at 50% 30%, rgba(62,89,221,.12), transparent 50%), #eef3fb; }
:root[data-theme="light"] .mpp-wallboard-grid div, :root[data-theme="light"] .mpp-wallboard-close { background: rgba(255,255,255,.8); }

/* Boven de kantelbreedte staat de app vast in het venster. De pagina is dan
   een kolom van meldingsbalk, werkvlak en voettekst, zodat de voettekst
   leesbaar onderaan staat in plaats van buiten beeld te vallen. Alle
   vensters van de app (lade, zoekvenster, dialoog, melding) staan op
   position fixed en vallen dus buiten deze kolom.
   Onder de kantelbreedte scrollt de pagina al en blijft alles zoals het was. */
@media (min-width: 861px) {
  body:has(.mpp-shell) { display: flex; flex-direction: column; height: 100vh; }
  .mpp-previewbar { flex: 0 0 34px; }
  .mpp-shell { flex: 1 1 auto; min-height: 0; height: auto; }
}

@media (max-width: 1120px) {
  .mpp-metrics { grid-template-columns: repeat(2,1fr); }
  .mpp-layout { grid-template-columns: minmax(0,1fr); }
  .mpp-shops { grid-template-columns: repeat(2,1fr); }
  .mpp-sync { display: none; }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .mpp-previewbar { min-height: 42px; height: auto; justify-content: flex-start; flex-wrap: wrap; padding-block: 2px; row-gap: 0; }
  .mpp-previewbar span { display: none; }
  /* DE WEG TERUG UIT DE DEMO WAS NIET TE RAKEN, gemeten 25-08 op 375 px.
     In deze balk staan de enige twee links waarmee je de preview verlaat.
     Ze hadden geen binnenruimte en regelhoogte 1, dus het raakvlak was net
     zo hoog als de letters zelf: het woordmerk 13 px en "Terug naar
     productpagina" 10 px. Alles onder 32 px mis je met een duim; Apple en
     Google houden 44 aan. Het waren geen links in een lopende zin, dus de
     uitzondering van WCAG 2.5.8 geldt hier niet.
     De hoogte komt uit binnenruimte en niet uit een onzichtbare ::after,
     zodat een volgende meting ziet wat de vinger raakt. De balk zelf levert
     de ruimte: padding-block van 7 naar 2 en de rijafstand naar 0, want die
     stond er alleen om twee regels letters uit elkaar te houden en dat doet
     de binnenruimte nu. Balk 52 naar 69 px; de tekst blijft even groot en
     staat op dezelfde plek. */
  .mpp-previewbar a { display: inline-flex; align-items: center; min-height: 32px; }
  .mpp-shell { height: calc(100vh - 42px); grid-template-columns: 1fr; }
  .mpp-sidebar { position: fixed; top: 42px; left: 0; bottom: 0; z-index: 145; width: min(300px, 88vw); transform: translateX(-103%); transition: transform .4s var(--ease); }
  .mpp-sidebar.is-open { transform: none; }
  .mpp-menu { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(11,21,43,.7); color: #9ba7c1; font: 600 .73rem/1 Inter, system-ui, sans-serif; }
  .mpp-top-title { min-width: 110px; }
  .mpp-search { width: 38px; display: grid; grid-template-columns: 1fr; place-items: center; margin-left: auto; padding: 0; }
  .mpp-search span:nth-child(2), .mpp-search kbd { display: none; }
  .mpp-content { padding: 27px 18px 60px; }
  .mpp-pagehead { align-items: start; flex-direction: column; }
  .mpp-pagehead .mpp-actions { width: 100%; }
  .mpp-pagehead .mpp-actions .mpp-btn { flex: 1; }
  .mpp-wallboard-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .mpp-topbar { padding: 0 12px; gap: 9px; }
  .mpp-top-title span { display: none; }
  .mpp-top-title { min-width: 0; flex: 1; }
  .mpp-search { margin-left: 0; }
  .mpp-icon-btn { display: none; }
  .mpp-settings-trigger { display: none; }
  .mpp-check-grid { grid-template-columns: 1fr; }
  .mpp-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mpp-metric { padding: 15px 16px 17px; }
  .mpp-metric b { margin-top: 10px; font-size: 1.45rem; }
  .mpp-shops { grid-template-columns: 1fr; }
  .mpp-destination-grid { grid-template-columns: repeat(2,1fr); }
  .mpp-form-row, .mpp-detail-grid, .mpp-detail-actions { grid-template-columns: 1fr; }
  .mpp-wallboard-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; } }

/* Zoekresultaten als echte knoppen: focusbaar en met Enter te openen. */
button.mpp-search-row { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(146,161,211,.09); color: inherit; font-family: inherit; text-align: left; }
button.mpp-search-row:focus-visible { outline: 2px solid #8d9cff; outline-offset: -2px; }
:root[data-theme="light"] button.mpp-search-row { border-bottom-color: rgba(27,41,67,.1); }

/* ============================================================
   EEN VINGER IS GEEN MUISPIJL, 25-08

   Gemeten op 375 px met aanraakemulatie aan: 24 bedieningen in deze app
   onder de 32 px. Apple houdt 44 bij 44 punten aan, Google 48 bij 48, en
   onder de 32 mis je hem met een duim.

   Alles hieronder is voering. Geen enkel lettertype verandert, geen enkele
   kleur, geen enkele volgorde. Wat er stond blijft staan, de doos eromheen
   wordt groter. De hele reeks staat achter de smalle maat plus grof
   aanwijsapparaat, dus op een muisscherm van 1280, 1440 en 1920 verandert er
   niets. Nagemeten op alle vier de maten.

   Wat er gemeten was, en waar het naartoe gaat:
     .mpp-row-actions button   30 bij 30   wordt 44 bij 44
     .mpp-link in een cel      16 hoog     wordt 44
     .mpp-tenant button        25 bij 21   wordt 44 bij 44
     .mpp-search-input button  24 hoog     wordt 44
     sluitkruis lade en dialoog 28 bij 29  wordt 44 bij 44
     .mpp-previewbar links     10 en 13    worden 44
   ============================================================ */
@media (pointer: coarse), (max-width: 560px) {
  /* De rijknopjes in de tabel. Ze staan met vijf px ertussen naast elkaar,
     dus met 44 breed passen er hooguit drie op een rij van 375; de tabel
     schuift al zijwaarts in zijn eigen omhulsel, dus dat mag. */
  .mpp-row-actions button { height: auto; min-width: 44px; padding: 16px 4px; }

  /* De barcodeknop in een cel en de doorlinkknop in een kaartkop. Beide zijn
     een button, dus inline-block, dus voering telt hier wel mee in de hoogte.
     De regelhoogte blijft 1,3 en de letters blijven .75rem. */
  .mpp-link { padding-block: 14px; }

  /* Het kepertje naast de organisatienaam. Het was 25 bij 21, het kleinste
     doel van de hele app. */
  .mpp-tenant button { min-width: 44px; min-height: 44px; padding: 11px; }

  /* De ESC-knop in de zoekbalk. */
  .mpp-search-input button { padding: 16px 12px; }

  /* De sluitkruisen van de lade en de dialoog. Het kruis zelf blijft 26 px
     Inter; alleen de doos eromheen groeit. */
  .mpp-drawer-head button, .mpp-modal-head button { min-width: 44px; padding: 9px; }
}

/* NIET GEREPAREERD, EN WAAROM NIET: de twee links in .mpp-previewbar.
   Gemeten op 375: het woordmerk .theseo is 45 bij 13 en "Terug naar
   productpagina" is 156 bij 10. Allebei te klein, allebei echte navigatie.

   Voering lost het hier niet op zonder de app eronder scheef te zetten. Op 375
   staan die twee links al op twee aparte regels, want samen met het amberen
   label meten ze 411 px op een balk van 375. Twee regels van 44 maken de balk
   minstens 88 hoog, en de balkhoogte staat op drie plekken los ingetypt:
     .mpp-previewbar { min-height: 42px }
     .mpp-shell      { height: calc(100vh - 42px) }
     .mpp-sidebar    { top: 42px }
   Nagemeten met voering erin: de balk werd 106 en de zijbalk bleef op 42
   beginnen, dus de lade dekte 64 px van de balk af.

   Die 42 klopt trouwens nu al niet: de balk meet vandaag 50 px, dus de zijbalk
   begint acht px te hoog. Dat rechttrekken is geen vormkwestie maar een
   ingreep in de opbouw van de app, en dat hoort een eigen besluit te zijn.
   Drie wegen, geen ervan is aan een opmaakronde:
     a. de balkhoogte in een eigen variabele zetten en op alle drie de plekken
        gebruiken, daarna de links op 44 zetten;
     b. de lade op de hele hoogte laten beginnen in plaats van onder de balk;
     c. de balk op een regel houden door de twee links naast elkaar te zetten
        en het amberen label eronder, wat de volgorde van de balk verandert. */

/* ============================================================
   CFG.B01 · BRANDING PER WEBSHOP EN DE MAILSTROOM EROMHEEN

   De dialoog werd te smal op het moment dat er negentien velden in
   moesten. Vandaar een brede variant met twee kolommen: links de
   instellingen in vijf tabbladen, rechts de mail die eruit volgt. Die
   twee horen naast elkaar, want branding per webshop is pas te zien op
   het moment dat je de mail ziet veranderen.

   De winkelkaart op CFG.01 draagt zijn eigen mailregel. In de oude
   versie lag de historie twee lagen diep en per webshop, dus een storing
   stond er wel maar niemand kwam er langs. Nu is elk van de vijf
   tabbladen vanaf het winkelscherm in een klik open.

   Geen enkele regel hieronder gebruikt een doorlopende animatie. Wat
   beweegt beweegt op een handeling: openen, wisselen van tabblad, of een
   instelling veranderen.
   ============================================================ */

.mpp-modal-card.is-wide { width: min(1060px, 100%); }

/* De tabbalk staat boven beide kolommen en niet in de linkerkolom. Reden: op
   375 valt de dialoog terug op een kolom, en dan hoort de navigatie boven de
   voorbeeldmail te blijven staan in plaats van eronder. Vandaar benoemde
   gebieden; op smal wisselt alleen de volgorde en niet de opbouw. */
.mpp-brandwrap { display: grid; grid-template-columns: minmax(0, 1fr) 336px; grid-template-areas: "tabs tabs" "kolom voorbeeld"; gap: 16px 20px; align-items: start; margin-top: 20px; }
.mpp-brandkolom { grid-area: kolom; min-width: 0; }
.mpp-brandform { margin-top: 0; }

.mpp-brandtabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--app-line); }
.mpp-brandtab { min-height: 36px; padding: 0 13px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(11,21,43,.6); color: #9ba7c1; font: 600 .74rem/1 Inter, system-ui, sans-serif; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.mpp-brandtab:hover { border-color: var(--app-line-2); color: #d6def3; }
.mpp-brandtab.is-active { border-color: rgba(127,104,255,.5); background: rgba(127,104,255,.14); color: #e4e9ff; }

.mpp-brandpaneel { display: none; }
.mpp-brandpaneel.is-active { display: grid; gap: 14px; }
/* Een rasterkolom met breedte auto neemt de min-content van zijn breedste kind
   aan, en de DNS-tabel in het afzenderpaneel is breder dan de kolom. Zonder de
   twee regels hieronder duwt die tabel het hele linkerpaneel tweehonderd pixels
   onder de voorbeeldmail. De tabel schuift al zijwaarts in zijn eigen omhulsel,
   dus de kolom hoort de breedte van de dialoog aan te nemen en niet die van zijn
   inhoud. Gemeten op 1440: kolom 843 terwijl het spoor 639 was. */
.mpp-brandform, .mpp-brandpaneel.is-active { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.mpp-brandpaneel.is-active > * { min-width: 0; }

.mpp-veldhint { margin: 6px 0 0; color: var(--app-muted); font-size: .73rem; line-height: 1.5; }
.mpp-veldhint b { color: inherit; }

/* Een aankruisvakje in een veld is ook een label, en .mpp-field label zet elk
   label in kleine hoofdletters in de monoletter. Zonder deze regel leest
   "Vertraagd" naast een vinkje als een veldkop in plaats van als een keuze.
   Gevonden bij het paneel Wanneer, waar de drie soorten in een veld staan. */
.mpp-field .mpp-check-option { margin-bottom: 0; color: #a8b3cc; font: 400 .8rem/1.4 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; }
.mpp-soortgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-theme="light"] .mpp-field .mpp-check-option { color: #4d5b78; }

.mpp-kleurrij { display: flex; gap: 8px; align-items: center; }
.mpp-kleurrij input[type="color"] { width: 52px; min-height: 42px; padding: 3px; flex: 0 0 auto; }
.mpp-kleurhex { flex: 1 1 auto; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; }

.mpp-uploadvak { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 13px 15px; border: 1px dashed var(--app-line-2); border-radius: 11px; background: rgba(11,21,43,.4); }
.mpp-uploadvak strong { display: block; color: #dbe3f5; font-size: .82rem; }
.mpp-uploadvak p { margin: 5px 0 0; color: var(--app-muted); font-size: .73rem; line-height: 1.5; }
.mpp-uploadvak .mpp-btn { flex: 0 0 auto; }

.mpp-afzenderkaart { padding: 15px 17px; border: 1px solid rgba(81,223,160,.28); border-radius: 12px; background: rgba(81,223,160,.07); }
.mpp-afzenderkaart.is-terugval { border-color: rgba(255,194,103,.32); background: rgba(255,194,103,.07); }
.mpp-afzenderkaart-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.mpp-afzenderregel { display: block; color: #e9efff; font: 600 .92rem/1.4 var(--mono); word-break: break-word; }
.mpp-afzenderkaart p { margin: 8px 0 0; color: #a8b3cc; font-size: .78rem; line-height: 1.6; }

.mpp-domeinblok { padding: 16px 17px; border: 1px solid var(--app-line); border-radius: 12px; background: rgba(6,13,29,.5); }
.mpp-domeinblok-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mpp-domeinblok-kop h3 { margin: 0; color: #e2e8f8; font-size: .9rem; font-weight: 700; }
.mpp-domein-naam { margin: 9px 0 0; color: #cbd5ef; font: 600 .84rem/1.4 var(--mono); }
.mpp-domein-uitleg { margin: 11px 0 0; color: var(--app-muted); font-size: .78rem; line-height: 1.62; }
.mpp-domein-uitleg b { color: #d6def3; }
.mpp-domein-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.mpp-domeinblok .mpp-field { margin-top: 13px; }
.mpp-domeinblok .mpp-table-wrap { margin-top: 13px; }

.mpp-dns td, .mpp-dns th { font-size: .72rem; }
.mpp-dns-soort { display: block; margin-top: 3px; color: var(--app-muted); font: 500 .64rem/1 var(--mono); letter-spacing: .05em; }
.mpp-dns-waarde { max-width: 260px; font-family: var(--mono); font-size: .68rem; word-break: break-all; }

.mpp-plaatshouders { padding: 13px 15px; border: 1px solid var(--app-line); border-radius: 11px; background: rgba(11,21,43,.4); }
.mpp-plaatshouderrij { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.mpp-plaatshouder { min-height: 30px; padding: 0 10px; border: 1px solid rgba(97,121,255,.32); border-radius: 7px; background: rgba(97,121,255,.1); color: #b9c4ff; font: 500 .72rem/1 var(--mono); cursor: pointer; transition: background .2s, border-color .2s; }
.mpp-plaatshouder:hover { border-color: rgba(97,121,255,.6); background: rgba(97,121,255,.2); }
.mpp-plaatshouders p { margin: 0; color: var(--app-muted); font-size: .73rem; line-height: 1.55; }

.mpp-schakelaars { padding: 14px 16px; border: 1px solid var(--app-line); border-radius: 11px; background: rgba(6,13,29,.5); }
.mpp-schakelaars ul { margin: 10px 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.mpp-schakelaars li { display: flex; gap: 9px; align-items: flex-start; color: #a8b3cc; font-size: .78rem; line-height: 1.5; }
.mpp-schakelaars li.is-uit { color: #ffc0cb; }
.mpp-schakelic { flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: rgba(81,223,160,.16); color: var(--app-green); font-size: .68rem; }
.mpp-schakelaars li.is-uit .mpp-schakelic { background: rgba(255,116,135,.16); color: var(--app-red); }
.mpp-schakelaars p { margin: 0; color: var(--app-muted); font-size: .74rem; line-height: 1.55; }

.mpp-regelblok { padding: 15px 17px; border: 1px solid rgba(127,104,255,.24); border-radius: 12px; background: rgba(127,104,255,.06); }
.mpp-regelblok h3 { margin: 0 0 10px; color: #e2e8f8; font-size: .88rem; font-weight: 700; }
.mpp-regelblok ul { margin: 0; padding-left: 17px; display: grid; gap: 8px; }
.mpp-regelblok li { color: #9fabc6; font-size: .78rem; line-height: 1.6; }
.mpp-regelblok b { color: #d6def3; }

.mpp-proefblok { display: grid; gap: 12px; padding: 15px 17px; border: 1px solid var(--app-line); border-radius: 12px; background: rgba(6,13,29,.5); }
.mpp-proefuitkomst:empty { display: none; }
.mpp-proefkaart { padding: 13px 15px; border: 1px solid var(--app-line-2); border-radius: 10px; background: rgba(11,21,43,.62); }
.mpp-proefkaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.mpp-proefkaart-kop strong { color: #e2e8f8; font-size: .82rem; }
.mpp-proefkaart dl { margin: 0; display: grid; gap: 5px; }
.mpp-proefkaart dl > div { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.mpp-proefkaart dt { flex: 0 0 auto; color: var(--app-muted); font: 600 .66rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.mpp-proefkaart dd { margin: 0; color: #cbd5ef; font-size: .76rem; text-align: right; word-break: break-word; }
.mpp-proefkaart p { margin: 11px 0 0; color: var(--app-muted); font-size: .73rem; line-height: 1.6; }
.mpp-proeflijst { margin: 0; padding-left: 17px; display: grid; gap: 5px; }
.mpp-proeflijst li { color: #ffc0cb; font-size: .77rem; line-height: 1.5; }

.mpp-metrics--klein { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mpp-metrics--klein .mpp-metric { padding: 12px 13px 14px; }
.mpp-metrics--klein .mpp-metric b { margin-top: 7px; font-size: 1.1rem; }
.mpp-mailtabel-lijst td { font-size: .74rem; vertical-align: top; }
.mpp-mailfout { display: block; margin-top: 4px; color: #ff9fae; font: 500 .68rem/1.45 var(--mono); word-break: break-word; }

/* De voorbeeldmail. Een envelop met een kopblok dat toont wat er in de
   inbox van de koper komt te staan, en daaronder de mail zelf in de
   kleuren van de winkel. Het kopblok is het stuk dat de afzenderregel
   bewijst; de mail eronder is het stuk dat de huisstijl bewijst. */
.mpp-brandvoorbeeld { grid-area: voorbeeld; position: sticky; top: 0; min-width: 0; }
.mpp-brandvoorbeeld-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mpp-brandvoorbeeld-kop > span:last-child { color: var(--app-muted); font-size: .7rem; }
.mpp-mailenvelop { overflow: hidden; border: 1px solid var(--app-line-2); border-radius: 12px; background: #0a1327; }
.mpp-mailhead { padding: 12px 14px; border-bottom: 1px solid var(--app-line); background: rgba(6,13,29,.7); }
.mpp-mailhead-row { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.mpp-mailhead-row span { flex: 0 0 74px; color: var(--app-muted); font: 600 .62rem/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.mpp-mailhead-row strong { min-width: 0; color: #dbe3f5; font-size: .74rem; font-weight: 600; word-break: break-word; }
.mpp-mailnote { padding: 10px 14px; border-bottom: 1px solid var(--app-line); background: rgba(81,223,160,.07); }
.mpp-mailnote.is-terugval { background: rgba(255,194,103,.08); }
.mpp-mailnote p { margin: 0; color: #b3bdd6; font-size: .71rem; line-height: 1.55; }
.mpp-mailbody { padding: 18px 14px 16px; }
.mpp-mailbody-kop { margin-bottom: 12px; text-align: center; }
.mpp-mailbalk { height: 3px; border-radius: 3px; }
.mpp-mailkaart { margin-top: 12px; padding: 16px 15px; border: 1px solid rgba(14,27,51,.1); border-radius: 12px; background: #fff; box-shadow: 0 4px 18px rgba(14,27,51,.06); }
.mpp-mailkaart h4 { margin: 0 0 9px; font-size: .94rem; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.mpp-mailkaart > p { margin: 0 0 12px; font-size: .73rem; line-height: 1.6; opacity: .85; }
.mpp-mailtabel { width: 100%; border-collapse: collapse; border: 1px solid; border-radius: 10px; }
.mpp-mailtabel td { padding: 0 12px; }
.mpp-mailknop { margin: 12px 0 10px; text-align: center; }
.mpp-mailknop span { display: inline-block; padding: 9px 18px; border-radius: 9px; color: #fff; font-size: .74rem; font-weight: 700; }
.mpp-mailsorry { margin: 0; font-size: .7rem; line-height: 1.55; text-align: center; opacity: .75; }
.mpp-mailsupport { margin: 10px 0 0; font-size: .68rem; font-weight: 600; text-align: center; }
.mpp-mailvoet { margin-top: 14px; text-align: center; }
.mpp-mailvoet p { margin: 0 0 4px; font-size: .64rem; line-height: 1.55; opacity: .5; }
.mpp-mailvoet-klein { opacity: .35 !important; }

/* De mailregel op de winkelkaart van CFG.01. */
.mpp-shopmail { display: grid; gap: 8px; margin: 12px 0; }
.mpp-shopchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mpp-shopchip { min-height: 26px; padding: 0 9px; border: 1px solid var(--app-line); border-radius: 6px; background: rgba(11,21,43,.6); color: #9ba7c1; font: 600 .66rem/1 var(--mono); letter-spacing: .03em; cursor: pointer; transition: border-color .2s, color .2s; }
.mpp-shopchip:hover { border-color: var(--app-line-2); color: #d6def3; }
.mpp-shopchip.is-ok { border-color: rgba(81,223,160,.32); color: #7fe6bb; }
.mpp-shopchip.is-warn { border-color: rgba(255,194,103,.34); color: var(--app-amber); }
.mpp-shopchip.is-uit { border-color: rgba(255,116,135,.32); color: #ff9fae; }
.mpp-shopmailregel { width: 100%; display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 9px 11px; border: 1px solid var(--app-line); border-radius: 9px; background: rgba(6,13,29,.5); color: #a8b3cc; font-family: inherit; font-size: .73rem; text-align: left; cursor: pointer; transition: border-color .2s; }
.mpp-shopmailregel:hover { border-color: var(--app-line-2); }
.mpp-shopmailregel.is-alert { border-color: rgba(255,116,135,.34); color: #ff9fae; }
.mpp-shopmailregel > span:last-child { flex: 0 0 auto; font-family: var(--mono); font-size: .66rem; }
.mpp-shopafzender { margin: 0; color: var(--app-muted); font-size: .68rem; line-height: 1.5; word-break: break-word; }

/* De kaart onder de winkels: de drie regels van de mailstroom plus de
   afzenderstaat van elke winkel naast elkaar. */
.mpp-mailregels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mpp-mailregel { padding: 13px 15px; border: 1px solid var(--app-line); border-radius: 11px; background: rgba(6,13,29,.5); }
.mpp-mailregel p { margin: 8px 0 0; color: #9fabc6; font-size: .76rem; line-height: 1.6; }
.mpp-mailregel b { color: #d6def3; }
.mpp-domeinstand { margin-top: 14px; }
.mpp-domeinstand-rij { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.mpp-domeinkaart { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid rgba(81,223,160,.26); border-radius: 9px; background: rgba(81,223,160,.06); color: inherit; font-family: inherit; text-align: left; cursor: pointer; transition: border-color .2s; }
.mpp-domeinkaart.is-terugval { border-color: rgba(255,194,103,.28); background: rgba(255,194,103,.06); }
.mpp-domeinkaart:hover { border-color: var(--app-line-2); }
.mpp-domeinkaart strong { color: #e2e8f8; font-size: .78rem; }
.mpp-domeinkaart span { color: var(--app-muted); font-size: .68rem; line-height: 1.45; }
.mpp-domeinkaart-adres { font-family: var(--mono); font-size: .62rem !important; word-break: break-all; }

:root[data-theme="light"] .mpp-brandtab { background: #fff; color: #4d5b78; }
:root[data-theme="light"] .mpp-brandtab.is-active { background: rgba(127,104,255,.1); color: #2b2160; }
:root[data-theme="light"] .mpp-uploadvak, :root[data-theme="light"] .mpp-plaatshouders, :root[data-theme="light"] .mpp-schakelaars,
:root[data-theme="light"] .mpp-domeinblok, :root[data-theme="light"] .mpp-proefblok, :root[data-theme="light"] .mpp-mailregel,
:root[data-theme="light"] .mpp-shopmailregel { background: #f4f6fb; }
:root[data-theme="light"] .mpp-uploadvak strong, :root[data-theme="light"] .mpp-domeinblok-kop h3, :root[data-theme="light"] .mpp-regelblok h3,
:root[data-theme="light"] .mpp-proefkaart-kop strong, :root[data-theme="light"] .mpp-domeinkaart strong, :root[data-theme="light"] .mpp-afzenderregel { color: #16223d; }
:root[data-theme="light"] .mpp-domein-uitleg b, :root[data-theme="light"] .mpp-regelblok b, :root[data-theme="light"] .mpp-mailregel b { color: #16223d; }
:root[data-theme="light"] .mpp-schakelaars li, :root[data-theme="light"] .mpp-regelblok li, :root[data-theme="light"] .mpp-mailregel p,
:root[data-theme="light"] .mpp-afzenderkaart p, :root[data-theme="light"] .mpp-shopmailregel, :root[data-theme="light"] .mpp-proefkaart dd { color: #4d5b78; }
:root[data-theme="light"] .mpp-schakelaars li.is-uit, :root[data-theme="light"] .mpp-shopmailregel.is-alert, :root[data-theme="light"] .mpp-proeflijst li { color: #b3324a; }
:root[data-theme="light"] .mpp-shopchip, :root[data-theme="light"] .mpp-brandtab, :root[data-theme="light"] .mpp-proefkaart { background: #fff; }
:root[data-theme="light"] .mpp-mailenvelop { background: #fff; }
:root[data-theme="light"] .mpp-mailhead { background: #f4f6fb; }
:root[data-theme="light"] .mpp-mailhead-row strong { color: #16223d; }
:root[data-theme="light"] .mpp-mailnote p { color: #4d5b78; }
:root[data-theme="light"] .mpp-mailfout { color: #b3324a; }

@media (max-width: 1120px) {
  .mpp-mailregels { grid-template-columns: minmax(0, 1fr); }
  .mpp-domeinstand-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .mpp-brandwrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "voorbeeld" "kolom"; }
  .mpp-brandvoorbeeld { position: static; }
  .mpp-metrics--klein { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mpp-soortgrid { grid-template-columns: minmax(0, 1fr); }
  .mpp-uploadvak { flex-direction: column; align-items: stretch; }
  .mpp-domeinstand-rij { grid-template-columns: minmax(0, 1fr); }
  .mpp-proefkaart dl > div { flex-direction: column; gap: 2px; }
  .mpp-proefkaart dd { text-align: left; }
  .mpp-shopmailregel { flex-direction: column; gap: 4px; }
}

/* Een vinger is geen muispijl, ook in deze dialoog. De tabbladen, de
   winkelchips en de plaatshouders zijn de drie nieuwe doelen die anders
   onder de tweeendertig px zouden blijven. */
@media (pointer: coarse), (max-width: 560px) {
  .mpp-brandtab { min-height: 44px; padding: 0 15px; }
  .mpp-shopchip { min-height: 36px; padding: 0 12px; }
  .mpp-plaatshouder { min-height: 40px; padding: 0 14px; }
  .mpp-shopmailregel { padding: 13px 12px; }
  .mpp-domeinkaart { padding: 14px 13px; }
}


/* ===== FIG.SYS · de storingsstrook, de statusketen en de statuscodes ======
   Dit blok staat bewust achteraan en vult alleen aan. myparcel-app.css is een
   gedeeld bestand waar meer dan een sessie tegelijk in werkt, dus hier wordt
   niets van wat erboven staat herschreven. De twee rijregels hieronder zijn de
   enige uitzondering en die is nodig, zie hierna.

   DE RIJVERDELING VAN HET WERKVLAK. .mpp-workspace stond op twee rijen: 70 px
   bovenbalk, de rest werkvlak. Met de storingsstrook erbij zijn het er drie.
   Zonder deze regel krijgt de strook die 70 px, schuift de bovenbalk in de
   1fr-rij en valt het werkvlak in een derde rij van auto, dus grotendeels
   buiten beeld. Nu: auto voor de strook, 70 px voor de balk, de rest voor het
   werkvlak. Bij compacte dichtheid 60 px, net als de regel hierboven.

   LEEG IS NUL HOOG. De strook blijft altijd een rooster-item, ook wanneer er
   niets te melden valt. Zonder inhoud staat hij op display:none via :empty,
   dus dan kost hij geen enkele pixel en schuift er niets op. Dat is precies
   wat de functie zelf doet: bij een geslaagde controle zonder storing en bij
   een mislukte controle verschijnt er geen balk.

   WAAROM ROOD PAS BIJ EEN STORING. De neutrale stand is bewust rustig: hij
   zegt alleen dat MyParcel bereikbaar is. Alarmkleur is gereserveerd voor de
   drie antwoorden die een echte storing betekenen. */
.mpp-workspace { grid-template-rows: auto 70px minmax(0,1fr); }
:root[data-density="compact"] .mpp-workspace { grid-template-rows: auto 60px minmax(0,1fr); }

.mpp-storing:empty { display: none; }
.mpp-storing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 13px; padding: 9px 26px; border-bottom: 1px solid var(--app-line); background: rgba(11,21,43,.6); color: #97a5c2; font: 500 11px/1.5 var(--mono); }
.mpp-storing strong { color: #dbe3f7; font: 600 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.mpp-storing .mpp-storing-code { color: #6d7c9c; font: 600 10px/1 var(--mono); letter-spacing: .09em; }
.mpp-storing .mpp-storing-reden { min-width: 0; }
.mpp-storing em { padding: 2px 7px; border: 1px solid rgba(255,194,103,.3); border-radius: 4px; background: rgba(255,194,103,.08); color: var(--app-amber); font: 600 9.5px/1.4 var(--mono); font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.mpp-storing .mpp-storing-knoppen { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.mpp-storing button { min-height: 26px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 6px; background: rgba(8,15,33,.5); color: inherit; font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; }
.mpp-storing button:hover { border-color: var(--app-line-2); color: #eef2ff; }
.mpp-storing button.mpp-storing-weg { width: 26px; padding: 0; font: 300 17px/1 Inter, system-ui, sans-serif; text-transform: none; }
.mpp-storing-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--app-green); box-shadow: 0 0 0 4px rgba(81,223,160,.09); }

.mpp-storing.is-ok { background: rgba(81,223,160,.05); }
.mpp-storing.is-storing { border-bottom-color: rgba(255,116,135,.3); background: rgba(255,116,135,.1); color: #ffb3bf; }
.mpp-storing.is-storing strong { color: #ffd2d9; }
.mpp-storing.is-storing .mpp-storing-code { color: #e39aa8; }
.mpp-storing.is-storing .mpp-storing-dot { background: var(--app-red); box-shadow: 0 0 0 4px rgba(255,116,135,.14); animation: mppKlop 1.9s ease-in-out infinite; }
.mpp-storing.is-storing button { border-color: rgba(255,116,135,.3); background: rgba(255,116,135,.07); }
.mpp-storing.is-storing button:hover { border-color: rgba(255,116,135,.55); color: #fff0f2; }
@keyframes mppKlop { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,116,135,.14); } 50% { box-shadow: 0 0 0 8px rgba(255,116,135,.03); } }
@media (prefers-reduced-motion: reduce) { .mpp-storing.is-storing .mpp-storing-dot { animation: none; } }

/* Op een smal scherm valt de zin die uitlegt wat de strook in productie doet
   weg. Hij staat voluit in het paneel achter de knop Controle, en die knop
   blijft op elke breedte staan. Zo blijft de strook op 375 een regel of twee
   in plaats van vier. */
@media (max-width: 720px) {
  .mpp-storing { padding: 8px 18px; gap: 5px 9px; }
  .mpp-storing .mpp-storing-reden { flex: 1 1 100%; }
  .mpp-storing .mpp-storing-knoppen { margin-left: 0; }
  /* Nagemeten op 375: met de reden erbij werd de neutrale regel vier regels
     hoog, en die reden zegt in die stand alleen dat er niets aan de hand is.
     Bij een storing blijft hij wel staan, want dan is juist de reden het
     bericht. */
  .mpp-storing.is-ok .mpp-storing-reden { display: none; }
  .mpp-storing button { min-height: 38px; padding: 0 14px; }
  .mpp-storing button.mpp-storing-weg { width: 38px; padding: 0; }
}

:root[data-theme="light"] .mpp-storing { background: rgba(255,255,255,.7); color: #5a6982; }
:root[data-theme="light"] .mpp-storing strong { color: #1b2943; }
:root[data-theme="light"] .mpp-storing.is-ok { background: #eef7f2; }
:root[data-theme="light"] .mpp-storing.is-storing { border-bottom-color: rgba(198,62,85,.22); background: #fdeef1; color: #9c3247; }
:root[data-theme="light"] .mpp-storing.is-storing strong { color: #86203a; }
:root[data-theme="light"] .mpp-storing.is-storing .mpp-storing-code { color: #a2596a; }
:root[data-theme="light"] .mpp-storing button { background: rgba(255,255,255,.75); }
:root[data-theme="light"] .mpp-storing button:hover { color: #12203c; }

/* De statusketen in de pakketlade. Een zending loopt langs oplopende codes,
   dus de keten leest van links naar rechts en de zijtakken staan eronder,
   want 8, 9, 10, 11 en 12 zijn geen volgende stap maar een andere afloop. */
.mpp-ketting { margin-top: 28px; }
.mpp-ketting h3 { margin: 0 0 5px; font-size: .86rem; letter-spacing: -.01em; }
.mpp-ketting p { margin: 0 0 13px; color: var(--app-muted); font-size: .78rem; }
.mpp-ketting-nu { display: flex; flex-wrap: wrap; gap: 6px 9px; margin: 0 0 14px; padding: 11px 13px; border: 1px solid var(--app-line-2); border-radius: 9px; background: rgba(85,117,255,.06); color: #c3cee6; font: 500 11px/1.5 var(--mono); }
.mpp-ketting-nu b { color: #eef2ff; font-weight: 600; }
.mpp-ketting-rij { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.mpp-ketting-rij li { flex: 1 1 88px; min-width: 88px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(11,21,43,.5); color: #6f7d9b; font-size: .73rem; }
.mpp-ketting-rij li span { display: block; color: #66748f; font: 600 9.5px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.mpp-ketting-rij li b { display: block; margin-top: 4px; font-weight: 600; }
/* Gehad staat er als woord bij en niet alleen als kleurverschil. Nagemeten in
   de lade: het verschil tussen een gehade en een komende stap was op kleur
   alleen niet te zien, en dan leest de keten als zeven gelijke vakjes. */
.mpp-ketting-rij li.is-gehad { border-color: rgba(85,117,255,.22); color: #94a2c3; }
.mpp-ketting-rij li.is-gehad b { color: #b8c4de; }
.mpp-ketting-rij li.is-gehad span::after { content: " · gehad"; color: #7f8db0; }
.mpp-ketting-rij li.is-nu { border-color: var(--app-line-2); background: linear-gradient(150deg, rgba(85,117,255,.16), rgba(127,104,255,.05)); color: #d5ddf2; }
.mpp-ketting-rij li.is-nu b { color: var(--app-text); }
.mpp-ketting-rij li.is-nu span::after { content: " · nu"; color: #8b95ff; }
.mpp-ketting-tak { margin: 0; color: var(--app-muted); font-size: .75rem; }
:root[data-theme="light"] .mpp-ketting-rij li { background: rgba(241,245,253,.76); color: #64738d; }
:root[data-theme="light"] .mpp-ketting-rij li.is-gehad b, :root[data-theme="light"] .mpp-ketting-rij li.is-nu b { color: #1b2943; }
:root[data-theme="light"] .mpp-ketting-nu { background: rgba(85,117,255,.07); color: #44536e; }
:root[data-theme="light"] .mpp-ketting-nu b { color: #1b2943; }

/* De twee panelen SYS.01 en SYS.02 lenen de dialoog, de tabel en de knoppen
   die de app al heeft. Alleen de dichtere tabelregel en het blok met de
   huidige stand zijn nieuw, want 22 codes in regels van 52 px maken een
   dialoog die niemand in een keer overziet. */
.mpp-sys-blok { margin-top: 18px; }
.mpp-sys-blok h3 { margin: 0 0 7px; font-size: .84rem; letter-spacing: -.01em; }
.mpp-sys-blok p { margin: 0 0 9px; color: var(--app-muted); font-size: .79rem; }
.mpp-sys-blok ul { margin: 0; padding-left: 17px; color: var(--app-muted); font-size: .79rem; }
.mpp-sys-blok li { margin-bottom: 7px; }
.mpp-sys-blok li b { color: #cfd8ea; font-weight: 600; }
:root[data-theme="light"] .mpp-sys-blok li b { color: #1b2943; }
.mpp-sys-nu { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--app-line-2); border-radius: 9px; background: rgba(85,117,255,.06); color: #c3cee6; font: 500 11px/1.6 var(--mono); }
.mpp-sys-nu b { color: #eef2ff; font-weight: 600; }
.mpp-sys-nu.is-storing { border-color: rgba(255,116,135,.34); background: rgba(255,116,135,.09); color: #ffb3bf; }
.mpp-sys-nu.is-storing b { color: #ffd2d9; }
:root[data-theme="light"] .mpp-sys-nu { background: rgba(85,117,255,.07); color: #44536e; }
:root[data-theme="light"] .mpp-sys-nu b { color: #1b2943; }
:root[data-theme="light"] .mpp-sys-nu.is-storing { background: #fdeef1; color: #9c3247; }
:root[data-theme="light"] .mpp-sys-nu.is-storing b { color: #86203a; }
.mpp-table--dicht th, .mpp-table--dicht td { height: 34px; font-size: .76rem; }
.mpp-table--dicht td.mpp-sys-leeg { color: #66748f; }
:root[data-theme="light"] .mpp-table--dicht td.mpp-sys-leeg { color: #7d8aa2; }

/* ===== FIN.02 · ABONNEMENT, PROEF EN RESPIJT ==========================
   Vier onderdelen: de balk boven het scherm, de plankaarten, de meter van
   het verbruik en de vier stappen van proef naar betalend.

   WAAROM DE BALK EEN EIGEN VORM HEEFT EN GEEN MELDING IS. In de draaiende
   app staan de proefbalk en de respijtbalk vastgezet boven aan het venster,
   met een eigen kleurverloop, en de respijtbalk is niet weg te klikken. Dat
   is geen sier: het is het enige wat een klant met een geweigerde betaling
   ziet voordat de toegang dichtgaat. Hier staat hij in de leesstroom van het
   scherm zelf, want in deze preview loopt er niets af, maar de vorm en het
   kleurverschil blijven.

   DE METER IS BEWUST EEN BALK EN GEEN GETAL. Vijf van tachtig zegt weinig,
   zes procent van je plafond zegt meteen dat er ruimte zat is. Bij een plan
   dat wel vol raakt vertelt dezelfde balk dat in één oogopslag.

   GOEDKOOP EN STIL: geen animatie, geen schaduwen die per rij herrekend
   worden, alleen randen en verlopen die de app al gebruikt. */
.mpp-abo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; padding: 13px 18px; border: 1px solid rgba(85,117,255,.28); border-radius: 12px; background: linear-gradient(135deg, rgba(85,117,255,.13), rgba(127,104,255,.06)); color: var(--app-text); font-size: .85rem; }
.mpp-abo-banner--alert { border-color: rgba(255,116,135,.3); background: linear-gradient(135deg, rgba(255,116,135,.13), rgba(255,116,135,.05)); }
.mpp-abo-banner .mpp-mono { margin-left: auto; color: #77869f; font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.mpp-abo-banner .mpp-btn { min-height: 32px; }

.mpp-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mpp-plan { padding: 18px; border: 1px solid var(--app-line); border-radius: 12px; background: rgba(10,20,42,.6); }
.mpp-plan.is-current { border-color: var(--app-line-2); background: linear-gradient(150deg, rgba(85,117,255,.13), rgba(10,20,42,.6)); }
.mpp-plan h3 { margin: 0; font-size: .9rem; letter-spacing: -.01em; }
.mpp-plan-prijs { display: block; margin: 11px 0 2px; font-size: 1.45rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mpp-plan-per { display: block; color: #74829f; font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.mpp-plan ul { margin: 13px 0 0; padding: 0; list-style: none; color: #93a0bd; font-size: .78rem; }
.mpp-plan li { padding: 6px 0; border-top: 1px solid var(--app-line); }

.mpp-gauge { display: grid; gap: 8px; }
.mpp-gauge-track { height: 9px; border-radius: 6px; background: rgba(146,161,211,.14); overflow: hidden; }
.mpp-gauge-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--app-blue), var(--app-violet)); }
.mpp-gauge-meta { display: flex; justify-content: space-between; gap: 12px; color: #77869f; font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.mpp-stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mpp-stap { padding: 15px 16px; border: 1px solid var(--app-line); border-radius: 11px; background: rgba(11,21,43,.5); }
.mpp-stap > span { color: #667595; font: 600 9.5px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.mpp-stap strong { display: block; margin: 7px 0 5px; color: #dce4f6; font-size: .83rem; }
.mpp-stap p { margin: 0; color: var(--app-muted); font-size: .77rem; line-height: 1.5; }
.mpp-stap.is-nu { border-color: var(--app-line-2); background: linear-gradient(150deg, rgba(85,117,255,.13), rgba(11,21,43,.5)); }

@media (max-width: 1320px) { .mpp-plans { grid-template-columns: repeat(2, 1fr); } .mpp-stappen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mpp-plans, .mpp-stappen { grid-template-columns: 1fr; } .mpp-abo-banner .mpp-mono { margin-left: 0; } }

:root[data-theme="light"] .mpp-abo-banner { color: #1b2943; }
:root[data-theme="light"] .mpp-abo-banner .mpp-mono, :root[data-theme="light"] .mpp-gauge-meta, :root[data-theme="light"] .mpp-plan-per { color: #687895; }
:root[data-theme="light"] .mpp-plan, :root[data-theme="light"] .mpp-stap { background: rgba(241,245,253,.76); }
:root[data-theme="light"] .mpp-plan.is-current { background: linear-gradient(150deg, rgba(85,117,255,.12), rgba(241,245,253,.76)); }
:root[data-theme="light"] .mpp-stap.is-nu { background: linear-gradient(150deg, rgba(85,117,255,.12), rgba(241,245,253,.76)); }
:root[data-theme="light"] .mpp-plan h3, :root[data-theme="light"] .mpp-stap strong { color: #1b2943; }
:root[data-theme="light"] .mpp-plan ul, :root[data-theme="light"] .mpp-stap p { color: #65738c; }
:root[data-theme="light"] .mpp-gauge-track { background: rgba(28,55,105,.1); }

/* ===== FIN.01 · de factuurcheck, en wat er verder bij deze ronde hoort =====
   Vier nieuwe vormen, allemaal opgebouwd uit wat er al stond: de sleepzone,
   het oordeelblok, de regel onder een tabel en de uitkomst van de naamzoek in
   het schadeformulier. Geen nieuwe kleuren, geen nieuwe hoeken, geen nieuwe
   schaduw; alleen bestaande variabelen. Zo blijft de app één ding.
   DE ZES EN DE VIJF TEGELS staan bewust in een eigen media query. De basis
   staat op vier kolommen en slaat onder 1120 px om naar twee; zonder die
   ondergrens zouden zes tegels op een telefoon zes strookjes van 50 px worden.
   De klasse is verdubbeld in de kiezer (.mpp-metrics.mpp-metrics--zes) zodat
   hij het wint van de basisregel zonder !important. */
.mpp-drop { display: block; padding: 26px 22px 28px; border: 2px dashed var(--app-line-2); border-radius: 14px; background: rgba(11,21,43,.45); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.mpp-drop:hover, .mpp-drop.is-over { border-color: rgba(133,155,255,.7); background: rgba(30,45,90,.5); }
.mpp-drop b { display: block; margin-top: 10px; font-size: .95rem; font-weight: 650; }
.mpp-drop span:not(.mpp-drop-ic) { display: block; margin-top: 5px; color: var(--app-muted); font-size: .78rem; }
.mpp-drop-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 34px; border: 1px solid var(--app-line-2); border-radius: 7px; background: rgba(85,117,255,.12); color: #b9c4ff; font: 600 11px/1 var(--mono); letter-spacing: .08em; }
.mpp-fc-status { margin: 10px 2px 0; color: var(--app-muted); font-size: .8rem; line-height: 1.6; }
.mpp-fc-status b { color: var(--app-text); font-weight: 600; }
.mpp-verdict { margin: 12px 0 0; padding: 14px 18px; border: 1px solid rgba(255,116,135,.28); border-radius: 12px; background: rgba(255,116,135,.08); color: var(--app-text); font-size: .84rem; line-height: 1.6; }
.mpp-verdict.is-ok { border-color: rgba(81,223,160,.28); background: rgba(81,223,160,.08); }
.mpp-note-line { margin: 10px 2px 0; color: var(--app-muted); font-size: .77rem; line-height: 1.65; }
.mpp-note-line b { color: var(--app-text); font-weight: 600; }
.mpp-legend { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.mpp-legend li { position: relative; padding-left: 15px; color: #9aa7c4; font-size: .78rem; line-height: 1.6; }
.mpp-legend li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--app-line-2); }
.mpp-naamuit { display: grid; gap: 5px; margin-top: 9px; }
.mpp-naamuit button { min-height: 38px; padding: 8px 11px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(10,20,42,.6); color: #a8b3cc; font-size: .78rem; text-align: left; cursor: pointer; transition: border-color .2s, color .2s; }
.mpp-naamuit button:hover { border-color: var(--app-line-2); color: #d3daff; }
.mpp-naamuit button strong { color: var(--app-text); font-weight: 600; }
@media (min-width: 1121px) {
  .mpp-metrics.mpp-metrics--zes { grid-template-columns: repeat(6, 1fr); }
  .mpp-metrics.mpp-metrics--vijf { grid-template-columns: repeat(5, 1fr); }
  .mpp-metrics--zes .mpp-metric { padding: 15px 15px 17px; }
  .mpp-metrics--zes .mpp-metric b { font-size: 1.42rem; }
  .mpp-metrics--zes .mpp-metric small { display: block; margin: 7px 0 0; }
}

/* Het soortfilter van het zoekvenster staat tussen de uitleg en de
   resultaten. Twee dingen die hier misgaan als je ze niet opschrijft:
   .mpp-pills zet display flex, en dat wint van het hidden-attribuut uit de
   browserstijl, dus zonder de regel hieronder blijft de rij staan in de
   historische stand waar hij niet hoort; en de bovenrand van de resultaten
   verdubbelt met de onderrand van deze rij, dus die zit alleen aan de
   bovenkant. */
#mpp-search-types { gap: 6px; padding: 0 16px 12px; }
.mpp-pills[hidden] { display: none; }

/* ============================================================
   DE ZES FUNCTIES DIE ER NOG NIET WAREN, EN DE KAART EROVERHEEN

   Alles hieronder hoort bij zes dingen die het draaiende platform wel
   kan en dit scherm niet liet zien: het schadedossier met een gerekende
   termijn, de notitie met zijn tijdstempel, het douanedocument, de
   dagelijkse digest, het beheer van een webshop, en de kaart met alle
   functies die dat allemaal binnen twee klikken zet.

   HET STAAT ACHTERAAN EN NIET TUSSENDOOR. Aan dit bestand wordt op meer
   plekken tegelijk gewerkt. Een blok achteraan botst niet met een blok
   verderop, en waar de volgorde telt wint deze omdat hij later staat.
   Geen enkele regel hieronder verandert iets aan wat er al stond.
   ============================================================ */

/* ---- Het label naast een metriekwaarde mag afbreken ---------
   Gemeten op 375: de tegel Uitbetaald liep zeven pixels buiten zijn eigen
   rand en het groene label 63,4% werd half afgesneden door de overflow van
   de tegel. De oorzaak zit in de opbouw: het label staat direct tegen de
   waarde aan zonder spatie ertussen, dus de regel heeft geen plek om af te
   breken en loopt gewoon door. De tegel Openstaand brak wel netjes af, en
   dat was toeval: daar zit de spatie ín het label ("3 dossiers").

   Met een flexregel op de waarde worden de waarde en het label twee
   onderdelen die naast elkaar staan zolang het past en onder elkaar zodra
   het niet past. De gatgrootte is dezelfde acht pixels die er als marge
   stond. Past het al, dan verandert er niets; dit grijpt alleen in op het
   moment dat het anders zou worden afgesneden. */
.mpp-metric b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.mpp-metric small { margin-left: 0; vertical-align: baseline; }

/* ---- De termijnbalk van een schadedossier -------------------
   Een dossier draagt alleen zijn meldatum; de balk laat zien hoeveel van
   de termijn er al verstreken is. De kleur zit op de buitenkant en niet
   op de vulling, zodat tekst en balk niet uit elkaar kunnen lopen: het
   zijn twee onderdelen van dezelfde kleurstand. */
.mpp-deadline { display: grid; gap: 6px; min-width: 132px; }
.mpp-deadline-track { height: 5px; border-radius: 10px; background: rgba(112,127,173,.16); overflow: hidden; }
.mpp-deadline-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f6cff, #7f68ff); transition: width .4s var(--ease); }
.mpp-deadline > span { color: #8b99b6; font: 600 10px/1 var(--mono); letter-spacing: .03em; white-space: nowrap; }
.mpp-deadline.is-warn .mpp-deadline-fill { background: linear-gradient(90deg, #d9a04a, var(--app-amber)); }
.mpp-deadline.is-warn > span { color: var(--app-amber); }
.mpp-deadline.is-alert .mpp-deadline-fill { background: linear-gradient(90deg, #d2566b, var(--app-red)); }
.mpp-deadline.is-alert > span { color: var(--app-red); }
.mpp-deadline-cel { min-width: 150px; }
/* In de tijdlijn van de pakketlade staat de balk onder een regel tekst en
   niet in een cel, dus daar heeft hij lucht boven zich nodig. */
.mpp-timeline-item .mpp-deadline { margin: 8px 0 6px; }
.mpp-deadlineblok { padding: 14px 16px; border: 1px solid var(--app-line); border-radius: 11px; background: rgba(11,21,43,.5); }
.mpp-deadlineblok .mpp-deadline { margin-top: 10px; }
.mpp-deadlineblok p { margin: 10px 0 0; color: var(--app-muted); font-size: .76rem; }

/* ---- Een voetregel onder een kaart of een venster ----------
   Voor de uitleg die bij een tabel hoort maar geen tabelrij is: waarom een
   getal is zoals het is. Niet als los kaartje, want dan gaat het zwerven. */
.mpp-cardnote { margin: 0; padding: 14px 20px 16px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .77rem; line-height: 1.65; }
.mpp-form .mpp-cardnote { padding-inline: 0; }
.mpp-subkop { margin: 6px 0 0; color: #dbe3f6; font-size: .83rem; font-weight: 700; letter-spacing: -.01em; }
.mpp-btn--gevaar { border-color: rgba(255,116,135,.4); color: #ffa3b1; }
.mpp-btn--gevaar:hover { border-color: var(--app-red); background: rgba(255,116,135,.12); color: #ffd3da; }
.mpp-conceptvak { min-height: 320px; font: 400 .78rem/1.7 var(--mono); white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* ---- De koppelsleutel en de synchronisatie op een shopkaart ---- */
.mpp-sleutelregel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 9px 11px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(8,16,34,.42); }
.mpp-sleutelregel span { color: #66748f; font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.mpp-sleutelregel b { color: #b9c4dd; font: 500 .76rem/1 var(--mono); letter-spacing: .08em; }
.mpp-syncregel { margin: 10px 0 0; color: #74829f; font-size: .73rem; line-height: 1.55; }
.mpp-syncregel.is-fout { color: #ffa3b1; }
.mpp-syncregel b { display: block; color: inherit; font-weight: 700; }
.mpp-shopknoppen { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-top: 14px; }
.mpp-shopknoppen .mpp-btn { width: auto; margin-top: 0; }

/* ---- De maximumteller in de koppeldialoog ------------------- */
.mpp-limietbalk { display: grid; gap: 9px; padding: 14px 16px; border: 1px solid var(--app-line); border-radius: 11px; background: rgba(11,21,43,.5); }
.mpp-limietbalk > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mpp-limietbalk strong { font-size: .84rem; }
.mpp-limietbalk span { color: var(--app-muted); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.mpp-limiet-track { height: 5px; border-radius: 10px; background: rgba(112,127,173,.16); overflow: hidden; }
.mpp-limiet-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f6cff, #7f68ff); }
.mpp-limietbalk .mpp-link { justify-self: start; font-size: .73rem; }
.mpp-limiet { padding: 16px 18px; border: 1px solid rgba(255,116,135,.3); border-radius: 12px; background: rgba(255,116,135,.07); }
.mpp-limiet h3 { margin: 11px 0 0; font-size: .95rem; letter-spacing: -.02em; }
.mpp-limiet p { margin: 8px 0 0; color: var(--app-muted); font-size: .78rem; line-height: 1.6; }

/* ---- De dagelijkse digest ----------------------------------
   Instellingen links, de mail zoals hij aankomt rechts. Onder de brede
   maat vallen ze onder elkaar, want twee kolommen van 250 px leest
   niemand. */
.mpp-digest-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 20px; align-items: start; }
.mpp-digest-grid > div { min-width: 0; display: grid; gap: 14px; align-content: start; }
.mpp-dg { border: 1px solid var(--app-line); border-radius: 12px; background: rgba(6,12,26,.5); overflow: hidden; }
.mpp-dg-kop { padding: 15px 17px; border-bottom: 1px solid var(--app-line); }
.mpp-dg-kop strong { display: block; font-size: .9rem; letter-spacing: -.015em; }
.mpp-dg-kop span { display: block; margin-top: 5px; color: var(--app-muted); font: 500 10px/1.4 var(--mono); }
.mpp-dg-tegels { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding: 15px 17px; }
.mpp-dg-tegel { padding: 12px 8px; border: 1px solid var(--app-line); border-radius: 9px; background: rgba(11,21,43,.55); text-align: center; }
.mpp-dg-tegel b { display: block; font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.mpp-dg-tegel span { display: block; margin-top: 7px; color: #71809c; font: 600 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.mpp-dg-tegel.is-warn b { color: var(--app-amber); }
.mpp-dg-tegel.is-alert b { color: var(--app-red); }
.mpp-dg-tabel td, .mpp-dg-tabel th { height: 40px; font-size: .76rem; }
.mpp-dg-rood { color: var(--app-red) !important; font-weight: 650; }
.mpp-dg-amber { color: var(--app-amber) !important; font-weight: 650; }
.mpp-dg-rest { margin: 0; padding: 11px 17px; border-top: 1px solid var(--app-line); color: #96a3c0; font-size: .78rem; }
.mpp-dg-voet { margin: 0; padding: 12px 17px 15px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .72rem; line-height: 1.6; }

/* ---- REG.01, de kaart met alle functies --------------------
   Een lijst van regels die allemaal even breed zijn en waarvan alleen de
   aanklikbare oplichten. De niet-aanklikbare zijn met opzet niet
   weggelaten en ook niet even mooi: je moet in een oogopslag zien wat er
   wel is en wat er nog niet is. */
.mpp-regzoek { min-width: 0; flex: 1 1 280px; max-width: 460px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 9px; background: rgba(11,21,43,.6); color: #6e7c9c; }
.mpp-regzoek input { width: 100%; min-height: 38px; border: 0; outline: 0; background: transparent; color: var(--app-text); font: 500 .8rem/1 Inter, system-ui, sans-serif; }
.mpp-regzoek:focus-within { border-color: rgba(97,121,255,.55); box-shadow: 0 0 0 3px rgba(97,121,255,.09); }
.mpp-reg-lijst { display: grid; }
.mpp-reg { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: start; gap: 13px; padding: 15px 20px; border: 0; border-bottom: 1px solid rgba(146,161,211,.08); background: transparent; color: inherit; font-family: inherit; text-align: left; }
.mpp-reg-lijst > *:last-child { border-bottom: 0; }
button.mpp-reg { cursor: pointer; transition: background .18s; }
button.mpp-reg:hover { background: rgba(91,113,218,.06); }
button.mpp-reg:focus-visible { outline: 2px solid #8d9cff; outline-offset: -2px; }
.mpp-reg-nr { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(86,116,255,.1); color: #96a6ff; font: 700 10px/1 var(--mono); }
.mpp-reg-tekst { min-width: 0; display: grid; gap: 5px; }
.mpp-reg-tekst strong { color: #e2e9f9; font: 600 .82rem/1.3 var(--mono); letter-spacing: -.01em; }
.mpp-reg-tekst strong i { color: #6d7c9c; font-style: normal; font-weight: 500; }
.mpp-reg-tekst > span { color: #8b99b8; font-size: .78rem; line-height: 1.6; }
.mpp-reg-waar { color: #6f7e9d !important; font: 500 10px/1.5 var(--mono) !important; text-transform: uppercase; letter-spacing: .05em; }
.mpp-reg-mist { color: #b79a6a !important; font-size: .75rem !important; line-height: 1.6 !important; }
.mpp-reg-merk { display: grid; justify-items: end; gap: 7px; }
.mpp-reg-merk em { color: #97a5ff; font: 600 10px/1 var(--mono); font-style: normal; opacity: 0; transition: opacity .18s; }
button.mpp-reg:hover .mpp-reg-merk em, button.mpp-reg:focus-visible .mpp-reg-merk em { opacity: 1; }
.mpp-reg.is-uit { opacity: .72; }
.mpp-reg.is-uit .mpp-reg-nr { background: rgba(146,161,211,.09); color: #7684a1; }
.is-verborgen { display: none !important; }

/* ---- Het douanedocument -------------------------------------
   Papier op het scherm: witte vellen op een donkere ondergrond, met de
   paginabreuk zichtbaar ertussen. Bij het printen valt alles buiten het
   document weg en verdwijnen de twee knoppen, precies zoals het origineel
   dat doet. Het vel zelf is altijd licht, ook in de nachtstand, want een
   douaneformulier op zwart papier bestaat niet. */
.mpp-doc { position: fixed; inset: 0; z-index: 220; overflow: auto; background: #10131c; color: #101828; }
.mpp-doc-balk { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(6,11,25,.96); color: #cbd5ec; }
.mpp-doc-balk strong { display: block; font-size: .88rem; }
.mpp-doc-balk span { display: block; margin-top: 4px; color: #8492b3; font: 500 10px/1.4 var(--mono); }
.mpp-doc-balk > div:last-child { display: flex; gap: 8px; }
.mpp-doc-papier { display: grid; gap: 0; justify-items: center; padding: 26px 16px 60px; }
.mpp-doc-vel { width: min(820px, 100%); padding: 40px 44px 46px; background: #ffffff; box-shadow: 0 18px 50px rgba(0,0,0,.35); font: 400 12px/1.55 Inter, system-ui, sans-serif; color: #101828; }
.mpp-doc-kop { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 14px; border-bottom: 2px solid #101828; }
.mpp-doc-kop strong { display: block; font-size: 19px; letter-spacing: -.02em; }
.mpp-doc-kop span { display: block; font-size: 11px; color: #475467; }
.mpp-doc-kop-rechts { text-align: right; }
.mpp-doc-kop-rechts .mpp-mono { color: #101828; font-size: 12px; }
.mpp-doc-blokken { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.mpp-doc-blokken h4 { margin: 0 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #475467; }
.mpp-doc-blokken p { margin: 0; font-size: 12px; line-height: 1.6; }
.mpp-doc-tabel, .mpp-doc-veld { width: 100%; margin-top: 20px; border-collapse: collapse; }
.mpp-doc-tabel th, .mpp-doc-tabel td, .mpp-doc-veld th, .mpp-doc-veld td { padding: 8px 10px; border: 1px solid #98a2b3; text-align: left; vertical-align: top; font-size: 12px; color: #101828; }
.mpp-doc-tabel th { background: #f2f4f7; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.mpp-doc-tabel th em, .mpp-doc-veld th em { display: block; margin-top: 3px; color: #667085; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.mpp-doc-tabel tfoot td { background: #f9fafb; font-weight: 700; }
.mpp-doc-veld th { width: 34%; background: #f9fafb; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.mpp-doc-veld th span { display: block; }
.mpp-doc-onder { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: end; gap: 12px; margin-top: 24px; padding-top: 14px; border-top: 1px solid #98a2b3; font-size: 11px; color: #475467; }
.mpp-doc-onder strong { color: #101828; font-size: 12px; }
.mpp-doc-onder i { display: block; height: 1px; background: #98a2b3; }
.mpp-doc-breuk { width: min(820px, 100%); display: flex; align-items: center; gap: 12px; padding: 16px 0; color: #7c8aab; font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; }
.mpp-doc-breuk::before, .mpp-doc-breuk::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px); }

/* ---- Kleine maten ------------------------------------------ */
@media (max-width: 1120px) {
  .mpp-digest-grid { grid-template-columns: minmax(0,1fr); }
  .mpp-dg-tegels { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .mpp-doc-vel { padding: 26px 22px 30px; }
  .mpp-doc-blokken, .mpp-doc-onder { grid-template-columns: 1fr; }
  .mpp-reg { grid-template-columns: 28px minmax(0,1fr); padding: 14px 16px; }
  .mpp-reg-merk { grid-column: 2; justify-items: start; }
  .mpp-shopknoppen { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mpp-deadline-cel { min-width: 130px; }
  .mpp-doc-balk { padding: 10px 14px; }
  .mpp-doc-balk > div:last-child { width: 100%; }
  .mpp-doc-balk .mpp-btn { flex: 1; }
}
/* De knoppen zijn een vinger groot op aanraakschermen, net als de rest.

   DE VOET VAN DE ZIJBALK STOND OP 33 EN 34 PIXELS, gemeten op 375 met
   aanraakemulatie aan. Dat is boven de 32 waar je hem helemaal misloopt maar
   onder de 44 die dit bestand elders wel aanhoudt, en er staan sinds vandaag
   twee ingangen bij die op een telefoon de enige weg zijn: het wallboard en de
   dagelijkse digest. Alleen de doos wordt groter; de tekst, de kleur en de
   volgorde blijven wat ze waren. De zijbalk scrollt al, dus de extra hoogte
   duwt niets uit beeld. */
@media (pointer: coarse), (max-width: 560px) {
  .mpp-regzoek input { min-height: 44px; }
  .mpp-sidebar-foot button, .mpp-sidebar-foot a { min-height: 44px; align-items: center; padding-block: 11px; }
}

/* ---- Dagstand ----------------------------------------------
   Alleen de vlakken die in de nachtstand hun eigen donkere achtergrond
   dragen. Het papier van het douanedocument staat er niet bij: dat is in
   beide standen wit, dat is de hele bedoeling. */
:root[data-theme="light"] .mpp-deadline-track,
:root[data-theme="light"] .mpp-limiet-track { background: rgba(35,54,96,.12); }
:root[data-theme="light"] .mpp-deadline > span,
:root[data-theme="light"] .mpp-syncregel,
:root[data-theme="light"] .mpp-cardnote,
:root[data-theme="light"] .mpp-reg-tekst > span,
:root[data-theme="light"] .mpp-dg-voet { color: #56637d; }
:root[data-theme="light"] .mpp-reg-waar { color: #6a7690 !important; }
:root[data-theme="light"] .mpp-reg-mist { color: #8a6a2f !important; }
:root[data-theme="light"] .mpp-reg-tekst strong,
:root[data-theme="light"] .mpp-subkop,
:root[data-theme="light"] .mpp-limiet h3,
:root[data-theme="light"] .mpp-dg-kop strong,
:root[data-theme="light"] .mpp-sleutelregel b { color: #16223d; }
:root[data-theme="light"] .mpp-deadlineblok,
:root[data-theme="light"] .mpp-limietbalk,
:root[data-theme="light"] .mpp-sleutelregel,
:root[data-theme="light"] .mpp-dg,
:root[data-theme="light"] .mpp-dg-tegel,
:root[data-theme="light"] .mpp-regzoek { background: #f7f9fd; }
:root[data-theme="light"] .mpp-reg-nr { background: rgba(85,117,255,.1); color: #4257c9; }
:root[data-theme="light"] button.mpp-reg:hover { background: rgba(91,113,218,.06); }
:root[data-theme="light"] .mpp-doc { background: #dfe5f0; }
:root[data-theme="light"] .mpp-doc-balk { background: rgba(255,255,255,.97); border-bottom-color: rgba(35,54,96,.14); color: #24334f; }
:root[data-theme="light"] .mpp-doc-breuk { color: #64748b; }
:root[data-theme="light"] .mpp-doc-breuk::before, :root[data-theme="light"] .mpp-doc-breuk::after { background: repeating-linear-gradient(90deg, rgba(35,54,96,.3) 0 6px, transparent 6px 12px); }

/* ---- Printen ------------------------------------------------
   De originele functie zet zijn printknop bij het printen op display none
   en laat verder alleen het document staan. Dat is hier hetzelfde, met
   een verschil: daar is het document een los bestand en hier ligt het
   over de app heen, dus alles eronder moet weg. Staat er geen document
   open, dan verandert er niets aan het printen van de pagina zelf. */
@media print {
  body:has(.mpp-doc) > *:not(.mpp-doc) { display: none !important; }
  body:has(.mpp-doc) { background: #ffffff; }
  .mpp-doc { position: static; overflow: visible; background: #ffffff; }
  .mpp-doc-balk, .mpp-doc-uit { display: none !important; }
  .mpp-doc-papier { padding: 0; }
  .mpp-doc-vel { width: 100%; padding: 0; box-shadow: none; break-inside: avoid; }
  /* De paginabreuk uit het origineel: de handelsfactuur begint op een
     nieuw vel. Het streepje met het woord erop is alleen op het scherm. */
  .mpp-doc-breuk { display: none; break-after: page; }
  @page { margin: 14mm; }
}

/* Dezelfde vier vormen in de dagstand. Dit bestand zet de kleuren van de
   nachtstand als basis en overschrijft ze per onderdeel voor de dagstand; wie
   dat overslaat krijgt een donkere vlek op een licht scherm. De sleepzone, de
   naamresultaten en de uitlegregels stonden op vaste donkere waarden en horen
   daarom in deze lijst; de tegels, pillen en tabellen erboven waren al
   geregeld. */
:root[data-theme="light"] .mpp-drop { background: rgba(255,255,255,.72); }
:root[data-theme="light"] .mpp-drop:hover, :root[data-theme="light"] .mpp-drop.is-over { background: rgba(233,239,255,.9); }
:root[data-theme="light"] .mpp-drop-ic { background: rgba(78,94,204,.1); color: #3f4fa8; }
:root[data-theme="light"] .mpp-legend li { color: #5b6a86; }
:root[data-theme="light"] .mpp-naamuit button { background: rgba(255,255,255,.72); color: #5b6a86; }
:root[data-theme="light"] .mpp-naamuit button:hover { color: #1a2946; }
:root[data-theme="light"] .mpp-verdict { border-color: rgba(198,62,85,.22); background: rgba(198,62,85,.07); }
:root[data-theme="light"] .mpp-verdict.is-ok { border-color: rgba(22,134,90,.22); background: rgba(22,134,90,.07); }

/* ===== FIG.SORT · de aanklikbare kolomkop ===============================
   De kop blijft eruitzien als een kop en niet als een knop: dezelfde maat,
   dezelfde letter, dezelfde kleur. Alleen het pijltje ernaast verraadt dat
   er iets te doen valt, en dat pijltje staat er altijd, ook in rust. Een
   knop die pas bij aanwijzen verschijnt is op een aanraakscherm onvindbaar.
   De actieve kolom licht op, zodat je in één blik ziet waarop de tabel
   staat; de letterlijke stand staat daarnaast in de kop van de kaart. */
.mpp-sortkop { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.mpp-sortkop span { font-size: 11px; line-height: 1; opacity: .38; transition: opacity .18s ease; }
.mpp-sortkop:hover { color: #b9c4e2; }
.mpp-sortkop:hover span { opacity: .8; }
.mpp-sortkop.is-actief { color: #8b95ff; }
.mpp-sortkop.is-actief span { opacity: 1; }
.mpp-sortkop:focus-visible { outline: 2px solid #8b95ff; outline-offset: 3px; border-radius: 2px; }
:root[data-theme="light"] .mpp-sortkop:hover { color: #35415e; }
:root[data-theme="light"] .mpp-sortkop.is-actief { color: #3f4fa8; }