/* ======================================================================= */
/* === MSZ/GGZ SWITCH + MENU THEMA (sidebar only) === */
/* ======================================================================= */

/* --- Switch container + labels --- */
.menu-switch-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 11px 13px 12px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.switch-label {
  color: #d0d2d6;
  font-weight: 600;
  font-size: 14px;
  transition: color 0.3s ease;
}

/* --- Switch (compact) --- */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 14px;
  margin: 0 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #13dacd;
  /* MSZ kleur */
  transition: .4s;
}

.slider:before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: .4s;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* GGZ = checked */
.switch input:checked+.slider {
  background-color: #a367b1;
}

.switch input:checked+.slider:before {
  transform: translateX(16px);
}

/* ======================================================================= */
/* === GGZ THEMA: alleen de SIDEBAR (pcoded-navbar) === */
/* ======================================================================= */

/* Geen regels voor .pcoded-header hier! */
body.ggz-active .pcoded-navbar {
  background: #35224a !important;
  /* paars */
}

/* Bovenste brandblok in de sidebar */
body.ggz-active .pcoded-navbar .navbar-brand {
  background: #35224a !important;
}

/* Actieve / open item achtergrond in de sidebar */
body.ggz-active .pcoded-navbar .nav-item.pcoded-trigger>a {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* (optioneel) Tekst/icon kleur in de sidebar iets lichter voor contrast */
body.ggz-active .pcoded-navbar a,
body.ggz-active .pcoded-navbar .nav-link {
  color: #eae6f3;
}

body.ggz-active .pcoded-navbar a:hover {
  color: #ffffff;
}

/* Labels naast de switch */
body.ggz-active .ggz-label {
  color: #ffffff;
  font-weight: 700;
}

body.ggz-active .msz-label {
  color: #d0d2d6;
  font-weight: 600;
}

/* GGZ (checked) — use the same purple as the slider */
body.ggz-active .b-brand .b-bg {
  background: #a367b1 !important;
  /* Use 'background' instead of 'background-color' */
}

/* ----------------------------------------------------------------------- */
/* Header actions must stay clickable above every page (incl. big tables). */
/* ----------------------------------------------------------------------- */
.pcoded-header {
  z-index: 1100;
}

.pcoded-header .drp-user,
.pcoded-header .drp-user .dropdown-toggle {
  position: relative;
  z-index: 1101;
}

/* Prevent layout overlays from swallowing clicks on the header/user menu */
.pcoded-header:before,
.pcoded-main-container:before {
  pointer-events: none;
}

/* Auth pages: remove side gutter so the hero image touches the viewport edge */
.auth-wrapper {
  width: 100vw;
  min-height: 100vh;
}

.auth-wrapper.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.auth-wrapper .row {
  margin-left: 0;
  margin-right: 0;
  --bs-gutter-x: 0;
}

/* Settings wheel: keep it clickable above all content */
#styleSelector.menu-styler {
  position: fixed !important;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  z-index: 20000 !important;
  pointer-events: none;
}

#styleSelector .style-toggler {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 20001 !important;
  pointer-events: auto;
}

#styleSelector .style-toggler > a {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

#styleSelector .style-block {
  pointer-events: auto;
  z-index: 20000 !important;
}