@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700&display=swap');


:root {
  --header-bg: #CCECF1;       /* lichtblauw bovenbalk */
  --sidebar-bg: #CCECF1;      /* lichtblauw zijbalk */
  --sidebar-text: #121F44;    /* leesbare donkerblauwe tekst */
  --active-item-bg: #121F44;  /* donkerblauw actief sidebar-item */
  --active-item-text: #FFFFFF;
}

/* ===================================================== */
/* 1. FULL HEADER (masthead + content + toolbar)        */
/* ===================================================== */

/* Masthead wrapper */
.pf-v5-c-page__header,
.pf-v5-c-masthead,
body .pf-v5-c-masthead {
  background-color: var(--header-bg) !important;
  color: var(--sidebar-text) !important;
}

/* Masthead subcontainers */
.pf-v5-c-masthead__content,
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__toggle,
.pf-v5-c-masthead__brand,
.pf-v5-c-masthead__tools,
.pf-v5-c-toolbar,
.pf-v5-c-toolbar__content,
.pf-v5-c-toolbar__group {
  background-color: var(--header-bg) !important;
  color: var(--sidebar-text) !important;
}

/* Toolbar items, logo, links, buttons */
.pf-v5-c-masthead a,
.pf-v5-c-masthead button,
.pf-v5-c-masthead .pf-v5-c-brand,
.pf-v5-c-page__header a,
.pf-v5-c-page__header button {
  color: var(--sidebar-text) !important;
}

/* PatternFly token overrides */
:root {
  --pf-v5-c-masthead__content--BackgroundColor: var(--header-bg) !important;
  --pf-v5-c-toolbar__content--BackgroundColor: var(--header-bg) !important;
  --pf-v5-c-toolbar__group--BackgroundColor: var(--header-bg) !important;
}

/* ===================================================== */
/* 2. LEFT SIDEBAR                                      */
/* ===================================================== */

.pf-v5-c-page__sidebar,
.pf-v5-c-nav {
  background-color: var(--sidebar-bg) !important;
}

/* Sidebar text */
.pf-v5-c-nav__link,
.pf-v5-c-nav__item .pf-v5-c-nav__item-icon {
  color: var(--sidebar-text) !important;
}

/* Sidebar hover */
.pf-v5-c-nav__link:hover {
  background-color: rgba(0,0,0,0.1) !important;
  color: var(--sidebar-text) !important;
}

/* ===================================================== */
/* 3. ACTIVE SIDEBAR ITEM                                */
/* ===================================================== */

:root {
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--active-item-bg) !important;
  --pf-v5-c-nav__link--m-current--Color: var(--active-item-text) !important;
}

/* Active item */
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current {
  background-color: var(--active-item-bg) !important;
  color: var(--active-item-text) !important;
}

/* Icon in active item */
.pf-v5-c-nav__item.pf-m-current .pf-v5-c-nav__item-icon {
  color: var(--active-item-text) !important;
}

/* Hover on active item */
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link:hover {
  background-color: var(--active-item-bg) !important;
  color: var(--active-item-text) !important;
}

/* Active sidebar item: linker accent volledig donkerblauw */
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::before {
    background-color: var(--active-item-bg) !important;
}

/* Soms gebruikt PatternFly border-left voor active item */
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    border-left: 4px solid var(--active-item-bg) !important;
}

/* Verberg "Applications" in de sidebar */
a[href$="/applications"] {
    display: none !important;
}

/* Globaal lettertype */
body,
html,
:root {
    font-family: "Funnel Display", sans-serif !important;

    /* PatternFly font tokens overschrijven */
    --pf-v5-global--FontFamily--sans-serif: "Funnel Display", sans-serif !important;
    --pf-v5-global--FontFamily--heading: "Funnel Display", sans-serif !important;
    --pf-v5-global--FontFamily--text: "Funnel Display", sans-serif !important;
}

/* Extra: losse PatternFly componenten die eigen fonts pushen */
.pf-v5-c-title,
.pf-v5-c-button,
.pf-v5-c-nav__link,
.pf-v5-c-nav__item,
.pf-v5-c-masthead,
.pf-v5-c-toolbar,
.pf-v5-c-page,
.pf-v5-c-form-control,
.pf-v5-c-form__label,
.pf-v5-c-menu__item {
    font-family: "Funnel Display", sans-serif !important;
}