@import url('theme.css');

/* ============================================================
   PMS — Main Stylesheet
   Design: Data-Dense Dashboard · Cyan/Teal · Fira Sans
   ============================================================ */

/* ===== RESET ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

html {
  font-size: 15px;
  scroll-behavior: smooth;
  /* Zet iOS Safari's dubbel-tik-om-in-te-zoomen site-breed uit — de viewport
     meta (user-scalable=no) voorkomt dit niet betrouwbaar op iPhone/iPad.
     `manipulation` behoudt gewoon scrollen/pannen, alleen double-tap-zoom en
     pinch-zoom worden uitgeschakeld. */
  touch-action: manipulation;
}

body {
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

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

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===== REDUCED MOTION ===== */

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

/* ===== SKIP LINK ===== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  background: var(--color-primary);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
}
.skip-link:focus { top: 8px; }

/* ===== APP LAYOUT ===== */

.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

/* --dev-bar-offset wordt door index.php gezet zolang de LOKALE OMGEVING- /
   ONDERHOUDSMODUS-balk bovenaan staat. body{padding-top} raakt een
   position:fixed sidebar niet, dus die moet zélf omlaag + korter. */
.sidebar {
  position: fixed;
  left: 0;
  top: var(--dev-bar-offset, 0px);
  height: calc(100vh - var(--dev-bar-offset, 0px));
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.13);
  /* No overflow:hidden here — lets the toggle button stick out */
}

/* Clip only the nav scroll area, not the entire sidebar */
.sidebar-logo,
.sidebar-footer {
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* --- Logo --- */

/* Vaste hoogte gelijk aan .app-header, zodat de scheidingslijn van de sidebar
   precies uitlijnt met die van de header (zelfde patroon als KMS
   .admin-sidebar-brand). Hoogte NIET door de inhoud laten bepalen. */
.sidebar-logo {
  padding: 0 16px;
  height: var(--header-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-logo {
  padding: 0;
  justify-content: center;
}

.sidebar-logo-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--color-primary);
}

[data-theme="dark-v2"] .sidebar-logo img:not(.logo-theme-light):not(.logo-theme-dark),
[data-theme="dark-v2"] .overzicht-logo {
  filter: brightness(0) invert(1);
}

.sidebar-logo img {
  height: 24px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.2s;
}

.sidebar.collapsed .sidebar-logo img {
  opacity: 0;
}

/* Aparte donker-thema-logovariant (Instellingen → Algemeen → Logo's) —
   alleen relevant als er ECHT een donker-logo geüpload is; anders wordt het
   lichte logo getoond met de filter hierboven. */
.sidebar-logo img.logo-theme-dark {
  display: none;
}

[data-theme="dark-v2"] .sidebar-logo img.logo-theme-light {
  display: none;
}

[data-theme="dark-v2"] .sidebar-logo img.logo-theme-dark {
  display: block;
}

.sidebar-logo-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity 0.2s;
}

.sidebar.collapsed .sidebar-logo-text {
  opacity: 0;
  width: 0;
}

/* --- Nav --- */

.sidebar-nav {
  flex: 1;
  /* min-height:0 nodig zodat een flex-item kleiner mag worden dan zijn inhoud;
     anders krimpt de nav niet en treedt overflow-y:auto niet in werking als een
     dropdown openstaat (geen scroll mogelijk op mobiel) */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* iOS: momentum-scroll + voorkom dat de scroll naar de body "doorlekt"
     (zonder deze props weigert een genest scrollvlak in een position:fixed
     sidebar soms te scrollen op iPhone Safari) */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 0;
  /* Flexkolom zodat .nav-beheer-wrap met margin-top:auto onderaan het paneel
     landt als het menu KORTER is dan de sidebar hoog. Sticky alleen is daar niet
     genoeg: een sticky element blijft staan waar het staat zolang er niets te
     scrollen valt. Past het menu níét, dan neemt de sticky-positionering van die
     wrap het over. */
  display: flex;
  flex-direction: column;
}
/* Items houden hun eigen hoogte: zonder dit worden ze bij een vol menu door
   flex-shrink platgedrukt in plaats van dat de nav gaat scrollen. */
.sidebar-nav > * { flex-shrink: 0; }

.nav-section-title,
.nav-section-label {
  padding: 14px 18px 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(91, 143, 168, 0.5);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s;
}

.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-section-label {
  opacity: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  color: var(--text-sidebar);
  text-decoration: none;
  border-radius: var(--radius-md);
  margin: 1px 8px;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
}

/* Buttons used as nav items must explicitly fill the width */
button.nav-item {
  width: calc(100% - 16px);
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
}

.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--color-primary);
  text-decoration: none;
}

.nav-item.active {
  background: var(--bg-sidebar-active);
  color: #fff;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  min-width: 18px;
}

.nav-item-text,
.nav-label {
  margin-left: 11px;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 1;
  transition: opacity 0.2s;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .nav-item-text,
.sidebar.collapsed .nav-label {
  opacity: 0;
  width: 0;
}

/* De oude snel-zoeken-knop in de sidebar (.nav-search-btn) en het overlay-venster
   (.sz-overlay / .sz-panel / .sz-bar / .sz-num / .sz-refs / .sz-status-badge …)
   zijn vervallen: het zoekveld staat nu ín de app-header en het resultatenpaneel
   klapt eronder uit. De nieuwe .sz-*-regels staan verderop, bij "HEADER,
   GEBRUIKERSMENU EN SNEL ZOEKEN". Zet dit blok niet terug — dan staan er twee
   sets .sz-*-regels die elkaar overschrijven. */

/* --- Feedback knop --- */

button.nav-item.nav-feedback-btn {
  margin-bottom: 0;
  color: #ef4444;
  border: 1.5px dashed #ef4444;
  background: transparent;
}

button.nav-item.nav-feedback-btn:hover {
  color: #ef4444;
  background: rgba(239,68,68,.1);
}

/* --- Feedback type toggle knoppen --- */

.feedback-type-btn {
  display: inline-flex;
  align-items: center;
}

.btn.feedback-type-bug {
  color: var(--color-danger, #e03131);
  border-color: var(--color-danger, #e03131);
}

.btn.feedback-type-bug.active,
.btn.feedback-type-bug:hover {
  background: var(--color-danger, #e03131);
  border-color: var(--color-danger, #e03131);
  color: #fff;
}

.btn.feedback-type-btn:not(.feedback-type-bug).active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* --- Dropdown --- */

.nav-dropdown-arrow,
.nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.22s ease;
  opacity: 0.6;
}

.nav-dropdown-trigger.open .nav-dropdown-arrow,
.nav-dropdown-trigger.open .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease;
}

.nav-dropdown-content.open {
  max-height: 600px;
}

.sidebar.collapsed .nav-dropdown-content {
  display: none;
}

.nav-dropdown-content .nav-item {
  padding-left: 41px;
  font-size: 13px;
  color: rgba(123, 170, 187, 0.75);
}

.nav-dropdown-content .nav-item:hover {
  color: #fff;
}

/* Sub-item alias */
.nav-sub-item {
  display: flex;
  align-items: center;
  padding: 6px 14px 6px 41px;
  color: var(--text-sidebar);
  text-decoration: none;
  border-radius: var(--radius-md);
  margin: 1px 8px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}

.nav-sub-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--color-primary);
  text-decoration: none;
}

.nav-sub-item.active {
  background: var(--bg-sidebar-active);
  color: #fff;
}

/* --- Toggle button --- */

.sidebar-toggle {
  position: absolute;
  right: -14px;
  top: 121px;
  background: var(--color-primary);
  border: 2px solid var(--bg-page);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  color: white;
  z-index: 51;
  transition: background 0.18s ease;
}

.sidebar-toggle:hover {
  background: var(--color-primary-hover);
}

.sidebar-toggle svg {
  width: 14px;
  height: 14px;
}

/* --- Sidebar footer (user info) --- */

.sidebar-footer {
  padding: 0;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.sidebar-footer-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-user {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: default;
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: opacity 0.2s, width 0.2s;
}

.sidebar.collapsed .sidebar-user-info {
  opacity: 0;
  width: 0;
}

.sidebar-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sidebar-user-role {
  font-size: 10.5px;
  color: rgba(91, 143, 168, 0.7);
  text-transform: capitalize;
  margin-top: 1px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
  margin-left: var(--sidebar-width);
  transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.main-content.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

/* ============================================================
   APP HEADER
   ============================================================ */

.app-header {
  position: sticky;
  top: var(--dev-bar-offset, 0px);
  z-index: 40;
  height: var(--header-height);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
}

/* Hamburger-knop (alleen mobiel zichtbaar) */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.mobile-menu-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.mobile-menu-btn svg {
  width: 22px;
  height: 22px;
}

.header-username {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.header-datum {
  font-size: 13px;
  line-height: 1.35;
  color: #999;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Logout knop (icon-only naast sidebar-user) */
.sidebar-logout-btn {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  margin-right: 4px;
}
.sidebar-logout-btn:hover { background: rgba(239,68,68,0.1); color: #EF4444; }
.sidebar-logout-btn svg { width: 17px; height: 17px; }

/* ============================================================
   PAGE CONTENT
   ============================================================ */

.page-content {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-header-left { min-width: 0; }

.page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Page title in page-content (larger) */
.page-content .page-title,
.page-header .page-title {
  font-size: 22px;
}

.page-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}

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

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 15px 15px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
}

.card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* --- Stat Cards --- */

.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  cursor: default;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card-body { min-width: 0; }

.stat-card-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-heading);
  font-family: 'Fira Code', 'Fira Sans', monospace;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-card-label {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 5px;
  font-weight: 500;
}

.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-icon svg {
  width: 22px;
  height: 22px;
}

/* --- Dashboard stat grid (actual HTML class names) --- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.stat-content { flex: 1; min-width: 0; }

.stat-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.stat-value-danger { color: var(--color-red); }

.stat-eye-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 2px 4px;
  line-height: 0;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.stat-eye-btn:hover {
  color: var(--text-heading);
  background: var(--bg-subtle);
}

.stat-footnote {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
}
.stat-footnote strong { color: var(--text-primary); }
.stat-footnote .stat-footnote-dim { opacity: 0.6; }

/* Split-row binnen stat cards (bijv. regulier/spoed, afgehandeld/openstaand) */
.dash-split-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 6px;
}
.dash-split-item {
  flex: 1;
}
.dash-split-divider {
  width: 1px;
  background: var(--border-color);
  align-self: stretch;
  margin: 2px 16px;
}
.dash-split-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-heading);
  font-family: 'Fira Code', monospace;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 5px;
  font-weight: 500;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 22px;
  height: 22px;
}

.stat-icon-blue   { background: #DBEAFE; color: #1D4ED8; }
.stat-icon-red    { background: #FEE2E2; color: #DC2626; }
.stat-icon-green  { background: #D1FAE5; color: #059669; }
.stat-icon-purple { background: #EDE9FE; color: #7C3AED; }
.stat-icon-cyan   { background: #CFFAFE; color: #0891B2; }
.stat-icon-orange { background: #FFEDD5; color: #EA580C; }

[data-theme="dark-v2"] .stat-icon-blue   { background: #1E3A5F; color: #93C5FD; }
[data-theme="dark-v2"] .stat-icon-red    { background: #450A0A; color: #FCA5A5; }
[data-theme="dark-v2"] .stat-icon-green  { background: #064E3B; color: #6EE7B7; }
[data-theme="dark-v2"] .stat-icon-purple { background: #2E1065; color: #C4B5FD; }
[data-theme="dark-v2"] .stat-icon-cyan   { background: #083344; color: #67E8F9; }
[data-theme="dark-v2"] .stat-icon-orange { background: #431407; color: #FDBA74; }

/* Dashboard-variant: kop · waarde · voetregel. De voet duwt zich met margin-top:auto
   naar onderen, zodat de waarden in alle vier de kaarten op één lijn staan. */
.dash-stats { gap: 14px; margin-bottom: 14px; }
.dash-stat {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px 18px 14px;
}
.dash-stat-head { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.dash-stat .stat-icon { width: 32px; height: 32px; }
.dash-stat .stat-icon svg { width: 17px; height: 17px; }
.dash-stat-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.dash-stat .stat-value { font-size: 30px; font-variant-numeric: tabular-nums; }
.dash-stat .dash-split-row { margin-top: 0; }
.dash-stat .dash-split-divider { margin: 2px 18px; }
.dash-stat .dash-split-label { margin-top: 6px; font-size: 10.5px; letter-spacing: 0.05em; }
.dash-stat-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-secondary);
}
.dash-stat-foot strong { color: var(--text-primary); font-weight: 600; }
.dash-stat-foot-bar { display: flex; align-items: center; gap: 10px; }
.dash-stat-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.dash-stat-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7C3AED;
}
[data-theme="dark-v2"] .dash-stat-bar > span { background: #C4B5FD; }

/* --- Section header (dashboard + views) --- */

.section-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  font-family: 'Fira Sans', inherit;
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.01em;
}

.btn:hover { background: var(--bg-card-hover); text-decoration: none; }

.btn:active { transform: translateY(1px); }

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Sizes */
.btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

.btn-sm svg {
  width: 13px;
  height: 13px;
}

.btn-lg {
  padding: 12px 28px;
  font-size: 15px;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* Variants */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-input);
}

.btn-secondary.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}

/* Gevulde neutrale knop — zelfde gewicht als btn-secondary, maar met een
   eigen vlak i.p.v. transparant. Voor secundaire acties die wel een knop
   moeten lijken (PDF openen), zonder de signaalkleur van primary/danger. */
.btn-grijs {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-grijs:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-input);
}

.btn-success {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
  background: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: #fff;
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: #fff;
}

.btn-warning {
  background: #F59E0B;
  color: #fff;
  border-color: #F59E0B;
}

.btn-warning:hover {
  background: #D97706;
  border-color: #D97706;
  color: #fff;
}

.btn-warning-outline {
  background: transparent;
  color: #D97706;
  border-color: #F59E0B;
}

.btn-warning-outline:hover {
  background: #F59E0B;
  border-color: #F59E0B;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* ============================================================
   FORMS
   ============================================================ */

.form-group {
  margin-bottom: 18px;
}

/* 2-kolom rij in forms */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {
  .form-row,
  .form-row-3 { grid-template-columns: 1fr; }
}

/* Sectie subtitel in form */
.form-section-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.form-section-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 4px 0 18px;
}

/* Kleur inputs grid (max 10 velden) */
.kleuren-inputs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.kleuren-stepper-wrap {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  overflow: hidden;
}
.kleuren-stepper-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; padding: 0; border: none; border-radius: 0;
  background: var(--bg-secondary); color: var(--text-primary);
  cursor: pointer; font-size: 16px; line-height: 1;
  transition: background .12s;
  user-select: none; flex-shrink: 0; align-self: stretch;
}
.kleuren-stepper-btn:hover { background: var(--bg-hover); }
.kleuren-stepper-btn:active { background: var(--color-primary); color: #fff; }
.kleuren-stepper-btn + .kleuren-stepper-input { border-left: 1px solid var(--border-input); }
.kleuren-stepper-input + .kleuren-stepper-btn  { border-left: 1px solid var(--border-input); }
.kleuren-stepper-input {
  width: 56px; text-align: center; border: none; border-radius: 0;
  background: var(--bg-input); color: var(--text-primary);
  font-size: .875rem; padding: 9px 4px;
  -moz-appearance: textfield;
}
.kleuren-stepper-input:focus { outline: none; box-shadow: none; }
.kleuren-stepper-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.kleuren-stepper-input::-webkit-outer-spin-button,
.kleuren-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 640px) {
  .kleuren-inputs-grid { grid-template-columns: repeat(3, 1fr); }
}

.kleur-input-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

/* File upload preview */
.file-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.file-preview img {
  height: 44px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.file-preview-name {
  font-size: 12.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Radio button groep (pill stijl) */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 36px;
  align-items: center;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 5px 13px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  user-select: none;
}

.radio-option input[type="radio"] {
  display: none;
}

.radio-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.radio-option:hover:not(:has(input:checked)) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

[data-theme="dark-v2"] .radio-option:has(input:checked) {
  background: rgba(24, 153, 255, 0.18);
}

.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.form-label .required {
  color: var(--color-danger);
  margin-left: 2px;
}

/* Base input styles — shared by .form-control, .form-input and .form-select */
.form-control,
.form-input,
.form-select {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.form-control::placeholder,
.form-input::placeholder,
.form-select::placeholder {
  color: var(--text-muted);
}

.form-control.is-invalid,
.form-input.input-error,
.form-select.is-invalid {
  border-color: var(--color-danger);
}

.btn.is-invalid {
  border-color: var(--color-danger) !important;
  outline: 2px solid rgba(239, 68, 68, 0.25);
}

.form-control.is-invalid:focus,
.form-input.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-control[readonly],
.form-input[readonly] {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: default;
  border-style: dashed;
}
.form-control[readonly]:focus,
.form-input[readonly]:focus {
  border-color: var(--border-color);
  box-shadow: none;
}

/* ── PDF Upload Card ────────────────────────────────────────── */
.pdf-upload-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  margin-bottom: 8px;
}
.pdf-upload-icon {
  width: 40px;
  height: 50px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .5px;
  font-family: 'Fira Code', monospace;
}
.pdf-upload-body { flex: 1; min-width: 0; }
.pdf-upload-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.pdf-upload-filename {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pdf-upload-badge-done,
.pdf-upload-badge-error {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.pdf-upload-badge-done.visible  { display: flex; color: #16a34a; }
.pdf-upload-badge-error.visible { display: flex; color: #dc2626; }
.pdf-upload-bar-wrap {
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 5px;
}
.pdf-upload-bar {
  height: 100%;
  border-radius: 2px;
  transition: width .15s linear;
  width: 0%;
}
.pdf-upload-bar.done  { background: #16a34a !important; width: 100% !important; transition: width .3s ease; }
.pdf-upload-bar.error { background: #dc2626 !important; width: 100% !important; transition: none; }
.pdf-upload-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
}
.pdf-upload-pct { font-weight: 500; }
.pdf-upload-pct.done { color: #16a34a !important; }
.pdf-upload-actions { display: none; gap: 8px; margin-top: 9px; }
.pdf-upload-actions.visible { display: flex; }
.pdf-upload-btn {
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: none;
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
}
.pdf-upload-btn:hover { background: var(--bg-secondary); }
.pdf-upload-btn.danger { color: #ef4444; border-color: #fca5a5; }
.pdf-upload-btn.danger:hover { background: #fef2f2; }

.form-error,
.field-error {
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 5px;
  display: none;
}

.form-error.visible,
.field-error.visible {
  display: block;
}

/* Select */
select.form-control,
select.form-input,
select.form-select,
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -webkit-text-fill-color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238AAABB'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 38px;
}

select.form-input option,
select.form-select option {
  background: var(--bg-input);
  color: var(--text-primary);
}

/* Date/file input dark mode */
[data-theme="dark-v2"] input[type="file"],
[data-theme="dark-v2"] input[type="date"],
[data-theme="dark-v2"] input[type="datetime-local"],
[data-theme="dark-v2"] input[type="time"],
[data-theme="dark-v2"] input[type="week"],
[data-theme="dark-v2"] input[type="month"] {
  color-scheme: dark;
}

/* Textarea */
textarea.form-control,
textarea.form-input {
  resize: vertical;
  min-height: 96px;
}

/* Checkbox & radio */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.form-check-input {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

[data-theme="dark-v2"] input[type="checkbox"],
[data-theme="dark-v2"] input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-input);
  border: 2px solid var(--border-input);
  position: relative;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

[data-theme="dark-v2"] input[type="radio"] {
  border-radius: 50%;
}

[data-theme="dark-v2"] input[type="checkbox"] {
  border-radius: 3px;
}

[data-theme="dark-v2"] input[type="checkbox"].form-check-input,
[data-theme="dark-v2"] input[type="radio"].form-check-input {
  width: 17px;
  height: 17px;
}

[data-theme="dark-v2"] input[type="checkbox"]:checked,
[data-theme="dark-v2"] input[type="radio"]:checked {
  background: #1899FF;
  border-color: #1899FF;
}

[data-theme="dark-v2"] input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

[data-theme="dark-v2"] input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.form-check-label {
  font-size: 14px;
  cursor: pointer;
  color: var(--text-primary);
}

/* Input wrapper (password toggle etc) */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper .form-control,
.input-wrapper .form-input {
  padding-right: 44px;
}

.input-toggle-password {
  position: absolute;
  right: 11px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  border-radius: var(--radius-sm);
}

.input-toggle-password:hover {
  color: var(--text-primary);
}

.input-toggle-password svg {
  width: 16px;
  height: 16px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.table-wrapper {
  overflow-x: auto;
}

/* Filter bar above table */
.table-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.table-filters .form-control,
.table-filters .form-input {
  font-size: 13.5px;
}

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

thead th {
  background: var(--bg-table-header);
  padding: 10px 16px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  text-align: left;
}

tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13.5px;
  color: var(--text-primary);
  vertical-align: middle;
}

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

tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}

tbody tr:hover td {
  background: var(--bg-table-row-hover);
}

/* Order number in table (monospace) */
.order-nr {
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-blue    { background: #DBEAFE; color: #1D4ED8; }
.badge-green   { background: #D1FAE5; color: #065F46; }
.badge-yellow  { background: #FEF3C7; color: #92400E; }
.badge-red     { background: #FEE2E2; color: #991B1B; }
.badge-gray    { background: #F1F5F9; color: #475569; }
.badge-purple  { background: #EDE9FE; color: #5B21B6; }
.badge-orange  { background: #FFEDD5; color: #9A3412; }
.badge-cyan    { background: #CFFAFE; color: #155E75; }

[data-theme="dark-v2"] .badge-blue   { background: #1E3A5F; color: #93C5FD; }
[data-theme="dark-v2"] .badge-green  { background: #064E3B; color: #6EE7B7; }
[data-theme="dark-v2"] .badge-yellow { background: #451A03; color: #FCD34D; }
[data-theme="dark-v2"] .badge-red    { background: #450A0A; color: #FCA5A5; }
[data-theme="dark-v2"] .badge-gray   { background: #1E293B; color: #94A3B8; }
[data-theme="dark-v2"] .badge-purple { background: #2E1065; color: #C4B5FD; }
[data-theme="dark-v2"] .badge-orange { background: #431407; color: #FDBA74; }

/* ── Rij-actiemenu ("⋮") — combineert bewerken + secundaire acties per rij ── */
.row-menu-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.row-menu-btn:hover,
.row-menu-btn.open {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.row-menu-wrap {
    position: relative;
    display: inline-block;
}
.row-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 4px;
    z-index: 20;
}
.row-menu-dropdown.open {
    display: block;
}
.row-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.row-menu-item:hover {
    background: var(--bg-card-hover);
}
.row-menu-item svg {
    flex-shrink: 0;
    opacity: .7;
}
.row-menu-item-danger {
    color: var(--color-danger, #dc2626);
}
.row-menu-item-danger:hover {
    background: rgba(220, 38, 38, .1);
}
[data-theme="dark-v2"] .badge-cyan   { background: #083344; color: #67E8F9; }

/* Spoed badge */
.badge-spoed {
  background: #FEE2E2;
  color: #991B1B;
}

.badge-spoed::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

[data-theme="dark-v2"] .badge-spoed { background: #450A0A; color: #FCA5A5; }

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

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg-modal);
  border-radius: var(--radius-xl);
  padding: 26px;
  max-width: 580px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--border-color);
  transform: translateY(16px) scale(0.99);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.open .modal {
  transform: translateY(0) scale(1);
}

.modal-lg   { max-width: 760px; }
.modal-890  { max-width: 890px; }
.modal-xl   { max-width: 960px; }
.modal-xxl  { max-width: 1280px; }
.modal-xxxl { max-width: 1440px; }

/* Stacking van een bevestigingsmodal boven een reeds open modal (bijv. Order verwijderen boven Order bewerken) */
.modal-overlay-top { z-index: 200; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 12px;
}

.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.3;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  width: 34px;
  height: 34px;
  font-size: 24px;
  line-height: 1;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

/* Voetknoppen in OMS-maat: compacter dan de algemene .btn en zonder schaduw. */
.modal-footer .btn { padding: 5px 12px; line-height: 1; }
.modal-footer .btn-primary, .modal-footer .btn-primary:hover { box-shadow: none; }

/* ============================================================
   FORMULIERMODALS (.modal-form + .kn-*)
   ------------------------------------------------------------
   Eén vorm voor elke modal waarin je een formulier invult: vaste kop met
   icoonvlak en ondertitel, een body die als enige scrollt, en secties met een
   streep + kleine hoofdletterkop. Overgenomen uit OMS (?page=order-detail).
   Gebruikt door o.a. "Order bewerken" (?page=order-wijzigen) en "Order
   afmelden" (?page=orders-afmelden).
   ============================================================ */

/* De .modal zelf scrollt niet meer: kop en voet staan vast, de body scrollt.
   Anders schuift de titel weg zodra het formulier langer is dan het scherm. */
.modal.modal-form {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.modal-form .modal-header {
  margin: 0;
  padding: 18px 22px 14px;
  gap: 14px;
  flex: 0 0 auto;
}
.modal-form .modal-body {
  padding: 0 22px 6px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.modal-form .modal-footer {
  margin: 0;
  padding: 14px 22px;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--border-color);
  flex: 0 0 auto;
}

/* Kop: icoonvlak + titel + regel met wat je bewerkt.
   De min-width:0 moet op ÉLKE schakel tot aan .kn-modal-sub staan: een flex-item
   krimpt standaard niet onder zijn inhoud, en dan loopt een lange ondertitel de
   modal uit in plaats van af te kappen. */
.kn-modal-head { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.kn-modal-head > div { min-width: 0; }
.kn-modal-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: rgba(24, 153, 255, .12);
  color: var(--color-primary);
}
/* Waarschuwing/bevestiging (zelfde als OMS .kn-modal-icon-waarschuwing). */
.kn-modal-icon-waarschuwing { background: rgba(220, 38, 38, .12); color: var(--color-danger); }
.kn-modal-head h3 {
  margin: 0;
  font-size: 17px; font-weight: 700; line-height: 1.25;
  color: var(--text-heading);
}
.kn-modal-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-form .modal-close { align-self: flex-start; margin-top: -2px; }

/* Sectie in de body: streep + kop. De streep bovenaan de eerste sectie is
   meteen de scheiding onder de modalkop, dus die kop draagt zelf geen lijn. */
.kn-section { padding-top: 18px; border-top: 1px solid var(--border-color); }
.kn-section-title {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-secondary);
}
.kn-section-title svg { opacity: .65; flex-shrink: 0; }
.kn-section > .form-group:last-child { margin-bottom: 18px; }
.kn-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

/* Twee kolommen secties naast elkaar. De verticale lijn is een border op de
   tweede kolom, zodat hij precies zo hoog wordt als de inhoud. */
.kn-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px;
  padding-top: 18px; border-top: 1px solid var(--border-color);
}
/* In kolommen draagt de wrapper de bovenste lijn, zodat hij over de volle
   breedte doorloopt i.p.v. per kolom opnieuw te beginnen. */
.kn-cols > div > .kn-section:first-child { border-top: none; padding-top: 0; }
.kn-cols > div + div { padding-left: 28px; border-left: 1px solid var(--border-color); }
@media (max-width: 900px) {
  .kn-cols { grid-template-columns: 1fr; }
  .kn-cols > div + div { padding-left: 0; border-left: none; }
  .kn-cols > div + div > .kn-section:first-child {
    padding-top: 18px; border-top: 1px solid var(--border-color);
  }
}

/* Veld met icoon ervoor (referentie, adres, ...) */
.kn-field { position: relative; }
.kn-field > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
  color: var(--text-muted); opacity: .7; pointer-events: none;
}
.kn-field .form-control,
.kn-field .form-input { padding-left: 35px; }

/* ── Segmented control (.kn-seg) ──
   Keuze uit 2+ opties als aaneengesloten tegels: beide opties blijven
   zichtbaar, dat scheelt een klik en leest sneller dan een select. De
   bijbehorende JS zet .is-active. */
.kn-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.kn-seg-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  border-radius: 0;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.kn-seg-btn + .kn-seg-btn { border-left-width: 0; }
.kn-seg-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.kn-seg-btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.kn-seg-btn:only-child  { border-radius: var(--radius-md); }
/* Een actieve/gehoverde tegel tekent zijn eigen linkerrand weer, anders valt de
   gekleurde rand aan die kant weg tegen de buurtegel. */
.kn-seg-btn.is-active + .kn-seg-btn,
.kn-seg-btn:hover + .kn-seg-btn { border-left-width: 0; }
.kn-seg-btn.is-active, .kn-seg-btn:hover { position: relative; z-index: 1; }
.kn-seg-btn svg { flex-shrink: 0; opacity: .75; }
.kn-seg-btn:hover { border-color: var(--color-primary); color: var(--text-primary); }
.kn-seg-btn.is-active {
  border-color: var(--color-primary);
  background: rgba(24, 153, 255, .10);
  color: var(--color-primary);
}
.kn-seg-btn.is-active svg { opacity: 1; }
.kn-seg-btn:focus-visible {
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(24, 153, 255, .12);
}

/* Keuze uit 2+ opties die als radio's in de payload moeten blijven: dezelfde
   tegelvorm als .kn-seg, maar gedragen door <label> + <input type=radio>. */
.kn-radioseg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.kn-radioseg > label {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.kn-radioseg > label + label { border-left-width: 0; }
.kn-radioseg > label:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.kn-radioseg > label:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.kn-radioseg input { display: none; }
.kn-radioseg > label:hover { border-color: var(--color-primary); color: var(--text-primary); }
.kn-radioseg > label:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(24, 153, 255, .10);
  color: var(--color-primary);
  position: relative; z-index: 1;
}
.kn-radioseg > label:has(input:checked) + label,
.kn-radioseg > label:hover + label { border-left-width: 0; }
/* Verplichte keuze die nog leeg is (JS zet .is-fout) */
.kn-radioseg.is-fout > label { border-color: var(--color-danger); }

/* ============================================================
   WIZARD
   ============================================================ */

.wizard-container {
  width: 80%;
  margin: 0 auto;
  transition: width 0.25s ease;
}

.wizard-container.stap2-active {
  width: 100%;
}

.wizard-progress {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  padding: 20px 24px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.wizard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 55%;
  right: -45%;
  height: 2px;
  background: var(--border-color);
  z-index: 0;
  transition: background 0.3s ease;
}

.wizard-step.completed::after {
  background: var(--color-secondary);
}

.wizard-step.active::after {
  background: var(--color-primary);
}

.wizard-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Fira Code', monospace;
  z-index: 1;
  border: 2px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: all 0.25s ease;
}

.wizard-step.completed .wizard-step-circle {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: white;
}

.wizard-step.active .wizard-step-circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.15);
}

.wizard-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 7px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.wizard-step.active .wizard-step-label,
.wizard-step.completed .wizard-step-label {
  color: var(--text-primary);
}

.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 10px;
}

/* Mobiel: knoppenrij (bv. Terug / Design overzicht / Design opslaan) is te
   breed voor de card — stapel de knoppen vol-breed i.p.v. laten overlopen.
   `column-reverse` i.p.v. `column`: de primaire actie (Opslaan/Verder) staat
   in de markup altijd als laatste kind — reverse zet hem bovenaan, zodat hij
   het eerste/makkelijkst bereikbare item is i.p.v. onderaan weggestopt. */
@media (max-width: 640px) {
  .wizard-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .wizard-nav > .btn,
  .wizard-nav > .flex {
    width: 100%;
  }
  .wizard-nav > .flex {
    flex-direction: column-reverse;
  }
  .wizard-nav > .flex > .btn {
    width: 100%;
  }
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */

.theme-toggle {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  position: relative;
}

.theme-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* Fixed theme toggle (login page) */
.theme-toggle-fixed {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, color 0.15s ease;
}

.theme-toggle-fixed:hover {
  color: var(--color-primary);
}

.theme-toggle-fixed svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
  padding: 13px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 13.5px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-left: 3px solid transparent;
}

.alert svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-success {
  background: #D1FAE5;
  color: #065F46;
  border-left-color: var(--color-secondary);
}

.alert-error {
  background: #FEE2E2;
  color: #991B1B;
  border-left-color: var(--color-danger);
}

.alert-warning {
  background: #FEF3C7;
  color: #78350F;
  border-left-color: var(--color-warning);
}

.alert-info {
  background: #CFFAFE;
  color: #155E75;
  border-left-color: var(--color-primary);
}

[data-theme="dark-v2"] .alert-success { background: rgba(16, 185, 129, 0.08); color: #6EE7B7; border-left-color: #10B981; }
[data-theme="dark-v2"] .alert-error   { background: rgba(239, 68, 68, 0.08);  color: #FCA5A5; border-left-color: #EF4444; }
[data-theme="dark-v2"] .alert-warning { background: rgba(245, 158, 11, 0.08); color: #FBB040; border-left-color: #F59E0B; }
[data-theme="dark-v2"] .alert-info    { background: rgba(24, 153, 255, 0.08); color: #93C5FD; border-left-color: #1899FF; }

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

/* De publieke schermen (inloggen, activeren, wachtwoord vergeten) VULLEN het
   venster en scrollen NIET: het is één kaart met één handeling, en een pagina
   die meeschuift laat die kaart half onder de vouw beginnen. Past de kaart niet
   op een laag scherm, dan scrollt de kaart zelf (.login-card) of zijn
   formulierkolom (.login-right) — nooit de pagina eromheen.
   100dvh ná 100vh: op mobiel telt 100vh de in-/uitschuivende URL-balk niet mee.
   Oudere browsers houden de 100vh-regel. */
.login-page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 20px;
}

#particleBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* Bewust ruim groter dan de zichtbare hoogte: zo loopt de achtergrond op
     iPhone Safari altijd tot voorbij de onderrand door — ook tijdens het
     in-/uitschuiven van de URL-balk ontstaat er nooit een gat. Het overschot
     valt buiten beeld (fixed). --app-h wordt door theme.js gezet. */
  height: calc(100vh + 140px);
  height: calc(var(--app-h, 100vh) + 140px);
  z-index: 0;
}

.login-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 40px 36px 52px;
  width: 100%;
  max-width: 400px;
  /* Nooit hoger dan het venster; wat er niet in past scrollt binnen de kaart.
     Het tweekoloms inlogscherm zet hier zijn eigen overflow overheen en laat
     .login-right scrollen. */
  max-height: 100%;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  position: relative;
  z-index: 1;
  transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

/* Autofill override: voorkomt witte flash door browser-animatie te bevriezen */
.login-page .form-input:-webkit-autofill,
.login-page .form-input:-webkit-autofill:hover,
.login-page .form-input:-webkit-autofill:focus {
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

[data-theme="dark-v2"] .login-card {
  background: #1E1E21;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}

[data-theme="dark-v2"] .login-logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.45s ease;
}

[data-theme="dark-v2"] .login-subtitle {
  color: rgba(240, 240, 242, 0.4);
}

[data-theme="dark-v2"] .login-page .form-label {
  color: rgba(240, 240, 242, 0.6);
}

[data-theme="dark-v2"] .login-page .form-input {
  background: #1A1A1D;
  border-color: #323236;
  color: #F0F0F2;
}

[data-theme="dark-v2"] .login-page .form-input:focus {
  background: #1E1E21;
  border-color: #1899FF;
  box-shadow: 0 0 0 3px rgba(24, 153, 255, 0.15);
}

[data-theme="dark-v2"] .login-page .form-input::placeholder {
  color: rgba(240, 240, 242, 0.2);
}

[data-theme="dark-v2"] .login-page {
  color-scheme: dark;
}

[data-theme="dark-v2"] .login-page .form-input:-webkit-autofill,
[data-theme="dark-v2"] .login-page .form-input:-webkit-autofill:hover,
[data-theme="dark-v2"] .login-page .form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1A1A1D inset !important;
  -webkit-text-fill-color: #F0F0F2 !important;
  caret-color: #F0F0F2;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

[data-theme="dark-v2"] .login-page .input-toggle-password {
  color: rgba(240, 240, 242, 0.35);
}

[data-theme="dark-v2"] .login-page .input-toggle-password:hover {
  color: rgba(240, 240, 242, 0.75);
}


.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
  gap: 12px;
}

.login-logo img {
  transition: filter 0.45s ease;
}

.login-logo-icon {
  width: 52px;
  height: 52px;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 14px rgba(8, 145, 178, 0.35);
}

.login-logo-icon svg {
  width: 26px;
  height: 26px;
}

.login-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-heading);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.login-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 4px;
}

/* ============================================================
   ARTIKEL ROWS (wizard step 2)
   ============================================================ */

.artikel-row {
  display: grid;
  grid-template-columns: 1fr 150px 140px 100px 38px;
  gap: 10px;
  align-items: start;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
  transition: border-color 0.15s ease;
}

.artikel-row:hover {
  border-color: var(--border-focus);
}

/* Artikelregel-knoppen, gedeeld door order-invoer (stap 2) en order-wijzigen. */
.ow-maten-regel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 41px; }
.ow-icoon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ow-icoon-btn:hover { border-color: var(--border-focus); color: var(--text-primary); }
.ow-icoon-btn.is-gevaar { color: var(--color-danger, #ef4444); }
.ow-icoon-btn.is-gevaar:hover { background: rgba(239, 68, 68, .08); border-color: var(--color-danger, #ef4444); }
/* Even hoog als .form-control, zodat hij midden naast de invoervelden staat. */
.ow-rij-verwijder { width: 38px; height: 41px; }
.ow-label-spacer { display: block; visibility: hidden; font-size: 12px; }

/* Verwijderen = klik en vasthouden. De 1200ms MOET gelijk blijven aan OW_HOLD_MS
   in js/app.js. `touch-action: none` is nodig: anders breekt de browser de pointer
   af zodra hij er een scrollgebaar in ziet. */
.ow-hold-btn { position: relative; overflow: hidden; touch-action: none; user-select: none; }
.ow-hold-btn > * { position: relative; z-index: 1; }
.ow-hold-btn::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 0; z-index: 0;
  background: rgba(0, 0, 0, .28); transition: width 140ms linear;
}
.ow-icoon-btn.is-gevaar::before { background: rgba(239, 68, 68, .22); }
.ow-hold-btn.is-holding::before { width: 100%; transition: width 1200ms linear; }

.artikel-row-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
 * MAAT-PILL — één vorm voor de hele app, gelijk aan OMS
 *
 * Een maat met een aantal is overal hetzelfde gegeven, dus krijgt het overal
 * dezelfde vorm. Was hier "M:8 · L:4" als monospace tekstregel. Vorm:
 *
 *     <span class="maat-pill">M<span class="maat-pill-aantal">8</span></span>
 *
 * De maat is de TEKST, het aantal het gevulde rondje — met beide in dezelfde
 * grijstint leest "XL 2" als één woord. Het aantal mag weggelaten worden als er
 * niets te tellen valt (een losse maataanduiding).
 *
 * Identiek aan .maat-pill in OMS' css/style.css; houd ze gelijk. Wat daar wél
 * staat en hier niet is .is-besteld — dat hoort bij het besteloverzicht, een
 * begrip dat PMS niet kent.
 *
 * De vierkante tegels op de productiekaart (.prod-maat-pill, dagplanning +
 * productie-overzicht) zijn bewust iets anders: die staan in een raster van
 * vaste vakjes, niet in een lopende regel.
 * ------------------------------------------------------------------------- */
.maat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 4px 1px 8px;
  margin: 1px 3px 1px 0;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  vertical-align: middle;
}
/* Zonder aantal blijft het een gewone pil: dan is er rechts geen rondje dat de
   extra ruimte opvult. */
.maat-pill:not(:has(.maat-pill-aantal)) { padding: 1px 8px; }
/* Gelijke breedte houdt een rij S/M/L/XL/XXL rustig. */
.maat-pill > :first-child { min-width: 22px; }
.maat-pill-aantal {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.maten-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 5px;
}

.btn-add-artikel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  background: transparent;
  color: var(--color-secondary);
  border: 2px dashed var(--color-secondary);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-add-artikel:hover {
  background: rgba(16, 185, 129, 0.08);
  color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-design-toevoegen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  background: transparent;
  color: var(--color-secondary);
  border: 2px dashed var(--color-secondary);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-design-toevoegen:hover {
  background: rgba(16, 185, 129, 0.08);
  color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  text-decoration: none;
}

/* ============================================================
   KLEUR PICKER (order-invoer, order-wijzigen, templates)
   Aangestuurd door js/kleur-picker.js + views/_sections/kleur-picker-modal.php
   ============================================================ */

.kleur-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kleur-picker.is-invalid .kleur-dots {
  outline: 2px solid var(--color-danger);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Padding zodat de selected/hover box-shadow-ring + scale van het eerste/laatste
   bolletje niet tegen (en door) de rand van een clippende container wordt afgekapt. */
.kleur-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px;
}

.kleur-dot {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

/* Tooltip wordt via JS aangemaakt (#kleurDotTooltip in body) */
#kleurDotTooltip {
  position: fixed;
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10000;
  white-space: nowrap;
  line-height: 1.5;
}

.kleur-dot:hover {
  transform: scale(1.18);
  border-color: var(--color-primary);
}

.kleur-dot.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
  transform: scale(1.1);
}

/* Volgorde-badge (1/2) op geselecteerde dots in combinatiekleur-modus */
.kleur-combo-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--bg-card);
}

.kleur-dot-wit {
  border-color: var(--border-color) !important;
}

.kleur-dot-wit.selected {
  border-color: var(--color-primary) !important;
}

.kleur-dot-meer {
  background: var(--bg-table-header) !important;
  border: 2px dashed var(--border-color) !important;
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kleur-dot-meer:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary);
  transform: scale(1.12);
}

.kleur-gekozen-dot {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
  flex-shrink: 0;
}

.kleur-gekozen {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.kleur-combi-hint {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}

.kleur-gekozen-swatch {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* Dynamisch gegenereerde dots in de kleur-picker modal */
.kleur-modal-dot {
  width: 34px;
  height: 34px;
}

/* De kleur-modal opent bóvenop een andere modal (templates: de bewerk-modal).
   Leunen op DOM-volgorde is niet genoeg zodra de partial ergens anders staat. */
#kleurPickerModal { z-index: 2000; }

/* ============================================================
   STAP 5: ARTIKELEN & DESIGNS OVERZICHT
   ============================================================ */

.ovz-artikel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 8px;
}

.ovz-artikel-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-table-header);
  font-size: 14px;
}

.ovz-artikel-naam {
  font-weight: 600;
}

.ovz-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 12px;
  background: #4B5563;
  color: #fff;
}

.ovz-pill-muted {
  background: var(--bg-table-header);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.ovz-kleur-dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.ovz-aantal {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.ovz-designs {
  background: var(--bg-table-header);
  border-top: 1px solid var(--border-color);
  padding: 0 14px;
}

.ovz-designs .ovz-artikel-header {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
}

.ovz-designs .ovz-pill-muted {
  background: var(--bg-surface);
}

.ovz-designs .ovz-artikel-header:last-child {
  border-bottom: none;
}

.ovz-design {
  font-size: 13px;
  padding: 12px 14px;
  line-height: 1.5;
}

.ovz-design-naam {
  font-weight: 600;
  font-size: 14px;
}

.ovz-design-info {
  color: var(--text-secondary);
  font-size: 12px;
}

.ovz-design-extra {
  color: var(--color-danger);
  font-size: 12px;
}

.ovz-geen-design {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 14px;
  font-style: italic;
}

/* ============================================================
   FILTER POPOVER
   ============================================================ */

.filter-popover-wrap {
  position: relative;
}

.filter-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.filter-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  transform: rotate(45deg);
}

.filter-popover-wrap.open .filter-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-popover-field {
  margin-bottom: 12px;
}

.filter-popover-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.filter-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.filter-active-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  margin-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .filter-popover {
    transition: opacity 0.01ms, visibility 0.01ms;
    transform: none !important;
  }
}

/* ============================================================
   DESIGN CARDS
   ============================================================ */

/* Toolbar boven het grid */
.designs-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.designs-toolbar .zoek-wrap {
  position: relative;
  flex: 1;
  max-width: 440px;
  min-width: 160px;
}

.designs-toolbar .zoek-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.designs-toolbar .zoek-wrap input {
  padding-left: 32px;
  width: 100%;
}

.designs-toolbar .results-label {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.designs-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

/* Peilstok onder het raster: zodra hij in beeld komt wordt de volgende portie
   kaartjes getoond (dgInitSentinel in views/designs.php). Hij mag niets zijn —
   alleen een plek om te zien dat je bij de onderkant bent. */
.designs-sentinel { height: 1px; }

@media (max-width: 1400px) { .designs-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1100px) { .designs-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 860px)  { .designs-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .designs-grid { grid-template-columns: repeat(2, 1fr); } }

.design-card {
  position: relative;
  min-width: 0;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 10px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.design-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

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

.design-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-heading);
  overflow-wrap: break-word;
}

.design-card-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Edit/actie knoppen overlay op kaart */
.design-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.design-card:hover .design-card-actions {
  opacity: 1;
}

.design-card-action-btn {
  min-width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, padding 0.18s ease;
  box-shadow: var(--shadow-sm);
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

.design-card-action-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  padding: 0 10px;
}

.design-card-action-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.design-card-action-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  transition: max-width 0.18s ease, opacity 0.12s ease, margin-left 0.18s ease;
}

.design-card-action-btn:hover .design-card-action-label {
  max-width: 100px;
  opacity: 1;
  margin-left: 6px;
}

/* Hover tooltip */
.card-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  min-width: 320px;
  max-width: 460px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.card-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

/* Mobiel: tooltip mag niet breder zijn dan het scherm */
@media (max-width: 768px) {
  .card-tooltip {
    min-width: 0;
    max-width: calc(100vw - 16px);
  }
}

/* Design zoeken modal — kaarten grid */
.design-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 18px;
}
@media (max-width: 640px) {
  .design-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* Koppel-aan-artikel lijst (design toevoegen/bewerken) — naam + maten */
.artikel-koppel-row {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}
.artikel-koppel-naam {
  flex-shrink: 0;
  min-width: 200px;
  padding-top: 1px;
}
@media (max-width: 640px) {
  .artikel-koppel-row {
    flex-direction: column;
    gap: 4px;
  }
  .artikel-koppel-naam {
    min-width: 0;
  }
}

.card-tooltip-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
  line-height: 1.3;
}

.card-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  padding: 2px 0;
  border-top: 1px solid var(--border-color);
}

.card-tooltip-row:first-of-type {
  border-top: none;
}

.card-tooltip-label {
  color: var(--text-muted);
  flex-shrink: 0;
}

.card-tooltip-value {
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}

.card-tooltip-opmerking {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border-color);
  font-style: italic;
  line-height: 1.4;
}

.design-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.design-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.design-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
}

.design-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.design-card-company {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Add design button */
.add-design-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: rgba(8, 145, 178, 0.05);
  border: 2px dashed rgba(8, 145, 178, 0.3);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}

.add-design-btn:hover {
  background: rgba(8, 145, 178, 0.1);
  border-color: var(--color-primary);
}

.add-design-btn svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   MATEN MODAL
   ============================================================ */

.maten-grid {
  display: grid;
  gap: 8px;
}

/* ── Matenkiezer (js/maten-invoer.js) ─────────────────────── */
.modal.maten-modal {
  width: 860px; max-width: calc(100vw - 24px);
  height: min(680px, calc(100vh - 48px));
  display: flex; flex-direction: column;
}
.modal.maten-modal > .modal-header,
.modal.maten-modal > .modal-footer { flex-shrink: 0; }
.modal.maten-modal > .modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mi { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.mi-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.mi-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-card);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.mi-tab:hover { border-color: var(--color-primary); color: var(--text-primary); }
.mi-tab.is-actief { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.mi-tab-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; font-size: 10.5px; font-weight: 700;
}
.mi-tab.is-actief .mi-tab-n { background: #fff; color: var(--color-primary); }
.mi-tab-n[hidden] { display: none; }
.mi-tab-meer { border-style: dashed; font-weight: 500; }
.mi-panelen { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; }
.mi-paneel[hidden], .mi-cel[hidden] { display: none; }
.mi-zoek { margin-bottom: 12px; max-width: 280px; }
.mi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.mi-cel { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.mi-label {
  font-size: 11.5px; font-weight: 600; color: var(--text-primary);
  text-align: center; line-height: 1.25; min-height: 15px; overflow-wrap: anywhere;
}
.mi-input { text-align: center; padding: 7px 4px; }
.mi-input.is-gevuld { border-color: var(--color-primary); font-weight: 700; }
.mi-matrix-wrap { overflow-x: auto; }
.mi-matrix { border-collapse: separate; border-spacing: 6px; }
.mi-matrix th { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; padding: 0 4px; }
.mi-matrix td { width: 64px; }
.mi-matrix td .mi-input { width: 64px; }
.mi-matrix-hoek { color: var(--text-muted) !important; font-weight: 500 !important; }
.mi .maten-totaal-bar { flex-shrink: 0; margin-top: 0; }

/* ── Inklapbare "Instellingen"-sectie (DTF bestelling + DTF order) ── */
.dtf-settings-acc {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
.dtf-settings-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  transition: background 0.15s ease;
}
.dtf-settings-acc-head:hover { background: var(--bg-card-hover); }
.dtf-settings-acc-title { display: inline-flex; align-items: center; gap: 8px; }
.dtf-settings-acc-title svg { flex-shrink: 0; color: var(--text-secondary); }
.dtf-settings-acc-chevron {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.dtf-settings-acc.open .dtf-settings-acc-chevron { transform: rotate(180deg); }
.dtf-settings-acc-body { display: none; padding: 14px; }
.dtf-settings-acc.open .dtf-settings-acc-body { display: flex; flex-direction: column; gap: 12px; }
.dtf-settings-acc-body .pms-switch { display: flex; }

/* ── Desktop: tabel-layout — 1 lange rij per categorie, brede modal ── */
/* Totaalbalk onderaan de maten-modal */
.maten-totaal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.maten-totaal-waarde {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0;
}

.maten-row-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.maten-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.maat-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.maat-label {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.maat-input {
  width: 54px;
  padding: 6px 4px;
  text-align: center;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Fira Code', monospace;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.maat-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.12);
}

/* ============================================================
   OVERLAY (mobile sidebar backdrop)
   ============================================================ */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 49;
}

.sidebar-overlay.active {
  display: block;
}

/* ============================================================
   GRID UTILITIES
   ============================================================ */

.grid   { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ============================================================
   UTILITIES
   ============================================================ */

.flex             { display: flex; }
.items-center     { align-items: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }
.gap-1            { gap: 4px; }
.gap-2            { gap: 8px; }
.gap-3            { gap: 12px; }
.gap-4            { gap: 16px; }
.gap-5            { gap: 20px; }
.mt-2             { margin-top: 8px; }
.mt-4             { margin-top: 16px; }
.mt-6             { margin-top: 24px; }
.mb-2             { margin-bottom: 8px; }
.mb-4             { margin-bottom: 16px; }
.mb-6             { margin-bottom: 24px; }
.text-right       { text-align: right; }
.text-center      { text-align: center; }
.text-sm          { font-size: 12.5px; }
.text-muted       { color: var(--text-muted); }
.text-secondary   { color: var(--text-secondary); }
.text-success     { color: var(--color-secondary); }
.text-danger      { color: var(--color-danger); }
.font-mono        { font-family: 'Fira Code', monospace; }
.font-bold        { font-weight: 700; }
.hidden           { display: none !important; }
.w-full           { width: 100%; }
.divider          { height: 1px; background: var(--border-color); margin: 16px 0; }
.truncate         { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.text-nowrap      { white-space: nowrap; }
.font-medium      { font-weight: 500; }

/* Card body */
.card-body { padding: 0; }

/* Info grid (order summary rows) */
.info-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}
.info-row:last-child { border-bottom: none; }

.info-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 140px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-value {
  font-size: 13.5px;
  color: var(--text-primary);
  flex: 1;
}

/* Data table (styled variant of table) */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  background: var(--bg-table-header);
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  white-space: nowrap;
}

.data-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13.5px;
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s ease; }
.data-table tbody tr:hover td { background: var(--bg-table-row-hover); }

.data-table tfoot td {
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 700;
  border-top: 2px solid var(--border-color);
}

.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { background: var(--bg-table-row-hover); }
.data-table th .sort-arrow { margin-left: 4px; opacity: .35; font-size: 10px; }
.data-table th.sort-asc .sort-arrow,
.data-table th.sort-desc .sort-arrow { opacity: 1; }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  gap: 12px;
}

.empty-state svg {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

.empty-state-text {
  font-size: 13.5px;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-card);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.page-item .page-link:hover {
  background: var(--bg-card-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

.page-item.active .page-link {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.page-item.disabled .page-link {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   RADIO CARD GROUP (used in wizard)
   ============================================================ */

.radio-card-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.radio-card {
  flex: 1;
  min-width: 120px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.radio-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

[data-theme="dark-v2"] .radio-card:hover {
  background: rgba(24, 153, 255, 0.12);
}

[data-theme="dark-v2"] .radio-card.selected {
  background: rgba(24, 153, 255, 0.15);
}

/* ============================================================
   SECTION HEADER (inline in page content)
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.01em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    /* Werkelijk zichtbare viewport-hoogte (door theme.js gezet): houdt de footer
       (gebruiker + uitloggen) net boven de iOS-browserbalk, met fallback 100dvh */
    height: var(--app-h, 100dvh);
    /* Harde begrenzing zodat de flex-nav (flex:1, min-height:0) de overtollige
       hoogte echt als scroll opvangt i.p.v. dat de sidebar zelf uitdijt —
       anders is het menu niet scrollbaar zodra een dropdown openstaat */
    max-height: var(--app-h, 100dvh);
  }

  /* Vangnet tegen de iOS Safari URL-balk-gap: trek de sidebar-kleur ruim voorbij
     de onderrand door (links/rechts = sidebar-breedte, dus geen bleed). Vult elk
     gat dat tijdens het in-/uitschuiven van de balk kort kan ontstaan. */
  .sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 60vh;
    background: var(--bg-sidebar);
    pointer-events: none;
    z-index: -1;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Overlay óók ruim voorbij de onderrand, zodat er onder de backdrop geen
     strook content/body zichtbaar wordt bij de iOS URL-balk */
  .sidebar-overlay {
    height: calc(var(--app-h, 100vh) + 140px);
  }

  .main-content,
  .main-content.sidebar-collapsed {
    margin-left: 0;
  }

  /* Hamburger tonen, desktop-collapse-knop verbergen */
  .mobile-menu-btn {
    display: inline-flex;
  }

  .sidebar-toggle {
    display: none;
  }

  /* Op mobiel altijd volledige sidebar tonen, ook als desktop 'collapsed' actief was */
  .sidebar.collapsed .sidebar-logo-text,
  .sidebar.collapsed .nav-section-title,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .nav-item-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .sidebar-user-info {
    opacity: 1;
    width: auto;
  }

  .sidebar.collapsed .sidebar-logo img {
    opacity: 1;
  }

  .sidebar.collapsed .sidebar-logo {
    padding: 0 16px;
    justify-content: flex-start;
  }

  .sidebar.collapsed .nav-dropdown-content.open {
    display: block;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Wizard altijd volledige breedte op mobiel */
  .wizard-container,
  .wizard-container.stap2-active {
    width: 100%;
  }

  /* Artikelregel: velden onder elkaar stapelen op mobiel.
     De template gebruikt een inline grid-template-columns, dus !important nodig. */
  .artikel-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .artikel-row .remove-row-btn {
    width: 100%;
  }
  /* Verwijderknop-cel: geen label-uitlijning meer nodig bij stapelen */
  .artikel-row > div[style*="padding-top"] {
    padding-top: 0 !important;
  }
  .ow-label-spacer { display: none; }

  .page-content {
    padding: 14px;
  }

  .app-header {
    padding: 0 14px;
  }

  /* Op mobiel te weinig ruimte voor de datum-widget en de dev-widgets. De
     ACCOUNTKNOP blijft wél staan — daar zit sinds de header-herindeling het
     thema, het account en uitloggen achter, en zonder die knop is dat op een
     telefoon nergens meer te bereiken. Alleen zijn naam valt weg, het bolletje
     is genoeg. */
  .header-datum,
  #prodOverzichtControls,
  #testTimeWidget {
    display: none;
  }
  .header-username-naam { display: none; }
  .header-username-btn  { padding: 0 6px; }
  /* De zoekbalk krimpt tot het vergrootglas — zie .sz-veld verderop. */
  .app-header-center { flex: 0 0 auto; }

  .modal {
    padding: 18px;
    border-radius: var(--radius-lg);
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .wizard-progress {
    padding: 14px 12px;
  }

  .wizard-step-label {
    display: none;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .login-card {
    padding: 28px 22px;
  }
}

@media (max-width: 480px) {
  .radio-card-group {
    flex-direction: column;
  }

  .stat-card-value {
    font-size: 26px;
  }
}

/* ── Credentials box (wachtwoord tonen na aanmaken/resetten) ── */
.credentials-box {
    background: var(--bg-subtle);
    border: 2px solid var(--color-primary, #6366f1);
    border-radius: 10px;
    padding: 20px 24px;
}
.credentials-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    margin-bottom: 16px;
}
.credentials-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.credentials-row:last-of-type {
    border-bottom: none;
}
.credentials-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    width: 130px;
    flex-shrink: 0;
}
.credentials-value {
    font-size: .95rem;
    color: var(--text-primary);
    word-break: break-all;
}
.credentials-mono {
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #6366f1);
    letter-spacing: .04em;
}

/* ============================================================
   SETTINGS LAYOUT — links menu, rechts content
   ============================================================ */
.settings-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex: 1;
}

/* ── Linker navigatie-paneel ── */
.settings-sidenav {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    align-self: stretch;
}
.settings-sidenav .nav-section-label {
    color: var(--text-sidebar);
    opacity: .5;
}
.settings-sidenav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
}
.settings-sidenav-title svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}
.settings-sidenav .nav-item .nav-badge-alert {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #f59e0b;
    background: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}
.settings-sidenav .nav-item .nav-badge-alert svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Waarschuwings-"!" op het hoofdmenu-item Instellingen (sidebar) */
.sidebar-nav .nav-item > .nav-badge-alert {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #f59e0b;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}
.sidebar-nav .nav-item > .nav-badge-alert svg {
    width: 16px;
    height: 16px;
    display: block;
}
/* Ingeklapte sidebar: toon de "!" als klein hoekje op het icoon */
.sidebar.collapsed .nav-item > .nav-badge-alert {
    position: absolute;
    top: 3px;
    right: 5px;
    margin: 0;
    width: 13px;
    height: 13px;
}
.sidebar.collapsed .nav-item > .nav-badge-alert svg {
    width: 13px;
    height: 13px;
}
/* Geel waarschuwingsicoon naast het ordernummer (orderoverzicht): order gewijzigd
   nadat de orderbevestiging al verstuurd is. Zelfde SVG-markup als .nav-badge-alert,
   maar los van .nav-item-nesting (die class werkt alleen binnen de sidebar/settings-nav). */
.ordernr-warning-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: middle;
    color: #f59e0b;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.ordernr-warning-badge svg {
    width: 15px;
    height: 15px;
    display: block;
}
.settings-sidenav .nav-item {
    color: var(--text-sidebar);
    border-radius: 0;
    margin: 0;
    width: 100%;
}
.settings-sidenav .nav-item:hover {
    background: var(--bg-sidebar-hover);
    color: var(--color-primary);
}
.settings-sidenav .nav-item.active {
    background: var(--bg-sidebar-active);
    color: var(--text-sidebar-active, #fff);
}

/* ── Rechter content-kolom ── */
.settings-content {
    flex: 1;
    min-width: 0;
}

[data-theme="dark-v2"] .settings-content .card {
    background: var(--bg-sidebar);
}

/* ===== BTN-GROUP-TOGGLE ===== */

.btn-group-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
/* Toggle switch (schuif) — thema-bewust */
.pms-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.pms-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pms-switch-track { position: relative; width: 38px; height: 21px; border-radius: 999px; background: var(--border-color); transition: background .2s; flex-shrink: 0; }
.pms-switch input:checked + .pms-switch-track { background: var(--color-primary); }
.pms-switch-thumb { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.pms-switch input:checked + .pms-switch-track .pms-switch-thumb { transform: translateX(17px); }
.pms-switch input:focus-visible + .pms-switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pms-switch-label { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.pms-switch-jn .pms-switch-track { background: #dc2626; }
.pms-switch-jn input:checked + .pms-switch-track { background: #16a34a; }

.btn-toggle {
    padding: 7px 22px;
    font-size: .875rem;
    font-weight: 500;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 150ms, color 150ms;
    line-height: 1;
}
.btn-toggle + .btn-toggle {
    border-left: 1px solid var(--border-color);
}
.btn-toggle.active {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}
.btn-toggle[data-value="1"].active {
    background: #16a34a;
}
.btn-toggle[data-value="0"].active {
    background: #dc2626;
}
.btn-toggle[data-patype].active {
    background: var(--color-primary);
}
.btn-toggle:not(.active):hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.btn-toggle-sm {
    padding: 3px 10px;
    font-size: .75rem;
}

/* ===== FACTUREN: INKLAPBARE KLANTKAART ===== */

.klant-card-toggle { cursor: pointer; user-select: none; }
.klant-card-toggle:hover { background: var(--bg-hover); }
.klant-card.open .klant-card-toggle { border-bottom: 1px solid var(--border-color); }
.klant-card-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform .2s; }
.klant-card.open .klant-card-chevron { transform: rotate(90deg); }
.klant-card-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s ease, opacity .25s ease; }
.klant-card.open .klant-card-body { grid-template-rows: 1fr; opacity: 1; }
.klant-card-body-inner { min-height: 0; overflow: hidden; }

/* ===== POSITIE DROPDOWN ===== */

.positie-dropdown-wrap {
  position: relative;
}

.positie-dropdown-trigger {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  font-family: inherit;
}
.positie-dropdown-trigger:hover,
.positie-dropdown-trigger:focus {
  border-color: var(--color-primary);
  outline: none;
}
.positie-dropdown-trigger.positie-dropdown-placeholder .positie-dropdown-label {
  color: var(--text-muted);
}

/* Hoofd dropdown panel */
.positie-dropdown-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  z-index: 110;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Zoekbalk bovenin het positie-panel (vaste header) */
.positie-dropdown-search {
  flex-shrink: 0;
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
}
.positie-dropdown-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
}
.positie-dropdown-search-input:focus {
  border-color: var(--color-primary);
}
.positie-dropdown-search-input::placeholder {
  color: var(--text-muted);
}

/* Scrollbare lijst onder de zoekbalk */
.positie-dropdown-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
}

.positie-dropdown-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.positie-dropdown-item.focused {
  background: var(--bg-table-row-hover);
}

.positie-dropdown-group {
  padding: 5px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-table-header);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
}

.positie-dropdown-separator {
  height: 1px;
  background: var(--border-color);
  margin: 2px 0;
}

.positie-dropdown-item {
  padding: 7px 12px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  user-select: none;
  white-space: nowrap;
}

/* Mobiel: panel mag niet breder zijn dan het scherm — lange positienamen
   wikkelen dan i.p.v. buiten het paneel te lopen.
   Let op: bewust een vaste `width` (geen `max-content`) — Safari/iOS clamt
   `max-content`-breedte niet altijd betrouwbaar op `max-width`, waardoor het
   paneel alsnog buiten het scherm kon lopen. */
@media (max-width: 640px) {
  .positie-dropdown-panel {
    min-width: 0;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  .positie-dropdown-item {
    white-space: normal;
    word-break: break-word;
  }
}
.positie-dropdown-item:hover {
  background: var(--bg-table-row-hover);
}
.positie-dropdown-item.selected {
  color: var(--color-primary);
  font-weight: 600;
}
/* Terug-knop in de positie-kiezer (touch drill-down) */
.positie-dropdown-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-color);
}
.positie-dropdown-back:hover {
  background: var(--bg-table-row-hover);
}
.positie-dropdown-back svg {
  flex-shrink: 0;
}

/* Parent item met children: relative voor flyout positionering */
.positie-dropdown-item.has-children {
  position: relative;
  padding-right: 28px;
  color: var(--text-secondary);
  font-weight: 500;
}
.positie-dropdown-item.has-children > .pd-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

/* Touch: los tikbaar "meer"-label (zoomt in op subposities) — de rest van de
   rij selecteert de hoofdpositie zelf. Alleen tekst + pijltje, geen pil. */
.positie-dropdown-item.has-children > .pd-drill-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  color: var(--color-primary);
}
.positie-dropdown-item.has-children > .pd-drill-btn:active {
  opacity: 0.6;
}
.pd-drill-btn-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .positie-dropdown-item.has-children {
    padding-right: 68px;
  }
}

/* Flyout submenu — via JS gepositioneerd als sibling van het panel */
.positie-dropdown-flyout {
  position: absolute;
  z-index: 115;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.positie-dropdown-flyout .positie-dropdown-item {
  padding: 7px 14px;
  font-size: 13px;
}

/* Drag-and-drop rijen in posities tabel */
.pos-parent-row.dragging      { opacity: 0.35; }
.pos-parent-row.drag-over     { box-shadow: inset 0 2px 0 var(--color-primary); background: var(--bg-table-row-hover); }

/* Drag-and-drop rijen in kleuren lijst */
.kleur-row.dragging   { opacity: 0.35; }
.kleur-row.drag-over  { box-shadow: inset 0 2px 0 var(--color-primary); background: var(--bg-table-row-hover); }

/* ── Creditorder modal — vergrendeld staat ─────────────────── */
#coFormContent {
  transition: filter .2s ease, opacity .2s ease;
}
#coFormContent.co-form-locked {
  filter: blur(0.3px);
  opacity: .8;
  pointer-events: none;
  user-select: none;
}

/* ── Taken systeem ─────────────────────────────────────────── */
.badge-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
}
.badge-circle.badge-circle-yellow {
  color: #1a1a1a;
}
[data-theme="dark-v2"] .badge-circle.badge-circle-yellow {
  color: #fff;
}

/* Badge-kleuren per taaktype (zelfde tokens als de card-headers) */
.taak-badge-textiel_leveren            { background: var(--taak-nalevering); }
.taak-badge-orderbevestiging_afgekeurd { background: var(--taak-afgekeurd); }
.taak-badge-orderbevestiging_opmerking { background: var(--taak-opmerking); }
.taak-badge-custom                     { background: var(--taak-custom); }
.taak-badge-oms_wijziging              { background: var(--taak-oms-wijziging); }

/* Card-header layout (vervangt inline flex-styles) */
.taken-card-header {
  flex-wrap: wrap;
  gap: 8px;
}
.taken-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}
.taken-header-center {
  display: flex;
  justify-content: center;
}
.taken-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

/* Segmented control (Openstaand | Voltooid) */
.seg-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}
.seg-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
  line-height: 1.2;
}
.seg-toggle-btn:hover {
  color: var(--text-heading);
}
.seg-toggle-btn.active {
  background: var(--bg-card);
  color: var(--text-heading);
  box-shadow: var(--shadow-sm);
}

.taken-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  overflow-x: auto;
}

/* Responsive: minder kolommen op kleinere schermen, 1 per rij op mobiel.
   Staat ná de basisregel zodat de override ook echt wint binnen de media query. */
@media (max-width: 1200px) {
  .taken-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .taken-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .taken-grid { grid-template-columns: 1fr; overflow-x: visible; }
}

/* Een taakkaart is een REGEL met een streepje, geen kaart met een gekleurde kop.
   Er komen er straks tientallen te staan; de gekleurde balk, de losse
   "Bekijk order"-knop en de volledige omschrijving maakten er blokken van
   ~140px van waarvan er vier in beeld pasten. Wat je moet weten om te kiezen
   is: welke order is het, wat moet eraan gebeuren, en van wie is hij.
   Zelfde opzet als de takenkaart op het OMS-dashboard — wijzig je er één,
   kijk dan naar de ander. */
.taak-card {
  display: flex;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
  transition: border-color .12s, box-shadow .12s;
}
/* De hele kaart is het handvat naar de order (of, bij een eigen taak, naar de
   bewerkmodal) — vandaar geen knop meer in een voetregel. */
.taak-card.is-klikbaar { cursor: pointer; }
.taak-card.is-klikbaar:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.taak-card.is-klikbaar:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* De typekleur als streepje: op een compacte regel is een gekleurde kop te veel. */
.taak-card-streep {
  flex: 0 0 3px;
  align-self: stretch;
  border-radius: var(--radius-full);
}
.taak-type-textiel_leveren {
  background-color: var(--taak-nalevering);
}
.taak-type-orderbevestiging_afgekeurd {
  background-color: var(--taak-afgekeurd);
}
.taak-type-orderbevestiging_opmerking {
  background-color: var(--taak-opmerking);
}
.taak-type-custom {
  background-color: var(--taak-custom);
}
/* Stond er niet als kop-kleur; als streepje hoort hij er wél te zijn — anders
   is dit het enige type zonder kleurmarkering. Token: zie css/theme.css. */
.taak-type-oms_wijziging {
  background-color: var(--taak-oms-wijziging);
}

.taak-card-in {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.taak-card-kop {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.taak-card-ref {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}
.taak-card-klant {
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* De avatar vervangt de naam: op een kaart van ~200px breed drukte
   "Afgehandeld door Jamey Roelofs" alles weg, terwijl het bolletje in één
   oogopslag zegt om wie het gaat (zelfde kleur als overal, zie
   pmsGebruikerAvatar()). De naam staat in de title. */
.taak-card-avatar {
  margin-left: auto;
  display: inline-flex;
  flex-shrink: 0;
}
.taak-card-avatar .gebruiker-avatar {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.taak-card-titel {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alleen bij een EIGEN taak: daar is de omschrijving wat de gebruiker zelf
   opschreef. Bij een automatische taak herhaalt hij de titel plus de order. */
.taak-card-omschrijving {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.taak-card-voet {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.taak-card-datum {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.taak-card-acties {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Voltooien/verwijderen zijn icoonknoppen: een label kostte een hele voetregel.
   LET OP — de JS mag hier geen textContent overschrijven, dan valt de svg eruit. */
.taak-icoonknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.taak-icoonknop svg { width: 12px; height: 12px; }
.taak-icoonknop:disabled { opacity: .5; cursor: default; }
.taak-icoonknop.is-vink:hover:not(:disabled) {
  background: var(--taak-voltooid);
  border-color: var(--taak-voltooid);
  color: #fff;
}
.taak-icoonknop.is-verwijder:hover:not(:disabled) {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

/* "Zet akkoord" is geen icoon: een vinkje zou hier hetzelfde beloven als
   Voltooien, terwijl dit de orderbevestiging op akkoord zet. */
.btn.btn-taak-opmerking-mini {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--taak-opmerking);
  border: 1px solid var(--taak-opmerking);
  color: #1a1a1a;
}
.btn.btn-taak-opmerking-mini:hover {
  background: var(--taak-opmerking);
  filter: brightness(1.08);
  color: #1a1a1a;
}
[data-theme="dark-v2"] .btn.btn-taak-opmerking-mini { color: #fff; }

/* Deadline-pill op taak-cards */
.taak-deadline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
}
.taak-deadline svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
/* In een compacte kaart zijn de pills bijzaak naast de titel. */
.taak-card .taak-deadline { font-size: 10.5px; padding: 1px 6px; }
.taak-deadline.is-overdue {
  color: var(--color-red);
  border-color: var(--color-red);
  background: rgba(220, 38, 38, 0.08);
}
[data-theme="dark-v2"] .taak-deadline.is-overdue {
  background: rgba(248, 113, 113, 0.12);
}

/* Voltooide taak-cards (gedempt, geen acties) */
.taak-card-voltooid .taak-card-streep { opacity: 0.55; }
.taak-card-voltooid .taak-card-titel  { color: var(--text-secondary); }
.taak-afgehandeld-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 0;
}
.taak-afgehandeld-meta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--taak-voltooid);
}
.taak-afgehandeld-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Templates systeem
   ============================================================ */

.template-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.template-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.template-card-img {
  width: 100%;
  height: 140px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.template-card-naam {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.3;
}

.template-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-secondary);
}

.template-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* ── Borduurkaart type picker (zelfde patroon als dtf-algo-picker) ── */
.bk-type-picker {
  border: 1px solid var(--border-color);
  border-radius: 7px;
  overflow: hidden;
}
.bk-type-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: background 120ms;
  user-select: none;
}
.bk-type-option:last-child {
  border-bottom: none;
}
.bk-type-option:hover {
  background: var(--bg-card-hover, rgba(0,0,0,.04));
}
.bk-type-option.bk-type-active {
  background: rgba(3, 105, 161, .07);
}
.bk-type-opt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  color: var(--text-secondary);
}
.bk-type-active .bk-type-opt-icon {
  background: rgba(3, 105, 161, .12);
  border-color: rgba(3, 105, 161, .25);
  color: #0369a1;
}
.bk-type-opt-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bk-type-opt-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.bk-type-opt-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.bk-type-option input[type="radio"] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: #0369a1;
  cursor: pointer;
}

/* ── Design modal (.modal-form) — vaste hoogte, alleen de body scrollt ── */
.modal.modal-form.design-modal-fixed {
  height: min(88vh, 880px);
  max-width: min(1280px, calc(100vw - 32px));
}

/* Drie kolommen secties, lijnen zoals .kn-cols: de wrapper draagt de bovenlijn,
   kolom 2 en 3 een lijn links. */
.design-modal-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 260px;
  gap: 0 28px;
  align-items: start;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}
.design-modal-cols > div > .kn-section:first-child { border-top: none; padding-top: 0; }
.design-modal-cols > div + div { padding-left: 28px; border-left: 1px solid var(--border-color); }
/* Staat ná de basisregels zodat de overrides binnen de media query winnen. */
@media (max-width: 1024px) {
  .design-modal-cols { grid-template-columns: 1fr 1fr; }
  .design-modal-cols > .design-modal-right {
    grid-column: 1 / -1;
    padding-left: 0; border-left: none;
  }
  .design-modal-cols > .design-modal-right > .kn-section:first-child {
    padding-top: 18px; border-top: 1px solid var(--border-color);
  }
}
@media (max-width: 768px) {
  .design-modal-cols { grid-template-columns: 1fr; }
  .design-modal-cols > div + div { padding-left: 0; border-left: none; }
  .design-modal-cols > div + div > .kn-section:first-child {
    padding-top: 18px; border-top: 1px solid var(--border-color);
  }
}

/* Geselecteerd-design venster (stap 3) — mobielvriendelijk */
@media (max-width: 768px) {
  .design-selected-img {
    width: 80px !important;
    height: 80px !important;
  }
  .design-selected-card .design-selected-del {
    width: 100%;
  }

  /* Stap 5 overzicht-header: stapelen, afzendergegevens verbergen op mobiel
     (de PDF wordt server-side apart opgebouwd en is hier niet van afhankelijk) */
  .overzicht-header {
    flex-direction: column;
    gap: 6px;
  }
  .overzicht-afzender {
    display: none;
  }
}

/* ── Upload dropzone ────────────────────────────────────────── */
.upload-dropzone {
  border: 2px dashed var(--border-input);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 120px;
  position: relative;
  user-select: none;
}
.upload-dropzone:hover,
.upload-dropzone.drag-over {
  border-color: var(--color-primary, #2563eb);
  background: var(--bg-card-hover);
}
.upload-dropzone-icon {
  opacity: 0.4;
  line-height: 0;
}
.upload-dropzone-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-heading);
}
.upload-dropzone-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.upload-dropzone-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
}
.upload-dropzone-preview img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.upload-dropzone-filename {
  font-size: 12px;
  color: var(--text-secondary);
  word-break: break-all;
  text-align: center;
}
.upload-dropzone-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 2px solid var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}
.upload-dropzone-remove:hover { background: #dc2626; }
.upload-dropzone-pdf { min-height: 90px; }
.upload-dropzone-pdf-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  word-break: break-all;
  line-height: 0;
}
.upload-dropzone-pdf-info span { line-height: 1.3; }
.upload-dropzone-existing {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-dropzone-existing-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Filter dropdown panel ──────────────────────────────────── */
.filter-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 300;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  padding: 4px 18px 0;
  max-height: 80vh;
  overflow-y: auto;
}
.filter-panel.open { display: block; animation: filterPanelIn .14s ease-out; }
@keyframes filterPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
div:has(> .filter-panel.open) > .btn-toolbar {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-section { padding: 14px 0; }
.filter-section + .filter-section { border-top: 1px solid var(--border-color); }
.filter-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
/* Een stip achter de kop zodra in dat blok iets anders dan "Alle" gekozen is. */
:is(.filter-section, .filter-2col > div):has(> .filter-triple .filter-triple-btn.active:not([data-val=""]), > .filter-pills input:checked) > .filter-section-title { color: var(--text-primary); }
:is(.filter-section, .filter-2col > div):has(> .filter-triple .filter-triple-btn.active:not([data-val=""]), > .filter-pills input:checked) > .filter-section-title::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pill { cursor: pointer; }
.filter-pill input[type=checkbox] { display: none; }
.filter-pill span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-card);
  transition: background .12s, color .12s, border-color .12s;
  user-select: none;
  cursor: pointer;
}
.filter-pill span:hover { border-color: var(--color-primary); color: var(--text-primary); }
.filter-pill-dot {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  flex-shrink: 0;
}
.filter-pill input:checked + span {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-card));
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Segmented control: neutraal zolang "Alle" aanstaat, blauw zodra er gefilterd wordt. */
.filter-triple {
  display: flex;
  width: 100%;
  padding: 2px;
  gap: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.filter-triple-btn {
  flex: 1 1 0;
  height: 26px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background .12s, color .12s, box-shadow .12s;
}
.filter-triple-btn:not(.active):hover { color: var(--text-primary); background: color-mix(in srgb, var(--bg-card) 60%, transparent); }
.filter-triple-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--border-color);
}
.filter-triple-btn.active:not([data-val=""]) {
  background: var(--color-primary);
  color: #fff;
  box-shadow: none;
}
.filter-triple-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
  line-height: 1;
}
.filter-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.filter-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -18px;
  padding: 10px 18px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-color);
}
.filter-footer .results-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Gekozen periode naast de jaar/week-stepper */
.tb-periode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tb-h, 32px);
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tb-periode svg { opacity: .55; flex-shrink: 0; }

/* Dual range slider */
.dual-range {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  margin: 4px 0 2px;
}
.dual-range-track {
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
}
.dual-range-fill {
  position: absolute;
  height: 4px;
  background: var(--color-primary, #2563eb);
  border-radius: 2px;
}
.dual-range input[type=range] {
  position: absolute;
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.dual-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary, #2563eb);
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  pointer-events: all;
  cursor: pointer;
}
.dual-range input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary, #2563eb);
  border: 2px solid var(--bg-card);
  pointer-events: all;
  cursor: pointer;
  border: none;
}
.dual-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Tabbalk in een kaart ──────────────────────────────────────────────────
   Eén opmaak voor de tabs bovenin een kaart (?page=nieuwe-aanmeldingen,
   ?page=afhaallijst, ?page=designs). Werkt op een <button> én op een <a> — de
   ene pagina wisselt met JS, de andere met een link, en dat hoort er hetzelfde
   uit te zien.

   De balk staat standaard IN de kaartpadding. Zit hij in een kaart mét padding
   en moet de onderrand tot de randen doorlopen, zet er dan `.tab-bar-vol` bij
   en geef de kaartpadding als `--tab-bar-inset` mee. */
.tab-bar {
  display: flex;
  gap: 0;
  padding: 0 15px;
  border-bottom: 2px solid var(--border-color);
}
.tab-bar-vol {
  --tab-bar-inset: 20px;
  margin: calc(var(--tab-bar-inset) * -1) calc(var(--tab-bar-inset) * -1) 20px;
  padding: 0 var(--tab-bar-inset);
}
.tab-btn {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  /* Over de 2px onderrand van de balk heen, zodat de actieve tab hem vervangt
     in plaats van er een tweede lijn onder te zetten. */
  margin-bottom: -2px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--text-primary); border-bottom-color: #4f46e5; }

/* ── Lijstpagina-patroon: tabel-card met de filterbalk ín de kop ──────────
   Overgenomen uit OMS (css/style.css), zodat een overzichtsscherm daar en hier
   dezelfde vorm heeft. Winst ten opzichte van de losse toolbar-card erboven:
   die kostte een hele card-hoogte voor één zoekveld, en de titel eronder
   herhaalde alleen de paginanaam die de sidebar al aanwijst.

   Alles wat rechts hoort (primaire knop, snelfilters, tellers) gaat in
   `.table-card-acties` — dat is de enige plek met `margin-left: auto`. Een
   TWEEDE tabel op dezelfde pagina houdt zijn gewone kop mét titel, anders is
   niet te zien welke tabel welke is. */
.table-card { padding: 0; overflow: hidden; }
.table-card-head {
  padding: 15px 15px 0;
  border-bottom: 1px solid var(--border-color);
}
.table-card-head h3 {
  margin: 0 0 12px;
  font-size: .95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-card .data-table { margin: 0; }
.table-card-head.table-card-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 15px;
}
.table-card-toolbar .toolbar-search { flex-shrink: 1; min-width: 200px; }
.table-card-acties {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
/* `.table-card` staat op `overflow: hidden` (voor de afgeronde hoeken van de
   tabel); zonder deze uitzondering wordt een uitklappend filterpaneel bij een
   korte tabel onderaan afgeknipt. */
.table-card:has(.filter-panel) { overflow: visible; }

/* Eén hoogte voor alles in de toolbar. Alleen directe acties: knoppen in het
   uitklappende filterpaneel houden hun eigen maat. */
.table-card-toolbar { --tb-h: 32px; }
.table-card-toolbar .toolbar-search .form-input { height: var(--tb-h); padding-top: 0; padding-bottom: 0; font-size: 13px; }
.table-card-acties > .btn,
.table-card-acties .btn-toolbar {
  height: var(--tb-h);
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.table-card-acties > .btn-primary, .table-card-acties > .btn-primary:hover { box-shadow: none; }
.tb-icoonknop { width: var(--tb-h); height: var(--tb-h); padding: 0; justify-content: center; flex-shrink: 0; }
.tb-icoonknop.btn-totaal { background: #16a34a; border-color: #16a34a; color: #fff; font-size: 1rem; font-weight: 700; }
.tb-icoonknop.btn-totaal:hover { background: #15803d; border-color: #15803d; color: #fff; }

/* Jaar/week-stepper: pijl · select · pijl als één blok */
.tb-stepper { display: inline-flex; align-items: stretch; height: var(--tb-h); }
.tb-stepper .btn { height: 100%; padding: 0 8px; border-radius: 0; box-shadow: none; }
.tb-stepper .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: 0; }
.tb-stepper .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-left: 0; }
.tb-stepper select {
  border: 1px solid var(--border-color);
  border-radius: 0;
  padding: 0 8px;
  font-size: 13px; font-weight: 600;
  background: var(--bg-card); color: var(--text-primary);
  cursor: pointer; outline: none;
}
.tb-stepper select:focus-visible { border-color: var(--color-primary); }

/* Klantfilter (views/_sections/toolbar-klantfilter.php) */
.tb-klant { position: relative; }
.tb-klant-knop { max-width: 240px; }
.tb-klant-knop > svg:first-child { flex-shrink: 0; opacity: .6; }
.tb-klant-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-klant-caret { flex-shrink: 0; transition: transform .15s; }
.tb-klant.open .tb-klant-caret { transform: rotate(180deg); }
.tb-klant-wis {
  display: none;
  width: 16px; height: 16px; margin-right: -2px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 14px; line-height: 1;
}
.tb-klant-wis:hover { background: color-mix(in srgb, var(--color-primary) 18%, transparent); }
.tb-klant.is-actief .tb-klant-knop {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-card));
}
.tb-klant.is-actief .tb-klant-knop > svg:first-child { opacity: 1; }
.tb-klant.is-actief .tb-klant-wis { display: inline-flex; }
.tb-klant.is-actief .tb-klant-caret { display: none; }
.tb-klant-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
}
.tb-klant.open .tb-klant-panel { display: block; }
.tb-klant-zoek { position: relative; padding: 8px; border-bottom: 1px solid var(--border-color); }
.tb-klant-zoek svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); opacity: .45; pointer-events: none; }
.tb-klant-zoekveld {
  width: 100%; height: 32px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-input, var(--bg-card)); color: var(--text-primary);
  font-size: 13px;
}
.tb-klant-zoekveld:focus { outline: none; border-color: var(--color-primary); }
.tb-klant-lijst { max-height: 280px; overflow-y: auto; padding: 4px; }
.tb-klant-optie {
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--text-primary);
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-klant-optie[data-id=""] { color: var(--text-muted); }
.tb-klant-optie:hover, .tb-klant-optie.focused { background: var(--bg-table-header); }
.tb-klant-optie.selected { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-weight: 600; }
.tb-klant-leeg { display: none; padding: 10px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ── Bestellen (?page=bestellen) — keuzekaarten in de vorm van .dtf-zone-card ── */
.bestel-keuze-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
}
.bestel-keuze-kaart { padding: 36px; width: 100%; max-width: 1400px; }
.bestel-keuzes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.bestel-keuze {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 400px;
  padding: 44px 32px 36px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.bestel-keuze:hover {
  border-color: var(--color-primary);
  background: var(--bg-hover, rgba(79,70,229,.04));
  box-shadow: 0 4px 20px rgba(79,70,229,.1);
  text-decoration: none;
}
.bestel-keuze:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bestel-keuze-icoon {
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-light, rgba(99,102,241,.1));
  color: var(--color-primary);
  margin-bottom: 2px;
  transition: transform .2s;
}
.bestel-keuze:hover .bestel-keuze-icoon { transform: translateY(-3px); }
.bestel-keuze-icoon svg { width: 40px; height: 40px; }
.bestel-keuze-titel { font-size: 19px; font-weight: 700; color: var(--text-primary); }
.bestel-keuze-sub { font-size: 13px; line-height: 1.55; color: var(--text-muted); max-width: 260px; }
.bestel-keuze-knop {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 7px 18px;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px; font-weight: 600;
  transition: opacity .15s;
}
.bestel-keuze:hover .bestel-keuze-knop { opacity: .9; }
.bestel-keuze-teller {
  position: absolute; top: 14px; right: 14px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  background: var(--color-danger);
  color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px;
}

/* Binnenkomen: kaarten schuiven gestaffeld in. Vertrekken (.is-vertrek, gezet
   door views/bestellen.php vlak voor de navigatie): de gekozen kaart komt naar
   voren, de rest vervaagt. */
@keyframes bestelKeuzeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.bestel-keuze { animation: bestelKeuzeIn .4s cubic-bezier(.2,.7,.3,1) both; }
.bestel-keuze:nth-child(2) { animation-delay: .07s; }
.bestel-keuze:nth-child(3) { animation-delay: .14s; }
.bestel-keuzes.is-vertrek .bestel-keuze {
  /* De inkomst-animatie (fill: both) zou transform anders vastzetten. */
  animation: none;
  transition: opacity .28s ease, transform .28s ease;
  opacity: 0;
  transform: scale(.96);
}
.bestel-keuzes.is-vertrek .bestel-keuze.is-gekozen {
  opacity: 1;
  transform: scale(1.04);
  border-color: var(--color-primary);
  box-shadow: 0 10px 34px rgba(79,70,229,.2);
}
.bestel-keuze-kaart { transition: opacity .3s ease .12s; }
.bestel-keuze-wrap.is-vertrek .bestel-keuze-kaart { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .bestel-keuze { animation: none; }
  .bestel-keuzes.is-vertrek .bestel-keuze,
  .bestel-keuze-kaart { transition: none; }
}

/* Jaar/week-stapper: ‹ select › als één blok. */
.periode-stap { display: inline-flex; align-items: stretch; height: 32px; }
.periode-stap > .btn { padding: 0 8px; }
.periode-stap > .btn:first-child { border-radius: 6px 0 0 6px; border-right: 0; }
.periode-stap > .btn:last-child  { border-radius: 0 6px 6px 0; border-left: 0; }
.periode-stap > select {
  border: 1px solid var(--border-color);
  border-left: 0; border-right: 0; border-radius: 0;
  padding: 0 8px;
  font-size: 13px; font-weight: 600;
  background: var(--bg-card); color: var(--text-primary);
  cursor: pointer; outline: none;
}

.tabpagina-tabs { flex-wrap: wrap; }
.tabpagina-tabs .tab-btn { gap: 6px; white-space: nowrap; }
.tabpagina-tabs .tab-count { font-weight: 500; opacity: .7; }
/* Tabbalk als eigen kaart: de kaartrand neemt de onderlijn over. */
.tabpagina-los .tab-bar { border-bottom-color: transparent; }
.tabpagina-body { padding: 12px 15px; }
a.seg-toggle-btn { text-decoration: none; display: inline-block; }

/* ── Page toolbar — gedeelde filterbalk layout ───────────── */
.page-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar-search {
  position: relative;
  width: 260px;
  flex-shrink: 0;
}

.toolbar-search > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .45;
}

.toolbar-search .form-input {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 32px;
}

.btn-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.5;
}

/* Verversknop met aftelling (overzichten en planningen): klik = nu bijwerken.
   De pagina zet .refreshing tijdens het ophalen. */
.refresh-knop { font-variant-numeric: tabular-nums; white-space: nowrap; }
.refresh-knop.refreshing svg { animation: refresh-knop-spin .8s linear infinite; }
@keyframes refresh-knop-spin { to { transform: rotate(360deg); } }

/* ── Feedback-sleepzone (screenshot) ──────────────────────────────────────
   Zelfde opzet als de DTF-uploadzone: gestippelde rand, oplichten bij hover
   en tijdens slepen. De formaten en maximale grootte staan in de zone zelf,
   zodat je niet pas ná het kiezen een foutmelding krijgt. */
.fb-drop {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-page);
    transition: border-color 150ms, background 150ms;
}

.fb-drop:hover,
.fb-drop.drag-over {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

/* Toetsenbordgebruikers zien dezelfde focusring als elders in de app. */
.fb-drop:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.fb-drop svg {
    width: 26px;
    height: 26px;
    color: var(--text-secondary);
    display: block;
    margin: 0 auto 6px;
}

.fb-drop-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.fb-drop-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
}

.fb-drop-formats {
    font-size: 10.5px;
    color: var(--text-secondary);
    margin-top: 6px;
    opacity: .7;
}

/* Regel onder de voorbeeldafbeelding: bestandsnaam + grootte links, knop rechts. */
.fb-drop-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Zwevend actiemenu (.row-dropdown) — port uit OMS (css/style.css)

   Een paneel dat één keer op de pagina staat en bij het openen naar zijn knop
   toe wordt gepositioneerd. `position: fixed`, dus het wordt niet afgeknipt
   door een scrollend vlak eromheen — precies wat een uitklapper ín de sidebar
   niet kan: die zit vast aan het scrollgebied van de nav.

   In PMS wordt hij vandaag alleen door het Beheer-menu gebruikt; de vorm is
   bewust generiek gehouden zodat een rij-actiemenu er later op kan leunen.
   Bediening: rowMenuOpen() / rowMenuHide() in js/app.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.row-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
  min-width: 220px;
  padding: 6px;
  animation: rowDropIn .12s ease;
}
@keyframes rowDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.row-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md, 8px);
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background .1s;
  user-select: none;
  white-space: nowrap;
}
.row-dropdown-item:hover { background: var(--bg-card-hover); }
.row-dropdown-item svg { flex-shrink: 0; opacity: .65; }
/* Een item mag ook een link zijn: dan hoort hij er hetzelfde uit te zien als de
   klikbare divs ernaast, zonder onderstreping. */
a.row-dropdown-item { text-decoration: none; }
a.row-dropdown-item:hover { text-decoration: none; color: var(--text-primary); }
/* Of een <button>. Zonder deze regel houdt hij zijn browser-eigen rand,
   achtergrond, lettertype én `width: auto` — dan staat er een echte knop in het
   paneel in plaats van een menuregel. */
button.row-dropdown-item {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
}
.row-dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }
/* Een klein telbolletje achter een menu-item (openstaande conflicten). */
.row-dropdown-item .rd-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--color-danger, #ef4444);
  color: #fff;
}

/* --- Beheer-knop onderaan de sidebar --------------------------------------
   Plakt onderaan het scrollgebied van de nav: het menu is langer dan de
   sidebar hoog is, dus zonder sticky staat de knop pas ná de laatste
   menu-items en moet je ervoor scrollen. De achtergrond is nodig omdat de
   items er anders doorheen schuiven.

   Bewust GEEN `.nav-dropdown-trigger`: die klapt ín de lijst open, en hier is
   naar beneden geen ruimte. Het paneel opent NAAST de knop en groeit omhoog —
   zie `uitlijning: 'naast'` in rowMenuOpen(). */
.nav-beheer-wrap {
  position: sticky;
  bottom: -6px; /* compenseert de padding-bottom van .sidebar-nav */
  z-index: 1;
  margin-top: auto; /* duwt het blok naar de onderkant bij een kort menu */
  padding: 6px 0;
  background: var(--bg-sidebar);
}
button.nav-item.nav-beheer-btn { margin-bottom: 6px; }
button.nav-item.nav-beheer-btn.is-open {
  background: var(--bg-sidebar-hover);
  color: var(--color-primary);
}
/* De chevron wijst naar rechts en hoeft niet te draaien: het paneel gaat altijd
   diezelfde kant op. Ingeklapt valt hij weg — het label is er dan ook niet, en
   een pijl pal tegen het icoon leest als een tweede icoon. */
.sidebar.collapsed .nav-beheer-btn .nav-chevron { display: none; }

/* De huidige pagina in het Beheer-paneel. Zelfde tint als .nav-item.active in
   de sidebar; het paneel zelf is een gewone .row-dropdown. */
.beheer-menu .row-dropdown-item.is-actief {
  background: var(--bg-card-hover);
  color: var(--color-primary);
  font-weight: 600;
}
.beheer-menu .row-dropdown-item.is-actief svg { opacity: 1; }

/* Scheidingslijn i.p.v. een sectiekop ("Orders", "Overig", "Beheer"): het menu
   telt ruim twintig items en drie koppen kostten samen bijna honderd pixels,
   waardoor de onderste items buiten beeld vielen. De lijn houdt de groepering
   zichtbaar voor 15px. `.nav-section-label` bestaat nog voor de instellingen-
   sidenav (views/instellingen.php), waar de ruimte er wél is. */
.nav-sep {
  height: 1px;
  margin: 7px 14px;
  background: var(--text-sidebar);
  opacity: 0.14;
}

/* Zonder Dashboard-recht opent het menu anders met een losse lijn. */
.sidebar-nav > .nav-sep:first-child,
.nav-sep + .nav-sep {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER, GEBRUIKERSMENU EN SNEL ZOEKEN — port uit OMS

   De header is in drie vakken verdeeld: links de hamburger (en de uit beeld
   geklemde paginatitel), midden de zoekbalk, rechts de accountknop. Links en
   rechts krijgen dezelfde flex-basis, zodat de zoekbalk ook écht gecentreerd
   staat en niet meeschuift met de lengte van de accountnaam.
   ═══════════════════════════════════════════════════════════════════════════ */

.app-header-left   { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 0; }
.app-header-right  { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; flex: 1 1 0; }
.app-header-center { display: flex; justify-content: center; flex: 0 1 460px; min-width: 0; }

/* De paginatitel is UIT BEELD maar niet uit de DOM: het sidebar-item dat aanstaat
   zegt al waar je bent, terwijl een pagina zonder <h1> voor een schermlezer geen
   kop meer heeft om op te landen. Niet met `display: none` of `hidden` — dan
   leest de schermlezer hem ook niet meer; dit is de gebruikelijke clip-truc. */
.page-title-verborgen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Snel zoeken: een VELD in de header, geen los venster ─────────────────── */

/* LETTERLIJK overgenomen uit OMS (css/style.css). Dezelfde zoekbalk in beide
   apps hoort er ook hetzelfde uit te zien; een eigen bewerking hier loopt na
   één wijziging aan de andere kant uit de pas. De tokens die het blok
   gebruikt (--bg-input, --border-input, --color-primary-light, --bg-modal)
   bestaan in beide theme.css-bestanden. */
.sz-wrap { position: relative; width: 100%; }

.sz-veld {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 10px;
  background: var(--bg-input, var(--bg-subtle));
  border: 1px solid var(--border-input, var(--border-color));
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: border-color .15s, box-shadow .15s;
}
.sz-veld:hover { border-color: var(--color-primary); }
/* Focusring op de WIKKEL en niet op de input: het veld is visueel één geheel
   met het icoon en de toets ernaast. */
.sz-veld.is-actief {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.sz-veld-icoon { width: 15px; height: 15px; flex-shrink: 0; }
.sz-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  outline: none;
}
.sz-input::placeholder { color: var(--text-muted); }
.sz-veld-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-subtle);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
}
.sz-veld-wis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.sz-veld-wis:hover { color: var(--text-primary); background: var(--bg-subtle); }
.sz-veld-wis svg { width: 14px; height: 14px; }
.sz-veld-wis[hidden], .sz-veld-key[hidden] { display: none; }

/* Het paneel hangt AAN het veld en is breder dan het veld zelf: de resultaten
   dragen twee regels plus een bedrag, en dat past niet in 460px. */
.sz-paneel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  z-index: 60;
}
.sz-paneel[hidden] { display: none; }

.sz-results { flex: 1; overflow-y: auto; min-height: 0; padding: 6px 0; }

/* Groepskop: rustige grijze regel, géén achtergrond, icoon of teller. Hij deelt
   de lijst op — hij mag hem niet overstemmen. */
.sz-group {
  padding: 10px 16px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.sz-group:first-child { padding-top: 4px; }

.sz-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background: transparent;
}
.sz-item:hover,
.sz-item.sz-focused { background: var(--bg-table-row-hover); }
.sz-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.sz-icoon svg { width: 16px; height: 16px; }

.sz-item-inhoud { min-width: 0; }
.sz-titel {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Het pad vóór de bestemming ("Instellingen › Maten"): gedempt, want het staat
   op elke tabregel hetzelfde en de tabnaam is waar je naar kijkt. Krimpt niet
   mee weg — bij een te lange regel hoort de NAAM af te kappen, niet de plek. */
.sz-pad { color: var(--text-muted); }
.sz-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.sz-sub-tekst {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rechterkolom: bedrag boven, datum of hotkey eronder — beide rechts uitgelijnd
   zodat de bedragen onder elkaar staan. */
.sz-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
  white-space: nowrap;
}
.sz-bedrag {
  font-size: 14px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sz-datum {
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Bij een snelle actie staan pulse en hotkey NAAST elkaar, niet onder elkaar:
   het zijn geen twee regels informatie maar één signaal plus één sneltoets. */
.sz-rechts.is-rij { flex-direction: row; align-items: center; gap: 8px; }

/* De pulses zelf komen uit het gedeelde patroon (.oms-pulse / .oms-pulse-geel);
   hier alleen de marge terugzetten die ze voor een tabelcel meekrijgen. */
.sz-pulse { margin-left: 0; }

.sz-hotkey {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  font-family: inherit;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* De zoekterm licht op in ELK veld waar hij voorkomt — dat is wat laat zien
   waaróm een regel in de lijst staat. Alleen kleur, geen gevulde achtergrond:
   een lijst vol gele blokjes leest niet meer als een lijst. */
.sz-mark {
  background: none;
  color: var(--color-primary);
  font-weight: 700;
}

/* De statusbadge is de generieke .badge uit dit bestand — dezelfde als op de
   lijstpagina's, zodat één order hier niet anders heet dan daar. Alleen iets
   compacter: hij staat in een subregel van 12,5px en niet in een tabelcel. */
.sz-sub .badge { padding: 1px 7px; font-size: 11px; }

.sz-status {
  padding: 26px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}
.sz-status-error { color: var(--color-danger); }

.sz-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-subtle);
  font-size: 11.5px;
  color: var(--text-muted);
  flex-shrink: 0;
  overflow-x: auto;
}
.sz-footer span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sz-footer kbd {
  display: inline-block;
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-size: 11px;
  font-family: inherit;
}

@media (max-width: 768px) {
  /* Op mobiel is de header te krap voor een invoerveld naast de paginatitel;
     het veld krimpt tot het vergrootglas en groeit uit zodra je erin klikt. */
  .sz-veld { width: 34px; padding: 0; justify-content: center; }
  .sz-veld .sz-input, .sz-veld-key { display: none; }
  .sz-veld.is-actief {
    position: absolute;
    right: 0;
    width: min(320px, calc(100vw - 90px));
    padding: 0 10px;
    justify-content: flex-start;
    background: var(--bg-modal);
    z-index: 61;
  }
  .sz-veld.is-actief .sz-input { display: block; }
  .sz-paneel { position: fixed; left: 8px; right: 8px; top: 56px; width: auto; transform: none; }
}

/* ── Het avatarbolletje (gedeeld) ─────────────────────────────────────────── */

.gebruiker-cel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.gebruiker-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  /* Wit op elk van de acht paletkleuren — die zijn allemaal donker genoeg. */
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  flex-shrink: 0;
}
.gebruiker-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Gebruikersmenu in de header ──────────────────────────────────────────── */

.header-username-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px 0 6px;
  background: none;
  /* De rand staat er ook in rust: hij maakt zichtbaar dát het een knop is.
     Bij hover verandert het vlak eronder, niet de rand — anders lijkt de knop
     bij elke muisbeweging van vorm te veranderen. */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  color: var(--text-primary);
  transition: background .15s ease, border-color .15s ease;
}
.header-username-btn:hover,
.header-username-btn[aria-expanded="true"] {
  background: var(--bg-card-hover);
  border-color: var(--color-primary);
}
/* Vorm en kleur komen uit .gebruiker-avatar — die kleur staat inline en is per
   persoon. Hier alleen het formaat: in de header mag het bolletje wat groter. */
.header-username-avatar { width: 26px; height: 26px; font-size: 11.5px; }
.header-username-naam {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-username-chevron { flex-shrink: 0; opacity: .6; }

.gebruiker-menu { min-width: 240px; }
.gm-kop { padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.gm-kop-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gm-kop-naam { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.gm-kop-rol  { font-size: 12px; color: var(--text-muted); }

/* De themaregel is geen menu-ITEM: er valt niets aan te klikken behalve de
   schakelaar zelf, dus hij krijgt ook geen hoverstand die een handeling belooft. */
.gm-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
}
.gm-rij-label { font-size: 13.5px; color: var(--text-primary); }

/* Dezelfde kleurtaal als in de sidebar-footer: rood = de sessie is voorbij. */
.gm-uitloggen { color: var(--color-danger); }
.gm-uitloggen svg { color: var(--color-danger); opacity: 1; }

/* Wie er écht ingelogd is, onder de kop van het gebruikersmenu. */
.gm-echt {
  padding: 0 12px 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* De donkerheid-popover hangt binnen dit paneel; hij mag er niet achter vallen. */
.gebruiker-menu .theme-popover { z-index: 10001; }

/* ── Sidebar-footer: één brede uitlogknop ─────────────────────────────────── */

.sidebar-actie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 10px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
  transition: background .15s ease;
}
.sidebar-actie svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-actie .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-actie-vol { flex: 1 1 100%; color: var(--color-danger); }
.sidebar-actie-vol:hover { background: rgba(239,68,68,0.10); }

/* Tijdens bekijken-als is uitloggen niet de handeling die je zoekt: je wilt
   terug naar je eigen rechten. Geel en niet rood — je komt terug. */
.sidebar-actie-terug { flex: 1 1 100%; color: var(--color-warning); }
.sidebar-actie-terug:hover { background: rgba(245,158,11,0.10); }

.sidebar.collapsed .sidebar-actie .nav-label { display: none; }

/* ── Bekijken als gebruiker ───────────────────────────────────────────────────
   Een beheerder zet het scherm tijdelijk op de rechten van iemand anders. De
   stand moet OPVALLEN: wie vergeet dat hij als een ander kijkt, trekt straks de
   verkeerde conclusie over wat wel en niet werkt. Vandaar een balk over de volle
   breedte in plaats van een pill in een hoek.

   Paars en niet oranje/rood: die twee zijn hier al bezet door de onderhouds- en
   de dev-balk, en drie waarschuwingskleuren die op elkaar lijken vertellen je
   niets meer. */

.bekijk-als-balk {
  position: fixed;
  left: 0; right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 12px;
  background: #6d28d9;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  box-sizing: border-box;
  min-height: 26px;
}
.bekijk-als-balk svg    { flex-shrink: 0; opacity: .9; }
.bekijk-als-balk span   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bekijk-als-balk strong { font-weight: 700; }

/* De weg terug staat ÍN de balk, want dat is de plek die je sowieso ziet.
   Anders dan de dev- en onderhoudsbalk is deze dus WEL aanklikbaar. */
.bekijk-als-balk-terug {
  flex-shrink: 0;
  padding: 2px 10px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-full, 999px);
  background: rgba(255,255,255,.12);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.bekijk-als-balk-terug:hover { background: rgba(255,255,255,.24); border-color: #fff; }

@media (max-width: 720px) {
  .bekijk-als-balk span { display: none; }
}

/* Het merkteken op het avatarbolletje is een paarse RING en geen paarse vulling:
   die vulling is de identiteitskleur van die persoon, en overschrijven zou het
   bolletje juist onherkenbaar maken. `outline` en geen `border`: dat verandert
   de maat niet. */
.header-username-avatar.is-bekijk-als {
  outline: 2px solid #6d28d9;
  outline-offset: 1.5px;
}

/* Een menu-item dat een submenu opent i.p.v. een handeling uitvoert: de chevron
   staat rechts en wijst de kant op waar het paneel verschijnt. */
.rd-submenu-knop { padding-right: 8px; }
.rd-submenu-chevron { margin-left: auto; opacity: .45; }
.rd-submenu-knop.is-open { background: var(--bg-card-hover); }

.bekijk-als-menu { min-width: 250px; max-width: 300px; }

.ba-zoek {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 4px 6px;
  padding: 0 9px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-card);
}
.ba-zoek svg { flex-shrink: 0; color: var(--text-muted); }
.ba-zoek input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
}

/* Scrollt binnen het menu i.p.v. het paneel tot buiten het scherm te laten
   groeien: op een instantie met dertig gebruikers valt de onderkant anders weg. */
.ba-lijst { max-height: 46vh; overflow-y: auto; }

.ba-item  { gap: 9px; padding: 7px 10px; }
.ba-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ba-naam  { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ba-rol   { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

.ba-melding {
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ba-melding.is-fout { color: var(--color-danger); }

/* ── Toast ────────────────────────────────────────────────────────────────── */

.oms-toast-host {
  position: fixed; right: 16px; bottom: 16px; z-index: 10000;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.oms-toast {
  max-width: 340px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-secondary, #10b981);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
  font-size: 13px; color: var(--text-primary);
  animation: omsToastIn .18s ease;
  transition: opacity .25s ease, transform .25s ease;
}
.oms-toast.is-fout { border-left-color: var(--color-danger, #c0392b); }
.oms-toast.is-weg  { opacity: 0; transform: translateY(6px); }
@keyframes omsToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Kiesmodal: een raster om één ding uit te kiezen ═════════════════════════
   GEDEELD component (?page=transfer-voorraad "Kies een transfer",
   ?page=dtf-planning "Voorraad toevoegen"). Opbouw 1-op-1 die van de
   artikel-picker in OMS (#productPickerModal): vaste hoogte, kop → zoekbalk →
   één scrollend raster dat tot de randen van de modal doorloopt. Voor een keuze
   uit honderden kaartjes is een gewone modal met een vakje van vier breed te
   klein — je scrolt dan door een lijst in plaats van te kijken.

   De basis-`.modal` heeft 26px padding en scrolt zelf; hier dragen de rijen hun
   eigen padding, anders loopt het raster niet tot de rand door. */
.picker-modal {
  width: 1520px; max-width: 96vw;
  height: 90vh; max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.picker-modal .modal-header {
  flex-shrink: 0; margin-bottom: 0;
  padding: 16px 20px; border-bottom: 1px solid var(--border-color);
}
.picker-modal .modal-footer {
  flex-shrink: 0; margin: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--border-color);
}
.picker-acties { display: flex; gap: 8px; margin-left: auto; }
.picker-keuze { font-size: 13px; color: var(--text-muted); min-width: 0; }
.picker-keuze.is-gekozen { color: var(--text-primary); font-weight: 600; }

/* De zoekbalk als eigen rij tussen kop en raster: hij hoort bij de hele modal.
   Het veld houdt zijn eigen maat en staat LINKS — een meegroeiend veld wordt
   over 1500px een baan voor een woord of drie. */
.picker-searchbar {
  flex-shrink: 0; display: flex; gap: 10px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--border-color);
  --picker-bar-h: 32px;
}
.picker-searchbar .search-wrap { position: relative; flex: 0 0 320px; max-width: 100%; }
.picker-searchbar .search-wrap .form-control {
  width: 100%; padding-left: 34px;
  height: var(--picker-bar-h); padding-top: 0; padding-bottom: 0;
  font-size: 13px;
}
.picker-searchbar .search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; width: 14px; height: 14px;
}
.picker-count { margin-left: auto; font-size: 12px; color: var(--text-muted); }

/* Alleen het raster scrolt, niet de modal. */
.picker-main { flex: 1; min-height: 0; display: flex; }
.picker-results {
  flex: 1; min-height: 200px; overflow-y: auto; padding: 16px 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; align-content: start;
  /* Zonder dit krimpen de rijen tot 0 zodra de kaarten niet meer in de hoogte
     passen: een item met overflow:hidden heeft minimumhoogte 0 en een grid met
     vaste hoogte geeft auto-rijen dan geen ruimte meer. */
  grid-auto-rows: max-content;
}
.picker-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted);
}

/* Liften bij hover in plaats van een randkleur, zodat het raster als één vlak
   leest en niet als losse vakjes. De GEKOZEN kaart krijgt wél een rand — dat is
   een stand en geen aanwijzing. */
.picker-card {
  position: relative; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-card);
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .15s;
}
.picker-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.picker-card.is-gekozen {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
/* `contain` en niet `cover`: een logo is zelden vierkant en met cover valt het
   deels buiten het kaartje. Wit eronder, want een transfer met transparantie
   verdwijnt op een grijze ondergrond. */
.picker-card-img {
  aspect-ratio: 1; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.picker-card-img img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; padding: 10px; box-sizing: border-box;
}
.picker-card-img svg { color: var(--border-color); }
.picker-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
/* Titels wrappen (geen ellipsis): het onderscheid tussen twee designs van
   dezelfde klant zit vaak juist in het staartje van de naam. */
.picker-card-name { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.picker-card-sub  { font-size: 11px; color: var(--text-muted); }
.picker-card-nr {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .picker-searchbar { flex-wrap: wrap; }
  .picker-searchbar .search-wrap { flex: 1 1 100%; }
  .picker-count { margin-left: 0; }
}

/* Garenkleur / 1-kleur transferkleur als blokje met nummer (garenChipsHtml in js/format-helpers.js) */
/* Hoogstens 4 per regel; --garen-n is het aantal (max 4) zodat er geen lege kolommen ontstaan. */
.garen-chips { display: inline-grid; grid-template-columns: repeat(var(--garen-n, 4), max-content); gap: 4px; vertical-align: middle; }
.garen-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px 1px 2px; border: 1px solid var(--border-color); border-radius: 4px;
  background: var(--bg-card); color: var(--text-primary);
  font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; vertical-align: middle;
}
.garen-blok {
  display: inline-block; width: 12px; height: 12px; flex-shrink: 0;
  border-radius: 3px; border: 1px solid rgba(0,0,0,.25); background: #d4d4d8;
}
.garen-chip.is-onbekend .garen-blok { background: repeating-linear-gradient(45deg, #d4d4d8 0 3px, #f4f4f5 3px 6px); }
.card-tooltip-value .garen-chips { justify-content: end; }

/* Achtergrond achter de logo's — js/design-img-bg.js zet de kleur per gebruiker */
:root { --design-img-bg: #D9DCE1; }
.design-img-wrap { position: relative; }
.dib-knop {
  position: absolute; bottom: 5px; right: 5px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; border: 2px solid #fff; background: var(--design-img-bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer; opacity: .6; transition: opacity .15s;
}
.design-img-wrap:hover .dib-knop, .dib-knop:focus-visible { opacity: 1; }
.dib-auto { background: conic-gradient(#1877F2 0 25%, #E3262F 0 50%, #1FA34A 0 75%, #111 0); }
.dib-menu {
  position: fixed; z-index: 9999; display: flex; gap: 6px; padding: 7px;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.dib-menu[hidden] { display: none; }
.dib-staal {
  position: relative; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.2); cursor: pointer; overflow: hidden;
}
.dib-staal.active { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--color-primary); }
.dib-eigen { background: conic-gradient(#E3262F, #FF8A00, #FFD400, #1FA34A, #1877F2, #8B3DFF, #E3262F); }
.dib-eigen input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }