:root {
  --brand-primary:#0d6efd;
  --sidebar-bg-light:#fff;
  --sidebar-bg-dark:#1e1e1e;
  --topbar-bg-light:#212529;
  --topbar-bg-dark:#121212;
  --body-bg-light:#f8f9fa;
  --body-bg-dark:#181818;
  --input-bg-dark:#212121;
  --input-border-dark:#444;
}

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

/* sidebar */
.layout{display:flex;flex:1;margin-top:56px;overflow:hidden;}
.sidebar{width:240px;flex-shrink:0;border-right:1px solid #dee2e6;
  background:var(--sidebar-bg-light);overflow-y:auto;}
[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;z-index:1020;transition:left .3s;}
  .sidebar.show{left:0;}
  #sidebarSearch{display:block!important;margin:.75rem 0;}
  .topbar .search-container{display:none!important;}
}
/* ==== kaarten (cards) en tabellen voor dark mode ==== */
[data-theme="dark"] .card {
  background-color: #242424;          /* donkere achtergrond */
  border-color: #333;                 /* donkerdere rand */
  color: #eaeaea;                     /* lichte tekst */
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #1e1e1e;          /* iets donkerder voor contrast */
  border-color: #333;
  color: #f1f1f1;
}

[data-theme="dark"] .card-body {
  background-color: #242424;
  color: #eaeaea;
}

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

/* ===== extra fine‑tuning voor dark‑mode cards en tabellen ===== */
[data-theme="dark"] .card {
  background-color: #222;       /* iets donkerder */
  border-color: #333;
  color: #eaeaea;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #1a1a1a;    /* match met topbar/sidebar */
  border-color: #333;
  color: #f3f3f3;
}

/* Subtiele schaduw behouden */
[data-theme="dark"] .card.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.4);
}

/* Tabellen */
[data-theme="dark"] .table {
  color: #ddd;
  background-color: #1e1e1e;
}

[data-theme="dark"] .table thead {
  background-color: #1a1a1a;
  color: #f3f3f3;
}

[data-theme="dark"] .table tbody tr {
  border-color: #333;
}

[data-theme="dark"] .table tbody tr:nth-of-type(odd) {
  background-color: #1f1f1f;
}

[data-theme="dark"] .table tbody tr:hover {
  background-color: #2b2b2b;
}

/* kleine tekst in cards (zoals "gebruikers 128 actief") */
[data-theme="dark"] .text-muted {
  color: #bbb !important;
}