/* ===========================================================================
   style.css — Brabant Verduurzaamd D2D Kaart (Fase 1)
   Mobile-first. Zakelijk, clean, eenvoudig. De kaart is visueel het
   belangrijkste element; alle overige UI blijft compact en uit de weg.
   =========================================================================== */

/* Fase 17 — Waalaxy-geinspireerde restyle (alleen het uiterlijk, zie
   README "Technische keuzes — Fase 17"). Het groen-getinte palet van
   Fase 1 is vervangen door een blauw/marine palet gebaseerd op Waalaxy's
   eigen merkkleuren (Mariner #214FCF, Mirage #14142B), met een apart
   accent voor sfeer (--color-accent, Waalaxy's "Your Pink" #a9793d) en
   een nieuwe, aparte --color-success-bg (bewust NIET gelijk aan
   --color-brand, in tegenstelling tot vóór Fase 17 — anders zijn een
   "info"- en een "succes"-melding niet meer van elkaar te onderscheiden
   nu de merkkleur zelf ook blauw is). Statuskleuren op de kaart zelf
   (js/config.js, marker-kleuren) zijn BEWUST niet aangeraakt — dat is
   functionele/semantische kleurcodering (Lead/Afspraak/Sale etc.), geen
   merk-chrome, en blijft dus ongewijzigd zodat het team niets hoeft te
   herleren. */
:root {
  /* Fase 20: huisstijl Woonbeeld Nederland (woonbeeldnederland.nl): navy, goud-accent, mosgroen, Fraunces + Public Sans. */
  --color-brand-dark: #16263f;
  --color-brand: #16263f;
  --color-brand-light: #2c4667;
  --color-accent: #a9793d;
  --color-bg: #f3f5f7;
  --color-text: #1b2530;
  --color-text-muted: #545f6b;
  --color-danger-bg: #7a1f1f;
  --color-danger-text: #ffffff;
  --color-success-bg: #4b6b45;
  --color-info-bg: #16263f;

  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;

  --header-height: 52px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* geen horizontale/verticale document-scroll; alleen de kaart scrollt/pant */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  /* Fase 5-fix: op sommige mobiele browsers (vooral Android) rekende
     100dvh zich baseerde op een viewport die de adresbalk/statusbalk nog
     meetelt als "beschikbare ruimte", waardoor de koptekst er half onder
     verdween en er (door overflow:hidden hieronder) niet naartoe te
     scrollen was. `svh` ("small viewport height") is de doelbewust
     CONSERVATIEVE variant: de garandeerd-zichtbare hoogte, altijd
     uitgaand van volledig uitgeklapte browser-UI. Drie regels op dezelfde
     eigenschap is bewust: een browser die een waarde niet kent, negeert
     die ene regel en houdt de vorige aan — dus 100vh (oudste, altijd
     geldig) → 100dvh (moderne, dynamische fallback) → 100svh (wint als
     ondersteund: nooit te hoog, dus nooit iets buiten beeld). */
  height: 100vh;
  height: 100dvh;
  height: 100svh;
}

button {
  font-family: inherit;
}

/* ---------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------ */
.app-header {
  flex: 0 0 auto;
  height: calc(var(--header-height) + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-brand-dark);
  color: #ffffff;
  z-index: 500;
}

.app-header__identity {
  flex: 0 1 auto;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-header__identity:active {
  background: rgba(255, 255, 255, 0.18);
}

.app-header__title {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0; /* laat flex-child echt krimpen i.p.v. de knoppen ernaast te verdringen */
  flex: 1 1 auto;
  overflow: hidden;
}

.app-header__brand,
.app-header__subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__brand {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.app-header__subtitle {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   "Mijn cijfers vandaag" + offline-wachtrij-indicator (Fase 13)
   Gewone flex-child tussen header en kaart (geen absolute positionering
   nodig) — de kaart (.map-wrapper, flex: 1 1 auto) krimpt hierdoor
   automatisch mee, zonder dat de dvh/svh-berekening van <body> hoeft te
   worden aangepast (zie de Fase 5-toelichting hierboven).
   ------------------------------------------------------------------------ */
/* Zelfde valkuil als #btn-compass hierboven (Fase 8) en .admin-overlay
   (Fase 12, zie css/admin.css): een element met een eigen, onvoorwaardelijke
   `display`-waarde negeert het `hidden`-attribuut anders gewoon. */
.mijn-cijfers-balk[hidden] {
  display: none;
}

.mijn-cijfers-balk {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px max(16px, var(--safe-right)) 8px max(16px, var(--safe-left));
  background: #e8ebf1;
  border-bottom: 1px solid #e1e5ea;
  font-size: 13px;
  color: var(--color-text);
}

.mijn-cijfers-balk__tekst {
  font-weight: 600;
}

.mijn-cijfers-balk__wachtend {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-info-bg);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Kaart
   ------------------------------------------------------------------------ */
.map-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; /* laat flex-child echt krimpen i.p.v. content pushen */
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #e1e5ea;
}

/* Leaflet's eigen zoomcontrol staat rechtsboven, onder onze eigen
   "mijn locatie"-knop én de (Fase 8) kompasknop — twee knoppen van 48px
   plus tussenruimte, altijd gereserveerd (ook als de kompasknop net
   verborgen is) zodat de zoomcontrol niet verspringt/overlapt zodra de
   kompasknop verschijnt tijdens het draaien van de kaart. */
.leaflet-top.leaflet-right {
  margin-top: calc(max(12px, var(--safe-top)) + 48px + 10px + 48px + 10px);
  margin-right: max(8px, var(--safe-right));
}
.leaflet-bottom.leaflet-right .leaflet-control-attribution {
  margin-bottom: max(4px, var(--safe-bottom));
  margin-right: max(4px, var(--safe-right));
}

/* ---------------------------------------------------------------------------
   Floating controls
   ------------------------------------------------------------------------ */
.map-controls {
  position: absolute;
  z-index: 600;
  display: flex;
  gap: 10px;
}

.map-controls--top-right {
  top: max(12px, var(--safe-top));
  right: max(12px, var(--safe-right));
  flex-direction: column;
}

/* Adres zoeken (Fase 6): zelfde linker/rechter-marge als de statusbalk
   (laat rechts bewust ruimte voor de "mijn locatie"-knop), zodat ze mooi
   onder elkaar uitlijnen i.p.v. elkaar te overlappen. */
.map-controls--top-left {
  top: max(12px, var(--safe-top));
  left: max(12px, var(--safe-left));
  right: max(76px, calc(60px + var(--safe-right)));
  flex-direction: column;
  align-items: stretch;
}

.map-controls--bottom {
  left: max(12px, var(--safe-left));
  right: max(12px, var(--safe-right));
  bottom: max(16px, var(--safe-bottom));
  flex-direction: column;
  align-items: stretch;
}

.control-btn {
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.control-btn--icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--color-brand-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.control-btn--icon:active {
  background: #f3f5f7;
}

/* Fase 8 (kaart draaien): .control-btn--icon zet zelf al display:flex, dus
   het `hidden`-attribuut alleen is niet genoeg om #btn-compass te
   verbergen (author-CSS wint van de UA-standaardregel voor [hidden]) —
   deze regel, met een hogere specificiteit (id + attribuut), forceert het
   alsnog. */
#btn-compass[hidden] {
  display: none;
}

#btn-compass-needle {
  transition: transform 0.15s ease-out;
}

.control-btn--primary {
  min-height: 52px;
  padding: 12px 20px;
  font-size: 16px;
  /* Fase 17: gradient i.p.v. vlakke kleur voor een "Waalaxy-achtige"
     knopstijl — geldt via deze ene gedeelde klasse automatisch ook voor
     bijv. de sale-formulier-submitknop (.sale-form__actions .control-btn
     overschrijft de achtergrond niet apart). */
  background: var(--color-brand);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(22, 38, 63, 0.35);
}

.control-btn--primary:active {
  background: var(--color-brand-dark);
}

.control-btn--primary[disabled] {
  opacity: 0.7;
  cursor: default;
}

.control-btn--secondary {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.control-btn--secondary:active {
  background: #ffffff;
}

/* ---------------------------------------------------------------------------
   Adres zoeken (Fase 6)
   ------------------------------------------------------------------------ */
.address-search {
  position: relative;
  width: 100%;
}

.address-search__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  color: var(--color-text);
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.address-search__input:focus {
  outline: 2px solid var(--color-brand-light);
  outline-offset: 1px;
}

.address-search__results {
  position: absolute;
  z-index: 620;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.address-search__result {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.address-search__result:active {
  background: #f3f5f7;
}

.address-search__result--empty,
.address-search__result--error {
  color: var(--color-text-muted);
  font-style: italic;
  cursor: default;
}

.address-search__result--empty:active,
.address-search__result--error:active {
  background: transparent;
}

/* ---------------------------------------------------------------------------
   Statusbalk
   ------------------------------------------------------------------------ */
.status-bar {
  position: absolute;
  z-index: 650;
  /* Onder de zoekbalk (44px hoog + 10px marge) i.p.v. eroverheen — beide
     staan links, dus ze zouden anders overlappen (zie .map-controls--top-left). */
  top: calc(max(12px, var(--safe-top)) + 54px);
  left: max(12px, var(--safe-left));
  right: max(76px, calc(60px + var(--safe-right))); /* laat ruimte voor de locatieknop */
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.status-bar--info {
  background: var(--color-info-bg);
  color: #ffffff;
}

.status-bar--success {
  background: var(--color-success-bg);
  color: #ffffff;
}

.status-bar--error {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* ---------------------------------------------------------------------------
   Bottom sheet

   Fase 13-fix: z-index was 700/800 (identity-modal 900) — dat leek altijd
   ruim genoeg boven de kaart, maar Leaflet geeft zijn EIGEN
   .leaflet-top/.leaflet-bottom controls (dus ook de zoomknoppen) intern al
   z-index:1000. Zolang de kaart hoog genoeg begon, kwam de zoomcontrol
   toevallig nooit fysiek onder de bottom sheet te liggen — maar sinds de
   "mijn cijfers vandaag"-balk (Fase 13) de kaart een stukje lager laat
   beginnen, schuift de (relatief t.o.v. de kaart gepositioneerde)
   zoomcontrol ook mee naar onderen, tot ín het gebied waar de bottom sheet
   zijn sluitknop toont — en omdat 1000 > 800 "wint" die onzichtbare
   Leaflet-controllaag de klik ("intercepts pointer events"), ontdekt via
   Playwright in de Fase 13-tests. Structurele fix i.p.v. pixel-tellen:
   alle volledig-schermvullende overlays/sheets/modals altijd BOVEN
   Leaflet's interne 1000 houden, zodat toekomstige layoutwijzigingen deze
   klasse van bug niet weer kunnen veroorzaken.
   ------------------------------------------------------------------------ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1700;
}

.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1800;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  padding: 10px 20px calc(20px + var(--safe-bottom)) 20px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bottom-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #c6ccd5;
  margin: 4px auto 12px auto;
}

.bottom-sheet__close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.sheet-address {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.sheet-line {
  margin: 0 0 14px 0;
  font-size: 16px;
  color: var(--color-text-muted);
}

.sheet-bagid-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid #f3f5f7;
}

.sheet-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.sheet-bagid {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.sheet-meta {
  margin: 8px 0 0 0;
  font-size: 15px;
  color: var(--color-text);
  padding-top: 8px;
  border-top: 1px solid #f3f5f7;
}

.sheet-meta--loading {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Statuskiezer (Fase 2)
   ------------------------------------------------------------------------ */
.status-picker {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f3f5f7;
}

.status-picker__grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.status-btn--breed {
  grid-column: 1 / -1;
}

.status-btn {
  --status-color: #8a93a0;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: color-mix(in srgb, var(--status-color) 18%, #ffffff);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding-left: 30px;
}

.status-btn::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--status-color);
}

.status-btn--active {
  border-color: var(--status-color);
  background: color-mix(in srgb, var(--status-color) 32%, #ffffff);
}

.sheet-status-meta {
  margin: 10px 0 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Naam-modal (Fase 2)
   ------------------------------------------------------------------------ */
.identity-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1900; /* Fase 13: zie toelichting bij .bottom-sheet — ook deze modal moet boven Leaflet's interne z-index:1000 blijven */
  width: min(340px, calc(100vw - 40px));
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 22px calc(20px + var(--safe-bottom)) 22px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.identity-modal__title {
  font-family: var(--font-heading);
  margin: 0 0 6px 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
}

.identity-modal__hint {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Fase 3: vaste naamlijst i.p.v. vrije tekst — keuzeknoppen i.p.v. een
   tekstveld. */
.identity-modal__choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.identity-choice-btn {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #f3f5f7;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.identity-choice-btn--active {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand-light) 25%, #ffffff);
}

.identity-modal__actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

.identity-modal__actions .control-btn {
  flex: 1 1 0;
  min-height: 46px;
}

/* ---------------------------------------------------------------------------
   Sale-formulier (Fase 16 — herbouwd, zie README)
   Zelfde vormtaal als de rest van de bottom sheet/identity-modal: afgeronde
   invoervelden, dezelfde --color-brand-accenten, control-btn voor de acties.
   ------------------------------------------------------------------------ */
.sale-form {
  margin-top: 10px;
}

.sale-form__field {
  margin-bottom: 12px;
}

.sale-form__field .sheet-label {
  display: block;
  margin-bottom: 4px;
}

.sale-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid #e1e5ea;
  background: #fff;
  color: var(--color-text);
  font-size: 15px;
  font-family: inherit;
}

.sale-input:focus {
  outline: none;
  border-color: var(--color-brand-light);
}

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

select.sale-input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='%235a6660' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}

.sale-form__error {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-danger-bg) 12%, #ffffff);
  color: var(--color-danger-bg);
  font-size: 14px;
  font-weight: 600;
}

.sale-form__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.sale-form__actions .control-btn {
  flex: 1 1 0;
  min-height: 46px;
}

/* ---------------------------------------------------------------------------
   "Geen sale"-reden-modal (Fase 14) — hergebruikt .identity-modal* hierboven,
   dit zijn alleen de extra stukjes (het "Anders, namelijk..."-tekstveld).
   ------------------------------------------------------------------------ */
.geen-sale-anders-wrap {
  margin-top: 12px;
}

.geen-sale-anders-input {
  margin-top: 6px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid #f3f5f7;
  background: #ffffff;
  color: var(--color-text);
  font-size: 15px;
  box-sizing: border-box;
}

.geen-sale-anders-input:focus {
  outline: none;
  border-color: var(--color-brand);
}

/* ---------------------------------------------------------------------------
   Header dashboard-link (Fase 3)
   ------------------------------------------------------------------------ */
.app-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header__dashboard-link {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.app-header__dashboard-link:active {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------------------------
   Responsieve fine-tuning
   ------------------------------------------------------------------------ */

/* Kleine telefoons (~360px breed) */
@media (max-width: 374px) {
  .control-btn--primary {
    font-size: 15px;
    padding: 11px 14px;
  }
  .status-bar {
    font-size: 13px;
  }
}

/* Desktop / grotere schermen: houd de UI compact in het midden i.p.v.
   over de volledige breedte uit te rekken. */
@media (min-width: 700px) {
  .map-controls--bottom {
    left: auto;
    right: max(20px, var(--safe-right));
    width: 280px;
  }
  .bottom-sheet {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 380px;
    border-radius: 16px;
    max-height: 70vh;
  }
  .sheet-overlay {
    background: rgba(0, 0, 0, 0.15);
  }
}

/* ---- Fase 18: knop "Open in CRM" bij een sale ---------------------------- */
.sheet-crm {
  margin-top: 16px;
}
.sheet-crm > p {
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.sheet-crm > .sheet-crm__btn + .sheet-crm__btn {
  margin-top: 10px;
}
.sheet-crm__btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

/* ---- Fase 19: eerst kiezen wat er verkocht is ----------------------------- */
.sale-soort {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.sale-soort__btn {
  width: 100%;
}
.sale-soort__annuleer {
  margin-top: 4px;
}

/* ---- Fase 20: Woonbeeld-woordmerk in de kopbalk (zoals de footer van woonbeeldnederland.nl) ---- */
.wb-brand { text-transform: none; letter-spacing: 0; overflow: visible; padding-top: 6px; }
.wb-brand b {
  display: flex;
  align-items: baseline;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.01em;
}
.wb-mono {
  position: relative;
  font-size: 1.6em;
  font-weight: 800;
  line-height: 0.8;
  margin-right: -3px;
  padding-bottom: 2px;
  border-bottom: 3px solid var(--color-accent);
}
.wb-leaf {
  position: absolute;
  top: -0.3em;
  right: -0.08em;
  width: 0.5em;
  height: 0.5em;
  fill: #8fc17f;
  transform: rotate(18deg);
}

/* Fase 21 (B9): één brede inlog-/uitlogknop in het inlogvenster */
.identity-modal__choices .identity-choice-btn:only-child {
  grid-column: 1 / -1;
  width: 100%;
}