/* Sidebar width + layout */
.sidebar-dark {
  width: 280px;
  min-height: calc(100vh - 56px); /* 56px = standaard navbar hoogte */
}

/* Collapsible button styling (zoals Bootstrap sidebars example) */
.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  background-color: transparent;
}

.btn-toggle:hover,
.btn-toggle:focus {
  background-color: rgba(255, 255, 255, .08);
}

/* Little arrow indicator */
.btn-toggle::before {
  content: "▸";
  width: 1.25em;
  line-height: 0;
  display: inline-block;
  transition: transform .2s ease;
  opacity: .8;
  margin-right: .35rem;
}

.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .2rem .5rem;
  margin-left: 1.75rem;
  color: rgba(255,255,255,.75);
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: rgba(255, 255, 255, .08);
  color: #fff;
}

/* Active link */
.btn-toggle-nav a.active {
  background-color: rgba(255, 255, 255, .14);
  color: #fff;
}

/* Make content next to fixed width sidebar */
.dashboard-shell {
  display: flex;
  gap: 0;
}

.dashboard-content {
  flex: 1;
  min-width: 0;
}