/* VGR Food · Beheer — admin-specifieke aanvullingen op ../portal.css.
   Hergebruikt de liquid-glass-tokens/-classes uit portal.css (--glass-*, .panel,
   .brandmark, .forgot-link, .portal-topbar, de mask-exclude-rimtechniek) — bouwt
   GEEN tweede glas-implementatie. Alleen wat hier echt nieuw is: de "geen
   toegang"-centrering, de topbar-invulling en de tabbladen. */

/* "Geen toegang": zelfde volledige-hoogte centrering als #login/#wijzigScherm in
   portal.css, maar op een nieuw element-id (dat bestand blijft ongewijzigd). */
#geenToegang {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

/* ---------- topbar ---------- */
/* .portal-topbar (padding/border) komt uit portal.css; die is op het portaal bewust
   volledig transparant (drijft boven de sfeer-achtergrond). Op de admin-pagina met z'n
   dichte lijsten/tabbladen oogt dat te ijl — daarom hier een eigen, vastere glas-balk:
   semi-opaque navy + blur, zodat de header een duidelijk afgebakende balk is. */
.admin-topbar {
  position: relative;
  z-index: 2;
  background: rgba(27, 35, 56, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.admin-topbar-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.admin-topbar-titel [data-lucide] { width: 17px; height: 17px; }
.admin-topbar-acties { display: flex; align-items: center; gap: 8px; }
.admin-topbar-acties .forgot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none; /* .forgot-link is elders alleen een <button>; hier ook als <a> gebruikt */
}

/* ---------- hoofdinhoud ---------- */
.admin-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* ---------- tabbalk: glazige capsule, actieve tab = Apple-tab-bar-highlight ---------- */
.admin-tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  border: 1px solid transparent;
  border-radius: 999px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
/* Zelfde specular-rim-truc als .panel/.tegel in portal.css (padding=ringdikte +
   mask-composite:exclude); hier los toegevoegd omdat .admin-tabs niet in die
   gedeelde selector-lijst zit en portal.css ongewijzigd blijft. */
.admin-tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--rim-bright), var(--rim-dim) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab:focus-visible { outline: 2px solid var(--accent-blauw); outline-offset: 2px; }
.admin-tab [data-lucide] { width: 16px; height: 16px; }
.admin-tab.actief {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 6px 16px -8px rgba(0, 0, 0, 0.45);
}

/* ---------- tabpaneel: zelfde glas-kaart als .tegels-leeg, bredere vorm voor tabelinhoud ---------- */
.admin-panel {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  border: 1px solid transparent;
  border-radius: 26px;
  padding: 2.75rem 2.25rem;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.admin-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--rim-bright), var(--rim-dim) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.admin-placeholder {
  margin: 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
}

@media (max-width: 640px) {
  .admin-topbar-titel span { display: none; }
  .admin-tabs { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   Tegelbeheer (taak 3.2). Hergebruikt .panel/.submit-btn/.admin-tabs/.field uit
   portal.css resp. hierboven — hier alleen wat écht nieuw is: de rijenlijst, de
   toggle-switch, de modal-overlay-omkadering, de icoon-kiezer en de toast.
   ========================================================================== */

.tegels-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.admin-panel-titel { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.admin-panel-uitleg { margin: -0.8rem 0 1.4rem; font-size: 13px; color: var(--ink-faint); }
/* .submit-btn is standaard width:100%/margin-top; hier gebruikt als inline knop. */
.submit-btn.btn-klein { width: auto; margin-top: 0; padding: 0.6rem 1.1rem; font-size: 13.5px; }
.submit-btn.btn-danger {
  background: linear-gradient(135deg, rgba(255, 97, 97, 0.4), rgba(255, 97, 97, 0.3));
  box-shadow: 0 10px 24px -10px rgba(255, 97, 97, 0.45), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.submit-btn.btn-danger:hover {
  background: linear-gradient(135deg, rgba(255, 97, 97, 0.55), rgba(255, 97, 97, 0.42));
  box-shadow: 0 16px 34px -10px rgba(255, 97, 97, 0.55), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

/* ---------- rijenlijst ---------- */
.tegel-lijst { display: flex; flex-direction: column; gap: 10px; }
.tegel-rij {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  transition: opacity 0.2s ease;
}
.tegel-rij--inactief { opacity: 0.5; }
.tegel-rij-preview {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-dim);
  overflow: hidden;
}
.tegel-rij-preview [data-lucide] { width: 22px; height: 22px; }
.tegel-rij-preview img { width: 100%; height: 100%; object-fit: contain; }
.tegel-rij-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tegel-rij-naam {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tegel-rij-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tegel-rij-doel {
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
}
.badge--app { background: rgba(79, 134, 255, 0.18); color: #bcd0ff; }
.badge--url { background: rgba(255, 122, 89, 0.18); color: #ffc4ae; }

.tegel-rij-acties { flex: none; display: flex; align-items: center; gap: 4px; }
.tegel-rij-acties button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-dim);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.tegel-rij-acties button [data-lucide] { width: 16px; height: 16px; }
.tegel-rij-acties button:hover { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.tegel-rij-acties button:disabled { opacity: 0.3; cursor: default; }
.tegel-rij-acties button:disabled:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink-dim); }
.tegel-rij-acties button.danger:hover { background: rgba(255, 97, 97, 0.16); color: var(--st-rood); }

/* ---------- toggle-switch (actief/inactief) ---------- */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.switch-track {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.16s ease;
}
.switch-duim {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.16s var(--ease-out-soft);
}
.switch input:checked + .switch-track { background: rgba(79, 134, 255, 0.55); }
.switch input:checked + .switch-track .switch-duim { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent-blauw); outline-offset: 2px; }
.switch--disabled { cursor: not-allowed; }
.switch--disabled input { cursor: not-allowed; }
.switch--disabled .switch-track { opacity: 0.5; }

/* ---------- toggle-groep: klein tekstlabel + switch, gebruikt voor de
   actief- en beheerder-toggle naast elkaar (gebruikerslijst) -- zonder label
   zijn twee losse switches per rij niet van elkaar te onderscheiden. ---------- */
.toggle-groep { display: flex; align-items: center; gap: 6px; }
.toggle-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

/* ---------- modal-overlay (form + verwijder-bevestiging) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 14, 24, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* .modal-paneel hergebruikt .panel (achtergrond/blur/rim/entree-animatie uit
   portal.css) volledig, hier alleen de afmeting/scroll aangepast. */
.modal-paneel { max-width: 30rem; max-height: 85vh; overflow-y: auto; }
.modal-paneel--klein { max-width: 24rem; }
.modal-acties { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1.4rem; }

/* ---------- Type-select (verzorgde look i.p.v. de kale browser-<select>) ---------- */
/* Zelfde glazen invulling als .field input (achtergrond/rand/hoogte/afronding uit
   portal.css) — appearance:none + een eigen Lucide-chevron rechts i.p.v. de
   platformeigen dropdown-pijl. */
.select-wrap { position: relative; }
.select-wrap select {
  width: 100%;
  padding: 0.72rem 2.4rem 0.72rem 0.85rem;
  background: rgba(10, 16, 32, 0.42);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.select-wrap select:focus {
  outline: none;
  border-color: var(--accent-blauw);
  background: rgba(10, 16, 32, 0.6);
  box-shadow: 0 0 0 4px rgba(79, 134, 255, 0.22);
}
.select-wrap select option { background: var(--navy-1); color: var(--ink); }
.select-caret {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  pointer-events: none;
}

/* ---------- URL-veld: zacht in-/uitklappen bij "Externe URL" i.p.v. de harde
   .hidden-sprong (display:none) die de rest van het formulier gebruikt. Het
   grid-template-rows-0fr->1fr-patroon animeert een "auto hoogte" zonder JS. ---------- */
.tegel-url-veld {
  display: grid;
  grid-template-rows: 0fr;
  margin-bottom: 0;
  opacity: 0;
  transition: grid-template-rows 0.22s var(--ease-out-soft), opacity 0.18s ease,
    margin-bottom 0.22s var(--ease-out-soft);
}
.tegel-url-veld.tegel-url-veld--open {
  grid-template-rows: 1fr;
  margin-bottom: 1.05rem; /* matcht .field se standaard margin-bottom */
  opacity: 1;
}
.tegel-url-veld-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .tegel-url-veld { transition: none; }
}

/* ---------- visual-kiezer: icoon-tabs hergebruiken .admin-tabs/.admin-tab ---------- */
.visual-tabs { margin: 8px 0 12px; }
.icoon-preview {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin: 4px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
.icoon-preview [data-lucide] { width: 32px; height: 32px; }
#icoonZoek { margin-bottom: 10px; }
.icoon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 2px;
}
.icoon-optie {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-dim);
  transition: background 0.14s ease, color 0.14s ease;
}
.icoon-optie:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); }
.icoon-optie.actief { background: rgba(79, 134, 255, 0.35); color: #fff; }
.icoon-leeg { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--ink-faint); font-size: 13px; }

.afbeelding-preview {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 10px;
}
#afbeeldingInput { color: var(--ink-dim); font-size: 13px; }

.form-fout {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: 9px;
  background: rgba(255, 97, 97, 0.12);
  border: 1px solid rgba(255, 97, 97, 0.32);
  color: #ffb4b4;
  font-size: 13px;
}

/* ---------- subtiele toast (succes/fout-feedback na een mutatie) ---------- */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast--fout { color: #ffb4b4; }
.toast--fout [data-lucide] { color: #ff8a8a; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ==========================================================================
   Gebruikersbeheer (taak 3.3). Hergebruikt .tegel-rij-acties/.switch/.badge/
   .modal-*/.field/.ww-toggle-classes hierboven — hier alleen wat écht nieuw
   is: de rij-layout (naam+e-mail+groepchips i.p.v. één icoon+naam), chips,
   twee extra badge-kleuren, het generieke ww-veld en de groepen-checklist.
   ========================================================================== */

.gebruiker-lijst { display: flex; flex-direction: column; gap: 10px; }
.gebruiker-rij {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  transition: opacity 0.2s ease;
}
.gebruiker-rij--inactief { opacity: 0.55; }
.gebruiker-rij-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gebruiker-rij-naamregel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.gebruiker-rij-naam { font-weight: 600; font-size: 14px; color: var(--ink); }
.gebruiker-rij-email {
  font-size: 12.5px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gebruiker-rij-groepen { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 999px;
}
.chip--leeg { color: var(--ink-faint); background: transparent; padding-left: 0; }

.badge--admin { background: rgba(255, 200, 87, 0.18); color: #ffd980; }
/* Hergebruikt door de tegel-rechtenmatrix (groepenbeheer, taak 3.4) om een
   inactieve tegel te markeren -- los van de gebruikersstatuspil hieronder. */
.badge--inactief { background: rgba(255, 97, 97, 0.16); color: #ffb4b4; }

/* ---------- statuspil (admin-ux-verbeterpakket): kleur draagt de betekenis,
   icoon versterkt. Vervangt de losse "Moet ww wijzigen"/"Inactief"-badges
   die voorheen op de gebruikersrij stonden. ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
}
.status-pill [data-lucide] { width: 11px; height: 11px; }
.status-pill--gedeactiveerd { background: rgba(255, 97, 97, 0.16); color: #ffb4b4; }
.status-pill--nietingelogd { background: rgba(255, 200, 87, 0.16); color: #ffd980; }
.status-pill--tijdelijk { background: rgba(255, 200, 87, 0.16); color: #ffd980; }
.status-pill--actief { background: rgba(93, 222, 140, 0.16); color: #9be8b2; }

.gebruiker-rij-acties { flex: none; display: flex; align-items: center; gap: 4px; }
.gebruiker-rij-acties button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-dim);
  transition: background 0.15s ease, color 0.15s ease;
}
.gebruiker-rij-acties button [data-lucide] { width: 16px; height: 16px; }
.gebruiker-rij-acties button:hover { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.gebruiker-rij-acties button.danger:hover { background: rgba(255, 97, 97, 0.16); color: var(--st-rood); }
.zelf-label {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  padding: 0 6px;
}

/* ---------- wachtwoord-veld (generator/kopieer), gedeeld door het
   nieuwe-gebruiker-formulier en de temp-ww-dialoog. Standaard leesbaar
   (type=text) -- geen toon/verberg-toggle meer, dus het veld mag de volle
   .field-breedte innemen i.p.v. ruimte te reserveren voor een knop erin. */
.ww-veld { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ww-veld input {
  flex: 1 1 12rem;
  min-width: 10rem;
  padding: 0.72rem 0.85rem;
  background: rgba(10, 16, 32, 0.42);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.ww-veld .forgot-link { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ww-waarschuwing {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0.6rem 0 0;
  font-size: 12px;
  color: #ffc98a;
}
.ww-waarschuwing [data-lucide] { flex: none; width: 14px; height: 14px; }

/* ---------- groepen-checklist (gebruiker bewerken) ---------- */
.groep-checklist { display: flex; flex-direction: column; gap: 2px; max-height: 11rem; overflow-y: auto; }
.groep-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.groep-checklist-item input { width: 16px; height: 16px; accent-color: var(--accent-blauw); cursor: pointer; }

/* ==========================================================================
   Groepenbeheer + rechtenmatrix (taak 3.4). Hergebruikt .tegel-rij-acties/
   .chip/.chip--leeg/.badge--inactief/.modal-*/.field hierboven — hier alleen
   wat écht nieuw is: de groepsrij (uitklapbaar), het detailpaneel en de
   Geen/Lezen/Schrijven-segmented-control.
   ========================================================================== */

.groep-lijst { display: flex; flex-direction: column; gap: 10px; }
.groep-rij {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  padding: 4px;
}
.groep-rij-hoofd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
}
.groep-rij-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.groep-rij-naam {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.groep-rij-meta { font-size: 12px; color: var(--ink-faint); }

/* ---------- detailpaneel (leden + rechtenmatrix), ingeklapt tussen de rijen ---------- */
.groep-detail {
  margin: 0 6px 6px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.groep-detail-blok { display: flex; flex-direction: column; gap: 10px; }
.groep-detail-titel {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.chip-lijst { display: flex; flex-wrap: wrap; gap: 6px; }

.rechten-matrix { display: flex; flex-direction: column; gap: 8px; }
.rechten-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rechten-tegel-naam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink);
}

/* ---------- segmented control: Geen / Lezen / Schrijven ---------- */
.segmented {
  flex: none;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}
.segmented-optie {
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.segmented-optie:hover { color: var(--ink); }
.segmented-optie:disabled { opacity: 0.5; cursor: default; }
.segmented-optie.actief { color: var(--ink); background: rgba(79, 134, 255, 0.35); }
.segmented-optie:focus-visible { outline: 2px solid var(--accent-blauw); outline-offset: 2px; }