/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  /* Brand */
  --color-primary: #FFD000;
  --color-primary-hover: #E6BB00;
  --color-primary-text: #0A0A0A;
  --color-primary-subtle: rgba(255, 208, 0, 0.10);

  /* Semantic */
  --color-danger: #f87171;
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-danger-border: rgba(239, 68, 68, 0.3);
  --color-success: #4ade80;
  --color-success-bg: rgba(74, 222, 128, 0.15);
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-info: #60a5fa;
  --color-info-bg: rgba(96, 165, 250, 0.15);

  /* Surfaces */
  --bg-body: #111;
  --bg-sidebar: #0A0A0A;
  --bg-card: #141414;
  --bg-input: #1E1E1E;
  --bg-elevated: #1a1a1a;

  /* Borders */
  --border-default: #333;
  --border-light: #222;
  --border-strong: #444;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #d0d0d0;
  --text-muted: #aaa;
  --text-dim: #888;
  --text-placeholder: #666;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Interaction */
  --row-hover-bg: rgba(255, 255, 255, 0.05);
}

/* Toolbar utility: harmoniseert filter/action-rij in module headers */
.filter-bar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.filter-bar-actions .toggle-btn-group {
  display: flex;
  gap: 0;
  margin-right: 4px;
}
.filter-bar-actions input[type="text"],
.filter-bar-actions input[type="search"] {
  width: 200px;
  padding: 6px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
}
a { color: inherit; text-decoration: underline; }
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px; min-width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border-default);
  position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 10;
}
.sidebar-header {
  text-align: center; padding: 24px 16px 16px; border-bottom: 1px solid var(--border-default);
}
.sidebar-header img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; }
.sidebar-header h1 {
  font-family: 'Bebas Neue', sans-serif; font-size: 24px; font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase; color: var(--color-primary);
}
.sidebar-header p { color: var(--text-dim); font-size: 11px; margin-top: 2px; }
.sidebar-nav { padding: 12px 0; }
.nav-group { border-bottom: 1px solid var(--bg-elevated); }
.nav-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; color: var(--text-muted); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
  transition: all 0.2s; user-select: none;
}
.nav-group-header:hover { color: var(--color-primary); background: rgba(255, 208, 0, 0.05); }
.nav-arrow { display: inline-flex; align-items: center; transition: transform 0.2s; }
.nav-arrow i { width: 14px; height: 14px; }
.nav-group.open .nav-arrow { transform: rotate(90deg); }
.nav-group-items { display: none; padding-bottom: 6px; }
.nav-group.open .nav-group-items { display: block; }
.nav-item {
  display: block; padding: 10px 20px 10px 36px; color: var(--text-muted); font-size: 13px;
  cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent;
  text-decoration: none;
}
.nav-item:hover { color: var(--text-secondary); background: rgba(255, 255, 255, 0.03); }
.nav-item.active {
  color: var(--color-primary); background: rgba(255, 208, 0, 0.08);
  border-left-color: var(--color-primary); font-weight: 600;
}
.main-content {
  margin-left: 260px; flex: 1; padding: 30px;
  background: var(--bg-body);
  min-height: 100vh;
  max-width: calc(100vw - 260px); overflow-x: clip;
}
#welcome-screen { text-align: center; padding-top: 80px; }
#welcome-screen .welcome-logo { width: 120px; height: 120px; margin: 0 auto 20px; }
#welcome-screen .welcome-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
#welcome-screen h2 {
  font-family: 'Bebas Neue', sans-serif; font-size: 42px; font-weight: 400;
  letter-spacing: 2px; color: var(--text-primary); margin-bottom: 8px;
}
#welcome-screen p { color: var(--text-muted); font-size: 14px; opacity: 0.7; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}
.card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-primary); }
.step-number {
  width: 24px; height: 24px; background: var(--color-primary); color: #0A0A0A;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* TFI Step indicators */
#tfiSteps .step {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-default);
  transition: all 0.2s;
}
#tfiSteps .step.active {
  color: var(--color-primary); background: rgba(255,208,0,0.1); border-color: var(--color-primary);
}
#tfiSteps .step.active .step-number { background: var(--color-primary); color: #0A0A0A; }
#tfiSteps .step:not(.active) .step-number { background: var(--border-default); color: var(--text-muted); }

/* TFI Select dropdown */
.tfi-select {
  width: 100%; padding: 12px 14px; font-size: 15px; font-weight: 500;
  background: var(--bg-elevated); color: var(--text-secondary); border: 2px solid var(--border-strong);
  border-radius: 8px; cursor: pointer; transition: border-color 0.2s;
}
.tfi-select:focus { border-color: var(--color-primary); outline: none; }
.tfi-select:hover { border-color: var(--text-dim); }

/* TFI Analysis cards */
.tfi-analysis-card {
  background: var(--bg-elevated); border: 1px solid var(--color-primary); border-radius: 8px;
  padding: 18px; margin-bottom: 16px;
}
.tfi-analysis-card .tfi-card-title {
  font-size: 16px; font-weight: 700; color: var(--color-primary); margin-bottom: 14px;
}
.tfi-analysis-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.tfi-data-item {
  background: var(--bg-body); border-radius: 6px; padding: 12px;
}
.tfi-data-label {
  color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.tfi-data-value {
  color: var(--text-primary); font-size: 16px; font-weight: 600;
}
.tfi-data-value-sm {
  color: var(--text-secondary); font-size: 14px;
}

/* TFI Match result boxes */
.tfi-match-box {
  border-radius: 8px; padding: 16px; font-size: 14px; border-width: 2px; border-style: solid;
}
.tfi-match-box.high { background: #0a2a0a; border-color: #4ade80; }
.tfi-match-box.medium { background: #2a2200; border-color: #fbbf24; }
.tfi-match-box.low { background: #2a0a0a; border-color: #f87171; }
.tfi-match-box.none { background: #2a0a0a; border-color: #f87171; }
.tfi-match-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.tfi-match-title.high { color: #4ade80; }
.tfi-match-title.medium { color: #fbbf24; }
.tfi-match-title.low { color: #f87171; }
.tfi-match-title.none { color: #f87171; }
.tfi-match-detail { color: var(--text-primary); font-size: 15px; margin-bottom: 4px; }
.tfi-match-sub { color: var(--text-secondary); font-size: 13px; }

/* TFI File list */
.tfi-file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: 6px; margin-bottom: 6px;
}
.tfi-file-name { flex: 1; color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.tfi-file-size { color: var(--text-muted); font-size: 12px; }
.tfi-file-remove {
  background: none; border: none; color: #f87171; cursor: pointer;
  font-size: 18px; padding: 2px 6px; border-radius: 4px;
}
.tfi-file-remove:hover { background: rgba(248,113,113,0.15); }

/* TFI Hour grid inputs */
.tfi-hour-input, .tfi-desc-input {
  padding: 6px 8px; background: var(--bg-input); color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: 4px; transition: border-color 0.2s;
}
.tfi-hour-input { width: 60px; text-align: center; font-weight: 600; }
.tfi-desc-input { font-size: 12px; width: 100%; }
.tfi-hour-input:focus, .tfi-desc-input:focus, .tfi-date-input:focus { border-color: var(--color-primary); outline: none; }

/* TFI Date inputs (aparte class zodat ze niet meegeteld worden als uren) */
.tfi-date-input {
  padding: 8px 12px; font-size: 14px; background: var(--bg-input); color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: 4px; transition: border-color 0.2s;
}
/* ============================================
   UNIFIED BUTTON SYSTEM
   ============================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 500;
  line-height: 1; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
  text-decoration: none; vertical-align: middle;
}
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Primary — yellow, high emphasis */
.btn-primary { background: var(--color-primary); color: var(--color-primary-text); font-weight: 600; }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: 0 4px 12px rgba(255, 208, 0, 0.25); }

/* Secondary — outlined, medium emphasis */
.btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-subtle); }

/* Ghost — subtle border, low emphasis */
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border-default); }
.btn-ghost:hover { color: var(--text-secondary); background: rgba(255, 255, 255, 0.05); border-color: var(--border-strong); }

/* Danger — destructive actions */
.btn-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.25); }

/* Success — confirm/approve */
.btn-success { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(74, 222, 128, 0.3); }
.btn-success:hover { background: rgba(74, 222, 128, 0.25); }

/* Size variants */
.btn-xs { padding: 3px 8px; font-size: 11px; gap: 4px; }
.btn-xs svg { width: 12px; height: 12px; }
.btn-sm { padding: 6px 12px; font-size: 12px; gap: 5px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { padding: 14px 28px; font-size: 15px; font-weight: 600; gap: 8px; }
.btn-lg svg { width: 18px; height: 18px; }
.btn-small { padding: 6px 12px; font-size: 12px; } /* legacy alias */

/* Icon-only */
.btn-icon { padding: 6px; min-width: 32px; min-height: 32px; }
.btn-icon.btn-sm { padding: 4px; min-width: 28px; min-height: 28px; }
.btn-icon.btn-xs { padding: 3px; min-width: 24px; min-height: 24px; }

/* Loading state */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--text-muted); border-right-color: transparent;
  border-radius: 50%; animation: btn-spin 0.6s linear infinite;
}
.btn-primary.btn-loading::after { border-color: var(--color-primary-text); border-right-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.input-group { display: flex; gap: 12px; margin-bottom: 12px; }
.input-group input, .input-group select {
  flex: 1; padding: 12px 16px;
  background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: 8px; color: var(--text-primary); font-size: 14px;
}
.input-group input:focus, .input-group select:focus { outline: none; border-color: var(--color-primary); }
.input-group input::placeholder { color: var(--text-muted); }
.input-group select option { background: var(--bg-elevated); }
.sub-tabs { display: flex; gap: 6px; margin-bottom: 14px; background: rgba(0,0,0,0.2); padding: 4px; border-radius: 8px; }
.sub-tab {
  flex: 1; padding: 8px 12px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.sub-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.sub-tab.active { background: rgba(230, 187, 0, 0.2); color: #E6BB00; }
.drop-zone {
  border: 2px dashed rgba(255, 255, 255, 0.2); border-radius: 12px;
  padding: 40px; text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 16px;
}
.drop-zone:hover, .drop-zone.dragover { border-color: #E6BB00; background: rgba(230, 187, 0, 0.1); }
.drop-zone-icon { font-size: 48px; margin-bottom: 12px; }
.drop-zone-text { color: var(--text-muted); font-size: 14px; }
.file-list, .folder-list { max-height: 200px; overflow-y: auto; margin-bottom: 16px; }
.file-item, .folder-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; margin-bottom: 8px; font-size: 13px;
}
.file-item .name, .folder-item .name { display: flex; align-items: center; gap: 8px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.file-item .status { font-size: 12px; color: var(--text-muted); margin-left: 12px; }
.file-item .status.analyzing { color: #E6BB00; }
.file-item .status.done { color: #4ade80; }
.remove-btn { background: none; border: none; color: #f87171; cursor: pointer; padding: 4px 8px; font-size: 16px; opacity: 0.6; }
.remove-btn:hover { opacity: 1; }
.document-list { max-height: 400px; overflow-y: auto; }
.document-item { background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 18px; margin-bottom: 14px; border: 1px solid rgba(255, 255, 255, 0.1); }
.document-item .doc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.document-item .original-name { font-size: 12px; color: var(--text-muted); }
.document-item .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.document-item .field label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; }
.document-item .field select, .document-item .field input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: 8px; color: var(--text-primary); font-size: 13px;
}
.document-item .field select:focus, .document-item .field input:focus { outline: none; border-color: var(--color-primary); }
.document-item .field select option { background: var(--bg-elevated); }
.confidence { font-size: 11px; padding: 4px 10px; border-radius: 4px; background: rgba(255, 208, 0, 0.2); color: var(--color-primary); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; }
.confidence.high { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.confidence.low { background: rgba(248, 113, 113, 0.2); color: #f87171; }
.filename-input { font-family: monospace; font-size: 13px !important; background: rgba(230, 187, 0, 0.1) !important; border-color: rgba(230, 187, 0, 0.3) !important; color: #E6BB00 !important; }
.status-log { background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 16px; max-height: 250px; overflow-y: auto; font-family: monospace; font-size: 12px; }
.status-log .entry { padding: 6px 0; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.05); }
.status-log .entry:last-child { border-bottom: none; }
.status-log .entry.success { color: #4ade80; }
.status-log .entry.error { color: #f87171; }
.results { text-align: center; padding: 30px; }
.results-icon { font-size: 56px; margin-bottom: 16px; }
.results h3 { font-size: 22px; margin-bottom: 10px; }
.results p { color: var(--text-muted); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.3); border-radius: 50%; border-top-color: #000; animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.folder-path { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-family: monospace; font-size: 12px; color: var(--text-muted); word-break: break-all; }
.folder-path.selected { color: #4ade80; }
.stats { display: flex; gap: 16px; margin-bottom: 16px; }
.stat { flex: 1; background: rgba(0,0,0,0.2); border-radius: 10px; padding: 14px; text-align: center; }
.stat-value { font-family: 'Bebas Neue', sans-serif; font-size: 48px; font-weight: 400; color: var(--color-primary); letter-spacing: 2px; }
.stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.match-card { background: rgba(0,0,0,0.2); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.match-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.match-label { font-size: 12px; color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.match-value { font-size: 18px; font-weight: 600; color: #FFFFFF; }
.match-suggestion { font-size: 14px; color: #E6BB00; margin-top: 8px; }
.preview-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.preview-table th, .preview-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary); }
.preview-table th { background: rgba(0,0,0,0.2); color: var(--text-muted); font-weight: 500; }
.preview-table tbody tr { cursor: pointer; transition: background 0.12s; }
.preview-table tbody tr:hover { background: var(--row-hover-bg); }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

/* Manual Entry Styles */
.date-range-picker { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.date-range-picker input[type="date"] {
  padding: 10px 14px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px; color: #FFFFFF; font-size: 14px;
}
.date-range-picker input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.hours-grid { max-height: 400px; overflow-y: auto; }
.hour-row {
  display: grid; grid-template-columns: 110px 80px 90px 90px 60px auto;
  gap: 10px; align-items: center; padding: 10px 12px;
  background: rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 8px;
}
.hour-row.header { background: rgba(0,0,0,0.4); font-weight: 500; color: var(--text-muted); font-size: 12px; }
.hour-row input[type="number"] {
  width: 100%; padding: 8px 10px; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: #fff; font-size: 13px; text-align: center;
}
.hour-row input[type="number"]:focus { outline: none; border-color: var(--color-primary); }
.hour-row .date-label { font-size: 13px; }
.hour-row .day-name { font-size: 11px; color: var(--text-muted); }
.hour-row .time-display { font-size: 12px; color: #4ade80; font-family: monospace; }
.hour-row .time-input, .hour-row input[type="time"] {
  width: 100%; padding: 6px 8px; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: #4ade80;
  font-size: 12px; font-family: monospace;
}
.hour-row input[type="time"]:focus { outline: none; border-color: var(--color-primary); }
.hour-row input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.7) sepia(1) saturate(5) hue-rotate(80deg); cursor: pointer; }
.hour-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #E6BB00; }
.copy-down-btn {
  background: rgba(230, 187, 0, 0.2); border: 1px solid rgba(230, 187, 0, 0.3);
  color: #E6BB00; padding: 6px 12px; border-radius: 6px; font-size: 11px; cursor: pointer;
}
.copy-down-btn:hover { background: rgba(230, 187, 0, 0.3); }
.total-hours { font-size: 14px; color: #E6BB00; font-weight: 600; margin-top: 12px; text-align: right; }

/* Upcoming Starts Widget */
.starts-widget { margin-bottom: 24px; width: 100%; }
.starts-widget-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--text-primary); text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.starts-card {
  background: var(--bg-sidebar); border: 1px solid var(--border-default); border-radius: 16px; padding: 16px 20px; width: 100%;
}
.starts-loading, .starts-empty { color: var(--text-muted); font-size: 13px; padding: 12px 0; text-align: center; }
.starts-error { color: #f87171; font-size: 13px; padding: 12px 0; text-align: center; }
.starts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.starts-table th {
  text-align: left; color: var(--text-muted); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 8px;
  border-bottom: 1px solid var(--border-default);
}
.starts-table td { color: var(--text-secondary); padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.starts-table tr:last-child td { border-bottom: none; }
.starts-table tbody tr { cursor: pointer; transition: background 0.12s; }
.starts-table tbody tr:hover td { background: var(--row-hover-bg); }
.starts-name { font-weight: 600; color: #FFFFFF; }
.starts-date { font-family: monospace; color: #E6BB00; }
.starts-countdown {
  font-size: 12px; padding: 3px 8px; border-radius: 4px; font-weight: 600; white-space: nowrap;
}
.starts-countdown.today { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.starts-countdown.soon { background: rgba(255, 208, 0, 0.2); color: var(--color-primary); }
.starts-countdown.later { background: rgba(255, 255, 255, 0.1); color: var(--text-muted); }
.starts-client { color: var(--text-muted); }
.starts-project { color: var(--text-dim); font-size: 12px; }
.starts-refresh {
  background: none; border: none; cursor: pointer; font-size: 14px;
  padding: 2px 6px; border-radius: 4px; margin-left: 4px;
}
.starts-refresh:hover { background: rgba(0,0,0,0.1); }
.stops-countdown {
  font-size: 12px; padding: 3px 8px; border-radius: 4px; font-weight: 600; white-space: nowrap;
}
.stops-countdown.stopped { background: rgba(248, 113, 113, 0.2); color: #f87171; }
.stops-countdown.lastday { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.stops-countdown.ending { background: rgba(255, 208, 0, 0.2); color: var(--color-primary); }
tr.hidden { display: none; }
.toggle-btn {
  background: none; border: 1px solid var(--border-default); color: var(--text-muted); padding: 6px 16px;
  border-radius: 6px; font-size: 12px; cursor: pointer; margin-top: 10px; width: 100%;
}
.toggle-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-secondary); }

/* Planning Tool Styles */
.pt-form-group { margin-bottom: 14px; }
.pt-form-group label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.pt-form-group select, .pt-form-group input {
  width: 100%; padding: 12px 16px;
  background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: 8px; color: var(--text-primary); font-size: 14px;
}
.pt-form-group select:focus, .pt-form-group input:focus { outline: none; border-color: var(--color-primary); }
.pt-form-group select option { background: var(--bg-elevated); }
.pt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pt-worker-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-worker-table th {
  text-align: left; color: var(--text-muted); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
}
.pt-worker-table td { color: var(--text-secondary); padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pt-worker-table tbody tr { cursor: pointer; transition: background 0.12s; }
.pt-worker-table tbody tr:hover td { background: var(--row-hover-bg); }
.pt-worker-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: #E6BB00; cursor: pointer; }
.pt-badge {
  font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 600; white-space: nowrap;
}
.pt-badge.available { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.pt-badge.warning { background: rgba(255, 208, 0, 0.2); color: var(--color-primary); }
.pt-worker-name { font-weight: 600; color: #FFFFFF; }
.pt-worker-trade { font-size: 12px; color: var(--text-muted); }
.pt-summary-list { list-style: none; padding: 0; }
.pt-summary-list li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-secondary); font-size: 14px; }
.pt-summary-list li:last-child { border-bottom: none; }
.pt-summary-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.pt-select-all { font-size: 12px; color: #E6BB00; cursor: pointer; background: none; border: none; padding: 4px 0; }
.pt-select-all:hover { text-decoration: underline; }
.pt-count { font-size: 13px; color: var(--text-muted); margin-top: 10px; }

/* Planning Overzicht Grid */
.po-stats {
  display: flex; gap: 16px; margin-bottom: 16px;
}
.po-stats .stat { flex: 1; }
.po-grid-wrapper {
  overflow-x: auto; overflow-y: auto; max-height: 70vh;
  background: var(--bg-sidebar); border: 1px solid var(--border-default); border-radius: 12px;
  max-width: 100%;
}
.po-grid {
  border-collapse: separate; border-spacing: 0;
  font-size: 11px; white-space: nowrap;
}
.po-grid th, .po-grid td {
  padding: 6px 4px; border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
  text-align: center; min-width: 80px;
}
.po-grid thead th {
  background: var(--bg-elevated); color: var(--text-muted); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.3px;
  position: sticky; top: 0; z-index: 2;
}
.po-grid thead tr:first-child th {
  background: var(--bg-body); color: var(--color-primary); font-size: 11px; font-weight: 700;
}
.po-grid .po-name-col {
  position: sticky; left: 0; z-index: 3;
  background: var(--bg-sidebar); text-align: left; min-width: 160px; max-width: 200px;
  font-weight: 600; color: var(--text-primary); padding-left: 10px;
}
.po-grid thead .po-name-col { z-index: 4; background: var(--bg-elevated); }
.po-grid thead tr:first-child .po-name-col { background: var(--bg-body); }
.po-grid .po-weekend { background: rgba(255, 255, 255, 0.03); }
.po-grid .po-cell {
  font-size: 10px; font-weight: 500; padding: 5px 3px;
  overflow: hidden; text-overflow: ellipsis; max-width: 100px;
}
.po-grid .po-no-shifts td:not(.po-name-col) { background: rgba(255,255,255,0.01); }
.po-grid .po-no-shifts .po-name-col { color: var(--text-dim); font-weight: 400; }
.po-grid tbody tr:hover td:not(.po-name-col) { background: var(--row-hover-bg); }
.po-grid tbody tr:hover .po-name-col { filter: brightness(1.05); }
.po-skill-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-default);
  font-size: 12px; color: var(--text-muted); transition: all 0.2s;
}
.po-skill-chip.active { background: rgba(255, 208, 0, 0.15); border-color: var(--color-primary); color: var(--color-primary); }
.po-skill-chip input { width: 14px; height: 14px; accent-color: #E6BB00; cursor: pointer; }

/* Pop-out mode: hide sidebar, full width */
body.popout-mode .sidebar { display: none; }
body.popout-mode .main-content { margin-left: 0; max-width: 100vw; }
body.popout-mode .po-grid-wrapper { max-height: calc(100vh - 300px); }

/* Multi-user chips */
.user-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; min-height: 20px; }
.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(255, 208, 0, 0.15); border: 1px solid rgba(255, 208, 0, 0.3);
  color: var(--color-primary); font-size: 13px; font-weight: 500;
}
.user-chip .remove-chip {
  background: none; border: none; color: #f87171; cursor: pointer;
  font-size: 14px; padding: 0 2px; opacity: 0.7; line-height: 1;
}
.user-chip .remove-chip:hover { opacity: 1; }
.func-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 10; margin-top: -4px; }
.func-dropdown-item { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-secondary); }
.func-dropdown-item:hover { background: var(--bg-input); color: var(--text-primary); }
.func-dropdown-item:first-child { border-radius: 6px 6px 0 0; }
.func-dropdown-item:last-child { border-radius: 0 0 6px 6px; }
.add-user-row { display: flex; gap: 8px; align-items: center; }
.add-user-row select { flex: 1; }
.btn-add-user {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px; border: 2px solid var(--color-primary);
  background: rgba(255, 208, 0, 0.1); color: var(--color-primary); font-size: 20px;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.btn-add-user:hover { background: rgba(255, 208, 0, 0.2); transform: scale(1.05); }

/* Login page */
.login-container {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFD700 0%, #E6BB00 100%);
}
.login-box {
  background: var(--bg-sidebar); border: 1px solid var(--border-default); border-radius: 20px;
  padding: 48px; text-align: center; max-width: 400px; width: 90%;
}
.login-box img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 16px; }
.login-box h1 {
  font-family: 'Bebas Neue', sans-serif; font-size: 32px; font-weight: 400;
  letter-spacing: 2px; color: var(--color-primary); margin-bottom: 8px;
}
.login-box p { color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }
.login-box input[type="password"], .login-box input[type="email"], .login-box input[type="text"] {
  width: 100%; padding: 14px 18px; background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: 10px; color: var(--text-primary); font-size: 16px; text-align: center;
  margin-bottom: 16px;
}
.login-box input[type="password"]:focus, .login-box input[type="email"]:focus, .login-box input[type="text"]:focus { outline: none; border-color: var(--color-primary); }
.login-box input[type="email"]::placeholder, .login-box input[type="text"]::placeholder { color: var(--text-dim); }
.login-box .btn { width: 100%; justify-content: center; }
.login-box input[type="checkbox"] { accent-color: var(--color-primary); }
.login-error { color: #f87171; font-size: 13px; margin-bottom: 12px; display: none; }

/* Sidebar logout */
.sidebar-footer {
  padding: 16px; border-top: 1px solid var(--border-default); margin-top: auto;
}
.sidebar-footer a {
  display: block; padding: 10px 20px; color: var(--text-muted); font-size: 13px;
  cursor: pointer; text-decoration: none; border-radius: 8px;
}
.sidebar-footer a:hover { color: #f87171; background: rgba(248, 113, 113, 0.1); }

/* Invoicing forms */
.inv-form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.inv-form-row .inv-form-group { flex: 1; }
.inv-form-group { margin-bottom: 12px; }
.inv-form-group label {
  display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px;
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
}
.inv-form-group input, .inv-form-group textarea, .inv-form-group select {
  width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: 8px; color: var(--text-primary); font-size: 14px; font-family: inherit;
}
.inv-form-group input:focus, .inv-form-group textarea:focus, .inv-form-group select:focus {
  outline: none; border-color: var(--color-primary-hover);
}
.inv-form-group input::placeholder, .inv-form-group textarea::placeholder { color: var(--text-dim); }

/* Gegroepeerde formuliersecties (freelancerkaart) */
.form-sections {
  display: grid;
  /* 560px i.p.v. een kleinere waarde: daaronder zou het grid op brede schermen
     naar drie kolommen springen, en dan worden de secties te smal om te lezen. */
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: 16px;
  /* Geen align-items:start — de vlakken strekken naar de hoogste in hun rij,
     zodat de kaders per rij even groot zijn. */
}
.form-section {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
}
.form-section-wide { grid-column: 1 / -1; }
.form-section-title {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  border-radius: 10px 10px 0 0;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-primary);
}
.form-section-title i { width: 14px; height: 14px; color: var(--color-primary); }
.form-section-body { padding: 16px 16px 4px; }
.form-section-body .inv-form-row:last-child,
.form-section-body > .inv-form-group:last-child { margin-bottom: 12px; }
.form-section-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.form-check-row, .inv-form-group label.form-check-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 0;
  font-size: 13px; font-weight: normal; color: var(--text-secondary);
  text-transform: none; letter-spacing: normal; cursor: pointer;
}
.inv-form-group .form-check-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.form-sticky-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 20px -24px -24px; padding: 14px 24px;
  background: var(--bg-card); border-top: 1px solid var(--border-default);
}
.btn-whatsapp {
  border-color: rgba(37, 211, 102, 0.45);
  color: #1da851;
}
.btn-whatsapp:hover:not(:disabled) {
  background: rgba(37, 211, 102, 0.12);
  border-color: #25D366;
  color: #128C4A;
}
body:not(.light-mode) .btn-whatsapp { color: #25D366; }
body:not(.light-mode) .btn-whatsapp:hover:not(:disabled) { color: #4ade80; }
/* .card clipt normaal met overflow:hidden; dat maakt de kaart een scroll-
   container en dan plakt de sticky balk aan de kaart in plaats van aan het
   scherm. De gele ::before-balk krijgt daarom zelf een radius. */
.card.has-sticky-actions { overflow: visible; }
.card.has-sticky-actions::before { border-radius: 16px 16px 0 0; }
.form-textarea {
  width: 100%; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; resize: vertical;
}
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table thead th {
  text-align: left; padding: 10px 12px; font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-default);
}
.inv-table tbody td { padding: 10px 12px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--bg-elevated); text-align: left; }
.inv-table tbody tr { cursor: pointer; transition: background 0.12s; }
.inv-table tbody tr:hover { background: var(--row-hover-bg); }
.inv-status-complete { color: #4ade80; }
.inv-status-incomplete { color: #fbbf24; }
/* Plaatsingen status badges */
.pl-status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
}
.pl-status-concept { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.pl-status-actief { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.pl-status-afgelopen, .pl-status-afgerond { background: rgba(136, 136, 136, 0.15); color: #999; }
.pl-status-geannuleerd { background: rgba(248, 113, 113, 0.15); color: #f87171; }

.inv-rate-delete {
  background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px;
  padding: 4px 8px; border-radius: 4px; transition: all 0.15s;
}
.inv-rate-delete:hover { color: #f87171; background: rgba(248, 113, 113, 0.1); }

/* Invoice line drag-to-reorder */
.fct-drag-handle { cursor: grab; color: var(--text-dim); text-align: center; width: 20px; padding: 0 4px; user-select: none; }
.fct-drag-handle:active { cursor: grabbing; }
.fct-drag-handle svg { pointer-events: none; }
.fct-row-dragging { opacity: 0.35; }
.fct-drag-over { outline: 2px dashed var(--color-primary); outline-offset: -1px; background: rgba(212, 170, 80, 0.08) !important; }

/* Dossier modal */
#fdDossierModal {
  margin-top: 16px; padding: 20px;
  background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 8px;
}
#fdDossierModal h3 { margin: 0 0 16px 0; color: var(--color-primary-hover); }
#fdDossierModal .dossier-info { color: var(--text-secondary); }
#fdDossierModal .dossier-cert-list { color: var(--text-muted); font-size: 13px; margin: 6px 0; padding-left: 20px; }

/* Facturen module */
.fct-steps { display: flex; gap: 4px; margin-bottom: 20px; }
.fct-step {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 8px; font-size: 13px; color: var(--text-dim); transition: all 0.2s;
}
.fct-step.active { color: var(--color-primary); background: rgba(255, 208, 0, 0.1); }
.fct-step.completed { color: #4ade80; }
.fct-step-num {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--border-default); color: var(--text-muted);
}
.fct-step.active .fct-step-num { background: var(--color-primary); color: #000; }
.fct-step.completed .fct-step-num { background: #4ade80; color: #000; }

.fct-type-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
}
.fct-type-collectief { background: rgba(27, 58, 92, 0.4); color: #7db4e0; }
.fct-type-freelancer { background: rgba(45, 74, 30, 0.4); color: #9ae17b; }
.fct-type-bemiddelfee { background: rgba(74, 58, 30, 0.4); color: #fbbf24; }

/* Grouped invoice rows */
.fct-toggle-icon { color: var(--text-muted); font-size: 10px; display: inline-block; width: 14px; transition: color 0.2s; }
.fct-group-child td { background: rgba(255,255,255,0.02); }
.fct-group-child td:first-child { border-left: 2px solid #333; }

.fct-summary { background: var(--bg-elevated); border-radius: 8px; padding: 16px; }
.fct-summary-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--text-secondary); }
.fct-summary-total { font-weight: 700; font-size: 16px; border-top: 2px solid var(--border-default); padding-top: 10px; margin-top: 8px; color: var(--color-primary); }

.fct-hours-grid { width: 100%; border-collapse: collapse; }
.fct-hours-grid thead th { text-align: left; padding: 8px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-default); }
.fct-hours-grid tbody td { padding: 4px 8px; border-bottom: 1px solid var(--bg-elevated); color: var(--text-secondary); font-size: 14px; }
.fct-hours-grid .fct-weekend { opacity: 0.7; }
.fct-hours-grid .fct-weekend td { background: rgba(255,255,255,0.02); }

/* Detail page tabs (client/freelancer) */
.detail-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-default); margin-bottom: 16px; }
.detail-tab { padding: 10px 20px; background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s; }
.detail-tab:hover { color: var(--text-secondary); }
.detail-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.detail-tab-more { position: relative; display: flex; align-items: stretch; }
.detail-tab-more-menu { position: absolute; top: 100%; right: 0; z-index: 100; min-width: 180px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); padding: 4px 0; margin-top: 4px; }
.detail-tab-more-menu button { display: block; width: 100%; padding: 8px 16px; background: none; border: none; color: var(--text-secondary); font-size: 14px; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; }
.detail-tab-more-menu button:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Toggle buttons (Actief/Archief) */
.toggle-btn { padding: 6px 14px; font-size: 12px; line-height: 1.2; background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.toggle-btn:first-child { border-radius: 6px 0 0 6px; }
.toggle-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.toggle-btn.active { background: var(--border-default); color: var(--color-primary); border-color: var(--border-strong); }
.toggle-btn:hover:not(.active) { color: var(--text-secondary); background: var(--bg-input); }

.detail-back-btn { background: none; border: 1px solid var(--border-strong); color: var(--text-muted); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.detail-back-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.detail-header h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text-secondary); }

/* ============================================
   THEME TOGGLE SWITCH
   ============================================ */
.theme-switch {
  position: relative; display: inline-block; width: 40px; height: 22px;
}
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: #333; border-radius: 22px; transition: 0.3s;
}
.theme-slider::before {
  content: ''; position: absolute; height: 16px; width: 16px;
  left: 3px; bottom: 3px; background: #888; border-radius: 50%; transition: 0.3s;
}
.theme-switch input:checked + .theme-slider { background: #ddd; }
.theme-switch input:checked + .theme-slider::before { transform: translateX(18px); background: #FFB800; }

/* ============================================
   LIGHT MODE (DAG MODUS)
   ============================================ */
body.light-mode {
  /* Override design tokens for light mode */
  --color-primary: #c49500;
  --color-primary-hover: #a87f00;
  --color-primary-text: #ffffff;
  --color-primary-subtle: rgba(196, 149, 0, 0.08);

  --color-danger: #dc2626;
  --color-danger-bg: rgba(220, 38, 38, 0.08);
  --color-danger-border: rgba(220, 38, 38, 0.2);
  --color-success: #16a34a;
  --color-success-bg: rgba(22, 163, 74, 0.1);
  --color-warning: #a16207;
  --color-warning-bg: rgba(202, 138, 4, 0.12);
  --color-info: #2563eb;
  --color-info-bg: rgba(37, 99, 235, 0.1);

  --bg-body: #e8e8e8;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f5f5f5;
  --bg-elevated: #f5f5f5;

  --border-default: #ddd;
  --border-light: #e0e0e0;
  --border-strong: #ccc;

  --text-primary: #222;
  --text-secondary: #444;
  --text-muted: #888;
  --text-dim: #999;
  --text-placeholder: #aaa;

  --row-hover-bg: rgba(0, 0, 0, 0.045);

  background: var(--bg-body);
  color: #333;
}

/* Sidebar */
body.light-mode .sidebar {
  background: #ffffff;
  border-right: 1px solid #ddd;
}
body.light-mode .sidebar-header { border-bottom: 1px solid #e0e0e0; }
body.light-mode .sidebar-header h1 { color: #c49500; }
body.light-mode .sidebar-header p { color: #999; }
body.light-mode .nav-group { border-bottom: 1px solid #eee; }
body.light-mode .nav-group-header { color: #666; }
body.light-mode .nav-group-header:hover { color: #c49500; background: rgba(196, 149, 0, 0.06); }
body.light-mode .nav-item { color: #777; }
body.light-mode .nav-item:hover { color: #333; background: rgba(0,0,0,0.03); }
body.light-mode .nav-item.active {
  color: #c49500; background: rgba(196, 149, 0, 0.08);
  border-left-color: #c49500;
}

/* Main content - nu via var(--bg-body), geen override meer nodig */

/* Welcome screen */
body.light-mode #welcome-screen h2 { color: #333; }
body.light-mode #welcome-screen p { color: #666; }

/* Cards */
body.light-mode .card {
  background: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.light-mode .card::before { background: #c49500; }
body.light-mode .card-title { color: #222; }

/* Buttons — auto-switch via CSS variables, no overrides needed */

/* Inputs */
body.light-mode .input-group input,
body.light-mode .input-group select,
body.light-mode .inv-form-group input,
body.light-mode .inv-form-group textarea,
body.light-mode .inv-form-group select,
body.light-mode .pt-form-group select,
body.light-mode .pt-form-group input {
  background: #f5f5f5; border-color: #ddd; color: #333;
}
body.light-mode .input-group input:focus,
body.light-mode .input-group select:focus,
body.light-mode .inv-form-group input:focus,
body.light-mode .inv-form-group textarea:focus,
body.light-mode .inv-form-group select:focus,
body.light-mode .pt-form-group select:focus,
body.light-mode .pt-form-group input:focus {
  border-color: #c49500;
}
body.light-mode .form-textarea {
  background: #f5f5f5; border-color: #ddd; color: #333;
}
body.light-mode .form-textarea:focus {
  border-color: #c49500;
}
body.light-mode .form-textarea::placeholder { color: #aaa; }
body.light-mode .input-group input::placeholder,
body.light-mode .inv-form-group input::placeholder,
body.light-mode .inv-form-group textarea::placeholder { color: #aaa; }
body.light-mode .input-group select option,
body.light-mode .inv-form-group select option,
body.light-mode .document-item .field select option,
body.light-mode .pt-form-group select option { background: #fff; color: #333; }

/* Labels */
body.light-mode .inv-form-group label,
body.light-mode .pt-form-group label { color: #888; }

/* Tables */
body.light-mode .inv-table thead th { color: #888; border-bottom-color: #ddd; }
body.light-mode .inv-table tbody td { color: #444; border-bottom-color: #eee; }
body.light-mode .inv-table tbody tr:hover { background: rgba(196, 149, 0, 0.04); }

body.light-mode .starts-table th { color: #888; border-bottom-color: #ddd; }
body.light-mode .starts-table td { color: #444; border-bottom-color: #eee; }
body.light-mode .starts-table tr:hover td { background: rgba(0,0,0,0.02); }
body.light-mode .starts-name { color: #222; }
body.light-mode .starts-date { color: #b38600; }
body.light-mode .starts-client { color: #777; }
body.light-mode .starts-project { color: #999; }

body.light-mode .pt-worker-table th { color: #888; border-bottom-color: #ddd; }
body.light-mode .pt-worker-table td { color: #444; border-bottom-color: #eee; }
body.light-mode .pt-worker-name { color: #222; }

/* Starts/Stops widget */
body.light-mode .starts-card {
  background: #ffffff; border-color: #ddd;
}
body.light-mode .starts-widget-title { color: #333; }

/* Stats */
body.light-mode .stat { background: rgba(0,0,0,0.03); }
body.light-mode .stat-value { color: #c49500; }
body.light-mode .stat-label { color: #888; }

/* Status badges */
body.light-mode .pl-status-concept { background: rgba(202, 138, 4, 0.12); color: #a16207; }
body.light-mode .pl-status-actief { background: rgba(22, 163, 74, 0.1); color: #15803d; }
body.light-mode .pl-status-afgelopen, body.light-mode .pl-status-afgerond { background: rgba(100, 100, 100, 0.1); color: #888; }
body.light-mode .pl-status-geannuleerd { background: rgba(220, 38, 38, 0.08); color: #dc2626; }

/* Type badges */
body.light-mode .fct-type-collectief { background: rgba(27, 58, 92, 0.1); color: #2563eb; }
body.light-mode .fct-type-freelancer { background: rgba(22, 101, 52, 0.1); color: #15803d; }
body.light-mode .fct-group-child td { background: rgba(0,0,0,0.02); }
body.light-mode .fct-group-child td:first-child { border-left-color: #ddd; }
body.light-mode .fct-type-bemiddelfee { background: rgba(161, 98, 7, 0.1); color: #a16207; }

/* Sub tabs */
body.light-mode .sub-tabs { background: rgba(0,0,0,0.04); }
body.light-mode .sub-tab { color: #888; }
body.light-mode .sub-tab:hover { color: #333; background: rgba(0,0,0,0.04); }
body.light-mode .sub-tab.active { background: rgba(196, 149, 0, 0.12); color: #a16207; }

/* Steps */
body.light-mode .fct-step { color: #999; }
body.light-mode .fct-step.active { color: #c49500; background: rgba(196, 149, 0, 0.08); }
body.light-mode .fct-step.completed { color: #15803d; }
body.light-mode .fct-step-num { background: #ddd; color: #888; }
body.light-mode .fct-step.active .fct-step-num { background: #c49500; color: #fff; }
body.light-mode .fct-step.completed .fct-step-num { background: #16a34a; color: #fff; }
body.light-mode .step-number { background: #c49500; color: #fff; }

/* TFI module light mode */
body.light-mode #tfiSteps .step { background: rgba(0,0,0,0.04); border-color: #ddd; color: #999; }
body.light-mode #tfiSteps .step.active { color: #a16207; background: rgba(196,149,0,0.08); border-color: #c49500; }
body.light-mode #tfiSteps .step:not(.active) .step-number { background: #ddd; color: #888; }
body.light-mode .tfi-select { background: #fff; color: #333; border-color: #ccc; }
body.light-mode .tfi-select:focus { border-color: #c49500; }
body.light-mode .tfi-select:hover { border-color: #999; }
body.light-mode .tfi-analysis-card { background: #f8f8f8; border-color: #c49500; }
body.light-mode .tfi-analysis-card .tfi-card-title { color: #a16207; }
body.light-mode .tfi-data-item { background: #fff; }
body.light-mode .tfi-data-label { color: #888; }
body.light-mode .tfi-data-value { color: #222; }
body.light-mode .tfi-data-value-sm { color: #444; }
body.light-mode .tfi-match-box.high { background: #f0fdf4; border-color: #16a34a; }
body.light-mode .tfi-match-box.medium { background: #fefce8; border-color: #ca8a04; }
body.light-mode .tfi-match-box.low { background: #fef2f2; border-color: #dc2626; }
body.light-mode .tfi-match-box.none { background: #fef2f2; border-color: #dc2626; }
body.light-mode .tfi-match-title.high { color: #15803d; }
body.light-mode .tfi-match-title.medium { color: #a16207; }
body.light-mode .tfi-match-title.low { color: #dc2626; }
body.light-mode .tfi-match-title.none { color: #dc2626; }
body.light-mode .tfi-match-detail { color: #222; }
body.light-mode .tfi-match-sub { color: #555; }
body.light-mode .tfi-file-item { background: #f5f5f5; border-color: #ddd; }
body.light-mode .tfi-file-name { color: #333; }
body.light-mode .tfi-file-size { color: #999; }
body.light-mode .tfi-file-remove { color: #dc2626; }
body.light-mode .tfi-file-remove:hover { background: rgba(220,38,38,0.1); }
body.light-mode .tfi-hour-input, body.light-mode .tfi-desc-input {
  background: #fff; color: #333; border-color: #ccc;
}
body.light-mode .tfi-hour-input:focus, body.light-mode .tfi-desc-input:focus, body.light-mode .tfi-date-input:focus { border-color: #c49500; }
body.light-mode .tfi-date-input { background: #fff; color: #333; border-color: #ccc; }

/* Summary */
body.light-mode .fct-summary { background: #f5f5f5; }
body.light-mode .fct-summary-row { color: #444; }
body.light-mode .fct-summary-total { border-top-color: #ddd; color: #c49500; }

/* Hours grid */
body.light-mode .fct-hours-grid thead th { color: #888; border-bottom-color: #ddd; }
body.light-mode .fct-hours-grid tbody td { color: #444; border-bottom-color: #eee; }
body.light-mode .fct-hours-grid .fct-weekend td { background: rgba(0,0,0,0.02); }

/* Detail tabs light mode */
body.light-mode .detail-tabs { border-bottom-color: #ddd; }
body.light-mode .detail-tab { color: #888; }
body.light-mode .detail-tab:hover { color: #333; }
body.light-mode .detail-tab.active { color: #c49500; border-bottom-color: #c49500; }
body.light-mode .detail-tab-more-menu { background: #fff; border-color: #ddd; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
body.light-mode .detail-tab-more-menu button { color: #555; }
body.light-mode .detail-tab-more-menu button:hover { background: #f5f5f5; color: #333; }
body.light-mode .detail-back-btn { border-color: #ccc; color: #666; }
body.light-mode .detail-back-btn:hover { border-color: #c49500; color: #c49500; }
body.light-mode .toggle-btn { background: #f5f5f5; border-color: #ddd; color: #888; }
body.light-mode .toggle-btn.active { background: #fff; color: #c49500; border-color: #c49500; }
body.light-mode .toggle-btn:hover:not(.active) { background: #eee; color: #555; }
body.light-mode .detail-header h2 { color: #333; }

/* Hour row */
body.light-mode .hour-row { background: rgba(0,0,0,0.03); }
body.light-mode .hour-row.header { background: rgba(0,0,0,0.06); color: #888; }
body.light-mode .hour-row input[type="number"] {
  background: #fff; border-color: #ddd; color: #333;
}
body.light-mode .hour-row input[type="number"]:focus { border-color: #c49500; }
body.light-mode .hour-row input[type="time"] {
  background: #fff; border-color: #ddd; color: #15803d;
}
body.light-mode .hour-row .time-display { color: #15803d; }
body.light-mode .total-hours { color: #a16207; }
body.light-mode .copy-down-btn {
  background: rgba(196, 149, 0, 0.1); border-color: rgba(196, 149, 0, 0.3); color: #a16207;
}

/* Drop zone */
body.light-mode .drop-zone { border-color: #ccc; }
body.light-mode .drop-zone:hover, body.light-mode .drop-zone.dragover { border-color: #c49500; background: rgba(196, 149, 0, 0.05); }
body.light-mode .drop-zone-text { color: #888; }

/* File/Folder items */
body.light-mode .file-item, body.light-mode .folder-item {
  background: rgba(0,0,0,0.03);
}
body.light-mode .file-item .name, body.light-mode .folder-item .name { color: #444; }
body.light-mode .file-item .status { color: #888; }
body.light-mode .file-item .status.analyzing { color: #a16207; }
body.light-mode .file-item .status.done { color: #15803d; }

/* Document items */
body.light-mode .document-item { background: rgba(0,0,0,0.02); border-color: #ddd; }
body.light-mode .document-item .original-name { color: #888; }
body.light-mode .document-item .field label { color: #888; }
body.light-mode .document-item .field select,
body.light-mode .document-item .field input {
  background: #fff; border-color: #ddd; color: #333;
}

/* Confidence */
body.light-mode .confidence { background: rgba(196, 149, 0, 0.12); color: #a16207; }
body.light-mode .confidence.high { background: rgba(22, 163, 74, 0.1); color: #15803d; }
body.light-mode .confidence.low { background: rgba(220, 38, 38, 0.08); color: #dc2626; }

/* Status log */
body.light-mode .status-log { background: #f5f5f5; }
body.light-mode .status-log .entry { color: #666; border-bottom-color: #eee; }
body.light-mode .status-log .entry.success { color: #15803d; }
body.light-mode .status-log .entry.error { color: #dc2626; }

/* Folder path */
body.light-mode .folder-path { background: #f5f5f5; color: #666; }
body.light-mode .folder-path.selected { color: #15803d; }

/* Match card */
body.light-mode .match-card { background: rgba(0,0,0,0.02); }
body.light-mode .match-label { color: #c49500; }
body.light-mode .match-value { color: #222; }
body.light-mode .match-suggestion { color: #a16207; }

/* Preview table */
body.light-mode .preview-table th { background: rgba(0,0,0,0.03); color: #888; }
body.light-mode .preview-table td { color: #444; border-bottom-color: #eee; }
body.light-mode .preview-table tr:hover { background: rgba(0,0,0,0.02); }

/* Planning overzicht */
body.light-mode .po-grid-wrapper { background: #fff; border-color: #ddd; }
body.light-mode .po-grid th, body.light-mode .po-grid td { border-color: #e0e0e0; }
body.light-mode .po-grid thead th { background: #f5f5f5; color: #666; }
body.light-mode .po-grid thead tr:first-child th { background: #eee; color: #c49500; }
body.light-mode .po-grid .po-name-col { background: #fff; color: #222; }
body.light-mode .po-grid thead .po-name-col { background: #f5f5f5; }
body.light-mode .po-grid thead tr:first-child .po-name-col { background: #eee; }
body.light-mode .po-grid .po-weekend { background: rgba(0,0,0,0.02); }
body.light-mode .po-grid .po-no-shifts .po-name-col { color: #aaa; }

/* Skill chips */
body.light-mode .po-skill-chip { background: rgba(0,0,0,0.04); border-color: #ddd; color: #666; }
body.light-mode .po-skill-chip.active { background: rgba(196, 149, 0, 0.1); border-color: #c49500; color: #a16207; }

/* User chips */
body.light-mode .user-chip {
  background: rgba(196, 149, 0, 0.1); border-color: rgba(196, 149, 0, 0.25); color: #a16207;
}
body.light-mode .btn-add-user { border-color: #c49500; background: rgba(196, 149, 0, 0.06); color: #c49500; }
/* Certificate status badges */
.cert-status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.cert-status-valid { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.cert-status-expiring { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.cert-status-expired { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.cert-status-unknown { background: rgba(136, 136, 136, 0.15); color: #999; }

/* Certificate type editable */
.cert-type-editable { cursor: pointer; border-bottom: 1px dashed #555; padding-bottom: 1px; transition: color 0.15s; }
.cert-type-editable:hover { color: var(--color-primary); }
.cert-type-unmatched { color: var(--text-muted); font-style: italic; }
.cert-type-select {
  width: 100%; padding: 6px 8px; background: var(--bg-input); color: var(--text-secondary);
  border: 1px solid var(--color-primary); border-radius: 6px; font-size: 13px; cursor: pointer;
}
.cert-type-select:focus { outline: none; }

/* Certificate expiry editable */
.cert-expiry-editable { cursor: pointer; border-bottom: 1px dashed #555; padding-bottom: 1px; transition: color 0.15s; font-family: monospace; font-size: 12px; }
.cert-expiry-editable:hover { color: var(--color-primary); }
.cert-expiry-input {
  width: 140px; padding: 4px 6px; background: var(--bg-input); color: var(--text-secondary);
  border: 1px solid var(--color-primary); border-radius: 6px; font-size: 13px; font-family: inherit;
  color-scheme: dark;
}
.cert-expiry-input:focus { outline: none; }

/* SEPA batch styling */
.sepa-no-iban { color: #f87171; font-weight: 600; font-size: 11px; }
.sepa-row-warning td { opacity: 0.5; }
.sepa-badge-draft { background: rgba(255, 208, 0, 0.15); color: var(--color-primary); padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.sepa-badge-final { background: rgba(74, 222, 128, 0.12); color: #4ade80; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.sepa-badge-verrekening { background: rgba(56, 189, 248, 0.15); color: #38bdf8; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-left: 6px; vertical-align: middle; }

/* Aanvragen status badges */
.anv-status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.anv-status-nieuw { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.anv-status-in_behandeling { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.anv-status-geplaatst { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.anv-status-vervallen { background: rgba(136, 136, 136, 0.15); color: #999; }

body.light-mode .func-dropdown { background: #fff; border-color: #ddd; }
body.light-mode .func-dropdown-item { color: #333; }
body.light-mode .func-dropdown-item:hover { background: #f5f5f5; color: #111; }

/* Certificate status badges light mode */
body.light-mode .cert-status-valid { background: rgba(22, 163, 74, 0.1); color: #15803d; }
body.light-mode .cert-status-expiring { background: rgba(202, 138, 4, 0.12); color: #a16207; }
body.light-mode .cert-status-expired { background: rgba(220, 38, 38, 0.08); color: #dc2626; }
body.light-mode .cert-status-unknown { background: rgba(100, 100, 100, 0.1); color: #888; }

/* Certificate type editable light mode */
body.light-mode .cert-type-editable { border-bottom-color: #ccc; }
body.light-mode .cert-type-editable:hover { color: #c49500; }
body.light-mode .cert-type-unmatched { color: #999; }
body.light-mode .cert-type-select { background: #fff; color: #333; border-color: #c49500; }
body.light-mode .cert-expiry-editable { border-bottom-color: #ccc; }
body.light-mode .cert-expiry-editable:hover { color: #c49500; }
body.light-mode .cert-expiry-input { background: #fff; color: #333; border-color: #c49500; color-scheme: light; }

/* SEPA light mode */
body.light-mode .sepa-no-iban { color: #dc2626; }
body.light-mode .sepa-badge-draft { background: rgba(202, 138, 4, 0.12); color: #a16207; }
body.light-mode .sepa-badge-final { background: rgba(22, 163, 74, 0.1); color: #15803d; }
body.light-mode .sepa-badge-verrekening { background: rgba(14, 165, 233, 0.1); color: #0369a1; }

/* Template list cards */
.ctpl-card { background: #222; border: 1px solid #444; border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; }
.ctpl-card-name { font-size: 14px; font-weight: 600; color: #f0f0f0; margin-bottom: 6px; }
.ctpl-card-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; display: inline-block; }
.ctpl-lang-badge { background: #2d2d2d; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 11px; margin-right: 3px; }
body.light-mode .ctpl-card { background: #fff; border-color: #ddd; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
body.light-mode .ctpl-card-name { color: #222; }
body.light-mode .ctpl-lang-badge { background: #e8e8e8; color: #333; }

/* Aanvragen status badges - light mode */
body.light-mode .anv-status-nieuw { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
body.light-mode .anv-status-in_behandeling { background: rgba(202, 138, 4, 0.12); color: #a16207; }
body.light-mode .anv-status-geplaatst { background: rgba(22, 163, 74, 0.1); color: #15803d; }
body.light-mode .anv-status-vervallen { background: rgba(100, 100, 100, 0.1); color: #888; }

/* Matching freelancers panel */
.anv-match-row:hover { background: rgba(255,255,255,0.03); }
body.light-mode .anv-match-row:hover { background: rgba(0,0,0,0.02); }

/* Star ratings */
.fd-stars { display: inline-flex; gap: 2px; cursor: pointer; }
.fd-star { font-size: 22px; color: var(--text-dim); transition: color 0.15s; user-select: none; }
.fd-star.filled { color: var(--color-primary); }
.fd-star:hover { color: var(--color-primary); }
.fd-stars-display { color: var(--color-primary); font-size: 14px; letter-spacing: 1px; }
.fd-stars-empty { color: var(--text-dim); }
body.light-mode .fd-star { color: #ccc; }
body.light-mode .fd-star.filled { color: #c49500; }
body.light-mode .fd-star:hover { color: #c49500; }
body.light-mode .fd-stars-display { color: #c49500; }
body.light-mode .fd-stars-empty { color: #ccc; }

/* Toggle button */
body.light-mode .toggle-btn { border-color: #ddd; color: #888; }
body.light-mode .toggle-btn:hover { background: rgba(0,0,0,0.03); color: #444; }

/* Countdown badges */
body.light-mode .starts-countdown.today { background: rgba(22, 163, 74, 0.1); color: #15803d; }
body.light-mode .starts-countdown.soon { background: rgba(202, 138, 4, 0.1); color: #a16207; }
body.light-mode .starts-countdown.later { background: rgba(0,0,0,0.04); color: #888; }
body.light-mode .stops-countdown.stopped { background: rgba(220, 38, 38, 0.08); color: #dc2626; }
body.light-mode .stops-countdown.lastday { background: rgba(234, 88, 12, 0.08); color: #c2410c; }
body.light-mode .stops-countdown.ending { background: rgba(202, 138, 4, 0.1); color: #a16207; }

/* Scrollbar */
body.light-mode ::-webkit-scrollbar-track { background: #f0f0f0; }
body.light-mode ::-webkit-scrollbar-thumb { background: #ccc; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: #bbb; }
body.light-mode .sidebar::-webkit-scrollbar-thumb { background: #ddd; }

/* Sidebar footer */
body.light-mode .sidebar-footer { border-top-color: #e0e0e0; }
body.light-mode .sidebar-footer a { color: #888; }
body.light-mode .sidebar-footer a:hover { color: #dc2626; background: rgba(220, 38, 38, 0.06); }
body.light-mode #sidebarUserName { color: #c49500 !important; }

/* Login */
body.light-mode .login-container { background: linear-gradient(135deg, #f0f0f0 0%, #e4e4e4 100%); }
body.light-mode .login-box { background: #fff; border-color: #ddd; }
body.light-mode .login-box h1 { color: #c49500; }
body.light-mode .login-box input[type="password"],
body.light-mode .login-box input[type="email"],
body.light-mode .login-box input[type="text"] {
  background: #f5f5f5; border-color: #ddd; color: #333;
}

/* Date range picker */
body.light-mode .date-range-picker input[type="date"] {
  background: #fff; border-color: #ddd; color: #333;
}
body.light-mode .date-range-picker input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* Rate delete */
body.light-mode .inv-rate-delete { color: #bbb; }
body.light-mode .inv-rate-delete:hover { color: #dc2626; background: rgba(220, 38, 38, 0.06); }
body.light-mode #fdDossierModal { background: #fff; border-color: #ddd; }
body.light-mode #fdDossierModal h3 { color: #c49500; }
body.light-mode #fdDossierModal .dossier-info { color: #444; }
body.light-mode #fdDossierModal .dossier-cert-list { color: #666; }

/* Timesheet Inbox badges */
.tib-status-badge, .tib-match-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
}
.tib-status-badge.pending { background: rgba(156,163,175,0.2); color: #9ca3af; }
.tib-status-badge.processing { background: rgba(59,130,246,0.2); color: #60a5fa; }
.tib-status-badge.completed { background: rgba(74,222,128,0.2); color: #4ade80; }
.tib-status-badge.needs_review { background: rgba(251,191,36,0.2); color: #fbbf24; }
.tib-status-badge.failed { background: rgba(248,113,113,0.2); color: #f87171; }
.tib-match-badge.unmatched { background: rgba(248,113,113,0.15); color: #f87171; }
.tib-match-badge.auto_matched { background: rgba(74,222,128,0.15); color: #4ade80; }
.tib-match-badge.manually_matched { background: rgba(251,191,36,0.15); color: #fbbf24; }
.tib-match-badge.confirmed { background: rgba(74,222,128,0.3); color: #22c55e; }
.nav-badge {
  background: #f87171; color: #fff; border-radius: 10px;
  padding: 1px 6px; font-size: 10px; font-weight: 700; margin-left: 6px;
}
body.light-mode .tib-status-badge.pending { background: rgba(156,163,175,0.15); color: #6b7280; }
body.light-mode .tib-status-badge.processing { background: rgba(59,130,246,0.12); color: #2563eb; }
body.light-mode .tib-status-badge.completed { background: rgba(22,163,74,0.12); color: #16a34a; }
body.light-mode .tib-status-badge.needs_review { background: rgba(217,119,6,0.12); color: #b45309; }
body.light-mode .tib-status-badge.failed { background: rgba(220,38,38,0.1); color: #dc2626; }
body.light-mode .tib-match-badge.unmatched { background: rgba(220,38,38,0.08); color: #dc2626; }
body.light-mode .tib-match-badge.auto_matched { background: rgba(22,163,74,0.1); color: #16a34a; }
body.light-mode .tib-match-badge.manually_matched { background: rgba(202,138,4,0.1); color: #ca8a04; }
body.light-mode .tib-match-badge.confirmed { background: rgba(22,163,74,0.15); color: #15803d; }

/* Filename input */
body.light-mode .filename-input {
  background: rgba(196, 149, 0, 0.06) !important;
  border-color: rgba(196, 149, 0, 0.25) !important;
  color: #a16207 !important;
}

/* Inline styles override: common patterns used in app.js */
body.light-mode [style*="color:#FFD000"], body.light-mode [style*="color: #FFD000"] { color: #c49500 !important; }
body.light-mode [style*="color:#e0e0e0"], body.light-mode [style*="color: #e0e0e0"] { color: #444 !important; }
body.light-mode [style*="color:#4ade80"], body.light-mode [style*="color: #4ade80"] { color: #15803d !important; }
body.light-mode [style*="color:#f87171"], body.light-mode [style*="color: #f87171"] { color: #dc2626 !important; }
body.light-mode [style*="background:#1E1E1E"], body.light-mode [style*="background: #1E1E1E"] { background: #f5f5f5 !important; }
body.light-mode [style*="border:1px solid #333"], body.light-mode [style*="border: 1px solid #333"] { border-color: #ddd !important; }
body.light-mode [style*="color:#fff"], body.light-mode [style*="color: #fff"] { color: #333 !important; }
body.light-mode [style*="color:#aaa"], body.light-mode [style*="color: #aaa"] { color: #888 !important; }
body.light-mode [style*="color:#888"], body.light-mode [style*="color: #888"] { color: #999 !important; }

/* Exact Online autocomplete dropdown */
.exact-link-wrap { position: relative; }
.exact-link-dropdown {
  position: absolute; z-index: 100; left: 0; right: 0; top: 100%;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 6px;
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  margin-top: 2px;
}
.exact-link-dropdown-item {
  padding: 8px 12px; cursor: pointer; font-size: 12px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}
.exact-link-dropdown-item:last-child { border-bottom: none; }
.exact-link-dropdown-item:hover, .exact-link-dropdown-item.active {
  background: var(--color-primary); color: #000;
}
.exact-link-dropdown-item .exact-dd-code {
  color: var(--text-muted); font-size: 11px; margin-left: 6px;
}
.exact-link-dropdown-item:hover .exact-dd-code,
.exact-link-dropdown-item.active .exact-dd-code {
  color: #333;
}
.exact-unlink-btn, .exact-confirm-btn {
  cursor: pointer; font-size: 13px; font-weight: bold;
  padding: 2px 5px; border-radius: 3px; transition: all 0.15s;
}
.exact-unlink-btn { color: var(--text-dim); }
.exact-unlink-btn:hover { color: #ef4444; background: rgba(239,68,68,0.15); }
.exact-confirm-btn { color: #4ade80; }
.exact-confirm-btn:hover { color: #fff; background: #4ade80; }
.exact-page-btn:hover { background: #333 !important; }
body.light-mode .exact-page-btn { background: #f0f0f0 !important; border-color: #ccc !important; color: #333 !important; }
body.light-mode .exact-page-btn:hover { background: #ddd !important; }
body.light-mode .exact-link-dropdown { background: #fff; border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
body.light-mode .exact-link-dropdown-item { color: #333; border-bottom-color: #eee; }
body.light-mode .exact-link-dropdown-item .exact-dd-code { color: #999; }

/* ============================================
   QUILL EDITOR — Dark Theme Overrides
   ============================================ */

/* Toolbar: dark background matching dashboard */
.ql-toolbar.ql-snow {
  background: #1E1E1E !important;
  border: 1px solid #333 !important;
  border-radius: 8px 8px 0 0 !important;
}
.ql-toolbar.ql-snow .ql-stroke {
  stroke: #aaa !important;
}
.ql-toolbar.ql-snow .ql-fill {
  fill: #aaa !important;
}
.ql-toolbar.ql-snow .ql-picker-label {
  color: #aaa !important;
}
.ql-toolbar.ql-snow .ql-picker-options {
  background: #1E1E1E !important;
  border-color: #333 !important;
}
.ql-toolbar.ql-snow .ql-picker-item {
  color: #ccc !important;
}
.ql-toolbar.ql-snow .ql-picker-item:hover {
  color: #FFD000 !important;
}
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke {
  stroke: #FFD000 !important;
}
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill {
  fill: #FFD000 !important;
}
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
  color: #FFD000 !important;
}

/* Editor content area: white background for WYSIWYG accuracy (PDF = white paper) */
.ql-container.ql-snow {
  border: 1px solid #333 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  font-family: 'Helvetica', 'Arial', sans-serif !important;
  font-size: 12px !important;
}
.ql-editor {
  background: #fff !important;
  color: #000 !important;
  min-height: 350px;
  line-height: 1.6;
}

/* Bulkmail: de container had een vaste hoogte van 150px terwijl .ql-editor
   min-height 350px eist. De editor stak daardoor 200px buiten zijn container, en
   omdat de pagina zijn scrollhoogte op die 150px baseerde, was het onderwerpveld
   boven de editor niet meer te bereiken. De container omsluit de editor nu, en de
   editor krijgt een bovengrens zodat de verzendknop in beeld blijft bij een lange
   tekst. */
#beQuillEditor .ql-editor {
  max-height: 55vh;
  overflow-y: auto;
}
.ql-editor.ql-blank::before {
  color: #999 !important;
  font-style: italic !important;
}

/* Snow theme tooltip override */
.ql-snow .ql-tooltip {
  background: #1E1E1E !important;
  border-color: #333 !important;
  color: #ccc !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* quill-table-up: table creator grid popup */
.table-up-creator {
  background: #fff !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  z-index: 100;
}
.table-up-creator .table-up-creator__item.active,
.table-up-creator .table-up-creator__item:hover {
  background: #FFD000 !important;
  border-color: #FFD000 !important;
}
/* quill-table-up: context menu */
.table-up-menu {
  background: #1E1E1E !important;
  border-color: #444 !important;
  color: #ccc !important;
}
.table-up-menu .table-up-menu__item:hover {
  background: #333 !important;
}

/* Tables in Quill editor: visible borders on white editor background */
.ql-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}
.ql-editor table td,
.ql-editor table th {
  border: 1px solid #ccc;
  padding: 4px 6px;
  min-width: 40px;
}
.ql-editor table th {
  background: #f5f5f5;
  font-weight: bold;
}
/* Borderless tables in editor: dashed borders for layout visibility */
.ql-editor table.borderless td,
.ql-editor table.borderless th {
  border: 1px dashed #ddd;
  background: transparent;
}

/* Page break marker in Quill editor */
.ql-editor hr.page-break {
  border: none;
  border-top: 2px dashed #999;
  margin: 16px 0;
  position: relative;
  height: 0;
}
.ql-editor hr.page-break::after {
  content: '— pagina-einde —';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #999;
  font-size: 11px;
  padding: 0 8px;
  font-family: 'Barlow', sans-serif;
}

/* Page break & table border toolbar buttons — match Quill default gray */
.ql-pageBreak,
.ql-tableBorder {
  width: 28px !important;
  color: #444 !important;
}
.ql-pageBreak:hover,
.ql-tableBorder:hover {
  color: #06c !important;
}

/* Platform notes: compact Quill editors (dark-mode default) */
.pf-quill-wrap .ql-toolbar.ql-snow {
  padding: 4px 8px !important;
  border-radius: 6px 6px 0 0 !important;
}
.pf-quill-wrap .ql-container.ql-snow {
  border-radius: 0 0 6px 6px !important;
  font-size: 13px !important;
  font-family: inherit !important;
}
.pf-quill-wrap .ql-editor {
  background: #1E1E1E !important;
  color: #e0e0e0 !important;
  min-height: 80px;
  max-height: 250px;
  overflow-y: auto;
  padding: 8px 12px;
}
.pf-quill-wrap .ql-editor.ql-blank::before {
  color: #555 !important;
  font-style: italic;
}
.pf-quill-wrap .ql-editor a {
  color: #60a5fa !important;
}

/* Platform notes: light mode */
body.light-mode .pf-quill-wrap .ql-toolbar.ql-snow {
  background: #f5f5f5 !important;
  border-color: #d0d0d0 !important;
}
body.light-mode .pf-quill-wrap .ql-toolbar.ql-snow .ql-stroke {
  stroke: #666 !important;
}
body.light-mode .pf-quill-wrap .ql-toolbar.ql-snow .ql-fill {
  fill: #666 !important;
}
body.light-mode .pf-quill-wrap .ql-toolbar.ql-snow .ql-picker-label {
  color: #666 !important;
}
body.light-mode .pf-quill-wrap .ql-toolbar.ql-snow .ql-picker-options {
  background: #fff !important;
  border-color: #d0d0d0 !important;
}
body.light-mode .pf-quill-wrap .ql-container.ql-snow {
  border-color: #d0d0d0 !important;
}
body.light-mode .pf-quill-wrap .ql-editor {
  background: #fff !important;
  color: #222 !important;
}
body.light-mode .pf-quill-wrap .ql-editor.ql-blank::before {
  color: #aaa !important;
}
body.light-mode .pf-quill-wrap .ql-editor a {
  color: #1a5276 !important;
}

/* ============================================
   EIGEN PLANNING OVERZICHT (EPO)
   ============================================ */

/* Stat tiles */
.epo-stat {
  flex: 1;
  background: #141414;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

/* Today column highlight */
.epo-today { background: rgba(255, 208, 0, 0.08) !important; }
.po-grid thead .epo-today { border-bottom: 2px solid var(--color-primary) !important; }

/* Aanvraag rows */
.epo-aanvraag-row td { border-bottom: 1px solid var(--border-default); }
.epo-aanvraag-cell { min-width: 80px; }

/* Badge for geplaatst/aantal */
.epo-badge {
  display: inline-block;
  background: rgba(255, 208, 0, 0.2);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-style: normal;
}

/* Separator row */
.epo-separator td { background: var(--bg-body) !important; }

/* Light mode overrides */
body.light-mode .epo-stat { background: #fff; border-color: #ddd; }
body.light-mode .epo-today { background: rgba(196, 149, 0, 0.08) !important; }
body.light-mode .epo-badge { background: rgba(196, 149, 0, 0.15); color: #a16207; }
body.light-mode .epo-separator td { background: #f5f5f5 !important; }
body.light-mode .epo-separator .po-name-col { color: #a16207 !important; }

/* ========== Email Conversation Thread ========== */
.email-thread { display: flex; flex-direction: column; gap: 10px; }

/* Inklapbare sectie-header */
.collapse-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.collapsed > h3 .collapse-chevron { transform: rotate(-90deg); }
.collapsed > .collapsible-body { display: none; }

.email-msg {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #333;
}

.email-msg-out {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.email-msg-in {
  background: rgba(250, 204, 21, 0.06);
  border-color: rgba(250, 204, 21, 0.25);
}

.email-msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.email-msg-direction {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.email-msg-out .email-msg-direction { color: #60a5fa; }
.email-msg-in .email-msg-direction { color: #facc15; }

.email-msg-date { font-size: 11px; color: var(--text-muted); }
.email-msg-meta { font-size: 12px; color: #aaa; margin-bottom: 4px; }
.email-msg-user { color: var(--text-muted); font-style: italic; }
.email-msg-subject { font-weight: 600; color: #e5e5e5; margin-bottom: 6px; }

.email-msg-preview {
  color: #999;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 80px;
  overflow: hidden;
}

.email-msg-attach {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Light mode */
body.light-mode .email-msg { border-color: #ddd; }
body.light-mode .email-msg-out { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.2); }
body.light-mode .email-msg-in { background: rgba(250, 204, 21, 0.06); border-color: rgba(250, 204, 21, 0.3); }
body.light-mode .email-msg-subject { color: #1a2634; }
body.light-mode .email-msg-meta { color: #666; }
body.light-mode .email-msg-preview { color: #555; }
body.light-mode .email-msg-date { color: #888; }

/* ============================================
   HOME / DASHBOARD WIDGETS
   ============================================ */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 16px;
}
.home-widget {
  background: var(--bg-card, #141414);
  border: 1px solid var(--border-default, #333);
  border-radius: 8px;
  overflow: hidden;
}
.home-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-default, #333);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #888);
}
.home-widget-header span { display: flex; align-items: center; gap: 6px; }
.home-widget-header svg { width: 15px; height: 15px; }
.home-widget-body {
  padding: 8px 0;
  font-size: 13px;
  max-height: 320px;
  overflow-y: auto;
}
.home-widget-body .home-empty {
  color: var(--text-muted, #888);
  font-size: 12px;
  text-align: center;
  padding: 20px 14px;
}
.home-widget-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--color-primary, #FFD000);
  color: #000;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
}
/* Compacte tabel in widgets */
.home-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.home-table td { padding: 5px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.home-table th { padding: 5px 14px; font-weight: 600; color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
.home-table tr:last-child td { border-bottom: none; }
.home-table tr { cursor: pointer; transition: background 0.12s; }
.home-table tr:hover { background: var(--row-hover-bg); }
.home-table .home-muted { color: var(--text-muted, #888); }
/* Stats bar in controle widget */
.home-stats-bar {
  display: flex;
  gap: 12px;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.home-stats-bar span { display: flex; align-items: center; gap: 4px; }

/* Light mode overrides */
body.light-mode .home-widget { background: #fff; border-color: #ddd; }
body.light-mode .home-widget-header { border-color: #ddd; color: #666; }
body.light-mode .home-table td { border-color: rgba(0,0,0,0.05); }
body.light-mode .home-table th { border-color: rgba(0,0,0,0.08); }
body.light-mode .home-table tr:hover { background: rgba(0,0,0,0.02); }
body.light-mode .home-stats-bar { border-color: rgba(0,0,0,0.05); }

/* Sticky filter bar for list overviews */
.sticky-filter-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 24px;
  margin-bottom: 0;
}
.sticky-filter-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
  border-radius: 16px 16px 0 0;
}
.sticky-filter-bar + .card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

/* Uitklapbaar filterpaneel in een sticky filter bar */
.filter-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-default);
}
.filter-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px 28px;
}
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}
.filter-field { display: flex; align-items: center; gap: 8px; }
.filter-field > span {
  flex: 0 0 108px;
  font-size: 12px;
  color: var(--text-secondary);
}
.filter-field > span em { font-style: normal; color: var(--text-muted); }
.filter-field select,
.filter-field input[type="date"],
.filter-field input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
}
.filter-cert-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}
.filter-cert-block .filter-group-title { margin-bottom: 10px; }
.filter-cert-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.filter-cert-row .filter-cert-join {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 24px;
}
.filter-cert-row select {
  padding: 5px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  max-width: 260px;
}
.filter-cert-row .btn-icon-mini {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
}
.filter-cert-row .btn-icon-mini:hover { color: var(--text-primary); border-color: var(--border-strong); }

.filter-count-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  background: var(--color-primary);
  color: #000;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.filter-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.filter-chip button:hover { color: var(--text-primary); }

/* ============================================
   WHATSAPP MODULE
   ============================================ */
.wa-conv-item:hover {
  background: var(--bg-hover) !important;
}
.wa-conv-item.active {
  background: var(--bg-hover) !important;
  border-left: 3px solid var(--accent-primary);
}
.wa-msg-bubble { position: relative; }
.wa-reply-btn {
  display: none;
  position: absolute;
  top: 2px;
  right: 4px;
  cursor: pointer;
  opacity: 0.4;
  font-size: 14px;
  color: inherit;
  user-select: none;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0,0,0,0.15);
  line-height: 1;
}
.wa-msg-bubble:hover .wa-reply-btn { display: inline-block; }
.wa-reply-btn:hover { opacity: 0.9; background: rgba(0,0,0,0.25); }

/* WhatsApp selection mode */
.wa-select-toolbar {
  padding: 8px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}
.wa-msg-selected {
  outline: 2px solid #25D366;
  outline-offset: -2px;
}
.wa-select-toggle.active {
  background: #25D366 !important;
  color: #fff !important;
  border-color: #25D366 !important;
}

/* ============================================
   AI COMMAND BAR
   ============================================ */
.ai-command-bar {
  padding: 10px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
}
.ai-command-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 800px;
}
.ai-command-icon {
  color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ai-command-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.ai-command-input:focus {
  border-color: var(--color-primary);
}
.ai-command-input.ai-loading {
  opacity: 0.6;
}
.ai-command-input::placeholder {
  color: var(--text-placeholder);
}
.ai-command-btn {
  flex-shrink: 0;
}
.ai-attach-btn {
  flex-shrink: 0;
  color: var(--text-muted);
}
.ai-attach-btn:hover {
  color: var(--color-primary);
}
.ai-planning-thumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 2px 4px 2px 2px;
}
.ai-planning-thumb.hidden {
  display: none;
}
.ai-planning-thumb img {
  height: 28px;
  width: auto;
  max-width: 60px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.ai-planning-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  line-height: 1;
}
.ai-planning-remove:hover {
  color: var(--color-danger);
}
.ai-planning-remove i {
  width: 12px;
  height: 12px;
}

/* AI Spin animation */
.ai-spin {
  animation: aiSpin 1s linear infinite;
}
@keyframes aiSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* AI Answer Box */
.ai-answer-box {
  padding: 0 24px 12px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
}
.ai-answer-box.hidden {
  display: none;
}
.ai-answer-inner {
  max-width: 800px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  position: relative;
}
.ai-answer-icon {
  color: var(--color-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
/* Conversation thread */
.ai-answer-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  padding-right: 22px; /* room for close button */
}
.ai-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ai-msg-user {
  justify-content: flex-end;
}
.ai-msg-user .ai-msg-bubble {
  background: var(--color-primary);
  color: #fff;
  border-radius: 12px 12px 2px 12px;
  padding: 7px 11px;
  max-width: 80%;
  font-weight: 500;
}
.ai-msg-assistant .ai-msg-bubble {
  flex: 1;
}
.ai-msg-bubble p {
  margin: 0 0 6px 0;
}
.ai-msg-bubble p:last-child {
  margin-bottom: 0;
}
.ai-msg-bubble ul {
  margin: 4px 0;
  padding-left: 18px;
}
.ai-msg-bubble li {
  margin-bottom: 2px;
}
.ai-msg-assistant .ai-msg-bubble strong {
  color: var(--color-primary);
}
.ai-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ai-download-btn:hover {
  filter: brightness(1.08);
}
.ai-download-btn i {
  width: 15px;
  height: 15px;
}
.ai-answer-close {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--text-muted);
  z-index: 1;
}
.ai-answer-close:hover {
  color: var(--text-primary);
}
/* Typing indicator */
.ai-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.ai-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.4;
  animation: aiTyping 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* AI Overlay */
.ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.ai-overlay.hidden {
  display: none;
}

/* AI Preview Card */
.ai-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  width: 520px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.ai-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-light);
}
.ai-preview-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.ai-preview-summary {
  padding: 12px 20px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ai-preview-table {
  width: 100%;
  border-collapse: collapse;
}
.ai-preview-table tbody tr { transition: background 0.12s; }
.ai-preview-table tbody tr:hover td { background: var(--row-hover-bg); }
.ai-preview-table td {
  padding: 8px 20px;
  font-size: 13px;
  border-top: 1px solid var(--border-light);
}
.ai-preview-table .ai-label {
  color: var(--text-muted);
  width: 120px;
  font-weight: 600;
}
.ai-preview-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
}

/* AI Warnings */
.ai-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 20px;
  font-size: 12px;
  color: var(--color-warning);
  background: var(--color-warning-bg);
}
.ai-warning i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ai-warning.ai-ambiguity {
  color: var(--color-info);
  background: var(--color-info-bg);
}

/* AI Multi-command separator & header */
.ai-preview-table tr.ai-separator td {
  padding: 0;
  border-top: 2px solid var(--border-strong);
}
.ai-preview-table tr.ai-command-header td {
  padding: 10px 20px 4px;
  font-size: 12px;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: none;
}

/* AI Toast notification */
.ai-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.ai-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* AI Duplicate warning */
.ai-duplicate-warning {
  padding: 12px 20px;
  background: var(--color-warning-bg);
  border-top: 1px solid var(--border-light);
}
.ai-duplicate-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-warning);
  margin-bottom: 6px;
}
.ai-duplicate-title i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ai-duplicate-item {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 2px 0;
}
.ai-duplicate-item a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Light theme overrides */
[data-theme="light"] .ai-command-bar {
  background: var(--bg-card);
}
[data-theme="light"] .ai-overlay {
  background: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .ai-preview-card {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* ====== PURCHASE INVOICE FORM GRID ====== */
.pib-fields-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 12px;
  align-items: center;
  margin-bottom: 14px;
}
.pib-fields-grid .pib-fl {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.pib-fields-grid .pib-fv {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pib-fields-grid input.form-control,
.pib-fields-grid select.form-control {
  margin: 0;
  padding: 5px 8px;
  font-size: 13px;
  height: auto;
}
body.light-mode .pib-fields-grid .pib-fl { color: #888; }
body.light-mode .pib-fields-grid .pib-fv { color: #333; }

/* ====== PIB INBOX TABLE ====== */
#pibListCard.pib-drag-over {
  outline: 3px dashed #e6a817;
  outline-offset: -3px;
  background: rgba(230, 168, 23, 0.05);
}

.pib-inbox-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.pib-inbox-table th { text-align: left; padding: 8px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid var(--border-color); white-space: nowrap; }
.pib-inbox-table td { padding: 6px 6px; vertical-align: middle; border-bottom: 1px solid var(--border-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pib-inbox-table th { padding: 6px 6px; }
.pib-inbox-table tbody tr { cursor: pointer; transition: background 0.12s; }
.pib-inbox-table tbody tr:hover { background: var(--row-hover-bg); }
.pib-it-check { width: 30px; text-align: center; }
.pib-it-check input { cursor: pointer; margin: 0; }
.pib-it-date { width: 85px; }
.pib-it-vendor { width: 200px; }
.pib-it-invnr { width: 110px; }
.pib-it-amount { width: 80px; text-align: right !important; }
.pib-it-btw { width: 40px; text-align: right !important; }
.pib-it-cred { width: 90px; }
.pib-it-status { width: 90px; }
.pib-it-action { width: 100px; text-align: center; white-space: nowrap; }

/* ====== PIB BOOKING LINES TABLE (multi-line GL/VAT) ====== */
.pib-booking-lines { width: 100%; margin-top: 16px; border-top: 1px solid var(--border-color); padding-top: 12px; }
.pib-booking-lines h4 { margin: 0 0 8px; font-size: 0.9em; color: var(--text-secondary); }
.pib-booking-lines table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.pib-booking-lines th { text-align: left; padding: 4px 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.pib-booking-lines td { padding: 3px 3px; vertical-align: middle; }
.pib-booking-lines input.form-control,
.pib-booking-lines select.form-control { margin: 0; padding: 3px 5px; font-size: 12px; }
.pib-booking-lines .pib-bl-num { width: 22px; text-align: center; color: var(--text-muted); font-size: 11px; }
.pib-booking-lines .pib-bl-gl-col { width: 140px; }
.pib-booking-lines .pib-bl-desc-col { }
.pib-booking-lines .pib-bl-desc-col input { width: 100%; box-sizing: border-box; }
.pib-booking-lines .pib-bl-vat-col { width: 85px; }
.pib-booking-lines .pib-bl-vat-col select { width: 100%; font-size: 11px; padding: 3px 2px; }
.pib-booking-lines .pib-bl-amount-col { width: 75px; text-align: right; }
.pib-booking-lines .pib-bl-vatamt-col { width: 60px; text-align: right; color: var(--text-muted); font-size: 12px; }
.pib-booking-lines .pib-bl-total-col { width: 65px; text-align: right; font-weight: 500; }
.pib-booking-lines .pib-bl-amount { text-align: right !important; width: 100%; }
.pib-booking-lines .pib-bl-actions { width: 28px; text-align: center; }
.pib-booking-lines tfoot td { padding: 6px 3px; font-weight: 600; font-size: 12px; }
.pib-booking-lines tfoot .pib-bl-vat-col { font-weight: 400; }
/* GL account searchable combobox */
.pib-gl-combo { position: relative; }
.pib-gl-combo .pib-bl-gl-search { width: 100%; text-overflow: ellipsis; }
.pib-gl-dropdown { position: absolute; left: 0; top: 100%; width: 320px; max-height: 200px; overflow-y: auto; background: var(--bg-primary, #fff); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; }
.pib-gl-option { padding: 5px 8px; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pib-gl-option:hover { background: var(--bg-hover, #f0f0f0); }

/* Zoekvelden in de Re-invoice-modal. Je typt de naam van de persoon, de
   bedrijfsnaam staat eronder omdat die op de factuur komt. */
.pib-db-combo { position: relative; }
.pib-db-dropdown { position: absolute; left: 0; right: 0; top: 100%; max-height: 220px; overflow-y: auto; background: var(--bg-primary, #fff); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; }
.pib-db-option { padding: 6px 9px; font-size: 12px; cursor: pointer; }
.pib-db-option:hover, .pib-db-option.active { background: var(--bg-hover, #f0f0f0); }
.pib-db-option .pib-db-sub { display: block; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pib-db-picked { margin-top: 4px; font-size: 11px; color: var(--text-muted); min-height: 14px; }

/* ====== MODAL OVERLAY (shared by pibDoorbelastModal, pibCreateCreditorModal, etc.) ====== */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
/* .modal-overlay/.modal-box worden op zeven plekken in de HTML gebruikt maar hadden
   nooit stijl, waardoor die dialogen als blok in de pagina landden. Zelfde gedrag
   als .modal/.modal-content; verbergen gaat via de bestaande .hidden-klasse. */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
body.light-mode .modal-box { background: #fff; }

.modal-content {
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 15px;
}
.modal-body {
  padding: 20px;
}
.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
}
body.light-mode .modal-content {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* ====== FORM GROUPS (generic for modals) ====== */
.modal-body .form-group { margin-bottom: 14px; }
.modal-body .form-group:last-child { margin-bottom: 0; }
.modal-body .form-group > label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.modal-body .form-group .form-control { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 13px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); }
.modal-body .form-group .form-control:focus { outline: none; border-color: var(--color-primary); }
.modal-body .form-group small { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
body.light-mode .modal-body .form-group .form-control { background: #fff; border-color: #ddd; color: #333; }
body.light-mode .modal-body .form-group .form-control:focus { border-color: var(--color-primary); }
body.light-mode .modal-body .form-group > label { color: #888; }

/* ============================================
   BOEKHOUDING (eigen grootboek) — public/ledger.js
   Conventies: bedragen rechts in tabelcijfers, saldi met D/C,
   kleine grijze bijschriften, rustige toolbar met labels.
   ============================================ */
.lg-toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 16px; }
.lg-toolbar .lg-spacer { flex: 1; }
.lg-field { display: flex; flex-direction: column; gap: 4px; }
.lg-field > label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.lg-field input, .lg-field select { padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-primary); font-size: 13px; min-height: 34px; }
.lg-field input[type="text"] { min-width: 240px; }
.lg-actions { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

.lg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lg-kpi { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 8px; padding: 12px 14px; }
.lg-kpi .lg-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.lg-kpi .lg-kpi-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-kpi .lg-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.lg-note { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; }
.lg-scroll { overflow-x: auto; }

.lg-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.lg-table thead th { text-align: left; padding: 8px 10px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.lg-table tbody td { padding: 7px 10px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); vertical-align: top; }
.lg-table tbody tr:hover { background: var(--row-hover-bg); }
.lg-table tbody tr.lg-click { cursor: pointer; }
.lg-table .num, .lg-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-table .lg-neg { color: var(--color-danger); }
.lg-table .lg-in { color: var(--color-success); }
.lg-table .muted, .lg-muted { color: var(--text-dim); font-size: 11px; }
.lg-table .lg-main { color: var(--text-primary); font-weight: 600; }
.lg-table tr.lg-section td { background: var(--bg-elevated); color: var(--text-primary); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; padding: 9px 10px; border-bottom: 1px solid var(--border-default); }
.lg-table tr.lg-group td { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; padding-top: 12px; border-bottom: none; }
.lg-table tr.lg-subtotal td { font-weight: 600; color: var(--text-primary); border-top: 1px solid var(--border-default); border-bottom: none; }
.lg-table tr.lg-total td { font-weight: 700; color: var(--text-primary); border-top: 2px solid var(--border-strong); border-bottom: none; padding-top: 10px; }
.lg-table tr.lg-sub td { background: var(--bg-elevated); font-size: 12px; }
.lg-table td.lg-desc { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-table td.lg-wrap { max-width: 420px; }
.lg-table td.lg-nowrap, .lg-table th.lg-nowrap { white-space: nowrap; }
.lg-table td.lg-act { white-space: nowrap; text-align: right; }
.lg-table td.lg-act .btn { margin-left: 4px; }

.lg-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; line-height: 16px; }
.lg-chip-high { background: var(--color-success-bg); color: var(--color-success); }
.lg-chip-medium { background: var(--color-warning-bg); color: var(--color-warning); }
.lg-chip-low { background: rgba(136,136,136,0.15); color: var(--text-muted); }
.lg-chip-none { background: transparent; color: var(--text-dim); border: 1px dashed var(--border-default); font-weight: 400; }
.lg-chip-error { background: var(--color-danger-bg); color: var(--color-danger); }
.lg-chip-info { background: var(--color-info-bg); color: var(--color-info); }
.lg-chip-type { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-light); font-weight: 500; }
.lg-chip-ok { background: var(--color-success-bg); color: var(--color-success); }

.lg-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13px; }
.lg-kv dt { color: var(--text-muted); }
.lg-kv dd { margin: 0; color: var(--text-primary); }
.lg-detail-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; font-size: 13px; margin-bottom: 14px; }
.lg-detail-head .lg-kv-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.lg-banner { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.lg-banner-warn { background: var(--color-warning-bg); border: 1px solid var(--color-warning); }
.lg-banner-info { background: var(--bg-elevated); border: 1px solid var(--border-light); }
.lg-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--bg-elevated); color: var(--text-muted); font-size: 11px; text-align: center; margin-left: 6px; }
.lg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-pill { border: 1px solid var(--border-default); border-radius: 8px; padding: 6px 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; }

/* Rekeningkiezer (zoeken op code of naam) */
.lg-picker { position: fixed; z-index: 100000; max-height: 340px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 4px; }
.lg-picker-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.lg-picker-row:hover, .lg-picker-row.active { background: var(--color-primary-subtle); }
.lg-picker-code { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lg-picker-name { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-picker-cat { color: var(--text-dim); font-size: 11px; white-space: nowrap; }

/* Statustabs (bank) */
.lg-tabs { display: inline-flex; border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; background: var(--bg-input); }
.lg-tab { padding: 7px 12px; font-size: 13px; cursor: pointer; color: var(--text-secondary); border: none; background: transparent; border-right: 1px solid var(--border-default); display: flex; align-items: center; gap: 6px; min-height: 34px; }
.lg-tab:last-child { border-right: none; }
.lg-tab:hover { background: var(--row-hover-bg); }
.lg-tab.active { background: var(--color-primary); color: var(--color-primary-text); font-weight: 600; }
.lg-tab .lg-tab-n { font-size: 11px; padding: 0 6px; border-radius: 9px; background: rgba(128,128,128,0.18); font-variant-numeric: tabular-nums; }
.lg-tab.active .lg-tab-n { background: rgba(0,0,0,0.15); }

/* Leesweergave: eerst het antwoord, dan wat openstaat, dan de historie */
.lg-read { max-width: 1080px; }
.lg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.lg-head-title { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.lg-head-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.lg-back { font-size: 13px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.lg-back:hover { color: var(--text-primary); }
.lg-stand { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 10px; padding: 16px 18px; margin-bottom: 22px; }
.lg-form { border-top: 1px solid var(--border-light); }
.lg-form-row, .lg-step { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--border-light); }
.lg-step { grid-template-columns: 28px 1fr auto; }
.lg-form-row.lg-form-actions { border-bottom: none; padding-top: 14px; }
.lg-form-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.lg-form-help { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.lg-form-help code { font-size: 12px; background: var(--bg-input); padding: 1px 5px; border-radius: 4px; }
.lg-form-unit { font-size: 13px; color: var(--text-muted); }
.lg-form input, .lg-form select { padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-primary); font-size: 13px; min-height: 34px; box-sizing: border-box; min-width: 150px; }
.lg-form input[type="number"] { min-width: 0; }
.lg-steps { margin-top: 10px; border-top: 1px solid var(--border-light); }
.lg-step-n { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.lg-stand-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lg-stand-head > div:first-child { flex: 1; min-width: 260px; }
.lg-stand-label { font-size: 13px; color: var(--text-muted); }
.lg-stand-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.lg-stand-amount { font-size: 28px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-stand-text { font-size: 16px; color: var(--text-primary); }
.lg-stand-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.lg-h { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.lg-rows { border-top: 1px solid var(--border-light); }
.lg-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 170px 130px auto; gap: 0 14px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--border-light); font-size: 14px; color: var(--text-secondary); }
.lg-row.lg-row-click { cursor: pointer; }
.lg-row.lg-row-click:hover { background: var(--row-hover-bg); }
.lg-row .lg-date { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.lg-row .lg-what { color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-row .lg-what small { color: var(--text-muted); font-size: 12px; }
.lg-row .lg-when { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.lg-row .lg-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-primary); }
.lg-row .lg-amount.lg-minus { color: var(--text-muted); }
/* Factuurbedrag dat gelijk is aan wat nog openstaat: mag wegvallen, het verschil is het nieuws */
.lg-row .lg-amount.lg-amount-same, .lg-row-total .lg-amount.lg-amount-same { color: var(--text-muted); }
.lg-row .lg-amount.lg-plus { color: var(--color-success); }
.lg-row .lg-rowact { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.lg-row-total { border-bottom: none; border-top: 1px solid var(--border-strong); margin-top: -1px; font-weight: 700; }
.lg-row-total .lg-what, .lg-row-total .lg-amount { color: var(--text-primary); }
.lg-row-detail { grid-column: 2 / -1; font-size: 12px; color: var(--text-muted); padding-top: 4px; line-height: 1.5; white-space: normal; }
.lg-flag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.lg-flag-late { background: var(--color-danger-bg); color: var(--color-danger); }
.lg-flag-check { background: var(--color-warning-bg); color: var(--color-warning); }
.lg-fold { margin-top: 22px; border-top: 1px solid var(--border-light); padding-top: 12px; }
.lg-fold > summary { cursor: pointer; font-size: 14px; color: var(--text-secondary); list-style: none; display: flex; align-items: center; gap: 6px; }
.lg-fold > summary::-webkit-details-marker { display: none; }
.lg-fold > summary::before { content: '›'; font-size: 16px; display: inline-block; transition: transform 0.12s; }
.lg-fold[open] > summary::before { transform: rotate(90deg); }
.lg-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; }
.lg-switch input { accent-color: var(--color-primary); }
.lg-acct { display: none; }
body.lg-accounting .lg-acct { display: block; }
body.lg-accounting .lg-acct-inline { display: inline; }
.lg-acct-inline { display: none; }

/* Bank: afvinklijst met statusbolletje vooraan */
/* Verrekenen op de relatiekaart (public/ledger-settle.js) */
.lg-settle-hint { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: var(--bg-warning-subtle, rgba(234, 179, 8, .12)); color: var(--text-primary); }
.lg-settle-done { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.lg-settle { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--border-default); border-radius: 12px; }
.lg-settle-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.lg-settle-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; cursor: pointer; }
.lg-settle-row span:last-child, .lg-settle-sum span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-settle-sum { display: flex; justify-content: space-between; padding-top: 8px; font-size: 13px; color: var(--text-muted); }
.lg-settle-rest { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
@media (max-width: 800px) { .lg-settle-cols { grid-template-columns: minmax(0, 1fr); } }

/* Openstaande facturen op de relatiekaart: twee extra kolommen (dagen open, dagen over de vervaldatum) */
.lg-row.lg-row-age { grid-template-columns: 92px minmax(0, 1fr) 110px 90px 120px 120px 130px auto; }
.lg-row.lg-row-age .lg-days { text-align: right; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-row.lg-row-head { padding: 4px 4px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.lg-row.lg-row-head .lg-days, .lg-row.lg-row-head .lg-amount { color: var(--text-muted); font-size: 11px; }
.lg-row.lg-row-head .lg-sort { cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-row.lg-row-head .lg-sort:hover { color: var(--text-primary); }
.lg-sort-dir { font-size: 9px; }
/* Smal scherm: vervaldatum en dagen open vallen weg, beide bedragen blijven staan.
   Nog smaller: ook het factuurbedrag weg, zodat het factuurnummer leesbaar blijft. */
@media (max-width: 900px) {
  .lg-row.lg-row-age { grid-template-columns: 84px minmax(0, 1fr) 0 0 58px 92px 98px auto; gap: 0 10px; }
  .lg-row.lg-row-age .lg-when, .lg-row.lg-row-age > *:nth-child(4) { overflow: hidden; }
}
@media (max-width: 620px) {
  .lg-row.lg-row-age { grid-template-columns: 76px minmax(0, 1fr) 0 0 52px 0 92px auto; }
  .lg-row.lg-row-age > *:nth-child(6) { overflow: hidden; }
}
.lg-row.lg-row-bank { grid-template-columns: 24px 88px minmax(0, 1fr) 150px 130px auto; }
.lg-row.lg-row-bank .lg-row-detail { grid-column: 3 / -1; }
.lg-mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: transparent; box-sizing: border-box; }
.lg-mark-done { background: var(--color-success); border-color: var(--color-success); color: #fff; font-weight: 700; }
.lg-mark-skip { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-dim); }
.lg-mark-ready { border-color: var(--color-primary); }
/* De accountant komt niet in Inkoopfacturen: die knop leidt voor hem nergens heen */
body.lg-limited:not(.lg-admin-read) .btn[onclick*="inv-purchase-inbox"] { display: none !important; }
/* Boekhouder in de kolom Administratie: meekijken mag, handelen niet. Staan blijven de
   knoppen die alleen ophalen, openen of sluiten; de rest weigert de server toch. */
body.lg-admin-read .lg-admin-module .btn:not([onclick*="Load"]):not([onclick*="Init"]):not([onclick*="Open"]):not([onclick*="Close"]):not([onclick*="Show"]):not([onclick*="Prev"]):not([onclick*="Next"]):not([onclick*="Set"]):not([onclick*="Detail"]),
body.lg-admin-read .lg-admin-module label.btn,
body.lg-admin-read .lg-admin-module input[type="file"] { display: none !important; }
/* Accountant (alleen lezen): knoppen die iets wijzigen verbergen; de server weigert ze sowieso */
body.lg-readonly [id^="inv-ledger-"] .btn:not([onclick*="ledgerEntryOpen"]):not([onclick*="Load("]):not([onclick*="ledgerRelOpen"]):not([onclick*="ledgerOpenDoc"]),
body.lg-readonly [id^="inv-ledger-"] label.btn { display: none !important; }
.lg-fs-scontro { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .lg-fs-scontro { grid-template-columns: 1fr; } }
.lg-fs td, .lg-fs th { font-variant-numeric: tabular-nums; }
.lg-fs .lg-fs-caret { display: inline-block; width: 14px; color: var(--text-muted); font-size: 11px; }
.lg-fs tr.lg-fs-result td { font-size: 15px; border-top: 2px solid var(--border-strong); }
.lg-fs tr.lg-sub td { color: var(--text-secondary); font-size: 13px; }
.lg-kpi-pick { cursor: pointer; border-radius: 8px; }
.lg-kpi-pick.single { cursor: default; }
.lg-kpi-pick .lg-kpi { height: 100%; box-sizing: border-box; transition: border-color .15s; }
.lg-kpi-pick:not(.single):hover .lg-kpi { border-color: var(--border-strong); }
.lg-kpi-pick.active .lg-kpi { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.lg-mark-wait { background: #f59e0b; border-color: #f59e0b; }
.lg-row-done .lg-what, .lg-row-done .lg-amount, .lg-row-done .lg-amount.lg-plus { color: var(--text-muted); }
.lg-state { font-size: 12px; white-space: nowrap; }
.lg-state-done { color: var(--color-success); font-weight: 600; }
.lg-state-todo { color: var(--text-muted); }
.lg-legend { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--text-muted); margin: 0 0 8px 4px; flex-wrap: wrap; }
.lg-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Inkoopfacturen: kosten verdelen over meerdere maanden */
.pib-spread { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-elevated); font-size: 13px; }
.pib-spread-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.pib-spread-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: var(--text-secondary); }
.pib-spread-fields select, .pib-spread-fields input[type="number"] { padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-primary); }
.pib-spread-range { color: var(--text-muted); margin-left: 6px; }
.pib-spread-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pib-spread-preview span { padding: 4px 10px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border-default); font-variant-numeric: tabular-nums; }
.pib-spread-note { margin-top: 8px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.pib-spread-error { margin-top: 8px; color: var(--color-danger); }

/* Zijbalk in- en uitklappen (public/sidebar-toggle.js) */
.sidebar { transition: transform 0.2s ease; }
.main-content { transition: margin-left 0.2s ease, max-width 0.2s ease; }
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main-content { margin-left: 0; max-width: 100vw; }
.sidebar-toggle-btn {
  position: fixed; top: 14px; left: 247px; z-index: 11; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-secondary);
  font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0 0 2px; transition: left 0.2s ease, color 0.15s, border-color 0.15s; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.sidebar-toggle-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
body.sidebar-collapsed .sidebar-toggle-btn { left: 4px; }
body.popout-mode .sidebar-toggle-btn { display: none; }
@media print { .sidebar-toggle-btn { display: none; } }

/* Inkoopfacturen: betaalwijze, vervaldatum en IBAN (public/purchase-payments.js) */
.pib-pay { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-elevated); font-size: 13px; }
.pib-pay-title { font-weight: 600; margin-bottom: 8px; }
.pib-pay-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-secondary); }
.pib-pay-row select, .pib-pay-row input { padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-primary); font-size: 13px; }
.pib-pay-iban { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-default); }
.pib-pay-iban.pib-pay-ok { border-color: var(--color-success); }
.pib-pay-iban.pib-pay-warn { border-color: #f59e0b; }
.pib-pay-iban.pib-pay-bad { border-color: var(--color-danger); background: rgba(220, 38, 38, 0.06); }
.pib-pay-ibans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px; }
.pib-pay-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.pib-pay-v { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.pib-pay-m { display: block; font-size: 12px; color: var(--text-muted); }
.pib-pay-text { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.pib-pay-bad .pib-pay-text { color: var(--color-danger); font-weight: 600; }

/* Te betalen: afwerkvenster (factuur links, betaalgegevens rechts) */
.pay-work-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 18px; }
.pay-work { background: var(--bg-card, var(--bg-elevated)); border: 1px solid var(--border-default); border-radius: 12px; width: min(1500px, 100%); height: min(920px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.pay-work-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
.pay-work-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.pay-work-title small { font-weight: 400; color: var(--text-muted); }
.pay-work-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.pay-work-reason { color: #d97706; font-weight: 600; }
.pay-work-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.pay-work-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); min-height: 0; }
.pay-work-doc { background: #525659; overflow: auto; min-height: 0; }
.pay-work-doc iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; }
.pay-work-nodoc { color: #ddd; font-size: 14px; padding: 40px 24px; text-align: center; }
.pay-work-side { padding: 14px 16px; overflow: auto; border-left: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 12px; }
.pay-work-side .pib-pay { margin-top: 0; }
.pay-work-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1000px) { .pay-work-body { grid-template-columns: 1fr; grid-template-rows: 55% 1fr; } .pay-work-side { border-left: none; border-top: 1px solid var(--border-default); } }