/* LuzeX Platform — design system. Rustige, Apple-achtige uitstraling (zie docs/enterprise-platform/09-backend-en-frontend-architectuur.md §10.4/§10.6). */

:root {
  color-scheme: light dark;

  /* Histor Intuitive (PPG1022-2, #cfc6bc): een warme greige met roze ondertoon, LRV 57.
     Vervangt het koele #f5f5f7. Bijkomend voordeel: witte panelen staken hier duidelijk
     tegen af (1,69:1) waar dat op het oude bijna-wit nauwelijks zichtbaar was (1,09:1). */
  --bg: #cfc6bc;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-translucent: rgba(255, 255, 255, 0.72);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --text: #1d1d1f;
  /* Warmer én donkerder dan de vorige koele grijzen. Noodzakelijk, niet cosmetisch: op de
     greige achtergrond haalde #6e6e73 nog maar 3,01:1 en #86868b zelfs 2,15:1. Nu 4,58:1 en
     3,30:1 op de achtergrond, en 7,73:1 / 5,57:1 op de witte panelen. */
  --text-secondary: #585249;
  --text-tertiary: #6e6760;

  /* Het logo is strikt monochroom, dus het accent is dat ook: grafiet in plaats van het
     Apple-blauw waarmee dit begon. --accent-contrast is de kleur die op een accentvlak leesbaar
     is; die draait mee in donkere modus, waar het accent juist licht wordt. */
  --accent: #1d1d1f;
  --accent-hover: #3a3a3c;
  --accent-active: #000000;
  --accent-contrast: #ffffff;
  --accent-tint: rgba(29, 29, 31, 0.07);
  --accent-ring: rgba(29, 29, 31, 0.3);

  --success: #248a3d;
  --success-tint: rgba(52, 199, 89, 0.14);
  --warning: #b25000;
  --warning-tint: rgba(255, 149, 0, 0.16);
  --danger: #d70015;
  --danger-tint: rgba(255, 59, 48, 0.12);
  --neutral-tint: rgba(0, 0, 0, 0.06);
  --purple: #6e40c9;
  --purple-tint: rgba(139, 92, 246, 0.14);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 980px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sidebar-width: 260px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --surface: #1c1c1e;
    --surface-translucent: rgba(28, 28, 30, 0.72);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --text-tertiary: #6e6e73;

    /* Omgekeerd in donkere modus: op zwart is grafiet onzichtbaar, dus wordt het accent licht
       en de tekst erop donker — dezelfde omkering die het logo zelf maakt (zwarte en witte
       variant van hetzelfde merk). */
    --accent: #f5f5f7;
    --accent-hover: #ffffff;
    --accent-active: #d1d1d6;
    --accent-contrast: #1d1d1f;
    --accent-tint: rgba(245, 245, 247, 0.12);
    --accent-ring: rgba(245, 245, 247, 0.4);

    --success: #32d74b;
    --success-tint: rgba(50, 215, 75, 0.16);
    --warning: #ff9f0a;
    --warning-tint: rgba(255, 159, 10, 0.18);
    --danger: #ff453a;
    --danger-tint: rgba(255, 69, 58, 0.16);
    --neutral-tint: rgba(255, 255, 255, 0.08);
    --purple: #bf5af2;
    --purple-tint: rgba(191, 90, 242, 0.18);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.006em;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

/* ---------- Login ---------- */

body.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Twee zachte lichtplekken in de achtergrondkleur zelf, in plaats van de blauwe en paarse
     gloed die hier stond. Wit i.p.v. een kleur: het merk is monochroom. */
  /* Vlak, geen gradiënt. Hier stonden twee grote zachte radial-gradients (blauw en paars);
     die zijn niet alleen van het oude kleurenschema, ze lieten op deze achtergrond ook
     zichtbare rechthoekige tegelranden achter bij het renderen. Een verfkleur hoort sowieso
     vlak te zijn. */
  background: var(--bg);
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
  animation: rise 0.5s var(--ease);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Het merk staat als afbeelding in de pagina, niet als letters in een gekleurd tegeltje.
   Twee varianten (zwart en wit) in plaats van een CSS-filter: het logo is als beide kleuren
   aangeleverd, en een omgekeerd zwart logo is niet hetzelfde bestand als het witte.
   De verhoudingen komen uit de bronbestanden, opgemeten en niet geschat:
   volledig lockup 3160,4 × 882,4 (= 3,582) en het beeldmerk 610,3 × 427,5 (= 1,428). */
.brand-logo,
.brand-mark {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* Volledig lockup mét tagline — alleen waar het groot genoeg staat om leesbaar te zijn
   (inlogscherm, factuur). In de sidebar zou de tagline op ~10px onleesbare pap worden. */
.brand-logo {
  width: 232px;
  aspect-ratio: 3.582;
  background-image: url("/assets/luzex-logo-zwart.svg");
  margin-bottom: 26px;
}

/* Alleen het beeldmerk, voor krappe plekken zoals de sidebar. */
.brand-mark {
  width: 34px;
  aspect-ratio: 1.428;
  background-image: url("/assets/luzex-merk-zwart.svg");
  margin-bottom: 20px;
  /* De "Lx"-tekst die hier vroeger in stond, mag niet meer meelezen. */
  font-size: 0;
  color: transparent;
}

@media (prefers-color-scheme: dark) {
  .brand-logo {
    background-image: url("/assets/luzex-logo-wit.svg");
  }

  .brand-mark {
    background-image: url("/assets/luzex-merk-wit.svg");
  }
}

.login-card h1 {
  font-size: 22px;
  margin-bottom: 4px;
}

.login-card .subtitle {
  margin-bottom: 28px;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 13px;
}

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 16px 0 6px;
}

label:first-of-type {
  margin-top: 0;
}

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

input::placeholder {
  color: var(--text-tertiary);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: var(--accent);
  color: var(--accent-contrast);
  transition: background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}

button:hover {
  background: var(--accent-hover);
}

button:active {
  background: var(--accent-active);
  transform: scale(0.98);
}

button.secondary {
  background: var(--neutral-tint);
  color: var(--text);
}

button.secondary:hover {
  background: var(--border-strong);
}

button.secondary:active {
  transform: scale(0.98);
}

.primary-action {
  width: 100%;
  margin-top: 26px;
  padding: 12px;
  font-size: 14.5px;
  /* Neutrale schaduw: een blauwe gloed onder een zwarte knop verraadt het oude accent. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* Er was geen algemene linkstijl, waardoor losse links het browser-standaardblauw kregen
   (rgb(0,0,238)). Dat viel niet op naast een blauw accent, maar wel naast een monochroom merk.
   Links binnen navigatie en knoppen zetten hun eigen kleur en blijven ongemoeid. */
a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-color: currentColor;
}

.error {
  color: var(--danger);
  font-size: 12.5px;
  margin-top: 12px;
  min-height: 1em;
}

.success {
  color: var(--success);
  font-size: 12.5px;
  margin-top: 12px;
  min-height: 1em;
}

/* Geen fout, maar wel iets dat een beslissing vraagt — bijv. uren die zijn ingeladen maar
   geparkeerd wegens een overschreden budget. Bewust een eigen kleur: rood zou suggereren dat er
   iets misging, en dat is hier niet zo. */
.waarschuwing {
  color: var(--warning);
  background: var(--warning-tint);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-top: 12px;
}

.waarschuwing a {
  color: inherit;
  font-weight: 600;
}

.text-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
}

.text-link:hover {
  background: none;
  text-decoration: underline;
}

/* ---------- App shell (dashboards) ---------- */

body.dashboard-body {
  display: flex;
  align-items: stretch;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--surface-translucent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 22px;
}

.sidebar .brand-mark {
  width: 30px;
  margin: 0;
  flex: 0 0 auto;
}

.sidebar .brand-name {
  font-weight: 600;
  font-size: 13.5px;
  /* Het woordmerk staat wijd uit elkaar; die maat nemen we hier over zodat de naam naast het
     beeldmerk hetzelfde ritme heeft in plaats van er strak tegenaan te staan. */
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sidebar .brand-role {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: -1px;
}

.sidebar-org {
  padding: 10px 12px;
  margin: 0 0 14px;
  border-radius: 10px;
  background: var(--surface-secondary, rgba(0, 0, 0, 0.03));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s var(--ease);
}

.nav-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.75;
}

.nav-item:hover {
  background: var(--neutral-tint);
}

.nav-item.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.nav-item.active svg {
  opacity: 1;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 12px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info {
  min-width: 0;
}

.user-email {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

#uitloggen-knop {
  width: 100%;
}

.content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  padding: 40px 48px 80px;
  max-width: 980px;
}

.content-header {
  margin-bottom: 28px;
}

.content-header h1 {
  font-size: 26px;
}

.content-header .subtitle {
  margin-top: 4px;
}

/* ---------- Cards / panels ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 24px;
  transition: box-shadow 0.2s var(--ease);
}

.panel h2 {
  font-size: 16px;
  margin-bottom: 4px;
}

.panel > .subtitle {
  margin-bottom: 18px;
}

.panel h2 + .subtitle {
  margin-top: 2px;
}

.schijf-rij {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

/* ---------- Paywall / abonnement ---------- */

.paywall {
  text-align: center;
  padding: 40px 24px;
  max-width: 460px;
  margin: 0 auto;
}

.paywall-icoon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.paywall-icoon svg {
  width: 26px;
  height: 26px;
}

.paywall h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.paywall p {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin: 0 0 8px;
}

.paywall-knop {
  width: auto;
  padding: 11px 22px;
}

.plan-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.plan-kaart {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--bg-elevated);
}

.plan-kaart.plan-huidig {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.plan-kaart h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.plan-kaart .plan-huidig-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin-bottom: 10px;
}

.plan-kaart .plan-prijs {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 2px 0 6px;
}

.plan-kaart .plan-prijs small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.plan-kaart ul {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.verbruik-balk {
  height: 6px;
  border-radius: 3px;
  background: var(--neutral-tint);
  overflow: hidden;
  margin-top: 8px;
}

.verbruik-balk span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.verbruik-balk.vol span {
  background: var(--danger);
}

.nav-item .slot {
  margin-left: auto;
  width: 13px;
  height: 13px;
  opacity: 0.55;
  flex-shrink: 0;
}

.panel-header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 4px;
}

.panel-header-row h2 {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 220px;
}

.panel-header-row .primary-action {
  flex: 0 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.tarief-rij {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.tarief-rij .tarief-productcode,
.tarief-rij .tarief-bedrag {
  flex: 1;
}

.tarief-rij button {
  flex-shrink: 0;
}

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

th, td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr {
  transition: background 0.1s var(--ease);
}

tbody tr:hover {
  background: var(--neutral-tint);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Status badges ---------- */

.status-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--neutral-tint);
  color: var(--text-secondary);
  white-space: nowrap;
}

.status-badge.status-actief,
.status-badge.status-goedgekeurd,
.status-badge.status-definitief,
.status-badge.status-betaald,
.status-badge.status-verwerkt {
  background: var(--success-tint);
  color: var(--success);
}

.status-badge.status-wacht_op_controle,
.status-badge.status-ingediend,
.status-badge.status-betaalbaar {
  background: var(--warning-tint);
  color: var(--warning);
}

.status-badge.status-afgekeurd,
.status-badge.status-geannuleerd,
.status-badge.status-verwerkt_met_fouten {
  background: var(--danger-tint);
  color: var(--danger);
}

.status-badge.status-concept,
.status-badge.status-vervangen {
  background: var(--neutral-tint);
  color: var(--text-secondary);
}

.status-badge.status-gefactureerd {
  background: var(--purple-tint);
  color: var(--purple);
}

/* ---------- Rows / lists (uren, facturen) ---------- */

.item-row {
  border-top: 1px solid var(--border);
  padding: 16px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.item-row:first-child {
  border-top: none;
}

.item-row .item-main {
  font-size: 13.5px;
  line-height: 1.6;
}

.item-row .item-main strong {
  font-weight: 600;
}

.item-row .item-actions {
  white-space: nowrap;
  display: flex;
  gap: 8px;
}

.correctie-form {
  border-top: 1px solid var(--border);
  padding: 20px 2px;
}

.correctie-form:first-child {
  border-top: none;
}

.correctie-form p {
  margin: 0 0 12px;
  font-size: 13.5px;
}

.correctie-form button {
  margin-top: 14px;
}

/* ---------- Empty / loading states ---------- */

.empty-state {
  color: var(--text-tertiary);
  font-size: 13.5px;
  text-align: center;
  padding: 32px 0;
}

/* ---------- Dashboard (KPI-kaarten, periodefilter, trend) ---------- */

.periode-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.periode-filter label {
  margin: 0;
}

.periode-filter select,
.periode-filter input {
  width: auto;
  min-width: 160px;
}

/* Zelfde vorm als .periode-filter, maar semantisch een andere filter (opdrachtgever i.p.v.
   tijdvak). Bewust een eigen naam zodat ze los van elkaar kunnen bewegen. */
.filterbalk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.filterbalk label {
  margin: 0;
}

.filterbalk select {
  width: auto;
  min-width: 200px;
}

.tabbladen {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.tabblad {
  width: auto;
  margin: 0;
  padding: 9px 14px;
  background: none;
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 500;
}

.tabblad:hover {
  background: none;
  color: var(--text);
}

.tabblad.actief {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* Berichten: gesprekkenlijst links, gesprek rechts. Klapt op smalle schermen onder elkaar. */
.gesprek-indeling {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}

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

.gesprek-knop {
  width: 100%;
  display: block;
  text-align: left;
  background: none;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 4px;
  box-shadow: none;
}

.gesprek-knop:hover {
  background: var(--neutral-tint);
}

.gesprek-knop.actief {
  background: var(--accent-tint);
  border-color: var(--accent-ring);
}

.gesprek-naam {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
}

.gesprek-laatste {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ongelezen-teller {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

.berichtenlijst {
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
}

.bericht {
  max-width: 78%;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 13.5px;
}

.bericht.van-mij {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-contrast);
}

.bericht.van-ander {
  background: var(--neutral-tint);
  color: var(--text);
}

.bericht-tekst {
  white-space: pre-wrap;
  word-break: break-word;
}

.bericht-meta {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.7;
}

.bericht.van-mij .bericht-meta a {
  color: inherit;
}

.kpi-groep {
  margin-bottom: 28px;
}

.kpi-groep h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.kpi-card {
  background: var(--neutral-tint);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.kpi-waarde {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.kpi-label {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.kpi-card.kpi-accent .kpi-waarde {
  color: var(--accent);
}

.kpi-card.kpi-warning .kpi-waarde {
  color: var(--warning);
}

.trend-chart {
  width: 100%;
  height: 120px;
  display: block;
}

.dashboard-tabellen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dashboard-tabellen .panel {
  margin-bottom: 0;
}

/* ---------- Misc ---------- */

.import-summary {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--neutral-tint);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.import-summary ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--danger);
}

@media (max-width: 860px) {
  /* Sidebar wordt een horizontale topbar i.p.v. volledig te verdwijnen — "alles mobiel
     bruikbaar" (zie docs/enterprise-platform/09-backend-en-frontend-architectuur.md §10.6)
     geldt ook voor navigatie en uitloggen, niet alleen voor de inhoud. */
  body.dashboard-body {
    flex-direction: column;
  }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar .brand {
    padding: 4px 10px 4px 0;
  }
  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 auto;
    gap: 2px;
  }
  .nav-item svg {
    width: 15px;
    height: 15px;
  }
  .sidebar-footer {
    border-top: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .user-chip {
    padding: 0;
  }
  .user-info {
    display: none;
  }
  #uitloggen-knop {
    width: auto;
  }
  .content {
    margin-left: 0;
    padding: 24px 20px 60px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .item-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  .dashboard-tabellen {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Toevoegingen voor SCRNN
   Uitsluitend nieuwe klassen; er wordt hierboven niets herdefinieerd.
   ========================================================================== */

/* Financiële tabellen zijn breed — de posities-tabel heeft zeven kolommen. Op een telefoon moet
   zo'n tabel zijwaarts kunnen schuiven en niet herschikken: twaalf kolommen naast elkaar zijn
   nu juist het punt, en ze onder elkaar stapelen vernietigt de vergelijking die de tabel de
   moeite waard maakt. De min-width dwingt af dat hij écht overloopt in plaats van de kolommen
   tot onleesbaar smal te knijpen. */
.tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 860px) {
  .tabel-scroll table {
    min-width: 640px;
  }
}

/* Getallen die je met elkaar vergelijkt horen rechts uitgelijnd te staan en in cijfers van
   gelijke breedte — anders staan de duizendtallen niet onder elkaar en kun je twee bedragen niet
   in één oogopslag tegen elkaar afzetten. */
.bedrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* `.primary-action` is ontworpen als de afsluitende knop ván een formulier: volle breedte, met
   ruimte erboven. In een `.panel-header-row` of naast een andere knop klopt dat niet — hij wordt
   dan een balk over de hele kaart. Deze variant maakt hem zo breed als zijn tekst.
   Bewust een extra klasse en geen wijziging van `.primary-action` zelf: elders in het platform is
   dat volle-breedte-gedrag juist het gewenste. */
.primary-action.compact {
  width: auto;
  margin-top: 0;
}

/* Keuzelijsten in een tabelcel. Het ontwerp geeft `select` volle breedte, wat in een formulier
   klopt maar in een smalle tabelkolom een hokje van twee letters oplevert — je kunt dan niet
   lezen wélk pakket geselecteerd staat, en dat is nu juist de informatie. `.filterbalk select`
   lost hetzelfde op voor de filterbalk; deze regel doet het voor tabellen. */
table select {
  width: auto;
  min-width: 130px;
}

/* Een tekstveld in de filterbalk hoort naast de knop te staan, niet erboven. Zonder dit neemt het
   veld volle breedte en wordt de knop naar de volgende regel geduwd. */
.filterbalk input[type="text"] {
  width: auto;
  flex: 1 1 260px;
}

/* Taalkeuze (NL / EN). Rechtsboven op de pagina, buiten de inlogkaart: hij hoort niet bij het
   inloggen zelf en zou tussen de invoervelden om aandacht concurreren met de knop die je echt
   moet vinden.

   Zelfde translucente behandeling als de zijbalk, zodat het één systeem blijft. Er wordt geen
   nieuwe kleur ingevoerd — alleen bestaande tokens gecombineerd:

     inactief: --text-secondary op --surface-translucent
               licht  #585249 op #f2efec (72% wit over de greige grond) = 6,75:1
               donker #98989d op #141416 (72% #1c1c1e over zwart)       = 6,52:1
     actief:   --accent-contrast op --accent — dezelfde combinatie als de hoofdknop.

   Beide ruim boven de 4,5:1 die dit project als ondergrens hanteert. */
.taalkeuze {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-translucent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.taal-knop {
  width: auto;
  margin: 0;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.taal-knop:hover {
  background: var(--neutral-tint);
  color: var(--text);
}

.taal-knop.actief {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* De toetsenbordfocus moet zichtbaar blijven op een knop die zelf al een achtergrond heeft. */
.taal-knop:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* Op een smal scherm staat de kaart bijna tegen de rand; dan mag de keuze wat dichter naar de
   hoek kruipen zodat hij niet over de kaart heen valt. */
@media (max-width: 480px) {
  .taalkeuze {
    top: 12px;
    right: 12px;
  }
}