/* =========================
     LIGHT MODE (default)
     ========================= */
  :root {
    /* Neutrals */
    --bg: #ffffff;
    --text: #111827;
    --field-bg: #ffffff;
    --field-text: #111827;

    /* ✅ Primary – Modern Purple */
    --bulma-primary: #6d28d9;
    --bulma-primary-rgb: 109 40 217;
    --bulma-scheme-invert: #ffffff;
    /* ✅ Tekst op primary achtergrond altijd wit */
    --bulma-primary-invert: #ffffff;
    --bulma-primary-hover-solid: #7c3aed;


/* ✅ ADDED — Bulma v1 HSL drivers (LIGHT) */
    --bulma-primary-h: 263deg;
    --bulma-primary-s: 70%;
    --bulma-primary-l: 50%;

    --bulma-link-h: 243deg;
    --bulma-link-s: 75%;
    --bulma-link-l: 59%;

    /* Supporting colors */
    --bulma-link: #4f46e5;
    --bulma-info: #7c3aed;
    --bulma-success: #16a34a;
    --bulma-warning: #d97706;
    --bulma-danger: #dc2626;

  }

  /* =========================
     DARK MODE
     ========================= */
  @media (prefers-color-scheme: dark) {
    :root {
      /* Neutrals */
      --bg: #0b0b0f;
      --text: #f9fafb;
      --field-bg: #111827;
      --field-text: #f9fafb;

      /* ✅ Primary – Modern Purple (dark) */
      --bulma-primary: #8b5cf6;
      --bulma-primary-rgb: 139 92 246;
      --bulma-primary-invert: #ffffff;
      --bulma-primary-hover-solid: #a78bfa;
      --bulma-scheme-invert: #ffffff;


    /* ✅ ADDED — Bulma v1 HSL drivers (DARK) */
    --bulma-primary-h: 258deg;
    --bulma-primary-s: 90%;
    --bulma-primary-l: 66%;

    --bulma-link-h: 234deg;
    --bulma-link-s: 89%;
    --bulma-link-l: 74%;


      /* Supporting colors */
      --bulma-link: #818cf8;
      --bulma-info: #a78bfa;
      --bulma-success: #22c55e;
      --bulma-warning: #f59e0b;
      --bulma-danger: #f87171;
    }
  }

  /* =========================
     GLOBAL APPLICATION
     ========================= */
  html, body {
    background: var(--bg);
    color: var(--text);
  }

  /* Forms */
  input, textarea, select {
    background: var(--field-bg);
    color: var(--field-text);
    -webkit-text-fill-color: var(--field-text);
  }

  /* Icons */
.icon,
.icon i {
  color: currentColor;
}

/* ✅ HIER toevoegen: light mode icon gedrag */
@media (prefers-color-scheme: light) {
  .icon,
  .icon i {
    color: var(--text);
  }

  .icon:hover,
  .icon:hover i {
    color: var(--bulma-primary);
  }

}

  svg {
    fill: currentColor;
  }


  /* ✅ Force purple primary buttons */
  .button.is-primary {
    background-color: var(--bulma-primary);
    border-color: var(--bulma-primary);
    color: #fff;
  }

  .button.is-primary:hover,
  .button.is-primary:focus {
    filter: brightness(1.05);
  }

  .button {
    transition: background-color 0.2s ease, filter 0.2s ease;
  }

  .button.is-primary:hover {
    filter: brightness(1.05);
  }
  /* ✅ Purple borders for form fields */
  .input,
  .textarea,
  .select select {
    border-color: var(--bulma-primary);
  }

  /* ✅ Focus / active state */
  .input:focus,
  .input:active,
  .textarea:focus,
  .textarea:active,
  .select select:focus,
  .select select:active {
    border-color: var(--bulma-primary);
    box-shadow: 0 0 0 0.125em rgb(var(--bulma-primary-rgb) / 0.25);
  }
  /* ✅ Primary buttons: tekst + iconen altijd wit */
  .button.is-primary {
    color: #fff;
  }

  .button.is-primary .icon,
  .button.is-primary .icon i {
    color: currentColor;
  }
  /* ✅ Fix for input-type buttons (Safari/WebKit) */
  input.button.is-primary {
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
  /* =========================================
     BULMA NAVBAR (is-primary) — CLEAN FINAL FIX
     ✅ Home & Meer altijd wit
     ✅ Light + Dark mode
     ✅ Mobile burger correct
     ✅ Bulma-native & simpel
     ========================================= */

  .navbar.is-primary {
    background-color: var(--bulma-primary);
    color: var(--bulma-primary-invert);
  }

  /* Hoofditems (Home, Meer) */
  .navbar.is-primary .navbar-item,
  .navbar.is-primary .navbar-link {
    color: inherit;
  }

  /* Hover hoofditems */
  .navbar.is-primary a.navbar-item:hover,
  .navbar.is-primary .navbar-item.has-dropdown:hover > .navbar-link {
    background-color: var(--bulma-primary-hover-solid);
    color: inherit;
  }

  /* Actief item */
  .navbar.is-primary .navbar-item.is-active,
  .navbar.is-primary .navbar-item.is-active > .navbar-link {
    background-color: rgb(var(--bulma-primary-rgb) / 0.35);
    color: inherit;
  }

  /* Dropdown */
  .navbar.is-primary .navbar-dropdown {
    background-color: var(--bulma-scheme-main);
  }

  .navbar.is-primary .navbar-dropdown .navbar-item {
    color: var(--bulma-text);
  }

  .navbar.is-primary .navbar-dropdown .navbar-item:hover {
    background-color: rgb(var(--bulma-primary-rgb) / 0.18);
    color: var(--bulma-primary-invert);
  }

  /* Iconen */
  .navbar.is-primary .icon,
  .navbar.is-primary .icon i {
    color: currentColor;
  }

  /* Mobile menu */
  @media (max-width: 1023px) {
    .navbar.is-primary .navbar-menu.is-active {
      background-color: var(--bulma-primary);
    }
  }

.navbar.is-primary .navbar-burger span {
  background-color: currentColor;
  width: 18px;
}
/* ✅ Hamburger menu: altijd helder wit */
.navbar.is-primary .navbar-burger {
  opacity: 1;
}

.navbar.is-primary .navbar-burger span {
  background-color: var(--bulma-primary-invert);
  width: 18px;
}


  /* =========================================
     DARK MODE — HARD STOP TURQUOISE GLOW
     (Bulma v1: focus-visible + drop-shadow)
     ========================================= */

@media (prefers-color-scheme: dark) {

  /* ---------- KILL ALL DEFAULT SHADOWS ---------- */
  .input,
  .textarea,
  .select select,
  .navbar-dropdown,
  .dropdown-content {
    box-shadow: none !important;
    filter: none !important;
  }

  /* ---------- INVERT ICON IMAGES ---------- */
  .control.has-icons-left .icon img {
    filter: invert(1);
  }

}


    /* ---------- KILL ALL FOCUS STATES ---------- */
    .input:focus,
    .input:focus-visible,
    .textarea:focus,
    .textarea:focus-visible,
    .select select:focus,
    .select select:focus-visible,
    .navbar-dropdown:focus,
    .navbar-dropdown:focus-visible {
      outline: none !important;
      box-shadow: none !important;
      filter: none !important;
    }

    /* ---------- APPLY INDIGO GLOW (OUR RULES) ---------- */
    .input:focus-visible,
    .textarea:focus-visible,
    .select select:focus-visible {
      border-color: var(--bulma-primary);
      box-shadow: 0 0 0 0.15em rgb(var(--bulma-primary-rgb) / 0.55) !important;
      background-color: var(--field-bg);
    }

    /* ---------- NAVBAR DROPDOWN ---------- */
    .navbar.is-primary .navbar-dropdown {
      background-color: var(--field-bg);
    }

    .navbar.is-primary .navbar-dropdown .navbar-item:hover,
    .navbar.is-primary .navbar-dropdown .navbar-item:focus-visible {
      background-color: rgb(var(--bulma-primary-rgb) / 0.3);
      color: var(--bulma-primary-invert);
    }

    /* ---------- FINAL SAFETY NET ---------- */
    *:focus-visible {
      outline: none !important;
    }
  }
  .striped-shirt i {
  background: repeating-linear-gradient(
    90deg,
    #ffffff 0px,
    #ffffff 2px,
    var(--bulma-primary) 2px,
    var(--bulma-primary) 4px
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================
   STRIPED SHIRT — LIGHT MODE
   ========================= */
@supports (-webkit-text-stroke: 1px black) {
  .striped-shirt i {
    -webkit-text-stroke: 1px var(--text); /* #111827 */
  }
}

/* =========================
   STRIPED SHIRT — DARK MODE
   ========================= */
@media (prefers-color-scheme: dark) {
  .striped-shirt i {
    -webkit-text-stroke: 1px #ffffff;
  }
}

/* Fallback outline (brede support): meerdere shadows als "stroke" */
@supports not (-webkit-text-stroke: 2px #fff) {
  .striped-shirt i {
    text-shadow:
      -1px -1px 0 #fff,
       1px -1px 0 #fff,
      -1px  1px 0 #fff,
       1px  1px 0 #fff; /* stroke-simulatie */ /* [1](https://css-tricks.com/adding-stroke-to-web-text/) */
  }
}
  /* ✅ Alleen op mobiel/tablet én landscape */
.only-mobile-landscape {
  display: none;
}

@media (max-width: 1023px) and (orientation: landscape) {
  .only-mobile-landscape {
    display: block;
  }
}
/* ===== GECENTREERDE TABEL + INHOUD ===== */

.table-center-wrapper {
    display: flex;
    justify-content: center;
}

/* Tabel zelf */
.centered-table {
    margin: 0 auto;
    width: max-content; /* zorgt dat de tabel zo breed is als de inhoud */
}

/* Tekst en inline content in cellen */
.centered-table td,
.centered-table th {
    text-align: center;
    vertical-align: middle;
}

/* Bulma fields & controls centreren */
.centered-table .field,
.centered-table .control {
    display: flex;
    justify-content: center;
}

/* Inputs, selects en buttons exact centreren */
.centered-table input,
.centered-table select,
.centered-table button,
.centered-table .select {
    margin-left: auto;
    margin-right: auto;
}
/* =========================
   RESPONSIVE TABLE COLUMNS — FINAL FIX
   ========================= */

/* Mobiel + tablet */
@media (max-width: 1023px) {
  table th.hide-mobile,
  table td.hide-mobile {
    display: none !important;
  }

}

/* =========================
   HIGHLIGHT USER GROUP / TEAM
   ========================= */

.my-group {
    font-weight: 700;
    font-size: 1.5rem;
}

.my-team {
    font-weight: 700;
    color: var(--bulma-primary);
}