/* Alpha WMS — pixel-match styling vs Goedgepickt-admin (raw/dashboard-screenshots/).
   Geladen op /wms/* via _wms_base.html. Apart van style.css zodat KS niet wordt geraakt. */

/* ── App-shell: vaste modusbalk + vaste sidebar ──────────────────────
   De m-header is uit _wms_base.html verwijderd (merkblok zit nu in de sidebar);
   de display:none blijft als vangnet voor een geërfde template die er nog een
   meebrengt — die zou Metronic's `position: fixed` weer meenemen.

   De vendored GG-CSS zet `.m-aside-left` op `position: fixed; top: 55px` — die
   55px was de hoogte van precies die weggehaalde header. Gevolg: een gat onder
   de modusbalk, én een scrollbalk omdat de sidebar 55px onder het scherm uitstak.
   Hier zetten we hem tegen de modusbalk aan met top+bottom, zodat de hoogte
   klopt en de scrollbalk vanzelf verdwijnt.

   De modusbalk wordt meegefixeerd: anders scrolt die weg en houd je alsnog een
   gat boven de sidebar. */
body.wms-mode { padding-top: var(--wms-topbar-h) !important; }
body.wms-mode .m-header { display: none !important; }
body.wms-mode .mode-toggle {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--wms-topbar-h); box-sizing: border-box;
  z-index: 1002;            /* boven de sidebar, die op 1001 staat */
}
body.wms-mode .m-aside-left {
  top: var(--wms-topbar-h) !important;
  bottom: 0 !important;
  height: auto !important;  /* top+bottom bepalen de hoogte, niet een vaste 100vh */
  /* Niet scrollen, op verzoek. Let op: past het menu ooit niet meer op het scherm
     (meer items, of een heel korte viewport), dan zijn de onderste items niet
     bereikbaar in plaats van alleen onzichtbaar. Met 15 items past het ruim; groeit
     het menu, zet dit dan terug op `auto`. */
  overflow-y: hidden;
}
/* Browser-standaardmarges van de menulijst weg, anders liep hij een paar px over. */
body.wms-mode .m-aside-left .m-menu__nav { margin: 0; padding-bottom: 0; }

/* Menu-iconen: Line Awesome i.p.v. Flaticon. Het Flaticon-lettertype ontbreekt in
   static/gg/fonts/ (de vendored CSS verwijst naar fonts/flaticon/, die map bestaat
   niet), dus die klassen renderden niets. Line Awesome is wél gevendored en gebruikt
   GG zelf ook — zie de `la la-close`-knop in dezelfde sidebar. */
body.wms-mode .m-aside-left .m-menu__link-icon {
  width: 1.6rem; font-size: 1.05rem; line-height: inherit;
  text-align: center; flex: 0 0 auto;
}

/* Merkblok bovenaan de sidebar. Stond eerst in een aparte topbalk; die schoof bij
   scrollen over Dashboard heen omdat header en sidebar los van elkaar plakten.
   Als eerste kind van de sticky sidebar beweegt het nu vanzelf goed mee. */
.m-aside-left .wms-sidebar-brand,
.wms-sidebar-brand {
  display: block; color: #fff; font-weight: 700; font-size: 1.1rem;
  padding: 1rem 1.25rem; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.wms-sidebar-brand:hover { color: #fff; text-decoration: none; }

:root {
  /* Hoogte van de vaste modusbalk. Eén bron voor drie plekken: de balk zelf, de
     top-offset van de sidebar en de padding-top van de pagina — die moeten exact
     gelijk zijn, anders krijg je weer een gat of een scrollbalk. De balk krijgt
     deze hoogte opgelegd, dus de natuurlijke tekst­hoogte doet er niet toe. */
  --wms-topbar-h:       36px;

  /* Sidebar (donker-navy, niet pure black) */
  --wms-side-bg:        #191c2e;
  --wms-side-bg-hover:  #232742;
  --wms-side-bg-active: #2a2f4a;
  --wms-side-fg:        #d6d9e6;
  --wms-side-fg-muted:  #8b90a8;
  --wms-side-divider:   #2a2e44;

  /* Accent — oranje (logo, actieve-tab-underline, primary-button) */
  --wms-accent:         #ed8936;
  --wms-accent-dark:    #c2691b;
  --wms-accent-soft:    #fff7ed;

  /* Content */
  --wms-bg:             #f7f8fa;
  --wms-card:           #ffffff;
  --wms-border:         #e5e7eb;
  --wms-border-soft:    #f3f4f6;
  --wms-text:           #1f2937;
  --wms-text-muted:     #6b7280;
  --wms-text-soft:      #9ca3af;
  --wms-link:           #2563eb;

  /* Status */
  --wms-green:          #10b981;
  --wms-yellow:         #f59e0b;
  --wms-blue:           #3b82f6;
  --wms-red:            #ef4444;
  --wms-gray:           #9ca3af;

  /* Effects */
  --wms-shadow-card:    0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .03);
  --wms-shadow-hover:   0 2px 6px rgba(0, 0, 0, .06);
  --wms-radius:         .4rem;
  --wms-radius-sm:      .3rem;
  --wms-radius-pill:    999px;
}

/* ── Mode-toggle (donker-zwart bar boven sidebar + content) ───────── */
.mode-toggle {
  display: flex; align-items: center; gap: .55rem;
  padding: .35rem .85rem;
  background: #0c0e1a; color: #8b90a8;
  font: 500 .8rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.mode-toggle__label { color: #6b7280; }
.mode-toggle__btn {
  padding: .2rem .7rem; border-radius: var(--wms-radius-sm); background: transparent;
  color: #d6d9e6; text-decoration: none; font-weight: 500;
  transition: background .12s, color .12s;
}
.mode-toggle__btn:hover:not(.is-active) { background: #1a1d2e; color: white; }
.mode-toggle__btn.is-active {
  background: var(--wms-accent); color: #1f2937; font-weight: 600;
}
.mode-toggle__spacer { flex: 1; }
.mode-toggle__hint { color: #4b5163; font-size: .76rem; font-style: italic; margin-right: 1rem; }

/* Header-icons (rechtsboven in mode-toggle-bar — GG-replica) */
.mode-toggle__icons { display: flex; align-items: center; gap: .3rem; }
.mode-toggle__icon {
  width: 1.7rem; height: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #cbd5e1; text-decoration: none; font-size: .9rem;
  border-radius: .25rem; position: relative;
  transition: background .12s, color .12s;
}
.mode-toggle__icon:hover { background: #1e293b; color: white; }
.mode-toggle__icon--badge::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wms-red);
}
.mode-toggle__avatar {
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--wms-accent); color: white;
  font-weight: 600; font-size: .72rem;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; margin-left: .35rem;
  border: 2px solid #1e293b;
}

/* Promo-card op dashboard (GG-stijl oranje banner met info) */
.wms-promo {
  background: linear-gradient(135deg, #fb923c 0%, #ed8936 100%);
  color: white; border-radius: var(--wms-radius);
  padding: 1.4rem 1.6rem; margin-bottom: 1.5rem;
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem;
  align-items: center;
  box-shadow: 0 2px 8px rgba(237, 137, 54, .25);
}
.wms-promo__icon { font-size: 2.4rem; line-height: 1; }
.wms-promo__title {
  font-size: 1.15rem; font-weight: 700; margin: 0 0 .35rem 0; line-height: 1.3;
}
.wms-promo__text { font-size: .9rem; line-height: 1.5; opacity: .94; margin: 0; }
.wms-promo__text a { color: white; text-decoration: underline; }

/* Dashboard 2-col grid (KPIs left, promo right) */
.wms-dashboard-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;
  margin-bottom: 1.5rem;
}
.wms-dashboard-grid .wms-kpis {
  margin-bottom: 0;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
  .wms-dashboard-grid { grid-template-columns: 1fr; }
}

/* ── Body + shell-grid ────────────────────────────────────────────── */
body.wms-mode {
  margin: 0; background: var(--wms-bg); color: var(--wms-text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wms-shell {
  display: grid; grid-template-columns: 230px 1fr;
  min-height: calc(100vh - 36px);
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.wms-sidebar {
  background: var(--wms-side-bg); color: var(--wms-side-fg);
  position: sticky; top: 0; align-self: start;
  height: calc(100vh - 36px); overflow-y: auto;
  display: flex; flex-direction: column;
  font-size: 13.5px;
}

/* Logo blok bovenin */
.wms-sidebar__logo {
  padding: 1.05rem 1.15rem; display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid var(--wms-side-divider); text-decoration: none;
  color: white;
}
.wms-sidebar__logo-icon {
  font-size: 1.55rem; color: var(--wms-accent); line-height: 1;
}
.wms-sidebar__logo-text {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
  color: white;
}

/* Menu */
.wms-sidebar__menu { display: flex; flex-direction: column; padding: .4rem 0; flex: 1; }
.wms-sidebar__sep {
  border: 0; border-top: 1px solid var(--wms-side-divider);
  margin: .45rem .9rem;
}
.wms-sidebar__item {
  padding: .58rem 1.15rem; color: var(--wms-side-fg);
  text-decoration: none;
  display: flex; align-items: center; gap: .7rem;
  border-left: 3px solid transparent;
  transition: background .1s, color .1s;
  position: relative;
}
.wms-sidebar__icon {
  width: 1.15rem; text-align: center; font-size: .98rem;
  opacity: .85; line-height: 1;
}
.wms-sidebar__label { flex: 1; font-weight: 400; }
.wms-sidebar__item:hover {
  background: var(--wms-side-bg-hover); color: white;
}
.wms-sidebar__item.is-active {
  background: var(--wms-side-bg-active);
  color: white;
  border-left-color: var(--wms-accent);
  font-weight: 500;
}
.wms-sidebar__item.is-active .wms-sidebar__icon { opacity: 1; color: var(--wms-accent); }

/* Footer */
.wms-sidebar__footer {
  padding: .9rem 1.15rem; border-top: 1px solid var(--wms-side-divider);
  font-size: .76rem; color: var(--wms-side-fg-muted);
  display: flex; flex-direction: column; gap: .25rem;
}
.wms-sidebar__user { color: #cbd5e1; }
.wms-sidebar__logout {
  color: #f87171; text-decoration: none; font-size: .74rem;
}
.wms-sidebar__logout:hover { color: #fca5a5; text-decoration: underline; }

/* ── Content area ─────────────────────────────────────────────────── */
.wms-content {
  padding: 1.5rem 2rem 3rem 2rem; max-width: 100%; min-width: 0;
}

/* Breadcrumb */
.wms-breadcrumb {
  display: flex; gap: .35rem; align-items: center;
  font-size: .82rem; color: var(--wms-text-soft);
  margin-bottom: .5rem;
}
.wms-breadcrumb a { color: var(--wms-link); text-decoration: none; }
.wms-breadcrumb a:hover { text-decoration: underline; }

/* Page title — title links, filter-dropdowns rechts in dezelfde rij */
.wms-page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap;
}
.wms-page-title {
  font-size: 1.55rem; font-weight: 600; margin: 0;
  display: flex; align-items: baseline; gap: .8rem; line-height: 1.2;
}
.wms-page-title__count {
  color: var(--wms-text-muted); font-weight: 400; font-size: .82rem;
}
.wms-page-head__filters {
  display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
}

/* Filter dropdowns (rechtsboven naast titel) — pill-shape met subtle border */
.wms-dropdown {
  background: white; border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius-sm);
  padding: .4rem .65rem; font-size: .85rem; color: var(--wms-text);
  min-width: 150px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%236b7280'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 8px;
  padding-right: 1.8rem;
}
.wms-dropdown:focus { outline: 2px solid var(--wms-accent); outline-offset: -1px; border-color: var(--wms-accent); }

/* Toolbar: search + filter-dropdowns + action-button (boven tabel) */
.wms-toolbar {
  display: flex; gap: .7rem; align-items: center;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.wms-search {
  flex: 1; min-width: 280px; max-width: 600px;
  display: flex; align-items: center; gap: .55rem;
  background: white; border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius-sm);
  padding: .45rem .8rem;
  transition: border-color .1s, box-shadow .1s;
}
.wms-search:focus-within {
  border-color: var(--wms-accent);
  box-shadow: 0 0 0 3px rgba(237, 137, 54, .15);
}
.wms-search__icon { color: var(--wms-text-soft); font-size: .9rem; }
.wms-search input {
  border: 0; outline: 0; flex: 1; font-size: .9rem; background: transparent;
  color: var(--wms-text); font-family: inherit;
}
.wms-search input::placeholder { color: var(--wms-text-soft); }

.wms-toolbar__btn,
.wms-toolbar__btn--primary,
.wms-btn-primary {
  background: var(--wms-accent); color: white; border: 0;
  border-radius: var(--wms-radius-sm); padding: .5rem 1rem;
  font-size: .88rem; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  transition: background .12s;
  font-family: inherit;
}
.wms-toolbar__btn:hover,
.wms-toolbar__btn--primary:hover,
.wms-btn-primary:hover { background: var(--wms-accent-dark); }

.wms-toolbar__btn--secondary {
  background: white; color: var(--wms-text); border: 1px solid var(--wms-border);
}
.wms-toolbar__btn--secondary:hover { background: #f9fafb; color: var(--wms-text); }

/* Globale zoek-bar in mode-toggle-bar — GG topbar-equivalent */
.mode-toggle__search { margin-left: 1rem; flex: 0 1 240px; }
.mode-toggle__search input {
  width: 100%; padding: .35rem .7rem; font-size: .85rem;
  background: #111827; border: 1px solid #374151; color: #e5e7eb;
  border-radius: .25rem; font-family: inherit;
}
.mode-toggle__search input::placeholder { color: #6b7280; }
.mode-toggle__search input:focus { outline: 0; border-color: var(--wms-accent); }

.wms-btn-secondary {
  background: white; color: var(--wms-text); border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius-sm); padding: .5rem 1rem;
  font-size: .88rem; font-weight: 500; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
}
.wms-btn-secondary:hover { background: #f9fafb; border-color: var(--wms-border-soft); }

/* ── Action-bar (top-of-page action-buttons, GG-stijl) ────────────── */
.wms-action-bar {
  display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

/* Disabled-action-button — placeholder voor write-flows in v1.
   Lichter bij hover + tooltip via data-tooltip-attribuut. */
.wms-btn-disabled {
  background: white; border: 1px solid var(--wms-border);
  color: var(--wms-text-muted); cursor: not-allowed;
  padding: .5rem 1rem; border-radius: var(--wms-radius-sm);
  font: 500 .88rem/1 inherit; font-family: inherit;
  display: inline-flex; align-items: center; gap: .4rem;
  position: relative; user-select: none;
  transition: opacity .15s, background .15s, color .15s;
}
.wms-btn-disabled:hover {
  background: #fafbfc; color: var(--wms-text-soft);
  opacity: .8;
}
/* Primary-variant: oranje (zoals "+ Nieuwe X aanmaken" in GG) */
.wms-btn-disabled--primary {
  background: var(--wms-accent); border-color: var(--wms-accent); color: white;
}
.wms-btn-disabled--primary:hover {
  background: var(--wms-accent); color: white;
  opacity: .55;
}
/* Danger-variant (Verwijder/cancel-acties) */
.wms-btn-disabled--danger {
  background: white; border-color: #fca5a5; color: #b91c1c;
}
.wms-btn-disabled--danger:hover {
  background: #fef2f2; color: #ef4444; opacity: .85;
}
/* Icon-only variant voor row-actions */
.wms-btn-disabled--icon {
  padding: .35rem .55rem; font-size: .95rem;
}

/* CSS-only tooltip via data-tooltip — verschijnt op hover */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937; color: white;
  padding: .45rem .7rem; border-radius: var(--wms-radius-sm);
  font: 400 .76rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap; max-width: 320px; white-space: normal; width: max-content;
  pointer-events: none;
  /* display:none i.p.v. visibility:hidden — zie de notitie bij :hover hieronder. */
  display: none;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
  pointer-events: none;
  display: none;
  z-index: 100;
}
/* Tooltips tonen met display, niet met visibility.
   `visibility: hidden` houdt het element in de layout, en een absoluut geplaatste
   tooltip van ~320px breed in de laatste tabelkolom steekt dan rechts buiten de tabel
   uit. `.wms-table-wrap` heeft `overflow-x: auto`, dus dat werd scrollbare witruimte:
   je kon naar rechts scrollen naar een onzichtbare tooltip. Speelde op elke lijst met
   row-actions (Producten, Bestellingen, ...).

   Kosten: de fade-in vervalt, want display is niet te animeren. Een decoratie inruilen
   voor een tabel die niet meer zijwaarts wegloopt lijkt me de goede kant op. */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  display: block;
}

/* Row-action-icons (kolom rechts in tabel, GG-stijl) */
.wms-row-actions {
  display: flex; gap: .2rem; justify-content: flex-end;
}
.wms-row-actions .wms-btn-disabled {
  padding: .3rem .45rem; font-size: .9rem; color: var(--wms-text-soft);
  background: transparent; border: 0;
}
.wms-row-actions .wms-btn-disabled:hover {
  background: #f3f4f6; color: var(--wms-text-muted);
}

/* Bulk-action-footer (onder tabel, GG-stijl: "Maak een keuze | Toepassen") */
.wms-bulk-bar {
  display: flex; gap: .55rem; align-items: center;
  margin-top: .8rem; padding: .6rem 0;
}
.wms-bulk-bar select.wms-dropdown { min-width: 200px; }

/* Checkbox-column header style */
.wms-table__check {
  width: 1.6rem; padding-left: .9rem; padding-right: .25rem;
}
.wms-table input[type="checkbox"] {
  cursor: not-allowed; accent-color: var(--wms-accent); opacity: .6;
}

/* ── Tabs (status-filters) ────────────────────────────────────────── */
.wms-tabs {
  display: flex; gap: 1.4rem; padding: 0; margin: 0 0 1rem 0;
  border-bottom: 1px solid var(--wms-border);
}
.wms-tabs a {
  padding: .65rem 0; color: var(--wms-text-muted); text-decoration: none;
  font-size: .87rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: color .1s;
}
.wms-tabs a:hover { color: var(--wms-text); }
.wms-tabs a.is-active {
  color: var(--wms-text); font-weight: 600;
  border-bottom-color: var(--wms-accent);
}
.wms-tabs__badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wms-red); color: white;
  font-size: .68rem; font-weight: 600;
  padding: .08rem .42rem; border-radius: var(--wms-radius-pill);
  min-width: 1.1rem; line-height: 1.3;
}

/* ── Table ────────────────────────────────────────────────────────── */
.wms-table-wrap {
  background: var(--wms-card);
  border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius);
  overflow-x: auto;
  box-shadow: var(--wms-shadow-card);
}
.wms-table {
  width: 100%; border-collapse: collapse; font-size: .89rem;
}
.wms-table thead th {
  background: #fafbfc; padding: .65rem .9rem; text-align: left;
  font-weight: 600; color: var(--wms-text-muted); font-size: .73rem;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--wms-border);
  white-space: nowrap;
}
.wms-table thead th.wms-th-sort {
  cursor: pointer;
}
.wms-table thead th.wms-th-sort::after {
  content: ' ⇅'; opacity: .35; font-size: .8em;
}
.wms-table tbody td {
  padding: .65rem .9rem; border-bottom: 1px solid var(--wms-border-soft);
  vertical-align: middle;
}
.wms-table tbody tr:last-child td { border-bottom: 0; }
.wms-table tbody tr:hover { background: #fafbfc; }
.wms-table a {
  color: var(--wms-text); text-decoration: none; font-weight: 500;
}
.wms-table a:hover { color: var(--wms-link); text-decoration: underline; }
.wms-table code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em; color: var(--wms-text-muted); }

/* Stack-cell: hoofdregel + subregel(s) eronder (GG product-naam-style) */
.wms-cell-stack { display: flex; flex-direction: column; gap: .15rem; line-height: 1.3; }
.wms-cell-stack__main { font-weight: 500; }
.wms-cell-stack__sub  { font-size: .76rem; color: var(--wms-text-soft); }
.wms-cell-stack__tags { margin-top: .25rem; }
.wms-table__num { text-align: right; font-variant-numeric: tabular-nums; }
/* `.wms-table thead th` zet text-align:left met specificiteit 0,1,2 en wint dus van
   `.wms-table__num` (0,1,0). Zonder deze regel staat de kolomkop links terwijl de
   getallen eronder rechts staan — zichtbaar op elke WMS-tabel met een aantalkolom. */
.wms-table thead th.wms-table__num { text-align: right; }
.wms-table__check { width: 1.3rem; padding-right: .25rem; padding-left: .9rem; }
.wms-table__dot { width: 1.5rem; padding: .65rem 0 .65rem .9rem; }

/* ── Status dot (kleurpunten zoals in GG-tabel) ───────────────────── */
.wms-status-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--wms-blue); vertical-align: middle;
  box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(0, 0, 0, .04);
}
.wms-status-dot--green  { background: var(--wms-green); }
.wms-status-dot--yellow { background: var(--wms-yellow); }
.wms-status-dot--blue   { background: var(--wms-blue); }
.wms-status-dot--red    { background: var(--wms-red); }
.wms-status-dot--gray   { background: var(--wms-gray); }

/* ── Status pill (in detail-page header) ──────────────────────────── */
.wms-pill {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem; border-radius: var(--wms-radius-pill);
  font-size: .73rem; font-weight: 600;
  background: #e5e7eb; color: #1f2937;
  line-height: 1.4;
}
.wms-pill--green  { background: #d1fae5; color: #065f46; }
.wms-pill--yellow { background: #fef3c7; color: #92400e; }
.wms-pill--blue   { background: #dbeafe; color: #1e40af; }
.wms-pill--red    { background: #fee2e2; color: #991b1b; }
.wms-pill--gray   { background: #e5e7eb; color: #374151; }

/* ── Tag chip (carrier-tags inline in tabel-rij) ──────────────────── */
.wms-tag-chip {
  display: inline-block; padding: .18rem .55rem;
  border-radius: var(--wms-radius-sm);
  font-size: .72rem; font-weight: 700;
  background: #1f2937; color: white;
  margin-right: .3rem; line-height: 1.3;
  letter-spacing: .02em;
}
.wms-tag-chip--dpd      { background: #dc2626; }
.wms-tag-chip--postnl   { background: #ed8936; color: white; }
.wms-tag-chip--country  { background: #1f2937; }
.wms-tag-chip--vvb      { background: #3b82f6; }
.wms-tag-chip--bol      { background: #0f52ba; }
.wms-tag-chip--gray     { background: #6b7280; }
.wms-tag-chip--green    { background: #16a34a; }
.wms-tag-chip--blue     { background: #2563eb; }
.wms-tag-chip--yellow   { background: #ca8a04; }
.wms-tag-chip--red      { background: #dc2626; }

/* ── KPI tegels (dashboard + detail-headers) ──────────────────────── */
.wms-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem; margin-bottom: 1.5rem;
}
.wms-kpi {
  background: var(--wms-card); border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius);
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .35rem;
  box-shadow: var(--wms-shadow-card);
}
.wms-kpi__label {
  color: var(--wms-text-muted); font-size: .73rem;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.wms-kpi__value { font-size: 1.65rem; font-weight: 600; line-height: 1.15; }
.wms-kpi__hint  { color: var(--wms-text-soft); font-size: .8rem; }

/* ── Card (detail-page sections) ──────────────────────────────────── */
.wms-card {
  background: var(--wms-card); border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius);
  padding: 1.3rem; margin-bottom: 1.2rem;
  box-shadow: var(--wms-shadow-card);
}
.wms-card__title {
  font-weight: 600; margin: 0 0 1rem 0; font-size: 1rem;
  padding-bottom: .65rem; border-bottom: 1px solid var(--wms-border-soft);
  display: flex; align-items: baseline; gap: .6rem;
}
.wms-card__title-extra {
  color: var(--wms-text-soft); font-weight: 400; font-size: .82rem;
}
.wms-detail-grid {
  display: grid; grid-template-columns: 175px 1fr; gap: .5rem 1rem;
  font-size: .89rem; align-items: baseline;
}
.wms-detail-grid dt { color: var(--wms-text-muted); }
.wms-detail-grid dd { margin: 0; color: var(--wms-text); }

/* Back-link */
.wms-back {
  display: inline-block; margin-bottom: .85rem; color: var(--wms-link);
  text-decoration: none; font-size: .85rem;
}
.wms-back:hover { text-decoration: underline; }

/* ── Pagination ───────────────────────────────────────────────────── */
.wms-pagination {
  display: flex; align-items: center; gap: .35rem; justify-content: flex-end;
  margin-top: 1rem; font-size: .82rem;
  padding: .5rem .65rem;
}
.wms-pagination__info { color: var(--wms-text-muted); margin-right: .75rem; }
.wms-pagination a, .wms-pagination span {
  padding: .3rem .65rem; border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius-sm); background: white;
  color: var(--wms-text); text-decoration: none;
  min-width: 1.8rem; text-align: center;
}
.wms-pagination a:hover { background: #f9fafb; }
.wms-pagination .is-active {
  background: var(--wms-accent); color: white;
  border-color: var(--wms-accent); font-weight: 600;
}
.wms-pagination .is-disabled { color: #d1d5db; background: #fafafa; cursor: not-allowed; }

/* ── Empty state ──────────────────────────────────────────────────── */
.wms-empty {
  padding: 3rem 1.5rem; text-align: center; color: var(--wms-text-muted);
  background: white;
}
.wms-empty__icon { font-size: 2.4rem; opacity: .35; margin-bottom: .5rem; }

/* ── Link-list (placeholder pagina's: Reports / Tools / Settings) ─── */
.wms-link-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem;
}
.wms-link-tile {
  background: white; border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius);
  padding: 1.15rem 1.25rem; text-decoration: none; color: var(--wms-text);
  box-shadow: var(--wms-shadow-card);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.wms-link-tile:hover {
  border-color: var(--wms-accent); background: var(--wms-accent-soft);
  box-shadow: var(--wms-shadow-hover);
}
.wms-link-tile__title {
  font-weight: 600; margin-bottom: .3rem; font-size: .98rem;
}
.wms-link-tile__desc {
  font-size: .84rem; color: var(--wms-text-muted); line-height: 1.45;
}

/* ── Section-header (groep boven tabel) ───────────────────────────── */
.wms-section-h {
  font-size: 1.05rem; font-weight: 600; margin: 1.3rem 0 .65rem 0;
  display: flex; align-items: baseline; gap: .65rem;
}
.wms-section-h__count {
  color: var(--wms-text-muted); font-weight: 400; font-size: .85rem;
}

/* ── Banner (notitie / waarschuwing / uitstel-info) ───────────────── */
.wms-banner {
  border-radius: var(--wms-radius); padding: .85rem 1.1rem;
  margin-bottom: 1rem; border: 1px solid;
  font-size: .9rem;
}
.wms-banner--info    { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.wms-banner--warning { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.wms-banner--danger  { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.wms-banner--success { background: #d1fae5; border-color: #6ee7b7; color: #064e3b; }

/* ── Progress bar (status-stappen op order detail) ────────────────── */
.wms-progress {
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  padding: .9rem 1.2rem;
  background: var(--wms-card); border: 1px solid var(--wms-border);
  border-radius: var(--wms-radius);
  margin-bottom: 1.2rem;
  box-shadow: var(--wms-shadow-card);
  font-size: .85rem;
}
.wms-progress__step {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: var(--wms-radius-sm);
  font-weight: 500;
}
.wms-progress__step--done { background: var(--wms-green); color: white; }
.wms-progress__step--todo { background: #e5e7eb; color: #6b7280; }
.wms-progress__arrow { color: #9ca3af; }

/* ── Address-block (factuur/verzend op order detail) ──────────────── */
.wms-address {
  font-size: .9rem; line-height: 1.55;
}
.wms-address__row { color: var(--wms-text); }
.wms-address__row--muted { color: var(--wms-text-muted); }

/* ── Detail-grid 3-cols variant (factuur/verzend/bestelgegevens) ──── */
.wms-3col {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;
  margin-bottom: 1.2rem;
}
.wms-3col > .wms-card { margin: 0; }
@media (max-width: 1000px) { .wms-3col { grid-template-columns: 1fr; } }

/* ── Code / mono ──────────────────────────────────────────────────── */
.wms-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .85em;
}

/* ── Productfoto's ───────────────────────────────────────────────────
   Vaste afmetingen zodat de rijhoogte niet verspringt terwijl de plaatjes laden
   (de foto's komen van GG's S3 en zijn niet voorgeladen). object-fit: contain omdat
   productfoto's verschillende verhoudingen hebben — croppen zou dozen halveren. */
.wms-product-foto__kop { width: 60px; }
.wms-product-foto {
  width: 44px; height: 44px; object-fit: contain;
  border-radius: var(--wms-radius-sm); background: #fff;
  border: 1px solid rgba(0,0,0,.06); display: block;
}
.wms-product-foto--leeg {
  display: flex; align-items: center; justify-content: center;
  color: var(--wms-text-muted); font-size: .8rem; background: transparent;
}
.wms-product-foto-groot {
  margin: 0 0 1rem;
}
.wms-product-foto-groot img {
  max-width: 180px; max-height: 180px; object-fit: contain;
  border-radius: var(--wms-radius-sm); background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

/* ── Geen horizontale pagina-scroll ──────────────────────────────────
   `.m-wrapper` is een flex-item en flex-items hebben standaard `min-width: auto`: ze
   weigeren smaller te worden dan hun inhoud. Een brede tabel duwde de wrapper daardoor
   breder dan het scherm, en dan scrol je horizontaal langs lege ruimte naast de vaste
   sidebar — er staat rechts niets, maar de ruimte is er wel.

   `min-width: 0` laat ze wél krimpen; de tabel houdt zijn eigen `overflow-x: auto` en
   scrolt binnen zijn kader als hij écht te breed is. Dat is waar die scrollbalk hoort. */
body.wms-mode .m-wrapper,
body.wms-mode .m-content,
body.wms-mode .page-content,
body.wms-mode .m-grid__item--fluid {
  min-width: 0;
  max-width: 100%;
}
body.wms-mode .wms-table-wrap { max-width: 100%; }