/* ===== OMS — CORE STYLESHEET ===== */
/* Design-systeem componenten. Kleiner en gerichter dan PMS' monolithische
   stylesheet — alleen wat OMS' huidige pagina's daadwerkelijk gebruiken. */

* { box-sizing: border-box; }
html { touch-action: manipulation; }
html, body {
  margin: 0; padding: 0;
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg-page);
  color: var(--text-primary);
}
img { display: block; max-width: 100%; }
a { color: var(--text-link); }

/* Het HTML-attribuut `hidden` moet altijd winnen. De UA-regel `[hidden]{display:none}`
   verliest namelijk van elke component-regel met een eigen display (bijv.
   `.btn{display:inline-flex}`), waardoor `el.hidden = true` in JS niets leek te doen. */
[hidden] { display: none !important; }

/* ===== LAYOUT ===== */
body.app-layout { min-height: 100vh; }

.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); border-right: 1px solid var(--border-color);
  display: flex; flex-direction: column;
  transition: width .28s cubic-bezier(.4,0,.2,1); z-index: 50;
  box-shadow: 4px 0 20px rgba(0,0,0,.06);
  /* Geen overflow:hidden hier — laat de toggle-knop uitsteken */
}

/* Alleen het nav-scrollgebied clippen, niet de hele sidebar */
.sidebar-logo,
.sidebar-footer {
  overflow: hidden;
}

.sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-user-info { display: none; }

/* 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 {
  height: var(--header-height); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-bottom: 1px solid var(--border-color);
  font-weight: 600; font-size: 16px; color: var(--text-heading);
  white-space: nowrap; overflow: hidden;
  flex-shrink: 0;
}
.sidebar.collapsed .sidebar-logo { padding: 0; justify-content: center; }

/* Geüpload menu-logo (Instellingen → Bedrijfsgegevens → Logo's). Toont de
   licht/donker-variant afhankelijk van het actieve thema. */
.sidebar-logo-img { max-height: 32px; max-width: 100%; object-fit: contain; }
:root[data-theme="dark"] .sl-light { display: none; }
:root[data-theme="light"] .sl-dark { display: none; }
/* Standaard (geen data-theme) = licht */
:root:not([data-theme="dark"]) .sl-dark { display: none; }

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0;
}

/* Sectiekop in de sidebar (Relaties, Verkoop, …). Zelfde opzet als PMS:
   klein, uppercase, ruim gespatieerd — en gedempt via opacity op
   --text-sidebar, want --text-muted keert in dark mode juist om naar licht. */
.nav-section-label {
  padding: 10px 18px 3px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-sidebar);
  opacity: 0.55;
  white-space: nowrap; overflow: hidden;
  transition: opacity 0.2s;
}
.sidebar.collapsed .nav-section-label { opacity: 0; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; margin: 0 8px;
  border-radius: var(--radius-md);
  color: var(--text-sidebar); text-decoration: none;
  font-family: inherit; font-size: 13.5px; font-weight: 400;
  transition: background .15s, color .15s;
  white-space: nowrap; overflow: hidden;
  cursor: pointer; border: none; background: none; width: calc(100% - 16px); text-align: left;
  position: relative;
}
.nav-item:hover { background: var(--bg-sidebar-hover); color: var(--color-primary); }
.nav-item.active { background: var(--bg-sidebar-active); color: var(--text-sidebar-active, #fff); }
.nav-icon { flex-shrink: 0; width: 18px; height: 18px; }

/* --- Dropdown --- */

.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-chevron { transform: rotate(180deg); }

.nav-dropdown-content {
  overflow: hidden;
  max-height: 0;
  padding-left: 8px;
  transition: max-height 0.28s ease;
}
.nav-dropdown-content.open { max-height: 600px; }

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

.nav-sub-item {
  display: block; padding: 5px 14px 5px 38px; margin: 0 8px;
  border-radius: var(--radius-md); color: var(--text-sidebar); text-decoration: none;
  font-size: 13px; font-weight: 400; transition: background .15s, color .15s;
}
.nav-sub-item:hover { background: var(--bg-sidebar-hover); color: var(--color-primary); }
.nav-sub-item.active { background: var(--bg-sidebar-active); color: var(--text-sidebar-active, #fff); }

/* --- Snel zoeken knop --- */

button.nav-item.nav-search-btn {
  margin-bottom: 10px;
  color: var(--text-muted);
  border: 1.5px solid var(--text-muted);
  border-radius: var(--radius-md);
}
button.nav-item.nav-search-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-sidebar-hover);
}
.nav-search-slash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--text-muted);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  flex-shrink: 0;
  color: var(--text-muted);
}

/* --- Snel zoeken overlay --- */

.sz-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
}
.sz-panel {
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 580px;
  overflow: hidden;
}
.sz-bar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
}
.sz-slash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 1.5px solid var(--border-input);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  color: var(--text-muted);
  flex-shrink: 0;
}
.sz-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}
.sz-input::placeholder { color: var(--text-muted); }
.sz-esc {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-family: inherit;
  flex-shrink: 0;
}
.sz-results { max-height: 340px; overflow-y: auto; }
.sz-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background .1s;
}
.sz-item:last-child { border-bottom: none; }
.sz-item:hover,
.sz-item.sz-focused { background: var(--bg-table-row-hover); }
.sz-num {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-primary);
  min-width: 58px;
  flex-shrink: 0;
}
.sz-klant {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  flex-shrink: 0;
}
.sz-refs {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sz-ref-label { color: var(--text-muted); font-size: 11.5px; }
.sz-noref { color: var(--text-muted); font-style: italic; }
.sz-status-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.sz-status-badge.sz-status-nieuw      { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-light); }
.sz-status-badge.sz-status-ingepland  { color: var(--color-warning); border-color: var(--color-warning); background: rgba(245,158,11,.12); }
.sz-status-badge.sz-status-productie  { color: var(--color-orange); border-color: var(--color-orange); background: rgba(249,115,22,.12); }
.sz-status-badge.sz-status-gereed     { color: var(--color-secondary); border-color: var(--color-secondary); background: rgba(16,185,129,.12); }
.sz-status-badge.sz-status-archief    { color: var(--text-muted); border-color: var(--border-color); background: var(--bg-subtle); }
.sz-status {
  padding: 20px 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: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-color);
  font-size: 11.5px;
  color: var(--text-muted);
}
.sz-footer kbd {
  display: inline-block;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-size: 11px;
  font-family: inherit;
  margin-right: 3px;
}

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

button.nav-item.nav-feedback-btn {
  margin-bottom: 6px;
  color: var(--color-danger);
  border: 1.5px dashed var(--color-danger);
  background: transparent;
}
button.nav-item.nav-feedback-btn:hover {
  color: var(--color-danger);
  background: rgba(239,68,68,.1);
}

/* --- Toggle knop (collapse) --- */

.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 (gebruikersinfo) --- */

.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-user-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sidebar-user-role {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: capitalize;
  margin-top: 1px;
}

.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: var(--color-danger); }
.sidebar-logout-btn svg { width: 17px; height: 17px; }

.main-content {
  margin-left: var(--sidebar-width);
  transition: margin-left .28s cubic-bezier(.4,0,.2,1);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.main-content.sidebar-collapsed { margin-left: var(--sidebar-collapsed-width); }

.app-header {
  height: var(--header-height); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--bg-header); border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; z-index: 40;
  gap: 16px;
}
.app-header h1 { font-size: 18px; font-weight: 700; margin: 0; color: var(--text-heading); }
.app-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-header-right { display: flex; align-items: center; gap: 14px; }

/* 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; }

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

.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: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.page-content { flex: 1; padding: 12px; width: 100%; }

.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 45;
}
.sidebar-overlay.active { display: block; }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .28s; }
  .sidebar.mobile-open { transform: translateX(0); }
  .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-label {
    display: inline;
  }
  .sidebar.collapsed .sidebar-user-info {
    display: flex;
  }
  .sidebar.collapsed .sidebar-logo {
    padding: 0 16px;
    justify-content: flex-start;
  }
  .sidebar.collapsed .nav-dropdown-content.open { display: block; }

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

  /* Op mobiel alleen hamburger + paginatitel + thema-toggle tonen — te weinig
     ruimte voor account-naam en datum/week-widget. */
  .header-username,
  .header-datum {
    display: none;
  }
}

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-header h2 { font-size: 22px; font-weight: 700; margin: 0; color: var(--text-heading); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border-color); background: transparent;
  color: var(--text-primary); line-height: 1; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .12s, border-color .15s;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--bg-card-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: transparent; color: var(--text-secondary); }
.btn-success { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-ghost { border: none; background: none; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 12px 28px; font-size: 15px; }
.btn-full { width: 100%; }
.btn-icon { padding: 8px; width: 34px; height: 34px; }

/* Hotkey-badge in een knop (bijv. "N" voor + Nieuwe klant) — zie .sz-esc voor het analoge patroon in snel-zoeken */
.btn-hotkey {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.4);
  font-size: 11px; font-weight: 600; line-height: 1;
  opacity: .85;
}
.btn-secondary .btn-hotkey,
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success) .btn-hotkey {
  border-color: var(--border-color); color: var(--text-muted);
}

/* ===== CARDS ===== */
.card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 15px; box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px;
}
.card-title { font-size: 15px; font-weight: 700; color: var(--text-heading); margin: 0; }

/* ===== FORMS ===== */
.form-control, .form-input, .form-select, textarea.form-control {
  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; line-height: 1.5; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-input:focus, .form-select:focus {
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(24,153,255,.12);
}
.form-control.is-invalid { border-color: var(--color-danger); }
.form-control[readonly] { background: var(--bg-table-header); color: var(--text-muted); cursor: not-allowed; }
.form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-label .required { color: var(--color-danger); }
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A6070' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.zoek-wrap { position: relative; max-width: 340px; }
.zoek-wrap input { padding-left: 34px; }
.zoek-wrap::before {
  content: ''; position: absolute; left: 11px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%);
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 104.47 10.03l4.75 4.75a1 1 0 001.42-1.42l-4.75-4.75A6 6 0 0010 4zm-4 6a4 4 0 118 0 4 4 0 01-8 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 104.47 10.03l4.75 4.75a1 1 0 001.42-1.42l-4.75-4.75A6 6 0 0010 4zm-4 6a4 4 0 118 0 4 4 0 01-8 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== TABLES ===== */
table.data-table { width: 100%; border-collapse: collapse; margin: 12px 0 0 0; }
.data-table thead th {
  background: var(--bg-table-header); padding: 10px 16px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color); text-align: left;
}
.data-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-color); font-size: 13.5px; }
.data-table tbody tr:hover td { background: var(--bg-table-row-hover); }
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table tbody tr.is-inactief td { opacity: .55; }

/* ── Page toolbar — gedeelde filterbalk layout (zie PMS ?page=orderoverzicht) ── */
.page-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar-search {
  position: relative;
  width: 320px;
  flex-shrink: 0;
}
.toolbar-search > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .45;
}
.toolbar-search .form-control {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 32px;
}

/* ── Lijstpagina-patroon: card met icoon + naam boven een data-table
   (zie PMS .order-card-head / ?page=klanten). Standaard voor elke nieuwe
   overzichtspagina: zoekbalk-toolbar in een aparte card erboven, dan deze
   card met de tabel. Zie OMS/CLAUDE.md voor de volledige conventie. ── */
.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; }

/* ===== MODALS ===== */
/* Vergrendelt de pagina erachter zodra een modal open is — anders scrollt de
   body onder de (fixed) overlay mee door als er over de overlay gescrold
   wordt buiten de .modal zelf, wat de scrollpositie ongemerkt verspringt. */
body.modal-open { overflow: hidden; }
.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 .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(.99);
  transition: transform .22s cubic-bezier(.34,1.56,.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; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-heading); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 20px; line-height: 1; padding: 4px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ===== Keuzetegels (.keuze-tegels / .keuze-tegel) =====
   Eén-uit-meer als tegels onder elkaar, met per optie ruimte voor een icoon en
   een regel uitleg. Bewust géén .kn-seg (die is compact en heeft geen plek voor
   uitleg) en geen kale radio's: waar de opties niet vanzelf spreken — "bewerker",
   "tampondruk" — moet de toelichting meelezen.

   De aan-stand zit in `aria-pressed` op de knop, niet in een klasse: de tegel
   ís een toggle, en dan hoort de schermlezer dat ook te horen. Wie de tegels
   vult regelt zelf welke er aan staat.

   Icoon en uitleg zijn OPTIONEEL — laat het element gewoon weg. Het vinkrondje
   hoort er wel altijd bij: een tegel zónder leest als een knop.

   Staat hier en niet bij een pagina: gebruikt door de rolkeuze op
   ?page=leveranciers en de typekeuze in de bewerkingen-modal (order-detail +
   klantenkaart). Wijzig je iets, kijk dan naar alle drie. */
.keuze-tegels { display: grid; gap: 8px; }
.keuze-tegel {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    border-radius: var(--radius-md);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.keuze-tegel:hover { border-color: var(--color-primary); }
.keuze-tegel:focus-visible {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(24, 153, 255, .12);
}
.keuze-tegel-icoon {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--text-muted);
    transition: background .15s, color .15s;
}
.keuze-tegel-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.keuze-tegel-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.keuze-tegel-uitleg { font-size: 11.5px; color: var(--text-muted); }
/* Leeg keuzerondje zolang de tegel uit staat. ROND en niet vierkant — dit is
   één-uit-meer, en een vierkant vinkvakje belooft dat je er meerdere kunt
   aanzetten. */
.keuze-tegel-vink {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border: 1px solid var(--border-input); border-radius: 50%;
    background: var(--bg-input);
    color: #fff;
    transition: background .15s, border-color .15s;
}
.keuze-tegel-vink svg { opacity: 0; transition: opacity .12s; }
.keuze-tegel[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: rgba(24, 153, 255, .08);
}
.keuze-tegel[aria-pressed="true"] .keuze-tegel-icoon {
    background: rgba(24, 153, 255, .16); color: var(--color-primary);
}
.keuze-tegel[aria-pressed="true"] .keuze-tegel-vink {
    background: var(--color-primary); border-color: var(--color-primary);
}
.keuze-tegel[aria-pressed="true"] .keuze-tegel-vink svg { opacity: 1; }

/* ===== Segmented control (.kn-seg) =====
   Keuze uit 2+ opties als aaneengesloten tegels i.p.v. een select of losse
   radio's: beide opties blijven zichtbaar, dat scheelt een klik en leest
   sneller. Generiek hier (niet in klanten.css) omdat meerdere pagina's het
   delen: de bewerk-modals op ?page=klant-detail en ?page=order-detail, en de
   bestemming-velden uit js/levering-details.js (order-detail + inkomend-textiel). */
.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 knop tekent zijn eigen linkerrand weer, anders valt de
   gekleurde rand aan die kant weg tegen de buurknop. */
.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); }
.kn-seg-btn.is-disabled, .kn-seg-btn:disabled {
    opacity: .5; cursor: not-allowed;
    background: var(--bg-subtle); color: var(--text-muted);
}
.kn-seg-btn.is-disabled:hover, .kn-seg-btn:disabled:hover { border-color: var(--border-input); color: var(--text-muted); }

/* Variant voor meer opties dan er naast elkaar passen (5+ tegels in een halve
   modalkolom): de tegels wikkelen over meerdere rijen en staan los van elkaar.
   Aaneengesloten kan hier niet — de radius- en randregels hierboven gaan uit
   van één rij en laten bij het wikkelen kapotte hoeken achter. */
.kn-seg.kn-seg-rijen {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 6px;
}
.kn-seg.kn-seg-rijen .kn-seg-btn {
    border-left-width: 1px;
    border-radius: var(--radius-md);
}

/* ===== TOOLTIP + PULSE (js/tooltip.js) ===== */
/* Directe tooltip op elk element met data-tip; verschijnt zonder de ~1s
   vertraging van de native title. white-space:pre-line houdt een opsomming
   met \n intact. Poort van KMS' #kmsTip. */
#omsTip {
  position: fixed;
  background: #1e293b; color: #fff;
  font-size: 11px; font-weight: 500;
  padding: 5px 9px; border-radius: 4px;
  pointer-events: none; opacity: 0; transition: opacity .1s;
  z-index: 10000; white-space: pre-line; line-height: 1.5;
  max-width: 320px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Pulserende "!" bij een aandachtspunt (ontbrekende gegevens) — poort van KMS' .kms-pulse. */
@keyframes omsPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
  70%  { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(220,38,38,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.oms-pulse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-danger); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  flex-shrink: 0; cursor: help;
  animation: omsPulse 1.6s ease-out infinite;
}
/* Naast een waarde in een tabelcel of kaartkop i.p.v. in een flex-rij — zelfde
   uitlijning als .oms-pulse-geel, zodat de twee naast elkaar netjes staan. */
.oms-pulse-inline { vertical-align: middle; margin-left: 7px; }

/* Gele variant van .oms-pulse: zelfde formaat (18px rondje met wit icoon), maar
   geel en met het waarschuwingsdriehoekje in plaats van de "!". Vraagt aandacht
   zonder te alarmeren (rood). Gebruikt op ?page=orders om te tonen dat een order
   afwijkt van de verstuurde orderbevestiging. */
@keyframes omsPulseGeel {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245,158,11,.55); }
  70%  { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(245,158,11,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.oms-pulse-geel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-warning); color: #fff;
  flex-shrink: 0; cursor: help;
  vertical-align: middle; margin-left: 7px;
  animation: omsPulseGeel 1.6s ease-out infinite;
}
.oms-pulse-geel svg { width: 11px; height: 11px; display: block; }

/* ===== BADGES & ALERTS ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: var(--radius-full); font-size: 11.5px; font-weight: 700; 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; }
[data-theme="dark-v2"] .badge-blue { background: rgba(30,58,138,.3); color: #bfdbfe; }
[data-theme="dark-v2"] .badge-green { background: rgba(6,95,70,.3); color: #a7f3d0; }
[data-theme="dark-v2"] .badge-yellow { background: rgba(120,53,15,.3); color: #fde68a; }
[data-theme="dark-v2"] .badge-red { background: rgba(159,18,57,.3); color: #fecdd3; }
[data-theme="dark-v2"] .badge-gray { background: rgba(255,255,255,.08); color: #cbd5e1; }

/* ===== SEGMENTED TOGGLE (.seg-toggle) =====
   Weergavekeuze binnen één scherm: de knoppen liggen als tabletjes in een
   grijze goot, de actieve licht als "kaartje" op. Anders dan .korting-switch
   (die een WAARDE kiest die je opslaat) en dan .dtf-tab-bar (die van inhoud
   wisselt): dit filtert alleen wat je van dezelfde inhoud ziet.
   Origineel uit dashboard.css (takentabs), nu generiek — ?page=order-detail
   gebruikt hem voor Eenvoudig/Uitgebreid in het orderverloop. De JS zet
   `.active`; hier staat alleen de opmaak. */
.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);
}

/* ===== SEGMENTED SWITCH =====
   Generieke keuzeschakelaar (korting-type, order/offerte, ...): een rij knoppen
   waarvan er precies één `.active` is. De JS zet die class; hier staat alleen
   de opmaak. Origineel uit klantenkaart.css, nu generiek zodat elke pagina hem
   kan gebruiken zonder de regels te dupliceren. */
.korting-switch { display: flex; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 8px; }
.korting-switch-btn {
    flex: 1; padding: 6px 4px; border: none; border-right: 1px solid var(--border-color);
    background: var(--bg-card); cursor: pointer; font-size: 12px; font-weight: 500;
    color: var(--text-secondary); transition: background .15s, color .15s; white-space: nowrap;
}
.korting-switch-btn:last-child { border-right: none; }
.korting-switch-btn:hover { background: var(--bg-subtle); }
.korting-switch-btn.active { background: var(--color-primary); color: #fff; font-weight: 600; }

.alert { padding: 13px 16px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 13.5px; display: flex; gap: 10px; border-left: 3px solid transparent; }
.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); }

/* ===== VELD-MELDINGEN (hint / suggestie / fout) ==============================
 * Eén set klassen voor alles wat onder een invoerveld verschijnt. Ontstaan als
 * .whi-hint/.whi-suggestie in de Webharvester-import op ?page=order-detail;
 * hier generiek gemaakt zodat elke plek waar het systeem iets vóórstelt of iets
 * mist er hetzelfde uitziet. Zet de melding met veldHint()/veldSuggestie()/
 * veldFout() uit js/app.js — niet met eigen innerHTML per pagina.
 *
 *   .veld-hint                  neutrale toelichting (grijs, geen kader)
 *   .veld-hint.is-fout          zelfde vorm, rode tekst (korte veldfout)
 *   .veld-hint.is-suggestie     AMBER kader: een gók van het systeem die de
 *                               gebruiker moet nakijken — bewust niet groen,
 *                               want groen leest als "bevestigd"
 *   .veld-hint.is-foutmelding   RODE kader: dezelfde vorm voor wat ontbreekt of
 *                               misging en waar de gebruiker iets aan moet doen
 * ------------------------------------------------------------------------- */
.veld-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; min-height: 1px; }
.veld-hint.is-fout { color: var(--color-danger, #c0392b); }

.veld-hint.is-suggestie,
.veld-hint.is-foutmelding {
  position: relative;
  margin-top: 6px;
  padding: 7px 26px 7px 9px;
  font-size: 12px; line-height: 1.5;
  color: var(--text-primary);
  border-radius: var(--radius-md, 6px);
}
.veld-hint.is-suggestie {
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .40);
}
/* Geen sluitknop op een foutmelding → geen ruimte rechts reserveren. */
.veld-hint.is-foutmelding {
  padding-right: 9px;
  background: rgba(192, 57, 43, .10);
  border: 1px solid rgba(192, 57, 43, .38);
}
.veld-hint .vh-naam { font-weight: 700; }
.veld-hint .vh-hint { color: var(--text-muted); }
.veld-hint .vh-sluit {
  position: absolute; top: 4px; right: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 2px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); border-radius: var(--radius-sm, 4px);
}
.veld-hint .vh-sluit:hover { color: var(--text-primary); background: rgba(0, 0, 0, .06); }

/* Rode outline om een verplicht veld dat leeg is. Werkt op de gewone inputs, op
   de toggle van een zoekbare select (die draagt de rand) en op het kleurgrid van
   de import. Zetten/wissen via veldMarkeer() in js/app.js. De losse kleurkiezer
   heeft hier zijn eigen .is-invalid voor — zie js/kleur-picker.js. */
.form-control.veld-mis,
.artikel-dropdown-toggle.veld-mis,
.kleur-sel-grid.veld-mis {
  border-color: var(--color-danger, #c0392b);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}
/* Een segmented control heeft zelf geen rand — die zit op de knoppen. De outline
   moet dus om de hele groep heen, anders krijgt elke tegel een eigen rode rand en
   leest het als drie fouten in plaats van één onbeantwoorde vraag. */
.kn-seg.veld-mis {
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
  outline: 1px solid var(--color-danger, #c0392b);
}

/* Verplicht-sterretje in een label. Ook buiten .form-label: een segmented control
   staat soms achter een gewone <span> als opschrift. */
.form-label .veld-verplicht,
.veld-verplicht { color: var(--color-danger, #c0392b); }

/* ===== TOAST (omsToast() in js/app.js) ======================================
 * Korte bevestiging rechtsonder voor acties waarbij verder niets zichtbaar
 * verandert. Meldingen stapelen van onder naar boven.
 * ------------------------------------------------------------------------- */
.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); }
}

/* ===== RIJ-ACTIEMENU (3 puntjes + dropdown) ==================================
 * Port van KMS' .kms-row-menu / .kms-dropdown (?p=admin-producten). Eén knop per
 * tabelrij die een gedeeld dropdown-paneel opent; het paneel staat ÉÉN keer op de
 * pagina, buiten de tabel, en wordt bij het openen naar de knop toe gepositioneerd.
 *
 * `position: fixed` is daarvoor nodig: een absoluut gepositioneerd paneel binnen
 * een `overflow`-scrollende tabel wordt afgeknipt. Openen/sluiten via
 * rowMenuOpen()/rowMenuHide() in js/app.js.
 * ------------------------------------------------------------------------- */
.row-menu-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  width: 30px; height: 30px; padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.row-menu-btn:hover, .row-menu-btn.is-open {
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.row-menu-dots { display: flex; gap: 3px; align-items: center; }
.row-menu-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; }

.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; }
.row-dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }
.row-dropdown-danger { color: var(--color-danger, #c0392b); }
.row-dropdown-danger svg { opacity: 1; color: var(--color-danger, #c0392b); }

/* ===== KLIK-EN-HOUD-VAST (initHoldActie in js/app.js) =====
   De balk loopt achter de inhoud langs en kleurt mee met de knop
   (currentColor), zodat dezelfde klasse op een rode én een neutrale knop
   werkt. touch-action: none houdt het vasthouden op mobiel bij de knop i.p.v.
   dat het als scroll wordt opgevat. */
.hold-knop {
  position: relative;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.hold-knop > * { position: relative; z-index: 1; }
.hold-vulling {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 0;
  width: 0;
  background: currentColor;
  opacity: .18;
  border-radius: inherit;
  pointer-events: none;
  transition: width 140ms linear;
}
.hold-knop.is-bezig { background: color-mix(in srgb, currentColor 8%, transparent); }
.hold-hint {
  margin-left: auto;
  padding-left: 10px;
  font-size: 11.5px;
  opacity: .7;
  white-space: nowrap;
}
/* Bewust géén prefers-reduced-motion-uitzondering: de balk is geen versiering
   maar de voortgang zelf — zonder animatie staat hij meteen vol terwijl de
   actie nog niet is bevestigd. */

/* ===== EMPTY STATE ===== */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; text-align: center; color: var(--text-muted);
}
.empty-state svg { opacity: .4; margin-bottom: 16px; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--text-secondary); margin: 0 0 6px; }
.empty-state p { font-size: 13.5px; margin: 0; max-width: 360px; }

/* ===== LOGIN ===== */
body.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-page); padding: 20px;
}
.theme-toggle-fixed { position: fixed; top: 20px; right: 20px; z-index: 10; }
.login-card {
  display: flex; width: 100%; max-width: 900px; min-height: 520px;
  background: var(--bg-card); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-color);
}
.login-left {
  flex: 1; background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; padding: 48px 40px; display: flex; flex-direction: column; justify-content: space-between;
}
.login-left h1 { font-size: 26px; font-weight: 700; margin: 0 0 12px; }
.login-left p { font-size: 14px; opacity: .9; margin: 0 0 24px; }
.login-feature-list { list-style: none; padding: 0; margin: 0; }
.login-feature-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13.5px; opacity: .95; }
.login-right { flex: 1; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.login-right h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--text-heading); }
.login-right .sub { color: var(--text-secondary); font-size: 13.5px; margin: 0 0 26px; }
@media (max-width: 720px) { .login-card { flex-direction: column; } .login-left { display: none; } }

/* ===== SETTINGS ===== */
.settings-layout {
  display: flex; gap: 24px; align-items: flex-start;
  min-height: calc(100vh - var(--header-height) - 24px - var(--dev-bar-offset, 0px));
}
.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-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; }
/* .nav-section-label wordt generiek gestyled bij de sidebar-nav bovenin. */
.settings-sidenav .nav-item { color: var(--text-sidebar); border-radius: 0; margin: 0; width: 100%; }
.settings-sidenav .nav-item.active { color: var(--text-sidebar-active, #fff); }
.settings-content { flex: 1; min-width: 0; }
@media (max-width: 900px) { .settings-layout { flex-direction: column; min-height: 0; } .settings-sidenav { width: 100%; } }

/* ===== CONTACT ROWS (klant-detail) ===== */
.contact-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 8px;
}
.contact-row-line1, .contact-row-line2 { display: flex; gap: 10px; align-items: center; }
.contact-row-line1 > input, .contact-row-line2 > input { flex: 1; min-width: 0; }
@media (max-width: 800px) { .contact-row-line1 { flex-direction: column; align-items: stretch; } }

/* Tekstweergave (niet-bewerk-modus) van naam/telefoon/e-mail — zelfde ruimte als de inputs */
.contact-naam-text, .contact-tel-text, .contact-email-text {
  font-size: 13.5px; color: var(--text-primary);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Vinkje ("Opslaan") en prullenbak ("Verwijderen") van een contactrij. Primair
   maken, Bewerken en Verwijderen van een OPGESLAGEN rij zitten achter de 3
   puntjes (.contact-acties-btn → #contactActiesMenu); de prullenbak hieronder
   is alleen nog die van een nieuwe, nog niet opgeslagen rij. */
/* Badge rechtsboven bij een primaire contactpersoon — gedeeld door de read-only
   kaart "Levering & contact" (.contact-lees-naam) en de rijen in de bewerk-modal
   (.contact-row-line1). Bewust niet absoluut gepositioneerd: in bewerk-modus
   vullen de invoervelden die regel en zou een overlay er bovenop komen. */
.contact-primair-badge { flex-shrink: 0; margin-left: auto; }
.contact-primair-badge svg { width: 11px; height: 11px; }
@media (max-width: 800px) {
  /* Regel 1 van een modalrij wordt hier een kolom (align-items: stretch) —
     zonder dit rekt de badge over de volle breedte uit. */
  .contact-row-line1 .contact-primair-badge { align-self: flex-end; margin-left: 0; }
}
/* Groen: het vinkje bevestigt een wijziging en moet in een rij vol grijze
   iconen als de afsluitende actie opvallen. */
.btn-opslaan-contact { color: var(--color-secondary); flex-shrink: 0; }
.btn-opslaan-contact:hover { color: var(--color-secondary-hover); background: rgba(16, 185, 129, .10); }
.btn-verwijder-contact {
  background: var(--color-danger); border-color: var(--color-danger); color: #fff; flex-shrink: 0;
}
.btn-verwijder-contact:hover { background: var(--color-danger-hover); }

/* Info grid (detail-overzicht rijen) — overgenomen van PMS css/style.css */
.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;
}

/* Meerdere regels binnen 1 info-value (bijv. naam/straat/postcode-plaats van een afleveradres). */
.info-value-pre { white-space: pre-line; }

/* ===== Kopieerknop (omsKopieer + de listener in js/app.js) =====
   Alleen een icoon; het vinkje vervangt het kopieer-icoon kort na een geslaagde
   kopie. Staat naast een waarde, dus flex-start: bij een adres over meerdere
   regels hoort hij op de eerste regel te blijven staan. */
.kopieer-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: flex-start;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.kopieer-btn:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-color); }
.kopieer-btn .kopieer-icoon, .kopieer-btn .kopieer-vink { display: flex; }
.kopieer-btn .kopieer-vink { display: none; }
.kopieer-btn.is-gekopieerd { color: var(--color-secondary); }
.kopieer-btn.is-gekopieerd .kopieer-icoon { display: none; }
.kopieer-btn.is-gekopieerd .kopieer-vink { display: flex; }
/* Niets te kopiëren = geen knop. Via :empty i.p.v. een JS-toggle, zodat een
   waarde die door JS gevuld of geleegd wordt vanzelf goed staat. */
.info-value:empty + .kopieer-btn, .info-value-pre:empty + .kopieer-btn { display: none; }

/* Rechts uitgelijnde waarden voor specifieke detailkaarten (klant-detail) */
.card-values-right .info-value { text-align: right; }

/* ===== UTILITIES ===== */
.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-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.save-status { font-size: 12px; color: var(--color-secondary); opacity: 0; transition: opacity .2s; }
.save-status.visible { opacity: 1; }

/* Toggle switch (schuif) — gemodelleerd naar PMS' .pms-switch */
.oms-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.oms-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.oms-switch-track { position: relative; width: 38px; height: 21px; border-radius: 999px; background: var(--border-color); transition: background .2s; flex-shrink: 0; }
.oms-switch input:checked + .oms-switch-track { background: var(--color-primary); }
.oms-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; }
.oms-switch input:checked + .oms-switch-track .oms-switch-thumb { transform: translateX(17px); }
.oms-switch input:focus-visible + .oms-switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.oms-switch-label { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }

/* Sleepbare tabelrijen (drag-to-reorder) — gemodelleerd naar PMS' .pos-parent-row */
.drag-handle { cursor: grab; color: var(--text-muted); }
tr.dragging { opacity: .4; }
tr.drag-over { box-shadow: inset 0 2px 0 var(--color-primary); background: var(--bg-table-row-hover); }

/* ===== FEEDBACK MODAL ===== */
.feedback-type-btn { display: inline-flex; align-items: center; }

.btn.feedback-type-bug {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn.feedback-type-bug.active,
.btn.feedback-type-bug:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}
/* ── Zoekbare select-dropdown (js/select-dropdown.js) — gedeeld, gebruik voor ALLE nieuwe selects ── */
.artikel-dropdown { position: relative; }
.artikel-dropdown-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-input); background: var(--bg-input);
    color: var(--text-primary); cursor: pointer; font-size: .875rem;
    min-height: 36px; user-select: none;
}
.artikel-dropdown-toggle:hover { border-color: var(--color-primary); }
.artikel-dropdown-toggle .artikel-caret {
    width: 14px; height: 14px; opacity: .5; flex-shrink: 0; margin-left: 6px;
    transition: transform .15s;
}
.artikel-dropdown.open .artikel-caret { transform: rotate(180deg); }
.artikel-dropdown-toggle.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.artikel-dropdown-panel {
    display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border-input);
    border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 200; overflow: hidden;
}
.artikel-dropdown.open .artikel-dropdown-panel { display: block; }
.artikel-dropdown-toggle.is-invalid { border-color: var(--color-danger); }
.artikel-list { max-height: 220px; overflow-y: auto; }
.combi-search-wrap { padding: 8px; border-bottom: 1px solid var(--border-color); }
.combi-search-input {
    width: 100%; padding: 5px 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-input); background: var(--bg-input);
    color: var(--text-primary); font-size: .85rem; box-sizing: border-box;
}
.combi-search-input:focus { outline: none; border-color: var(--color-primary); }
.combi-search-input::placeholder { color: var(--text-muted); }
.combi-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; font-size: .875rem;
    color: var(--text-primary); transition: background .1s;
}
.combi-item:hover, .combi-item.focused { background: var(--bg-table-header); }
.combi-item.selected { background: var(--color-primary-light, rgba(59,130,246,.1)); font-weight: 600; }
.combi-empty { padding: 10px 12px; font-size: .85rem; color: var(--text-muted); font-style: italic; }

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

/* ══════════════════════════════════════════════════════════════════════════
   Positie Dropdown Component — poort van PMS' css/style.css (positie-dropdown.js).
   Generieke component (net als .artikel-dropdown/.combi-* hierboven) — niet
   pagina-specifiek, dus hier i.p.v. in css/klantenkaart.css. Eerste gebruik:
   de live PMS-positiepicker in de klantenkaart designs-editor.
   ══════════════════════════════════════════════════════════════════════════ */
.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. */
@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;
}

/* Hover tooltip op design-cards (design-zoek-modal) — poort van PMS' .card-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;
}
@media (max-width: 768px) {
  .card-tooltip {
    min-width: 0;
    max-width: calc(100vw - 16px);
  }
}
.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 zoeken modal — kaarten grid (poort van PMS' .design-cards-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;
  }
}

/* ============================================================= */
/* Kleur-picker (geport uit PMS order-wijzigen)                  */
/* ============================================================= */
.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;
}
.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);
}
.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-gekozen-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--border-color); flex-shrink: 0; }
.kleur-modal-dot { width: 34px; height: 34px; }
#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;
}
/* De gedeelde kleur-modal opent bóvenop een andere modal → hogere z-index. */
#kleurPickerModal { z-index: 2000; }

/* ─────────────────────────────────────────────────────────────────────────────
   Wizard-stappenbalk — gedeeld door de inboek-modal (?page=textiel-inboeken) en
   de verwerk-modal (?page=inkomend-textiel). Geport uit PMS ?page=order-invoer.
   Stond eerst inline in views/magazijn.php; hier generiek zodat beide wizards
   niet uiteen kunnen lopen.
   ───────────────────────────────────────────────────────────────────────────── */
.wizard-progress {
    display: flex; align-items: center; flex-shrink: 0;
    margin-bottom: 12px; padding: 7px 18px;
    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: 14px; left: 55%; right: -45%;
    height: 2px; background: var(--border-color); z-index: 0; transition: background .3s ease;
}
.wizard-step.completed::after { background: var(--color-secondary); }
.wizard-step.active::after    { background: var(--color-primary); }
.wizard-step-circle {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; z-index: 1;
    border: 2px solid var(--border-color); background: var(--bg-card); color: var(--text-muted);
    transition: all .25s ease;
}
.wizard-step.completed .wizard-step-circle { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.wizard-step.active .wizard-step-circle    { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px rgba(24,153,255,0.15); }
.wizard-step-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-top: 4px; text-align: center; white-space: nowrap; letter-spacing: .01em; }
.wizard-step.active .wizard-step-label,
.wizard-step.completed .wizard-step-label { color: var(--text-primary); }

/* Verticale +/input/− stepper voor aantallen — ook gedeeld door beide wizards. */
.nal-stepper { display:inline-flex;flex-direction:column;align-items:stretch;border:1px solid var(--border-color);border-radius:4px;overflow:hidden;background:var(--bg-input,var(--bg-card)); }
.nal-step-btn { width:52px;height:22px;border:none;background:var(--bg-subtle);color:var(--text-primary);font-size:.8rem;font-weight:700;cursor:pointer;line-height:1;flex-shrink:0;transition:background .12s;display:flex;align-items:center;justify-content:center; }
.nal-step-btn:hover { background:var(--border-color); }
.nal-step-btn[data-dir="-1"] { border-top:1px solid var(--border-color); }
.nal-step-btn[data-dir="1"]  { border-bottom:1px solid var(--border-color); }
.nal-inp { width:52px;text-align:center;padding:4px 2px;font-size:.875rem;font-family:inherit;border:none;border-radius:0;background:var(--bg-input,var(--bg-card));color:var(--text-primary);line-height:1.4;-moz-appearance:textfield; }
.nal-inp::-webkit-outer-spin-button,.nal-inp::-webkit-inner-spin-button { -webkit-appearance:none;margin:0; }
.nal-inp:focus { outline:none;background:var(--bg-subtle); }

/* ── 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;
}