/* =========================================================
   VUB KLEURENPALET & GLOBALE VARIABELEN
   ========================================================= */
:root {
  --vub-blue: #003399;
  --vub-orange: #FF6600;
  --vub-black: #000000;
  --vub-white: #FFFFFF;
}

html {
  color-scheme: light dark;
}

/* =========================================================
   1. STANDAARD (LIGHT MODE) & GLOBALE STYLING
   ========================================================= */

/* Cassiopeia Header overschrijven naar VUB Wit */
.container-header {
  background-color: var(--vub-white) !important;
  background-image: none !important; 
  border-bottom: 1px solid #eeeeee !important; 
}

/* --- VUB LOGO INLADEN & FORMAAT (Standaard / Light Mode) --- */
.container-header .navbar-brand img {
  content: url("/images/VUB_LOGO_GF_500px.png") !important; 
  max-width: 350px !important;
  height: auto !important;
}

/* Verschuif het logo 10px naar links, MAAR ALLEEN OP DESKTOP */
@media (min-width: 992px) {
  .container-header .navbar-brand img {
    margin-left: -10px !important;
  }
}

/* --- CARD HEADERS (Titels van zijmenu's zoals Main Menu) --- */
.card-header {
  color: var(--vub-black) !important; 
  background-color: transparent !important; 
  border-bottom: 2px solid var(--vub-blue) !important; 
}

/* --- VERBERG LOGIN OPTIES (Wachtwoord vergeten / Registreer) --- */
/* Zowel de module (.mod-login) als het hoofdcomponent (.com-users-login) verbergen */
.mod-login__options,
.com-users-login__options {
  display: none !important;
}

/* --- STANDAARD LINKS (A HREF) --- */
/* Pakt alle links, behalve als het knoppen zijn (.btn) */
a:not(.btn),
a:not(.btn):visited {
  color: var(--vub-blue) !important; 
  text-decoration: none !important; 
  transition: color 0.2s ease-in-out !important;
}

a:not(.btn):hover,
a:not(.btn):focus,
a:not(.btn):active {
  color: var(--vub-orange) !important; 
  text-decoration: underline !important; 
}

/* --- KNOPPEN & INPUT ADDONS --- */
button.btn-primary,
.btn.btn-primary,
.btn-outline-primary,
.btn.btn-secondary,
.mod-login-logout__button button,
.nui.button.primary,
.nui.button.blue,
.nui.button.colored.slate,
.input-group-text {
  background-color: var(--vub-blue) !important;
  border: 1px solid var(--vub-orange) !important;
  color: var(--vub-white) !important;
  transition: all 0.3s ease-in-out !important; 
  text-decoration: none !important; 
  z-index: 9 !important; /* Haalt de knop/icoon naar voren zodat de overlappende linker rand zichtbaar wordt */
}

/* Knoppen: Hover (muis erover) & Active (klikken) - Exclusief de non-clickable addons */
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active,
.btn.btn-primary:hover,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.mod-login-logout__button button:hover,
.nui.button.primary:hover,
.nui.button.primary:focus,
.nui.button.primary:active,
.nui.button.blue:hover,
.nui.button.blue:focus,
.nui.button.blue:active,
.nui.button.colored.slate:hover,
.nui.button.colored.slate:focus,
.nui.button.colored.slate:active {
  background-color: var(--vub-orange) !important;
  border-color: var(--vub-blue) !important; 
  color: var(--vub-blue) !important;
}

/* --- FOOTER (Standaard / Light Mode) --- */
.container-footer {
  background-color: var(--vub-blue) !important;
  color: var(--vub-white) !important;
  padding: 20px 0 !important; /* Geeft de footer iets meer ademruimte */
}

/* Forceer de links in de blauwe footer naar wit zodat ze leesbaar blijven */
.container-footer a {
  color: var(--vub-white) !important;
  text-decoration: underline !important;
}

.container-footer a:hover,
.container-footer a:focus {
  color: var(--vub-orange) !important;
}


/* =========================================================
   2. DARK MODE STYLING
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --cassiopeia-color-primary: var(--vub-blue); 
    --body-bg: #121212;
    --body-text: #e0e0e0;
  }
  
  /* Achtergrond van de hele site */
  body {
    background-color: var(--body-bg) !important;
    color: var(--body-text) !important;
  }

  /* Header puur zwart maken voor de donkere modus */
  .container-header {
    background-color: var(--vub-black) !important; 
    border-bottom: 1px solid #333 !important;
  }

  /* --- VUB LOGO WISSELEN VOOR DARK MODE --- */
  .container-header .navbar-brand img {
    content: url("../images/VUB_GF_MONO_NEGATIEF_TRANSPARANT_500px.png") !important; 
  }

  /* --- ALERTS & LOSSE MELDINGEN IN DARK MODE --- */
  .alert,
  .alert-info,
  .alert-warning,
  .alert-danger,
  .alert-success,
  joomla-alert,
  #com-users-methods-reset-message {
    background-color: #1a1a1a !important; 
    border: 1px solid #444 !important; 
    color: var(--vub-white) !important; 
    padding: 15px !important; 
    border-radius: 4px !important;
  }
  
  /* Forceer ELKE tekst binnenin een melding naar wit */
  .alert *,
  .alert-message,
  .alert-heading,
  joomla-alert *,
  #com-users-methods-reset-message strong {
    color: var(--vub-white) !important; 
  }

  /* --- GEDEMPTE TEKST --- */
  .text-muted,
  .com-users-methods-list-method-info {
    color: #bbbbbb !important; 
  }

  /* --- CARD HEADERS IN DARK MODE --- */
  .card-header {
    color: var(--vub-white) !important; 
    border-bottom: 2px solid var(--vub-blue) !important; 
  }

  /* --- ALGEMENE KAARTEN (Zorgt dat tekst binnen kaarten ALTIJD licht is) --- */
  .card, .well, .card-body {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important; 
  }

  /* --- TYPOGRAFIE & TEKSTBLOKKEN (Speciaal voor foutpagina's e.d.) --- */
  h1, h2, h3, h4, h5, h6, 
  .page-header, 
  main p, main ul, main li {
    color: #e0e0e0 !important;
  }
  strong, h1.page-header {
    color: var(--vub-white) !important;
  }

  /* Citaten (Blockquotes) opmaken voor foutmeldingen */
  blockquote {
    background-color: #1a1a1a !important;
    color: #bbbbbb !important;
    border-left: 4px solid var(--vub-blue) !important;
    padding: 10px 15px !important;
    border-radius: 0 4px 4px 0 !important;
  }

  /* --- LINKS IN DARK MODE --- */
  a:not(.btn),
  a:not(.btn):visited {
    color: #4172cc !important; 
  }
  a:not(.btn):hover,
  a:not(.btn):focus,
  a:not(.btn):active {
    color: var(--vub-orange) !important; 
  }

  /* --- INVOERVELDEN & LABELS (Joomla Standaard & ChronoForms) --- */
  .form-control,
  .nui.form input, 
  .nui.form textarea {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
  }

  /* PLACEHOLDERS (Tekst in lege invulvelden) leesbaar maken */
  .form-control::placeholder,
  .nui.form input::placeholder,
  .nui.form textarea::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: #aaaaaa !important;
    opacity: 1 !important; /* Voorkomt dat Bootstrap hem half-transparant maakt */
  }
  
  /* Labels voor normale velden én vinkjes/radiobuttons */
  .nui.form .field > label,
  .form-label,
  .form-check-label {
    color: #ffffff !important;
  }

  /* Zorg dat de rand van de checkbox zelf ook iets zichtbaarder is */
  .form-check-input {
    background-color: #1a1a1a !important;
    border-color: #555 !important;
  }

  /* --- TABELLEN (Standaard & Gestreepte tabellen) --- */
  /* Overschrijf de Bootstrap 5 css-variabelen */
  .table,
  .table-striped {
    --bs-table-bg: transparent !important;
    --bs-table-color: #e0e0e0 !important;
    --bs-table-striped-color: #e0e0e0 !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05) !important;
    color: #e0e0e0 !important;
  }
  /* Forceer de kleur direct op álle cellen in de tabel */
  .table th,
  .table td,
  .table-striped tbody tr td,
  .table-striped tbody tr th {
    color: #e0e0e0 !important;
    border-color: #444 !important;
  }
  /* Bootstrap 5 gebruikt box-shadow voor de striping op de td's zelf, dit overschrijft dat specifiek */
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.05) !important;
    color: #e0e0e0 !important;
  }

  /* --- Dropdowns (NUI Select) --- */
  .nui.select {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
  }
  .nui.select .menu {
    background-color: #1a1a1a !important;
    border: 1px solid #555 !important;
  }
  .nui.select .menu > .item {
    color: #ffffff !important;
    background-color: #1a1a1a !important;
  }
  .nui.select .menu > .item:hover {
    background-color: #444 !important;
    color: #ffffff !important;
  }
  .nui.select > .text {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #ffffff !important;
  }

  /* --- File Upload (Bewijsstuk) --- */
  .nui.file {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px dashed #555 !important;
  }
  .nui.file .text, 
  .nui.file i.icon {
    color: #ffffff !important;
  }

  /* --- Formulier Validatie (Foutmeldingen) --- */
  .nui.form .field.error input,
  .nui.form .field.error textarea,
  .nui.form .field.error .nui.select,
  .nui.form .field.error .nui.file,
  .nui.form input.error,
  .nui.form textarea.error,
  .nui.form .nui.select.error,
  .nui.form .nui.file.error {
    border-color: #ff5252 !important; 
    background-color: #2a0808 !important; 
  }
  .nui.form .field.error .prompt,
  .nui.form .field .prompt.error,
  .nui.form .nui.prompt.error,
  .nui.label.red {
    color: #ff5252 !important;
    background: transparent !important;
  }

  /* --- Debug Data & Code Blokken --- */
  pre, code, .nui.segment.debug, #system-debug {
      background-color: #1a1a1a !important;
      color: #82b1ff !important; 
      border: 1px solid #444444 !important;
      border-radius: 4px !important;
      padding: 10px !important;
  }
  .nui.segment > .nui.table,
  .nui.segment > .nui.table th,
  .nui.segment > .nui.table td {
      background-color: #1a1a1a !important;
      color: #e0e0e0 !important;
      border: 1px solid #444444 !important;
  }

  /* --- reCAPTCHA Dark Mode --- */
  .g-recaptcha, .grecaptcha-badge {
      filter: invert(1) hue-rotate(180deg) brightness(0.95) !important;
  }
  
  /* --- FOOTER IN DARK MODE --- */
  .container-footer {
    background-color: var(--vub-black) !important;
    border-top: 1px solid #333 !important; /* Subtiel lijntje om hem los te trekken van de pagina */
  }

  /* Footer links in dark mode */
  .container-footer a {
    color: var(--vub-orange) !important;
    text-decoration: none !important;
  }

  .container-footer a:hover,
  .container-footer a:focus {
    color: var(--vub-white) !important;
    text-decoration: underline !important;
  }
}