:root {
  /* Legacy-tokens zijn nu ALIASSEN op de --mm-*-laag (één bron-van-waarheid).
     Hierdoor erven alle bestaande var(--brand)/var(--radius-*)/var(--shadow-*)-
     gebruikers automatisch de strakke Supabase-waarden. Paars blijft. */
  --bg: var(--mm-bg);
  --surface: var(--mm-surface);
  --surface-strong: var(--mm-surface);
  --text: var(--mm-text);
  --text-soft: var(--mm-text-soft);
  --border: var(--mm-border);
  --border-strong: var(--mm-border-strong);
  --brand: var(--mm-primary);
  --brand-dark: var(--mm-primary-hover);
  --brand-soft: var(--mm-primary-soft);
  --accent: var(--mm-accent);
  --danger: var(--mm-danger);
  --success: var(--mm-success);
  --warning: var(--mm-warning);
  --shadow-sm: var(--mm-shadow-sm);
  --radius-xl: var(--mm-r-lg);   /* 24px → 10px */
  --radius-lg: var(--mm-r-lg);   /* 18px → 10px */
  --radius-md: var(--mm-r-md);   /* 14px → 6px  */
  --radius-sm: var(--mm-r-md);   /* 10px → 6px  */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}

body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(119, 208, 180, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(97, 78, 191, 0.16), transparent 30%),
    linear-gradient(180deg, var(--brand) 0, var(--brand) 56px, var(--bg) 56px, var(--bg) calc(100% - 84px), var(--brand) calc(100% - 84px), var(--brand) 100%);
  background-attachment: fixed;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 56px 0 84px;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(99, 84, 174, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 84, 174, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.06));
  z-index: 0;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.modal-open {
  overflow: hidden;
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid rgba(63, 47, 135, 0.42);
  outline-offset: 3px;
}

.login-screen, .app-shell {
  width: min(1460px, calc(100% - 32px));
  margin: 0 auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
  position: relative;
  z-index: 1;
}



.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 36px 0;
}



.app-shell {
  display: grid;
  grid-template-columns: clamp(300px, 26vw, 360px) minmax(0, 1fr);
  gap: 22px;
  min-height: 100vh;
  padding: 28px 0 42px;
}

.single-page-shell {
  grid-template-columns: 1fr;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.login-card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg);
  box-shadow: var(--mm-shadow-sm);
  transition:
    transform 180ms var(--mm-ease),
    box-shadow 180ms var(--mm-ease),
    border-color 180ms var(--mm-ease);
  position: relative;
}

.login-card {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  overflow: hidden;
}

.login-art {
  padding: 42px;
  color: #fff;
  background:
    linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 72%, #51409e 100%);
}

.login-art h1 {
  margin: 0;
  font-size: 2.8rem;
  line-height: 1;
}

.login-art p {
  max-width: 460px;
  font-size: 1rem;
  line-height: 1.6;
}





.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  padding: 38px;
}

.repair-logo {
  display: block;
  height: auto;
  width: min(172px, 100%);
  aspect-ratio: 900 / 320; /* logo-verhouding → hoogte gereserveerd vóór laden (geen CLS-shift) */
  max-height: 68px;
  object-fit: contain;
  margin-bottom: 14px;
}

.login-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 280px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  margin-bottom: 18px;
  box-shadow: none;
}

.login-logo {
  display: block;
  width: 100%;
  height: auto;
}

.section-label {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 2.5vw, 2.9rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

h2 {
  font-size: 1.55rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.muted {
  margin: 8px 0 0;
  color: var(--text-soft);
  line-height: 1.55;
}

/* Decoratieve sheen-overlay (::after) + hoek-cirkel (::before) verwijderd
   — Supabase-pass: strakke vlakke vlakken i.p.v. glans/gradient. */


.main-content > *:nth-child(2) {
  animation-delay: 60ms;
}

.main-content > *:nth-child(3) {
  animation-delay: 110ms;
}

.notice {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Hoekmeldingen: één stapel rechtsonder (app/(app)/layout.tsx), waarin de
   dinsdag-RMA-melding en de printagent-melding renderen. Tot 2026-11-09 stond
   elke melding zelf fixed, en lagen ze precies over elkaar.
   z-index 120: boven de nav (95) en z'n toggle (96), maar ONDER de modals (999),
   zodat een popup nooit half achter deze melding verdwijnt. (Niet de dode
   .feedback-widget-group hergebruiken: die staat op 9000 en zou er juist
   overheen liggen.) De stapel zelf vangt geen klikken: leeg mag hij niets
   blokkeren. */
.mm-hoekmeldingen {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  width: min(360px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.mm-hoekmeldingen > * { pointer-events: auto; max-width: 100%; }
.mm-hoek-melding {
  width: 360px;
  max-width: 100%;
  margin-top: 0;
  background: var(--mm-surface);
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow-lg);
  animation: modal-enter 180ms ease both;
}
/* Ingeklapte melding (printagent): een smal balkje dat bij een klik openvouwt. */
.mm .mm-hoek-balk {
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--mm-border-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  animation: modal-enter 180ms ease both;
}
.mm .mm-hoek-balk > svg { margin-top: 0; }
/* Mobiel: over de volle breedte zodat de knoppen tapbaar blijven, en hoger dan
   de sticky "+ Taak"-knop van het takenbord (.mm-mobiel-taak: 48px op 12px). */
@media (max-width: 640px) {
  .mm-hoekmeldingen {
    right: 12px;
    left: 12px;
    bottom: 72px;
    width: auto;
    align-items: stretch;
  }
  .mm-hoek-melding { width: 100%; }
}

.field-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
}

.m360-status-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.m360-status-button:disabled {
  cursor: default;
}

.m360-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 12px;
  background: #cfd6eb;
}

.m360-status-dot.status-idle {
  background: #8c7be0;
  box-shadow: 0 0 0 5px rgba(140, 123, 224, 0.14);
}

.m360-status-dot.status-ok {
  background: #2b9b72;
  box-shadow: 0 0 0 5px rgba(43, 155, 114, 0.16);
}

.m360-status-dot.status-missing {
  background: #b8860b;
  box-shadow: 0 0 0 5px rgba(184, 134, 11, 0.14);
}

.m360-status-dot.status-error {
  background: #c55454;
  box-shadow: 0 0 0 5px rgba(197, 84, 84, 0.14);
}

.m360-status-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.m360-tests-list {
  margin: 12px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m360-tests-list li {
  color: var(--text-soft);
}

input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input:disabled {
  background: #f3f5fb;
  color: var(--text-soft);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(63, 47, 135, 0.55);
  box-shadow: 0 0 0 4px rgba(63, 47, 135, 0.15);
}

/* Per-actie kleurcodering */









.button {
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

.button {
  padding: 11px 16px;
  font-weight: 700;
  line-height: 1.15;
  border-radius: 999px;
}

.button-full {
  width: 100%;
}

.button-primary {
  background: linear-gradient(135deg, var(--accent), #9ae2cb);
  color: #0d3a2f;
  box-shadow: 0 6px 14px rgba(76, 177, 143, 0.18);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-dark);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(10px);
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.status-pending {
  color: #8f6807;
  background: rgba(189, 123, 18, 0.12);
  border-color: rgba(189, 123, 18, 0.12);
}

.status-completed {
  color: var(--success);
  background: rgba(25, 140, 103, 0.12);
  border-color: rgba(25, 140, 103, 0.12);
}

.status-neutral {
  color: var(--brand);
  background: rgba(63, 47, 135, 0.1);
  border-color: rgba(63, 47, 135, 0.1);
}

.status-danger {
  color: #ffffff;
  background: var(--danger);
  border-color: var(--danger);
}

.ecommerce-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.rma-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.rma-photo-item {
  position: relative;
  margin: 0;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rma-photo-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #111;
  display: block;
}

.rma-photo-item figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.7);
}

.rma-photo-item figcaption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.label-preview-main,
.label-preview-qr {
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--border);
  padding: 16px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.label-preview-main {
  word-break: break-word;
}

.label-preview-qr {
  align-items: center;
}

.label-preview-qr .button {
  width: 100%;
}

.label-preview-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  position: relative;
  padding-bottom: 22px;
}

.label-preview-number {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
}

.label-preview-model {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1d2450;
}

.label-preview-repair {
  font-size: 0.95rem;
  font-weight: 700;
  color: #4a4f71;
}

.label-preview-notes {
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height: 1.2;
}

.label-preview-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.qr-code-text {
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.05;
}

.app-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(19, 16, 56, 0.38);
  backdrop-filter: blur(6px);
}

.app-modal-overlay[hidden] {
  display: none;
}

.app-modal {
  width: min(100%, 460px);
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(23, 26, 57, 0.24);
  animation: modal-enter 180ms ease both;
}

.app-modal h2 {
  margin-bottom: 8px;
}

.error-text {
  color: var(--danger);
  margin: 0;
  font-weight: 700;
}

.small-text {
  font-size: 0.86rem;
}

.tiny-text {
  font-size: 0.82rem;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .login-card {
    flex-direction: column;
  }
}

@media (max-width: 920px) {
  .label-preview {
    grid-template-columns: 1fr;
  }

  
}

@media (max-width: 720px) {
  .login-screen, .app-shell {
    width: calc(100% - 20px);
  }

  .login-art, .login-form {
    padding: 16px;
  }

  .label-preview {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Leaderboard polish ---------- */




/* ---------- Role visibility helpers ---------- */
/* Default-hide every role-gated element until the role has been resolved.
   Prevents flash-of-management-content while the profile is still loading. */
body:not(.role-resolved) [data-role="management"],
body:not(.role-resolved) [data-role="reparateur-readonly"],
body:not(.role-resolved) [data-role="ecommerce"] {
  visibility: hidden;
}

body:not(.role-resolved) [data-role="management"] {
  display: none !important;
}

body.role-reparateur [data-role="management"] {
  display: none !important;
}

body.role-reparateur .repair-accordion-management {
  display: none !important;
}

/* =========================================================================
   TICKETS PAGE
   ========================================================================= */

/* =========================================================================
   GLOBAL POLISH
   - Accessible focus rings on all interactive elements
   - Smoother transitions
   - Empty state visual treatment
   ========================================================================= */
:focus-visible {
  outline: 2px solid rgba(63, 47, 135, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

.button:focus-visible {
  outline: 2px solid rgba(63, 47, 135, 0.7);
  outline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid rgba(63, 47, 135, 0.6);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* Smooth shell entry */
.login-screen, .app-shell {
  animation: shell-enter 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shell-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login-screen, .app-shell {
    animation: none !important;
  }
}

/* =========================================================================
   LOGIN PAGE MOBILE
   ========================================================================= */
@media (max-width: 900px) {
  .login-card {
    grid-template-columns: 1fr;
    width: min(560px, 100%);
  }

  .login-art {
    padding: 28px;
    text-align: left;
  }

  .login-art h1 {
    font-size: 2rem;
  }

  .login-art p {
    font-size: 0.95rem;
  }

  .login-form {
    padding: 26px;
  }

  

  
}

@media (max-width: 640px) {
  .login-screen {
    padding: 12px 0;
    align-items: start;
  }

  .login-card {
    width: 100%;
    border-radius: 18px;
  }

  .login-art {
    padding: 20px 18px;
  }

  .login-art h1 {
    font-size: 1.55rem;
    line-height: 1.15;
  }

  .login-art p {
    font-size: 0.88rem;
    margin: 6px 0 0;
  }

  

  .login-logo-wrap {
    max-width: 180px;
    margin-bottom: 12px;
  }

  .login-logo {
    max-height: 44px;
    object-fit: contain;
  }

  .login-form {
    padding: 18px;
    gap: 12px;
  }

  .login-form h2 {
    font-size: 1.3rem;
    margin: 4px 0;
  }

  .login-form .section-label {
    margin: 0;
  }

  .login-form .muted {
    font-size: 0.85rem;
    margin: 0;
  }

  .login-form .button {
    padding: 13px 16px;
    font-size: 0.95rem;
  }

  

  .error-text {
    font-size: 0.88rem;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.18);
    color: #b00020;
  }
}

@media (max-width: 380px) {
  .login-art h1 {
    font-size: 1.35rem;
  }

  .login-art p {
    font-size: 0.82rem;
  }

  .login-form {
    padding: 14px;
  }
}

















/* =========================================================================
   MOBILE RESPONSIVE LAYER
   Breakpoints: 900px (tablet) / 640px (phone) / 420px (small phone)
   ========================================================================= */

/* Touch-friendly targets across all small screens */
@media (max-width: 900px) {
  .button {
    min-height: 40px;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  body {
    -webkit-text-size-adjust: 100%;
  }
}

/* --- Phone (≤ 640px): stack everything, tables → cards --- */
@media (max-width: 640px) {
  /* Shell + spacing */
  .login-screen, .app-shell {
    width: calc(100% - 12px);
    margin: 8px auto;
    padding: 0;
  }

  .login-art, .login-form {
    padding: 12px;
    border-radius: 14px;
  }

  /* Modal sizing */
  .app-modal {
    width: calc(100% - 20px);
    margin: 10px;
    padding: 18px;
  }

  /* Section labels smaller */
  .section-label {
    font-size: 0.7rem;
  }

  /* Login page */
  .login-form,
  .login-art {
    padding: 16px;
  }
}

/* --- Small phone (≤ 420px): even tighter --- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Smooth, slick animations ---------- */
@keyframes mm-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mm-pulse-soft {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(63, 47, 135, 0.18); }
  50%      { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(63, 47, 135, 0); }
}

.button {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms ease,
    color 220ms ease,
    filter 220ms ease;
}

.button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(76, 177, 143, 0.22);
}

/* ===========================================================================
   Docs / handleiding
   =========================================================================== */

/* ---------- Moeilijkheidspil (model) ---------- */
/* Moeilijkheidspil onder de modelnaam in de tabel: eigen regel + lucht erboven. */

/* ---------- On-hold status ---------- */
.status-warning {
  color: #8f6807;
  background: rgba(189, 123, 18, 0.18);
  border-color: rgba(189, 123, 18, 0.32);
}

/* ---------- Row removal animation ---------- */

/* =====================================================================
   MOBIELMAKERS PORTAL — BOLD LIGHT THEME (2026)
   ---------------------------------------------------------------------
   Zelfde bold/geometrische karakter als de oude dark variant, maar nu in
   een licht palet rond mobielmakers.nl. Paars #3f2f87 als hoofdkleur,
   teal #77d0b4 als accent, witte canvas met subtiele paars-getinte
   lavendel-grijzen voor surfaces.
   ===================================================================== */

:root {
  /* Vertelt de browser welk thema de pagina is, zodat zijn éigen onderdelen
     (scrollbars, checkbox-vinkjes, select-popups, datumkiezer) meekleuren.
     Zie de dark-tegenhanger hieronder voor de bug die dit oploste. */
  color-scheme: light;

  /* ---- Light surfaces (paars-getint off-white) ---- */
  --mm-bg:           #faf8fd;   /* canvas */
  --mm-surface:      #ffffff;   /* cards */
  --mm-surface-2:    #f3eff9;   /* hover / subtle */
  --mm-surface-3:    #e8e1f3;   /* iets dieper */

  /* ---- Borders ---- */
  --mm-border:        rgba(63, 47, 135, 0.1);
  --mm-border-strong: rgba(63, 47, 135, 0.2);
  --mm-border-bright: rgba(63, 47, 135, 0.4);

  /* ---- Text ---- */
  --mm-text:        #1a1438;   /* deep purple-black */
  --mm-text-soft:   #4a4068;   /* muted purple-grey */
  --mm-text-muted:  #6e6488;   /* lighter */
  --mm-text-faint:  #a59fbb;   /* placeholders */
  --mm-text-inverse: #ffffff;

  /* ---- Brand: MM purple (echte mobielmakers.nl tint) ---- */
  --mm-primary:        #3f2f87;
  --mm-primary-hover:  #34256e;
  --mm-primary-active: #2a1d59;
  --mm-primary-soft:   rgba(63, 47, 135, 0.08);
  --mm-primary-glow:   rgba(63, 47, 135, 0.28);

  /* ---- Accent: MM teal ---- */
  --mm-accent:        #4cb18f;   /* iets donkerder dan #77d0b4 voor contrast op licht */
  --mm-accent-bright: #77d0b4;
  --mm-accent-dark:   #3e9b78;
  --mm-accent-soft:   rgba(76, 177, 143, 0.12);
  --mm-accent-glow:   rgba(76, 177, 143, 0.3);

  /* ---- Semantic ---- */
  --mm-danger:        #d4456c;
  --mm-danger-hover:  #b93a5c;
  --mm-danger-soft:   rgba(212, 69, 108, 0.1);
  --mm-warning:       #c47a18;
  --mm-warning-soft:  rgba(196, 122, 24, 0.1);
  --mm-success:       var(--mm-accent);
  --mm-success-soft:  var(--mm-accent-soft);

  /* ---- Shadows: zacht maar zichtbaar ---- */
  --mm-shadow-sm:  0 1px 0 rgba(63, 47, 135, 0.04), 0 2px 8px rgba(63, 47, 135, 0.06);
  --mm-shadow-md:  0 4px 12px rgba(63, 47, 135, 0.08), 0 2px 4px rgba(63, 47, 135, 0.04);
  --mm-shadow-lg:  0 24px 48px -16px rgba(63, 47, 135, 0.18), 0 8px 20px rgba(63, 47, 135, 0.1);

  /* ---- Radii ---- */
  --mm-r-sm:  4px;
  --mm-r-md:  6px;
  --mm-r-lg:  10px;
  --mm-r-xl:  14px;

  /* ---- Easing ---- */
  --mm-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --mm-ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --mm-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- Consolidatie-toevoegingen (Supabase-pass) ---- */
  --mm-r-pill:         999px;                          /* alleen dots/avatars/badges, nooit knoppen */           /* neutrale rand waar paars te zwaar is */ /* zachte paarse focus-ring (was oranje) */
}

/* =====================================================================
   DARKMODE — zelfde structuur als bovenstaand :root, alléén de kleuren.
   Geactiveerd via data-theme="dark" op <html> (zie ThemeToggle.tsx); geen
   automatische prefers-color-scheme — bewuste keuze, geen systeem-default.
   Specificiteit van html[data-theme="dark"] (0,1,1) wint altijd van :root
   (0,1,0), volgorde in het bestand doet er dus niet toe.
   ===================================================================== */
html[data-theme="dark"] {
  /* Zonder dit tekende Windows/Chrome de sidebar-scrollbar (en checkbox-
     vinkjes, select-popups) spierwit midden in de donkere modus: de
     variabelen hieronder kleuren alleen ónze elementen, browser-eigen
     onderdelen kijken uitsluitend naar color-scheme (bugreport 2026-09-11). */
  color-scheme: dark;

  /* ---- Dark surfaces (paars-getinte diepte i.p.v. zuiver zwart) ---- */
  --mm-bg:           #14101f;
  --mm-surface:      #1c1730;
  --mm-surface-2:    #241d3a;
  --mm-surface-3:    #2d2548;

  /* ---- Borders ---- */
  --mm-border:        rgba(255, 255, 255, 0.08);
  --mm-border-strong: rgba(255, 255, 255, 0.16);
  --mm-border-bright: rgba(255, 255, 255, 0.32);

  /* ---- Text ---- */
  --mm-text:        #f1eefa;
  --mm-text-soft:   #c8c1dc;
  --mm-text-muted:  #9c92b8;
  --mm-text-faint:  #6b6288;
  --mm-text-inverse: #1a1438;

  /* ---- Brand: MM purple, opgelicht voor contrast op donker ---- */
  --mm-primary:        #9186e0;
  --mm-primary-hover:  #a49aea;
  --mm-primary-active: #7c6fd1;
  --mm-primary-soft:   rgba(145, 134, 224, 0.16);
  --mm-primary-glow:   rgba(145, 134, 224, 0.35);

  /* ---- Accent: MM teal, iets helderder voor contrast ---- */
  --mm-accent:        #5fd0ac;
  --mm-accent-bright: #86e0c4;
  --mm-accent-dark:   #4cb18f;
  --mm-accent-soft:   rgba(95, 208, 172, 0.16);
  --mm-accent-glow:   rgba(95, 208, 172, 0.35);

  /* ---- Semantic ---- */
  --mm-danger:        #ea6b8a;
  --mm-danger-hover:  #f086a0;
  --mm-danger-soft:   rgba(234, 107, 138, 0.16);
  --mm-warning:       #e0a33e;
  --mm-warning-soft:  rgba(224, 163, 62, 0.16);
  --mm-success:       var(--mm-accent);
  --mm-success-soft:  var(--mm-accent-soft);

  /* ---- Shadows: op een donker canvas werkt zwart, geen paarse tint ---- */
  --mm-shadow-sm:  0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.24);
  --mm-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.2);
  --mm-shadow-lg:  0 24px 48px -16px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);

  /* ---- Consolidatie-toevoegingen ---- */
}

/* =====================================================================
   GLOBAL BASE
   ===================================================================== */

html { scroll-behavior: smooth; }

body {
  background: var(--mm-bg);
  color: var(--mm-text);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

body::before,
body::after { display: none !important; }

/* Subtle dotted grid (lichter dan de oude dark variant) */
body::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at center, rgba(63, 47, 135, 0.06) 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 0 0;
  opacity: 0.6;
}

/* Op donker canvas is de paarse stip onzichtbaar — lichte stip i.p.v. hertekenen */
html[data-theme="dark"] body::before {
  background-image:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 1px, transparent 1.5px);
}

/* Brand-glow rings, top-left + top-right */
body::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(50% 38% at 0% 0%, var(--mm-primary-soft), transparent 60%),
    radial-gradient(42% 32% at 100% 0%, var(--mm-accent-soft), transparent 60%);
  opacity: 0.7;
}

::selection {
  background: var(--mm-primary);
  color: #fff;
}

/* =====================================================================
   TYPOGRAPHY — bold, tight, dark text on light bg
   ===================================================================== */

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--mm-text);
  margin: 0;
  line-height: 1.05;
}

h1 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
h2 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
h3 { font-size: 1.1rem; line-height: 1.2; }

p { margin: 0; color: var(--mm-text-soft); }
.muted        { color: var(--mm-text-muted); font-weight: 500; }
.small-text   { font-size: 0.8125rem; }
.tiny-text    { font-size: 0.75rem; }

.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-primary);
  margin: 0 0 12px;
  background: none;
  padding: 0;
  border: 0;
}

/* Mono code accents */
code, kbd, samp {
  font-family: var(--mm-font-mono);
  font-size: 0.86em;
  color: var(--mm-primary);
  background: var(--mm-primary-soft);
  padding: 1px 5px;
  border-radius: var(--mm-r-sm);
  font-weight: 600;
}

/* =====================================================================
   APP / HOME / LOGIN SHELLS
   ===================================================================== */

.login-screen, .app-shell {
  width: min(1360px, calc(100% - 32px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-bottom: 64px;
}


.app-shell  { padding: 24px 0 64px; gap: 22px; }

/* =====================================================================
   ENTRY ANIMATIONS
   ===================================================================== */

@keyframes mm-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mm-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.app-shell > * {
  animation: mm-fade-up 540ms var(--mm-ease) backwards;
}











@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   SURFACES
   ===================================================================== */

.login-card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg);
  box-shadow: var(--mm-shadow-sm);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color 220ms var(--mm-ease), box-shadow 220ms var(--mm-ease), background 220ms var(--mm-ease), transform 220ms var(--mm-ease);
  color: var(--mm-text);
}

/* =====================================================================
   HOME HERO — bold split layout
   ===================================================================== */









/* Accent-period in MM-paars op licht */






/* =====================================================================
   HOME GRID + CARDS
   ===================================================================== */





























/* Per-module accent dot */






/* =====================================================================
   LOGIN
   ===================================================================== */

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 0;
}

.login-card {
  width: min(1000px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  overflow: hidden;
  border-radius: var(--mm-r-xl);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-lg);
  animation: mm-scale-in 540ms var(--mm-ease) backwards;
  backdrop-filter: none !important;
  background: var(--mm-surface);
}

/* Donker paneel BLIJFT donker — geeft contrast tegen lichte form */
.login-art {
  padding: 44px 38px;
  color: #fff;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(119, 208, 180, 0.22) 0%, transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(101, 73, 194, 0.4) 0%, transparent 70%),
    linear-gradient(155deg, var(--mm-primary) 0%, #2a1d59 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.login-art::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.7;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 70%);
}

.login-art h1 {
  margin: 20px 0 14px;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  line-height: 1;
}

.login-art h1::after {
  content: ".";
  color: var(--mm-accent-bright);
  margin-left: 2px;
}

.login-art p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 380px;
  position: relative;
  z-index: 1;
}





.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 44px 38px;
  background: var(--mm-surface);
  justify-content: center;
}

.login-form h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 2px;
  color: var(--mm-text);
}

.login-form h2::after {
  content: ".";
  color: var(--mm-primary);
  margin-left: 2px;
}

@media (max-width: 840px) {
  .login-card { grid-template-columns: 1fr; }
  .login-art, .login-form { padding: 32px 26px; }
}

/* MS sign-in */







.login-min-ms .ms-logo {
  width: 16px; height: 16px;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5px;
}
.login-min-ms .ms-logo span:nth-child(1) { background: #f25022; }
.login-min-ms .ms-logo span:nth-child(2) { background: #7fba00; }
.login-min-ms .ms-logo span:nth-child(3) { background: #00a4ef; }
.login-min-ms .ms-logo span:nth-child(4) { background: #ffb900; }

/* Minimalistische login (GitHub-stijl): klein kaartje, gecentreerd, geen franje.
   Alle vier de inlogschermen (/login, /tweestaps, /account-setup, /reset-password; UX-ronde
   2026-11), met .mm erop voor de velden en knoppen. De brede .login-card hierboven is sindsdien ongebruikt. */
.login-min {
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.login-min-logo {
  width: 150px;
  height: auto;
}

.login-min-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg);
  box-shadow: var(--mm-shadow-sm);
}

/* .mm zet display: grid; de login blijft een gecentreerde kolom. Knoppen over de volle breedte
   (ook "Inloggen met Microsoft", .login-min-ms: een .mm-btn met het logo ervoor). */
.login-min.mm { display: flex; gap: 20px; }
.mm.login-min .mm-btn { width: 100%; justify-content: center; }
.login-min-titel { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--mm-text); }
.login-min-status { margin: 0; text-align: center; }
















/* =====================================================================
   BUTTONS — solid + scale-press
   ===================================================================== */

.button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--mm-r-md);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 11px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 200ms var(--mm-ease);
  white-space: nowrap;
  letter-spacing: 0.005em;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }
.button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.button-full { width: 100%; }

/* PRIMARY — solid paars (brand) */
.button-primary {
  background: var(--mm-primary);
  color: #fff;
  border-color: var(--mm-primary);
  box-shadow: 0 6px 16px var(--mm-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.button-primary:hover {
  background: var(--mm-primary-hover);
  border-color: var(--mm-primary-hover);
  box-shadow: 0 10px 24px var(--mm-primary-glow), 0 0 0 2px var(--mm-primary-soft);
}
.button-primary:active { background: var(--mm-primary-active); }

/* SECONDARY — outline */
.button-secondary {
  background: var(--mm-surface);
  color: var(--mm-text);
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow-sm);
  backdrop-filter: none !important;
}
.button-secondary:hover {
  background: var(--mm-surface-2);
  border-color: var(--mm-primary);
  color: var(--mm-primary);
}

/* =====================================================================
   FORM INPUTS
   ===================================================================== */

.field-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--mm-text);
}

.field-block input[type="text"],
.field-block input[type="email"],
.field-block input[type="password"],
.field-block input[type="number"],
.field-block input[type="search"],
.field-block input[type="tel"],
.field-block input[type="url"],
.field-block input[type="date"],
.field-block textarea,
.field-block select {
  padding: 10px 14px;
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
  color: var(--mm-text);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  transition: all 200ms var(--mm-ease);
  box-shadow: var(--mm-shadow-sm);
}

.field-block input::placeholder,
.field-block textarea::placeholder { color: var(--mm-text-faint); }

.field-block input:hover,
.field-block textarea:hover,
.field-block select:hover {
  border-color: var(--mm-border-bright);
}

.field-block input:focus,
.field-block textarea:focus,
.field-block select:focus {
  outline: none;
  border-color: var(--mm-primary);
  background: var(--mm-surface);
  box-shadow: 0 0 0 3px var(--mm-primary-soft);
}

.field-block input[readonly] {
  background: var(--mm-surface-2);
  color: var(--mm-text-soft);
  cursor: default;
  font-family: var(--mm-font-mono);
  font-size: 0.82rem;
}

/* =====================================================================
   GROUPED MODEL SELECT
   Custom dropdown i.p.v. <select><optgroup> — merk/toestelsoort-groepen staan
   ingeklapt totdat je erop klikt (native optgroups kunnen dat niet).
   ===================================================================== */

.mm-model-select { position: relative; width: 100%; }

.mm-model-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
  color: var(--mm-text);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 200ms var(--mm-ease);
  box-shadow: var(--mm-shadow-sm);
}

.mm-model-select-trigger:hover { border-color: var(--mm-border-bright); }

.mm-model-select-trigger:focus-within,
.mm-model-select-trigger.is-open {
  outline: none;
  border-color: var(--mm-primary);
  box-shadow: 0 0 0 3px var(--mm-primary-soft);
}

.mm-model-select-trigger.is-disabled {
  background: var(--mm-surface-2);
  color: var(--mm-text-soft);
  cursor: default;
}

/* De trigger is een tekstveld (typen filtert naar de dichtstbijzijnde modellen,
   zie GroupedModelSelect.tsx); dit laat 'm er nog als knop uitzien tot je erin klikt. */
.mm-model-select-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.mm-model-select-input:focus { cursor: text; }
.mm-model-select-input::placeholder { color: var(--mm-text-faint); opacity: 1; }
.mm-model-select-input:disabled { cursor: default; }

.mm-model-select-chevron { flex: 0 0 auto; color: var(--mm-text-soft); transition: transform 160ms var(--mm-ease); }
.mm-model-select-trigger.is-open .mm-model-select-chevron { transform: rotate(180deg); }

.mm-model-select-panel {
  position: fixed;
  z-index: 1000;
  max-height: 340px;
  overflow-y: auto;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg);
  box-shadow: var(--mm-shadow-md);
  padding: 6px;
}

.mm-model-select-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--mm-r-sm);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mm-text-soft);
}
.mm-model-select-group summary::-webkit-details-marker { display: none; }
.mm-model-select-group summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--mm-text-faint);
  border-bottom: 2px solid var(--mm-text-faint);
  transform: rotate(-45deg);
  transition: transform 160ms var(--mm-ease);
}
.mm-model-select-group[open] > summary::before { transform: rotate(45deg); }
.mm-model-select-group summary:hover { background: var(--mm-surface-2); }

.mm-model-select-option {
  display: block;
  width: 100%;
  padding: 8px 10px 8px 26px;
  border: none;
  background: none;
  color: var(--mm-text);
  font-size: 0.86rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--mm-r-sm);
}
.mm-model-select-option:hover,
.mm-model-select-option:focus-visible { background: var(--mm-primary-soft); outline: none; }
.mm-model-select-option.is-selected { color: var(--mm-primary); font-weight: 700; }

/* Gefilterde (getypte) resultaten: platte lijst i.p.v. groepen, met het
   merk/toestelsoort erachter — de groepering zelf is dan even weg. */
.mm-model-select-option-zoek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-left: 10px;
}
.mm-model-select-option-group { flex: 0 0 auto; font-size: 0.72rem; font-weight: 400; color: var(--mm-text-faint); }

.mm-model-select-empty { padding: 14px 10px; font-size: 0.86rem; color: var(--mm-text-faint); text-align: center; }

.mm-model-select-other {
  margin-top: 4px;
  padding-left: 10px;
  border-top: 1px solid var(--mm-border);
}

/* =====================================================================
   STATUS PILLS
   ===================================================================== */

/* =====================================================================
   TABLES
   ===================================================================== */

/* =====================================================================
   BATCH LIST
   ===================================================================== */

/* =====================================================================
   MODAL OVERLAY
   ===================================================================== */

.app-modal-overlay {
  background: rgba(26, 21, 56, 0.55);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  animation: mm-fade-in 240ms var(--mm-ease);
}

.app-modal {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-xl);
  box-shadow: var(--mm-shadow-lg);
  padding: 26px;
  backdrop-filter: none !important;
  animation: mm-scale-in 320ms var(--mm-ease-back);
  color: var(--mm-text);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.app-modal h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--mm-text);
}

/* =====================================================================
   STAT CARDS
   ===================================================================== */

.ecommerce-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* =====================================================================
   HERO-CARD
   ===================================================================== */

/* =====================================================================
   MS AUTH NOTICE
   ===================================================================== */



/* =====================================================================
   ERROR
   ===================================================================== */

.error-text {
  color: var(--mm-danger);
  background: var(--mm-danger-soft);
  border: 1px solid rgba(212, 69, 108, 0.25);
  padding: 10px 14px;
  border-radius: var(--mm-r-md);
  font-size: 0.85rem;
  font-weight: 600;
}

/* =====================================================================
   FOCUS RINGS
   ===================================================================== */

:focus-visible {
  outline: 2px solid var(--mm-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mm-primary-soft);
  border-color: var(--mm-primary);
}

/* =====================================================================
   LINKS
   ===================================================================== */

a {
  color: var(--mm-primary);
  text-decoration: none;
  transition: color 180ms ease;
}

a:hover {
  color: var(--mm-primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

p.muted a { color: var(--mm-primary); }

/* =====================================================================
   MISC
   ===================================================================== */

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 1fr; }
}

.repair-logo {
  height: 30px;
  width: auto;
  max-height: 36px;
  margin: 0 0 8px;
  object-fit: contain;
}

.login-logo-wrap {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0 0 6px;
  max-width: 220px;
}

.login-logo {
  max-height: 32px;
  width: auto;
  object-fit: contain;
}

/* =====================================================================
   MOBILE — touch-first optimizations
   ===================================================================== */

@media (max-width: 760px) {
  body { font-size: 15px; }

  .login-screen, .app-shell {
    width: calc(100% - 20px);
    padding: 16px 0 40px;
  }

  
  .app-shell { gap: 16px; }

  .button {
    padding: 12px 18px;
    min-height: 42px;
    font-size: 0.92rem;
  }

  .app-modal {
    width: calc(100% - 24px) !important;
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    padding: 22px 20px;
    border-radius: var(--mm-r-lg);
    overflow-y: auto;
  }

  .app-modal h2 { font-size: 1.15rem; }

  .login-screen { padding: 16px 0; }

  .login-card {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
    border-radius: var(--mm-r-lg);
  }

  .login-art {
    padding: 28px 22px;
    text-align: left;
  }

  .login-art h1 { font-size: 1.55rem; margin: 14px 0 10px; }
  .login-art p { font-size: 0.92rem; }

  .login-form { padding: 26px 22px; gap: 14px; }
  .login-form h2 { font-size: 1.3rem; }

  

  .ecommerce-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .field-block input[type="text"],
  .field-block input[type="email"],
  .field-block input[type="password"],
  .field-block input[type="number"],
  .field-block input[type="search"],
  .field-block textarea,
  .field-block select {
    padding: 12px 14px;
    font-size: 16px;
    min-height: 44px;
  }
}

/* TABLET */

@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .app-shell,
  .login-screen {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
}


/* =====================================================================
   BATCH REPAIR — row-actions polish (tegen "te wit" gevoel)
   ===================================================================== */

/* =====================================================================
   ACTIVE BATCH PANEL — meer kleur, minder "vlakke" witte panels
   ===================================================================== */

/* Subtiele highlight op de "actieve" rij die geopend wordt */

/* Mobile: knoppen blijven volle breedte stacken, maar minder smal */

/* =====================================================================
   ACHTERGROND — Mobielmakers "barstjes"-patroon
   ---------------------------------------------------------------------
   Subtiel geometrisch lijnenpatroon dat de gebarsten-scherm/repair-
   essentie van het MM-logo oppakt. Heel licht ingestelde paarse
   tinten zodat de content de focus blijft.
   ===================================================================== */

body::before {
  background-image:
    /* Mobielmakers "cracks" — sparse, organic line bursts */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><g fill='none' stroke='%233f2f87' stroke-width='1' stroke-linecap='round' opacity='0.07'><path d='M40 30 L62 58 L70 88 L85 110 L78 138'/><path d='M62 58 L80 52'/><path d='M70 88 L92 84'/><path d='M85 110 L102 116'/><path d='M170 22 L150 50 L162 78 L148 100'/><path d='M150 50 L132 46'/><path d='M162 78 L182 72'/><path d='M225 60 L240 90 L228 122 L242 148'/><path d='M240 90 L255 82'/><path d='M30 175 L52 200 L42 232 L58 258'/><path d='M52 200 L70 196'/><path d='M42 232 L20 240'/><path d='M125 195 L148 220 L138 248 L155 268'/><path d='M148 220 L168 215'/><path d='M198 178 L218 205 L208 235 L225 258'/><path d='M218 205 L240 200'/></g></svg>"),
    /* Bestaande dotted grid */
    radial-gradient(circle at center, rgba(63, 47, 135, 0.06) 1px, transparent 1.5px);
  background-size: 280px 280px, 28px 28px;
  background-position: 0 0, 0 0;
  opacity: 0.85;
}

/* Glow-rings: warmer maken zodat de body net iets meer leeft */
body::after {
  background:
    radial-gradient(50% 38% at 0% 0%, rgba(63, 47, 135, 0.10), transparent 60%),
    radial-gradient(42% 32% at 100% 0%, rgba(119, 208, 180, 0.10), transparent 60%),
    radial-gradient(45% 30% at 100% 100%, rgba(63, 47, 135, 0.06), transparent 60%);
  opacity: 0.9;
}

/* =====================================================================
   Subtle vignette-shimmer op hero — laat 'm voelen als een
   premium kop ipv plain card
   ===================================================================== */

/* =====================================================================
   RMA — Afkeurcode scan block
   ===================================================================== */

/* =====================================================================
   RMA — rij-acties zelfde stijl als batch-reparaties (Open + ×)
   ===================================================================== */

/* RMA-delete kruisje matched al via .row-delete-cross styling (zelfde
   rood-soft + rotate als batch). Geen extra fix nodig. */

/* Mobile: ook hier stack de rij-acties verticaal */

/* =====================================================================
   Verborgen realtime status-pagina (status.html)
   ===================================================================== */
.status-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mm-accent-dark, #2f9e74);
  margin-right: 6px;
  vertical-align: middle;
  animation: status-pulse 1.6s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76, 177, 143, 0.5); }
  50% { opacity: 0.45; box-shadow: 0 0 0 6px rgba(76, 177, 143, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .status-live-dot { animation: none; }
}

/* =====================================================================
   Globale zijbalk-navigatie (mm-nav) — clean SaaS-look, vaste linker-nav.
   Gemount via app.js op elke ingelogde pagina. Additief.
   ===================================================================== */
.mm-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 248px;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--surface-strong, #fff) 0%, var(--surface-strong, #fff) 55%, var(--brand-soft, #ece7fb) 240%);
  border-right: 1px solid var(--border, rgba(66, 48, 136, 0.12));
  z-index: 95;
}
body.mm-has-nav { padding-left: 248px; }

.mm-nav-brand {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border, rgba(66, 48, 136, 0.1));
  flex: 0 0 auto;
}
.mm-nav-brand img { height: 26px; width: auto; }
/* Logo-swap voor dark mode: MMLogo_Wit.png bestond al (ongebruikt) voor een donkere ondergrond */
.mm-nav-logo-dark { display: none; }
html[data-theme="dark"] .mm-nav-logo-light { display: none; }
html[data-theme="dark"] .mm-nav-logo-dark { display: block; }

.mm-nav-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  /* Dunne balk in thema-kleur i.p.v. de brede systeem-scrollbar met pijltjes,
     die op Windows als een witte strook in de sidebar hing. */
  scrollbar-width: thin;
  scrollbar-color: var(--mm-border-strong) transparent;
  padding: 16px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mm-nav-group { display: flex; flex-direction: column; gap: 3px; }
.mm-nav-title {
  margin: 0 0 4px;
  padding: 0 11px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft, #666a8d);
}
.mm-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--text, #22244a);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.mm-nav-link svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.8; }
/* Lucide-placeholder reserveert ruimte tot het icoon geladen is (geen layout-shift) */
.mm-nav-link i[data-lucide] { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; }
.mm-nav-link:hover { background: var(--mm-primary-soft); transform: translateX(2px); }
.mm-nav-link.is-active {
  background: var(--brand-soft, #ece7fb);
  color: var(--brand-dark, #31216d);
  font-weight: 750;
}
.mm-nav-link.is-active svg { opacity: 1; }

/* Theme-toggle (item in het profielmenu): beide iconen/labels staan altijd in de
   DOM (zie ThemeToggle.tsx voor waarom), CSS bepaalt welke zichtbaar is — geen
   React-state, dus geen hydration-flits en geen stale-klik-race. */
.theme-toggle-state-dark { display: none; }
html[data-theme="dark"] .theme-toggle-state-light { display: none; }
html[data-theme="dark"] .theme-toggle-state-dark { display: inline-flex; }

/* Nav-zichtbaarheid is per-user perm-gestuurd via de filter in Sidebar.tsx
   (perms[it.perm] !== false) + de server-side page-guards (ctx.perms.X).
   NIET op rol hier verbergen: dat overschreef aangevinkte per-user rechten
   (bv. een reparateur met ecommerce-perm zag de link wél in de DOM maar
   kreeg 'm door deze CSS op display:none). */

/* Mobiele hamburger (los van de rail) */
.mm-nav-toggle {
  display: none;
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 96;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid var(--border, rgba(66, 48, 136, 0.14));
  background: var(--surface-strong, #fff);
  color: var(--brand, #3f2f87);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/* Rode stip: er staat een rode teller (iets wat jij nu moet doen) in het dichte menu. */
.mm-nav-toggle__stip {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--mm-danger);
  box-shadow: 0 0 0 2px var(--surface-strong, #fff);
}
/* Achter het open menu (mobiel): dimt de pagina en sluit bij een klik. */
.mm-nav-scrim { display: none; }

@media (max-width: 900px) {
  body.mm-has-nav { padding-left: 0; }
  .mm-nav {
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
  }
  .mm-nav.is-open { transform: none; }
  .mm-nav-toggle { display: flex; }
  .mm-nav-scrim { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(15, 12, 30, 0.4); }
  /* Het menuknopje (12px + 42px) blijft op zijn plek als X; het logo schuift erachter vandaan. */
  .mm-nav-brand { padding-left: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-nav-link:hover { transform: none; }
  .mm-nav { transition: none; }
}

/* Landingpagina: grafieken */

/* ===== RMA-afkeur publiek portaal (/rma-leverancier) ===== */
.rma-afkeur-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
  background:
    radial-gradient(1100px 460px at 50% -8%, var(--mm-primary-soft) 0%, transparent 62%),
    var(--mm-bg);
}
.rma-afkeur-logo { height: 34px; width: auto; flex: 0 0 auto; }
/* Skeleton-rijen reserveren tabelhoogte tijdens het laden → geen CLS-shift als de data inschiet. */

/* ===================================================================== */
/* DESIGN-CONSISTENTIE — hele app één stijl (font / opbouw / buttons /     */
/* inputs / kleuren). Append wint in de cascade → geen mid-file deletes,   */
/* geen markup-wijziging, geen functionaliteit aangeraakt. (mm--tokens.)   */
/* ===================================================================== */

/* 1. LETTERTYPE — Fox Grotesque (self-hosted) overal via één stack-var.   */
/*    Eén Regular-bestand dekt alle gewichten (browser synthetiseert vet); */
/*    font-display:swap toont meteen tekst. Mono blijft mono.              */
@font-face {
  font-family: "Fox Grotesque";
  src: url("/assets/fonts/FoxGrotesque-Regular.woff2") format("woff2"),
       url("/assets/fonts/FoxGrotesque-Regular.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root { --mm-font-sans: "Fox Grotesque", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html, body { font-family: var(--mm-font-sans); }
button, input, select, textarea { font-family: inherit; }

/* 2. PAGINA-OPBOUW — dubbele shell-nesting neutraliseren. De (app)-layout  */
/*    levert al .app-shell.single-page-shell > .main-content; componenten   */
/*    die zelf nog een shell wrappen versmalden de content 32px + extra     */
/*    centrering. Hier weer vol-breedte binnen de layout.                   */
.main-content > .app-shell { width: 100%; max-width: none; margin: 0; }

/* 4. INPUTS/SELECTS/TEXTAREAS — één veldstijl overal (radius, rand, focus).*/
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input:not([type]), select, textarea {
  border-radius: var(--mm-r-md);
  border: 1px solid var(--mm-border-strong);
  background: var(--mm-surface);
  color: var(--mm-text);
  box-shadow: var(--mm-shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover,
input[type="search"]:hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="date"]:hover,
input:not([type]):hover, select:hover, textarea:hover { border-color: var(--mm-border-bright); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus,
input:not([type]):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--mm-primary); box-shadow: 0 0 0 3px var(--mm-primary-soft);
}
input::placeholder, textarea::placeholder { color: var(--mm-text-faint); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--mm-primary); cursor: pointer; }

/* =====================================================================
   STARTPAGINA (dashboard-*) — aanpasbaar widget-grid + "Mijn taken".
   Uitsluitend --mm-*-tokens → een thema-flip werkt automatisch mee.
   ===================================================================== */

/* Widget-optiesknop + dropdown */
.dashboard-widget-opts-wrap { position: relative; }

/* Vastgepinde batch — subtiel paars accent (📌 staat al in de titel). */

/* =====================================================================
   ZOEKBALK — vast bovenaan elke pagina (app/(app)/layout.tsx), in MM Intern-stijl
   (Brian 2026-10-07): witte kaart, indigo focusring, eyebrow-kopje per soort, een
   pill per type en codes in mono. Kleuren via de --mm-*-laag, dus dark mode komt mee.
   ===================================================================== */
/* De strook zelf: 64px, gelijk met de logoregel van de zijbalk; licht doorschijnend zodat
   de pagina er zichtbaar onder scrolt. Onder de zijbalk (95) en de modals. */
.mm-topbar {
  position: sticky; top: 0; z-index: 90;
  height: 64px; display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
  background: color-mix(in srgb, var(--mm-bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--mm-border);
}
@media print { .mm-topbar { display: none !important; } }

/* Profielfoto rechtsboven (Brian 2026-11-09): opent het profielmenu (foto, Instellingen, uitloggen).
   De zoekbalk blijft in het midden: links en rechts evenveel ruimte vrij. De knop staat buiten
   .mm, dus portaaltokens (--mm-*); het menu zelf rendert via een portal mét .mm. */
.mm-topbar { padding: 0 76px; }
.mm-profiel { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.mm-profiel__knop { display: block; padding: 0; border: 0; background: none; border-radius: 999px; cursor: pointer; }
.mm-profiel__knop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mm-primary-glow); }
.mm-profiel__knop:hover .mm-avatar { box-shadow: 0 0 0 2px var(--mm-border-bright); }
.mm-avatar { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; border-radius: 999px; object-fit: cover;
  background: var(--mm-primary-soft); color: var(--mm-primary); font-size: 13px; font-weight: 700; letter-spacing: .02em; user-select: none; }
.mm-avatar--groot { width: 44px; height: 44px; font-size: 15px; }
.mm-profiel__kop { display: flex; align-items: center; gap: 12px; padding: 10px 14px 8px; }
.mm-profiel__naam { margin: 0; font-size: 14px; font-weight: 600; color: var(--mm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-profiel__rol { margin: 2px 0 0; font-size: 12px; color: var(--mm-text-muted); }

/* Toast (lib/toast.ts + components/ui/ToastHouder.tsx, 2026-11-09): korte melding rechtsboven onder
   de topbalk die vanzelf verdwijnt. Buiten .mm (in de layout), dus portaaltokens (--mm-*). */
.mm-toasts { position: fixed; z-index: 1100; top: 76px; right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.mm-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 10px;
  background: var(--mm-text); color: var(--mm-surface); font-size: 14px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 12px 32px rgba(28, 26, 51, 0.22); animation: mm-toast-in 180ms var(--mm-ease); }
.mm-toast > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.mm-toast--ok > svg { color: var(--mm-accent-bright); }
.mm-toast--fout { background: var(--mm-danger); color: #fff; }
.mm-toast--info > svg { color: var(--mm-accent-bright); }
.mm-toast span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mm-toast__sluit { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; opacity: .75; cursor: pointer; }
.mm-toast__sluit:hover, .mm-toast__sluit:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.14); outline: none; }
.mm-toast__sluit svg { width: 16px; height: 16px; }
@keyframes mm-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mm-toast { animation: none; } }

.global-imei-search { position: relative; width: 100%; max-width: 600px; }
.global-imei-search-input {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: var(--mm-surface); border: 1px solid var(--mm-border-strong);
  border-radius: 6px; color: var(--mm-text-muted); font-size: 14px;
  box-shadow: 0 1px 2px rgba(28, 26, 51, 0.05);
  transition: border-color 140ms var(--mm-ease), box-shadow 140ms var(--mm-ease);
}
.global-imei-search-input svg { color: var(--mm-text-muted); flex: 0 0 auto; }
.global-imei-search-input:hover { border-color: var(--mm-text-faint); }
.global-imei-search-input:focus-within { border-color: var(--mm-primary); box-shadow: 0 0 0 3px var(--mm-primary-glow); }
.global-imei-search-input:focus-within svg { color: var(--mm-primary); }
.global-imei-search-input input {
  flex: 1; min-width: 0; height: 100%; border: none; background: none; padding: 0;
  font: inherit; color: var(--mm-text);
}
.global-imei-search-input input:focus { outline: none; }
.global-imei-search-input input::placeholder { color: var(--mm-text-faint); }
.global-imei-search-kbd {
  flex: 0 0 auto; font: 600 11px/1 var(--mm-font-mono, ui-monospace, monospace);
  color: var(--mm-text-muted); border: 1px solid var(--mm-border); border-radius: 6px; padding: 4px 6px;
  background: var(--mm-surface-2);
}
.global-imei-search-spinner {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--mm-border); border-top-color: var(--mm-primary);
  animation: mm-search-draai 700ms linear infinite;
}
@keyframes mm-search-draai { to { transform: rotate(360deg); } }

.global-imei-search-panel {
  position: absolute; top: calc(100% + 8px); left: 0; width: 100%;
  background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(28, 26, 51, 0.14);
  padding: 8px; max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; z-index: 60;
  animation: mm-search-pop 120ms var(--mm-ease);
}
@keyframes mm-search-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.global-imei-search-panel > p { margin: 0; padding: 12px; font-size: 13px; color: var(--mm-text-muted); }
.global-imei-search-groep + .global-imei-search-groep { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--mm-border); }
.global-imei-search-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0; padding: 8px 8px 4px;
  font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-text-muted);
}
.global-imei-search-kop span { letter-spacing: 0; font-weight: 500; text-transform: none; }
.global-imei-search-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  padding: 8px; border-radius: 6px; text-decoration: none; color: var(--mm-text);
  font-size: 14px; line-height: 20px;
  transition: background 120ms var(--mm-ease);
}
.global-imei-search-row:hover, .global-imei-search-row:focus-visible, .global-imei-search-row.is-actief {
  background: var(--mm-primary-soft); outline: none;
}
.global-imei-search-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.global-imei-search-sub {
  grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 12px/16px var(--mm-font-mono, ui-monospace, monospace); color: var(--mm-text-muted);
}
.global-imei-search-pill {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end;
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  background: var(--mm-surface-3, var(--mm-surface-2)); color: var(--mm-text-soft);
}
.global-imei-search-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.global-imei-search-pill--ok { background: var(--mm-success-soft); color: var(--mm-success); }
.global-imei-search-pill--let-op { background: var(--mm-warning-soft); color: var(--mm-warning); }
.global-imei-search-pill--fout { background: var(--mm-danger-soft); color: var(--mm-danger); }
.global-imei-search-pill--info { background: var(--mm-primary-soft); color: var(--mm-primary); }
.global-imei-search-kaart { padding: 4px 8px; }
/* Kwijt (2026-10-23): een partijtoestel dat op kwijt staat — bovenaan, met de knop Gevonden. */
.global-imei-search-kwijt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 8px; padding: 10px 12px;
  border-radius: 8px; background: var(--mm-warning-soft); color: var(--mm-text); font-size: 13px; line-height: 18px;
}
.global-imei-search-kwijt strong { color: var(--mm-warning); }
.global-imei-search-kwijt.is-gevonden { background: var(--mm-success-soft); }
.global-imei-search-kwijt.is-gevonden strong { color: var(--mm-success); }
.global-imei-search-kwijt-notitie { color: var(--mm-text-muted); font-size: 12px; }
.global-imei-search-kwijt-fout { color: var(--mm-danger); font-size: 12px; }
.global-imei-search-kwijt-knop {
  flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--mm-border, transparent); border-radius: 6px;
  background: var(--mm-surface, #fff); color: var(--mm-text); font: inherit; font-weight: 600; cursor: pointer;
}
.global-imei-search-kwijt-knop:disabled { opacity: 0.6; cursor: default; }
/* Gescand toestel (2026-10-21): de geschiedenis als tijdlijn — een stip per stap, een lijn ertussen,
   nieuwste bovenaan. Boven het label de dag en de soort ("14 sep 2026 · Trade-in"). */
.global-imei-search-stap {
  grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mm-text-muted);
}
.global-imei-search-row--stap { position: relative; padding-left: 28px; }
.global-imei-search-row--stap .global-imei-search-label { grid-column: 1; }
.global-imei-search-row--stap .global-imei-search-pill { grid-row: 1 / span 3; }
.global-imei-search-row--stap::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--mm-text-faint); opacity: 0.45;
}
.global-imei-search-row--stap::after {
  content: ""; position: absolute; left: 7px; top: 12px; width: 12px; height: 12px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--mm-primary); background: var(--mm-surface);
}
.global-imei-search-kop + .global-imei-search-row--stap::before { top: 12px; }
.global-imei-search-row--stap:last-child::before { bottom: auto; height: 12px; }
.global-imei-search-kop + .global-imei-search-row--stap:last-child::before { display: none; }
.global-imei-search-kop--overig { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--mm-border); }
/* Zonder toegang (2026-10-22): je ziet wáár het toestel is, maar de pagina gaat niet open. Een
   knop (klik → "Geen toegang tot …"), dus de knopstijl eraf; iets lichter, met een slotje. */
.global-imei-search-row--geen-toegang { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; color: var(--mm-text-soft); }
.global-imei-search-slot { display: inline-block; vertical-align: -1px; margin-right: 6px; color: var(--mm-text-muted); }
.global-imei-search-geen-toegang { grid-column: 1 / -1; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--mm-danger); }

/* Mobiel: links ruimte voor het zwevende menuknopje (.mm-nav-toggle, 12px + 42px). */
@media (max-width: 900px) {
  .mm-topbar { padding: 0 60px 0 64px; }
  .mm-profiel { right: 12px; }
  .global-imei-search-kbd { display: none; }
}
/* Wat bovenaan de pagina plakt, schuift mee onder de vaste zoekbalk (64px) — anders
   verdwijnt het er precies onder. Zelfde onderlinge afstand als voorheen. */
body.mm-has-nav .vi-vel-kolom { top: calc(64px + 12px); max-height: calc(100vh - 64px - 24px); }

/* Toestelspecificaties bovenaan de IMEI/S-N-zoekresultaten: model · GB · kleur ·
   connectiviteit, uit het toestelregister. Eén regel per fysiek toestel — een
   koptekst boven de vindplaatsen, niet klikbaar. Gedeeld door de globale zoekbalk
   en de dashboard-widget (/zoeken). */
.toestel-spec-regel {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  font-size: 13px; font-weight: 600; color: var(--mm-text);
  background: var(--mm-primary-soft); border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-sm);
}
.toestel-spec-regel + .toestel-spec-regel { margin-top: 6px; }
.toestel-spec-regel svg { color: var(--mm-primary); flex: 0 0 auto; opacity: 0.85; }

/* =====================================================================
   Overgangen & animaties — subtiel, huisstijl.
   Het oude body.page-loading-mechaniek (vanilla-app) wordt in Next nooit
   getriggerd; deze sectie geeft pagina's en de login hun zachte entree
   via pure CSS-keyframes, zonder JS. Respecteert prefers-reduced-motion.
   ===================================================================== */

@keyframes mm-fade-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pagina-inhoud komt zachtjes binnen, trapsgewijs: panelen volgen elkaar
   op i.p.v. alles tegelijk. `backwards` houdt items onzichtbaar tijdens
   hun delay, anders flitsen ze eerst op hun eindplek. */
.main-content > * { animation: mm-fade-rise 300ms var(--mm-ease) backwards; }
.main-content > *:nth-child(2) { animation-delay: 45ms; }
.main-content > *:nth-child(3) { animation-delay: 90ms; }
.main-content > *:nth-child(4) { animation-delay: 135ms; }
.main-content > *:nth-child(n+5) { animation-delay: 180ms; }

/* Login: logo → kaartje → Microsoft-knopje, met dezelfde trap. */
.login-min > * { animation: mm-fade-rise 320ms var(--mm-ease) backwards; }
.login-min > *:nth-child(2) { animation-delay: 70ms; }
.login-min > *:nth-child(3) { animation-delay: 140ms; }
.login-min > *:nth-child(n+4) { animation-delay: 190ms; }

/* Foutmeldingen verschijnen met dezelfde zachte entree i.p.v. te knipperen. */
.error-text, .notice { animation: mm-fade-rise 220ms var(--mm-ease) backwards; }

/* Toegankelijkheid: wie bewegingsarm ingesteld staat, krijgt alles direct. */
@media (prefers-reduced-motion: reduce) {
  .main-content > *,
  .login-min > *,
  .error-text,
  .notice {
    animation: none;
  }
}

/* =====================================================================
   BUGREPORT — omcirkel-modal (vanuit het profielmenu) + beheerscherm
   ===================================================================== */

.bug-report-canvas-wrap {
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-md);
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 70vh;
  margin-bottom: 12px;
  background: var(--mm-bg);
}
.bug-report-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}

.mm-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mm-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Grijze teller: goed om te weten, geen alarm. Rood (hierboven) alleen voor "jij moet nu iets". */
.mm-nav-badge--info { background: var(--mm-surface-3); color: var(--mm-text-soft); }

.bug-report-thumb-btn { border: none; background: none; padding: 0; cursor: pointer; display: block; }
.bug-report-thumb {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--mm-r-md);
  border: 1px solid var(--mm-border-strong);
  transition: transform 140ms var(--mm-ease);
}
.bug-report-thumb-btn:hover .bug-report-thumb { transform: scale(1.05); }

.bug-report-preview-img {
  width: 100%;
  border-radius: var(--mm-r-md);
  border: 1px solid var(--mm-border-strong);
  margin: 12px 0;
}


/* ── SKU-sticker ─────────────────────────────────────────────────────────── */
/* Het scanveld wordt met een handscanner bediend en op afstand afgelezen, dus
   bewust groter en monospace — een verkeerd gelezen teken kost een sticker. */










.sku-preview {
  width: 100%; max-width: 360px; margin-top: 10px;
  border: 1px solid var(--mm-border); border-radius: var(--mm-r-md); background: #fff;
}

/* Printagent-status in de hoek. z-index 120 = boven de nav (95/96) maar onder de
   modals (999), zelfde afspraak als .mm-hoek-melding. */


/* ==========================================================================
   Vast internet — kostenvergelijking (/vast-internet)
   Twee kolommen: formulier links, het vel dat de klant meekrijgt rechts.
   Alles op --mm-*-tokens; het vel is het enige dat meegaat naar de printer.
   ========================================================================== */

/* Vaste breedte voor de bewaarstatus. .hero-actions is justify-content:flex-end,
   dus een pil die breder of smaller wordt schuift de hele knoppenrij op — en
   autosave wisselt die tekst tijdens het typen. Korte teksten alleen was niet
   genoeg: ook "Bewaren…" tegenover "Bewaren mislukt" scheelt zichtbaar. Nu is de
   ruimte gereserveerd en beweegt er niets meer. */
.vi-status { min-width: 180px; justify-content: center; text-align: center; }

.vi-werkblad {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.vi-formulier { display: flex; flex-direction: column; gap: 18px; }
/* Het vel blijft in beeld terwijl je onderin het formulier typt. Met een eigen
   scroll erin: bij twee aanbiedingen is het vel hoger dan het scherm, en zonder
   deze max-height blijft de onderkant (besparing, notitie, voet) onbereikbaar —
   die scrollt namelijk niet mee, hij plakt. */
.vi-vel-kolom {
  position: sticky; top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vi-regel-rij { display: grid; grid-template-columns: 1fr 110px auto auto; gap: 8px; align-items: center; }
.vi-regel-rij input { margin: 0; }
.vi-euro { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Het vel ────────────────────────────────────────────────────────────── */

.vi-vel {
  background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg); box-shadow: var(--mm-shadow-sm); overflow: hidden;
  font-size: 0.8125rem; color: var(--mm-text);
}
.vi-vel-kop {
  background: var(--mm-primary); color: var(--mm-text-inverse);
  padding: 20px 24px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
}
.vi-vel-kop h2 { font-size: 1.15rem; font-weight: 800; margin: 12px 0 4px; color: var(--mm-text-inverse); }
.vi-vel-kop p { font-size: 0.75rem; color: rgba(255, 255, 255, 0.78); max-width: 46ch; }
/* Het logo is blauw-op-wit, dus op de paarse kop hoort een wit vlakje eronder. */
.vi-logo { height: 30px; background: #fff; border-radius: var(--mm-r-md); padding: 5px 10px; display: block; }
.vi-score { text-align: right; font-size: 0.7rem; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.vi-score b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--mm-text-inverse); line-height: 1.1; }

.vi-klantstrook {
  display: flex; flex-wrap: wrap; gap: 6px 32px;
  padding: 12px 24px; background: var(--mm-surface-2); border-bottom: 1px solid var(--mm-border);
}
.vi-klantstrook span { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mm-text-muted); }
.vi-klantstrook b { font-weight: 700; }

.vi-vel-body { padding: 18px 24px 4px; }

.vi-blok { border: 1px solid var(--mm-border); border-radius: var(--mm-r-lg); margin-bottom: 14px; overflow: hidden; break-inside: avoid; }
.vi-blok-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; background: var(--mm-surface-2); }
.vi-blok-kop h3 { font-size: 0.9rem; font-weight: 800; color: var(--mm-primary); }
/* Logo + naam als één groep, zodat de tag rechts blijft staan. min-width:0 zodat
   een lange pakketnaam de tag niet van het blok af duwt. */
.vi-blok-titel { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Haarlijn tussen merk en kop: zonder scheiding plakt het providerlogo tegen
   onze eigen tekst aan en lijkt het één woordmerk. */
.vi-blok-titel .vi-provider-logo + h3 { padding-left: 10px; border-left: 1px solid var(--mm-border-strong); }

/* Hoogte per merk in plaats van één vaste maat: even hoog is hier niet even
   zwaar. Ziggo is een massief zwart woordmerk (1421×541), KPN heeft een kroon
   die hem optisch oprekt terwijl de letters maar de helft van de hoogte vullen
   (1280×584), en Odido is een brede band van vijf lichte vormen zonder tekst
   (543×144). Deze waarden komen uit op ongeveer gelijke breedtes — 37, 42 en
   45px — en daarmee op gelijk optisch gewicht naast de kop van 14px. */
.vi-provider-logo { height: 15px; width: auto; object-fit: contain; display: block; flex: none; }
.vi-provider-logo[data-provider="ziggo"] { height: 14px; }
.vi-provider-logo[data-provider="kpn"] { height: 19px; }
.vi-provider-logo[data-provider="odido"] { height: 12px; }

/* Partnerstrook onder aan het vel: dezelfde mededeling als de oude voetnoot
   ("Mobielmakers levert KPN, Ziggo en Odido"), maar als merken herkent de klant
   het in één oogopslag. */
.vi-partners { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 2px 2px 14px; }
.vi-partners-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mm-text-faint);
}
.vi-partners-logos { display: flex; align-items: center; gap: 18px; }
.vi-tag {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--mm-r-pill); background: var(--mm-primary); color: var(--mm-text-inverse);
}
.vi-tag-nu { background: var(--mm-text-muted); }
.vi-blok-regels { padding: 6px 14px 10px; }
.vi-blok-doorrekening { border-top: 1px solid var(--mm-border); }
.vi-rij { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px dashed var(--mm-border); }
.vi-rij:last-child { border-bottom: none; }
.vi-rij small { display: block; color: var(--mm-text-muted); font-size: 0.72rem; font-weight: 500; }
.vi-rij-stap { color: var(--mm-text-soft); }
/* De indexatie is een schatting, geen hard bedrag — dat moet je kunnen zien. */
.vi-rij-schatting { color: var(--mm-warning); font-style: italic; }
.vi-rij-optie > span:first-child::before { content: "Optioneel · "; color: var(--mm-primary); font-weight: 700; font-size: 0.72rem; }
.vi-bedrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.vi-totaal { display: flex; justify-content: space-between; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--mm-border); font-weight: 800; background: var(--mm-surface-2); }
.vi-totaal-groot { background: var(--mm-primary); color: var(--mm-text-inverse); font-size: 0.9rem; }

.vi-gratis { padding: 10px 14px 12px; border-top: 1px solid var(--mm-border); background: var(--mm-surface-2); }
.vi-gratis h4 { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mm-text-muted); margin-bottom: 6px; }
.vi-gratis ul { list-style: none; display: flex; flex-wrap: wrap; gap: 5px 6px; padding: 0; margin: 0; }
.vi-gratis li { font-size: 0.72rem; font-weight: 600; color: var(--mm-primary); background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-r-pill); padding: 3px 10px; }
.vi-gratis li::before { content: "\2713 "; color: var(--mm-accent); font-weight: 800; }

.vi-besparing {
  border: 2px solid var(--mm-accent); border-radius: var(--mm-r-lg); background: rgba(76, 177, 143, 0.08);
  padding: 16px 18px; margin-bottom: 14px; break-inside: avoid;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
}
/* Duurder is geen besparing: dan geen groen kader dat het tegendeel suggereert. */
.vi-besparing-neutraal { border-color: var(--mm-border-strong); background: var(--mm-surface-2); }
.vi-besparing h3 { font-size: 1rem; font-weight: 800; color: var(--mm-primary); margin-bottom: 3px; }
.vi-besparing p { color: var(--mm-text-muted); font-size: 0.75rem; max-width: 42ch; }
.vi-besparing-cijfers { text-align: right; }
.vi-besparing-cijfers div { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; font-size: 0.75rem; color: var(--mm-text-muted); }
.vi-besparing-cijfers div + div { margin-top: 4px; }
.vi-besparing-cijfers b { font-size: 1.2rem; font-weight: 800; color: var(--mm-accent); font-variant-numeric: tabular-nums; }
.vi-besparing-neutraal .vi-besparing-cijfers b { color: var(--mm-text-soft); }

.vi-notitie { font-size: 0.72rem; color: var(--mm-text-muted); padding: 0 2px 8px; }
.vi-notitie b { color: var(--mm-text); }

.vi-vel-voet {
  background: var(--mm-primary); color: rgba(255, 255, 255, 0.78);
  padding: 14px 24px; font-size: 0.7rem;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center;
}
.vi-vel-voet b { color: var(--mm-text-inverse); display: block; font-size: 0.75rem; margin-bottom: 2px; }
.vi-vel-cta { background: #fff; color: var(--mm-primary); font-weight: 800; border-radius: var(--mm-r-md); padding: 7px 12px; }

@media (max-width: 1100px) {
  .vi-werkblad { grid-template-columns: minmax(0, 1fr); }
  .vi-vel-kolom { position: static; }
}

/* ── Printen ────────────────────────────────────────────────────────────── */
/* Alleen het vel gaat mee naar de printer. Dit is de enige @media print in de
   app: alle andere print-uitvoer (stickers) gebeurt in een eigen iframe-document
   met een eigen @page, dus deze A4-regel raakt daar niets van. */
/* Marge rondom, bewust géén rand-tot-rand. Dat is op 2026-07-31 geprobeerd
   (margin: 0, zodat de gekleurde balken het papier raken) en weer teruggedraaid:
   zodra het vel over meer dan één pagina loopt gaat het mis. De tweede pagina
   begint dan strak tegen de bovenrand, en juist dáár valt de strook die een
   printer niet kan bedrukken over de tekst heen. Eén vel zag er goed uit, een
   vel met wat extra regels niet — en dat laatste is het normale geval. */
/* 25-09-2026: toch marge 0, maar nu mét een oplossing voor pagina 2. De reden:
   Chrome zet in de paginamarge zijn eigen kop- en voetregel — titel, datum en
   het portaaladres (mm-repairportal.vercel.app/...) — en dat stond zo op elk
   klantvel. Zonder marge is er geen plek voor, dus verdwijnt hij.
   De 12 mm komt terug als padding op .vi-vel hieronder, met
   box-decoration-break: clone. Dat laatste is het stuk dat de vorige keer
   ontbrak: zonder clone krijgt alleen de eerste pagina padding en plakt pagina 2
   weer tegen de rand. Nagemeten in Chrome 150 op een vel van vier pagina's: de
   tekst staat op elke pagina op exact dezelfde millimeter als met de oude marge,
   en de browserregel is weg. Safari kent clone alleen voor inline-elementen —
   daar kan pagina 2 weer dichter bij de rand komen; het portaal draait in
   Chrome of Edge. */
/* Portaalbreed, en dat mag: deze print-stylesheet verbergt alles behalve .vi-vel,
   dus een ander scherm met Ctrl+P levert toch al lege pagina's op. Een benoemde
   pagina (@page vel + page: vel) werkt hier niet — die telt alleen voor
   elementen in de normale stroom, en het vel staat bij het printen absoluut. */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  /* visibility (niet display) verbergt de rest zonder de boom om te gooien; het
     vel wordt daarna absoluut op de pagina gezet. Dat werkt alleen als er geen
     enkele gepositioneerde of ingesnoerde voorouder meer tussen zit — en die
     zijn er wél:
       body.mm-has-nav heeft padding-left 248px voor de sidebar, en
       .app-shell is position:relative met width min(1460px, 100% - 32px).
     Zonder deze resets hangt het vel aan .app-shell in plaats van aan de pagina
     en schuift het ~6,5 cm naar rechts, half buiten het papier. */
  body.mm-has-nav { padding-left: 0 !important; }
  .app-shell, .main-content, .vi-werkblad, .vi-vel-kolom {
    position: static !important;
    width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    max-height: none !important; overflow: visible !important;
  }
  body * { visibility: hidden; }
  .vi-vel, .vi-vel * { visibility: visible; }
  .vi-vel {
    position: absolute; left: 0; top: 0; width: 100%;
    border: none; border-radius: 0; box-shadow: none;
    /* De paginamarge, maar dan binnen het vel — zie @page hierboven. */
    padding: 12mm; box-sizing: border-box;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .vi-geen-print { display: none !important; }
  .vi-werkblad { display: block; }
  /* Kleurvlakken moeten mee de printer op, anders valt het vel uit elkaar. */
  .vi-vel-kop, .vi-totaal-groot, .vi-vel-voet, .vi-tag, .vi-provider-logo,
  .ma-tabel th, .ma-tegel, .ma-rij-advies td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   Mobiele abonnementen (/mobiele-abonnementen) — alleen wat vast internet nog
   niet had. Het vel zelf, de kop, de voet en de hele print-stylesheet zijn die
   van .vi-*: dezelfde A4, dezelfde marges, dezelfde kleurvlakken. Een tweede
   @media print-blok ernaast zou met het eerste gaan vechten over welk vel er op
   het papier hoort, dus dit scherm gebruikt bewust dezelfde klassen.
   ========================================================================== */

/* Formulier: een aansluiting is naam + bundel + bedrag + weg-knop. */
.ma-aansluiting-rij {
  display: grid; grid-template-columns: 1fr 130px 1fr 110px auto; gap: 8px; align-items: center;
}
.ma-aansluiting-rij input { margin: 0; }
/* Scenario-regel, zelfde vorm als een "Nu"-regel: wie (naam + 06-nummer, vast uit
   "Nu"), de bundel in dit scenario, het bedrag en weg. */
.ma-bedrag-rij {
  display: grid; grid-template-columns: 1fr 1fr 110px auto; gap: 8px; align-items: center;
  font-size: 0.85rem;
}
.ma-wie { display: flex; flex-direction: column; min-width: 0; }
.ma-wie small, .ma-tabel small { color: var(--mm-text-muted); font-size: 0.78em; font-variant-numeric: tabular-nums; }
.ma-tabel small { display: block; font-weight: 400; }
@media (max-width: 640px) {
  .ma-aansluiting-rij, .ma-bedrag-rij { grid-template-columns: 1fr 1fr; }
}
.ma-bedrag-rij input { margin: 0; }

/* Vel: de tegelstrook met de totalen. Wat de klant als eerste ziet, en vaak het
   enige wat hij onthoudt — vandaar het bedrag groot en de rest klein. */
.ma-tegels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.ma-tegel {
  background: var(--mm-surface-2); border-radius: var(--mm-r-lg);
  padding: 10px 12px; text-align: center;
}
.ma-tegel span { display: block; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mm-text-muted, #625a72); }
.ma-tegel b { display: block; font-size: 1.05rem; font-weight: 800; margin: 2px 0; color: var(--mm-primary, #5b3fa8); }
.ma-tegel small { font-size: 0.66rem; color: var(--mm-text-muted, #625a72); }
.ma-tegel-advies { outline: 2px solid var(--mm-primary, #5b3fa8); outline-offset: -2px; }

/* Vel: de matrix. Bewust een echte <table> en geen grid — dit is tabeldata, en
   bij het printen mag een rij niet halverwege over de paginarand vallen. */
.ma-tabel { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.ma-tabel th {
  text-align: left; font-weight: 700; padding: 6px 8px;
  background: var(--mm-primary, #5b3fa8); color: var(--mm-text-inverse, #fff);
  white-space: nowrap;
}
.ma-tabel th:first-child { border-top-left-radius: 6px; }
.ma-tabel th:last-child { border-top-right-radius: 6px; }
.ma-tabel td { padding: 6px 8px; border-bottom: 1px solid var(--mm-border, #e6e1ef); vertical-align: top; }
.ma-tabel tr { break-inside: avoid; }
.ma-tabel .vi-bedrag { text-align: right; white-space: nowrap; }
.ma-rij-advies td { background: var(--mm-surface-2); }
.ma-rij-advies .vi-tag { margin-left: 6px; }
.ma-besparing { color: var(--mm-success, #1f7a4d); font-weight: 700; }
.ma-duurder { color: var(--mm-danger, #b3261e); font-weight: 700; }

.ma-uitgangspunt { font-size: 0.72rem; color: var(--mm-text-muted, #625a72); margin: 0 0 8px; }
.ma-advies { font-size: 0.78rem; margin: 0; }
.ma-voetnoot { font-size: 0.64rem; color: var(--mm-text-muted, #625a72); margin: 12px 0 4px; }

/* ==========================================================================
   Trade-in-uitleg: de (i)-knop op Aanmelden online + de scrollbare
   handleiding-modal (TradeInUitlegModal). Sinds 2026-09-01 gedeeld met
   RmaOverviewUitlegModal (/rma-overview): 19 van deze klassen waren identiek aan de
   ipu-variant, dus een derde bijna-gelijke kopie was zonde. De prefix tiu- is
   daarmee historisch, niet screen-specifiek. Prefix tiu- zodat dit blok niets
   raakt van de echte formulier-styling die hier wordt nagebootst.
   ========================================================================== */

/* Rond (i)-knopje naast de paginatitel. Bewust geen .button: die is te zwaar
   (padding/schaduw) voor een icoon in een h1. */
/* Hulpknop: grote ronde pasfoto (avatar) met een spraakwolkje "Hulp nodig?"
   ernaast — bewust opvallend. Transparante knop; alle vorm zit in de
   .info-knop-* hieronder, identiek gedeeld met .ipu-info-knop. */
.tiu-info-knop {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  margin-left: 12px; vertical-align: middle;
  padding: 0; border: 0; background: none; cursor: pointer;
}

/* De modal-inhoud: iets kleinere lettergrootte dan de app zelf, het is leestekst. */
.tiu-body { font-size: 0.92rem; line-height: 1.55; }
.tiu-body p { margin: 0 0 12px; }
.tiu-body .section-label { margin-top: 22px; }

/* Flow-strip bovenin: de route in één regel. */
.tiu-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 18px; }
.tiu-flow-chip {
  background: var(--mm-primary-soft); color: var(--mm-primary);
  font-size: 0.76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.tiu-flow-pijl { color: var(--mm-text-muted); }

/* Nagebootst scherm: lavendel vlak met witte mini-panelen erin. */
.tiu-mock { background: var(--mm-surface-2); border-radius: var(--mm-r-lg); padding: 14px; margin: 0 0 14px; }
.tiu-mock-panel { background: var(--mm-surface); border-radius: var(--mm-r-lg); padding: 14px 16px; box-shadow: var(--mm-shadow-sm); min-width: 0; }
.tiu-mock-panel + .tiu-mock-panel { margin-top: 12px; }
.tiu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .tiu-grid { grid-template-columns: 1fr; } }

/* Statische veld-imitaties — geen echte inputs, dus niets focusbaar/klikbaar. */
.tiu-veldnaam { font-size: 0.78rem; font-weight: 700; margin: 12px 0 4px; }
.tiu-input {
  display: block; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-r-md);
  padding: 6px 11px; font-size: 0.8rem; color: var(--mm-text-faint); background: var(--mm-bg);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tiu-caret { float: right; color: var(--mm-text-faint); margin-left: 8px; }
.tiu-imei-rij { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.tiu-imei-rij .tiu-input { flex: 1; min-width: 130px; }
.tiu-hint { font-size: 0.72rem; color: var(--mm-text-muted); margin: 6px 0 0; }
.tiu-check { display: flex; gap: 8px; align-items: center; font-size: 0.8rem; margin: 0; }
.tiu-box { width: 14px; height: 14px; flex: none; border: 1.5px solid var(--mm-text-muted); border-radius: 4px; background: var(--mm-bg); }
.tiu-dot { width: 13px; height: 13px; flex: none; margin-top: 3px; border: 1.5px solid var(--mm-text-muted); border-radius: 999px; background: var(--mm-bg); }
.tiu-radio { display: flex; gap: 9px; font-size: 0.8rem; margin: 0; }
.tiu-radio small { display: block; color: var(--mm-text-muted); font-size: 0.72rem; line-height: 1.45; margin-top: 2px; }

/* Overzichtsregel + opengeklapte kaart. */
.tiu-rij {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg); padding: 9px 13px; margin-top: 8px;
  font-size: 0.78rem; color: var(--mm-text-muted);
}
.tiu-rij b { color: var(--mm-text); font-weight: 700; }
.tiu-rij .tiu-caret { margin-left: auto; }
.tiu-dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 20px; font-size: 0.78rem; margin: 0; }
.tiu-dl dt { color: var(--mm-text-muted); white-space: nowrap; }
.tiu-dl dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* Rode annotaties: bewust géén portal-kleur (mm-danger is roze en betekent
   "gevaar") — dit rood betekent "kijk, uitleg", los van de UI zelf. */
.tiu-n {
  width: 21px; height: 21px; flex: none; border-radius: 999px;
  background: #d92d20; color: #ffffff;
  font-size: 0.74rem; font-weight: 800; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}
.tiu-ring { position: relative; display: block; outline: 2px dashed #d92d20; outline-offset: 5px; border-radius: var(--mm-r-md); margin: 20px 8px 10px; }
.tiu-ring-inline { display: inline-block; }
.tiu-ring > .tiu-n { position: absolute; top: -14px; left: -16px; z-index: 2; box-shadow: 0 0 0 3px var(--mm-surface); }

.tiu-legenda { list-style: none; padding: 0; margin: 0 0 8px; }
.tiu-legenda li { display: flex; gap: 11px; margin-bottom: 8px; }
.tiu-legenda .tiu-n { margin-top: 2px; }

/* Meldingen-tabel onderin de uitleg. */
.tiu-tabelwrap { overflow-x: auto; border: 1px solid var(--mm-border); border-radius: var(--mm-r-lg); }
.tiu-tabel { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.tiu-tabel th, .tiu-tabel td { text-align: left; padding: 9px 12px; vertical-align: top; border-top: 1px solid var(--mm-border); }
.tiu-tabel thead th {
  border-top: none; background: var(--mm-surface-2); color: var(--mm-text-muted);
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.tiu-tabel td:first-child { min-width: 220px; }
.tiu-melding { color: var(--mm-text-muted); font-style: italic; }

/* ==========================================================================
   Inkooppartijen-uitleg (E-commerce): de (i)-knop op Inkooppartijen + de
   scrollbare handleiding-modal (InkoopPartijenUitlegModal). Prefix ipu- zodat
   dit blok niets raakt van de echte module-styling die hier wordt nagebootst.
   Bewust een eigen prefix en géén hergebruik van tiu-: dat blok is van de
   Trade-in-uitleg en mag onafhankelijk kunnen wijzigen. Annotatierood #d92d20
   is bewust géén portal-kleur (mm-danger is roze = "gevaar").
   ========================================================================== */

/* Rond (i)-knopje naast de paginatitel — zelfde vorm als bij Trade-in. */
/* Zie .tiu-info-knop: grote avatar + spraakwolkje "Hulp nodig?". */
.ipu-info-knop {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  margin-left: 12px; vertical-align: middle;
  padding: 0; border: 0; background: none; cursor: pointer;
}

/* Gedeeld door beide hulpknoppen (Inkooppartijen + Trade-in). De pasfoto toont
   als grote ronde avatar; laadt-ie niet (foto nog niet in public/assets), dan
   zet onError .info-knop--geen-foto en valt de knop terug op de serif-"i". */
.info-knop-selfie {
  width: 46px; height: 46px; flex: none; display: block;
  border-radius: 999px; object-fit: cover;
  border: 2px solid var(--mm-primary);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}
.info-knop-i {
  display: none; /* alleen zichtbaar als de foto niet laadt */
  align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 999px; border: 2px solid var(--mm-primary);
  color: var(--mm-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem; font-weight: 800; font-style: italic; line-height: 1;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}
.info-knop--geen-foto .info-knop-selfie { display: none; }
.info-knop--geen-foto .info-knop-i { display: inline-flex; }

/* Het spraakwolkje: gevuld met de accentkleur + wit, met een pijltje dat naar
   de avatar wijst. Bewust opvallend zodat de hulpknop niet wegvalt. */
.info-knop-tekst {
  position: relative;
  background: var(--mm-primary); color: #ffffff;
  font-size: 0.84rem; font-weight: 800; letter-spacing: -0.01em;
  white-space: nowrap;
  padding: 7px 13px; border-radius: 13px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}
.info-knop-tekst::before {
  content: ""; position: absolute; left: -6px; top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-right: 7px solid var(--mm-primary);
}

/* Een beetje leven bij hover (avatar wipt op, wolkje licht op). */
.info-knop-selfie, .info-knop-i, .info-knop-tekst {
  transition: transform 0.12s ease, filter 0.12s ease;
}
.info-knop:hover .info-knop-selfie,
.info-knop:hover .info-knop-i { transform: scale(1.06); }
.info-knop:hover .info-knop-tekst { filter: brightness(1.08); }

/* Leestekst: iets kleiner dan de app zelf. */
.ipu-body { font-size: 0.92rem; line-height: 1.55; }
.ipu-body p { margin: 0 0 12px; }
.ipu-body .section-label { margin-top: 22px; }
.ipu-h3 { font-size: 1.0rem; font-weight: 800; margin: 22px 0 6px; letter-spacing: -0.01em; }
.ipu-lead { color: var(--mm-text-soft); }

/* Flow-strip: de route in één regel. */
.ipu-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 18px; }
.ipu-flow-chip {
  background: var(--mm-primary-soft); color: var(--mm-primary);
  font-size: 0.76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.ipu-flow-pijl { color: var(--mm-text-muted); }

/* Drie grote ideeën. */
.ipu-ideeen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; }
@media (max-width: 720px) { .ipu-ideeen { grid-template-columns: 1fr; } }
.ipu-idee { background: var(--mm-surface); border: 1px solid var(--mm-border); border-top: 3px solid var(--mm-primary); border-radius: var(--mm-r-lg); padding: 13px 14px; }
.ipu-idee h4 { color: var(--mm-primary); font-size: 0.9rem; font-weight: 800; margin: 0 0 4px; }
.ipu-idee p { font-size: 0.8rem; color: var(--mm-text-soft); margin: 0; }

/* Nagebootst scherm: lavendel vlak met witte mini-panelen. */
.ipu-mock { background: var(--mm-surface-2); border-radius: var(--mm-r-lg); padding: 14px; margin: 0 0 14px; }
.ipu-panel { background: var(--mm-surface); border-radius: var(--mm-r-lg); padding: 14px 16px; box-shadow: var(--mm-shadow-sm); min-width: 0; }
.ipu-panel-smal { max-width: 460px; margin: 0 auto; }
.ipu-mock > .ipu-panel + .ipu-panel { margin-top: 12px; }
/* Groepsrij in de nagebootste toestellentabel (2026-10-15): dezelfde balk als op het werkstation. */
.ipu-tabel tr.ipu-groep td { background: var(--mm-surface-2); box-shadow: inset 3px 0 0 var(--mm-primary); color: var(--mm-primary); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ipu-tabel tr.ipu-groep--afgerond td { box-shadow: inset 3px 0 0 var(--mm-success); color: var(--mm-success); }
.ipu-tabel tr.ipu-groep--afgekeurd td { box-shadow: inset 3px 0 0 var(--mm-danger); color: var(--mm-danger); }
.ipu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .ipu-grid { grid-template-columns: 1fr; } }
.ipu-knoprij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Statische veld-imitaties — geen echte inputs. */
.ipu-veldnaam { font-size: 0.78rem; font-weight: 700; margin: 12px 0 4px; }
.ipu-input {
  display: block; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-r-md);
  padding: 6px 11px; font-size: 0.8rem; color: var(--mm-text-faint); background: var(--mm-bg);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ipu-caret { float: right; color: var(--mm-text-faint); margin-left: 8px; }
.ipu-veldrij { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.ipu-veldrij .ipu-input { flex: 1; min-width: 130px; }
.ipu-hint { font-size: 0.72rem; color: var(--mm-text-muted); margin: 6px 0 0; }

/* Rode annotaties. */
.ipu-n {
  width: 21px; height: 21px; flex: none; border-radius: 999px;
  background: #d92d20; color: #ffffff;
  font-size: 0.74rem; font-weight: 800; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}
.ipu-ring { position: relative; display: block; outline: 2px dashed #d92d20; outline-offset: 5px; border-radius: var(--mm-r-md); margin: 22px 10px 12px; }
.ipu-ring > .ipu-n { position: absolute; top: -14px; left: -16px; z-index: 2; box-shadow: 0 0 0 3px var(--mm-surface); }

.ipu-legenda { list-style: none; padding: 0; margin: 0 0 8px; }
.ipu-legenda li { display: flex; gap: 11px; margin-bottom: 8px; }
.ipu-legenda .ipu-n { margin-top: 2px; }

/* Nagebootste tabel (Gescand) + meldingen-tabel. */
.ipu-tabelwrap { overflow-x: auto; border: 1px solid var(--mm-border); border-radius: var(--mm-r-lg); }
.ipu-tabel { border-collapse: collapse; width: 100%; font-size: 0.78rem; }
.ipu-tabel th, .ipu-tabel td { text-align: left; padding: 8px 10px; vertical-align: middle; border-top: 1px solid var(--mm-border); }
.ipu-tabel thead th {
  border-top: none; background: var(--mm-surface-2); color: var(--mm-text-muted);
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.ipu-tabel-gescand { min-width: 640px; }
.ipu-tabel-gescand td { white-space: nowrap; }
.ipu-sku { color: var(--mm-primary); font-weight: 700; font-family: var(--mm-mono, ui-monospace, monospace); }
.ipu-muted { color: var(--mm-text-faint); }
.ipu-melding { color: var(--mm-text-muted); font-style: italic; }
.ipu-tabel-meld td:first-child { min-width: 220px; }

/* Nep-knoppen in de nagebootste actiekolom (klein). */
.ipu-btn-mini { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-r-md); font-size: 0.72rem; color: var(--mm-text-soft); }
.ipu-btn-grijs { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--mm-border); border-radius: var(--mm-r-md); font-size: 0.72rem; color: var(--mm-text-faint); }

/* =====================================================================
   DARKMODE — resterende hardcoded witte/lavendel vlakken
   ---------------------------------------------------------------------
   Deze klassen zitten in de niet-gemigreerde helft van dit bestand (vóór
   de BOLD LIGHT THEME-tokenlaag) en verven hun achtergrond met een letterlijk
   wit/lavendel gradient i.p.v. --mm-surface. Additief en alléén onder
   data-theme="dark", zodat de lichte variant exact hetzelfde blijft —
   zie ook .repair-accordion (reparatiekaart-panelen ÉN Toestelbeheer-groepen,
   ToestelbeheerTab.tsx hergebruikt dezelfde klasse) en .vz-tab.is-active
   (dashboard-takenfilter + reparatiebeheer-instroomtabs, allebei .vz-tab).
   ===================================================================== */
html[data-theme="dark"] .m360-status-button {
  background: var(--mm-surface);
}
/* .label-preview-main/.label-preview-qr/.qr-box blijven bewust wit: dat is
   geen thema-paneel maar een 1:1-preview van de fysieke witte sticker.
   Maar de tekst eróp erft in dark mode de lichte --text/--text-soft en wordt
   dan onleesbaar op dat witte vlak (nummer + qr-code-tekst waren vrijwel weg,
   de notes-regel vervaagd). De sticker is thema-onafhankelijk wit, dus pin de
   tekst vast op donker — zelfde vaste hexen als de model/repair-regels, zodat
   dark exact als light oogt op de sticker. */
html[data-theme="dark"] .label-preview-number,
html[data-theme="dark"] .qr-code-text {
  color: #1a1438;
}
html[data-theme="dark"] .label-preview-notes {
  color: #4a4068;
}

/* ---- Overige panelen/velden die in light hardcoded licht waren en in dark
   bleven hangen. Solide witte vlakken zijn in de basisregel al naar
   var(--surface) gezet (light identiek); hieronder alleen de gevallen met een
   niet-witte of translucente basiswaarde, die we in light bewust ongemoeid
   laten. ---- */

/* ═══ MM Intern — rustige schermlaag voor klantretouren, Reparatie urgent, Aanvechten en
   OSS (Loek 2026-09-24, naar PROMPT.md + mm-intern.css). Alles is gescoped onder .mm en de
   tokens heten --mmi-*: de portaal-:root gebruikt zelf al --bg/--border/--danger, en een
   ongeprefixte kopie zou elders in het portaal kleuren omzetten. De tokens wijzen naar de
   --mm-*-laag van het portaal, dus lettertype, merkpaars en dark mode komen gratis mee.
   Een popup rendert via een portal buiten de wrapper: geef de modal-inhoud zelf .mm. */
.mm {
  --mmi-bg: var(--mm-bg); --mmi-surface: var(--mm-surface); --mmi-surface-tint: var(--mm-surface-2);
  --mmi-border: var(--mm-border); --mmi-border-strong: var(--mm-border-strong);
  --mmi-ink: var(--mm-text); --mmi-ink-soft: var(--mm-text-soft); --mmi-muted: var(--mm-text-muted);
  --mmi-primary: var(--mm-primary); --mmi-primary-hover: var(--mm-primary-hover); --mmi-primary-soft: var(--mm-primary-soft);
  --mmi-primary-ink: var(--mm-primary); --mmi-step-idle: var(--mm-surface-3);
  --mmi-disabled-bg: var(--mm-surface-2); --mmi-disabled-ink: var(--mm-text-faint);
  --mmi-success: var(--mm-success); --mmi-success-soft: var(--mm-success-soft);
  --mmi-warning: var(--mm-warning); --mmi-warning-soft: var(--mm-warning-soft);
  --mmi-danger: var(--mm-danger); --mmi-danger-hover: var(--mm-danger-hover); --mmi-danger-soft: var(--mm-danger-soft);
  --mmi-focus: var(--mm-primary-glow);
  --mmi-radius-sm: 6px; --mmi-radius-md: 10px;
  --mmi-shadow-card: var(--mm-shadow-sm); --mmi-shadow-active: 0 0 0 3px var(--mm-primary-soft);
  --mmi-font-mono: var(--mm-font-mono);
  font-size: 14px; line-height: 20px; color: var(--mmi-ink-soft);
  display: grid; gap: 16px; min-width: 0;
}
.mm, .mm * { box-sizing: border-box; }
.mm--flat { display: block; } /* modal-inhoud: tokens wel, grid niet */

/* Knoppen */
.mm .mm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: var(--mmi-radius-sm); font-family: inherit; font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; transition: background .12s, border-color .12s, color .12s; }
.mm .mm-btn:focus-visible, .mm .mm-back:focus-visible, .mm .mm-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-btn svg { width: 16px; height: 16px; flex: none; }
.mm .mm-btn--sm { height: 28px; padding: 0 12px; font-size: 13px; gap: 6px; }
.mm .mm-btn--sm svg { width: 14px; height: 14px; }
.mm .mm-btn--primary { background: var(--mmi-primary); color: var(--mm-text-inverse); }
.mm .mm-btn--primary:hover { background: var(--mmi-primary-hover); }
.mm .mm-btn--secondary { background: var(--mmi-surface); color: var(--mmi-ink); border-color: var(--mmi-border-strong); }
.mm .mm-btn--secondary:hover { background: var(--mmi-surface-tint); border-color: var(--mmi-muted); }
.mm .mm-btn--ghost { background: transparent; color: var(--mmi-primary); padding: 0 8px; }
.mm .mm-btn--ghost:hover { background: var(--mmi-primary-soft); }
.mm .mm-btn--danger { background: var(--mmi-surface); color: var(--mmi-danger); border-color: var(--mmi-danger); }
.mm .mm-btn--danger:hover { background: var(--mmi-danger-soft); color: var(--mmi-danger-hover); border-color: var(--mmi-danger-hover); }
.mm .mm-btn--danger-solid { background: var(--mmi-danger); color: #fff; }
.mm .mm-btn--danger-solid:hover { background: var(--mmi-danger-hover); }
.mm .mm-btn[disabled], .mm .mm-btn[aria-disabled="true"] { background: var(--mmi-disabled-bg); color: var(--mmi-disabled-ink); border-color: transparent; cursor: not-allowed; }
.mm .mm-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm .mm-actions--end { justify-content: flex-end; }
.mm .mm-hint { font-size: 12px; line-height: 16px; color: var(--mmi-muted); }

/* Badges */
.mm .mm-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: var(--mmi-step-idle); color: var(--mmi-ink-soft); }
.mm .mm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mm .mm-badge--binnen, .mm .mm-badge--info { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); }
.mm .mm-badge--nu { background: var(--mmi-primary); color: var(--mm-text-inverse); }
.mm .mm-badge--nu::before { display: none; }
.mm .mm-badge--ok { background: var(--mmi-success-soft); color: var(--mmi-success); }
.mm .mm-badge--let-op { background: var(--mmi-warning-soft); color: var(--mmi-warning); }
.mm .mm-badge--fout { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-badge--neutraal { background: var(--mmi-step-idle); color: var(--mmi-ink-soft); }

/* Kaart */
.mm .mm-card { background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md);
  box-shadow: var(--mmi-shadow-card); padding: 24px; min-width: 0; }
.mm .mm-card--tint { background: var(--mmi-surface-tint); }
.mm .mm-card--active { border-color: var(--mmi-primary); box-shadow: var(--mmi-shadow-active); }
.mm .mm-card--done { background: var(--mmi-surface-tint); }
.mm .mm-card--compact { padding: 16px 24px; }
.mm .mm-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.mm .mm-card__head:last-child { margin-bottom: 0; }
.mm .mm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--mmi-border); flex-wrap: wrap; }
.mm .mm-card__foot > :only-child { margin-left: auto; }
.mm .mm-card__foot > .mm-notice { flex-basis: 100%; } /* fout bij de knop (StapVoet): eigen regel boven de knoppen */
.mm .mm-eyebrow { margin: 0 0 2px; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-title { margin: 0; font-weight: 650; font-size: 16px; line-height: 22px; color: var(--mmi-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm .mm-title-lg { margin: 0; font-weight: 700; font-size: 24px; line-height: 30px; color: var(--mmi-ink); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm .mm-code { font-family: var(--mmi-font-mono); font-weight: 500; font-size: 13px; line-height: 20px; color: var(--mmi-ink); }
.mm .mm-muted { color: var(--mmi-muted); }
.mm .mm-sep { color: var(--mmi-border-strong); }
.mm .mm-summary { margin: 4px 0 0; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-check-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); font-size: 12px; }

/* Kopkaart */
.mm .mm-back { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-primary); text-decoration: none; margin-bottom: 12px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.mm .mm-back:hover { text-decoration: underline; }
.mm .mm-back svg { width: 14px; height: 14px; }
.mm .mm-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mm .mm-header .mm-sub { margin: 4px 0 0; font-size: 13px; color: var(--mmi-muted); }

/* Stepper */
.mm .mm-stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.mm .mm-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.mm .mm-step::before { content: ""; position: absolute; top: 14px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--mmi-step-idle); }
.mm .mm-step:first-child::before { display: none; }
.mm .mm-step__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 600; font-size: 13px; line-height: 1; background: var(--mmi-step-idle); color: var(--mmi-muted); }
.mm .mm-step__label { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-step__meta { font-size: 12px; line-height: 16px; color: var(--mmi-muted); min-height: 16px; }
.mm .mm-step--done::before, .mm .mm-step--current::before { background: var(--mmi-primary); }
.mm .mm-step--done .mm-step__dot { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); }
.mm .mm-step--done .mm-step__label { color: var(--mmi-ink-soft); }
.mm .mm-step--current .mm-step__dot { background: var(--mmi-primary); color: var(--mm-text-inverse); box-shadow: 0 0 0 4px var(--mmi-primary-soft); }
.mm .mm-step--current .mm-step__label { color: var(--mmi-ink); font-weight: 650; }

/* Key/waarde-lijst */
.mm .mm-dl { display: grid; grid-template-columns: 180px 1fr auto; margin: 0; }
.mm .mm-dl > dt, .mm .mm-dl > dd { margin: 0; padding: 12px 0; border-top: 1px dashed var(--mmi-border-strong); display: flex; align-items: center; gap: 8px; min-height: 48px; min-width: 0; }
.mm .mm-dl > dt:first-of-type, .mm .mm-dl > dt:first-of-type + dd, .mm .mm-dl > dt:first-of-type + dd + dd { border-top: 0; }
.mm .mm-dl > dt { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-dl > dd { color: var(--mmi-ink); flex-wrap: wrap; }
.mm .mm-dl > dd.mm-dl__act { justify-content: flex-end; padding-left: 16px; }
/* Feitengrid (Loek 2026-10-06, intake): korte feiten naast elkaar in plaats van een rij per feit.
   Drie kolommen, op een telefoon twee (ontwerp 2026-10-06). */
.mm .mm-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
@media (max-width: 640px) { .mm .mm-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm .mm-feit { display: grid; gap: 4px; min-width: 0; align-content: start; }
.mm .mm-feit > dt { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--mmi-muted); }
.mm .mm-feit > dd { margin: 0; color: var(--mmi-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }

/* ── Intake-bouwstenen (Loek 2026-10-06, ontwerp Claude Design "Nieuwe klantretour") ─────────── */
/* Groot scanveld (48px, mono) met icoon links en een statusbadge rechts in het veld. */
.mm .mm-scanveld { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; }
.mm .mm-scanveld > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--mmi-muted); pointer-events: none; }
.mm .mm-input--lg { height: 48px; font-size: 16px; font-family: var(--mmi-font-mono); }
.mm .mm-scanveld > svg + .mm-input--lg { padding-left: 42px; }
.mm .mm-scanveld__status { position: absolute; right: 10px; }
.mm .mm-scanveld__kort { display: none; }
@media (max-width: 640px) { .mm .mm-scanveld__lang { display: none; } .mm .mm-scanveld__kort { display: inline; } }
.mm .mm-input--ok { border-color: var(--mmi-success); }
.mm .mm-input--let-op { border-color: var(--mmi-warning); box-shadow: 0 0 0 3px var(--mmi-warning-soft); }
.mm .mm-input--fout { border-color: var(--mmi-danger); box-shadow: 0 0 0 3px var(--mmi-danger-soft); }
.mm .mm-btn--lg { height: 48px; padding: 0 20px; }
/* Melding met icoon (oranje standaard; info = indigo, fout = rood). */
.mm .mm-alert { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: var(--mmi-radius-sm); background: var(--mmi-warning-soft); color: var(--mmi-warning); font-size: 13px; line-height: 18px; }
.mm .mm-alert > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.mm .mm-alert b, .mm .mm-alert strong { font-weight: 650; }
.mm .mm-alert--info { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); }
.mm .mm-alert--fout { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-alert ul { margin: 6px 0 0; padding-left: 18px; }
/* Tussenkop binnen een kaart, met een dunne lijn erboven. */
.mm .mm-subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--mmi-border); }
.mm .mm-subhead > h3 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 650; color: var(--mmi-ink); }
.mm .mm-subhead > span { font-size: 12px; color: var(--mmi-muted); }
/* "Uit M360" / "Uit register" naast een label: dit veld is automatisch ingevuld. */
.mm .mm-auto { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 6px; border-radius: 4px; background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
/* Eyebrow van een afgeronde stap: groen met vinkje. */
.mm .mm-eyebrow--klaar { color: var(--mmi-success); display: inline-flex; align-items: center; gap: 4px; }
.mm .mm-eyebrow--klaar svg { width: 12px; height: 12px; }
/* Klikbare kaart met checkbox; aangevinkt licht-indigo. */
.mm .mm-checkcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); cursor: pointer; }
.mm .mm-checkcard:has(input:checked) { background: var(--mmi-primary-soft); border-color: var(--mmi-primary); }
.mm .mm-checkcard input { margin-top: 2px; width: 16px; height: 16px; flex: none; }
.mm .mm-checkcard b { display: block; font-size: 14px; font-weight: 650; color: var(--mmi-ink); }
.mm .mm-checkcard small { display: block; margin-top: 2px; font-size: 13px; color: var(--mmi-muted); }
/* Voetbalk met de vereisten links en de enige primaire knop rechts; plakt onderaan. */
.mm .mm-footbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); padding: 12px 16px; box-shadow: var(--mmi-shadow-card); }
.mm .mm-footbar--sticky { position: sticky; bottom: 12px; z-index: 5; }
.mm .mm-footbar__eisen { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-footbar__eisen li { display: inline-flex; align-items: center; gap: 6px; }
.mm .mm-footbar__eisen li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--mmi-border-strong); }
.mm .mm-footbar__eisen li.is-klaar { color: var(--mmi-success); }
.mm .mm-footbar__eisen li.is-klaar::before { content: "✓"; border: 0; width: auto; height: auto; font-size: 12px; font-weight: 700; }
.mm .mm-footbar__actie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
/* Klikbare stepper (intake): de knop neemt de opmaak van de stap over. */
.mm .mm-step__knop { display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; border-radius: var(--mmi-radius-sm); }
.mm .mm-step__knop:focus-visible { outline: 2px solid var(--mmi-primary); outline-offset: 4px; }
@media (max-width: 640px) { .mm .mm-step__knop { grid-template-columns: 28px 1fr; justify-items: start; column-gap: 12px; } .mm .mm-step__knop .mm-step__meta { grid-column: 2; } }
/* Verkoop aan een andere klant in de tijdlijn: rood. */
.mm .mm-tl-waarschuwing { color: var(--mmi-danger); font-weight: 650; }
@media (max-width: 640px) { .mm .mm-footbar { flex-direction: column; align-items: stretch; } .mm .mm-footbar__actie { justify-content: stretch; } }

/* Formulier */
.mm .mm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mm .mm-fields--3 { grid-template-columns: repeat(3, 1fr); }
.mm .mm-stack { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } /* minmax: een breed kind (bv. de M360-knop) rekte de kolom anders buiten de kaart (intake op mobiel, 2026-10-06) */
.mm .m360-status-button { white-space: normal; text-align: left; min-width: 0; }
.mm .mm-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.mm .mm-field > label, .mm .mm-field > .mm-label { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-req { color: var(--mmi-danger); margin-left: 2px; }
.mm .mm-select, .mm .mm-input { height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm);
  background-color: var(--mmi-surface); color: var(--mmi-ink); font-family: inherit; font-size: 14px; line-height: 20px; }
.mm .mm-select { padding-right: 36px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mmi-muted) 50%), linear-gradient(135deg, var(--mmi-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.mm .mm-select:focus, .mm .mm-input:focus { outline: none; border-color: var(--mmi-primary); box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-select.is-empty, .mm .mm-input::placeholder { color: var(--mmi-muted); }
.mm .mm-select:disabled, .mm .mm-input:disabled { background-color: var(--mmi-disabled-bg); color: var(--mmi-disabled-ink); cursor: not-allowed; }
.mm .mm-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--mmi-ink-soft); cursor: pointer; }
.mm .mm-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--mmi-primary); flex: none; }
.mm .mm-check small { display: block; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }

/* Meldingen */
.mm .mm-notice { margin: 0; padding: 12px 16px; border-radius: var(--mmi-radius-sm); font-size: 13px; line-height: 18px; background: var(--mmi-surface-tint); color: var(--mmi-ink-soft); border: 1px solid var(--mmi-border); }
.mm .mm-notice--info { background: var(--mmi-primary-soft); border-color: transparent; color: var(--mmi-ink); }
.mm .mm-notice--ok { background: var(--mmi-success-soft); border-color: transparent; color: var(--mmi-ink); }
.mm .mm-notice--let-op { background: var(--mmi-warning-soft); border-color: transparent; color: var(--mmi-ink); }
.mm .mm-notice--fout { background: var(--mmi-danger-soft); border-color: transparent; color: var(--mmi-danger); }
/* Melding met sluitknop rechts (Externe reparaties, UX-ronde 2026-11-09): de ✕ mag de regelhoogte niet oprekken. */
.mm .mm-notice--sluitbaar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 8px; }
.mm .mm-notice--sluitbaar .mm-sluit { width: 24px; height: 24px; margin: -3px 0; color: inherit; }
.mm .mm-notice--sluitbaar .mm-sluit svg { width: 14px; height: 14px; }

/* Tijdlijn */
.mm .mm-timeline { list-style: none; margin: 0; padding: 0; }
.mm .mm-timeline li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 0; }
.mm .mm-timeline li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mmi-border-strong); transform: translateY(-1px); }
.mm .mm-timeline li.is-status::before { background: var(--mmi-primary); }
.mm .mm-timeline .mm-when { font-size: 12px; color: var(--mmi-muted); white-space: nowrap; }
.mm .mm-timeline b { color: var(--mmi-ink); font-weight: 600; }
.mm .mm-count { font-weight: 600; font-size: 11px; line-height: 16px; color: var(--mmi-muted); background: var(--mmi-step-idle); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }

/* Gevarenzone */
.mm .mm-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border: 1px dashed var(--mmi-border-strong); border-radius: var(--mmi-radius-md); }
.mm .mm-danger-zone p { margin: 0; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-danger-zone b { color: var(--mmi-ink-soft); font-weight: 600; }

/* Tabs (lijstschermen) */
.mm .mm-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--mmi-border); margin-bottom: 16px; }
.mm .mm-tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--mmi-muted); font-family: inherit; font-weight: 500; font-size: 14px; cursor: pointer; }
.mm .mm-tab:hover { color: var(--mmi-ink); }
.mm .mm-tab.is-active, .mm .mm-tab[aria-selected="true"] { color: var(--mmi-ink); font-weight: 650; border-bottom-color: var(--mmi-primary); }
.mm .mm-tab .mm-count { margin-left: 0; }
.mm .mm-tab.is-active .mm-count, .mm .mm-tab[aria-selected="true"] .mm-count { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); }

/* Tabel */
.mm .mm-table-wrap { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
.mm .mm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mm .mm-table th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mmi-muted); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--mmi-border); white-space: nowrap; }
.mm .mm-table td { padding: 12px 12px 12px 0; border-bottom: 1px dashed var(--mmi-border); color: var(--mmi-ink); vertical-align: middle; }
.mm .mm-table tr:last-child td { border-bottom: 0; }
.mm .mm-table tr.is-klikbaar { cursor: pointer; }
.mm .mm-table tr.is-klikbaar:hover td { background: var(--mmi-surface-tint); }
.mm .mm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Groepkop in een lijst (Klantretouren: Reparatie / Overig, per uitkomst — Loek 2026-09-25). */
/* Groepsrij als getinte balk met een merkstreep links: alleen een kopje in hoofdletters viel weg
   tussen de rijen, je zag niet waar een groep begon (feedback Loek 2026-10-15, rechtenmatrix).
   De strakke rand boven wint in border-collapse van de gestippelde onderrand van de rij ervoor. */
.mm .mm-table tr.mm-groep td { padding: 9px 12px; background: var(--mmi-surface-tint); border-top: 1px solid var(--mmi-border-strong); border-bottom: 1px solid var(--mmi-border-strong); box-shadow: inset 3px 0 0 var(--mmi-primary); font-weight: 650; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mmi-primary-ink); }

/* KPI-rij (samenvatting bovenaan een lijst/rapport) */
.mm .mm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.mm .mm-kpi { display: grid; gap: 2px; }
.mm .mm-kpi__n { font-weight: 700; font-size: 22px; line-height: 28px; color: var(--mmi-ink); font-variant-numeric: tabular-nums; }
.mm .mm-kpi__l { font-size: 12px; color: var(--mmi-muted); }

/* Lijst van items (kaartjes in een kaart) */
.mm .mm-list { display: grid; }
.mm .mm-item { display: grid; gap: 8px; padding: 16px 0; border-top: 1px dashed var(--mmi-border-strong); }
.mm .mm-item:first-child { border-top: 0; padding-top: 0; }
.mm .mm-item:last-child { padding-bottom: 0; }
.mm .mm-item__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ── Reparatie urgent: nieuwe kaart, tijdlijn, notities, zijlade (docs/plannen/
   reparatie-urgent-kaart.md, Loek 2026-09-24). Zelfde tokens als de rest van .mm. ── */
.mm .mm-card--flat { box-shadow: none; }
.mm .mm-kaart { border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface); box-shadow: var(--mmi-shadow-card); min-width: 0; }
.mm .mm-kaart.is-open { border-color: var(--mmi-primary); box-shadow: var(--mmi-shadow-active); }
/* Gevonden via de zoekbalk (2026-10-27): de kaart licht even op, zoals een gescande rij bij Indelen. */
.mm .mm-kaart.is-oplicht { animation: mm-kaart-oplicht 2.5s ease-out; }
@keyframes mm-kaart-oplicht { 0%, 40% { background: var(--mmi-warning-soft); border-color: var(--mmi-warning); } 100% { background: var(--mmi-surface); border-color: var(--mmi-border); } }
@media (prefers-reduced-motion: reduce) { .mm .mm-kaart.is-oplicht { animation: none; border-color: var(--mmi-warning); } }
/* Een tabelrij die je via de zoekbalk opende (2026-11-11): eerst oplichten, daarna een streep links,
   zodat je hem na wat scrollen terugvindt. Geen 100%-keyframe: de animatie loopt terug naar de eigen
   achtergrond van de rij (ook als die gekozen is). */
.mm tr.is-gezocht > td { animation: mm-gezocht 3s ease-out; }
.mm tr.is-gezocht > td:first-child { box-shadow: inset 3px 0 0 var(--mmi-warning); }
@keyframes mm-gezocht { 0%, 50% { background: var(--mmi-warning-soft); } }
@media (prefers-reduced-motion: reduce) { .mm tr.is-gezocht > td { animation: none; } }
.mm .mm-kaart__kop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.mm .mm-kaart__kop:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-md); }
.mm .mm-kaart__chev { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); color: var(--mmi-ink-soft); background: var(--mmi-surface); }
.mm .mm-kaart__chev svg { width: 16px; height: 16px; }
.mm .mm-kaart__titel { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.mm .mm-kaart__r1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm .mm-kaart__model { font-weight: 650; font-size: 16px; line-height: 22px; color: var(--mmi-ink); }
.mm .mm-kaart__r2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-kaart__rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mm .mm-kaart__body { background: var(--mm-bg); border-top: 1px solid var(--mmi-border); padding: 20px; display: grid; gap: 16px; border-radius: 0 0 var(--mmi-radius-md) var(--mmi-radius-md); }
.mm .mm-2kol { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.mm .mm-kol { display: grid; gap: 16px; min-width: 0; }
/* Dossier (Loek 2026-09-25): links de stappen, rechts log + notities — de stappen hebben de
   breedte nodig (twee velden naast elkaar), dus smallere rechterkolom, en eerder onder elkaar. */
.mm .mm-2kol--dossier { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .mm .mm-2kol--dossier { grid-template-columns: 1fr; } }
/* Log in een smalle kolom of lade: wat er gebeurde op regel 1, wie en wanneer eronder. */
.mm .mm-timeline--kort li { grid-template-columns: 12px 1fr; row-gap: 2px; }
.mm .mm-timeline--kort .mm-when { grid-column: 2; white-space: normal; }
.mm .mm-timeline--afgekapt .mm-timeline__wat { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mm .mm-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); font-weight: 650; font-size: 10px; letter-spacing: .02em; }
.mm .mm-avatar--lg { width: 32px; height: 32px; font-size: 11px; }
/* Profielfoto i.p.v. initialen (ProfielAvatar): zelfde cirkel, foto bijgesneden. */
.mm img.mm-avatar { display: inline-block; object-fit: cover; }
/* "Nu ook open bij …" op de reparatiekaart (OokOpen). */
.mm .mm-ookopen { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--mmi-radius-sm); background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); font-size: 13px; }
.mm .mm-ookopen svg { width: 15px; height: 15px; flex: none; }
.mm .mm-balk { height: 6px; border-radius: 999px; background: var(--mmi-step-idle); overflow: hidden; }
.mm .mm-balk > span { display: block; height: 100%; background: var(--mmi-primary); border-radius: inherit; }
.mm .mm-balk--let-op > span { background: var(--mmi-warning); }
.mm .mm-balk--fout > span { background: var(--mmi-danger); }
.mm .mm-textarea { width: 100%; min-height: 72px; padding: 10px 12px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); font-family: inherit; font-size: 14px; line-height: 20px; color: var(--mmi-ink); background: var(--mmi-surface); resize: vertical; }
.mm .mm-textarea:focus { outline: none; border-color: var(--mmi-primary); box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-icon-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; border-radius: var(--mmi-radius-sm); background: none; color: var(--mmi-muted); cursor: pointer; }
.mm .mm-icon-btn:hover { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-icon-btn svg { width: 16px; height: 16px; }
.mm .mm-icon-btn:disabled { opacity: .4; cursor: not-allowed; background: none; color: var(--mmi-muted); }
.mm .mm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mm .mm-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mmi-border-strong); background: var(--mmi-surface); color: var(--mmi-ink-soft); font-family: inherit; font-size: 13px; cursor: pointer; }
.mm .mm-chip:hover { border-color: var(--mmi-muted); }
.mm .mm-chip.is-active { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); border-color: transparent; font-weight: 600; }
.mm .mm-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
/* Orderkeuze in de intake (kanaalreferentie met meer orders): lange tekst met serienummers mag
   meerdere regels krijgen; uitgeschakeld tijdens het laden van de gekozen order. */
.mm .mm-chip--keuze { height: auto; min-height: 28px; padding-block: 4px; text-align: left; border-radius: var(--mmi-radius-sm); }
.mm .mm-chip--keuze:disabled { opacity: .6; cursor: progress; }
.mm .mm-segment { display: inline-flex; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); overflow: hidden; }
.mm .mm-segment button { height: 28px; padding: 0 10px; border: 0; background: var(--mmi-surface); color: var(--mmi-ink-soft); font-family: inherit; font-size: 12px; cursor: pointer; }
.mm .mm-segment button + button { border-left: 1px solid var(--mmi-border-strong); }
.mm .mm-segment button.is-active { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); font-weight: 650; }
.mm .mm-segment button:disabled { cursor: not-allowed; }
.mm .mm-foto-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mm .mm-foto-tegel { position: relative; aspect-ratio: 1; border-radius: var(--mmi-radius-sm); overflow: hidden; background: var(--mmi-step-idle); border: 1px solid var(--mmi-border); }
.mm .mm-foto-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm .mm-foto-tegel__weg { position: absolute; right: 4px; top: 4px; }
.mm .mm-voetbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); }
.mm .mm-vereisten { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; }
.mm .mm-vereiste { display: inline-flex; align-items: center; gap: 6px; color: var(--mmi-muted); }
.mm .mm-vereiste::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--mmi-border-strong); border-radius: 50%; }
.mm .mm-vereiste.is-ok { color: var(--mmi-success); }
.mm .mm-vereiste.is-ok::before { content: "✓"; width: auto; height: auto; border: 0; font-weight: 700; }
/* De meldknoppen onder de notities en de uitgang naast Afronden (Loek 2026-09-25). */
.mm .mm-meldrij { display: grid; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--mmi-border); }
.mm .mm-select.mm-select--inline { width: auto; min-width: 200px; height: 36px; }
.mm .mm-selrij { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.mm .mm-selrij > input { width: 16px; height: 16px; margin: 22px 0 0; accent-color: var(--mmi-primary); }
.mm .mm-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm .mm-tegel { background: var(--mmi-surface-tint); border-radius: var(--mmi-radius-sm); padding: 10px 12px; }
.mm .mm-tegel b { display: block; font-weight: 700; font-size: 18px; line-height: 24px; color: var(--mmi-ink); font-variant-numeric: tabular-nums; }
.mm .mm-tegel span { font-size: 12px; color: var(--mmi-muted); }
.mm .mm-tijdlijn { list-style: none; margin: 0; padding: 0; }
.mm .mm-tijdlijn > li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; padding: 8px 0; align-items: start; }
.mm .mm-tijdlijn > li::after { content: ""; position: absolute; left: 13px; top: 38px; bottom: -6px; width: 2px; background: var(--mmi-step-idle); }
.mm .mm-tijdlijn > li:last-child::after { display: none; }
.mm .mm-tl-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mmi-step-idle); color: var(--mmi-muted); position: relative; z-index: 1; }
.mm .mm-tl-ico svg { width: 14px; height: 14px; }
.mm .mm-tl-ico--test { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); }
.mm .mm-tl-ico--reparatie, .mm .mm-tl-ico--extern { background: var(--mmi-warning-soft); color: var(--mmi-warning); }
.mm .mm-tl-ico--verkoop { background: var(--mmi-success-soft); color: var(--mmi-success); }
.mm .mm-tl-ico--retour, .mm .mm-tl-ico--rma { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-tl-ico--huidig { background: var(--mmi-primary); color: var(--mm-text-inverse); box-shadow: 0 0 0 4px var(--mmi-primary-soft); }
/* Verkoop aan een andere klant (intake): rood. Ná de basisregel, anders wint die (review 2026-10-06). */
.mm .mm-tl-ico--andere-klant { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-tl-titel { font-weight: 650; font-size: 14px; line-height: 20px; color: var(--mmi-ink); }
.mm .mm-tl-detail { font-size: 13px; line-height: 18px; color: var(--mmi-muted); overflow-wrap: anywhere; }
.mm .mm-tl-op { font-size: 12px; line-height: 20px; color: var(--mmi-muted); white-space: nowrap; }
.mm .mm-notities { display: grid; gap: 14px; }
.mm .mm-notitie { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.mm .mm-notitie__kop { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-notitie__kop b { color: var(--mmi-ink); font-weight: 650; }
.mm .mm-vast-label { color: var(--mmi-warning); font-weight: 650; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.mm .mm-ballon { margin-top: 4px; padding: 10px 12px; border-radius: var(--mmi-radius-md); border: 1px solid var(--mmi-border); background: var(--mmi-surface); color: var(--mmi-ink); font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mm .mm-ballon--vast { background: var(--mmi-warning-soft); border-color: transparent; }
.mm .mm-noemt { color: var(--mmi-primary); font-weight: 650; }
.mm .mm-notitie__voet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-linkknop { background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px; color: var(--mmi-primary); cursor: pointer; }
.mm .mm-linkknop:hover { text-decoration: underline; }
/* De lade en de kiezer renderen via een portal: het element zélf draagt .mm (voor de tokens),
   dus hun containerregels mogen geen .mm-voorouder eisen. */
.mm-kiezer { gap: 0; width: min(560px, 100%); max-height: min(80vh, 720px); display: flex; flex-direction: column; background: var(--mmi-surface); border-radius: var(--mmi-radius-md); overflow: hidden; }
.mm .mm-kiezer__kop { padding: 16px; display: grid; gap: 10px; border-bottom: 1px solid var(--mmi-border); }
.mm .mm-kiezer__lijst { overflow-y: auto; flex: 1 1 auto; }
.mm .mm-kiezer__regel { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px dashed var(--mmi-border); cursor: pointer; }
.mm .mm-kiezer__regel.is-gekozen { background: var(--mmi-primary-soft); }
.mm .mm-kiezer__regel input { width: 16px; height: 16px; accent-color: var(--mmi-primary); margin: 0; }
/* Waarom een soort erbij kwam (Extra defect / Mishap), onder de aangevinkte regel (Loek 2026-09-25). */
.mm .mm-kiezer__reden { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 10px 48px; }
.mm .mm-kiezer__reden.is-gekozen { background: var(--mmi-primary-soft); }
.mm .mm-kiezer__voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--mmi-border); background: var(--mmi-surface-tint); }
.app-modal-overlay.mm-lade-overlay { place-items: stretch end; padding: 0; }
.mm-lade { gap: 0; width: min(440px, 100vw); height: 100%; display: flex; flex-direction: column; background: var(--mmi-surface); box-shadow: var(--mm-shadow-lg); animation: mm-lade-in 200ms ease both; }
@keyframes mm-lade-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mm-lade { animation: none; } }
.mm .mm-lade__kop { padding: 24px 24px 0; display: grid; gap: 4px; }
.mm .mm-lade__kop .mm-tabs { margin: 12px 0 0; }
.mm .mm-lade__body { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px; display: grid; gap: 16px; align-content: start; background: var(--mm-bg); }
.mm .mm-lade__voet { padding: 16px 24px; border-top: 1px solid var(--mmi-border); display: grid; gap: 10px; background: var(--mmi-surface); }
@media (max-width: 760px) {
  .mm .mm-2kol { grid-template-columns: 1fr; }
  .mm .mm-kaart__kop { flex-wrap: wrap; }
  .mm .mm-kaart__rechts { justify-content: flex-start; width: 100%; padding-left: 42px; }
  .mm .mm-kaart__body { padding: 12px; }
}

/* Kleine aanvullingen (gemist bij de eerste ombouw) */
.mm .mm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mm ul.mm-list, .mm ul.mm-timeline { list-style: none; margin: 0; padding: 0; }
.mm .mm-code-link { font-family: var(--mmi-font-mono); font-weight: 600; font-size: 13px; color: var(--mmi-primary); text-decoration: none; }
.mm .mm-code-link:hover { text-decoration: underline; }
.mm .mm-inputrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mm .mm-inputrow > .mm-select, .mm .mm-inputrow > .mm-input { flex: 1 1 200px; min-width: 0; width: auto; }
.mm .mm-table tr.is-totaal td { border-top: 1px solid var(--mmi-border-strong); border-bottom: 0; font-weight: 650; }
.mm a { color: var(--mmi-primary); }

@media (max-width: 640px) {
  .mm .mm-dl { grid-template-columns: 1fr auto; }
  .mm .mm-dl > dt { grid-column: 1 / -1; padding-bottom: 0; min-height: 0; }
  .mm .mm-dl > dd { border-top: 0; padding-top: 4px; }
  .mm .mm-fields, .mm .mm-fields--3, .mm .mm-grid-2 { grid-template-columns: 1fr; }
  .mm .mm-header, .mm .mm-card__foot, .mm .mm-danger-zone { flex-direction: column; align-items: stretch; }
  .mm .mm-card { padding: 16px; }
  .mm .mm-table-wrap { margin: 0 -16px; padding: 0 16px; }
  .mm .mm-stepper { grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; }
  .mm .mm-step { grid-template-columns: 28px 1fr; justify-items: start; text-align: left; column-gap: 12px; }
  .mm .mm-step::before { display: none; }
  .mm .mm-step__meta { grid-column: 2; }
}

/* ═══ Takenbord op de Startpagina (Loek 2026-09-28, naar PROMPT_2.md + mm-intern.css v4) ═══
   Dezelfde --mmi-*-tokens als de rest van .mm, dus merkpaars en dark mode komen mee.
   Menu's, de meldingenlijst en de vensters renderen via een portal: die elementen dragen zelf
   .mm, dus hun containerregels (.mm-menu, .mm-meldingen, .mm-modal) eisen geen .mm-voorouder. */

/* Elk blok op het bord mag smaller worden dan zijn inhoud: anders rekt één rij kolomtabs
   (overflow-x) op mobiel het hele raster op en scrolt de pagina opzij. */
.mm.mm-takenbord > * { min-width: 0; }

/* Contrast (Loek 2026-09-28, na testen): witte kaarten verdwenen in kolommen op --mm-bg (#faf8fd,
   bijna wit — lichter dan de lavendel uit het ontwerp). Licht: kolommen op --mm-surface-2 en de
   automatische balk juist op --mm-bg, anders vallen dáár de kolommen weg. Donker: kolommen op het
   diepere --mm-bg, zoals het al was — daar was het contrast goed. */
.mm { --mmi-kolom: var(--mm-surface-2); --mmi-auto: var(--mm-bg); }
html[data-theme="dark"] .mm { --mmi-kolom: var(--mm-bg); --mmi-auto: var(--mm-surface-2); }

/* Kop met Vandaag-strook */
.mm .mm-home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mm .mm-home-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mm .mm-greet { margin: 2px 0 0; font-weight: 650; font-size: 22px; line-height: 28px; letter-spacing: normal; color: var(--mmi-ink); }
.mm .mm-today { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mm .mm-today__chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mmi-border);
  background: var(--mmi-surface); font-family: inherit; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); cursor: pointer; }
.mm .mm-today__chip b { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--mmi-ink); }
.mm .mm-today__chip:hover { border-color: var(--mmi-border-strong); }
.mm .mm-today__chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-today__chip.is-danger { background: var(--mmi-danger-soft); border-color: transparent; color: var(--mmi-danger); }
.mm .mm-today__chip.is-danger b { color: var(--mmi-danger); }
.mm .mm-today__chip.is-warn { background: var(--mmi-warning-soft); border-color: transparent; color: var(--mmi-warning); }
.mm .mm-today__chip.is-warn b { color: var(--mmi-warning); }
.mm .mm-today__chip.is-info { background: var(--mmi-primary-soft); border-color: transparent; color: var(--mmi-primary-ink); }
.mm .mm-today__chip.is-info b { color: var(--mmi-primary-ink); }
.mm .mm-today__chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mmi-primary); }
.mm .mm-bell { position: relative; width: 40px; padding: 0; }
.mm .mm-bell .mm-dot { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mmi-danger);
  color: #fff; font-weight: 700; font-size: 11px; line-height: 18px; text-align: center; border: 2px solid var(--mmi-surface); box-sizing: content-box; }
.mm .mm-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px; border: 0; background: none; font-family: inherit;
  font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); cursor: pointer; }
.mm .mm-toggle i { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: var(--mmi-border-strong); transition: background .12s; }
.mm .mm-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .12s; }
.mm .mm-toggle[aria-checked="true"] i { background: var(--mmi-primary); }
.mm .mm-toggle[aria-checked="true"] i::after { left: 14px; }
.mm .mm-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }

/* Balk */
.mm .mm-board { background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); box-shadow: var(--mmi-shadow-card); min-width: 0; }
.mm .mm-board--auto { background: var(--mmi-auto); }
.mm .mm-board.is-slepend { position: relative; z-index: 5; box-shadow: 0 12px 28px rgba(28, 26, 51, 0.18); }
.mm .mm-board__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.mm .mm-board__head .mm-grow { flex: 1; min-width: 0; }
.mm .mm-board__titel { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; font-weight: 650; font-size: 16px; line-height: 22px; letter-spacing: normal;
  color: var(--mmi-ink); text-align: left; overflow-wrap: anywhere; }
button.mm-board__titel { cursor: text; }
button.mm-board__titel:hover { text-decoration: underline dotted var(--mmi-border-strong); text-underline-offset: 4px; }
.mm .mm-board__head .mm-input { height: 32px; max-width: 360px; font-weight: 650; }
.mm .mm-handle { flex: none; display: grid; place-items: center; width: 16px; padding: 0; border: 0; background: none; color: var(--mmi-border-strong); cursor: grab; touch-action: none; }
.mm .mm-handle:hover { color: var(--mmi-muted); }
.mm .mm-handle svg { width: 16px; height: 16px; }
.mm .mm-handle--leeg { cursor: default; }
.mm .mm-board__progress { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mmi-muted); white-space: nowrap; }
.mm .mm-board__progress .mm-balk { width: 96px; }
.mm .mm-balk--ok > span { background: var(--mmi-success); }
.mm .mm-board__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; padding: 0 20px 20px; overflow-x: auto; align-items: stretch; }
.mm .mm-board__sum { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-board__sum b { color: var(--mmi-ink); font-weight: 600; }
.mm .mm-avatars { display: inline-flex; flex: none; }
.mm .mm-avatars .mm-avatar { border: 2px solid var(--mmi-surface); margin-left: -6px; box-sizing: content-box; }
.mm .mm-avatars .mm-avatar:first-child { margin-left: 0; }
.mm .mm-chevknop { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm);
  color: var(--mmi-ink-soft); background: var(--mmi-surface); cursor: pointer; }
.mm .mm-chevknop svg { width: 16px; height: 16px; }
.mm .mm-chevknop:focus-visible, .mm .mm-dots:focus-visible, .mm .mm-handle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-dots { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--mmi-radius-sm); background: none; color: var(--mmi-muted); cursor: pointer; }
.mm .mm-dots:hover, .mm .mm-dots[aria-expanded="true"] { background: var(--mmi-step-idle); color: var(--mmi-ink); }
.mm .mm-dots svg { width: 16px; height: 16px; }
.mm .mm-add-board { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border: 1.5px dashed var(--mmi-border-strong);
  border-radius: var(--mmi-radius-md); background: transparent; color: var(--mmi-primary); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.mm .mm-add-board:hover { background: var(--mmi-primary-soft); border-color: var(--mmi-primary); }
.mm .mm-add-board svg { width: 16px; height: 16px; }

/* Kolom */
.mm .mm-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 120px; padding: 8px; border-radius: var(--mmi-radius-md); background: var(--mmi-kolom); }
.mm .mm-col__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; padding: 4px 6px 2px; }
.mm .mm-col__head .mm-input { height: 28px; font-size: 13px; padding: 0 8px; }
.mm .mm-col__name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 13px; line-height: 18px; color: var(--mmi-ink); }
.mm .mm-col__name::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mmi-border-strong); }
.mm .mm-col--te_doen .mm-col__name::before { background: var(--mmi-muted); }
.mm .mm-col--bezig .mm-col__name::before { background: var(--mmi-primary); }
.mm .mm-col--wacht_op .mm-col__name::before { background: var(--mmi-warning); }
.mm .mm-col--afgerond .mm-col__name::before { background: var(--mmi-success); }
.mm .mm-col__name .mm-count { margin-left: 2px; }
.mm .mm-col__lijst { display: flex; flex-direction: column; gap: 8px; min-height: 12px; flex: 1 1 auto; }
.mm .mm-col__add { display: flex; align-items: center; gap: 6px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: var(--mmi-radius-sm); background: transparent;
  color: var(--mmi-muted); font-family: inherit; font-weight: 500; font-size: 13px; text-align: left; cursor: pointer; }
.mm .mm-col__add:hover { background: var(--mmi-surface); color: var(--mmi-primary); }
.mm .mm-col__add svg { width: 14px; height: 14px; }
.mm .mm-col__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 6px; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-col__foot button { padding: 0; border: 0; background: none; font-family: inherit; font-weight: 600; font-size: 12px; color: var(--mmi-primary); cursor: pointer; }
.mm .mm-col__foot button:hover { text-decoration: underline; }
.mm .mm-drop { height: 60px; flex: none; border: 1.5px dashed var(--mmi-primary); border-radius: var(--mmi-radius-sm); background: var(--mmi-primary-soft); }

/* Taakkaart */
.mm .mm-task { display: grid; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); background: var(--mmi-surface);
  box-shadow: var(--mm-shadow-md); font-family: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mm .mm-task.is-sleepbaar { cursor: grab; }
.mm .mm-task:hover { border-color: var(--mm-border-bright); }
.mm .mm-task:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-task__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 20px; }
.mm .mm-task__title { margin: 0; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--mmi-ink); overflow-wrap: anywhere; }
.mm .mm-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-task__meta span { display: inline-flex; align-items: center; gap: 4px; }
.mm .mm-task__meta svg { width: 13px; height: 13px; flex: none; }
.mm .mm-task .is-late { color: var(--mmi-danger); font-weight: 600; }
.mm .mm-task .is-today { color: var(--mmi-warning); font-weight: 600; }
.mm .mm-task__src { font-size: 11px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-task.is-done .mm-task__title { color: var(--mmi-muted); text-decoration: line-through; text-decoration-color: var(--mmi-border-strong); }
.mm .mm-task.is-due { border-color: var(--mmi-warning); box-shadow: 0 0 0 3px var(--mmi-warning-soft); }
.mm .mm-task.is-dragging { transform: rotate(2deg); border-color: var(--mmi-primary); box-shadow: 0 12px 28px rgba(28, 26, 51, 0.18); cursor: grabbing; }
.mm .mm-klaar { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 11px; line-height: 20px; color: var(--mmi-success); }
.mm .mm-klaar svg { width: 12px; height: 12px; }
.mm .mm-wait { display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: var(--mmi-radius-sm); background: var(--mmi-warning-soft); color: var(--mmi-warning); font-size: 12px; line-height: 16px; }
.mm .mm-wait b { font-weight: 650; }
.mm .mm-wait svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }

/* Notitie-icoontje op de kaart en de pop-up met updates */
.mm .mm-task__rechts { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.mm .mm-task__notes { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px; border: 0; border-radius: 999px; background: none;
  color: var(--mmi-muted); font-family: inherit; font-weight: 650; font-size: 11px; line-height: 1; cursor: pointer; }
.mm .mm-task__notes svg { width: 14px; height: 14px; }
.mm .mm-task__notes:hover, .mm .mm-task__notes:focus-visible { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); outline: none; }
.mm .mm-task__notes.heeft { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); }
.mm-notitielaag { position: fixed; z-index: 1000; display: flex; flex-direction: column; width: min(380px, calc(100vw - 24px)); max-height: min(72vh, 580px); overflow: hidden;
  background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); box-shadow: 0 12px 32px rgba(28, 26, 51, 0.14); }
.mm .mm-notitielaag__kop { padding: 12px 16px 10px; border-bottom: 1px solid var(--mmi-border); }
.mm .mm-notitielaag__kop .mm-title { font-size: 14px; line-height: 20px; }
.mm-notitielaag .mm-notitiebox { padding: 12px 16px 16px; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.mm .mm-notitiebox { display: grid; gap: 10px; min-width: 0; }
.mm .mm-notitiebox .mm-notities { overflow-y: auto; max-height: 320px; min-height: 0; }
.mm .mm-notitiebox__invoer { display: flex; gap: 8px; align-items: flex-end; }
.mm .mm-notitiebox__invoer .mm-textarea { flex: 1 1 auto; min-height: 44px; }

/* Prioriteit */
.mm .mm-prio { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: 4px; font-weight: 600; font-size: 11px; line-height: 20px; letter-spacing: .02em; }
.mm .mm-prio svg { width: 12px; height: 12px; }
.mm .mm-prio--hoog { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-prio--normaal { background: var(--mmi-step-idle); color: var(--mmi-ink-soft); }
.mm .mm-prio--laag { background: transparent; color: var(--mmi-muted); border: 1px solid var(--mmi-border); }
.mm .mm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--mmi-radius-sm); background: var(--mmi-step-idle); }
.mm .mm-seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent;
  font-family: inherit; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); cursor: pointer; }
.mm .mm-seg button svg { width: 14px; height: 14px; }
.mm .mm-seg button[aria-pressed="true"] { background: var(--mmi-surface); color: var(--mmi-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(28, 26, 51, 0.12); }
.mm .mm-seg button[aria-pressed="true"].is-hoog { color: var(--mmi-danger); }
.mm .mm-seg button:disabled { cursor: not-allowed; }

/* Vensters (via ModalOverlay) */
.mm-modal { width: min(640px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; background: var(--mmi-surface);
  border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); box-shadow: 0 16px 48px rgba(28, 26, 51, 0.16); }
.mm-modal--smal { width: min(480px, 100%); }
/* Doel-batch kiezen (BatchPickerDialog): breder, zodat de batches per groep naast elkaar passen. */
.mm-modal--keuze { width: min(880px, 100%); }
/* Breed venster voor lange inhoud (Zendesk-gesprek): bijna het hele scherm. */
.mm-modal--breed { width: min(1100px, 100%); height: calc(100vh - 40px); height: calc(100dvh - 40px); } /* dvh: anders vallen de knoppen op iPhone onder de adresbalk */
.mm .mm-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 12px; }
.mm .mm-modal__head .mm-grow { flex: 1; min-width: 0; }
.mm .mm-modal__body { flex: 1 1 auto; display: grid; gap: 16px; align-content: start; padding: 8px 24px 20px; overflow-y: auto; }
.mm .mm-modal__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--mmi-border); background: var(--mmi-surface-tint); }
.mm .mm-modal__foot .mm-actions { flex: none; flex-wrap: nowrap; margin-left: auto; }
.mm .mm-modal__foot > .mm-hint { flex: 1 1 200px; min-width: 0; }
.mm .mm-sluit { flex: none; width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--mmi-radius-sm); background: none; color: var(--mmi-muted); cursor: pointer; }
.mm .mm-sluit:hover { background: var(--mmi-step-idle); color: var(--mmi-ink); }
.mm .mm-sluit svg { width: 18px; height: 18px; }
/* Uit zolang het venster bezig is (VensterKop, 2026-10-21): ook zo laten zien, niet klikbaar ogen. */
.mm .mm-sluit:disabled { opacity: .4; cursor: not-allowed; background: none; }
/* border-radius en box-shadow expliciet: de globale veldstijl (input:not([type])) geeft elk veld
   anders een schaduw en ronde hoeken, en dit is een kale titel met een lijn eronder. */
.mm .mm-title-input { width: 100%; padding: 4px 0 8px; border: 0; border-bottom: 1px solid var(--mmi-border); border-radius: 0; box-shadow: none;
  background: transparent; font-family: inherit; font-weight: 650; font-size: 18px; line-height: 26px; color: var(--mmi-ink); }
.mm .mm-title-input:focus { outline: none; border-color: var(--mmi-primary); box-shadow: none; }
.mm .mm-title-input:disabled { color: var(--mmi-ink); background: transparent; }
.mm .mm-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.mm .mm-row--top { align-items: start; }
.mm .mm-row--top > .mm-row__label { padding-top: 10px; }
.mm .mm-row__label { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mm .mm-inline > .mm-select, .mm .mm-inline > .mm-input { flex: 1 1 160px; width: auto; min-width: 0; }
.mm .mm-pchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 3px; border: 1px solid var(--mmi-border-strong); border-radius: 999px;
  background: var(--mmi-surface); font-family: inherit; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-ink); }
.mm .mm-pchip .mm-avatar { width: 22px; height: 22px; }
.mm .mm-pchip__x { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mmi-muted); cursor: pointer; }
.mm .mm-pchip__x:hover { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-pchip__x svg { width: 12px; height: 12px; }
.mm .mm-pchip--add { padding: 0 10px; border-style: dashed; background: transparent; color: var(--mmi-primary); font-weight: 600; cursor: pointer; }
.mm .mm-pchip--add:hover { background: var(--mmi-primary-soft); }
.mm .mm-pchip--add svg { width: 14px; height: 14px; }
.mm .mm-subbox { display: grid; gap: 12px; padding: 12px 16px; border-radius: var(--mmi-radius-sm); background: var(--mmi-warning-soft); }
.mm .mm-subbox .mm-row__label { color: var(--mmi-warning); }
.mm .mm-select--sm, .mm .mm-input--sm { height: 32px; font-size: 13px; }
.mm .mm-select--sm { background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; }
.mm .mm-zoeker { display: grid; gap: 6px; }
.mm .mm-zoeklijst { list-style: none; margin: 0; padding: 4px 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); background: var(--mmi-surface); }
.mm .mm-zoeklijst button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: none; font-family: inherit; font-size: 14px;
  color: var(--mmi-ink); text-align: left; cursor: pointer; }
.mm .mm-zoeklijst button:hover, .mm .mm-zoeklijst button.is-actief { background: var(--mmi-surface-tint); }
.mm .mm-zoeklijst small { margin-left: auto; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-zoeklijst__leeg { padding: 8px 12px; font-size: 13px; color: var(--mmi-muted); }

/* Menu en meldingen (portal, positie vast t.o.v. de knop) */
.mm-menu { position: fixed; z-index: 1000; display: block; min-width: 200px; max-width: min(320px, calc(100vw - 24px)); padding: 4px 0; overflow: hidden;
  background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); box-shadow: 0 12px 32px rgba(28, 26, 51, 0.14); }
.mm .mm-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; background: none; font-family: inherit; font-size: 13px;
  line-height: 18px; color: var(--mmi-ink-soft); text-align: left; cursor: pointer; }
.mm .mm-menu__item:hover, .mm .mm-menu__item:focus-visible { background: var(--mmi-surface-tint); color: var(--mmi-ink); outline: none; }
/* Toetsenbordfocus (2026-10-21, het menu is sinds dan met de pijltjes te bedienen): de ring van de
   rest van .mm, naar binnen omdat het menu overflow: hidden heeft. Anders lijkt het item onder een
   stilstaande muis even "gekozen" als het item met de focus. */
.mm .mm-menu__item:focus-visible { box-shadow: inset 0 0 0 3px var(--mmi-focus); }
.mm .mm-menu__item svg { width: 15px; height: 15px; flex: none; }
.mm .mm-menu__item.is-gevaar { color: var(--mmi-danger); }
.mm .mm-menu__item[aria-checked="true"] { color: var(--mmi-primary-ink); font-weight: 600; }
.mm .mm-menu__item:disabled { background: none; color: var(--mmi-disabled-ink); cursor: not-allowed; }
.mm .mm-menu__kop { padding: 8px 14px 4px; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-menu__sep { height: 1px; margin: 4px 0; background: var(--mmi-border); }
.mm-meldingen { position: fixed; z-index: 1000; display: flex; flex-direction: column; width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: hidden;
  background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); box-shadow: 0 12px 32px rgba(28, 26, 51, 0.14); }
.mm .mm-meldingen__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mmi-border); }
.mm .mm-meldingen__lijst { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.mm .mm-meldingen__lijst > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 8px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mmi-border);
  font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-meldingen__lijst > li:last-child { border-bottom: 0; }
.mm .mm-meldingen__lijst > li.is-unread { background: var(--mmi-surface-tint); }
.mm .mm-meldingen__lijst > li.is-unread::after { content: ""; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--mmi-primary); }
.mm .mm-meldingen__lijst b { color: var(--mmi-ink); font-weight: 600; }
.mm .mm-meldingen__tekst { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mm .mm-meldingen__wanneer { display: block; margin-top: 2px; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-meldingen__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mm .mm-meldingen__ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--mmi-primary-soft); color: var(--mmi-primary-ink);
  font-weight: 650; font-size: 10px; }
.mm .mm-meldingen__ico svg { width: 14px; height: 14px; }
.mm .mm-meldingen__ico--wacht { background: var(--mmi-warning-soft); color: var(--mmi-warning); }
.mm .mm-meldingen__ico--laat { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-meldingen__ico--neutraal { background: var(--mmi-step-idle); color: var(--mmi-ink-soft); }
.mm .mm-meldingen__leeg { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--mmi-muted); }

/* Delen, kolommen, archief */
.mm .mm-share-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 170px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--mmi-border); }
.mm .mm-share-row:first-child { border-top: 0; }
.mm .mm-share-row b { color: var(--mmi-ink); font-weight: 600; }
.mm .mm-share-row small { display: block; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-share-row__recht { justify-self: end; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-colrows { display: grid; gap: 8px; }
.mm .mm-colrow { display: grid; grid-template-columns: 16px minmax(0, 1fr) 150px 28px; gap: 8px; align-items: center; }
.mm .mm-colrow__kop { font-weight: 500; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-colrow.is-slepend { position: relative; z-index: 2; opacity: .85; }
.mm .mm-verhuis { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--mmi-warning); }
.mm .mm-verhuis .mm-select { flex: 1 1 160px; width: auto; }
.mm .mm-archief__week { margin-top: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--mmi-border-strong); font-weight: 600; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-archief__rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--mmi-border); }
.mm .mm-archief__titel { margin: 0; font-size: 14px; line-height: 20px; color: var(--mmi-ink); overflow-wrap: anywhere; }
.mm .mm-archief__meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--mmi-muted); }

/* Mobiel: kolommen als tabs, één lijst, brede "+ Taak" onderaan */
.mm .mm-coltabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 16px 12px; }
.mm .mm-coltabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--mmi-kolom);
  font-family: inherit; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); cursor: pointer; }
.mm .mm-coltabs button .mm-count { margin-left: 0; }
.mm .mm-coltabs button[aria-selected="true"] { background: var(--mmi-primary); color: var(--mm-text-inverse); font-weight: 600; }
.mm .mm-coltabs button[aria-selected="true"] .mm-count { background: rgba(255, 255, 255, .22); color: var(--mm-text-inverse); }
.mm .mm-mobiel-lijst { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.mm .mm-mobiel-taak { position: sticky; bottom: 12px; z-index: 20; width: 100%; height: 48px; font-size: 16px; box-shadow: 0 8px 24px rgba(28, 26, 51, 0.18); }
@media (min-width: 761px) { .mm .mm-alleen-smal { display: none !important; } }
@media (max-width: 760px) {
  .mm .mm-alleen-breed { display: none !important; }
  .mm .mm-today__lang { display: none; }
  .mm .mm-row { grid-template-columns: 1fr; gap: 6px; }
  .mm .mm-board__head { padding: 14px 16px; flex-wrap: wrap; }
  .mm .mm-board__progress .mm-balk { width: 56px; }
  .mm .mm-share-row { grid-template-columns: 32px minmax(0, 1fr); }
  .mm .mm-share-row > :last-child { grid-column: 2; justify-self: start; }
  .mm .mm-colrow { grid-template-columns: 16px minmax(0, 1fr) 118px 28px; }
  .mm-modal { max-height: calc(100vh - 20px); }
  .mm .mm-modal__head, .mm .mm-modal__body, .mm .mm-modal__foot { padding-left: 16px; padding-right: 16px; }
}

/* Locatie van een reparatiebatch (Brian 2026-09-29): op de batchkaart, de actieve batch en
   bij elke reparatie. "Heeft geen locatie!" valt bewust op — een batch zonder plek is
   voor wie een toestel zoekt onvindbaar. */
.batch-locatie {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 700;
  color: var(--mm-primary); background: var(--mm-primary-soft); border-radius: 999px; padding: 3px 10px;
  width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Offertes (07-10-2026): tegels naar Vast internet en Mobiele abonnementen. */
.mm-offerte-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.mm-offerte-tegel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg);
  background: var(--mm-surface);
  color: var(--mm-text);
  text-decoration: none;
  transition: border-color 200ms var(--mm-ease), box-shadow 200ms var(--mm-ease);
}
.mm-offerte-tegel svg { color: var(--mm-primary); }
.mm-offerte-tegel strong { font-size: 1.1rem; }
.mm-offerte-tegel:hover,
.mm-offerte-tegel:focus-visible {
  border-color: var(--mm-primary);
  box-shadow: var(--mm-shadow-sm);
}

/* Statuspill van een verzendlabel uit de FedEx-tracking (2026-10-07), MM Intern-pill. */
.mm-zending-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  background: var(--mm-surface-3, var(--mm-surface-2)); color: var(--mm-text-soft);
}
.mm-zending-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mm-zending-pill--ok { background: var(--mm-success-soft); color: var(--mm-success); }
.mm-zending-pill--info { background: var(--mm-primary-soft); color: var(--mm-primary); }
.mm-zending-pill--let-op { background: var(--mm-warning-soft); color: var(--mm-warning); }

/* Tweestapsverificatie (/tweestaps, 2026-10-07): zelfde kaart als de login, MM Intern-typografie. */
.tweestaps .login-min-card { gap: 12px; }
.tweestaps-stappen { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 20px; color: var(--mm-text-soft); }
.tweestaps-qr { display: block; width: 184px; height: 184px; margin: 4px auto; padding: 8px; background: #fff; border: 1px solid var(--mm-border); border-radius: 10px; }
.tweestaps-sleutel { font-family: var(--mm-font-mono); font-size: 12px; word-break: break-all; }
.mm .mm-input.tweestaps-code { font-family: var(--mm-font-mono); font-size: 22px; letter-spacing: 0.3em; text-align: center; }
.tweestaps-link { border: 0; background: none; padding: 0; font: inherit; color: var(--mm-primary); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Vloeiend wielscrollen (components/SmoothScroll.tsx, Lenis 1.3.26 — 2026-10-08). Overgenomen uit
   lenis/dist/lenis.css. Zolang Lenis het wiel doet moet de CSS-smooth eruit, anders animeren ze
   allebei en voelt het stroperig; links/scrollIntoView lopen dan via Lenis' eigen animatie. */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Reparatie-stats (/stats, tab Reparatie-stats, Loek 2026-10-08) ────────────────────────────
   Het scherm in de MM-Intern-laag: periodekeuze, verschilregels, verloopgrafiek, de uitklapbare
   reparateursrij, mijlpalen en de presentatiemodus. Die laatste rendert via een portal en draagt
   zelf .mm. (De oude rstat-*-laag van de live tab is met de ombouw weg.) */
.mm .mm-periodekeuze { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Er komt elk kwartaal een knop bij (tot acht): laat de knoppen afbreken naar een volgende regel
   in plaats van de tekst in een 28px-knop te persen of de pagina opzij te duwen. */
.mm .mm-periodekeuze .mm-segment { flex-wrap: wrap; }
.mm .mm-periodekeuze .mm-segment button { white-space: nowrap; }
.mm .mm-mijlpalen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mm .mm-mijlpalen li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--mmi-radius-sm); background: var(--mmi-surface-tint); opacity: .5; filter: grayscale(1); }
.mm .mm-mijlpalen li.is-behaald { opacity: 1; filter: none; background: var(--mmi-primary-soft); }
.mm .mm-mijlpalen .mm-mijlpaal-ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--mmi-primary); }
.mm .mm-mijlpalen b { display: block; font-weight: 650; font-size: 13px; line-height: 18px; color: var(--mmi-ink); }
.mm .mm-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--mmi-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm .mm-delta--goed { color: var(--mmi-success); }
.mm .mm-delta--slecht { color: var(--mmi-danger); }
.mm .mm-kpi .mm-delta { white-space: normal; } /* "t.o.v. september 2026 (zelfde punt)" liep over het kengetal ernaast */
.mm .mm-legenda { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Weekgrafiek: per week één staaf, goed (merkpaars) met afgekeurd (rood) erbovenop. */
.mm .mm-weken { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(32px, 1fr); gap: 6px; align-items: end; overflow-x: auto; padding-bottom: 4px; }
.mm .mm-week { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.mm .mm-week__n { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--mmi-ink); font-variant-numeric: tabular-nums; min-height: 16px; }
.mm .mm-week__staaf { width: 100%; max-width: 44px; height: 160px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px; background: var(--mmi-surface-tint); overflow: hidden; }
.mm .mm-week__goed { display: block; background: var(--mmi-primary); }
.mm .mm-week__fout { display: block; background: var(--mmi-danger); }
.mm .mm-week__l { font-size: 11px; line-height: 14px; color: var(--mmi-muted); white-space: nowrap; }

/* Grafieken in de stats (sinds 2026-10-30): StaafGrafiek.tsx (SVG) en Verdeling.tsx (horizontale balken),
   eerst op Reparatie-stats en in de presentatiemodus; de .mm-week-staven hierboven blijven voor M360 en
   E-commerce. Eigen grafiekkleuren, want de merkkleuren vallen buiten de veilige band voor grafieken:
   merkpaars is in licht te donker (L 0,38), het donkere roze te licht. Zelfde tint, lichtheid verschoven
   tot de dataviz-validator slaagt (kleurenblindheid, lichtheid, contrast met de kaart) — wijzig ze niet
   op het oog, en zet ze alleen in deze volgorde naast elkaar:
   - 1 / 2 / fout: reeksen die naast elkaar staan (paars, amber, roze), getoetst als drietal.
   - 3 (blauwgroen): de vierde reeks, getoetst in de volgorde 1 → 3 → 2 → fout (Verwerking: M360,
     Phonecheck, gelabeld, afgekeurd). Niet de statuskleuren: groen/oranje betekenen goed/let op.
   - niveau-1..3: moeilijkheid makkelijk → moeilijk, één paarse reeks (ordinaal); in donker loopt de
     reeks andersom, zodat het zwaarste niveau het meest opvalt. Overig = neutraal grijs (geen niveau
     bekend), zo gekozen dat het van alle drie de niveaus te onderscheiden is. */
.mm {
  --mmi-grafiek-1: #4f419b; --mmi-grafiek-2: #b07800; --mmi-grafiek-3: #036f4f; --mmi-grafiek-fout: #d4456c;
  --mmi-grafiek-niveau-1: #aba4ff; --mmi-grafiek-niveau-2: #786ecc; --mmi-grafiek-niveau-3: #4c3e98;
  --mmi-grafiek-overig: #949494;
}
html[data-theme="dark"] .mm {
  --mmi-grafiek-1: #8f84dd; --mmi-grafiek-2: #b98a00; --mmi-grafiek-3: #117555; --mmi-grafiek-fout: #e36584;
  --mmi-grafiek-niveau-1: #594b9e; --mmi-grafiek-niveau-2: #867bd3; --mmi-grafiek-niveau-3: #bab3ff;
  --mmi-grafiek-overig: #727272;
}
.mm .mm-grafiek { display: grid; gap: 12px; min-width: 0; }
.mm .mm-grafiek__balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mm .mm-grafiek__vlak { position: relative; min-width: 0; border-radius: var(--mmi-radius-sm); }
.mm .mm-grafiek__vlak:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-grafiek__vlak svg { display: block; overflow: visible; }
.mm .mm-grafiek__as { fill: var(--mmi-muted); font-variant-numeric: tabular-nums; } /* lettergrootte via de svg (tekstPx) */
.mm .mm-grafiek__as.is-actief { fill: var(--mmi-ink); font-weight: 650; }
.mm .mm-grafiek__piek { font-weight: 650; fill: var(--mmi-ink); font-variant-numeric: tabular-nums; }
.mm .mm-grafiek__tip { position: absolute; z-index: 2; padding: 10px 12px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); background: var(--mmi-surface); box-shadow: var(--mmi-shadow-card); pointer-events: none; font-size: 12px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-grafiek__tip p { margin: 0; }
.mm .mm-grafiek__tip strong { color: var(--mmi-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.mm .mm-grafiek__tipkop { font-size: 11px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-grafiek__tip .mm-grafiek__tiptotaal { margin: 2px 0 6px; font-size: 13px; }
.mm .mm-grafiek__tiptotaal strong { font-size: 18px; line-height: 22px; }
.mm .mm-grafiek__tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm .mm-grafiek__tip li { display: flex; align-items: center; gap: 6px; }
.mm .mm-grafiek__tip li i { flex: none; width: 12px; height: 3px; border-radius: 2px; } /* lijnsleutel, geen blokje */
.mm .mm-grafiek__tip .mm-hint { margin-top: 6px; }

/* Horizontale balken (Verdeling.tsx): gestapeld met een naad van 2 px, of één balk met het getal erachter. */
.mm .mm-verdeling { display: block; height: 8px; min-width: 0; }
.mm .mm-verdeling--dik { height: 14px; }
/* overflow: hidden en min-width 0: anders duwden de naden en minimumbreedtes een korte balk voorbij
   zijn lengte, en kreeg een reparateur met 4 reparaties een langere balk dan een met 12. */
/* De naad krimpt mee bij een heel korte balk (min(2px, 4%)): een vaste 2 px at daar alle ruimte op en
   liet een balk met meerdere delen leeg. */
.mm .mm-verdeling__staaf { display: flex; gap: min(2px, 4%); height: 100%; overflow: hidden; border-radius: 0 4px 4px 0; }
.mm .mm-verdeling__staaf > span { flex-basis: 0; min-width: 0; height: 100%; }
.mm .mm-topbalk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mm .mm-topbalk__staaf { flex: none; height: 8px; min-width: 2px; border-radius: 0 4px 4px 0; }
.mm .mm-topbalk__n { font-weight: 650; color: var(--mmi-ink); font-variant-numeric: tabular-nums; }
.mm .mm-stip { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.mm th .mm-stip { width: 8px; height: 8px; margin-right: 5px; vertical-align: 0; }
/* Opbouw van de kosten: kleurvlak, label, bedrag en aandeel in vaste kolommen over alle regels. */
.mm .mm-kosten { display: grid; gap: 14px; }
.mm .mm-opbouw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 44px; align-items: baseline; gap: 6px 10px; font-size: 13px; line-height: 20px; }
.mm .mm-opbouw li { display: contents; }
.mm .mm-opbouw li > :first-child { margin-right: 0; }
.mm .mm-opbouw strong { font-weight: 650; color: var(--mmi-ink); font-variant-numeric: tabular-nums; text-align: right; }
.mm .mm-opbouw .mm-hint { text-align: right; font-variant-numeric: tabular-nums; }
.mm .mm-opbouw__voet { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding-top: 12px; border-top: 1px solid var(--mmi-border); font-size: 13px; }
.mm .mm-opbouw__voet strong { color: var(--mmi-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
/* In de presentatie staat de dia op justify-items: start; de grafiek moet de volle breedte nemen. */
.mm .mm-pres__dia > .mm-grafiek, .mm .mm-pres__dia > .mm-verdeling { width: 100%; }
.mm .mm-pres__dia > .mm-verdeling { height: 20px; }

/* Meter (Verdeling.tsx): één verhouding tegen een grens; spoor in een lichte stap van de vulkleur,
   optioneel een streepje (bv. "waar je vandaag zou moeten zijn" bij een doel). */
.mm .mm-meter { position: relative; display: block; height: 12px; min-width: 0; border-radius: 0 6px 6px 0; }
.mm .mm-meter__vul { display: block; height: 100%; border-radius: 0 6px 6px 0; }
.mm .mm-meter__markering { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--mmi-ink); }
.mm .mm-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 32px; }
.mm .mm-meterblok { display: grid; gap: 6px; align-content: start; min-width: 0; }
.mm .mm-meterblok b { font-weight: 650; font-size: 13px; color: var(--mmi-ink); }
.mm .mm-meterblok .mm-kpi__n { font-variant-numeric: normal; }

/* Trechter (Klantretouren, reparatiefouten): label links, balk met aantal en aandeel rechts. */
.mm .mm-trechter { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
/* Labelkolom als deel van de breedte (gelijk voor elke regel, dus de balken beginnen recht onder elkaar);
   een vaste 200 px liet op een telefoon te weinig over voor de balk. */
.mm .mm-trechter li { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; color: var(--mmi-ink-soft); }
/* Heatmap (Klantretouren, foutmatrix): de cel draagt de kleur, een kaartkleurige rand houdt de cellen
   uit elkaar; de schaal-legenda staat rechts in de kaartkop. */
.mm .mm-heatmap td.num { box-shadow: inset 0 0 0 1px var(--mmi-surface); color: var(--mmi-ink); }
.mm .mm-heatlegenda { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mmi-muted); font-variant-numeric: tabular-nums; }
.mm .mm-heatlegenda i { display: inline-block; width: 96px; height: 10px; border-radius: 3px; }

/* KPI-groepen: kengetallen per onderwerp, met per groep hooguit één groot kengetal (Reparatie-stats,
   2026-10-30). Tot dan stonden er vijftien gelijke tegels in twee muren, zonder volgorde. */
.mm .mm-kpigroepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 32px; }
.mm .mm-kpigroep { display: grid; gap: 10px; align-content: start; min-width: 0; padding-top: 12px; border-top: 1px solid var(--mmi-border); }
.mm .mm-kpigroep > .mm-eyebrow { margin: 0; }
/* De kleinere kengetallen van een groep als lijst: getal in een eigen kolom, label ernaast. Tegels
   liepen bij drie of vier stuks ongelijk af (één tegel alleen op de tweede rij). */
.mm .mm-kpilijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mm .mm-kpilijst li { display: grid; grid-template-columns: minmax(3ch, max-content) 1fr; align-items: baseline; gap: 10px; font-size: 13px; line-height: 20px; color: var(--mmi-muted); }
.mm .mm-kpilijst__n { font-weight: 650; font-size: 15px; color: var(--mmi-ink); font-variant-numeric: tabular-nums; text-align: right; }
/* Eén getalkolom voor de hele lijst (subgrid), zodat 1.435 en 60 rechts onder elkaar staan; zonder
   subgrid blijft de kolom per regel (minstens 3 tekens), zoals hierboven. */
@supports (grid-template-columns: subgrid) {
  /* 1fr, niet minmax(0, 1fr): anders duwde een lang bedrag (meerdere valuta's) het label buiten de groep. */
  .mm .mm-kpilijst { grid-template-columns: minmax(3ch, max-content) 1fr; column-gap: 10px; }
  .mm .mm-kpilijst li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
/* Groot kengetal: proportionele cijfers, tabular-nums staat los op die maat. */
.mm .mm-kpi--hoofd .mm-kpi__n { font-size: 32px; line-height: 38px; font-variant-numeric: normal; }

/* Reparateurs: klikbare rij, met daaronder het uitklapdetail. */
.mm .mm-naamcel { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--mmi-ink); cursor: pointer; white-space: nowrap; }
.mm .mm-naamcel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }
.mm .mm-chev { width: 16px; height: 16px; flex: none; color: var(--mmi-muted); }
.mm .mm-aandeel { display: grid; grid-template-columns: minmax(60px, 1fr) 36px; align-items: center; gap: 8px; }
.mm .mm-aandeel .mm-hint { text-align: right; font-variant-numeric: tabular-nums; }
.mm .mm-table tr.mm-detailrij > td { padding: 0 0 16px; }
.mm .mm-detail { display: grid; gap: 20px; padding: 16px 20px; border-radius: var(--mmi-radius-md); background: var(--mm-bg); border: 1px solid var(--mmi-border); }
.mm .mm-detail .mm-table-wrap { margin: 0; padding: 0; }
.mm .mm-detail__kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mm .mm-minilijst { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.mm .mm-minilijst li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 96px) 28px; align-items: center; gap: 10px; font-size: 13px; color: var(--mmi-ink); }
.mm .mm-minilijst li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm .mm-minilijst .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .mm .mm-detail__kolommen { grid-template-columns: 1fr; } .mm .mm-detail { padding: 12px; } }

/* Presentatiemodus: schermvullend, rustig, grote cijfers in merkpaars. */
.mm.mm-pres { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px;
  padding: 24px clamp(16px, 4vw, 56px); background: var(--mm-bg); color: var(--mmi-ink); overflow: hidden; }
.mm.mm-pres:fullscreen { background: var(--mm-bg); }
.mm.mm-pres:focus { outline: none; } /* de dialoog zelf krijgt focus bij openen; de knoppen houden hun ring */
.mm .mm-pres__kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mm .mm-pres__dia { display: grid; align-content: safe center; justify-items: start; gap: 18px; width: 100%; max-width: 1100px; margin: 0 auto; min-height: 0; overflow-y: auto; animation: mm-pres-in .25s ease-out; }
@keyframes mm-pres-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mm .mm-pres__dia { animation: none; } }
.mm .mm-pres__eyebrow { margin: 0; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-pres__titel { margin: 0; font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; color: var(--mmi-ink); }
.mm .mm-pres__groot { margin: 0; font-weight: 750; font-size: clamp(72px, 13vw, 168px); line-height: 1; letter-spacing: -0.03em; color: var(--mmi-primary); font-variant-numeric: tabular-nums; }
.mm .mm-pres__groot--lang { font-size: clamp(48px, 8vw, 112px); } /* "september 2026" in plaats van "Q3 2026" */
.mm .mm-pres__sub { margin: 0; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.4; color: var(--mmi-ink-soft); }
.mm .mm-pres__sub .mm-delta { font-size: inherit; }
.mm .mm-pres__tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; }
.mm .mm-pres__tegel { display: grid; gap: 6px; justify-items: start; align-content: start; padding: 24px; border-radius: 14px; background: var(--mmi-surface); border: 1px solid var(--mmi-border); box-shadow: var(--mmi-shadow-card); }
.mm .mm-pres__tegels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* bedragen: brede tegels, anders breekt "€ 9.980,00" af */
.mm .mm-pres__tegel b { font-weight: 700; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; color: var(--mmi-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm .mm-pres__tegel > span:last-child { font-size: 15px; color: var(--mmi-muted); }
.mm .mm-pres__niveau { display: inline-flex; align-items: center; font-weight: 650; font-size: 15px; color: var(--mmi-ink); }
.mm .mm-pres__tegel--fout b { color: var(--mmi-danger); }
.mm .mm-pres__tegel--nadruk { background: var(--mmi-primary); border-color: transparent; }
.mm .mm-pres__tegel--nadruk b, .mm .mm-pres__tegel--nadruk > span:last-child { color: var(--mm-text-inverse); }
.mm .mm-pres__balken { display: grid; gap: 14px; width: 100%; }
.mm .mm-pres__balk { display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr) 56px 72px; align-items: center; gap: 16px; font-size: clamp(15px, 1.4vw, 20px); }
.mm .mm-pres__balknaam { font-weight: 600; color: var(--mmi-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm .mm-pres__spoor { height: 18px; border-radius: 999px; background: var(--mmi-step-idle); overflow: hidden; }
.mm .mm-pres__spoor > span { display: block; height: 100%; background: var(--mmi-primary); border-radius: inherit; }
.mm .mm-pres__balkn { text-align: right; font-weight: 700; color: var(--mmi-ink); font-variant-numeric: tabular-nums; }
.mm .mm-pres__voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mm .mm-pres__stippen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mm .mm-pres__stip { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: var(--mmi-border-strong); cursor: pointer; transition: width .15s, background .15s; }
.mm .mm-pres__stip.is-active { width: 28px; background: var(--mmi-primary); }
.mm .mm-pres__stip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
@media (max-width: 760px) {
  .mm .mm-pres__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm .mm-pres__balk { grid-template-columns: minmax(0, 1fr) 48px auto; row-gap: 6px; }
  .mm .mm-pres__balk .mm-pres__spoor { grid-column: 1 / -1; grid-row: 2; }
  .mm .mm-pres__tegel { padding: 16px; }
}

/* ═══ Administratie in MM Intern (Loek 2026-10-14): gebruikers per rol met zoeken, het
   rechtenvenster met schakelaars, de rechtenmatrix. Alleen de bestaande --mmi-*-tokens. */
/* Zoekveld met vergrootglas (de scanveld-opbouw, maar op gewone hoogte). */
.mm .mm-zoekveld { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; }
.mm .mm-zoekveld > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--mmi-muted); pointer-events: none; }
.mm .mm-zoekveld > .mm-input { padding-left: 36px; }
/* Zoekveld rechts in een kaartkop (lijsten Klantretouren, Verzendlabels): niet over de hele kop uitrekken. */
.mm .mm-zoekveld--kop { flex: 0 1 300px; }
/* Invoer in een tabelrij: rand pas bij hover/focus, anders lijkt een lijst van 25 accounts één groot formulier. */
.mm .mm-table .mm-input--stil, .mm .mm-table .mm-select--stil { height: 32px; font-size: 13px; border-color: transparent; background-color: transparent; box-shadow: none; } /* box-shadow: de globale input-regel geeft elk veld een schaduw */
.mm .mm-table .mm-select--stil { background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; }
.mm .mm-table tr:hover .mm-input--stil, .mm .mm-table tr:hover .mm-select--stil:not(:disabled),
.mm .mm-table .mm-input--stil.is-gewijzigd, .mm .mm-table .mm-select--stil.is-gewijzigd { border-color: var(--mmi-border-strong); background-color: var(--mmi-surface); }
.mm .mm-table .mm-input--stil:focus, .mm .mm-table .mm-select--stil:focus { border-color: var(--mmi-primary); background-color: var(--mmi-surface); box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-table .mm-select--stil:disabled { background-image: none; background-color: transparent; color: var(--mmi-ink-soft); cursor: default; }
/* Minimale breedtes: op een telefoon scrolt de tabel binnen de kaart, in plaats van de velden tot niets te persen. */
.mm .mm-table .mm-input--stil { min-width: 140px; }
.mm .mm-table .mm-input--stil[type="email"] { min-width: 200px; }
.mm .mm-table .mm-select--stil { min-width: 132px; }
.mm .mm-table td.mm-cel-nowrap { white-space: nowrap; }
.mm .mm-table td > .mm-hint { display: block; }
.mm .mm-table th.mm-cel-midden, .mm .mm-table td.mm-cel-midden { text-align: center; padding-left: 6px; padding-right: 6px; }
.mm .mm-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--mmi-primary); vertical-align: middle; }
.mm .mm-table td.mm-cel-acties { width: 1%; white-space: nowrap; padding-right: 0; }
.mm .mm-table td.mm-cel-acties .mm-actions { flex-wrap: nowrap; justify-content: flex-end; }
/* Laden: skeletblokken in plaats van een spinner (stijlgids §6). */
.mm .mm-skelet { display: block; height: 14px; border-radius: 6px; background: var(--mmi-step-idle); }

/* Rechtenvenster: vaste hoogte, anders springt het venster bij elke letter in het zoekveld. */
.mm-modal--rechten { height: min(860px, calc(100vh - 40px)); height: min(860px, calc(100dvh - 40px)); }
.mm .mm-modal__balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 24px 12px; border-bottom: 1px solid var(--mmi-border); }
.mm .mm-rechten { display: grid; gap: 20px; padding-top: 8px; }
.mm .mm-rechtengroep__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--mmi-border); }
.mm .mm-rechtengroep__kop h3 { margin: 0; font-weight: 650; font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--mmi-ink); }
.mm .mm-rechtengroep__kop span { font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-recht { display: flex; align-items: center; gap: 12px; min-height: 40px; border-bottom: 1px dashed var(--mmi-border); cursor: pointer; }
.mm .mm-recht:last-child { border-bottom: 0; }
.mm .mm-recht .mm-toggle { flex: none; height: 32px; }
.mm .mm-recht__label { flex: 1 1 auto; font-size: 14px; line-height: 20px; color: var(--mmi-ink); min-width: 0; }
/* Sub-recht: ingesprongen onder zijn ouder, met de pijl die het oude scherm ook had. */
.mm .mm-recht--sub .mm-recht__label { position: relative; display: block; padding-left: 22px; font-size: 13px; color: var(--mmi-ink-soft); }
.mm .mm-recht--sub .mm-recht__label::before { content: "↳"; position: absolute; left: 4px; color: var(--mmi-muted); }
/* Context = staat erbij als ouder van een zoekresultaat, voldoet zelf niet. */
.mm .mm-recht.is-context .mm-recht__label, .mm .mm-table tr.is-context .mm-recht__label { color: var(--mmi-muted); }
@media (max-width: 640px) {
  .mm .mm-modal__balk { padding: 0 16px 12px; }
}
/* Verwijderbare keuze (RMA-afkeurlijsten, IP-regels): chip met een kruisje (de × van .mm-pchip). */
.mm .mm-optie { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 12px; border-radius: 999px; border: 1px solid var(--mmi-border-strong);
  background: var(--mmi-surface); color: var(--mmi-ink); font-size: 13px; line-height: 18px; }
.mm .mm-optie > svg { width: 14px; height: 14px; flex: none; }
/* SKU-dekking: per soort één regel met vaste kolommen, anders wordt 150 rijen een zaagtand (Brian 16-09-2026). */
.mm .mm-assen { display: grid; gap: 2px; }
.mm .mm-assen__regel { display: grid; grid-template-columns: 52px 120px 84px 150px auto; gap: 12px; align-items: baseline; font-size: 12px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-assen__regel > span { overflow-wrap: anywhere; }
.mm .mm-assen__soort { font-weight: 650; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mmi-ink-soft); }
.mm .mm-assen__let-op { color: var(--mmi-warning); font-weight: 650; }
.mm .mm-assen__waarschuwing { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--mmi-warning); font-weight: 650; }
@media (max-width: 900px) { .mm .mm-assen__regel { grid-template-columns: 1fr; gap: 0; } }
.mm .mm-uitleg { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-uitleg b { color: var(--mmi-ink-soft); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MM Intern voor de overige schermen (2026-10-14). Eén blok per module, elk onder zijn eigen kop:
   zo raken de ombouwen elkaar niet. Alleen --mmi-*-tokens; alles gescoped onder .mm.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Gedeeld modelveld (components/ui/GroupedModelSelect) binnen .mm, op elk scherm gelijk. Het zoekveld
   ín de knop kreeg de globale invoer-rand en -schaduw (input[type="text"] is specifieker dan
   .mm-model-select-input): een veld in een veld, met twee randen. Dat stond er al vóór de ombouw. */
.mm .mm-model-select-trigger { min-height: 40px; padding: 0 12px; border-color: var(--mmi-border-strong); border-radius: var(--mmi-radius-sm);
  background: var(--mmi-surface); box-shadow: none; font-size: 14px; font-weight: 400; }
.mm .mm-model-select-trigger:focus-within, .mm .mm-model-select-trigger.is-open { border-color: var(--mmi-primary); box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-model-select-trigger.is-disabled { background: var(--mmi-disabled-bg); }
.mm .mm-model-select-trigger .mm-model-select-input,
.mm .mm-model-select-trigger .mm-model-select-input:hover,
.mm .mm-model-select-trigger .mm-model-select-input:focus { height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* ═══ Reparatiebeheer in MM Intern ═══ */
/* Reparatiemanagement (/reparatiebeheer) en het Instroom-paneel (ook op het RMA-scherm).
   Alles hier heet mm-rb-*, zodat het niet botst met de andere ombouwen. */

/* De locatiekeuze (components/locatie/LocatieKeuze, gedeeld) is een kale <select> zonder klasse:
   hier krijgt hij dezelfde opmaak als .mm-select, anders staat er één oud veld tussen de nieuwe.
   Eén regel voor beide wrappers (.mm-rb-locatie in Reparatiebeheer, .mm-locatieveld op /reparaties
   en in de batchkiezer), zodat hetzelfde veld overal gelijk blijft. */
.mm .mm-rb-locatie { display: flex; flex: 1 1 200px; min-width: 0; align-items: center; }
.mm .mm-rb-locatie > select, .mm .mm-locatieveld > select { width: 100%; height: 40px; margin: 0; padding: 0 36px 0 12px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm);
  background-color: var(--mmi-surface); color: var(--mmi-ink); font-family: inherit; font-size: 14px; line-height: 20px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mmi-muted) 50%), linear-gradient(135deg, var(--mmi-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.mm .mm-rb-locatie > select:focus, .mm .mm-locatieveld > select:focus { outline: none; border-color: var(--mmi-primary); box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-rb-locatie > select:disabled, .mm .mm-locatieveld > select:disabled { background-color: var(--mmi-disabled-bg); color: var(--mmi-disabled-ink); cursor: not-allowed; }
.mm .mm-rb-locatie > a, .mm .mm-locatieveld > a { font-size: 13px; }

/* Badge die ook een knop is (⚠ Prijs onbekend / Mist: … openen een venster). */
.mm button.mm-rb-badgeknop { border: 0; font-family: inherit; cursor: pointer; height: auto; min-height: 22px; white-space: normal; text-align: left; }
.mm button.mm-rb-badgeknop:hover { filter: brightness(.96); }
.mm button.mm-rb-badgeknop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm button.mm-rb-badgeknop:disabled { cursor: not-allowed; opacity: .6; }
/* Badge met een waarschuwingsicoon in plaats van de stip. */
.mm .mm-rb-badge-ico::before { display: none; }
.mm .mm-rb-badge-ico > svg { width: 12px; height: 12px; flex: none; }

/* ⋯-menu op een batchtegel: een uitklapper onder de knop (de wrap is position: relative), niet
   het zwevende .mm-menu van het takenbord — de buiten-klik-afhandeling leunt op die wrap. */
.mm .mm-rb-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; }

/* Batchtegels: een raster van kleine kaarten in de kaart "Bestaande batches". */
.mm .mm-rb-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mm .mm-rb-tegel { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface); }
/* Volledig afgerond: merkrand, zoals de oude tegel; gearchiveerd: gedimd. */
.mm .mm-rb-tegel.is-afgerond { border-color: var(--mmi-primary); background: var(--mmi-surface-tint); }
.mm .mm-rb-tegel.is-archief { opacity: .75; }
.mm .mm-rb-tegel__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* Inline i.p.v. flex: een lange batchnaam brak anders als geheel naar een eigen regel onder de punaise. */
.mm .mm-rb-tegel__titel { min-width: 0; font-weight: 650; font-size: 15px; line-height: 22px; color: var(--mmi-ink); overflow-wrap: anywhere; }
.mm .mm-rb-tegel__titel > svg { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--mmi-primary); }
.mm .mm-rb-tegel__titel > .mm-badge { margin-left: 6px; vertical-align: 1px; }
.mm .mm-rb-tegel__rechts { display: flex; align-items: center; gap: 6px; flex: none; }
.mm .mm-rb-tegel__meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-rb-tegel .mm-table-wrap { margin: 0; padding: 0; } /* de tegel heeft zelf al padding */
.mm .mm-rb-tegel > .mm-btn { justify-self: start; }
.mm .mm-rb-kosten { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--mmi-ink); font-variant-numeric: tabular-nums; }
.mm .mm-rb-kosten > dt { color: var(--mmi-muted); }
.mm .mm-rb-kosten > dd { margin: 0; text-align: right; }
.mm .mm-rb-kosten > .is-totaal { color: var(--mmi-ink); font-weight: 650; }

/* Groepen (Toestelbeheer, Onderdeelprijzen): een native <details> per groep. */
.mm .mm-rb-groep { border-top: 1px solid var(--mmi-border); }
.mm .mm-rb-groep:last-child { border-bottom: 1px solid var(--mmi-border); }
.mm .mm-rb-groep > summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.mm .mm-rb-groep > summary::-webkit-details-marker { display: none; }
.mm .mm-rb-groep > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }
.mm .mm-rb-groep > summary .mm-eyebrow { margin: 0; }
.mm .mm-rb-groep > summary strong { font-weight: 650; color: var(--mmi-ink); }
.mm .mm-rb-chev { width: 16px; height: 16px; flex: none; color: var(--mmi-muted); transition: transform .12s; }
.mm .mm-rb-groep[open] > summary .mm-rb-chev { transform: rotate(90deg); }
.mm .mm-rb-groep__body { padding: 0 0 16px 26px; }
@media (max-width: 640px) { .mm .mm-rb-groep__body { padding-left: 0; } }
/* Uitklapbaar blok binnen een regel (bereik van een soort, kleuren/opslag van een model). */
.mm .mm-rb-sub { display: grid; gap: 8px; padding-left: 4px; }
.mm .mm-rb-sub .mm-eyebrow { margin: 8px 0 0; }
.mm .mm-rb-sub .mm-chip:disabled, .mm .mm-rb-sub .mm-pchip__x:disabled { cursor: not-allowed; opacity: .5; } /* bezig met opslaan */
.mm .mm-rb-bereik { display: grid; gap: 4px; padding-left: 4px; }
.mm .mm-rb-bereik .mm-check { align-items: center; }
.mm .mm-rb-bereik .mm-check input { margin: 0; }
.mm .mm-rb-bereik__modellen { display: grid; gap: 4px; padding-left: 26px; font-size: 13px; }
.mm .mm-rb-modelknop { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; width: 100%; padding: 10px 0; border: 0; background: none;
  font-family: inherit; font-size: 14px; color: var(--mmi-ink); text-align: left; cursor: pointer; }
.mm .mm-rb-modelknop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }
.mm .mm-rb-modelknop > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.mm .mm-rb-modelknop[aria-expanded="true"] .mm-rb-chev { transform: rotate(90deg); }

/* Prijsvelden van één model: zoveel kolommen als er passen. */
.mm .mm-rb-prijsvelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 0 0 12px 4px; }
.mm .mm-rb-veldfout { font-size: 12px; line-height: 16px; color: var(--mmi-danger); }
/* "Sinds … — mogelijk verlopen." met de rode Verlengen-knop erachter, onder een prijsveld. */
.mm .mm-rb-verlopen { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }

/* "In gebruik · prijs nodig": omlijnd blok bovenaan de prijzenkaart (wit: op getint viel de
   indigo melding erin weg). */
.mm .mm-rb-inzet { display: grid; gap: 10px; padding: 16px; border-radius: var(--mmi-radius-md); background: var(--mmi-surface); border: 1px solid var(--mmi-border-strong); }
.mm .mm-rb-inzet__kop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.mm .mm-rb-inzet__kop > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.mm .mm-rb-inzet .mm-tabs { margin: 0; border-bottom: 0; }
.mm .mm-rb-inzet .mm-tab:disabled { cursor: not-allowed; opacity: .5; }
.mm .mm-rb-prijsrij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 10px 0; border-top: 1px dashed var(--mmi-border-strong); }
.mm .mm-rb-prijsrij:first-child { border-top: 0; }
.mm .mm-rb-prijsrij__naam { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--mmi-ink); }
.mm .mm-rb-prijsrij__acties { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mm .mm-rb-prijsrij__acties > .mm-input { width: 120px; }
.mm .mm-rb-prijsrij__meta { grid-column: 1 / -1; display: grid; gap: 2px; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
/* "In gebruik · prijs nodig" per plek (Reparatie urgent / Batch-reparaties / Instroom). */
.mm .mm-rb-bron { display: grid; gap: 2px; }
.mm .mm-rb-bron + .mm-rb-bron { padding-top: 12px; border-top: 1px solid var(--mmi-border); }
@media (max-width: 640px) {
  .mm .mm-rb-prijsrij { grid-template-columns: 1fr; }
  .mm .mm-rb-prijsrij__acties { justify-content: flex-start; flex-wrap: wrap; }
}

/* Vinkjes in een venster (onderdelen van een losse reparatie). */
.mm .mm-rb-vinkjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 16px; }
/* Bedrag met €-teken ervoor (prijsvenster in de Instroom). */
.mm .mm-rb-bedrag { display: flex; align-items: center; gap: 8px; }
.mm .mm-rb-bedrag > span { font-weight: 600; color: var(--mmi-muted); }
/* Keuzes in het doorzetvenster: brede knoppen onder elkaar, tekst links. */
.mm .mm-rb-keuzes { display: grid; gap: 8px; }
.mm .mm-rb-keuzes > .mm-btn { justify-content: flex-start; }


/* ═══ RMA in MM Intern ═══ */
/* RMA-overzicht (/rma-overview) en de toestelkaart (uitgeklapt in het overzicht).
   De Open-lijst telt er zo 120: één dunne klaprij per toestel of batch, de volle kaart pas
   na uitklappen. Zelfde opbouw als de oude rma-open-*-rij, nu op de --mmi-*-tokens. */
.mm .mm-rma-lijst { display: grid; gap: 6px; min-width: 0; }
/* Open per inkooppartij (2026-11-09): een kop per partij met de bundelknop, de kaarten eronder. */
.mm .mm-rma-partij { display: grid; gap: 8px; min-width: 0; }
.mm .mm-rma-partij + .mm-rma-partij { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--mmi-border); }
.mm .mm-rma-partij__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mm .mm-rma-partij__kop .mm-btn { margin-left: auto; }
.mm .mm-rma-item { min-width: 0; overflow: hidden; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface); }
.mm .mm-rma-item.is-open { border-color: var(--mmi-primary); box-shadow: var(--mmi-shadow-active); }
/* Een doorklik zet de uitgeklapte kaart bovenaan: niet onder de vaste zoekbalk. */
.mm .mm-rma-item { scroll-margin-top: 16px; }
body.mm-has-nav .mm .mm-rma-item { scroll-margin-top: 80px; }
.mm .mm-rma-rij { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px 4px 12px; }
.mm .mm-rma-rij.is-open { background: var(--mmi-surface-tint); }
/* Garantie-gloed: rood = ≤ 3 dagen of te laat, geel = 4–7 dagen. Ná is-open, zodat de urgentie
   ook op een opengeklapte rij blijft staan. De badge in de rij zegt het met tekst. */
.mm .mm-rma-rij.mm-rma-rij--rood { background: var(--mmi-danger-soft); }
.mm .mm-rma-rij.mm-rma-rij--geel { background: var(--mmi-warning-soft); }
/* Batch-rijen houden een steviger hoogte: een batch is een eenheid met acties. */
.mm .mm-rma-rij--batch { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.mm .mm-rma-rij--aanvecht { flex-wrap: wrap; gap: 10px; padding: 8px 8px 8px 12px; }
.mm .mm-rma-rij input[type="checkbox"] { flex: none; margin: 0; }
.mm .mm-rma-rij__knop { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; border-radius: var(--mmi-radius-sm);
  background: none; font: inherit; color: var(--mmi-ink); text-align: left; cursor: pointer; }
.mm .mm-rma-rij__knop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-rma-rij__knop > svg { flex: none; width: 14px; height: 14px; color: var(--mmi-muted); }
.mm .mm-rma-rij__nr { flex: none; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-rma-rij__model { flex: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--mmi-ink); }
.mm .mm-rma-rij__naam { flex: none; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--mmi-ink); }
.mm .mm-rma-rij__sn { flex: none; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-rma-rij__spec { flex: none; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-rma-rij__soort, .mm .mm-rma-rij__meta { flex: 1 1 auto; min-width: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mmi-ink-soft); }
.mm .mm-rma-rij__meta { color: var(--mmi-muted); }
.mm .mm-rma-rij__chips { flex: none; display: flex; align-items: center; gap: 6px; }
.mm .mm-rma-rij__chips .mm-badge { max-width: 180px; }
.mm .mm-rma-rij__acties { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
/* Vaste minimumbreedte voor klok en week: anders begint elke rij zijn chips op een andere x
   ("8d" naast "Te laat · 3d") en oogt de lijst rommelig. */
.mm .mm-rma-klok { min-width: 72px; justify-content: center; }
.mm .mm-rma-week { min-width: 56px; justify-content: center; }
/* Badge met een icoon i.p.v. de stip (factuur, foto's). */
.mm .mm-badge.mm-rma-badge--ico::before { display: none; }
.mm .mm-badge.mm-rma-badge--ico > svg { flex: none; width: 12px; height: 12px; }
.mm .mm-rma-afkap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Aanmelder en portaal-herkomst: context, geen signaal — kale tekst met een icoontje. */
.mm .mm-rma-meta { display: inline-flex; align-items: center; gap: 4px; max-width: 170px; font-size: 12px; color: var(--mmi-muted); white-space: nowrap; }
.mm .mm-rma-meta > svg { flex: none; width: 13px; height: 13px; }
/* Notities en sticker op de rij: .mm-icon-btn kleurt bij hover rood, en dat hoort alleen bij verwijderen. */
.mm .mm-icon-btn.mm-rma-ico:hover { background: var(--mmi-step-idle); color: var(--mmi-ink); }
.mm .mm-rma-item__detail { display: grid; gap: 12px; padding: 16px; border-top: 1px solid var(--mmi-border); background: var(--mmi-bg); }
.mm .mm-rma-item__notities { margin: 0; white-space: pre-line; }
/* Aanvechtcase: hún afwijsreden naast óns weerwoord; het veld krijgt de meeste ruimte. */
.mm .mm-rma-hun { flex: 0 1 200px; min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mmi-danger); }
.mm .mm-rma-rij--aanvecht .mm-input { flex: 1 1 240px; width: auto; min-width: 160px; height: 32px; font-size: 13px; }
/* Actiebalk boven de Open-lijst: plakt bij het scrollen (120 rijen) en schuift onder de vaste zoekbalk. */
.mm .mm-rma-acties { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  margin: 0 -24px 12px; padding: 10px 24px; background: var(--mmi-surface); border-bottom: 1px solid var(--mmi-border); }
.mm .mm-rma-acties > .mm-hint { margin-right: auto; }
body.mm-has-nav .mm .mm-rma-acties { top: 64px; }
/* Zoeker/scanner: groot veld met het wis-kruisje rechts erin; de meldregel blijft in de DOM (aria-live). */
.mm .mm-rma-zoek { display: grid; min-width: 0; }
.mm .mm-rma-zoek .mm-input--lg { padding-right: 52px; }
.mm .mm-rma-zoekmelding { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-rma-zoekmelding:empty { margin: 0; }
/* Leverancier-tabs onder de fase-tabs: als chips, zodat de twee niveaus niet op elkaar lijken. */
.mm .mm-rma-levtabs .mm-chip .mm-count { margin-left: 0; }
.mm .mm-rma-levtabs .mm-chip.is-active .mm-count { background: var(--mmi-surface); color: var(--mmi-primary-ink); }

/* Toestelkaart: kop met acties, links het formulier, rechts garantie en M360. Zelfde verhouding en
   omslagpunt als de oude detail-layout (1.5fr / min. 280px, onder elkaar vanaf 1180px): in het
   overzicht staat de kaart ingesprongen in een rij, dus de ruimte is krapper dan de viewport doet denken. */
.mm .mm-rma-detail > .mm-2kol { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); }
@media (max-width: 1180px) { .mm .mm-rma-detail > .mm-2kol { grid-template-columns: minmax(0, 1fr); } }
.mm .mm-rma-detailkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; }
.mm .mm-rma-detailkop .mm-badge { height: auto; min-height: 22px; white-space: normal; } /* "Ontbreekt: …" kan lang zijn */
/* Inklapbare blokken: <details> blijft, je kunt een blok dichtklappen zoals voorheen. */
.mm .mm-rma-sectie > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; cursor: pointer; border-radius: var(--mmi-radius-sm); }
.mm .mm-rma-sectie > summary::-webkit-details-marker { display: none; }
.mm .mm-rma-sectie > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-rma-sectie > summary > svg { flex: none; width: 16px; height: 16px; color: var(--mmi-muted); transition: transform .12s; }
.mm .mm-rma-sectie[open] > summary { margin-bottom: 16px; }
.mm .mm-rma-sectie[open] > summary > svg { transform: rotate(180deg); }
.mm .mm-hint.mm-rma-hint--fout { color: var(--mmi-danger); font-weight: 600; }
.mm .mm-rma-mono { font-family: var(--mmi-font-mono); }
/* Model-kiezer (gedeeld onderdeel) op de hoogte en rand van een .mm-input. */
.mm .mm-rma-detail .mm-model-select-trigger { min-height: 40px; padding: 0 12px; border-color: var(--mmi-border-strong); border-radius: var(--mmi-radius-sm);
  background: var(--mmi-surface); box-shadow: none; font-size: 14px; }
.mm .mm-rma-detail .mm-model-select-trigger.is-disabled { background: var(--mmi-disabled-bg); }
/* Afkeurcode scannen: een eigen vlak, want dit is waar het werk op de kaart gebeurt. */
.mm .mm-rma-scanblok { display: grid; gap: 10px; padding: 12px 16px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm); background: var(--mmi-surface-tint); }
.mm .mm-rma-scanblok .mm-chip .mm-code { font-size: 12px; color: var(--mmi-primary-ink); }
.mm .mm-rma-scanblok .mm-chip:disabled { cursor: not-allowed; color: var(--mmi-disabled-ink); } /* archief: de fieldset zet ze uit */
/* M360-teststatus: knop met een gekleurde stip; de tekst ernaast zegt wat de stip betekent. */
.mm .mm-rma-m360 { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--mmi-border-strong);
  border-radius: var(--mmi-radius-sm); background: var(--mmi-surface); font: inherit; color: var(--mmi-ink); text-align: left; cursor: pointer; }
.mm .mm-rma-m360:hover:not(:disabled) { background: var(--mmi-surface-tint); }
.mm .mm-rma-m360:disabled { cursor: default; background: var(--mmi-surface-tint); color: var(--mmi-ink-soft); }
.mm .mm-rma-m360:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-rma-stip { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mmi-border-strong); }
.mm .mm-rma-stip--bezig { background: var(--mmi-primary); }
.mm .mm-rma-stip--ok { background: var(--mmi-success); }
.mm .mm-rma-stip--let-op { background: var(--mmi-warning); }
.mm .mm-rma-stip--fout { background: var(--mmi-danger); }
/* Foto's als bewijs: vierkante tegels met de bestandsnaam eronder en het wis-kruisje erop. */
.mm .mm-rma-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.mm .mm-rma-foto { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--mmi-border);
  border-radius: var(--mmi-radius-sm); background: var(--mmi-surface-tint); }
.mm .mm-rma-foto img, .mm .mm-rma-foto video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--mmi-step-idle); }
.mm .mm-rma-foto__leeg { display: grid; place-content: center; justify-items: center; gap: 6px; aspect-ratio: 1 / 1; background: var(--mmi-step-idle); }
.mm .mm-rma-foto figcaption { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-rma-foto figcaption > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm .mm-rma-foto figcaption svg { flex: none; width: 13px; height: 13px; }
.mm .mm-icon-btn.mm-rma-foto__weg { position: absolute; top: 6px; right: 6px; z-index: 2; background: var(--mmi-surface); color: var(--mmi-danger); box-shadow: var(--mmi-shadow-card); }

/* Vensters: de oude breedtes (940px voor lijsten in een venster, 720px voor de uitleg). */
.mm.mm-modal.mm-rma-modal--wijd { width: min(940px, 100%); }
.mm.mm-modal.mm-rma-modal--breed { width: min(720px, 100%); }
.mm .mm-rma-mailtekst { margin: 0; padding: 12px 14px; white-space: pre-wrap; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm);
  background: var(--mmi-surface-tint); font-family: inherit; font-size: 13px; line-height: 20px; color: var(--mmi-ink); }
.mm .mm-rma-keuzelijst { display: grid; gap: 6px; }
.mm .mm-rma-keuzelijst > label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mm .mm-rma-keuzelijst > label input { flex: none; margin: 0; }
/* Batchkiezer: één knop per batch, naam links en fase · aantal · datum rechts. */
.mm .mm-btn.mm-rma-kiesbatch { justify-content: space-between; gap: 12px; width: 100%; height: auto; min-height: 44px; padding: 8px 12px; white-space: normal; text-align: left; font-weight: 500; }
.mm .mm-rma-kiesbatch > span:first-child { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mm .mm-rma-log { display: grid; gap: 8px; max-height: 340px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.mm .mm-rma-log > li { padding: 8px 12px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm); background: var(--mmi-surface); }
.mm .mm-rma-log p { margin: 0; }
.mm .mm-rma-log p:first-child { color: var(--mmi-ink); }
.mm .mm-rma-log p + p { margin-top: 2px; }
/* Drie of vier knoppen in een venstervoet: op een telefoon laten afbreken i.p.v. buiten het venster te lopen. */
.mm .mm-modal__foot .mm-actions.mm-rma-voetknoppen { flex-wrap: wrap; justify-content: flex-end; }
.mm .mm-rma-subkop { margin: 4px 0 0; }
/* Antwoord importeren: per uitslag een blok, de regels eronder. */
.mm .mm-rma-planblok { display: grid; gap: 6px; padding: 12px 16px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface); }
.mm .mm-rma-planblok__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--mmi-ink); }
.mm .mm-rma-planblok__kop > svg { flex: none; width: 15px; height: 15px; color: var(--mmi-muted); }
.mm .mm-rma-planblok__kop > .mm-actions { margin-left: auto; }
.mm .mm-rma-planrij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--mmi-border); }
.mm .mm-rma-planrij:first-of-type { border-top: 0; }
.mm .mm-rma-planrij .mm-select { flex: 0 1 auto; width: auto; max-width: 280px; }
.mm .mm-rma-reden { flex: 1 1 120px; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mmi-ink); }
/* De uitleg is leestekst met marges per alinea (tiu-*), geen raster. */
.mm .mm-modal__body.mm-rma-uitleg { display: block; }
.mm .mm-rma-uitleg .mm-eyebrow { margin: 22px 0 8px; }
.mm .mm-rma-uitleg .mm-tabs { margin: 0; }
/* Het nagebouwde scherm is een plaatje: niets erin is klikbaar. */
.mm .mm-rma-uitleg .tiu-mock .mm-tab, .mm .mm-rma-uitleg .tiu-mock .mm-chip, .mm .mm-rma-uitleg .tiu-mock .mm-btn { cursor: default; }

@media (max-width: 760px) {
  /* Op een telefoon past een toestelrij niet op één regel: laat hem afbreken i.p.v. af te knippen. */
  .mm .mm-rma-rij { flex-wrap: wrap; }
  .mm .mm-rma-rij__knop { flex-wrap: wrap; row-gap: 4px; }
  .mm .mm-rma-rij__soort, .mm .mm-rma-rij__meta { flex-basis: 100%; }
  .mm .mm-rma-rij__chips { flex-wrap: wrap; }
  .mm .mm-rma-rij__acties { margin-left: auto; }
  .mm .mm-rma-item__detail { padding: 12px; }
}
/* Zelfde grens als de kaartpadding (.mm-card: 16px vanaf 640px), anders steekt de balk niet tot de rand. */
@media (max-width: 640px) { .mm .mm-rma-acties { margin: 0 -16px 12px; padding: 10px 16px; } }


/* ═══ Inkooppartijen in MM Intern ═══ */
/* Partijen als lijst (Loek 2026-10-15, was een raster van tegels): per partij een rij met links naam,
   status en data, in het midden de voortgang, rechts de acties. De hele rij opent het werkstation
   (role=button), dus hover en focusring op de rij zelf. Een afgeronde partij: groene balk. */
.mm .mm-ip-zoek { flex: 0 1 320px; }
.mm .mm-ip-lijst { display: grid; }
.mm .mm-ip-partij { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, 1fr) auto; gap: 8px 24px; align-items: center;
  margin: 0 -12px; padding: 14px 12px; border-top: 1px dashed var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); cursor: pointer;
  transition: background .12s; }
.mm .mm-ip-partij:first-child { border-top: 0; }
.mm .mm-ip-partij:hover { background: var(--mmi-surface-tint); }
.mm .mm-ip-partij:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-ip-partij.is-skelet { grid-template-columns: 1fr; cursor: default; padding-top: 22px; padding-bottom: 22px; }
.mm .mm-ip-partij.is-skelet:hover { background: none; }
.mm .mm-ip-partij__hoofd { display: grid; gap: 2px; min-width: 0; }
.mm .mm-ip-partij__titel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 650; font-size: 15px; line-height: 22px; color: var(--mmi-ink); overflow-wrap: anywhere; }
.mm .mm-ip-partij__meta { margin: 0; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-ip-partij__voortgang { display: grid; gap: 6px; min-width: 0; }
.mm .mm-ip-partij.is-afgerond .mm-balk > span { background: var(--mmi-success); }
.mm .mm-ip-partij__acties { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; cursor: default; }
/* Lopend in groepen (2026-10-15): Ingescand (open) en Nog niets ingescand (dicht), met dezelfde balk als
   de groepsrij in een tabel. Nog niets ingescand in grijs: daar is nog niets begonnen. Tijdens het
   zoeken staat alles open en is de knop uit. */
.mm .mm-ip-lijstgroep + .mm-ip-lijstgroep { margin-top: 12px; }
.mm .mm-ip-lijstkop { margin: 0 -12px; background: var(--mmi-surface-tint); border-top: 1px solid var(--mmi-border-strong); border-bottom: 1px solid var(--mmi-border-strong);
  box-shadow: inset 3px 0 0 var(--mmi-primary); font-weight: 650; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mmi-primary-ink); }
.mm .mm-ip-lijstkop:has(.mm-ip-groepknop:not(:disabled)):hover { background: var(--mmi-step-idle); }
.mm .mm-ip-lijstkop--leeg { box-shadow: inset 3px 0 0 var(--mmi-muted); color: var(--mmi-ink-soft); }
.mm .mm-ip-lijstkop .mm-ip-groepknop:disabled { cursor: default; }
.mm .mm-ip-lijstkop + .mm-ip-lijst { margin-top: 4px; }
@media (max-width: 860px) {
  .mm .mm-ip-partij { grid-template-columns: minmax(0, 1fr); }
  .mm .mm-ip-partij__acties { justify-content: flex-start; }
  .mm .mm-ip-zoek { flex-basis: 100%; }
}
/* "Pricing gedaan": een <label> met het vakje erin (een checkbox ín een button is ongeldige HTML).
   Tijdens het schrijven grijst mm-btn[aria-disabled] het label uit; is-bezig geeft de wachtcursor. */
.mm .mm-ip-vink { user-select: none; }
.mm .mm-ip-vink input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--mmi-success); }
.mm .mm-ip-vink input[type="checkbox"]:disabled, .mm .mm-ip-vink.is-bezig { cursor: wait; }

/* Meldingen in een lijst (prijzen, scanpoort, dubbel gescand): compacter dan een losse melding,
   anders duwen zeven meldingen de tabel en de knop eronder van het scherm (2026-08-18). */
.mm .mm-ip-meldingen { display: grid; gap: 8px; }
.mm .mm-ip-kort { padding: 8px 12px; }
.mm .mm-ip-meldingen ul, .mm .mm-ip-kort ul { margin: 6px 0 0; padding-left: 18px; }
/* Uitklap (details) met de samenvattingsregel als klikbare regel. */
.mm .mm-ip-uitklap > summary { cursor: pointer; font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-ip-uitklap[open] > summary { margin-bottom: 12px; }

/* Toestellentabel van het werkstation: elf kolommen, en die moet kunnen SCROLLEN in plaats van te
   knijpen. Nowrap is het werkende deel (de inhoud ís dan de minimumbreedte, zie de oude
   .mm-partij-toestellen-regel); compacte cellen zodat de statuskolom op een werkstationscherm
   in beeld blijft (2026-08-23); een lang model kapt af met … (volle naam in de title). */
.mm .mm-ip-toestellen .mm-table { min-width: 640px; }
.mm .mm-ip-toestellen .mm-table th, .mm .mm-ip-toestellen .mm-table td { white-space: nowrap; }
.mm .mm-ip-toestellen .mm-table td { padding-top: 8px; padding-bottom: 8px; }
.mm .mm-ip-toestellen td.mm-ip-model { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.mm .mm-ip-toestellen .mm-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
/* Aangelichte rij na een deeplink (?toestel=) of "Naar toestel". */
.mm .mm-ip-toestellen tr.is-focus-rij > td { background: var(--mmi-primary-soft); }
/* Sorteerbare kolomkop: een knop die eruitziet als de kopletter; de gesorteerde kolom in merkkleur. */
.mm .mm-ip-sorteer { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.mm .mm-ip-sorteer:hover, .mm .mm-ip-sorteer.is-actief { color: var(--mmi-primary); }
.mm .mm-ip-sorteer:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: 4px; }
/* "Afgekeurd" is een badge én een knop (afkeur-sticker opnieuw printen). */
.mm .mm-ip-badgeknop { border: 0; font-family: inherit; cursor: pointer; }
.mm .mm-ip-badgeknop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
/* Het kruisje is hier altijd rood, niet pas bij hover: verwijderen is onomkeerbaar. */
/* Groepen Nog open / Afgerond / Afgekeurd (Loek 2026-10-15): de groepsrij is zelf de uitklapknop,
   over de hele breedte. De streep en de tekst in de kleur van de status: groen = afgerond,
   rood = afgekeurd; het woord staat er altijd bij. */
.mm .mm-table tr.mm-ip-groep > td { padding: 0; }
.mm .mm-ip-groepknop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; }
/* Hover op de cel en niet op de knop: de knopachtergrond dekte de gekleurde streep van de cel af. */
.mm .mm-table tr.mm-ip-groep:hover > td { background: var(--mmi-step-idle); }
.mm .mm-ip-groepknop:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mmi-primary); }
.mm .mm-ip-groepknop .mm-count { margin-left: 0; }
/* Samenvatting op de balk (Afgekeurd: "Batterij 20 · Scherm-module 8"): gewone letters, geen kapitalen. */
.mm .mm-ip-groepknop__samenvatting { margin-left: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; color: var(--mmi-ink-soft); }
.mm .mm-ip-groepknop__pijl { width: 14px; height: 14px; flex: none; transition: transform .12s; }
.mm .mm-ip-groepknop[aria-expanded="true"] .mm-ip-groepknop__pijl { transform: rotate(90deg); }
.mm .mm-table tr.mm-ip-groep--gelabeld > td { box-shadow: inset 3px 0 0 var(--mmi-success); color: var(--mmi-success); }
.mm .mm-table tr.mm-ip-groep--afgekeurd > td { box-shadow: inset 3px 0 0 var(--mmi-danger); color: var(--mmi-danger); }
/* Doorverkocht (2026-10-23): het huis uit, niets meer aan te doen — neutraal. */
.mm .mm-table tr.mm-ip-groep--doorverkocht > td { box-shadow: inset 3px 0 0 var(--mmi-ink-soft); color: var(--mmi-ink-soft); }
/* Kwijt (2026-10-23): binnen geweest, nu onvindbaar — let-op, het wacht op boven water komen. */
.mm .mm-table tr.mm-ip-groep--kwijt > td { box-shadow: inset 3px 0 0 var(--mmi-warning); color: var(--mmi-warning); }
/* Bak-kopje binnen een statusgroep (Loek 2026-11-09): "Bak 3 · 12". Geen knop en geen kleur van
   een status — het is een tussenkop, de statusgroep blijft het ding dat je open- en dichtklapt.
   Ook gebruikt door Gerepareerd. */
.mm .mm-table tr.mm-ip-bakkop > td { padding: 6px 12px 4px 30px; background: var(--mmi-surface-tint);
  font-size: 12px; font-weight: 600; color: var(--mmi-ink-soft); border-bottom: 1px solid var(--mmi-border); }
.mm .mm-ip-bakkop .mm-count { margin-left: 6px; }
.mm .mm-ip-kwijt-notitie { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }

/* Werkstation (2026-10-15): stappenbalk, de kaart van de huidige stap met de teller rechtsboven,
   en SKU printen als eigen vak in die kaart. */
.mm .mm-step__dot svg { width: 14px; height: 14px; }
.mm .mm-ip-stapcode { font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-ip-teller { font-weight: 650; font-size: 14px; line-height: 22px; color: var(--mmi-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm .mm-ip-werk { display: grid; gap: 12px; min-width: 0; }
/* Bakken tijdens het scannen (2026-10-23): onder het scanveld, één regel per stap. */
.mm .mm-ip-bak { display: grid; gap: 8px; min-width: 0; }
.mm .mm-ip-bak__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mm .mm-ip-bak__tellen { display: grid; gap: 8px; }
.mm .mm-ip-bak__telling { width: 6em; }
.mm .mm-ip-bak__icoon { width: 16px; height: 16px; color: var(--mmi-muted); flex: none; }
.mm .mm-ip-bak__lijst summary { cursor: pointer; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-ip-bak__lijst ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.mm .mm-ip-bak__lijst li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mm .mm-ip-printvak { padding: 20px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface-tint); min-width: 0; }
.mm .mm-ip-printvak .mm-card__head { margin-bottom: 12px; }
@media (max-width: 640px) { .mm .mm-ip-printvak { padding: 16px; } }
/* Melding met een knop rechts ("Naar toestel ↓"): de knop breekt pas af als de tekst te lang wordt. */
.mm .mm-ip-melding-actie { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.mm .mm-ip-melding-actie > .mm-btn { flex: none; }
/* Meeschuivende balk (2026-10-15): een plakkend element zonder hoogte (de extra gap van het .mm-raster
   wordt op het volgende element rechtgezet), met de balk er absoluut in — verschijnen duwt dus niets weg.
   Onder de vaste zoekbalk als de zijbalk er is. De kaart van de stap scrolt bij "terug" onder die
   zoekbalk vandaan (scroll-margin). */
.mm .mm-ip-meeschuif { position: sticky; top: 0; z-index: 20; height: 0; }
/* Een rij in een grid kan niet negatief hoog worden: de extra gap rechtzetten op het element erna (review 2026-10-15). */
.mm .mm-ip-meeschuif + * { margin-top: -16px; }
body.mm-has-nav .mm .mm-ip-meeschuif { top: 64px; }
.mm .mm-ip-meeschuif__balk { position: absolute; top: 8px; left: 0; right: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px 8px 16px; background: var(--mmi-surface); border: 1px solid var(--mmi-primary); border-radius: var(--mmi-radius-md);
  box-shadow: var(--mmi-shadow-active), 0 8px 24px rgba(28, 26, 51, 0.12); }
.mm .mm-ip-meeschuif__naam { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--mmi-ink); }
.mm .mm-ip-werkkaart, .mm .mm-ip-anker { scroll-margin-top: 16px; }
body.mm-has-nav .mm .mm-ip-werkkaart, body.mm-has-nav .mm .mm-ip-anker { scroll-margin-top: 80px; }
/* Factuur & prijzen onder de stap (2026-10-15): één regel met badges; klopt alles, dan getint en rustig. */
.mm .mm-ip-prijsstrook { display: grid; gap: 6px; }
.mm .mm-ip-prijsstrook.is-goed { background: var(--mmi-surface-tint); }
.mm .mm-ip-prijsstrook__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mm .mm-ip-prijsstrook__rij > .mm-eyebrow { margin: 0 6px 0 0; }
.mm .mm-ip-prijsstrook__acties { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Een knop met een lange, rekenende tekst ("Prijzen koppelen aan 22 toestellen · 1 oude prijs wissen"):
   op een telefoon mag die afbreken, anders steekt hij buiten de kaart. */
@media (max-width: 640px) { .mm .mm-ip-knop-lang { white-space: normal; height: auto; min-height: 36px; padding-top: 7px; padding-bottom: 7px; text-align: center; } }

/* Factuurregels op het controlescherm: veel kolommen met een select of invoer. Natuurlijke breedte
   (nooit smaller dan de kolommen), anders perst de browser "Totaal" letter voor letter onder
   elkaar (feedback 2026-09-10); de mm-table-wrap scrolt de rest. */
.mm .mm-ip-regels { width: auto; min-width: 100%; }
/* De plakkende voetbalk van de factuurcontrole mag geen veld afdekken waar je met Tab naartoe springt:
   de browser scrolt een veld met focus pas als het buiten de scroll-padding valt (review 2026-10-15). */
html:has(.mm-ip-factuurbalk) { scroll-padding-bottom: 104px; }
@media (max-width: 860px) { html:has(.mm-ip-factuurbalk) { scroll-padding-bottom: 200px; } } /* de balk breekt hier af naar meer regels */
/* Een regel die blokkeert (toestel zonder model) of een bronfactuur die niet optelt: rode rand. */
.mm .mm-table tr.mm-ip-rij-fout { outline: 2px solid var(--mmi-danger); outline-offset: -2px; }

/* De uitleg (i): leestekst met nagebootste schermen — iets breder dan een gewoon venster, want de
   nagebootste toestellentabel heeft ~640px nodig. */
.mm.mm-ip-uitleg { width: min(760px, 100%); }
/* De modal-wortel draagt zelf .mm, vandaar .mm.mm-ip-uitleg (zonder spatie). */
.mm.mm-ip-uitleg .ipu-body .mm-eyebrow { margin: 24px 0 8px; }
/* De body is een grid met één auto-kolom: zonder minmax(0, …) rekte de nagebootste toestellentabel
   (min-width 640px, cellen zonder afbreken) die kolom op tot ~1060px en viel de tekst rechts buiten
   het venster (sinds de ombouw van 2026-10-14; gevonden 2026-10-15). Nu scrolt alleen de tabel. */
.mm.mm-ip-uitleg .mm-modal__body { grid-template-columns: minmax(0, 1fr); }


/* ═══ Winkel Inkoop en SKU-herprint in MM Intern ═══ */
/* Overzichtskaart Inkoop/Trade-in (InkoopOverzichtKaart): het selectievinkje staat vóór de
   klikbare kop, met een eigen klik (geen open/dicht). Geselecteerd = merkpaarse rand, zoals
   de oude kaart. De details blijven gemount en worden alleen verborgen: anders verliest de
   M360-kaart erin haar open-stand bij in- en uitklappen. */
.mm .mm-inkoopkaart__rij { display: flex; align-items: center; }
.mm .mm-inkoopkaart__rij > .mm-kaart__kop { flex: 1 1 auto; min-width: 0; }
.mm .mm-inkoopkaart__vink { display: flex; align-items: center; align-self: stretch; padding-left: 20px; cursor: pointer; }
.mm .mm-inkoopkaart__vink input { width: 16px; height: 16px; margin: 0; accent-color: var(--mmi-primary); cursor: pointer; }
.mm .mm-inkoopkaart.is-selected { border-color: var(--mmi-primary); }
/* Titel vult de rest naast de chevron: met de lange IMEI-regel (en het vinkje ervoor) sprong
   hij op een smal scherm anders naar een eigen regel en bleef de chevron alleen staan. */
.mm .mm-inkoopkaart .mm-kaart__titel { flex: 1 1 0; }
.mm .mm-inkoopkaart:not(.is-open) > .mm-kaart__body { display: none; }
/* De hulpknop met pasfoto naast de titel (Trade-in: .tiu-info-knop; Inkooppartijen, werkstation en
   RMA: .ipu-info-knop): .mm-title-lg geeft al een flex-gap, dus hun eigen marge zou de ruimte
   verdubbelen. */
.mm .mm-title-lg > .tiu-info-knop, .mm .mm-title-lg > .ipu-info-knop { margin-left: 0; }
/* SKU herprinten → kleurkeuze: een rooster met gelijke knoppen in plaats van een knoppenmuur
   (zelfde opzet als het oude .sku-kleurrooster). */
.mm .mm-skukleuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mm .mm-skukleuren .mm-btn { width: 100%; }


/* ═══ Verzekering, Vast internet, Mobiele abonnementen, Offertes en Pricing in MM Intern ═══ */
/* Verzekering: de claimlijst scrolt binnen de kaart zolang er niets openstaat, zoals de oude
   .batch-list. Klapt er een claim open, dan scrolt de pagina — anders zat het detail in een vakje. */
.mm .mm-vz-lijst { display: grid; gap: 8px; max-height: calc(100vh - 310px); overflow: auto; padding: 2px 4px 2px 2px; }
.mm .mm-vz-lijst.has-open { max-height: none; overflow: visible; }
@media (max-width: 1180px) { .mm .mm-vz-lijst { max-height: none; } }
/* Verzamelfactuur-groep (Controle claims bank): claims die samen één bankbedrag zijn. Klopt de som
   nog niet, dan een oranje rand naast de badge "Klopt nog niet". */
.mm .mm-vz-groep { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface-tint); }
.mm .mm-vz-groep.is-warn { border-color: var(--mmi-warning); }
/* Bedrag in een totaalregel (Controle verzamelfactuur, het import-venster): groter, in de merkkleur. */
.mm .mm-vz-bedrag { font-weight: 700; font-size: 16px; color: var(--mmi-primary-ink); font-variant-numeric: tabular-nums; }
/* Bijlagenblokken (foto's, aankoopfactuur, reparatie-offerte) naast elkaar zolang ze passen. */
.mm .mm-vz-bijlagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
/* Voortgang: de lijn naar een stap kleurt alleen als de stap ervóór ook bereikt is. Een gat in de
   voortgang (bv. Controleren zonder Verzamelfactuur) blijft zo zichtbaar, net als in de oude roadmap. */
.mm .mm-vz-roadmap .mm-step--done:not(.is-line-green)::before { background: var(--mmi-step-idle); }
.mm .mm-vz-roadmap .mm-step__dot svg { width: 14px; height: 14px; }
/* Regels in het import-venster: groen = gekoppeld, oranje = let op (afwijking, elders, niet gevonden). */
.mm .mm-vz-regel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: var(--mmi-radius-sm);
  background: var(--mmi-success-soft); color: var(--mmi-ink); font-size: 13px; line-height: 18px; }
.mm .mm-vz-regel--let-op { background: var(--mmi-warning-soft); }
.mm .mm-vz-regel .mm-muted { font-size: 12px; }
.mm .mm-vz-regel strong { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Vast internet en Mobiele abonnementen: het klantvel staat nu binnen .mm, en .mm geeft een vaste
   regelhoogte (20px) door. Het vel is wat de klant meekrijgt en moet op scherm én op papier blijven
   zoals het was, dus hier de regelhoogte die het van body erfde (1.5). Verder blijft .vi-vel en zijn
   print-stylesheet ("Printen" hierboven) ongemoeid. */
.mm .vi-vel { line-height: 1.5; }
/* Conceptenlijst (vast internet): de hele regel opent het concept, de prullenbak ernaast haalt het weg. */
.mm .mm-vi-concepten { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.mm .mm-vi-conceptrij { display: flex; align-items: center; gap: 8px; }
.mm .mm-vi-concept { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm);
  background: var(--mmi-surface); font-family: inherit; font-size: 14px; color: var(--mmi-ink); text-align: left; cursor: pointer; }
.mm .mm-vi-concept:hover { background: var(--mmi-surface-tint); border-color: var(--mmi-border-strong); }
.mm .mm-vi-concept:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }

/* Offertes: de tegels binnen .mm. Zonder dit wint `.mm a` (merkkleur voor links) en wordt de hele
   tegeltekst paars; rand en hoeken volgen de kaarten. */
.mm .mm-offerte-tegel { color: var(--mmi-ink); background: var(--mmi-surface); border-color: var(--mmi-border); border-radius: var(--mmi-radius-md); }
.mm .mm-offerte-tegel:hover, .mm .mm-offerte-tegel:focus-visible { border-color: var(--mmi-primary); }
.mm .mm-offerte-tegel strong { font-size: 16px; line-height: 22px; font-weight: 650; }

/* Pricing: valutacode per feed — EUR (de basis uit Linnworks) groen, de rest indigo, zoals de oude tag. */
.mm .mm-pr-valuta { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 2px 8px; border-radius: var(--mmi-radius-sm);
  background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); font-family: var(--mmi-font-mono); font-weight: 600; font-size: 12px; line-height: 18px; }
.mm .mm-pr-valuta--basis { background: var(--mmi-success-soft); color: var(--mmi-success); }
/* De feed-URL is alleen-lezen en lang: mono, en breed genoeg om te lezen (op mobiel scrolt de tabel). */
.mm .mm-table .mm-pr-url { min-width: 320px; font-family: var(--mmi-font-mono); font-size: 12px; }
/* Wijzigingslog: één inklapbare regel per refresh. */
.mm .mm-pr-run { border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface); }
.mm .mm-pr-run > summary { cursor: pointer; padding: 12px 16px; list-style: none; font-size: 13px; }
.mm .mm-pr-run > summary::-webkit-details-marker { display: none; }
.mm .mm-pr-run > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-md); }
.mm .mm-pr-run[open] > summary { border-bottom: 1px solid var(--mmi-border); }
.mm .mm-pr-run > .mm-table-wrap { margin: 0; padding: 4px 16px 12px; }
.mm .mm-pr-run__leeg { margin: 0; padding: 8px 16px 12px; }


/* ═══ E-commerce (Verzendlabel, Subsource) en Externe reparaties in MM Intern ═══ */
/* Verzendlabel: de tabs zijn links (elk scherm een eigen route, deep-links blijven werken); zonder
   deze regel onderstreept de globale a:hover ze. */
.mm a.mm-tab, .mm a.mm-tab:hover { text-decoration: none; }
/* Doorklik vanuit de zoekbalk (?label=): de aangelichte rij, zoals .is-focus-rij in de oude tabel. */
.mm .mm-table tr.is-focus-rij > td { background: var(--mmi-primary-soft); }
/* Uitgeklapt label: korte regels onder elkaar, dichter op elkaar dan de standaard .mm-detail. */
.mm .mm-ecom-labeldetail { gap: 12px; }
.mm .mm-ecom-labeldetail > p:not(.mm-notice) { margin: 0; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-ecom-labeldetail strong { color: var(--mmi-ink); font-weight: 650; }
/* Adreskeuze bij een FedEx-voorstel: het gekozen adres licht op, zodat de keuzeknop geen tweede
   gevulde knop naast "Maak label" hoeft te zijn. */
.mm .mm-ecom-adres { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); }
.mm .mm-ecom-adres.is-gekozen { border-color: var(--mmi-primary); background: var(--mmi-primary-soft); }
.mm .mm-ecom-adres .mm-btn { justify-self: start; }
/* Subsource: CSV slepen of klikken (het label opent de verborgen bestandskiezer). */
.mm .mm-ecom-dropzone { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 160px; padding: 24px; text-align: center;
  border: 1.5px dashed var(--mmi-border-strong); border-radius: var(--mmi-radius-md); color: var(--mmi-ink-soft); cursor: pointer; transition: background .12s, border-color .12s; }
.mm .mm-ecom-dropzone:hover, .mm .mm-ecom-dropzone.is-over { border-color: var(--mmi-primary); background: var(--mmi-primary-soft); }
.mm .mm-ecom-dropzone > svg { width: 28px; height: 28px; color: var(--mmi-primary); }
.mm .mm-ecom-dropzone strong { color: var(--mmi-ink); font-weight: 650; }
/* 28 source/subsource-combinaties: de chips scrollen binnen een vaste hoogte, zoals op het oude scherm. */
.mm .mm-ecom-subsources { max-height: 168px; overflow-y: auto; }

/* Externe reparaties: het intakeraster groeit met de breedte mee (zelfde maat als het oude form-grid). */
.mm .mm-ext-intake { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Onder het scanveld en in de batchtabel: groen = gelukt, rood = overgeslagen/let op (kleur van het oude scherm). */
.mm .mm-ext-ok { color: var(--mmi-success); }
.mm .mm-ext-fout { color: var(--mmi-danger); font-weight: 650; }
/* Batchtegels: de hele tegel is klikbaar (role=button); afgerond getint. */
.mm .mm-ext-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mm .mm-ext-tegel { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md);
  background: var(--mmi-surface); box-shadow: var(--mmi-shadow-card); cursor: pointer; transition: background .12s, border-color .12s; }
.mm .mm-ext-tegel:hover { background: var(--mmi-surface-tint); border-color: var(--mmi-border-strong); }
.mm .mm-ext-tegel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-ext-tegel.is-afgerond { background: var(--mmi-surface-tint); }
.mm .mm-ext-tegel__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mm .mm-ext-tegel__titel { font-weight: 650; font-size: 15px; line-height: 20px; color: var(--mmi-ink); overflow-wrap: anywhere; }
.mm .mm-ext-tegel__meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-ext-bedrag { font-weight: 700; color: var(--mmi-ink); font-variant-numeric: tabular-nums; }
/* Batchdetail: het totaalbedrag rechts in de kop. */
.mm .mm-ext-totaal { font-weight: 700; font-size: 18px; line-height: 24px; color: var(--mmi-ink); font-variant-numeric: tabular-nums; }
/* Ontvangst: de Inchecken-knop op de hoogte van het scanveld, niet van de hint eronder (label 18px + gap 6px). */
.mm .mm-ext-scanknop { margin-top: 24px; }
/* Scanlog: nieuwste bovenaan in een eigen scrollvak; nummers in mono, een waarschuwing vet en rood. */
.mm .mm-ext-scanlog { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; margin-top: 12px; }
.mm .mm-ext-logregel { margin: 0; font-family: var(--mmi-font-mono); font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-ext-logregel--ok { color: var(--mmi-success); }
.mm .mm-ext-logregel--warn { font-family: inherit; font-weight: 650; color: var(--mmi-danger); }
/* Reconciliatie: uitklapbare batches onder elkaar; de tabel in de body heeft geen kaartrand om tegen te leunen. */
.mm .mm-ext-recon { display: grid; gap: 8px; }
.mm .mm-ext-recon .mm-table-wrap { margin: 0; padding: 0; }
/* Afkeur-foto's: groter dan de standaardtegels — hier bekijk je de schade. */
.mm .mm-ext-fotos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.mm .mm-ext-fotos figure { margin: 0; }
/* Batchkiezer: de gekozen batch licht op (aria-selected, de knoppen zijn opties in een listbox). */
.mm .mm-ext-batchkeuze { max-height: 280px; }
.mm .mm-ext-batchkeuze button[aria-selected="true"] { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); }
.mm .mm-ext-batchkeuze button b { font-weight: 650; }


/* ═══ Kleine schermen (Stats-tabs, Bug reports, Fouten opsporen, Prijzen, Toestellen, Instellingen, Onderdelen, Status) in MM Intern ═══ */
/* Stats-tabs (E-commerce, M360): tekstkleur voor tempo en annuleringen — groen = op koers,
   rood = achter of geannuleerd. Nooit kleur alleen: de tekst zegt het ook. */
.mm .mm-kleur-ok { color: var(--mmi-success); font-weight: 650; }
.mm .mm-kleur-fout { color: var(--mmi-danger); font-weight: 650; }
/* Doelinvoer (maand-/jaardoel, werkplaatsdoelen): veld(en) met de opslaanknop ernaast, onderkanten op één lijn. */
.mm .mm-doelinvoer { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.mm .mm-doelinvoer .mm-field { width: 120px; }
/* Voortgang naar een doel: dikker dan de standaardbalk, met de stand ernaast. */
.mm .mm-doelbalk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.mm .mm-doelbalk__label { font-weight: 650; font-size: 13px; line-height: 18px; color: var(--mmi-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* iPad-race (M360): het podium als staven, smaller dan een weekgrafiek en met bredere staven;
   namen mogen afbreken. Leeg (nog geen race) = geen lege ruimte. */
.mm .mm-podium { max-width: 420px; width: 100%; margin: 0 auto 16px; }
.mm .mm-podium:empty { display: none; }
.mm .mm-podium .mm-week__staaf { max-width: 72px; }
.mm .mm-podium .mm-week__l { white-space: normal; text-align: center; }
.mm .mm-racebalk { flex: 1 1 80px; min-width: 60px; }
/* Zwevende melding (foutmelding van de meldknop, printagent-update): de zachte statuskleur
   over een effen vlak — anders schemert de pagina erdoorheen — en de schaduw van een venster. */
.mm .mm-zweefmelding { background: linear-gradient(var(--mmi-warning-soft), var(--mmi-warning-soft)), var(--mmi-surface); box-shadow: var(--mm-shadow-lg); }
.mm .mm-zweefmelding.mm-alert--fout { background: linear-gradient(var(--mmi-danger-soft), var(--mmi-danger-soft)), var(--mmi-surface); }
/* Bug melden: het venster blijft zo groot als het tabblad — de screenshot is de hele pagina en
   alleen op deze schaal blijft de tekst erop leesbaar (zelfde maat als .bug-report-modal). */
.mm-modal.mm-modal--bugmelding { width: 98vw; max-width: 1800px; max-height: 96vh; }
.mm.mm-modal--bugmelding .bug-report-canvas-wrap { min-width: 0; margin-bottom: 0; } /* de ruimte komt van het raster */
.mm.mm-modal--bugmelding .mm-sluit:disabled { opacity: .4; cursor: not-allowed; background: none; } /* tijdens het versturen */
/* Bug reports: de beschrijving krijgt ruimte, anders knijpt de tabel hem op een telefoon tot een woord per regel.
   (De rij waar de zoekbalk naartoe doorklikt, .is-focus-rij, licht op via de gedeelde regel bij E-commerce.) */
.mm .mm-table td.mm-bugrapport__tekst { min-width: 220px; }
/* Prijzen zoeken: de kostprijs-opbouw van één toestel als getint vlak onder het scanveld, in de
   volgorde van de optelling; het totaal rechts onder een lijn. */
.mm .mm-kostprijs { display: grid; gap: 6px; min-width: 0; margin-top: 16px; padding: 16px 20px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface-tint); }
.mm .mm-kostprijs__model { font-weight: 650; font-size: 15px; line-height: 20px; color: var(--mmi-ink); overflow-wrap: anywhere; }
.mm .mm-kostprijs__regel { font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-kostprijs__totaal { display: flex; justify-content: flex-end; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--mmi-border); font-size: 15px; line-height: 20px; color: var(--mmi-ink); }
.mm .mm-kostprijs__totaal strong { font-weight: 700; }
/* Toestellen-zoeker: de knop even hoog als de velden ernaast (onderkanten op één lijn), en de
   gedeelde modelkiezer (components/ui/GroupedModelSelect, niet aangepast) op de hoogte en hoek
   van een .mm-select. Rand, focus en paneel blijven van de kiezer zelf. */
.mm .mm-speczoeker .mm-btn { height: 40px; }
.mm .mm-speczoeker .mm-model-select-trigger { min-height: 40px; padding-top: 0; padding-bottom: 0; border-radius: var(--mmi-radius-sm); }
/* "Alle n stappen" bij een treffer: een linkje dat een compacte tijdlijn openklapt. */
.mm .mm-stappen > summary { width: fit-content; cursor: pointer; font-size: 12px; line-height: 16px; color: var(--mmi-primary); }
.mm .mm-stappen .mm-timeline { margin-top: 4px; }
.mm .mm-stappen .mm-timeline li { padding: 4px 0; font-size: 13px; line-height: 18px; }
/* Fouten opsporen: tellers die de lijst inperken (of rijen uitklappen) zijn knoppen in
   badge-vorm — knopreset, en een focusring zoals elke .mm-knop. */
.mm .mm-badge-knop { border: 0; font-family: inherit; cursor: pointer; }
.mm .mm-badge-knop:hover { text-decoration: underline; }
.mm .mm-badge-knop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
/* Statuspagina (/status): één tegel per bewaakt onderdeel, de status als badge mét tekst — de
   gekleurde linkerrand van de oude kaart past niet in de stijlgids. */
.mm .mm-statusraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.mm .mm-statustegel { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface-tint); }


/* ═══ Reparaties, reparatiekaart en het afkeurportaal in MM Intern ═══ */
/* Vastgepind staat als speld vóór de batchnaam (stijlgids §1.8). De batchlijst zelf: .mm-batchtabel. */
.mm .mm-rep-speld { width: 14px; height: 14px; flex: none; color: var(--mmi-primary); }
/* Groepen Nog open / Afgerond in een batch (2026-10-20): de groepsbalk van de partijlijst, maar zo
   breed als de kaarten eronder (die hebben geen negatieve marge). Afgerond groen, zoals in het werkstation. */
.mm .mm-rep-groepkop { margin: 0; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); overflow: hidden; }
.mm .mm-rep-groepkop:not(:first-child) { margin-top: 6px; }
.mm .mm-rep-groepkop--afgerond { box-shadow: inset 3px 0 0 var(--mmi-success); color: var(--mmi-success); }
/* Batches indelen (Reparatiebeheer → Batches → Indelen, 2026-10-21): scanveld met een korte
   log, batches als uitklapbare blokken met een vinkje voor de hele batch en per reparatie, en
   het volgnummer van de selectie (de volgorde = de nummering in de doelbatch). */
.mm .mm-bi-weergave { justify-self: start; }
.mm .mm-bi-scan { display: grid; gap: 12px; }
.mm .mm-bi-keuze__knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mm .mm-bi-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mm .mm-bi-log__regel { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: var(--mmi-radius-sm); background: var(--mmi-surface-tint); color: var(--mmi-ink-soft); font-size: 13px; line-height: 18px; }
.mm .mm-bi-log__regel:not(:first-child) { opacity: .7; }
.mm .mm-bi-log__regel.is-ok { background: var(--mmi-success-soft); color: var(--mmi-ink); }
.mm .mm-bi-log__regel.is-al { background: var(--mmi-primary-soft); color: var(--mmi-ink); }
.mm .mm-bi-log__regel.is-let-op { background: var(--mmi-warning-soft); color: var(--mmi-ink); }
.mm .mm-bi-log__regel.is-fout { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-bi-log__nummer { flex: none; font-size: 12px; }
.mm .mm-bi-resultaat { display: grid; gap: 8px; }
.mm .mm-bi-resultaat__regel { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.mm .mm-bi-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mm .mm-bi-lijst { display: grid; gap: 8px; }
.mm .mm-bi-batch { min-width: 0; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); background: var(--mmi-surface); }
.mm .mm-bi-batch.has-selectie { border-color: var(--mmi-primary); }
.mm .mm-bi-batch.is-archief { background: var(--mmi-surface-tint); }
.mm .mm-bi-batch__kop { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 10px 12px; }
.mm .mm-bi-batch__pijl { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--mmi-radius-sm); background: none; color: var(--mmi-muted); cursor: pointer; }
.mm .mm-bi-batch__pijl svg { width: 16px; height: 16px; transition: transform .12s; }
.mm .mm-bi-batch__pijl[aria-expanded="true"] svg { transform: rotate(90deg); }
.mm .mm-bi-batch__pijl:hover:not(:disabled) { background: var(--mmi-step-idle); color: var(--mmi-ink); }
.mm .mm-bi-batch__pijl:disabled { opacity: .35; cursor: default; }
.mm .mm-bi-batch__pijl:focus-visible, .mm .mm-bi-batch__naam:focus-visible, .mm .mm-bi-open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-bi-vink { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--mmi-primary); cursor: pointer; }
.mm .mm-bi-vink:disabled { cursor: default; }
.mm .mm-bi-batch__naam { min-width: 0; padding: 0; border: 0; border-radius: 4px; background: none; font: inherit; font-weight: 650; font-size: 15px; line-height: 20px; color: var(--mmi-ink); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.mm .mm-bi-batch__naam:disabled { cursor: default; }
.mm .mm-bi-batch__meta { margin-left: auto; font-size: 13px; color: var(--mmi-ink-soft); white-space: nowrap; }
.mm .mm-bi-verwijder { color: var(--mmi-danger); }
.mm .mm-bi-open { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: var(--mmi-radius-sm); color: var(--mmi-muted); }
.mm .mm-bi-open:hover { background: var(--mmi-primary-soft); color: var(--mmi-primary); }
.mm .mm-bi-open svg { width: 15px; height: 15px; }
/* De tabel in een batchblok: niet tot buiten de kaart (de gewone .mm-table-wrap bloedt -24px). */
.mm .mm-bi-tabel { margin: 0; padding: 0 12px 4px; border-top: 1px solid var(--mmi-border); }
.mm .mm-bi-tabel .mm-table td { padding-top: 8px; padding-bottom: 8px; }
.mm .mm-bi-tabel .mm-table tr:last-child > td { border-bottom: 0; }
.mm tr.mm-bi-rij { cursor: pointer; }
.mm tr.mm-bi-rij:hover > td { background: var(--mmi-surface-tint); }
.mm tr.mm-bi-rij.is-gekozen > td { background: var(--mmi-primary-soft); }
.mm tr.mm-bi-rij.is-oplicht > td { animation: mm-bi-oplicht 2.5s ease-out; }
@keyframes mm-bi-oplicht { 0%, 40% { background: var(--mmi-warning-soft); } 100% { background: var(--mmi-primary-soft); } }
@media (prefers-reduced-motion: reduce) { .mm tr.mm-bi-rij.is-oplicht > td { animation: none; box-shadow: inset 3px 0 0 var(--mmi-warning); } }
.mm .mm-bi-volg { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--mmi-primary); color: var(--mm-text-inverse); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Instroom: scannen → aanvinken in volgorde (2026-10-26). Zelfde oplicht en volgnummer als Indelen. */
.mm .mm-is-scan { display: grid; gap: 8px; }
.mm .mm-is-vink { display: inline-flex; align-items: center; gap: 6px; }
.mm tr.mm-is-rij.is-gekozen > td { background: var(--mmi-primary-soft); }
.mm tr.mm-is-rij.is-oplicht > td { animation: mm-bi-oplicht 2.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .mm tr.mm-is-rij.is-oplicht > td { animation: none; box-shadow: inset 3px 0 0 var(--mmi-warning); } }
/* Instroom: uitklapregel met wat er mis is (2026-11-11). De detailrij (.mm-detailrij/.mm-detail) zoals
   elders, maar compact: het is één of twee regels tekst. Geen streep tussen de rij en zijn uitklap. */
.mm tr.mm-is-rij.is-uitgeklapt > td { border-bottom: 0; }
.mm tr.mm-is-uitklap > td { padding-top: 0; }
.mm tr.mm-is-uitklap.is-gekozen > td { background: var(--mmi-primary-soft); }
.mm .mm-detail.mm-is-uitleg { gap: 6px; padding: 10px 14px; margin-left: 34px; }
.mm .mm-is-uitleg p { margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 19px; color: var(--mmi-ink); }
.mm .mm-is-uitleg__kop { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-bi-balk__tekst { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 14px; color: var(--mmi-ink); }
.mm .mm-bi-balk .mm-linkknop { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.mm .mm-bi-balk .mm-linkknop svg { width: 14px; height: 14px; }
.mm .mm-bi-volgorde { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mm .mm-bi-volgorde li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm); }
.mm .mm-bi-volgorde__wat { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
/* Waar een batch ligt (Brian 2026-09-29): geen status maar wel opvallend, dus een pil zonder
   hoofdletters. Ontbreekt hij, dan rood — een batch zonder plek is voor wie een toestel zoekt onvindbaar. */
.mm .mm-locatie { display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; min-width: 0; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); font-weight: 600; font-size: 12px; line-height: 16px; white-space: nowrap; }
.mm .mm-locatie > svg { width: 12px; height: 12px; flex: none; }
.mm .mm-locatie > span { overflow: hidden; text-overflow: ellipsis; }
.mm .mm-locatie--mist { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
/* LocatieKeuze (.mm-locatieveld): zie de gedeelde regel bij Reparatiebeheer (.mm-rb-locatie). */
/* Batchnaam als paginatitel: bewerkbaar voor management, alleen-lezen voor de rest. */
.mm .mm-title-input.mm-title-input--lg { font-weight: 700; font-size: 24px; line-height: 30px; }
/* Reparatie in de lijst: onder de klikbare kop een regel met codes en acties. Die acties zijn
   knoppen en kunnen dus niet ín de kop-knop; ingesprongen tot onder de titel (20 + 30 + 12px). */
.mm .mm-kaart__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 0 20px 14px 62px; margin-top: -6px; }
.mm .mm-kaart__sub > .mm-kaart__r2 { min-width: 0; }
.mm .mm-kaart.is-afgerond { background: var(--mmi-surface-tint); }
.mm .mm-kaart.is-afgekeurd:not(.is-open) { border-color: var(--mmi-danger); }
/* Afkeuren en herstel (2026-10-21): een afgekeurde reparatie en een vervallen herstel staan vast.
   De kaart zet het formulier in een <fieldset disabled> — dat schakelt alles in één keer uit, maar
   de fieldset zelf mag de opmaak niet raken (geen rand, geen inspringing, geen eigen blok). */
.mm .mm-kaart__vast { border: 0; padding: 0; margin: 0; min-width: 0; display: contents; }
/* Alleen .mm-input/.mm-select hadden een uitgeschakelde stand; in een vaste kaart moeten
   notities en knoppen er ook uit zien als "kan niet" (ze zijn het al, via de fieldset). */
.mm .mm-kaart__vast:disabled .mm-textarea { background-color: var(--mmi-disabled-bg); color: var(--mmi-disabled-ink); cursor: not-allowed; }
.mm .mm-kaart__vast:disabled button { opacity: .55; cursor: not-allowed; }
.mm .mm-afkeurbalk { margin: 0 0 16px; }
.mm .mm-afkeurbalk a { color: inherit; font-weight: 600; }
.mm .mm-af-uitkomst { margin-top: 12px; }
.mm .mm-rep-groepkop--afgekeurd { box-shadow: inset 3px 0 0 var(--mmi-danger); color: var(--mmi-danger); }
.mm tr.mm-bi-rij.is-vast { cursor: default; }
.mm tr.mm-bi-rij.is-vast > td { color: var(--mmi-muted); }
.mm tr.mm-bi-rij.is-vast:hover > td { background: transparent; }
@media (max-width: 760px) { .mm .mm-kaart__sub { padding-left: 20px; } }
/* Inklapbaar blok binnen een kaart (<details>): de reparatiekaart heeft vier panelen (Toestel,
   Werkveld, Audit trail, Managementinformatie) en die blijven in- en uitklapbaar. */
.mm .mm-uitklap { border-top: 1px solid var(--mmi-border); min-width: 0; }
.mm .mm-uitklap:first-child { border-top: 0; }
.mm .mm-uitklap > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; list-style: none; cursor: pointer; }
.mm .mm-uitklap:first-child > summary { padding-top: 0; }
.mm .mm-uitklap > summary::-webkit-details-marker { display: none; }
.mm .mm-uitklap > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }
.mm .mm-uitklap__chev { width: 16px; height: 16px; flex: none; color: var(--mmi-muted); transition: transform .12s; }
.mm .mm-uitklap[open] > summary .mm-uitklap__chev { transform: rotate(180deg); }
.mm .mm-uitklap__body { display: grid; gap: 16px; padding: 0 0 20px; min-width: 0; }
.mm .mm-uitklap:last-child > .mm-uitklap__body { padding-bottom: 0; }
/* Garantieregels per leverancier (GarantieInfo): een getint blok, niet een grijze regel —
   anders keek iedereen eroverheen (Brian 2026-11-10). */
.mm .mm-garantie-info { grid-column: 1 / -1; margin: 12px 0; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm); background: var(--mmi-primary-soft); }
.mm .mm-garantie-info > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; list-style: none; cursor: pointer; font-weight: 650; color: var(--mmi-primary-ink); }
.mm .mm-garantie-info > summary::-webkit-details-marker { display: none; }
.mm .mm-garantie-info > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }
.mm .mm-garantie-info > summary > svg { width: 18px; height: 18px; flex: none; }
.mm .mm-garantie-info > summary > span { flex: 1; min-width: 0; }
.mm .mm-garantie-info__sub { font-weight: 400; color: var(--mmi-muted); margin-left: 6px; }
.mm .mm-garantie-info__chev { transition: transform .12s; }
.mm .mm-garantie-info[open] .mm-garantie-info__chev { transform: rotate(180deg); }
.mm .mm-garantie-info__body { display: grid; gap: 10px; padding: 4px 14px 14px; font-size: 13px; }
/* Korte melding onder een veld (dubbel serienummer, register-afwijking, ontbrekende toestelvelden). */
.mm .mm-hint--fout { color: var(--mmi-danger); }
.mm .mm-hint--let-op { color: var(--mmi-warning); }
/* Audit trail op de reparatiekaart: afgerond groen, heropend oranje — zoals het oude scherm. */
.mm .mm-timeline li.is-ok::before { background: var(--mmi-success); }
.mm .mm-timeline li.is-let-op::before { background: var(--mmi-warning); }
/* Doel-batch kiezen (BatchPickerDialog): een rij per batch met naam en tellers; gekozen = licht-indigo. */
.mm .mm-keuzelijst { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.mm .mm-keuzeregel { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm);
  background: var(--mmi-surface); font-family: inherit; text-align: left; cursor: pointer; }
.mm .mm-keuzeregel:hover { background: var(--mmi-surface-tint); }
.mm .mm-keuzeregel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-keuzeregel.is-gekozen { background: var(--mmi-primary-soft); border-color: var(--mmi-primary); }
.mm .mm-keuzeregel__naam { font-weight: 650; font-size: 14px; line-height: 20px; color: var(--mmi-ink); overflow-wrap: anywhere; }
.mm .mm-keuzeregel__meta { font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
/* BatchPickerDialog, opgedeeld (2026-10-24): eerst Bestaande/Nieuwe batch, dan de groepen als in Batches indelen. */
.mm .mm-bp-modus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mm .mm-bp-modus button { display: grid; gap: 2px; padding: 10px 14px; text-align: left; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm);
  background: var(--mmi-surface); color: var(--mmi-ink); font-family: inherit; cursor: pointer; }
.mm .mm-bp-modus button b { font-size: 14px; font-weight: 650; line-height: 20px; }
.mm .mm-bp-modus button span { font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-bp-modus button:hover:not(:disabled) { background: var(--mmi-surface-tint); }
.mm .mm-bp-modus button.is-active { background: var(--mmi-primary-soft); border-color: var(--mmi-primary); box-shadow: inset 0 0 0 1px var(--mmi-primary); }
.mm .mm-bp-modus button:disabled { cursor: not-allowed; opacity: .55; }
.mm .mm-bp-modus button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-bp-bestaand, .mm .mm-bp-nieuw { display: grid; gap: 12px; }
.mm .mm-bp-nieuw .mm-segment { justify-self: start; }
.mm .mm-bp-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.mm .mm-bp-zoek { width: min(280px, 100%); }
.mm .mm-keuzelijst.mm-bp-lijst { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-content: start; max-height: min(46vh, 420px); }
.mm .mm-bp-badge { margin-left: 6px; vertical-align: 1px; }
@media (max-width: 560px) { .mm .mm-bp-modus { grid-template-columns: 1fr; } .mm .mm-bp-zoek { width: 100%; } }
/* Het zoekveld van de batchkiezer is type="search" (wisknopje); Safari tekent dat veld anders zelf
   en negeert dan de ruimte voor het vergrootglas. */
.mm .mm-zoekveld > input[type="search"] { -webkit-appearance: none; appearance: none; }
/* Publieke pagina's (/rma-leverancier, /rma-foto): geen sidebar, dus de buitenste shell
   (.rma-afkeur-screen) blijft staan en .mm staat erbinnen op telefoonbreedte. */
.mm.mm-afkeurportaal { width: min(560px, 100%); }
.mm .mm-portaalkop { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mm figure.mm-foto-tegel { margin: 0; } /* <figure> heeft standaard 40px marge opzij */


/* Werkplaatsplanning op de Startpagina (management, 2026-10-19): inklapbaar blok boven het takenbord. */
.mm .mm-planning__pool { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mm .mm-planning__namen { display: flex; flex-wrap: wrap; gap: 6px; }
.mm .mm-planning__naam { cursor: grab; }
.mm .mm-planning__bord { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.mm .mm-planning__verdieping { display: flex; flex-direction: column; gap: 8px; }
.mm .mm-planning__vak { display: flex; flex-direction: column; gap: 6px; min-height: 64px; padding: 10px; border: 1px dashed var(--mmi-border-strong); border-radius: var(--mmi-radius-md); background: var(--mmi-surface-tint); }
.mm .mm-planning__vak.is-doel { cursor: pointer; border-color: var(--mmi-primary); }
.mm .mm-planning__vak.is-boven { background: var(--mmi-primary-soft); border-style: solid; }
.mm .mm-planning__vaknaam { font-size: 13px; font-weight: 600; color: var(--mmi-ink-soft); pointer-events: none; }
.mm .mm-planning__ingedeeld { display: inline-flex; align-items: center; }
.mm .mm-planning__weg { display: inline-flex; border: 0; background: none; padding: 2px; color: var(--mmi-muted); cursor: pointer; }
.mm .mm-planning__weg:hover { color: var(--mmi-danger); }
.mm .mm-planning .mm-textarea { margin-top: 10px; min-height: 90px; }

/* M360-login(s) per account in Administratie → Gebruikers (2026-10-19). */
.mm .mm-m360koppel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 140px; }
.mm .mm-m360koppel__weg { display: inline-flex; border: 0; background: none; padding: 0 0 0 2px; color: inherit; cursor: pointer; opacity: 0.7; }
.mm .mm-m360koppel__weg:hover { opacity: 1; }
.mm .mm-m360koppel__kies { width: auto; max-width: 170px; }
/* Werkplaatsplanning als eigen scherm (2026-10-20): dagenstrook, zoeken, teller per persoon. */
.mm .mm-planning__dagen { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-top: 12px; }
.mm .mm-planning__dag { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; padding: 6px 8px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); background: var(--mmi-surface); color: var(--mmi-ink-soft); font-family: inherit; font-size: 12px; cursor: pointer; }
.mm .mm-planning__dag b { font-size: 13px; color: var(--mmi-ink); }
.mm .mm-planning__dag.is-active { background: var(--mmi-primary-soft); border-color: var(--mmi-primary); color: var(--mmi-primary-ink); }
.mm .mm-planning__dag:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-planning__datumkies { display: flex; flex-direction: column; justify-content: center; gap: 2px; margin-left: auto; }
.mm .mm-planning__datumkies .mm-input { height: 34px; width: auto; }
.mm .mm-planning__datum { margin-top: 14px; text-transform: capitalize; }
.mm .mm-planning__poolkop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mm .mm-planning__poolkop .mm-zoekveld { flex: 0 1 260px; }
.mm .mm-planning__teller { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mmi-primary); color: #fff; font-size: 11px; font-weight: 700; }
.mm .mm-planning__ingedeeld-pool .mm-chip { opacity: 0.75; }

/* ═══ Inkooppartij — controle (Claude Design v7, 2026-10-24) ═══
   Vertaald uit mm-intern.css: zelfde waardes, onder .mm en met de --mmi-tokens. De algemene
   .mm-table-regels uit dat bestand staan er niet bij — die bestaan hierboven al. */
.mm .mm-link { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); font-family: var(--mmi-font-mono); font-weight: 600; font-size: 11px; line-height: 20px; text-decoration: none; white-space: nowrap; }
.mm .mm-link:hover { text-decoration: underline; }
.mm .mm-chip--add { cursor: pointer; }
.mm .mm-chip--add:hover { border-color: var(--mmi-primary); color: var(--mmi-primary); }
.mm .mm-count--fout { background: var(--mmi-danger); color: #fff; }
.mm .mm-tab .mm-count--fout, .mm .mm-tab.is-active .mm-count--fout { background: var(--mmi-danger); color: #fff; }

/* Telling */
.mm .mm-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 16px; align-items: stretch; }
.mm .mm-tally__cell { padding: 12px 16px; border-radius: var(--mmi-radius-sm); background: var(--mmi-surface-tint); }
.mm .mm-tally__cell--fout { background: var(--mmi-danger-soft); }
.mm .mm-tally__cell--value { background: var(--mmi-surface); border: 1px dashed var(--mmi-border-strong); }
.mm .mm-num { display: block; font-weight: 700; font-size: 28px; line-height: 34px; color: var(--mmi-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mm .mm-num--fout { color: var(--mmi-danger); }
.mm .mm-num--sm { font-size: 20px; line-height: 28px; }
.mm .mm-num__lab { font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-tally__cell--fout .mm-num__lab { color: var(--mmi-danger); }
.mm .mm-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-eq a, .mm .mm-eq span.v { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--mmi-border); background: var(--mmi-surface); color: var(--mmi-ink-soft); text-decoration: none; font-weight: 500; }
.mm .mm-eq a b, .mm .mm-eq span.v b { color: var(--mmi-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.mm .mm-eq a:hover { border-color: var(--mmi-primary); color: var(--mmi-primary); }
.mm .mm-eq a.is-fout { background: var(--mmi-danger-soft); border-color: transparent; color: var(--mmi-danger); }
.mm .mm-eq a.is-fout b { color: var(--mmi-danger); }
.mm .mm-eq .op { font-weight: 700; font-size: 14px; line-height: 1; color: var(--mmi-muted); padding: 0 2px; }
.mm .mm-split { margin-top: 16px; display: grid; gap: 8px; }
.mm .mm-split__bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--mmi-step-idle); gap: 2px; }
.mm .mm-split__bar span { display: block; height: 100%; }
.mm .mm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--mmi-ink-soft); }
.mm .mm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mm .mm-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mm .mm-legend b { font-weight: 700; color: var(--mmi-ink); font-variant-numeric: tabular-nums; }

/* Groepslabel boven een set kaarten */
.mm .mm-group-label { display: flex; align-items: center; gap: 8px; margin: 12px 0 -8px; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-group-label .mm-count { letter-spacing: 0; }
.mm .mm-group { display: grid; gap: 8px; }

/* Bevinding (uitklapbaar) */
.mm .mm-issue { background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); box-shadow: var(--mmi-shadow-card); overflow: hidden; }
.mm .mm-issue__head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 28px; gap: 12px; align-items: center; padding: 14px 20px; cursor: pointer; }
.mm .mm-issue__head:hover { background: var(--mmi-surface-tint); }
.mm .mm-issue.is-open .mm-issue__head { border-bottom: 1px solid var(--mmi-border); }
.mm .mm-issue__icon { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--mmi-step-idle); color: var(--mmi-ink-soft); }
.mm .mm-issue__icon svg { width: 16px; height: 16px; }
.mm .mm-issue--fout .mm-issue__icon { background: var(--mmi-danger-soft); color: var(--mmi-danger); }
.mm .mm-issue--let-op .mm-issue__icon { background: var(--mmi-warning-soft); color: var(--mmi-warning); }
.mm .mm-issue--info .mm-issue__icon { background: var(--mmi-primary-soft); color: var(--mmi-primary-ink); }
.mm .mm-issue__title { margin: 0; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--mmi-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm .mm-issue__sum { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-issue__value { text-align: right; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--mmi-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm .mm-issue__value small { display: block; font-weight: 400; font-size: 12px; line-height: 16px; color: var(--mmi-muted); }
.mm .mm-issue--fout .mm-issue__value { color: var(--mmi-danger); }
.mm .mm-issue__chev { width: 28px; height: 28px; border-radius: var(--mmi-radius-sm); display: grid; place-items: center; color: var(--mmi-muted); }
.mm .mm-issue.is-open .mm-issue__chev svg { transform: rotate(180deg); }
.mm .mm-issue__body { padding: 16px 20px 20px; display: grid; gap: 16px; }
.mm .mm-issue__why { margin: 0; font-size: 13px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-issue--static .mm-issue__head { cursor: default; }
.mm .mm-issue--static .mm-issue__head:hover { background: transparent; }

/* Specificatie-blok binnen een bevinding */
.mm .mm-spec { border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm); overflow: hidden; }
.mm .mm-spec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; background: var(--mmi-surface-tint); border-bottom: 1px solid var(--mmi-border); }
.mm .mm-spec__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--mmi-ink); }
.mm .mm-spec__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--mmi-muted); font-variant-numeric: tabular-nums; }
.mm .mm-spec__meta b { color: var(--mmi-ink); font-weight: 600; }
.mm .mm-spec__meta .is-fout { color: var(--mmi-danger); font-weight: 600; }
.mm .mm-spec__toggle { padding: 8px 14px; border-top: 1px solid var(--mmi-border); }


/* Prijs-chips (gemiddelde) */
.mm .mm-prices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--mmi-muted); }
.mm .mm-prices .p { display: inline-flex; gap: 4px; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--mmi-surface); border: 1px solid var(--mmi-border); color: var(--mmi-ink-soft); font-variant-numeric: tabular-nums; }
.mm .mm-prices .p small { color: var(--mmi-muted); font-size: 11px; }
.mm .mm-prices .avg { background: var(--mmi-primary-soft); border-color: transparent; color: var(--mmi-primary-ink); font-weight: 700; }

/* Lijst van partijen */
.mm .mm-batch { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 16px 20px; background: var(--mmi-surface); border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-md); box-shadow: var(--mmi-shadow-card); }
.mm .mm-batch:hover { border-color: var(--mmi-border-strong); }
.mm .mm-batch__tally { text-align: right; font-variant-numeric: tabular-nums; }
.mm .mm-batch__tally b { display: block; font-weight: 700; font-size: 18px; line-height: 24px; color: var(--mmi-ink); }
.mm .mm-batch__tally b.is-fout { color: var(--mmi-danger); }
.mm .mm-batch__tally small { font-size: 12px; color: var(--mmi-muted); }

@media (max-width: 760px) {
  .mm .mm-tally { grid-template-columns: 1fr 1fr; }
  .mm .mm-issue__head { grid-template-columns: 32px minmax(0, 1fr) 28px; }
  .mm .mm-issue__value { grid-column: 2; text-align: left; }
  .mm .mm-batch { grid-template-columns: 1fr; }
  .mm .mm-batch__tally { text-align: left; }
}
.mm .mm-table--fixed { table-layout: fixed; min-width: 720px; }
/* Aanvullingen bij het ontwerp, in dezelfde taal. Te veel ontvangen is oranje, niet neutraal
   (opdracht §3.2). */
.mm .mm-tally__cell--let-op { background: var(--mmi-warning-soft); }
.mm .mm-tally__cell--let-op .mm-num__lab, .mm .mm-num--let-op { color: var(--mmi-warning); }
.mm .mm-tally__cell { display: grid; align-content: start; gap: 2px; min-width: 0; }
/* mm-link is hier ook een knop (factuur openen); zonder recht een stille chip. */
.mm button.mm-link { border: 0; cursor: pointer; }
.mm .mm-link--stil { background: var(--mmi-step-idle); color: var(--mmi-ink-soft); }
.mm .mm-link--stil:hover { text-decoration: none; }
.mm .mm-batch.is-klikbaar { cursor: pointer; }
.mm .mm-batch.is-klikbaar:focus-visible, .mm .mm-issue__head:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); }
.mm .mm-group-label { margin: 0; }
.mm .mm-group-label--knop { background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: inherit; }
.mm .mm-group-label--knop:hover { color: var(--mmi-ink-soft); }
.mm .mm-group-label__pijl { width: 14px; height: 14px; transition: transform .12s; }
.mm .mm-group-label--knop[aria-expanded="true"] .mm-group-label__pijl { transform: rotate(90deg); }
.mm .mm-legend a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.mm .mm-legend a:hover { color: var(--mmi-primary); }
.mm .mm-issue__head > * { min-width: 0; }
/* Tabellen binnen de controle: de waardes uit het ontwerp (geen hoofdletterkoppen, padding aan
   twee kanten), en binnen een blok geen negatieve marge — die is voor tabellen direct in een kaart. */
.mm .mm-spec .mm-table-wrap, .mm .mm-issue__body .mm-table-wrap { margin: 0; padding: 0; }
.mm .mm-table--controle { font-size: 14px; line-height: 20px; }
.mm .mm-table--controle th { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; padding: 10px 14px 8px; }
.mm .mm-table--controle td { padding: 10px 14px; border-bottom: 0; border-top: 1px dashed var(--mmi-border); vertical-align: top; }
.mm .mm-table--controle tbody tr:first-child td { border-top: 0; }
.mm .mm-table--controle tbody tr:hover td { background: var(--mmi-surface-tint); }
.mm .mm-table--controle .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm .mm-table--controle .mono { font-family: var(--mmi-font-mono); font-size: 13px; white-space: nowrap; }
.mm .mm-table--controle .muted { color: var(--mmi-muted); }
.mm .mm-table--controle .desc { font-family: var(--mmi-font-mono); font-size: 12px; line-height: 18px; color: var(--mmi-ink-soft); word-break: break-word; }
.mm .mm-table--controle .act { text-align: right; white-space: nowrap; padding-top: 6px; padding-bottom: 6px; }
.mm .mm-grade { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--mmi-step-idle); color: var(--mmi-ink-soft); font-family: var(--mmi-font-mono); font-weight: 600; font-size: 11px; line-height: 18px; }
/* De kop van een bevinding is een echte <button> (toegankelijk); daarom de knopopmaak weg en de
   titel en samenvatting als blok, want in een knop mogen alleen spans. */
.mm button.mm-issue__head { width: 100%; border: 0; border-radius: 0; background: none; text-align: left; font: inherit; color: inherit; }
.mm button.mm-issue__head:hover { background: var(--mmi-surface-tint); }
.mm .mm-issue__title, .mm .mm-issue__sum { display: flex; }
.mm .mm-issue__sum { display: block; }

/* Reparatiesoorten onder koppen (2026-10-28): tussenkopjes in lijsten met vinkjes
   (components/ui/SoortKoppen.tsx) en het slepen in Reparatiebeheer (SoortKoppenBeheer). */
.mm .mm-soortkop { grid-column: 1 / -1; display: block; margin-top: 8px; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-soortkop:first-child { margin-top: 0; }
.mm .mm-kiezer__lijst > .mm-soortkop { margin: 0; padding: 12px 16px 4px; }
.mm .mm-sk { display: grid; gap: 12px; padding-top: 4px; }
.mm .mm-sk-kop { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm); background: var(--mmi-surface); }
.mm .mm-sk-kop.is-zonder { border-style: dashed; background: transparent; }
.mm .mm-sk-kopregel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mm .mm-sk-kopnaam { max-width: 280px; font-weight: 600; }
.mm .mm-sk-kopregel .mm-actions { margin-left: auto; }
.mm .mm-sk-lijst { display: grid; min-height: 40px; padding-left: 24px; }
.mm .mm-sk-lijst .mm-item { padding: 10px 0; }
.mm .mm-sk-lijst > .mm-sk-soort:first-child .mm-item { border-top-color: transparent; }
.mm .mm-sk-greep { display: inline-flex; align-items: center; padding: 4px 2px; color: var(--mmi-muted); cursor: grab; flex: none; }
.mm .mm-sk-greep[draggable="false"] { cursor: default; opacity: .4; }
.mm .mm-sk-greep svg { width: 16px; height: 16px; }
.mm .mm-sk-soort.is-sleept, .mm .mm-sk-kop.is-sleept { opacity: .45; }
/* Waar het neerkomt: een streep boven het doel, of onderaan de kop. */
.mm .mm-sk-soort.is-doel, .mm .mm-sk-kop.is-doel { box-shadow: 0 -3px 0 0 var(--mmi-primary); }
.mm .mm-sk-lijst.is-doel-eind { box-shadow: inset 0 -3px 0 0 var(--mmi-primary); }
.mm .mm-sk-leeg { margin: 0; padding: 10px 0; font-size: 12px; color: var(--mmi-muted); }

/* ── De reparaties in een batch als tabel (Loek 2026-10-29: "het is zo onoverzichtelijk") ──────
   Eén blok met lijnen in plaats van losse kaarten, en elk gegeven in een vaste kolom: soort, niveau
   en onderdeel stonden als pillen achter het model en schoven per rij op. Regel 2 (codes, kleur/GB)
   loopt onder alle kolommen door, zodat een lang serienummer niet ombreekt. De kolommen staan in
   één variabele: de kolomkoppen en de rijen lezen dezelfde. Smal valt de rij terug op stapelen. */
.mm .mm-repoverzicht { display: grid; gap: 8px; min-width: 0;
  --rep-kolommen: minmax(0, 2fr) minmax(0, 1.2fr) 84px 92px minmax(56px, .5fr) 124px; }
.mm .mm-repoverzicht > .mm-card__head { margin: 8px 0 0; }
.mm .mm-repoverzicht__lijst { display: grid; gap: 0; min-width: 0; }
.mm .mm-repoverzicht .mm-rep-groepkop { margin: 0 0 6px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--mmi-muted); }
.mm .mm-repoverzicht .mm-rep-groepkop:not(:first-child) { margin-top: 18px; }
.mm .mm-repoverzicht .mm-rep-groepkop:has(.mm-ip-groepknop:not(:disabled)):hover { background: none; color: var(--mmi-ink-soft); }
.mm .mm-repoverzicht .mm-rep-groepkop--afgerond { color: var(--mmi-success); }
.mm .mm-repoverzicht .mm-rep-groepkop--afgekeurd { color: var(--mmi-danger); }
.mm .mm-repoverzicht .mm-rep-groepkop .mm-ip-groepknop { padding: 4px 0; width: auto; }
.mm .mm-repkolommen { display: grid; grid-template-columns: var(--rep-kolommen); column-gap: 12px; align-items: center; padding: 6px 12px;
  border: 1px solid var(--mmi-border); border-bottom: 0; border-radius: var(--mmi-radius-md) var(--mmi-radius-md) 0 0; background: var(--mmi-surface-tint);
  font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-repkolommen > :first-child { padding-left: 70px; }
/* De rijen sluiten op elkaar aan (de randen vallen samen); de laatste van een groep krijgt de
   ronde hoeken. Een open kaart ligt erboven (zijn rand is dan helemaal te zien). */
.mm .mm-repoverzicht .mm-repkaart { position: relative; border-radius: 0; box-shadow: none; }
.mm .mm-repoverzicht .mm-repkaart + .mm-repkaart { margin-top: -1px; }
.mm .mm-repoverzicht .mm-repkaart:not(:has(+ .mm-repkaart)) { border-radius: 0 0 var(--mmi-radius-md) var(--mmi-radius-md); }
.mm .mm-repoverzicht .mm-repkaart.is-open { z-index: 1; box-shadow: var(--mmi-shadow-active); }
/* Op naam en nog open = iemand is ermee bezig: blauwe gloed. Open zonder naam blijft wit. */
.mm .mm-repoverzicht .mm-repkaart.is-bezig:not(.is-open) { background: var(--mmi-primary-soft); box-shadow: inset 3px 0 0 var(--mmi-primary); }
/* Afgekeurd: een rode streep links in plaats van een rode rand — in een aaneengesloten blok liep
   die rand door in de lijnen van de buren. */
.mm .mm-repoverzicht .mm-repkaart.is-afgekeurd:not(.is-open) { border-color: var(--mmi-border); box-shadow: inset 3px 0 0 var(--mmi-danger); }
.mm .mm-repkop { display: grid; grid-template-columns: var(--rep-kolommen); column-gap: 12px; row-gap: 2px; align-items: center; padding: 8px 12px; min-width: 0; }
.mm .mm-repkop__open { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mm .mm-repkop__open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }
.mm .mm-repkop .mm-kaart__chev { width: 26px; height: 26px; }
.mm .mm-repkop__nr { flex: none; min-width: 28px; font-weight: 500; font-size: 13px; color: var(--mmi-muted); font-variant-numeric: tabular-nums; }
.mm .mm-repkop .mm-kaart__model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; }
/* Labels in gewone letters (Loek 2026-10-29); de kleur houdt dezelfde betekenis. */
.mm .mm-repkop .mm-badge { text-transform: none; letter-spacing: 0; font-size: 12px; }
.mm .mm-badge--stip { height: auto; padding: 0; background: none; font-weight: 500; font-size: 13px; color: var(--mmi-ink-soft); }
.mm .mm-repkop .mm-badge--stip { font-size: 13px; }
.mm .mm-badge--stip.mm-badge--ok::before { background: var(--mmi-success); }
.mm .mm-badge--stip.mm-badge--let-op::before { background: var(--mmi-warning); }
.mm .mm-badge--stip.mm-badge--fout::before { background: var(--mmi-danger); }
.mm .mm-badge--stip.mm-badge--neutraal::before { background: var(--mmi-muted); }
.mm .mm-repkop__r2 { grid-column: 1 / 6; grid-row: 2; display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; min-width: 0; padding-left: 70px;
  font-size: 12px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-repkop__r2 .mm-code { font-size: 12px; line-height: 18px; }
.mm .mm-repkop__r2 .mm-badge { height: 18px; padding: 0 6px; }
/* Op brede schermen doen de vier cellen mee in het raster van de rij; smal worden ze één regel. */
.mm .mm-repkop__info { display: contents; }
.mm .mm-repkop__info > * { grid-row: 1; min-width: 0; cursor: pointer; }
.mm .mm-repkop__soort { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mmi-ink); }
.mm .mm-repkop__niveau { grid-column: 3; }
.mm .mm-repkop__onderdeel { grid-column: 4; }
.mm .mm-repkop__wie { grid-column: 5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mmi-ink-soft); }
.mm .mm-repkop__soort.is-leeg, .mm .mm-repkop__wie.is-leeg { color: var(--mmi-muted); }
.mm .mm-repkop__acties { grid-column: 6; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; justify-content: end; }
.mm .mm-repkop__ico:hover { background: var(--mmi-step-idle); color: var(--mmi-ink); }
@media (max-width: 760px) {
  .mm .mm-repkolommen { display: none; }
  /* Zonder kolomkoppen krijgt de eerste rij van een groep de bovenste ronde hoeken. */
  .mm .mm-repoverzicht .mm-repkolommen + .mm-repkaart { border-top-left-radius: var(--mmi-radius-md); border-top-right-radius: var(--mmi-radius-md); }
  .mm .mm-repkop { grid-template-columns: minmax(0, 1fr) auto; }
  .mm .mm-repkop__acties { grid-column: 2; grid-row: 1; }
  .mm .mm-repkop__r2 { grid-column: 1 / -1; }
  .mm .mm-repkop__info { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; padding-left: 70px; }
  .mm .mm-repkop__info > * { grid-row: auto; grid-column: auto; }
}
@media (max-width: 480px) { .mm .mm-repkop__r2, .mm .mm-repkop__info { padding-left: 0; } }

/* ── De batchlijst op /reparaties als tabel (Loek 2026-10-29, zoals de reparaties in een batch) ───
   Eigen klassen: .mm-ip-partij is van Inkooppartijen en blijft daar zoals hij is. Regel 2 (de datums)
   loopt onder naam en locatie door; voortgang en knoppen staan over beide regels. De knoppenkolom heeft
   een vaste breedte (--beheer: met Stickers en Batch-sticker), zodat de kolomkoppen gelijk lopen.
   Archief gedimd. Stapelen hangt aan de breedte van de lijst zelf (container query), niet van het
   venster: met de zijbalk erbij werd de locatiekolom tussen 900 en 1060px zo smal dat "Heeft geen
   locatie!" over de balk liep (review 29-10). */
.mm .mm-batchtabel { --batch-kolommen: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(140px, .9fr) 28px; display: grid; min-width: 0; container-type: inline-size; }
.mm .mm-batchtabel--beheer { --batch-kolommen: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(140px, .9fr) 280px; }
.mm .mm-batchtabel__kop { display: grid; grid-template-columns: var(--batch-kolommen); column-gap: 16px; margin: 0 -12px; padding: 6px 12px;
  border-radius: var(--mmi-radius-sm); background: var(--mmi-surface-tint);
  font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--mmi-muted); }
.mm .mm-batchrij { display: grid; grid-template-columns: var(--batch-kolommen); column-gap: 16px; row-gap: 2px; align-items: center; margin: 0 -12px; padding: 10px 12px;
  border-top: 1px solid var(--mmi-border); cursor: pointer; transition: background .12s; }
.mm .mm-batchtabel__kop + .mm-batchrij { border-top: 0; }
.mm .mm-batchrij:hover { background: var(--mmi-surface-tint); }
.mm .mm-batchrij:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }
.mm .mm-batchrij.is-gearchiveerd { opacity: .75; }
.mm .mm-batchrij.is-afgerond .mm-balk > span { background: var(--mmi-success); }
.mm .mm-batchrij__naam { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 650; font-size: 14px; line-height: 20px; color: var(--mmi-ink); }
.mm .mm-batchrij__naam > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm .mm-batchrij__meta { grid-column: 1 / 3; grid-row: 2; margin: 0; font-size: 12px; line-height: 18px; color: var(--mmi-muted); }
.mm .mm-batchrij__locatie { grid-column: 2; grid-row: 1; display: flex; min-width: 0; }
.mm .mm-batchrij__voortgang { grid-column: 3; grid-row: 1 / span 2; display: grid; gap: 4px; min-width: 0; }
.mm .mm-batchrij__voortgang .mm-hint { margin: 0; font-size: 12px; line-height: 16px; }
.mm .mm-batchrij__acties { grid-column: 4; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; cursor: default; }
.mm .mm-batchrij__locatie .mm-locatie { overflow: hidden; }
/* Open boven/beneden (2026-11-10): een batch zonder gebied krijgt een eigen regel over de hele rij met
   de keuze, zodat de kolommen erboven gelijk blijven lopen. */
.mm .mm-batchrij__gebied { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; cursor: default; }
.mm .mm-batchrij__gebied .mm-hint { margin: 0; font-size: 12px; }
@container (max-width: 620px) {
  .mm .mm-batchtabel__kop { display: none; }
  .mm .mm-batchrij { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .mm .mm-batchrij > * { grid-column: 1; grid-row: auto; }
  .mm .mm-batchrij__voortgang { max-width: 360px; }
  .mm .mm-batchrij__acties { justify-content: flex-start; }
}
/* Management heeft twee knoppen meer: stapelen vanaf een bredere lijst. */
@container (max-width: 880px) {
  .mm .mm-batchtabel--beheer > .mm-batchtabel__kop { display: none; }
  .mm .mm-batchtabel--beheer > .mm-batchrij { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .mm .mm-batchtabel--beheer > .mm-batchrij > * { grid-column: 1; grid-row: auto; }
  .mm .mm-batchtabel--beheer .mm-batchrij__voortgang { max-width: 360px; }
  .mm .mm-batchtabel--beheer .mm-batchrij__acties { justify-content: flex-start; }
}

/* De uitgeklapte kaart: blokken met eyebrow + titel, een paar in te klappen. */
.mm .mm-2kol--reparatie { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .mm .mm-2kol--reparatie { grid-template-columns: minmax(0, 1fr); } }
.mm .mm-blok { padding: 20px; }
.mm .mm-blok__kop { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; list-style: none; }
.mm summary.mm-blok__kop { cursor: pointer; }
.mm summary.mm-blok__kop::-webkit-details-marker { display: none; }
.mm summary.mm-blok__kop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mmi-focus); border-radius: var(--mmi-radius-sm); }
.mm .mm-blok details:not([open]) > .mm-blok__kop { margin-bottom: 0; }
.mm .mm-blok__titel { display: grid; min-width: 0; margin: 0 auto 0 0; font: inherit; }
.mm .mm-blok__chev { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--mmi-border); border-radius: var(--mmi-radius-sm);
  color: var(--mmi-muted); background: var(--mmi-surface); }
.mm .mm-blok__chev svg { width: 14px; height: 14px; transition: transform .12s; }
.mm .mm-blok details[open] > summary .mm-blok__chev svg { transform: rotate(180deg); }
.mm .mm-blok__body { display: grid; gap: 12px; min-width: 0; }
/* Afgeleide info onderaan een blok (M360-test, bekend toestel): getinte strook tegen de rand. */
.mm .mm-blok .mm-card__strip { margin: 16px -20px -20px; padding: 10px 20px; display: grid; gap: 8px; background: var(--mmi-surface-tint);
  border-top: 1px solid var(--mmi-border); border-radius: 0 0 var(--mmi-radius-md) var(--mmi-radius-md); }
.mm .mm-regels { display: grid; gap: 8px; }
.mm .mm-strip-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-strip-row > span:first-child { font-weight: 500; font-size: 12px; color: var(--mmi-muted); }
.mm .mm-strip-row > span:last-child { display: grid; gap: 6px; justify-items: start; min-width: 0; overflow-wrap: anywhere; }
.mm .mm-strip-row .m360-status-button { width: auto; padding: 0; border: 0; background: none; gap: 8px; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-strip-row .m360-status-button:not(:disabled):hover { color: var(--mmi-primary); }
.mm .mm-strip-row .m360-status-dot { width: 8px; height: 8px; flex: 0 0 8px; box-shadow: none; }
@media (max-width: 640px) { .mm .mm-strip-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Compacte toestelvelden: 36px hoog, labels 12px. */
.mm .mm-fields--compact { gap: 10px 12px; }
.mm .mm-fields--compact .mm-field { gap: 4px; }
.mm .mm-fields--compact .mm-label, .mm .mm-fields--compact .mm-field > label { font-size: 12px; line-height: 16px; }
.mm .mm-fields--compact .mm-select, .mm .mm-fields--compact .mm-input { height: 36px; }
.mm .mm-fields--compact .mm-select { background-position: calc(100% - 18px) 15px, calc(100% - 13px) 15px; }
.mm .mm-fields--compact .mm-model-select-trigger { min-height: 36px; }
.mm .mm-fields--toestel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.mm .mm-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm .mm-fields--compact.mm-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm .mm-field--breed { grid-column: 1 / -1; }
.mm .mm-label-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.mm .mm-label-row > .mm-label { font-weight: 500; color: var(--mmi-ink-soft); }
.mm .mm-check--inline { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--mmi-muted); cursor: pointer; white-space: nowrap; }
.mm .mm-check--inline input { width: 13px; height: 13px; margin: 0; accent-color: var(--mmi-primary); }
@media (max-width: 760px) {
  .mm .mm-fields--toestel, .mm .mm-fields--2 { grid-template-columns: minmax(0, 1fr); }
  .mm .mm-fields--compact.mm-fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* De +/− naast een keuzelijst: even hoog als het veld. */
.mm .mm-btn--icon { width: 40px; height: 40px; padding: 0; flex: none; }
.mm .mm-inputrow:has(> .mm-btn--icon) { flex-wrap: nowrap; }
/* Een tekstveld dat meegroeit (GroeiVeld): begint op zijn rijen, niet op de standaard 72px. */
.mm .mm-textarea--groei { min-height: 0; resize: none; }
/* Ingeklapte regels onderaan (Activiteit, oude afkeuringen) als <details>. */
.mm details.mm-uitklapregel > summary { list-style: none; }
.mm details.mm-uitklapregel > summary::-webkit-details-marker { display: none; }
.mm details.mm-uitklapregel > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--mmi-focus); }
.mm details.mm-uitklapregel .mm-issue__head { grid-template-columns: 32px minmax(0, 1fr) 28px; padding: 12px 20px; }
.mm details.mm-uitklapregel[open] > summary { border-bottom: 1px solid var(--mmi-border); }
.mm details.mm-uitklapregel .mm-issue__sum { display: block; }
.mm details.mm-uitklapregel .mm-issue__chev svg { width: 16px; height: 16px; transition: transform .12s; }
.mm details.mm-uitklapregel[open] .mm-issue__chev svg { transform: rotate(180deg); }
/* De actiebalk onderaan de kaart; de reden waarom afronden nog niet kan staat links van de knoppen. */
.mm .mm-rep-voet { bottom: 12px; }
/* Een veld dat focus krijgt, scrolt de browser boven de plakkende balk in beeld en niet eronder
   (zelfde als de factuurbalk van Inkooppartijen). Smaller dan 900px breekt de balk af naar meer
   regels; plakkend zou hij dan een flink deel van het scherm afdekken, dus daar plakt hij niet. */
@media (min-width: 901px) { html:has(.mm-rep-voet) { scroll-padding-bottom: 96px; } }
@media (max-width: 900px) { .mm .mm-rep-voet { position: static; } }
.mm .mm-rep-voet__rechts { justify-content: flex-end; }
.mm .mm-rep-voet__rechts > .mm-hint { max-width: 300px; text-align: right; }
/* Het afrondvenster: uitkomst en de fout-vraag als keuzevakken. */
.mm .mm-keuzegroep { border: 0; margin: 0; padding: 0; min-width: 0; }
.mm .mm-keuzegroep > legend { padding: 0; margin-bottom: 8px; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--mmi-ink-soft); }
.mm .mm-keuzes { display: grid; gap: 8px; }
/* Een keuze met twee regels (code komt vaker voor, 2026-10-29): een gewone knop is één regel hoog. */
.mm .mm-keuzeknop { width: 100%; height: auto; min-height: 0; padding: 8px 12px; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.35; }
.mm .mm-keuzes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm .mm-keuzes .mm-checkcard { padding: 10px 14px; }
/* De soorten bij vooraf niet gezien / zelf beschadigd (30-10): de lijst van de kiezer, in een eigen
   scrollvak zodat de toelichting eronder in beeld blijft. */
.mm .mm-afrond-soorten { max-height: 260px; border: 1px solid var(--mmi-border-strong); border-radius: var(--mmi-radius-sm); }
.mm .mm-afrond-soorten > .mm-kiezer__regel:first-child, .mm .mm-afrond-soorten > .mm-soortkop:first-child + .mm-kiezer__regel { border-top: 0; }
.mm .mm-afrond-soorten .mm-kiezer__regel { padding: 8px 12px; }
.mm .mm-afrond-soorten > .mm-soortkop { padding: 10px 12px 4px; }
.mm .mm-afrond-soorten__leeg { margin: 0; padding: 10px 12px; }

/* Huisstijlronde werkvloer (2026-11-09). Rode-tekst-knop voor een destructieve actie die los
   van de rest staat (Inkoop: "Geselecteerde verwijderen"); de gevulde rode knop blijft voor het
   bevestigvenster. En de melding op /reparaties van een net gesloten reparatiekaart. */
.mm .mm-btn--ghost-danger { background: transparent; color: var(--mmi-danger); padding: 0 8px; }
.mm .mm-btn--ghost-danger:hover { background: var(--mmi-danger-soft); color: var(--mmi-danger-hover); }
.mm .mm-kaartmelding { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }