/* Donkerblauwe kleur voor hele header (links + rechts) */
      .main-header .navbar {
        background-color: #003A4D !important; /* jouw donkere blauw */
        border-bottom: 1px solid rgba(0,0,0,0.1);
      }

      /* Logo / titel links */
      .main-header .logo {
        background-color: #003A4D !important;
        color: #ffffff !important;
      }
      .main-header .logo:hover {
        background-color: #002C3A !important;
        color: #ffffff !important;
      }

      /* Rechtergedeelte (icons / dropdowns / action buttons in header) */
      .main-header .navbar .nav > li > a {
        color: #ffffff !important;
      }
      .main-header .navbar .nav > li > a:hover,
      .main-header .navbar .nav > li > a:focus {
        background-color: rgba(255,255,255,0.04) !important;
        color: #ffffff !important;
      }

      /* User menu / dropdown achtergrond (in geval van dropdowns rechts) */
      .main-header .navbar .dropdown-menu {
        background-color: #ffffff;
        color: #333333;
      }

      /* Sidebar-toggle (hamburger) kleur */
      .main-header .sidebar-toggle {
        color: #ffffff !important;
      }

      /* Als je actionButtons in de header plaatst: maak ze transparant zodat ze passen bij de header */
      .main-header .navbar .btn {
        background: transparent !important;
        border: 1px solid rgba(255,255,255,0.3) !important; /* lichte witte rand */
          border-radius: 4px !important;
        color: #ffffff !important;
        box-shadow: none !important;
        padding: 6px 10px !important;
      }
      .main-header .navbar .btn:hover {
        background: rgba(255,255,255,0.06) !important;
        color: #ffffff !important;
      }

      /* Als er icons binnen buttons zitten */
      .main-header .navbar .btn .fa {
        color: #ffffff !important;
      }

      /* Zorg dat de titel (text) goed uitgelijnd en zichtbaar is */
      .main-header .logo .logo-lg {
        color: #ffffff !important;
      }

      /* Ronde hoeken voor de hele box */
      .box {
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #dcdcdc;
      }


      /* Kleur en tekstkleur van de box headers */
      .box .box-header {
        background-color: #0074A7;
        color: white;
         display: flex;
       align-items: center;      /* verticaal centreren */
       justify-content: flex-start; /* links uitlijnen */
       padding-left: 12px;       /* zorg voor ruimte aan links */
        border-bottom: 1px solid rgba(0,0,0,0.1);
        border-radius: 10px 10px 0 0;
      }
      .box .box-title { color: white; }

      .box .box-header .box-title {
       margin: 0;                /* voorkom extra margins */
          font-weight: 600;         /* iets dikker als je wil */
        }

      /* Laat alle buttons en downloadButtons tekst wrappen */
      .btn { white-space: normal; }

      /* Maak een custom kleur 'custom-blue' voor valueBoxes */
      .small-box.bg-blue {
        background-color: #66ACCA !important; /* gewenste achtergrondkleur */
        color: #ffffff !important;            /* tekstkleur */
      }

      /* Custom download knop */
  .my-download {
    background-color: #E30075 !important;     /* gewenste achtergrondkleur */
    color: #ffffff !important;                /* tekstkleur */
    border: 1px solid #e65a00 !important;     /* optionele rand */
    border-radius: 6px !important;
    padding: 6px 12px !important;
  }



  /* Reset binnen deze container zodat globale rules hier geen effect hebben */
.isolate-reset {
  all: revert;           /* probeer eerst revert */
  /* of: all: unset; */
  /* of: all: initial; */
}

/* Fine-tuning: zet opnieuw belangrijke Bootstrap switch-stijlen */
.isolate-reset .form-check {
  display: inline-block;
}
.isolate-reset .form-check-input {
  transform: scale(1);       /* herstel grootte als die door globals aangepast is */
  margin-top: 0.125rem;      /* herstel verticale uitlijning */
}
.isolate-reset .form-check-label {
  margin-left: .5rem;
}



/* Zorg dat isolate-reset effectief is en herstel bootstrap switch-stijlen */
.isolate-reset {
  all: revert;
  /* fallback voor oudere browsers: zet basiswaarden terug */
  font: revert;
  color: revert;
}

/* Basis layout van bootstrap switch */
.isolate-reset .form-check {
  display: block !important;
  margin-bottom: 0.5rem !important;
}
.isolate-reset .form-check.form-switch {
  padding-left: 0 !important;
}

/* Herstel grootte en uitlijning van het schuifje */
.isolate-reset .form-check-input {
  width: 2.5rem !important;
  height: 1.25rem !important;
  margin-top: 0.125rem !important;
  transform: none !important;
  box-shadow: none !important;
  appearance: none !important;
  cursor: pointer !important;
}

/* Zorg dat het "knopje" binnen de input goed geplaatst is (voor BS5 look) */
.isolate-reset .form-check-input:before,
.isolate-reset .form-check-input:after {
  /* geen extra pseudo-element rules uit globals aannemen */
  content: none !important;
}

/* Label spacing */
.isolate-reset .form-check-label {
  margin-left: 0.6rem !important;
  font-weight: 500 !important;
}

/* Extra: target switches specifiek in modals (fallback) */
.modal .form-check.form-switch .form-check-input {
  width: 2.5rem !important;
  height: 1.25rem !important;
  margin-top: 0.125rem !important;
  transform: none !important;
}
.modal .form-check.form-switch .form-check-label {
  margin-left: 0.6rem !important;
}

/* SPECIFIEKE STIJLEN VOOR DE HEADER-SWITCH */
li.header-switch {
  float: right !important;
  margin-right: 10px !important;
  padding-top: 6px !important;      /* lijn uit met actionButtons */
  height: 42px !important;          /* pas aan aan de headerhoogte */
  display: flex !important;
  align-items: center !important;
}

/* Maak de prettySwitch container inline-flex en center de inhoud */
li.header-switch .pretty {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;              /* ruimte tussen switch en label */
  transform: scale(1.12) !important;/* iets groter */
  transform-origin: left center !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Label en tekst wit en iets groter */
li.header-switch .pretty .state,
li.header-switch .pretty label {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Zorg dat het switch-knopje zelf niet door globale rules gekrompen wordt */
li.header-switch .pretty .switch {
  width: auto !important;
  height: auto !important;
}

/* Forceer witte kleur voor het ronde schuifje icon (indien fa gebruikt) */
li.header-switch .pretty .state .switch label,
li.header-switch .pretty .state .switch .icon {
  color: #ffffff !important;
}

/* Als prettySwitch intern input gebruikt: maak verticale uitlijning netjes */
li.header-switch .pretty input[type="checkbox"],
li.header-switch .pretty .form-check-input {
  vertical-align: middle !important;
  margin: 0 !important;
  transform: scale(1.05) !important;
}

/* Maak header action buttons consistent wit (laat staan indien al aanwezig) */
.main-header .navbar .nav > li > a,
.main-header .navbar .nav > li > .action-button,
.main-header .navbar .nav > li .btn {
  color: #ffffff !important;
}

/* Kleine fallback: als jouw globale .isolate-reset nog actief is, maak de header-switch immune */
.header-switch *,
.header-switch *:before,
.header-switch *:after {
  all: unset;
  /* Herstel alleen de meest noodzakelijke eigenschappen zodat prettySwitch werkt */
  display: revert;
  box-sizing: border-box;
  color: inherit;
}