/* ============================================================
   Klantio — Design System
   Kleurpalet: Enterprise Blue (geïnspireerd op HubSpot/Linear)
   Typografie: Plus Jakarta Sans + DM Mono
   8px spacing systeem
   Volledig responsive (mobile-first)
   ============================================================ */

/* ── Google Fonts import ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   CSS VARIABELEN — Design Tokens
   ============================================================ */
:root {
  /* Kleurpalet — Enterprise Blue */
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-900: #1e3a8a;

  /* Achtergronden */
  --bg: #f8fafc;
  --bg-soft: #f1f5f9;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-hover: #f8fafc;

  /* Tekst */
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  /* Borders */
  --border: #e2e8f0;
  --border-focus: #3b82f6;

  /* Semantic kleuren */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --primary-text: #ffffff;

  --danger: #ef4444;
  --danger-light: #fef2f2;
  --danger-border: #fca5a5;

  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --warning-border: #fcd34d;

  --success: #10b981;
  --success-light: #ecfdf5;
  --success-border: #6ee7b7;

  /* Schaduwen */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);

  /* Spacing — 8px systeem */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Typografie */
  --font-base: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Fira Code', monospace;
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Transities */
  --transition: 150ms ease;
  --transition-md: 200ms ease;

  /* Layout */
  --sidebar-w: 220px;
  --topbar-h: 64px;

  /* Backwards compat */
  --shadow-old: var(--shadow-md);
  --btn-scale: 0.6;
  --notif-scale: 0.9;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   UTILITY
   ============================================================ */
.hidden {
  display: none !important;
}

.help-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Sidebar uitleg alleen tonen in hulpmodus */
.wf-sidebar .wf-nav-row.help-text {
  display: none;
}

body.help-mode .wf-sidebar .wf-nav-row.help-text {
  display: block;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4 {
  font-size: var(--text-md);
}

/* ============================================================
   LAYOUT — HOOFD STRUCTUUR
   ============================================================ */
.wf-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--bg);
}

.wf-main {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 0;
  overflow: hidden;
}

.wf-content {
  padding: var(--space-6);
  overflow-y: auto;
  min-height: 0;
  display: block;
  background: var(--bg);
}

.wf-content>*+* {
  margin-top: var(--space-5);
}

.wf-content.wf-structure {
  display: block;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.wf-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
}

.wf-sidebar-logo {
  height: var(--topbar-h);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.wf-logo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}

.wf-logo-image {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  object-fit: cover;
  flex-shrink: 0;
}

.wf-logo-text {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.wf-sidebar-section {
  padding: var(--space-4) 0 var(--space-2);
  border-bottom: 1px solid var(--border);
}

.wf-sidebar-section:last-of-type {
  border-bottom: none;
}

.wf-sidebar-label {
  padding: 0 var(--space-4) var(--space-2);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wf-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-3);
}

.wf-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  text-align: left;
}

.wf-nav-item:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.wf-nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}

.wf-nav-static {
  padding: 0 var(--space-3);
}

.wf-nav-row {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

#clientStatusList {
  display: grid;
  gap: 2px;
}

#clientStatusList .wf-nav-row {
  border-top: 1px dashed var(--border);
  color: var(--text-secondary);
  padding-top: var(--space-2);
}

.wf-sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: var(--space-4);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.wf-topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.wf-topbar-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.wf-topbar-breadcrumb {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 1px;
}

.wf-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  position: relative;
}

.wf-search-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  min-width: 340px;
  width: min(46vw, 560px);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  background: var(--bg-soft);
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.wf-search-box:hover {
  border-color: var(--border-focus);
}

.wf-search-box:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  position: relative;
  z-index: 2;
}

.global-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(2px);
  z-index: 130;
  display: grid;
  place-items: start center;
  padding: var(--space-10) var(--space-4) var(--space-4);
}

.global-search-overlay.hidden {
  display: none;
}

.global-search-panel {
  width: min(980px, 100%);
  max-height: min(86vh, 860px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.global-search-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.global-search-head input {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 0 var(--space-3);
}

.global-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-2);
}

.global-search-filter {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
}

.global-search-filter.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.global-search-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.global-search-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.global-search-home,
.global-search-results {
  padding: var(--space-4);
}

.global-search-home.hidden,
.global-search-results.hidden {
  display: none;
}

.global-search-block {
  margin-bottom: var(--space-4);
}

.global-search-block h4,
.global-search-group h4 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.global-search-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.global-search-chip {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
}

.global-search-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.global-search-group {
  margin-bottom: var(--space-4);
}

.global-search-group-list {
  display: grid;
  gap: var(--space-2);
}

.global-search-item {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-3);
}

.global-search-item:hover {
  border-color: var(--primary);
}

.global-search-item-title {
  font-weight: 600;
  font-size: var(--text-sm);
}

.global-search-item-meta {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ============================================================
   USER BADGE
   ============================================================ */
.user-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  object-fit: cover;
}

/* ============================================================
   KNOPPEN
   ============================================================ */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition);
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none;
  background: var(--primary);
  color: var(--primary-text);
  box-shadow: var(--shadow-xs);
}

button:hover,
.btn:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

button:active,
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

button:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Ghost / secondary */
button.ghost,
.btn.ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
  box-shadow: none;
}

button.ghost:hover,
.btn.ghost:hover {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border);
}

/* Danger */
button.danger,
.btn.danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}

button.danger:hover,
.btn.danger:hover {
  background: #dc2626;
}

/* Success */
button.success,
.btn.success {
  background: var(--success);
  color: #fff;
  border-color: transparent;
}

button.success:hover,
.btn.success:hover {
  background: #059669;
}

/* Warn */
button.warn,
.btn.warn {
  background: var(--warning);
  color: #fff;
  border-color: transparent;
}

button.warn:hover,
.btn.warn:hover {
  background: #d97706;
}

/* Small variant */
button.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

/* ============================================================
   FORMULIEREN
   ============================================================ */
input,
select,
textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input[type='file'] {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-style: dashed;
  border-color: var(--border);
  background: var(--bg-soft);
  border-radius: var(--radius);
}

input[type='file']::file-selector-button {
  margin-right: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3) var(--space-2) 1.85rem;
  color: #fff;
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5 20h14a1 1 0 0 0 1-1v-3h-2v2H6v-2H4v3a1 1 0 0 0 1 1m7-16l-5.5 5.5l1.42 1.42L11 7.84V16h2V7.84l3.08 3.08l1.42-1.42z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.55rem center;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), filter var(--transition);
}

input[type='file']::file-selector-button:hover {
  filter: brightness(0.96);
}

input[type='file']::-webkit-file-upload-button {
  margin-right: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3) var(--space-2) 1.85rem;
  color: #fff;
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5 20h14a1 1 0 0 0 1-1v-3h-2v2H6v-2H4v3a1 1 0 0 0 1 1m7-16l-5.5 5.5l1.42 1.42L11 7.84V16h2V7.84l3.08 3.08l1.42-1.42z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.55rem center;
  font-weight: 600;
  cursor: pointer;
}

input[type='checkbox'] {
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

input[readonly],
.wf-readonly {
  background: var(--bg-soft);
  color: var(--text-muted);
  cursor: default;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  letter-spacing: 0.01em;
}

/* ============================================================
   GRID HELPERS
   ============================================================ */
.grid {
  display: grid;
  gap: var(--space-4);
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.wf-panel-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface);
}

.wf-panel-head h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.wf-panel-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--bg-soft);
}

.wf-panel-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.wf-panel-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
}

.wf-panel-body {
  padding: var(--space-5);
}

/* ============================================================
   TABELLEN
   ============================================================ */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: auto;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  font-size: var(--text-sm);
}

th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.5;
}

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

tr:hover td {
  background: var(--surface-hover);
}

tr.row-highlight td {
  background: var(--primary-light);
}

.wf-table-footer {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ============================================================
   BADGES / STATUS
   ============================================================ */
.badge,
[class*='badge-'] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-ok,
.badge.ok {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.badge-warn,
.badge.warn {
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.badge-danger,
.badge.danger {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.badge-err,
.badge.err,
.badge.error {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.badge-intense,
.badge.intense {
  background: #2b0505;
  color: #ff7a7a;
  border: 1px solid #dc2626;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.badge-info,
.badge.info {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--brand-200);
}

.badge-neutral,
.badge.neutral {
  background: var(--bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ============================================================
   MELDINGEN / ALERTS
   ============================================================ */
.message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.message.error {
  background: var(--danger-light);
  border-color: var(--danger-border);
  color: var(--danger);
}

.message.success {
  background: var(--success-light);
  border-color: var(--success-border);
  color: var(--success);
}

.message.warning {
  background: var(--warning-light);
  border-color: var(--warning-border);
  color: var(--warning);
}

.wf-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  border: 1px solid var(--warning-border);
  background: var(--warning-light);
  color: var(--text-secondary);
}

/* ============================================================
   MODALS / DIALOGS
   ============================================================ */
dialog.modal {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-xl);
  width: min(800px, calc(100vw - var(--space-6)));
  box-shadow: var(--shadow-lg);
  padding: 0;
  max-height: min(92vh, 900px);
  margin: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

dialog[open].modal {
  display: flex;
  flex-direction: column;
}

.modal-body.grid {
  align-items: start;
}

.modal-body.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-body.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

dialog.modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
}

.modal-head {
  padding: var(--space-5) var(--space-6) 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-4);
}

.modal-head h3 {
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0;
}

.modal-body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-foot {
  padding: var(--space-4) var(--space-6) var(--space-5);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.modal-wide {
  width: min(1200px, calc(100vw - var(--space-4)));
}

/* ============================================================
   NOTIFICATIONS PANEL
   ============================================================ */
.notification-toggle {
  position: relative;
}

.settings-gear {
  min-width: 28px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
  box-shadow: none;
}

.notifications-panel {
  position: fixed;
  top: calc(var(--topbar-h) + var(--space-2));
  right: var(--space-4);
  width: min(360px, calc(100vw - var(--space-6)));
  max-height: min(75vh, 680px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.notifications-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.notifications-head h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 0;
}

.notifications-meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.notifications-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.notifications-list {
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.notifications-head-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.notification-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-soft);
  font-size: var(--text-xs);
  transition: background var(--transition);
  overflow: visible;
}

.notification-item.read {
  opacity: 0.6;
}

/* ============================================================
   PAGINA HOOFD
   ============================================================ */
.wf-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2);
}

.wf-page-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-1);
}

.wf-page-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.wf-page-head-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ============================================================
   WFSTRUCTURE
   ============================================================ */
.wf-structure {
  display: grid;
  gap: var(--space-5);
}

/* ============================================================
   KPI RIJEN
   ============================================================ */
.wf-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.wf-kpi-row-secondary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wf-kpi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.wf-kpi-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.wf-kpi-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
  line-height: 1.4;
}

.wf-quick-actions {
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.wf-quick-actions a,
.wf-quick-actions button {
  min-width: 136px;
}

.ws-card-dashboard-11,
.ws-card-dashboard-12,
.ws-card-dashboard-13,
.ws-card-dashboard-14,
.ws-card-dashboard-15 {
  border-top: 3px solid var(--border);
}

/* ============================================================
   TWEE-KOLOM LAYOUT
   ============================================================ */
.wf-two-col {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-4);
  align-items: start;
}

.wf-bottom-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* ============================================================
   ACTIVITEIT & TAKEN
   ============================================================ */
.wf-activity-list {
  display: grid;
  gap: var(--space-2);
}

.wf-activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background var(--transition);
}

.wf-activity-item:hover {
  background: var(--surface-hover);
}

.wf-activity-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border);
  margin-top: 4px;
  flex-shrink: 0;
}

.wf-activity-dot.severity-intense {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.wf-activity-dot.severity-critical {
  background: #dc2626;
}

.wf-activity-dot.severity-warning {
  background: #f59e0b;
}

.wf-activity-dot.severity-info {
  background: #2563eb;
}

.wf-task-list {
  display: grid;
  gap: var(--space-2);
}

.wf-task-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 94px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background var(--transition);
}

.wf-task-item:hover {
  background: var(--surface-hover);
}

.wf-task-mark {
  width: 8px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--border);
}

.wf-task-mark.severity-intense {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.wf-task-mark.severity-critical {
  background: #dc2626;
}

.wf-task-mark.severity-warning {
  background: #f59e0b;
}

.wf-task-mark.severity-info {
  background: #2563eb;
}

.wf-task-text {
  min-width: 0;
}

.wf-task-due {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-task-action {
  min-width: 84px;
  display: flex;
  justify-content: flex-end;
}

.wf-task-open {
  width: 80px;
  justify-content: center;
}

/* ============================================================
   GRAFIEKEN
   ============================================================ */
.wf-chart-body {
  padding: var(--space-5);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wf-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 80px;
}

.wf-bar-segment {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-width: 10px;
}

.wf-chart-labels {
  display: flex;
  gap: var(--space-2);
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* Bar chart bars */
.wf-bar {
  flex: 1;
  background: var(--primary-light);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--brand-200);
  min-width: 8px;
  position: relative;
  transition: background var(--transition);
}

.wf-bar:hover {
  background: var(--primary);
}

.wf-bar-value {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  color: var(--text-muted);
  line-height: 1;
}

/* Pipeline */
.wf-pipeline-list {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.wf-pipeline-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 42px;
  align-items: center;
  gap: var(--space-2);
}

.wf-pipeline-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.wf-pipeline-bar-wrap {
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  overflow: hidden;
}

.wf-pipeline-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  width: 0;
  transition: width 500ms ease;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.wf-pipeline-row.tone-info .wf-pipeline-bar-fill {
  background: linear-gradient(90deg, #93c5fd, #3b82f6);
}

.wf-pipeline-row.tone-warning .wf-pipeline-bar-fill {
  background: linear-gradient(90deg, #facc15, #f59e0b);
}

.wf-pipeline-row.tone-critical .wf-pipeline-bar-fill {
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

.wf-pipeline-row.tone-intense .wf-pipeline-bar-fill {
  background: linear-gradient(90deg, #f87171, #b91c1c);
}

.wf-pipeline-row.tone-neutral .wf-pipeline-bar-fill {
  background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

.wf-pipeline-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: right;
  color: var(--text-secondary);
}

/* ============================================================
   SWITCH (TOGGLE)
   ============================================================ */
.wf-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: var(--space-2);
}

.wf-switch input {
  display: none;
}

.wf-switch-track {
  width: 36px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--border);
  position: relative;
  transition: background var(--transition-md);
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.wf-switch input:checked+.wf-switch-track {
  background: var(--primary);
  border-color: var(--primary);
}

.wf-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: white;
  transition: transform var(--transition-md);
  box-shadow: var(--shadow-xs);
}

.wf-switch input:checked+.wf-switch-track .wf-switch-knob {
  transform: translateX(16px);
}

/* ============================================================
   CHIP
   ============================================================ */
.wf-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-soft);
}

/* ============================================================
   TOAST
   ============================================================ */
.wf-toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wf-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--text);
  color: var(--surface);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideUp 200ms ease;
  max-width: 360px;
}

@keyframes slideUp {
  from {
    transform: translateY(12px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   ADMIN TABS
   ============================================================ */
.wf-admin-tabs {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  width: fit-content;
}

.wf-admin-tab-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  transform: none !important;
}

.wf-admin-tab-btn:hover {
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.wf-admin-tab-btn.active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.wf-admin-section {
  display: block;
}

.wf-admin-section.hidden {
  display: none !important;
}

/* ============================================================
   ADMIN PAGINA
   ============================================================ */
.wf-admin-page .grid.three {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.wf-admin-page [class^='ws-card-admin-'] {
  overflow: visible;
}

.wf-admin-page .wf-panel-body {
  overflow: visible;
  min-height: auto;
}

.wf-admin-page .wf-admin-form {
  overflow: visible;
  gap: var(--space-4);
  align-items: start;
}

.wf-admin-page .wf-admin-form .actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.wf-admin-page .wf-panel-body input,
.wf-admin-page .wf-panel-body select,
.wf-admin-page .wf-panel-body textarea {
  font-size: var(--text-sm);
}

.wf-admin-page .table-wrap table {
  min-width: 700px;
}

.wf-admin-page .table-wrap th,
.wf-admin-page .table-wrap td {
  padding: var(--space-3) var(--space-4);
}

.wf-admin-inline-field {
  display: grid;
  gap: var(--space-1);
}

.wf-sync-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.wf-mini-divider {
  height: 1px;
  width: 100%;
  margin: var(--space-3) 0 var(--space-4);
  background: var(--border);
}

/* ============================================================
   CONTEXT ROW (label + toggle inline)
   ============================================================ */
.wf-context-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.wf-context-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.wf-context-field {
  display: grid;
  gap: 0.35rem;
  min-width: 300px;
}

.wf-context-row .wf-switch {
  margin-left: auto;
}

/* ============================================================
   INLINE FILTERS
   ============================================================ */
.wf-inline-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   DASHBOARD ALERTS PANEL
   ============================================================ */
.dashboard-alerts-panel .table-wrap {
  max-height: none;
  overflow: visible;
}

.dashboard-alerts-panel table {
  min-width: 0;
}

.dashboard-alerts-panel tr.wf-alert-row.severity-intense td {
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.22), rgba(185, 28, 28, 0.1));
}

.dashboard-alerts-panel tr.wf-alert-row.severity-critical td {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.16), rgba(220, 38, 38, 0.08));
}

.dashboard-alerts-panel tr.wf-alert-row.severity-warning td {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.05));
}

.dashboard-alerts-panel tr.wf-alert-row.severity-info td {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.12), rgba(37, 99, 235, 0.04));
}

/* ============================================================
   SETTINGS PAGINA
   ============================================================ */
.wf-settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.wf-settings-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: var(--space-6);
}

.wf-settings-nav-label {
  padding: var(--space-3) var(--space-4);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.wf-settings-nav-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  transform: none !important;
  border-bottom: 1px solid var(--border);
}

.wf-settings-nav-item:last-child {
  border-bottom: none;
}

.wf-settings-nav-item:hover {
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: none;
}

.wf-settings-nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.wf-settings-main {
  display: grid;
  gap: var(--space-5);
}

.wf-settings-profile-form {
  gap: var(--space-3);
}

.wf-settings-profile-form .wf-settings-inline-toggle {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  min-height: 44px;
}

.wf-settings-profile-form .wf-page-sub {
  margin-top: var(--space-1);
}

/* ============================================================
   WIRE PAGE (FACTUREN)
   ============================================================ */
.wf-wire-page {
  gap: var(--space-5);
}

.wf-wire-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.wf-wire-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.wf-wire-sub {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.wf-wire-section {
  margin-bottom: 0;
}

.wf-wire-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}

.wf-wire-stack {
  display: grid;
  gap: var(--space-5);
}

.wf-wire-side {
  display: grid;
  gap: var(--space-4);
}

.wf-wire-full-row {
  grid-column: 1 / -1;
}

.wf-wire-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

/* ============================================================
   UPLOAD COMPACT
   ============================================================ */
.wf-upload-compact {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: left;
  background: var(--bg-soft);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ============================================================
   FACTUREN PAGINA
   ============================================================ */
.wf-facturen-page {
  gap: var(--space-5);
}

.wf-facturen-page .modal-body .table-wrap {
  max-height: 64vh;
  overflow-y: auto;
}

.wf-facturen-page #invoicesDialog table {
  min-width: 1200px;
}

/* Scrollbar facturen */
.wf-facturen-page::-webkit-scrollbar,
.wf-facturen-page .table-wrap::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.wf-facturen-page::-webkit-scrollbar-track,
.wf-facturen-page .table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.wf-facturen-page::-webkit-scrollbar-thumb,
.wf-facturen-page .table-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}

.wf-facturen-page::-webkit-scrollbar-thumb:hover,
.wf-facturen-page .table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ============================================================
   WEBBEHEER PAGINA
   ============================================================ */
@keyframes webbeheerCardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wf-webbeheer-page .wf-content {
  gap: var(--space-5);
}

.wf-webbeheer-page [class^='ws-card-webbeheer-'] {
  margin-bottom: 0;
  animation: webbeheerCardIn .3s ease both;
}

.wf-webbeheer-page .ws-card-webbeheer-02 {
  animation-delay: .05s;
}

.wf-webbeheer-page .ws-card-webbeheer-03 {
  animation-delay: .10s;
}

.wf-webbeheer-page .ws-card-webbeheer-04 {
  animation-delay: .15s;
}

.wf-webbeheer-page .ws-card-webbeheer-05 {
  animation-delay: .20s;
}

.wf-webbeheer-page .ws-card-webbeheer-06 {
  animation-delay: .25s;
}

.wf-webbeheer-page .table-wrap table {
  min-width: 800px;
}

/* ─── Card section-head (header) ─── */
.section-head {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--surface);
}

.section-head h2,
.section-head h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 0;
  flex: 1;
}

/* ─── KPI stats strip — ws-card-webbeheer-01 ─── */
.ws-card-webbeheer-01 .grid.four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 !important;
  margin-top: 0 !important;
  padding: 0;
}

.ws-card-webbeheer-01 .kpi {
  padding: var(--space-5) var(--space-6);
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.ws-card-webbeheer-01 .kpi:last-child {
  border-right: none;
}

.ws-card-webbeheer-01 .kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--primary);
}

.ws-card-webbeheer-01 .kpi .label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.ws-card-webbeheer-01 .kpi .value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ─── Form padding — ws-card-webbeheer-02 ─── */
.ws-card-webbeheer-02 form.grid {
  padding: var(--space-5) var(--space-6) var(--space-6);
  gap: var(--space-4);
}

/* ─── Actions bar — ws-card-webbeheer-04 ─── */
.ws-card-webbeheer-04>.actions {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  gap: var(--space-3);
  margin-bottom: 0 !important;
  background: var(--surface);
}

/* ─── Detail grid — ws-card-webbeheer-04 ─── */
.ws-card-webbeheer-04 .grid.four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 !important;
  margin-top: 0;
}

.ws-card-webbeheer-04 .kpi {
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ws-card-webbeheer-04 .kpi:nth-child(4n) {
  border-right: none;
}

.ws-card-webbeheer-04 .kpi .label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ws-card-webbeheer-04 .kpi .value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* ─── Bare headings — ws-card-webbeheer-05, 06 ─── */
.ws-card-webbeheer-05>h3 {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  margin: 0;
  display: block;
}

.ws-card-webbeheer-06>.split {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0 !important;
}

.ws-card-webbeheer-06>.split h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin: 0 !important;
}

/* ─── Base kpi (used outside stat strip / detail grid) ─── */
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi .label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.kpi .value {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .ws-card-webbeheer-01 .grid.four {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ws-card-webbeheer-01 .kpi:nth-child(2n) {
    border-right: none;
  }

  .ws-card-webbeheer-01 .kpi:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }

  .ws-card-webbeheer-04 .grid.four {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ws-card-webbeheer-04 .kpi:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .ws-card-webbeheer-02 form.grid {
    padding: var(--space-4);
  }

  .ws-card-webbeheer-01 .grid.four {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   LINK HOST
   ============================================================ */
.link-host {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--text-sm);
}

.link-host:hover {
  color: var(--primary-hover);
}

.analytics-help-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  opacity: 0.75;
}

.analytics-help-btn:hover {
  opacity: 1;
}

.analytics-help-content {
  display: grid;
  gap: 0.5rem;
}

.analytics-help-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.analytics-help-content code {
  font-size: var(--text-xs);
}

.analytics-data-sources {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.analytics-source-card {
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-5);
  background: var(--surface);
  display: grid;
  gap: var(--space-2);
}

.analytics-source-card:last-child {
  border-right: none;
}

.analytics-source-card h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.analytics-source-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.analytics-source-link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-1);
}

.analytics-source-link:hover {
  text-decoration: underline;
}

.analytics-integration-panel {
  border-top: 1px solid var(--border);
  padding: var(--space-5) var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.analytics-integration-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.analytics-integration-head h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.analytics-integration-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.analytics-integration-form .actions {
  grid-column: 1 / -1;
}

/* ============================================================
   WS-CARDS & LAYOUT — Analytics pagina
   ============================================================ */
@keyframes analyticsCardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Panel / table cards */
.ws-card-analytics-01,
.ws-card-analytics-06,
.ws-card-analytics-07,
.ws-card-analytics-08,
.ws-card-analytics-09,
.ws-card-analytics-10,
.ws-card-analytics-11 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(13, 17, 32, .07), 0 1px 4px rgba(13, 17, 32, .04);
  animation: analyticsCardIn .3s ease both;
}

/* KPI stat cards */
.ws-card-analytics-02,
.ws-card-analytics-03,
.ws-card-analytics-04,
.ws-card-analytics-05 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  position: relative;
  overflow: hidden;
  animation: analyticsCardIn .25s ease both;
}

/* Left accent stripe */
.ws-card-analytics-02::before,
.ws-card-analytics-03::before,
.ws-card-analytics-04::before,
.ws-card-analytics-05::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}

.ws-card-analytics-02::before {
  background: var(--primary);
}

.ws-card-analytics-03::before {
  background: var(--success);
}

.ws-card-analytics-04::before {
  background: var(--warning);
}

.ws-card-analytics-05::before {
  background: var(--danger);
}

/* KPI typography overrides */
.analytics-kpi-row .wf-kpi-value {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.analytics-kpi-row .wf-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Panel headers inside analytics cards */
.wf-analytics-page .wf-panel-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* KPI row */
.analytics-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Two-column (narrow right for opportunities / traffic sources) */
.analytics-two-col {
  grid-template-columns: 1fr 300px;
}

/* Filter grid inside filter card */
.analytics-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}

/* Preset row */
.analytics-presets {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  flex-wrap: wrap;
}

.analytics-presets>div:first-child {
  flex: 0 0 260px;
}

.analytics-presets .actions {
  flex-shrink: 0;
}

/* Header actions */
.analytics-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Opportunities empty state */
.analytics-opportunities {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  padding: var(--space-6);
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
  font-style: italic;
  line-height: 1.6;
}

/* Card entrance stagger */
.wf-analytics-page>section:nth-child(2) {
  animation: analyticsCardIn .3s .05s ease both;
}

.wf-analytics-page>section:nth-child(3) {
  animation: analyticsCardIn .3s .10s ease both;
}

.wf-analytics-page>section:nth-child(4) {
  animation: analyticsCardIn .3s .15s ease both;
}

.wf-analytics-page>section:nth-child(5) {
  animation: analyticsCardIn .3s .20s ease both;
}

.wf-analytics-page>section:nth-child(6) {
  animation: analyticsCardIn .3s .25s ease both;
}

.wf-analytics-page>section:nth-child(7) {
  animation: analyticsCardIn .3s .30s ease both;
}

.wf-analytics-page>section:nth-child(8) {
  animation: analyticsCardIn .3s .35s ease both;
}

/* Responsive */
@media (max-width: 1024px) {
  .analytics-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-two-col {
    grid-template-columns: 1fr;
  }

  .analytics-filters {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-integration-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-data-sources {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-source-card:nth-child(2n) {
    border-right: none;
  }

  .analytics-source-card:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 768px) {
  .analytics-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-filters {
    grid-template-columns: 1fr 1fr;
  }

  .analytics-integration-panel {
    padding: var(--space-4);
  }

  .analytics-integration-form {
    grid-template-columns: 1fr;
  }

  .analytics-data-sources {
    grid-template-columns: 1fr;
  }

  .analytics-source-card {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .analytics-source-card:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   LOGIN PAGINA
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
  padding: var(--space-4);
}

.login-card {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  width: min(440px, 100%);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.16);
  text-align: center;
}

.login-card h1 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

.login-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.login-card button {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.login-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: cover;
}

.login-brand-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* ============================================================
   TOPBAR (LEGACY — client.html gebruikt .topbar)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  height: var(--topbar-h);
}

.topbar-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
}

.brand {
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid transparent;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition);
}

.nav-links a:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.nav-links a.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

/* ============================================================
   WS-CARDS — Dashboard
   ============================================================ */
.ws-card-dashboard-01,
.ws-card-dashboard-02,
.ws-card-dashboard-03,
.ws-card-dashboard-04,
.ws-card-dashboard-11,
.ws-card-dashboard-12,
.ws-card-dashboard-13,
.ws-card-dashboard-14,
.ws-card-dashboard-15,
.ws-card-time-01,
.ws-card-time-02,
.ws-card-time-03,
.ws-card-time-04 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}

.ws-card-dashboard-01:hover,
.ws-card-dashboard-02:hover,
.ws-card-dashboard-03:hover,
.ws-card-dashboard-04:hover,
.ws-card-dashboard-11:hover,
.ws-card-dashboard-12:hover,
.ws-card-dashboard-13:hover,
.ws-card-dashboard-14:hover,
.ws-card-dashboard-15:hover,
.ws-card-time-01:hover,
.ws-card-time-02:hover,
.ws-card-time-03:hover,
.ws-card-time-04:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.ws-card-dashboard-01 {
  border-top: 3px solid var(--success);
}

.ws-card-dashboard-02 {
  border-top: 3px solid var(--danger);
}

.ws-card-dashboard-03 {
  border-top: 3px solid var(--warning);
}

.ws-card-dashboard-04 {
  border-top: 3px solid var(--primary);
}

.ws-card-dashboard-02 .wf-kpi-value {
  color: var(--danger);
}

.ws-card-dashboard-03 .wf-kpi-value {
  color: var(--warning);
}

.ws-card-dashboard-04 .wf-kpi-value {
  color: var(--primary);
}

.ws-card-dashboard-05,
.ws-card-dashboard-06,
.ws-card-dashboard-07,
.ws-card-dashboard-08,
.ws-card-dashboard-09,
.ws-card-dashboard-10,
.ws-card-dashboard-16,
.ws-card-time-05,
.ws-card-time-06,
.ws-card-time-07 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   WS-CARDS — Admin
   ============================================================ */
.ws-card-admin-01,
.ws-card-admin-02,
.ws-card-admin-03,
.ws-card-admin-04,
.ws-card-admin-05,
.ws-card-admin-06,
.ws-card-admin-07 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-4);
}

.ws-card-admin-01 h2,
.ws-card-admin-01 h3,
.ws-card-admin-02 h2,
.ws-card-admin-02 h3,
.ws-card-admin-03 h2,
.ws-card-admin-03 h3,
.ws-card-admin-04 h2,
.ws-card-admin-04 h3,
.ws-card-admin-05 h2,
.ws-card-admin-05 h3,
.ws-card-admin-06 h2,
.ws-card-admin-06 h3,
.ws-card-admin-07 h2,
.ws-card-admin-07 h3 {
  margin: 0 0 var(--space-3);
}

/* ============================================================
   WS-CARDS & LAYOUT — Admin pagina
   ============================================================ */
@keyframes adminCardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced shadow + fade-up animation on all admin cards */
.wf-admin-page .ws-card-admin-01,
.wf-admin-page .ws-card-admin-02,
.wf-admin-page .ws-card-admin-03,
.wf-admin-page .ws-card-admin-04,
.wf-admin-page .ws-card-admin-05,
.wf-admin-page .ws-card-admin-06,
.wf-admin-page .ws-card-admin-07 {
  box-shadow: 0 4px 16px rgba(13, 17, 32, 0.07), 0 1px 4px rgba(13, 17, 32, 0.04);
  animation: adminCardIn 0.3s ease both;
}

.wf-admin-page .ws-card-admin-02 {
  animation-delay: 0.04s;
}

.wf-admin-page .ws-card-admin-03 {
  animation-delay: 0.08s;
}

.wf-admin-page .ws-card-admin-04 {
  animation-delay: 0.12s;
}

.wf-admin-page .ws-card-admin-05 {
  animation-delay: 0.16s;
}

.wf-admin-page .ws-card-admin-06 {
  animation-delay: 0.2s;
}

.wf-admin-page .ws-card-admin-07 {
  animation-delay: 0.24s;
}

/* Panel header padding */
.wf-admin-page .wf-panel-head {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.wf-admin-page .wf-panel-head h2,
.wf-admin-page .wf-panel-head h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Panel body padding */
.wf-admin-page .wf-panel-body {
  padding: var(--space-5) var(--space-6);
}

/* Active client toolbar — card-style bar */
.wf-admin-page section.wf-context-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.wf-admin-page section.wf-context-row label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  margin: 0;
}

.wf-admin-page section.wf-context-row select {
  min-width: 200px;
}

/* Tab bar — underline style, full width */
.wf-admin-page .wf-admin-tabs {
  display: flex;
  gap: 0;
  align-items: stretch;
  flex-wrap: nowrap;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 0;
  width: 100%;
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

.wf-admin-page .wf-admin-tab-btn {
  padding: var(--space-3) var(--space-5);
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  box-shadow: none;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  transform: none !important;
}

.wf-admin-page .wf-admin-tab-btn:hover {
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.wf-admin-page .wf-admin-tab-btn.active {
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
  box-shadow: none;
}


/* ============================================================
   WS-CARDS — Facturen
   ============================================================ */
.ws-card-facturen-01,
.ws-card-facturen-02,
.ws-card-facturen-03,
.ws-card-facturen-04,
.ws-card-facturen-05,
.ws-card-facturen-06,
.ws-facturen-card-01,
.ws-facturen-card-02,
.ws-facturen-card-03,
.ws-facturen-card-04,
.ws-facturen-card-05,
.ws-facturen-card-06 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.ws-facturen-card-01-head,
.ws-facturen-card-02-head,
.ws-facturen-card-03-head,
.ws-facturen-card-04-head,
.ws-facturen-card-05-head,
.ws-facturen-card-06-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ws-facturen-card-01-body,
.ws-facturen-card-02-body,
.ws-facturen-card-03-body,
.ws-facturen-card-04-body,
.ws-facturen-card-05-body,
.ws-facturen-card-06-body {
  padding: var(--space-4) var(--space-5);
}

.ws-facturen-card-01-head h3,
.ws-facturen-card-02-head h3,
.ws-facturen-card-03-head h3,
.ws-facturen-card-04-head h3,
.ws-facturen-card-05-head h3,
.ws-facturen-card-06-head h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 0;
}

/* ============================================================
   WS-CARDS — Webbeheer
   ============================================================ */
.ws-card-webbeheer-01,
.ws-card-webbeheer-02,
.ws-card-webbeheer-03,
.ws-card-webbeheer-04,
.ws-card-webbeheer-05,
.ws-card-webbeheer-06 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(13, 17, 32, .07), 0 1px 4px rgba(13, 17, 32, .04);
  margin-bottom: var(--space-4);
}

/* ============================================================
   WS-CARDS — Instellingen
   ============================================================ */
.ws-card-instellingen-01,
.ws-card-instellingen-02,
.ws-card-instellingen-03 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   WS-CARDS — Projectstatus
   ============================================================ */
.ws-card-projectstatus-01,
.ws-card-projectstatus-02,
.ws-card-projectstatus-03,
.ws-card-projectstatus-04 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}

.ws-card-projectstatus-01:hover,
.ws-card-projectstatus-02:hover,
.ws-card-projectstatus-03:hover,
.ws-card-projectstatus-04:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.ws-card-projectstatus-05,
.ws-card-projectstatus-06 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   INVOICE SPECIFIEK
   ============================================================ */
.invoice-lines {
  display: grid;
  gap: var(--space-2);
}

.invoice-line-head {
  display: grid;
  grid-template-columns: 1fr repeat(3, 120px) 32px;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.invoice-totals {
  border-top: 2px solid var(--border);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.invoice-total-grand {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}

/* ============================================================
   ADMIN DOCUMENT BUTTONS
   ============================================================ */
#invoiceEditState {
  margin-bottom: var(--space-3);
}

/* ============================================================
   FACTUREN ADMIN WEERGAVE
   ============================================================ */
body.is-admin-view .wf-facturen-page .wf-wire-split {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.95fr);
  gap: var(--space-4);
}

body.is-admin-view .wf-facturen-page .wf-wire-stack {
  gap: var(--space-4);
}

body.is-admin-view .wf-facturen-page #invoiceBuilderSection {
  order: 1;
}

body.is-admin-view .wf-facturen-page .ws-card-facturen-01 {
  order: 2;
}

body.is-admin-view .wf-facturen-page .wf-wire-side .wf-upload-compact {
  width: 100%;
}

body.is-admin-view .wf-facturen-page .ws-facturen-card-02-body,
body.is-admin-view .wf-facturen-page .ws-facturen-card-06-body,
body.is-admin-view .wf-facturen-page .ws-facturen-card-05-body {
  padding: var(--space-3) var(--space-4);
}

body.is-admin-view .wf-facturen-page #invoiceForm.grid.three {
  gap: var(--space-3);
}

body.is-admin-view .wf-facturen-page #invoiceForm .wf-context-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}

body.is-admin-view .wf-facturen-page #invoiceForm .wf-context-row>div {
  min-width: 0 !important;
}

body.is-admin-view .wf-facturen-page #invoiceForm .wf-context-row>button {
  width: 100%;
  min-height: 2.2rem;
}

body.is-admin-view .wf-facturen-page #invoiceForm .wf-context-row .wf-switch {
  margin-left: auto !important;
}

body.is-admin-view .wf-facturen-page #invoiceHistorySection .table-wrap {
  max-height: 280px;
  overflow-y: auto;
}

body.is-admin-view .wf-facturen-page .ws-facturen-card-06 .table-wrap {
  max-height: 320px;
  overflow-y: auto;
}

body.is-client-view .wf-facturen-page .wf-wire-split {
  grid-template-columns: 1fr;
}

/* ============================================================
   BLOCKED PAGINA
   ============================================================ */
.blocked-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: var(--space-4);
  text-align: center;
}

/* ============================================================
   MOBILE HAMBURGER MENU
   ============================================================ */
.wf-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: none;
  transform: none !important;
  padding: 0;
  flex-shrink: 0;
}

.wf-sidebar-toggle:hover {
  background: var(--bg-soft);
  color: var(--text);
  box-shadow: none;
  transform: none !important;
}

.wf-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 99;
  backdrop-filter: blur(2px);
}

/* ============================================================
   WS-CARDS & LAYOUT — Dashboard pagina
   ============================================================ */

/* KPI label — bolder, tighter tracking */
.ws-card-dashboard-01 .wf-kpi-label,
.ws-card-dashboard-02 .wf-kpi-label,
.ws-card-dashboard-03 .wf-kpi-label,
.ws-card-dashboard-04 .wf-kpi-label,
.ws-card-dashboard-11 .wf-kpi-label,
.ws-card-dashboard-12 .wf-kpi-label,
.ws-card-dashboard-13 .wf-kpi-label,
.ws-card-dashboard-14 .wf-kpi-label,
.ws-card-dashboard-15 .wf-kpi-label {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

/* KPI value — larger, bolder */
.ws-card-dashboard-01 .wf-kpi-value,
.ws-card-dashboard-02 .wf-kpi-value,
.ws-card-dashboard-03 .wf-kpi-value,
.ws-card-dashboard-04 .wf-kpi-value,
.ws-card-dashboard-11 .wf-kpi-value,
.ws-card-dashboard-12 .wf-kpi-value,
.ws-card-dashboard-13 .wf-kpi-value,
.ws-card-dashboard-14 .wf-kpi-value,
.ws-card-dashboard-15 .wf-kpi-value {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Panel titles — slightly bolder */
.ws-card-dashboard-05 .wf-panel-title,
.ws-card-dashboard-06 .wf-panel-title,
.ws-card-dashboard-07 .wf-panel-title,
.ws-card-dashboard-08 .wf-panel-title,
.ws-card-dashboard-09 .wf-panel-title,
.ws-card-dashboard-10 .wf-panel-title,
.ws-card-dashboard-16 .wf-panel-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Quick action icons via ::before */
.wf-quick-actions>* {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.wf-quick-actions>*::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Clients — people icon */
.wf-quick-actions>*:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5270' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* New Project — plus-square icon */
.wf-quick-actions>*:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5270' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}

/* New Invoice — document icon (white for primary button) */
.wf-quick-actions>*:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

/* Start Timer — clock icon (white for amber button) */
.wf-quick-actions>*:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* Start Timer button — orange/amber */
.wf-quick-actions>*:nth-child(4) {
  background: var(--warning);
  color: #fff;
  border-color: var(--warning);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.wf-quick-actions>*:nth-child(4):hover {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3);
}

/* Alert rows — solid flat background (instead of gradient) */
.dashboard-alerts-panel tr.wf-alert-row.severity-intense td {
  background: #fff0f0 !important;
}

.dashboard-alerts-panel tr.wf-alert-row.severity-critical td {
  background: #fff5f5 !important;
}

.dashboard-alerts-panel tr.wf-alert-row.severity-warning td {
  background: #fffbeb !important;
}

.dashboard-alerts-panel tr.wf-alert-row.severity-info td {
  background: #eff6ff !important;
}

/* ============================================================
   WS-CARDS — Time pagina (inner content)
   ============================================================ */

/* Pulse animation for live timer value */
@keyframes timePulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.ws-card-time-02 .wf-kpi-value {
  animation: timePulse 2s ease-in-out infinite;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Panel header padding for time content cards */
.ws-card-time-05 .wf-panel-header,
.ws-card-time-06 .wf-panel-header,
.ws-card-time-07 .wf-panel-header {
  padding: var(--space-5) var(--space-6);
}

.ws-card-time-05 .wf-panel-title,
.ws-card-time-06 .wf-panel-title,
.ws-card-time-07 .wf-panel-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Panel body padding */
.ws-card-time-05 .wf-panel-body,
.ws-card-time-06 .wf-panel-body {
  padding: var(--space-5) var(--space-6);
}

/* Timer action buttons area */
.ws-card-time-05 .wf-panel-body .actions {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Form field labels — uppercase, bold, small caps */
.ws-card-time-05 .wf-panel-body label:not(.wf-switch),
.ws-card-time-06 .wf-panel-body label:not(.wf-switch) {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* Two-column form grid spacing */
.ws-card-time-05 .wf-panel-body .grid.two,
.ws-card-time-06 .wf-panel-body .grid.two {
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Omschrijving textarea */
.ws-card-time-05 .wf-panel-body textarea {
  min-height: 80px;
  resize: vertical;
}

/* Billable toggle row */
.ws-card-time-05 .wf-panel-body .wf-context-row {
  border-top: 1px solid var(--border);
  padding: var(--space-3) 0;
  margin-top: var(--space-2);
  justify-content: space-between;
}

/* Billable label text */
.ws-card-time-05 .wf-panel-body .wf-context-row>span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* Full-width submit button in handmatige entry */
.ws-card-time-06 .wf-panel-body button[type="submit"] {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

/* ============================================================
   WS-CARDS & LAYOUT — Facturen pagina
   ============================================================ */

@keyframes facturenCardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced shadow + fade-up on facturen cards */
.wf-facturen-page .ws-card-facturen-01,
.wf-facturen-page .ws-card-facturen-02,
.wf-facturen-page .ws-card-facturen-03,
.wf-facturen-page .ws-card-facturen-04,
.wf-facturen-page .ws-card-facturen-05,
.wf-facturen-page .ws-card-facturen-06,
.wf-facturen-page .ws-facturen-card-01,
.wf-facturen-page .ws-facturen-card-02,
.wf-facturen-page .ws-facturen-card-03,
.wf-facturen-page .ws-facturen-card-04,
.wf-facturen-page .ws-facturen-card-05,
.wf-facturen-page .ws-facturen-card-06 {
  box-shadow: 0 4px 16px rgba(13, 17, 32, 0.07), 0 1px 4px rgba(13, 17, 32, 0.04);
  animation: facturenCardIn 0.3s ease both;
}

.wf-facturen-page .ws-facturen-card-02 {
  animation-delay: 0.04s;
}

.wf-facturen-page .ws-facturen-card-03 {
  animation-delay: 0.08s;
}

.wf-facturen-page .ws-facturen-card-04 {
  animation-delay: 0.12s;
}

.wf-facturen-page .ws-facturen-card-05 {
  animation-delay: 0.16s;
}

.wf-facturen-page .ws-facturen-card-06 {
  animation-delay: 0.2s;
}

/* Panel head padding increase */
.wf-facturen-page .ws-facturen-card-01-head,
.wf-facturen-page .ws-facturen-card-02-head,
.wf-facturen-page .ws-facturen-card-03-head,
.wf-facturen-page .ws-facturen-card-04-head,
.wf-facturen-page .ws-facturen-card-05-head,
.wf-facturen-page .ws-facturen-card-06-head {
  padding: var(--space-5) var(--space-6);
}

.wf-facturen-page .ws-facturen-card-01-head h3,
.wf-facturen-page .ws-facturen-card-02-head h3,
.wf-facturen-page .ws-facturen-card-03-head h3,
.wf-facturen-page .ws-facturen-card-04-head h3,
.wf-facturen-page .ws-facturen-card-05-head h3,
.wf-facturen-page .ws-facturen-card-06-head h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Panel body padding increase */
.wf-facturen-page .ws-facturen-card-01-body,
.wf-facturen-page .ws-facturen-card-02-body,
.wf-facturen-page .ws-facturen-card-03-body,
.wf-facturen-page .ws-facturen-card-04-body,
.wf-facturen-page .ws-facturen-card-05-body,
.wf-facturen-page .ws-facturen-card-06-body {
  padding: var(--space-5) var(--space-6);
}

/* Category overview — border-separated cells (like webbeheer KPI strip) */
.wf-facturen-page .wf-wire-stats {
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
}

.wf-facturen-page .wf-wire-stats>* {
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.wf-facturen-page .wf-wire-stats>*:nth-child(2n) {
  border-right: none;
}

.wf-facturen-page .wf-wire-stats>*:nth-last-child(-n+2) {
  border-bottom: none;
}

/* Notice/alert banner */
.wf-facturen-page .wf-alert {
  background: var(--warning-light);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: #92400e;
}

/* Invoice line items — enclosed bordered block */
.wf-facturen-page .invoice-line-head {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

.wf-facturen-page .invoice-lines {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.wf-facturen-page .invoice-lines>* {
  border-top: 1px solid var(--border);
  padding: var(--space-2) var(--space-4);
}

.wf-facturen-page .invoice-lines>*:first-child {
  border-top: none;
}

/* Invoice totals — right-aligned */
.wf-facturen-page .invoice-totals {
  text-align: right;
  margin-top: var(--space-4);
}

.wf-facturen-page .invoice-total-grand {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Invoice form — structured sections */
.wf-invoice-form {
  display: grid;
  gap: var(--space-4);
}

.wf-invoice-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.wf-invoice-section legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 var(--space-2);
}

.wf-invoice-add-grid {
  display: grid;
  gap: var(--space-2);
}

.wf-invoice-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: center;
}

.wf-invoice-options {
  display: grid;
  gap: var(--space-3);
}

.wf-invoice-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

/* Overtime preview list */
.wf-overtime-list {
  display: grid;
  gap: var(--space-1);
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.wf-overtime-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.wf-overtime-item:nth-child(odd) {
  background: var(--bg-soft);
}

/* Document upload — dashed border */
.wf-facturen-page .wf-upload-compact {
  border-style: dashed;
  border-color: var(--border-strong);
  border-width: 1.5px;
}

/* Inline document filters */
.wf-facturen-page .wf-inline-filters {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* Client facturen: compacte kaarten (admin layout blijft ongewijzigd) */
body.is-client-view .wf-facturen-page .ws-facturen-card-03,
body.is-client-view .wf-facturen-page .ws-facturen-card-01 {
  width: 100%;
  max-width: 540px;
  justify-self: start;
}

body.is-client-view .wf-facturen-page .ws-facturen-card-03-head,
body.is-client-view .wf-facturen-page .ws-facturen-card-01-head {
  padding: var(--space-3) var(--space-4);
}

body.is-client-view .wf-facturen-page .ws-facturen-card-03-head h3,
body.is-client-view .wf-facturen-page .ws-facturen-card-01-head h3 {
  font-size: 13px;
}

body.is-client-view .wf-facturen-page .ws-facturen-card-03-body,
body.is-client-view .wf-facturen-page .ws-facturen-card-01-body {
  padding: var(--space-3) var(--space-4);
}

body.is-client-view .wf-facturen-page .ws-facturen-card-03 .wf-wire-stats>* {
  padding: var(--space-2) var(--space-3);
}

body.is-client-view .wf-facturen-page .ws-facturen-card-03 .kpi .value {
  font-size: var(--text-base);
}

body.is-client-view .wf-facturen-page .ws-facturen-card-01 .wf-upload-compact {
  padding: var(--space-3);
  gap: var(--space-2);
}

/* Invoice form add-items context row — 3-col table layout */
body.is-admin-view .wf-facturen-page #invoiceForm .wf-context-row:has(.wf-context-field),
.wf-facturen-page #invoiceForm .wf-context-row:has(.wf-context-field) {
  display: grid !important;
  grid-template-columns: 140px 1fr auto !important;
  gap: 0 !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  background: transparent;
  margin-bottom: var(--space-4);
  align-items: unset;
  flex-wrap: unset;
}

/* Fields vanish from layout — label and select flow into grid columns */
.wf-facturen-page #invoiceForm .wf-context-row:has(.wf-context-field) .wf-context-field {
  display: contents;
}

/* Col 1 — label */
.wf-facturen-page #invoiceForm .wf-context-row .wf-context-field>label {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
  margin: 0;
}

/* Col 2 — select */
.wf-facturen-page #invoiceForm .wf-context-row .wf-context-field>select {
  border: none !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
  align-self: stretch;
  width: 100%;
}

/* Col 3 — Toevoegen buttons */
.wf-facturen-page #invoiceForm .wf-context-row:has(.wf-context-field)>button:not(#addOvertimeLinesBtn) {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  padding: var(--space-2) var(--space-4) !important;
  white-space: nowrap;
  align-self: stretch;
  width: auto !important;
  min-height: unset !important;
  box-shadow: none !important;
  transform: none !important;
}

.wf-facturen-page #invoiceForm .wf-context-row:has(.wf-context-field)>button:not(#addOvertimeLinesBtn):hover {
  background: var(--bg-soft) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Last field row — remove border-bottom before Meeruren row */
.wf-facturen-page #invoiceForm .wf-context-row .wf-context-field:last-of-type>label,
.wf-facturen-page #invoiceForm .wf-context-row .wf-context-field:last-of-type>select {
  border-bottom: none !important;
}

.wf-facturen-page #invoiceForm #addContractLineBtn {
  border-bottom: none !important;
}

/* Meeruren button — full-width bottom row */
.wf-facturen-page #invoiceForm #addOvertimeLinesBtn {
  grid-column: 1 / -1 !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--bg-soft) !important;
  padding: var(--space-2) var(--space-4) !important;
  justify-content: flex-start !important;
  width: 100% !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: var(--text-sm);
  color: var(--text-secondary) !important;
}

.wf-facturen-page #invoiceForm #addOvertimeLinesBtn:hover {
  background: var(--border) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 200px;
  }

  .wf-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-kpi-row-secondary {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-two-col {
    grid-template-columns: 1fr;
  }

  .wf-bottom-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-wire-split {
    grid-template-columns: 1fr;
  }

  body.is-admin-view .wf-facturen-page .wf-wire-split {
    grid-template-columns: 1fr;
  }

  .wf-settings-layout {
    grid-template-columns: 180px 1fr;
    gap: var(--space-4);
  }

  .wf-admin-page .grid.three {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wf-topbar {
    padding: 0 var(--space-4);
  }

  .wf-search-box {
    position: static;
    transform: none;
    width: auto;
    min-width: 160px;
    font-size: var(--text-xs);
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --topbar-h: 56px;
  }

  /* Sidebar verbergen op mobile, slidein via klasse */
  .wf-layout {
    grid-template-columns: 1fr;
    position: relative;
  }

  .wf-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--transition-md);
    box-shadow: var(--shadow-lg);
    width: 240px;
  }

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

  .wf-sidebar-overlay {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-md);
  }

  .wf-sidebar.is-open~.wf-main .wf-sidebar-overlay,
  .wf-sidebar-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
  }

  .wf-sidebar-toggle {
    display: flex;
  }

  .wf-main {
    grid-column: 1;
    width: 100%;
  }

  .wf-topbar {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }

  .wf-topbar-title {
    font-size: var(--text-sm);
  }

  .wf-search-box {
    display: none;
  }

  .wf-content {
    padding: var(--space-4);
  }

  .wf-content>*+* {
    margin-top: var(--space-4);
  }

  /* KPI's in 2 kolommen op mobile */
  .wf-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .wf-kpi-row-secondary {
    grid-template-columns: 1fr;
  }

  .wf-two-col,
  .wf-bottom-row,
  .wf-wire-split,
  .wf-wire-stack {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .wf-settings-layout {
    grid-template-columns: 1fr;
  }

  .wf-settings-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  .wf-settings-nav-item {
    flex: 1;
    min-width: 0;
    text-align: center;
    border-right: 1px solid var(--border);
    border-bottom: none;
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-xs);
  }

  .wf-settings-nav-item:last-child {
    border-right: none;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .wf-admin-page .grid.three {
    grid-template-columns: 1fr;
  }

  /* Modals fullscreen op mobile */
  dialog.modal {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    top: auto;
    transform: none;
    max-height: 90vh;
  }

  dialog.modal::backdrop {
    background: rgba(15, 23, 42, 0.5);
  }

  .modal-wide {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* Admin tabs scrollen op mobile */
  .wf-admin-tabs {
    overflow-x: auto;
    width: 100%;
    border-radius: var(--radius);
  }

  .wf-admin-tab-btn {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .wf-page-head {
    flex-direction: column;
    gap: var(--space-3);
  }

  .wf-page-head-right {
    width: 100%;
    justify-content: flex-start;
  }

  button,
  .btn {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }

  .notifications-panel {
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
  }

  table {
    font-size: var(--text-xs);
  }

  th,
  td {
    padding: var(--space-2) var(--space-3);
  }

  .wf-wire-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   RESPONSIVE — KLEINE MOBIEL (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --topbar-h: 52px;
  }

  .wf-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .wf-kpi-value {
    font-size: var(--text-xl);
  }

  .wf-content {
    padding: var(--space-3);
  }

  .modal-body {
    padding: var(--space-4);
  }

  .modal-head {
    padding: var(--space-4) var(--space-4) 0;
  }

  .modal-foot {
    padding: var(--space-3) var(--space-4);
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .actions button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   SCROLLBAR GLOBAAL (subtiel)
   ============================================================ */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ============================================================
   FOCUS ACCESSIBLE
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {

  .wf-sidebar,
  .wf-topbar,
  .wf-admin-tabs,
  [data-logout],
  button.ghost {
    display: none !important;
  }

  .wf-layout {
    display: block;
  }

  .wf-content {
    padding: 0;
    overflow: visible;
  }

  body {
    background: white;
    color: black;
  }
}