/* Senn - productinterface stylesheet.
   Bewust gewone CSS, geen framework/build-stap: statische HTML/CSS/JS via
   FastAPI. Rustig, overzichtelijk en professioneel; geen emoji - alleen de
   inline SVG-set uit js/icons.js. */

/* Licht + donker, Apple-afwerking (23 sept. 2026, besluit van de eigenaar).
   Twee weergaven, geen "systeem"-stand: :root hieronder is LICHT,
   :root[data-theme="dark"] is DONKER - echt zwart met neutrale grijzen,
   geen blauwe ondertoon. Het inline script bovenaan iedere pagina zet
   data-theme vóór de eerste paint (standaard donker; js/theme.js,
   localStorage "sennTheme").

   Vormtaal naar Apple: ronde vlakken, capsule-knoppen, grijze "fill"-
   vlakken i.p.v. randen, dunne scheidingslijnen, doorschijnende topbalk
   en zijbalk, en panelen die als één venster op elkaar aansluiten.

   Accent: Blauw (standaard), Groen of Roze via data-palette - actieve
   navigatie, knoppen, toggles en focus, met een eigen tint per weergave. */
:root {
  color-scheme: light;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-muted: #f5f5f7;
  --border: #e5e5ea;
  --border-strong: #d1d1d6;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --text-faint: #8e8e93;

  /* Grijze vulvlakken (knoppen, invoervelden, chips) - zoals Apple. */
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.2);

  --accent: #0071e3;
  --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 42%, transparent);
  /* Tekst/iconen op een vlak in de accentkleur. */
  --accent-contrast: #ffffff;

  /* Kaarten en grote vlakken. */
  --panel-surface: var(--surface);
  --panel-surface-strong: #f5f5f7;
  --panel-text: var(--text);
  --card-border: rgba(0, 0, 0, 0.06);

  /* Topbalk, icoonbalk en Senn-paneel: het "venster" rond de inhoud.
     Doorschijnend met een lichte vervaging, zoals een Apple-zijbalk. */
  --chrome-bg: rgba(251, 251, 253, 0.8);
  --chrome-solid: #fbfbfd;
  --nav-active-bg: var(--accent-soft);
  --segment-thumb: #ffffff;
  /* Invoervelden: grijs vulvlak, geen rand. */
  --field-bg: var(--fill);
  --field-border: transparent;

  --success: #248a3d;
  --success-soft: rgba(36, 138, 61, 0.1);
  --success-border: rgba(36, 138, 61, 0.24);

  --warning: #b25000;
  --warning-soft: rgba(255, 149, 0, 0.12);
  --warning-border: rgba(255, 149, 0, 0.32);

  --danger: #d70015;
  --danger-soft: rgba(255, 59, 48, 0.09);
  --danger-border: rgba(255, 59, 48, 0.26);

  --neutral-soft: rgba(118, 118, 128, 0.1);
  --neutral-border: rgba(0, 0, 0, 0.08);

  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.32);

  /* Senn-merkteken (inline SVG): grafiet op licht, zilver op donker. */
  --logo-main-1: #6e6e73;
  --logo-main-2: #3a3a3c;
  --logo-main-3: #1d1d1f;
  --logo-small-1: #86868b;
  --logo-small-2: #48484a;
  --logo-fold-1: #636366;
  --logo-fold-2: #2c2c2e;
  --logo-fold-3: #0b0b0c;

  /* Ronde vlakken. */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.1);
  /* Kaarten: nauwelijks zichtbaar, net genoeg om los te komen van de
     achtergrond. */
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-panel-hover: 0 2px 6px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.08);
  /* Zwevende lagen: uitgeklapte icoonbalk, menu's. */
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px rgba(0, 0, 0, 0.14);

  /* ---------- Motion tokens ----------
     Eén bewegingstaal voor de hele interface: "rustig wanneer je niets
     doet, levendig wanneer je ermee interacteert". Alle transities en
     animaties gebruiken deze tokens; prefers-reduced-motion schakelt alles
     op één plek uit (zie hieronder). Beweging vrijwel uitsluitend via
     transform en opacity. De ease-out is de zachte, "iOS-achtige" curve. */
  --motion-fast: 160ms;
  --motion-normal: 260ms;
  --motion-slow: 340ms;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: var(--motion-fast) var(--ease-standard);
  --transition-base: var(--motion-normal) var(--ease-out);
  --transition-slow: var(--motion-slow) var(--ease-out);

  /* Maatvoering van de shell. */
  --rail-w: 72px;
  --rail-w-open: 228px;
  --ai-panel-w: 348px;
  --topbar-h: 60px;
  --content-pad: 32px;
  --shell-gap: 20px;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
    "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #1c1c1e;
  --surface-solid: #1c1c1e;
  --surface-muted: #2c2c2e;
  --border: #2c2c2e;
  --border-strong: #3a3a3c;
  --text: #f5f5f7;
  --text-muted: #98989d;
  --text-faint: #6e6e73;

  --fill: rgba(118, 118, 128, 0.24);
  --fill-strong: rgba(118, 118, 128, 0.34);

  --accent: #0a84ff;
  --accent-hover: color-mix(in srgb, var(--accent) 86%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 50%, transparent);

  --panel-surface-strong: #2c2c2e;
  --card-border: rgba(255, 255, 255, 0.06);

  --chrome-bg: rgba(22, 22, 23, 0.8);
  --chrome-solid: #111112;
  --segment-thumb: #636366;

  --success: #30d158;
  --success-soft: rgba(48, 209, 88, 0.14);
  --success-border: rgba(48, 209, 88, 0.3);

  --warning: #ff9f0a;
  --warning-soft: rgba(255, 159, 10, 0.14);
  --warning-border: rgba(255, 159, 10, 0.32);

  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.14);
  --danger-border: rgba(255, 69, 58, 0.34);

  --neutral-soft: rgba(118, 118, 128, 0.2);
  --neutral-border: rgba(255, 255, 255, 0.1);

  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);

  --logo-main-1: #fbfbfb;
  --logo-main-2: #dcdcdc;
  --logo-main-3: #a9abac;
  --logo-small-1: #e9e9e9;
  --logo-small-2: #b9babb;
  --logo-fold-1: #d6d7d8;
  --logo-fold-2: #9a9b9d;
  --logo-fold-3: #5f6163;

  /* Donker: diepte komt uit de grijstinten, niet uit schaduwen. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-panel: 0 0 #0000;
  --shadow-panel-hover: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* ---------- Accentkleur (Controls > Uiterlijk) ----------
   Blauw/Groen/Roze zetten alleen het accent, per weergave een eigen tint
   (Apple-systeemkleuren). Keuze en opslag: js/theme.js (localStorage
   "dexPalettePreference" - legacy naam, niet hernoemen). */
:root[data-palette="pink"] {
  --accent: #e0245e;
}
:root[data-palette="blue"] {
  --accent: #0071e3;
}
:root[data-palette="green"] {
  --accent: #1a8d44;
}
:root[data-theme="dark"][data-palette="pink"] {
  --accent: #ff375f;
}
:root[data-theme="dark"][data-palette="blue"] {
  --accent: #0a84ff;
}
:root[data-theme="dark"][data-palette="green"] {
  --accent: #30d158;
  /* Wit is onleesbaar op dit lichte groen - donkere tekst. */
  --accent-contrast: #0b0b0c;
}

/* Wisselen tussen licht en donker: heel even laten alle kleuren zacht
   overvloeien in plaats van hard om te springen. js/theme.js zet deze
   klasse alleen tijdens de wissel (~0,4 s). */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color var(--motion-slow) var(--ease-standard),
    border-color var(--motion-slow) var(--ease-standard),
    color var(--motion-slow) var(--ease-standard),
    box-shadow var(--motion-slow) var(--ease-standard),
    transform var(--motion-slow) var(--ease-out),
    opacity var(--motion-normal) var(--ease-standard) !important;
}

html.theme-switching stop {
  transition: stop-color var(--motion-slow) var(--ease-standard) !important;
}

* {
  box-sizing: border-box;
}

/* Sprint 20 (sectie 6/11 - reduced motion): geldt voor elke transitie/
   animatie in dit bestand, ook toekomstige - een gebruiker die minder
   beweging heeft aangevraagd op OS-niveau krijgt nooit onnodige animatie,
   ongeacht welk component dat toevoegt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Niet-essentiële beweging (hover-verschuivingen, lift, pagina-intrede)
     helemaal uit - kleur- en focuswissels blijven, die zijn functioneel. */
  .nav a:hover .icon,
  .nav a:focus-visible .icon,
  .home-panel:hover,
  .home-panel-link:hover,
  .chat-form button:hover .icon,
  :is(.button-primary, .button-secondary, .button-text, .chat-form button, .search-form button,
    .login-form button, .topbar-icon-button, .chat-suggestion, .user-context-logout,
    .workspace-tab, .workspace-inbox-row, .theme-option, .palette-swatch, .user-button, .nav a):is(:hover, :active) {
    transform: none !important;
  }

  .main,
  .ai-panel,
  .menu-dropdown,
  .topbar-title {
    animation: none !important;
  }

  /* De icoonbalk klapt nog steeds uit (anders zijn de namen niet te
     lezen), maar zonder de verschuiving van de namen. */
  .nav-label {
    transform: none !important;
  }
}

html {
  -webkit-font-smoothing: antialiased;
  /* Ruimte voor de verticale scrollbar altijd reserveren: een pagina die
     scrolt (Controls) en een pagina die dat niet doet (Home) krijgen zo
     exact dezelfde breedte - zijbalk en panelen verspringen niet bij het
     navigeren. */
  scrollbar-gutter: stable;
  /* Scrollbar in de stijl van de interface: dun, rustig, geen opvallend
     grijs blok (Firefox + Chromium 121+ via de standaardeigenschappen). */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Oudere Chromium/Safari: zelfde dunne, afgeronde scrollbar. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.47;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

/* Standaard invoervelden volgen de weergave (licht/donker). Specifiekere
   component-regels verderop (zoals de transparante Home-chatinvoer)
   blijven gewoon voorgaan. */
/* :where() = specificiteit 0, zodat iedere component-regel (bv. de
   randloze Home-chatinvoer) hier altijd voorgaat. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background-color: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  transition: box-shadow var(--transition-base), background-color var(--transition-base),
    border-color var(--transition-base);
}

/* Focus in een veld: een zachte accentring rondom (Apple-stijl) in plaats
   van de standaard browser-outline. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

:where(input, textarea)::placeholder {
  color: var(--text-faint);
}

/* Knoppen en velden nemen het lettertype van de interface over (browsers
   gebruiken anders hun eigen, afwijkende knopletter). */
:where(button, input, select, textarea) {
  font-family: inherit;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ---------- App-shell (licht/donker, naar de referentie) ----------
   Bovenaan een topbalk over de volle breedte (merk, paginatitel, status,
   weergave, help, gebruiker). Links daaronder een smalle icoonbalk die bij
   hover of toetsenbordfocus uitklapt en de namen toont. De inhoud
   verschuift daarbij NIET: de uitgeklapte balk ligt er even overheen. */
.app-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--ai-panel-w);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  /* Geen tussenruimte: icoonbalk, inhoud en Senn-paneel sluiten als één
     venster op elkaar aan, gescheiden door dunne lijnen. */
  min-height: 100vh;
}

/* Home heeft geen apart Senn-zijpaneel (de chat staat centraal). */
.app-shell.app-shell-single {
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
}

/* ---------- Topbalk ---------- */
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-right: 16px;
  background: var(--chrome-bg);
  /* Doorschijnend met vervaging, zoals een Apple-werkbalk: inhoud die
     eronder scrolt blijft vaag zichtbaar. Alleen topbalk en icoonbalk
     krijgen dit (twee elementen - licht voor de hardware). */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

/* Merk linksboven. Het merkteken staat precies boven de iconen van de
   icoonbalk (midden = halve balkbreedte). */
.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 20px 0 calc(var(--rail-w) / 2 - 15px);
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.brand-mark-svg {
  display: block;
  width: 30px;
  height: auto;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.app-brand:hover .brand-mark-svg {
  transform: translateY(-1px);
}

.app-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: var(--radius-sm);
}

.app-wordmark {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* letter-spacing zet ook ruimte na de laatste letter: compenseren. */
  margin-right: -0.32em;
}

.topbar-title {
  padding-left: 18px;
  border-left: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: senn-fade-in var(--transition-base);
}

.topbar-spacer {
  flex: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.topbar-divider {
  width: 1px;
  height: 28px;
  margin: 0 6px;
  background: var(--border);
}

.topbar-icon-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base),
    border-color var(--transition-base), transform var(--transition-fast);
}

.topbar-icon-button:hover,
.topbar-icon-button:focus-visible,
.topbar-icon-button[aria-expanded="true"] {
  background: var(--fill);
  color: var(--text);
}

.topbar-icon-button:active {
  transform: scale(0.94);
}

.topbar-icon-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Weergave-knop: zon en maan liggen over elkaar en wisselen met een kleine
   draai en fade. Licht toont de maan (naar donker), donker de zon. */
.theme-toggle .icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 19px;
  height: 19px;
  transition: opacity var(--transition-base), transform var(--transition-slow);
}

.theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-70deg) scale(0.6);
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(70deg) scale(0.6);
}

/* ---------- Uitklapmenu's (help, gebruiker) ---------- */
.menu {
  position: relative;
}

@keyframes senn-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  /* Dekkend: een uitklapmenu ligt over andere inhoud heen. */
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 16px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
  z-index: 40;
  transform-origin: top right;
  animation: senn-menu-in var(--transition-base);
}

.menu-dropdown[hidden] {
  display: none;
}

.menu-dropdown p {
  margin: 0;
  line-height: 1.5;
}

.menu-footnote {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-faint);
}

/* Gebruiker rechtsboven: avatar + naam/organisatie, klik = menu. */
.user-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 10px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base),
    transform var(--transition-fast);
}

.user-button:hover,
.user-button[aria-expanded="true"] {
  background: var(--fill);
}

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

.user-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 650;
  flex-shrink: 0;
}

.user-button-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 180px;
  line-height: 1.25;
}

.user-button-name,
.user-button-org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-button-name {
  font-size: 13px;
  font-weight: 600;
}

.user-button-org {
  font-size: 11.5px;
  color: var(--text-muted);
}

.user-button-text:empty,
.user-button-name:empty,
.user-button-org:empty {
  display: none;
}

.user-button .icon-chevron {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  transition: transform var(--transition-base);
}

.user-button[aria-expanded="true"] .icon-chevron {
  transform: rotate(180deg);
}

/* ---------- Icoonbalk (navigatie) ----------
   Ingeklapt: alleen iconen. Hover of toetsenbordfocus: de balk wordt
   breder en de namen schuiven zacht in beeld. Een korte vertraging bij
   het openen voorkomt dat de balk openklapt als je er alleen langs
   beweegt. Alleen deze ene balk animeert zijn breedte; de inhoud ernaast
   verschuift niet (absolute positionering). */
.rail {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  z-index: 25;
}

.rail-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  background: var(--chrome-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: width var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out);
}

.rail:hover .rail-panel,
.rail:focus-within .rail-panel {
  width: var(--rail-w-open);
  box-shadow: var(--shadow-float);
  transition-delay: 90ms;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
}

.nav-bottom {
  margin-top: auto;
}

.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: background var(--transition-base), color var(--transition-base),
    transform var(--transition-fast);
}

.nav a .icon {
  width: 22px;
  height: 22px;
  color: currentColor;
  transition: transform var(--transition-base);
}

/* De naam: onzichtbaar zolang de balk ingeklapt is, schuift zacht in
   beeld zodra hij uitklapt (net na de breedte, zodat hij nooit wordt
   afgesneden). */
.nav-label {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-normal) var(--ease-out);
}

.rail:hover .nav-label,
.rail:focus-within .nav-label {
  opacity: 1;
  transform: none;
  transition-delay: 150ms;
}

.nav a:hover,
.nav a:focus-visible {
  background: var(--fill);
  color: var(--text);
}

.nav a:hover .icon,
.nav a:focus-visible .icon {
  transform: scale(1.06);
}

/* Controls: het instellingen-icoon draait een fractie mee. */
.nav a[data-nav="controls"]:hover .icon,
.nav a[data-nav="controls"]:focus-visible .icon {
  transform: rotate(30deg);
}

.nav a:active {
  transform: scale(0.97);
}

.nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Actief: zacht accentvlak met het icoon in de accentkleur - zoals de
   selectie in een macOS-zijbalk. */
.nav a.active {
  background: var(--nav-active-bg);
  color: var(--text);
  font-weight: 600;
}

.nav a.active .icon {
  color: var(--accent);
}

/* ---------- Systeemstatus (topbalk) ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base),
    color var(--transition-base);
}

.status-pill:hover {
  background: var(--fill);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-faint);
  flex-shrink: 0;
  transition: background var(--transition-base);
}

/* Realtime-status: alleen het kleine bolletje ademt heel langzaam mee -
   de badge zelf knippert nooit. */
@keyframes senn-pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Alles in orde: rustig, alleen het groene bolletje (zoals "Online" in de
   referentie). Afwijkingen krijgen wel een zacht gekleurd vlak. */
.status-pill.status-ok .status-dot {
  background: var(--success);
  animation: senn-pulse 2.8s var(--ease-standard) infinite;
}

.status-pill.status-warn .status-dot {
  background: var(--warning);
}

.status-pill.status-warn {
  color: var(--warning);
  border-color: var(--warning-border);
  background: var(--warning-soft);
}

.status-pill.status-error .status-dot {
  background: var(--danger);
}

.status-pill.status-error {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

/* ---------- Hoofdinhoud ---------- */

/* Pagina-overgang: bij iedere pagina komt alleen de INHOUD (hoofdvlak en
   Senn-zijpaneel) heel kort in beeld - icoonbalk en topbalk staan al, dus
   het voelt alsof dezelfde interface van toestand wisselt. Geen slide,
   geen lange fade: bijna onbewust. */
@keyframes senn-page-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.main {
  grid-column: 2;
  grid-row: 2;
  padding: 28px var(--content-pad) var(--content-pad);
  max-width: none;
  min-width: 0;
  animation: senn-page-in var(--motion-normal) var(--ease-out) both;
}

.home-main {
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--shell-gap);
  min-height: 0;
  /* Venster min de topbalk: de vlakken vullen de rest precies op (met
     ademruimte rondom), zonder dat de pagina gaat scrollen. */
  height: calc(100vh - var(--topbar-h));
  padding: 24px var(--content-pad) var(--content-pad);
}

/* Chat/input-balk (sectie 5): breed, pil-vormig zolang er nog geen bericht
   is (ChatGPT-achtig) - zodra er wél een gesprek is, wordt de balk een
   rechthoek-met-afgeronde-hoeken die een begrensde, scrollbare
   transcriptie toont (nooit de volledige hoogte, de grote vlakken
   eronder blijven altijd het hoofdbeeld). */
.home-chat-bar {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
  /* Fase 1: altijd een rechthoek met afgeronde hoeken (was een pil zolang
     er geen gesprek was - daarbij viel de verstuurknop deels buiten de
     ronde hoek). */
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
    background var(--transition-base);
}

/* Cursor erboven: de rand licht heel zacht op. */
.home-chat-bar:hover {
  border-color: var(--border-strong);
}

/* Fase 1: zichtbare, zachte focus-ring op de hele chatbalk. Het invoerveld
   zelf heeft `outline: none` (zie verderop), dus zonder deze regel was er
   bij toetsenbordgebruik helemaal geen focus-indicatie. Bij focus wordt de
   hele balk iets "wakker": vlak iets voller, accent subtiel in de rand en
   een zachte ring - geen glow. */
.home-chat-bar:focus-within {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--surface) 80%, var(--surface-solid));
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-panel);
}

.home-chat-bar .chat-window {
  min-height: 0;
  max-height: 0;
  overflow-y: auto;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: max-height var(--transition-base), padding var(--transition-base);
}

.home-chat-bar:not(.is-empty) .chat-window {
  max-height: 260px;
  padding: 22px 30px 8px;
}

.home-chat-bar:not(.is-empty) .chat-form-row {
  border-top: 1px solid var(--border);
}

.chat-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 28px;
}

.chat-form-row .chat-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-form-row .chat-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 2px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--text);
}

.chat-form-row .chat-form input:focus {
  outline: none;
  /* De focus-toestand zit op de hele Home-chatbalk (zie .home-chat-bar),
     niet op het randloze veld zelf - dus geen eigen ring of vlak. */
  box-shadow: none;
  background: transparent;
}

.chat-form-row .chat-form input::placeholder {
  color: var(--text-faint);
}

.chat-form-row .chat-form button {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-form-row .chat-form button .icon {
  transition: transform var(--transition-base);
}

.chat-form-row .chat-form button:hover:not(:disabled) .icon {
  transform: translateY(-1px);
}

/* Zodra je typt, staat de verstuurknop al iets "klaar". */
.home-chat-bar:focus-within .chat-form button:not(:disabled) {
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.home-chat-bar .chat-suggestions {
  padding: 0 28px 16px;
}

.home-chat-bar.is-empty .chat-suggestions {
  padding-top: 2px;
}

/* Grote hoofdvlakken (sectie 6): drie brede, gekleurde panelen die het
   grootste deel van de resterende hoogte vullen - het rechtervlak
   (Overzicht) is bewust breder, zoals in de schets. */
.home-panels {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--shell-gap);
}

/* UI-herontwerp v2, "make all the boxes the same colour so you can switch
   between colors": alle drie de hoofdpanelen delen dezelfde themakleur
   (--panel-surface), net als de 4 navigatievlakken hierboven - wisselen
   van thema in Controls kleurt de hele interface in één keer om. */
.home-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border: 1px solid var(--card-border);
  padding: 22px 24px;
  overflow: hidden;
  background: var(--panel-surface);
  color: var(--panel-text);
  box-shadow: var(--shadow-panel);
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
    transform var(--transition-base);
}

/* Alleen panelen met een echte doorklik ("Naar Live", "Naar Inbox")
   reageren op de cursor: een lift van 2px, iets sterkere rand en schaduw.
   Overzicht (geen link) blijft stil. */
.home-panel:has(.home-panel-link):hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-panel-hover);
}

.home-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  margin-bottom: 16px;
}

.home-panel-header h2 {
  margin: 0;
  font-size: 19px;
  color: var(--text);
}

.home-panel-header .icon {
  width: 22px;
  height: 22px;
}

.home-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 14.5px;
}

.home-panel-body .inbox-row {
  border-bottom-color: var(--border);
}

.home-panel-body .inbox-row-name {
  font-size: 15px;
}

.home-panel-body .inbox-row-meta,
.home-panel-body .inbox-row-intent {
  font-size: 13px;
}

.home-panel-link {
  flex-shrink: 0;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--transition-base), color var(--transition-base);
}

.home-panel-link:hover {
  text-decoration: underline;
}

/* De link schuift een fractie mee zodra de cursor over het vlak gaat. */
.home-panel:has(.home-panel-link):hover .home-panel-link,
.home-panel-link:hover {
  transform: translateX(2px);
}

.home-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-shrink: 0;
  margin-bottom: 14px;
}

/* Fase 1: geen losse witte statistiektegels meer binnen het grote vlak -
   de kerncijfers staan direct op het pastelvlak, gescheiden door een
   dunne lijn, zodat het vlak leest als werkruimte i.p.v. dashboard. */
.home-stat-tile {
  background: transparent;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 2px 4px;
}

.home-stat-tile .stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.home-stat-tile .stat-label {
  font-size: 13px;
  color: var(--panel-text);
  margin-top: 3px;
}

.home-panel-empty {
  color: inherit;
  opacity: 0.75;
  font-size: 14.5px;
  padding: 8px 2px;
}

/* Paginakop: grote, rustige titel zoals in Apple-apps. */
.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 6px 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.page-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.47;
  max-width: 64ch;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-panel);
  padding: 22px 24px;
  margin-bottom: var(--shell-gap);
}

.panel h2 {
  margin: 0 0 12px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-hint {
  margin: -6px 0 14px 0;
  color: var(--text-muted);
  font-size: 12.5px;
}

.demo-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--neutral-soft);
  border: 1px solid var(--neutral-border);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--success);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* Klein statuspunt in de LIVE-badge, met dezelfde langzame pulse als het
   systeemstatus-bolletje - de badge zelf blijft rustig. */
.live-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
  animation: senn-pulse 2.8s var(--ease-standard) infinite;
}

/* ---------- Lege / laad- / foutstaten ---------- */

/* Lege staten: icoon erboven, daaronder de zin als lopende tekst (een
   link middenin de zin blijft in de zin staan, niet op een eigen regel). */
.state-box {
  display: block;
  padding: 18px 4px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.state-box .icon {
  display: block;
  color: var(--text-faint);
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
}

.state-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px 0;
}

.spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.inline-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

/* Een foutmelding met het hidden-attribuut moet ook echt verborgen zijn
   (display: flex hierboven zou dat anders overschrijven - zichtbaar als
   een leeg rood balkje, bv. op de inlogpagina). */
.inline-error[hidden],
.inline-success[hidden] {
  display: none;
}

/* Laad-/foutmelding van Controls staat los boven het volgende vlak. */
#host-controls > .inline-error,
#host-controls > .state-loading {
  margin-bottom: var(--shell-gap);
}

.inline-error .icon {
  color: var(--danger);
  margin-top: 1px;
}

/* Sprint 14: zelfde vorm als .inline-error, voor een geslaagd resultaat
   (bv. "Verstuurd" na een geslaagde e-mail-/WhatsApp-send). */
.inline-success {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

.inline-success .icon {
  color: var(--success);
  margin-top: 1px;
}

/* ---------- Timeline (Planning/Dashboard) ---------- */

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-time {
  width: 58px;
  flex-shrink: 0;
  font-weight: 650;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline-body {
  min-width: 0;
}

.timeline-body strong {
  display: block;
  font-size: 13.5px;
}

.timeline-body span {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---------- Planning dagweergave ---------- */

.slot-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.slot-row:last-child {
  border-bottom: none;
}

.slot-time {
  width: 96px;
  flex-shrink: 0;
  font-weight: 650;
  color: var(--text);
}

.slot-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  padding: 3px 10px;
  border-radius: 999px;
}

.slot-status.available {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.slot-status.unknown {
  background: var(--neutral-soft);
  color: var(--text-muted);
  border: 1px solid var(--neutral-border);
}

.slot-resource {
  color: var(--text-faint);
  font-size: 12px;
}

.day-group {
  margin-bottom: 6px;
}

.day-group-title {
  font-weight: 650;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 12px 4px 4px;
}

/* ---------- Werkorders ---------- */

.workorder-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workorder-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.workorder-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.workorder-card-header strong {
  font-size: 13.5px;
}

.workorder-field {
  font-size: 12.5px;
  margin: 4px 0;
}

.workorder-field .label {
  color: var(--text-muted);
  margin-right: 4px;
}

.badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.badge-new {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.badge-in-progress {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.badge-done {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success-border);
}

/* ---------- Inbox / klantcontact-rijen (Overzicht + Inbox) ------------- */

.inbox-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}

.inbox-row:last-child {
  border-bottom: none;
}

.inbox-row-time {
  width: 52px;
  flex-shrink: 0;
  font-weight: 650;
  font-size: 12.5px;
  color: var(--text-muted);
}

.inbox-row-main {
  flex: 1;
  min-width: 0;
}

.inbox-row-name {
  font-weight: 650;
  font-size: 13.5px;
}

.inbox-row-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.inbox-row-meta .icon {
  width: 13px;
  height: 13px;
  color: var(--text-faint);
}

.inbox-row-intent {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.badge-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background var(--transition-base), border-color var(--transition-base),
    color var(--transition-base);
}

/* "Gesprek actief" in de banner bovenaan: een klein ademend punt ervoor. */
#telephony-banner .badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#telephony-banner .badge-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: senn-pulse 2.8s var(--ease-standard) infinite;
}

.badge-status-success {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.badge-status-warning {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.badge-status-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

/* ---------- Automatisering ---------------------------------------------- */

.capability-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.capability-row:last-child {
  border-bottom: none;
}

.capability-row-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.capability-row-name .icon {
  color: var(--text-faint);
}

/* UI-herontwerp (sectie 7 - Controls, iOS/macOS-achtige toggles). Zuiver
   CSS bovenop de AL BESTAANDE `<input type="checkbox">`-elementen uit
   host-controls.js - geen wijziging aan die logica/markup nodig. */
.capability-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 24px;
  min-width: 40px;
  border-radius: 999px;
  background: var(--border-strong);
  border: none;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.capability-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast);
}

.capability-row input[type="checkbox"]:checked {
  background: var(--accent);
}

.capability-row input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}

.capability-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.capability-row input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

label.capability-row {
  cursor: pointer;
}

label.capability-row:hover {
  background: var(--surface-muted);
}

/* ---------- Uiterlijk (Controls): weergave + accentkleur ----------
   Weergave: Systeem / Licht / Donker (js/theme.js, "sennTheme").
   Accentkleur: Blauw / Roze / Groen (js/theme.js, "dexPalettePreference").
   Beide direct zichtbaar, zonder paginaherlading. */
.appearance-subtitle {
  display: block;
  margin: 22px 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.panel-hint + .appearance-subtitle {
  margin-top: 4px;
}

.appearance-note {
  margin: 12px 0 0;
}

.appearance-note + .appearance-subtitle {
  margin-top: 22px;
}

/* Weergave: een Apple-achtige "segmented control" - een grijze baan met
   een schuivend vlakje onder de gekozen optie. De positie volgt data-theme
   op <html> (al gezet vóór de eerste paint), dus geen sprong bij laden. */
.theme-choice {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, 132px);
  padding: 3px;
  border-radius: 12px;
  background: var(--fill);
}

.theme-choice::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 9px;
  background: var(--segment-thumb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: transform var(--motion-slow) var(--ease-out), background var(--transition-base);
}

:root[data-theme="dark"] .theme-choice::before {
  transform: translateX(100%);
}

.theme-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-base), transform var(--transition-fast);
}

.theme-option .icon {
  width: 17px;
  height: 17px;
}

.theme-option:hover,
.theme-option.active {
  color: var(--text);
}

.theme-option:active {
  transform: scale(0.97);
}

.theme-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.palette-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: var(--fill);
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-base), box-shadow var(--transition-base),
    background var(--transition-base), transform var(--transition-fast);
}

.palette-swatch:hover {
  background: var(--fill-strong);
  color: var(--text);
  transform: translateY(-1px);
}

.palette-swatch:active {
  transform: scale(0.97);
}

.palette-swatch.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent);
}

.palette-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.palette-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.palette-swatch {
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
}

.palette-swatch-color {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--neutral-border);
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .theme-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

/* ---------- Controls: doorverwijskaarten naar bestaande pagina's ---------- */

.controls-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.controls-link-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  background: var(--panel-surface-strong);
  transition: border-color var(--transition-base), background var(--transition-base),
    transform var(--transition-base);
}

.controls-link-card:hover {
  background: var(--fill-strong);
  transform: translateY(-1px);
}

.controls-link-card .icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.controls-link-card-title {
  font-weight: 650;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.controls-link-card-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---------- Klanten ---------- */

.search-form {
  display: flex;
  gap: 8px;
}

.search-form input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
}

.search-form input:focus,
.chat-form input:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.result-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 14px;
}

.result-card .customer-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}

.result-card .customer-contact {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 12px;
}

.vehicle-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vehicle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  background: var(--surface-muted);
}

.vehicle-row .icon {
  color: var(--text-faint);
}

.vehicle-row strong {
  font-weight: 650;
}

.vehicle-row span {
  color: var(--text-muted);
  font-size: 12px;
}

.demo-customer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-customer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}

.demo-customer-row:last-child {
  border-bottom: none;
}

.demo-customer-row .icon {
  color: var(--text-faint);
}

.demo-customer-row span {
  color: var(--text-muted);
  font-size: 12px;
}

/* ---------- AI-paneel ---------- */

/* Senn-paneel rechts: een aansluitende kolom van het venster (zoals een
   inspector in een Apple-app), van topbalk tot onderrand, met een dunne
   lijn ertussen. Blijft staan terwijl de inhoud scrolt. */
.ai-panel {
  grid-column: 3;
  grid-row: 2;
  background: var(--chrome-solid);
  border-left: 1px solid var(--border);
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  position: sticky;
  top: var(--topbar-h);
  animation: senn-fade-in var(--motion-normal) var(--ease-out) both;
}

.ai-panel-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ai-panel-header .icon {
  color: var(--accent);
  margin-top: 2px;
  width: 18px;
  height: 18px;
}

.ai-panel-header h2 {
  margin: 0 0 2px 0;
  font-size: 14px;
}

.ai-panel-header p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}

.chat-window {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}

.chat-bubble {
  max-width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  /* Sprint 20 (sectie 6): een korte, rustige intrede - geen bounce, geen
     glow, uitgeschakeld door de globale prefers-reduced-motion-regel. */
  animation: senn-fade-in var(--transition-base) ease-out;
}

@keyframes senn-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-bubble.user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-contrast);
  border-bottom-right-radius: 3px;
}

.chat-bubble.assistant {
  align-self: flex-start;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 3px;
}

.chat-bubble.typing {
  color: var(--text-muted);
  font-style: italic;
}

.chat-form {
  display: flex;
  gap: 8px;
}

.chat-form input {
  flex: 1;
  /* Fase 1: zonder min-width: 0 kon het invoerveld niet krimpen en viel de
     "Stuur"-knop op ~1024px breedte buiten het venster. */
  min-width: 0;
  /* Sprint 20 (sectie 6 - liquid interaction): afgerond maar bewust geen
     volledige pill-vorm (dat zou te speels ogen voor deze doelgroep). */
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-family: inherit;
  background: var(--field-bg);
  transition: border-color var(--transition-base), background var(--transition-base),
    box-shadow var(--transition-base);
}

.chat-form input:hover {
  background: var(--fill-strong);
}

.chat-form input:focus {
  background: var(--surface);
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chat-form button,
.search-form button {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  border-radius: 999px;
  padding: 0 18px;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--transition-base), transform var(--transition-fast),
    box-shadow var(--transition-base);
}

.chat-form button:hover,
.search-form button:hover,
.button-primary:hover {
  background: var(--accent-hover);
}

.chat-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.chat-form input:disabled,
.search-form input:disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.chat-suggestion:disabled {
  opacity: 0.5;
  cursor: default;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-suggestion {
  border: 1px solid transparent;
  background: var(--fill);
  /* Op één regel een capsule; loopt de tekst op een smal scherm over twee
     regels, dan een zacht afgeronde rechthoek. */
  border-radius: 16px;
  padding: 6px 13px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--transition-base), border-color var(--transition-base),
    color var(--transition-base), transform var(--transition-fast);
}

.chat-suggestion:hover {
  color: var(--text);
  background: var(--fill-strong);
}

/* Klantkaart in het chatpaneel */

.customer-card {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
}

.customer-card .customer-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}

.customer-card .customer-contact {
  color: var(--text-muted);
  margin-bottom: 8px;
}

.vehicle-chip {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  margin-top: 6px;
}

.vehicle-chip strong {
  display: block;
  font-size: 13px;
}

.vehicle-chip span {
  font-size: 12px;
  color: var(--text-muted);
}

/* Activiteitenlogboek: onderscheid AI-denkstap vs. echte backend-actie */

.activity-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  max-height: 220px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.activity-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  margin-top: 1px;
  color: var(--text-faint);
}

.activity-thinking .activity-icon,
.activity-thinking .activity-text {
  color: var(--text-muted);
}

.activity-thinking .activity-text {
  font-style: italic;
}

.activity-success .activity-icon {
  color: var(--success);
}

.activity-warning .activity-icon {
  color: var(--warning);
}

.activity-error .activity-icon {
  color: var(--danger);
}

.activity-source {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
}

/* ---------- Gesprekken (Call Analyzer) ---------- */

textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
}

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

.button-primary {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition-base), transform var(--transition-fast),
    box-shadow var(--transition-base);
}

.button-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.button-secondary {
  border: 1px solid transparent;
  background: var(--fill);
  color: var(--text);
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--transition-base), border-color var(--transition-base),
    color var(--transition-base), transform var(--transition-fast);
}

/* ---------- Eén bewegingstaal voor alle knoppen ----------
   Hover: zachte kleurwissel (per knoptype hierboven) en een lift van 1px.
   Indrukken: heel kort iets kleiner (0.97) en soepel terug - knoppen
   voelen tastbaar. Geldt voor alle bestaande echte knoppen (Stuur,
   Bekijken, actieknoppen, Uitloggen, …); functionaliteit ongewijzigd.
   Uitgeschakelde knoppen bewegen niet. */
:is(.button-primary, .button-secondary, .chat-form button, .search-form button, .login-form button):hover:not(:disabled) {
  transform: translateY(-1px);
}

:is(.button-primary, .button-secondary, .button-text, .chat-form button, .search-form button,
  .login-form button, .chat-suggestion, .user-context-logout, .workspace-tab):active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

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

/* Sprint 14: geselecteerde staat van de Inbox-kanaal-snelfilters
   (Alles/E-mail/WhatsApp/Medewerker nodig). */
.inbox-quick-filter.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

/* Actief-gesprek werkgebied */

.conversation-workspace {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.conversation-header {
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.conversation-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.conversation-header-title .icon {
  color: var(--accent);
}

.conversation-identity {
  padding: 18px 20px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.identity-block {
  min-width: 200px;
}

.identity-block .identity-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.identity-block .identity-name {
  font-size: 16px;
  font-weight: 700;
}

.identity-block .identity-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.conversation-body {
  padding: 4px 20px 20px;
}

.analysis-section {
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.analysis-section:first-child {
  border-top: none;
  padding-top: 0;
}

.analysis-section:last-child {
  margin-bottom: 0;
}

.analysis-section h3 {
  margin: 0 0 10px 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.analysis-section h3 .icon {
  color: var(--text-faint);
  width: 15px;
  height: 15px;
}

.analysis-field {
  font-size: 13.5px;
  margin: 5px 0;
  line-height: 1.55;
}

.analysis-field .label {
  color: var(--text-muted);
  margin-right: 4px;
}

.analysis-empty {
  color: var(--text-faint);
  font-style: italic;
  font-size: 13px;
}

.source-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.source-tag.from-transcript {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.source-tag.from-gms {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.source-tag.unconfirmed {
  background: var(--neutral-soft);
  color: var(--text-muted);
  border: 1px solid var(--neutral-border);
}

.yesno-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
}

.yesno-badge.yes {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.yesno-badge.no {
  background: var(--neutral-soft);
  color: var(--text-muted);
  border: 1px solid var(--neutral-border);
}

.yesno-badge.uncertain {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
}

.analysis-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  color: var(--warning);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 20px;
}

.analysis-disclaimer .icon {
  color: var(--warning);
  margin-top: 1px;
}

.analysis-error {
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

/* Slot-keuze in de werkplaatsflow */

.slot-option {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--text);
}

.slot-option:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.preview-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-muted);
}

.preview-card h3 {
  margin: 0 0 10px 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.preview-not-saved {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--warning);
  font-size: 12.5px;
  font-weight: 650;
  margin: 10px 0;
}

.preview-not-saved .icon {
  color: var(--warning);
}

.commit-warning {
  color: var(--text-faint);
  font-size: 11.5px;
  margin-top: 8px;
}

.success-card {
  border: 1px solid var(--success-border);
  background: var(--success-soft);
  border-radius: var(--radius);
  padding: 16px;
}

.success-card .success-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--success);
  font-size: 14px;
  margin-bottom: 10px;
}

/* ---------- Audio-upload ---------- */

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 26px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}

.dropzone .icon {
  width: 22px;
  height: 22px;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.dropzone p {
  margin: 4px 0;
}

/* ---------- Instellingen ---------- */

.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}

.integration-row:last-child {
  border-bottom: none;
}

.integration-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.integration-name .icon {
  color: var(--text-faint);
}

.integration-sub {
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 400;
}

.capability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.capability-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  border: 1px solid var(--success-border);
  background: var(--success-soft);
  color: var(--success);
  border-radius: 999px;
  padding: 3px 10px;
}

.capability-chip .icon {
  width: 12px;
  height: 12px;
}

/* Klein responsief vangnet voor smallere/laptop-vensters tijdens een demo */
@media (max-width: 1280px) {
  :root {
    --ai-panel-w: 300px;
  }
}

@media (max-width: 1080px) {
  :root {
    --ai-panel-w: 280px;
    --content-pad: 24px;
    --shell-gap: 16px;
  }

  .user-button-text {
    display: none;
  }
}

@media (max-width: 900px) {
  .app-shell,
  /* `.app-shell.app-shell-single` (Home) is specifieker dan `.app-shell` en
     moet hier dus expliciet mee naar één kolom. */
  .app-shell.app-shell-single {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    padding: 0 12px 12px;
    column-gap: 0;
    row-gap: 12px;
  }

  .topbar {
    grid-column: 1;
    margin: 0 -12px;
    padding-right: 10px;
    gap: 8px;
  }

  .app-brand {
    padding-left: 16px;
    padding-right: 8px;
  }

  .topbar-title,
  .status-pill-text,
  .topbar-divider {
    display: none;
  }

  /* Smalle schermen: de icoonbalk wordt een compacte rij onder de
     topbalk, met de namen altijd zichtbaar (geen hover op touch). */
  .rail {
    grid-column: 1;
    grid-row: 2;
    position: static;
    height: auto;
  }

  .rail-panel,
  .rail:hover .rail-panel,
  .rail:focus-within .rail-panel {
    position: static;
    width: auto;
    flex-direction: row;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow-x: auto;
  }

  .nav {
    flex-direction: row;
    padding: 0;
    flex: 1 1 auto;
  }

  .nav-bottom {
    margin-top: 0;
    flex: 0 0 auto;
  }

  .nav a {
    flex: 1 1 auto;
    justify-content: center;
    gap: 8px;
  }

  .nav-label,
  .rail:hover .nav-label,
  .rail:focus-within .nav-label {
    opacity: 1;
    transform: none;
  }

  .main {
    /* `.main`'s basisregel (grid-column: 2) moet hier expliciet terug naar
       kolom 1, anders ontstaat er een impliciete tweede grid-kolom. */
    grid-column: 1;
    grid-row: 3;
    max-width: none;
    padding: 0;
  }

  /* Smal: het Senn-paneel is geen aansluitende kolom meer maar een
     gewone kaart onder de inhoud. */
  .ai-panel {
    grid-column: 1;
    grid-row: 4;
    position: static;
    height: auto;
    margin: 0;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    background: var(--surface);
  }

  .home-main {
    height: auto;
    padding: 0;
  }

  .home-panels {
    grid-template-columns: 1fr;
  }

  .home-panel {
    min-height: 220px;
  }
}

@media (max-width: 560px) {
  .topbar-title {
    display: none;
  }

  .nav-label {
    display: none;
  }

  .conversation-identity {
    gap: 14px;
  }
}

/* ---------- Sprint 15: gebruikerscontext + inlogpagina ---------- */

/* De ingelogde gebruiker (naam, organisatie, uitloggen) - gevuld door
   js/auth.js - staat in het gebruikersmenu rechtsboven. De avatar en de
   naam op de knop zelf zet js/app-shell.js op basis van deze inhoud. */
.user-context-pill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.user-context-name,
.user-context-org {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-context-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.user-context-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px -8px 0;
  padding: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.user-context-logout:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.user-context-logout:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Security-hardening: "Wachtwoord wijzigen" in het gebruikersmenu. */
.user-context-link {
  text-decoration: none;
}

.user-context-link:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.user-context-link + .user-context-logout {
  margin-top: 2px;
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 36px 32px 28px;
  text-align: center;
}

/* Merk op de inlogpagina: hetzelfde (inline) merkteken als in de
   topbalk, groter, met de merknaam eronder. */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--text);
}

.login-brand .brand-mark-svg {
  width: 56px;
}

.login-org {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.login-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-footnote {
  margin: 20px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
}

.login-subtitle {
  margin: 0 0 24px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.login-form label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 10px;
}

.login-form input,
.login-form select {
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--field-bg);
  color: var(--text);
}

.login-form input:focus,
.login-form select:focus {
  outline: 2px solid var(--accent-border);
  outline-offset: 1px;
}

.login-form button {
  margin-top: 18px;
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  font-size: 14px;
  transition: background var(--transition-base), transform var(--transition-fast);
}

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

.login-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Security-hardening: gegroepeerde velden (wachtwoord.html) houden de
   volle breedte, net als de losse velden in het formulier. */
.login-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-form-group[hidden] {
  display: none;
}

/* Receptionist Workspace (Sprint 19, herzien in Sprint 20 - sectie 3/9:
   round-square/soft-industrial vormtaal, minder genest "kaartjes-op-
   kaartjes"-gevoel, progressive disclosure). ---------------------------- */

.workspace-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 14px;
  align-items: start;
}

.workspace-column {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.workspace-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-weight: 600;
  font-size: 13.5px;
}

.workspace-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface-muted);
  border-radius: var(--radius);
  padding: 2px;
}

.workspace-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.workspace-tab.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.workspace-list {
  max-height: 640px;
  overflow-y: auto;
  padding: 0 6px 6px;
}

.workspace-inbox-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: var(--radius);
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  border: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}

.workspace-inbox-row:hover {
  background: var(--surface-muted);
}

.workspace-inbox-row:active {
  transform: scale(0.99);
}

.workspace-inbox-row.selected {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.workspace-inbox-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.workspace-attention-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
  display: inline-block;
}

.workspace-empty {
  padding: 28px 16px;
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
}

/* Sprint 20: bewust GEEN genest kaartje per fact-group meer - alleen
   whitespace + een dunne scheidingslijn, zodat het contextpaneel als één
   rustig geheel leest in plaats van een stapel losse widgets (sectie 9). */
.fact-group {
  padding: 14px 16px;
}

.fact-group + .fact-group {
  border-top: 1px solid var(--border);
}

.fact-group-title {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fact-group-title.source-gms {
  color: var(--accent);
}

.fact-group-title.source-communication {
  color: var(--warning);
}

.fact-group-title.source-senn {
  color: var(--success);
}

/* Progressive disclosure (sectie 8): native <details>, geen custom
   accordion-JS - toetsenbord/screenreader-toegankelijk zonder extra werk. */
.fact-details > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--accent);
  list-style: none;
}

.fact-details > summary::-webkit-details-marker {
  display: none;
}

.fact-details > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform var(--transition-fast);
}

.fact-details[open] > summary::before {
  transform: rotate(90deg);
}

.fact-details .fact-details-body {
  margin-top: 8px;
}

/* Senn's voorstellen (sectie 5D/12): mogen tijdelijk prominenter zijn dan
   een gewone GMS-feitenregel - zacht accent-getint, geen gestippelde
   "placeholder"-rand meer (leest premium in plaats van tijdelijk). */
.suggestion-card {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 8px;
  animation: senn-fade-in var(--transition-base) ease-out;
}

.suggestion-card:last-child {
  margin-bottom: 0;
}

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

/* Inline approval (sectie 7/13): duidelijke, niet-ambigue knoppenhiërarchie
   - goedkeuren is de enige `.button-primary`, andere acties zijn secundair/
   tekstueel zodat een per-ongeluk-klik op een destructieve actie niet
   waarschijnlijk is. */
.approval-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  background: var(--surface);
  transition: border-color var(--transition-fast);
}

.approval-textarea:focus {
  border-color: var(--accent-border);
}

.approval-line-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}

.approval-line-item + .approval-line-item {
  border-top: 1px solid var(--border);
}

.button-text {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.button-text:hover {
  background: var(--fill);
  color: var(--text);
}

.button-text:disabled,
.button-secondary:disabled,
.button-primary:disabled {
  opacity: 0.55;
  cursor: default;
}

.consent-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-lg);
  margin: 0 0 12px;
  animation: senn-fade-in var(--transition-base) ease-out;
}

.simulator-note {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Responsive (sectie 10): desktop primair, geen horizontale scroll op
   laptop/tablet. Bij een normale kantoor-laptop (~1280px) wordt de
   Assist Bar iets smaller in plaats van de contextkolom te verdrukken; pas
   op echte tabletbreedte stapelt alles onder elkaar. */
@media (max-width: 1400px) {
  :root {
    --ai-panel-w: 300px;
  }
}

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

/* ------------------------------------------------------------------------
   Sprint 23: Senn Manager
   Hergebruikt de bestaande tokens (panel, fill, segment-thumb, status-pill,
   integration-row) - geen eigen designsysteem.
   ------------------------------------------------------------------------ */

/* Navigatie-items die door modules/permissies verborgen zijn. */
.nav a[hidden] {
  display: none;
}

.manager-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--shell-gap);
  border-radius: 14px;
  background: var(--fill);
  width: fit-content;
  max-width: 100%;
}

.manager-tab {
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

.manager-tab:hover {
  color: var(--text);
}

.manager-tab[aria-selected="true"] {
  background: var(--segment-thumb);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
}

.manager-tab:active {
  transform: scale(0.97);
}

.manager-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.manager-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.manager-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--fill);
}

.manager-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.manager-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.manager-usage-state {
  margin: 14px 0 0;
}

.manager-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  margin-bottom: 18px;
}

.manager-form label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 8px;
}

.manager-form .manager-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.manager-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.manager-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.manager-instruction .integration-sub {
  white-space: normal;
}

@media (max-width: 720px) {
  .manager-instruction {
    flex-wrap: wrap;
  }
}

/* Sprint 24: melding bij verbindingsverlies (js/auth.js). */
.senn-connection-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--warning-soft);
  border-bottom: 1px solid var(--warning-border);
  color: var(--warning);
  font-size: 14px;
  text-align: center;
}

/* Sprint 25: pilot-/demomelding (js/auth.js). */
.senn-pilot-banner {
  padding: 6px 16px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-border);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}