/* =============================================================================
   Flowskraft Portal — stylesheet
   Brand: Ink (#14110B) + Bone (#F4EFE7) + Saffron (#E26F2C) accent.
   - No drop shadows on UI surfaces; depth via borders + 3px saffron accent stripe.
   - Card radius 8px, button/inline radius 4-6px (deliberately tight).
   - One type family: Geist (production) — TT Norms Pro is the licensed target.
   ========================================================================== */

/* ── ROOT TOKENS ─────────────────────────────────────────── */
:root {
  /* Flowskraft brand
     Legacy --hc-* token names are kept as stable variable identifiers so the
     entire stylesheet keeps working without renames. Values map to Flowskraft. */
  --hc-navy:       #14110B;   /* Ink — primary on light */
  --hc-navy-deep:  #0A0805;   /* Ink-950 */
  --hc-navy-void:  #0A0805;
  --hc-lime:       #E26F2C;   /* Saffron — single accent. LET OP: dit is de enige
                                 kleur die applyTenantBranding() per klant
                                 overschrijft. Alles wat een tweede vaste kleur
                                 bijhield sloeg bij een klant met eigen huisstijl
                                 terug naar Flowskraft-saffraan (A254) — leid
                                 accentvarianten daarom hieronder af, nooit apart. */
  --hc-ink:        #14110B;
  --hc-muted:      #5A5142;   /* Ink-500 (warm anthracite) */
  --hc-ink-soft:   var(--hc-muted);
  --hc-paper:      #F4EFE7;   /* Bone — primary canvas */
  --hc-bone:       var(--hc-paper);
  --hc-beton:      #E8E1D3;   /* Ink-100, alt surface */
  --hc-soft:       var(--hc-paper);  /* getint vlak binnen een witte kaart */
  --hc-line:       #D2C8B5;   /* Ink-200 */
  --hc-line-soft:  #E8E1D3;
  --hc-border:     var(--hc-line-soft);
  --hc-white:      #FFFFFF;

  /* Accent-afgeleiden (A254). Statische waarden = de kleuren van vóór deze PR,
     zodat een browser zonder relatieve kleursyntax exact hetzelfde toont; het
     @supports-blok onder :root leidt ze af van --hc-lime en laat ze daarmee wél
     met de klantkleur meebewegen.
       hover  = één kleurstap donkerder  (designregel: hover = één stap)
       press  = twee stappen donkerder
       text   = accent als tekst/icoon op een licht vlak; lichtheid begrensd
                zodat een licht merk (geel, limoen) niet onleesbaar wordt.
     --hc-lime-deep is het legacy-alias van de tekstrol: platform.css en
     delen.css lezen die naam en gebruiken hem vrijwel uitsluitend als tekst. */
  --hc-saffron:       var(--hc-lime);
  --hc-accent-hover:  #C75A1F;
  --hc-accent-press:  #A2461A;
  --hc-accent-text:   #C75A1F;
  --hc-accent-on:     var(--hc-navy-deep); /* A288: runtime wit bij donker accent */
  --hc-lime-deep:     var(--hc-accent-text);

  /* Company dots — single-tenant baseline (multi-tenant ready) */
  --hc-co-holcon:  #14110B;
  --hc-co-bisoton: #14110B;
  --hc-co-durison: #14110B;

  /* Status pills */
  --hc-status-done-bg:    #ECF6EE;
  --hc-status-done-fg:    #1F6A2C;
  --hc-status-busy-bg:    #FDF5E1;
  --hc-status-busy-fg:    #8A6309;
  --hc-status-busy-dot:   #C99014;
  --hc-status-act-bg:     #FBF1E7;
  --hc-status-act-fg:     #A2461A;
  --hc-status-draft-bg:   #E8E1D3;
  --hc-status-draft-fg:   #3F392E;
  --hc-status-draft-dot:  #837A65;

  /* Backwards-compatible aliases (legacy CSS still references these names) */
  --navy:        var(--hc-navy);
  --navy-deep:   var(--hc-navy-deep);
  --navy-void:   var(--hc-navy-void);
  --lime:        var(--hc-lime);
  --ink:         var(--hc-ink);
  --muted:       var(--hc-muted);
  --surface:     var(--hc-paper);
  --surface-2:   var(--hc-beton);
  --line:        var(--hc-line);
  --panel:       rgba(255, 255, 255, 0.94);
  --panel-strong:rgba(255, 255, 255, 0.98);
  --danger:      #D63031;   /* Power Red */
  --danger-soft: #FBEBE9;   /* danger-50 — getint vlak achter een danger-knop */
  --hc-power-red:var(--danger);
  --success:     #2F8F3F;
  --warning:     var(--hc-status-busy-dot);
  --shadow:      none;
  --shadow-md:   0 4px 12px -2px rgba(20, 17, 11, 0.14);

  /* Typography — single family (Geist), with TT Norms Pro as licensed target */
  --heading-font: "TT Norms Pro", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  --body-font:    "TT Norms Pro", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  --mono-font:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Beweging — designregels A101: één easing, vier duraties.
     Beweging is feedback op een handeling, nooit decoratie. */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro:   120ms;   /* hover, kleurstap */
  --dur-fast:    180ms;   /* binnenkomst toast/popup */
  --dur-medium:  240ms;   /* paneel-/drawer-beweging */
  --dur-slow:    360ms;   /* zeldzaam: grote layout-shift */

  /* Overlay — designregels A101: één scrimkleur, warm ink, nooit zwart.
     De fotoviewer is de bewuste uitzondering: foto's hebben een donkere
     omkadering nodig en houden rgba(10,8,5,.8) met 8px blur. */
  --overlay-scrim: rgba(20, 17, 11, 0.4);
  --overlay-blur:  4px;

  /* z-index-ladder. Vastgelegd zodat een nieuwe laag een plek heeft in plaats
     van een getal dat toevallig hoog genoeg leek. */
  --z-drawer-scrim:  40;
  --z-slideover:     60;
  --z-overlay:      800;   /* standaard modals */
  --z-overlay-high: 820;   /* modal boven een modal-context */
  --z-unsaved:     1200;   /* bevestiging die boven alles moet */
  --z-toast:       1250;   /* boven overlays: bevestigt ook acties in een modal */
  --z-mobile:      1300;
  --z-offline:     1350;
  --z-loadbar:     1400;

  /* Radii — designregels A101: 4 (badge/inline) / 8 (controls) /
     12 (kaarten) / 16 (popups) / vol. Geen tussenmaten. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;
}

/* A254 — de accentvarianten afgeleid van --hc-lime, zodat een klant met een
   eigen huisstijl bij hover, press en accenttekst zijn eigen kleur ziet in
   plaats van Flowskraft-saffraan. Bewust achter @supports: de statische
   waarden in :root hierboven zijn precies de kleuren van vóór deze PR, dus een
   browser zonder relatieve kleursyntax verandert niets in plaats van stil een
   ongeldige waarde door te geven (en dan valt zo'n regel terug op transparant).
   Gemeten op Flowskraft-saffraan (#E26F2C), ink-tekst #14110B:
     hover #CF5E13 -> 4,72:1 (was 4,41 en daarmee onder AA)
     press #BC4C00 -> 3,74:1 (was 3,07)
     tekst #BA4A00 -> 5,16:1 op wit, 4,51:1 op bone (was 4,28 / 3,74)
   De lichtheidsgrens 0.55 op de tekstrol houdt ook een licht merk leesbaar:
   limoen #ACBD15 wordt #6E7B00 (4,67:1) i.p.v. 2,63:1. */
@supports (color: oklch(from #000 l c h)) {
  :root {
    --hc-accent-hover: oklch(from var(--hc-lime) calc(l - 0.055) c h);
    --hc-accent-press: oklch(from var(--hc-lime) calc(l - 0.11) c h);
    --hc-accent-text:  oklch(from var(--hc-lime) min(l, 0.55) c h);
  }
}

/* ── RESET ───────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  color: var(--hc-ink);
  font-family: var(--body-font);
  background: var(--hc-paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hc-mono {
  font-family: var(--mono-font);
  letter-spacing: 0.05em;
}

/* ── TYPE ────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--heading-font);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--hc-ink);
}

h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1rem;    font-weight: 700; }

p { margin: 0; line-height: 1.6; }

.eyebrow {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-muted);
  margin: 0 0 6px;
  font-family: var(--body-font);
}

.lead, .panel-copy, .project-location {
  color: var(--hc-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ── LOGIN VIEW ──────────────────────────────────────────── */
.login-view {
  /* PR106: design-system tokens, gescoped op het inlogscherm zodat ze niet
     botsen met de app-brede --hc-* tokens. Waarden = Flowskraft-palet. */
  --bone:           #F4EFE7;
  --ink:            #14110B;
  --ink-200:        #D2C8B5;
  --ink-900:        #14110B;
  --saffron:        #E26F2C;
  --saffron-400:    #E78033;
  --saffron-600:    #C75A1F;
  --saffron-700:    #A2461A;
  --success-500:    #2F8F3F;
  --danger-500:     #D63031;
  --fg-1:           #14110B;
  --fg-2:           #3F392E;
  --fg-3:           #5A5142;
  --fg-4:           #837A65;
  --border-subtle:  #E8E1D3;
  --border-default: #D2C8B5;
  --border-strong:  #ADA28A;
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --dur-micro:      120ms;
  --dur-fast:       180ms;
  --ease-out:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-sm:      0 1px 2px rgba(20, 17, 11, 0.06);

  position: relative;
  min-height: 100vh;
  background: var(--bone);
  color: var(--fg-1);
}

/* layout: twee kolommen — licht formulier + donker merkpaneel */
.login-view .va {
  display: grid;
  grid-template-columns: 600px 1fr;
  min-height: 100vh;
  background: var(--bone);
}

.login-view .va-form-col { padding: 60px 76px; display: flex; flex-direction: column; }
.login-view .va-form-mid { margin-top: auto; margin-bottom: auto; width: 100%; max-width: 392px; }

.login-view .lv-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--saffron-700); margin: 0;
}
.login-view .va-eyebrow { margin-bottom: 14px; }

.login-view .va-title {
  font-family: var(--heading-font);
  font-size: 38px; font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px;
}
.login-view .va-lead { font-size: 16px; line-height: 1.5; color: var(--fg-2); margin: 0 0 30px; }

/* setup-card (config ontbreekt) — past nu op het lichte paneel */
.login-view .setup-card {
  margin: 0 0 20px; padding: 14px 18px;
  border-radius: var(--radius-md); border: 1px solid var(--border-default); background: #fff;
}
.login-view .setup-card h2 { font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.login-view .setup-card p { font-size: 13px; color: var(--fg-3); margin: 0; }

/* formulier */
.login-view .lv-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.login-view .field { display: flex; flex-direction: column; gap: 7px; }
.login-view .field-label { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg-1); }
.login-view .field-wrap { position: relative; display: flex; align-items: center; }
.login-view .field-wrap > svg.lead-ic {
  position: absolute; left: 15px; width: 16px; height: 16px;
  stroke-width: 1.6; color: var(--fg-4); pointer-events: none;
}
.login-view .field-input {
  width: 100%; height: 50px;
  font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 0 44px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
}
.login-view .field-input::placeholder { color: var(--fg-4); }
.login-view .field-input:focus { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(226, 111, 44, 0.16); }
.login-view .field-eye {
  position: absolute; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 0; background: transparent;
  color: var(--fg-3); cursor: pointer; border-radius: var(--radius-xs);
}
/* De knop is 26px met 6px zijpadding; zonder deze regel krimpt het 16px-icoon
   als flex-item mee naar 14px — een tussenmaat die de designregels uitsluiten. */
.login-view .field-eye svg { flex: 0 0 auto; }
.login-view .field-eye:hover { color: var(--fg-1); }

.login-view .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.login-view .link-saffron {
  font-size: 14px; font-weight: 500; color: var(--saffron-600);
  background: transparent; border: 0; padding: 0; cursor: pointer;
  text-decoration: none; text-underline-offset: 3px; font-family: inherit;
}
.login-view .link-saffron:hover { color: var(--saffron-700); text-decoration: underline; }

.login-view .checkbox-line { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.login-view .checkbox-line input { position: absolute; opacity: 0; width: 0; height: 0; }
.login-view .lv-cbx {
  width: 18px; height: 18px; border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong); background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; transition: all var(--dur-fast) var(--ease-out);
}
.login-view .lv-cbx svg { width: 11px; height: 11px; opacity: 0; stroke: var(--bone); stroke-width: 2.4; }
.login-view .checkbox-line input:checked + .lv-cbx { background: var(--saffron); border-color: var(--saffron); }
.login-view .checkbox-line input:checked + .lv-cbx svg { opacity: 1; }
/* A244: gelijkgetrokken met de rest van het portaal — designregel
   "Focus: 2px saffron ring, 2px offset" i.p.v. een eigen 3px halo. */
.login-view .checkbox-line input:focus-visible + .lv-cbx { outline: 2px solid var(--saffron); outline-offset: 2px; }
.login-view .checkbox-label { font-size: 14px; color: var(--fg-2); }

/* A141: Cloudflare Turnstile-slot. Leeg (geen widget) = geen ruimte. */
.login-view .cf-turnstile-slot:not(:empty) { margin: 0; }

.login-view .btn-primary {
  height: 52px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--bone); background: var(--saffron);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.login-view .btn-primary svg { width: 16px; height: 16px; stroke-width: 1.6; }
.login-view .btn-primary:hover { background: var(--saffron-600); }
.login-view .btn-primary:active { background: var(--saffron-700); transform: scale(0.99); }
.login-view .va-submit-gap { margin-top: 4px; }

.login-view .error { color: var(--danger-500); font-size: 13.5px; margin: 0; }
.login-view .error:empty { display: none; }

.login-view .secure-note {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--fg-3); margin-top: 18px;
}
.login-view .secure-note svg { width: 16px; height: 16px; stroke-width: 1.6; color: var(--success-500); }

/* voet: demo-kaart + legal */
.login-view .va-foot { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 392px; }
.login-view .va-demo {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 20px; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.login-view .demo-login-title { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.login-view .demo-login-copy { margin: 0; font-size: 13px; color: var(--fg-3); line-height: 1.45; }
.login-view .btn-outline {
  height: 48px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--ink); background: transparent;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 20px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.login-view .btn-outline svg { width: 16px; height: 16px; stroke-width: 1.6; }
.login-view .btn-outline:hover { border-color: var(--ink); background: rgba(20, 17, 11, 0.03); }

.login-view .demo-login-context {
  margin: 0; padding: 10px 12px;
  border: 1px solid rgba(226, 111, 44, 0.45); border-radius: var(--radius-sm);
  background: rgba(226, 111, 44, 0.10); color: var(--saffron-700);
  font-size: 13px; font-weight: 600; line-height: 1.45;
}

.login-view .va-legal { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--fg-4); }
.login-view .va-legal a { color: var(--fg-3); text-decoration: none; }
.login-view .va-legal a:hover { color: var(--fg-1); }
.login-view .va-legal .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-200); }

/* donker merkpaneel rechts */
.login-view .va-brand { position: relative; overflow: hidden; background: var(--ink-900); }
.login-view .login-slides { position: absolute; inset: 0; z-index: 0; }
.login-view .login-slide {
  position: absolute; inset: 0;
  background-position: center; background-size: cover;
  opacity: 0; transition: opacity 900ms ease;
}
.login-view .login-slide.is-active { opacity: 1; }
.login-view .va-brand-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(20,17,11,0.20) 0%, rgba(20,17,11,0.55) 55%, rgba(20,17,11,0.92) 100%),
    linear-gradient(90deg, rgba(20,17,11,0.45) 0%, rgba(20,17,11,0) 40%);
}
.login-view .va-semi {
  position: absolute; top: 56px; right: 56px; z-index: 3;
  width: 96px; height: 48px; background: var(--saffron); border-radius: 0 0 96px 96px;
}
.login-view .va-brand-content { position: absolute; z-index: 3; left: 64px; right: 64px; bottom: 60px; color: var(--bone); }
.login-view .va-brand-logo { display: block; height: 34px; width: auto; margin-bottom: 30px; }
.login-view .va-brand-statement {
  font-family: var(--heading-font);
  font-size: 44px; line-height: 1.08; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 32px; max-width: 13ch;
  text-wrap: balance; color: var(--bone);
}
.login-view .va-brand-statement em { color: var(--saffron-400); font-style: normal; }
.login-view .va-features { display: flex; flex-direction: column; gap: 13px; max-width: 420px; }
.login-view .va-feature { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(244,239,231,0.88); }
.login-view .va-feature svg { width: 16px; height: 16px; stroke-width: 1.6; color: var(--saffron-400); flex: 0 0 auto; }

/* responsive — onder 980px stapelt het formulier; merkpaneel onderaan */
@media (max-width: 980px) {
  .login-view .va { grid-template-columns: 1fr; }
  .login-view .va-form-col { padding: 48px 32px; }
  .login-view .va-form-mid, .login-view .va-foot { margin-left: auto; margin-right: auto; }
  .login-view .va-brand { min-height: 320px; order: 2; }
}
@media (max-width: 520px) {
  .login-view .va-form-col { padding: 36px 20px; }
  .login-view .va-title { font-size: 30px; }
}
/* Smartphones: het donkere merkpaneel ("Vakmanschap verdient zichtbaarheid")
   volledig weg — het lichte formulierpaneel vult het hele scherm. Zelfde
   breedtegrens als de mobiele-overlay. */
@media (max-width: 700px) {
  .login-view .va-brand { display: none; }
}

/* ── APP SHELL ───────────────────────────────────────────── */

.app-view {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--hc-white);
}

/* ── SIDEBAR (V6, 224px) ─────────────────────────────────── */
.sidebar {
  display: flex;
  flex-direction: column;
  width: 236px;
  min-width: 236px;
  background: var(--hc-navy-deep);
  color: #D9DEE5;
  overflow: visible;
  flex: 0 0 auto;
  transition: width var(--dur-fast) var(--ease-out), min-width var(--dur-fast) var(--ease-out);
  position: relative;
  z-index: 720;
}

.sidebar.is-collapsed { width: 60px; min-width: 60px; }

.sidebar-logo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 64px;
  padding: 16px 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar.is-collapsed .sidebar-logo {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
  column-gap: 0;
}

.sidebar-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  font-family: var(--heading-font);
  color: #fff;
  min-width: 0;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}

/* A206: klantlogo bovenaan de menubalk. Zonder logo blijft .sb-brand-text
   (naam + "portal") staan; met logo wisselen de twee om. */
.sidebar-brand .sb-brand-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  /* Lichte tegel: veel merklogo's zijn met een witte matte geëxporteerd. Direct
     op de donkere zijbalk leest die matte als een witte rand rond het merk; op
     bone valt hij samen met de tegel en blijft het logo leesbaar. */
  background: var(--hc-paper);
}

.sidebar-brand .sb-brand-logo img {
  display: block;
  max-width: 100%;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sidebar-brand .sb-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sidebar-brand .sb-brand-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  /* Lange, meerwoordige tenantnamen netjes laten teruglopen tot max 2 regels. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sidebar-brand .sb-brand-tag {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--hc-lime);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.sidebar.is-collapsed .sidebar-brand {
  display: none;
}

.sidebar-brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.sidebar-brand-mark img {
  display: block;
  width: 28px;
  height: 28px;
  /* A206: zonder object-fit werd een niet-vierkant klantlogo in het 28px-vierkant
     uitgerekt. */
  object-fit: contain;
}

/* A206: ingeklapte mark met een klantlogo krijgt dezelfde lichte tegel als de
   uitgeklapte variant, zodat een witte matte niet als rand op ink leest. */
.sidebar-brand-mark.is-tenant-logo {
  width: 32px;
  height: 32px;
  padding: 3px;
  border-radius: var(--radius-xs);
  background: var(--hc-paper);
}

.sidebar-brand-mark.is-tenant-logo img {
  width: 100%;
  height: 100%;
}

.sidebar.is-collapsed .sidebar-brand-mark {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 52px;
  padding: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border: 1px solid rgba(20, 17, 11, 0.14);
  border-left: 0;
  background: rgba(255, 255, 255, 0.96);
  color: var(--hc-ink);
  box-shadow: 0 12px 22px rgba(19, 39, 58, 0.12);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-6px);
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-medium) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

.sidebar:hover .sidebar-toggle,
.sidebar-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.sidebar-toggle:hover { background: #fff; color: var(--hc-navy-deep); }
.sidebar.is-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.sidebar-nav {
  flex: 1;
  padding: 18px 0 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.nav-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}
.nav-group:last-of-type { margin-bottom: 0; }

.nav-group-label {
  display: block;
  padding: 0 20px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
  font-family: var(--body-font);
}

.sidebar.is-collapsed .nav-group-label { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 38px;
  padding: 0 20px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--body-font);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

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

.nav-item.is-active {
  background: color-mix(in srgb, var(--hc-lime) 10%, transparent);
  color: #fff;
  font-weight: 600;
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--hc-lime);
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.nav-item.is-active .nav-icon { color: var(--hc-lime); }

.sidebar.is-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  font-size: 0;
  gap: 0;
}
.sidebar.is-collapsed .nav-item .nav-label { display: none; }

.tenant-switcher {
  position: relative;
  padding: 0 12px 12px;
}

.tenant-switcher-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.tenant-switcher-button:hover,
.tenant-switcher-button:focus-visible {
  background: rgba(255, 255, 255, 0.09);
}

/* A271: hier stond outline:none op :focus-visible zelf, dus de knop haalde
   actief zijn eigen toetsenbordmarkering weg. -2px offset omdat de knop tegen
   de rand van de zijbalk staat. */
.tenant-switcher-button:focus-visible {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: -2px;
}

.tenant-switcher-mark {
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  place-items: center;
  flex-shrink: 0;
  background: var(--hc-lime);
  color: var(--hc-navy-deep);
  font-family: var(--heading-font);
  font-size: 0.75rem;
  font-weight: 800;
}

.tenant-switcher-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.tenant-switcher-label {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.tenant-switcher-current {
  overflow: hidden;
  color: #fff;
  font-size: 0.81rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-switcher-chevron {
  color: rgba(255, 255, 255, 0.58);
  flex-shrink: 0;
}

.tenant-switcher-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: #171513;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.tenant-switcher-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  font-size: 0.81rem;
  text-align: left;
  cursor: pointer;
}

.tenant-switcher-option:hover,
.tenant-switcher-option.is-active {
  background: color-mix(in srgb, var(--hc-lime) 14%, transparent);
  color: #fff;
}

.tenant-context-note {
  margin: 8px 12px 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  line-height: 1.35;
}

.sidebar.is-collapsed .tenant-switcher {
  padding: 0 8px 10px;
}

.sidebar.is-collapsed .tenant-switcher-text,
.sidebar.is-collapsed .tenant-switcher-chevron,
.sidebar.is-collapsed .tenant-switcher-menu {
  display: none;
}

.sidebar.is-collapsed .tenant-switcher-button {
  justify-content: center;
  min-height: 42px;
  padding: 7px 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-micro) var(--ease-out);
}

.sidebar-user:hover { background: rgba(0, 0, 0, 0.18); }
.sidebar-user:focus-visible { outline: 2px solid var(--hc-accent-text); outline-offset: -2px; }

/* Accountmenu boven het avatar-blok (Accountinstellingen + Uitloggen). */
.sidebar-user-wrap { position: relative; }

.sidebar-user-menu {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 6px);
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  z-index: 60;
}

.sidebar.is-collapsed .sidebar-user-menu {
  left: 6px;
  right: auto;
  min-width: 190px;
}

.sidebar-user-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hc-ink);
  font-family: var(--body-font);
  font-size: 0.81rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar-user-menu button:hover { background: rgba(0, 0, 0, 0.06); }
.sidebar-user-menu button.is-danger { color: var(--danger); }
.sidebar-user-menu button.is-danger:hover { background: rgba(214, 48, 49, 0.08); }

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hc-lime);
  color: var(--hc-navy-deep);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.81rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-user-avatar.has-image {
  background-color: var(--hc-white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sidebar-user-name {
  font-size: 0.81rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--body-font);
}

.sidebar.is-collapsed .sidebar-user { justify-content: center; padding: 12px 0; }
.sidebar.is-collapsed .sidebar-user-info { display: none; }

/* ── MAIN AREA ──────────────────────────────────────────── */
.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--hc-paper);
  /* Positioneringscontext voor de gebruikers-drawer + roloverzicht slide-over (PR-023). */
  position: relative;
}

/* ── STATUSBANNER (demo) ────────────────────────────────── */
.status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 24px;
  font-size: 0.84rem;
}

.status-banner[data-banner-type="demo"] {
  border-bottom: 1px solid color-mix(in srgb, var(--hc-lime) 28%, transparent);
  background: #FFF3EA;
  color: #3F392E;
}

.status-banner strong {
  color: var(--hc-navy-deep);
}

.demo-reset-countdown {
  margin-left: auto;
  color: #765032;
  font-weight: 700;
}

/* De losse .topbar (kruimelpad + acties) is vervallen; zie .toolbar-refresh
   en #new-project-button in de .projects-toolbar. */

/* Ghost button (icon + label) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hc-ink);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.81rem;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}

/* Was een blauwe tint (rgba(27,53,81,…)) uit het palet van vóór Flowskraft;
   nu de warme ink-tint uit de tokens. */
.btn-ghost:hover { background: var(--hc-beton); }

/* Op /welkom staat deze knop als volle-breedte-rij onder "Account activeren";
   .btn-ghost lijnt zijn inhoud standaard links uit. */
#welkom-back { justify-content: center; }

/* Primary square lime button (Nieuw project, Nieuwe post, LinkedIn) */
.btn-lime,
.btn-lime-full {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: var(--hc-lime);
  color: var(--hc-accent-on);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.81rem;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
  letter-spacing: 0.01em;
}

.btn-lime:hover, .btn-lime-full:hover { background: var(--hc-accent-hover); }

.btn-lime-full { width: 100%; justify-content: center; }

/* PR-A: inline-add (klein blokje onder een select om snel een nieuwe optie
   toe te voegen, hergebruikt door het project-formulier voor "Nieuw type"). */
.link-action {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--hc-accent-text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}
.link-action:hover { color: var(--hc-ink); }
.inline-add-block { margin-top: 8px; }
.inline-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inline-add-row input[type="text"] {
  flex: 1 1 200px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: 0.85rem;
}
.inline-add-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: rgba(0,0,0,0.6);
  min-height: 1em;
}
.inline-add-hint.is-error { color: var(--hc-power-red); }

/* PR-A vervolg: Bedrijf-subtab-panel. Hergebruikt .account-tabs voor de
   header-tabrij; alleen de panel-spacing is hier eigen. */
.bedrijf-tab-panel { margin-top: 18px; }

/* PR-A: Projecttypes-beheercard onder Bedrijf. Full-width card met chip-grid;
   1 chip per type wrappable horizontaal zodat 7+ types nooit scrollen. */
.project-types-card { margin-top: 20px; }
.pt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.02);
  font-size: 0.85rem;
  line-height: 1.2;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.pt-chip:hover { background: rgba(0,0,0,0.045); }
.pt-chip.is-archived { opacity: 0.6; }
.pt-chip-label {
  font-weight: 600;
  color: var(--hc-ink);
}
.pt-chip-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(0,0,0,0.55);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.pt-chip-action:hover {
  background: rgba(0,0,0,0.08);
  color: var(--hc-ink);
}
.pt-archived { margin-top: 14px; }
.pt-archived summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: rgba(0,0,0,0.65);
  padding: 4px 0;
}
/* Add-form als inline rij (input + knop naast elkaar) zodat ie geen extra
   verticale ruimte vreet en past binnen de card-breedte. */
.project-types-add-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.project-types-add-form input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: 0.9rem;
}
.project-types-add-form #project-types-feedback {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 0.78rem;
  min-height: 1em;
}

/* Primary square (navy bg, lime text — for LinkedIn post-button) */
.btn-navy-square {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-xs);
  background: var(--hc-navy-deep);
  color: var(--hc-lime);
  border: 0;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.81rem;
  cursor: pointer;
}

.btn-navy-square:hover { background: var(--hc-navy); }

/* Secondary outline button */
.btn-secondary,
.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  color: var(--hc-ink);
  border: 1px solid var(--hc-line);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.81rem;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.btn-secondary:hover, .secondary-button:hover { border-color: var(--hc-ink); }

/* ── KNOP-INTERACTIESTATES (A101) ───────────────────────────
   Hover is één kleurstap (staat per knopsoort hierboven). Press is nog een stap
   plus scale(.98) — dat ontbrak volledig, waardoor een klik geen enkele
   bevestiging gaf. Disabled op 40% opacity.

   Afwijking van de handoff: bone op Flowskraft-saffron haalt maar 2,80:1.
   A288 kiest daarom via --hc-accent-on de bestaande donkere inkt (6,23:1)
   voor lichte accenten en wit voor donkere klantkleuren; gewone tekst blijft
   zo op minimaal AA in plaats van één vaste voorgrond af te dwingen.
   ────────────────────────────────────────────────────────── */
.btn-lime:active,
.btn-lime-full:active,
.btn-ghost:active,
.btn-secondary:active,
.secondary-button:active,
.danger-button:active {
  transform: scale(0.98);
}
/* A254: stond op var(--saffron-700, #A2461A). --saffron-700 is gescoped op
   .login-view en bestaat hier niet, dus dit was in de praktijk altijd die vaste
   hex — een Flowskraft-oranje press-staat op elke klantknop. */
.btn-lime:active, .btn-lime-full:active { background: var(--hc-accent-press); }
.btn-secondary:active, .secondary-button:active { background: var(--hc-beton); }
.btn-ghost:active { background: rgba(20, 17, 11, 0.10); }

.btn-lime[disabled], .btn-lime-full[disabled],
.btn-ghost[disabled],
.btn-secondary[disabled], .secondary-button[disabled],
.danger-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .btn-lime:active, .btn-lime-full:active, .btn-ghost:active,
  .btn-secondary:active, .secondary-button:active, .danger-button:active {
    transform: none;
  }
}

/* Floating feedback */
.feedback-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 760;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--feedback-accent, var(--hc-lime));
  color: var(--feedback-on-accent, var(--hc-white));
  font-size: 1.45rem;
  font-weight: 800;
  cursor: pointer;
}

.feedback-launcher:hover { filter: brightness(0.94); }

.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 820;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay-scrim);
  backdrop-filter: blur(var(--overlay-blur));
}

.feedback-panel {
  width: min(720px, 100%);
  max-height: calc(100% - 40px);
  padding: 24px 28px;
  overflow-y: auto;
  background: var(--hc-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--hc-line);
  border-top: 4px solid var(--feedback-accent, var(--hc-lime));
}

.feedback-panel .drawer-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.feedback-screenshot {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.feedback-screenshot-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.feedback-screenshot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: start;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  min-width: 220px;
}

.feedback-add-button {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--feedback-accent, var(--hc-lime));
  border-radius: 50%;
  background: var(--feedback-accent, var(--hc-lime));
  color: var(--feedback-on-accent, var(--hc-white));
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 3px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20, 17, 11, 0.14);
}

.feedback-add-button:hover { filter: brightness(0.94); }
.feedback-add-button:focus-visible { outline: 2px solid var(--feedback-primary, var(--hc-ink)); outline-offset: 2px; }

.feedback-add-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2;
  width: 220px;
  padding: 8px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: var(--hc-white);
  box-shadow: 0 18px 42px rgba(20, 17, 11, 0.16);
}

.feedback-add-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 15px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--hc-line);
  border-left: 1px solid var(--hc-line);
  background: var(--hc-white);
  transform: rotate(45deg);
}

.feedback-add-menu button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hc-ink);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.feedback-add-menu button:hover,
.feedback-add-menu button:focus-visible {
  background: var(--panel);
}

.feedback-add-menu button:disabled {
  cursor: not-allowed;
  opacity: .68;
}

.feedback-file-input {
  display: none;
}

.feedback-file-button {
  position: relative;
  cursor: pointer;
}

.feedback-dropzone {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  color: var(--hc-muted);
  overflow: hidden;
}

.feedback-dropzone:focus {
  outline: 2px solid var(--feedback-accent, var(--hc-lime));
  outline-offset: 2px;
}

.feedback-overlay.is-capturing {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.feedback-overlay.is-capturing .feedback-panel {
  opacity: 0;
  visibility: hidden;
}

.feedback-canvas {
  width: 100%;
  max-height: 52vh;
  object-fit: contain;
  background: var(--hc-beton);
  cursor: crosshair;
}

.feedback-clear-screenshot {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hc-line);
  border-radius: 50%;
  background: var(--hc-white);
  color: var(--hc-ink);
  box-shadow: 0 8px 20px rgba(20, 17, 11, 0.18);
  cursor: pointer;
}

.feedback-clear-screenshot:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.feedback-clear-screenshot.hidden { display: none; }

.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.feedback-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.feedback-tool-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  color: var(--hc-muted);
  cursor: pointer;
}

.feedback-tool-button:hover,
.feedback-tool-button.is-active {
  border-color: var(--feedback-accent, var(--hc-lime));
  color: var(--feedback-primary, var(--hc-ink));
}

.feedback-actions {
  justify-content: flex-end;
}

.feedback-actions button[type="submit"] {
  width: auto;
  min-width: 120px;
  background: var(--feedback-accent, var(--hc-lime));
  color: var(--feedback-on-accent, var(--hc-white));
}

@media (max-width: 680px) {
  .feedback-launcher { right: 16px; bottom: 16px; }
  .feedback-panel { padding: 20px; }
  .feedback-screenshot-head { grid-template-columns: 1fr; }
  .feedback-screenshot-actions { min-width: 0; justify-content: flex-start; }
  .feedback-add-menu { left: 0; right: auto; }
  .feedback-add-menu::before { left: 15px; right: auto; }
  .feedback-dropzone { min-height: 200px; }
}

/* ── MAIN SECTIONS ──────────────────────────────────────── */
.main-section {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.main-section.active { display: flex; }

#section-overview { position: relative; }

/* ── PROJECTEN: split shell (filter rail + main column) ─── */
.projects-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--hc-paper);
  position: relative;
}

/* ── FLOATING FILTER OVERLAY ─────────────────────────────── */
/* Zwevende Filters-knop + actieve-filter chips + popover, over kaart/lijst. */
/* PR-066: #filter-overlay is geen floating bar meer — alleen nog wrapper
   voor de popover die direct onder de toolbar Filters-knop hangt. */
.filter-overlay { display: contents; }
.filter-overlay-bar { display: none; }

.filter-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  color: var(--hc-ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
  flex-shrink: 0;
}

.filter-fab:hover { border-color: var(--hc-ink); }
.filter-trigger.is-open .filter-fab,
.filter-fab[aria-expanded="true"] { border-color: var(--hc-ink); }
.filter-fab svg { color: var(--hc-lime); }

.filter-fab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--hc-saffron);
  color: var(--hc-accent-on);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.filter-fab-badge.hidden { display: none; }

.filter-active-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-full);
  background: var(--hc-white);
  color: var(--hc-ink);
  font-family: var(--body-font);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 17, 11, 0.08);
  transition: border-color var(--dur-micro) var(--ease-out);
}

.filter-chip:hover { border-color: var(--hc-ink); }
.filter-chip.is-search { font-weight: 500; }
.filter-chip.is-search svg { color: var(--hc-muted); flex-shrink: 0; }

.filter-chip-x {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(20, 17, 11, 0.08);
  color: var(--hc-muted);
  font-size: 0.82rem;
  line-height: 1;
}

.filter-chip:hover .filter-chip-x { background: var(--hc-ink); color: #fff; }

.filter-popover {
  /* PR-066: nu absoluut gepositioneerd onder de Filters-knop in de toolbar. */
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(20, 17, 11, 0.20);
  overflow: hidden;
  z-index: 50;
}

.filter-popover.hidden { display: none; }

.filter-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hc-line);
}

.filter-popover-title {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--hc-ink);
}

.filter-popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hc-muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.filter-popover-close:hover { background: rgba(20, 17, 11, 0.06); color: var(--hc-ink); }

.filter-popover-body {
  flex: 1;
  overflow-y: auto;
}

.filter-popover-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--hc-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A105 filterpresets MVP */
.filter-presets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-presets-label {
  font-size: 12px;
  color: var(--hc-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-preset-select {
  width: 100%;
}
.filter-presets-buttons {
  display: flex;
  gap: 8px;
}
.filter-presets-buttons .secondary-button {
  flex: 1;
  font-size: 13px;
  padding: 6px 8px;
}
.filter-presets-buttons .secondary-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── FILTER RAIL (legacy; element verwijderd, regels ongebruikt) ─ */
.filter-rail {
  width: 240px;
  flex: 0 0 240px;
  background: var(--hc-white);
  border-right: 1px solid var(--hc-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width var(--dur-fast) var(--ease-out), flex-basis var(--dur-fast) var(--ease-out);
}

.filter-rail.is-collapsed {
  width: 52px;
  flex: 0 0 52px;
}

.filter-rail-header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--hc-line);
}

.filter-rail.is-collapsed .filter-rail-header {
  justify-content: center;
  padding: 0;
}

.filter-rail-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading-font);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hc-ink);
}

.filter-rail.is-collapsed .filter-rail-title { display: none; }

.filter-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  border: 0;
  color: var(--hc-muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.filter-rail-toggle:hover { background: rgba(27, 53, 81, 0.06); }
.filter-rail.is-collapsed .filter-rail-toggle { transform: rotate(180deg); }

.filter-rail-body {
  flex: 1;
  overflow-y: auto;
}

.filter-rail.is-collapsed .filter-rail-body { display: none; }

.filter-rail-search {
  padding: 12px 18px;
  border-bottom: 1px solid var(--hc-line);
}

.filter-rail-search-wrap {
  position: relative;
}

.filter-rail-search-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hc-muted);
  pointer-events: none;
}

.filter-rail-search-wrap input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 30px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-xs);
  background: var(--hc-white);
  color: var(--hc-ink);
  font-size: 0.81rem;
}

.filter-rail-search-wrap input::placeholder { color: var(--hc-muted); }
.filter-rail-search-wrap input:focus { border-color: var(--hc-ink); }

.filter-section {
  border-bottom: 1px solid var(--hc-line);
}

.filter-section-header {
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--hc-ink);
  text-transform: uppercase;
  font-family: var(--body-font);
}

.filter-section-chevron {
  color: var(--hc-muted);
  transition: transform var(--dur-micro) var(--ease-out);
  display: inline-flex;
}

.filter-section.is-open .filter-section-chevron { transform: rotate(180deg); }

.filter-section-body {
  padding: 0 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.filter-section:not(.is-open) .filter-section-body { display: none; }

.filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.81rem;
  color: var(--hc-ink);
  cursor: pointer;
  user-select: none;
}

.filter-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filter-check-box {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--hc-line);
  background: var(--hc-white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}

.filter-check-box svg { display: none; stroke: #fff; }

.filter-check input:checked + .filter-check-box {
  background: var(--hc-ink);
  border-color: var(--hc-ink);
}

/* A244: het echte vinkje is onzichtbaar gemaakt, dus de focusring hoort op het
   vervangende vakje. Zonder dit is de filter-popover met Tab onbruikbaar. */
.filter-check input:focus-visible + .filter-check-box {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 2px;
}

.filter-check input:checked + .filter-check-box svg { display: block; }

.filter-check-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hc-muted);
  flex-shrink: 0;
}

.filter-check-dot.is-flowskraft,
.filter-check-dot.is-holcon,
.filter-check-dot.is-bisoton,
.filter-check-dot.is-durison { background: var(--hc-co-holcon); }

.filter-check-label {
  flex: 1;
  font-weight: 500;
}

.filter-check.is-checked .filter-check-label { font-weight: 600; }

.filter-check-count {
  font-size: 0.69rem;
  color: var(--hc-muted);
}

/* Bedrijfslocatie-groep: kleurstip in filter en beheerkaarten. */
.filter-location-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.18);
  vertical-align: middle;
  margin-right: 6px;
}

.filter-empty-hint {
  margin: 0;
  padding: 4px 2px;
  font-size: 0.74rem;
  color: var(--hc-muted);
}

/* Kleurkiezer in het bedrijfslocatie-formulier. */
.color-field input[type="color"] {
  width: 56px;
  height: 34px;
  padding: 2px;
  cursor: pointer;
}

/* Locatielogo-veld in het bedrijfslocatie-formulier. */
.factory-logo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.factory-logo-field .field-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hc-ink);
}

.factory-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.factory-logo-preview {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--hc-line);
  background: var(--hc-bone);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.factory-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.factory-logo-preview.is-empty::after {
  content: "Geen logo";
  font-size: 0.62rem;
  color: var(--hc-muted);
  text-align: center;
  padding: 0 4px;
}

.factory-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.factory-logo-field .field-hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--hc-muted);
}

.filter-rail-footer {
  padding: 14px 18px;
}

.filter-reset-button {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--hc-muted);
  font-family: var(--body-font);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.filter-reset-button:hover { color: var(--hc-ink); }

/* ── MAIN COLUMN (toolbar + list/map) ───────────────────── */
.projects-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--hc-paper);
  /* PR-066: anker voor zwevende bulk-bar en status-toast onderin de lijst. */
  position: relative;
}

.projects-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  /* PR-066: zelfde bone-achtergrond als het overzichtskanvas. */
  background: var(--hc-paper);
  border-bottom: 1px solid var(--hc-line);
  flex-shrink: 0;
  /* sticky boven de lijst zodat rijen er niet onderdoor scrollen. */
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Legacy — niet meer in DOM aanwezig, gehouden om defensief zichtbaarheid te
   blokkeren als een fragment ergens nog wordt geladen. */
.toolbar-count { display: none; }

.toolbar-spacer { flex: 1; }

/* PR-066: aparte zoekbalk in de toolbar */
.toolbar-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 360px;
  min-width: 180px;
}
.toolbar-search-icon {
  position: absolute;
  left: 11px;
  display: inline-flex;
  color: var(--hc-muted);
  pointer-events: none;
}
.toolbar-search input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--hc-ink);
}
.toolbar-search input::placeholder { color: var(--hc-muted); }
/* A271: hier stond outline:none met een eigen 3px halo van 18% saffraan, in een
   vaste rgba die niet met de klantkleur meebewoog. De ring uit de veldregel is
   de designregel-variant (2px, 2px offset) en volgt --hc-lime wél. */
.toolbar-search input:focus { border-color: var(--hc-lime); }

/* PR-066: anker voor de filter-popover (absolute child) */
.filter-trigger {
  position: relative;
  display: inline-flex;
}

/* Chips-rij onder de toolbar (alleen bij actieve filters) */
.filter-chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 20px;
  background: var(--hc-paper);
  border-bottom: 1px solid var(--hc-line-soft);
  flex-shrink: 0;
}
.filter-chips-row.hidden { display: none !important; }
.filter-chips-row .filter-active-chips { gap: 6px; }

.toolbar-sort-wrap {
  position: relative;
}

.toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-xs);
  color: var(--hc-ink);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  position: relative;
}

.toolbar-sort:hover { border-color: var(--hc-ink); }

.toolbar-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  min-width: 180px;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toolbar-sort-menu.hidden { display: none; }

.toolbar-sort-menu button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-family: var(--body-font);
  font-size: 0.81rem;
  color: var(--hc-ink);
  cursor: pointer;
  text-align: left;
}

.toolbar-sort-menu button:hover { background: rgba(27, 53, 81, 0.06); }

.toolbar-sort-menu button .sort-dir {
  color: var(--hc-lime);
  font-weight: 800;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  padding: 0;
  background: var(--hc-white);
  color: var(--hc-muted);
  border: 0;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.view-toggle-btn.is-active {
  background: var(--hc-ink);
  color: #fff;
}

/* Verhuisd uit de vervallen topbar: icoon-only vernieuwen, zelfde maat als
   een view-toggle-knop zodat de rechterkant van de toolbar rustig blijft. */
/* Icoon-only knoppen rechts in de toolbar. .toolbar-notif (meldingenbel) deelt
   letterlijk deze regels zodat beide knoppen naast elkaar identiek ogen. */
.toolbar-refresh,
.toolbar-notif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--hc-muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.toolbar-refresh:hover,
.toolbar-notif:hover {
  background: var(--hc-white);
  border-color: var(--hc-line);
  color: var(--hc-ink);
}

/* De primaire actieknop sluit de toolbar rechts af. */
.projects-toolbar #new-project-button { flex-shrink: 0; }

/* ── LIST VIEW ──────────────────────────────────────────── */
#list-view {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  /* PR-066: filters/tabs zijn nu in de sticky toolbar erboven; geen 64px buffer meer nodig. */
  padding: 0 20px 28px;
  position: relative;
}

#list-view.hidden { display: none !important; }

/* PR-066: rijen liggen flush tegen elkaar; bottom-border per rij. */
.list-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* PR-066: TABS (Projecten / Bedrijfslocaties) ───────────────── */
/* Tabs zitten nu in de sticky .projects-toolbar; geen eigen sticky meer. */
/* Werklijst-tabs. De Projecten-balk is leidend: de Content-balk
   (.content-tabs/.content-tab/.tab-count) deelt exact deze regels zodat de
   twee balken niet opnieuw uit elkaar lopen in maat, uitlijning of kleur. */
.list-tabs,
.content-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.list-tab,
.content-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hc-muted);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.list-tab:hover,
.content-tab:hover { color: var(--hc-ink); }
.list-tab.is-active,
.content-tab.is-active { color: var(--hc-ink); }
.list-tab.is-active::after,
.content-tab.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -11px;
  height: 2.5px;
  background: var(--hc-lime);
  border-radius: 2px;
}
.list-tab-count,
.content-tab .tab-count {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--hc-beton);
  color: var(--hc-muted);
}
.list-tab.is-active .list-tab-count,
.content-tab.is-active .tab-count {
  background: color-mix(in srgb, var(--hc-lime) 16%, transparent);
  color: var(--hc-lime-deep);
}

/* PR-066: KOLOMKOP (sticky in #list-view) ────────────────── */
.list-header {
  display: grid;
  grid-template-columns: 38px 78px minmax(0, 1fr) 132px 178px 110px 116px 168px;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hc-muted);
  background: var(--hc-paper);
  border-bottom: 1px solid var(--hc-line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.list-header .lh-status { text-align: right; }
.list-header.hidden { display: none !important; }

/* Klikbare kolomkoppen voor sortering */
.lh-cell.lh-sortable {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lh-cell.lh-sortable:hover { color: var(--hc-ink); }
.lh-cell.lh-sortable.is-active { color: var(--hc-ink); }
.lh-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.lh-cell.lh-sortable.is-active .lh-arrow { opacity: 1; }
.lh-cell.lh-sortable.is-active.is-desc .lh-arrow { transform: rotate(180deg); }
.lh-arrow::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
}

/* PR-066: WERKLIJST-RIJ (Projecten-tab) ──────────────────── */
.list-row.list-row-project {
  display: grid;
  grid-template-columns: 38px 78px minmax(0, 1fr) 132px 178px 110px 116px 168px;
  align-items: center;
  gap: 14px;
  /* 52px conform de designregels (A101); min-height i.p.v. height zodat
     een rij met subregels (vestigingen onder een locatiegroep) kan groeien. */
  min-height: 52px;
  padding: 8px 14px;
  background: var(--hc-white);
  border: 0;
  border-bottom: 1px solid var(--hc-line-soft);
  border-radius: 0;
  cursor: default;
  transition: background var(--dur-micro) var(--ease-out);
  position: relative;
}
.list-row.list-row-project:hover { background: #FCFAF6; }
.list-row.list-row-project:hover::before,
.list-row.list-row-project.is-selected::before { content: none; }
.list-row.list-row-project.is-checked { background: color-mix(in srgb, var(--hc-lime) 7%, transparent); }
.list-row.list-row-project.is-selected { background: color-mix(in srgb, var(--hc-lime) 7%, transparent); }
.list-row.list-row-project.is-pending  { opacity: 0.75; }

.lr-code {
  font-family: var(--mono-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--hc-muted);
}
.lr-name { min-width: 0; }
.lr-name-title {
  display: block;
  font-family: var(--heading-font);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr-name-sub {
  display: block;
  margin-top: 1px;
  font-size: 0.74rem;
  color: var(--hc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* T21: per-project indicatoren (heeft foto's / deelbaar op de kaart) naast de
   titel. De titel houdt zijn ellipsis (min-width:0 + overflow), de iconen
   krimpen niet mee. */
.lr-name-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.lr-name-head .lr-name-title { min-width: 0; }
.lr-name-ind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.lr-ind {
  display: inline-flex;
  color: var(--hc-muted);
}
.lr-ind svg { display: block; }
/* A278: waar wacht dit project op? Alleen bij een aanvraag uit de app; een
   afgerond project krijgt geen badge, dus de gewone lijst blijft rustig.
   Bewust smaller dan .status-pill: dat is de lopend/opgeleverd-kolom rechts en
   die twee moeten niet om dezelfde aandacht vragen. */
.intake-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Wacht op een besluit van een beheerder: dezelfde tint als 'lopend', want dat
   is hier ook de betekenis - er moet nog iets gebeuren. */
.intake-badge.is-approval { background: var(--hc-status-busy-bg);  color: var(--hc-status-busy-fg);  }
/* Geaccepteerd, maar nog niet af. */
.intake-badge.is-details  { background: var(--hc-status-act-bg);   color: var(--hc-status-act-fg);   }
/* Komt in de werklijst niet voor (geweigerde aanvragen zitten alleen in het
   meldingenpaneel), maar staat er zodat de badge overal dezelfde bron heeft. */
.intake-badge.is-rejected { background: var(--hc-status-draft-bg); color: var(--hc-status-draft-fg); }
.lr-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hc-ink);
}
.lr-loc .company-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lr-loc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr-city {
  font-size: 0.8rem;
  color: var(--hc-ink);
}
.lr-updated {
  font-size: 0.76rem;
  color: var(--hc-muted);
}
.lr-status { display: flex; justify-content: flex-end; }

/* PR-066: CHECKBOX (custom, accent bij aan) ──────────────── */
.cbx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.cbx input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.cbx-box {
  width: 17px;
  height: 17px;
  border: 1.5px solid #ADA28A;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--hc-white);
  transition: all var(--dur-micro) var(--ease-out);
}
.cbx input[type="checkbox"]:checked + .cbx-box {
  background: var(--hc-lime);
  border-color: var(--hc-lime);
  color: #fff;
}
.cbx input[type="checkbox"]:indeterminate + .cbx-box {
  background: var(--hc-lime);
  border-color: var(--hc-lime);
  color: #fff;
}
.cbx input[type="checkbox"]:indeterminate + .cbx-box::after {
  content: "";
  display: block;
  width: 8px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.cbx input[type="checkbox"]:indeterminate + .cbx-box svg { display: none; }

/* A244: idem voor de werklijst-vinkjes (rijselectie + "alles selecteren"). */
.cbx input[type="checkbox"]:focus-visible + .cbx-box {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 2px;
}

/* PR-066: STATUS-FLIP-KNOP ────────────────────────────────── */
.status-flip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-md);
  position: relative;
  font-family: inherit;
}
.status-flip:disabled { cursor: not-allowed; opacity: 0.6; }
.status-flip .flip-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  overflow: hidden;
  color: var(--hc-muted);
  opacity: 0;
  transition: all var(--dur-fast) var(--ease-out);
  margin-left: 0;
}
.list-row.list-row-project:hover .status-flip .flip-ic {
  width: 18px;
  opacity: 1;
  margin-left: 5px;
}
.status-flip:hover .status-pill {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc-lime) 40%, transparent);
}
.status-flip:hover .flip-ic { color: var(--hc-lime-deep); }
.status-flip:focus-visible {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* PR-066: PAGER ──────────────────────────────────────────── */
.list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px;
  background: var(--hc-white);
  border-top: 1px solid var(--hc-line);
  flex-shrink: 0;
}
.list-pager.hidden { display: none !important; }
.list-pager .pg-range { font-size: 0.82rem; color: var(--hc-muted); }
.list-pager .pg-range strong { color: var(--hc-ink); }
.list-pager .pg-ctrls { display: flex; align-items: center; gap: 10px; }
.list-pager .pg-pages { font-size: 0.8rem; color: var(--hc-muted); font-weight: 600; }
.list-pager .pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--hc-line);
  background: var(--hc-white);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hc-ink);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
  font-family: inherit;
}
.list-pager .pg-btn:hover:not(:disabled) { border-color: var(--hc-ink); }
.list-pager .pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* A316: regels per pagina. De keuzelijst staat links van de paginateller,
   omdat je hem gebruikt vóór je gaat bladeren en niet erna.
   Let op: `input, select, textarea` verderop in dit bestand zet elk veld op
   width 100% met 9px padding (zie de gotcha in de vault). Die regel weegt
   0,0,1 en de selector hieronder 0,2,1, dus die wint — maar `width` en
   `height` moeten wel expliciet terug, anders duwt de keuzelijst Vorige en
   Volgende uit beeld. */
.list-pager .pg-size {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.list-pager .pg-size > span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hc-muted);
}
.list-pager .pg-size select {
  width: auto;
  height: 32px;
  padding: 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* PR-066: BULK-BAR ───────────────────────────────────────── */
.bulk-bar {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--hc-ink);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 12px 10px 18px;
  box-shadow: 0 14px 40px rgba(20, 17, 11, 0.32);
  z-index: 35;
}
.bulk-bar.hidden { display: none !important; }
.bulk-bar .bb-count { font-size: 0.85rem; font-weight: 600; }
.bulk-bar .bb-count strong { font-weight: 800; }
.bulk-bar .bb-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.18); }
.bulk-bar .bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  transition: background var(--dur-micro) var(--ease-out);
}
.bulk-bar .bb-btn.bb-done { background: #2F8F3F; color: #fff; }
.bulk-bar .bb-btn.bb-done:hover { background: #27843a; }
.bulk-bar .bb-btn.bb-busy { background: rgba(255, 255, 255, 0.12); color: #fff; }
.bulk-bar .bb-btn.bb-busy:hover { background: rgba(255, 255, 255, 0.2); }
.bulk-bar .bb-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.bulk-bar .bb-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* A295/A294: icoonknoppen in de selectiebalk (foto's, prullenbak). Zelfde maat
   en gedrag als .bb-x, maar met een eigen hover zodat een handeling niet als
   "sluiten" leest. */
.bulk-bar .bb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.bulk-bar .bb-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); }
.bulk-bar .bb-icon:active:not(:disabled) { transform: scale(0.98); }
.bulk-bar .bb-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.bulk-bar .bb-icon.hidden { display: none !important; }
.bulk-bar .bb-icon.bb-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }

/* PR-066: STATUS-TOAST ───────────────────────────────────── */
/* Rechtsboven conform de designregels (A101); stond onderaan-midden. Fixed
   i.p.v. absolute, want hij hangt niet langer aan de lijstcontainer. */
.status-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  left: auto;
  bottom: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--hc-ink);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 11px 11px 11px 16px;
  box-shadow: 0 14px 40px rgba(20, 17, 11, 0.32);
  z-index: var(--z-toast);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  max-width: 520px;
}
.status-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.status-toast.hidden { display: none !important; }
.status-toast.is-error .status-toast-icon { background: var(--hc-status-busy-dot); }
.status-toast-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2F8F3F;
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.status-toast-message { font-size: 0.85rem; }
.status-toast-message strong { font-weight: 700; }
.status-toast-undo {
  background: transparent;
  border: 0;
  color: var(--hc-lime);
  font-weight: 700;
  font-size: 0.83rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-family: inherit;
}
.status-toast-undo.hidden { display: none !important; }
.status-toast-undo:hover { background: color-mix(in srgb, var(--hc-lime) 16%, transparent); }
.status-toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.status-toast-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* PR-066: BEDRIJFSLOCATIE-RIJ — iets ruimer dan een projectrij, maar slank. */
.location-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  background: var(--hc-white);
  border: 0;
  border-bottom: 1px solid var(--hc-line-soft);
  border-radius: 0;
  padding: 10px 14px;
  margin: 0;
  transition: background var(--dur-micro) var(--ease-out);
  cursor: pointer;
}
.location-row:hover { background: #FCFAF6; }
.location-row.is-selected { background: color-mix(in srgb, var(--hc-lime) 7%, transparent); }
/* Op de Alles-tab: subtiele top-scheiding tussen projectblok en locatieblok. */
.list-row.list-row-project + .location-row { border-top: 1px solid var(--hc-line); margin-top: 8px; padding-top: 14px; }
.loc-row-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  overflow: hidden;
}
.loc-row-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.loc-row-main { min-width: 0; }
.loc-row-name {
  display: block;
  font-family: var(--heading-font);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-row-address {
  display: block;
  margin-top: 1px;
  font-size: 0.76rem;
  color: var(--hc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-row-count {
  font-size: 0.79rem;
  color: var(--hc-muted);
  white-space: nowrap;
}
.loc-row-count strong {
  color: var(--hc-ink);
  font-weight: 700;
  font-size: 0.88rem;
}

/* PR-066: RESPONSIVE — verberg 'Bijgewerkt' kolom < 1180px */
@media (max-width: 1180px) {
  .list-header,
  .list-row.list-row-project {
    grid-template-columns: 34px 70px minmax(0, 1fr) 120px 150px 100px 150px;
  }
  .list-header .lh-updated,
  .list-row.list-row-project .lr-updated { display: none; }
}

/* ── Legacy list-row (oude renderer, niet meer gebruikt door PR-066) ── */
.list-row {
  display: grid;
  grid-template-columns: 88px 1fr 150px 130px 120px 90px;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.list-row:hover { border-color: var(--hc-ink); }

.list-row.is-selected { border-color: var(--hc-ink); }

.list-row.is-selected::before,
.list-row:hover::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--hc-lime);
  border-radius: 0 2px 2px 0;
}

.list-row:hover::before { background: transparent; }
.list-row.is-selected::before { background: var(--hc-lime); }

.list-cell-code {
  font-family: var(--mono-font);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--hc-muted);
}

.list-cell-primary { min-width: 0; }
.list-cell-primary .list-title {
  display: block;
  font-family: var(--heading-font);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--hc-ink);
  line-height: 1.2;
}
.list-cell-primary .list-subtitle {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--hc-muted);
}

.list-cell-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.81rem;
  color: var(--hc-ink);
  font-weight: 600;
}

.list-cell-meta .company-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--hc-co-holcon);
}

.list-cell-meta .company-dot.is-flowskraft,
.list-cell-meta .company-dot.is-holcon,
.list-cell-meta .company-dot.is-bisoton,
.list-cell-meta .company-dot.is-durison { background: var(--hc-co-holcon); }

.list-cell-city {
  font-size: 0.81rem;
  color: var(--hc-ink);
}

.list-cell-status {
  display: flex;
  justify-content: flex-end;
}

/* ── PRIMITIVES: TypePill / StatusPill ──────────────────── */
.type-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-family: var(--body-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: transparent;
  color: var(--hc-ink);
  border: 1px solid var(--hc-line);
}

.type-pill.is-soft {
  background: var(--hc-beton);
  border-color: transparent;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-md);
  font-family: var(--body-font);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}

.status-pill.is-opgeleverd { background: var(--hc-status-done-bg);  color: var(--hc-status-done-fg);  }
.status-pill.is-lopend     { background: var(--hc-status-busy-bg);  color: var(--hc-status-busy-fg);  }
.status-pill.is-lopend::before { background: var(--hc-status-busy-dot); }
.status-pill.is-actief     { background: var(--hc-status-act-bg);   color: var(--hc-status-act-fg);   }
.status-pill.is-draft      { background: var(--hc-status-draft-bg); color: var(--hc-status-draft-fg); }
.status-pill.is-draft::before { background: var(--hc-status-draft-dot); }
.status-pill.is-ready      { background: var(--hc-status-done-bg);  color: var(--hc-status-done-fg);  }
.status-pill.is-published  {
  background: var(--hc-navy);
  color: var(--hc-lime);
}
.status-pill.is-published::before { background: var(--hc-lime); }

/* ── MFA / Security tab (PR-014) ──────────────────────────── */
.status-pill[data-mfa-state="active"]   { background: var(--hc-status-done-bg);  color: var(--hc-status-done-fg);  }
.status-pill[data-mfa-state="active"]::before { background: var(--hc-status-done-fg); }
.status-pill[data-mfa-state="pending"]  { background: var(--hc-status-busy-bg);  color: var(--hc-status-busy-fg);  }
.status-pill[data-mfa-state="pending"]::before { background: var(--hc-status-busy-fg); }
.status-pill[data-mfa-state="off"]      { background: var(--hc-status-draft-bg); color: var(--hc-status-draft-fg); }
.status-pill[data-mfa-state="off"]::before { background: var(--hc-status-draft-fg); }
.status-pill[data-mfa-state="loading"]  { background: var(--hc-status-draft-bg); color: var(--hc-status-draft-fg); opacity: 0.7; }

.account-callout {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--hc-status-busy-bg);
  color: var(--hc-status-busy-fg);
  font-size: 0.85rem;
  line-height: 1.4;
}

.mfa-factor-list {
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mfa-factor-list .mfa-factor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--hc-border);
  border-radius: var(--radius-md);
  background: var(--hc-bone);
}

.mfa-factor-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}

.mfa-factor-meta strong { font-weight: 600; }
.mfa-factor-meta span   { color: var(--hc-ink-soft); }

.mfa-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.mfa-enroll-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.mfa-enroll-qr {
  display: flex;
  justify-content: center;
}

.mfa-enroll-qr img {
  max-width: 220px;
  height: auto;
  border: 1px solid var(--hc-border);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: #fff;
}

.mfa-secret {
  display: block;
  padding: 8px 12px;
  background: var(--hc-bone);
  border-radius: var(--radius-sm);
  font-family: var(--mono-font);
  font-size: 0.85rem;
  word-break: break-all;
  user-select: all;
}

/* Designregel: "Acties rechtsonder, primair uiterst rechts." */
.mfa-enroll-actions,
.mfa-challenge-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── PROJECT CODE BADGE (drawer/detail legacy) ──────────── */
.project-code-badge {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--hc-navy-deep);
  color: var(--hc-lime);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  margin-bottom: 6px;
}

/* ── MAP VIEW ───────────────────────────────────────────── */
#map {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

#map.hidden { display: none !important; }

/* ── EMPTY STATE ────────────────────────────────────────── */
/* ── LEGE STATEN ────────────────────────────────────────────
   Designregels A101: icoon in een bone-cirkel (56px, compact 44px), één zin,
   maximaal één actie. Geen actie als de gebruiker er niets aan kan doen.
   Bewust geen kaart meer: een leegstaat is geen inhoud, dus geen wit vlak met
   rand — dat suggereerde dat er iets stond.
   ────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  margin: 0;
}
.empty-state.is-compact { padding: 28px 24px; }

.empty-illustration {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--hc-paper);
  /* --border-subtle bestaat alleen binnen .login-view (PR106); app-breed is
     --hc-line-soft dezelfde waarde (#E8E1D3). Met de gescopete token viel de
     rand terug op currentColor en werd hij veel te donker. */
  border: 1px solid var(--hc-line-soft);
  display: grid;
  place-items: center;
  color: var(--hc-muted);
  margin-bottom: 16px;
}
.empty-state.is-compact .empty-illustration { width: 44px; height: 44px; }
.empty-illustration svg { width: 24px; height: 24px; }
.empty-state.is-compact .empty-illustration svg { width: 20px; height: 20px; }

.empty-state h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hc-ink);
}
.empty-state.is-compact h3 { font-size: 0.94rem; }
.empty-state p {
  margin: 6px 0 0;
  max-width: 380px;
  color: var(--hc-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}
/* Maximaal één actie; staat er toch een tweede, dan valt die op in review. */
.empty-state > button,
.empty-state > .btn-lime,
.empty-state > .btn-secondary { margin-top: 20px; }

/* ── FOUTSTATEN (404 / 403 / 500 / offline) ─────────────────
   Het grote getal staat op de saffraan Flow-halfcirkel — in de handoff
   aangewezen als de enige flourish per compositie. De navigatie blijft staan;
   de primaire knop leidt altijd terug naar een werkende plek.
   ────────────────────────────────────────────────────────── */
.fs-errorstate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 24px;
}
.fs-errorstate-mark {
  position: relative;
  margin-bottom: 8px;
}
.fs-errorstate-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 112px;
  height: 56px;
  border-radius: 112px 112px 0 0;
  background: var(--hc-status-act-bg);
}
.fs-errorstate-code {
  position: relative;
  display: block;
  font-family: var(--heading-font);
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--hc-ink);
  font-variant-numeric: tabular-nums;
}
.fs-errorstate-mark > svg {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  margin: 20px 24px;
  color: var(--hc-ink);
}
.fs-errorstate h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hc-ink);
}
.fs-errorstate p {
  margin: 8px 0 0;
  max-width: 420px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--hc-muted);
}
.fs-errorstate-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

/* ── ALERT ──────────────────────────────────────────────────
   Hoort bij de pagina en blijft staan (in tegenstelling tot de toast, die een
   zojuist uitgevoerde actie bevestigt). Getint vlak met gekleurd icoon,
   radius 12, bewust géén linker-accentrand.
   ────────────────────────────────────────────────────────── */
.fs-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--hc-ink);
  background: var(--hc-status-act-bg);
}
.fs-alert svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.fs-alert.is-info    { background: #ECF1F8; }
.fs-alert.is-info    svg { color: #355999; }
.fs-alert.is-success { background: var(--hc-status-done-bg); }
.fs-alert.is-success svg { color: var(--success); }
.fs-alert.is-warning { background: var(--hc-status-busy-bg); }
.fs-alert.is-warning svg { color: var(--hc-status-busy-dot); }
.fs-alert.is-danger  { background: #FBEBE9; }
.fs-alert.is-danger  svg { color: var(--danger); }

/* Offline-melding: vast onderin, buiten de leesstroom, zodat een korte
   verbindingsdip niet het scherm overneemt en lopend werk niet wegvalt. */
.fs-offline-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: var(--z-offline);
  max-width: min(520px, calc(100vw - 32px));
  box-shadow: var(--shadow-md);
}

/* ── PROJECT DETAIL PAGE (full page replaces drawer) ────── */
#section-project-detail.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--hc-paper);
}

.detail-header-block {
  padding: 22px 32px 18px;
  background: var(--hc-white);
  border-bottom: 1px solid var(--hc-line);
  flex-shrink: 0;
}

.detail-subheader {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--hc-muted);
  margin-bottom: 10px;
}

.detail-back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--hc-muted);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
}

.detail-back-button:hover { background: rgba(27, 53, 81, 0.06); color: var(--hc-ink); }

.detail-subheader .bullet { opacity: 0.4; }

.detail-subheader .detail-code {
  font-family: var(--mono-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--hc-muted);
}

.detail-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.detail-title-block h1 {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--heading-font);
  color: var(--hc-ink);
  letter-spacing: -0.02em;
  margin: 0;
}

.detail-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--hc-muted);
  flex-wrap: wrap;
}

.detail-meta-row .meta-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-meta-row .bullet {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hc-muted);
  opacity: 0.6;
  flex-shrink: 0;
}

.detail-meta-row .company-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--hc-co-holcon);
}

.detail-meta-row .company-dot.is-flowskraft,
.detail-meta-row .company-dot.is-holcon,
.detail-meta-row .company-dot.is-bisoton,
.detail-meta-row .company-dot.is-durison { background: var(--hc-co-holcon); }

.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 24px 32px 32px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.detail-photos-section { min-width: 0; }

.detail-photos-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-photos-header h3 {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--heading-font);
  color: var(--hc-ink);
}

.detail-photos-meta {
  font-size: 0.75rem;
  color: var(--hc-muted);
}

.detail-photos-meta strong { color: var(--hc-ink); font-weight: 700; }

.detail-photos-meta .upload-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--hc-navy);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
}

.detail-photos-meta .upload-link:hover { color: var(--hc-ink); }

/* Asymmetric photo grid (5-cell hero + thumbs) */
.detail-photos-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 6px;
}

.dpg-cell {
  border-radius: var(--radius-xs);
  background-color: var(--hc-beton);
  background-position: center;
  background-size: cover;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.dpg-cell.is-hero { grid-row: 1 / span 2; }

/* Laadfeedback: zolang de (signed) thumbnail nog niet geladen is, toont de cel
   een shimmer-skeleton i.p.v. een blanco grijs vlak. renderDetailPhotoCell
   verwijdert .is-loading zodra de afbeelding via een Image()-preload binnen is. */
.dpg-cell.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--hc-beton) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    var(--hc-beton) 70%
  );
  background-size: 200% 100%;
  animation: dpg-shimmer 1.2s ease-in-out infinite;
}
@keyframes dpg-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dpg-cell.is-loading::after { animation: none; }
}

/* A291: de databaserij bestaat nog, het bestand niet meer (query 3 uit de
   wezenmeting). Zonder deze regel is dat niet te onderscheiden van een
   thumbnail die nog moet laden. renderDetailPhotoCell zet .is-missing zodra de
   Image()-preload faalt. */
.dpg-cell.is-missing::after {
  content: "Foto niet beschikbaar";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6px;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--hc-muted);
  background-color: var(--hc-beton);
}

.dpg-cell.is-plus {
  display: grid;
  place-items: center;
  color: var(--hc-muted);
  font-size: 0.69rem;
  font-weight: 600;
  cursor: pointer;
}

.dpg-cell.is-plus:hover { color: var(--hc-ink); background-color: var(--hc-line); }
.dpg-cell.is-plus:focus-visible { outline: 2px solid var(--hc-ink); outline-offset: -2px; }

.dpg-cell.is-upload {
  background: var(--hc-beton);
  border: 1.5px dashed var(--hc-line);
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--hc-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.dpg-cell.is-upload:hover { border-color: var(--hc-ink); color: var(--hc-ink); }

/* Sleep-en-neerzet: hele fotogrid licht op zodra er bestanden overheen worden gesleept. */
.detail-photos-grid.is-dragover { outline: 2px dashed var(--hc-lime); outline-offset: 3px; border-radius: var(--radius-sm); }
.detail-photos-grid.is-dragover .dpg-cell.is-upload { border-color: var(--hc-lime); color: var(--hc-ink); background: var(--hc-paper); }

.dpg-cell.is-empty {
  background: var(--hc-beton);
  cursor: default;
}

/* Video-tegel (T11): gedempte <video> als poster + play-badge. */
.dpg-cell.is-video { background: var(--hc-ink); }
.dpg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.dpg-play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 17, 11, 0.55);
  color: var(--hc-white);
  pointer-events: none;
}

.dpg-remove {
  position: absolute;
  /* Boven de ::after-overlay van .is-missing, anders is juist de tegel die
     opgeruimd moet worden niet aan te klikken (A291). */
  z-index: 1;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: rgba(20, 17, 11, 0.75);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.dpg-cell:hover .dpg-remove { opacity: 1; }

/* Right-column meta sidebar */
.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.detail-card {
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 18px;
}

.detail-card .eyebrow { margin-bottom: 12px; }

.detail-meta-list .meta-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--hc-line-soft);
  font-size: 0.81rem;
}

.detail-meta-list .meta-row:first-child { border-top: 0; padding-top: 0; }

.detail-meta-list .meta-key {
  color: var(--hc-muted);
  font-weight: 500;
}

.detail-meta-list .meta-value {
  color: var(--hc-ink);
  font-weight: 600;
  text-align: right;
}

.detail-meta-list .meta-value.is-mono {
  font-family: var(--mono-font);
  letter-spacing: 0.05em;
}

/* A326: contactpersonen bij de opdrachtgever, op de projectpagina.
   Naam boven, rol eronder, nummer als aantikbare regel — in die volgorde,
   omdat je eerst wil weten wie je belt en dan pas het nummer nodig hebt. */
.detail-contacts .detail-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--hc-line-soft);
}
.detail-contacts .detail-contact:first-child { border-top: 0; padding-top: 0; }
.detail-contacts .dc-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hc-ink);
}
.detail-contacts .dc-role {
  font-size: 0.78rem;
  color: var(--hc-muted);
}
.detail-contacts .dc-phone {
  margin-top: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hc-lime);
  align-self: flex-start;
}
.detail-contacts .dc-phone:hover { border-bottom-color: var(--hc-ink); }
/* Nummer waar na het opschonen geen cijfer van overblijft: wel tonen, niet
   als link — een knop die niets doet is erger dan platte tekst. */
.detail-contacts .dc-phone.is-plain {
  border-bottom: 0;
  color: var(--hc-muted);
  font-weight: 500;
}

/* A326: het contactblok in het projectformulier (stap 3). */
.project-contacts {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--hc-line-soft);
}
.project-contacts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.project-contacts-head strong { display: block; font-size: 0.88rem; }
.project-contacts-head .panel-copy { margin: 2px 0 0; }
.project-contacts-head .btn-secondary { flex-shrink: 0; }
.project-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Naam, rol en telefoon naast elkaar, met het verwijderkruis als vierde kolom.
   Telefoon krijgt een vaste maat: dat veld heeft een voorspelbare lengte,
   naam en rol niet. */
.project-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 150px 32px;
  gap: 10px;
  align-items: end;
}
.project-contact-row label { margin: 0; }
.project-contact-remove {
  height: 38px;
  width: 32px;
  border: 1px solid var(--hc-line);
  background: var(--hc-white);
  border-radius: var(--radius-sm);
  color: var(--hc-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.project-contact-remove:hover { color: var(--danger); border-color: var(--danger); }
.project-contacts-empty { margin: 0; }
.project-contacts-privacy { margin-top: 10px; font-size: 0.78rem; }

@media (max-width: 720px) {
  .project-contact-row { grid-template-columns: minmax(0, 1fr) 32px; }
  .project-contacts-head { flex-direction: column; }
}

/* LinkedIn callout (dark accent card) */
.detail-linkedin-card {
  background: var(--hc-navy-deep);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 18px;
  border: 0;
}

.detail-linkedin-card .eyebrow { color: var(--hc-lime); }

.detail-linkedin-card h4 {
  font-size: 0.94rem;
  font-weight: 700;
  font-family: var(--heading-font);
  margin: 6px 0 8px;
  color: #fff;
}

.detail-linkedin-card p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0 0 14px;
}

.linkedin-multi-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.linkedin-multi-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--hc-lime) 70%, transparent);
  background: color-mix(in srgb, var(--hc-lime) 14%, transparent);
}

.linkedin-multi-star {
  color: var(--hc-lime);
  font-size: 0.95rem;
  line-height: 1;
}

.detail-linkedin-card .btn-lime-full { background: var(--hc-lime); color: var(--hc-accent-on); }

/* Download link inside meta card */
.detail-download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(27, 53, 81, 0.06);
  color: var(--hc-ink);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.81rem;
  text-decoration: none;
  width: 100%;
  justify-content: center;
}

.detail-download-link:hover { background: rgba(27, 53, 81, 0.12); }
.detail-download-link.hidden { display: none; }

/* Generic detail upload form (drawer remnant; rarely shown) */
.detail-upload-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hc-line-soft);
}

/* ── CONTENT SECTION (drafts) ───────────────────────────── */
/* De balk spiegelt .projects-toolbar: zelfde hoogte, padding, bone-vlak en
   onderlijn, zodat de tabs op dezelfde x-positie staan en het actieve
   streepje (.content-tab.is-active::after, bottom: -11px) op de onderlijn
   landt. Tab-typografie en het telbolletje komen uit de gedeelde
   .list-tab-regels hierboven. */
.content-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--hc-paper);
  border-bottom: 1px solid var(--hc-line);
  flex-shrink: 0;
}

/* Zoekveld gelijk aan .toolbar-search op het overzicht; alleen de plek
   verschilt (rechts uitgelijnd achter de spacer i.p.v. naast de tabs). */
.content-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 300px;
  min-width: 180px;
}

.content-search-wrap .search-icon {
  position: absolute;
  left: 11px;
  display: inline-flex;
  color: var(--hc-muted);
  pointer-events: none;
}

.content-search-wrap input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--hc-ink);
}

.content-search-wrap input::placeholder { color: var(--hc-muted); }
/* A271: zie .toolbar-search input:focus — zelfde vaste halo, zelfde oplossing. */
.content-search-wrap input:focus { border-color: var(--hc-lime); }

.content-drafts-grid {
  flex: 1;
  overflow-y: auto;
  padding: 22px 32px 30px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
  align-content: start;
  background:
    linear-gradient(rgb(246, 245, 241), rgb(236, 234, 226)),
    linear-gradient(rgb(228, 229, 224) 1px, transparent 1px),
    linear-gradient(90deg, rgb(228, 229, 224) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

.content-draft-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(27, 53, 81, 0.1);
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Bewust GEEN min-height (A208). Een opgegeven min-height vervangt de
     inhoud-gebaseerde minimumhoogte van dit rasteritem, waardoor de rij niet
     meer meegroeit met de kaart zodra de lijst langer is dan het scherm. De
     kaart werd dan platgedrukt en de tekstregel zakte in tot een halve regel.
     Met auto meet de rij op de deploy preview 218px (en 270px met een
     tweeregelige projectnaam) in plaats van 176px. */
  cursor: pointer;
  box-shadow: 0 18px 36px rgba(27, 53, 81, 0.08);
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.content-draft-card:hover {
  border-color: rgba(27, 53, 81, 0.24);
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(27, 53, 81, 0.12);
}

.cdc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cdc-platform-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cdc-platform-tile {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(10, 102, 194, 0.1);
  color: #0A66C2;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cdc-meta {
  font-size: 0.72rem;
  color: #5A5142;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cdc-title {
  font-size: 1.08rem;
  font-weight: 700;
  font-family: var(--heading-font);
  color: #14110B;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Kop toont het projectnummer: zelfde mono-behandeling als in de werklijst en op het projectdetail. */
.cdc-title.is-code {
  font-family: var(--mono-font);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.cdc-kicker {
  margin: -4px 0 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5A5142;
}

.cdc-multi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--hc-beton);
  color: var(--hc-ink);
  font-size: 0.69rem;
  font-weight: 700;
}

/* Exact een volledige regel: geen verticaal afgekapte laatste regel meer (A208).
   flex: 0 0 auto is hier geen opsmuk maar de kern van de fix. Door `overflow: hidden`
   vervalt de automatische minimumhoogte van dit flex-item, waardoor het inzakte tot
   de restruimte in de kaart -- precies de half zichtbare regel uit Koens melding.
   Zonder deze regel meet de regel op de deploy preview 12px in plaats van 22px. */
.cdc-preview {
  font-size: 0.84rem;
  color: #5A5142;
  line-height: 1.62;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cdc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 53, 81, 0.08);
  margin-top: auto;
}

.cdc-location {
  font-size: 0.77rem;
  color: #5A5142;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cdc-actions { display: flex; gap: 4px; }

.cdc-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--hc-muted);
  cursor: pointer;
}

.cdc-action-btn:hover { background: rgba(27, 53, 81, 0.06); color: var(--hc-ink); }
.cdc-action-btn[disabled],
.cdc-action-btn.is-busy { opacity: 0.5; cursor: progress; pointer-events: none; }
.cdc-stamp-toggle img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.36;
}
.cdc-stamp-toggle.is-on img { opacity: 1; }
/* ── LAADSTATEN ─────────────────────────────────────────────
   Drie bouwstenen, conform de designregels A101:
   - laadbanner (3px, boven in beeld) bij navigatie en zware queries
   - spinner alleen in knoppen (16) en kleine vlakken (20/28)
   - skeleton spiegelt de echte layout, in warme ink-tinten
   Nooit banner en skeleton in hetzelfde vlak; de navigatie blijft altijd staan.
   ────────────────────────────────────────────────────────── */

/* Laadbanner. Zonder .is-determinate loopt de balk onbepaald door; met
   --progress (0-100) vult hij naar rechts — die variant alleen bij uploads. */
.fs-loadbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hc-beton);
  overflow: hidden;
  z-index: 1400;
}
.fs-loadbar::before {
  content: "";
  display: block;
  height: 100%;
  width: 38%;
  background: var(--hc-lime);
  border-radius: 2px;
  animation: fs-loadbar 1.2s var(--ease-out) infinite;
}
/* --progress komt als percentage binnen (bv. "40%"), niet als kaal getal:
   calc(<getal> * 1%) wordt niet overal als geldig geaccepteerd en laat de
   declaratie dan stilletjes terugvallen op de onbepaalde 38%-balk. */
.fs-loadbar.is-determinate::before {
  width: var(--progress, 0%);
  border-radius: 0;
  animation: none;
  transition: width var(--dur-medium) var(--ease-out);
}
@keyframes fs-loadbar {
  from { transform: translateX(-110%); }
  to   { transform: translateX(370%); }
}

/* Spinner: saffraan boog op een ink-100 baan. Maten 16 / 20 / 28. */
.fs-spinner,
.btn-spinner,
.cdc-action-btn .cdc-spin {
  display: inline-block;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--hc-beton);
  border-top-color: var(--hc-lime);
  animation: cdc-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.fs-spinner.is-md { width: 20px; height: 20px; border-width: 2.5px; }
.fs-spinner.is-lg { width: 28px; height: 28px; border-width: 3px; }
/* Op een donkere of saffraan ondergrond mist de ink-100 baan contrast. */
.fs-spinner.on-dark,
button.btn-lime .btn-spinner,
button.btn-primary .btn-spinner {
  border-color: rgba(255, 255, 255, 0.32);
  border-top-color: #fff;
}
@keyframes cdc-spin { to { transform: rotate(360deg); } }

/* setButtonBusy() vervangt de knopinhoud tijdelijk door spinner + "Bezig…".
   min-width bevriest de knopbreedte zodat de layout niet verspringt. */
button.is-busy {
  cursor: progress;
  opacity: 0.85;
}

/* Skeleton: spiegelt de echte layout, warme ink-tinten, nooit koud grijs. */
.fs-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--hc-beton) 25%, #EFE9DD 45%, var(--hc-beton) 65%);
  background-size: 200% 100%;
  animation: fs-shimmer 1.4s var(--ease-out) infinite;
}
@keyframes fs-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Lijst-skeleton: zelfde rasterhoogte als .list-row, max 6 rijen. */
.fs-skeleton-rows { display: grid; gap: 1px; }
.fs-skeleton-rows .fs-skeleton { height: 44px; border-radius: 0; }
.fs-skeleton-rows .fs-skeleton:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.fs-skeleton-rows .fs-skeleton:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .fs-loadbar::before,
  .fs-skeleton { animation: none; }
  .fs-loadbar::before { width: 100%; }
}

/* ── EDITOR OVERLAY ─────────────────────────────────────── */
.editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay-scrim);
  backdrop-filter: blur(var(--overlay-blur));
}

.editor-panel {
  width: min(720px, 100%);
  max-height: calc(100% - 40px);
  padding: 24px 28px;
  overflow-y: auto;
  background: var(--hc-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--hc-line);
}

.editor-panel .drawer-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.editor-panel h2 { font-size: 1.25rem; margin-bottom: 4px; }

.editor-panel.is-project-create {
  width: min(720px, 100%);
  padding-bottom: 0;
}

.editor-panel.is-project-edit {
  padding-bottom: 0;
}

/* ── PR-074c: DELEN-POPUP + KAART-DEELICOON ─────────────── */
/* Modal-frame op portaalniveau zodat de chrome direct goed staat; de dl-*
   inhoud wordt door delen.css (lazy) gestyled zodra de module rendert. */
.delen-overlay {
  position: fixed;
  inset: 0;
  z-index: 820;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay-scrim);
  backdrop-filter: blur(var(--overlay-blur));
}

.delen-modal-panel {
  position: relative;
  /* Lijstmodus: hoogte volgt de inhoud tot een plafond; #delen-root scrolt. */
  width: min(720px, 100%);
  height: auto;
  max-height: min(88vh, 820px);
  background: var(--hc-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hc-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 70px -16px rgba(20, 17, 11, 0.30), 0 8px 18px -8px rgba(20, 17, 11, 0.10);
}

/* Wizard-modus: vaste 940x600 met linker stappenbalk; #delen-root vult het
   frame en scrolt niet (elke stap past). */
.delen-modal-panel.is-wizard {
  width: min(940px, 100%);
  height: min(600px, 92vh);
  max-height: 92vh;
  transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out);
}

/* Statistieken (03-09-2026): breder dan de lijst, want een grafiek van 720px
   met dertig staafjes leest als een streepjescode. Anders dan de wizard blijft
   #delen-root hier zijn eigen scroller: dit scherm is bewust langer dan het
   venster - de kerncijfers staan boven, de verdieping daaronder. */
.delen-modal-panel.is-stats {
  width: min(1000px, 96vw);
  height: min(760px, 92vh);
  max-height: 92vh;
  transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out);
}

/* Selectie-stap: groot (pagina-formaat) venster; daarna weer 940x600. */
.delen-modal-panel.is-wizard.is-selecting {
  width: min(1100px, 96vw);
  height: min(820px, 94vh);
  max-height: 94vh;
}

#delen-root {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 26px;
}

.delen-modal-panel.is-wizard #delen-root {
  padding: 0;
  overflow: hidden;
}

.dl-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(20, 17, 11, 0.06);
  color: var(--hc-ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.dl-modal-close:hover { background: rgba(20, 17, 11, 0.12); }

body.delen-open { overflow: hidden; }

/* Deel-icoon rechtsboven op de kaart: alleen het share-teken, geen achtergrond
   (besluit Andries 2026-06-13). Subtiele witte halo voor leesbaarheid op tiles. */
.map-share-control.map-share-control {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 6px;
  margin: 10px 10px 0 0;
  cursor: pointer;
  color: var(--hc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 2px rgba(244, 239, 231, 0.95)) drop-shadow(0 1px 1px rgba(244, 239, 231, 0.95));
}

.map-share-control:hover { color: var(--hc-accent-text); }
.map-share-control.hidden { display: none; }

/* ── KAARTSTIJL-KIEZER (2026-09-03) ─────────────────────────
   Rechtsonder, boven de zoomknoppen. De knop volgt bewust dezelfde vorm als
   het deel-icoon rechtsboven (kaal icoon met een lichte halo, zodat hij op elke
   tegelstijl leesbaar blijft); het uitklapmenu is een gewone popup-kaart. */
.map-style-control.map-style-control {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0 10px 8px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.map-style-toggle {
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--hc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 2px rgba(244, 239, 231, 0.95)) drop-shadow(0 1px 1px rgba(244, 239, 231, 0.95));
  transition: color var(--dur-micro) var(--ease-out);
}
.map-style-toggle:hover { color: var(--hc-accent-text); }
.map-style-toggle:focus-visible { outline: 2px solid var(--hc-accent-text); outline-offset: 2px; }

.map-style-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  width: 244px;
  background: var(--hc-paper);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(20, 17, 11, 0.18);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.map-style-menu.hidden { display: none; }

.map-style-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hc-muted);
  padding: 2px 6px 7px;
}

.map-style-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--hc-ink);
  transition: background var(--dur-micro) var(--ease-out);
}
.map-style-option:hover { background: var(--hc-beton); }
.map-style-option:focus-visible { outline: 2px solid var(--hc-accent-text); outline-offset: -2px; }
.map-style-option.is-active { background: color-mix(in srgb, var(--hc-lime) 16%, transparent); }

.map-style-option > span:nth-child(2) { flex: 1; min-width: 0; display: block; }
.map-style-option strong { display: block; font-size: 0.86rem; font-weight: 600; }
.map-style-option strong + span {
  display: block;
  font-size: 0.76rem;
  color: var(--hc-muted);
  line-height: 1.35;
}

/* Staaltje in de kleuren van de stijl zelf. Bewust geen echte tegel: dat zou
   drie netwerkcalls per menu-open kosten voor een vlakje van 30px. De echte
   tegelpreview staat in de deel-wizard, waar de keuze naar buiten gaat. */
.map-style-swatch {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hc-line);
}
.map-style-swatch--light { background: linear-gradient(135deg, #f7f6f4 0%, #e6e3dd 55%, #d3cfc7 100%); }
.map-style-swatch--voyager { background: linear-gradient(135deg, #fbf7ef 0%, #e8ddc7 45%, #cbd9c4 100%); }
.map-style-swatch--dark { background: linear-gradient(135deg, #3a3a3c 0%, #26262a 55%, #131316 100%); }

.map-style-check { display: none; flex: none; color: var(--hc-accent-text); }
.map-style-option.is-active .map-style-check { display: flex; }

/* Op een donkere kaart valt de lichte halo onder de kaartknoppen weg en wordt
   ink onleesbaar. Beide keren dan om. */
body.map-style-dark .map-share-control.map-share-control,
body.map-style-dark .map-style-toggle {
  color: var(--hc-paper);
  filter: drop-shadow(0 0 2px rgba(20, 17, 11, 0.95)) drop-shadow(0 1px 1px rgba(20, 17, 11, 0.95));
}
body.map-style-dark .map-share-control.map-share-control:hover,
body.map-style-dark .map-style-toggle:hover { color: var(--hc-lime); }

/* ── IMAGE OVERLAY / FOTOVIEWER ─────────────────────────── */
/* Fullscreen viewer op een 80%-zwarte achtergrond. De pagina eronder
   scrolt nooit (body.viewer-open); binnen de viewer scrolt alleen de
   thumbnail-galerij rechts (en de panelen intern als ze te hoog worden). */
body.viewer-open { overflow: hidden; }

.image-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(10, 8, 5, 0.8);
  backdrop-filter: blur(8px);
  color: var(--hc-paper);
  overflow: hidden;
}

.viewer-shell {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Linkerhelft: grote foto + infobar + details-paneel */
.viewer-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 28px 24px 24px 28px;
}

.viewer-media {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer-media img,
.viewer-media video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.viewer-media-empty {
  font-size: 0.92rem;
  color: rgba(244, 239, 231, 0.65);
}

.viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  line-height: 1;
  display: grid;
  place-items: center;
  background: rgba(20, 17, 11, 0.72);
  color: var(--hc-paper);
  border: 1px solid rgba(244, 239, 231, 0.22);
  border-radius: 50%;
}

.viewer-nav:hover { border-color: var(--hc-lime); color: var(--hc-lime); }
.viewer-nav-prev { left: 8px; }
.viewer-nav-next { right: 8px; }

/* Selectie-bolletje: subtiel op de foto/thumb, saffraan als geselecteerd */
.viewer-select-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(244, 239, 231, 0.85);
  background: rgba(20, 17, 11, 0.45);
  color: transparent;
}

.viewer-select-dot:hover { border-color: var(--hc-lime); }

.viewer-select-dot.is-selected {
  background: var(--hc-lime);
  border-color: var(--hc-lime);
  color: var(--hc-white);
}

.viewer-stage-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

.viewer-infobar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px 0;
  flex-shrink: 0;
}

.viewer-counter {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 239, 231, 0.6);
}

.viewer-filename {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hc-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.viewer-bar-spacer { flex: 1; }

.viewer-ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(244, 239, 231, 0.85);
  background: transparent;
  border: 1px solid rgba(244, 239, 231, 0.22);
  border-radius: var(--radius-sm);
}

.viewer-ghost-button:hover { border-color: var(--hc-lime); color: var(--hc-lime); }
.viewer-ghost-button[aria-expanded="true"] { border-color: var(--hc-lime); color: var(--hc-lime); }
.viewer-ghost-button[aria-expanded="true"] .viewer-chevron { transform: rotate(180deg); }
.viewer-chevron { transition: transform var(--dur-fast) var(--ease-out); }

.viewer-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--hc-white);
  background: var(--hc-lime);
  border-radius: var(--radius-md);
}

/* Openklapbaar metadata-paneel onder de grote foto */
.viewer-info-panel {
  flex-shrink: 0;
  max-height: 34vh;
  overflow-y: auto;
  margin-top: 12px;
  padding: 14px 18px;
  background: rgba(20, 17, 11, 0.85);
  border: 1px solid rgba(244, 239, 231, 0.14);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 24px;
}

.viewer-meta-item { min-width: 0; }

.viewer-meta-item .k {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(244, 239, 231, 0.55);
  margin-bottom: 2px;
}

.viewer-meta-item .v {
  display: block;
  font-size: 0.86rem;
  color: var(--hc-paper);
  overflow-wrap: break-word;
}

/* Rechterhelft: filter + scrollbare thumbnail-galerij */
.viewer-rail {
  width: 312px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 28px 22px 24px;
  border-left: 1px solid rgba(244, 239, 231, 0.12);
}

.viewer-rail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 40px; /* ruimte voor de sluitknop rechtsboven */
  flex-shrink: 0;
}

.viewer-rail-count {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(244, 239, 231, 0.75);
}

/* Filterpaneel: neemt de volledige rechterkolom in (galerij tijdelijk
   verborgen), zodat alle filters zonder scrollen zichtbaar zijn.
   overflow-y is alleen een vangnet voor erg lage schermen. */
.viewer-filter-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 12px;
  padding: 14px;
  background: rgba(20, 17, 11, 0.85);
  border: 1px solid rgba(244, 239, 231, 0.14);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.viewer-filter-field { display: flex; flex-direction: column; gap: 4px; }

.viewer-filter-field label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(244, 239, 231, 0.55);
}

.viewer-filter-panel select {
  width: 100%;
  padding: 7px 9px;
  font-size: 0.84rem;
  color: var(--hc-paper);
  background: rgba(10, 8, 5, 0.6);
  border: 1px solid rgba(244, 239, 231, 0.22);
  border-radius: var(--radius-sm);
}

/* A271: de fotoviewer staat op een donker vlak; daar was de licht oplichtende
   rand het enige focussignaal en dat verdween achter de outline:none. */
.viewer-filter-panel select:focus { border-color: var(--hc-lime); }

.viewer-filter-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 3px;
}

.viewer-filter-result {
  font-size: 0.78rem;
  color: rgba(244, 239, 231, 0.6);
}

.viewer-thumbs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
  /* A314: zonder dit worden de rijen samengeperst zodra de tegels niet meer in
     de zichtbare railhoogte passen. De rail heeft een vaste hoogte (flex: 1 in
     een geknipte kolom) en `grid-auto-rows: auto`; Chrome verdeelt de beschikbare
     hoogte dan over het aantal rijen in plaats van te laten overlopen, terwijl
     elke tegel zichzelf via `aspect-ratio` op 90 px blijft tekenen. Gemeten in de
     rail van 578 px: 4 tegels rijafstand 105,7 px - 12 tegels 100 px - 20 tegels
     60,8 px - 40 tegels 30,4 px - 60 tegels 20,3 px, dus vanaf 20 tegels
     overlappen ze elkaar tot ~80 px. `align-content: start` hierboven voorkomt
     dat niet; `max-content` wel, en het verandert niets zolang alles past. */
  grid-auto-rows: max-content;
  padding-right: 2px;
}

/* A314: dezelfde rail, maar als leesbare namenlijst zodra er meer foto's zijn
   dan in één oogopslag passen (VIEWER_THUMB_FIT in app.js). Miniaturen helpen
   alleen zolang je ze allemaal ziet; daarna kosten ze laadtijd zonder iets toe
   te voegen. Hier staat geen enkele afbeelding, dus is er ook niets te laden. */
.viewer-thumbs.is-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.viewer-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(20, 17, 11, 0.7);
}

.viewer-thumb img,
.viewer-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.viewer-thumb:hover { border-color: rgba(244, 239, 231, 0.45); }
.viewer-thumb.is-active { border-color: var(--hc-lime); }

.viewer-thumb .viewer-select-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  z-index: 2;
}

/* A295: welk project hoort bij deze foto. Alleen aanwezig in de galerij over
   meerdere projecten; in een gewone projectgalerij zet renderViewerThumbs deze
   regel niet neer. Zelfde donkere ondergrond als de videobadge hiernaast, zodat
   het bijschrift op elke foto leesbaar blijft. */
.viewer-thumb-project {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 7px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  color: var(--hc-paper);
  background: rgba(20, 17, 11, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 1;
}

/* A314: een regel in de lijstweergave. Draagt ook `.viewer-thumb`, dus staan
   hier de eigenschappen die daarvan teruggedraaid moeten worden: geen
   beeldverhouding, geen donker fotovlak, geen 2 px rand. */
.viewer-thumb-row {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 8px;
  text-align: left;
  background: transparent;
  border-width: 1px;
  overflow: hidden;
}

.viewer-thumb-row:hover { background: rgba(244, 239, 231, 0.08); border-color: transparent; }

.viewer-thumb-row.is-active {
  background: rgba(244, 239, 231, 0.12);
  border-color: var(--hc-lime);
}

.viewer-thumb-rowtext {
  flex: 1;
  min-width: 0; /* anders duwt een lange bestandsnaam het bolletje weg */
}

.viewer-thumb-rowtitle,
.viewer-thumb-rowfile {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer-thumb-rowtitle {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--hc-paper);
}

.viewer-thumb-rowfile {
  font-size: 0.72rem;
  line-height: 1.3;
  color: rgba(244, 239, 231, 0.6);
}

/* In de lijst staat het bolletje in de regel mee, niet over een foto heen. */
.viewer-thumb-row .viewer-select-dot {
  position: static;
  flex-shrink: 0;
}

.viewer-thumb-video-badge {
  position: absolute;
  z-index: 2; /* boven het projectbijschrift hierboven */
  left: 7px;
  bottom: 7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--hc-white);
  background: rgba(20, 17, 11, 0.7);
  border-radius: 50%;
  pointer-events: none;
}

.viewer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--hc-paper);
  background: rgba(20, 17, 11, 0.72);
  border: 1px solid rgba(244, 239, 231, 0.22);
  border-radius: 50%;
}

.viewer-close:hover { border-color: var(--hc-lime); color: var(--hc-lime); }

/* Selectiebalk onderin zodra er foto's geselecteerd zijn */
.viewer-selectbar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(20, 17, 11, 0.94);
  border: 1px solid rgba(244, 239, 231, 0.18);
  border-radius: var(--radius-sm);
  max-width: calc(100% - 48px);
}

.viewer-selectbar-count {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--hc-paper);
  white-space: nowrap;
}

.viewer-bar-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--hc-paper);
  background: rgba(244, 239, 231, 0.1);
  border: 1px solid rgba(244, 239, 231, 0.26);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.viewer-bar-button:hover { border-color: var(--hc-lime); color: var(--hc-lime); }

/* Designregel: "Focus: 2px saffron ring, 2px offset". De knop stond hier op de
   UA-ring van de browser; die verschilt per browser en is op dit bijna-zwarte
   vlak niet dezelfde markering als de rest van het portaal. Kleur is
   --hc-accent-text, net als de andere focusringen in dit bestand: één ring, en
   die haalt ook op de donkere balk ruim de 3:1 die een focusmarkering nodig
   heeft (4,3:1 bij Flowskraft-saffraan). */
.viewer-bar-button:focus-visible {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 2px;
}

.viewer-bar-button.is-primary {
  color: var(--hc-white);
  background: var(--hc-lime);
  border-color: var(--hc-lime);
}

.viewer-bar-button.is-primary:hover {
  color: var(--hc-white);
  background: var(--hc-accent-hover);
  border-color: var(--hc-accent-hover);
}

.viewer-bar-button:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (max-width: 860px) {
  .viewer-shell { flex-direction: column; }
  .viewer-stage { padding: 18px 16px 10px; }
  .viewer-rail {
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 10px 16px 16px;
    border-left: none;
    border-top: 1px solid rgba(244, 239, 231, 0.12);
  }
  .viewer-media { min-height: 38vh; }
  .viewer-thumbs { grid-template-columns: repeat(3, 1fr); }
  .viewer-info-panel { max-height: 26vh; }
}

/* ── BUTTONS (general fallback) ─────────────────────────── */
button {
  cursor: pointer;
}

.drawer-icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--hc-ink);
  border-radius: var(--radius-xs);
}

.drawer-icon-button:hover { background: rgba(27, 53, 81, 0.06); }

/* Primaire submit-knoppen in merkstijl (was native grijs in de invite-modal,
   branding en het locatie-formulier). Bewust per formulier gescoped: login- en
   feedbackform hebben eigen submit-styling. Kleuren via tokens zodat
   Pro-tenantbranding automatisch doorwerkt.

   B3: hoogte 36 -> 38px. De maatvoeringsronde A101 (PR #187) zette knoppen op
   38px, maar deze regel en .danger-button hieronder bleven op 36 staan. In een
   knoprij naast een .secondary-button (38px) scheelde dat zichtbaar twee pixel. */
#admin-form button[type="submit"],
#password-form button[type="submit"],
#user-form button[type="submit"],
#factory-form button[type="submit"],
#ai-profile-form button[type="submit"],
#tenant-branding-form button[type="submit"] {
  background: var(--hc-lime);
  color: var(--hc-navy-deep);
  border: 0;
  border-radius: var(--radius-sm);
  height: 38px;
  padding: 0 18px;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.81rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#admin-form button[type="submit"]:hover,
#password-form button[type="submit"]:hover,
#user-form button[type="submit"]:hover,
#factory-form button[type="submit"]:hover,
#ai-profile-form button[type="submit"]:hover,
#tenant-branding-form button[type="submit"]:hover { background: var(--hc-accent-hover); }

.danger-button {
  background: var(--hc-white);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  height: 38px; /* B3: zie de opmerking bij de submit-knoppen hierboven. */
  padding: 0 14px;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.81rem;
  cursor: pointer;
}

.danger-button:hover { background: var(--danger); color: #fff; }

/* ── FORMS ──────────────────────────────────────────────── */
.stack-form { display: grid; gap: 14px; }

.stack-form label {
  display: grid;
  gap: 6px;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--hc-ink);
  font-family: var(--body-font);
}

/* Veldhoogte 38px conform de designregels (A101), gelijk aan de knophoogte zodat
   een veld met een knop ernaast op één lijn staat. Alleen op input en select:
   een textarea moet kunnen groeien, die houdt zijn padding en min-height. */
input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  color: var(--hc-ink);
  background: var(--hc-white);
  font-family: var(--body-font);
  font-size: 0.86rem;
  /* Deze outline:none geldt voor élk veldtype in het portaal. Zet er geen
     component-eigen outline:none naast: de vervanging staat verderop bij
     input:focus-visible (A244/A271) en die dekt alles. */
  outline: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

/* A244: een vinkje is geen invoerveld. De veldregel hierboven gold ook voor
   checkbox en radio: het akkoordvinkje op "Voorwaarden en privacy" mat daardoor
   429 x 13 px en duwde zijn eigen tekst naar de regel eronder. Elke checkbox in
   het portaal moest die breedte zelf terugzetten (delen.css, platform.css en
   drie plekken hier) en wie dat vergat kreeg de bug terug. Vanaf hier staat het
   één keer goed en hoeft een nieuw vinkje niets meer te repareren.
   Radius 4 en de merkkleur als accent sluiten aan op de custom vinkjes
   (.cbx-box / .filter-check-box) elders in het portaal. */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  padding: 0;
  accent-color: var(--hc-lime);
  cursor: pointer;
}

input[type="checkbox"] { border-radius: var(--radius-xs); }
input[type="radio"]    { border-radius: var(--radius-full); }

/* Tweede helft van A244, en die weegt zwaarder: de veldregel zet outline:none
   en er stond geen vervanging tegenover. Een toetsenbordgebruiker zag dus
   nergens in het portaal waar hij stond op een vinkje — WCAG 2.4.7.
   Designregel: "Focus: 2px saffron ring, 2px offset".

   A271: hetzelfde gold nog voor tekstinvoer, select en textarea. A244 heeft
   destijds alleen checkbox en radio meegenomen, terwijl de outline:none in de
   veldregel hierboven voor álle velden geldt. Wie met Tab door een formulier
   liep zag alleen de rand ink worden — een kleurverschil van 1px dat op een
   bone-achtergrond nauwelijks opvalt en dat op de dark-mode selects in de
   fotoviewer helemaal verdwijnt. Vanaf hier krijgt elk veldtype dezelfde ring
   als het vinkje.
   :focus-visible en niet :focus. Voor tekstinvoer en textarea maakt dat geen
   verschil — die matchen :focus-visible ook bij een muisklik, omdat ze
   toetsenbordinvoer aannemen. Het verschil zit bij select: die krijgt de ring
   alleen als je er met Tab op landt, en niet bij het openklappen met de muis.

   De ringkleur is --hc-accent-text en niet --hc-lime. Een focusring moet 3:1
   halen tegen wat eromheen ligt; --hc-lime is de rúwe klantkleur en komt op wit
   uit op 3,13:1 bij Flowskraft-saffraan en 1,60:1 bij een geel merk. We zouden
   de ring hier dus op honderdveertig velden aanzetten en hem bij een lichte
   huisstijl meteen weer onzichtbaar maken. --hc-accent-text is dezelfde kleur
   met een lichtheidsgrens en blijft bij elke merkkleur boven de 4,4:1. Alle
   negen focusringen in dit bestand gebruiken hem, zodat er één ring is en geen
   twee. De dropzone-dragover houdt --hc-lime: dat is geen focusmarkering maar
   de saffraan-rand uit de designregels. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 2px;
}

/* Optionele velden worden gemarkeerd, verplichte niet — een formulier waarin
   alles verplicht lijkt, leest als meer werk dan het is. */
.field-optional {
  font-weight: 400;
  color: var(--hc-muted);
}

input::placeholder, textarea::placeholder { color: var(--hc-muted); }

input:focus, select:focus, textarea:focus { border-color: var(--hc-ink); }

/* Generieke veld-hint (o.a. onder logo/favicon in de Branding-tab). De
   scoped varianten (.factory-logo-field .field-hint etc.) blijven leidend. */
.field-hint {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--hc-muted);
  line-height: 1.35;
}

/* Bedrijfsprofiel-textareas: comfortabele hoogte en niet-vette invoertekst. */
#ai-profile-form textarea {
  min-height: 58px;
  resize: vertical;
  font-weight: 400;
  line-height: 1.4;
}
/* Het bedrijfsprofiel is een enkele kolom met korte tekstvelden; op de
   verbrede Bedrijf-pagina (1120px) blijven die anders onnodig breed. Houd de
   kaart op een comfortabele invulbreedte (de grid-tabs gebruiken wel de
   volledige breedte).
   A271: de designregel voor formulieren is "kolom max 480px"; de kaart stond op
   680px en gaf daarmee een velkolom van 630px. 480 + 2x24px kaartpadding houdt
   de velden precies op de regel. Geldt voor alle vijf de velden in de kaart. */
.ai-profile-card {
  max-width: 528px;
}
#ai-profile-form { max-width: 480px; }

/* File-inputs in merkstijl: de native kies-knop volgt de huisstijl-tokens,
   de bestandsnaam-tekst krijgt ruimte i.p.v. af te kappen. */
input[type="file"] {
  padding: 6px;
  font-size: 0.78rem;
  color: var(--hc-muted);
}

input[type="file"]::file-selector-button {
  background: var(--hc-white);
  color: var(--hc-ink);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  margin-right: 12px;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover { border-color: var(--hc-ink); }

textarea { resize: vertical; min-height: 60px; }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.button-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.admin-button-row { align-items: stretch; }

.project-wizard-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  gap: 0;
  margin: 0 10px 4px;
  padding: 4px 0 0;
}

.project-wizard-progress::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--hc-line);
}

.project-wizard-progress button {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hc-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

.project-wizard-progress button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--hc-line);
  border-radius: var(--radius-full);
  background: var(--hc-white);
  color: var(--hc-ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.project-wizard-progress button em {
  font-style: normal;
  line-height: 1.1;
}

.project-wizard-progress button.is-active,
.project-wizard-progress button.is-complete {
  color: var(--hc-ink);
}

.project-wizard-progress button.is-active span,
.project-wizard-progress button.is-complete span {
  border-color: var(--hc-lime);
  background: var(--hc-lime);
  color: var(--hc-navy-deep);
}

.project-wizard-step {
  display: grid;
  gap: 10px;
}

.project-wizard-form.is-project-create .project-wizard-step {
  display: none;
  min-height: 330px;
}

.project-wizard-form.is-project-create .project-wizard-step.is-active {
  display: grid;
  align-content: start;
}

.project-wizard-form.is-project-edit .project-wizard-step-head {
  display: none;
}

.project-wizard-form.is-project-edit .project-wizard-step + .project-wizard-step {
  padding-top: 14px;
  border-top: 1px solid var(--hc-line);
}

.project-wizard-step-head {
  display: grid;
  gap: 3px;
  margin-bottom: 0;
}

.project-wizard-step-head h3 {
  font-size: 1.05rem;
}

.project-wizard-step-head .panel-copy {
  max-width: 560px;
  color: var(--hc-muted);
  font-size: 0.8rem;
}

.project-briefing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.project-briefing-grid textarea {
  min-height: 42px;
  resize: none;
}

.project-factory-select-field {
  margin-bottom: -2px;
}

.project-wizard-form.is-project-create .project-factory-select-field {
  display: none;
}

.project-wizard-form.is-project-edit .project-factory-options {
  display: none;
}

.project-factory-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.project-factory-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  color: var(--hc-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

.project-factory-option:hover {
  border-color: var(--hc-ink);
}

.project-factory-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-factory-option.is-selected {
  border-color: var(--hc-lime);
  background: var(--hc-status-act-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc-lime) 18%, transparent);
}

.project-factory-option:focus-visible,
.project-factory-option:focus-within,
.project-nav-arrow:focus-visible,
.project-location-clear:focus-visible {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 2px;
}

.project-factory-logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
}

.project-factory-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-factory-option strong,
.project-factory-option em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-factory-option strong {
  font-size: 0.82rem;
}

.project-factory-option em {
  color: var(--hc-muted);
  font-size: 0.72rem;
  font-style: normal;
}

.project-factory-check {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--hc-line);
  border-radius: var(--radius-full);
  background: var(--hc-white);
}

.project-factory-option.is-selected .project-factory-check {
  border-color: var(--hc-lime);
  background: var(--hc-lime);
  box-shadow: inset 0 0 0 4px var(--hc-white);
}

.project-wizard-summary {
  display: grid;
  gap: 12px;
}

.project-wizard-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.project-wizard-summary-row {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  /* T13: sta toe dat de grid-cel krimpt zodat lange waarden binnen het vak wrappen. */
  min-width: 0;
}

.project-wizard-summary-row span {
  color: var(--hc-muted);
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.project-wizard-summary-row strong {
  color: var(--hc-ink);
  font-size: 0.88rem;
  /* T13: lange, spatieloze waarden (adres/titel/klantnaam) breken binnen het vak
     i.p.v. buiten de kaders te lopen op het controle-scherm van de projectwizard. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.project-wizard-summary-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-paper);
  min-width: 0;
}

.project-wizard-summary-note strong {
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.project-wizard-summary-note span {
  color: var(--hc-muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

/* Koen 5: de derde kolom stond vast op 56px (de maat van een navigatiepijl),
   dus "Project aanmaken" moest in 142px passen en brak over twee regels. De
   kolom volgt nu de inhoud: bij een pijl is dat 40px, bij de knop zijn eigen
   breedte. Designregel: "Acties rechtsonder, primair uiterst rechts." */
.project-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 2px -28px 0;
  padding: 10px 28px 14px;
  border-top: 1px solid var(--hc-line);
  background: var(--hc-white);
}

.project-editor-actions button {
  justify-content: center;
}

/* Koen 7: dit was een 3,1rem tekstglyph met een text-shadow in de merkkleur —
   het las als versiering, niet als knop, en week af van elke andere navigatie
   in het portaal (de deel-wizard gebruikt Lucide-chevrons in een echte knop).
   Nu een Lucide-chevron op standaardmaat 20 in een 38px-knop. De richting die
   Koen aanwees klopt: saffron is de actiekleur, dus de vooruit-pijl blijft
   saffron. Terug is geen primaire actie en staat daarom op fg-2 (ink-600),
   conform "Kleur: fg-2 standaard, saffron-600 actief". */
.project-nav-arrow {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--hc-muted);
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.project-nav-arrow svg { width: 20px; height: 20px; }

.project-nav-arrow:hover { background: var(--hc-beton); color: var(--hc-ink); }

#project-wizard-next { color: var(--hc-lime); }
#project-wizard-next:hover { color: var(--hc-lime-deep); }

#project-wizard-back {
  grid-column: 1;
}

#project-wizard-next,
#save-project-button {
  grid-column: 3;
  justify-self: end;
}

#save-project-button {
  min-width: 142px;
  white-space: nowrap;
}

/* Bewerk-modus: Verwijderen / Reset / Opslaan (Telegram T10, herzien in A269).
   In aanmaak-modus blijft de wizard-grid (nav-pijlen + Opslaan) ongemoeid.

   A269 (Koen 43): de drie knoppen stonden als gelijke, schermvullende vlakken
   met dezelfde 12px ertussen. Verwijderen las daardoor als evenwaardig aan
   Opslaan, terwijl het de foto's en de content van het project meeneemt — dat
   hoort geen misklik van Opslaan af te liggen. De rij is nu een gewone
   dialoogvoet: Verwijderen links op eigen breedte, het paar Reset + Opslaan
   rechts. `margin-right: auto` duwt de vrije ruimte tussen de twee groepen;
   de extra `margin-left` op Reset is de bodem daaronder, zodat de scheiding
   ook in een krappe rij groter blijft dan de 12px tussen Reset en Opslaan.
   Dat volgt tevens de designregel "Acties rechtsonder, primair uiterst
   rechts" die hierboven in aanmaak-modus al gold.

   Geen `order` meer: die verschoof alleen het beeld en liet de tabvolgorde op
   de oude DOM-volgorde staan (Opslaan, Reset, Verwijderen — precies andersom).
   De volgorde staat nu in index.html, dus beeld en focus lopen gelijk op. */
.is-project-edit .project-editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.is-project-edit .project-editor-actions > button {
  flex: 0 0 auto;
  min-width: 0;
}
.is-project-edit #delete-button { margin-right: auto; }
.is-project-edit #reset-form-button { margin-left: 20px; }
.is-project-edit #save-project-button { min-width: 0; }

/* Ready-signaal zonder beweging. Designregels A101: nudges bewegen niet en
   oneindige loops/bounce zijn uitgesloten — was een 3s infinite translateX +
   scale. Nu één kleurstap donkerder, het toegestane state-vocabulaire.
   Selector op id, want #project-wizard-next hierboven zet de kleur ook en een
   id wint van een klasse. */
#project-wizard-next.is-nudging {
  color: var(--hc-lime-deep);
}

.project-location-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.project-location-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.project-location-header strong {
  display: block;
  font-size: 0.86rem;
  color: var(--hc-ink);
}

.project-location-header span,
.project-location-editor .panel-copy {
  font-size: 0.78rem;
  color: var(--hc-muted);
}

.project-location-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-location-buttons button,
.project-location-clear {
  min-height: 34px;
}

.project-location-map-wrap {
  position: relative;
}

.project-location-map {
  height: 184px;
  overflow: hidden;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
}

.project-location-clear {
  position: absolute;
  top: calc(50% - 42px);
  left: calc(50% + 18px);
  z-index: 700;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(19, 40, 54, 0.18);
  color: var(--hc-ink);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.project-location-clear:hover {
  border-color: var(--hc-ink);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* .stack-form label zet display:grid; de checkbox-variant moet inline blijven
   (checkbox naast het label, niet erboven). */
.stack-form label.checkbox-row {
  display: flex;
  align-items: center;
  grid-template-columns: none;
}

/* Maat en focusring staan sinds A244 één keer centraal bij de veldregels. */

.editor-section-label {
  font-size: 0.69rem;
  font-weight: 700;
  font-family: var(--body-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-muted);
  padding: 14px 0 4px;
  border-top: 1px solid var(--hc-line);
  margin-top: 4px;
}

/* ── LINKEDIN MODAL — Variant A redesign (PR-021) ──────────
   Drop-in vervanging van de oude LinkedIn-modal regels.
   Alles is gescoped onder #linkedin-modal en grijpt niet
   buiten de modal in. Het bestaande detail-page knopje
   `.linkedin-multi-toggle` (gebruikt voor #detail-linkedin-multi-toggle)
   blijft intact in zijn eigen blok hierboven.
   ──────────────────────────────────────────────────────── */

#linkedin-modal {
  /* local-only tint, niet in de globale tokens */
  --li-saffron-50: #FBEEE3;
}

/* Overlay */
#linkedin-modal.linkedin-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--overlay-scrim);
  backdrop-filter: blur(var(--overlay-blur));
}

/* Panel (fixed size, no full-modal scroll) */
#linkedin-modal .linkedin-modal-panel {
  width: 900px;
  max-width: calc(100vw - 40px);
  height: 600px;
  max-height: calc(100vh - 48px);
  padding: 0;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(20, 17, 11, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
#linkedin-modal .linkedin-shell-header {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0;
  padding: 17px 22px;
  border-bottom: 1px solid var(--hc-line-soft);
  flex-shrink: 0;
}
#linkedin-modal .linkedin-shell-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  flex: 1;
  min-width: 0;
}
#linkedin-modal .linkedin-shell-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--hc-ink);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
#linkedin-modal .linkedin-shell-title-wrap {
  min-width: 0;
  flex: 1;
}
#linkedin-modal .linkedin-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#linkedin-modal .linkedin-shell-title-wrap h2 {
  margin: 0 0 2px;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hc-ink);
}
#linkedin-modal .linkedin-shell-title-wrap .panel-copy {
  margin: 0;
  font-size: 0.83rem;
  color: var(--hc-muted);
}
#linkedin-modal .linkedin-shell-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hc-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
#linkedin-modal .linkedin-shell-close:hover {
  background: var(--hc-beton);
  color: var(--hc-ink);
}

/* PR-021 banner: bestaand concept hergebruiken */
#linkedin-modal .linkedin-existing-draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 22px;
  background: var(--li-saffron-50);
  border-bottom: 1px solid var(--hc-line-soft);
  flex-shrink: 0;
  flex-wrap: wrap;
}
#linkedin-modal .linkedin-existing-draft-banner.hidden { display: none; }
#linkedin-modal .linkedin-existing-draft-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#linkedin-modal .linkedin-existing-draft-text strong {
  font-size: 0.86rem;
  color: var(--hc-ink);
}
#linkedin-modal .linkedin-existing-draft-text span {
  font-size: 0.78rem;
  color: var(--hc-muted);
}
#linkedin-modal .linkedin-existing-draft-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#linkedin-modal .linkedin-existing-draft-actions .li-icon-btn {
  width: auto;
  height: 34px;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 600;
}
#linkedin-modal .linkedin-existing-draft-actions .linkedin-generate-button {
  width: auto;
  height: 34px;
  padding: 0 14px;
  font-size: 0.84rem;
}

/* Body: rail + editor */
#linkedin-modal .linkedin-modal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
}

/* LEFT RAIL */
#linkedin-modal .linkedin-setup-shell {
  width: 312px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: none;
  border-right: 1px solid var(--hc-line-soft);
  border-radius: 0;
  background: var(--hc-paper);
  box-shadow: none;
}
#linkedin-modal .li-rail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#linkedin-modal .li-field { display: flex; flex-direction: column; }
#linkedin-modal .li-grp-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hc-muted);
  margin-bottom: 9px;
}

/* Tone dropdown */
#linkedin-modal .linkedin-select-wrap { position: relative; }
#linkedin-modal .linkedin-select-wrap select {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 13px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: var(--hc-white);
  color: var(--hc-ink);
  font-family: var(--body-font);
  font-size: 0.88rem;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}
#linkedin-modal .linkedin-select-wrap select:focus { border-color: var(--hc-ink); }
#linkedin-modal .linkedin-select-chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--hc-muted);
}

/* Multi-project = switch row, state via aria-pressed */
#linkedin-modal .linkedin-multi-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: var(--hc-white);
  text-align: left;
  cursor: pointer;
}
#linkedin-modal .li-scope-text { flex: 1; min-width: 0; }
#linkedin-modal .li-scope-text strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hc-ink);
}
#linkedin-modal .li-scope-text span {
  font-size: 0.74rem;
  color: var(--hc-muted);
}
#linkedin-modal .li-switch {
  width: 40px;
  height: 23px;
  border-radius: var(--radius-full);
  background: var(--hc-line);
  position: relative;
  flex-shrink: 0;
  transition: background var(--dur-micro) var(--ease-out);
}
#linkedin-modal .li-switch::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left var(--dur-micro) var(--ease-out);
}
#linkedin-modal .linkedin-multi-toggle[aria-pressed="true"] {
  border-color: var(--hc-lime);
  background: var(--li-saffron-50);
}
#linkedin-modal .linkedin-multi-toggle[aria-pressed="true"] .li-switch { background: var(--hc-lime); }
#linkedin-modal .linkedin-multi-toggle[aria-pressed="true"] .li-switch::after { left: 19.5px; }

/* Project picker */
#linkedin-modal .linkedin-project-picker { display: grid; gap: 10px; }
#linkedin-modal .linkedin-project-picker.hidden { display: none; }
#linkedin-modal .linkedin-picker-header h3 { margin: 0 0 2px; font-size: 0.84rem; color: var(--hc-ink); }
#linkedin-modal .linkedin-picker-header p { margin: 0; font-size: 0.74rem; color: var(--hc-muted); }
#linkedin-modal .linkedin-project-options { display: grid; gap: 8px; }
#linkedin-modal .linkedin-project-option {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: var(--hc-white);
  cursor: pointer;
}
#linkedin-modal .linkedin-project-option input { margin: 0; }
#linkedin-modal .linkedin-project-option.is-selected {
  border-color: var(--hc-lime);
  background: var(--li-saffron-50);
}
#linkedin-modal .linkedin-project-option-mark {
  width: 16px; height: 16px; border-radius: var(--radius-xs);
  border: 1px solid var(--hc-line); background: #fff;
  color: transparent; display: grid; place-items: center;
}
#linkedin-modal .linkedin-project-option.is-selected .linkedin-project-option-mark {
  background: var(--hc-ink); border-color: var(--hc-ink); color: #fff;
}
#linkedin-modal .linkedin-project-meta { min-width: 0; }
#linkedin-modal .linkedin-project-meta strong { display: block; font-size: 0.82rem; color: var(--hc-ink); }
#linkedin-modal .linkedin-project-meta span { display: block; font-size: 0.74rem; color: var(--hc-muted); }

/* Photos */
#linkedin-modal .li-photos { display: flex; flex-direction: column; gap: 11px; }
#linkedin-modal .li-photos-head { display: flex; align-items: center; gap: 8px; }
#linkedin-modal .li-photos-head .li-grp-label { margin: 0; white-space: nowrap; }

#linkedin-modal .linkedin-photo-summary { margin-left: auto; display: inline-flex; align-items: center; }
#linkedin-modal .linkedin-photo-summary.hidden { display: none; }
#linkedin-modal .linkedin-photo-summary-item,
#linkedin-modal .linkedin-photo-summary-dot,
#linkedin-modal .linkedin-photo-summary-spacer { display: none; }
#linkedin-modal .linkedin-photo-summary-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hc-lime-deep);
  background: var(--li-saffron-50);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
#linkedin-modal .linkedin-photo-summary-count strong { color: var(--hc-lime-deep); }

#linkedin-modal .linkedin-photo-picker { display: grid; gap: 14px; }
#linkedin-modal .linkedin-photo-group { display: grid; gap: 9px; }
#linkedin-modal .linkedin-photo-group + .linkedin-photo-group { margin-top: 2px; }
#linkedin-modal .linkedin-photo-group-header h4 { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--hc-ink); }
#linkedin-modal .linkedin-photo-group-header p { margin: 2px 0 0; font-size: 0.74rem; color: var(--hc-muted); }
#linkedin-modal .linkedin-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
#linkedin-modal .linkedin-photo-option {
  position: relative;
  padding: 0;
  aspect-ratio: 4 / 3;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
}
#linkedin-modal .linkedin-photo-option.is-selected { border-color: var(--hc-lime); }
#linkedin-modal .linkedin-photo-thumb {
  /* De thumb is een <span> met inline background-image. Span is default
     display:inline, waardoor width/height op 100% genegeerd worden en de
     foto niet zichtbaar is. Absoluut positioneren vult de button-tile
     volledig en respecteert de aspect-ratio van .linkedin-photo-option. */
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--radius-sm);
  background-color: #dfe3e7;
  background-size: cover;
  background-position: center;
}
#linkedin-modal .linkedin-photo-check {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;          /* boven .linkedin-photo-thumb (zelf ook position:absolute) */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hc-lime);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(20, 17, 11, 0.3);
}
#linkedin-modal .linkedin-photo-option.is-selected .linkedin-photo-check { display: flex; }
#linkedin-modal .linkedin-photo-caption { display: none; }
#linkedin-modal .linkedin-picker-empty { margin: 0; font-size: 0.78rem; color: var(--hc-muted); }

/* Generate pinned at the bottom of the rail */
#linkedin-modal .li-gen-wrap {
  display: grid;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--hc-line-soft);
  flex-shrink: 0;
}
#linkedin-modal .linkedin-usage-hint {
  margin: 0 0 2px;
  height: 24px;
  min-width: 92px;
  padding: 0 8px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-full);
  background: var(--hc-soft);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--hc-muted);
  align-items: baseline;
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
#linkedin-modal .linkedin-usage-hint.hidden { display: none; }
#linkedin-modal .linkedin-usage-chip-label {
  font-weight: 800;
  letter-spacing: 0.04em;
}
#linkedin-modal .linkedin-usage-hint strong {
  color: var(--hc-ink);
  font-size: 0.78rem;
}
#linkedin-modal .linkedin-usage-mini-bar {
  width: 34px;
  height: 4px;
  align-self: center;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--hc-line-soft);
}
#linkedin-modal .linkedin-usage-mini-bar span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--hc-lime);
  transition: width var(--dur-medium) var(--ease-out);
}
#linkedin-modal .linkedin-generate-button {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--hc-lime);
  color: var(--hc-navy-deep);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
#linkedin-modal .linkedin-generate-button:hover { background: var(--hc-accent-hover); color: var(--hc-white); }
#linkedin-modal .linkedin-generate-button:disabled { opacity: 0.55; cursor: not-allowed; }

/* RIGHT EDITOR */
#linkedin-modal .linkedin-editor-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--hc-white);
  box-shadow: none;
}
#linkedin-modal .linkedin-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 12px;
  flex-shrink: 0;
}
#linkedin-modal .li-editor-head-text h3 { margin: 0 0 2px; font-size: 0.98rem; font-weight: 700; color: var(--hc-ink); }
#linkedin-modal .li-editor-head-text p { margin: 0; font-size: 0.81rem; color: var(--hc-muted); }
#linkedin-modal .li-editor-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#linkedin-modal #linkedin-generating-text { margin: 0; font-size: 0.78rem; color: var(--hc-muted); }
#linkedin-modal .linkedin-character-count {
  font-size: 0.76rem;
  color: var(--hc-muted);
  white-space: nowrap;
  background: var(--hc-paper);
  border: 1px solid var(--hc-line-soft);
  padding: 3px 9px;
  border-radius: var(--radius-full);
}
#linkedin-modal .li-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hc-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--dur-micro) var(--ease-out);
}
#linkedin-modal .li-icon-btn:hover { background: var(--hc-beton); }
#linkedin-modal .li-icon-btn.is-ready { background: var(--hc-lime); border-color: var(--hc-lime); color: var(--hc-navy-deep); }
#linkedin-modal .li-icon-btn.is-published { background: var(--hc-navy); border-color: var(--hc-navy); color: var(--hc-lime); }
#linkedin-modal .li-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#linkedin-modal .li-icon-danger:hover { background: #FBEAEA; border-color: #E7B4B4; color: var(--danger); }

#linkedin-modal .li-area-wrap {
  flex: 1;
  position: relative;
  margin: 0 22px 18px;
  display: flex;
  min-height: 0;
}
#linkedin-modal .linkedin-content-area {
  flex: 1;
  width: 100%;
  margin: 0;
  resize: none;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  padding: 15px 16px 50px;
  font-family: var(--body-font);
  font-size: 0.88rem;
  color: var(--hc-ink);
  line-height: 1.7;
  min-height: 0;
  background: var(--hc-white);
}
#linkedin-modal .linkedin-content-area:focus { border-color: var(--hc-ink); }
#linkedin-modal .linkedin-content-area::placeholder { color: var(--hc-muted); }

/* Copy button = floating icon inside the textarea */
#linkedin-modal .li-copy-fab {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  color: var(--hc-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 17, 11, 0.1);
  transition: all var(--dur-micro) var(--ease-out);
}
#linkedin-modal .li-copy-fab:hover { background: var(--hc-lime); border-color: var(--hc-lime); color: var(--hc-navy-deep); }
#linkedin-modal .li-copy-fab.is-done { background: var(--success, #2F8F3F); border-color: var(--success, #2F8F3F); color: #fff; }

/* A324: linkwaarschuwing onder het tekstvlak. Hoort bij de pagina en blijft
   staan zolang de link er staat, dus .fs-alert en geen toast. Verschijnt alleen
   als er echt een link in de tekst staat; anders is het display:none en valt
   ook de marge weg. */
#linkedin-modal .linkedin-link-hint {
  flex: 0 0 auto;
  margin: 0 22px 18px;
}

/* Feedback line: SR-only */
#linkedin-modal #linkedin-feedback.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 760px) {
  #linkedin-modal.linkedin-modal { padding: 12px; }
  #linkedin-modal .linkedin-modal-panel {
    width: 100%;
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }
  #linkedin-modal .linkedin-modal-body { flex-direction: column; }
  #linkedin-modal .linkedin-setup-shell {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--hc-line-soft);
    max-height: 46%;
  }
  #linkedin-modal .linkedin-editor-shell { min-height: 240px; }
}


/* ── GALLERY (legacy grid kept for image overlay flow) ──── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--hc-beton);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-xs);
  background: rgba(20, 17, 11, 0.75);
  color: #fff;
  border: 0;
  font-size: 0.95rem;
}

/* ── PLACEHOLDER SECTIONS ───────────────────────────────── */
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: var(--hc-muted);
  gap: 12px;
  padding: 60px 40px;
}

.placeholder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hc-beton);
  color: var(--hc-muted);
  margin-bottom: 4px;
}

.placeholder-content h2 { margin-bottom: 4px; color: var(--hc-ink); }

.placeholder-content p {
  max-width: 360px;
  font-size: 0.875rem;
  line-height: 1.65;
}

/* ── ACCOUNT PAGE ────────────────────────────────────────── */
.account-page {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
/* Bedrijf-pagina's (branding/locaties/filtering) hebben naast een leeskolom
   ook brede inhoud (formulier + preview, kaartgrid, chips). Een ruimere
   max-width benut de schermbreedte en voorkomt onnodig verticaal scrollen. */
.account-page.company-page {
  max-width: 1120px;
}
.account-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.account-page-header h2 {
  margin: 2px 0 0;
  font-family: var(--heading-font);
  font-size: 1.35rem;
}
.account-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.account-tab {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hc-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 10px;
  white-space: nowrap;
  cursor: pointer;
}
.account-tab:hover,
.account-tab.is-active {
  background: var(--hc-ink);
  color: var(--hc-white);
}
.account-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
}
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--hc-lime);
  color: var(--hc-navy-deep);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.account-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.account-avatar.has-image {
  background-color: var(--hc-soft);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
}
.account-avatar-edit {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--hc-white);
  background: var(--hc-navy);
  color: var(--hc-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#avatar-upload-input {
  display: none;
}
.account-header-info h2 { margin: 0 0 4px; font-size: 1.1rem; }
.account-subtle {
  margin: 0;
  font-size: 0.81rem;
  color: var(--hc-muted);
}
.account-card {
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
}
.account-card h3 { margin: 0 0 12px; font-size: 1rem; }
.startview-choice { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.startview-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  color: var(--hc-ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.startview-option:hover { border-color: var(--hc-ink); }
.startview-option.is-active { border-color: var(--hc-lime); box-shadow: 0 0 0 1px var(--hc-lime); color: var(--hc-lime-deep); }
.startview-option svg { color: var(--hc-muted); }
.startview-option.is-active svg { color: var(--hc-lime-deep); }
.account-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.account-card-header h3 { margin-bottom: 6px; }
.company-branding-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: start;
}
.tenant-branding-form .branding-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tenant-branding-form input[type="color"] {
  width: 100%;
  height: 44px;
  padding: 4px;
  cursor: pointer;
}
.tenant-branding-form input[type="file"] {
  padding: 11px 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-soft);
  color: var(--hc-muted);
}

/* ── A207: brandingbestanden (logo/favicon) ────────────────
   De kale file-input toonde "Geen bestand gekozen" terwijl er wel degelijk een
   logo en favicon actief waren. De input staat nu visueel verborgen (maar blijft
   in het formulier, dus de disabled-gate en de submit-flow blijven gelijk) en
   het actieve bestand is zichtbaar als miniatuur met eigen acties. */
.tenant-branding-form .branding-asset-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.branding-asset-field {
  display: grid;
  gap: 6px;
  position: relative;
}
.branding-asset-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hc-ink);
}
.branding-asset-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.branding-asset-preview {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--hc-line);
  /* Bone-tegel: de meeste merklogo's zijn voor een lichte ondergrond gemaakt en
     een witte matte in het bestand valt hier niet op als losse rand. */
  background: var(--hc-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5px;
}
.branding-asset-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.branding-asset-preview.is-empty::after {
  content: attr(data-empty-label);
  font-size: 0.62rem;
  color: var(--hc-muted);
  text-align: center;
  padding: 0 4px;
}
.branding-asset-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.branding-asset-status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--hc-muted);
  overflow-wrap: anywhere;
}
.branding-asset-status.is-pending {
  color: var(--hc-ink);
  font-weight: 600;
}
.branding-asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.branding-asset-actions .secondary-button {
  font-size: 0.8rem;
}
.branding-color-suggestion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  /* Bewust --hc-line-soft: het elders gebruikte --hc-soft is nergens in :root
     gedefinieerd en valt dus stil terug op transparant. */
  background: var(--hc-line-soft);
}
.branding-color-suggestion-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 190px;
  font-size: 0.8rem;
  color: var(--hc-muted);
}
.branding-color-suggestion-text strong {
  font-size: 0.82rem;
  color: var(--hc-ink);
}
.branding-color-swatches {
  display: flex;
  gap: 6px;
}
.branding-color-swatches span {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--hc-line);
}
.branding-color-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.branding-color-suggestion-actions .secondary-button {
  font-size: 0.8rem;
}
.branding-import-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-soft);
}
.branding-import-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--hc-muted);
  font-size: 0.86rem;
}
.branding-import-result {
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--hc-white);
}
.branding-import-summary {
  display: grid;
  gap: 10px;
}
.branding-import-summary > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.branding-import-fields,
.branding-import-colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.branding-import-fields span,
.branding-import-color {
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--hc-soft);
  color: var(--hc-muted);
  font-size: 0.84rem;
}
.branding-import-fields strong {
  display: block;
  margin-bottom: 3px;
  color: var(--hc-ink);
}
.branding-import-color {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.branding-import-color i {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--hc-line);
  flex: 0 0 auto;
}
.branding-import-color code {
  color: var(--hc-ink);
  font-size: 0.78rem;
}
.branding-import-logo-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--hc-white);
}
.branding-import-logo-option img {
  max-width: 110px;
  max-height: 54px;
  object-fit: contain;
}
.branding-import-notes {
  margin: 0;
  padding-left: 18px;
  color: var(--hc-muted);
  font-size: 0.85rem;
}.tenant-branding-form input:disabled,
.tenant-branding-form button:disabled,
#ai-profile-form textarea:disabled,
#ai-profile-form button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.branding-preview {
  --branding-preview-primary: var(--hc-ink);
  --branding-preview-accent: var(--hc-saffron);
  overflow: hidden;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
}
.branding-preview-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  background: var(--branding-preview-primary);
  color: var(--hc-white);
  font-weight: 800;
}
.branding-preview-favicon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.branding-preview-favicon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.branding-preview-body {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
}
.branding-preview-logo-wrap {
  width: 86px;
  height: 86px;
  border-radius: var(--radius-sm);
  background: var(--branding-preview-primary);
  border: 3px solid var(--branding-preview-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  flex: 0 0 auto;
}
.branding-preview-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.branding-preview-lines {
  display: grid;
  gap: 10px;
  width: 100%;
}
.branding-preview-lines span {
  display: block;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--hc-line);
}
.branding-preview-lines span:first-child {
  width: 82%;
  background: var(--branding-preview-accent);
}
.branding-preview-lines span:nth-child(2) { width: 64%; }
.branding-preview-lines span:nth-child(3) { width: 44%; }
.ai-usage-card {
  display: grid;
  gap: 16px;
}
.ai-usage-card #ai-usage-status {
  margin: 0;
  min-height: 18px;
}
.ai-usage-body {
  display: grid;
  gap: 16px;
}
.ai-usage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  gap: 14px;
  align-items: stretch;
}
.ai-usage-hero > div,
.ai-usage-meter,
.ai-usage-guard {
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-soft);
}
.ai-usage-hero > div {
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}
.ai-usage-kicker,
.ai-usage-limit-state span,
.ai-usage-meter-head span,
.ai-usage-guard span {
  color: var(--hc-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ai-usage-hero strong {
  color: var(--hc-ink);
  line-height: 1;
}
.ai-usage-hero > div:first-child strong {
  font-size: 2.4rem;
  font-family: var(--heading-font);
}
.ai-usage-hero > div:first-child > span:last-child {
  color: var(--hc-muted);
  font-size: 0.84rem;
}
.ai-usage-limit-state strong {
  font-size: 1rem;
  line-height: 1.35;
}
.ai-usage-limit-state.is-warning {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--hc-line));
  background: color-mix(in srgb, var(--warning) 12%, var(--hc-soft));
}
.ai-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ai-usage-meter {
  padding: 14px;
  display: grid;
  gap: 10px;
}
.ai-usage-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ai-usage-meter-head strong {
  color: var(--hc-ink);
  font-size: 0.95rem;
  white-space: nowrap;
}
.ai-usage-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--hc-line-soft);
}
.ai-usage-bar span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--hc-lime);
}
.ai-usage-meter p {
  margin: 0;
  color: var(--hc-muted);
  font-size: 0.82rem;
}
.ai-usage-guards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ai-usage-guard {
  padding: 12px;
  display: grid;
  gap: 4px;
}
.ai-usage-guard strong {
  color: var(--hc-ink);
  font-size: 0.92rem;
}
.ai-usage-note {
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-soft);
  color: var(--hc-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}
.ai-usage-admin-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
}
.ai-usage-admin-card strong {
  display: block;
  margin-top: 2px;
  color: var(--hc-ink);
  font-size: 1rem;
}
.ai-usage-admin-card > div:first-child > span:last-child {
  display: block;
  margin-top: 5px;
  color: var(--hc-muted);
  font-size: 0.83rem;
  line-height: 1.5;
}
.ai-usage-admin-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--hc-muted);
  font-size: 0.82rem;
}
.ai-usage-admin-meta strong {
  display: inline;
  margin: 0;
  font-size: inherit;
}
.ai-usage-manage-button {
  justify-self: start;
}
.account-export-card .panel-copy { max-width: 520px; }
.account-export-jobs {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.account-export-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-soft);
}
.account-export-job-main {
  min-width: 0;
}
.account-export-job-title {
  margin: 0 0 3px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--hc-ink);
}
.account-export-job-meta {
  margin: 0;
  color: var(--hc-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.account-export-job-actions {
  flex-shrink: 0;
}
.export-folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.export-folder-path-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: var(--hc-muted);
}
.export-folder-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}
.export-folder-path.is-set {
  color: var(--hc-ink);
  font-weight: 700;
}
.export-folder-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .account-page { padding: 22px 18px; }
  .account-page-header { align-items: stretch; }
  .account-tabs { width: 100%; }
  .company-branding-layout,
  .tenant-branding-form .branding-color-grid,
  .ai-usage-hero,
  .ai-usage-grid,
  .ai-usage-guards {
    grid-template-columns: 1fr;
  }
  .account-card-header,
  .account-export-job {
    align-items: stretch;
    flex-direction: column;
  }
  .account-export-job-actions .btn-secondary,
  #ai-usage-refresh-button,
  #account-export-request-button,
  #export-folder-pick-btn {
    width: 100%;
    justify-content: center;
  }
  .export-folder-actions { width: 100%; }
}

/* ── FEEDBACK ───────────────────────────────────────────── */
.success { min-height: 1.25em; color: var(--success); font-weight: 600; font-size: 0.81rem; }
.error   { min-height: 1.25em; color: var(--danger);  font-weight: 600; font-size: 0.81rem; }

/* ── LEAFLET OVERRIDES ──────────────────────────────────── */
.leaflet-control-attribution,
.leaflet-control-zoom a { color: var(--hc-ink) !important; }

.leaflet-control-zoom a { background: rgba(255, 255, 255, 0.94) !important; }

.leaflet-popup-content-wrapper { border-radius: var(--radius-sm); }

.factory-map-icon { background: transparent; border: 0; }

/* Bedrijfslocatie-marker (divIcon): klassieke pin (teardrop) met logo of beginletter. */
.location-marker-wrap { background: transparent; border: 0; }

.location-pin {
  width: 40px;
  height: 48px;
  position: relative;
}

.location-pin-head {
  position: absolute;
  top: 1px;
  left: 3px;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 6px rgba(20, 17, 11, 0.4);
  box-sizing: border-box;
  overflow: hidden;
}

.location-pin-inner {
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-pin-inner img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.location-pin-inner span {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

.popup-title {
  margin: 0 0 4px;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--hc-ink);
  font-family: var(--heading-font);
}

.popup-copy { margin: 0; color: var(--hc-muted); font-size: 0.81rem; }

code {
  font-family: var(--mono-font);
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  background: rgba(27, 53, 81, 0.06);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .detail-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .detail-photos-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; }
  .detail-photos-grid .dpg-cell.is-hero { grid-row: 1 / span 1; grid-column: 1 / span 2; }
}

@media (max-width: 640px) {
  .sidebar { width: 60px; min-width: 60px; }
  .sidebar-brand { display: none; }
  .sidebar-brand-mark { display: grid; }
  .nav-group-label { display: none; }
  .nav-item { justify-content: center; padding: 0; gap: 0; font-size: 0; }
  .nav-item .nav-label { display: none; }
  .sidebar-user { padding: 12px 0; justify-content: center; }
  .sidebar-user-info { display: none; }

  .projects-toolbar { padding: 10px 14px; flex-wrap: wrap; }
  #list-view { padding: 0 14px 20px; }
  .list-row { grid-template-columns: 1fr; gap: 6px; }
  .list-row > div { width: 100%; }
  .list-cell-status { justify-content: flex-start; }

  .detail-header-block { padding: 16px 14px 12px; }
  .detail-body { padding: 14px; }
  .detail-photos-grid { grid-template-columns: 1fr 1fr; }
  .editor-overlay { padding: 10px; }
  .editor-panel { padding: 18px 18px 0; }
  .field-grid { grid-template-columns: 1fr; }
  .project-wizard-progress {
    grid-template-columns: repeat(5, 1fr);
    margin: 0 2px 4px;
  }
  .project-wizard-progress button em { display: none; }
  .project-wizard-progress::before { left: 10%; right: 10%; }
  .project-wizard-form.is-project-create .project-wizard-step { min-height: 300px; }
  .project-briefing-grid,
  .project-factory-options,
  .project-wizard-summary-grid { grid-template-columns: 1fr; }
  .project-location-header { grid-template-columns: 1fr; }
  .project-location-buttons { justify-content: flex-start; }
  .project-location-map { height: 164px; }
  .project-editor-actions {
    margin: 4px -18px 0;
    padding: 12px 18px 14px;
  }
  /* Koen 5/7: ook op telefoonbreedte volgt de actiekolom de inhoud i.p.v. een
     vaste pijlmaat, anders breekt "Project aanmaken" hier alsnog. */
  .project-editor-actions { grid-template-columns: 40px 1fr auto; }
  #save-project-button { min-width: 0; }
  #save-project-button { min-width: 130px; }
  /* A269: op telefoonbreedte vullen Reset en Opslaan samen de ruimte rechts —
     grotere raakvlakken, en de rij kan niet buiten beeld groeien omdat ze
     krimpen in plaats van te overlopen. Verwijderen houdt zijn eigen breedte
     links; de vrije ruimte die `margin-right: auto` anders opeet gaat nu naar
     dat paar, dus de scheiding zakt terug tot de bodem van 12px + 20px. Nog
     altijd ruimer dan de 12px tussen Reset en Opslaan zelf. */
  .is-project-edit #reset-form-button,
  .is-project-edit #save-project-button { flex: 1 1 auto; }
}

/* ── ADMIN PAGES ─────────────────────────────────────────── */
.admin-page {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.admin-page-header,
.admin-card-header,
.management-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* Bedrijfslocatie: logo-identiteit op de beheerkaart. Boven uitlijnen zodat logo,
   naam en actie-iconen op dezelfde lijn beginnen (ook bij een adres van 2 regels). */
.management-card-identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.management-card-identity > div {
  min-width: 0;
}

.location-logo-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--hc-bone);
  border: 1px solid var(--hc-line);
}

.location-logo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.location-logo-thumb.is-empty {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-color: transparent;
}

.admin-page-header h2,
.admin-card-header h3,
.management-card-header h3 {
  margin: 0 0 6px;
  color: var(--hc-ink);
}

.admin-card {
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.management-grid,
.role-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.management-card,
.role-guide-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.management-card-copy {
  margin: 0;
  color: var(--hc-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.management-card-subtitle {
  margin: 0;
  color: var(--hc-muted);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.management-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.management-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── GEBRUIKERS (PR-023 redesign): toolbar + tabel + drawer + roloverzicht ── */
.users-page { gap: 16px; }

.users-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.users-head-actions .btn-secondary,
.users-head-actions .btn-lime { height: 38px; }

/* Toolbar */
.users-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.users-search {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.users-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hc-muted);
  opacity: 0.7;
  pointer-events: none;
}

.users-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--hc-ink);
}

.users-search input::placeholder { color: var(--hc-muted); opacity: 0.7; }

/* A271: zie .toolbar-search input:focus — hier bewoog de halo wél mee, maar de
   outline:none haalde de toetsenbordring alsnog weg. */
.users-search input:focus { border-color: var(--hc-lime); }

.users-role-filter {
  display: inline-flex;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.users-role-filter button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--hc-muted);
  cursor: pointer;
  padding: 6px 11px;
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.users-role-filter button:hover { color: var(--hc-ink); }
.users-role-filter button.is-active { background: var(--hc-ink); color: #fff; }

.users-status-filter {
  /* expliciete breedte overschrijft de globale `select { width: 100% }` regel */
  width: auto;
  flex: 0 0 auto;
  min-width: 150px;
  height: 38px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  padding: 0 30px 0 11px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hc-ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%235A5142' stroke-width='1.8'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.users-status-filter:focus { border-color: var(--hc-lime); }

.users-count {
  font-size: 0.8rem;
  color: var(--hc-muted);
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}

/* Tabel */
.users-table-card {
  padding: 6px 18px;
  gap: 0;
}

.users-table { width: 100%; border-collapse: collapse; }

.users-table.hidden { display: none; }

.users-table thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-muted);
  padding: 14px 14px 11px;
  border-bottom: 1px solid var(--hc-line-soft);
}

.users-table tbody tr.user-row {
  border-bottom: 1px solid var(--hc-line-soft);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}

.users-table tbody tr.user-row:last-child { border-bottom: 0; }
.users-table tbody tr.user-row:hover { background: var(--hc-paper); }
.users-table tbody tr.user-row.is-selected { background: color-mix(in srgb, var(--hc-lime) 8%, transparent); }
.users-table tbody tr.user-row:focus-visible { outline: 2px solid var(--hc-accent-text); outline-offset: -2px; }
.users-table td { padding: 14px; vertical-align: middle; }

.user-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-id-text { display: flex; flex-direction: column; min-width: 0; }
.user-id-name { font-weight: 600; font-size: 0.92rem; color: var(--hc-ink); line-height: 1.2; }
.user-id-email {
  font-size: 0.78rem;
  color: var(--hc-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-date { font-size: 0.82rem; color: var(--hc-muted); }
.user-ai-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--hc-ink);
}
.ut-col-ai {
  width: 140px;
}

.ai-limit-control {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-soft);
}
.ai-limit-control-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ai-limit-control-head span {
  color: var(--hc-ink);
  font-size: 0.82rem;
  font-weight: 700;
}
.ai-limit-control-head strong {
  color: var(--hc-ink);
  font-size: 0.95rem;
}
.ai-limit-control input[type="range"] {
  width: 100%;
  accent-color: var(--hc-lime);
}
.ai-limit-control .field-hint {
  margin: 0;
  color: var(--hc-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* Avatar */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  flex: 0 0 auto;
}

.user-avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; }

/* Eigen account: 2px accent-ring (tenant-/merkkleur via --hc-lime). */
.user-avatar.is-self { box-shadow: 0 0 0 2px var(--hc-white), 0 0 0 4px var(--hc-lime); }

/* Platte rol + statustekst (geen badge). */
.user-role-text { font-weight: 600; font-size: 0.9rem; color: var(--hc-ink); }
.user-status-text { font-weight: 600; font-size: 0.9rem; }
.user-status-text.is-active { color: #2f6c39; }
.user-status-text.is-invited { color: #9a6610; }
.user-status-text.is-paused { color: #8f2f2f; }

/* Gedeelde scrim voor drawer + slide-over. */
.user-overlay-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-out);
  z-index: 40;
}

.user-overlay-scrim.is-open { opacity: 1; pointer-events: auto; }

/* Detail-drawer (tweede klik) */
.user-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90%;
  background: var(--hc-white);
  border-left: 1px solid var(--hc-line);
  box-shadow: -12px 0 36px rgba(20, 17, 11, 0.10);
  transform: translateX(100%);
  transition: transform var(--dur-medium) var(--ease-out);
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.user-drawer.is-open { transform: translateX(0); }

.user-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--hc-line-soft);
}

.user-drawer-id { min-width: 0; flex: 1; }
.user-drawer-name { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--hc-ink); }
.user-drawer-email { font-size: 0.85rem; color: var(--hc-muted); margin-top: 2px; }

.user-drawer-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.user-drawer-meta .sep { color: var(--hc-line); }

.user-you-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hc-lime);
  background: color-mix(in srgb, var(--hc-lime) 14%, transparent);
  padding: 4px 7px;
  border-radius: var(--radius-xs);
}

.user-drawer-head .drawer-icon-button { margin-left: auto; }
.user-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 28px; }

.user-detail-section + .user-detail-section { margin-top: 20px; }

.user-detail-section h4 {
  margin: 0 0 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hc-muted);
}

.perm-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.perm-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--hc-ink); line-height: 1.45; }
.perm-list li .perm-ic { color: var(--success); flex: 0 0 auto; margin-top: 1px; }
.perm-list li.is-no { color: var(--hc-muted); }
.perm-list li.is-no .perm-ic { color: #ADA28A; }

.user-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.user-meta-item .umk { font-size: 0.72rem; color: var(--hc-muted); font-weight: 600; margin-bottom: 3px; }
.user-meta-item .umv { font-size: 0.88rem; color: var(--hc-ink); font-weight: 600; }

.user-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hc-line-soft);
}

.btn-drawer-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--hc-line);
  background: var(--hc-white);
  color: var(--hc-ink);
  transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}

.btn-drawer-action:hover { border-color: var(--hc-muted); }
.btn-drawer-action.is-danger { color: #8f2f2f; border-color: rgba(214, 48, 49, 0.3); }
.btn-drawer-action.is-danger:hover { background: rgba(214, 48, 49, 0.07); }

.user-self-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--hc-muted);
  background: var(--hc-paper);
  border: 1px solid var(--hc-line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 22px;
  line-height: 1.5;
}

.user-self-note svg { color: var(--hc-lime); flex: 0 0 auto; margin-top: 1px; }

/* Roloverzicht slide-over (tweede klik) */
.role-guide-overlay { position: absolute; inset: 0; z-index: 60; }
.role-guide-overlay .user-overlay-scrim { opacity: 0; }
.role-guide-overlay.is-open .user-overlay-scrim { opacity: 1; pointer-events: auto; }

.role-guide-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 94%;
  background: var(--hc-paper);
  border-left: 1px solid var(--hc-line);
  box-shadow: -12px 0 36px rgba(20, 17, 11, 0.12);
  transform: translateX(100%);
  transition: transform var(--dur-medium) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.role-guide-overlay.is-open .role-guide-panel { transform: translateX(0); }

.role-guide-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 18px;
  background: var(--hc-white);
  border-bottom: 1px solid var(--hc-line);
}

.role-guide-head h2 { margin: 4px 0 6px; font-size: 1.2rem; color: var(--hc-ink); }
.role-guide-head .drawer-icon-button { margin-left: auto; }

.role-guide-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
}

.role-guide-body .role-guide-card .role-badge { align-self: flex-start; }

.role-badge,
.status-badge,
.company-pill,
.meta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

.role-badge,
.status-badge,
.company-pill {
  padding: 8px 10px;
}

.meta-chip {
  padding: 7px 10px;
  border: 1px solid rgba(20, 17, 11, 0.1);
  background: rgba(20, 17, 11, 0.04);
  color: var(--hc-ink);
}

.role-badge.is-owner { background: color-mix(in srgb, var(--hc-lime) 16%, transparent); color: var(--hc-co-holcon); }
.role-badge.is-admin { background: rgba(20, 17, 11, 0.12); color: var(--hc-navy-deep); }
.role-badge.is-user { background: rgba(20, 17, 11, 0.06); color: var(--hc-muted); }

.status-badge.is-active { background: rgba(52, 111, 61, 0.14); color: #2f6c39; }
.status-badge.is-invited { background: rgba(201, 140, 24, 0.14); color: #9a6610; }
.status-badge.is-paused { background: rgba(168, 47, 47, 0.12); color: #8f2f2f; }

.company-pill.is-holcon,
.company-pill.is-bisoton,
.company-pill.is-durison,
.company-pill.is-flowskraft { background: color-mix(in srgb, var(--hc-lime) 14%, transparent); color: var(--hc-accent-text); }

.meta-chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.permission-list {
  margin: 0;
  padding-left: 18px;
  color: var(--hc-ink);
  font-size: 0.88rem;
  line-height: 1.6;
}

.cdc-action-btn.is-danger:hover {
  background: rgba(168, 47, 47, 0.08);
  color: #8f2f2f;
}


@media (max-width: 900px) {
  .users-count { margin-left: 0; }
  .role-guide-body { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .users-table thead { display: none; }
  .users-table,
  .users-table tbody,
  .users-table tr.user-row,
  .users-table td { display: block; width: 100%; }
  .users-table tbody tr.user-row { padding: 8px 0 14px; }
  .users-table td { padding: 4px 0; }
  .ut-col-ai { width: auto; }
  .user-drawer,
  .role-guide-panel { width: 100%; max-width: 100%; }
}

/* == UX-review gedragswijzigingen (PR 3) ====================== */

/* Subkopje in de filter-popover boven locatie-opties (alleen Alles-tab). */
.filter-subhead {
  display: block;
  margin: 8px 0 2px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-muted);
}

/* Vestiging-subregels in een locatiegroep-rij. */
.loc-row-vestiging {
  display: block;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--body-font);
  font-size: 0.75rem;
  color: var(--hc-muted);
  text-align: left;
  cursor: pointer;
}

.loc-row-vestiging:hover { color: var(--hc-ink); text-decoration: underline; }

/* Marker-tooltip op de kaart (hover toont naam, klik navigeert). */
.marker-tooltip {
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hc-ink);
}

.marker-tooltip .tooltip-sub {
  display: block;
  font-weight: 500;
  font-size: 0.69rem;
  color: var(--hc-muted);
}

/* Locatie-detail: gekoppelde projecten. */
.detail-location-projects { margin-top: 22px; }

.detail-location-projects h3 {
  font-size: 0.94rem;
  margin-bottom: 10px;
}

.detail-location-projects-list {
  display: grid;
  gap: 6px;
}

.detail-location-project {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  font-family: var(--body-font);
  text-align: left;
  cursor: pointer;
}

.detail-location-project:hover { border-color: var(--hc-ink); }

.detail-location-project .dlp-title {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--hc-ink);
}

.detail-location-project .dlp-meta {
  font-size: 0.72rem;
  color: var(--hc-muted);
  white-space: nowrap;
}

/* Destructieve actie los van opslaan/reset in het locatie-formulier. */
.factory-danger-row {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--hc-line);
  display: flex;
  justify-content: flex-end;
}

/* Onderste lijstrij niet onder de zwevende ?-knop laten vallen. */
#list-view { padding-bottom: 84px; }

/* A132: bevestigingsdialoog onopgeslagen wijzigingen */
.unsaved-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--overlay-scrim);
}
.unsaved-overlay.hidden { display: none; }
/* Koen 8: één Modal-template — wit paneel, radius 16, kop / body / voet op
   bone, acties rechtsonder met de primaire actie uiterst rechts. Breedte 400
   is de "bevestigen"-maat uit de designregels (was 420). */
.unsaved-card {
  width: 100%;
  max-width: 400px;
  background: var(--hc-white);
  border: 1px solid var(--hc-line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20, 17, 11, 0.28);
}
.unsaved-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--hc-line-soft);
}
.unsaved-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--hc-ink);
}
.unsaved-body { padding: 24px; }
.unsaved-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--hc-muted);
}
.unsaved-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--hc-line-soft);
  background: var(--hc-paper);
}
/* Alle drie de keuzes zijn knoppen, en alle drie hebben ze een vlak: het gaat
   hier om een keuze tussen drie gelijkwaardige uitkomsten. */
.unsaved-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--body-font);
  font-size: 0.81rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.unsaved-btn-cancel {
  background: var(--hc-white);
  border-color: var(--hc-line);
  color: var(--hc-ink);
}
/* Destructief = danger-knop, geen losse rode tekst. */
.unsaved-btn-discard {
  background: var(--hc-white);
  border-color: var(--danger);
  color: var(--danger);
}
/* Ink-tekst op saffraan, niet bone: bone haalt 2,80:1 en ink 5,87:1 — zie de
   contrastnoot bij de primaire knop hierboven. */
.unsaved-btn-save {
  background: var(--hc-lime);
  color: var(--hc-navy-deep);
}
.unsaved-btn-cancel:hover { border-color: var(--hc-ink); background: var(--hc-beton); }
.unsaved-btn-discard:hover { background: var(--danger-soft); }
.unsaved-btn-save:hover { filter: brightness(0.95); }
.unsaved-btn:active { transform: scale(0.98); }
.unsaved-btn:focus-visible { outline: 2px solid var(--hc-accent-text); outline-offset: 2px; }
.unsaved-btn.hidden { display: none; }

/* Op telefoonbreedte passen drie knoppen niet naast elkaar en viel "Opslaan"
   los op een tweede regel. Gestapeld met de primaire actie bovenaan. */
@media (max-width: 480px) {
  .unsaved-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    flex-wrap: nowrap;
  }
}

/* PR-D: juridisch akkoord-gate. Frame hergebruikt .editor-overlay/.editor-panel. */
.legal-consent-body { display: flex; flex-direction: column; gap: 16px; }
.legal-consent-docs { display: flex; flex-direction: column; gap: 12px; }
.legal-consent-doc {
  padding: 12px 14px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: var(--hc-bone);
  cursor: pointer;
  line-height: 1.45;
}
/* B1: het vinkje hoort links voor de zin, niet erboven. De akkoordregel is
   daarom een gewoon tekstblok met inspringing en een absoluut geplaatst vinkje
   in de marge: zo blijven de zin en de PDF-link een doorlopende alinea die bij
   meerdere regels netjes uitlijnt en niet onder het vinkje schuift.
   De 16px-maat die hier stond is met A244 naar de veldregels verhuisd — daar
   geldt hij voor élk vinkje in het portaal in plaats van alleen voor dit ene. */
label.legal-consent-doc {
  display: block;
  position: relative;
  padding-left: 40px;
}
label.legal-consent-doc input[type="checkbox"] {
  position: absolute;
  left: 14px;
  top: 14px;
  margin: 0;
}
.legal-consent-doc.is-done {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: default;
  background: transparent;
}
.legal-consent-doc-state {
  font-weight: 600;
  color: var(--hc-accent-text);
  flex: 0 0 auto;
}
.legal-consent-link { color: var(--hc-accent-text); text-decoration: underline; }
.legal-consent-locked { color: var(--hc-ink); line-height: 1.5; }
.legal-consent-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.legal-consent-actions .btn-lime[disabled] { opacity: 0.5; cursor: not-allowed; }

/* T4: akkoord-gate als rustige, gecentreerde login-stijl kaart. Alleen visueel;
   de niet-wegklikbaarheid en blokkering (app.js) blijven ongemoeid. */
.legal-consent-panel {
  max-width: 520px;
  background: var(--hc-bone);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
}
.legal-consent-mark { display: block; height: 40px; width: auto; margin-bottom: 16px; }
.legal-consent-panel .drawer-header { margin-bottom: 20px; }
.legal-consent-panel .drawer-title { font-size: 1.5rem; }
.legal-consent-panel .drawer-subtitle { line-height: 1.5; opacity: 0.75; }

/* T3b: geaccepteerde juridische documenten in Account (read-only). */
.legal-account-docs { display: flex; flex-direction: column; gap: 12px; }
.legal-account-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: var(--hc-bone);
}
.legal-account-doc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.legal-account-doc-title { font-weight: 600; color: var(--hc-ink); }
.legal-account-state { font-size: 0.85rem; }
.legal-account-state.is-done { color: var(--hc-accent-text); font-weight: 600; }
.legal-account-state.is-pending { color: var(--hc-ink); opacity: 0.6; }

/* ── Operator-modus (Flowskraft/partners): klantenlijst op het overzicht ──── */
/* Zelfde vorm als de projecten-werklijst: hergebruik van .list-header/.list-row
   met een klant-kolomindeling. Scope-tabs/filters zijn project-specifiek en
   gaan uit; zoeken en de lijst/kaart-toggle blijven werken. */
body.is-operator #list-tabs,
body.is-operator #filter-trigger,
body.is-operator #filter-chips-row { display: none !important; }

/* A202: Herkomst uit de kolommen, Signalen erin. Signalen krijgt de ruimte
   (minmax) omdat er meerdere chips naast elkaar kunnen staan; de klantnaam
   blijft de flexibele eerste kolom. */
.list-header.is-operator,
.list-row.list-row-klant {
  grid-template-columns: minmax(0, 1.4fr) 120px 120px 104px 100px minmax(0, 1.6fr) 130px;
}
.list-row.list-row-klant { cursor: pointer; }
.list-row.list-row-klant .lr-num { font-variant-numeric: tabular-nums; }
.list-row.list-row-klant .lr-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.list-row.list-row-klant .lr-signals .status-pill,
.list-row.list-row-klant .lr-signals .type-pill { white-space: nowrap; }
.status-pill.status-klant-active { background: rgba(46, 125, 50, 0.12); color: #2e7d32; }
.status-pill.status-klant-paused { background: rgba(178, 106, 0, 0.12); color: #b26a00; }
.status-pill.status-klant-archived { background: rgba(20, 17, 11, 0.08); color: rgba(20, 17, 11, 0.55); }
@media (max-width: 900px) {
  /* Smal scherm: naam, abonnement, signalen, status. De tellers vallen weg —
     die lees je in het dossier, een signaal is de reden om te klikken. */
  .list-header.is-operator,
  .list-row.list-row-klant { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) 110px; }
  .list-header.is-operator .lh-cell:nth-child(2),
  .list-header.is-operator .lh-cell:nth-child(4),
  .list-header.is-operator .lh-cell:nth-child(5),
  .list-row.list-row-klant .lr-city,
  .list-row.list-row-klant .lr-num { display: none; }
}

/* ── MOBIELE-OVERLAY (smartphone-melding, zie index.html) ─────────── */
/* Zichtbaarheid is puur CSS: standaard nooit tonen, alleen op een smal
   scherm mét touch-bediening (smartphone; tablets en versmalde
   desktop-vensters vallen erbuiten). Dismissal per sessie via de globale
   .hidden-utility (!important, wint van de media query). z-index boven
   alle andere lagen (.unsaved-overlay = 1200). */
.mobile-notice-overlay { display: none; }

@media (max-width: 700px) and (pointer: coarse) {
  .mobile-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--overlay-scrim);
    backdrop-filter: blur(var(--overlay-blur));
  }
}

.mobile-notice-panel {
  width: min(400px, 100%);
  padding: 30px 26px;
  background: var(--hc-bone);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 18px 48px rgba(20, 17, 11, 0.28);
}

.mobile-notice-mark {
  display: block;
  height: 44px;
  width: auto;
  margin: 0 auto 16px;
}

.mobile-notice-panel h2 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  color: var(--hc-ink);
}

.mobile-notice-panel p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--hc-muted);
}

.mobile-notice-panel p strong { color: var(--hc-ink); }

/* Toekomstige Play/App Store-badges; nu leeg + .hidden in de markup. */
.mobile-notice-stores {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 4px;
}

.mobile-notice-dismiss {
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--body-font);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hc-muted);
  text-decoration: underline;
  cursor: pointer;
}

.mobile-notice-dismiss:hover { color: var(--hc-ink); }
/* ── MELDINGEN + FOTOWACHTRIJ (feat/fotowachtrij) ─────────────────────────
   Bel rechts in de .projects-toolbar naast Vernieuwen (knopstyling komt uit de
   gedeelde .toolbar-refresh/.toolbar-notif-regels). De badge hangt aan de
   icoon-wrapper en valt binnen de 30px knop, dus hij wordt nergens geklikt.
   Paneel met tabs Meldingen / Wachtrij / Afgekeurd. */
.notif-icon-wrap { position: relative; display: inline-flex; }
.notif-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--hc-saffron);
  color: var(--hc-accent-on);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.notif-panel { max-width: 560px; width: min(560px, 92vw); display: flex; flex-direction: column; max-height: min(680px, 88vh); }
.notif-tabs { margin: 4px 0 10px; }
.notif-tab-count {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hc-lime) 16%, transparent);
  color: var(--hc-accent-text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.notif-body { flex: 1; overflow-y: auto; min-height: 180px; padding-right: 2px; }
.notif-empty { color: rgba(20, 17, 11, 0.55); font-size: 0.9rem; padding: 28px 4px; text-align: center; }
.notif-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid rgba(20, 17, 11, 0.08);
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.notif-item:hover { background: rgba(20, 17, 11, 0.04); }
.notif-item .notif-dot { width: 8px; height: 8px; border-radius: 4px; margin-top: 6px; background: transparent; flex: 0 0 auto; }
.notif-item.is-unread .notif-dot { background: var(--hc-saffron); }
.notif-item.is-unread .notif-item-title { font-weight: 700; }
.notif-item-title { font-size: 0.9rem; color: var(--hc-ink); }
.notif-item-meta { font-size: 0.78rem; color: rgba(20, 17, 11, 0.5); margin-top: 2px; }
.queue-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(20, 17, 11, 0.08);
}
.queue-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(20, 17, 11, 0.06);
  flex: 0 0 auto;
}
/* A278 - het kaartfragment op een projectaanvraag. Zelfde maat en ronding als
   de fotothumbnail ernaast: in één wachtrij mogen de twee soorten werk niet als
   twee verschillende schermen lezen.
   Geen Leaflet maar stilstaande tegels (zie mapFragmentTiles in helpers.js) -
   tien aanvragen tegelijk zouden tien kaartinstanties zijn, met listeners en
   opruimwerk, in een paneel dat na elke actie opnieuw gerenderd wordt. */
.queue-map {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hc-beton);
  flex: 0 0 auto;
}
.queue-map-tile {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
}
/* Het projectpunt ligt per definitie in het midden van het venster. */
.queue-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: var(--radius-full);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(20, 17, 11, 0.35);
}
.queue-map.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: center;
  color: var(--hc-muted);
}
.queue-info { flex: 1; min-width: 0; }
.queue-title { font-size: 0.9rem; font-weight: 700; color: var(--hc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-meta { font-size: 0.78rem; color: rgba(20, 17, 11, 0.55); margin-top: 2px; }
.queue-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.queue-actions .btn-approve {
  background: var(--hc-lime);
  color: var(--hc-accent-on);
  border: 0;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.queue-actions .btn-reject,
.queue-actions .btn-queue-secondary {
  background: #fff;
  color: var(--hc-ink);
  border: 1px solid rgba(20, 17, 11, 0.14);
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.queue-actions .btn-reject:hover { color: #D63031; border-color: rgba(214, 48, 49, 0.4); }
.notif-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(20, 17, 11, 0.08); }
.notif-footer #notif-feedback { margin: 0; flex: 1; }
.notif-item-title, .notif-item-meta { display: block; }