/* ==========================================================================
   ADTS huisstijl
   Kleuren en vormtaal overgenomen uit docs/naslag/adts-offerte-grafisch-v2.html.
   Zie docs/besluiten/huisstijl.md voor de achtergrond bij deze keuzes.
   ========================================================================== */

/* --- Lettertype ------------------------------------------------------------
   New Hero (Newlyn) staat als eerste in de stack: heeft iemand het lokaal
   geïnstalleerd, dan rendert het meteen. Voor bezoekers moet het als webfont
   geleverd worden — zie docs/besluiten/huisstijl.md, sectie "Lettertype".

   Zelf hosten (aanbevolen, CSP hoeft dan niet open):
   zet de woff2-bestanden in public/fonts/ en haal onderstaand blok uit commentaar.

@font-face {
  font-family: 'New Hero';
  src: url('/fonts/new-hero-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Hero';
  src: url('/fonts/new-hero-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
--------------------------------------------------------------------------- */

:root {
  /* Merkkleuren — exact zoals in de offerte */
  --ink: #35383c;
  --ink-soft: #5c6166;
  --blue: #025980;
  --cyan: #049ed8;
  --cyan-ink: #0277a8;
  --green: #70bd47;
  --green-ink: #5aa537;

  /* Vlakken en lijnen */
  --paper: #ffffff;
  --hero: #ecf3f7;
  --hero-2: #dce8ef;
  --line: #d7e0e5;
  --cyan-soft: #e1f2fb;
  --green-soft: #eef8e6;

  --danger: #b3261e;
  --danger-soft: #fdecea;

  /* Het signatuurverloop uit de offerte: houtskool naar diepblauw */
  --gradient-hero: linear-gradient(
    150deg,
    #35383c 0%,
    #243f4f 45%,
    #024f71 78%,
    #025980 100%
  );

  --font-body: 'New Hero', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'IBM Plex Mono', Menlo, monospace;

  /* New Hero Light voor lopende tekst, Medium voor nadruk. Nooit bold —
     700+ hoort niet bij deze huisstijl. */
  --weight-light: 300;
  --weight-medium: 500;

  --radius: 6px;
  --radius-lg: 10px;
  /* Breed genoeg voor het langste menu-item in zijn **actieve** vorm. Dat is de maat die
     telt: actief staat de tekst in medium in plaats van light, en dan is
     "Infrastructure as a Service" net te breed voor 232px — hij brak op twee regels zodra
     je erop klikte, waardoor het menu verschoof. Gemeten 205px voor dat item plus 29px
     naast het item; de rest is marge, want de dienstnamen komen uit Salesforce en de
     huisstijlletter (New Hero) meet anders dan de systeemletter.

     Past een naam ooit tóch niet, dan breekt hij over twee regels in plaats van afgekapt
     te worden — een half menu-item is erger dan een dubbele regel. */
  --sidebar-width: 252px;

  /* Eén verticale lijn door het hele scherm: het hoofdmenu, het zoekveld en de inhoud
     van de panelen beginnen allemaal op deze x-positie, gemeten vanaf de contentkolom.
     Het is de marge van .view plus de binnenmarge van een .panel. */
  --content-inset: calc(1.75rem + 1.35rem);

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* Auteur-CSS wint van de UA-stylesheet, dus een regel als `.menu-panel{display:flex}`
   zet het hidden-attribuut buitenspel en het paneel blijft zichtbaar. Deze regel
   maakt hidden weer bindend — de frontend gebruikt het attribuut om te tonen en
   verbergen. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.55;
  color: var(--ink);
  background: var(--hero);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: var(--weight-medium);
  letter-spacing: -0.3px;
  color: var(--blue);
}

h1 {
  font-size: 1.15rem;
}
h2 {
  font-size: 1.15rem;
}
h3 {
  font-size: 1.05rem;
}
h4 {
  margin: 1.35rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--ink);
}

a {
  color: var(--cyan-ink);
}

.muted {
  color: var(--ink-soft);
}

.error {
  font-size: 0.9rem;
  color: var(--danger);
}

.success {
  font-size: 0.9rem;
  color: var(--green-ink);
}

.banner {
  margin: 0;
  padding: 0.75rem 1.75rem;
  background: var(--danger-soft);
  border-bottom: 1px solid #f5c6c2;
}

/* Uitleg binnen een paneel die geen fout is: bijvoorbeeld waarom het portaal om een
   nieuw wachtwoord vraagt na een reset door ADTS. */
.notice-inline {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  color: var(--cyan-ink);
  background: var(--cyan-soft);
  border: 1px solid var(--cyan);
  border-radius: var(--radius);
}

.hint {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  /* Kleine tekst op Light wordt te ijl; hier één stap zwaarder. */
  font-weight: 400;
  color: var(--ink-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Logo ------------------------------------------------------------------
   Twee varianten in public/img/, herschaald uit docs/naslag/:
     adts-logo-wit.png  — voor donkere ondergronden (zijbalk, login)
     adts-logo-ink.png  — #35383C, voor lichte ondergronden
   Beide 480x145 met transparante achtergrond. */

.logo {
  display: block;
  width: 100%;
  height: auto;
}

.brand .logo {
  max-width: 108px;
}

.wm-sub {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8aa6b6;
}

/* Label boven een sectiekop: streepje, hoofdletters, wijde letterafstand. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.45rem;
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--cyan-ink);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--cyan);
}

/* --- Formulierelementen --- */

label {
  display: block;
  margin: 0.85rem 0 0.3rem;
  font-size: 0.82rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.2px;
  color: var(--ink);
}

input,
textarea,
select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

input:hover,
textarea:hover,
select:hover {
  border-color: #bccbd4;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

textarea {
  resize: vertical;
}

button {
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: var(--weight-medium);
  color: #fff;
  background: var(--cyan);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s ease;
}

button:hover:not(:disabled) {
  background: var(--cyan-ink);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.secondary,
a.button.secondary {
  color: var(--blue);
  background: var(--paper);
  border-color: var(--line);
}

button.secondary:hover:not(:disabled),
a.button.secondary:hover {
  background: var(--hero);
  border-color: #bccbd4;
}

/* Een link die als knop dient, zoals Annuleren naast Case aanmaken. */
a.button {
  display: inline-block;
  padding: 0.55rem 1rem;
  font-weight: var(--weight-medium);
  color: #fff;
  text-decoration: none;
  background: var(--cyan);
  border: 1px solid transparent;
  border-radius: var(--radius);
}

/* Tweede klik op een onomkeerbare actie: de knop verandert van kleur én van tekst. */
button.danger {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
}

button.danger:hover:not(:disabled) {
  background: #8f1e17;
}

/* --- Loginpagina --- */

.login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  background: var(--gradient-hero);
}

.login-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  max-width: 390px;
}

/* Het witte logo staat op het verloop, niet op de witte kaart. */
.logo-login {
  width: 164px;
}

/* Zelfde merkregel als in het portaal, maar groter passend bij de loginkaart. */
.brand-login {
  gap: 0.5rem;
}

.brand-login .wm-claim {
  font-size: 1.5rem;
}

.login-card {
  width: 100%;
  padding: 2.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

.login-card h1 {
  font-size: 1.35rem;
}

.login-card .muted {
  margin: 0.2rem 0 0;
}

.login-foot {
  margin: 0;
  font-size: 0.82rem;
  color: #9fb2bd;
  text-align: center;
}

.login-card button[type='submit'] {
  width: 100%;
  margin-top: 1.4rem;
}

.login-card .error {
  margin: 1rem 0 0;
}

.login-card .success {
  margin: 1rem 0 0;
}

/* "Wachtwoord vergeten?" hangt onder het formulier, ingetogen: het is een uitweg en
   geen tweede knop. De kleur volgt .login-foot, dat op deze donkere kaart al de
   secundaire toon is. */
.login-forgot {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  text-align: center;
}

/* Deze staat binnen de witte kaart en niet op de donkere achtergrond, dus hij volgt de
   gewone secundaire inktkleur en niet die van .login-foot eronder. */
.login-forgot a {
  color: var(--ink-soft);
}

.login-forgot a:hover,
.login-forgot a:focus-visible {
  color: var(--blue);
}

.login-foot a {
  color: #cfe0e9;
}

.login-foot a:hover,
.login-foot a:focus-visible {
  color: #fff;
}

/* --- Shell: hoofdmenu boven, acties links, content rechts --- */

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Het hoofdmenu staat bovenin, op de donkere merkbalk. Alles lijnt uit op de ónderkant;
   zonder flex-end zou het menu midden in een balk hangen die door het tweeregelige
   merkblok hoger is geworden. */
.topbar {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 0.75rem 1.5rem;
  color: #c3d1e2;
  background: var(--gradient-hero);
}


/* Logo met de merkbelofte ernaast, en daaronder waar je bent: ADTS Werkt. / Klantportaal.
   Het cyaan op "Werkt." komt uit de ADTS-offerte, waar dat woord dezelfde kleur heeft. */
.brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Het merk vult precies de actiekolom eronder (min de marge van de balk zelf), zodat
     het hoofdmenu begint waar de contentkolom begint. */
  flex: 0 0 calc(var(--sidebar-width) - 1.5rem);
}

.brand-line {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.wm-claim {
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  color: #fff;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  flex: 1;
  gap: 0.4rem;
  min-width: 0;
  /* Begint op dezelfde lijn als het zoekveld en de inhoud van de panelen eronder. */
  padding-left: var(--content-inset);
}

/* Knoppen, geen tabbladen: los van de onderrand, met een eigen omlijning. */
.nav-item {
  padding: 0.45rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 400;
  color: #d7e3ee;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}

.nav-item.active {
  font-weight: var(--weight-medium);
  color: #fff;
  background: var(--cyan);
  border-color: var(--cyan);
}

.body {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  flex: 1;
  min-height: 0;
}

/* Pagina's uit het gebruikersmenu (help, wachtwoord, wat is er nieuw) hebben geen
   actiekolom. Zonder deze regel blijft de eerste kolom staan en komt de inhoud daarin
   terecht, met de rest van het scherm leeg. */
.body.no-sidebar {
  grid-template-columns: 1fr;
}

/* De actiekolom: wat kun je binnen dit hoofdmenu-item doen. */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.35rem 0.9rem;
  background: var(--hero);
  border-right: 1px solid var(--line);
}

.sidebar-title {
  margin: 0 0 0.2rem 0.7rem;
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.subnav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.subnav-item {
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}

.subnav-item:hover {
  background: rgba(2, 89, 128, 0.08);
}

.subnav-item.active {
  font-weight: var(--weight-medium);
  color: var(--blue);
  background: var(--paper);
  box-shadow: inset 2px 0 0 var(--cyan);
}

/* De inhoudsopgave op de helppagina bestaat uit knoppen: een anker zou de hash veranderen
   en daarmee de router afvuren. Ze moeten er wel uitzien als de links ernaast. */
button.subnav-item {
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Die pagina is lang, dus de kolom blijft staan terwijl de tekst doorloopt — anders is
   de opgave weg zodra je hem nodig hebt. */
.sidebar.help-index {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}

/* Een kopje binnen de actiekolom, zoals "Diensten" onder de contracten. Zelfde toon als
   de titel bovenaan de kolom, met een streep erboven die de groepen scheidt. */
.subnav-heading {
  margin: 1rem 0 0.3rem 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Scheidt de weergaven van de handelingen eronder. */
.subnav-item.after-separator {
  margin-top: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.icon-button {
  display: none;
  padding: 0.35rem 0.6rem;
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

.icon-button:hover:not(:disabled) {
  background: var(--hero);
}

.user-area {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  /* Zelfde onderlijn als het merk en de menu-items. */
  padding-bottom: 0.7rem;
}

.version-badge {
  padding: 0.15rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--cyan-ink);
  text-decoration: none;
  background: var(--cyan-soft);
  border: 1px solid transparent;
  border-radius: 20px;
}

.version-badge:hover {
  border-color: var(--cyan);
}

.user-menu {
  position: relative;
}

/* De ingelogde gebruiker: een poppetje in een rondje. Herkenbaarder dan een e-mailadres
   in een knop, en het adres zelf staat bovenin het menu dat eronder openklapt. */
/* Zelfde kleuromkering als de versiebadge ernaast: lichte cyaanvlek met donker cyaan
   erin, in plaats van doorschijnend wit op het donkere verloop. */
.user-menu > button.avatar-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--cyan-ink);
  background: var(--cyan-soft);
  border: 1px solid transparent;
  border-radius: 50%;
}

.user-menu > button.avatar-button:hover:not(:disabled) {
  background: #fff;
  border-color: var(--cyan);
}

/* Open menu: het rondje blijft duidelijk de bron van het paneel eronder. */
.user-menu > button.avatar-button[aria-expanded='true'] {
  color: var(--blue);
  background: #fff;
  border-color: #fff;
}

.avatar-icon {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.menu-user {
  margin: 0;
  padding: 0.55rem 0.6rem 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  word-break: break-all;
}

/* Blokken in het gebruikersmenu: hulp bij het portaal, en de taalkeuze. */
/* Alleen een streep bóven elk blok: twee blokken onder elkaar zouden met een boven- én
   onderrand een dubbele lijn geven. */
.menu-section {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.3rem 0 0;
  padding: 0.45rem 0.2rem;
  border-top: 1px solid var(--line);
}

.menu-section > .filter-label {
  padding: 0 0.4rem 0.2rem;
}

/* Uitloggen met pictogram: icoon en label op één regel. */
.menu-logout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
}

.menu-logout:hover .menu-icon {
  color: var(--danger);
}

/* De taalkeuze is één regel: kopje links, knoppen rechts. */
.menu-language {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
}

.menu-language > .filter-label {
  padding: 0;
}

/* Taal- en weergavekeuze delen dezelfde knopvorm: klein, vlak, en de gekozen stand
   ingekleurd. Eén set regels, zodat ze niet uit elkaar kunnen lopen. */
.switch-group {
  display: flex;
  gap: 0.3rem;
}

.switch-group button {
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  /* Even hoog als de NL/EN-knoppen ernaast: die hebben tekst van 0.78rem, deze een
     pictogram van 18px. */
  min-height: 1.9rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--hero);
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.switch-group button:hover:not(:disabled) {
  color: var(--blue);
  background: var(--hero-2);
}

.switch-group button[aria-pressed='true'] {
  color: var(--cyan-ink);
  background: var(--cyan-soft);
  border-color: var(--cyan);
}

.switch-icon {
  width: 18px;
  height: 18px;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 268px;
  padding: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(53, 56, 60, 0.16);
}

.menu-panel a,
.menu-panel button {
  padding: 0.5rem 0.6rem;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 4px;
}

.menu-panel a:hover,
.menu-panel button:hover:not(:disabled) {
  color: var(--blue);
  background: var(--hero);
}

.menu-panel button#logout {
  margin-top: 0.3rem;
  color: var(--danger);
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.menu-panel button#logout:hover:not(:disabled) {
  color: var(--danger);
  background: var(--danger-soft);
}

/* --- Contentruimte --- */

.view {
  padding: 1.5rem 1.75rem;
}

.layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* De lijst houdt zijn eigen schuifbalk, zodat het detailpaneel ernaast in beeld blijft
   ook als er honderd regels in de lijst staan. Het paneel plakt bovendien aan de
   bovenkant: lees je een lang detail, dan schuift de lijst niet mee weg.
   Alleen op brede schermen; onder de 900px staan de twee onder elkaar en moet de lijst
   gewoon meeschuiven met de pagina — zie de media query onderaan. */
.list-panel {
  position: sticky;
  /* Even ver van de bovenkant als de bovenmarge van .view. */
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  /* Wat er bóven de lijst staat: de merkbalk en de marge van .view. Staat de zoek- en
     filterbalk erbij, dan is dat meer — vandaar de variabele, die per pagina wordt
     gezet. Zonder dit zou de lijst precies te hoog worden en schoof de pagina alsnog. */
  max-height: calc(100vh - var(--list-offset, 8.5rem));
}

/* Met zoek- en filterbalk begint de lijst lager. `:has()` kijkt of de balk op deze
   pagina zichtbaar is; hij staat in de shell en wordt per route verborgen. */
.main:has(> .filters:not([hidden])) {
  --list-offset: 16.75rem;
}

.list-panel > .case-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Ruimte voor de schuifbalk, zonder dat de kaartranden ertegenaan plakken. */
  padding-right: 0.4rem;
  margin-right: -0.4rem;
  /* Ben je onderaan de lijst, dan gaat de pagina er niet vanzelf achteraan schuiven. */
  overscroll-behavior: contain;
}

.panel {
  padding: 1.35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

/* --- Nieuwe case: één vol paneel, velden over de hele breedte --- */

.case-form {
  margin-top: 1.1rem;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.field {
  min-width: 0;
}

.field-grow {
  flex: 1 1 22rem;
}

/* De prioriteit is één woord; die hoeft de breedte van het onderwerp niet te delen. */
.field-priority {
  flex: 0 0 12rem;
}

/* De labels regelen hun eigen ruimte al; binnen een .field mag de eerste er niet
   nog eens bovenop komen. */
.field > label:first-child {
  margin-top: 0;
}

/* Twee velden onder elkaar staan anders tegen elkaar aan, omdat de regel hierboven de
   marge van het label weghaalt. */
.case-form > .field + .field {
  margin-top: 1.5rem;
}

/* --- Zoeken en filteren: bovenin de contentkolom, tegen de header aan --- */

/* Een kaart in dezelfde vorm als de panelen eronder: wit met een grijs randje. Marge en
   binnenmarge zijn gelijk aan die van .view en .panel, dus het zoekveld staat op exact
   dezelfde lijn als de inhoud van de lijst eronder — en als het hoofdmenu erboven. */
.filters {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1.5rem 1.75rem 0;
  padding: 0.9rem 1.35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Bovenste regel: zoeken. Onderste regel: de statusknoppen met hun kopje ervoor. */
.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.filter-label {
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.filters input[type='search'] {
  /* Mag krimpen, maar niet tot een veld waarin je niets meer leest. */
  flex: 1 1 12rem;
  min-width: 9rem;
  margin: 0;
}

.filters button {
  flex: 0 0 auto;
}

/* --- Tekstpagina's (help, changelog, account) --- */

.prose {
  max-width: 70ch;
}


/* Paginavullend. `prose-wide` gebruikt de volle breedte in één kolom — genoeg voor een
   korte pagina. `prose-fill` doet hetzelfde maar zet lange tekst op brede schermen in
   twee kolommen, zodat er geen regels van tweehonderd tekens ontstaan. */
.prose-wide,
.prose-fill {
  max-width: none;
}

@media (min-width: 1150px) {
  .prose-fill {
    column-count: 2;
    column-gap: 3rem;
  }

  .prose-fill > h2,
  .prose-fill > .panel-header,
  .prose-fill > .contact-details {
    column-span: all;
  }

  .prose-fill > h3,
  .prose-fill > p,
  .prose-fill > ol,
  .prose-fill > dl,
  /* Een release uit de changelog hoort niet halverwege af te breken. */
  .prose-fill .release {
    break-inside: avoid;
  }

  /* Een kopje hoort niet als laatste regel onderaan een kolom te staan. */
  .prose-fill > h3 {
    break-after: avoid;
  }
}

.prose h3 {
  margin: 1.9rem 0 0.4rem;
  font-size: 1rem;
}

.prose h3:first-of-type {
  margin-top: 1.35rem;
}

.prose p,
.prose ol,
.prose ul {
  margin: 0.55rem 0;
  color: var(--ink-soft);
}

.prose ol,
.prose ul {
  padding-left: 1.3rem;
}

.prose li {
  margin: 0.25rem 0;
  color: var(--ink-soft);
}

.prose strong,
.prose b {
  font-weight: var(--weight-medium);
  color: var(--ink);
}

.prose code {
  padding: 0.1rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--blue);
  background: var(--hero);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.help-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.1rem;
  margin: 0.6rem 0;
}

.help-list dt {
  font-weight: var(--weight-medium);
  color: var(--blue);
}

.help-list dd {
  margin: 0;
  color: var(--ink-soft);
}

/* Contactblok onder aan de helppagina: zelfde grid als .help-list, maar met de
   paneelopmaak van .detail-fields — dit is wat mensen zoeken als er iets mis is. */
.contact-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.1rem;
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--hero);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contact-details dt {
  font-weight: var(--weight-medium);
  color: var(--blue);
}

.contact-details dd {
  margin: 0;
  color: var(--ink);
}

@media (max-width: 640px) {
  /* Onder elkaar op smalle schermen: de labels zijn te lang voor twee kolommen. */
  .contact-details {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .contact-details dd {
    margin-bottom: 0.6rem;
  }
}

.todo-note {
  padding: 0.75rem 0.9rem;
  color: var(--ink) !important;
  background: var(--green-soft);
  border: 1px dashed var(--green);
  border-radius: var(--radius);
}

.badge-soon {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  margin: 0.6rem 0;
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border-radius: 20px;
}

/* --- Changelog --- */

.release {
  padding-top: 1.35rem;
  margin-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.release:first-child {
  padding-top: 0.5rem;
  border-top: none;
}

.release-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.badge-current {
  padding: 0.12rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--cyan-ink);
  background: var(--cyan-soft);
  border-radius: 20px;
}

.release-date {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.release-items {
  margin: 0.35rem 0 0;
}

/* --- Caselijst --- */

.case-list {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.case-item {
  display: block;
  width: 100%;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
  color: inherit;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.case-item:hover:not(:disabled) {
  background: var(--hero);
  border-color: #bccbd4;
}

.case-item.selected {
  background: var(--cyan-soft);
  border-color: var(--cyan);
}

.case-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.case-number {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.case-subject {
  margin-top: 0.2rem;
  font-weight: var(--weight-medium);
  color: var(--ink);
}

.case-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* Statuskleuren blijven binnen de huisstijl: cyaan = nieuw, blauw = in
   behandeling, groen = afgerond. */
.status {
  padding: 0.12rem 0.55rem;
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  border-radius: 20px;
  white-space: nowrap;
}

.status.new {
  color: var(--cyan-ink);
  background: var(--cyan-soft);
}

.status.open {
  color: var(--blue);
  background: var(--hero-2);
}

.status.closed {
  color: var(--green-ink);
  background: var(--green-soft);
}

/* --- Facturen --- */

.invoice-item {
  cursor: default;
}

.invoice-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  margin-top: 0.15rem;
}

.invoice-total {
  font-size: 1.05rem;
  font-weight: var(--weight-medium);
  color: var(--ink);
}

.invoice-remaining {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.invoice-fields {
  margin-top: 0.6rem;
}

/* Downloaden en het voorbeeld bij een factuur. */

.detail-header-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

a.invoice-download {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.1rem;
  padding: 0;
  color: var(--blue);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

a.invoice-download:hover {
  color: var(--cyan-ink);
  background: var(--hero);
  border-color: #bccbd4;
}

.invoice-preview {
  margin-top: 0.7rem;
}

.invoice-preview iframe {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Over de vervaldatum: dezelfde vorm als de andere statuslabels, in de waarschuwkleur. */
.status.overdue {
  color: var(--danger);
  background: var(--danger-soft);
}

/* --- Statusfilter: dezelfde labels, maar aanklikbaar --- */

.status-filter {
  display: flex;
  gap: 0.35rem;
}

/* Een `.status` die ook een knop is: de knopopmaak van button uitzetten en alleen de
   labelopmaak overhouden, zodat filter en lijst er identiek uitzien. */
.status.pick {
  padding: 0.2rem 0.7rem;
  color: var(--ink-soft);
  background: var(--hero);
  border: 1px solid transparent;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.12s ease, border-color 0.12s ease;
}

.status.open.pick {
  color: var(--blue);
  background: var(--hero-2);
}

.status.closed.pick {
  color: var(--green-ink);
  background: var(--green-soft);
}

/* De achtergrond moet hier expliciet mee: zonder deze regels wint `button:hover` van
   de algemene knopopmaak en wordt de statusknop cyaan. */
.status.pick:hover {
  opacity: 1;
  background: var(--hero-2);
}

.status.open.pick:hover {
  background: #cddde7;
}

.status.closed.pick:hover {
  background: #e2f2d5;
}

/* De gekozen status: vol, met een rand eromheen zodat het ook zonder kleurverschil
   te zien is. */
.status.pick[aria-pressed='true'] {
  opacity: 1;
  border-color: currentColor;
}

/* --- Casedetail --- */

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.detail-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.1rem;
  margin: 1.1rem 0 0;
  padding: 1rem 1.1rem;
  font-size: 0.88rem;
  background: var(--hero);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.detail-fields dt {
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}

.detail-fields dd {
  margin: 0;
  color: var(--ink);
}

.detail-description {
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* --- Reacties --- */

.comments {
  padding-top: 0.5rem;
  margin-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.comment {
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.6rem;
  background: var(--hero);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.comment-author {
  font-weight: var(--weight-medium);
  color: var(--blue);
}

.comment-body {
  margin: 0.35rem 0 0;
  color: var(--ink);
  white-space: pre-wrap;
}

/* --- Contractoverzicht in kaarten ------------------------------------------
   Vervangt de smalle lijst naast een detailpaneel. De helft van de klanten heeft
   maar één contract en 81% er hoogstens drie; een schuifbare kolom is voor die
   aantallen zwaarder gereedschap dan nodig. */

/* De zoekbalk staat hier ín het paneel, terwijl `.filters` is gemaakt om erbóven te
   staan: die heeft een eigen vlak, rand en buitenmarge van 1.75rem. Binnen het paneel
   telt dat op bij de paneelmarge, waardoor het zoekveld verder naar rechts begon dan
   de kopjes en de kaarten eronder. Hier dus vlak tegen de paneelrand. */
#contract-filters {
  margin: 0.9rem 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Kopje per dienst. De eerste groep krijgt minder ruimte erboven dan de rest: die
   zit al onder de paneelkop. */
#contract-groups {
  margin-top: 1.2rem;
}

.contract-group + .contract-group {
  margin-top: 1.6rem;
}

/* Een echte sectietitel, geen tussenlijntje: merkblauw, met het cyaan streepje dat
   in de huisstijl een kop aankondigt. Stond eerder op 0.95rem in --ink-soft en werd
   daarmee lichter dan de gewone h3 eronder — het las als een scheiding in plaats van
   als een titel. */
/* Zelfde vorm als het geselecteerde item in het linkermenu (.subnav-item.active):
   wit vlak, cyaan balkje links, tekst in merkblauw. Die vorm betekent in dit portaal
   al "dit hoort bij elkaar", dus een dienstkopje mag hem lenen. */
.contract-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
  font-weight: var(--weight-medium);
  color: var(--blue);
  /* Omgekeerd ten opzichte van het menu: daar staat een wit vlak op de blauwe zijbalk,
     hier staat het blauwe vlak op het witte paneel. Zelfde contrast, zelfde balkje. */
  background: var(--hero);
  border-radius: var(--radius);
  box-shadow: inset 2px 0 0 var(--cyan);
}

/* Het aantal rechts in de balk: een klant ziet zo meteen hoe groot een dienst is,
   zonder de kaarten te tellen. */
.contract-group-count {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.contract-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contract-card {
  display: block;
  height: 100%;
  padding: 0.9rem 1rem;
  color: inherit;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.12s ease, background 0.12s ease;
}

/* Zelfde hover als een case in de lijst (.case-item): vlak in --hero met een iets
   donkerder rand. Eén gedrag voor alles wat aanklikbaar is in een lijst. */
.contract-card:hover,
.contract-card:focus-visible {
  background: var(--hero);
  border-color: #bccbd4;
}

.contract-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.contract-card-name {
  margin-top: 0.3rem;
  font-weight: var(--weight-medium);
  color: var(--blue);
}

.contract-card-desc {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.back-link {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}

.back-link::before {
  content: '← ';
}

/* --- SLA in kaarten --------------------------------------------------------
   De omschrijving is de kop en het severity-nummer het bijschrift; de
   bereikbaarheid staat op de kaart waar hij geldt, en niet in een voetnoot onder
   een tabel waarin die uitzondering nergens te zien was. */

.sla-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}

.sla-card {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius);
}

/* Aflopende urgentie, met dezelfde kleuren als de statusbadges elders. */
.sla-card.sev1 {
  border-top-color: #c0392b;
}

.sla-card.sev2 {
  border-top-color: var(--cyan);
}

.sla-card.sev3 {
  border-top-color: var(--green);
}

.sla-card-title {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.sla-card-level {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.sla-card-times {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
}

.sla-card-times dt {
  color: var(--ink-soft);
}

.sla-card-times dd {
  margin: 0;
  font-weight: var(--weight-medium);
  color: var(--ink);
}

.sla-card-reach {
  padding-top: 0.7rem;
  margin-top: auto;
}

.sla-card-when {
  margin: 0.8rem 0 0.2rem;
  padding-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.sla-card-contact {
  font-weight: var(--weight-medium);
}

/* --- Contractregels --------------------------------------------------------
   Zelfde vlakverdeling als .comment, maar zonder de gekleurde rand links: een
   regel is een feit over het contract, geen bericht van iemand. */

.contract-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contract-line {
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.5rem;
  background: var(--hero);
  border-radius: var(--radius);
}

.contract-line-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.contract-line-name {
  font-weight: var(--weight-medium);
  color: var(--blue);
}

.contract-line-desc {
  margin-top: 0.25rem;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Onderdelen van een as-a-service product: ingesprongen onder hun hoofdproduct, met een
   streepje links dat de groep bij elkaar houdt. Het hoofdproduct staat er direct boven,
   dus het blok zelf hoeft geen kopje. */
.contract-subline-wrap {
  margin: -0.25rem 0 0.5rem 1.1rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--cyan);
}

.contract-subline {
  background: transparent;
  border: 1px solid var(--line);
}

.comment-form {
  margin-top: 1.1rem;
}

.comment-form button {
  margin-top: 0.6rem;
}

/* --- Afsluitverzoek: knop en toelichting achter een caseregel --- */

.close-actie {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0 0.9rem 0.9rem;
}

.close-actie textarea {
  width: 100%;
  margin: 0;
}

.close-actie .success {
  margin: 0;
}

/* --- Service levels bij een contract --- */

/* --- Donkere weergave ------------------------------------------------------
   Alleen de kleurvariabelen worden omgezet; alle regels hieronder gebruiken die
   variabelen en hoeven dus niet te weten welke weergave aanstaat. De merkkleuren zelf
   (cyaan, groen) blijven staan — een huisstijl hoort in het donker herkenbaar te
   blijven — maar de vlakken en de tekst wisselen. */

:root[data-theme='dark'] {
  --ink: #e6edf3;
  --ink-soft: #a3b1bd;

  /* Kopjes en links moeten op een donkere ondergrond juist lichter zijn. */
  --blue: #7cc4e6;
  --cyan-ink: #6cc3e8;
  --green-ink: #8ed36a;

  --paper: #1b212a;
  --hero: #12171e;
  --hero-2: #232b36;
  --line: #2f3947;

  --cyan-soft: #10303f;
  --green-soft: #16301c;
  --danger: #ff6b60;
  --danger-soft: #3a1c1a;
}

/* De invoervelden staan op de paneelkleur; in het donker wordt die anders te vlak. */
:root[data-theme='dark'] input,
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] select {
  background: #161c24;
}

:root[data-theme='dark'] input:hover,
:root[data-theme='dark'] textarea:hover,
:root[data-theme='dark'] select:hover {
  border-color: #465364;
}

/* Schaduw onder het gebruikersmenu valt in het donker weg; een rand doet het werk. */
:root[data-theme='dark'] .menu-panel {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Het lichte logo staat al op een donkere balk; op de lichte vlakken van de donkere
   weergave blijft het ook lichte logo het juiste. */

/* --- Smalle schermen --- */

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }

  /* Onder elkaar: dan hoort de lijst gewoon met de pagina mee te schuiven. Een paneel
     dat plakt en een lijst met een eigen schuifbalk leveren hier twee schuifbalken op
     die om dezelfde vinger vechten. */
  .list-panel {
    position: static;
    max-height: none;
  }

  .list-panel > .case-list {
    overflow-y: visible;
    padding-right: 0;
    margin-right: 0;
  }
}

@media (max-width: 860px) {
  /* Hoofdmenu achter de ☰-knop; de actiekolom wordt een rij boven de inhoud. */
  .topbar {
    flex-wrap: wrap;
    align-items: center;
    /* Uitgeklapt staat het menu onderin de balk, dus daar hoort weer ruimte onder. */
    padding-bottom: 0.5rem;
  }

  /* Het merk hoeft de actiekolom niet meer te dekken: die staat hier niet naast. */
  .brand {
    flex: 0 0 auto;
  }

  .nav {
    padding-left: 0;
  }

  .icon-button {
    display: block;
    order: 2;
    margin-left: auto;
  }

  .user-area {
    order: 3;
  }

  .nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
  }

  .nav.open {
    display: flex;
  }


  .body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-title {
    display: none;
  }

  .subnav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .subnav-item {
    background: var(--paper);
    border: 1px solid var(--line);
  }

  /* Als rij knoppen is een streep erboven zinloos. */
  .subnav-item.after-separator {
    margin-top: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .view {
    padding: 1rem;
  }

  .topbar,
  .banner {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .filters {
    margin: 1rem 1rem 0;
    padding: 0.8rem 1rem;
  }
}

/* --- Uitleg bij één dienst, boven het contractoverzicht --- */

.dienst-uitleg {
  margin: 0 0 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.dienst-uitleg p {
  margin: 0 0 0.6rem;
  max-width: 62ch;
}

.dienst-uitleg h3 {
  margin: 1.5rem 0 0.4rem;
  font-size: 1rem;
  color: var(--blue);
}

/* De tabel mag op een smal scherm zelf schuiven; de pagina niet. */
.change-table {
  width: 100%;
  margin-top: 0.8rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.change-table th,
.change-table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.change-table thead th {
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.change-table .change-name {
  width: 22%;
  font-weight: var(--weight-medium);
  color: var(--ink);
}

/* Zonder deze breedte breekt "3 werkdagen" over twee regels terwijl er ruimte zat is. */
.change-table .change-lead {
  width: 18%;
  white-space: nowrap;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .change-table .change-name,
  .change-table .change-lead {
    width: auto;
  }

  .change-table .change-lead {
    white-space: normal;
  }
}


/* E-mailadres en rol horen bij elkaar en krijgen daarom sámen één afsluitende streep.
   Stond die streep onder allebei, dan liepen er twee lijnen vlak onder elkaar en werd de
   rol lastig te lezen. */
.menu-user-block {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.menu-user-role {
  margin: 0.15rem 0 0;
  padding: 0 0.6rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

/* Groen als iets meedoet — een actief account, een rol die is toegekend — en gedempt
   blauw als dat niet zo is.

   Waarom eigen klassen en niet `.status.open` / `.status.closed`: die twee komen uit de
   caselijst, waar `closed` juist de gróéne is (afgehandeld). Voor een account zou
   `status closed` bij "Actief" staan, en dat leest als een fout — precies het soort regel
   dat een volgende keer wordt "gecorrigeerd". Vandaar een naam die de bedoeling zegt.

   Staat hier en niet in admin.css: het klantportaal laadt dat bestand niet, en gebruikt
   deze klassen ook. */
.status.aan {
  color: var(--green-ink);
  background: var(--green-soft);
}

.status.uit {
  color: var(--blue);
  background: var(--hero-2);
}

/* Kopje boven een groep in een lijst: de organisatie boven haar gebruikers. Stond eerst
   alleen in admin.css; het klantportaal gebruikt hem nu ook op de organisatiepagina en
   laadt dat bestand niet. */
.user-group-title {
  margin: 1rem 0 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  color: var(--blue);
  background: var(--hero);
  border-radius: var(--radius);
  box-shadow: inset 2px 0 0 var(--cyan);
}

/* De eerste groep zit al onder de kop en het aantal. */
.case-list > .user-group-title:first-child {
  margin-top: 0;
}

/* De organisatielijst begint onder de filterbalk; zonder deze ruimte plakt de eerste
   groepskop tegen de knoppen aan. */
#org-list > .user-group-title:first-child {
  margin-top: 0.4rem;
}

/* Op de organisatiepagina betekenen de statusknoppen "met toegang" en "zonder toegang".
   Ze delen hun opmaak met de caselijst, waar `open` blauw is en `closed` groen — daar
   klopt dat (afgehandeld is groen), hier niet: toegang hoort de groene te zijn.

   Vandaar deze omkering in plaats van andere data-state-waarden: de knoppen houden hun
   plaats en hun betekenis, alleen de kleur volgt wat er op deze pagina staat. */
#case-state.omgekeerde-kleuren .status.open.pick {
  color: var(--green-ink);
  background: var(--green-soft);
}

#case-state.omgekeerde-kleuren .status.closed.pick {
  color: var(--blue);
  background: var(--hero-2);
}

/* Twee of meer labels achter elkaar aan de rechterkant van een lijstregel. Zonder deze
   houder duwt `space-between` op .case-item-top ze uit elkaar: het eerste label komt dan
   in het midden te staan in plaats van naast het tweede. */
.item-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Bevestiging vóór een reset: de knop maakt plaats voor een vraag met twee antwoorden.
   Geen browserdialoog — die blokkeert de pagina en past niet bij de rest. */
.bevestiging {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: var(--hero);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.bevestiging-vraag {
  font-size: 0.85rem;
  color: var(--ink);
}

.bevestiging button {
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
}

/* Een handeling achter een regel in een lijst, zoals het verzoek om de toegang van een
   collega in te trekken. */
.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.item-actions button {
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
}