:root {
  --jd-bg: #f7f8fb;
  --jd-surface: #ffffff;
  --jd-primary: #0d7a63;
  --jd-primary-strong: #0b5f4c;
  --jd-accent: #2fa688;
  --jd-text: #0f172a;
  --jd-muted: #6b7280;
  --jd-border: #e5e7eb;
  --jd-radius: 12px;
  --jd-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --jd-font: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--jd-font);
  background: radial-gradient(120% 120% at 10% 10%, rgba(15,155,122,0.10), transparent),
              radial-gradient(120% 120% at 90% 20%, rgba(54,194,163,0.08), transparent),
              var(--jd-bg);
  color: var(--jd-text);
}

#sidebarMenu {
  min-height: 100vh;
  background: radial-gradient(60% 120% at 0% 20%, rgba(255,255,255,0.08), transparent),
              linear-gradient(180deg, #b6d5c6 0%, #a2c4b5 100%);
  border-right: 1px solid #91b6a6;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.06);
}

#sidebarMenu .nav-link {
  color: #0f172a;
  border-radius: 10px;
  margin: 0 8px 6px;
  transition: all 0.15s ease;
}

#sidebarMenu .nav-link:hover {
  background: rgba(15,155,122,0.14);
  color: #0f172a;
}

#sidebarMenu .nav-link.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  border: 1px solid #e6f2ed;
}

.menu-icon {
  font-size: 1.5em;
  line-height: 1;
  vertical-align: middle;
  margin-right: 0.15rem;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 991.98px) {
  #sidebarMenu .nav-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
  }
  #sidebarMenu .nav-link .menu-label {
    display: block;
  }
  #sidebarMenu .nav-link .menu-icon {
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .app-shell-row {
    flex-wrap: nowrap;
  }
  #sidebarMenu {
    min-width: 195px;
  }
  #sidebarMenu + main {
    min-width: 0;
  }
}

.navbar {
  background: rgba(10, 92, 74, 0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(10, 92, 74, 0.16);
  border-bottom: 1px solid rgba(10, 92, 74, 0.18);
}

.navbar-dark.bg-dark {
  background: linear-gradient(90deg, #111c17, #15231d) !important;
}

.nav-tabs .nav-link {
  color: #0b5f4c;
}

.nav-tabs .nav-link:hover {
  color: #0d7a63;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover {
  color: #0f172a;
  border-color: var(--jd-primary) var(--jd-primary) #fff;
}

.card {
  border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius);
  box-shadow: var(--jd-shadow);
}

.card-header {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(6,182,212,0.08));
  border-bottom: 1px solid var(--jd-border);
}

.table {
  color: var(--jd-text);
}

.table thead th {
  font-weight: 600;
  color: var(--jd-muted);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-strong));
  border: none;
  box-shadow: 0 10px 20px rgba(13,122,99,0.22);
}

.btn-primary:hover {
  background: var(--jd-primary-strong);
}

.btn-primary:active, .btn-primary:focus {
  background: #084636 !important;
  box-shadow: 0 6px 14px rgba(8,70,54,0.35) !important;
}

.btn-outline-primary {
  color: var(--jd-primary);
  border-color: var(--jd-primary);
}

.btn-outline-primary:hover {
  color: #fff;
  background: var(--jd-primary);
  border-color: var(--jd-primary);
}

/* Donkergroene active/focus-states voor outline knoppen */
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary:active:hover,
.show > .btn-outline-primary.dropdown-toggle {
  background: #145c32;
  color: #fff;
  border-color: #145c32;
  box-shadow: 0 0 0 0.15rem rgba(20, 92, 50, 0.35);
}

.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--jd-border);
  background-color: #f7fbf8;
}

.form-control:focus, .form-select:focus {
  border-color: var(--jd-primary);
  box-shadow: 0 0 0 0.2rem rgba(13,122,99,0.2);
}

.form-select option:checked,
.form-select option:hover {
  background-color: rgba(13,122,99,0.18);
  color: #0f172a;
}

.form-check-input:checked {
  background-color: var(--jd-primary);
  border-color: var(--jd-primary);
}

.text-primary { color: var(--jd-primary) !important; }
.border-primary { border-color: var(--jd-primary) !important; }
.bg-primary { background-color: var(--jd-primary) !important; }
.link-primary { color: var(--jd-primary) !important; }
.link-primary:hover { color: var(--jd-primary-strong) !important; }

.modal-content {
  border-radius: var(--jd-radius);
  box-shadow: var(--jd-shadow);
}