/*
 * ════════════════════════════════════════════════════════════════════
 *  STERK PLATFORM — Material Design 3 Component Library
 *
 *  Gebruik:  importeer NA m3-tokens.css en NA app.css in base.html
 *  Doel:     M3 component-classes die naast oude .btn/.card kunnen
 *            bestaan, zodat we pagina-per-pagina kunnen migreren.
 *
 *  Naamgeving: alle classes beginnen met .m3- zodat ze niet
 *              botsen met de bestaande pre-M3 classes.
 *
 *  Componenten in deze file:
 *    Typography:  .m3-display-*, .m3-headline-*, .m3-title-*, .m3-body-*, .m3-label-*
 *    Buttons:     .m3-btn-filled, .m3-btn-tonal, .m3-btn-outlined, .m3-btn-text, .m3-btn-elevated
 *    Cards:       .m3-card-elevated, .m3-card-filled, .m3-card-outlined
 *    Inputs:      .m3-input-filled, .m3-input-outlined, .m3-input-group
 *    Chips:       .m3-chip-assist, .m3-chip-filter, .m3-chip-suggestion
 *    Top app bar: .m3-top-app-bar
 *    Surface:     .m3-surface, .m3-surface-container, .m3-surface-container-high
 *    Divider:     .m3-divider
 *    FAB:         .m3-fab, .m3-fab-extended
 *    Icons:       .m3-icon (compatible met lucide)
 * ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   TYPOGRAPHY — gebruik deze classes ipv inline font-size:
   ────────────────────────────────────────────────────────────────── */

.m3-display-large    { font-size: var(--md-sys-typescale-display-large-size);    line-height: var(--md-sys-typescale-display-large-line);    letter-spacing: var(--md-sys-typescale-display-large-tracking);    font-weight: var(--md-sys-typescale-display-large-weight); }
.m3-display-medium   { font-size: var(--md-sys-typescale-display-medium-size);   line-height: var(--md-sys-typescale-display-medium-line);   letter-spacing: var(--md-sys-typescale-display-medium-tracking);   font-weight: var(--md-sys-typescale-display-medium-weight); }
.m3-display-small    { font-size: var(--md-sys-typescale-display-small-size);    line-height: var(--md-sys-typescale-display-small-line);    letter-spacing: var(--md-sys-typescale-display-small-tracking);    font-weight: var(--md-sys-typescale-display-small-weight); }
.m3-headline-large   { font-size: var(--md-sys-typescale-headline-large-size);   line-height: var(--md-sys-typescale-headline-large-line);   letter-spacing: var(--md-sys-typescale-headline-large-tracking);   font-weight: var(--md-sys-typescale-headline-large-weight); }
.m3-headline-medium  { font-size: var(--md-sys-typescale-headline-medium-size);  line-height: var(--md-sys-typescale-headline-medium-line);  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);  font-weight: var(--md-sys-typescale-headline-medium-weight); }
.m3-headline-small   { font-size: var(--md-sys-typescale-headline-small-size);   line-height: var(--md-sys-typescale-headline-small-line);   letter-spacing: var(--md-sys-typescale-headline-small-tracking);   font-weight: var(--md-sys-typescale-headline-small-weight); }
.m3-title-large      { font-size: var(--md-sys-typescale-title-large-size);      line-height: var(--md-sys-typescale-title-large-line);      letter-spacing: var(--md-sys-typescale-title-large-tracking);      font-weight: var(--md-sys-typescale-title-large-weight); }
.m3-title-medium     { font-size: var(--md-sys-typescale-title-medium-size);     line-height: var(--md-sys-typescale-title-medium-line);     letter-spacing: var(--md-sys-typescale-title-medium-tracking);     font-weight: var(--md-sys-typescale-title-medium-weight); }
.m3-title-small      { font-size: var(--md-sys-typescale-title-small-size);      line-height: var(--md-sys-typescale-title-small-line);      letter-spacing: var(--md-sys-typescale-title-small-tracking);      font-weight: var(--md-sys-typescale-title-small-weight); }
.m3-body-large       { font-size: var(--md-sys-typescale-body-large-size);       line-height: var(--md-sys-typescale-body-large-line);       letter-spacing: var(--md-sys-typescale-body-large-tracking);       font-weight: var(--md-sys-typescale-body-large-weight); }
.m3-body-medium      { font-size: var(--md-sys-typescale-body-medium-size);      line-height: var(--md-sys-typescale-body-medium-line);      letter-spacing: var(--md-sys-typescale-body-medium-tracking);      font-weight: var(--md-sys-typescale-body-medium-weight); }
.m3-body-small       { font-size: var(--md-sys-typescale-body-small-size);       line-height: var(--md-sys-typescale-body-small-line);       letter-spacing: var(--md-sys-typescale-body-small-tracking);       font-weight: var(--md-sys-typescale-body-small-weight); }
.m3-label-large      { font-size: var(--md-sys-typescale-label-large-size);      line-height: var(--md-sys-typescale-label-large-line);      letter-spacing: var(--md-sys-typescale-label-large-tracking);      font-weight: var(--md-sys-typescale-label-large-weight); }
.m3-label-medium     { font-size: var(--md-sys-typescale-label-medium-size);     line-height: var(--md-sys-typescale-label-medium-line);     letter-spacing: var(--md-sys-typescale-label-medium-tracking);     font-weight: var(--md-sys-typescale-label-medium-weight); }
.m3-label-small      { font-size: var(--md-sys-typescale-label-small-size);      line-height: var(--md-sys-typescale-label-small-line);      letter-spacing: var(--md-sys-typescale-label-small-tracking);      font-weight: var(--md-sys-typescale-label-small-weight); }

/* ──────────────────────────────────────────────────────────────────
   COLOR UTILITY — vaak gebruikt
   ────────────────────────────────────────────────────────────────── */

.m3-text-primary           { color: var(--md-sys-color-primary); }
.m3-text-on-surface        { color: var(--md-sys-color-on-surface); }
.m3-text-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }
.m3-text-error             { color: var(--md-sys-color-error); }

/* ──────────────────────────────────────────────────────────────────
   SURFACE — achtergrond niveaus
   ────────────────────────────────────────────────────────────────── */

.m3-surface                  { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
.m3-surface-container-lowest { background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); }
.m3-surface-container-low    { background: var(--md-sys-color-surface-container-low);    color: var(--md-sys-color-on-surface); }
.m3-surface-container        { background: var(--md-sys-color-surface-container);        color: var(--md-sys-color-on-surface); }
.m3-surface-container-high   { background: var(--md-sys-color-surface-container-high);   color: var(--md-sys-color-on-surface); }
.m3-surface-container-highest{ background: var(--md-sys-color-surface-container-highest);color: var(--md-sys-color-on-surface); }

/* ──────────────────────────────────────────────────────────────────
   BUTTON — Filled (primary action)
   ────────────────────────────────────────────────────────────────── */

.m3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: var(--md-sys-typescale-label-large-weight, 500);
  letter-spacing: var(--md-sys-typescale-label-large-tracking, .00625rem);
  line-height: 1;
  height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(.2,0,0,1));
  white-space: nowrap;
}

.m3-btn:disabled,
.m3-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: .38;
}

/* State layer — toegevoegd via ::before voor hover/focus/pressed */
.m3-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(.2,0,0,1));
  pointer-events: none;
}
.m3-btn:hover::before   { opacity: .08; }
.m3-btn:focus-visible::before { opacity: .12; }
.m3-btn:active::before  { opacity: .12; }

/* Filled (primary action) */
.m3-btn-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.m3-btn-filled:hover { box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)); }

/* Tonal (secondary action) */
.m3-btn-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.m3-btn-tonal:hover { box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)); }

/* Outlined (alternative action) */
.m3-btn-outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}
.m3-btn-outlined:hover {
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}

/* Text (low-emphasis action) */
.m3-btn-text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 12px;
}

/* Elevated */
.m3-btn-elevated {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15));
}
.m3-btn-elevated:hover { box-shadow: var(--md-sys-elevation-level2, 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15)); }

/* Sizes */
.m3-btn-sm { height: 32px; padding: 0 16px; font-size: .8125rem; }
.m3-btn-lg { height: 48px; padding: 0 32px; font-size: 1rem; }
.m3-btn-icon-only { width: 40px; padding: 0; }

/* Destructive variant (filled red) */
.m3-btn-danger {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

/* ──────────────────────────────────────────────────────────────────
   CARD — Elevated/Filled/Outlined
   ────────────────────────────────────────────────────────────────── */

.m3-card {
  display: block;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 16px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  position: relative;
  overflow: hidden;
}

.m3-card-elevated {
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15));
}

.m3-card-filled {
  background: var(--md-sys-color-surface-container-highest);
}

.m3-card-outlined {
  background: var(--md-sys-color-surface);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}

/* Card titel block */
.m3-card-title {
  font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
  line-height: var(--md-sys-typescale-title-large-line, 1.75rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
}
.m3-card-subtitle {
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 16px;
}

/* ──────────────────────────────────────────────────────────────────
   INPUT — Filled & Outlined text fields
   ────────────────────────────────────────────────────────────────── */

.m3-input-group {
  position: relative;
  display: block;
  margin-bottom: 16px;
}

.m3-input-filled,
.m3-input-outlined {
  width: 100%;
  height: 56px;
  font-family: inherit;
  font-size: var(--md-sys-typescale-body-large-size, 1rem);
  color: var(--md-sys-color-on-surface);
  padding: 24px 16px 8px;
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small-top, 4px 4px 0 0);
  outline: none;
  transition: background var(--md-sys-motion-duration-short3, 150ms);
}

.m3-input-filled {
  background: var(--md-sys-color-surface-container-highest);
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
}
.m3-input-filled:hover  { border-bottom-color: var(--md-sys-color-on-surface); }
.m3-input-filled:focus  { border-bottom: 2px solid var(--md-sys-color-primary); padding-bottom: 7px; }

.m3-input-outlined {
  background: transparent;
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  padding: 16px;
  height: 56px;
}
.m3-input-outlined:hover { box-shadow: inset 0 0 0 1px var(--md-sys-color-on-surface); }
.m3-input-outlined:focus { box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }

/* Label boven input */
.m3-input-label {
  display: block;
  font-size: var(--md-sys-typescale-body-small-size, .75rem);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
  font-weight: 500;
}

/* Helper/error tekst onder input */
.m3-input-helper {
  display: block;
  font-size: var(--md-sys-typescale-body-small-size, .75rem);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px;
  padding-left: 16px;
}
.m3-input-error {
  color: var(--md-sys-color-error);
}

/* ──────────────────────────────────────────────────────────────────
   CHIP — Assist/Filter/Suggestion
   ────────────────────────────────────────────────────────────────── */

.m3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  border-radius: var(--md-sys-shape-corner-small, 8px);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: background var(--md-sys-motion-duration-short3, 150ms);
}
.m3-chip:hover  { background: rgba(0,0,0,.05); }

.m3-chip-selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: none;
}

.m3-chip-elevated {
  box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15));
}

/* ──────────────────────────────────────────────────────────────────
   TOP APP BAR
   ────────────────────────────────────────────────────────────────── */

.m3-top-app-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 16px 0 4px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.m3-top-app-bar-title {
  flex: 1;
  font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
  font-weight: 400;
  line-height: var(--md-sys-typescale-title-large-line, 1.75rem);
  color: var(--md-sys-color-on-surface);
}
.m3-top-app-bar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.m3-top-app-bar-action::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3, 150ms);
}
.m3-top-app-bar-action:hover::before { opacity: .08; }

/* ──────────────────────────────────────────────────────────────────
   FAB — Floating Action Button
   ────────────────────────────────────────────────────────────────── */

.m3-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  width: 56px;
  border-radius: var(--md-sys-shape-corner-large, 16px);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-level3, 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3));
  position: relative;
  text-decoration: none;
  transition: box-shadow var(--md-sys-motion-duration-short4, 200ms);
}
.m3-fab:hover { box-shadow: var(--md-sys-elevation-level4, 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3)); }
.m3-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3, 150ms);
}
.m3-fab:hover::before { opacity: .08; }

.m3-fab-extended {
  width: auto;
  padding: 0 16px 0 20px;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
}

/* ──────────────────────────────────────────────────────────────────
   DIVIDER
   ────────────────────────────────────────────────────────────────── */

.m3-divider {
  display: block;
  height: 1px;
  border: none;
  background: var(--md-sys-color-outline-variant);
  margin: 16px 0;
}
.m3-divider-inset { margin-left: 16px; }

/* ──────────────────────────────────────────────────────────────────
   LIST ITEM (M3 List)
   ────────────────────────────────────────────────────────────────── */

.m3-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.m3-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 16px;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  position: relative;
  cursor: pointer;
}
.m3-list-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3, 150ms);
  pointer-events: none;
}
.m3-list-item:hover::before { opacity: .08; }
.m3-list-item-headline {
  font-size: var(--md-sys-typescale-body-large-size, 1rem);
  color: var(--md-sys-color-on-surface);
}
.m3-list-item-supporting {
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}

/* ──────────────────────────────────────────────────────────────────
   ICON helper (compatible met lucide <i data-lucide="...">)
   ────────────────────────────────────────────────────────────────── */

.m3-icon { width: 18px; height: 18px; flex-shrink: 0; }
.m3-icon-sm { width: 16px; height: 16px; }
.m3-icon-lg { width: 24px; height: 24px; }

/* ──────────────────────────────────────────────────────────────────
   UTILITIES — spacing op M3 ritme (4/8/12/16/24/32/48)
   ────────────────────────────────────────────────────────────────── */

.m3-stack-1 > * + * { margin-top: 4px; }
.m3-stack-2 > * + * { margin-top: 8px; }
.m3-stack-3 > * + * { margin-top: 12px; }
.m3-stack-4 > * + * { margin-top: 16px; }
.m3-stack-6 > * + * { margin-top: 24px; }
.m3-stack-8 > * + * { margin-top: 32px; }

.m3-row-1 { display: flex; gap: 4px; align-items: center; }
.m3-row-2 { display: flex; gap: 8px; align-items: center; }
.m3-row-3 { display: flex; gap: 12px; align-items: center; }
.m3-row-4 { display: flex; gap: 16px; align-items: center; }
.m3-row-6 { display: flex; gap: 24px; align-items: center; }


/* ════════════════════════════════════════════════════════════════════
   M3 NAVIGATION DRAWER — overrides voor bestaande .sidebar-*
   Behoudt 240px breedte + flex-layout uit app.css, vervangt alleen
   visuele eigenschappen (kleuren, vorm, type, state layers).
   ──────────────────────────────────────────────────────────────────── */

.sidebar {
  /* M3 Navigation Drawer: surface-container-high is tonaal DONKERDER dan de
     content-area (surface-container-low). Visueel zit de sidebar "achter" de
     content — geen border-right nodig. */
  background: var(--md-sys-color-surface-container-high);
  border-right: none;
}

/* Brand — M3 title-large styling */
.sidebar-brand {
  padding: 16px 16px 12px;
  border-bottom: none;
  font-size: var(--md-sys-typescale-title-medium-size, 1rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  gap: 12px;
}
.sidebar-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-small, 8px);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: 18px;
}

/* Nav container */
.sidebar-nav {
  padding: 8px 12px;
  gap: 4px;
}

/* Section label — M3 label-small */
.sidebar-section-label {
  font-size: var(--md-sys-typescale-label-small-size, .6875rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-sys-color-on-surface-variant);
  padding: 16px 16px 6px;
  opacity: 1;
}

/* Nav link — M3 list-item with pill shape */
.sidebar-nav-link {
  position: relative;
  padding: 0 16px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  gap: 12px;
  overflow: hidden;
  transition: none;
}
.sidebar-nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.sidebar-nav-link:hover {
  background: transparent;
  color: var(--md-sys-color-on-surface);
}
.sidebar-nav-link:hover::before { opacity: .08; }
.sidebar-nav-link svg { opacity: 1; color: inherit; }

.sidebar-nav-link.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 500;
}
.sidebar-nav-link.active::before { opacity: 0; }
.sidebar-nav-link.active:hover::before { opacity: .08; background: var(--md-sys-color-on-secondary-container); }

[data-theme="dark"] .sidebar-nav-link.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Footer / profile button */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.sidebar-profile-btn {
  padding: 8px 12px;
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  position: relative;
  overflow: hidden;
  gap: 12px;
}
.sidebar-profile-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.sidebar-profile-btn:hover { background: transparent; }
.sidebar-profile-btn:hover::before { opacity: .08; }

.sidebar-profile-avatar {
  width: 32px;
  height: 32px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-size: .875rem;
  font-weight: 500;
}
.sidebar-profile-name {
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  color: var(--md-sys-color-on-surface);
}
.sidebar-profile-role {
  font-size: var(--md-sys-typescale-body-small-size, .75rem);
  color: var(--md-sys-color-on-surface-variant);
}

/* Profile menu — M3 menu pattern */
.sidebar-profile-menu {
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-small, 8px);
  box-shadow: var(--md-sys-elevation-level2, 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15));
  padding: 8px 0;
}
.sidebar-profile-menu-info {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding: 8px 16px 12px;
}
.sidebar-profile-menu-item {
  padding: 10px 16px;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  gap: 12px;
  position: relative;
}
.sidebar-profile-menu-item:hover { background: var(--md-sys-color-surface-container-high); }

/* Search field — M3 outlined search */
.sidebar-search {
  padding: 4px 12px 8px;
}
.sidebar-search-input {
  height: 40px;
  padding: 0 16px;
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  background: var(--md-sys-color-surface-container-highest);
  border: none;
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  color: var(--md-sys-color-on-surface);
}
.sidebar-search-input::placeholder { color: var(--md-sys-color-on-surface-variant); }
.sidebar-search-input:focus {
  background: var(--md-sys-color-surface-container-highest);
  border: none;
  box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}
.search-dropdown {
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  box-shadow: var(--md-sys-elevation-level2, 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15));
}


/* ════════════════════════════════════════════════════════════════════
   M3 NAVIGATION BAR — mobile bottom nav (.mobile-bottom-nav / .mbn-*)
   Behoudt grid-positie en mobile-only display uit app.css, vervangt
   visuele styling (kleuren, type, active pill).
   ──────────────────────────────────────────────────────────────────── */

.mobile-bottom-nav {
  background: var(--md-sys-color-surface-container);
  border-top: none;
  height: 80px;
}

.mbn-tab {
  color: var(--md-sys-color-on-surface-variant);
  gap: 4px;
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
  position: relative;
  padding-top: 12px;
  padding-bottom: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.mbn-tab svg { transition: none; }

/* Active pill — M3 navigation bar active indicator */
.mbn-tab.mbn-active {
  color: var(--md-sys-color-on-surface);
}
.mbn-tab.mbn-active svg {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: 4px 16px;
  border-radius: var(--md-sys-shape-corner-large, 16px);
  width: auto !important;
  height: 32px !important;
  box-sizing: content-box;
}

.mbn-more-overlay {
  background: rgba(0,0,0,.32);
}
.mbn-more-panel {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-large-top, 28px 28px 0 0);
  border: none;
}
.mbn-more-item {
  padding: 12px 16px;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  gap: 12px;
}
.mbn-more-item:hover { background: var(--md-sys-color-surface-container-high); }


/* ════════════════════════════════════════════════════════════════════
   M3 PAGE HEADER / TITLE — overrides voor .page-title, .page-sub
   ──────────────────────────────────────────────────────────────────── */

.page-header {
  margin-bottom: 24px;
}
.page-title {
  font-size: var(--md-sys-typescale-headline-medium-size, 1.75rem);
  line-height: var(--md-sys-typescale-headline-medium-line, 2.25rem);
  font-weight: 400;
  color: var(--md-sys-color-on-surface);
  margin: 0;
}
.page-sub {
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface-variant);
  margin: 4px 0 0;
}


/* ════════════════════════════════════════════════════════════════════
   M3 LIST ROW — overrides voor .order-row (gebruikt door orders & quotes)
   Behoudt flex-layout uit app.css, vervangt visuele eigenschappen.
   ──────────────────────────────────────────────────────────────────── */

.order-row {
  /* M3 Filled card: witter dan pagina-bg geeft automatisch tonal lift.
     Geen border — M3 lijst-items leunen op tonal contrast + state layer. */
  background: var(--md-sys-color-surface-container-lowest);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 16px 20px;
  margin-bottom: 8px;
  color: var(--md-sys-color-on-surface);
  transition: box-shadow var(--md-sys-motion-duration-short3, 150ms);
  position: relative;
  overflow: hidden;
}
.order-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.order-row:hover {
  /* M3 elevation level-1 op hover: subtiele lift door schaduw, niet door border. */
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px -2px rgba(0,0,0,.08);
}
.order-row:hover::before { opacity: .04; }

.order-num {
  font-size: var(--md-sys-typescale-title-medium-size, 1rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}
.order-amount {
  font-size: var(--md-sys-typescale-title-medium-size, 1rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}
.order-row-mid {
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface-variant);
}
.order-row-arrow {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1.5rem;
  font-weight: 300;
}
.order-address-col,
.order-date-col {
  color: var(--md-sys-color-on-surface-variant);
}

/* ════════════════════════════════════════════════════════════════════
   M3 LIST SEARCH — overrides voor .list-search en kindelementen
   ──────────────────────────────────────────────────────────────────── */

.list-search {
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}
.list-search input[type="search"],
.list-search select {
  height: 40px;
  padding: 0 16px;
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-highest);
  border: none;
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  outline: none;
  box-shadow: none;
  font-family: inherit;
}
.list-search input[type="search"]:focus,
.list-search select:focus {
  box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}
.list-search select { min-width: 160px; }

.list-search-empty {
  background: transparent;
  border: 1px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 32px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
}


/* ════════════════════════════════════════════════════════════════════
   M3 CARD — overrides voor bestaande .card class
   ──────────────────────────────────────────────────────────────────── */

.card {
  /* M3 Filled Card: surface-container-lowest (wit) op een lichte pagina-bg.
     Tonal contrast doet het werk — geen border. */
  background: var(--md-sys-color-surface-container-lowest);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 16px 20px;
  box-shadow: var(--md-sys-elevation-level0);
}
.card-title {
  font-size: var(--md-sys-typescale-title-medium-size, 1rem);
  line-height: var(--md-sys-typescale-title-medium-line, 1.5rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 12px;
}


/* ════════════════════════════════════════════════════════════════════
   M3 BADGE — overrides voor bestaande .badge classes
   ──────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--md-sys-shape-corner-small, 8px);
  font-size: var(--md-sys-typescale-label-small-size, .6875rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
/* Status-badges zijn SEMANTISCH (los van de merkkleuren navy/geel). */
.badge-green,
.badge-success { background: #DCFCE7; color: #15803D; }
.badge-orange,
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-red,
.badge-danger  { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.badge-blue    { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.badge-yellow  { background: #FEF3C7; color: #92400E; }
.badge-teal    { background: #CCFBF1; color: #0F766E; }
.badge-purple  { background: #EDE9FE; color: #6D28D9; }
.badge-amber   { background: #FEF3C7; color: #92400E; }
.badge-gray,
.badge-default { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }


/* ════════════════════════════════════════════════════════════════════
   M3 BUTTON — overrides voor bestaande .btn classes
   Behoudt class-namen, vervangt visuele styling met M3 patroon.
   ──────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  letter-spacing: var(--md-sys-typescale-label-large-tracking, .00625rem);
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow 200ms;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.btn:hover::before { opacity: .08; }
.btn:focus-visible::before { opacity: .12; }
.btn:active::before { opacity: .12; }
.btn:disabled, .btn[aria-disabled="true"] { pointer-events: none; opacity: .38; }

.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.btn-primary:hover { box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)); }

.btn-outline {
  background: transparent;
  color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}
.btn-outline:hover { box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }

.btn-ghost,
.btn-text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 12px;
}

.btn-success {
  background: var(--md-sys-color-success, #16A34A);
  color: #FFFFFF;
}

.btn-danger {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

.btn-sm {
  height: 32px;
  padding: 0 16px;
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
}
.btn-lg {
  height: 48px;
  padding: 0 32px;
  font-size: 1rem;
}


/* ════════════════════════════════════════════════════════════════════
   M3 INPUT / TEXTAREA — bestaande .input class
   ──────────────────────────────────────────────────────────────────── */

/* M3 Outlined Text Field — "soft" variant:
   - Rest:  1px outline-variant (zacht, in lijn met card-dividers)
   - Hover: 1px outline (duidelijke feedback, niet zwart)
   - Focus: 2px primary (sterke focus-ring)
   M3-spec gebruikt outline (#54504A) in rest, wat in admin-context met
   veel inputs visueel te zwaar is. Outlined-soft is een gangbare aanpassing
   die in Google's eigen Cloud/Firebase consoles ook gebruikt wordt. */
/* M3 Outlined Text Field — subtiele 1px border, geen extra shadow.
   - Border: outline-variant in rust → outline op hover → primary 2px op focus
   - Padding ruimer dan native voor breathing room
   - Geen extra inset-shadow (was visueel zwaar in amber palette)
   - Border-radius: extra-small (4px) zoals M3 spec
*/
.input,
input[type="text"]:not(.m3-login-input):not(.sidebar-search-input),
input[type="email"]:not(.m3-login-input),
input[type="password"]:not(.m3-login-input),
input[type="tel"]:not(.m3-login-input),
input[type="number"]:not(.m3-login-input),
input[type="search"]:not(.sidebar-search-input):not(.dash-search-input):not([class*='m3-']),
input[type="date"],
input[type="time"],
select:not([class*='m3-']),
textarea {
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  padding: 10px 14px;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
  width: 100%;
  /* native chrome resetten — alleen voor select pijl-icoon zelf laten staan */
  -webkit-appearance: none;
  appearance: none;
}

/* Native browser-default voor selects: pijl-icoon */
select:not([class*='m3-']) {
  -webkit-appearance: auto;
  appearance: auto;
  padding-right: 28px;
}
/* date/time pickers krijgen ook de native UI iconen behouden */
input[type="date"], input[type="time"] {
  -webkit-appearance: auto;
  appearance: auto;
}

.input:hover,
input[type="text"]:not(.m3-login-input):hover,
input[type="email"]:not(.m3-login-input):hover,
input[type="password"]:not(.m3-login-input):hover,
input[type="tel"]:not(.m3-login-input):hover,
input[type="number"]:not(.m3-login-input):hover,
input[type="search"]:not(.sidebar-search-input):not([class*='m3-']):hover,
input[type="date"]:hover,
input[type="time"]:hover,
select:not([class*='m3-']):hover,
textarea:hover {
  border-color: var(--md-sys-color-on-surface);
}

.input:focus,
input[type="text"]:not(.m3-login-input):focus,
input[type="email"]:not(.m3-login-input):focus,
input[type="password"]:not(.m3-login-input):focus,
input[type="tel"]:not(.m3-login-input):focus,
input[type="number"]:not(.m3-login-input):focus,
input[type="search"]:not(.sidebar-search-input):not([class*='m3-']):focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:not([class*='m3-']):focus,
textarea:focus {
  /* 2px primary border zonder padding-shift: gebruik box-shadow voor de
     "tweede pixel" zodat content niet 1px verschuift bij focus */
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

/* Disabled-state — alpha-onderdrukking i.p.v. uit-grijs voor coherentie */
.input:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  border-color: var(--md-sys-color-outline-variant);
  cursor: not-allowed;
  opacity: .7;
}

/* Placeholder — dempere on-surface-variant */
.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: .72;
}

/* Mobile: voorkom iOS Safari auto-zoom bij focus.
   iOS zoomt in als font-size < 16px. Bump op kleine schermen. */
@media (max-width: 768px) {
  .input,
  input[type="text"]:not(.m3-login-input):not(.sidebar-search-input),
  input[type="email"]:not(.m3-login-input),
  input[type="password"]:not(.m3-login-input),
  input[type="tel"]:not(.m3-login-input),
  input[type="number"]:not(.m3-login-input),
  input[type="search"]:not(.sidebar-search-input):not(.dash-search-input):not([class*='m3-']),
  input[type="date"],
  input[type="time"],
  select:not([class*='m3-']),
  textarea,
  .m3-input-outlined {
    font-size: 16px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   M3 CUSTOMER BAR — kleine clickable strip die naar /contacts linkt
   Vervangt inline-edit klant-formulieren op detail-pagina's.
   ──────────────────────────────────────────────────────────────────── */

.customer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  position: relative;
  /* GEEN overall-hover meer; alleen de chevron-knop is klikbaar.
     Tekst (e-mail/telefoon/adres) blijft selectable + copyable. */
}
.customer-bar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--md-sys-typescale-title-medium-size, 1rem);
  font-weight: 500;
  flex-shrink: 0;
}
.customer-bar-info {
  flex: 1;
  min-width: 0;
}
.customer-bar-name {
  font-size: var(--md-sys-typescale-body-large-size, 1rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-bar-sub {
  font-size: var(--md-sys-typescale-body-small-size, .75rem);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Klikbare kopieer-spans in het sub-regeltje */
.customer-bar .cb-copy {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background-color .12s;
}
.customer-bar .cb-copy:hover {
  background: var(--md-sys-color-surface-container-high);
}
.customer-bar .cb-copy.cb-copy--done {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
/* Chevron-knop rechts — kleine ronde click-area */
.customer-bar-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1.4rem;
  text-decoration: none;
  transition: background-color .12s, color .12s;
}
.customer-bar-arrow:hover {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-primary);
}


/* ════════════════════════════════════════════════════════════════════
   M3 DASHBOARD — stat cards, funnel, priority bar
   ──────────────────────────────────────────────────────────────────── */

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

.stat-card {
  /* Consistent met .card — surface-container-lowest op een lichte bg
     geeft natuurlijke "lift" zonder border. */
  background: var(--md-sys-color-surface-container-lowest);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
  transition: background 150ms;
}

.stat-number {
  font-size: var(--md-sys-typescale-headline-large-size, 2rem);
  line-height: var(--md-sys-typescale-headline-large-line, 2.5rem);
  font-weight: 400;
  color: var(--md-sys-color-primary);
  letter-spacing: 0;
}

.stat-label {
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  line-height: var(--md-sys-typescale-label-medium-line, 1rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

.funnel {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.funnel-item {
  flex: 1;
  min-width: 100px;
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 12px;
  text-align: center;
}
.funnel-count {
  font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--md-sys-color-primary);
}
.funnel-label {
  font-size: var(--md-sys-typescale-label-small-size, .6875rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px;
  text-transform: capitalize;
  letter-spacing: 0;
}

.priority-bar {
  display: inline-block;
  height: 6px;
  border-radius: 3px;
  background: var(--md-sys-color-surface-container-highest);
  width: 80px;
  vertical-align: middle;
  position: relative;
}
.priority-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--md-sys-color-primary);
}


/* ════════════════════════════════════════════════════════════════════
   M3 TABLE — basic table styling
   ──────────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  margin: -4px;
  padding: 4px;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

/* M3 Data Table — header heeft sterker bottom-border zodat hij visueel
   loskomt van de body. Rij-dividers blijven subtiel (outline-variant met
   40% opacity) voor ademruimte. Verticale padding 16px voor leesbaarheid. */
.table-wrap thead th {
  text-align: left;
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.table-wrap tbody td {
  padding: 16px 12px;
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent);
}

.table-wrap tbody tr:last-child td {
  border-bottom: none;
}

.table-wrap tbody tr {
  position: relative;
  transition: background 100ms;
}
/* M3 state layer voor table-row hover — consistent met .order-row */
.table-wrap tbody tr.table-row-link {
  cursor: pointer;
}
.table-wrap tbody tr.table-row-link:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
}

.table-link {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  font-weight: 500;
}
.table-link:hover { text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════════
   M3 ALERT — feedback banners
   ──────────────────────────────────────────────────────────────────── */

.alert {
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-small, 8px);
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-success { background: #DCFCE7; color: #15803D; }
.alert-warning { background: #FEF3C7; color: #92400E; }
.alert-error,
.alert-danger  { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.alert-info    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }


/* ════════════════════════════════════════════════════════════════════
   M3 TIMELINE — for activity logs
   ──────────────────────────────────────────────────────────────────── */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.timeline-item:last-child {
  border-bottom: none;
}
.timeline-meta {
  font-size: var(--md-sys-typescale-label-small-size, .6875rem);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════════
   M3 BACK BUTTON ROUND — voor terug-knoppen op detail pagina's
   ──────────────────────────────────────────────────────────────────── */

.btn-back-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: 1.25rem;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.btn-back-round::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 150ms;
}
.btn-back-round:hover::before { opacity: .08; }


/* ════════════════════════════════════════════════════════════════════
   M3 MONTEUR PWA — overrides voor .m-* en .appt-* classes
   ──────────────────────────────────────────────────────────────────── */

/* Top header */
.m-header {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: none;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.m-header-brand {
  font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
  font-weight: 500;
  letter-spacing: 0;
}
.m-header-user {
  background: var(--md-sys-color-on-primary);
  color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  padding: 6px 14px;
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
}

/* Bottom navigation — M3 Navigation Bar */
.m-bottom-nav {
  background: var(--md-sys-color-surface-container);
  border-top: none;
  height: 80px;
  box-shadow: var(--md-sys-elevation-level2);
}
.m-tab {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 8px 16px;
  gap: 4px;
}
.m-tab.active {
  color: var(--md-sys-color-on-surface);
}
.m-tab.active svg {
  stroke: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
  padding: 4px 16px;
  border-radius: var(--md-sys-shape-corner-large, 16px);
  width: auto !important;
  height: 32px !important;
  box-sizing: content-box;
  margin-bottom: 0;
}

/* Day labels */
.m-day-label {
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  padding: 20px 0 8px;
}

/* Appointment card */
.appt-card {
  background: var(--md-sys-color-surface-container-low);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
  transition: background 150ms, box-shadow 150ms;
}
.appt-card:active {
  transform: none;
  background: var(--md-sys-color-surface-container);
}
.appt-time {
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-sys-color-primary);
}
.appt-name {
  font-size: var(--md-sys-typescale-title-medium-size, 1rem);
  line-height: var(--md-sys-typescale-title-medium-line, 1.5rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}
.appt-sub {
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface-variant);
}
.appt-badge {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-small-size, .6875rem);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: var(--md-sys-shape-corner-small, 8px);
}
.appt-route {
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  color: var(--md-sys-color-primary);
}
.appt-arrow {
  color: var(--md-sys-color-on-surface-variant);
}

/* Navigate button (M3 Filled button XL) */
.nav-btn {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  letter-spacing: 0;
  padding: 16px 24px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 200ms;
}
.nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.nav-btn:active::before { opacity: .12; }

/* M3 card (monteur) */
.m-card {
  background: var(--md-sys-color-surface-container-low);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.m-card-title {
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 12px;
}

/* Info row */
.info-row {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  padding: 12px 0;
}
.info-label {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  width: 6rem;
}
.info-value {
  color: var(--md-sys-color-on-surface);
  font-weight: 400;
}

/* Action buttons — M3 Filled / Outlined */
.btn-action {
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  letter-spacing: 0;
  padding: 14px 24px;
  height: 48px;
  position: relative;
  overflow: hidden;
}
.btn-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.btn-action:active::before { opacity: .12; }
.btn-action-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.btn-action-success {
  background: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}
.btn-action-outline {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
.btn-action-danger {
  background: transparent;
  color: var(--md-sys-color-error);
  border: 1px solid var(--md-sys-color-error);
}

/* Checklist items */
.check-item {
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 14px 16px;
  margin-bottom: 8px;
}
.check-item.checked {
  border-color: var(--md-sys-color-tertiary);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.check-box {
  background: transparent;
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  width: 20px;
  height: 20px;
}
.check-item.checked .check-box {
  background: var(--md-sys-color-tertiary);
  border-color: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}


/* ════════════════════════════════════════════════════════════════════
   M3 INBOX — mails list met side-panel
   ──────────────────────────────────────────────────────────────────── */

.inbox {
  background: var(--md-sys-color-surface);
}
.inbox-sidebar {
  /* M3 Navigation Drawer: tonaal donkerder dan content area, geen border. */
  background: var(--md-sys-color-surface-container-high);
  border-right: none;
}
.inbox-sidebar-header {
  background: var(--md-sys-color-surface-container-high);
  /* Subtiele scheiding tussen header en lijst via een lichtere divider */
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.inbox-sidebar-header h2 {
  font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
  font-weight: 400;
  color: var(--md-sys-color-on-surface);
}

.inbox-item {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  position: relative;
}
.inbox-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.inbox-item:hover {
  background: transparent;
}
.inbox-item:hover::before { opacity: .04; }
.inbox-item.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.inbox-item-unread {
  border-left: 3px solid var(--md-sys-color-primary);
}
.inbox-item-sender {
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface);
}
.inbox-item-time {
  font-size: var(--md-sys-typescale-label-small-size, .6875rem);
  color: var(--md-sys-color-on-surface-variant);
}
.inbox-item-subject {
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface);
}
.inbox-item-preview {
  font-size: var(--md-sys-typescale-body-small-size, .75rem);
  color: var(--md-sys-color-on-surface-variant);
}

.inbox-panel {
  background: var(--md-sys-color-surface);
}
.inbox-panel-empty {
  color: var(--md-sys-color-on-surface-variant);
}

.inbox-search input {
  height: 40px;
  background: var(--md-sys-color-surface-container-highest);
  border: none;
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  box-shadow: none;
  padding-left: 2.5rem;
}
.inbox-search input:focus {
  box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}

.inbox-tabs {
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.inbox-tab {
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  position: relative;
  overflow: hidden;
}
.inbox-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity 150ms;
}
.inbox-tab:hover::before { opacity: .04; }
.inbox-tab.active {
  color: var(--md-sys-color-primary);
  border-bottom-color: var(--md-sys-color-primary);
}


/* ════════════════════════════════════════════════════════════════════
   M3 SETTINGS NAV — tab-style links voor /settings, /rules, /logs
   ──────────────────────────────────────────────────────────────────── */

.settings-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding-bottom: 0;
}
.settings-nav a {
  padding: 10px 16px;
  border-radius: 0;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
  overflow: hidden;
}
.settings-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity 150ms;
}
.settings-nav a:hover {
  background: transparent;
  color: var(--md-sys-color-on-surface);
}
.settings-nav a:hover::before { opacity: .04; }
.settings-nav a.active {
  background: transparent;
  color: var(--md-sys-color-primary);
  border-bottom-color: var(--md-sys-color-primary);
}


/* ════════════════════════════════════════════════════════════════════
   M3 LABEL / FORM-GROUP — voor inline label-input patroon
   ──────────────────────────────────────────────────────────────────── */

label {
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  display: block;
  margin-bottom: 6px;
}

.form-group {
  margin-bottom: 16px;
}
.form-label {
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  display: block;
  margin-bottom: 6px;
}


/* ════════════════════════════════════════════════════════════════════
   M3 REPLY-BOX — voor mail-quote-blocks etc
   ──────────────────────────────────────────────────────────────────── */

.reply-box {
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  padding: 12px 16px;
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface);
  font-family: inherit;
}


/* ════════════════════════════════════════════════════════════════════
   M3 INBOX PANEL CONTENT — mail body styling
   ──────────────────────────────────────────────────────────────────── */

.inbox-panel-content {
  padding: 24px;
  max-width: 860px;
  width: 100%;
}


/* ════════════════════════════════════════════════════════════════════
   M3 TEXT/COLOR UTILITIES — voor bestaande .text-muted, .text-sm
   ──────────────────────────────────────────────────────────────────── */

.text-muted { color: var(--md-sys-color-on-surface-variant); }
.text-sm    { font-size: var(--md-sys-typescale-body-small-size, .75rem); }


/* ════════════════════════════════════════════════════════════════════
   M3 SPACING UTILITIES — voor bestaande .mt-1, .mb-1, .mt-2, .mt-3
   ──────────────────────────────────────────────────────────────────── */

.gap-sm { gap: 8px; }
.flex   { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }


/* ════════════════════════════════════════════════════════════════════
   M3 DIALOG — full screen scrim + centered modal card
   ──────────────────────────────────────────────────────────────────── */

.m3-dialog-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .32);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.m3-dialog {
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 32px);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large, 28px);
  box-shadow: var(--md-sys-elevation-level3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.m3-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 8px;
}

.m3-dialog-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  flex: 1;
  min-width: 0;
}

.m3-dialog-body {
  padding: 16px 24px 8px;
}

.m3-dialog-section-label {
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 6px;
}

.m3-dialog-helper {
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 12px;
}

.m3-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 24px;
}

.m3-dialog-number-input {
  width: 5.5rem;
  height: 40px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  outline: none;
}
.m3-dialog-number-input:focus {
  box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}


/* ════════════════════════════════════════════════════════════════════
   M3 STEPPER — circular step indicator
   ──────────────────────────────────────────────────────────────────── */

.m3-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--md-sys-typescale-label-medium-size, .75rem);
  font-weight: 500;
}
.m3-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  font-size: .75rem;
  font-weight: 600;
}
.m3-step-active {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.m3-step-done {
  background: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}
.m3-step-line {
  width: 24px;
  height: 2px;
  background: var(--md-sys-color-outline-variant);
  border-radius: 1px;
}


/* ════════════════════════════════════════════════════════════════════
   M3 SEGMENTED BUTTON — multi-option toggle
   ──────────────────────────────────────────────────────────────────── */

.m3-segmented {
  display: inline-flex;
  border-radius: var(--md-sys-shape-corner-full, 9999px);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  overflow: hidden;
}
.m3-segment {
  height: 40px;
  padding: 0 20px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  position: relative;
  transition: background 150ms, color 150ms;
}
.m3-segment + .m3-segment {
  box-shadow: -1px 0 0 var(--md-sys-color-outline);
}
.m3-segment-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}


/* ════════════════════════════════════════════════════════════════════
   M3 SLOT/DAY CHIPS — voor planning beschikbare-periodes
   ──────────────────────────────────────────────────────────────────── */

.m3-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.m3-slot-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-small, 8px);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  cursor: pointer;
  border: none;
  text-align: center;
  position: relative;
  transition: background 150ms, box-shadow 150ms;
}
.m3-slot-chip:hover {
  background: var(--md-sys-color-surface-container);
}
.m3-slot-chip-selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: none;
}

.m3-day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--md-sys-shape-corner-small, 8px);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-size: .72rem;
  font-weight: 500;
}


/* ════════════════════════════════════════════════════════════════════
   M3 TABS — Primary tabs (filled pill-shape) + Secondary tabs (underline)
   Gebruik:  <button class="m3-tab is-active">...</button>
   ──────────────────────────────────────────────────────────────────── */

.m3-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  flex-wrap: wrap;
}
.m3-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1rem;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  color: var(--md-sys-color-on-surface);
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  letter-spacing: var(--md-sys-typescale-label-large-tracking, .00625rem);
  transition: background 150ms;
  white-space: nowrap;
  text-decoration: none;
}
.m3-tab:hover    { background: var(--md-sys-color-surface-container); }
.m3-tab.is-active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.m3-tab svg      { flex-shrink: 0; }

/* Secondary tabs — minder prominent, underline-style */
.m3-tabs--secondary { border-bottom: 1px solid var(--md-sys-color-outline-variant); padding-bottom: 0; gap: 0; }
.m3-tabs--secondary .m3-tab {
  border-radius: 0;
  height: 48px;
  padding: 0 16px;
  position: relative;
}
.m3-tabs--secondary .m3-tab:hover { background: var(--md-sys-color-surface-container); }
.m3-tabs--secondary .m3-tab.is-active {
  background: transparent;
  color: var(--md-sys-color-primary);
}
.m3-tabs--secondary .m3-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
}


/* ════════════════════════════════════════════════════════════════════
   M3 CHIPS — Assist / Filter / Input / Suggestion
   Gebruik:  <button class="m3-chip">…</button>  of  <a class="m3-chip">…</a>
   Variants: .m3-chip--filter (selected state), .m3-chip--input (close button),
             .m3-chip--assist (default), .m3-chip--suggestion
   ──────────────────────────────────────────────────────────────────── */

.m3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: none;
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size, .875rem);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background 150ms, box-shadow 150ms;
}
.m3-chip:hover    { background: var(--md-sys-color-surface-container); }
.m3-chip svg      { flex-shrink: 0; width: 18px; height: 18px; }
.m3-chip.is-active,
.m3-chip[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: none;
}
.m3-chip:disabled { opacity: .38; pointer-events: none; }

/* Filter chip — toont vinkje wanneer geselecteerd */
.m3-chip--filter.is-active::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Input chip — toont avatar/icon + close-knop binnen de chip */
.m3-chip--input .m3-chip-close {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
  background: none; border: none;
  cursor: pointer;
  color: currentColor;
  opacity: .7;
}
.m3-chip--input .m3-chip-close:hover { opacity: 1; }


/* ════════════════════════════════════════════════════════════════════
   M3 SWITCH — toggle switch (vervangt checkbox voor on/off settings)
   Gebruik:  <label class="m3-switch">
               <input type="checkbox" />
               <span class="m3-switch-track"></span>
             </label>
   ──────────────────────────────────────────────────────────────────── */

.m3-switch {
  display: inline-block;
  position: relative;
  width: 52px;
  height: 32px;
  cursor: pointer;
  flex-shrink: 0;
}
.m3-switch input {
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}
.m3-switch-track {
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  transition: background 200ms, border-color 200ms;
}
.m3-switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 16px; height: 16px;
  background: var(--md-sys-color-outline);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 200ms cubic-bezier(.4,0,.2,1), width 200ms, height 200ms, background 200ms;
}
.m3-switch input:checked + .m3-switch-track {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.m3-switch input:checked + .m3-switch-track::after {
  left: 26px;
  width: 24px; height: 24px;
  background: var(--md-sys-color-on-primary);
}
.m3-switch input:focus-visible + .m3-switch-track {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════════
   M3 TOOLTIP — Plain tooltip (klein, donker label op hover)
   Gebruik:  <span class="m3-tooltip-wrap">
               <button>...</button>
               <span class="m3-tooltip">Help-tekst</span>
             </span>
   ──────────────────────────────────────────────────────────────────── */

.m3-tooltip-wrap { position: relative; display: inline-flex; }
.m3-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--md-sys-color-inverse-surface, #313033);
  color: var(--md-sys-color-inverse-on-surface, #F4EFF4);
  padding: 6px 10px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-size: var(--md-sys-typescale-body-small-size, .75rem);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms, transform 150ms;
  z-index: 100;
}
.m3-tooltip-wrap:hover .m3-tooltip,
.m3-tooltip-wrap:focus-within .m3-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ════════════════════════════════════════════════════════════════════
   M3 DIVIDER — horizontale / verticale scheidingslijn
   ──────────────────────────────────────────────────────────────────── */

.m3-divider {
  border: none;
  background: var(--md-sys-color-outline-variant);
  margin: 0;
}
.m3-divider--horizontal { height: 1px; width: 100%; }
.m3-divider--vertical   { width: 1px;  height: 100%; }
.m3-divider--inset      { margin-left: 16px; margin-right: 16px; }


/* ════════════════════════════════════════════════════════════════════
   M3 PROGRESS INDICATOR — Linear (determinate / indeterminate)
   Gebruik:  <div class="m3-progress-linear">
               <div class="m3-progress-bar" style="width:42%"></div>
             </div>
   ──────────────────────────────────────────────────────────────────── */

.m3-progress-linear {
  width: 100%;
  height: 4px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  position: relative;
}
.m3-progress-bar {
  height: 100%;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width 240ms cubic-bezier(.4,0,.2,1);
}
.m3-progress-linear--indeterminate .m3-progress-bar {
  width: 40%;
  animation: m3-progress-slide 1.4s ease-in-out infinite;
}
@keyframes m3-progress-slide {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(150%); }
  100% { transform: translateX(150%); }
}


/* ════════════════════════════════════════════════════════════════════
   M3 ICON BUTTON — Standard / Filled / Outlined ronde icon-knoppen
   Gebruik:  <button class="m3-icon-btn">...</button>
   ──────────────────────────────────────────────────────────────────── */

.m3-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  transition: background 150ms;
}
.m3-icon-btn:hover { background: var(--md-sys-color-surface-container); }
.m3-icon-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.m3-icon-btn--filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.m3-icon-btn--filled:hover {
  background: var(--md-sys-color-primary);
  filter: brightness(1.05);
}
.m3-icon-btn--filled-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.m3-icon-btn--outlined {
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
}
.m3-icon-btn--danger        { color: var(--md-sys-color-error); }
.m3-icon-btn--sm            { width: 32px; height: 32px; }


/* ════════════════════════════════════════════════════════════════════
   M3 DIALOG (gestandaardiseerd) — gecentreerde modal met scrim
   Gebruik:
     <div x-show="open" x-cloak class="m3-dialog-scrim" @click.self="open=false">
       <div class="m3-dialog">
         <!-- inhoud -->
       </div>
     </div>
   ──────────────────────────────────────────────────────────────────── */

.m3-dialog-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.m3-dialog {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 1.75rem;
  box-shadow:
    0 16px 32px -8px rgba(0,0,0,.2),
    0 4px 8px -4px rgba(0,0,0,.1);
  box-sizing: border-box;
}

.m3-dialog--sm  { max-width: 360px; }
.m3-dialog--md  { max-width: 480px; }
.m3-dialog--lg  { max-width: 720px; }

.m3-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.m3-dialog-title {
  font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin: 0;
}
.m3-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.5rem;
}

/* Bottom-sheet variant — modal vanaf onderkant op mobile */
.m3-dialog-scrim--bottom { align-items: flex-end; }
.m3-dialog-scrim--bottom .m3-dialog {
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  max-width: 720px;
}

/* ════════════════════════════════════════════════════════════════════════
   M3 Date Picker — modal-stijl (https://m3.material.io/components/date-pickers)
   Gebruik samen met Alpine `calendarPicker` (zie orders/detail.html scripts).
   ════════════════════════════════════════════════════════════════════════ */

/* Trigger-knop in de form */
.m3-date-trigger {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-size: .92rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.m3-date-trigger:hover { background: var(--md-sys-color-surface-container); }
.m3-date-trigger:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -1px;
  border-color: var(--md-sys-color-primary);
}
.m3-date-trigger.is-filled { color: var(--md-sys-color-on-surface); font-weight: 500; }
.m3-date-trigger svg { color: var(--md-sys-color-on-surface-variant); flex-shrink: 0; }

/* Modal-paneel */
.m3-datepicker {
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow:
    0 8px 12px -6px rgba(0,0,0,.12),
    0 24px 38px -8px rgba(0,0,0,.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Headline-blok bovenaan met geselecteerde datum */
.m3-dp-headline {
  padding: 16px 24px 12px;
  background: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.m3-dp-supporting {
  color: var(--md-sys-color-on-surface-variant);
  text-transform: capitalize;
  margin-bottom: 4px;
}
.m3-dp-selected {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  text-transform: capitalize;
}

/* Maand-navigatie */
.m3-dp-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 12px 8px;
}
.m3-dp-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
}
.m3-dp-icon-btn:hover { background: var(--md-sys-color-surface-container-highest); }
.m3-dp-month-label {
  flex: 1;
  text-align: center;
  font-size: .92rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  text-transform: capitalize;
  background: transparent;
  border: 0;
  cursor: default;
  font-family: inherit;
}

/* Weekday-headers */
.m3-dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 12px;
}
.m3-dp-weekday {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 500;
}

/* Dagen-grid */
.m3-dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 12px 8px;
  row-gap: 4px;
}
.m3-dp-day {
  height: 40px;
  width: 40px;
  margin: 0 auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.m3-dp-day:hover {
  background: var(--md-sys-color-surface-container-highest);
}
.m3-dp-day.is-today {
  outline: 1px solid var(--md-sys-color-primary);
  outline-offset: -2px;
  color: var(--md-sys-color-primary);
  font-weight: 500;
}
.m3-dp-day.is-selected {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 500;
  outline: 0;
}
.m3-dp-day.is-selected:hover {
  background: var(--md-sys-color-primary);
  filter: brightness(1.06);
}

/* Footer-acties */
.m3-dp-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* ════════════════════════════════════════════════════════════════════════
   Transacties-modal (orders/detail.html)
   - Wit paneel (surface, niet surface-container-high) voor max contrast met
     beige page-background. Headers/section-labels op surface-container-low.
   - Inputs outlined, met witte fill — duidelijke afgrenzing in de modal.
   ════════════════════════════════════════════════════════════════════════ */

.trx-scrim {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(2px);
}
.trx-modal-wrap {
  display: flex;
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.trx-modal {
  width: 640px; max-width: 100%;
  max-height: 90vh; overflow: auto;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow:
    0 16px 24px -8px rgba(0,0,0,.18),
    0 32px 60px -16px rgba(0,0,0,.24);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.trx-header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem 1rem;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.trx-section { padding: 1.1rem 1.5rem 1.25rem; }
.trx-section--top-border {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
}
.trx-section-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: .65rem;
}

.trx-history {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  background: var(--md-sys-color-surface);
}
.trx-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.trx-table thead tr {
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.trx-table thead th {
  padding: .6rem .75rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.trx-table tbody td {
  padding: .7rem .75rem;
  color: var(--md-sys-color-on-surface);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.trx-table tbody tr:first-child td { border-top: 0; }
.trx-table tbody tr:hover { background: var(--md-sys-color-surface-container-low); }

.trx-label {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: .3rem;
}
.trx-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-family: inherit;
  font-size: .92rem;
  transition: border-color 150ms, box-shadow 150ms;
}
.trx-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: .7; }
.trx-input:hover { border-color: var(--md-sys-color-on-surface); }
.trx-input:focus {
  outline: 0;
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.trx-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* ════════════════════════════════════════════════════════════════════════
   Payments-table op /settings/betalingen — strict M3 tokens
   ════════════════════════════════════════════════════════════════════════ */
.payments-table thead tr {
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.payments-table thead th {
  text-align: left;
  padding: .65rem .9rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.payments-table tbody td {
  padding: .65rem .9rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  vertical-align: middle;
}
.payments-table tbody tr:first-child td { border-top: 0; }
.payments-table tbody tr:hover {
  background: var(--md-sys-color-surface-container-low);
}

/* Badge variant: light op donker-primary (gebruikt in M3 tabs) */
.badge.badge-on-primary {
  background: rgba(255, 255, 255, .22);
  color: var(--md-sys-color-on-primary);
  border: 0;
}

/* ── M3 Snackbar ─────────────────────────────────────────────────────
   Tijdelijke melding onderin beeld. Aanroepen via toonMelding(tekst, type)
   in base.html — vervangt browser-alert()'s.  */
.m3-snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  max-width: min(560px, calc(100vw - 2rem));
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: .8rem 1.1rem;
  font-size: var(--md-sys-typescale-body-medium-size, .875rem);
  line-height: 1.4;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1000;
}
.m3-snackbar.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.m3-snackbar.m3-snackbar--fout {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* ── Foto-grid + lightbox ────────────────────────────────────────────
   Foto's naast elkaar in een responsief grid; klikken vergroot in een
   overlay (geen nieuw tabblad). Openen via openLightbox(urls, index)
   in base.html. */
.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
}
.foto-grid .foto-thumb {
  position: relative;
  cursor: zoom-in;
}
.foto-grid .foto-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: filter .12s ease;
}
.foto-grid .foto-thumb:hover img { filter: brightness(.9); }

.m3-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.m3-lightbox.is-open { opacity: 1; pointer-events: auto; }
.m3-lightbox img {
  max-width: min(94vw, 1400px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.m3-lightbox-btn {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s ease;
}
.m3-lightbox-btn:hover { background: rgba(255,255,255,.28); }
.m3-lightbox-sluit { top: 16px; right: 16px; }
.m3-lightbox-vorige { left: 12px; top: 50%; transform: translateY(-50%); }
.m3-lightbox-volgende { right: 12px; top: 50%; transform: translateY(-50%); }
.m3-lightbox-teller {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.85);
  font-size: .85rem;
  letter-spacing: .03em;
}
@media (max-width: 640px) {
  .foto-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}