:root {
  --brand-primary:#2A3042;
  --sidebar-bg-light:#fff;
  --sidebar-bg-dark:#1e1e1e;
  --topbar-bg-light:#2A3042;
  --topbar-bg-dark:#121212;
  --body-bg-light:#f6f6f9;
  --body-bg-dark:#181818;
  --input-bg-dark:#212121;
  --input-border-dark:#444;
  --bs-table-hover-bg: #FBFBFD;
  --bs-primary: var(--brand-primary);
  --bs-link-color: var(--brand-primary);
}

/* Hybride PDF-preview: desktop gebruikt iframe, mobiel/tablet gebruikt PDF.js canvas-rendering. */
.pdf-preview-hybrid {
  height: 75vh;
  min-height: 420px;
  background: #edf1f7;
}

.pdf-preview-hybrid.pdf-preview-fill {
  height: 100%;
  min-height: 0;
}

.pdf-preview-desktop-frame {
  height: 100%;
}

.pdf-preview-mobile-viewer {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #e9edf5;
}

.pdf-preview-mobile-toolbar {
  flex: 0 0 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: .45rem .6rem;
  border-bottom: 1px solid #d7dee9;
  background: #fff;
}

.pdf-preview-mobile-title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 36%;
  font-weight: 700;
  color: #1f2937;
}

.pdf-preview-page-value {
  min-width: 66px;
}

.pdf-preview-zoom-value {
  min-width: 58px;
}

.pdf-preview-mobile-status {
  flex: 0 0 auto;
  padding: .65rem .85rem;
  color: #5f6b7a;
  font-size: .875rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.pdf-preview-mobile-pages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  display: block;
  padding: .85rem;
  user-select: none;
}

.pdf-preview-mobile-pages.can-drag-scroll {
  cursor: grab;
}

.pdf-preview-mobile-pages.is-dragging {
  cursor: grabbing;
}

.pdf-preview-mobile-page {
  width: max-content;
  max-width: none;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}

.pdf-preview-mobile-page canvas {
  display: block;
}

.pdf-preview-mobile-fallback {
  flex: 1 1 auto;
  padding: 1rem;
  background: #fff;
}

@media (max-width: 575.98px) {
  .pdf-preview-hybrid {
    height: 68vh;
    min-height: 360px;
  }

  .pdf-preview-mobile-toolbar {
    flex-wrap: wrap;
  }

  .pdf-preview-mobile-title {
    max-width: 100%;
    flex: 1 0 100%;
  }

  .pdf-preview-mobile-toolbar .btn-group {
    flex: 0 0 auto;
  }
}

/* basisstructuur */
html,body{height:100%;margin:0;display:flex;flex-direction:column;overflow-x:hidden;}
body{background:var(--body-bg-light);transition:background .3s;}
[data-theme="dark"] body{background:var(--body-bg-dark);color:#ddd;}
/* topbar */
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;position:fixed;top:0;left:0;right:0;z-index:1030;
  background:var(--topbar-bg-light);color:#f8f9fa;}
[data-theme="dark"] .topbar{background:var(--topbar-bg-dark);}
#toggleSidebar{display:none;}
.topbar .search-container{flex:1;display:flex;justify-content:center;}
.topbar input.form-control{width:320px;max-width:80%;height:34px;}
[data-theme="dark"] .topbar input.form-control{
  background:var(--input-bg-dark)!important;border:1px solid var(--input-border-dark)!important;color:#f8f9fa!important;
}

.global-search-wrapper {
  position: relative;
  flex: 1 1 420px;
  max-width: 640px;
  min-width: 220px;
  margin: 0 1.25rem;
}

.global-search-mobile-trigger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
}

.global-search-form {
  height: 38px;
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background: rgba(255,255,255,.98);
  padding: 0 .55rem;
  box-shadow: 0 8px 24px rgba(15,23,42,.10);
}

.global-search-icon,
.global-search-clear {
  flex: 0 0 auto;
  color: #64748b;
}

.global-search-clear {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.global-search-clear:hover,
.global-search-clear:focus {
  background: #eef2f7;
  color: #1f2937;
}

.global-search-form input.form-control {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  box-shadow: none !important;
  background: transparent !important;
  color: #111827 !important;
  font-size: .93rem;
}

.global-search-form input.form-control::-webkit-search-cancel-button {
  display: none;
}

.global-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  box-shadow: 0 18px 48px rgba(15,23,42,.24);
  z-index: 1050;
}

.global-search-wrapper.is-open .global-search-results {
  display: block;
}

.global-search-state {
  padding: .9rem 1rem;
  color: #64748b;
  font-size: .9rem;
}

.global-search-group + .global-search-group {
  border-top: 1px solid #eef2f7;
}

.global-search-group-header {
  height: 34px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .9rem;
  color: #64748b;
  background: #f8fafc;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.global-search-item {
  min-height: 62px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  padding: .55rem .9rem;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid #f1f5f9;
}

.global-search-item:hover,
.global-search-item:focus,
.global-search-item.is-active {
  background: #eef4ff;
  color: #111827;
  outline: 0;
}

.global-search-item-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e9edf5;
  color: var(--brand-primary);
}

.global-search-item-title,
.global-search-item-subtitle,
.global-search-item-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-item-title {
  font-weight: 700;
  line-height: 1.25;
}

.global-search-item-subtitle {
  margin-top: .15rem;
  color: #64748b;
  font-size: .84rem;
}

.global-search-item-meta {
  margin-top: .1rem;
  color: #94a3b8;
  font-size: .76rem;
}

.global-search-more {
  padding: .45rem .9rem .7rem;
  color: #64748b;
  font-size: .78rem;
}

[data-theme="dark"] .global-search-form {
  border-color: #3f4655;
  background: #20242c;
}

[data-theme="dark"] .global-search-form input.form-control {
  color: #f8fafc !important;
}

[data-theme="dark"] .global-search-results {
  border-color: #3f4655;
  background: #20242c;
  color: #f8fafc;
}

[data-theme="dark"] .global-search-group-header {
  background: #171a21;
  color: #cbd5e1;
}

[data-theme="dark"] .global-search-group + .global-search-group,
[data-theme="dark"] .global-search-item {
  border-color: #303744;
}

[data-theme="dark"] .global-search-item:hover,
[data-theme="dark"] .global-search-item:focus,
[data-theme="dark"] .global-search-item.is-active {
  background: #293243;
  color: #fff;
}

[data-theme="dark"] .global-search-item-icon {
  background: #303744;
  color: #e2e8f0;
}

[data-theme="dark"] .global-search-item-subtitle,
[data-theme="dark"] .global-search-more,
[data-theme="dark"] .global-search-state {
  color: #cbd5e1;
}

[data-theme="dark"] .global-search-item-meta {
  color: #94a3b8;
}
/* sidebar */
.layout{display:flex;flex:1;margin-top:56px;overflow:hidden;}
/* Basis sidebar */
.sidebar {
  flex-shrink: 0;
  border-right: 1px solid #dee2e6;
  background: var(--sidebar-bg-light);
}

/* Classic variant */
.sidebar-classic {
  width: 240px;
  padding: 1rem;
}

.sidebar-classic::after{
  pointer-events: none; /* << voorkomt hover/click */
}

/* Modern variant (smal) */
.sidebar-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;           /* automatisch */
  min-width: 0;          /* reset */
  max-width: none;       /* reset */
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  background-color: #ffffff;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.sidebar-modern .dropdown-menu,
.sidebar-modern-dropdown {
  z-index: 1040;
}

/* Onzichtbare hover zone */
.sidebar-modern::after {
  content: "";
  position: absolute;
  top: 0;
  right: -180px; /* breedte van dropdown */
  width: 180px;
  height: 100%;
  pointer-events: none; /* << voorkomt hover/click */
}
[data-theme="dark"] .sidebar{background:var(--sidebar-bg-dark);border-color:#444;color:#e0e0e0;}
.sidebar .nav-link{color:inherit;border-radius:.5rem;padding:.6rem 1rem;display:flex;align-items:center;gap:.8rem;}
.sidebar .nav-link:hover,.sidebar .nav-link.active{background:var(--brand-primary);color:#fff;}
.submenu{margin-left:1.4rem;border-left:1px solid #eee;}
[data-theme="dark"] .submenu{border-color:#333;}
.submenu .nav-link{font-size:.9rem;padding:.4rem .75rem;color:inherit!important;background:none!important;}
.submenu .nav-link:hover{background-color:rgba(0,0,0,.05);color:var(--brand-primary)!important;}
[data-theme="dark"] .submenu .nav-link:hover{background-color:rgba(255,255,255,.08);}
.submenu .nav-link.active{background:none!important;font-weight:500;color:var(--brand-primary)!important;}
/* main */
main{flex:1;padding:1.5rem;overflow-y:auto;}
footer{text-align:center;padding:1rem 0;color:#888;font-size:.875rem;border-top:1px solid #ddd;margin-top:auto;}
/* modals dark mode */
[data-theme="dark"] .modal-content{background:#2b2b2b;color:#f1f1f1;border-color:#444;}
[data-theme="dark"] .modal-header,[data-theme="dark"] .modal-footer{border-color:#444;}
[data-theme="dark"] .form-control{background:#212121;border-color:#444;color:#f8f9fa;}
[data-theme="dark"] .form-control::placeholder{color:#aaa;}
/* responsive */
@media(max-width:991px){
  #toggleSidebar{display:inline-block;}
  .sidebar{
    position:fixed;
    left:-240px;
    top:56px;
    bottom:0;
    width:240px;
    max-height:calc(100vh - 56px);
    max-height:calc(100dvh - 56px);
    z-index:1020;
    transition:left .3s;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar.show{left:0;}
  .topbar .search-container{display:none!important;}
  .global-search-wrapper {
    position: static;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    margin: 0 .65rem 0 auto;
  }
  .global-search-mobile-trigger {
    display: inline-flex;
  }
  .global-search-wrapper .global-search-form,
  .global-search-wrapper .global-search-results {
    display: none;
  }
  .global-search-wrapper.is-mobile-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.48);
    z-index: 1058;
  }
  .global-search-wrapper.is-mobile-open .global-search-form {
    display: flex;
    position: fixed;
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    height: 42px;
    z-index: 1060;
  }
  .global-search-wrapper.is-mobile-open .global-search-results {
    display: block;
    position: fixed;
    top: 58px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-height: none;
    border-radius: 8px;
    z-index: 1060;
  }
  .global-search-wrapper.is-mobile-open .global-search-form input.form-control {
    height: 38px;
    font-size: 1rem;
  }
  .global-search-item {
    min-height: 68px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: .7rem .85rem;
  }
  .global-search-item-icon {
    width: 36px;
    height: 36px;
  }
}

@media(max-width:575px){
  .topbar{padding:0 .65rem;}
  #notificationMenu,
  #chatHeaderMenu,
  .theme-toggle {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
  }
  #userMenu strong {
    display: none;
  }
  #userMenu img {
    margin-right: 0 !important;
  }
  .global-search-wrapper {
    margin-right: .45rem;
  }
  .global-search-item-title {
    font-size: .95rem;
  }
}
/* ==== kaarten (cards) en tabellen voor dark mode ==== */
[data-theme="dark"] .card {
  background-color: #242424;
  border-color: #333;
  color: #eaeaea;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #1e1e1e;
  border-color: #333;
  color: #f1f1f1;
}
[data-theme="dark"] .card-body {
  background-color: #242424;
  color: #eaeaea;
}
[data-theme="dark"] .table {
  color: #ddd;
  background-color: #1e1e1e;
}
[data-theme="dark"] .table thead {background-color: #2a2a2a;color: #fff;}
[data-theme="dark"] .table tbody tr {border-color: #333;}
[data-theme="dark"] .table tbody tr:nth-of-type(odd) {background-color: #212121;}
[data-theme="dark"] .table tbody tr:hover {background-color: #2c2c2c;}
[data-theme="dark"] .card {background-color: #222;border-color: #333;color: #eaeaea;}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #1a1a1a;
  border-color: #333;
  color: #f3f3f3;
}
[data-theme="dark"] .card.shadow-sm {box-shadow: 0 .125rem .25rem rgba(0,0,0,.4);}
[data-theme="dark"] .table thead {background-color: #1a1a1a;color: #f3f3f3;}
[data-theme="dark"] .table tbody tr:nth-of-type(odd){background-color:#1f1f1f;}
[data-theme="dark"] .table tbody tr:hover{background-color:#2b2b2b;}
[data-theme="dark"] .text-muted {color: #bbb !important;}


/* Hard override van primaire kleurstijlen */
.text-primary {
  color: var(--brand-primary) !important;
}

.bg-primary {
  background-color: var(--brand-primary) !important;
}

/* Voor knoppen */
.btn-primary {
  background-color: #E6397C !important;
  border-color: #E6397C !important;
  color: #fff !important;
}

/* Voor knoppen */
.btn-secondary {
  background-color: #2A3042 !important;
  border-color: #2A3042 !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: color-mix(in srgb, var(--brand-primary) 85%, black) !important;
  border-color: color-mix(in srgb, var(--brand-primary) 85%, black) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
a.btn.btn-secondary:hover,
a.btn.btn-secondary:focus {
  background-color: #E6397C !important;
  border-color: #E6397C !important;
  color: #fff !important;
}


.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
a.btn.btn-outline-secondary:hover,
a.btn.btn-outline-secondary:focus {
  background-color: #E6397C !important;
  border-color: #E6397C !important;
  color: #fff !important;
}

.btn-outline-secondary:hover i,
.btn-outline-secondary:focus i,
a.btn.btn-outline-secondary:hover i,
a.btn.btn-outline-secondary:focus i {
  color: #fff !important;
}

.btn-light:hover,
.btn-light:focus,
a.btn.btn-light:hover,
a.btn.btn-light:focus {
  background-color: #2A3042 !important;
  border-color: #2A3042 !important;
  color: #fff !important;
}

.btn-light:hover i,
.btn-light:focus i,
a.btn.btn-light:hover i,
a.btn.btn-light:focus i {
  color: #fff !important;
}

/* Direct message pop-up */
.chat-header-dropdown {
  width: 320px;
  max-width: calc(100vw - 24px);
  padding-bottom: 8px;
}

.chat-header-search {
  height: 36px;
  border: 1px solid #dbe1ea;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #6b7280;
}

.chat-header-search input {
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  background: transparent;
  color: #111827;
  font-size: .86rem;
}

.chat-header-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 0 8px;
}

.chat-header-toggle {
  min-height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: #374151;
  font-size: .84rem;
  cursor: pointer;
  user-select: none;
}

.chat-header-toggle input {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.chat-header-conversation {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  text-align: left;
  color: #111827;
}

.chat-header-conversation:hover,
.chat-header-conversation:focus {
  background: #eef2f7;
}

.chat-header-conversation img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 34px;
}

.chat-header-conversation-copy {
  min-width: 0;
  flex: 1;
}

.chat-header-conversation-copy strong,
.chat-header-conversation-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-header-conversation-copy strong {
  font-size: .88rem;
  color: #111827;
}

.chat-header-conversation-copy span {
  font-size: .76rem;
  color: #6b7280;
}

.chat-header-unread {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #E6397C;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  padding: 0 7px;
  flex: 0 0 auto;
}

[data-theme="dark"] .chat-header-dropdown,
[data-theme="dark"] .chat-header-search,
[data-theme="dark"] .chat-header-toggle {
  background: #242424;
  border-color: #333;
}

[data-theme="dark"] .chat-header-search input,
[data-theme="dark"] .chat-header-conversation,
[data-theme="dark"] .chat-header-conversation-copy strong,
[data-theme="dark"] .chat-header-toggle {
  color: #f3f4f6;
}

[data-theme="dark"] .chat-header-conversation:hover,
[data-theme="dark"] .chat-header-conversation:focus {
  background: #303030;
}

.dm-chat-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 84px);
  z-index: 1045;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 10px;
}

.dm-chat-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dbe1ea;
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .22);
  overflow: hidden;
  pointer-events: auto;
  flex: 0 0 auto;
}

.dm-chat-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 2;
  cursor: ns-resize;
  touch-action: none;
}

.dm-chat-resize-handle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .15s ease;
}

.dm-chat-expanded .dm-chat-resize-handle:hover::before,
.dm-chat-resizing .dm-chat-resize-handle::before {
  opacity: 1;
}

.dm-chat-minimized .dm-chat-resize-handle {
  display: none;
}

.dm-chat-resizing {
  user-select: none;
  cursor: ns-resize;
}

.dm-chat-widget.dm-chat-minimized {
  width: 260px;
  height: 58px;
}

.dm-chat-widget.dm-chat-expanded {
  width: 340px;
  height: 500px;
}

.dm-chat-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: var(--topbar-bg-light);
  color: #fff;
}

[data-theme="dark"] .dm-chat-header {
  background: var(--topbar-bg-dark);
}

.dm-chat-minimized .dm-chat-header {
  min-height: 54px;
  cursor: pointer;
  padding: 7px 9px;
}

.dm-chat-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dm-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 42px;
  background: rgba(255, 255, 255, .25);
  border: 2px solid rgba(255, 255, 255, .5);
}

.dm-chat-minimized .dm-chat-avatar {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.dm-chat-title {
  min-width: 0;
}

.dm-chat-title strong,
.dm-chat-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-chat-title strong {
  font-size: 1rem;
  line-height: 1.2;
}

.dm-chat-title span {
  font-size: .76rem;
  opacity: .86;
  margin-top: 2px;
}

.dm-chat-minimized .dm-chat-title span {
  display: none;
}

.dm-chat-unread {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #E6397C;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  padding: 0 7px;
  flex: 0 0 auto;
}

.dm-chat-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
}

.dm-chat-actions button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  border-left: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  padding: 0;
}

.dm-chat-actions button:first-child {
  border-left: 0;
}

.dm-chat-actions button:hover,
.dm-chat-actions button:focus {
  background: rgba(255, 255, 255, .18);
}

.dm-chat-expanded .dm-chat-expand {
  display: none;
}

.dm-chat-expanded .dm-chat-minimize {
  border-left: 0;
}

.dm-chat-minimized .dm-chat-minimize {
  display: none;
}

.dm-chat-messages {
  flex: 1;
  min-height: 0;
  padding: 14px 12px;
  overflow-y: auto;
  background: #f5f7fb;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-chat-minimized .dm-chat-messages,
.dm-chat-minimized .dm-chat-composer {
  display: none;
}

.dm-chat-bubble {
  max-width: 82%;
  border-radius: 8px;
  padding: 9px 10px 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  word-break: break-word;
  white-space: normal;
}

.dm-chat-bubble-text {
  white-space: pre-wrap;
  line-height: 1.35;
}

.dm-chat-bubble.own {
  align-self: flex-end;
  background: #e9eef8;
  color: #1f2937;
  border-bottom-right-radius: 3px;
}

.dm-chat-bubble.other {
  align-self: flex-start;
  background: #eaf2ff;
  color: #1f2937;
  border-bottom-left-radius: 3px;
}

.dm-chat-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin-top: 4px;
  color: #8a94a6;
  font-size: .72rem;
  text-align: right;
}

.dm-chat-bubble-sender {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.dm-chat-bubble-sender::after {
  content: "·";
  margin-left: 5px;
  font-weight: 400;
}

.dm-chat-bubble-meta time {
  flex: 0 0 auto;
}

.dm-chat-composer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.dm-chat-composer textarea {
  width: 100%;
  min-height: 44px;
  max-height: 76px;
  resize: none;
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  padding: 8px 10px;
  outline: 0;
  color: #1f2937;
  background: #f9fafb;
}

.dm-chat-composer textarea:focus {
  border-color: #3f7df1;
  box-shadow: 0 0 0 3px rgba(63, 125, 241, .12);
}

.dm-chat-composer button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: var(--bs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 600;
  padding: 8px 12px;
}

.dm-chat-composer button:hover,
.dm-chat-composer button:focus {
  background: color-mix(in srgb, var(--bs-primary) 85%, black 15%);
}

[data-theme="dark"] .dm-chat-widget {
  background: #242424;
  border-color: #333;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .42);
}

[data-theme="dark"] .dm-chat-messages {
  background: #181818;
}

[data-theme="dark"] .dm-chat-composer {
  background: #242424;
  border-color: #333;
}

[data-theme="dark"] .dm-chat-composer textarea {
  background: #1f1f1f;
  border-color: #444;
  color: #f3f4f6;
}

[data-theme="dark"] .dm-chat-bubble.own {
  background: #31415d;
  color: #f3f4f6;
}

[data-theme="dark"] .dm-chat-bubble.other {
  background: #26354d;
  color: #f3f4f6;
}

@media (max-width: 575px) {
  .dm-chat-dock {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 8px;
  }

  .dm-chat-widget.dm-chat-minimized {
    width: min(270px, calc(100vw - 16px));
    height: 52px;
  }

  .dm-chat-widget.dm-chat-expanded {
    width: calc(100vw - 16px);
    height: min(480px, calc(100vh - 72px));
    height: min(480px, calc(100dvh - 72px));
  }

  .dm-chat-header {
    min-height: 54px;
    padding: 8px;
    gap: 8px;
  }

  .dm-chat-minimized .dm-chat-header {
    min-height: 52px;
    padding: 7px 8px;
  }

  .dm-chat-person {
    gap: 8px;
  }

  .dm-chat-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .dm-chat-minimized .dm-chat-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .dm-chat-title strong {
    font-size: .92rem;
  }

  .dm-chat-title span {
    font-size: .72rem;
  }

  .dm-chat-actions button {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .dm-chat-messages {
    padding: 10px 8px;
    gap: 7px;
  }

  .dm-chat-bubble {
    max-width: 88%;
    padding: 8px 9px 6px;
  }

  .dm-chat-composer {
    padding: 8px;
    gap: 7px;
  }

  .dm-chat-composer textarea {
    min-height: 42px;
    max-height: 70px;
    padding: 8px 9px;
    font-size: .95rem;
  }

  .dm-chat-composer button {
    min-height: 40px;
    padding: 8px 10px;
  }
}


/* === Zachte kleurvarianten met bijpassende tekst ===
   Sluit aan op Bootstrap 5 variabelen (werkt ook in dark mode)
------------------------------------------------------- */
.bg-soft-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
  color: var(--bs-primary-text-emphasis) !important;
}

.bg-soft-success {
  background-color: rgba(var(--bs-success-rgb), 0.08) !important;
  color: var(--bs-success-text-emphasis) !important;
}

.bg-soft-info {
  background-color: rgba(var(--bs-info-rgb), 0.12) !important;
  color: var(--bs-info-text-emphasis) !important;
}

.bg-soft-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.18) !important;
  color: var(--bs-warning-text-emphasis) !important;
}

.bg-soft-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.12) !important;
  color: var(--bs-danger-text-emphasis) !important;
}

/* Subtekst (zoals .text-muted) altijd goed leesbaar op light backgrounds */
.bg-soft-primary .text-muted,
.bg-soft-success .text-muted,
.bg-soft-info .text-muted,
.bg-soft-warning .text-muted,
.bg-soft-danger .text-muted {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Voor iconen en kleine labels (zwakker tintje) */
.bg-soft-primary .text-body-secondary,
.bg-soft-success .text-body-secondary,
.bg-soft-info .text-body-secondary,
.bg-soft-warning .text-body-secondary,
.bg-soft-danger .text-body-secondary {
  color: rgba(0, 0, 0, 0.65) !important;
}


/* Tijdlijn */
.timeline-with-icons{position:relative;list-style:none;margin:0;padding:0;}
.timeline-with-icons::before{content:'';position:absolute;top:0;bottom:0;left:15px;width:2px;background-color:hsl(0,0%,90%);}
.timeline-with-icons .timeline-item{position:relative;padding-left:3rem;margin-bottom:2rem;}
.timeline-with-icons .timeline-icon{position:absolute;left:0;top:0;background-color:hsl(217,88.2%,90%);color:hsl(217,88.8%,35.1%);border-radius:50%;width:31px;height:31px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 2px rgba(0,0,0,0.05);}
.timeline-with-icons h6{margin-bottom:.25rem;}
.timeline-with-icons p{margin-bottom:0;font-size:.9rem;color:#6c757d;}
.timeline-with-icons p.text-muted.fw-semibold{margin-bottom:.25rem;}
/* categorieknoppen */
#noteCategoryButtons .btn{background-color:#fff;color:#212529;border-color:#dee2e6;}
#noteCategoryButtons .btn:hover{background-color:#f8f9fa;border-color:#cbd5e1;}
#noteCategoryButtons .btn.active{background-color:#e9ecef;border-color:#adb5bd;font-weight:600;}

/* LEFT INFO COLUMN */
.left-info-column{font-size:14px;color:#343a40;background-color:#fff;}
.left-info-header{background-color:#fff;}
.left-info-icon{width:70px;height:70px;background:linear-gradient(135deg,#5b73e8,#6ee7b7);color:#fff;font-size:32px;}
.left-info-title{font-weight:600;}
.left-info-link{color:var(--bs-primary);text-decoration:none;}
.left-info-link:hover{text-decoration:underline;}
.left-info-badges .badge{font-weight:400;font-size:12px;background-color:#f8f9fa;border:1px solid #dee2e6;color:#495057;margin-right:4px;margin-bottom:4px;}
.left-info-content dl{margin:0;}
.left-info-content dt{text-transform:uppercase;font-size:11px;color:#6c757d;font-weight:600;margin-bottom:2px;}
.left-info-content dd{margin:0 0 1rem 0;font-size:14px;color:#212529;}
.left-info-content h6{font-size:14px;font-weight:600;border-bottom:1px solid #f1f3f5;padding-bottom:.5rem;margin-bottom:1rem;}
.left-info-column.card {
  border-radius: .375rem;    /* zelfde radius als andere kaarten */
  overflow: hidden;          /* laat binnenkant mooi afronden */
}

/* zorg dat de header de afgeronde hoek behoudt */
.left-info-header {
  border-top-left-radius: .375rem;
  border-top-right-radius: .375rem;
}


/* =========================================================
   BUTTONS – primary kleuren gelijk aan top‑bar kleur
========================================================= */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--topbar-bg-light);
  --bs-btn-border-color: var(--topbar-bg-light);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--topbar-bg-light) 85%, black 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--topbar-bg-light) 85%, black 20%);
  --bs-btn-focus-shadow-rgb: 48, 57, 95; /* RGB van je topbarkleur (#2A3042) */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--topbar-bg-light) 80%, black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--topbar-bg-light) 75%, black 25%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--topbar-bg-light);
  --bs-btn-disabled-border-color: var(--topbar-bg-light);
}

/* Donkere modus – gebruik topbar-dark variabele */
[data-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--topbar-bg-dark);
  --bs-btn-border-color: var(--topbar-bg-dark);
  --bs-btn-hover-bg: color-mix(in srgb, var(--topbar-bg-dark) 85%, white 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--topbar-bg-dark) 85%, white 25%);
}

/* =========================================================
   CARD-HEADERS MATCHEN MET TOPBAR-KLEUR
========================================================= */
.card-header {
  background-color: var(--topbar-bg-light);
  color: #fff;
  border: none;
}

/* Donkere modus */
[data-theme="dark"] .card-header {
  background-color: var(--topbar-bg-dark);
  color: #f8f9fa;
}


/* ====================================================================
   🔹 TABS FIX – juiste uitlijning + dropdown zonder afronding
==================================================================== */
.nav-tabs {
  display:flex;
  align-items:flex-end;
  background-color:var(--topbar-bg-light);
  border:none;
  position:relative;
  overflow:visible !important;
}
.nav-tabs .nav-link {
  color:#fff;
  border:none;
  background-color:transparent;
  padding:0.75rem 1rem;
  font-size:14px;
  font-weight:400;
  line-height:1.25rem;
  border-radius:.375rem .375rem 0 0;
  margin-bottom:0;
  transition:background-color .2s,color .2s;
}
.nav-tabs .nav-link:hover {
  color:#fff;
  background-color:rgba(255,255,255,0.1);
}
.nav-tabs .nav-link.active {
  color:#212529;
  background-color:#fff;
  border:none;
  font-weight:400;
  margin-bottom:-1px;   /* laat witte tab over rand vallen */
  position:relative;
  top:1px;
  border-top-left-radius:.375rem;
  border-top-right-radius:.375rem;
}

/* HEADER-BLOK VOOR TABS */
.bg-body-tabs {
  background-color:var(--topbar-bg-light);
  border:none;
  padding-bottom:0;
}
.card-header.bg-body-tabs {background-color:var(--topbar-bg-light);}
.card-title{color:#fff;}

/* Responsive tabbalk + dropdown gedrag */
.responsive-tabs {
  flex-wrap:nowrap;
  overflow-x:auto;
}
.responsive-tabs .nav-item {white-space:nowrap;}
.responsive-tabs::-webkit-scrollbar {height:6px;}
.responsive-tabs::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,0.15);border-radius:3px;}
.responsive-tabs .dropdown-toggle::after {margin-left:.35rem;}
.responsive-tabs .dropdown-toggle {
  color:#fff;
  background-color:transparent;
  border:none;
  border-radius:.375rem .375rem 0 0;
  margin-bottom:0;
}
.responsive-tabs .dropdown-toggle:hover,
.responsive-tabs .dropdown-toggle:focus {
  background-color:rgba(255,255,255,.1);
  color:#fff;
}

/* Dropdown menu zichtbaar boven tabbalk */
.nav-tabs .dropdown-menu {
  position:absolute;
  z-index:1055;
  top:100%;
  right:0;
  left:auto;
  margin-top:.25rem;
  overflow:visible;
}

/* Strakke dropdown zonder afgeronde hoeken, volle breedte */
.responsive-tabs .dropdown {
  position:relative;
}
.responsive-tabs .dropdown-menu {
  background-color:var(--topbar-bg-light);
  color:#fff;
  border:none;
  border-radius:0!important;
  box-shadow:0 0.5rem 1rem rgba(0,0,0,0.25);
  padding:0;
  min-width:180px;
  overflow:hidden;
}
.responsive-tabs .dropdown-item,
.responsive-tabs .dropdown-menu .nav-link {
  display:block;
  width:100%;
  padding:0.6rem 1rem;
  color:#fff;
  background:transparent;
  border:none;
  border-radius:0!important;
  text-align:left;
  white-space:nowrap;
}
.responsive-tabs .dropdown-item:hover,
.responsive-tabs .dropdown-item:focus,
.responsive-tabs .dropdown-menu .nav-link:hover {
  background-color:rgba(255,255,255,0.1);
  color:#fff;
}
.responsive-tabs .dropdown-item.active,
.responsive-tabs .dropdown-menu .nav-link.active {
  background-color:rgba(255,255,255,0.2);
  color:#fff;
}
.responsive-tabs .dropdown-menu.show {border-radius:0!important;}

/* =========================================================
   TAB ICON COLORS – wit inactief, zwart actief
========================================================= */
.nav-tabs .nav-link i {
  color: #fff;               /* inactieve standaardkleur */
  transition: color .2s ease;
}

.nav-tabs .nav-link:hover i {
  color: #f8f9fa;            /* lichtere wit bij hover */
}

.nav-tabs .nav-link.active i {
  color: #212529;            /* zwarte iconkleur bij actieve tab */
}

/* =========================================================
   RESPONSIVE TABS – MOBIEL: 1 TAB + DROPDOWN
========================================================= */
@media (max-width: 767.98px) {
  /* Tabbalk op mobiel: geen scroll, maar enkel eerste tab */
  .responsive-tabs {
    flex-wrap: nowrap;
    overflow: hidden; /* verberg horizontale scroll */
  }

  /* Laat standaard maar 1 link zien
  .responsive-tabs .nav-item:not(:first-child):not(.dropdown) {
    display: none !important;
  }

  /* “Meer”-tab altijd tonen */
  /* .responsive-tabs .dropdown {
    display: block !important;
  } */ */

  /* Dropdown-menu licht groter voor aanraakcomfort */
  .responsive-tabs .dropdown-menu {
    min-width: 220px;
    font-size: 15px;
  }
}

/* =========================================================
   GENERIC FILTER BUTTONS (zelfde stijl als #noteCategoryButtons)
   Voor nieuwe filtergroepen die werken met classes in plaats van ID
========================================================= */
.filter-buttons .btn {
  background-color: #fff;
  color: #212529;
  border-color: #dee2e6;
}
.filter-buttons .btn:hover {
  background-color: #f8f9fa;
  border-color: #cbd5e1;
}
.filter-buttons .btn.active {
  background-color: #e9ecef;
  border-color: #adb5bd;
  font-weight: 600;
}

/* Donkere modus */
[data-theme="dark"] .filter-buttons .btn {
  background-color: #2a2a2a;
  color: #f8f9fa;
  border-color: #444;
}
[data-theme="dark"] .filter-buttons .btn:hover {
  background-color: #333;
  border-color: #555;
}
[data-theme="dark"] .filter-buttons .btn.active {
  background-color: #3b3b3b;
  border-color: #666;
  font-weight: 600;
}


/* =========================================================
   OVERRIDE STANDAARD BOOTSTRAP TABLE‑HOVER KLEUR
   – werkt altijd, ook als Bootstrap later overrides heeft
========================================================= */

/* lichte modus */
.table-hover > tbody > tr:hover {
  --bs-table-hover-bg: #FBFBFD;
  background-color: #FBFBFD !important;
}

/* donkere modus */
[data-theme="dark"] .table-hover > tbody > tr:hover {
  --bs-table-hover-bg: #2c3048;
  background-color: #2c3048 !important;
}

/* =========================================================
   CLEAN TABLE – rustige kaartlook, werkt ook in .table-responsive
========================================================= */
.table-styled-clean {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;         /* kleine ruimte tussen rijen */
  background-color: transparent;
}

/* header */
.table-styled-clean thead th {
  background: none !important;
  color: #374151;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  padding: 0.6rem 1rem;
  white-space: nowrap;
}

/* rijen & borders */
.table-styled-clean tbody tr {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* borders via cellen */
.table-styled-clean tbody td {
  background-color: #fff;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem;
  vertical-align: middle;
}

/* afgeronde buitenkanten */
.table-styled-clean tbody td:first-child {
  border-left: 1px solid #e5e7eb;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.table-styled-clean tbody td:last-child {
  border-right: 1px solid #e5e7eb;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* hover */
.table.table-styled-clean.table-hover > tbody > tr:hover td {
  background-color: #FBFBFD !important;
  border-color: #d9dde5;
  cursor: pointer;
}

/* ===== donkere modus ===== */
[data-theme="dark"] .table-styled-clean thead th {
  color: #e8e8e8;
}
[data-theme="dark"] .table-styled-clean tbody td {
  background-color: #1e1e1e;
  border-color: #333;
}
[data-theme="dark"] .table.table-styled-clean.table-hover > tbody > tr:hover td {
  background-color: #2c3048 !important;
  border-color: #3b3f55;
}

/* =========================================================
   CUSTOMER LIST – rustige, responsieve card look
========================================================= */
.cardTable-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* witruimte tussen kaarten */
}
.cardTable-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  padding: 1rem 1.25rem;
  transition: background-color .15s ease, border-color .15s ease;
}
.cardTable-card:hover {
  background-color: #FBFBFD;
  border-color: #d9dde5;
  cursor: pointer;
}
.cardTable-info .fw-semibold {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
}
.cardTable-info .text-muted {
  font-size: 0.875rem;
  color: #6c757d;
}
.cardTable-group .badge {
  font-size: 0.75rem;
  border-radius: 0.75rem;
  padding: 0.35rem 0.6rem;
}
[data-theme="dark"] .customer-card {
  background-color: #1e1e1e;
  border-color: #333;
}
[data-theme="dark"] .customer-card:hover {
  background-color: #2c3048;
  border-color: #3b3f55;
}

/* =========================================================
   FILTERS – desktop vs mobiel
========================================================= */
@media (max-width: 767.98px) {
  .filter-buttons.filter-scope,
  .filter-buttons.filter-group {
    display: none !important;   /* knoppen verbergen op mobiel */
  }
  .filter-scope-dropdown,
  .filter-group-dropdown {
    display: block !important;  /* select tonen */
    width: 100%;
  }
}


/* =========================================================
   RESPONSIVE BEHOUDEN — borders blijven mooi bij scroll
========================================================= */
.table-responsive {
  overflow-x: auto;
}
.table-responsive > .table-styled-clean {
  min-width: 600px;              /* voorkom dat cellen stapelen */
}
.table-responsive::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.1);
  border-radius: 3px;
  transition: background-color .2s ease;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.25);
}

/* =========================================================
   🔹 MODERNE TABELSTIJL – Klantenoverzicht (vlot & strak)
   Gebruik op: <table class="table table-hover table-styled">
========================================================= */
.table-styled {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* header */
.table-styled thead th {
  background-color: #2A3042 !important; /* zelfde tint als topbar */
  color: #fff !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-bottom: none;
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

/* rijen */
.table-styled tbody tr {
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.table-styled tbody tr:nth-of-type(even) {
  background-color: #fafbfc;
}

/* celopmaak */
.table-styled td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}
.table-styled td .fw-semibold {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
}
.table-styled td .text-muted {
  font-size: 0.875rem;
  color: #6c757d;
}

/* donkere modus */
[data-theme="dark"] .table-styled {
  background-color: #1e1e1e;
  border-color: #333;
  box-shadow: none;
}
[data-theme="dark"] .table-styled thead th {
  background-color: #2A3042 !important;
  color: #f8f9fa !important;
}
[data-theme="dark"] .table-styled tbody tr {
  background-color: #222;
  border-bottom-color: #333;
}
[data-theme="dark"] .table-styled tbody tr:nth-of-type(even) {
  background-color: #1f1f1f;
}


/* =========================================================
   FOOTER – niet sticky + extra ruimte op mobiele schermen
========================================================= */
@media (max-width: 767.98px) {
  /* Flex‑layout op html/body uitschakelen */
  html,
  body {
    display: block !important;
    height: auto !important;
  }

  /* layoutblok weer normaal laten vloeien */
  .layout {
    display: block !important;
    height: auto !important;
    margin-bottom: 2rem; /* ruimte boven footer */
  }

  /* zelf footer‑stijl */
  footer.footer {
    position: static !important; /* niet vast onderaan scherm */
    margin-top: 2rem;
    padding-bottom: 2.5rem;
    background-color: var(--body-bg-light);
    border-top: 1px solid #dee2e6;
  }

  /* iets kleinere tekst en behoud stijl */
  footer.footer .text-muted {
    font-size: 0.85rem;
  }
}


/* ===========================================
   Contactpersonen lijst – showContacts()
=========================================== */
.contacts-list .cardTable-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  transition: box-shadow .2s ease-in-out;
}
.contacts-list .cardTable-card:hover {
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
}
.contacts-list .cardTable-card .fw-semibold {
  font-weight: 600;
}
.contacts-list .cardTable-card .text-muted.small {
  font-size: .85rem;
  color: #6c757d !important;
}

.contacts-list a.text-decoration-none:hover {
  text-decoration: underline;
}

.contact-search::placeholder {
  color: #6c757d;
}
.contacts-list .cardTable-card {
  transition: box-shadow .2s ease-in-out;
}
.contacts-list .cardTable-card:hover {
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
}


/* ===========================================
   Choices – Bootstrap modal fix
=========================================== */

.choices {
  position: relative;
  width: 100%;
}

.choices__inner {
  border: 1px solid #ced4da !important;
  border-radius: 6px !important;
  min-height: 38px !important;
  padding: .375rem .75rem !important;
  font-size: .95rem;
  background-color: #fff;
}

.choices__inner:focus-within {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* Dropdown exact onder veld */
.choices__list--dropdown {
  position: absolute !important;
  top: calc(100% + 2px);
  left: 0;
  width: 100% !important;
  border: 1px solid #ced4da !important;
  border-radius: 0 0 6px 6px;
  background: #fff;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  z-index: 1060 !important; /* boven modal */
}

/* Zoekveld netjes Bootstrap-achtig */
.choices__input--cloned {
  width: calc(100% - 1rem);
  margin: .5rem;
  padding: .375rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  font-size: .9rem;
}

.choices__input--cloned:focus {
  border-color: #2A3042;
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* Lijst scroll */
.choices__list--dropdown .choices__list {
  max-height: 220px;
  overflow-y: auto;
}

/* Hover */
.choices__item--selectable.is-highlighted {
  background-color: #2A3042 !important;
  color: #fff !important;
}

/* Verwijder "Druk om te kiezen" */
.choices__item--select-text {
  display: none !important;
}

/* Altijd witte achtergrond */
.choices__inner,
.choices.is-open .choices__inner,
.choices.is-focused .choices__inner {
  background-color: #ffffff !important;
}

/* Placeholder mag niet grijs het hele veld maken */
.choices__placeholder {
  opacity: 1 !important;
  color: #6c757d !important; /* subtiel Bootstrap grijs */
}

/* Geselecteerde medewerkers als btn-secondary */
.choices[data-type*="select-multiple"] .choices__list--multiple .choices__item {
  background-color: #2A3042 !important;
  border-color: #2A3042 !important;
  color: #fff !important;
}

.choices[data-type*="select-multiple"] .choices__list--multiple .choices__item.is-highlighted {
  background-color: #2A3042 !important;
  border-color: #2A3042 !important;
  color: #fff !important;
}

.choices[data-type*="select-multiple"] .choices__list--multiple .choices__button {
  border-left-color: rgba(255, 255, 255, .35) !important;
}

/* Zorg dat disabled styling niet lekt */
.choices__inner.is-disabled {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* Open omhoog */
.choices.open-up .choices__list--dropdown {
  top: auto !important;
  bottom: calc(100% + 2px);
  border-radius: 6px 6px 0 0;
}


/* Verbreed specifiek de notificatie‑dropdown */
#notificationMenu + .dropdown-menu {
  min-width: 360px; /* pas deze waarde naar wens aan */
  max-width: 500px; /* optioneel, limiet */
}


/* =========================================
   Klantwidget (customer-card)
   ========================================= */

/* Basiskaart */
.customer-card {
  border-radius: .5rem;
  overflow: hidden;
}

/* Donkere headerbalk */
.customer-header {
  background-color: #2A3042;
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.customer-header .customer-name {
  font-weight: 600;
  font-size: 1rem;
}
.customer-header .customer-group {
  background-color: var(--topbar-bg-light);
  color: #fff;
  font-size: .75rem;
  border-radius: 12px;
  padding: 0.2rem .6rem;
}

/* Alerts ------------------------------------------------ */
.customer-alert {
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  padding: .6rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .9rem;
}
.customer-alert i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 1rem;
}
/* prioriteit normal */
.alert-normal {
  background: #f8f9fa;
  color: #495057;
}
.alert-normal i { color: #6c757d; }
/* prioriteit medium */
.alert-medium {
  background: #fff3cd;
  color: #856404;
}
.alert-medium i { color: #ffc107; }
/* prioriteit high */
.alert-high {
  background: #f8d7da;
  color: #842029;
}
.alert-high i { color: #dc3545; }


/* =============================================================================
   Component: Customer Card
   ----------------------------------------------------------------------------- 
   Deze sectie bevat de stijlen voor de klantwidget ("customer-card").
 ============================================================================ */

.customer-body {
  padding: .75rem 1rem;
}
.customer-row {
  display: flex;
  gap: .5rem;
  font-size: .9rem;
  padding: .3rem 0;
  border-top: 1px solid #f1f1f1;
}
/* geen lijn boven eerste item */
.customer-row:first-child {
  border-top: none;
}
/* uitlijning bij verschillende types */
.customer-row.align-center {
  align-items: center;
}
.customer-row.align-top {
  align-items: flex-start;
}
.customer-row i {
  color: #6c757d;
  font-size: 1rem;
}
.customer-row a {
  color: #212529;
  text-decoration: none;
}
.customer-row a:hover {
  text-decoration: underline;
}

/* Footer met actiekoppen -------------------------------- */
.customer-footer {
  border-top: 1px solid #dee2e6;
  padding: .5rem .75rem;
}
.customer-footer .btn-group .btn {
  font-size: .85rem;
}

/* ============================================================
   Customer Info Panel
   Unieke styling voor het informatieve linkerpaneel in de klant‑view
   ============================================================ */

.customer-info {
  padding: 0.75rem 1.25rem;
}

/* label + value blokken */
.customer-info .info-block {
  margin-bottom: 1rem;
}
.customer-info .info-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
  letter-spacing: 0;
  text-transform: none;    /* geen hoofdletters */
  margin-bottom: 0.2rem;
}
.customer-info .info-value {
  font-size: 0.925rem;
  color: #212529;
  line-height: 1.35;
}

/* links binnen de waardes */
.customer-info .info-value a {
  color: var(--bs-link-color);
  text-decoration: none;
}
.customer-info .info-value a:hover {
  text-decoration: underline;
}

/* accordion stijlen */
.customer-info .accordion-button {
  padding-left: 1.25rem;
  border: 0;
}

/* ---------------------------------------------------
   Accordion breedte-fix + actieve stijl
   --------------------------------------------------- */

/* accordion moet volledig breed gaan, padding buiten laten vallen */
.customer-info .accordion {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  border-left: none;
  border-right: none;
}

.customer-info .accordion-item {
  border: none;
}

/* knop vult volledige breedte en geen extra marges */
.customer-info .accordion-button {
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border: 0;
  border-radius: 0;
}

/* actief paneel: donkerblauw net als header */
.customer-info .accordion-button:not(.collapsed) {
  background-color: #2A3042 !important;
  color: #fff !important;
}
.customer-info .accordion-button:not(.collapsed) i {
  color: #fff !important;
}
.customer-info .accordion-button:focus {
  box-shadow: none;
}

/* inhoud weer netjes uitgelijnd met de andere info-blocks */
.customer-info .accordion-body {
  padding: 0.75rem 1.25rem;
}

/* ============================================================
   Customer header dropdown styling
   ============================================================ */
.customer-dropdown {
  background-color: #2A3042;
  border: none;
  padding: .25rem 0;
  min-width: 220px;
}

.customer-dropdown .dropdown-item {
  color: #fff;
  font-size: 0.9rem;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
}

.customer-dropdown .dropdown-item i {
  color: #adb5bd; /* iets lichter icoon */
}

.customer-dropdown .dropdown-item:hover,
.customer-dropdown .dropdown-item:focus {
  background-color: rgba(255,255,255,0.1);
  color: #fff;
}

.customer-dropdown .dropdown-divider {
  border-color: rgba(255,255,255,0.15);
  margin: .4rem 0;
}

/* ============================================
   Customer header: dropdown toggle (3 dots)
   ============================================ */

/* standaard icoon wit op donkere header */
.customer-header .dropdown .btn {
  color: #fff;
}

/* bij geopend menu: witte achtergrond, zwart icoon  */
.customer-header .dropdown.show .btn {
  background-color: #fff !important;
  color: #000 !important;
  border-radius: 4px;
}

/* optioneel iets zachter hover‑effect */
.customer-header .dropdown .btn:hover {
  background-color: rgba(255,255,255,0.15);
  color: #fff;
}

/* tijdens open toestand: geen rand of schaduw van Bootstrap */
.customer-header .dropdown.show .btn:focus,
.customer-header .dropdown.show .btn:active {
  box-shadow: none;
}



/* ============================================
   Compact contact-widget adjustments
   ============================================ */

.contact-mini-card {
  border-radius: .5rem;
}

.contact-mini-card .contact-avatar {
  width: 48px;
  height: 48px;
}

.contact-mini-card .btn-link {
  color: var(--bs-body-color);
  font-size: 0.95rem;
}

.contact-mini-card .btn-link:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

.contact-mini-card .small {
  line-height: 1.3;
}