/*
 * ════════════════════════════════════════════════════════════════════
 *  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 {
  background: var(--md-sys-color-surface-container-low);
  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 {
  background: var(--md-sys-color-surface-container-low);
  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: background 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 {
  border-color: transparent;
  box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15));
}
.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 {
  background: var(--md-sys-color-surface-container-low);
  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;
}
.badge-green,
.badge-success { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.badge-orange,
.badge-warning { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.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: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.badge-teal    { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.badge-purple  { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.badge-amber   { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.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-tertiary);
  color: var(--md-sys-color-on-tertiary);
}

.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
   ──────────────────────────────────────────────────────────────────── */

.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([class*='m3-']),
input[type="date"],
input[type="time"],
select:not([class*='m3-']),
textarea {
  font-family: inherit;
  font-size: var(--md-sys-typescale-body-large-size, 1rem);
  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);
  padding: 12px 16px;
  outline: none;
  transition: box-shadow 150ms;
  box-sizing: border-box;
}
.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,
select:not([class*='m3-']):hover,
textarea:hover {
  box-shadow: inset 0 0 0 1px 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="date"]:focus,
input[type="time"]:focus,
select:not([class*='m3-']):focus,
textarea:focus {
  box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}


/* ════════════════════════════════════════════════════════════════════
   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;
  overflow: hidden;
  transition: background 150ms;
}
.customer-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.customer-bar:hover::before { opacity: .04; }
.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;
}
.customer-bar-arrow {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1.25rem;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════
   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 {
  background: var(--md-sys-color-surface-container-low);
  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;
}

.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: 8px 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

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

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

.table-wrap tbody tr {
  transition: background 100ms;
}
.table-wrap tbody tr:hover {
  background: rgba(0, 0, 0, .03);
}

.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: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.alert-warning { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.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 {
  background: var(--md-sys-color-surface-container-low);
  border-right: 1px solid var(--md-sys-color-outline-variant);
}
.inbox-sidebar-header {
  background: var(--md-sys-color-surface-container-low);
  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; }