/*
 * HUMBLE Offertetool — on-screen design system.
 * Source of truth as of design_5.zip (de "HUMBLE platform"-ontwerpbundel):
 * tokens.css/tokens.json (--hum-* namen) en "Intern systeem.dc.html" (het
 * daadwerkelijk gerenderde scherm — leidend waar het van tokens.css afwijkt,
 * want tokens.css is een richtlijn, de mockup zelf is wat je daadwerkelijk
 * ziet). De --hot-*-namen hieronder blijven staan (zie BESLUITEN.md "Design-
 * tokens" — een volledige hernoeming zou honderden bestanden raken voor nul
 * zichtbaar verschil); waar een --hot-*-WAARDE niet meer overeenkwam met
 * design_5.zip is die hier bijgewerkt. Bewuste UITZONDERING, expliciet zo
 * gevraagd: de zijbalk-achtergrond blijft de bestaande kleurovergang
 * (--hot-dark-gradient) — design_5.zip's eigen notitie bij het zijmenu zegt
 * zelf "gradient eruit, vlak petrol", maar dat is hier bewust NIET
 * overgenomen.
 * Print/PDF rules live in print.css, not here.
 */

/* =========================================================================
   0. Custom properties — the full palette + radii + fonts, ranked roughly
   by frequency per BUILD_NOTES.md. Every rule below references one of
   these instead of a bare hex, so a palette tweak is a one-line change.
   ========================================================================= */
:root{
  /* text */
  --hot-text:#243B50;            /* primary text (headings, dark body text) */
  --hot-text-secondary:#48555F;  /* secondary/label text */
  --hot-text-muted:#6B7785;      /* muted/help text */
  --hot-text-hint:#7E8B99;       /* placeholder/hint text, sidebar secondary */

  /* action / links */
  --hot-blue:#2F8FFF;            /* primary action blue — "HUMBLE-blauw" */
  --hot-link:#2F7FEB;
  --hot-link-hover:#2568A5;

  /* borders / panel backgrounds */
  --hot-border:#DDE3EA;
  --hot-border-soft:#E6EBF1;
  --hot-panel-bg-1:#EDF1F5;
  --hot-panel-bg-2:#F0F3F7;
  --hot-panel-bg-3:#F7F9FB;
  --hot-panel-bg-4:#F2F4F7;
  --hot-page-bg:#F4F4F4;

  /* sidebar / login dark navy — bijgewerkt naar Huisstijl Manual V3 (design-
     handoff v10, "huisstijl doorgevoerd"): petrol/teal eruit, HUMBLE-blauw
     erin. #2F8FFF blijft wél bestaan als kleur (zie --hot-teal-accent
     hieronder) — de manual noemt 'm expliciet als spaarzaam te gebruiken
     secundaire CTA-kleur, alleen niet meer als DE hoofdaccent/kicker-kleur
     die --hot-teal hier altijd was. */
  --hot-navy:#16273A;
  --hot-navy-active:#243B50;
  --hot-navy-badge:#243B50;
  --hot-teal:#2F8FFF;            /* "OFFERTETOOL" wordmark subtitle, kickers — nu primair accentblauw i.p.v. teal */
  --hot-teal-accent:#2F8FFF;     /* spaarzaam te gebruiken secundaire CTA-kleur (Huisstijl Manual V3) — NIET voor kickers/hoofdaccenten, alleen losse, bewust gekozen plekken */
  --hot-sidebar-text:#C3CDD8;
  --hot-sidebar-text-dim:#98A6B4;
  --hot-sidebar-text-dimmer:#9AA6B2;
  --hot-sidebar-divider:#5C6B7A;

  /* status tones (pill bg / fg pairs) */
  --hot-teal-bg:#EFF9FD; --hot-teal-fg:#2568A5;         /* done / verstuurd */
  --hot-blue-bg:#EFF9FD; --hot-blue-fg:#2568A5;         /* act / lopend */
  --hot-amber-bg:#FFF6E5; --hot-amber-fg:#8A5B00;       /* wait / let op */
  --hot-grey-bg:#F2F4F7; --hot-grey-fg:#48555F;         /* draft / neutraal */
  --hot-red-bg:#FDECEC; --hot-red-fg:#A32020;           /* reject / error */
  --hot-red-border:#F5C2C2;

  /* misc highlight */
  --hot-hover-blue-border:#9FC8F5;
  --hot-hover-blue-bg:#F7FBFF;

  /* radii — bijgewerkt naar design_5.zip's tokens.css (--hum-radius-*): was
     9/14/16px, nu 8/12/14px. --hot-radius-md blijft 10px (kwam al overeen
     met --hum-radius-cell). */
  --hot-radius-sm:8px;     /* inputs / small buttons */
  --hot-radius-md:10px;    /* buttons / nav items */
  --hot-radius-lg:12px;    /* cards / panels */
  --hot-radius-xl:14px;    /* modals / login card */
  --hot-radius-pill:999px; /* pills / avatars / badges */

  /* shadows (design_5.zip tokens.css --hum-shadow-*/--hum-scrim) — nieuw,
     nog nergens gebruikt vóór deze wijziging; nu toegepast op .hot-card/
     .hot-modal-* (zie verderop). */
  --hot-shadow-card:0 6px 20px rgba(36,59,80,.06);
  --hot-shadow-modal:0 24px 60px rgba(36,59,80,.28);
  --hot-scrim:rgba(36,59,80,.28);

  /* layout */
  --hot-sidebar-width:264px;
  --hot-header-height:64px;
  --hot-header-z:30;

  /* fonts */
  --hot-font-body:Montserrat,system-ui,sans-serif;
  --hot-font-heading:Alexandria,Montserrat,sans-serif;
  --hot-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* shared dark gradient used by both the login left pane and the sidebar
     (source lines 49 and 87) */
  --hot-dark-gradient:linear-gradient(185deg,rgba(36,59,80,.62) 0%,rgba(36,59,80,.93) 42%,rgba(36,59,80,.99) 100%);
}

/* =========================================================================
   1. Reset / base — matches source <style> block lines 15-23 exactly.
   ========================================================================= */
/* Belt-and-suspenders alongside Page_Template::maybe_hide_admin_bar() (PHP
   `show_admin_bar` filter, the actual fix) — a full-screen app was never
   meant to have WordPress's own wp-admin toolbar stacked above its own
   header/nav. This only ever matters if something else re-shows the bar
   (a caching layer serving a fragment from before the filter ran, another
   plugin forcing it back on, etc.) */
body.hot-app-body{margin-top:0!important}
body.hot-app-body #wpadminbar{display:none!important}
/* v1.373.4 (gebruikersmelding met iPhone-schermafbeeldingen van de
   tekenpagina: reusachtige, over elkaar heen lopende tekst): iOS Safari's
   "font boosting" (-webkit-text-size-adjust:auto) blaast tekst eigenmachtig
   op zodra content breder is dan het scherm — en het offertedocument is een
   vast A4-breed vel dat op het scherm met CSS `zoom` verkleind wordt
   (offerte-doc.js's fit-schaal). Safari boost dan de tekst BINNEN het
   gezoomde vel op basis van de ongezoomde breedte, waardoor de indeling
   klopt maar elke letter enorm is. 100% = "nooit eigenmachtig vergroten". */
html,body.hot-app-body,.hot-root{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hot-root,.hot-root *{box-sizing:border-box}
.hot-root{
  margin:0;
  font-family:var(--hot-font-body);
  color:var(--hot-text);
  background:var(--hot-page-bg);
  -webkit-font-smoothing:antialiased;
}
.hot-root a{color:var(--hot-link);text-decoration:none}
.hot-root a:hover{color:var(--hot-link-hover);text-decoration:underline}
.hot-root h1,.hot-root h2,.hot-root h3{font-family:var(--hot-font-heading);letter-spacing:-.01em;margin:0}
.hot-root input,.hot-root select,.hot-root textarea,.hot-root button{font-family:inherit}
.hot-root textarea{resize:vertical}
.hot-root input:focus-visible,
.hot-root select:focus-visible,
.hot-root textarea:focus-visible{outline:2px solid var(--hot-blue);outline-offset:1px}
.hot-root button{cursor:pointer}
.hot-root button:disabled{cursor:not-allowed;opacity:.55}

/* =========================================================================
   2. Login screen (source lines 47-83)
   ========================================================================= */
.hot-login{
  min-height:100vh;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
}
.hot-login-panel{
  background:var(--hot-dark-gradient),url('../../assets/gradient.jpg') center/cover no-repeat,var(--hot-navy);
  color:#fff;
  padding:56px 48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
}
.hot-login-brand{display:flex;flex-direction:column;gap:7px}
.hot-login-brand img{height:24px;width:auto;align-self:flex-start}
.hot-login-kicker{
  font-size:10.5px;letter-spacing:.16em;color:var(--hot-teal);
  font-weight:600;font-family:var(--hot-font-heading);
}
.hot-login-hero{max-width:34ch}
.hot-login-hero-title{margin:0;font-size:30px;line-height:1.2;font-weight:700;font-family:var(--hot-font-heading)}
.hot-login-hero-text{margin:14px 0 0;font-size:14px;line-height:1.6;color:#B9C4D0}
.hot-login-footnote{font-size:11.5px;color:var(--hot-text-hint)}

.hot-login-formwrap{display:grid;place-items:center;padding:48px 32px;background:var(--hot-page-bg)}
.hot-login-card{
  width:100%;max-width:380px;background:#fff;
  border:1px solid var(--hot-border);border-radius:var(--hot-radius-xl);
  padding:32px;
}
.hot-login-card-title{margin:0 0 4px;font-size:20px;font-weight:700}
.hot-login-card-sub{margin:0 0 22px;font-size:13px;color:var(--hot-text-muted)}
.hot-login-form{display:flex;flex-direction:column;gap:14px}
.hot-login-field{
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;font-weight:500;color:var(--hot-text-secondary);
}
.hot-login-field input{
  padding:11px 12px;border:1px solid var(--hot-border);
  border-radius:var(--hot-radius-sm);font-size:14px;color:var(--hot-text);
}
.hot-login-remember{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--hot-text-secondary);
}
.hot-login-remember input{width:15px;height:15px;accent-color:var(--hot-blue)}
.hot-login-error{
  margin:0;padding:10px 12px;border-radius:var(--hot-radius-sm);
  background:var(--hot-red-bg);color:var(--hot-red-fg);
  font-size:12.5px;line-height:1.45;
}
.hot-login-submit{
  padding:12px 16px;border-radius:var(--hot-radius-sm);border:0;
  background:var(--hot-blue);color:#fff;font-size:14px;font-weight:600;
}
.hot-login-forgot{font-size:12.5px;text-align:center}
.hot-login-demo{
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--hot-panel-bg-1);
  font-size:11.5px;color:var(--hot-text-hint);line-height:1.5;
}

/* =========================================================================
   3. App shell — sidebar + header chrome (source lines 85-204)
   ========================================================================= */
.hot-shell{display:flex;min-height:100vh;align-items:stretch}

/* v1.420.9 (gebruikersmeldingen met screenshots: op de iPad liep de navy
   achtergrond van het menu niet door tot onderaan een lange pagina — een
   plotselinge witte rand halverwege — en op de telefoon kon je niet meer
   scrollen in het menu zelf zodra het langer was dan het scherm). De vorige
   opzet (v1.420.3) zette `position:sticky` + een VASTE `height:100dvh` +
   `overflow:visible` allemaal op ÉÉN element (.hot-sidebar): dat dwingt de
   HELE balk (incl. achtergrond) tot precies één viewport hoog, ook wanneer
   de hoofdinhoud ernaast veel langer is — vandaar de afgehakte achtergrond
   op de iPad. En omdat het sticky-element zelf niet het overflow-scroll-
   element was (dat was een kind, .hot-sidebar-nav, verderop), bleek
   scrollen daarbinnen op iOS niet altijd betrouwbaar te starten.
   Nu twee lagen: `.hot-sidebar` is alleen nog de achtergrond/kleur-doos
   zonder eigen hoogte-beperking — die groeit via `.hot-shell`'s
   align-items:stretch gewoon net zo lang mee als de hoofdinhoud, dus de
   achtergrond loopt altijd door. Het echte menu (logo, nav, totalen) zit nu
   in `.hot-sidebar-scroll` hieronder, dat wél sticky+op-één-viewport-hoog
   is EN zelf het overflow-scroll-element is (i.p.v. een geneste child) —
   dat is het patroon dat op iOS betrouwbaar blijft plakken én scrollen. */
.hot-sidebar{
  width:var(--hot-sidebar-width);flex:0 0 var(--hot-sidebar-width);
  background:var(--hot-dark-gradient),url('../../assets/gradient.jpg') center/cover no-repeat,var(--hot-navy);
  color:#fff;
  transition:width .16s ease;
}
.hot-sidebar-scroll{
  display:flex;flex-direction:column;gap:0;padding:22px 14px 18px;
  position:sticky;top:0;height:100vh;height:100dvh;
  /* v1.420.10 (gebruikersmelding: "de zijbalk is... ook net te breed
     waardoor je horizontaal een beetje door het menu heen kan bewegen"):
     .hot-sidebar-collapse-toggle steekt met `right:-11px` bewust 11px
     buiten deze doos uit — met alleen `overflow-y:auto` (zonder
     `overflow-x` erbij) rekent de browser die 11px als horizontaal
     scrollbare inhoud i.p.v. 'm gewoon af te snijden, wat je precies dat
     zijwaarts-door-het-menu-heen-bewegen-gevoel geeft. Expliciet
     `overflow-x:hidden` naast `overflow-y:auto` (los i.p.v. de
     shorthand, anders geldt de tweede waarde voor beide assen). */
  overflow-x:hidden;overflow-y:auto;
  scrollbar-width:none;
  transition:padding .16s ease;
}
.hot-sidebar-scroll::-webkit-scrollbar{display:none}
/* Ingeklapt zijmenu (design_5.zip README §App-shell: "in te klappen naar
   64px: alleen iconen, woordmerk kleiner"). Alleen breedte/padding/zichtbaar-
   heid via CSS wijzigen — geen aparte "collapsed"-variant van elke losse
   nav-rij nodig, dus NavItem/WizardNavItem blijven ongewijzigd bruikbaar in
   beide standen; ze krijgen wel een `title`-attribuut (zie shell.js) zodat
   de collega nog weet wat een icoon betekent zonder het zichtbare label. */
.hot-sidebar--collapsed{width:68px;flex-basis:68px}
.hot-sidebar--collapsed .hot-sidebar-scroll{padding:22px 12px 18px}
.hot-sidebar--collapsed .hot-sidebar-nav-label,
.hot-sidebar--collapsed .hot-sidebar-nav-hint,
.hot-sidebar--collapsed .hot-sidebar-nav-heading,
.hot-sidebar--collapsed .hot-sidebar-kicker,
.hot-sidebar--collapsed .hot-sidebar-totals-row span:first-child,
.hot-sidebar--collapsed .hot-sidebar-sub-nav{display:none}
/* Het woordmerk (humble-wordmark-white.png, 175x32 — een brede, liggende
   beeldmerktekst) past niet zonder meer in de 68px-brede ingeklapte kolom.
   Bewust hetzelfde bestand blijven gebruiken (geen los tweede logo-bestand
   meer — dat bleek zelf niet het juiste beeldmerk te zijn): `object-fit:
   contain` op een vaste, kleine doos schaalt 'm gewoon proportioneel terug
   i.p.v. 'm plat te trekken naar een andere breedte/hoogte-verhouding. */
.hot-sidebar--collapsed .hot-sidebar-wordmark{height:20px;width:44px;object-fit:contain}
.hot-sidebar--collapsed .hot-sidebar-brand{align-items:center;padding:0 0 18px}
.hot-sidebar--collapsed .hot-sidebar-kicker-collapsed{display:flex}
.hot-sidebar--collapsed .hot-sidebar-nav-btn{justify-content:center;padding:10px 0}
.hot-sidebar--collapsed .hot-sidebar-totals-row{justify-content:center}
.hot-sidebar-collapse-toggle{
  position:absolute;top:50%;right:-11px;transform:translateY(-50%);z-index:15;
  width:22px;height:22px;border-radius:999px;border:1px solid #1F4954;
  background:var(--hot-navy-active);color:#98A6B4;display:grid;place-items:center;
  cursor:pointer;font-size:11px;line-height:1;
  box-shadow:0 2px 8px rgba(36,59,80,.4);
  transition:color .15s,border-color .15s,background .15s;
}
.hot-sidebar-collapse-toggle:hover{background:#0F4A58;border-color:var(--hot-teal);color:var(--hot-teal)}
.hot-sidebar-brand{display:flex;flex-direction:column;gap:7px;padding:0 8px 20px}
.hot-sidebar-wordmark{height:22px;width:auto;max-width:100%;object-fit:contain;align-self:flex-start}
/* `display:flex` staat hier op de klasse zelf, niet als inline style op de
   ToolSwitcher-knop (zie shell.js) — anders zou een inline `display` altijd
   winnen van de `.hot-sidebar--collapsed .hot-sidebar-kicker{display:none}`
   hieronder, en bleef alleen het ▾-pijltje in een half-verdwenen knop over
   i.p.v. de hele knop (tekst + pijltje samen) netjes te verbergen. */
.hot-sidebar-kicker{
  display:flex;align-items:center;gap:5px;
  font-size:10.5px;letter-spacing:.16em;color:var(--hot-teal);
  font-weight:600;font-family:var(--hot-font-heading);text-transform:uppercase;
}
/* Ingeklapte tegenhanger van .hot-sidebar-kicker (zie shell.js's
   ToolSwitcher) — alleen zichtbaar via de collapsed-regel hierboven, anders
   zou je bij méér dan 1 tool helemaal geen manier meer overhouden om te
   zien/bedienen dat je van module kan wisselen. */
.hot-sidebar-kicker-collapsed{
  display:none;align-items:center;justify-content:center;width:100%;
  background:none;border:0;cursor:pointer;padding:4px 0;color:var(--hot-teal);
}
.hot-sidebar-kicker-collapsed:hover{color:#fff}
/* `overflow-y:auto` (not just flex:1;min-height:0) matters once the wizard
   sub-nav is expanded: without it, a nav taller than its shrunk flex box
   still renders its full content (overflow is visible by default) — which
   spills out past its own box and on top of the totals block below it,
   instead of the nav scrolling internally like it should. */
/* Scrollbar zelf onzichtbaar (zelfde patroon als .hot-header-actions
   hieronder) — scrollen blijft werken, alleen de baliebreedte OS-scrollbar
   die daarbij verscheen (vooral opvallend in de smalle 68px ingeklapte
   kolom) oogde niet netjes naast de rest van deze verder scrollbar-vrije
   chrome. */
.hot-sidebar-nav{
  display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow-y:auto;
  scrollbar-width:none;
}
.hot-sidebar-nav::-webkit-scrollbar{display:none}
.hot-sidebar-nav-heading{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hot-text-hint,#7E8B99);
  font-weight:600;padding:14px 12px 2px;
}
.hot-sidebar-nav-heading:first-child{padding-top:0}

.hot-sidebar-nav-btn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 12px;border-radius:var(--hot-radius-md);border:0;
  font-size:13px;font-weight:500;text-align:left;
  background:transparent;color:var(--hot-sidebar-text);
}
/* Without an explicit width, a <button> relies on flexbox's automatic
   align-items:stretch to fill its row — true only for a DIRECT child of
   .hot-sidebar-nav. "Beheer" is wrapped in .hot-sidebar-divider for its
   separator line, so it isn't a direct flex child and never got that
   stretch: its is-active background only ever covered the button's own
   shrink-to-fit content width, not the full row like every other item. */
/* design_6.zip's navItem() gebruikt een SOLIDE hover-kleur, geen doorzichtig
   wit laagje — en het actieve item is ook echt 600 (semi-bold), niet alleen
   een andere achtergrond. */
.hot-sidebar-nav-btn:hover{background:#0A303B}
.hot-sidebar-nav-btn.is-active{background:var(--hot-navy-active);color:#fff;font-weight:600}
.hot-sidebar-nav-btn.is-locked{cursor:not-allowed;opacity:.45}
.hot-sidebar-nav-btn .hot-sidebar-nav-label{flex:1;text-align:left}
.hot-sidebar-nav-btn .hot-sidebar-nav-hint{font-size:10.5px;color:var(--hot-text-hint);font-weight:600}

/* sub-nav (wizard steps / view steps) use a slightly smaller variant */
.hot-sidebar-nav-btn--sub{
  gap:9px;padding:8px 11px;border-radius:9px;font-size:12.5px;
}

/* design_6.zip's icoon-badge is een AFGERONDE VIERKANT (radius 7px), geen
   cirkel — dat was hier eerder een pill (999px). Kleuren ook aangepast naar
   de mockup: inactief transparant-wit met gedempte tekst, actief aqua met
   donkere tekst (niet blauw/wit). */
.hot-sidebar-nav-badge{
  width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.06);color:#98A6B4;
  flex:0 0 22px;
}
.hot-sidebar-nav-badge.is-active{background:var(--hot-teal);color:var(--hot-navy)}
/* "Done" (afgevinkte wizardstap) is in het ontwerp een subtiel getinte
   variant — lichte aqua-achtergrond met aqua tekst, NIET de volle,
   solide actieve kleur (die stond hier per ongeluk ook op done). */
.hot-sidebar-nav-badge.is-done{background:rgba(47,143,255,.15);color:var(--hot-teal)}

/* Horizontale wizard-stappenbalk boven het scherm zelf (design_7.zip) — zie
   shell.js's WizardTopStepper. Los van .hot-sidebar-nav-btn--sub hierboven
   (dezelfde route-data, twee verschillende plekken/vormen). */
.hot-wizard-topstepper{
  display:flex;align-items:center;overflow-x:auto;gap:0;
  padding:10px 16px;margin:0 0 16px;
  background:#fff;border:1px solid #E6EBF1;border-radius:999px;
}
.hot-wizard-topstepper-btn{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  border:0;background:none;padding:4px 10px;cursor:pointer;
  font-family:inherit;
}
.hot-wizard-topstepper-btn:disabled{cursor:not-allowed}
.hot-wizard-topstepper-dot{
  width:22px;height:22px;border-radius:999px;flex:0 0 22px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.hot-wizard-topstepper-label{font-size:12.5px;white-space:nowrap}
.hot-wizard-topstepper-line{width:20px;height:1px;background:#E6EBF1;flex:0 0 20px}

/* Wizard-chrome (design_7.zip): rechterkolom (Lopende offerte/Nog te doen/
   Extra stappen) naast de stap-inhoud, met een voettekstbalk (Vorige/
   opslaanstatus/Volgende) onder de linkerkolom — zie app.js's
   AuthedApp-render. Op smalle schermen valt de rechterkolom onder de
   inhoud i.p.v. ernaast (geen aparte scrollbalk nodig voor 320px kolom). */
.hot-wizard-outer{display:flex;flex-direction:column;flex:1;min-height:0}
.hot-herkomst-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.hot-wizard-chrome{display:flex;gap:16px;flex:1;min-height:0;align-items:flex-start}
.hot-wizard-main{display:flex;flex-direction:column;gap:0;flex:1;min-width:0;min-height:0}
.hot-wizard-side{display:flex;flex-direction:column;gap:14px;flex:0 0 320px;overflow-y:auto}
.hot-wizard-footer{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:12px 4px 0;margin-top:10px;border-top:1px solid #EDF1F5;
}
.hot-wizard-footer > .hot-savestatus{flex:1;justify-content:center}
@media (max-width:960px){
  .hot-wizard-chrome{flex-direction:column}
  .hot-wizard-side{flex:0 0 auto;width:100%}
}

/* Bugfix (gebruikersmelding, met screenshot: de rechterkaart "Wat dit
   raakt" van een Beheer-detailscherm liep van het scherm af, met een
   horizontale scrollbalk als gevolg — specifiek gezien bij Synchronisatie-
   planner, waar de tabel meer breedte nodig heeft dan andere blokken).
   BeheerDetail's grid (beheer.js) was altijd een vaste twee-koloms
   `minmax(0,1fr) 300px` zonder terugval — bij weinig beschikbare breedte
   (kleiner scherm, ingezoomde browser, of gewoon een blok met bredere
   inhoud dan gemiddeld) kreeg de linkerkolom dan zo weinig ruimte dat de
   layout niet meer prettig leesbaar was. Onder 960px (zelfde drempel als
   .hot-wizard-chrome hierboven) stapelt de rechterkaart nu gewoon onder de
   hoofdinhoud i.p.v. ernaast te blijven persen — !important is hier nodig
   omdat de basislayout inline (style=) staat, zoals overal in dit bestand. */
@media (max-width:960px){
  .hot-beheer-detail-grid{grid-template-columns:1fr!important}
}

.hot-sidebar-section-label{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--hot-sidebar-divider);padding:6px 12px 4px;
}
/* gap:0 — de border-left van elke rij (zie WizardNavItem in shell.js) moet
   aaneensluiten tot één doorlopende, meevullende lijn i.p.v. losse stukjes
   met tussenruimte. */
.hot-sidebar-sub-nav{display:flex;flex-direction:column;gap:0}
.hot-sidebar-divider{margin-top:10px}

.hot-sidebar-totals{display:flex;flex-direction:column;gap:6px}
.hot-sidebar-totals-row{
  display:flex;justify-content:space-between;gap:10px;
  font-size:11.5px;color:var(--hot-sidebar-text-dim);white-space:nowrap;
}
.hot-sidebar-totals-row strong{color:#fff;font-weight:600}
.hot-sidebar-totals-savedat{font-size:11px;color:var(--hot-sidebar-divider);margin-top:6px}

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

/* design_5.zip's eigen notitie bij dit scherm: "Header op één rij — titel,
   zoekbalk, acties en profiel op 64px in plaats van drie rijen." Vaste
   hoogte (--hot-header-height), CSS GRID i.p.v. flex: elke kolom is zijn
   eigen cel, dus als .hot-header-actions veel knoppen krijgt (bv. de
   Offertetool-wizard bij stap 8 "Goedkeuring") kan die cel intern
   overflowen (horizontaal scrollen, zie .hot-header-actions) zonder ooit de
   profiel-cel ernaast te verschuiven — dat was met flex-wrap wél een risico
   (zie de oude toelichting hier, nu vervangen) en is de reden dat dit
   eerder juist in een eigen tweede rij stond. Banners (testmodus/SSO)
   blijven wél gewoon eigen rijen ONDER deze vaste 64px-rij. */
.hot-header{
  display:flex;flex-direction:column;gap:0;
  padding:0;background:#fff;border-bottom:1px solid var(--hot-border);
  position:sticky;top:0;z-index:var(--hot-header-z);
}
.hot-header-top{
  display:grid;grid-template-columns:auto auto auto 1fr auto auto auto;
  align-items:center;gap:16px;height:var(--hot-header-height);
  padding:0 28px;
}
.hot-header-logo{height:24px;width:auto;flex:0 0 auto}
.hot-header-divider{width:1px;height:26px;background:var(--hot-border-soft);flex:0 0 auto}
@media (max-width:760px){.hot-header-divider{display:none}}
.hot-header-titles{min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.hot-header-title{font-family:var(--hot-font-heading);font-size:19px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
/* Design_5.zip's "resultLabel" — klein, gedempt, normaal gewicht, geen
   nadruk (was hier eerder 600/semi-bold, zwaarder dan het ontwerp bedoelt). */
.hot-header-context{
  font-size:12px;font-weight:400;color:var(--hot-text-hint,#7E8B99);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto;max-width:220px;
}
/* De middelste, flexibele cel (grid-kolom 4 = 1fr) — leeg als een scherm
   geen zoekbalk toont, houdt dan gewoon de andere kolommen op hun plek. */
.hot-header-search-cell{min-width:0;display:flex;justify-content:center}
/* v1.414.4: geen horizontale knoppenrij meer (die oogde bij 3+ acties
   afgesneden/overlappend, zie gebruikersmelding) — de cel bevat nu één
   "Acties"-knop met een verticaal uitklapmenu (HeaderActionsMenu, shell.js),
   dus overflow-x/max-width-hacks zijn niet meer nodig. */
.hot-header-actions{display:flex;align-items:center;flex:0 0 auto}
.hot-header-actions-menu{position:relative}
.hot-header-actions-trigger{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--hot-border);background:#fff;color:var(--hot-text);
  border-radius:9px;padding:7px 13px;font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;white-space:nowrap;
}
.hot-header-actions-trigger:hover{border-color:var(--hot-hover-blue-border)}
.hot-header-actions-trigger>span[aria-hidden]{font-size:8px;color:var(--hot-text-hint,#7E8B99)}
.hot-header-actions-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--hot-blue-bg,#EAF2FA);color:var(--hot-link-hover,#2568A5);
  font-size:11px;font-weight:700;
}
.hot-header-actions-panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:50;
  display:flex;flex-direction:column;gap:6px;align-items:stretch;
  min-width:230px;max-width:340px;max-height:70vh;overflow-y:auto;
  background:#fff;border:1px solid var(--hot-border);border-radius:12px;
  padding:10px;box-shadow:0 12px 32px rgba(16,42,67,.14);
}
/* De acties zijn kant-en-klare knoppen uit de tools zelf — hier alleen
   op volle breedte trekken zodat ze netjes onder elkaar uitlijnen. */
.hot-header-actions-panel-item{display:flex;flex-direction:column;align-items:stretch}
.hot-header-actions-panel-item>*{width:100%}
.hot-header-actions-panel-item button{width:100%;justify-content:flex-start;text-align:left}
.hot-header-session{flex:0 0 auto;display:flex;align-items:center;gap:10px}

/* Op een smalle viewport past het grid van 6 kolommen niet meer — terug naar
   een flex-rij die wrapt, met het profielblok bovenaan (net als voorheen)
   i.p.v. ergens halverwege een wrap. */
@media (max-width:760px){
  .hot-header-top{display:flex;flex-wrap:wrap;height:auto;padding:14px 20px}
  .hot-header-session{order:-1;width:100%;justify-content:flex-end}
  .hot-header-titles{flex-basis:100%;order:1}
  .hot-header-search-cell{order:2;flex-basis:100%;justify-content:flex-start}
  .hot-header-actions{order:3}
  .hot-header-actions-panel{right:auto;left:0}
}

.hot-profile-trigger{border:0;background:none;padding:0;cursor:pointer;border-radius:999px;line-height:0}
.hot-profile-badge{
  position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 3px;
  border-radius:999px;background:#E5484D;color:#fff;font-size:9.5px;font-weight:700;
  line-height:15px;text-align:center;border:1.5px solid #fff;
}
.hot-profile-trigger:focus-visible{outline:2px solid var(--hot-teal,#2F8FFF);outline-offset:2px}
/* De volledige profielknop (avatar + naam/functie + chevron) i.p.v. alleen
   een avatar-icoontje — naam/functie stonden voorheen los ernaast als
   platte tekst, met een apart uitlog-icoontje ernaast; nu allemaal één
   klikbaar geheel dat hetzelfde dropdownmenu opent. */
.hot-profile-trigger--full{
  display:flex;align-items:center;gap:10px;border-radius:12px;
  padding:5px 10px 5px 5px;line-height:normal;
}
.hot-profile-trigger--full:hover{background:var(--hot-panel-bg-3)}
.hot-profile-trigger-names{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.hot-profile-trigger-name{font-size:13px;font-weight:700;color:var(--hot-text)}
.hot-profile-trigger-role{font-size:11.5px;color:var(--hot-text-hint)}
.hot-profile-trigger-chevron{font-size:10px;color:var(--hot-text-hint)}
@media (max-width:560px){
  .hot-profile-trigger-names{display:none}
}
.hot-profile-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:230px;
  background:#fff;border:1px solid var(--hot-border);border-radius:var(--hot-radius-lg);
  box-shadow:0 16px 40px rgba(36,59,80,.18);padding:8px;display:flex;flex-direction:column;gap:2px;
}
.hot-profile-menu-item{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;padding:9px 10px;border-radius:8px;font-size:12.8px;color:var(--hot-text);font-weight:500;
}
.hot-profile-menu-item:hover{background:var(--hot-panel-bg-3)}
.hot-profile-menu-item.is-danger{color:var(--hot-red-fg)}
.hot-profile-menu-divider{height:1px;background:var(--hot-border-soft);margin:6px 2px}
.hot-profile-menu-label{padding:6px 10px 2px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--hot-text-hint);font-weight:700}
.hot-profile-menu-sub{font-size:11.5px;color:var(--hot-text-muted);padding:0 10px 6px;line-height:1.5}

/* Testmodus-schakelaar — een echte aan/uit-toggle i.p.v. een kale checkbox. */
.hot-toggle{position:relative;display:inline-flex;align-items:center;width:38px;height:22px;flex:0 0 auto}
.hot-toggle input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.hot-toggle-track{position:absolute;inset:0;background:var(--hot-border);border-radius:999px;transition:background .15s ease}
.hot-toggle-thumb{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;background:#fff;
  box-shadow:0 1px 2px rgba(36,59,80,.3);transition:transform .15s ease;
}
.hot-toggle input:checked ~ .hot-toggle-track{background:var(--hot-teal,#2F8FFF)}
.hot-toggle input:checked ~ .hot-toggle-thumb{transform:translateX(16px)}
.hot-toggle input:focus-visible ~ .hot-toggle-track{outline:2px solid var(--hot-teal,#2F8FFF);outline-offset:2px}

.hot-testmode-banner{
  display:flex;align-items:center;gap:8px;
  background:var(--hot-amber-bg);color:var(--hot-amber-fg);font-size:11.5px;font-weight:700;
  padding:6px 14px;letter-spacing:.03em;text-transform:uppercase;
}

/* Verjaardagsfelicitatie (v1.349.0) — confetti-laag + banner, zie shell.js's BirthdayCelebration */
.hot-confetti-layer{position:fixed;inset:0 0 auto 0;height:100vh;overflow:hidden;pointer-events:none;z-index:9999}
.hot-confetti-piece{
  position:absolute;top:-16px;border-radius:1px;opacity:.9;
  animation-name:hot-confetti-fall;animation-timing-function:linear;animation-fill-mode:forwards;
}
@keyframes hot-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes hot-confetti-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:.95}
  100%{transform:translateY(100vh) rotate(360deg);opacity:0}
}
.hot-birthday-banner{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(90deg,var(--hot-amber-fg,#8A5B00),#B9762C);color:#fff;
  border-radius:8px;padding:9px 14px;margin:0 0 10px;font-size:13px;font-weight:600;
}

/* v1.357.21 (gebruikersmelding: "als je een klantenkaart opent springt hij
   in sommige gevallen nog naar beneden op de pagina"): de klantkaart zet zijn
   scroll al expliciet terug naar 0 bij het openen (clients.js's ClientDetail),
   maar losse kaarten binnenin (HubSpot-deals, Exact-adres, Creditsafe, enz.)
   laden hun data ASYNC en groeien daarna nog in hoogte — Chrome/Firefox'
   "scroll anchoring" compenseert die groei dan door de scrollpositie zelf
   weer weg van 0 te schuiven, wat als een late "spring naar beneden" voelt.
   overflow-anchor:none zet dat browsergedrag voor dit hele scrollvlak uit. */
.hot-scroll{flex:1;min-height:0;overflow:auto;overflow-anchor:none;padding:28px 32px 64px}

/* lock / sent banners inside the scroll area */
.hot-lock-banner{
  display:flex;gap:12px;align-items:flex-start;max-width:1240px;
  margin:0 0 18px;padding:13px 16px;border:1px solid #F2D9A0;
  border-radius:12px;background:#FFF9EC;
}
.hot-lock-banner-title{font-size:13px;font-weight:600;color:var(--hot-amber-fg)}
.hot-lock-banner-text{font-size:12px;color:var(--hot-amber-fg);line-height:1.5}

.hot-sent-strip{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:1240px;
  margin:0 0 16px;padding:10px 14px;border:1px solid #B9E4E6;
  border-radius:11px;background:#F2FAFB;
}
.hot-sent-strip-text{flex:1;min-width:160px;font-size:12.5px;color:var(--hot-text-secondary)}

/* =========================================================================
   4. Modals (placeholder picker, mail preview, ...) — source lines 206-260
   ========================================================================= */
.hot-modal-overlay{
  position:fixed;inset:0;z-index:65;background:var(--hot-scrim);
  backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
}
.hot-modal{
  width:100%;max-width:640px;max-height:86vh;overflow:auto;
  background:#fff;border:1px solid var(--hot-border);border-radius:var(--hot-radius-xl);
  box-shadow:var(--hot-shadow-modal);padding:22px 24px;
  display:flex;flex-direction:column;gap:14px;
}
.hot-modal--wide{max-width:680px;padding:24px 26px}
/* Document-preview (Mailen "oogje") — een PDF wil vooral hoogte, dus deze
   variant vult bijna het hele scherm i.p.v. hot-modal's compacte formaat. */
.hot-modal--doc{max-width:960px;width:94vw;height:90vh;max-height:90vh}
.hot-modal--doc iframe{flex:1;min-height:0}
.hot-modal-title{margin:0;font-size:16px;font-weight:600;color:var(--hot-text)}
.hot-modal-sub{margin:5px 0 0;font-size:12.5px;color:var(--hot-text-muted);line-height:1.5}
.hot-modal-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}

/* =========================================================================
   4b. Handleiding (in-app help) — a faithful, scoped port of the standalone
   handleiding.html artifact's own design system (same navy sidebar/TOC,
   module/step/chip/callout/card-grid components), so the in-app version
   looks exactly like it rather than reusing the generic .hot-modal look.
   Every rule below is scoped under .hot-manual so none of it leaks into
   (or gets overridden by) the rest of the app's own styling.
   ========================================================================= */
.hot-manual{
  width:100%;max-width:1080px;height:86vh;max-height:860px;overflow:hidden;
  background:var(--hot-manual-paper,#FBFCFD);border-radius:var(--hot-radius-xl);
  box-shadow:0 30px 70px rgba(36,59,80,.45);
  display:grid;grid-template-columns:250px minmax(0,1fr);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  position:relative;
}
@media (max-width:720px){.hot-manual{grid-template-columns:1fr}}

.hot-manual-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:32px;height:32px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.hot-manual-close:hover{background:rgba(255,255,255,.26)}
@media (max-width:720px){.hot-manual-close{background:var(--hot-panel-bg-2);color:var(--hot-text)}}

.hot-manual-sidebar{
  background:#16273A;color:#C9D4DB;padding:24px 18px 18px;overflow-y:auto;
  display:flex;flex-direction:column;gap:22px;
}
@media (max-width:720px){.hot-manual-sidebar{display:none}}
.hot-manual-brand{display:flex;flex-direction:column;gap:4px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.hot-manual-brand-mark{font-weight:700;font-size:16px;color:#fff;letter-spacing:.01em}
.hot-manual-brand-sub{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#2F8FFF;font-weight:600}
.hot-manual-toc-group{display:flex;flex-direction:column;gap:2px}
.hot-manual-toc-label{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#7C9099;font-weight:700;margin:0 0 6px 10px}
.hot-manual-toc-link{
  display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-radius:8px;
  color:#C9D4DB;font-size:13px;font-weight:500;background:none;border:none;width:100%;text-align:left;cursor:pointer;
}
.hot-manual-toc-link:hover{background:rgba(255,255,255,.06);color:#fff}
.hot-manual-toc-link.is-active{background:#243B50;color:#fff;font-weight:700}
.hot-manual-toc-n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:#2F8FFF;opacity:.8;min-width:1.4em}
.hot-manual-sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:#7C9099;line-height:1.55}

.hot-manual-content{overflow-y:auto;padding:40px 40px 60px}
.hot-manual-content-inner{max-width:640px;margin:0 auto}
.hot-manual-doc-eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#2568A5;margin-bottom:8px}
.hot-manual-doc-title{font-size:26px;font-weight:700;line-height:1.15;color:#1C2B38;margin:0}
.hot-manual-doc-lede{margin-top:12px;font-size:14.5px;color:#5C6B78;max-width:60ch;line-height:1.6}

.hot-manual-module{padding:38px 0;border-top:1px solid #E9EEF2}
.hot-manual-module:first-of-type{border-top:none;padding-top:0}
.hot-manual-module-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.hot-manual-module-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#7E8B99}
.hot-manual-module-title{font-size:20px;font-weight:700;color:#1C2B38;margin:0}
.hot-manual-module-intro{margin-top:8px;color:#5C6B78;max-width:62ch;font-size:13.8px;line-height:1.6}

.hot-manual-sub{font-size:14px;font-weight:700;color:#1C2B38;margin:26px 0 8px}
.hot-manual-content p{margin:0 0 12px;max-width:66ch;font-size:13.5px;line-height:1.6;color:#3A4A58}
.hot-manual-content p:last-child{margin-bottom:0}
.hot-manual-content ul{margin:0 0 12px;padding-left:20px;max-width:64ch}
.hot-manual-content li{margin-bottom:5px;font-size:13.5px;line-height:1.6;color:#3A4A58}
.hot-manual-content li:last-child{margin-bottom:0}
.hot-manual-content strong{font-weight:700;color:#1C2B38}
.hot-manual-content a{color:#2568A5;text-decoration:none;cursor:pointer}
.hot-manual-content a:hover{text-decoration:underline}

.hot-manual-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.hot-manual-chip.teal{background:#EFF9FD;color:#2568A5}
.hot-manual-chip.amber{background:#FFF6E5;color:#8A5B00}
.hot-manual-chip.red{background:#FDECEC;color:#A32020}
.hot-manual-chip.blue{background:#EFF9FD;color:#2568A5}

.hot-manual-callout{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--hot-radius-md);margin:16px 0;border:1px solid #E9EEF2;background:#F4F6F8}
.hot-manual-callout.warn{background:#FFF6E5;border-color:transparent}
.hot-manual-callout.warn .hot-manual-callout-body{color:#8A5B00}
.hot-manual-callout-icon{font-size:14px;line-height:1.5}
.hot-manual-callout-body{font-size:13px;line-height:1.55;color:#1C2B38}
.hot-manual-callout-body strong{color:inherit}

.hot-manual-table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--hot-border);border-radius:var(--hot-radius-md)}
.hot-manual-table-wrap table{border-collapse:collapse;width:100%;font-size:12.8px;min-width:400px}
.hot-manual-table-wrap thead th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#7E8B99;font-weight:700;padding:9px 13px;background:#F4F6F8;border-bottom:1px solid var(--hot-border)}
.hot-manual-table-wrap tbody td{padding:9px 13px;border-bottom:1px solid #E9EEF2;vertical-align:top;font-size:12.8px;color:#3A4A58}
.hot-manual-table-wrap tbody tr:last-child td{border-bottom:none}
.hot-manual-table-wrap tbody td:first-child{font-weight:600;white-space:nowrap;color:#1C2B38}

.hot-manual-steps{display:flex;flex-direction:column;margin:16px 0;border:1px solid var(--hot-border);border-radius:var(--hot-radius-lg);overflow:hidden;background:#fff}
.hot-manual-step{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:14px 16px;border-top:1px solid #E9EEF2}
.hot-manual-step:first-child{border-top:none}
.hot-manual-step-n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#2568A5;font-weight:700;padding-top:1px}
.hot-manual-step-title{font-weight:700;font-size:13.5px;margin-bottom:3px;color:#1C2B38}
.hot-manual-step-body{font-size:12.8px;color:#5C6B78;line-height:1.55}
.hot-manual-step-body p{margin-bottom:5px}
.hot-manual-step-body p:last-child{margin-bottom:0}

.hot-manual-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0}
.hot-manual-mini-card{border:1px solid var(--hot-border);border-radius:var(--hot-radius-md);padding:14px;background:#fff;display:flex;flex-direction:column;gap:5px}
.hot-manual-mini-card h4{font-size:12.8px;font-weight:700;margin:0;color:#1C2B38}
.hot-manual-mini-card p{font-size:12.3px;color:#5C6B78;margin:0}

.hot-ph-group-label{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--hot-text-hint);margin-bottom:7px;
}
.hot-ph-item{
  display:flex;gap:10px;align-items:baseline;text-align:left;
  border:1px solid var(--hot-panel-bg-1);background:#fff;border-radius:var(--hot-radius-sm);
  padding:8px 11px;width:100%;
}
.hot-ph-item:hover{border-color:var(--hot-hover-blue-border);background:var(--hot-hover-blue-bg)}
.hot-ph-item-key{font-family:var(--hot-font-mono);font-size:11.5px;color:var(--hot-link-hover);flex:0 0 auto}
.hot-ph-item-title{flex:1;min-width:0;font-size:12px;color:var(--hot-text-muted)}
.hot-ph-item-preview{font-size:11.5px;color:var(--hot-text);font-weight:600;flex:0 0 auto}
.hot-ph-empty{font-size:12.5px;color:var(--hot-text-hint)}

/* =========================================================================
   5. Cards / panels
   ========================================================================= */
.hot-card,.hot-panel{
  background:#fff;border:1px solid var(--hot-border);border-radius:var(--hot-radius-lg);
}
.hot-card--padded{padding:24px 30px 30px}
.hot-panel-header{padding:20px 24px 12px}
.hot-panel-title{margin:0 0 4px;font-size:15px;font-weight:600}
.hot-panel-sub{margin:0;font-size:12.5px;color:var(--hot-text-muted);line-height:1.5}

/* dashboard KPI cards */
.hot-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px}
.hot-kpi-card{
  background:#fff;border:1px solid var(--hot-border);border-radius:var(--hot-radius-lg);
  padding:18px 20px;display:flex;flex-direction:column;gap:6px;
  container-type:inline-size;
}
.hot-kpi-label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--hot-text-hint)}
/* v1.365.20 (gebruikersmelding: "de uitlijning in die kaarten is over 2
   regels. zorg ervoor dat hoe groot het bedrag ook is het altijd op 1 regel
   past. het lettertype moet dan gewoon kleiner worden") — een groot bedrag
   (bijv. "€ 934.865,17") brak op de vaste 23px af over 2 regels in een
   smalle kaart. `clamp()` met container-query-eenheden (`cqw`, geschaald op
   de kaart-BREEDTE, niet op de tekstlengte — een echte lengte-bewuste
   auto-shrink kan niet puur in CSS) samen met `nowrap` dekt het realistische
   bereik (tot circa 8 cijfers + decimalen); de ellipsis hieronder is het
   allerlaatste vangnet voor een extreem geval dat zelfs dat overschrijdt —
   dan liever afgekapt dan over 2 regels.
   v1.367.0 (gebruikersmelding: "Hij zet nu puntjes neer maar het lettertype
   moet gewoon kleiner worden als het niet meer past."): ui-kit.js heeft nu
   een globale lengte-bewuste fitter (fitKpiValue) die een overlopende
   .hot-kpi-value per pixel verkleint tot 11px — de ellipsis blijft alleen
   als aller-allerlaatste vangnet daaronder bestaan. */
.hot-kpi-value{font-size:clamp(14px,15cqw,23px);font-weight:700;color:var(--hot-text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
.hot-kpi-hint{font-size:11.5px;color:var(--hot-text-hint);white-space:pre-line}

/* generic screen wrappers */
.hot-screen{display:flex;flex-direction:column;gap:20px}
.hot-maxw-1000{max-width:1000px}
.hot-maxw-1180{max-width:1180px}
.hot-maxw-1240{max-width:1240px}
.hot-maxw-1400{max-width:1400px}

/* =========================================================================
   6. Buttons
   ========================================================================= */
.hot-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border-radius:8px;border:1px solid var(--hot-border);
  background:#fff;color:var(--hot-text);font-size:13px;font-weight:500;
  white-space:nowrap;
}
.hot-btn:hover{border-color:var(--hot-hover-blue-border)}
.hot-btn-primary{border:0;background:var(--hot-blue);color:#fff;font-weight:600}
.hot-btn-primary:hover{background:var(--hot-link-hover)}
.hot-btn-secondary{border:1px solid var(--hot-border);background:#fff;color:var(--hot-text);font-weight:500}
.hot-btn-danger{border:1px solid var(--hot-red-border);background:#FFF5F5;color:var(--hot-red-fg);font-weight:600}
.hot-btn-danger:hover{border-color:#E2A0A0}
.hot-btn-teal{border:1px solid var(--hot-teal);background:var(--hot-teal-bg);color:var(--hot-teal-fg);font-weight:600}
.hot-btn-blue-outline{border:1px solid var(--hot-blue);background:var(--hot-blue-bg);color:var(--hot-link-hover);font-weight:600}
.hot-btn-dashed{border:1px dashed var(--hot-hover-blue-border);background:var(--hot-blue-bg);color:var(--hot-link-hover);font-weight:600}
.hot-btn-ghost{border:0;background:none;padding:0;color:var(--hot-text-hint);font-weight:400}
.hot-btn-dark{border:0;background:var(--hot-navy);color:#fff;font-weight:600}
.hot-btn-sm{padding:4px 9px;font-size:11px;border-radius:var(--hot-radius-pill)}
.hot-btn-icon{
  width:22px;height:22px;padding:0;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hot-border-soft);background:#fff;color:var(--hot-sidebar-text-dimmer);
  font-size:14px;line-height:1;
}
.hot-btn-icon:hover{border-color:#E2A0A0;color:#C2454A;background:#FFF5F5}
.hot-btn-chip{
  border:1px solid var(--hot-border);background:#fff;border-radius:6px;
  padding:4px 7px;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--hot-link-hover);
}

/* Kolomkop-zoekveld (v1.354.8): het zoekveld zit ín de kolomkop zelf — de
   kolomnaam is de placeholder, typen filtert de tabel meteen. Actief filter
   kleurt blauw zodat je ziet welke kolommen gefilterd zijn. */
.hot-colfilter{
  width:100%;box-sizing:border-box;border:0;outline:0;background:transparent;
  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;
  padding:0;margin:0;cursor:text;
}
.hot-colfilter::placeholder{color:inherit;opacity:1}
.hot-colfilter:focus{background:#fff;box-shadow:inset 0 0 0 1px #BFD7EA;border-radius:4px;padding:0 4px}
.hot-colfilter:not(:placeholder-shown){color:#0B5CAD}

/* Werkbalk boven een tabel (v1.354.8, gebruikersmelding "niet alle knoppen
   zijn even hoog"): alle knoppen, keuzelijsten en velden in zo'n balk krijgen
   dezelfde hoogte. */
.hot-toolbar .hot-btn,.hot-toolbar select,.hot-toolbar input[type=text],.hot-toolbar input[type=search]{
  height:37px;box-sizing:border-box;
}

/* =========================================================================
   7. Form controls
   ========================================================================= */
.hot-label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--hot-text-secondary)}
.hot-input,.hot-select,.hot-textarea{
  width:100%;padding:11px 12px;border:1px solid var(--hot-border);
  border-radius:var(--hot-radius-sm);font-size:14px;color:var(--hot-text);background:#fff;
}
.hot-input--sm,.hot-select--sm{padding:6px 10px;border:1px solid var(--hot-border-soft);border-radius:7px;font-size:12px}
.hot-input--table{padding:7px 8px;border:1px solid transparent;border-radius:6px;font-size:13px;background:transparent}
.hot-input--table:focus-visible{background:#fff}
.hot-textarea--mono{font-family:var(--hot-font-mono);line-height:1.55}
.hot-checkbox{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--hot-text-secondary)}
.hot-checkbox input{width:15px;height:15px;accent-color:var(--hot-blue)}

/* responsive two-column (and up) form layouts: stack automatically once a
   column would drop below ~240px — "de tweekoloms-indelingen stapelen nu
   netjes zodra er te weinig ruimte is" (see chat history) */
.hot-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 20px}
.hot-form-grid--tight{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.hot-form-grid--wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.hot-span-2{grid-column:span 2}
.hot-span-full{grid-column:1/-1}

/* the overall multi-panel screen layouts (Klant/Project/etc.) also stack
   the same way once the viewport is too narrow for two panels side by side */
.hot-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:24px;align-items:start}

/* =========================================================================
   8. Pills / status badges
   ========================================================================= */
.hot-pill{
  display:inline-block;padding:3px 9px;border-radius:var(--hot-radius-pill);
  font-size:11px;font-weight:700;line-height:1.4;
}
.hot-pill--uppercase{text-transform:uppercase;letter-spacing:.05em;font-size:9.5px;padding:2px 8px}
.hot-pill-done{background:var(--hot-teal-bg);color:var(--hot-teal-fg)}
.hot-pill-act{background:var(--hot-blue-bg);color:var(--hot-blue-fg)}
.hot-pill-wait{background:var(--hot-amber-bg);color:var(--hot-amber-fg)}
.hot-pill-draft{background:var(--hot-grey-bg);color:var(--hot-grey-fg)}
.hot-pill-reject{background:var(--hot-red-bg);color:var(--hot-red-fg)}

/* =========================================================================
   9. Avatars
   ========================================================================= */
.hot-avatar{border-radius:var(--hot-radius-pill);background:#F1F4F8 center 20%/160% no-repeat;flex:0 0 auto}
.hot-avatar--sm{width:22px;height:22px}
.hot-avatar--md{width:30px;height:30px}

/* =========================================================================
   10. Tables (gebouwenlijst, offertes lists, ...)
   ========================================================================= */
.hot-table-wrap{overflow:auto}
.hot-table{
  table-layout:fixed;border-collapse:collapse;font-size:13px;width:100%;
}
.hot-table thead th{
  position:sticky;top:0;z-index:1;
  background:var(--hot-panel-bg-3);text-align:left;font-weight:600;
  color:var(--hot-text-secondary);padding:11px 14px;
  border-bottom:1px solid var(--hot-border);
  position:relative; /* resize grip anchors here */
  overflow:hidden;
}
.hot-table td{
  padding:11px 14px;border-bottom:1px solid var(--hot-panel-bg-2);
  color:var(--hot-text-secondary);overflow:hidden;text-overflow:ellipsis;
}
.hot-table tbody tr:hover{background:var(--hot-panel-bg-3)}
.hot-table--dense th,.hot-table--dense td{padding:6px 8px}
.hot-table-resize-grip{
  position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;
  background:linear-gradient(90deg,transparent 0,transparent 4px,var(--hot-border) 4px,var(--hot-border) 5px,transparent 5px);
}
.hot-table-empty{padding:34px;text-align:center;color:var(--hot-text-hint);font-size:13px}
.hot-table-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:1px;background:var(--hot-border);border-top:1px solid var(--hot-border);
}
.hot-table-stat{
  display:flex;flex-direction:column;gap:3px;padding:14px 20px;background:var(--hot-panel-bg-3);
}
.hot-table-stat-label{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--hot-text-hint);font-weight:700;white-space:nowrap}
.hot-table-stat-value{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--hot-text)}

/* =========================================================================
   11. Collapsible / widenable sections
   Bottom-edge chevron collapses/expands a whole panel (mirrors source's
   [data-collapsed] pattern, lines 24-27 + 416). Side-edge chevrons widen a
   panel to full grid width inside a .hot-columns layout, per chat history
   ("pijltjes aan de zijkant om te verbreden, onderaan om in/uit te
   klappen") — JS toggles .is-collapsed / .is-wide, no source markup to
   mirror 1:1 for the "wide" state since the prototype only wired up
   sec().col (collapse); sec().wide/rightArrow exist in its JS but were
   never actually rendered in the markup, so this is a from-scratch (but
   token-consistent) implementation of the still-requested affordance.
   ========================================================================= */
.hot-collapsible{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--hot-border);border-radius:var(--hot-radius-lg);
  padding:24px 30px 30px;
}
/* .hot-panel-header (§5) carries its own horizontal padding for when it's
   used inside a bare, unpadded .hot-card/.hot-panel (see dashboard.js etc.)
   — but Card (ui-kit.js) always nests it inside .hot-collapsible, which
   already has its own padding, so the two stacked and pushed the title/
   subtitle in further than the body content below it, on every screen that
   uses Card. Cancel the header's own horizontal padding in that one context
   so it lines up with .hot-collapsible's padding instead of adding to it. */
.hot-collapsible > .hot-panel-header{padding:0 0 12px}
.hot-collapsible.is-wide{grid-column:1/-1}
.hot-collapsible.is-collapsed{padding-bottom:26px!important}
.hot-collapsible.is-collapsed>*:not(.hot-collapse-arrow-bottom):not(.hot-collapse-arrow-side):not(h3){display:none!important}
.hot-collapsible.is-collapsed>h3{margin:0!important}
.hot-collapsible:not(.is-collapsed)>h3[data-collapsed-title]{display:none}

.hot-collapse-arrow-bottom{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:52px;height:15px;border:0;border-radius:9px 9px 0 0;
  background:var(--hot-panel-bg-1);color:var(--hot-text-hint);
  font-size:10px;line-height:1;padding:0;z-index:2;
  display:grid;place-items:center;
}
.hot-collapse-arrow-bottom:hover{background:#E2E9F0}

.hot-collapse-arrow-side{
  position:absolute;top:50%;transform:translateY(-50%);
  width:15px;height:52px;border:0;
  background:var(--hot-panel-bg-1);color:var(--hot-text-hint);
  font-size:10px;line-height:1;padding:0;z-index:2;
  display:grid;place-items:center;
}
.hot-collapse-arrow-side:hover{background:#E2E9F0}
.hot-collapse-arrow-side--left{left:0;border-radius:0 9px 9px 0}
.hot-collapse-arrow-side--right{right:0;border-radius:9px 0 0 9px}

/* =========================================================================
   12. Offer document — on-screen preview chrome only (page geometry and
   print rules live in print.css; see that file's header comment for the
   markup contract these classes assume).
   ========================================================================= */
.hot-doc-note{
  display:flex;gap:10px;align-items:center;justify-content:center;
  font-size:12px;color:var(--hot-text-muted);margin-bottom:16px;
}
.hot-doc-wrap{display:block;width:100%}
.hot-doc-fit{
  display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;
  transform-origin:top center;
}
.hot-doc-sheet{
  width:210mm;background:#fff;position:relative;margin:0 auto;
  box-shadow:0 2px 10px rgba(20,20,19,.12);border-radius:7px;overflow:hidden;
}
.hot-doc-sheet--page{height:297mm}
.hot-doc-sheet--flow{height:auto;border-radius:7px}

/* Kaart met gebouwen (v1.354.17) — plaats-labels op de Leaflet-kaart.
   Leaflet's eigen .leaflet-tooltip heeft een puntig pijltje (:before);
   dat past niet bij de pill-stijl van de rest van de app, dus uit. */
.hot-map-label {
	background: rgba( 255, 255, 255, .92 );
	border: 1px solid #E6EBF1;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(36,59,80, .14 );
	color: #48555F;
	font-size: 10.5px;
	font-weight: 600;
	padding: 1px 7px;
}
.hot-map-label:before {
	display: none;
}
.hot-map-label--on {
	color: #1B5FA8;
	font-weight: 700;
}

/* Cluster-bollen op de gebouwenkaart (v1.354.18) — Leaflet's divIcon
   krijgt standaard een witte achtergrond + rand; die moet hier weg,
   de bol zelf wordt inline in het icoon getekend. */
.hot-map-cluster {
	background: none;
	border: none;
}