/* =========================================================
   Beavr CRM: menu, borden met fases, Vandaag, relaties, taken
   ========================================================= */

/* Menu: "Meer" en de lijst met alle onderdelen */
.ap-snav__more { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-md); border: 0; background: none; font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--muted); cursor: pointer; text-align: left; }
.ap-snav__more:hover, .ap-snav__more.is-on { background: var(--paper); color: var(--ink); }
.ap-tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); border: 0; background: none; border-radius: var(--r-md); cursor: pointer; }
.ap-tabbar button.is-on { color: var(--ink); background: var(--y-soft); }
@media (max-width: 900px) { .ap-tabbar { grid-template-columns: repeat(5, 1fr) !important; } }
.ap-mods { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.ap-mods li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-md); border: 1px solid transparent; background: #fff; }
.ap-mods li.is-over { border-color: var(--y); background: var(--y-soft); }
.ap-mods li.is-drag { opacity: .5; }
.ap-mods__grip { color: var(--muted); cursor: grab; display: flex; }
.ap-mods__grip .i { width: 16px; height: 16px; }
.ap-mods a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 6px; color: var(--ink); text-decoration: none; font-weight: 500; border-radius: var(--r-sm); }
.ap-mods a:hover { background: var(--paper); }
.ap-mods a .i { color: var(--muted); }
.ap-mods__star { border: 0; background: none; font-size: var(--fs-2xl); line-height: 1; color: var(--line-2); cursor: pointer; padding: 6px 8px; border-radius: var(--r-sm); transition: color .15s, transform .15s; }
.ap-mods__star.is-on { color: var(--y-deep); }
.ap-mods__star:hover { transform: scale(1.15); }

/* Bord met eigen fases */
.ap-kanban { grid-template-columns: repeat(var(--cols, 5), minmax(220px, 1fr)); }
.ap-badge--stage { background: color-mix(in srgb, var(--c) 18%, #fff); color: color-mix(in srgb, var(--c) 70%, #111); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.ap-plbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.ap-plbar > b { font-size: var(--fs-lg); color: var(--ink); margin-right: 4px; }
.ap-plbar .ap-in--sm { width: auto; max-width: 240px; }
.ap-plbar .ap-small .i { width: 14px; height: 14px; vertical-align: -2px; color: var(--y-deep); }
.ap-klabels { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.ap-klabels i { font-style: normal; font-size: var(--fs-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill); background: var(--paper); color: var(--text); border: 1px solid var(--line); }
.ap-ld__deal { align-items: end; }

/* Fases aanpassen */
.bx-stages { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 6px; }
.bx-stages li { display: grid; grid-template-columns: 18px 34px minmax(120px, 1.2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.bx-stages li.is-drag { opacity: .5; }
.bx-stages__grip { color: var(--muted); cursor: grab; display: flex; }
.bx-stages__grip .i { width: 16px; height: 16px; }
.bx-stages input[type=color] { width: 30px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.bx-stages .ap-in { height: 38px; font-size: var(--fs-base); padding: 6px 10px; }
.bx-stages__mv { display: flex; gap: 2px; }
.bx-stages__mv button { border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; }
.bx-stages__mv button:disabled { opacity: .35; cursor: default; }
.bx-stages__mv .i { width: 14px; height: 14px; }
@media (max-width: 760px) { .bx-stages li { grid-template-columns: 18px 34px 1fr auto; } .bx-stages li select { grid-column: 2 / -1; } .bx-stages__mv { display: none; } }

/* Nieuw bord: sjablonen met een voorproefje van de kolommen */
.bx-tpls { display: grid; gap: 10px; margin: 14px 0; }
.bx-tpl { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer; display: grid; gap: 4px; font: inherit; }
.bx-tpl:hover { border-color: var(--line-2); }
.bx-tpl.is-on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--y-soft); }
.bx-tpl b { color: var(--ink); font-size: var(--fs-lg); }
.bx-tpl small { color: var(--muted); font-size: var(--fs-base); }
.bx-tpl__cols { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.bx-tpl__cols i { font-style: normal; font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 18%, #fff); color: color-mix(in srgb, var(--c) 70%, #111); }

/* Vandaag */@media (max-width: 900px) { }
.bx-quick { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 6px 6px 6px 14px; margin: 0 0 16px; position: relative; transition: border-color .15s, box-shadow .15s; }
.bx-quick:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--y-soft); }
.bx-quick > span .i { color: var(--muted); }
.bx-quick .ap-in { border: 0; box-shadow: none !important; padding: 8px 0; flex: 1; min-width: 0; background: none; }
.bx-quick small { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--y-ink); background: var(--y-soft); padding: 3px 9px; border-radius: var(--r-pill); }
.bx-quick small:empty { display: none; }
.bx-tbox .bx-quick { margin: 8px 0 0; }
.bx-tasks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.bx-task { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r-md); }
.bx-task:hover { background: var(--paper); }
.bx-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.bx-check .i { width: 13px; height: 13px; color: transparent; stroke-width: 3; }
.bx-check:hover { border-color: var(--ok); }
.bx-task.is-done .bx-check { background: var(--ok); border-color: var(--ok); animation: apTick .35s cubic-bezier(.2,.8,.2,1); }
.bx-task.is-done .bx-check .i { color: #fff; }
.bx-task.is-done .bx-task__t b { text-decoration: line-through; color: var(--muted); }
.bx-task__ico { flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--paper); }
.bx-task__ico .i { width: 15px; height: 15px; color: var(--muted); }
.bx-task__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bx-task__t b { font-weight: 500; color: var(--ink); font-size: var(--fs-md); }
.bx-task__t small { font-size: var(--fs-sm); color: var(--muted); }
.bx-task__t a { font-size: var(--fs-sm); color: var(--muted); }
.bx-task.is-late .bx-task__t small { color: var(--err); font-weight: 600; }
.bx-x { flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; opacity: 0; padding: 4px; border-radius: var(--r-sm); transition: opacity .15s; }
.bx-task:hover .bx-x, .bx-x:focus-visible { opacity: 1; }
@media (hover: none) { .bx-x { opacity: .6; } }
.bx-x .i { width: 14px; height: 14px; }
.bx-empty { color: var(--muted); font-size: var(--fs-md); padding: 10px 4px; display: flex; align-items: center; gap: 8px; list-style: none; }
.bx-empty .i { width: 16px; height: 16px; color: var(--ok); }
.bx-later { margin-top: 10px; }
.bx-later summary { cursor: pointer; font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.bx-visits, .bx-wait, .bx-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }.bx-list li a { display: flex; flex-direction: column; padding: 9px 10px; border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.bx-list li a:hover { background: var(--paper); }
.bx-list li a small { color: var(--muted); font-size: var(--fs-sm); }/* Relaties */.bx-tbox { margin-top: 18px; }
.bx-io { display: grid; gap: 10px; margin-top: 12px; }
.bx-io .ap-choice2 { cursor: pointer; text-decoration: none; color: inherit; }
.bx-form .ap-seg--inline { margin-bottom: 12px; }
.bx-form .ap-seg--inline label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-md); cursor: pointer; font-weight: 500; }
@media (max-width: 900px) {}

/* =========================================================
   Offertes, facturen en prijslijst
   ========================================================= */
.dx-state { display: inline-block; font-size: var(--fs-sm); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: var(--paper); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.dx-state.is-info { background: var(--info-soft); color: var(--info); }
.dx-state.is-ok { background: var(--ok-soft); color: var(--ok); }
.dx-state.is-warn { background: var(--err-soft); color: var(--err); }
.dx-state.is-off { background: var(--hover); color: var(--muted); }@media (max-width: 900px) { }.dx-empty { display: flex; gap: 14px; align-items: flex-start; padding: 28px 22px; color: var(--muted); }
.dx-empty > .i { width: 28px; height: 28px; color: var(--y-deep); flex: none; }
.dx-empty b { color: var(--ink); }
.dx-empty p { margin: 4px 0 0; }
@media (max-width: 640px) { }

/* Editor */
.dx-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dx-top small { color: var(--muted); font-size: var(--fs-sm); }
.dx-top h1 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }@media (max-width: 1000px) { }@media (max-width: 760px) {}.ap-linkbtn--danger { color: var(--err) !important; }
.dx-time { list-style: none; margin: 8px 0 12px; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 10px; }
.dx-time li { position: relative; display: flex; flex-direction: column; }
.dx-time li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 3px #fff; }
.dx-time b { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.dx-time small { color: var(--muted); font-size: var(--fs-sm); }
.dx-pick { list-style: none; margin: 10px 0; padding: 0; max-height: 50vh; overflow-y: auto; display: grid; gap: 4px; }
.dx-pick button { width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; font: inherit; cursor: pointer; }
.dx-pick button:hover { border-color: var(--ink); }
.dx-pick small { color: var(--muted); font-size: var(--fs-sm); }

/* Prijslijst */
.dx-items__head, .dx-items__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr) 100px 130px 84px 36px; gap: 8px; align-items: start; padding: 10px 14px; }
.dx-items__head { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.dx-items__row + .dx-items__row { border-top: 1px solid var(--line); }
.dx-items__row .ap-in { height: 38px; padding: 6px 9px; font-size: var(--fs-md); }
.dx-items__row > span:first-child { display: grid; gap: 4px; }
.dx-items__desc { font-size: var(--fs-sm) !important; height: 32px !important; color: var(--muted); }
@media (max-width: 760px) { .dx-items__head { display: none; } .dx-items__row { grid-template-columns: 1fr 1fr; } .dx-items__row > span:first-child { grid-column: 1 / -1; } }
/* =========================================================
   Automatiseringen
   ========================================================= */@media (hover: hover) { }.ax-log { list-style: none; margin: 0; padding: 0; }
.ax-log li { display: flex; gap: 12px; padding: 12px 18px; align-items: flex-start; }
.ax-log li + li { border-top: 1px solid var(--line); }
.ax-log li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); }
.ax-log li > span .i { width: 14px; height: 14px; color: var(--ok); }
.ax-log li.is-bad > span { background: var(--err-soft); }
.ax-log li.is-bad > span .i { color: var(--err); }
.ax-log b { font-weight: 500; color: var(--ink); font-size: var(--fs-md); }
.ax-log small { display: block; color: var(--muted); font-size: var(--fs-sm); }
/* Wanneer … Dan … *//* =========================================================
   Gesprekken
   ========================================================= */.ix-msg { display: flex; flex-direction: column; max-width: 78%; }
.ix-msg.is-out { align-self: flex-end; align-items: flex-end; }
.ix-bubble { padding: 10px 14px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); font-size: var(--fs-md); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.ix-msg.is-out .ix-bubble { background: var(--ink); color: #fff; border-color: var(--ink); border-bottom-right-radius: 5px; }
.ix-msg.is-in .ix-bubble { border-bottom-left-radius: 5px; }
.ix-msg.is-failed .ix-bubble { background: var(--err-soft); color: var(--err); border-color: #f5c2bb; }
.ix-msg small { color: var(--muted); font-size: var(--fs-xs); margin-top: 3px; }.ix-bar { display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) {  .ix-msg { max-width: 92%; }
}
/* =========================================================
   Menubalk: volledig, enkel icoontjes of verborgen
   ========================================================= */
.ap-side__top { display: flex; align-items: center; gap: 6px; padding: 2px 0 14px 8px; }
.ap-side__top .ap-logo { flex: 1; min-width: 0; padding: 0; }
.ap-side__tog { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.ap-side__tog:hover, .ap-side__tog:focus-visible { background: var(--paper); color: var(--ink); }
.ap-side__new { gap: 8px; }
.ap-side__ests summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; border-radius: var(--r-sm); user-select: none; }
.ap-side__ests summary::-webkit-details-marker { display: none; }
.ap-side__ests summary .i { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s; }
.ap-side__ests[open] summary .i { transform: none; }
.ap-side__ests summary:hover { color: var(--ink); }
.ap-layout { transition: grid-template-columns .22s cubic-bezier(.2,.8,.2,1); }
.ap-side__show { display: none; }

/* Keuzemenu */
.ap-sidepop { position: fixed; z-index: 400; width: 250px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); animation: apIn .16s ease; }
.ap-sidepop > p { margin: 6px 10px 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.ap-sidepop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-md); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.ap-sidepop button:hover, .ap-sidepop button:focus-visible { background: var(--paper); outline: none; }
.ap-sidepop button.is-on { background: var(--y-soft); }
.ap-sidepop span { display: flex; flex-direction: column; }
.ap-sidepop b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.ap-sidepop small { font-size: var(--fs-sm); color: var(--muted); }
.ap-sidepop__ic { position: relative; flex: none; width: 30px; height: 22px; border: 1.5px solid var(--line-2); border-radius: var(--r-xs); background: #fff; }
.ap-sidepop__ic::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; border-radius: var(--r-xs); background: var(--y); }
.ap-sidepop__ic--full::before { width: 10px; }
.ap-sidepop__ic--icons::before { width: 4px; }
.ap-sidepop__ic--hidden::before { display: none; }
.ap-sidepop__tip { border-top: 1px solid var(--line); margin: 6px 4px 2px !important; padding: 8px 6px 2px; font-weight: 500 !important; }
.ap-sidepop kbd { font: 600 var(--fs-xs) var(--body, inherit); padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--paper); }

@media (min-width: 961px) {
  /* Enkel icoontjes */
  .ap-layout[data-side="icons"] { grid-template-columns: 72px minmax(0, 1fr); }
  [data-side="icons"] .ap-side { padding: 16px 12px 12px; align-items: center; overflow: visible; }
  [data-side="icons"] .ap-side__top { flex-direction: column; padding: 0 0 12px; gap: 10px; }
  [data-side="icons"] .ap-side__top .ap-logo b { display: none; }
  [data-side="icons"] .ap-side__new { width: 44px; height: 44px; padding: 0; justify-content: center; margin-bottom: 8px; }
  [data-side="icons"] .ap-side__new span,
  [data-side="icons"] .ap-side__search span, [data-side="icons"] .ap-side__search kbd,
  [data-side="icons"] .ap-snav a span, [data-side="icons"] .ap-snav__more span,
  [data-side="icons"] .ap-side__ests, [data-side="icons"] .ap-plan-mini, [data-side="icons"] .ap-demo-mini,
  [data-side="icons"] .ap-me__txt { display: none; }
  [data-side="icons"] .ap-side__search { width: 44px; height: 40px; justify-content: center; padding: 0; margin: 0 0 10px; }
  [data-side="icons"] .ap-snav { width: 100%; align-items: center; }
  [data-side="icons"] .ap-snav a, [data-side="icons"] .ap-snav__more { width: 44px; height: 42px; padding: 0; justify-content: center; }
  [data-side="icons"] .ap-snav a.is-on::before { left: -12px; }
  [data-side="icons"] .ap-snav .ap-count { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; font-size: var(--fs-xs); }
  [data-side="icons"] .ap-side__foot { align-items: center; }
  [data-side="icons"] .ap-me { flex-direction: column; padding: 4px 0 0; gap: 6px; }

  /* Naam als zwevend label bij hover of focus */
  [data-side="icons"] [data-tip] { position: relative; }
  [data-side="icons"] [data-tip]:hover::after, [data-side="icons"] [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 300;
    padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; pointer-events: none;
  }
  .ap-side__top [data-tip]:hover::after { top: 50%; }

  /* Verborgen: volle breedte om in te werken */
  .ap-layout[data-side="hidden"] { grid-template-columns: 0 minmax(0, 1fr); }
  [data-side="hidden"] .ap-side { visibility: hidden; padding: 0; border: 0; overflow: hidden; }
  [data-side="hidden"] .ap-side__show { display: grid; place-items: center; position: fixed; z-index: 90; left: 12px; top: 12px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--sh); }
  [data-side="hidden"] .ap-side__show:hover { background: var(--y-soft); border-color: #f3dc98; }
  [data-side="hidden"] .ap-main > .ap-page { padding-left: 64px; }
}
@media (prefers-reduced-motion: reduce) { .ap-layout { transition: none; } }
/* =========================================================
   Aanvragen: inbox met lijst links en details rechts
   ========================================================= */
.ap-ibx { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: 100vh; background: var(--paper); }
.ap-ibx__list { display: flex; flex-direction: column; min-height: 0; background: #fff; border-right: 1px solid var(--line); }
.ap-ibx__head { display: flex; align-items: center; gap: 10px; padding: 22px 20px 14px; }
[data-side="hidden"] .ap-ibx__head { padding-left: 62px; }
.ap-ibx__head h1 { display: flex; align-items: center; gap: 10px; flex: 1; margin: 0; }
.ap-ibx__n { font: 600 var(--fs-base) var(--body, inherit); font-style: normal; min-width: 26px; padding: 3px 8px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }
.ap-ibx__add { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; }
.ap-ibx__add:hover { background: var(--y-soft); }
.ap-ibx__list > .ap-search { flex: none; margin: 0 20px 12px; }
.ap-ibx__tabs { display: flex; align-items: center; gap: 4px; padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.ap-ibx__tabs button { padding: 7px 14px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--text); cursor: pointer; }
.ap-ibx__tabs button:hover { background: var(--paper); }
.ap-ibx__tabs button.is-on { background: var(--paper); border-color: var(--line); color: var(--ink); font-weight: 600; }
.ap-ibx__test { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.ap-ibx__rows { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.ap-ibx__row { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 0; border-bottom: 1px solid var(--line); background: #fff; transition: background .15s; }
.ap-ibx__row:hover { background: var(--soft); }
.ap-ibx__row.is-sel { background: #fff9e6; }
.ap-ibx__row.is-sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--y); }
.ap-ibx__row.is-urgent .ap-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f0a39a; }
.ap-ibx__who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 14px 0 14px 16px; text-decoration: none; color: inherit; }
.ap-ibx__who:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--r-sm); }
.ap-ibx__who .ap-avatar { width: 40px; height: 40px; flex: none; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.ap-ibx__txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ap-ibx__txt b { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ibx__txt small { font-size: var(--fs-base); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ibx__txt .ap-ibx__age { color: var(--muted); font-size: var(--fs-sm); display: flex; align-items: center; gap: 4px; }
.ap-ibx__age .i { width: 13px; height: 13px; }
.ap-ibx__acts { display: flex; gap: 8px; flex: none; }
.ap-ibx__acts button, .ap-ibx__acts a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; color: var(--ink); background: var(--paper); text-decoration: none; transition: transform .15s, background .15s; }
.ap-ibx__acts .i { width: 18px; height: 18px; }
.ap-ibx__del { background: var(--err-soft) !important; color: #d93a3a !important; }
.ap-ibx__del:hover { background: #fbd9d9 !important; }
.ap-ibx__go { background: var(--y) !important; color: var(--ink) !important; }
.ap-ibx__go:hover { transform: translateX(2px); background: #ffb800 !important; }
.ap-ibx__back:hover { background: var(--y-soft) !important; }
.ap-ibx__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; text-align: center; color: var(--muted); font-size: var(--fs-md); }
.ap-ibx__empty .i { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--ok-soft, #e5f5ec); color: var(--ok, #1f8a55); }
.ap-ibx__empty b { color: var(--ink); font-size: var(--fs-lg); }

.ap-ibx__detail { min-width: 0; overflow-y: auto; scrollbar-width: thin; }
.ap-ibx__none { display: flex; align-items: center; gap: 14px; margin: 64px 56px; color: var(--muted); font-size: var(--fs-lg); }
.ap-ibx__none .i { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--y-soft); color: var(--y-ink); animation: ibxPoint 1.6s ease-in-out infinite; }
@keyframes ibxPoint { 50% { transform: translateX(-6px); } }
.ap-ibx__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -28px -36px 22px; padding: 14px 36px; background: rgba(250,249,246,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.ap-ibx__close { display: none; }
.ap-ld--inline { max-width: 860px; margin: 0 auto; padding: 28px 36px 64px; }
.ap-ld--inline .ap-modal__foot { position: static; }

/* Omzetten naar deal */
.ap-conv { position: fixed; z-index: 400; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); animation: apIn .16s ease; }
.ap-conv h3 { margin: 0 0 14px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ap-conv__f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.ap-conv__f small { font-weight: 500; color: var(--muted); }
.ap-conv__stages { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-conv__stages button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; font: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--text); cursor: pointer; }
.ap-conv__stages button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ap-conv__stages button:hover { border-color: var(--line-2); }
.ap-conv__stages button.is-on { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 600; }
.ap-conv__dup { align-items: flex-start; margin: 4px 0 16px; font-size: var(--fs-base); }
.ap-conv__dup span { display: flex; flex-direction: column; gap: 2px; }
.ap-conv__dup small { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.ap-conv__foot { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 960px) {
  .ap-ibx { grid-template-columns: 1fr; height: calc(100vh - 58px - 70px); }
  .ap-ibx__detail { display: none; }
  .ap-ibx.has-sel .ap-ibx__list { display: none; }
  .ap-ibx.has-sel .ap-ibx__detail { display: block; }
  .ap-ibx__close { display: grid; }
  .ap-ibx__bar { margin: -20px -16px 16px; padding: 10px 16px; }
  .ap-ld--inline { padding: 20px 16px 48px; }
}
@media (prefers-reduced-motion: reduce) { .ap-ibx__none .i { animation: none; } }
@media (max-width: 600px) { .ap-conv { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-width: none; border-radius: var(--r-xl); } }

/* =========================================================
   Deals: filterpaneel links, bord op volle hoogte rechts
   ========================================================= */
.ap-dl { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100vh; background: var(--paper); }
.ap-dl.is-closed { grid-template-columns: 0 minmax(0, 1fr); }
.ap-dl__side { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; padding: 22px 20px 12px; background: #fff; border-right: 1px solid var(--line); scrollbar-width: thin; }
.ap-dl.is-closed .ap-dl__side { visibility: hidden; padding: 0; border: 0; }
[data-side="hidden"] .ap-dl__head { padding-left: 42px; }
.ap-dl__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ap-dl__head h1 { margin: 0; }
.ap-dl__side > .ap-search { flex: none; margin-bottom: 10px; }
.ap-dl__tabs { display: flex; gap: 4px; }
.ap-dl__tabs button { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--text); cursor: pointer; }
.ap-dl__tabs button:hover { background: var(--paper); }
.ap-dl__tabs button.is-on { background: var(--paper); border-color: var(--line); color: var(--ink); font-weight: 600; }
.ap-dl__tabs em { font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.ap-dl__tabs .is-on em { color: var(--ink); }
.ap-dl__sum { margin: 10px 2px 6px; font-size: var(--fs-base); color: var(--muted); }
.ap-dl__sum b { font: 700 var(--fs-xl) var(--display); color: var(--ink); margin-right: 4px; }
.ap-dl__wait { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--y-soft); border: 1px solid #f3dc98; color: var(--ink); text-decoration: none; font-size: var(--fs-base); }
.ap-dl__wait span { flex: 1; }
.ap-dl__wait .i { width: 16px; height: 16px; flex: none; }
.ap-dl__wait:hover { background: #ffefb8; }
.ap-dl__grp { padding: 14px 0 4px; }
.ap-dl__grp h4 { margin: 0 0 8px 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.ap-dl__sel { position: relative; display: flex; align-items: center; }
.ap-dl__sel > .i { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.ap-dl__sel select { padding-left: 38px; }
.ap-dl__list { display: flex; flex-direction: column; gap: 2px; }
.ap-dl__list button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--r-md); background: none; font: inherit; font-size: var(--fs-md); color: var(--text); text-align: left; cursor: pointer; }
.ap-dl__list button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-dl__list button em { font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
.ap-dl__list button .i { width: 17px; height: 17px; color: var(--muted); }
.ap-dl__list button:hover { background: var(--paper); }
.ap-dl__list button.is-on { background: var(--paper); border-color: var(--line); color: var(--ink); font-weight: 600; }
.ap-dl__list button.is-on .i { color: var(--ink); }
.ap-dl__list .ap-dl__add { color: var(--muted); font-size: var(--fs-base); }
.ap-dl__sw { display: flex; flex-direction: column; gap: 8px; }
.ap-dl__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; }
.ap-dl__open { display: none; }
.ap-dl.is-closed .ap-dl__open { display: grid; place-items: center; position: absolute; z-index: 20; left: 12px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); box-shadow: var(--sh); cursor: pointer; }
.ap-dl.is-closed .ap-dl__open:hover { background: var(--y-soft); }

.ap-dl__main { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.ap-board { display: flex; gap: 14px; height: 100%; padding: 20px 20px 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
[data-side="hidden"] .ap-dl.is-closed .ap-board { padding-left: 64px; }
.ap-bcol { flex: 0 0 290px; display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.ap-bcol.is-over { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); }
.ap-bcol header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px; }
.ap-bcol__pill { padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-base); font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--c) 26%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-bcol__auto { color: var(--muted); display: flex; }
.ap-bcol__auto .i { width: 14px; height: 14px; }
.ap-bcol header em { margin-left: auto; font-style: normal; font-size: var(--fs-sm); font-weight: 600; min-width: 28px; padding: 3px 8px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); background: var(--paper); }
.ap-bcol__sum { margin: 0 14px 4px; font-size: var(--fs-sm); color: var(--muted); }
.ap-bcol__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 12px; scrollbar-width: thin; }
.ap-bcol .ap-kcard { flex: none; }
.ap-bcol .ap-kempty { margin: 6px 4px; padding: 18px 12px; border: 1.5px dashed var(--line); border-radius: var(--r-md); text-align: center; font-size: var(--fs-base); color: var(--muted); }
.ap-bcol .ap-kempty a { color: var(--ink); }
.ap-dl__none { padding: 40px; color: var(--muted); }

/* Gewonnen en Verloren verschijnen onderaan tijdens het slepen */
.ap-dropbar { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 15; display: flex; gap: 14px; transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s; }
.ap-dropbar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.ap-drop { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 64px; border-radius: var(--r-lg); border: 2px dashed; font-weight: 700; font-size: var(--fs-lg); background: #fff; box-shadow: var(--sh); }
.ap-drop--won { color: var(--ok-ink); border-color: #8fd1ae; }
.ap-drop--lost { color: var(--err); border-color: #f0a39a; }
.ap-drop--won.is-over { background: var(--ok-soft); }
.ap-drop--lost.is-over { background: var(--err-soft); }

/* Knoppen rechtsonder: fases aanpassen en minikaart */
.ap-dl__tools { position: absolute; right: 20px; bottom: 24px; z-index: 10; display: flex; align-items: flex-end; gap: 10px; }
.ap-dl__tool { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--sh); }
.ap-dl__tool:hover { background: var(--y-soft); }
.ap-minimap { position: relative; display: flex; gap: 3px; height: 54px; padding: 5px; border-radius: var(--r-md); background: rgba(255,255,255,.92); border: 1px solid var(--line); box-shadow: var(--sh); cursor: pointer; }
.ap-minimap[hidden] { display: none; }
.ap-minimap i { width: 16px; border-radius: var(--r-xs); background: var(--paper); border: 1px solid var(--line); }
.ap-minimap b { position: absolute; top: 2px; bottom: 2px; border: 2px solid var(--ink); border-radius: var(--r-sm); pointer-events: none; transition: left .08s linear; }

.ap-dl__table { height: 100%; overflow-y: auto; padding: 20px; }

@media (max-width: 960px) {
  .ap-dl { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: calc(100vh - 58px - 70px); }
  .ap-dl.is-closed { grid-template-columns: 1fr; }
  .ap-dl__side { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .ap-dl.is-closed .ap-dl__side { display: none; }
  .ap-dl.is-closed .ap-dl__open { bottom: 90px; }
  .ap-dl__main { overflow: visible; }
  .ap-board { height: 70vh; padding: 16px; }
  .ap-bcol { flex-basis: 78vw; }
  .ap-dl__tools, .ap-dropbar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ap-dropbar { transition: none; } }
/* =========================================================
   Rustiger en vloeiender: zachte overgangen, minder lawaai
   ========================================================= */
.ap-dl, .ap-ibx { transition: grid-template-columns .28s var(--ease); }
@keyframes softIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ap-dl__main[data-anim] .ap-board, .ap-dl__main[data-anim] .ap-dl__table, .ap-choose { animation: softIn .28s var(--ease); }
.ap-ld--inline { animation: softIn .22s var(--ease); }

/* Kaartjes op het bord: licht en rustig, iets meer lucht */
.ap-bcol { background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.05); }
.ap-bcol .ap-kcard { border-color: rgba(0,0,0,.06); box-shadow: var(--sh); padding: 12px 14px; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s; }
.ap-bcol .ap-kcard:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: rgba(0,0,0,.1); }
.ap-bcol .ap-kcard:active { cursor: grabbing; }
.ap-bcol .ap-kcard.is-drag { opacity: .35; transform: scale(.98); }
.ap-bcol header em { border: 0; background: transparent; color: var(--muted); }
.ap-bcol--add { flex: 0 0 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-md); font-weight: 500; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.ap-bcol--add:hover { border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,.6); }

/* Filterpaneel: minder kaders, meer rust */
.ap-dl__grp { padding-top: 16px; }
.ap-dl__wait { background: transparent; border: 1px solid var(--line); }
.ap-dl__wait:hover { background: var(--y-soft); border-color: #f3dc98; }
.ap-dl__list button, .ap-dl__tabs button, .ap-ibx__tabs button { transition: background .18s, border-color .18s, color .18s; }

/* Inbox: de vuilbak verschijnt pas bij hover (op een computer), de pijl blijft */
@media (hover: hover) {
  .ap-ibx__del { opacity: 0; transform: scale(.9); transition: opacity .18s, transform .18s var(--ease); }
  .ap-ibx__row:hover .ap-ibx__del, .ap-ibx__row:focus-within .ap-ibx__del, .ap-ibx__row.is-sel .ap-ibx__del { opacity: 1; transform: none; }
}
.ap-ibx__row { transition: background .18s; }
.ap-ibx__go { transition: transform .2s var(--ease), background .18s !important; }

/* Eerste keuze van het bord */
.ap-choose { max-width: 1040px; margin: 8vh auto; padding: 0 24px; text-align: center; }
.ap-choose .ap-muted { margin: 8px auto 20px; max-width: 520px; }
.ap-choose__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
@media (max-width: 1100px) { .ap-choose__cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.ap-choose__cards .bx-tpl { padding: 20px; transition: border-color .2s, box-shadow .2s var(--ease), transform .2s var(--ease); }
.ap-choose__cards .bx-tpl:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: var(--ink); }
.ap-choose__cards .bx-tpl b { font-size: var(--fs-xl); }
@media (max-width: 700px) { .ap-choose__cards { grid-template-columns: 1fr; } }
.bx-tpl { transition: border-color .18s, box-shadow .18s; }

@media (prefers-reduced-motion: reduce) {
  .ap-dl, .ap-ibx { transition: none; }
  .ap-dl__main[data-anim] .ap-board, .ap-dl__main[data-anim] .ap-dl__table, .ap-choose, .ap-ld--inline { animation: none; }
}
/* =========================================================
   Deals v2: één werkbalk, borden als tabs, luchtig bord
   ========================================================= */
.ap-dx { display: flex; flex-direction: column; height: 100vh; background: var(--paper); }
.ap-dt { flex: none; padding: 18px 28px 0; background: var(--paper); }
[data-side="hidden"] .ap-dt { padding-left: 64px; }
.ap-dt__row { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ap-dt__h { margin: 0; font: 800 var(--fs-2xl) var(--display); color: var(--ink); letter-spacing: -.01em; }
.ap-dt__boards { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ap-dt__boards::-webkit-scrollbar { display: none; }
.ap-dt__boards [data-pl] { position: relative; flex: none; padding: 8px 14px; border: 0; border-radius: var(--r-md); background: none; font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--muted); cursor: pointer; transition: color .2s, background .2s; }
.ap-dt__boards [data-pl]:hover { color: var(--ink); background: rgba(0,0,0,.035); }
.ap-dt__boards [data-pl].is-on { color: var(--ink); font-weight: 600; }
.ap-dt__ink { position: absolute; left: 0; bottom: 0; height: 2.5px; border-radius: var(--r-xs); background: var(--ink); transition: transform .32s var(--ease), width .32s var(--ease); pointer-events: none; }
.ap-dt__plus { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-left: 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.ap-dt__plus:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.ap-dt__plus .i { width: 16px; height: 16px; }
/* Tijdens het slepen: de andere borden lichten op als plek om te droppen */
.ap-dt__boards.is-dragging [data-pl]:not(.is-on) { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); }
.ap-dt__boards [data-pl].is-drop { background: var(--y-soft) !important; box-shadow: inset 0 0 0 1.5px var(--y) !important; transform: scale(1.04); }
.ap-dt__boards [data-pl].is-got { animation: apGot .6s var(--ease); }
@keyframes apGot { 40% { transform: scale(1.08); background: var(--y-soft); } }

.ap-dt__row--sub { gap: 14px; margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,.06); }
.ap-dt__tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: rgba(0,0,0,.04); }
.ap-dt__tabs button { padding: 6px 12px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.ap-dt__tabs button em { font-style: normal; margin-left: 3px; opacity: .7; }
.ap-dt__tabs button.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--sh); }
.ap-dt__sum { font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.ap-dt__search { display: flex; align-items: center; gap: 8px; width: 34px; height: 34px; padding: 0 9px; border-radius: var(--r-md); color: var(--muted); cursor: text; overflow: hidden; transition: width .28s var(--ease), background .2s, box-shadow .2s; }
.ap-dt__search .i { flex: none; width: 16px; height: 16px; }
.ap-dt__search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-md); color: var(--ink); outline: none; }
.ap-dt__search:hover { background: rgba(0,0,0,.04); }
.ap-dt__search.is-open { width: 220px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ap-dt__view { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: rgba(0,0,0,.04); }
.ap-dt__view button { display: grid; place-items: center; width: 30px; height: 28px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.ap-dt__view button .i { width: 16px; height: 16px; }
.ap-dt__view button.is-on { background: #fff; color: var(--ink); box-shadow: var(--sh); }
.ap-dt__icon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--r-md); background: none; color: var(--muted); cursor: pointer; }
.ap-dt__icon:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.ap-dtmenu { width: 240px; }
.ap-dtmenu button .i, .ap-dtmenu__a .i { width: 17px; height: 17px; color: var(--muted); flex: none; }
.ap-dtmenu__a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-md); text-decoration: none; color: var(--text); }
.ap-dtmenu__a:hover { background: var(--paper); }
.ap-dtmenu__a span { display: flex; flex-direction: column; }
.ap-dtmenu__a b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.ap-dtmenu__a small { font-size: var(--fs-sm); color: var(--muted); }

.ap-dx__main { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ap-dx .ap-board { gap: 18px; padding: 18px 28px 22px; scroll-snap-type: x proximity; scroll-padding: 0 28px; cursor: default; }
[data-side="hidden"] .ap-dx .ap-board { padding-left: 64px; scroll-padding-left: 64px; }
.ap-dx .ap-board.is-panning { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ap-dx .ap-board:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--line-2); }
/* Kolommen zonder kader: enkel een rustige kop, de kaartjes dragen het bord */
.ap-dx .ap-bcol { flex: 0 0 272px; scroll-snap-align: start; background: transparent; border: 0; border-radius: var(--r-lg); }
.ap-dx .ap-bcol.is-over { background: color-mix(in srgb, var(--c) 8%, transparent); }
.ap-dx .ap-bcol header { gap: 8px; padding: 4px 4px 10px; }
.ap-bcol__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.ap-dx .ap-bcol header b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-dx .ap-bcol header em { margin-left: 0; min-width: 0; padding: 0; border: 0; background: none; font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
.ap-dx .ap-bcol__list { padding: 2px 2px 10px; gap: 10px; }
.ap-dx .ap-bcol footer { padding: 6px 6px 0; font-size: var(--fs-sm); color: var(--muted); }
.ap-dx .ap-kcard { border: 0; border-radius: var(--r-md); background: #fff; box-shadow: 0 1px 2px rgba(30,25,10,.05), 0 0 0 1px rgba(30,25,10,.04); padding: 13px 14px; gap: 2px; }
.ap-dx .ap-kcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30,25,10,.08), 0 0 0 1px rgba(30,25,10,.05); }
.ap-dx .ap-kcard em { font-weight: 600; font-size: var(--fs-base); color: var(--text); }
.ap-dx .ap-kempty { border: 0; padding: 10px 6px; text-align: left; font-size: var(--fs-base); }
.ap-dx .ap-kempty:empty { min-height: 60px; border: 1.5px dashed rgba(0,0,0,.07); border-radius: var(--r-md); }
.ap-dx .ap-bcol--add { flex: 0 0 120px; align-self: flex-start; flex-direction: row; height: 40px; border-radius: var(--r-md); border: 0; background: rgba(0,0,0,.035); font-size: var(--fs-base); }
.ap-dx .ap-bcol--add:hover { background: rgba(0,0,0,.06); }
.ap-dx .ap-bcol--add .i { width: 15px; height: 15px; }
.ap-dx .ap-minimap { position: absolute; right: 24px; bottom: 20px; height: 34px; padding: 4px; gap: 3px; opacity: .55; transition: opacity .2s; }
.ap-dx .ap-minimap:hover { opacity: 1; }
.ap-dx .ap-minimap i { width: 12px; border: 0; background: color-mix(in srgb, var(--c) 30%, #fff); }
.ap-dx .ap-minimap b { top: 1px; bottom: 1px; left: 0; border-width: 1.5px; transition: transform .1s linear; }
.ap-dx .ap-dl__table { padding: 18px 28px; }

/* Wisselen van bord: van links of rechts inschuiven; anders een korte fade */
@keyframes slideR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes slideL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.ap-dx__main[data-anim="r"] > * { animation: slideR .34s var(--ease); }
.ap-dx__main[data-anim="l"] > * { animation: slideL .34s var(--ease); }
.ap-dx__main[data-anim="fade"] > .ap-board, .ap-dx__main[data-anim="fade"] > .ap-dl__table { animation: softIn .26s var(--ease); }

@media (max-width: 960px) {
  .ap-dx { height: calc(100vh - 58px - 70px); }
  .ap-dt { padding: 14px 16px 0; }
  .ap-dt__row { gap: 10px; }
  .ap-dt__row:first-child { flex-wrap: wrap; }
  .ap-dt__boards { order: 3; flex-basis: 100%; }
  .ap-dt__sum { display: none; }
  .ap-dt__search.is-open { width: 150px; }
  .ap-dx .ap-board { padding: 14px 16px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  .ap-dx .ap-bcol { flex-basis: 82vw; }
  .ap-dx .ap-minimap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-dt__ink, .ap-dt__search { transition: none; }
  .ap-dx__main[data-anim] > * { animation: none !important; }
}.ap-dt__tabs button { white-space: nowrap; }
@media (max-width: 960px) { .ap-dt__row--sub { flex-wrap: wrap; gap: 8px; } .ap-dt__tabs { flex: 1 1 100%; } .ap-dt__tabs button { flex: 1; } }
/* Deals: duidelijke kolommen (niet meer "zwevend") */
.ap-dx .ap-board { gap: 12px; padding-top: 16px; }
.ap-dx .ap-bcol { flex: 0 0 280px; background: var(--hover); border: 1px solid rgba(0,0,0,.06); border-top: 3px solid var(--c); border-radius: var(--r-md); }
.ap-dx .ap-bcol.is-over { background: color-mix(in srgb, var(--c) 14%, #eceae4); border-color: var(--c); }
.ap-dx .ap-bcol header { padding: 12px 12px 10px; border-bottom: 1px solid rgba(0,0,0,.06); }
.ap-dx .ap-bcol header b { font-size: var(--fs-md); }
.ap-dx .ap-bcol header em { margin-left: auto; min-width: 24px; padding: 2px 8px; border-radius: var(--r-pill); background: #fff; text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ap-dx .ap-bcol__list { padding: 10px 10px 12px; gap: 8px; }
.ap-dx .ap-bcol footer { padding: 8px 12px 10px; border-top: 1px solid rgba(0,0,0,.06); font-weight: 600; color: var(--text); }
.ap-dx .ap-kcard { box-shadow: 0 1px 2px rgba(30,25,10,.06), 0 0 0 1px rgba(30,25,10,.06); }
.ap-dx .ap-kempty:empty { min-height: 70px; border-color: rgba(0,0,0,.1); }
.ap-dx .ap-bcol--add { flex: 0 0 140px; align-self: stretch; height: auto; flex-direction: column; border: 1.5px dashed rgba(0,0,0,.12); background: transparent; border-radius: var(--r-md); }
.ap-dx .ap-bcol--add:hover { background: #fff; border-color: var(--line-2); }

/* Tabel-weergave: echte tabel met koppen */
.ap-dtab { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: var(--fs-md); }
.ap-dtab th { position: sticky; top: 0; z-index: 1; padding: 11px 14px; background: var(--sunken); border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; }
.ap-dtab td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.ap-dtab tr:last-child td { border-bottom: 0; }
.ap-dtab tbody tr { cursor: pointer; transition: background .15s; }
.ap-dtab tbody tr:hover { background: var(--soft); }
.ap-dtab td b { color: var(--ink); font-weight: 600; }
.ap-dtab td small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.ap-dtab .is-num { text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink); }
.ap-dtab__st { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ap-dtab__st i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ap-dtab a { color: inherit; text-decoration: none; }
@media (max-width: 700px) { .ap-dtab .is-hide-s { display: none; } }
/* Minikaart: sleepbaar kader */
.ap-dx .ap-minimap { opacity: .85; cursor: grab; touch-action: none; user-select: none; }
.ap-dx .ap-minimap:hover, .ap-dx .ap-minimap.is-drag { opacity: 1; }
.ap-dx .ap-minimap.is-drag { cursor: grabbing; box-shadow: var(--sh); }
.ap-dx .ap-minimap b { background: rgba(255,255,255,.25); transition: none; }
.ap-dx .ap-minimap.is-drag b { border-color: var(--ink); background: rgba(17,17,17,.06); }
/* =========================================================
   Formulieren
   ========================================================= */
.ap-forms__tabs { display: inline-flex; margin: 4px 0 22px; }
.ap-soon { font-style: normal; font-size: var(--fs-xs) !important; font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); background: #eef0ff; color: #5b4bd6; opacity: 1 !important; }
.ap-forms__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.ap-form { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .2s; }
.ap-form:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.ap-form__img { display: grid; place-items: center; height: 140px; background: var(--sunken); overflow: hidden; }
.ap-form__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.ap-form:hover .ap-form__img img { transform: scale(1.03); }
.ap-form__img span .i { width: 34px; height: 34px; color: var(--muted); }
.ap-form__body { padding: 14px 16px 6px; }
.ap-form__type { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.ap-form__type .i { width: 14px; height: 14px; }
.ap-form h3 { margin: 0; font: 700 var(--fs-lg) var(--display); }
.ap-form h3 a { color: var(--ink); text-decoration: none; }
.ap-form__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: var(--fs-base); color: var(--muted); }
.ap-form__foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 10px 12px 12px; }
.ap-form--soon, .ap-form--new { align-items: center; justify-content: center; gap: 6px; min-height: 250px; border-style: dashed; border-width: 1.5px; background: transparent; font: inherit; color: var(--muted); cursor: pointer; }
.ap-form--soon b, .ap-form--new b { color: var(--ink); font-size: var(--fs-lg); }
.ap-form--soon small { font-size: var(--fs-sm); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: #eef0ff; color: #5b4bd6; }
.ap-form__soonic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-lg); background: #eef0ff; color: #5b4bd6; margin-bottom: 4px; }
.ap-form__soonic .i { width: 26px; height: 26px; }
.ap-form--new .i { width: 26px; height: 26px; }
.ap-form--soon:hover, .ap-form--new:hover { background: #fff; border-color: var(--line-2); }
.ap-soonbox { max-width: 560px; margin: 30px auto; padding: 36px 32px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); animation: softIn .3s var(--ease); }
.ap-soonbox__ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-xl); background: #eef0ff; color: #5b4bd6; margin-bottom: 12px; }
.ap-soonbox__ic .i { width: 32px; height: 32px; }
.ap-soonbox .ap-muted { margin: 8px 0 0; }

/* Keuze: soort formulier */
.ap-ftypes { display: grid; gap: 10px; margin: 16px 0 10px; }
.ap-ftype { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.ap-ftype:hover { border-color: var(--ink); box-shadow: var(--sh); transform: translateY(-1px); }
.ap-ftype > .i { color: var(--muted); flex: none; }
.ap-ftype__ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--y-soft); color: var(--y-ink); }
.ap-ftype__ic .i { width: 24px; height: 24px; }
.ap-ftype__t { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ap-ftype__t b { font-size: var(--fs-lg); color: var(--ink); }
.ap-ftype__t b em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); background: #eef0ff; color: #5b4bd6; margin-left: 6px; vertical-align: 2px; }
.ap-ftype__t small { font-size: var(--fs-base); color: var(--muted); }
.ap-ftype.is-soon { cursor: default; opacity: .85; }
.ap-ftype.is-soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.ap-ftype.is-soon .ap-ftype__ic { background: #eef0ff; color: #5b4bd6; }
.ap-side__new { font: inherit; font-weight: 600; cursor: pointer; }
/* =========================================================
   Aanvragen v2: rustig als een goede mailbox
   ========================================================= */
.ap-ibx { background: var(--soft); }
.ap-ibx__list { background: #fff; border-right: 1px solid rgba(0,0,0,.07); }
.ap-ibx__head { align-items: baseline; gap: 10px; padding: 22px 18px 10px 20px; }
.ap-ibx__head h1 { flex: none; margin: 0; font: 800 var(--fs-2xl) var(--display); letter-spacing: -.01em; color: var(--ink); }
.ap-ibx__n { font-size: var(--fs-lg); font-weight: 600; color: var(--muted); border: 0; background: none; padding: 0; min-width: 0; }
.ap-ibx__add { width: 32px; height: 32px; border-radius: var(--r-sm); background: none; color: var(--muted); align-self: center; }
.ap-ibx__add:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.ap-ibx__add .i { width: 17px; height: 17px; }
.ap-ibx__tools { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 20px; border-bottom: 1px solid rgba(0,0,0,.07); }
.ap-ibx__tools .ap-ibx__tabs { padding: 0; border: 0; gap: 16px; }
.ap-ibx__tools .ap-ibx__tabs button { position: relative; padding: 10px 0 11px; border: 0; border-radius: 0; background: none; font-size: var(--fs-md); color: var(--muted); }
.ap-ibx__tools .ap-ibx__tabs button:hover { background: none; color: var(--ink); }
.ap-ibx__tools .ap-ibx__tabs button.is-on { background: none; border: 0; color: var(--ink); font-weight: 600; }
.ap-ibx__tools .ap-ibx__tabs button.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--r-xs); background: var(--ink); }
.ap-ibx__search { margin-left: auto; display: flex; align-items: center; gap: 6px; width: 150px; height: 32px; padding: 0 10px; border-radius: var(--r-sm); background: rgba(0,0,0,.035); color: var(--muted); transition: background .2s, box-shadow .2s, width .25s var(--ease); }
.ap-ibx__search:focus-within { width: 190px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.ap-ibx__search .i { width: 15px; height: 15px; flex: none; }
.ap-ibx__search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-base); color: var(--ink); outline: none; }
.ap-ibx__test { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-top: 1px solid rgba(0,0,0,.06); font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.ap-ibx__grp { position: sticky; top: 0; z-index: 2; margin: 0; padding: 14px 20px 6px; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.ap-ibx__row { gap: 0; padding: 0; border-bottom: 0; background: #fff; overflow: hidden; transition: background .15s, height .22s var(--ease), opacity .18s, transform .22s var(--ease); }
.ap-ibx__row + .ap-ibx__row { box-shadow: var(--sh); }
.ap-ibx__row:hover { background: #faf9f5; }
.ap-ibx__row.is-sel { background: var(--sunken); }
.ap-ibx__row.is-sel::before { width: 2px; background: var(--ink); }
.ap-ibx__row.is-leaving { height: 0 !important; opacity: 0; transform: translateX(18px); }
.ap-ibx__who { gap: 12px; padding: 11px 16px 11px 20px; }
.ap-ibx__ini { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #efede7; color: #5f5a50; font-size: var(--fs-base); font-weight: 600; }
.ap-ibx__txt { flex: 1; gap: 2px; }
.ap-ibx__l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ap-ibx__l1 b { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ibx__l1 time { flex: none; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-ibx__tag { flex: none; font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 1px 6px; border-radius: var(--r-xs); background: rgba(0,0,0,.05); }
.ap-ibx__l2 { display: block; font-size: var(--fs-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ibx__visit { display: inline-flex; align-items: center; gap: 3px; color: var(--y-ink); }
.ap-ibx__visit .i { width: 12px; height: 12px; }
/* Ongelezen: vet met een klein bolletje */
.ap-ibx__row.is-unread .ap-ibx__l1 b { font-weight: 700; }
.ap-ibx__row.is-unread .ap-ibx__l1 time { color: var(--ink); font-weight: 600; }
.ap-ibx__row.is-unread .ap-ibx__ini { position: relative; }
.ap-ibx__row.is-unread .ap-ibx__ini::after { content: ""; position: absolute; left: -11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--info); }

/* Acties: rustig en pas bij hover (de pijl blijft zichtbaar maar neutraal) */
.ap-ibx__acts { gap: 2px; padding-right: 12px; }
.ap-ibx__qa { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; text-decoration: none; transition: background .15s, color .15s, opacity .15s; }
.ap-ibx__qa .i { width: 16px; height: 16px; }
.ap-ibx__qa:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.ap-ibx__qa--del:hover { background: var(--err-soft); color: var(--err); }
.ap-ibx__acts .ap-ibx__go { width: 30px; height: 30px; border-radius: var(--r-sm); background: transparent !important; color: var(--muted) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.ap-ibx__acts .ap-ibx__go .i { width: 15px; height: 15px; }
.ap-ibx__acts .ap-ibx__go:hover, .ap-ibx__row.is-sel .ap-ibx__go { background: var(--ink) !important; color: #fff !important; box-shadow: none; transform: none; }
@media (hover: hover) {
  .ap-ibx__acts [data-archq], .ap-ibx__acts .ap-ibx__qa--del { display: none; }
  .ap-ibx__row:hover .ap-ibx__acts [data-archq], .ap-ibx__row:hover .ap-ibx__acts .ap-ibx__qa--del, .ap-ibx__row:focus-within .ap-ibx__acts [data-archq], .ap-ibx__row:focus-within .ap-ibx__acts .ap-ibx__qa--del { display: grid; }
  .ap-ibx__row:hover .ap-ibx__l1 time { visibility: hidden; }
}
@media (hover: none) { .ap-ibx__acts [data-archq], .ap-ibx__acts .ap-ibx__qa--del { display: none; } }

.ap-ibx__empty { align-items: flex-start; text-align: left; padding: 40px 24px; gap: 4px; }
.ap-ibx__empty b { font-size: var(--fs-lg); }

/* Rechts zonder selectie: een rustig overzicht in plaats van een wijzend pijltje */
.ap-ibx__none { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 70%; max-width: 420px; margin: 0 auto; padding: 40px 32px; }
.ap-ibx__none .i { display: none; }
.ap-ibx__big { margin: 0; font: 800 var(--fs-3xl) var(--display); letter-spacing: -.02em; color: var(--ink); }
.ap-ibx__none .ap-muted { margin: 0 0 18px; font-size: var(--fs-lg); }
.ap-keys { display: grid; gap: 8px; margin: 0; }
.ap-keys div { display: flex; align-items: center; gap: 12px; }
.ap-keys dt { display: flex; gap: 4px; min-width: 64px; }
.ap-keys dd { margin: 0; font-size: var(--fs-base); color: var(--muted); }
.ap-keys kbd, .ap-ibx__bar kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm); background: #fff; font: 600 var(--fs-sm) var(--body, inherit); color: var(--ink); }

/* Actiebalk boven de details */
.ap-ibx__bar { gap: 8px; background: rgba(251,250,247,.92); border-bottom: 1px solid rgba(0,0,0,.06); }
.ap-ibx__state { font-size: var(--fs-base); color: var(--muted); }
.ap-ibx__bar .ap-btn--dark .i { width: 15px; height: 15px; }
@media (max-width: 960px) { .ap-ibx__none { display: none; } .ap-ibx__search { width: 120px; } }
@media (prefers-reduced-motion: reduce) { .ap-ibx__row { transition: none; } }
/* =========================================================
   Formulieren v2: soorten links, strakke rijen rechts
   ========================================================= */
.ap-fx { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100vh; background: #f6f5f1; }
.ap-fx__side { display: flex; flex-direction: column; gap: 4px; padding: 22px 20px; background: #fff; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; }
[data-side="hidden"] .ap-fx__side .ap-dl__head { padding-left: 42px; }
.ap-fx__search { width: auto !important; margin: 4px 0 14px; height: 38px; }
.ap-fx__search:focus-within { width: auto !important; }
.ap-fx__main { min-width: 0; overflow-y: auto; padding: 22px 26px 40px; }
.ap-fx__main[data-anim] > * { animation: softIn .26s var(--ease); }
.ap-frows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ap-frow { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 12px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.05); transition: box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s, height .22s var(--ease); }
.ap-frow:hover { box-shadow: 0 0 0 1px rgba(30,25,10,.08), 0 6px 18px rgba(30,25,10,.05); }
.ap-frow.is-drag { opacity: .4; }
.ap-frow.is-leaving { opacity: 0; transform: translateX(18px); }
.ap-frow__grip { display: flex; color: var(--line-3); cursor: grab; }
.ap-frow__grip:active { cursor: grabbing; }
.ap-frow__btns { display: flex; gap: 6px; }
.ap-frow__b { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); cursor: pointer; text-decoration: none; transition: background .15s; }
.ap-frow__b .i { width: 17px; height: 17px; }
.ap-frow__b:hover { background: var(--line); }
.ap-frow__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.ap-frow__name b { font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-frow__name em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; padding: 2px 7px; border-radius: var(--r-sm); background: var(--sunken); color: var(--muted); }
.ap-frow__name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ap-frow__stat { display: flex; align-items: center; gap: 6px; flex: none; min-width: 108px; font-size: var(--fs-md); color: var(--text); white-space: nowrap; }
.ap-frow__stat b { font-weight: 600; color: var(--ink); }
.ap-frow__stat .i { width: 16px; height: 16px; color: var(--muted); }
.ap-frow__stat--pct { min-width: 100px; }
.ap-frow__more { background: none; color: var(--muted); }
.ap-fx__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 30px 6px; color: var(--muted); }
.ap-fx__empty b { color: var(--ink); font-size: var(--fs-lg); }
.ap-fx__empty .ap-btn { margin-top: 8px; }
@media (max-width: 1100px) { .ap-frow__stat--pct { display: none; } }
@media (max-width: 960px) {
  .ap-fx { grid-template-columns: 1fr; height: auto; }
  .ap-fx__side { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.07); padding: 16px; }
  .ap-fx__main { padding: 16px; }
  .ap-frow { flex-wrap: wrap; gap: 10px; }
  .ap-frow__name { flex-basis: 100%; order: -1; }
  .ap-frow__grip { display: none; }
  .ap-frow__stat { min-width: 0; font-size: var(--fs-base); }
}

/* Sjabloonvenster */
.ap-modal__box.is-xl { width: min(1180px, calc(100vw - 32px)); max-width: none; padding: 34px 40px 110px; }
.ap-fc__head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 40px 18px 0; }
.ap-fc__head h2 { flex: 1; margin: 0; font: 400 var(--fs-3xl) var(--display); letter-spacing: -.01em; color: var(--ink); }
.ap-fc__head h2 b { font-weight: 800; }
.ap-fc__search { display: flex; align-items: center; gap: 8px; width: 260px; height: 42px; padding: 0 12px; border-radius: var(--r-md); background: var(--sunken); color: var(--muted); }
.ap-fc__search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-md); outline: none; color: var(--ink); }
.ap-fc__search .i { width: 17px; height: 17px; }
.ap-fc__body { max-height: min(62vh, 640px); overflow-y: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; }
.ap-fc__sec + .ap-fc__sec { margin-top: 26px; }
.ap-fc__sechead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ap-fc__sechead h3 { margin: 0; font: 700 var(--fs-xl) var(--display); color: var(--ink); }
.ap-fc__sechead > span:not(.ap-grow) { font-size: var(--fs-base); color: var(--muted); }
.ap-fc__arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background .15s, box-shadow .15s; }
.ap-fc__arrow:hover { box-shadow: var(--sh); }
.ap-fc__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; }
.ap-fc__track::-webkit-scrollbar { display: none; }
.ap-fcard { scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s var(--ease), transform .2s var(--ease); }
.ap-fcard:hover:not([disabled]):not(.is-soon) { border-color: var(--ink); box-shadow: var(--sh); transform: translateY(-2px); }
.ap-fcard[disabled] { opacity: .5; cursor: not-allowed; }
.ap-fcard__img { display: grid; place-items: center; height: 130px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--sunken); overflow: hidden; color: var(--muted); }
.ap-fcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.ap-fcard:hover .ap-fcard__img img { transform: scale(1.04); }
.ap-fcard__img .i { width: 30px; height: 30px; }
.ap-fcard__img--ai { background: var(--y-soft); color: var(--y-ink); }
.ap-fcard__img--soon { position: relative; background: #eef0ff; color: #5b4bd6; }
.ap-fcard__img--soon em { position: absolute; right: 12px; bottom: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: #fff; color: #5b4bd6; }
.ap-fcard__img--soon em .i { width: 17px; height: 17px; }
.ap-fcard b { padding: 0 4px; font-size: var(--fs-lg); color: var(--ink); }
.ap-fcard small { padding: 0 4px; font-size: var(--fs-base); color: var(--muted); }
.ap-fcard.is-soon { cursor: default; }
.ap-fc__none { padding: 20px 0; }
.ap-fc__blank { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 28px; width: min(620px, calc(100% - 48px)); padding: 16px 16px 16px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .2s, transform .2s var(--ease); }
.ap-fc__blank:hover { transform: translateX(-50%) translateY(-2px); box-shadow: var(--sh); }
.ap-fc__blank span { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ap-fc__blank b { font-size: var(--fs-lg); color: var(--ink); }
.ap-fc__blank small { font-size: var(--fs-md); color: var(--muted); }
.ap-fc__blank i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--y-soft); color: var(--y-ink); }
.ap-fc__blank[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) {
  .ap-modal__box.is-xl { padding: 24px 18px 120px; }
  .ap-fc__head h2 { font-size: var(--fs-2xl); flex-basis: 100%; }
  .ap-fc__search { width: 100%; }
  .ap-fc__track { grid-auto-columns: 72%; }
  .ap-fc__arrow { display: none; }
}
/* =========================================================
   Studio: je calculator in een eigen werkruimte
   ========================================================= */
.ap-ed--studio { max-width: none; display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 28px; padding: 18px 28px 80px; }
.ap-ed--studio > .ap-ed__bar { grid-column: 1 / -1; margin-bottom: 22px; }
.ap-ed--studio .ap-ed__title small { color: var(--muted); font-weight: 600; }
.ap-studio__nav { position: sticky; top: 18px; align-self: start; flex-direction: column; gap: 2px; margin: 0; border: 0; overflow: visible; }
.ap-studio__nav a { display: flex; gap: 10px; padding: 9px 12px; border: 0; border-radius: var(--r-md); margin: 0; font-weight: 500; font-size: var(--fs-md); color: var(--text); transition: background .15s, color .15s; }
.ap-studio__nav a .i { width: 17px; height: 17px; color: var(--muted); }
.ap-studio__nav a:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.ap-studio__nav a.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 3px rgba(30,25,10,.05); }
.ap-studio__nav a.is-on .i { color: var(--ink); }
.ap-studio__nav a:nth-child(2) { margin-top: 8px; }
.ap-ed--studio .ap-ed__wrap { min-width: 0; animation: softIn .24s var(--ease); }
@media (max-width: 960px) {
  .ap-ed--studio { grid-template-columns: 1fr; padding: 14px 16px 80px; }
  .ap-studio__nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
  .ap-studio__nav a { flex: none; }
  .ap-studio__nav a:nth-child(2) { margin-top: 0; }
}

/* Overzicht */
.ap-sov { display: flex; flex-direction: column; gap: 18px; }
.ap-sov__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ap-sov__stats div { padding: 16px 18px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
.ap-sov__stats small { display: block; font-size: var(--fs-base); color: var(--muted); }
.ap-sov__stats b { font: 800 var(--fs-3xl) var(--display); color: var(--ink); letter-spacing: -.01em; }
.ap-sov__cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.ap-sov__card { padding: 18px 18px 14px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
.ap-sov__card h3 { margin: 0 0 10px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ap-sov__steps { list-style: none; margin: 0; padding: 0; }
.ap-sov__steps a, .ap-sov__steps button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 8px; border: 0; border-radius: var(--r-md); background: none; font: inherit; text-align: left; text-decoration: none; color: inherit; cursor: pointer; transition: background .15s; }
.ap-sov__steps a:hover, .ap-sov__steps button:hover { background: var(--sunken); }
.ap-sov__steps li + li { border-top: 1px solid rgba(0,0,0,.05); }
.ap-sov__steps i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--hover); color: var(--muted); }
.ap-sov__steps i.is-ok { background: var(--ok-soft); color: var(--ok); }
.ap-sov__steps i .i { width: 15px; height: 15px; }
.ap-sov__steps span { flex: 1; display: flex; flex-direction: column; }
.ap-sov__steps b { font-size: var(--fs-md); color: var(--ink); }
.ap-sov__steps small { font-size: var(--fs-base); color: var(--muted); }
.ap-sov__steps > li > * > .i:last-child { width: 16px; height: 16px; color: var(--muted); }
.ap-sov__warn { display: flex; gap: 8px; margin: 10px 0 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--y-soft); font-size: var(--fs-base); color: #6b5200; }
.ap-sov__warn .i { flex: none; width: 16px; height: 16px; }
.ap-sov__leads { list-style: none; margin: 0; padding: 0; }
.ap-sov__leads a { display: flex; align-items: baseline; gap: 10px; padding: 10px 6px; border-radius: var(--r-sm); text-decoration: none; color: inherit; }
.ap-sov__leads a:hover { background: var(--sunken); }
.ap-sov__leads li + li { border-top: 1px solid rgba(0,0,0,.05); }
.ap-sov__leads b { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sov__leads span { font-size: var(--fs-base); color: var(--text); white-space: nowrap; }
.ap-sov__leads time { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
@media (max-width: 1100px) { .ap-sov__cols { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ap-sov__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Design met live voorbeeld */
.ap-sdsg { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ap-sdsg__ctrl { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 18px; }
.ap-sdsg__ctrl h2 { margin: 0; }
.ap-sdsg__ctrl .ap-seg--inline { align-self: flex-start; padding: 3px; border-radius: var(--r-md); background: rgba(0,0,0,.05); }
.ap-sdsg__set { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; transition: opacity .2s; }
.ap-sdsg__set[disabled] { opacity: .45; pointer-events: none; }
.ap-sdsg__logo, .ap-sdsg__color { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #fff; border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(30,25,10,.07); cursor: pointer; transition: box-shadow .15s; }
.ap-sdsg__logo:hover, .ap-sdsg__color:hover { box-shadow: 0 0 0 1px rgba(30,25,10,.16); }
.ap-sdsg__logo > img, .ap-sdsg__logo > span:first-child { display: grid; place-items: center; width: 52px; height: 40px; border-radius: var(--r-sm); background: var(--sunken); object-fit: contain; color: var(--muted); }
.ap-sdsg__logo > span:nth-child(2), .ap-sdsg__color > span { flex: 1; display: flex; flex-direction: column; }
.ap-sdsg__logo b, .ap-sdsg__color b { font-size: var(--fs-md); color: var(--ink); }
.ap-sdsg__logo small, .ap-sdsg__color small { font-size: var(--fs-sm); color: var(--muted); }
.ap-sdsg__color input[type="color"] { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ap-sdsg__color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ap-sdsg__color input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.1); border-radius: 50%; }
.ap-sdsg__color code { font-size: var(--fs-sm); color: var(--muted); }
.ap-sdsg__prev .ap-frame { margin: 0; }
.ap-sdsg__prev iframe { height: min(78vh, 760px); }
@media (max-width: 1000px) { .ap-sdsg { grid-template-columns: 1fr; } .ap-sdsg__ctrl { position: static; } }

/* Keuzevenster: drie manieren om te starten */
.ap-fc__start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ap-fstart { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s var(--ease), transform .2s var(--ease); }
.ap-fstart:hover:not([disabled]) { border-color: var(--ink); box-shadow: var(--sh); transform: translateY(-2px); }
.ap-fstart[disabled] { opacity: .5; cursor: not-allowed; }
.ap-fstart__ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); }
.ap-fstart--ai .ap-fstart__ic { background: var(--y-soft); color: var(--y-ink); }
.ap-fstart__ic .i { width: 23px; height: 23px; }
.ap-fstart b { font-size: var(--fs-lg); color: var(--ink); }
.ap-fstart small { font-size: var(--fs-md); line-height: 1.45; color: var(--muted); }
.ap-fstart em { position: absolute; top: 18px; right: 18px; font-style: normal; font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--ink); color: #fff; }
.ap-fc__sub { margin: 20px 0 10px; font-size: var(--fs-md); font-weight: 600; color: var(--muted); }
.ap-fcard small .i { width: 13px; height: 13px; vertical-align: -2px; }
.ap-modal__box.is-xl { padding-bottom: 34px; }
.ap-fc__sechead .ap-soon { font-size: var(--fs-xs) !important; }
@media (max-width: 700px) { .ap-fc__start { grid-template-columns: 1fr; } }
/* =========================================================
   Offertes en facturen: papier in het midden, balk rechts
   ========================================================= */.px-sum { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 14px 4px; font-size: var(--fs-base); color: var(--muted); }
.px-sum b { color: var(--ink); font-weight: 700; }
.px-row { cursor: pointer; }
.px-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.px-kind { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); }
.px-kind .i { width: 18px; height: 18px; }
.px-kind.is-invoice { background: #eaf3ee; color: var(--ok-ink); }
.px-kind.is-credit { background: var(--err-soft); color: var(--err); }
.px-row .ap-frow__name { flex-direction: column; align-items: flex-start; gap: 1px; }
.px-row .ap-frow__name small { font-size: var(--fs-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.px-amt2 { justify-content: flex-end; min-width: 110px; }
.px-date { min-width: 70px; justify-content: flex-end; color: var(--muted); }

.px { display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: 100vh; }
.px-desk { min-width: 0; overflow-y: auto; padding: 18px 32px 80px; background: #e9e7e1; }
[data-side="hidden"] .px-desk { padding-left: 64px; }
.px-deskbar { display: flex; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto 12px; }
.px-note { display: flex; align-items: center; gap: 8px; max-width: 820px; margin: 0 auto 12px; padding: 10px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.7); font-size: var(--fs-base); color: var(--text); }
.px-note .i { width: 16px; height: 16px; flex: none; }

/* Het blad */
.px-paper { --acc: var(--ink); max-width: 820px; margin: 0 auto; padding: 56px 60px 48px; background: #fff; border-radius: var(--r-xs); box-shadow: var(--sh); color: #2b2a27; font-size: var(--fs-base); line-height: 1.5; animation: softIn .25s var(--ease); }
.px-font-modern { font-family: Inter, system-ui, sans-serif; }
.px-font-klassiek { font-family: Georgia, "Times New Roman", serif; }
.px-font-strak { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .005em; }
.px-paper .px-in, .px-paper select { font: inherit; color: inherit; }
.px-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 22px; border-bottom: 2px solid var(--acc); }
.px-logo-right .px-head { flex-direction: row-reverse; }
.px-logo-right .px-meta { text-align: left; }
.px-logo-center .px-head { flex-direction: column; align-items: center; text-align: center; }
.px-logo-center .px-meta { text-align: center; }
.px-logo-center .px-meta dl div { justify-content: center; }
.px-from { display: flex; flex-direction: column; gap: 8px; }
.px-logoimg { max-width: 190px; max-height: 70px; object-fit: contain; object-position: left; }
.px-logo-center .px-logoimg { object-position: center; }
.px-company { font-size: var(--fs-xl); font-weight: 700; color: var(--acc); }
.px-from small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.px-meta { text-align: right; }
.px-meta h1 { margin: 0 0 8px; font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.01em; color: var(--acc); }
.px-font-klassiek .px-meta h1 { font-weight: 400; font-size: var(--fs-3xl); }
.px-meta dl { margin: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.px-meta dl div { display: flex; justify-content: flex-end; gap: 10px; }
.px-logo-right .px-meta dl div { justify-content: flex-start; }
.px-meta dt { color: var(--faint); }
.px-meta dd { margin: 0; font-weight: 600; color: #2b2a27; }
.px-to { display: flex; flex-direction: column; gap: 0; margin: 26px 0 22px; max-width: 360px; }
.px-to small { font-size: var(--fs-xs); font-weight: 600; color: var(--faint); margin-bottom: 2px; }
.px-in { width: 100%; padding: 3px 6px; margin: 0 -6px; border: 0; border-radius: var(--r-sm); background: transparent; outline: none; transition: background .15s, box-shadow .15s; }
.px-in:hover:not(:disabled) { background: #f7f5ef; }
.px-in:focus { background: var(--y-faint); box-shadow: inset 0 0 0 1px #f0d98a; }
.px-in:disabled { color: inherit; opacity: 1; -webkit-text-fill-color: currentColor; }
.px-in::placeholder { color: #b5b0a5; }
.px-ta { display: block; resize: none; line-height: 1.5; }
.px-toname { font-size: var(--fs-lg); font-weight: 600; }
.px-title { font-size: var(--fs-xl); font-weight: 700; color: var(--acc); margin-bottom: 4px; }
.px-intro { margin-bottom: 18px; color: #3d3a35; }
.px-date { width: auto; text-align: right; padding: 0 4px; margin: 0; font-weight: 600; }
.px-lines { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.px-lines th { padding: 8px 6px; border-bottom: 1.5px solid var(--acc); text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.px-lines td { padding: 6px 6px; vertical-align: top; border-bottom: 1px solid var(--hover); }
.px-lines .n, .px-lines .u { text-align: right; white-space: nowrap; }
.px-lines th.u, .px-lines td.u { text-align: left; width: 86px; }
.px-lines td.n { width: 90px; }
.px-lines .px-num { text-align: right; }
.px-lines select { width: auto; max-width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; }
.px-amt { font-weight: 600; padding-top: 9px !important; }
.px-desc .px-ta:first-line { font-weight: 600; }
.px-sec td { padding-top: 16px; border-bottom: 0; }
.px-sec .px-in { font-weight: 700; color: var(--acc); }
.px-txt td { color: var(--muted); }
.px-item.is-opt .px-desc { box-shadow: inset 3px 0 0 #f0d98a; }
.px-opttag { display: inline-block; margin: 0 0 2px; font-style: normal; font-size: var(--fs-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--r-xs); background: #fff3cf; color: #7a5a00; }
.px-tools { width: 1px; white-space: nowrap; padding: 4px 0 0 4px !important; border-bottom: 0 !important; opacity: 0; transition: opacity .15s; }
.px-lines tr:hover .px-tools, .px-lines tr:focus-within .px-tools { opacity: 1; }
.px-grip { display: inline-flex; vertical-align: middle; color: var(--line-3); cursor: grab; padding: 4px 2px; }
.px-t { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border: 0; border-radius: var(--r-sm); background: none; font: 600 var(--fs-xs) Inter, sans-serif; color: var(--faint); cursor: pointer; vertical-align: middle; }
.px-t .i { width: 15px; height: 15px; }
.px-t:hover { background: var(--hover); color: var(--ink); }
.px-t.is-on { background: #fff3cf; color: #7a5a00; }
.px-t--del:hover { background: var(--err-soft); color: var(--err); }
.px-lines tr.is-drag { opacity: .4; }
.px-add { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0 -8px; }
.px-add button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; font: 500 var(--fs-base) Inter, sans-serif; color: var(--faint); cursor: pointer; }
.px-add button:hover { background: var(--sunken); color: var(--ink); }
.px-add .i { width: 14px; height: 14px; }
.px-tot { margin: 18px 0 20px auto; width: 300px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-base); }
.px-tot div { display: flex; justify-content: space-between; }
.px-tot span { color: var(--muted); }
.px-grand { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--acc); font-size: var(--fs-lg); }
.px-grand span, .px-grand b { color: var(--acc) !important; font-weight: 700; }
.px-dep { font-size: var(--fs-sm); }
.px-notes { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.px-sign { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--hover); }
.px-sign > div { display: flex; flex-direction: column; gap: 6px; }
.px-sign small { font-size: var(--fs-xs); font-weight: 600; color: var(--faint); }
.px-script { font-family: Caveat, "Segoe Script", cursive; font-size: var(--fs-3xl); font-weight: 600; color: #1a2b6d; line-height: 1.1; }
.px-sigimg { max-width: 100%; height: 110px; object-fit: contain; object-position: left; }
.px-sign span { font-size: var(--fs-sm); color: var(--muted); }
.px-signline { display: block; height: 70px; border-bottom: 1px solid #bdb8ad; }
.px-pad { width: 100%; height: 130px; border: 1.5px dashed #d8d3c7; border-radius: var(--r-md); background: var(--soft) linear-gradient(transparent 96px, #e2ded4 96px, #e2ded4 97px, transparent 97px); touch-action: none; cursor: crosshair; transition: border-color .15s; }
.px-pad:hover { border-color: #bdb8ad; }
.px-pad.is-drawn { border-style: solid; border-color: #d8d3c7; }
.px-signrow { display: flex; align-items: center; gap: 6px; }
.px-signrow .px-in { flex: 1; margin: 0; background: #f7f5ef; padding: 6px 8px; }
.px-signok { flex: none; padding: 7px 12px; border: 0; border-radius: var(--r-sm); background: var(--ink); color: #fff; font: 600 var(--fs-sm) Inter, sans-serif; cursor: pointer; }
.px-signok:disabled { opacity: .5; }
.px-signhint { font-size: var(--fs-xs) !important; color: var(--faint) !important; }
.px-foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--hover); font-size: var(--fs-xs); color: var(--faint); text-align: center; }

/* Balk rechts */
.px-side { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; padding: 22px 20px 30px; background: #fff; border-left: 1px solid rgba(0,0,0,.07); }
.px-side__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-side__head small { flex-basis: 100%; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.px-side__head b { font: 800 var(--fs-xl) var(--display); color: var(--ink); margin-right: auto; }
.px-side__total { margin: 12px 0 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--sunken); }
.px-side__total small { display: block; font-size: var(--fs-sm); color: var(--muted); }
.px-side__total b { font: 800 var(--fs-3xl) var(--display); letter-spacing: -.01em; color: var(--ink); }
.px-side__acts { display: flex; flex-direction: column; gap: 8px; }
.px-actrow { display: flex; gap: 6px; }
.px-actrow > * { flex: 1; justify-content: center; }
.px-more { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: var(--fs-base); }
.px-side__sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.06); }
.px-side__sec h3 { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.px-tplrow { display: flex; gap: 6px; align-items: center; }
.px-tplrow select { flex: 1; }
.px-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: var(--fs-base); color: var(--text); }
.px-suffix { display: flex; align-items: center; gap: 6px; }
.px-suffix input { width: 72px; text-align: right; }
.px-suffix i { font-style: normal; color: var(--muted); }
.px-side .dx-time { margin-top: 0; }

/* Sjablonen */
.px-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: var(--fs-base); color: var(--muted); text-decoration: none; }
.px-back:hover { color: var(--ink); }
.px-back .i { width: 15px; height: 15px; }
.px-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; margin: 0 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.px-sidetip { margin-top: 14px; }
.px-tplmain { padding: 0 !important; overflow: hidden; }
.px-tpl { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: 100%; }
.px-tpl__ctrl { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 22px 22px 40px; background: var(--soft); border-right: 1px solid rgba(0,0,0,.06); }
.px-tpl__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.px-tpl__name { flex: 1; min-width: 0; padding: 4px 6px; margin-left: -6px; border: 0; border-radius: var(--r-sm); background: none; font: 800 var(--fs-2xl) var(--display); color: var(--ink); outline: none; }
.px-tpl__name:hover:not(:disabled), .px-tpl__name:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.px-tpl__name:disabled { -webkit-text-fill-color: var(--ink); opacity: 1; }
.px-badge { font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--ink); color: #fff; }
.px-stdnote { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 14px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--y-soft); font-size: var(--fs-base); color: #5f4a00; }
.px-stdnote > .i { width: 16px; height: 16px; }
.px-tpl__set { margin: 0; padding: 0; border: 0; transition: opacity .2s; }
.px-tpl__set[disabled] { opacity: .5; }
.px-tpl__grp { padding: 14px 0; border-top: 1px solid rgba(0,0,0,.06); }
.px-tpl__grp:first-child { border-top: 0; }
.px-tpl__grp h3 { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.px-tpl__grp .ap-switch--row { margin-bottom: 8px; }
.px-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.px-cbtn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--c); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .15s var(--ease), box-shadow .15s; }
.px-cbtn .i { width: 15px; height: 15px; }
.px-cbtn:hover { transform: scale(1.08); }
.px-cbtn.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.px-cbtn--own { background: conic-gradient(#e74c3c, #f1c40f, #2ecc71, #3498db, #9b59b6, #e74c3c); overflow: hidden; }
.px-cbtn--own input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.px-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.px-fbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; cursor: pointer; transition: border-color .15s; }
.px-fbtn b { font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); }
.px-fbtn small { font: 500 var(--fs-sm) Inter, sans-serif; color: var(--muted); }
.px-fbtn.is-on { border-color: var(--ink); }
.px-seg { padding: 3px; border-radius: var(--r-md); background: rgba(0,0,0,.05); }
.px-tpl__prev { min-width: 0; overflow-y: auto; padding: 18px 32px 60px; background: #e9e7e1; }
.px-tpl__prevbar { display: flex; align-items: center; gap: 14px; max-width: 820px; margin: 0 auto 14px; }
.px-tpl__paper .px-paper { animation: none; transition: none; }
.px-tpl__paper .px-in:disabled { background: none; }

@media (max-width: 1100px) { .px { grid-template-columns: minmax(0, 1fr) 280px; } .px-paper { padding: 40px 36px; } .px-tpl { grid-template-columns: 300px minmax(0, 1fr); } }
@media (max-width: 960px) {
  .px { grid-template-columns: 1fr; height: auto; }
  .px-desk { padding: 12px 10px 30px; }
  .px-side { border-left: 0; border-top: 1px solid rgba(0,0,0,.07); }
  .px-paper { padding: 26px 18px; font-size: var(--fs-base); }
  .px-head { flex-direction: column !important; }
  .px-meta { text-align: left; } .px-meta dl div { justify-content: flex-start; }
  .px-lines td.u, .px-lines th.u { display: none; }
  .px-tools { opacity: 1; }
  .px-tot { width: 100%; }
  .px-sign { grid-template-columns: 1fr; }
  .px-tpl { grid-template-columns: 1fr; height: auto; }
  .px-row .px-date { display: none; }
}
@media print { .ap-side, .ap-mtop, .ap-tabbar, .px-side, .px-deskbar, .px-note, .px-add, .px-tools { display: none !important; } .px-desk { background: none; padding: 0; } .px-paper { box-shadow: none; } }
/* Regelknoppen zweven boven de regel (geen eigen kolom): de omschrijving krijgt de ruimte */
.px-lines tr { position: relative; }
.px-lines th:last-child:empty { display: none; }
.px-tools { position: absolute; right: 0; top: -30px; z-index: 3; display: flex; align-items: center; gap: 2px; width: auto; padding: 3px !important; border-radius: var(--r-md); background: #fff; box-shadow: 0 6px 18px rgba(30,25,10,.14), 0 0 0 1px rgba(0,0,0,.05); pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s var(--ease); }
.px-lines tr:hover .px-tools, .px-lines tr:focus-within .px-tools { pointer-events: auto; transform: none; }
.px-lines td.n { width: 76px; }
.px-lines th.u, .px-lines td.u { width: 74px; }
.px-lines td.px-amt { width: 96px; }
.px-desc { min-width: 220px; }
@media (max-width: 960px) { .px-tools { position: static; box-shadow: none; transform: none; pointer-events: auto; opacity: 1; } }
.px-month { list-style: none; margin: 14px 4px 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.px-month:first-child { margin-top: 0; }

/* Zijpaneel in- en uitklappen */
.ap-fx { position: relative; transition: grid-template-columns .28s var(--ease); }
.ap-fx__side { position: relative; }
.ap-fx__close { position: absolute; top: 24px; right: 62px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.ap-fx__close:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.ap-fx__close .i, .ap-fx__open .i { width: 17px; height: 17px; }
.ap-fx__open { display: none; }
.ap-fx.is-closed { grid-template-columns: 0 minmax(0, 1fr) !important; }
.ap-fx.is-closed .ap-fx__side { visibility: hidden; padding: 0; border: 0; overflow: hidden; }
.ap-fx.is-closed .ap-fx__open { display: grid; place-items: center; position: absolute; z-index: 5; left: 12px; top: 18px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--sh); }
.ap-fx.is-closed .ap-fx__open:hover { background: var(--y-soft); }
.ap-fx.is-closed .ap-fx__main { padding-left: 62px; }
.ap-fx.is-closed .px-tplmain { padding-left: 0 !important; }
.ap-fx.is-closed .px-tpl__ctrl { padding-left: 62px; }
[data-side="hidden"] .ap-fx.is-closed .ap-fx__open { left: 58px; }
[data-side="hidden"] .ap-fx.is-closed .ap-fx__main { padding-left: 106px; }
@media (max-width: 960px) { .ap-fx__close, .ap-fx__open, .ap-fx.is-closed .ap-fx__open { display: none; } .ap-fx.is-closed .ap-fx__side { visibility: visible; padding: 16px; } .ap-fx.is-closed .ap-fx__main { padding-left: 16px; } }
@media (prefers-reduced-motion: reduce) { .ap-fx { transition: none; } }
/* Balk rechts: zelf kiezen wat erin staat, of verbergen */
.px-side__head .px-sidecfg { margin-left: 2px; color: var(--muted); }
.px-showside { display: none; }
.px.is-noside { grid-template-columns: minmax(0, 1fr) 0; }
.px.is-noside .px-side { visibility: hidden; padding: 0; border: 0; overflow: hidden; }
.px.is-noside .px-showside { display: inline-flex; }
.px { transition: grid-template-columns .28s var(--ease); }
.px-cfg { width: 250px; }
.px-cfg__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-md); color: var(--ink); cursor: pointer; }
.px-cfg__row:hover { background: var(--paper); }
.px-cfg__row input { width: 16px; height: 16px; accent-color: var(--ink); }
@media (max-width: 960px) { .px.is-noside .px-side { visibility: visible; padding: 22px 20px; } .px-showside { display: none !important; } }
/* =========================================================
   Gesprekken: lijst links, gesprek of kanalen rechts
   ========================================================= */
.ix2-tools { display: flex; gap: 8px; padding: 0 16px 10px 20px; }
.ix2-search { flex: 1; width: auto !important; height: 38px; margin: 0; }
.ix2-search:focus-within { width: auto !important; }
.ix2-filter { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 0; border-radius: var(--r-sm); background: rgba(0,0,0,.035); color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.ix2-filter:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.ix2-filter.is-on { background: var(--ink); color: #fff; }
.ix2-filter .i { width: 16px; height: 16px; }
.ix2 .ap-ibx__tabs button em { font-style: normal; margin-left: 4px; font-size: var(--fs-sm); color: var(--muted); }
.ix2-ch { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: var(--r-xs); }
.ix2-ch .i { width: 12px; height: 12px; }
.ix2-ch.is-whatsapp { background: #e3f6ea; color: #1a8f4c; }
.ix2-ch.is-email { background: #e8effd; color: var(--info); }
.ix2 .ap-ibx__l2 { max-width: 100%; }

.ix2-detail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* Kanalen, als er geen gesprek gekozen is */
.ix2-channels { width: min(620px, calc(100% - 48px)); margin: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgba(30,25,10,.06), 0 12px 32px rgba(30,25,10,.05); animation: softIn .28s var(--ease); }
.ix2-chrow { display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: var(--r-md); background: var(--soft); }
.ix2-chlogo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); color: #fff; }
.ix2-chlogo .i { width: 20px; height: 20px; }
.ix2-chlogo.is-whatsapp { background: #25a35a; border-radius: 50%; }
.ix2-chlogo.is-email { background: linear-gradient(160deg, #6aa8ff, #2f6fdb); }
.ix2-chlogo.is-ai { background: var(--y-soft); color: var(--y-ink); }/* Het gesprek */
.ix2-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; animation: softIn .22s var(--ease); }
.ix2-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.07); }
[data-side="hidden"] .ix2-head { padding-left: 62px; }
.ix2-back { display: none; }
.ix2-who { display: flex; flex-direction: column; min-width: 0; }
.ix2-who b { font-size: var(--fs-lg); color: var(--ink); }
.ix2-who small { display: flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix2-who small .i { width: 13px; height: 13px; flex: none; }
.ix2-lead { padding: 8px 24px; font-size: var(--fs-base); color: var(--text); background: var(--soft); border-bottom: 1px solid rgba(0,0,0,.05); }
.ix2-msgs { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.ix2-compose { padding: 12px 24px 16px; background: #fff; border-top: 1px solid rgba(0,0,0,.07); }
.ix2-compose textarea { resize: none; border-radius: var(--r-md); }
.ix2-hint { font-size: var(--fs-sm); margin-right: 6px; }
@media (max-width: 960px) {
  .ix2-back { display: grid; }
  .ix2-head { padding: 10px 14px; }
  .ix2-msgs { padding: 14px; }
  .ix2-compose { padding: 10px 14px; }
  .ix2-hint { display: none; }
  .ix2 .ix2-detail { display: none; }
  .ix2:not(.has-sel) .ap-ibx__list { display: flex; }
  .ix2.has-sel .ix2-detail { display: flex; }
}
/* Kanalen: elke rij op één lijn, alles netjes onder elkaar */
.ix2-channels { gap: 6px; }
.ix2-chrow { display: grid; grid-template-columns: 40px 120px minmax(0, 1fr) 112px; align-items: center; gap: 14px; height: 64px; padding: 0 12px 0 14px; }
.ix2-chlogo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0; background: none; }
.ix2-chlogo svg { width: 34px; height: 34px; display: block; }
.ix2-chname { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); white-space: nowrap; }
.ix2-chstatus { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix2-chstatus i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.ix2-chstatus.is-ok { color: var(--ok-ink); }
.ix2-chbtn { display: grid; place-items: center; height: 36px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font-size: var(--fs-base); font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ix2-chbtn:hover { border-color: var(--ink); box-shadow: var(--sh); }
.ix2-ch { width: 16px; height: 16px; background: none; }
.ix2-ch svg { width: 16px; height: 16px; display: block; }
@media (max-width: 600px) { .ix2-chrow { grid-template-columns: 34px minmax(0, 1fr) 96px; height: auto; padding: 12px; } .ix2-chstatus { grid-column: 2; grid-row: 2; } .ix2-chbtn { grid-row: 1 / span 2; grid-column: 3; } }
/* =========================================================
   Dashboard: waar je staat en wat je vandaag moet doen
   ========================================================= */
.db { display: flex; flex-direction: column; gap: 20px; }
.db-hello h1 { margin: 2px 0 0; }
.db-start { padding: 16px 18px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
.db-start__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.db-start__head b { font-size: var(--fs-lg); color: var(--ink); }
.db-start__head span { font-size: var(--fs-base); color: var(--muted); margin-right: auto; }
.db-start ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.db-start li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.db-start li > b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); cursor: pointer; color: #fff; }
.db-start li > b .i { width: 12px; height: 12px; }
.db-start li.is-done > b { background: var(--ok); border-color: var(--ok); }
.db-start li.is-done span { color: var(--muted); text-decoration: line-through; }
.db-start a, .db-start .ap-linkbtn { color: var(--ink); font-weight: 600; font-size: var(--fs-md); }

/* De weg van formulier tot geld */
.db-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.db-step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); text-decoration: none; color: inherit; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.db-step:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(30,25,10,.08), 0 10px 26px rgba(30,25,10,.07); }
.db-step:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; z-index: 1; width: 8px; height: 8px; border-top: 1.5px solid var(--line-3); border-right: 1.5px solid var(--line-3); transform: translateY(-50%) rotate(45deg); }
.db-step__top { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.db-step__top .i { width: 16px; height: 16px; }
.db-step__top small { font-size: var(--fs-base); font-weight: 600; }
.db-step > b { font: 800 var(--fs-3xl) var(--display); letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.db-step > b em { font-style: normal; font-size: var(--fs-lg); font-weight: 600; color: var(--muted); margin-left: 3px; }
.db-step__sub { font-size: var(--fs-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-step.is-y { box-shadow: inset 0 3px 0 var(--y), 0 0 0 1px rgba(30,25,10,.06); }
.db-step.is-ok > b { color: var(--ok-ink); }

.db-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.db-right { display: flex; flex-direction: column; gap: 16px; }
.db-card { padding: 18px 20px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
.db-card__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.db-card__head h2 { margin: 0; margin-right: auto; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.db-big { font: 800 var(--fs-2xl) var(--display); color: var(--ink); }
.db-muted { font-size: var(--fs-base); color: var(--muted); margin: 0 0 8px; }
.db-count { font-size: var(--fs-base); font-weight: 700; min-width: 24px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; text-align: center; }
.db-today .bx-quick { margin: 8px 0 10px; }
.db-tasks { margin: 0; }
.db-items { list-style: none; margin: 4px 0 0; padding: 0; }
.db-it { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid rgba(0,0,0,.05); }
.db-it__ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); }
.db-it__ic .i { width: 16px; height: 16px; }
.db-it__ic.is-lead { background: var(--y-soft); color: var(--y-ink); }
.db-it__ic.is-visit { background: #e8effd; color: var(--info); }
.db-it__ic.is-chat { background: #e3f6ea; color: #1a8f4c; }
.db-it__ic.is-late { background: var(--err-soft); color: var(--err); }
.db-it__t { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.db-it__t b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-it__t small { font-size: var(--fs-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-it__t:hover b { text-decoration: underline; text-underline-offset: 3px; }
.db-it__acts { display: flex; gap: 4px; }
.db-empty { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: var(--fs-md); color: var(--muted); }
.db-empty .i { width: 18px; height: 18px; color: var(--ok); }
.db-svc { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.db-svc li { position: relative; display: flex; justify-content: space-between; padding: 7px 10px; border-radius: var(--r-sm); font-size: var(--fs-md); overflow: hidden; }
.db-svc li i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff3cc; border-radius: var(--r-sm); z-index: 0; }
.db-svc li span, .db-svc li b { position: relative; z-index: 1; }
@media (max-width: 1150px) { .db-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .db-step::after { display: none; } }
@media (max-width: 960px) { .db-cols { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .db-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-step > b { font-size: var(--fs-2xl); } }
/* =========================================================
   Relaties: namen links (per letter), relatie rechts
   ========================================================= */
.ap-ibx__ini.is-co { border-radius: var(--r-sm); background: #eef0f4; color: #4a5160; }
.ap-ibx__ini .i { width: 16px; height: 16px; }
.bx-rel2__detail { overflow-y: auto; }
.bx-rel2__wrap { display: flex; flex-direction: column; min-height: 100%; animation: softIn .22s var(--ease); }
.bx-rel2__bar { position: sticky; top: 0; z-index: 3; }
.bx-rel2__body { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 860px; margin: 0 auto; padding: 22px 28px 40px; }
.bx-rel2__info { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-rel2__info a, .bx-rel2__info span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-md); background: #fff; box-shadow: 0 0 0 1px rgba(30,25,10,.07); font-size: var(--fs-base); color: var(--ink); text-decoration: none; }
.bx-rel2__info a:hover { box-shadow: 0 0 0 1px rgba(30,25,10,.16); }
.bx-rel2__info .i { width: 15px; height: 15px; color: var(--muted); }
.bx-rel2__info .bx-rel2__label { background: var(--y-soft); box-shadow: none; font-weight: 600; font-size: var(--fs-sm); }
.bx-rel2__notes { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: #fff; box-shadow: 0 0 0 1px rgba(30,25,10,.06); font-size: var(--fs-md); color: var(--text); white-space: pre-line; }
.bx-rel2__blk .db-card__head h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); }
.bx-rel2__blk .db-card__head h2 .i { width: 16px; height: 16px; color: var(--muted); }
.bx-rel2__list { list-style: none; margin: 4px 0 0; padding: 0; }
.bx-rel2__list li + li { border-top: 1px solid rgba(0,0,0,.05); }
.bx-rel2__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; padding: 10px 6px; border-radius: var(--r-sm); text-decoration: none; color: inherit; }
.bx-rel2__list a:hover { background: var(--soft); }
.bx-rel2__list b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-rel2__list small { grid-row: 2; font-size: var(--fs-sm); color: var(--muted); }
.bx-rel2__list span { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.bx-rel2__none { padding: 8px 6px; font-size: var(--fs-base); color: var(--muted); }
.bx-rel2__del { align-self: flex-start; margin-top: 6px; }
.bx-rel2 [data-ctasks] .bx-tbox { padding: 18px 20px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
@media (max-width: 960px) { .bx-rel2__body { padding: 14px; } }
/* =========================================================
   Statistieken
   ========================================================= */
.st-periods { display: flex; margin: 4px 0 16px; }
.st-periods button { flex: 1; padding: 7px 6px; font-size: var(--fs-base); }
.st-secs button { font-size: var(--fs-md); }
.st-main { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.st-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 2px; }
.st-head h2 { margin: 0; }
.st-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
.st-kpi small { font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.st-kpi b { font: 800 var(--fs-3xl) var(--display); letter-spacing: -.02em; color: var(--ink); }
.st-kpi span { font-size: var(--fs-base); color: var(--muted); }
.st-kpi.is-ok b { color: var(--ok-ink); }
.st-kpi.is-y { box-shadow: inset 0 3px 0 var(--y), 0 0 0 1px rgba(30,25,10,.06); }
.st-kpi.is-bad b { color: var(--err); }
.st-card .db-card__head h2 { display: flex; align-items: center; gap: 8px; }
.st-card .db-card__head h2 .i { width: 16px; height: 16px; }
.st-flow { list-style: none; margin: 8px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-flow li { display: grid; grid-template-columns: 180px minmax(0, 1fr) 56px 56px; align-items: center; gap: 12px; font-size: var(--fs-md); }
.st-flow__t { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.st-flow__t .i { width: 16px; height: 16px; color: var(--muted); }
.st-flow__bar { height: 12px; border-radius: var(--r-pill); background: var(--hover); overflow: hidden; }
.st-flow__bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--y); transition: width .5s var(--ease); }
.st-flow li:last-child .st-flow__bar i { background: #2f9e6b; }
.st-flow b { text-align: right; font-weight: 700; color: var(--ink); }
.st-flow em { font-style: normal; text-align: right; font-size: var(--fs-base); color: var(--muted); }
.st-tips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-tips li { display: flex; gap: 10px; font-size: var(--fs-md); color: var(--text); }
.st-tips i { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #9aa3ad; }
.st-tips .is-good i { background: var(--ok); } .st-tips .is-warn i { background: #e0a100; }
.st-lock { display: flex; align-items: center; gap: 14px; }
.st-lock > div { flex: 1; }
.st-lock b { color: var(--ink); }
.st-lock .db-muted { margin: 2px 0 0; }
.st-pick { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); color: var(--muted); }
.st-pick select { max-width: 320px; }
.st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-big { margin: 4px 0 2px; font: 800 var(--fs-3xl) var(--display); color: var(--ink); }
.st-big.is-ok { color: var(--ok-ink); }
.st-sub { margin: 10px 0 4px; font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.st-stages { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.st-stages li { display: grid; grid-template-columns: 170px minmax(0, 1fr) 40px 90px; align-items: center; gap: 12px; font-size: var(--fs-md); }
.st-stages li > span:first-child { display: flex; align-items: center; gap: 8px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-stages li > span:first-child i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.st-stages__bar { height: 10px; border-radius: var(--r-pill); background: var(--hover); overflow: hidden; }
.st-stages__bar em { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c); }
.st-stages b { text-align: right; color: var(--ink); }
.st-stages small { text-align: right; font-size: var(--fs-base); color: var(--muted); }
.st-table tbody tr { cursor: pointer; }
@media (max-width: 1100px) { .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .st-two { grid-template-columns: 1fr; } .st-flow li { grid-template-columns: 120px minmax(0, 1fr) 40px 44px; } .st-stages li { grid-template-columns: 110px minmax(0, 1fr) 30px 70px; } }
/* Statistieken, eenvoudig: drie vragen in gewone taal */
.st2 { max-width: 980px; display: flex; flex-direction: column; gap: 16px; }.st2-block { padding: 22px 24px; background: #fff; border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
.st2-q { margin: 0 0 4px; font: 700 var(--fs-xl) var(--display); color: var(--ink); }
.st2-a { margin: 0 0 16px; font-size: var(--fs-lg); line-height: 1.55; color: var(--text); }
.st2-a b { color: var(--ink); }
.st2-a .is-up { color: var(--ok); font-weight: 700; }
.st2-a .is-down { color: var(--err); font-weight: 700; }
.st2-chart { margin: 0 -6px; }
.st2-steps { display: flex; align-items: stretch; gap: 10px; }
.st2-step { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--sunken); }
.st2-step span { display: flex; align-items: center; gap: 7px; font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.st2-step span .i { width: 16px; height: 16px; }
.st2-step b { font: 800 32px var(--display); letter-spacing: -.02em; color: var(--ink); }
.st2-step.is-ok { background: var(--ok-soft); } .st2-step.is-ok b { color: var(--ok-ink); }
.st2-step.is-y { background: var(--y-soft); }
.st2-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #b9b4a8; }
.st2-arrow .i { width: 18px; height: 18px; }
.st2-arrow small { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.st2-money { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.st2-money div { padding: 14px 16px; border-radius: var(--r-lg); background: var(--sunken); }
.st2-money small { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.st2-money b { font: 800 var(--fs-2xl) var(--display); color: var(--ink); }
.st2-money b.is-ok { color: var(--ok-ink); }
.st2-tips ul { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st2-tips li { display: flex; gap: 10px; font-size: var(--fs-md); color: var(--text); }
.st2-tips i { flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: #9aa3ad; }
.st2-tips .is-good i { background: var(--ok); } .st2-tips .is-warn i { background: #e0a100; }
.st2-lock .ap-btn { margin-top: -4px; }
@media (max-width: 800px) { .st2-steps { flex-direction: column; } .st2-arrow { flex-direction: row; transform: rotate(90deg); height: 24px; } .st2-arrow small { transform: rotate(-90deg); } .st2-money { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Statistieken: paneel links, vier cijfers bovenaan */
.st2x .st2 { max-width: 1060px; padding: 22px 26px 40px; }
.st2-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st2-tile { padding: 18px 20px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
.st2-tile small { display: block; font-size: var(--fs-base); font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.st2-tile b { font: 800 var(--fs-3xl) var(--display); letter-spacing: -.02em; color: var(--ink); }
.st2-nodata { padding: 50px 0; text-align: center; }
@media (max-width: 900px) { .st2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st2-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.st2-range label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--muted); }
.st2-range input { width: 100%; }
/* =========================================================
   Automatiseringen: workflow op een canvas
   ========================================================= */.az-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #d4d0c6; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e5e1d8; cursor: pointer; }
.az-dot.is-on { background: var(--ok); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #bfe3cf; }.az-prev { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-base); color: var(--muted); white-space: nowrap; }
.az-prev .i { width: 14px; height: 14px; }/* Het notitieblok: stippen, veel ruimte, slepen om te bewegen */.az-delay { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid #ddd8cd; border-radius: var(--r-pill); background: #fff; font: 600 var(--fs-sm) var(--body, inherit); color: var(--text); cursor: pointer; }
.az-delay .i { width: 12px; height: 12px; color: var(--muted); }
.az-delay:hover { border-color: var(--ink); }/* Paneel rechts */
.az-panel { display: flex; flex-direction: column; min-height: 0; background: #fff; border-left: 1px solid rgba(0,0,0,.07); animation: azIn .22s var(--ease); }
@keyframes azIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }.az-ph { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.az-ph small { width: 100%; font-size: var(--fs-sm); color: var(--muted); }
.az-ph button { padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; font: 500 var(--fs-sm) ui-monospace, monospace; color: var(--text); cursor: pointer; }
.az-ph button:hover { border-color: var(--ink); color: var(--ink); }
.az-panel__foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.06); }
/* Startscherm en logboek */
.az-home { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 480px; margin: 12vh auto; padding: 0 20px; text-align: center; cursor: default; }
.az-home__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-xl); background: var(--y-soft); color: var(--y-ink); box-shadow: var(--sh); }
.az-home__ic .i { width: 30px; height: 30px; }
.az-home h2 { margin: 6px 0 0; }
.az-home .db-muted { font-size: var(--fs-lg); margin-bottom: 8px; }.az-log { max-width: 820px; margin: 0 auto; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(30,25,10,.06); }
.az-emptylog { display: flex; gap: 12px; padding: 24px; color: var(--muted); }
@media (max-width: 1100px) { }
@media (max-width: 800px) { }
/* =========================================================
   Automatiseringen: lijst met mappen, sjablonen, logboek en de bouwplek.
   Eén kaartvorm, neutrale iconen (kleur enkel voor aan/uit en fouten), alles op één middenas.
   ========================================================= */
/* Algemeen voor zijpanelen */
.ap-fx__close { top: auto !important; right: 14px !important; bottom: 14px; }
.ap-fx__side { padding-bottom: 56px; }
.ap-dl__head { gap: 8px; }
.ap-dl__head h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Icoon: één stijl */
.az2-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); }
.az2-ic .i { width: 18px; height: 18px; stroke-width: 1.8; }
.az2-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--text); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.az2-chip .i { width: 12px; height: 12px; }
.az2-sub { margin: 4px 0 0; font-size: var(--fs-md); color: var(--muted); }
.az2-sub .i { width: 14px; height: 14px; vertical-align: -2px; }
.az2-eyebrow { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }

/* Zijlijst met mappen */
.az2-nav__h { display: flex; align-items: center; justify-content: space-between; margin: 18px 10px 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.az2-nav__add { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.az2-nav__add:hover { background: var(--hover); color: var(--ink); }
.az2-nav__add .i { width: 14px; height: 14px; }
.az2-nav__none { margin: 2px 12px 4px; font-size: var(--fs-base); color: var(--faint); }
.az2-nav.is-dragging [data-drop], .az2-nav.is-dragging [data-tab="all"] { box-shadow: inset 0 0 0 1px var(--line-2); }
.az2-nav .is-over { background: var(--y-soft) !important; box-shadow: inset 0 0 0 1.5px var(--y-deep) !important; }

/* Lijst */
.az2-main { max-width: 1060px; display: flex; flex-direction: column; gap: 16px; }
.az2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.az2-head h2 { margin: 0; }
.az2-head__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.az2-rows { gap: 0 !important; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.az2-row { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none; cursor: pointer; }
.az2-row + .az2-row { border-top: 1px solid var(--line) !important; }
.az2-row:hover { background: var(--soft); }
.az2-row.is-drag { opacity: .45; }
.az2-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.az2-row__t b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az2-row__t small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-base); color: var(--muted); }
.az2-row__stat { flex: none; min-width: 96px; text-align: right; font-size: var(--fs-base); color: var(--muted); font-variant-numeric: tabular-nums; }
.az2-row.is-off .az2-ic { color: var(--line-3); }
.az2-row.is-off .az2-row__t b { color: var(--muted); }
.az2-row__more { opacity: 0; }
.az2-row:hover .az2-row__more, .az2-row:focus-within .az2-row__more { opacity: 1; }
@media (hover: none) { .az2-row__more { opacity: 1; } }
.az2-hint { margin: 0; font-size: var(--fs-sm); color: var(--faint); }
.az2-empty { display: flex; flex-direction: column; }

/* Sjablonen en kiezer: kaarten van gelijke hoogte, tekst links op één lijn */
.az2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.az2-card { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.az2-card:hover:not(.is-soon) { border-color: var(--line-3); box-shadow: var(--sh); }
.az2-card.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.az2-card.is-soon { cursor: default; opacity: .55; }
.az2-card__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.az2-card__t b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.35; }
.az2-card__t small { font-size: var(--fs-base); line-height: 1.45; color: var(--muted); }
.az2-used { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
.az2-used .i { width: 13px; height: 13px; }

/* Logboek */
.az2-log { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.az2-log li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.az2-log li + li { border-top: 1px solid var(--line); }
.az2-log__ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); }
.az2-log__ic .i { width: 13px; height: 13px; }
.az2-log li.is-bad .az2-log__ic { background: var(--err-soft); color: var(--err); }
.az2-log b { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.az2-log small { font-size: var(--fs-base); color: var(--muted); }

/* ---------- De bouwplek ---------- */
body.az2-lock { overflow: hidden; }
.az2-ed { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: var(--paper); animation: softIn .18s var(--ease); }
.az2-bar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 12px 0 8px; background: var(--card); border-bottom: 1px solid var(--line); }
.az2-back { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 10px 0 6px; border: 0; border-radius: var(--r-sm); background: none; font: 500 var(--fs-md) var(--body); color: var(--muted); cursor: pointer; }
.az2-back:hover { background: var(--hover); color: var(--ink); }
.az2-back .i { width: 18px; height: 18px; }
.az2-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 40px; padding: 0 10px; border-left: 1px solid var(--line); border-radius: 0; }
.az2-name input { flex: 1; min-width: 0; border: 0; background: none; font: 700 var(--fs-lg) var(--display); color: var(--ink); outline: none; text-overflow: ellipsis; }
.az2-name .i { flex: none; width: 15px; height: 15px; color: var(--faint); }
.az2-name:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }
.az2-bar__r { display: flex; align-items: center; gap: 12px; flex: none; }
.az2-prev { font-size: var(--fs-base); color: var(--muted); white-space: nowrap; }
.az2-saved { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px; font-size: var(--fs-base); font-weight: 600; color: var(--ok-ink); white-space: nowrap; }
.az2-saved .i { width: 15px; height: 15px; }
.az2-work { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.az2-work.has-panel { grid-template-columns: minmax(0, 1fr) 440px; }
.az2-scrim { display: none; }
/* Het blad: vrij te verschuiven (slepen, swipen, touchpad) */
.az2-canvas { position: relative; overflow: hidden; cursor: grab; touch-action: none; user-select: none; background-image: radial-gradient(circle, #d6d1c5 1px, transparent 1.3px); background-size: 22px 22px; }
.az2-canvas.is-pan { cursor: grabbing; }
.az2-flow { display: flex; flex-direction: column; align-items: center; padding: 72px 24px 160px; transform-origin: 50% 0; will-change: transform; }
.az2-node { position: relative; display: flex; align-items: center; gap: 14px; width: 400px; max-width: calc(100vw - 48px); min-height: 76px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.az2-node:hover { border-color: var(--line-3); }
.az2-node.is-sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh-md); }
.az2-node--start .az2-ic { background: var(--ink); color: #fff; }
.az2-node__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.az2-node__t b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.3; }
.az2-node__s { font-size: var(--fs-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az2-node__go { display: grid; place-items: center; flex: none; width: 24px; color: var(--line-3); transform: rotate(-90deg); transition: color .15s; }
.az2-node__go .i { width: 16px; height: 16px; }
.az2-node:hover .az2-node__go, .az2-node.is-sel .az2-node__go { color: var(--ink); }
.az2-tok { display: inline-block; padding: 0 5px; margin: 0 1px; border-radius: var(--r-xs); background: var(--y-faint); box-shadow: inset 0 0 0 1px var(--y-soft); color: var(--y-ink); font-size: .92em; font-weight: 500; line-height: 1.5; }
.az2-node--add { border-style: dashed; border-color: var(--line-2); background: var(--soft); box-shadow: none; }
.az2-node--add:hover { border-color: var(--ink); }
.az2-node--add .az2-ic { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.az2-node--add.is-strong { border-color: var(--ink); border-style: dashed; }
.az2-node--add.is-strong .az2-ic { background: var(--y); color: var(--ink); box-shadow: none; }
.az2-node--add.is-off { cursor: default; opacity: .6; }
.az2-node--add.is-off:hover { border-color: var(--line-2); }
.az2-node--add .az2-node__s { white-space: normal; }
/* Verbinding tussen kaarten: één lijn op de middenas, met wachttijd en "invoegen" in het midden */
.az2-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 400px; max-width: calc(100vw - 48px); min-height: 40px; padding: 6px 0; }
.az2-link__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--line-2); }
.az2-delay, .az2-insert { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 500 var(--fs-sm) var(--body); cursor: pointer; }
.az2-delay { height: 26px; padding: 0 10px; border-radius: var(--r-pill); }
.az2-delay .i { width: 12px; height: 12px; color: var(--muted); }
.az2-insert { width: 24px; height: 24px; border-radius: 50%; opacity: 0; transition: opacity .15s; }
.az2-insert .i { width: 13px; height: 13px; }
.az2-link:hover .az2-insert, .az2-insert:focus-visible { opacity: 1; }
.az2-delay:hover, .az2-insert:hover { border-color: var(--ink); color: var(--ink); }
@media (hover: none) { .az2-insert { opacity: 1; } }
/* Zoomen */
.az2-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--sh); cursor: default; }
.az2-zoom span { min-width: 44px; text-align: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--muted); }
.az2-zoom button { font-size: var(--fs-lg); font-weight: 600; }
/* Paneel rechts (op gsm onderaan) */
.az2-panel { display: flex; flex-direction: column; min-height: 0; background: var(--card); border-left: 1px solid var(--line); animation: azIn .2s var(--ease); }
.az2-work:not(.has-panel) .az2-panel { display: none; }
.az2-panel__grip { display: none; }
.az2-panel__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.az2-panel__title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.az2-panel__title b { font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.az2-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: var(--r-md); background: var(--sunken); color: var(--muted); }
.az2-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-md); color: var(--ink); outline: none; }
.az2-search .i { width: 17px; height: 17px; }
.az2-panel__body { flex: 1; overflow-y: auto; padding: 4px 20px 32px; scrollbar-width: thin; }
.az2-panel__body--form { padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.az2-panel__foot { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.az2-sec h3 { margin: 20px 0 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.az2-grid--pick { grid-template-columns: 1fr; gap: 8px; }
.az2-grid--pick .az2-card { align-items: center; padding: 12px 14px; }
.az2-cfg { margin: 16px 0 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.az2-cfg__h { margin: 0 0 8px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.az2-ph { margin: 4px 0 8px; }
.az2-ph small { display: block; margin-bottom: 6px; font-size: var(--fs-sm); color: var(--muted); }
.az2-ph div { display: flex; flex-wrap: wrap; gap: 6px; }
.az2-ph button { height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font: 500 var(--fs-sm) var(--body); color: var(--text); cursor: pointer; }
.az2-ph button:hover { border-color: var(--ink); color: var(--ink); }
.az2-menu { z-index: 400; min-width: 220px; }
.az2-menu__h { margin: 4px 10px 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.az2-menu button.is-on b { color: var(--ink); }
.az2-menu button > .i:last-child { margin-left: auto; width: 15px; height: 15px; }
@media (max-width: 1100px) { .az2-work.has-panel { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (max-width: 900px) { .az2-grid { grid-template-columns: 1fr; } .az2-row__stat { display: none; } }
/* Gsm: paneel als onderblad boven het blad, bovenbalk compact */
@media (max-width: 800px) {
  .az2-bar { gap: 6px; padding: 0 8px 0 4px; }
  .az2-back span, .az2-prev, .az2-bar__r .az2-chip { display: none; }
  .az2-name { border-left: 0; padding: 0 4px; }
  .az2-bar__r { gap: 8px; }
  .az2-bar__r .ap-switch span { display: none; }
  .az2-work.has-panel { grid-template-columns: minmax(0, 1fr); }
  .az2-scrim { position: absolute; inset: 0; z-index: 2; background: rgba(20,18,12,.25); }
  .az2-work.has-panel .az2-scrim { display: block; }
  .az2-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 82%; border-left: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-lg); animation: azUp .22s var(--ease); }
  .az2-panel__grip { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--r-pill); background: var(--line-2); }
  .az2-panel__head { padding: 10px 12px 10px 16px; }
  .az2-panel__body { padding: 4px 16px 24px; }
  .az2-flow { padding-top: 40px; }
  .az2-node, .az2-link { width: calc(100vw - 32px); }
}
@keyframes azUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Dashboard: eigen afwerking */
.db-hello { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.db-sentence { margin: 2px 0 12px; font-size: var(--fs-md); line-height: 1.5; color: var(--text); }
.db-sentence b { color: var(--ink); }
.db-card__head a.db-muted { display: inline-flex; align-items: center; gap: 4px; margin: 0; text-decoration: none; }
.db-card__head a.db-muted .i { width: 14px; height: 14px; }
.db-card__head a.db-muted:hover { color: var(--ink); }
.db-it__ic.is-ok { background: var(--ok-soft); color: var(--ok); }
.db-log .db-it { padding: 9px 2px; }
.db-log .db-it__t b { font-weight: 500; font-size: var(--fs-md); }
.db-auto { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.db-auto p { flex: 1; min-width: 200px; margin: 0; font-size: var(--fs-md); color: var(--text); line-height: 1.5; }
.db-auto p b { color: var(--ink); }
.db-newmenu { width: 270px; }
.db-newmenu button .i { width: 17px; height: 17px; color: var(--muted); flex: none; }
.db-step, .db-card, .db-start { border-radius: var(--r-lg); }
.db-step > b { font-size: var(--fs-3xl); }
/* =========================================================
   AI-agents
   ========================================================= */
.ag-main { max-width: 1100px; }
.ag-note { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-md); background: var(--y-soft); font-size: var(--fs-base); color: #5f4a00; }
.ag-note .i { width: 16px; height: 16px; flex: none; }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.ag-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgba(30,25,10,.06); overflow: hidden; cursor: pointer; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.ag-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(30,25,10,.08), 0 12px 30px rgba(30,25,10,.08); }
.ag-card__top { position: relative; display: grid; place-items: center; height: 150px; background: radial-gradient(circle at 50% 110%, #ffe9a8 0, #fff6da 55%, #fffaf0 100%); }
.ag-card.is-off .ag-card__top { background: var(--sunken); }
.ag-card.is-off .ag-card__top img { filter: grayscale(1); opacity: .55; }
.ag-card__top img { width: 96px; height: auto; transition: transform .3s var(--ease); }
.ag-card:hover .ag-card__top img { transform: translateY(-3px) rotate(-3deg); }
.ag-card__goal { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.85); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ag-card__goal .i { width: 13px; height: 13px; }
.ag-card__more { position: absolute; right: 10px; top: 10px; background: rgba(255,255,255,.85) !important; }
.ag-card__body { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.ag-card__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-card__name b { font-size: var(--fs-lg); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-card__name small { font-size: var(--fs-base); color: var(--muted); }
.ag-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 12px 14px; }
.ag-stats span { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--r-md); background: var(--sunken); font-size: var(--fs-sm); color: var(--muted); }
.ag-stats .i { width: 13px; height: 13px; }
.ag-stats b { font: 800 var(--fs-xl) var(--display); color: var(--ink); }
.ag-card--new { align-items: center; justify-content: center; gap: 6px; min-height: 280px; border: 1.5px dashed var(--line-3); background: transparent; box-shadow: none; font: inherit; color: var(--muted); text-align: center; padding: 20px; }
.ag-card--new b { color: var(--ink); font-size: var(--fs-lg); }
.ag-card--new small { font-size: var(--fs-base); max-width: 220px; }
.ag-card--new > .i { width: 26px; height: 26px; }
.az-home__ic img { width: 40px; height: auto; }

/* Instellen */
.ag-ed { display: flex; flex-direction: column; height: 100vh; background: #f4f3ef; }
.ag-bar .az2-back { text-decoration: none; }
.ag-work { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); }
.ag-set { overflow-y: auto; padding: 20px 22px 40px; background: #fff; border-right: 1px solid rgba(0,0,0,.07); scrollbar-width: thin; }
.ag-set section { padding: 16px 0; border-top: 1px solid rgba(0,0,0,.06); }
.ag-set h3 { margin: 0 0 10px; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.ag-id { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
.ag-id img { width: 48px; height: auto; padding: 6px; border-radius: var(--r-lg); background: var(--y-soft); }
.ag-id div { display: flex; flex-direction: column; min-width: 0; }
.ag-id b { font: 700 var(--fs-xl) var(--display); color: var(--ink); }
.ag-id small { font-size: var(--fs-base); color: var(--muted); }
.ag-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-goals button { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; font-size: var(--fs-base); text-align: left; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.ag-goals button .i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--muted); }
.ag-goals button.is-on { border-color: var(--ink); background: var(--y-faint); color: var(--ink); font-weight: 600; }
.ag-goals button.is-on .i { color: var(--y-ink); }
.ag-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; font-size: var(--fs-base); color: var(--muted); }
.ag-delay { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.ag-two { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.ag-hint { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.ag-seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-md); background: rgba(0,0,0,.05); }
.ag-seg button { flex: 1; padding: 8px; border: 0; border-radius: var(--r-sm); background: none; font: 600 var(--fs-base) var(--body, inherit); color: var(--muted); cursor: pointer; }
.ag-seg button.is-on { background: #fff; color: var(--ink); box-shadow: var(--sh); }
.ag-cals { display: flex; flex-direction: column; gap: 8px; }
.ag-cal { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ag-cal > .i { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ag-cal span { flex: 1; display: flex; flex-direction: column; }
.ag-cal b { font-size: var(--fs-md); color: var(--ink); }
.ag-cal small { font-size: var(--fs-sm); color: var(--muted); }
.ag-cal em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--ok); white-space: nowrap; }
.ag-cal em .i { width: 13px; height: 13px; }
.ag-cal.is-on { border-color: #bfe3cf; background: #f5fbf7; }
.ag-cal:not(.is-on) { opacity: .75; }
.ag-avail { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); font-size: var(--fs-base); color: var(--ink); }
.ag-avail span { display: flex; align-items: center; gap: 8px; }
.ag-avail .i { width: 15px; height: 15px; color: var(--muted); }
.ag-avail a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--muted); }
.ag-avail a:hover { background: #fff; color: var(--ink); }
.ag-bubble { display: flex; gap: 10px; margin-top: 10px; }
.ag-bubble img, .ag-msg img { flex: none; width: 30px; height: 30px; padding: 3px; border-radius: 50%; background: var(--y-soft); object-fit: contain; }
.ag-bubble p { margin: 0; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: var(--sunken); font-size: var(--fs-base); line-height: 1.5; color: var(--ink); }
.ag-var { padding: 1px 6px; border-radius: var(--r-sm); background: #fff3cc; font-weight: 600; font-size: var(--fs-sm); }
.ag-del { margin-top: 12px; }
/* Rechts: instructies en testgesprek */
.ag-right { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 20px 24px; }
.ag-instr { flex: none; padding: 4px; border-radius: var(--r-xl); background: #fff; box-shadow: 0 0 0 1px rgba(30,25,10,.07), inset 0 3px 0 var(--y); }
.ag-instr__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ag-instr__head > .i:first-child { width: 18px; height: 18px; color: var(--y-ink); }
.ag-instr__head b { font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ag-instr__head span { flex: 1; font-size: var(--fs-base); color: var(--muted); }
.ag-instr__head > .i:last-child { width: 18px; height: 18px; transform: rotate(180deg); transition: transform .2s; }
.ag-instr.is-closed .ag-instr__head > .i:last-child { transform: none; }
.ag-instr__ta { width: calc(100% - 20px); margin: 0 10px 10px; resize: vertical; min-height: 120px; }
.ag-instr.is-closed .ag-instr__ta { display: none; }
.ag-chat { flex: 1; min-height: 260px; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgba(30,25,10,.07); overflow: hidden; }
.ag-chat__head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.06); }
.ag-chat__head b { font-size: var(--fs-lg); color: var(--ink); }
.ag-chat__head span { flex: 1; font-size: var(--fs-base); color: var(--muted); }
.ag-msgs { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--soft); }
.ag-msg { display: flex; gap: 10px; max-width: 80%; animation: softIn .2s var(--ease); }
.ag-msg small { display: block; margin-bottom: 3px; font-size: var(--fs-sm); color: var(--muted); }
.ag-msg p { margin: 0; padding: 10px 13px; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); font-size: var(--fs-md); line-height: 1.5; color: var(--ink); white-space: pre-line; }
.ag-msg.is-me { align-self: flex-end; flex-direction: row-reverse; }
.ag-msg.is-me small { text-align: right; }
.ag-msg.is-me p { border-radius: 14px 4px 14px 14px; background: var(--ink); color: #fff; box-shadow: none; }
.ag-note2 { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--ok-soft); font-size: var(--fs-sm); color: var(--ok-ink); }
.ag-note2 .i { width: 13px; height: 13px; }
.ag-typing { display: inline-flex; gap: 4px; }
.ag-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b9b4a8; animation: agDot 1s infinite; }
.ag-typing i:nth-child(2) { animation-delay: .15s; } .ag-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes agDot { 50% { transform: translateY(-4px); opacity: .5; } }
.ag-compose { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(0,0,0,.06); }
.ag-compose input { flex: 1; }
@media (max-width: 1000px) { .ag-work { grid-template-columns: 1fr; overflow-y: auto; } .ag-set { overflow: visible; border-right: 0; } .ag-right { padding: 16px; } .ag-chat { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) { .ag-typing i { animation: none; } }
/* =========================================================
   Toegankelijkheid: overal een zichtbare focus, en rust voor wie minder beweging wil
   ========================================================= */
:where(button, a, summary, [tabindex="0"], [role="tab"], [role="menuitem"], [role="menuitemradio"]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:where(.ap-ibx__row a, .az2-node, .az2-card, .ag-card, .ap-frow, .db-step):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.az2-search:focus-within, .ap-fc__search:focus-within, .ap-dt__search:focus-within, .az2-name:focus-within, .ix2-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.px-tpl__name:focus-visible, .az-name:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Grotere raakvlakken op touchscreens */
@media (pointer: coarse) {
  .ap-icon--sm, .ap-ibx__qa, .ap-frow__b, .px-t, .ap-dt__icon, .ix2-filter { min-width: 40px; min-height: 40px; }
}
/* Laden: pas zichtbaar na 300 ms, zonder de pagina te laten verspringen */
.ap-loadq { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60vh; color: var(--muted); font-size: var(--fs-md); opacity: 0; animation: loadIn .2s ease .3s forwards; }
@keyframes loadIn { to { opacity: 1; } }
/* Deal: rechts inschuivend paneel (zelfde inhoud als in de inbox) */
.dx-sheet { position: fixed; inset: 0; z-index: 220; }
.dx-sheet__bg { position: absolute; inset: 0; background: rgba(20,18,12,.18); animation: softIn .2s ease; }
.dx-sheet__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); overflow-y: auto; background: var(--soft); box-shadow: var(--sh); animation: sheetIn .26s var(--ease); }
.dx-sheet__panel .ap-ibx__bar { margin: 0; padding: 12px 20px; }
.dx-sheet__panel .ap-ld--inline { padding: 20px 24px 60px; }
@keyframes sheetIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* =========================================================
   Afwerking na de design-audit. Enkel tokens (zie :root in app.css).
   Regels: één hoofdactie per scherm; structuur via ruimte en typografie
   in plaats van dozen; kleur enkel met een betekenis.
   ========================================================= */

/* Lijsten: acties pas bij hover, focus of selectie (op aanraakschermen altijd) */
.ap-ibx__acts .ap-ibx__go { box-shadow: none; opacity: 0; transition: opacity .15s, background .15s; }
.ap-ibx__row:hover .ap-ibx__go, .ap-ibx__row:focus-within .ap-ibx__go, .ap-ibx__row.is-sel .ap-ibx__go { opacity: 1; }
@media (hover: none) { .ap-ibx__acts .ap-ibx__go { opacity: 1; } }
/* Niets gekozen: rustige wegwijzer */
.ap-ibx__none { height: 100%; min-height: 320px; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--faint); font-size: var(--fs-md); }
.ap-ibx__none .i { width: 28px; height: 28px; color: var(--line-3); }

/* Aanvraag en deal: de prijs is typografie, geen gele doos */
.ap-ld__price { background: none; border: 0; border-radius: 0; padding: 0; margin: 2px 0 18px; }
.ap-ld__price small { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.ap-ld__price > b { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.ap-ld__price ul { border-top-color: var(--line); }
.dx-sheet__panel .ap-ld--inline { padding-top: 28px; }
.dx-sheet__panel .ap-ibx__bar { position: sticky; top: 0; z-index: 2; background: var(--soft); }
/* Wat de klant koos: vaste kolom voor het effect, alles recht onder elkaar; duurder is geen fout */
.ap-pb li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 9.5em; border-bottom-style: solid; }
@media (max-width: 560px) { .ap-pb li { grid-template-columns: minmax(0, 1fr) auto; } }
.ap-pb__e.is-up { color: var(--text); }
/* Bezoek inplannen: gewone lijn in plaats van een streepjesdoos */
.ap-bookset { border-style: solid; border-color: var(--line); }

/* Dashboard: afgewerkte stappen verdwijnen (de teller zegt genoeg), tegels bewegen niet */
.db-start li.is-done { display: none; }
.db-step:hover { transform: none; }

/* Studio: geen kaart in een kaart; vragen als één lijst */
.ap-svcform.ap-card { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 8px; }
.ap-qsum { gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.ap-qsum li + li button { border-top: 1px solid var(--line); }
.ap-qsum button { border: 0; border-radius: 0; }
.ap-qsum button:hover { background: var(--soft); }
.ap-qsum b { background: var(--sunken); color: var(--muted); font-weight: 600; }

/* Knoppen: verwijderen is een tertiaire actie (tekst, geen rand) */
.ap-btn--ghost.ap-btn--danger-t { border-color: transparent; background: none; box-shadow: none; }
.ap-btn--ghost.ap-btn--danger-t:hover { background: var(--err-soft); }
/* Lege toestanden: één patroon voor elke pagina. Gecentreerd, klein icoon (optioneel), korte titel, één zin, hoogstens één hoofdactie.
   Binnen een smalle lijst (ap-ibx__empty) blijft het links uitgelijnd en zonder icoon. */
.ap-fx__empty, .az2-empty { align-items: center; text-align: center; gap: 8px; max-width: 440px; margin: 12vh auto 0; padding: 0 16px; color: var(--muted); }
.ap-fx__empty b, .az2-empty h2.ap-h2 { font: 700 var(--fs-lg)/1.3 var(--display); color: var(--ink); margin: 4px 0 0; letter-spacing: 0; }
.ap-fx__empty span, .az2-empty p { font-size: var(--fs-md); line-height: 1.5; margin: 0; }
.ap-fx__empty .ap-btn, .az2-empty .ap-btn, .az2-empty .ap-row { margin-top: 10px; }
.az-home__ic { width: 44px; height: 44px; border-radius: var(--r-md); box-shadow: none; }
.az-home__ic .i { width: 22px; height: 22px; }
.az-home__ic img { width: 30px; }
.ap-empty .i { width: 28px; height: 28px; }
/* Kaarttitel en eerste veld niet tegen elkaar */
.ap-card > .ap-h3:first-child { margin-bottom: 14px; }
/* Grafiek: aslabels in HTML (niet mee uitgerekt), rustig en klein */
.ap-area__plot { position: relative; }
.ap-area__xl { position: relative; height: 14px; margin-top: 6px; }
.ap-area__yl span, .ap-area__xl span { position: absolute; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; line-height: 1; }
.ap-area__yl span { left: 0; width: 26px; text-align: right; transform: translateY(-50%); }
.ap-area__xl span { top: 0; transform: translateX(-50%); white-space: nowrap; }
.ap-area__xl span:first-child { transform: none; }
.ap-area__xl span:last-child { transform: translateX(-100%); }
/* Keuze van het bord: inhoud bovenaan, chips niet uitgerekt */
.bx-tpl { align-content: start; }
.bx-tpl__cols { align-items: flex-start; }

/* AI-agent: zelfde bovenbalk als de automatiseringen; 'Opgeslagen' is een toestand, geen uitgeschakelde knop */
.ag-bar [data-save]:disabled { background: none; box-shadow: none; border-color: transparent; color: var(--ok-ink); opacity: 1; }

/* Naam in de bovenbalk: het potloodje staat vlak achter de tekst */
.az2-name input { flex: 0 1 auto; field-sizing: content; min-width: 8ch; max-width: 100%; }

/* Kalender: een periode aanduiden (eerste klik begin, tweede klik einde) */
.ap-dtmenu__cal { padding: 4px 6px 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.ap-cal { width: 252px; }
.ap-cal__head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; }
.ap-cal__head b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); text-transform: capitalize; }
.ap-cal__head .i { width: 15px; height: 15px; }
.ap-cal__wd, .ap-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.ap-cal__wd span { padding: 4px 0; text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--faint); text-transform: uppercase; }
.ap-cal__grid { row-gap: 2px; }
.ap-cal__d { height: 34px; border: 0; background: none; font: 500 var(--fs-base) var(--body); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; border-radius: var(--r-sm); }
.ap-cal__d:hover { background: var(--hover); }
.ap-cal__d.is-today { box-shadow: inset 0 0 0 1px var(--line-2); }
.ap-cal__d.is-future { color: var(--line-3); }
.ap-cal__d.is-in { background: var(--y-soft); border-radius: 0; }
.ap-cal__d.is-end { background: var(--ink); color: #fff; }
.ap-cal__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ap-cal__foot small { font-size: var(--fs-sm); color: var(--muted); }
/* Bordkeuze: enkel naam en één zin */
.bx-tpl { gap: 2px; }
/* Lege toestand: alles op één middenas; knoppen naast elkaar, gecentreerd; rustig icoon */
.az2-empty, .ap-fx__empty { align-items: center !important; text-align: center; }
.az2-empty .ap-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%; }
.az2-empty .ap-row .ap-btn { margin: 0; }
.az-home__ic { background: var(--sunken); color: var(--ink); }
/* Kalender in het menu: eigen weergave (de lijst verdwijnt even), past altijd */
.ap-dtmenu.is-cal { width: 296px; }
.ap-dtmenu.is-cal > :not([data-cal]) { display: none !important; }
.ap-dtmenu.is-cal .ap-dtmenu__cal { border-top: 0; margin: 0; padding: 4px; }
.ap-cal { width: 100%; }
.ap-cal__back { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 4px; margin-bottom: 4px; border: 0; border-radius: var(--r-sm); background: none; font: 500 var(--fs-base) var(--body); color: var(--muted); cursor: pointer; }
.ap-cal__back:hover { background: var(--hover); color: var(--ink); }
.ap-cal__back .i { width: 15px; height: 15px; }
.ap-cal__head b { white-space: nowrap; }
.ap-cal__head [data-mv="-1"] .i { transform: rotate(90deg); }
.ap-cal__head [data-mv="1"] .i { transform: rotate(-90deg); }
.ap-cal__head button:disabled { opacity: .3; cursor: default; }
.ap-cal__grid, .ap-cal__wd { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ap-cal__d { height: 36px; min-width: 0; padding: 0; }
.ap-cal__d:disabled { color: var(--line-2); cursor: default; background: none; }
[data-percal] > .i { margin-left: auto; transform: rotate(-90deg); width: 15px; height: 15px; color: var(--faint); }
/* Nieuwe deal: paneel rechts met twee kolommen (deal | klant) */
.nl-panel { display: flex; flex-direction: column; width: min(720px, 100vw); padding: 0; background: var(--card); }
.nl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.nl-head h2 { margin: 0; font: 700 var(--fs-2xl) var(--display); color: var(--ink); letter-spacing: -.01em; }
.nl-head p { margin: 4px 0 0; font-size: var(--fs-md); color: var(--muted); }
.nl-body { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.nl-col { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; }
.nl-col + .nl-col { border-left: 1px solid var(--line); }
.nl-col h3 { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.nl-f { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.nl-f > span:first-child { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.nl-f > span small { font-weight: 400; color: var(--muted); }
.nl-note { grid-column: 1 / -1; padding: 16px 24px 4px; border-top: 1px solid var(--line); }
.nl-body > .ap-err { grid-column: 1 / -1; margin: 8px 24px; }
.nl-stages { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-stage input { position: absolute; opacity: 0; pointer-events: none; }
.nl-stage span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-base); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.nl-stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.nl-stage span:hover { border-color: var(--line-3); }
.nl-stage input:checked + span { border-color: var(--ink); background: var(--soft); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink); }
.nl-stage input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.nl-match { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--y-faint); box-shadow: inset 0 0 0 1px var(--y-soft); font-size: var(--fs-base); color: var(--text); }
.nl-match[hidden] { display: none; }
.nl-match .i { width: 15px; height: 15px; flex: none; }
.nl-match span { flex: 1; }
.nl-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--card); }
.nl-foot__hint { margin-right: auto; font-size: var(--fs-sm); color: var(--faint); }
@media (max-width: 640px) {
  .nl-body { grid-template-columns: 1fr; }
  .nl-col + .nl-col { border-left: 0; border-top: 1px solid var(--line); }
  .nl-head, .nl-col, .nl-foot { padding-left: 16px; padding-right: 16px; }
  .nl-note { padding: 16px; }
  .nl-foot__hint { display: none; }
}
/* Menu's blijven binnen het scherm (kalender inbegrepen) */
.ap-dtmenu { max-height: calc(100vh - 16px); overflow-y: auto; }
.nl-f .ap-money { display: flex; width: 100%; }
.nl-f .ap-money .ap-in { flex: 1; width: auto; }

/* Fase: compacte keuze (gekozen fase als gekleurde knop, klik = lijst) */
.nl-stage { position: relative; align-self: flex-start; }
.nl-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 18%, #fff); color: color-mix(in srgb, var(--c) 70%, #111); font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
.nl-stagebtn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-pill); }
.nl-stagebtn > .i { width: 15px; height: 15px; color: var(--muted); }
.nl-stagebtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nl-stagelist { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--sh-md); }
.nl-stagelist[hidden] { display: none; }
.nl-stagelist button { width: 100%; padding: 3px 4px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; }
.nl-stagelist button:hover, .nl-stagelist button[aria-selected="true"] { background: var(--sunken); }
.nl-head { align-items: center; }
/* Bord: neutrale knop met bord-icoon, zelfde vorm als de fase */
.nl-pill--board { gap: 6px; background: var(--sunken); color: var(--ink); }
.nl-pill--board .i { width: 14px; height: 14px; }
.nl-stagebtn:disabled { cursor: default; }

/* Heldere fasekleuren: sterkere vulling, donkere tekst */
.nl-pill { background: color-mix(in srgb, var(--c) 30%, #fff); color: color-mix(in srgb, var(--c) 55%, #111); }
.nl-pill--board { background: var(--sunken); color: var(--ink); }
.nl-stagelist__new { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 8px 8px !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; font: 600 var(--fs-base) var(--body); color: var(--ink); }
.nl-stagelist__new .i { width: 14px; height: 14px; }
/* Vensters altijd boven panelen en de bouwplek */
.ap-modal { z-index: 300; }
/* Fases op het bord en in lijsten: zelfde heldere vulling als in 'Nieuwe deal' */
.ap-bcol__pill, .ap-badge--stage { background: color-mix(in srgb, var(--c) 30%, #fff); color: color-mix(in srgb, var(--c) 55%, #111); box-shadow: none; }

/* Fases fel en vol: de kleur vult het knopje, tekst wit of zwart naargelang de kleur (altijd leesbaar) */
.nl-pill, .ap-bcol__pill, .ap-badge--stage { background: var(--c); color: #fff; color: lch(from var(--c) calc((70 - l) * 100) 0 0); font-weight: 600; box-shadow: none; }
.nl-pill--board { background: var(--sunken); color: var(--ink); }
/* Tekst op fasekleuren: berekend per kleur (wit, zwart op geel) */
.nl-pill, .ap-bcol__pill, .ap-badge--stage { color: var(--t, #fff); }
.nl-pill--board { color: var(--ink); }

/* Kolomkop op het bord: de fase als fel knopje */
.ap-bcol header .ap-bcol__dot { display: none; }
.ap-bcol header b { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--r-pill); background: var(--c); color: var(--t, #fff); font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* De fase-knopjes: witte (of zwarte) tekst wint van de oude chipstijl */
.nl-stage .nl-pill { height: 28px; padding: 0 12px; border: 0; background: var(--c); color: var(--t, #fff); gap: 6px; }
.nl-stage .nl-pill--board { background: var(--sunken); color: var(--ink); }

/* Kaartjes op het bord: vaste opbouw, rijen met icoon */
.ap-kcard { display: flex; flex-direction: column; gap: 4px; }
.ap-kcard > b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.ap-kcard > small { font-size: var(--fs-base); color: var(--muted); }
.ap-kcard__row { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-base); color: var(--text); }
.ap-kcard__row .i { flex: none; width: 14px; height: 14px; color: var(--faint); }
.ap-kcard__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-kcard__note { font-style: italic; }
.ap-kcard__docs { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ap-kcard__docs > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--sunken); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ap-kcard__docs em { font-style: normal; font-weight: 500; color: var(--muted); }
.ap-kcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ap-kcard__foot em { font-style: normal; font-weight: 600; font-size: var(--fs-base); color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-kcard__foot small { font-size: var(--fs-sm); color: var(--faint); }
/* Kaartjes instellen: schakelaars links, voorbeeld rechts */
.ap-modal__box:has(.ap-cardset) { padding: 0; overflow: hidden; }
.ap-cardset { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 440px; }
.ap-cardset__opts { padding: 24px; display: flex; flex-direction: column; }
.ap-cardset__list { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 8px; }
.ap-cardset__list .ap-switch { padding: 6px 0; }
.ap-cardset__opts .ap-modal__foot { margin-top: auto; }
.ap-cardset__prev { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px; background: var(--paper); border-left: 1px solid var(--line); border-radius: 0 var(--r-xl) var(--r-xl) 0; }
.ap-cardset__prev > small { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.ap-kcard--prev { padding: 14px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--sh); pointer-events: none; }
@media (max-width: 700px) { .ap-cardset { grid-template-columns: 1fr; } .ap-cardset__prev { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-xl) var(--r-xl); order: -1; } }
/* Kolomkop: fase-knopje, rechts het totaal en het aantal */
.ap-bcol > header { display: flex; align-items: center; gap: 8px; }
.ap-bcol > header b { flex: 0 1 auto; min-width: 0; }
.ap-bcol__sum { margin-left: auto; font-size: var(--fs-base); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-bcol > header em { flex: none; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--card); font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.ap-bcol > header em:empty { display: none; }
/* Tekst in het fase-knopje van de kolomkop: altijd de berekende kleur (wit, zwart op geel) */
.ap-bcol > header b { color: var(--t, #fff) !important; background: var(--c) !important; }

/* Lege toestand: precies in het midden van het werkvlak (horizontaal en verticaal) */
.az2-main:has(> .az2-empty:only-child) { max-width: none; min-height: 100%; justify-content: center; align-items: center; }
.az2-main > .az2-empty:only-child { margin: 0 auto; padding-bottom: 8vh; }
/* Bord kiezen: drie kaarten naast elkaar, elk met een klein kleurrijk voorbeeldbord */
.bx-tpls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bx-tpl { position: relative; display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 12px 14px !important; border: 1.5px solid var(--line) !important; border-radius: var(--r-lg); background: var(--card); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bx-tpl:hover { border-color: var(--line-3) !important; box-shadow: var(--sh-md); transform: translateY(-2px); }
.bx-tpl.is-on { border-color: var(--ink) !important; box-shadow: 0 0 0 3px var(--y) !important; }
.bx-tpl__art { display: flex; gap: 4px; width: 100%; height: 76px; margin-bottom: 8px; padding: 8px; border-radius: var(--r-md); background: var(--sunken); overflow: hidden; }
.bx-tpl__art i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 7px; border-radius: 5px; background: #fff; border-top: 4px solid var(--c); }
.bx-tpl__art em { display: block; height: 9px; margin: 0 3px; border-radius: 3px; background: color-mix(in srgb, var(--c) 28%, #fff); }
.bx-tpl b { font-size: var(--fs-lg) !important; font-weight: 700; color: var(--ink); }
.bx-tpl small { font-size: var(--fs-base); line-height: 1.45; color: var(--muted); }
.bx-tpl__n { margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.bx-tpl__check { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.bx-tpl__check .i { width: 14px; height: 14px; }
.bx-tpl.is-on .bx-tpl__check { opacity: 1; transform: none; }
.bx-tpl--own .bx-tpl__art i { border-top-style: dashed; }
/* Sorteren in het menu: compacte keuzes naast elkaar */
.ap-dtmenu__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 8px; }
.ap-dtmenu__chips button { display: inline-flex !important; width: auto !important; height: 30px; padding: 0 11px !important; border: 1px solid var(--line) !important; border-radius: var(--r-pill) !important; background: var(--card); font: 500 var(--fs-base) var(--body); color: var(--text); cursor: pointer; white-space: nowrap; }
.ap-dtmenu__chips button:hover { border-color: var(--line-3) !important; }
.ap-dtmenu__chips button.is-on { border-color: var(--ink) !important; background: var(--ink) !important; color: #fff; }
/* Werkbalk Deals: keuzeknoppen voor sorteren en periode (tonen wat er gekozen is) */
.ap-dt__pick { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px 0 11px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font: 500 var(--fs-base) var(--body); color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.ap-dt__pick:hover { border-color: var(--line-3); color: var(--ink); }
.ap-dt__pick > .i { width: 15px; height: 15px; color: var(--muted); }
.ap-dt__pick > .i:last-child { width: 14px; height: 14px; }
.ap-dt__pick.is-set { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.ap-dtmenu > button > .i:last-child:not(:first-child) { margin-left: auto; width: 16px; height: 16px; color: var(--ink); }
.ap-dtmenu[data-mode="sort"], .ap-dtmenu[data-mode="period"] { min-width: 230px; }
@media (max-width: 760px) { .ap-dt__pick span { display: none; } .ap-dt__pick { padding: 0 8px; } }
/* ---------- Automatiseringen: gekleurde icoontjes per categorie, slepen naar het blad ---------- */
.az2-ic--c, .az2-node--start .az2-ic--c { background: var(--c); color: #fff; }
.az2-row.is-off .az2-ic--c { background: var(--sunken); color: var(--line-3); }
.az2-sec h3 { display: flex; align-items: center; gap: 8px; }
.az2-sec h3 i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.az2-sec h3 em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--faint); }
.az2-draghint { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.az2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.az2-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 96px; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font: inherit; color: var(--ink); text-align: center; cursor: grab; transition: border-color .15s, transform .15s, box-shadow .15s; }
.az2-tile:hover { border-color: var(--c); box-shadow: var(--sh); transform: translateY(-1px); }
.az2-tile:active { cursor: grabbing; }
.az2-tile.is-on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.az2-tile__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--c); color: #fff; box-shadow: 0 4px 12px -4px var(--c); }
.az2-tile__ic .i { width: 22px; height: 22px; stroke-width: 1.9; }
.az2-tile b { font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; }
.az2-tile em { font-size: 10px; font-style: normal; color: var(--faint); }
.az2-tile.is-soon { cursor: default; opacity: .5; }
.az2-tile.is-soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.az2-tile.is-soon .az2-tile__ic { box-shadow: none; }
/* Tijdens het slepen: waar je mag loslaten */
.az2-drophint { position: absolute; left: 50%; top: 16px; z-index: 3; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--fs-xs); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .15s; }
.is-drop .az2-drophint { opacity: 1; }
.is-drop { outline: 2px dashed var(--line-3); outline-offset: -8px; }
.is-drop--a .az2-link { min-height: 56px; }
.is-drop--a .az2-link::after { content: ""; position: absolute; inset: 10px 40px; border: 2px dashed transparent; border-radius: var(--r-md); pointer-events: none; }
.az2-link.is-over::after { border-color: var(--ink); background: var(--soft); }
.is-drop--a .az2-link * { pointer-events: none; }
.az2-node.is-over { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink), var(--sh-md); }
@media (max-width: 420px) { .az2-tiles { grid-template-columns: repeat(2, 1fr); } }

.az2-draghint span + span { display: none; }
@media (hover: none) { .az2-draghint span { display: none; } .az2-draghint span + span { display: inline; } .az2-tile { cursor: pointer; } }

/* ---------- Automatiseringen v3: rustiger kiezer, tijden, logica, sjablonen met beeld, mappen als bestanden ---------- */
.az2-tiles { gap: 6px; }
.az2-tile { min-height: 84px; padding: 12px 6px 10px; border-radius: 12px; gap: 7px; }
.az2-tile:hover { transform: none; box-shadow: none; border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, var(--card)); }
.az2-tile__ic { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; }
.az2-tile__ic .i { width: 19px; height: 19px; }
.az2-tile b { font-weight: 500; color: var(--text); }
.az2-sec h3 { margin: 18px 0 8px; letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.az2-draghint { display: none; }
/* Categorieën als filter */
.az2-cats { display: flex; gap: 6px; margin: 12px -20px 0; padding: 0 20px 2px; overflow-x: auto; scrollbar-width: none; }
.az2-cats::-webkit-scrollbar { display: none; }
.az2-cats button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font: 500 var(--fs-sm) var(--body); color: var(--text); cursor: pointer; white-space: nowrap; }
.az2-cats button:hover { border-color: var(--line-3); }
.az2-cats button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.az2-cats button em { font-style: normal; color: var(--faint); }
.az2-cats button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.az2-cats button.is-on em { color: rgba(255,255,255,.6); }
.az2-cats--page { margin: 0 0 20px; padding: 0; flex-wrap: wrap; }
/* Wachten en voorwaarde: kleine blokjes op de lijn */
.az2-mini { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; max-width: 400px; height: 36px; padding: 0 14px 0 5px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--card); box-shadow: var(--sh); font: 600 var(--fs-sm) var(--body); color: var(--ink); cursor: pointer; }
.az2-mini > .i { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #1f2937; color: #fff; }
.az2-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az2-mini:hover { border-color: var(--line-3); }
.az2-mini.is-sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh-md); }
.az2-mini.is-over { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
/* Tijd kiezen */
.az2-time { display: grid; gap: 10px; }
.az2-time__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.az2-time__chips button { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font: 500 var(--fs-sm) var(--body); color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.az2-time__chips button:hover { border-color: var(--line-3); }
.az2-time__chips button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.az2-time__own { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.az2-check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); color: var(--text); cursor: pointer; }
.az2-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.az2-check small { color: var(--faint); margin-left: 4px; }
/* Keten van stappen in de lijst */
.az2-chain { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.az2-chain i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--c); color: #fff; font-style: normal; }
.az2-chain i .i { width: 13px; height: 13px; stroke-width: 2; }
.az2-chain .az2-chain__w { width: auto; padding: 0 7px; background: var(--sunken); color: var(--muted); font: 600 11px var(--body); }
.az2-row.is-off .az2-chain { opacity: .45; }
.az2-row__stat { min-width: 40px; }
@media (max-width: 720px) { .az2-chain { display: none; } }
/* Mappen: "…" bij elke map, zoals in een verkenner */
.az2-fitem { position: relative; }
.az2-fitem > button:first-child { width: 100%; }
.az2-fitem__more { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; opacity: 0; }
.az2-fitem__more .i { width: 16px; height: 16px; }
.az2-fitem:hover .az2-fitem__more, .az2-fitem__more:focus-visible { opacity: 1; }
.az2-fitem__more:hover { background: var(--hover); color: var(--ink); }
.az2-fitem:hover > button:first-child em { visibility: hidden; }
@media (hover: none) { .az2-fitem__more { opacity: 1; } .az2-fitem > button:first-child em { visibility: hidden; } }
.az2-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--line); }
.az2-menu button.is-bad, .az2-menu button.is-bad .i, .az2-menu button.is-bad b { color: var(--err); }
/* Sjablonen: het verloop in beeld, weinig tekst */
.az2-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.az2-tpl { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.az2-tpl:hover { border-color: var(--c); box-shadow: var(--sh-md); transform: translateY(-2px); }
.az2-tpl__top { display: flex; align-items: center; justify-content: center; height: 96px; padding: 0 14px; background: color-mix(in srgb, var(--c) 9%, var(--card)); border-bottom: 1px solid color-mix(in srgb, var(--c) 14%, var(--line)); }
.az2-flowline { display: flex; align-items: center; flex-wrap: nowrap; }
.az2-fi { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--c); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.az2-fi .i { width: 19px; height: 19px; stroke-width: 1.9; }
.az2-fl-arr { flex: none; width: 14px; height: 2px; background: color-mix(in srgb, var(--c) 35%, var(--line-2)); }
.az2-fw { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 11px var(--body); color: var(--muted); white-space: nowrap; }
.az2-fw .i { width: 12px; height: 12px; }
.az2-tpl__b { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 4px; }
.az2-tpl__b b { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.az2-tpl__b small { font-size: var(--fs-sm); color: var(--muted); }
.az2-tpl__go { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px 12px; margin-top: auto; font-size: var(--fs-sm); }
.az2-tpl__go em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 600; color: var(--ok); }
.az2-tpl__go em .i { width: 13px; height: 13px; }
.az2-tpl__go span { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 600; color: var(--ink); opacity: 0; transition: opacity .15s; }
.az2-tpl__go span .i { width: 14px; height: 14px; }
.az2-tpl:hover .az2-tpl__go span, .az2-tpl:focus-visible .az2-tpl__go span { opacity: 1; }
@media (hover: none) { .az2-tpl__go span { opacity: 1; } }
.az2-cats, .az2-tpls { flex: none; }

/* ---------- Deals: bord aanpassen met het potlood (rechtstreeks op het bord) ---------- */
.ap-dt__icon.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ap-bedit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh); }
.ap-bedit__name { display: flex; align-items: center; gap: 8px; min-width: 200px; padding: 0 10px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.ap-bedit__name:focus-within { border-color: var(--ink); background: var(--card); }
.ap-bedit__name .i { width: 15px; height: 15px; color: var(--muted); }
.ap-bedit__name input { flex: 1; min-width: 0; border: 0; background: none; font: 600 var(--fs-md) var(--body); color: var(--ink); outline: none; }
.ap-bedit__saved { font-size: var(--fs-sm); color: var(--muted); }
.ap-bedit__saved.is-ok { color: var(--ok); }
.ap-board--edit { align-items: flex-start; }
.ap-bcol--edit { cursor: default; transition: opacity .15s, border-color .15s; }
.ap-bcol--edit.is-drag { opacity: .4; }
.ap-bcol--edit.is-over { border-color: var(--ink); background: var(--card); }
.ap-bcol--edit > header { gap: 6px; padding: 10px 10px 8px; }
.ap-bcol__grip { display: grid; place-items: center; flex: none; width: 18px; color: var(--faint); cursor: grab; }
.ap-bcol__grip .i { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.ap-bcol__name { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--c); color: var(--t, #fff); font: 600 var(--fs-base) var(--body); outline: none; }
.ap-bcol__name:focus { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); }
.ap-bcol__eye { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); cursor: pointer; }
.ap-bcol__eye .i { width: 16px; height: 16px; }
.ap-bcol__eye:hover { border-color: var(--line-3); }
.ap-bcol--edit.is-hid { opacity: .6; border-style: dashed; }
.ap-bcol--edit.is-hid .ap-bcol__name { background: var(--sunken); color: var(--muted); text-decoration: line-through; }
.ap-bcol--edit.is-hid .ap-bcol__eye { background: var(--ink); border-color: var(--ink); color: #fff; }
.ap-bcol__cfg { display: grid; gap: 12px; padding: 6px 12px 12px; }
.ap-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.ap-swatches button, .ap-swatches__own { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--s); cursor: pointer; transition: transform .12s; }
.ap-swatches button:hover, .ap-swatches__own:hover { transform: scale(1.12); }
.ap-swatches .is-on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--s); }
.ap-swatches__own { display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--muted); overflow: hidden; }
.ap-swatches__own.is-on { background: var(--s); color: #fff; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--s); }
.ap-swatches__own .i { width: 13px; height: 13px; }
.ap-swatches__own input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ap-bcol__f { display: grid; gap: 4px; }
.ap-bcol__f span { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.ap-bcol__f select { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font: 500 var(--fs-base) var(--body); color: var(--ink); }
.ap-bcol__foot { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 801px) { .ap-bedit { margin-left: 28px; margin-right: 28px; } }
.az2-cats--page { margin-bottom: 4px; }

/* ---------- Deals: bord aanpassen, eenvoudig (naam, bolletje, vuilbak, oog) ---------- */
.ap-bedit { padding: 6px 0 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.ap-bedit__name { min-width: 0; flex: 0 1 420px; height: 44px; padding: 0 12px; gap: 10px; border: 1px solid transparent; background: none; }
.ap-bedit__name:hover { border-color: var(--line); }
.ap-bedit__name:focus-within { border-color: var(--ink); background: var(--card); }
.ap-bedit__name input { font: 600 var(--fs-2xl) var(--body); order: 0; }
.ap-bedit__name .i { order: 1; width: 18px; height: 18px; color: var(--ink); }
.ap-board--edit { align-items: stretch; }
.ap-ecol { flex: 0 0 280px; display: flex; flex-direction: column; min-height: 420px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); cursor: grab; transition: opacity .15s, border-color .15s, box-shadow .15s; }
.ap-ecol.is-drag { opacity: .4; }
.ap-ecol.is-over { border-color: var(--ink); box-shadow: var(--sh-md); }
.ap-ecol > header { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.ap-ecol > header:focus-within { border-color: var(--ink); background: var(--card); }
.ap-ecol > header input { flex: 1; min-width: 0; height: 30px; border: 0; background: none; font: 500 var(--fs-md) var(--body); color: var(--ink); outline: none; cursor: text; }
.ap-ecol__dot { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: transform .12s; }
.ap-ecol__dot:hover { transform: scale(1.08); }
.ap-ecol__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ap-ecol__body small { font-size: var(--fs-sm); color: var(--faint); }
.ap-ecol > footer { display: flex; gap: 8px; padding: 4px; }
.ap-ecol__del, .ap-ecol__eye { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: background .15s; }
.ap-ecol__del { background: var(--err-bg, #fde8e7); color: var(--err); }
.ap-ecol__del:hover { background: var(--err); color: #fff; }
.ap-ecol__eye { background: var(--sunken); color: var(--ink); }
.ap-ecol__eye:hover { background: var(--line); }
.ap-ecol__del .i, .ap-ecol__eye .i { width: 16px; height: 16px; }
.ap-ecol.is-hid { background: var(--soft); border-style: dashed; }
.ap-ecol.is-hid > header input { color: var(--muted); text-decoration: line-through; }
.ap-ecol.is-hid .ap-ecol__dot { opacity: .4; }
.ap-ecol.is-hid .ap-ecol__eye { background: var(--ink); color: #fff; }
.ap-ecol--add { flex: 0 0 140px; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--line-2); background: transparent; font: 500 var(--fs-md) var(--body); color: var(--muted); cursor: pointer; }
.ap-ecol--add:hover { border-color: var(--ink); color: var(--ink); background: var(--card); }
.ap-cpop { z-index: 400; width: 244px; padding: 12px; display: grid; gap: 12px; }
.ap-cpop.ap-dtmenu { display: block; width: 250px; padding: 6px; }
.ap-cpop__f { display: grid; gap: 4px; }
.ap-cpop__f span { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.ap-cpop__f select { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font: 500 var(--fs-base) var(--body); color: var(--ink); }
@media (max-width: 800px) { .ap-ecol { flex-basis: 78vw; min-height: 300px; } .ap-bedit__name input { font-size: var(--fs-xl); } }
.ap-cpop .ap-swatches button { display: block; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: var(--s) !important; }
.ap-cpop .ap-swatches { gap: 8px; }
.ap-bedit__name { flex: 0 1 auto; }
.ap-bedit__name input { field-sizing: content; min-width: 6ch; max-width: 36ch; }
.ap-board--edit { height: calc(100% - 72px); padding-top: 16px; }
.ap-ecol { min-height: 0; }
@media (max-width: 800px) { .ap-bedit { gap: 8px; padding: 0 0 12px; } .ap-bedit__name { flex: 1 1 100%; padding: 0 4px; } .ap-bedit > .ap-grow { display: none; } .ap-bedit > .ap-btn { flex: 1; } .ap-board--edit { height: auto; padding-top: 12px; } .ap-ecol { height: 340px; } }

/* ---------- Deals: bord aanpassen als eigen pagina ---------- */
.ap-bfull { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: var(--paper); animation: bfIn .18s var(--ease); }
@keyframes bfIn { from { opacity: 0; } to { opacity: 1; } }
.ap-bfull__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--card); }
.ap-bfull__name { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r-md); cursor: text; }
.ap-bfull__name:hover { border-color: var(--line); }
.ap-bfull__name:focus-within { border-color: var(--ink); }
.ap-bfull__name input { field-sizing: content; min-width: 6ch; max-width: 40ch; border: 0; background: none; font: 400 var(--fs-2xl) var(--body); color: var(--ink); outline: none; }
.ap-bfull__name .i { flex: none; width: 20px; height: 20px; color: var(--ink); }
.ap-bfull__bar .ap-btn[disabled] { opacity: .45; cursor: default; }
.ap-bfull__board { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 18px; padding: 22px 24px; overflow-x: auto; scrollbar-width: thin; }
.ap-bfull .ap-ecol { flex: 0 0 360px; height: auto; min-height: 0; padding: 9px; border-radius: var(--r-md); background: var(--soft); border: 1px solid var(--line); }
.ap-bfull .ap-ecol > header { padding: 8px 8px 8px 14px; background: var(--sunken); border-color: var(--line); border-radius: var(--r-sm); }
.ap-bfull .ap-ecol > header input { font: 400 var(--fs-lg) var(--body); }
.ap-bfull .ap-ecol__dot { width: 40px; height: 40px; }
.ap-bfull .ap-ecol > footer { gap: 10px; padding: 6px 2px 2px; }
.ap-bfull .ap-ecol__del, .ap-bfull .ap-ecol__eye { width: 40px; height: 40px; }
.ap-bfull .ap-ecol.is-hid { opacity: .55; border-style: solid; }
.ap-bfull .ap-ecol.is-hid > header input { text-decoration: none; }
.ap-bfull .ap-ecol--add { flex: 0 0 72px; padding: 0; min-height: 0; background: transparent; }
.ap-bfull .ap-ecol--add .i { width: 22px; height: 22px; }
@media (max-width: 800px) {
  .ap-bfull__bar { flex-wrap: wrap; padding: 12px 16px; }
  .ap-bfull__name { flex: 1 1 100%; }
  .ap-bfull__name input { font-size: var(--fs-xl); }
  .ap-bfull__bar > .ap-grow { display: none; }
  .ap-bfull__bar > .ap-btn { flex: 1; }
  .ap-bfull__board { padding: 16px; gap: 12px; }
  .ap-bfull .ap-ecol { flex-basis: 80vw; }
}

/* ---------- Bord aanpassen in de Beavr-stijl (zijbalk blijft, gekleurde fasepillen) ---------- */
.ap-bfull { left: var(--side); background: var(--paper); }
.ap-bfull__bar { padding: 22px 28px 16px; border: 0; background: none; align-items: flex-end; }
.ap-bfull__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-bfull__t small { padding-left: 11px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ap-bfull__name { padding: 2px 10px; }
.ap-bfull__name input { font: 700 var(--fs-3xl)/1.15 var(--display, var(--body)); letter-spacing: -.02em; }
.ap-bfull__name .i { width: 18px; height: 18px; color: var(--muted); }
.ap-bfull__name:hover .i, .ap-bfull__name:focus-within .i { color: var(--ink); }
.ap-bfull__bar .ap-btn { height: 40px; }
.ap-bfull__board { gap: 14px; padding: 8px 28px 24px; }
.ap-bfull .ap-ecol { flex: 0 0 290px; padding: 0; gap: 0; border: 1px solid rgba(0,0,0,.05); border-radius: var(--r-lg); background: rgba(255,255,255,.7); }
.ap-bfull .ap-ecol > header { gap: 8px; padding: 12px 12px 8px; border: 0; border-radius: 0; background: none; }
.ap-bfull .ap-ecol > header input { flex: 1; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c); color: var(--t, #fff); font: 600 var(--fs-base) var(--body); }
.ap-bfull .ap-ecol > header input:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.ap-bfull .ap-ecol > header:focus-within { background: none; }
.ap-bfull .ap-ecol__dot { width: 30px; height: 30px; background: var(--c); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line-2); }
.ap-bfull .ap-ecol__dot:hover { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ink); transform: none; }
.ap-bfull .ap-ecol__body { margin: 6px 10px; border: 1.5px dashed var(--line); border-radius: var(--r-md); }
.ap-bfull .ap-ecol__body span { font-size: var(--fs-base); color: var(--muted); }
.ap-bfull .ap-ecol > footer { padding: 4px 10px 12px; gap: 6px; }
.ap-bfull .ap-ecol__del, .ap-bfull .ap-ecol__eye { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.ap-bfull .ap-ecol__del:hover { border-color: var(--err); background: var(--card); color: var(--err); }
.ap-bfull .ap-ecol__eye:hover { border-color: var(--line-3); color: var(--ink); background: var(--card); }
.ap-bfull .ap-ecol.is-hid { opacity: 1; background: transparent; border: 1.5px dashed var(--line-2); }
.ap-bfull .ap-ecol.is-hid > header input { background: var(--sunken); color: var(--muted); }
.ap-bfull .ap-ecol.is-hid .ap-ecol__dot { opacity: .35; }
.ap-bfull .ap-ecol.is-hid .ap-ecol__eye { background: var(--ink); border-color: var(--ink); color: #fff; }
.ap-bfull .ap-ecol.is-drag { opacity: .35; }
.ap-bfull .ap-ecol.is-over { border-color: var(--ink); box-shadow: var(--sh-md); }
.ap-bfull .ap-ecol--add { flex: 0 0 180px; flex-direction: column; gap: 8px; border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: transparent; font: 500 var(--fs-md) var(--body); color: var(--muted); }
.ap-bfull .ap-ecol--add:hover { border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,.6); }
@media (max-width: 800px) {
  .ap-bfull { left: 0 !important; top: 58px; bottom: 76px; }
  .ap-bfull__bar { padding: 14px 16px 10px; }
  .ap-bfull__name input { font-size: var(--fs-2xl); }
  .ap-bfull__board { padding: 6px 16px 16px; }
  .ap-bfull .ap-ecol { flex-basis: 78vw; }
}
.ap-bfull__name input { font: 800 var(--fs-2xl)/1.2 var(--display); letter-spacing: -.015em; }

/* ---------- Bord aanpassen op het bord zelf: bijna hetzelfde als gewoon ---------- */
.ap-bedit2 { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ap-bedit2__name { display: flex; align-items: center; gap: 8px; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.ap-bedit2__name:focus-within { border-color: var(--ink); }
.ap-bedit2__name .i { width: 15px; height: 15px; color: var(--muted); flex: none; }
.ap-bedit2__name input { field-sizing: content; min-width: 8ch; max-width: 36ch; border: 0; background: none; font: 600 var(--fs-md) var(--body); color: var(--ink); outline: none; }
.ap-bedit2 .ap-btn[disabled] { opacity: .45; cursor: default; }
.ap-bcol--ed { cursor: grab; }
.ap-bcol--ed > header { gap: 6px; }
.ap-bcol__pin { flex: 0 1 auto; min-width: 0; max-width: 170px; height: 26px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: var(--c); color: var(--t, #fff); font: 600 var(--fs-base) var(--body); outline: none; cursor: text; box-shadow: 0 0 0 0 transparent; transition: box-shadow .15s; }
.ap-bcol__pin:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line-3); }
.ap-bcol__pin:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.ap-bcol__cdot { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line-2); transition: box-shadow .15s; }
.ap-bcol__cdot:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); }
.ap-bcol--ed .ap-bcol__list { pointer-events: none; }
.ap-bcol--ed .ap-kcard { opacity: .75; }
.ap-bcol__edf { display: flex; align-items: center; gap: 4px; padding: 6px 10px 10px; border-top: 1px solid rgba(0,0,0,.05); }
.ap-bcol__edf .ap-icon--danger { margin-left: auto; }
.ap-bcol--ed.is-hid { background: transparent; border-style: dashed; border-color: var(--line-2); }
.ap-bcol--ed.is-hid .ap-bcol__pin { background: var(--sunken); color: var(--muted); }
.ap-bcol--ed.is-hid .ap-bcol__cdot { opacity: .35; }
.ap-bcol--ed.is-hid .ap-bcol__list { opacity: .35; }
.ap-bcol--ed.is-hid [data-ehide] { background: var(--ink); color: #fff; }
.ap-bcol--ed.is-drag { opacity: .35; }
.ap-bcol--ed.is-over { border-color: var(--ink); }
@media (max-width: 800px) { .ap-bedit2 { flex-wrap: wrap; } .ap-bedit2__name { flex: 1 1 100%; } .ap-bedit2 > .ap-grow { display: none; } .ap-bedit2 > .ap-btn { flex: 1; } }
.ap-bcol--ed { min-width: 0; overflow: hidden; } .ap-bcol--ed > header { min-width: 0; } .ap-bcol__pin { width: 0; flex: 1 1 auto; max-width: max-content; field-sizing: content; }
.ap-bcol--ed .ap-bcol__sum { display: none; } .ap-bcol--ed > header em { margin-left: auto; } .ap-bcol__pin { width: auto; flex: 0 1 auto; max-width: 210px; }

/* ---------- Omzetten naar deal: in stappen (bord, fase, opties) ---------- */
.ap-conv { width: 300px; padding: 8px; }
.ap-conv__h { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 8px 8px; border-bottom: 1px solid var(--line); margin: 0 -8px 6px; padding-left: 14px; }
.ap-conv__h:has(.ap-icon) { padding-left: 6px; }
.ap-conv__h b { font: 700 var(--fs-md) var(--display); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-conv__list { display: flex; flex-direction: column; gap: 2px; }
.ap-conv__list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: var(--r-md); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.ap-conv__list button:hover, .ap-conv__list button:focus-visible { background: var(--hover); outline: none; }
.ap-conv__list button > b { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-conv__list button > .i:last-child { width: 15px; height: 15px; color: var(--faint); transform: rotate(-90deg); }
.ap-conv__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ap-conv__dots { display: flex; gap: 2px; flex: none; }
.ap-conv__dots i { width: 6px; height: 18px; border-radius: 3px; background: var(--c); }
.ap-conv__pill { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--r-pill); background: var(--c); color: var(--t, #fff); font: 600 var(--fs-base) var(--body); }
.ap-conv__opts button { align-items: flex-start; padding: 12px 10px; }
.ap-conv__opts button > .i { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); }
.ap-conv__opts button:first-child > .i { background: var(--y); }
.ap-conv__opts span { display: flex; flex-direction: column; gap: 2px; }
.ap-conv__opts span b { font-size: var(--fs-md); font-weight: 700; }
.ap-conv__opts span small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }

/* ---------- Omzetten naar deal: keuzelijsten ---------- */
.ap-conv { width: 340px; padding: 18px; }
.ap-conv h3 { margin: 0 0 16px; }
.ap-conv__f { margin-bottom: 16px; }
.ap-dd { position: relative; }
.ap-dd__btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.ap-dd__btn:hover, .ap-dd__btn[aria-expanded="true"] { border-color: var(--ink); }
.ap-dd__btn > b { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-dd__btn > .i { width: 17px; height: 17px; color: var(--muted); flex: none; }
.ap-dd__btn > .i:last-child { color: var(--ink); }
.ap-dd__pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 14px; border: 0; border-radius: var(--r-pill); background: var(--c); color: var(--t, #fff); font: 600 var(--fs-base) var(--body); cursor: pointer; }
.ap-dd__pill .i { width: 15px; height: 15px; }
.ap-dd__pill:hover, .ap-dd__pill[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); }
.ap-dd__list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--sh-lg); }
.ap-dd__pill + .ap-dd__list { right: auto; min-width: 240px; }
.ap-dd__list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.ap-dd__list button:hover, .ap-dd__list button:focus-visible { background: var(--hover); outline: none; }
.ap-dd__list button > b { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 500; }
.ap-dd__list button > .i { width: 16px; height: 16px; color: var(--muted); flex: none; }
.ap-dd__list button > .i:last-child:not(:first-child) { color: var(--ink); }
.ap-conv__dup { margin: 0 0 18px; }
.ap-conv { overflow: visible; max-height: none; }

/* ---------- Aanvraag / deal: overzichtelijk (prijs en acties bovenaan, tegels, kaarten) ---------- */
.ap-ld2 { display: flex; flex-direction: column; gap: 14px; }
.ap-ld2 > * { margin: 0; }
.ap-ld2__head { display: flex; align-items: center; gap: 14px; }
.ap-ld2__who { flex: 1; min-width: 0; }
.ap-ld2__who h2 { margin: 0; font: 800 var(--fs-2xl)/1.2 var(--display); color: var(--ink); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ld2__who p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.ap-ld2__rel { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; }
.ap-ld2__rel:hover { border-color: var(--line-3); }
.ap-ld2__rel .i { width: 15px; height: 15px; }
.ap-ld2__price { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 16px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); }
.ap-ld2__amt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-ld2__amt small { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ap-ld2__amt b { font: 800 var(--fs-3xl)/1.1 var(--display); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ap-ld2__seen { font-size: var(--fs-sm); color: var(--muted); }
.ap-ld2__acts { display: flex; gap: 8px; grid-row: 1; grid-column: 2; align-self: center; }
.ap-ld2__svc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.ap-ld2__svc span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--y-soft); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ap-ld2__svc i { font-style: normal; font-weight: 500; color: var(--muted); }
.ap-ld2__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.ap-ld2__contact a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.ap-ld2__contact a:hover { border-color: var(--line-3); box-shadow: var(--sh); }
.ap-ld2__contact a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ap-ld2__contact small { font-size: var(--fs-xs); color: var(--muted); }
.ap-ld2__contact b { font-size: var(--fs-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ld2__ci { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--sunken); color: var(--ink); }
.ap-ld2__ci .i { width: 17px; height: 17px; }
.ap-ld2__ci.is-wa { background: #25d366; color: #fff; }
.ap-ld2__card { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.ap-ld2__card .ap-field:last-child { margin-bottom: 0; }
.ap-ld2__h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ap-ld2__h small { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 500 var(--fs-sm) var(--body); color: var(--muted); }
.ap-ld2__h small .i { width: 13px; height: 13px; }
.ap-ld2__grp + .ap-ld2__grp { margin-top: 16px; }
.ap-ld2__grp > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ap-ld2__grp > header b { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.ap-ld2__grp > header span { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-ld2__qa { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ap-ld2__qa > div { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: var(--r-md); background: var(--soft); }
.ap-ld2__qa small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.3; }
.ap-ld2__qa b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.3; }
.ap-ld2__qa em { font-style: normal; font-size: var(--fs-sm); font-weight: 600; text-align: left; }
.ap-ld2__qa > div.is-none { opacity: .6; }
.ap-ld2__fine { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.ap-ld2__fine .i { width: 14px; height: 14px; flex: none; }
.ap-ld2__notes textarea { width: 100%; min-height: 90px; resize: vertical; background: var(--soft); border-color: transparent; }
.ap-ld2__notes textarea:focus { background: var(--card); }
.ap-ld2__foot { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.ap-ld2__del { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: none; font: 500 var(--fs-sm) var(--body); color: var(--muted); cursor: pointer; }
.ap-ld2__del:hover { color: var(--err); background: var(--err-bg, #fde8e7); }
.ap-ld2__del .i { width: 14px; height: 14px; }
.ap-ld2 .ap-bookset, .ap-ld2 [data-bookbox] .ap-note { margin: 0; border-radius: var(--r-md); }
@media (max-width: 700px) {
  .ap-ld2__price { grid-template-columns: 1fr; }
  .ap-ld2__acts { grid-row: auto; grid-column: 1; }
  .ap-ld2__acts .ap-btn { flex: 1; }
  .ap-ld2__qa { grid-template-columns: 1fr 1fr; }
}

/* ---------- Aanvraag / deal v2: twee kolommen, rustig en neutraal ---------- */
.ap-ld2 { container-type: inline-size; gap: 0; }
.ap-ld2__head { align-items: flex-start; gap: 16px; padding-bottom: 6px; }
.ap-ld2__who h2 { white-space: normal; }
.ap-ld2__who p { font-size: var(--fs-base); }
.ap-ld2__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; grid-row: auto; grid-column: auto; align-self: flex-start; }
.ap-ld2__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 0 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.ap-ld2__price b { font: 800 var(--fs-3xl)/1.1 var(--display); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ap-ld2__price span { font-size: var(--fs-sm); color: var(--muted); }
.ap-ld2 > .ap-note { margin-top: 14px; }
.ap-ld2__cols { display: grid; grid-template-columns: 1fr; }
@container (min-width: 700px) {
  .ap-ld2__cols { grid-template-columns: minmax(0, 1fr) 260px; gap: 0 36px; }
  .ap-ld2__side { padding-left: 28px; border-left: 1px solid var(--line); }
}
.ap-ld2__sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.ap-ld2__main .ap-ld2__sec:last-child, .ap-ld2__side .ap-ld2__sec:last-child { border-bottom: 0; }
.ap-ld2__sec > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font: 700 var(--fs-md) var(--body); color: var(--ink); }
.ap-ld2__sec > h3 small { font-weight: 500; font-size: var(--fs-sm); color: var(--faint); }
.ap-ld2__sec:has([data-bookbox]:empty):not(:has(.ap-ld2__fine)) { display: none; }
.ap-ld2__note { margin: 0; padding-left: 12px; border-left: 2px solid var(--line-2); font-size: var(--fs-md); color: var(--text); white-space: pre-wrap; }
.ap-ld2__grp + .ap-ld2__grp { margin-top: 14px; }
.ap-ld2__grp h4 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.ap-ld2__grp h4 span { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-ld2__dl { margin: 0; }
.ap-ld2__dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.ap-ld2__dl > div:first-child { border-top: 0; }
.ap-ld2__dl dt { font-size: var(--fs-base); color: var(--muted); }
.ap-ld2__dl dd { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.ap-ld2__dl dd em { flex: none; font-style: normal; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-ld2__dl .is-none dd { font-weight: 500; color: var(--muted); }
.ap-ld2__fine { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--faint); }
.ap-ld2__notes textarea, .ap-ld2__sec textarea { width: 100%; min-height: 84px; resize: vertical; background: var(--card); border: 1px solid var(--line); }
.ap-ld2__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-ld2__list a, .ap-ld2__list li.is-info { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; margin: 0 -8px; border-radius: var(--r-sm); font-size: var(--fs-base); color: var(--ink); text-decoration: none; }
.ap-ld2__list a:hover { background: var(--hover); }
.ap-ld2__list .i { flex: none; width: 16px; height: 16px; color: var(--muted); }
.ap-ld2__list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ld2__list li.is-info { color: var(--muted); }
.ap-ld2__side .ap-field { margin-bottom: 12px; }
.ap-ld2__side .ap-bookset summary { font-size: var(--fs-base); }
.ap-ld2__tasks { padding-top: 6px; }
.ap-ld2__foot { justify-content: flex-start; padding-top: 18px; border-top: 1px solid var(--line); }
.ap-ld2__del:hover { background: none; text-decoration: underline; }
@media (max-width: 700px) { .ap-ld2__head { flex-direction: column; } .ap-ld2__acts { justify-content: flex-start; } .ap-ld2__dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* Zijbalk: geen kaart met de proefperiode (staat bij Account > Pakket), menu verticaal in het midden */
.ap-side .ap-plan-mini { display: none; }
.ap-side .ap-snav { margin-block: auto; }
/* Aanvraag: naam zonder inspringen */
.ap-ld2 .ap-ld2__head { margin: 0; padding-left: 0; }
.ap-ld2 .ap-ld2__who { margin: 0; padding: 0; }
.ap-ld2 .ap-ld2__head { align-items: flex-start; margin-bottom: 0; } .ap-ld2 .ap-ld2__who { text-align: left; }

/* ---------- Aanvraag / deal v3: één brede kolom, ruim, één rij acties ---------- */
.ap-ld3 { max-width: 780px; }
.ap-ld3__head { display: block; margin: 8px 0 0; }
.ap-ld3__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 var(--fs-3xl)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ap-ld3__head h2 .ap-test { font-size: var(--fs-xs); }
.ap-ld3__head p { margin: 6px 0 0; font-size: var(--fs-md); color: var(--muted); }
.ap-ld3__contact { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ap-ld3__contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.ap-ld3__contact a:hover { border-color: var(--ink); }
.ap-ld3__contact span { color: var(--muted); }
.ap-ld3__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.ap-ld3__price b { font: 800 34px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-ld3__price span { font-size: var(--fs-base); color: var(--muted); }
.ap-ld3__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 24px 0 8px; }
.ap-ld3__act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 76px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); font: 600 var(--fs-base) var(--body); color: var(--ink); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.ap-ld3__act:hover { border-color: var(--ink); }
.ap-ld3__act .i { width: 20px; height: 20px; }
.ap-ld3__sec { padding: 28px 0; border-bottom: 1px solid var(--line); }
.ap-ld3__sec > h3, .ap-ld3 .bx-tbox > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ap-ld3__sec > h3 small { font: 500 var(--fs-sm) var(--body); color: var(--faint); }
.ap-ld3 .bx-tbox > h3 .i { display: none; }
.ap-ld3 .bx-tbox { margin: 0; }
.ap-ld3 .bx-empty { padding: 0 0 12px; color: var(--muted); }
.ap-ld3__tasks:has([data-tasks]:empty) { display: none; }
.ap-ld3__visit:has([data-bookbox]:empty):not(:has(.ap-ld2__fine)) { display: none; }
.ap-ld3__deal { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 12px; }
.ap-ld3__deal .ap-field { margin: 0; }
.ap-ld3 .ap-ld2__dl > div { padding: 12px 0; }
.ap-ld3 .ap-ld2__dl dt, .ap-ld3 .ap-ld2__dl dd { font-size: var(--fs-md); }
.ap-ld3 .ap-ld2__grp h4 { margin: 0 0 6px; font-size: var(--fs-md); }
.ap-ld3 .ap-ld2__grp + .ap-ld2__grp { margin-top: 22px; }
.ap-ld3 textarea[data-notes] { width: 100%; min-height: 110px; resize: vertical; }
.ap-ld3 .ap-ld2__foot { border-top: 0; padding-top: 20px; }
@media (max-width: 700px) {
  .ap-ld3__head h2 { font-size: var(--fs-2xl); }
  .ap-ld3__price b { font-size: 28px; }
  .ap-ld3__acts { grid-template-columns: repeat(3, 1fr); }
  .ap-ld3__act { min-height: 68px; }
  .ap-ld3__deal { grid-template-columns: 1fr; }
  .ap-ld3__sec { padding: 22px 0; }
}
.ap-ld.ap-ld3 > header.ap-ld3__head { display: block; margin: 8px 0 0; } .ap-ld.ap-ld3 > header.ap-ld3__head p { margin: 6px 0 0; } .ap-ld.ap-ld3 > header.ap-ld3__head .ap-ld3__contact { margin-top: 10px; }
.ap-ld3__acts2 { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.ap-ld3 .bx-empty { display: none; }
.ap-ld3 .ap-ld2__grp > h4:empty { display: none; }

/* Inbox: Open en Archief zien er hetzelfde uit */
.ap-ibx__st { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: var(--fs-sm); color: var(--muted); }
.ap-ibx__st i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ap-ibx__acts a.ap-ibx__qa, .ap-ibx__acts button.ap-ibx__qa { width: 30px; height: 30px; border-radius: var(--r-sm); background: none; color: var(--muted); }
.ap-ibx__acts a.ap-ibx__qa:hover, .ap-ibx__acts button.ap-ibx__qa:hover { background: rgba(0,0,0,.06); color: var(--ink); }
@media (hover: hover) {
  .ap-ibx__acts [data-restore], .ap-ibx__acts a.ap-ibx__qa { display: none; }
  .ap-ibx__row:hover .ap-ibx__acts [data-restore], .ap-ibx__row:hover .ap-ibx__acts a.ap-ibx__qa, .ap-ibx__row:focus-within .ap-ibx__acts [data-restore], .ap-ibx__row:focus-within .ap-ibx__acts a.ap-ibx__qa { display: grid; }
  .ap-ibx__row:hover .ap-ibx__l1 time { visibility: hidden; }
}

/* Bord verwijderen: kiezen wat er met de deals gebeurt */
.ap-bdel { display: grid; gap: 8px; margin: 14px 0 4px; }
.ap-bdel__opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.ap-bdel__opt:has(input:checked) { border-color: var(--ink); }
.ap-bdel__opt input[type=radio] { margin-top: 3px; accent-color: var(--ink); }
.ap-bdel__opt > span { display: grid; gap: 6px; flex: 1; min-width: 0; }
.ap-bdel__opt b { font-size: var(--fs-md); color: var(--ink); }
.ap-bdel__opt small { font-size: var(--fs-sm); color: var(--muted); }
.ap-bdel__opt:has(input[value=delete]:checked) { border-color: var(--err); }

/* ---------- Aanvraag / deal v4: een duidelijke fiche (kaarten, gegevens met labels) ---------- */
.ap-ld4 { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.ap-ld4 > * { margin: 0; }
.ap-ld4__hero, .ap-ld4__card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.ap-ld4__hero { padding: 22px 24px 0; }
.ap-ld4__top { display: flex; align-items: flex-start; gap: 16px; }
.ap-ld4__ava { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: #fff; font: 800 var(--fs-xl) var(--display); }
.ap-ld4__who { flex: 1; min-width: 0; }
.ap-ld4__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.ap-ld4__name h2 { margin: 0; font: 800 var(--fs-2xl)/1.2 var(--display); letter-spacing: -.015em; color: var(--ink); }
.ap-ld4__who p { margin: 4px 0 0; font-size: var(--fs-md); color: var(--muted); }
.ap-ld4__st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--soft); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; }
.ap-ld4__st i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ap-ld4__acts { display: flex; gap: 8px; flex: none; }
.ap-ld4__facts { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; margin: 20px -24px 0; border-top: 1px solid var(--line); }
.ap-ld4__fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 24px 18px; border-left: 1px solid var(--line); }
.ap-ld4__fact:first-child { border-left: 0; }
.ap-ld4__fact small { font-size: var(--fs-sm); color: var(--muted); }
.ap-ld4__fact b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ld4__fact.is-big b { font: 800 var(--fs-2xl)/1.15 var(--display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: normal; }
.ap-ld4__fact b i { display: block; margin-top: 2px; font: 500 var(--fs-sm) var(--body); color: var(--muted); font-style: normal; }
.ap-ld4__card { padding: 20px 24px 22px; }
.ap-ld4__card > header { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.ap-ld4__card > header h3 { margin: 0; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ap-ld4__sub { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--muted); }
.ap-ld4__sub .i { width: 13px; height: 13px; }
.ap-ld4__link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; }
.ap-ld4__link:hover { text-decoration: underline; }
.ap-ld4__link .i { width: 15px; height: 15px; }
.ap-ld4__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-ld4__f { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.ap-ld4__f small { font-size: var(--fs-sm); color: var(--muted); }
.ap-ld4__v { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ap-ld4__v > a, .ap-ld4__v > span { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ld4__v > a:hover { text-decoration: underline; }
.ap-ld4__v > .is-empty { font-weight: 500; color: var(--faint); }
.ap-ld4__copy { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.ap-ld4__copy .i { width: 14px; height: 14px; }
.ap-ld4__f:hover .ap-ld4__copy, .ap-ld4__copy:focus-visible { opacity: 1; }
.ap-ld4__copy:hover { background: var(--card); color: var(--ink); }
@media (hover: none) { .ap-ld4__copy { opacity: 1; } }
.ap-ld4__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ap-ld4__msg { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--soft); font-size: var(--fs-md); line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.ap-ld4 .ap-ld2__grp h4 { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.ap-ld4 .ap-ld2__grp + .ap-ld2__grp { margin-top: 20px; }
.ap-ld4 .ap-ld2__dl > div { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 12px 0; }
.ap-ld4 .ap-ld2__dl dt, .ap-ld4 .ap-ld2__dl dd { font-size: var(--fs-md); }
.ap-ld4 .ap-ld2__dl dd em { padding: 2px 8px; border-radius: var(--r-pill); background: var(--soft); font-size: var(--fs-sm); }
.ap-ld4__two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ap-ld4__two > .ap-ld4__card { min-width: 0; }
.ap-ld4 .bx-tbox > h3 { display: flex; margin: 0 0 16px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ap-ld4 .bx-tbox > h3 .i { display: none; }
.ap-ld4 .bx-empty { display: none; }
.ap-ld4 textarea[data-notes] { width: 100%; min-height: 110px; resize: vertical; background: var(--soft); border-color: transparent; }
.ap-ld4 textarea[data-notes]:focus { background: var(--card); border-color: var(--ink); }
.ap-ld4 .ap-ld2__foot { border: 0; padding: 4px 4px 0; }
.ap-ld4 .ap-ld3__deal { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 12px; }
.ap-ld4 .ap-ld3__deal .ap-field { margin: 0; }
@container (max-width: 620px) {
  .ap-ld4__top { flex-wrap: wrap; }
  .ap-ld4__acts { width: 100%; }
  .ap-ld4__acts .ap-btn { flex: 1; }
  .ap-ld4__facts { grid-template-columns: 1fr 1fr; }
  .ap-ld4__fact:nth-child(3) { border-left: 0; }
  .ap-ld4__fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ap-ld4__grid { grid-template-columns: 1fr; }
  .ap-ld4 .ap-ld3__deal { grid-template-columns: 1fr; }
  .ap-ld4 .ap-ld2__dl > div { grid-template-columns: 1fr; gap: 2px; }
  .ap-ld4__hero, .ap-ld4__card { padding-left: 18px; padding-right: 18px; }
  .ap-ld4__facts { margin-left: -18px; margin-right: -18px; }
  .ap-ld4__fact { padding: 14px 18px; }
}
.ap-ld4__fact b { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } .ap-ld4 .ap-ld2__dl dd { align-items: flex-start; } .ap-ld4 .ap-ld2__dl dd em { align-self: flex-start; }
.ap-ld4__two { grid-template-columns: 1fr; }
.ap-ld4__fact b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } .ap-ld4__fact.is-big b { white-space: nowrap; } .ap-ld4__fact b i { display: none; } .ap-ld4__facts { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.ap-ld4__facts { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); } @container (max-width: 620px) { .ap-ld4__facts { grid-template-columns: 1fr 1fr; } .ap-ld4__fact.is-big { grid-column: 1 / -1; } .ap-ld4__fact:nth-child(2) { border-left: 0; border-top: 1px solid var(--line); } .ap-ld4__fact:nth-child(3) { border-left: 1px solid var(--line); } }

/* Aanvraag v4: kleur waar het iets betekent */
.ap-ld4__st { height: 26px; padding: 0 11px; border: 0; background: var(--c); color: var(--t, #fff); font-weight: 600; }
.ap-ld4__ava { background: var(--c, var(--ink)); }
.ap-ld4__card > header h3 { display: flex; align-items: center; gap: 10px; }
.ap-ld4__hi { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--c); color: #fff; }
.ap-ld4__hi .i { width: 15px; height: 15px; stroke-width: 2; }
.ap-ld4 .bx-tbox > h3 { align-items: center; gap: 10px; }
.ap-ld4 .bx-tbox > h3 .i { display: block; width: 28px; height: 28px; padding: 6.5px; border-radius: 8px; background: #3b5bff; color: #fff; stroke-width: 2; }
.ap-ld4__f small { display: flex; align-items: center; gap: 7px; }
.ap-ld4__fi { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--c); color: #fff; font-style: normal; }
.ap-ld4__fi .i { width: 12px; height: 12px; stroke-width: 2.2; }
.ap-ld4__q.is-call .i { color: #00b85c; }
.ap-ld4__q.is-wa .i { color: #25d366; }
.ap-ld4__q.is-mail .i { color: #00a6ff; }
.ap-ld4 .ap-ld2__dl dd em.is-up { background: #fff1e0; color: #b45309; }
.ap-ld4 .ap-ld2__dl dd em.is-down { background: #e3f7ec; color: #047857; }

/* Minder kleur: enkel status, avatar en prijseffecten */
.ap-ld4__hi, .ap-ld4 .bx-tbox > h3 .i { background: var(--sunken) !important; color: var(--ink) !important; }
.ap-ld4__fi { display: none; }
.ap-ld4__q .i { color: currentColor !important; }
.ap-dd__list.is-up { top: auto; bottom: calc(100% + 6px); } .ap-dd__list { overscroll-behavior: contain; scrollbar-width: thin; }

/* Gesprekken: Alle / Ongelezen / Wacht op jou, daaronder Archief | Afgerond */
.ix2-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 10px 16px 0; padding: 3px; border-radius: var(--r-md); background: var(--sunken); }
.ix2-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 34px; padding: 0 6px; border: 0; border-radius: 8px; background: none; font: 500 var(--fs-base) var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.ix2-seg button span { overflow: hidden; text-overflow: ellipsis; }
.ix2-seg button em { font-style: normal; font-size: var(--fs-sm); color: var(--faint); font-variant-numeric: tabular-nums; }
.ix2-seg button:hover { color: var(--ink); }
.ix2-seg button.is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ix2-seg button.is-on em { color: var(--muted); }
.ix2-boxes { display: grid; grid-template-columns: 1fr 1fr; margin: 10px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ix2-boxes button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; background: none; font: 500 var(--fs-base) var(--body); color: var(--text); cursor: pointer; }
.ix2-boxes button + button { border-left: 1px solid var(--line); }
.ix2-boxes button .i { width: 16px; height: 16px; color: var(--muted); }
.ix2-boxes button em { min-width: 22px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--sunken); font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ix2-boxes button:hover { background: var(--hover); }
.ix2-boxes button.is-on { background: var(--soft); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.ix2-boxes button[data-tab="done"] .i { color: var(--ok); }
.ix2-boxes button[data-tab="done"] em { background: #e3f7ec; color: #047857; }
.ix2-seg { grid-template-columns: repeat(2, 1fr); }
.ix2-seg { grid-template-columns: repeat(3, 1fr); } .ix2-head .ap-icon.is-on { background: var(--ink); color: #fff; }

/* ---------- Deal als eigen pagina: fases bovenaan, klant links, chat in het midden, deal/taken rechts ---------- */
.ap-dp { position: fixed; z-index: 240; top: 0; right: 0; bottom: 0; left: var(--side); display: flex; flex-direction: column; background: var(--paper); animation: bfIn .16s var(--ease); }
.ap-dp__head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--line); }
.ap-dp__t { min-width: 0; }
.ap-dp__t h1 { margin: 0; font: 800 var(--fs-2xl)/1.2 var(--display); letter-spacing: -.015em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-dp__t p { margin: 2px 0 0; font-size: var(--fs-base); color: var(--muted); }
.ap-dp__bar { display: flex; align-items: center; gap: 20px; padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--line); }
.ap-dp__steps { flex: 1; min-width: 0; display: flex; margin: 0; padding: 0; list-style: none; }
.ap-dp__steps li { position: relative; flex: 1; display: flex; justify-content: center; min-width: 0; }
.ap-dp__steps li::before { content: ""; position: absolute; top: 50%; left: -50%; right: 50%; height: 2px; margin-top: -1px; background: var(--line-2); }
.ap-dp__steps li:first-child::before { display: none; }
.ap-dp__steps li.is-done::before, .ap-dp__steps li.is-cur::before { background: var(--ink); }
.ap-dp__steps button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; height: 32px; padding: 0 6px; border: 0; background: none; cursor: pointer; }
.ap-dp__steps i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-3); background: var(--card); transition: transform .15s; }
.ap-dp__steps button:hover i { transform: scale(1.2); border-color: var(--c); }
.ap-dp__steps li.is-done i { background: var(--ink); border-color: var(--ink); }
.ap-dp__steps span { display: none; }
.ap-dp__steps li.is-cur button { padding: 0 14px; border-radius: var(--r-pill); background: var(--c); max-width: 100%; }
.ap-dp__steps li.is-cur i { display: none; }
.ap-dp__steps li.is-cur span { display: block; font: 600 var(--fs-base) var(--body); color: var(--t, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-dp__wl { display: flex; gap: 8px; flex: none; }
.ap-dp__wl button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font: 600 var(--fs-base) var(--body); color: var(--ink); cursor: pointer; }
.ap-dp__wl button .i { width: 15px; height: 15px; }
.ap-dp__wl .is-won .i { color: #00b85c; }
.ap-dp__wl .is-lost .i { color: #ff3b30; }
.ap-dp__wl .is-won:hover { border-color: #00b85c; }
.ap-dp__wl .is-lost:hover { border-color: #ff3b30; }
.ap-dp__wl .is-won.is-on { background: #00b85c; border-color: #00b85c; color: #fff; }
.ap-dp__wl .is-lost.is-on { background: #ff3b30; border-color: #ff3b30; color: #fff; }
.ap-dp__wl .is-on .i { color: #fff; }
.ap-dp__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr) minmax(300px, 360px); }
.ap-dp__l, .ap-dp__r { min-height: 0; overflow-y: auto; padding: 16px; scrollbar-width: thin; }
.ap-dp__r { display: flex; flex-direction: column; gap: 14px; }
.ap-dp__c { min-height: 0; display: flex; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--soft); }
.ap-dp .ap-ld--inline { padding: 0; max-width: none; margin: 0; animation: none; }
.ap-dp .ap-ld4__hero { display: none; }
.ap-dp .ap-ld3__deal > .ap-field:first-child { display: none; }
.ap-dp .ap-ld3__deal { grid-template-columns: 1fr 1fr !important; }
.ap-dp__r > .ap-ld4__card { margin: 0; }
/* Chat */
.ap-lc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-lc--loading { align-items: center; justify-content: center; }
.ap-lc__head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--card); border-bottom: 1px solid var(--line); }
.ap-lc__head > b { font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ap-lc__ch { display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: var(--r-md); background: var(--sunken); }
.ap-lc__ch button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: 500 var(--fs-base) var(--body); color: var(--muted); cursor: pointer; }
.ap-lc__ch button .i { width: 15px; height: 15px; }
.ap-lc__ch button.is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ap-lc__ch button[disabled] { opacity: .4; cursor: not-allowed; }
.ap-lc__ch button em { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--info); }
.ap-lc__msgs { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 20px 22px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ap-lc__empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 300px; text-align: center; color: var(--muted); font-size: var(--fs-base); }
.ap-lc__empty b { font-size: var(--fs-md); color: var(--ink); }
.ap-lc__eic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.ap-lc__eic .i { width: 22px; height: 22px; }
.ap-lc__form { display: grid; gap: 8px; padding: 12px 16px 14px; background: var(--card); border-top: 1px solid var(--line); }
.ap-lc__form textarea { width: 100%; resize: none; }
.ap-lc__bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.ap-lc__bar small { font-size: var(--fs-sm); color: var(--faint); }
.ap-lc__lock { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 18px; background: var(--card); border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 1200px) { .ap-dp__cols { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); } .ap-dp__r { grid-column: 1; grid-row: 2; } .ap-dp__l { grid-row: 1; } .ap-dp__c { grid-column: 2; grid-row: 1 / span 2; } .ap-dp__l, .ap-dp__r { overflow: visible; } .ap-dp__cols { overflow-y: auto; grid-template-rows: auto 1fr; } .ap-dp__c { position: sticky; top: 0; height: 100%; max-height: calc(100vh - 150px); } }
@media (max-width: 800px) {
  .ap-dp { left: 0 !important; top: 58px; bottom: 76px; overflow-y: auto; }
  .ap-dp__head { padding: 12px 16px; }
  .ap-dp__bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
  .ap-dp__cols { display: flex; flex-direction: column; flex: none; overflow: visible; }
  .ap-dp__c { order: 2; height: 70vh; max-height: none; position: static; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ap-dp__l { order: 1; } .ap-dp__r { order: 3; }
  .ap-dp__l, .ap-dp__r { overflow: visible; }
}

/* Nieuw bericht: kiezen uit je contacten of een nieuw contact */
.nt-search { display: flex; margin: 4px 0 10px; }
.nt-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; margin: 0 -8px; }
.nt-list button, .nt-new { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: var(--r-md); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.nt-list button:hover, .nt-list button:focus-visible, .nt-new:hover { background: var(--hover); outline: none; }
.nt-list button > span:nth-child(2), .nt-new > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nt-list b, .nt-new b { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-list small, .nt-new small { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-list button > .i:last-child { width: 15px; height: 15px; color: var(--faint); transform: rotate(-90deg); }
.nt-none { margin: 8px; color: var(--muted); }
.nt-new { margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); padding-top: 14px; }
.nt-new > .i { display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--ink); color: #fff; }
.nt-to { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.nt-to > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nt-to small { font-size: var(--fs-sm); color: var(--muted); }
.nt-to b { font-size: var(--fs-md); }
/* Dealpagina: taken zoals de andere kaarten */
.ap-dp .bx-empty { display: none; }
.ap-dp .bx-tbox > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ap-dp .bx-tbox > h3 .i { width: 28px; height: 28px; padding: 6.5px; border-radius: 8px; background: var(--sunken); color: var(--ink); }

/* Dealchat: één gesprek, één tekstvak, kies e-mail of WhatsApp */
.ap-lc__to { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-lc__via { display: inline-flex; align-items: center; gap: 4px; }
.ap-lc__via .i { width: 12px; height: 12px; }
.ap-lc__subj { height: 38px; }
.ap-lc__box { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); transition: border-color .15s; }
.ap-lc__box:focus-within { border-color: var(--ink); }
.ap-lc__box textarea { display: block; width: 100%; padding: 12px 14px 4px; border: 0; background: none; resize: none; font: 400 var(--fs-md)/1.5 var(--body); color: var(--ink); outline: none; }
.ap-lc__box .ap-lc__bar { padding: 6px 8px 8px; gap: 10px; }
.ap-lc__via2 { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--sunken); }
.ap-lc__via2 button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: 500 var(--fs-sm) var(--body); color: var(--muted); cursor: pointer; }
.ap-lc__via2 button .i { width: 15px; height: 15px; }
.ap-lc__via2 button.is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ap-lc__via2 button.is-whatsapp.is-on .i { color: #25d366; }
.ap-lc__via2 button[disabled] { opacity: .4; cursor: not-allowed; }
.ap-lc__via2 button, .ap-lc__bar small, .ap-lc__bar .ap-btn { white-space: nowrap; flex: none; }
.ap-lc__bar small { display: none; }
@container (min-width: 520px) { .ap-lc__bar small { display: inline; } }
.ap-lc { container-type: inline-size; }
.nt-search { width: 100%; box-sizing: border-box; }
.nt-search input { flex: 1; }
.bx-form .ap-lc__box { margin: 4px 0 12px; }
.bx-form .ap-lc__box textarea { min-height: 120px; }

/* Dealpagina rustiger: geen kaarten in kaarten, gewone rijen met dunne lijnen */
.ap-dp__l, .ap-dp__r { padding: 0; background: var(--card); }
.ap-dp__r { gap: 0; }
.ap-dp__c { background: var(--paper); }
.ap-dp .ap-ld4 { gap: 0; }
.ap-dp .ap-ld4__card { margin: 0; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
.ap-dp .ap-ld4__card > header { margin-bottom: 10px; }
.ap-dp .ap-ld4__card > header h3, .ap-dp .bx-tbox > h3 { font: 700 var(--fs-md) var(--body); gap: 0; }
.ap-dp .ap-ld4__hi, .ap-dp .bx-tbox > h3 .i { display: none; }
.ap-dp .ap-ld4__grid { grid-template-columns: 1fr; gap: 0; }
.ap-dp .ap-ld4__f { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 0; border-radius: 0; background: none; }
.ap-dp .ap-ld4__f small { font-size: var(--fs-base); }
.ap-dp .ap-ld4__v > a, .ap-dp .ap-ld4__v > span { font-size: var(--fs-base); }
.ap-dp .ap-ld4__quick { display: none; }
.ap-dp .ap-ld4__msg { padding: 0; background: none; }
.ap-dp .ap-ld4 .ap-ld2__dl > div { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
.ap-dp .ap-ld4 .ap-ld2__dl dt, .ap-dp .ap-ld4 .ap-ld2__dl dd { font-size: var(--fs-base); }
.ap-dp .ap-ld4 .ap-ld2__grp h4 { font-size: var(--fs-base); color: var(--muted); font-weight: 600; }
.ap-dp .ap-ld4__sub, .ap-dp .ap-ld4__link { font-size: var(--fs-xs); }
.ap-dp .ap-ld2__foot { padding: 14px 20px; }
.ap-dp .bx-tbox > h3 { margin: 0 0 10px; }
.ap-dp textarea[data-notes] { min-height: 80px; }
.ap-lc__head > b { white-space: nowrap; flex: none; } .ap-lc__to { min-width: 0; }

/* Dealpagina: twee kolommen, links tabbladen, rechts de chat */
.ap-dp__cols { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr) !important; grid-template-rows: none !important; overflow: hidden !important; }
.ap-dp__l { grid-column: 1 !important; grid-row: 1 !important; overflow-y: auto !important; }
.ap-dp__c { grid-column: 2 !important; grid-row: 1 !important; position: static !important; max-height: none !important; height: auto !important; border-right: 0; }
.ap-dp__tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.ap-dp__tabs button { height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font: 500 var(--fs-base) var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-dp__tabs button:hover { color: var(--ink); background: var(--hover); }
.ap-dp__tabs button.is-on { background: var(--ink); color: #fff; font-weight: 600; }
.ap-dp [data-sec][hidden], .ap-dp .ap-ld2__foot[hidden] { display: none !important; }
.ap-dp .ap-ld4__sub { display: none; }
.ap-dp .ap-ld4 .ap-ld2__dl dd em { background: none; padding: 0; }
@media (max-width: 800px) {
  .ap-dp__cols { display: flex !important; flex-direction: column; overflow: visible !important; }
  .ap-dp__l { overflow: visible !important; }
  .ap-dp__c { height: 70vh !important; }
}
/* Geen "Bezoek telefonisch afgesproken?"-vak meer; een gepland bezoek blijft zichtbaar */
.ap-ld4 .ap-bookset, .ap-ld4 .ap-ld3__visit:has(.ap-bookset) { display: none !important; }
.ap-ld4 .ap-ld3__deal { grid-template-columns: 1fr !important; }

/* ---------- Calculators: overzicht (trechter, status, cijfers, acties) ---------- */
.fm { max-width: 1120px; }
.fm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fm-head .ap-h1 { margin: 0; }
.fm-sub { margin: 6px 0 0; font-size: var(--fs-md); color: var(--muted); }
.fm-funnel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; padding: 16px 20px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.fm-funnel__lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-transform: capitalize; min-width: 90px; }
.fm-funnel > div { display: flex; align-items: baseline; gap: 6px; }
.fm-funnel b { font: 800 var(--fs-xl) var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.fm-funnel small { font-size: var(--fs-base); color: var(--muted); }
.fm-funnel i { font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); padding: 1px 7px; border-radius: var(--r-pill); background: var(--sunken); }
.fm-funnel__arr .i { width: 15px; height: 15px; color: var(--faint); }
.fm-funnel__go { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--fs-base); font-weight: 600; text-decoration: none; }
.fm-funnel__go .i { width: 14px; height: 14px; }
.fm-funnel__go.is-quiet { background: none; color: var(--ink); padding: 0; }
.fm-funnel__go.is-quiet:hover { text-decoration: underline; }
.fm-search { display: flex; max-width: 360px; margin-bottom: 12px; }
.fm-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.fm-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 18px 20px; border-top: 1px solid var(--line); transition: background .15s, opacity .2s; }
.fm-row:first-child { border-top: 0; }
.fm-row:hover { background: #fdfcf9; }
.fm-row.is-leaving { opacity: 0; }
.fm-thumb { display: block; width: 72px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--sunken); }
.fm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-thumb__mock { display: flex; flex-direction: column; gap: 5px; padding: 10px; height: 100%; box-sizing: border-box; }
.fm-thumb__mock i { display: block; height: 6px; border-radius: 3px; background: var(--line-2); }
.fm-thumb__mock i:nth-child(2) { width: 70%; } .fm-thumb__mock i:nth-child(3) { width: 85%; }
.fm-thumb__mock b { display: block; width: 45%; height: 8px; margin-top: auto; border-radius: 4px; background: var(--y); }
.fm-main { min-width: 0; }
.fm-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fm-title a { min-width: 0; font: 700 var(--fs-lg) var(--display); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-title a:hover { text-decoration: underline; }
.fm-st { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; }
.fm-st.is-on, .fm-st.is-warn { background: #e3f7ec; color: #047857; }
.fm-st.is-draft { background: var(--sunken); color: var(--muted); }
.fm-meta { margin: 3px 0 0; font-size: var(--fs-base); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-meta--sub { font-size: var(--fs-sm); color: var(--muted); }
.fm-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.fm-hint .i { width: 14px; height: 14px; flex: none; }
.fm-hint.is-warn { color: #b45309; }
.fm-hint .ap-linkbtn { font-size: var(--fs-sm); font-weight: 600; }
.fm-stats { display: flex; gap: 22px; }
.fm-stats > div { display: flex; flex-direction: column; align-items: flex-end; min-width: 58px; }
.fm-stats b { font: 700 var(--fs-lg) var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.fm-stats small { font-size: var(--fs-xs); color: var(--muted); }
.fm-acts { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fm-new { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: var(--r-pill); background: var(--y-soft); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.fm-new .i { width: 13px; height: 13px; }
.fm-new:hover { background: var(--y); }
.fm-none { padding: 22px 20px; color: var(--muted); }
.fm-soon { display: flex; align-items: center; gap: 10px; margin: 18px 4px 0; font-size: var(--fs-sm); color: var(--muted); }
.fm-soon .i { width: 16px; height: 16px; flex: none; }
.fm-soon b { color: var(--text); font-weight: 600; }
/* Lege toestand: laten zien wat een calculator doet */
.fm-empty { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: center; gap: 48px; max-width: 920px; margin: 8vh auto 0; }
.fm-demo { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--sh-md); }
.fm-demo__steps { display: flex; gap: 6px; margin-bottom: 18px; }
.fm-demo__steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.fm-demo__steps i.is-done { background: var(--ink); }
.fm-demo p { margin: 0 0 12px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.fm-demo__opts { display: grid; gap: 8px; }
.fm-demo__opts span { padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: var(--fs-base); color: var(--text); }
.fm-demo__opts span.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; color: var(--ink); }
.fm-demo__price { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 14px; border-radius: 10px; background: var(--y-soft); }
.fm-demo__price small { font-size: var(--fs-sm); color: var(--muted); }
.fm-demo__price b { font: 800 var(--fs-xl) var(--display); color: var(--ink); }
.fm-empty__txt p { margin: 12px 0 0; font-size: var(--fs-lg); line-height: 1.55; color: var(--text); }
.fm-empty__go { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 10px; }
.fm-empty__txt > small { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 1100px) { .fm-row { grid-template-columns: 64px minmax(0, 1fr) auto; } .fm-acts { grid-column: 2 / -1; justify-content: flex-start; } .fm-thumb { width: 64px; height: 50px; } }
@media (max-width: 700px) {
  .fm-head { align-items: stretch; } .fm-head .ap-btn { width: 100%; justify-content: center; }
  .fm-funnel { gap: 10px 16px; } .fm-funnel__lbl { width: 100%; } .fm-funnel__arr { display: none; } .fm-funnel .ap-grow { display: none; }
  .fm-row { grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px; padding: 16px; }
  .fm-thumb { width: 52px; height: 44px; }
  .fm-stats { grid-column: 1 / -1; justify-content: space-between; gap: 8px; padding: 10px 0 0; border-top: 1px dashed var(--line); }
  .fm-stats > div { align-items: flex-start; }
  .fm-acts { grid-column: 1 / -1; } .fm-acts .ap-btn { flex: 1; justify-content: center; }
  .fm-empty { grid-template-columns: 1fr; gap: 28px; margin-top: 2vh; }
}
.fm-funnel__lbl { text-transform: none; }

/* ---------- Studio: publiceren ---------- */
.ap-pub { display: inline-flex; align-items: center; gap: 8px; }
.ap-pub__st { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; }
.ap-pub__st .i { width: 14px; height: 14px; }
.ap-pub__st.is-on { color: #047857; }
.ap-pub__st.is-pending { color: #b45309; }
/* ---------- Studio: testen ---------- */
.tst { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 24px 28px 48px; }
.tst-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tst-head .ap-h2 { margin: 0 0 4px; }
.tst-head p { margin: 0; max-width: 520px; }
.tst-pre { display: flex; flex-wrap: wrap; gap: 6px; }
.tst-card { margin-bottom: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tst-card > h3 { margin: 0 0 6px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.tst-q { padding: 14px 0; border-top: 1px solid var(--line); }
.tst-card > h3 + .tst-q { border-top: 0; }
.tst-q__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tst-q__h b { font-size: var(--fs-md); color: var(--ink); }
.tst-q.is-hidden .tst-q__h { margin-bottom: 4px; }
.tst-q.is-hidden .tst-q__h b { color: var(--faint); }
.tst-why { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.tst-why .i { width: 14px; height: 14px; }
.tst-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tst-o { height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: 500 var(--fs-base) var(--body); color: var(--text); cursor: pointer; }
.tst-o:hover { border-color: var(--line-3); }
.tst-o.is-on { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 600; }
.tst-exact { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: var(--fs-sm); color: var(--muted); }
.tst-exact input { width: 80px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); }
.tst-eff { flex: none; font-style: normal; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tst-eff.is-up { color: #b45309; }
.tst-eff.is-down { color: #047857; }
.tst-eff.is-none { color: var(--faint); font-weight: 500; }
.tst-side { position: sticky; top: 16px; }
.tst-r { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--sh); }
.tst-r > h3 { margin: 0 0 12px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.tst-r__svc + .tst-r__svc { margin-top: 10px; }
.tst-r__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-base); color: var(--text); }
.tst-r__row span { min-width: 0; }
.tst-r__row.is-head { border-top: 0; font-weight: 700; color: var(--ink); }
.tst-r__row.is-head b { font-variant-numeric: tabular-nums; }
.tst-r__row.is-rule b { font-weight: 600; font-size: var(--fs-sm); }
.tst-r__rules { margin-top: 8px; }
.tst-r__note { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.tst-r__total { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 16px; border-radius: 12px; background: var(--y-soft); }
.tst-r__total small { font-size: var(--fs-sm); color: var(--muted); }
.tst-r__total b { font: 800 var(--fs-2xl)/1.15 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.tst-r__logic { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.tst-r__logic .i { width: 14px; height: 14px; flex: none; }
.tst-r__q { margin-top: 14px; width: 100%; justify-content: center; }
@media (max-width: 980px) { .tst { grid-template-columns: 1fr; padding: 16px; } .tst-side { position: static; order: -1; } }

/* Statistieken: ronde grafiek voor de herkomst */
.st-donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.st-donut svg { width: 150px; height: 150px; flex: none; }
.st-donut__n { font: 800 26px var(--display); fill: var(--ink); }
.st-donut__l { font: 500 11px var(--body); fill: var(--muted); }
.st-donut ul { flex: 1; min-width: 180px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-donut li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; font-size: var(--fs-base); }
.st-donut li i { width: 10px; height: 10px; border-radius: 3px; }
.st-donut li span { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-donut li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.st-donut li small { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }
.st-donut li span { white-space: normal; overflow-wrap: anywhere; } .st-donut svg { width: 130px; height: 130px; }

/* Nieuw formulier: eenvoudige formulieren (onder de prijscalculator) */
.ap-fc__forms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ap-fcard--form { padding: 10px 10px 14px; text-align: left; }
.fc-mock { display: flex !important; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; height: 104px !important; padding: 16px 22px; background: var(--soft) !important; }
.fc-mock i { display: block; height: 9px; border-radius: 4px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.fc-mock b { display: block; align-self: flex-start; width: 38%; height: 12px; margin-top: 3px; border-radius: 6px; background: var(--ink); }
.fc-mock--text i:nth-child(1) { width: 55%; } .fc-mock--text i:nth-child(4) { height: 22px; }
.fc-mock--chips { flex-direction: row; flex-wrap: wrap; align-content: center; }
.fc-mock--chips i { width: calc(50% - 4px); height: 14px; }
.fc-mock--chips i:nth-child(2) { background: var(--y); box-shadow: none; }
.fc-mock--chips b { width: 40%; }
.fc-mock--mix i:nth-child(2) { height: 20px; } .fc-mock--mix i:nth-child(3) { width: 70%; }
.fc-mock--list i { position: relative; margin-left: 14px; } .fc-mock--list i::before { content: ""; position: absolute; left: -14px; top: 0; width: 9px; height: 9px; border-radius: 3px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-3); }
.fc-mock--list i:nth-child(1)::before, .fc-mock--list i:nth-child(3)::before { background: var(--ink); box-shadow: none; }
.ap-fcard--form:hover .fc-mock { background: var(--y-soft) !important; }
@media (max-width: 800px) { .ap-fc__forms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Statistieken: keuzeknoppen in Beavr-stijl */
.st-dd { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font: 500 var(--fs-md) var(--body); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s; }
.st-dd:hover, .st-dd[aria-expanded="true"] { border-color: var(--ink); }
.st-dd > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dd > .i { width: 16px; height: 16px; flex: none; color: var(--muted); }
.st-dd > .i:last-child { color: var(--ink); }
.st-ddm { min-width: 240px; }
.st-ddm > button > .i:last-child:not(:first-child) { margin-left: auto; width: 16px; height: 16px; color: var(--ink); }

/* ---------- Studio als eigen pagina (geen menubalk van de app) ---------- */
.ap-layout.is-studio { grid-template-columns: 0 minmax(0, 1fr) !important; }
.ap-layout.is-studio .ap-side, .ap-layout.is-studio .ap-side__show, .ap-layout.is-studio .ap-tabbar, .ap-layout.is-studio .ap-mtop { display: none !important; }
.ap-layout.is-studio .ap-main { padding-bottom: 0; }
/* ---------- Studio: design-editor ---------- */
.sd { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 520px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.sd-panel { min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); scrollbar-width: thin; }
.sd-mode { padding: 16px; border-bottom: 1px solid var(--line); }
.sd-mode p { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.sd-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.sd-set[disabled] { opacity: .45; }
.sd-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 10px; background: var(--sunken); }
.sd-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font: 500 var(--fs-sm) var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.sd-seg button .i { width: 15px; height: 15px; }
.sd-seg button.is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sd-sec { border-bottom: 1px solid var(--line); }
.sd-sec > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.sd-sec > summary::-webkit-details-marker { display: none; }
.sd-sec > summary .i { width: 17px; height: 17px; color: var(--muted); flex: none; }
.sd-sec > summary b { flex: 1; font-size: var(--fs-md); color: var(--ink); }
.sd-sec > summary .i:last-child { transition: transform .15s; }
.sd-sec[open] > summary .i:last-child { transform: rotate(180deg); }
.sd-sec > summary:hover { background: var(--hover); }
.sd-sec__b { display: grid; gap: 14px; padding: 4px 16px 18px; }
.sd-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sd-theme { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.sd-theme:hover { border-color: var(--line-3); }
.sd-theme.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sd-theme__sw { display: flex; gap: 4px; }
.sd-theme__sw i { flex: 1; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.sd-theme b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.sd-colors { display: grid; gap: 6px; }
.sd-color { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.sd-color:hover { border-color: var(--line-3); }
.sd-color input { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.sd-color input::-webkit-color-swatch-wrapper { padding: 0; } .sd-color input::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.08); border-radius: 8px; }
.sd-color > span { flex: 1; display: flex; flex-direction: column; }
.sd-color b { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.sd-color small { font-size: var(--fs-xs); color: var(--muted); }
.sd-color code { font-size: var(--fs-xs); color: var(--muted); }
.sd-field { display: grid; gap: 6px; }
.sd-field > span, .sd-range > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.sd-range { display: grid; gap: 6px; }
.sd-range > span { display: flex; justify-content: space-between; }
.sd-range em { font-style: normal; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.sd-range input { width: 100%; accent-color: var(--ink); }
.sd-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.sd-sw > span:first-child { display: flex; flex-direction: column; }
.sd-sw b { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.sd-sw small { font-size: var(--fs-xs); color: var(--muted); }
.sd-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-logo__p { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--sunken); overflow: hidden; }
.sd-logo__p img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sd-tip { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.sd-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sd-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.sd-seg--dev { width: 330px; }
.sd-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--fs-sm); color: var(--muted); }
.sd-live i { width: 8px; height: 8px; border-radius: 50%; background: #00b85c; box-shadow: 0 0 0 3px rgba(0,184,92,.18); }
.sd-canvas { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 20px; overflow: auto; background: var(--paper); background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px); background-size: 16px 16px; }
.sd-canvas.is-transparent { background-color: #e9edf2; background-image: linear-gradient(45deg, #dde2e8 25%, transparent 25%), linear-gradient(-45deg, #dde2e8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dde2e8 75%), linear-gradient(-45deg, transparent 75%, #dde2e8 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.sd-device { flex: none; width: 100%; height: 100%; transition: width .25s var(--ease); }
.sd-device iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; background: transparent; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sd-device.is-tablet { width: 768px; max-width: 100%; }
.sd-device.is-mobile { width: 390px; height: min(100%, 800px); padding: 10px; border-radius: 40px; background: #111; box-shadow: 0 20px 40px -18px rgba(0,0,0,.35); }
.sd-device.is-mobile iframe { border-radius: 30px; }
@media (max-width: 900px) { .sd { grid-template-columns: 1fr; height: auto; } .sd-panel { max-height: none; border-right: 0; border-bottom: 1px solid var(--line); } .sd-stage { height: 80vh; } .sd-seg--dev { width: auto; } }

/* Nieuw formulier: echt voorbeeld van elk formulier (verkleind) */
.fc-real { position: relative; display: block !important; height: 130px !important; padding: 0 !important; overflow: hidden; background: #fff !important; box-shadow: inset 0 0 0 1px var(--line); }
.fc-real__in { position: absolute; left: 0; top: 0; width: 200%; display: flex; flex-direction: column; gap: 9px; padding: 18px 26px; transform: scale(.5); transform-origin: 0 0; font-family: var(--body); text-align: left; }
.fc-real__top { display: flex; align-items: center; justify-content: space-between; }
.fc-real__top b { font-size: 15px; font-weight: 700; color: var(--h); }
.fc-real__top i { width: 46px; height: 14px; border-radius: 7px; background: #f1f1f1; }
.fc-real__bar { height: 5px; border-radius: 3px; background: #eee; }
.fc-real__bar i { display: block; width: 33%; height: 100%; border-radius: 3px; background: var(--p); }
.fc-real__q { margin-top: 2px; font: 800 24px/1.2 var(--display); color: var(--h); letter-spacing: -.01em; }
.fc-real__o { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid #e6e6e6; border-radius: 12px; font-size: 16px; font-weight: 600; color: #222; }
.fc-real__o i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ccc; flex: none; }
.fc-real__o.is-multi i { border-radius: 4px; }
.fc-real__o.is-on { border-color: var(--p); background: color-mix(in srgb, var(--p) 10%, #fff); }
.fc-real__o.is-on i { border-color: var(--p); background: var(--p); }
.fc-real__ta { height: 74px; padding: 12px 14px; border: 1.5px solid #e6e6e6; border-radius: 12px; font-size: 16px; color: #aaa; }
.fc-real__foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.fc-real__btn { padding: 10px 20px; border-radius: 99px; background: var(--b); color: var(--bt); font-size: 15px; font-weight: 700; }
.ap-fcard--form:hover .fc-real { box-shadow: inset 0 0 0 1px var(--line-3); }
.ap-layout.is-studio { grid-template-columns: minmax(0, 1fr) !important; }

/* Voorbeeld van het hele formulier (vervangt het eerdere voorbeeld) */
.fc-real { height: 190px !important; background: #f6f5f2 !important; box-shadow: none; }
.fc-real__in { width: 300%; gap: 10px; padding: 26px 34px; transform: scale(.3333); background: #fff; min-height: 300%; border-radius: 0; }
.fc-real__top { justify-content: flex-start; gap: 14px; margin-bottom: 6px; }
.fc-real__top i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--p); color: #fff; font: 800 20px var(--display); font-style: normal; }
.fc-real__top b { font: 800 26px/1.2 var(--display); color: #111; letter-spacing: -.01em; }
.fc-real__l { margin-top: 6px; font-size: 16px; font-weight: 700; color: #222; }
.fc-real__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-real__opts .fc-real__o { padding: 10px 14px; font-size: 15px; }
.fc-real__o.is-on { border-color: var(--p); background: color-mix(in srgb, var(--p) 10%, #fff); }
.fc-real__ta { height: 64px; }
.fc-real__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-real__in2 { padding: 12px 14px; border: 1.5px solid #e6e6e6; border-radius: 12px; font-size: 15px; color: #aaa; }
.fc-real__btn { display: block; margin-top: 10px; padding: 14px; border-radius: 99px; background: var(--p); color: #fff; font-size: 17px; font-weight: 700; text-align: center; }
.fc-real { height: 205px !important; }

/* Voorbeeld in de keuze: zelfde opbouw als het echte formulier */
.fc-one { position: relative; display: block !important; height: 205px !important; padding: 0 !important; overflow: hidden; background: #fff !important; box-shadow: inset 0 0 0 1px var(--line); }
.fc-one__in { position: absolute; left: 0; top: 0; width: 333.33%; display: grid; grid-template-columns: 90px 1fr; gap: 34px; padding: 30px 40px; transform: scale(.3); transform-origin: 0 0; font-family: var(--body); text-align: left; }
.fc-one__logo img { max-width: 90px; border-radius: 12px; }
.fc-one__logo i { display: grid; place-items: center; width: 84px; height: 64px; border-radius: 14px; background: var(--p); color: #fff; font: 800 30px var(--display); font-style: normal; }
.fc-one__form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.fc-one__intro { margin-bottom: 6px; font: 700 20px var(--display); color: #111; }
.fc-one__h { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.fc-one__h.is-q { margin-top: 16px; }
.fc-one__h b { font: 700 19px var(--display); color: #111; }
.fc-one__h em { padding: 4px 11px; border-radius: 99px; background: #f1f1f1; font-style: normal; font-size: 13px; font-weight: 600; color: #222; }
.fc-one__help { margin-top: -4px; font-size: 15px; color: #666; }
.fc-one__in2 { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #f2f2f2; font-size: 16px; color: #9a9a9a; }
.fc-one__in2 u { text-decoration: none; color: #222; }
.fc-one__in2.is-ic { justify-content: space-between; color: #222; }
.fc-one__in2.is-ic .i { width: 20px; height: 20px; color: #222; }
.fc-one__in2.is-ta { align-items: flex-start; height: 110px; }
.fc-one__btn { align-self: center; width: 60%; margin-top: 18px; padding: 15px; border-radius: 99px; background: var(--p); color: #fff; font-size: 17px; font-weight: 600; text-align: center; }
.fc-one__in2 u { display: inline-flex; align-items: center; gap: 8px; } .fc-one__flag { width: 24px; height: 16px; border-radius: 3px; }
.fc-one__flag rect { stroke: none; }
.fc-one__in { grid-template-columns: 90px 1fr 90px; } .fc-one__in::after { content: ''; } .fc-one__logo { display: flex; justify-content: flex-end; }
.fc-one__intro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Prijscalculators ---------- */
.cl { max-width: 1240px; }
.cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.cl-head .ap-h1 { margin: 0; }
.cl-sub { margin: 6px 0 0; font-size: var(--fs-md); color: var(--muted); }
.cl-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.cl-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 128px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-decoration: none; color: inherit; }
.cl-kpi b { font: 800 var(--fs-2xl)/1.15 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-kpi span { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.cl-d { font-style: normal; font-weight: 700; font-size: var(--fs-xs); color: var(--muted); }
.cl-d.is-up { color: #047857; } .cl-d.is-down { color: #c0392b; }
.cl-kpi--lock { flex-direction: row; align-items: center; gap: 10px; color: var(--muted); }
.cl-kpi--lock .i { width: 16px; height: 16px; }
.cl-kpi--lock span { display: block; font-size: var(--fs-sm); }
.cl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cl-chips { display: flex; gap: 6px; }
.cl-chips button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font: 600 var(--fs-base) var(--body); color: var(--text); cursor: pointer; }
.cl-chips button em { font-style: normal; font-weight: 600; font-size: var(--fs-xs); color: var(--muted); padding: 1px 7px; border-radius: var(--r-pill); background: var(--sunken); }
.cl-chips button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cl-chips button.is-on em { background: rgba(255,255,255,.18); color: #fff; }
.cl-search { display: flex; align-items: center; gap: 8px; width: 260px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.cl-search .i { width: 16px; height: 16px; color: var(--muted); }
.cl-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-base); color: var(--ink); outline: none; }
.cl-sort { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: 500 var(--fs-base) var(--body); color: var(--ink); cursor: pointer; }
.cl-sort .i { width: 15px; height: 15px; }
.cl-view { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--sunken); }
.cl-view button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.cl-view button .i { width: 16px; height: 16px; }
.cl-view button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cl-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: box-shadow .15s, transform .15s; }
.cl-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.cl-card__img { display: block; height: 150px; background: var(--sunken); overflow: hidden; }
.cl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-card__img span { display: grid; place-items: center; height: 100%; color: var(--faint); }
.cl-card__img span .i { width: 34px; height: 34px; }
.cl-card__b { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.cl-card__top { display: flex; align-items: center; gap: 6px; }
.cl-card__more { margin-left: auto; }
.cl-st { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: #fff3d6; color: #8a5a00; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.cl-st.is-on { background: #e3f7ec; color: #047857; }
.cl-st.is-pend { background: var(--sunken); color: var(--muted); font-weight: 600; }
.cl-card__name { margin-top: 10px; font: 700 var(--fs-lg) var(--display); color: var(--ink); text-decoration: none; }
.cl-card__name:hover { text-decoration: underline; }
.cl-card__desc { margin: 4px 0 0; min-height: 2.8em; font-size: var(--fs-base); line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-card__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.cl-card__nums div { display: flex; flex-direction: column; }
.cl-card__nums b { font: 700 var(--fs-lg) var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-card__nums small { font-size: var(--fs-xs); color: var(--muted); }
.cl-card__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.cl-card__acts .ap-btn { justify-content: center; }
.cl-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.cl-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 90px 90px 90px auto; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); }
.cl-row:first-child { border-top: 0; }
.cl-row__img { display: grid; place-items: center; width: 64px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--sunken); color: var(--faint); }
.cl-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cl-row__t { display: flex; flex-direction: column; min-width: 0; }
.cl-row__t a { font-weight: 700; color: var(--ink); text-decoration: none; }
.cl-row__t small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row__n { display: flex; flex-direction: column; align-items: flex-end; }
.cl-row__n b { font-variant-numeric: tabular-nums; color: var(--ink); }
.cl-row__n small { font-size: var(--fs-xs); color: var(--muted); }
.cl-row__a { display: flex; gap: 6px; }
.cl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: 16px; }
.cl-empty > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--y-soft); }
.cl-empty > span .i { width: 26px; height: 26px; }
.cl-empty p { max-width: 440px; margin: 0 0 6px; color: var(--muted); }
.cl-none { color: var(--muted); }
.cl-menu .is-bad, .cl-menu .is-bad b, .cl-menu .is-bad .i { color: var(--err); }
@media (max-width: 900px) { .cl-search { width: 100%; order: 5; } .cl-row { grid-template-columns: 56px minmax(0, 1fr) auto; } .cl-row__n { display: none; } }
@media (max-width: 600px) { .cl-kpis { width: 100%; } .cl-kpi { flex: 1; min-width: 140px; } .cl-bar .ap-btn--primary { width: 100%; justify-content: center; } }
.cl-card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; line-height: 1.25; }
.cl-card__desc { min-height: 0; -webkit-line-clamp: 1; }
.cl-card__nums { margin-top: auto; }
.cl-card__acts { margin-top: 0; }
.cl-card__acts .ap-btn { min-width: 0; padding-left: 10px; padding-right: 10px; }
.cl-card__desc { margin-bottom: 14px; }

/* ---------- Nieuwe calculator: kiezen hoe je begint ---------- */
.ap-modal__box.is-nc { width: min(880px, calc(100vw - 32px)); max-width: none; padding: 32px 34px 30px; }
.nc-head h2 { margin: 0; font: 800 var(--fs-2xl)/1.15 var(--display); color: var(--ink); letter-spacing: -.01em; }
.nc-head p { margin: 6px 0 22px; color: var(--muted); font-size: var(--fs-md); }
.nc .ap-note { margin-bottom: 16px; }
.nc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nc-opt { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 18px; background: var(--card); font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.nc-opt:hover:not(:disabled) { border-color: var(--ink); box-shadow: var(--sh-md); transform: translateY(-2px); }
.nc-opt:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }
.nc-opt:disabled { opacity: .5; cursor: not-allowed; }
.nc-vis { display: grid; place-items: center; height: 168px; background: var(--sunken); border-bottom: 1px solid var(--line); }
.nc-opt[data-site] .nc-vis { background: #fdf6dd; }
.nc-mock { position: relative; display: flex; flex-direction: column; gap: 8px; width: 66%; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06); }
.nc-url { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--sunken); font-size: var(--fs-xs); color: var(--muted); }
.nc-url .i { width: 13px; height: 13px; flex: none; }
.nc-url i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-flow { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; background: var(--y); color: var(--ink); }
.nc-flow .i { width: 14px; height: 14px; }
.nc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-chips i { display: block; height: 20px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; }
.nc-qt i { display: block; width: 62%; height: 9px; margin-bottom: 2px; border-radius: 5px; background: var(--ink); opacity: .85; }
.nc-row { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); }
.nc-row u { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); }
.nc-row i { display: block; height: 6px; border-radius: 3px; background: var(--line-2); }
.nc-row.is-on { border-color: var(--ink); }
.nc-row.is-on u { border: 3px solid var(--ink); }
.nc-pen { position: absolute; right: -12px; bottom: -12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.nc-pen .i { width: 15px; height: 15px; }
.nc-opt__b { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 20px; }
.nc-opt__t { display: flex; align-items: center; gap: 10px; }
.nc-opt__t b { font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.nc-opt__t em { font-style: normal; font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: var(--ink); color: #fff; }
.nc-opt__b small { font-size: var(--fs-base); line-height: 1.45; color: var(--muted); }
.nc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-weight: 700; font-size: var(--fs-base); color: var(--ink); }
.nc-go .i { width: 15px; height: 15px; transition: transform .15s; }
.nc-opt:hover .nc-go .i { transform: translateX(3px); }
.nc-mine { margin-top: 26px; }
.nc-mine h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font: 700 var(--fs-md) var(--display); color: var(--ink); }
.nc-mine h3 span { font: 500 var(--fs-sm) var(--body); color: var(--muted); }
.nc-list { display: flex; flex-direction: column; max-height: 232px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.nc-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: var(--card); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.nc-item:first-child { border-top: 0; }
.nc-item:hover:not(:disabled) { background: var(--sunken); }
.nc-item:disabled { opacity: .5; cursor: not-allowed; }
.nc-item__img { display: grid; place-items: center; width: 52px; height: 40px; flex: none; overflow: hidden; border-radius: 8px; background: var(--sunken); color: var(--faint); }
.nc-item__img img { width: 100%; height: 100%; object-fit: cover; }
.nc-item__img .i { width: 18px; height: 18px; }
.nc-item__t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nc-item__t b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-item__t small { color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-item__go { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.nc-item__go .i { width: 14px; height: 14px; }
@media (max-width: 680px) {
  .ap-modal__box.is-nc { padding: 24px 18px 22px; }
  .nc-opts { grid-template-columns: 1fr; }
  .nc-vis { height: 130px; }
  .nc-item__go { padding: 0 9px; font-size: 0; gap: 0; }
  .nc-item__go .i { width: 16px; height: 16px; }
}
.nc-opt__t { min-height: 26px; }
@media (max-width: 680px) { .nc-vis { height: 150px; overflow: hidden; } .nc-mock { width: 76%; transform: scale(.86); } }

/* Nieuwe calculator: rijkere voorbeelden */
.nc-head p { margin-bottom: 24px; }
.nc-opts { align-items: stretch; }
.nc-vis { position: relative; display: block; height: 216px; overflow: hidden; }
.nc-vis--ai { background: linear-gradient(180deg, #fdf3d3, #fbf7ea); }
.nc-vis--own { background: linear-gradient(180deg, #efede6, #f6f5f0); }
.nc-badge { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 700 11px var(--body); font-style: normal; }
.nc-badge .i { width: 12px; height: 12px; color: var(--y); }
.nc-win { position: absolute; left: 8%; top: 50px; width: 52%; height: 150px; display: flex; flex-direction: column; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 26px rgba(60,45,0,.10); overflow: hidden; }
.nc-win__bar { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.nc-win__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.nc-win__bar span { margin-left: 6px; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-win__hero { height: 62px; background: #d9d4c4 center / cover no-repeat; }
.nc-win__txt { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.nc-win__txt i { display: block; height: 6px; border-radius: 3px; background: #e7e3d8; }
.nc-win__txt i:nth-child(1) { width: 70%; height: 8px; background: #cfc9b8; }
.nc-win__txt i:nth-child(2) { width: 90%; } .nc-win__txt i:nth-child(3) { width: 55%; }
.nc-calc { position: absolute; right: 7%; top: 30px; z-index: 2; width: 46%; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 16px 34px rgba(60,45,0,.16); }
.nc-calc b { font: 700 11.5px var(--display); color: var(--ink); margin-bottom: 2px; }
.nc-opt-row { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 10.5px; color: var(--text); white-space: nowrap; overflow: hidden; }
.nc-opt-row u { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); }
.nc-opt-row.is-on { border-color: var(--ink); background: #fffbea; font-weight: 600; color: var(--ink); }
.nc-opt-row.is-on u { border: 3px solid var(--ink); }
.nc-calc__p { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 7px 8px; border-radius: 7px; background: var(--sunken); font-size: 10px; font-weight: 600; color: var(--muted); }
.nc-calc__p i { width: 46px; height: 8px; border-radius: 4px; background: var(--y); }
.nc-link { position: absolute; left: calc(53% - 15px); top: 112px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--y); color: var(--ink); box-shadow: 0 0 0 4px #fff8e2, 0 4px 10px rgba(60,45,0,.2); }
.nc-link .i { width: 14px; height: 14px; }
.nc-ed { position: absolute; left: 8%; right: 8%; top: 30px; height: 186px; display: grid; grid-template-columns: 34% 1fr; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 16px 34px rgba(0,0,0,.10); overflow: hidden; }
.nc-ed__side { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: #faf9f5; border-right: 1px solid var(--line); }
.nc-ed__side span { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; border-radius: 6px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.nc-ed__side span.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.nc-ed__side i { display: grid; place-items: center; width: 15px; height: 15px; flex: none; border-radius: 4px; background: var(--line); font: 700 8.5px var(--body); font-style: normal; color: var(--muted); }
.nc-ed__side .is-on i { background: var(--y); color: var(--ink); }
.nc-ed__main { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; min-width: 0; }
.nc-ed__main small { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nc-ed__in { display: flex; align-items: center; height: 26px; padding: 0 8px; margin-bottom: 4px; border: 1.5px solid var(--ink); border-radius: 7px; font: 600 11px var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; }
.nc-ed__in u { width: 1.5px; height: 13px; margin-left: 1px; background: var(--ink); animation: nc-caret 1s steps(1) infinite; }
@keyframes nc-caret { 50% { opacity: 0; } }
.nc-ed__ans { display: flex; align-items: center; gap: 6px; height: 21px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; color: var(--text); white-space: nowrap; overflow: hidden; }
.nc-ed__ans s { text-decoration: none; font-size: 8px; letter-spacing: -1px; color: var(--faint); }
.nc-ed__add { font-size: 10px; font-weight: 600; color: var(--muted); padding-left: 2px; }
.nc-opt__b { gap: 8px; padding: 20px 22px 22px; }
.nc-opt__b > b { font: 700 var(--fs-lg)/1.25 var(--display); color: var(--ink); }
.nc-opt__b small { min-height: 2.9em; }
.nc-go { padding-top: 6px; }
.nc-mine { margin-top: 28px; }
.nc-mine h3 { font: 600 var(--fs-base) var(--body); color: var(--muted); margin-bottom: 10px; }
.nc-item { gap: 14px; padding: 12px 14px; }
.nc-item .cl-st { flex: none; }
@media (prefers-reduced-motion: reduce) { .nc-ed__in u { animation: none; } }
@media (max-width: 680px) {
  .nc-vis { height: 196px; }
  .nc-win { left: 5%; width: 54%; top: 46px; }
  .nc-calc { right: 4%; width: 50%; }
  .nc-ed { left: 5%; right: 5%; }
  .nc-item .cl-st { display: none; }
}
.nc-link { display: none; }
@media (max-width: 680px) { .nc-ed__add { display: none; } .nc-ed { top: 26px; } }

/* Nieuwe calculator v3: Beavr leest je site / blokken stapelen */
.nc-vis { height: 200px; }
.nc-badge { gap: 0; }
.nc-flow2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; padding: 30px 18px 10px; }
.nc-site, .nc-out { display: flex; flex-direction: column; gap: 6px; width: 31%; padding: 11px; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px rgba(60,45,0,.10); }
.nc-site .i { width: 15px; height: 15px; color: var(--muted); }
.nc-site b { font: 600 10px var(--body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-site i { display: block; height: 5px; border-radius: 3px; background: #e9e5da; }
.nc-site i:nth-of-type(1) { width: 92%; } .nc-site i:nth-of-type(2) { width: 74%; } .nc-site i:nth-of-type(3) { width: 84%; }
.nc-dash { flex: 1; min-width: 10px; height: 0; border-top: 2px dashed #e2c76a; }
.nc-bv { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,198,0,.22), 0 10px 22px rgba(60,45,0,.16); }
.nc-bv img { width: 46px; height: 46px; object-fit: contain; }
.nc-bv u { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--y); color: var(--ink); box-shadow: 0 0 0 2px #fff; }
.nc-bv u .i { width: 12px; height: 12px; }
.nc-out b { font: 700 10.5px var(--display); color: var(--ink); }
.nc-out span { display: flex; align-items: center; gap: 5px; height: 19px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 9.5px; color: var(--text); white-space: nowrap; overflow: hidden; }
.nc-out span u { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); }
.nc-out span.is-on { border-color: var(--ink); background: #fffbea; font-weight: 600; color: var(--ink); }
.nc-out span.is-on u { border: 2.5px solid var(--ink); }
.nc-blocks { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 7px; width: 66%; }
.nc-blk { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 11px; border-radius: 9px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.nc-blk > .i { width: 20px; height: 20px; padding: 4px; flex: none; border-radius: 6px; background: var(--sunken); color: var(--ink); }
.nc-blk b { flex: 1; min-width: 0; font: 600 11px var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-blk small { font-size: 9.5px; color: var(--muted); }
.nc-blk s { text-decoration: none; font-size: 9px; letter-spacing: -1px; color: var(--faint); }
.nc-blk.is-drag { transform: translateX(16px) rotate(-1.8deg); border-color: var(--ink); box-shadow: 0 14px 28px rgba(0,0,0,.16); }
.nc-blk.is-drag > .i { background: var(--y); }
.nc-blk.is-add { height: 30px; justify-content: center; background: transparent; border: 1.5px dashed var(--line-2); box-shadow: none; }
.nc-blk.is-add > .i { width: 14px; height: 14px; padding: 0; background: none; color: var(--muted); }
.nc-blk.is-add b { flex: none; color: var(--muted); }
.nc-opt__b small { min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 680px) {
  .nc-vis { height: 180px; }
  .nc-flow2 { padding: 34px 12px 8px; }
  .nc-site, .nc-out { width: 34%; }
  .nc-bv { width: 52px; height: 52px; } .nc-bv img { width: 38px; height: 38px; }
  .nc-blocks { width: 82%; top: 54%; }
  .nc-opt__b small { white-space: normal; }
}
@media (max-width: 680px) { .nc-out { width: 37%; } .nc-site { width: 31%; } }

/* =========================================================
   Studio v2: één werkruimte (naam + status, tabbladen, live voorbeeld)
   ========================================================= */
.ap-ed.ws { max-width: none; margin: 0; padding: 16px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
.ws-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.ws-name { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 260px; }
.ws-name .ap-ed__name { flex: 0 1 auto; width: auto; min-width: 120px; max-width: 520px; field-sizing: content; padding: 4px 8px; border: 1px solid transparent; border-radius: 8px; background: none; font: 800 var(--fs-xl)/1.2 var(--display); color: var(--ink); letter-spacing: -.01em; }
.ws-name .ap-ed__name:hover { border-color: var(--line); }
.ws-name .ap-ed__name:focus { outline: none; border-color: var(--ink); background: #fff; }
.ws-status { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.ws-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ws-status.is-on { background: #e3f7ec; color: #047857; }
.ws-status.is-draft { background: #fff3d6; color: #8a5a00; }
.ws-status.is-pend { background: #fff3d6; color: #8a5a00; }
.ws-name .ap-save { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.ws-name .ap-save .i { width: 13px; height: 13px; }
.ws-acts { display: flex; align-items: center; gap: 8px; }
.ws-acts .ap-pub { display: flex; }
.ws-done { color: #047857 !important; opacity: 1 !important; }
.ws-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ws-main.has-pv { grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 460px); }
.ws-left { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ws-tabs { display: flex; align-items: stretch; gap: 4px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow-x: auto; scrollbar-width: none; }
.ws-tabs a, .ws-tabs__more { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; height: 50px; padding: 0 12px; border: 0; background: none; font: 600 var(--fs-base) var(--body); color: var(--muted); text-decoration: none; cursor: pointer; }
.ws-tabs a .i, .ws-tabs__more .i { width: 16px; height: 16px; }
.ws-tabs a:hover, .ws-tabs__more:hover { color: var(--ink); }
.ws-tabs a.is-on, .ws-tabs__more.is-on { color: var(--ink); }
.ws-tabs a.is-on::after, .ws-tabs__more.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2.5px; border-radius: 2px 2px 0 0; background: var(--ink); }
.ws-tabs__more { margin-left: auto; }
.ws-tabs__more .i:last-child { width: 13px; height: 13px; }
.ws-body { min-width: 0; animation: softIn .2s var(--ease); }
.ws-pv { position: sticky; top: 16px; display: flex; flex-direction: column; height: calc(100vh - 118px); min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.ws-pv__bar { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); }
.ws-pv__bar b { font-size: var(--fs-base); color: var(--ink); }
.ws-pv__dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.ws-pv__dev { display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 9px; background: var(--sunken); }
.ws-pv__dev button { display: grid; place-items: center; width: 30px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.ws-pv__dev button .i { width: 15px; height: 15px; }
.ws-pv__dev button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ws-pv__stage { position: relative; flex: 1; overflow: hidden; background: var(--sunken); }
.ws-pv__stage iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }
.ws-pv__stage.is-mobile iframe { top: 16px; left: 50%; margin-left: -195px; transform-origin: 50% 0; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0,0,0,.10); }
/* Bestaande onderdelen in de nieuwe werkruimte */
.ws .ap-q { gap: 16px; }
.ws .tst, .ws .sd { min-height: 0; }
/* Publiceren */
.ws-pubpg { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.ws-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.ws-card h3 { margin: 0 0 14px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ws-pubcard { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ws-pubst { display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 280px; }
.ws-pubst__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: #fff3d6; color: #8a5a00; }
.ws-pubst.is-on .ws-pubst__ic { background: #e3f7ec; color: #047857; }
.ws-pubst__ic .i { width: 22px; height: 22px; }
.ws-pubst h2 { margin: 2px 0 4px; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.ws-pubst p { margin: 0; color: var(--muted); line-height: 1.5; }
.ws-pubst__acts { display: flex; gap: 8px; }
.ws-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ws-way { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font: inherit; text-align: left; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ws-way:hover { border-color: var(--ink); box-shadow: var(--sh-md); }
.ws-way > span { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: var(--sunken); color: var(--ink); }
.ws-way > span .i { width: 18px; height: 18px; }
.ws-way b { color: var(--ink); }
.ws-way small { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .ws { padding: 10px 12px 90px; }
  .ws-name { order: 3; flex-basis: 100%; min-width: 0; }
  .ws-acts { margin-left: auto; }
  .ws-acts [data-preview] { display: none; }
  .ws-ways { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .ws-name .ap-save { display: none; } .ws-name .ap-ed__name { flex: 1; min-width: 0; max-width: none; font-size: var(--fs-lg); } .ws-name { gap: 8px; } }

/* =========================================================
   Prijzen: alle bedragen op één plek
   ========================================================= */
.pz { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 400px); gap: 20px; align-items: start; }
.pz.is-rules { grid-template-columns: minmax(0, 1fr); }
.pz-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pz-head .ap-h2 { margin: 0; }
.pz-head p { margin: 4px 0 0; }
.pz-view { flex: none; }
.pz-svcs { display: flex; gap: 6px; flex-wrap: wrap; }
.pz-svcs button { height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font: 600 var(--fs-base) var(--body); color: var(--text); cursor: pointer; }
.pz-svcs button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pz-q { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.pz-q.is-focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,198,0,.35); }
.pz-q__h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fcfbf8; }
.pz-q__h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pz-q__h b { font: 700 var(--fs-md) var(--display); color: var(--ink); }
.pz-q__h small { font-size: var(--fs-sm); color: var(--muted); }
.pz-q__n { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--sunken); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.pz-q__edit, .pz-link { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: 600 var(--fs-sm) var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.pz-q__edit:hover, .pz-link:hover { background: var(--sunken); color: var(--ink); }
.pz-q__edit .i, .pz-link .i { width: 14px; height: 14px; }
.pz-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 200px 270px; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--line); }
.pz-q__h + .pz-row { border-top: 0; }
.pz-row--rate { background: #fffbea; }
.pz-img { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 9px; background: var(--sunken); color: var(--faint); }
.pz-img img { width: 100%; height: 100%; object-fit: cover; }
.pz-img .i { width: 16px; height: 16px; }
.pz-img--ic { background: var(--y); color: var(--ink); }
.pz-l { display: flex; flex-direction: column; min-width: 0; }
.pz-l b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-l small { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-kind, .pz-pct select { height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 14px; -webkit-appearance: none; appearance: none; font: 500 var(--fs-base) var(--body); color: var(--ink); cursor: pointer; min-width: 0; }
.pz-kindtxt { font-size: var(--fs-sm); color: var(--muted); padding-left: 2px; }
.pz-range, .pz-pct { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pz-range em { font-style: normal; color: var(--faint); }
.pz-range small { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.pz-m { display: flex; align-items: center; flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.pz-m:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.pz-m i { font-style: normal; color: var(--muted); font-size: var(--fs-sm); }
.pz-m input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; padding: 0 4px; font: 600 var(--fs-base) var(--body); color: var(--ink); text-align: right; outline: none; -moz-appearance: textfield; }
.pz-m input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pz-pct select { flex: 1; }
.pz-pct .pz-m { flex: 0 0 92px; }
.pz-none { font-size: var(--fs-sm); color: var(--faint); }
.pz-auto { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pz-sub { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 6px; border-top: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.pz-sub + .pz-row { border-top: 0; }
.pz-side { position: sticky; top: 16px; }
.pz-side .rc { margin: 0; }
.pz-rules .ap-split > div > .ap-h2, .pz-rules .ap-split > div > .ap-h2 + .ap-muted { display: none; }
/* Link in het tabblad Vragen */
.ap-pzlink { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fcfbf8; }
.ap-pzlink > span { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--y); color: var(--ink); }
.ap-pzlink > span .i { width: 18px; height: 18px; }
.ap-pzlink > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-pzlink b { color: var(--ink); }
.ap-pzlink small { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 1300px) { .pz { grid-template-columns: minmax(0, 1fr); } .pz-side { position: static; } }
@media (max-width: 760px) {
  .pz-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .pz-kind, .pz-kindtxt, .pz-range, .pz-pct, .pz-none, .pz-auto { grid-column: 1 / -1; }
  .pz-q__edit { padding: 0 6px; font-size: 0; gap: 0; }
}

/* Vragen in de werkruimte: rustige lijst links, duidelijke panelen */
.ws .ap-q { grid-template-columns: 290px minmax(0, 1fr); gap: 16px; }
.ws .ap-tree { top: 16px; padding: 12px 10px; border-radius: 16px; box-shadow: none; }
.ws .ap-tree__h { margin: 2px 10px 8px; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ws .ap-tree__row { border-radius: 10px; }
.ws .ap-tree__row > button, .ws button.ap-tree__row { padding: 9px 10px; font-weight: 600; }
.ws .ap-tree__row:hover { background: var(--sunken); }
.ws .ap-tree__row.is-on { background: var(--sunken); box-shadow: none; }
.ws .ap-tree__row.is-on > button[data-svc], .ws button.ap-tree__row.is-on { color: var(--ink); }
.ws .ap-tree__row > .ap-tree__tog { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; padding: 0; border-radius: 7px; color: var(--muted); }
.ws .ap-tree__row > .ap-tree__tog:hover { background: var(--card); color: var(--ink); }
.ws .ap-tree__row > .ap-tree__tog .i { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .18s; }
.ws .ap-tree__svc.is-open > .ap-tree__row .ap-tree__tog .i { transform: none; }
.ws .ap-tree__svc > .ap-tree__row .i:first-child { transform: none; }
.ws .ap-tree__svc.is-open > .ap-tree__row > .ap-tree__tog .i { transform: none; }
.ws .ap-tree__svc:not(.is-open) > .ap-tree__row > .ap-tree__tog .i { transform: rotate(-90deg); }
.ws .ap-tree__row > button[data-svc] { padding-left: 4px; }
.ws .ap-tree__cnt { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); display: inline-grid; place-items: center; }
.ws .ap-tree__svc ol { margin: 2px 0 8px 14px; padding-left: 0; border-left: 0; }
.ws .ap-tree__q { border-radius: 9px; }
.ws .ap-tree__q > button { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; font-size: var(--fs-base); color: var(--text); }
.ws .ap-tree__q > button span { flex: 1; min-width: 0; }
.ws .ap-tree__num { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 0; border-radius: 6px; background: var(--sunken); font: 600 11px/1 var(--body); font-style: normal; color: var(--muted); }
.ws .ap-tree__q:hover { background: var(--sunken); }
.ws .ap-tree__q.is-on { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.ws .ap-tree__q.is-on .ap-tree__num { background: var(--ink); color: #fff; }
.ws .ap-tree__add { font-size: var(--fs-sm); padding: 7px 8px; }
.ws .ap-tree__add--svc { margin: 10px 0 4px; border: 1px dashed var(--line-2); border-radius: 10px; font-size: var(--fs-base); }
.ws .ap-tree__add--imp { margin: 0 0 10px; }
.ws .ap-tree__tip { padding-top: 10px; border-top: 1px solid var(--line); }
.ws .ap-qed { padding: 26px 28px; border-radius: 16px; box-shadow: none; }
.ws .ap-svcform { display: flex; align-items: center; gap: 20px; padding: 16px; border-radius: 14px; box-shadow: none; }
.ws .ap-svcform .ap-photo { position: relative; width: 132px; height: 100px; flex: none; border-radius: 12px; overflow: hidden; }
.ws .ap-photo__edit { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.ws .ap-photo__edit .i { width: 12px; height: 12px; }
.ws .ap-photo:hover .ap-photo__edit { opacity: 1; }
.ws .ap-svcform .ap-small { margin: 6px 0 0; }
.ws .ap-qsum__h { display: flex; align-items: center; gap: 8px; margin-top: 26px; }
.ws .ap-qsum__h span { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--sunken); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); display: inline-grid; place-items: center; }
.ws .ap-qsum { border-radius: 14px; }
@media (max-width: 1100px) { .ws .ap-q { grid-template-columns: minmax(0, 1fr); } }
.ws .ap-qed .ap-note:not(.ap-note--warn) { background: var(--sunken); border-color: transparent; color: var(--text); }
.ws .ap-qed .ap-note:not(.ap-note--warn) .i { color: var(--muted); }
.ws .ap-qed .ap-note b { color: var(--ink); }
.ws .ap-logic, .ws .ap-rate { background: var(--card); border: 1px solid var(--line); box-shadow: none; border-radius: 14px; }
.ws-status, .ws-status.is-on, .ws-status.is-draft, .ws-status.is-pend { height: auto; padding: 0; background: none; font-weight: 600; color: var(--muted); }
.ws-status i { width: 8px; height: 8px; }
.ws-status.is-on i { background: #16a34a; } .ws-status.is-draft i { background: #c2c0b8; } .ws-status.is-pend i { background: #e0a100; }

/* Soort vraag: menu met icoon, naam en voorbeeld */
.qt-dd { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 260px; height: 56px; padding: 0 14px 0 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.qt-dd:hover { border-color: var(--ink); }
.qt-dd:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.qt-dd > .i { width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
.qt-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--sunken); color: var(--ink); }
.qt-ic .i { width: 18px; height: 18px; }
.qt-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.qt-t b { font-weight: 600; color: var(--ink); }
.qt-t small { font-size: var(--fs-sm); color: var(--muted); }
.qt-menu { position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: 2px; max-height: min(520px, calc(100vh - 16px)); overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.qt-menu p { margin: 8px 10px 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.qt-menu p:first-child { margin-top: 2px; }
.qt-menu button { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; cursor: pointer; }
.qt-menu button:hover { background: var(--sunken); }
.qt-menu button.is-on { background: var(--sunken); }
.qt-menu button.is-on .qt-ic { background: var(--ink); color: #fff; }
.qt-menu button > .i { width: 16px; height: 16px; margin-left: auto; color: var(--ink); }
.ws .ap-qmeta { align-items: flex-end; }

/* Antwoorden en vraaglogica in dezelfde rustige stijl */
.ws .ap-olist { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.ws .ap-orow { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 6px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--card); box-shadow: none; }
.ws #opts > .ap-orow:first-child { border-top: 0; }
.ws .ap-orow:hover { background: #fcfbf8; }
.ws .ap-orow .ap-grip { color: var(--faint); opacity: .6; }
.ws .ap-orow:hover .ap-grip { opacity: 1; }
.ws .ap-othumb { width: 48px; height: 48px; flex: none; border-radius: 10px; }
.ws .ap-orow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws .ap-orow .ap-opt__label, .ws .ap-orow .ap-orow__desc { height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none; }
.ws .ap-orow .ap-opt__label { font-weight: 600; color: var(--ink); }
.ws .ap-orow .ap-orow__desc { height: 30px; font-size: var(--fs-sm); color: var(--muted); }
.ws .ap-orow .ap-opt__label:hover, .ws .ap-orow .ap-orow__desc:hover { border-color: var(--line); }
.ws .ap-orow .ap-opt__label:focus, .ws .ap-orow .ap-orow__desc:focus { border-color: var(--ink); background: #fff; outline: none; }
.ws .ap-orow__extras { padding-left: 8px; }
.ws .ap-orow__extras .ap-orow__link { font-size: var(--fs-xs); color: var(--faint); }
.ws .ap-orow:hover .ap-orow__extras .ap-orow__link { color: var(--muted); }
.ws .ap-orow.is-noprice .ap-orow__price { display: none; }
.ws .ap-orow__del { opacity: 0; transition: opacity .15s; }
.ws .ap-orow:hover .ap-orow__del, .ws .ap-orow__del:focus-visible { opacity: 1; }
.ws .ap-olist__add { width: 100%; justify-content: flex-start; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: #fcfbf8; color: var(--muted); }
.ws .ap-olist__add:hover { color: var(--ink); background: var(--sunken); }
.ws .ap-logic { padding: 16px 18px; }
.ws .ap-logic .ap-h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--fs-md); }
.ws .ap-logic .ap-h4 .i { width: 16px; height: 16px; color: var(--muted); }
.ws .ap-logic .ap-lock { margin-left: auto; font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); text-decoration: none; }
.ws .ap-logic .ap-switch--row small { color: var(--muted); }

/* Oppervlakte: meten op de luchtfoto als drie duidelijke keuzes */
.ws .ap-rate .ap-h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--fs-md); }
.ws .ap-rate .ap-h4 .i { width: 16px; height: 16px; color: var(--muted); }
.ws .ap-rate > .ap-small { margin: 0 0 14px; }
.qm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qm__o { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.qm__o:hover { border-color: var(--line-2); background: #fcfbf8; }
.qm__o.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.qm__ic { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px; border-radius: 9px; background: var(--sunken); color: var(--ink); }
.qm__ic .i { width: 16px; height: 16px; }
.qm__o.is-on .qm__ic { background: var(--ink); color: #fff; }
.qm__o b { font-weight: 600; color: var(--ink); }
.qm__o small { font-size: var(--fs-sm); color: var(--muted); }
.qm__tip { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sunken); font-size: var(--fs-sm); color: var(--text); }
.qm__tip span { flex: 1; }
.qm__tip b { color: var(--ink); }
.qm__tip .ap-btn { flex: none; background: var(--card); }
.qm__ok { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: var(--fs-sm); color: #047857; }
.qm__ok .i { width: 15px; height: 15px; }
.ws .ap-rate__row { display: flex; align-items: flex-end; gap: 12px; }
@media (max-width: 640px) { .qm { grid-template-columns: 1fr; } .qm__tip { flex-direction: column; align-items: flex-start; } }

/* Prijzen: dienst kiezen met één keuzemenu */
.pz-pick { display: flex; align-items: center; gap: 6px; }
.pz-dd { flex: 0 1 380px; min-width: 0; }
.pz-step { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.pz-step:disabled { opacity: .35; cursor: default; }
.pz-menu { padding: 6px; }
.pz-menu__q { display: flex; align-items: center; gap: 8px; height: 38px; margin: 2px 2px 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; }
.pz-menu__q .i { width: 15px; height: 15px; color: var(--muted); }
.pz-menu__q input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; outline: none; }
.pz-menu__l { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
.pz-menu__none { margin: 10px; font-size: var(--fs-sm); color: var(--muted); }
.qm { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Dienstkiezer: één regel, rustig */
.pz-dd { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 220px; max-width: 380px; height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: inherit; cursor: pointer; }
.pz-dd:hover { border-color: var(--line-2); }
.pz-dd b { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-dd .i { width: 15px; height: 15px; color: var(--muted); }
.pz-menu button { padding: 9px 12px; font-size: var(--fs-base); color: var(--ink); }
.pz-menu button span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-menu button.is-on { background: var(--sunken); font-weight: 600; }
.pz-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--line); }
.pz-step { width: 40px; height: 40px; }
.pz-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Testen: rekenpaneel rustiger */
.tst-r { padding: 0; overflow: hidden; border-radius: 16px; box-shadow: none; }
.tst-r__h { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.tst-r__h h3 { margin: 0; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.tst-r__h small { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.tst-r__svc, .tst-r > .tst-r__row, .tst-r__rules { padding: 0 20px; }
.tst-r__svc { padding-top: 6px; }
.tst-r__svc + .tst-r__svc { margin-top: 0; border-top: 1px solid var(--line); }
.tst-r__row { align-items: center; padding: 9px 0; border-top: 1px solid #f1efe9; font-size: var(--fs-sm); color: var(--text); }
.tst-r__row.is-head { padding: 10px 0 8px; font-size: var(--fs-base); }
.tst-r .tst-eff { flex: none; padding: 2px 8px; border-radius: var(--r-pill); font-style: normal; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.tst-r .tst-eff.is-up { background: #fff3d6; color: #8a5a00; }
.tst-r .tst-eff.is-down { background: #e3f7ec; color: #047857; }
.tst-r .tst-eff.is-none { padding: 0; background: none; color: var(--faint); font-weight: 500; }
.tst-r__note { margin: 4px 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--sunken); font-size: var(--fs-xs); line-height: 1.45; }
.tst-r__total { margin: 14px 20px 0; padding: 16px 18px; border-radius: 12px; background: var(--ink); }
.tst-r__total small { color: rgba(255,255,255,.65); }
.tst-r__total b { color: #fff; }
.tst-r__logic { margin: 12px 20px 0; }
.tst-r__q { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 0; width: auto; padding: 14px 20px; border-top: 1px solid var(--line); font-weight: 600; font-size: var(--fs-base); color: var(--ink); text-decoration: none; }
.tst-r__q:hover { background: var(--sunken); }
.tst-r__q .i { width: 16px; height: 16px; transition: transform .15s; }
.tst-r__q:hover .i { transform: translateX(3px); }

/* Rekenvoorbeeld: zelfde rustige stijl als Testen */
.rc { margin: 0; border-radius: 16px; box-shadow: none; }
.rc header { padding: 18px 20px 14px; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); }
.rc header > b { font: 700 var(--fs-lg) var(--display); }
.rc header small { color: var(--muted); }
.rc header small b { display: inline; font: inherit; font-weight: 600; color: var(--ink); }
.rc ol { padding: 4px 20px 8px; }
.rc li { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 0; border-bottom: 1px solid #f1efe9; }
.rc li.is-focus { margin: 0 -20px; padding-left: 20px; padding-right: 20px; background: #fffbea; }
.rc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rc__q { white-space: normal; overflow: visible; font-size: var(--fs-sm); line-height: 1.35; color: var(--text); }
.rc__a { width: 100%; height: 36px; border-radius: 9px; font-size: var(--fs-sm); }
.rc__e { flex: none; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; text-align: right; }
.rc__e.is-add { background: var(--sunken); color: var(--ink); }
.rc__e.is-up { background: #fff3d6; color: #8a5a00; }
.rc__e.is-down { background: #e3f7ec; color: #047857; }
.rc__e:not(.is-add):not(.is-up):not(.is-down) { padding: 0; color: var(--faint); font-weight: 500; }
.rc__e small { margin-top: 2px; }
.rc__sum { padding: 14px 20px 18px; background: var(--card); gap: 8px; }
.rc__sum > div { font-size: var(--fs-sm); }
.rc__tot { flex-direction: column; gap: 2px !important; margin-top: 8px; padding: 16px 18px !important; border: 0 !important; border-radius: 12px; background: var(--ink); color: rgba(255,255,255,.7) !important; font-size: var(--fs-sm) !important; }
.rc__tot b { color: #fff !important; font: 800 var(--fs-2xl)/1.15 var(--display); }

/* =========================================================
   Resultaat: stappen links, voorbeeld rechts
   ========================================================= */
.rs { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 440px); gap: 20px; align-items: start; }
.rs-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.rs-sec { border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.rs-sec > header { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 0; }
.rs-sec > header > span { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--ink); color: #fff; font-size: var(--fs-sm); font-weight: 700; }
.rs-sec > header h3 { margin: 2px 0 0; font: 700 var(--fs-md) var(--display); color: var(--ink); }
.rs-sec > header p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.rs-sec__b { display: flex; flex-direction: column; gap: 14px; padding: 16px 22px 20px 60px; }
.rs-sec__b .ap-field { margin: 0; }
.rs-sp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rs-sp__o { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.rs-sp__o:hover { border-color: var(--line-2); }
.rs-sp__o.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rs-sp__o b { font-weight: 600; color: var(--ink); }
.rs-sp__o small { font-size: var(--fs-sm); color: var(--muted); }
.rs-sec .ap-switch--row { margin: 0; }
.rs-auto { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rs-auto > .ap-spin { margin: 16px auto; }
.rs-auto__i { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.rs-auto__i:first-child { border-top: 0; }
.rs-auto__i > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rs-auto__i b { font-weight: 600; color: var(--ink); }
.rs-auto__i small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.rs-auto__ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--sunken); color: var(--ink); }
.rs-auto__ic .i { width: 16px; height: 16px; }
.rs-auto__on { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: var(--fs-sm); font-weight: 600; color: #047857; text-decoration: none; }
.rs-auto__on .i { width: 14px; height: 14px; }
.rs-auto__all { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-top: 1px solid var(--line); background: #fcfbf8; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; }
.rs-auto__all:hover { background: var(--sunken); }
.rs-auto__all .i { width: 14px; height: 14px; }
.rs-side { position: sticky; top: 16px; }
.rs-prev { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.rs-prev > header { display: flex; flex-direction: column; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.rs-prev > header b { font: 700 var(--fs-md) var(--display); color: var(--ink); }
.rs-prev > header small { font-size: var(--fs-sm); color: var(--muted); }
.rs-prev .ap-rprev { margin: 0; padding: 22px 20px; border: 0; border-radius: 0; box-shadow: none; background: var(--sunken); }
@media (max-width: 1200px) { .rs { grid-template-columns: minmax(0, 1fr); } .rs-side { position: static; } }
@media (max-width: 640px) { .rs-sec__b { padding: 14px 16px 18px; } .rs-sp { grid-template-columns: 1fr; } }
.ws .ap-tree__svc > .ap-tree__row[draggable="true"] { cursor: grab; }
.ws .ap-tree__svc.is-drag { opacity: .4; }
.ws .ap-tree__svc.is-over > .ap-tree__row { box-shadow: inset 0 2px 0 var(--ink); }
.ap-olist[hidden] { display: none !important; } .ap-opthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-issues li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ap-issues li > span { flex: 1; min-width: 0; }
.ap-issues__go { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 0; border: 0; background: none; font: 600 var(--fs-sm) var(--body); color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.ap-issues__go .i { width: 13px; height: 13px; }
.ap-issues__go:hover { color: var(--ink); }
.ap-qnote { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.ap-qnote .ap-switch--row { margin: 0; }
.ap-qnote .ap-field { margin: 0; }

/* Design: werkruimte vult het scherm, voorbeeld altijd volledig zichtbaar */
.ws .sd { height: auto; min-height: 520px; }
.sd-canvas { align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
.sd-device, .sd-device.is-tablet, .sd-device.is-mobile { position: relative; flex: none; width: auto; max-width: none; height: auto; padding: 0; border-radius: 14px; background: none; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10); overflow: hidden; transition: none; }
.sd-device iframe, .sd-device.is-mobile iframe { position: absolute; top: 0; left: 0; border-radius: 0; box-shadow: none; transform-origin: 0 0; background: #fff; }
.sd-canvas.is-transparent .sd-device iframe { background: transparent; }
.sd-live em { font-style: normal; color: var(--faint); }

/* Mijn stijlen */
.sd-mine { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.sd-mine__h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sd-theme--mine { position: relative; }
.sd-theme__pick { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.sd-theme__del { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: var(--card); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; }
.sd-theme__del .i { width: 12px; height: 12px; }
.sd-theme--mine:hover .sd-theme__del, .sd-theme__del:focus-visible { opacity: 1; }
.sd-save { display: flex; gap: 6px; }
.sd-save .ap-in { flex: 1; min-width: 0; height: 36px; }
.sd-save__open { align-self: flex-start; }
.sd-acct { align-self: flex-start; font-size: var(--fs-sm); }
.rs-two > div[hidden] { display: none; }
.rs-prev .ap-rprev { max-height: none; overflow: visible; }
.rs-side { max-height: calc(100vh - 32px); overflow: auto; scrollbar-width: thin; border-radius: 16px; }
.ap-rprev__price.is-hidden b { font-size: var(--fs-lg); line-height: 1.35; }

/* Resultaat: uiterlijk kiezen + voorbeeld kleurt mee */
.rs-look { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rs-look__o { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; cursor: pointer; }
.rs-look__o:hover { border-color: var(--line-2); }
.rs-look__o.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rs-look__o b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.rs-lk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 46px; border-radius: 8px; }
.rs-lk i { width: 40%; height: 4px; border-radius: 2px; background: currentColor; opacity: .45; }
.rs-lk u { width: 60%; height: 8px; border-radius: 3px; background: currentColor; }
.rs-lk--soft { background: #fdf3d3; border: 2px solid #f5c400; color: #3a3220; }
.rs-lk--outline { background: #fff; border: 2px solid #f5c400; color: #3a3220; }
.rs-lk--solid { background: #f5c400; border: 2px solid #f5c400; color: #fff; }
.rs-lk--plain { background: none; border: 2px dashed var(--line); color: #3a3220; }
.rs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rs-cols .sd-color .ap-linkbtn { font-size: var(--fs-xs); }
.ap-rprev__price { --rp: var(--y); background: color-mix(in srgb, var(--rp) 16%, #fff); border-color: var(--rp); }
.ap-rprev__price.rp-outline { background: #fff; }
.ap-rprev__price.rp-solid { background: var(--rp); }
.ap-rprev__price.rp-solid small, .ap-rprev__price.rp-solid b { color: #fff; }
.ap-rprev__price.rp-plain { background: none; border: 0; padding: 6px 0; }
.ap-rprev__exp.re-tinted { background: color-mix(in srgb, var(--rp) 8%, #fff); border-color: transparent; }
.ap-rprev__exp.re-plain { border: 0; padding: 0; }
@media (max-width: 640px) { .rs-look { grid-template-columns: 1fr 1fr; } .rs-cols { grid-template-columns: 1fr; } }

/* Resultaat: blokken aan/uit */
.rs-blk { display: flex; flex-direction: column; gap: 8px; }
.rs-blk + .rs-blk { padding-top: 14px; border-top: 1px solid #f1efe9; }
.rs-blk__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rs-blk__h > b { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.rs-blk__h .ap-switch span { font-size: var(--fs-sm); color: var(--muted); min-width: 64px; }
.rs-blk__help { margin: -2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.rs-blk.is-off .rs-blk__b, .rs-blk.is-off .rs-blk__help { display: none; }
.rs-blk.is-off .rs-blk__h > b { color: var(--muted); }
.ap-rprev__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ap-rprev__again { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted); text-decoration: underline; }
.ap-rprev__again .i { width: 13px; height: 13px; }
.sd.is-acct .sd-mode { display: none; }
.acd-head { margin-bottom: 16px; }
.acd-head .ap-h1 { margin: 0; }
.acd-head p { margin: 6px 0 0; }

/* =========================================================
   Beweging: pagina's schuiven zacht in, knoppen reageren op een klik
   ========================================================= */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#view.is-enter { animation: viewIn .32s cubic-bezier(.2, .7, .2, 1) both; }
#view.is-enter .ap-skel, #view.is-enter .ap-spin { animation-delay: 0s; }
.ap-btn, .ap-icon, .ap-linkbtn, .ap-snav a, .ap-tabbar a, .ws-tabs a, .st-tabs a, .sd-seg button, .rs-sp__o, .rs-look__o, .qm__o, .nc-opt, .cl-card, .pz-dd, .qt-dd, .ap-chip, .ap-tabs a {
  transition: transform .14s cubic-bezier(.2, .7, .2, 1), background-color .18s, border-color .18s, color .18s, box-shadow .18s, opacity .18s;
}
.ap-btn:active:not(:disabled), .ap-icon:active:not(:disabled), .sd-seg button:active, .rs-sp__o:active, .rs-look__o:active, .qm__o:active, .pz-dd:active, .qt-dd:active { transform: scale(.97); }
.ap-snav a:active, .ap-tabbar a:active, .ws-tabs a:active { transform: scale(.98); }
.ws-tabs a::after { transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .22s; }
.ws-tabs a:not(.is-on)::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2.5px; background: var(--ink); opacity: 0; transform: scaleX(.4); }
.ws-tabs a.is-on::after { opacity: 1; transform: none; }
.ap-modal__box { animation: modalIn .24s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.qt-menu, .pz-menu, .ap-dtmenu, .ap-sidepop { animation: popIn .16s cubic-bezier(.2, .7, .2, 1) both; transform-origin: top left; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.rs-pane:not([hidden]), .pz-main > *, .sd-sec[open] .sd-sec__b { animation: softIn .22s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { #view.is-enter, .ap-modal__box, .qt-menu, .pz-menu, .ap-dtmenu, .ap-sidepop, .rs-pane, .pz-main > *, .sd-sec__b { animation: none !important; } .ap-btn:active, .ap-icon:active { transform: none !important; } }
.ap-rprev__price.rp-solid small, .ap-rprev__price.rp-solid b { color: var(--rp-t, #fff); }
.rs-sec:not(:has(> header > span)) .rs-sec__b { padding-left: 22px; }
.rs-sec:not(:has(> header > span)) > header h3 { margin-top: 0; }
/* Inhoud: elke regel even breed en op dezelfde lijn */
.rs-sec__b > div[data-spl], .rs-sec__b > div[data-sph] { display: contents; }
.rs-sec__b > div[data-spl][hidden], .rs-sec__b > div[data-sph][hidden] { display: none; }
.rs-blk { padding-top: 14px; border-top: 1px solid #f1efe9; }
.rs-sec__b > .rs-blk:first-child, .rs-sp + .rs-blk, .rs-sp + div > .rs-blk { border-top: 0; padding-top: 0; }
.rs-blk + .rs-blk { padding-top: 14px; }
.rs-blk__h { min-height: 28px; }
.rs-blk__h .ap-switch { margin: 0; flex: none; }
.rs-blk__h .ap-switch span { display: inline-block; min-width: 64px; text-align: left; }
.rs-blk__b .ap-in { width: 100%; }
.rs-blk__b .ap-field { margin: 0; }
.rs-sp + [data-spl][hidden] + [data-sph] > .rs-blk { border-top: 0; padding-top: 0; } .rs-sp { margin-bottom: 4px; }
.rs-blk__h .ap-switch { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 10px; }
.rs-blk__h .ap-switch span { min-width: 0; text-align: right; font-size: var(--fs-sm); color: var(--muted); }
.rs-blk__b:empty { display: none; }
.rs-blk--video .ap-field { margin: 0; }
.rs-pane { display: flex; flex-direction: column; gap: 16px; } .rs-pane[hidden] { display: none; }
/* Beta-label */
.ap-beta { display: inline-flex; align-items: center; height: 18px; margin-left: auto; padding: 0 7px; border-radius: var(--r-pill); background: #efe9ff; color: #5b2bd6; font: 700 10px/1 var(--body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
h1 .ap-beta, h2 .ap-beta { margin-left: 8px; height: 20px; font-size: 10.5px; }
.ap-layout[data-side="icons"] .ap-snav .ap-beta { display: none; }
.ap-tabbar .ap-beta { display: none; }
.az-title { flex: 0 1 auto !important; min-width: 0; } .az-beta { margin-left: 0; margin-right: auto; flex: none; height: 20px; }
.az-title { font-size: 19px !important; letter-spacing: -.01em; }


/* =========================================================
   Instellingen › Documenten: per soort nummer, termijn en sjablonen
   ========================================================= */
.dset { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.dset-card { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.dset-card__h { display: flex; align-items: flex-start; gap: 12px; }
.dset-card__h > span { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--sunken); color: var(--ink); }
.dset-card__h > span .i { width: 17px; height: 17px; }
.dset-card__h h2 { margin: 2px 0 0; font: 700 var(--fs-lg) var(--display); color: var(--ink); }
.dset-card__h p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.dset-card__h p b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px; align-items: start; }
.dset .ap-field { margin: 0; }
.dset-no, .dset-unit { display: flex; align-items: center; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); overflow: hidden; }
.dset-no:focus-within, .dset-unit:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.dset-no em, .dset-unit em { flex: none; padding: 0 10px; font-style: normal; font-size: var(--fs-sm); color: var(--muted); background: var(--sunken); align-self: stretch; display: grid; place-items: center; }
.dset-no .ap-in, .dset-unit .ap-in { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: none; font-variant-numeric: tabular-nums; }
.dset-tpls__h { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.dset-tpls__h h3 { margin: 0; font: 700 var(--fs-md) var(--display); color: var(--ink); }
.dset-tpls__h small { font-size: var(--fs-sm); color: var(--muted); }
.dset-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dset-tpl { display: flex; flex-direction: column; gap: 8px; }
.dset-tpl__open { display: block; border-radius: 10px; text-decoration: none; }
.dset-thumb { position: relative; display: block; aspect-ratio: 210 / 297; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dset-tpl__open:hover .dset-thumb { border-color: var(--line-2); box-shadow: var(--sh-md); transform: translateY(-2px); }
.dset-tpl.is-def .dset-thumb { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dset-thumb__in { position: absolute; top: 0; left: 0; width: 820px; transform-origin: 0 0; transform: scale(var(--ts, .2)); pointer-events: none; }
.dset-thumb__in .px-paper { box-shadow: none; animation: none; border-radius: 0; }
.dset-tpl__b { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.dset-tpl__b b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dset-tpl__b .ap-linkbtn { align-self: flex-start; font-size: var(--fs-xs); }
.dset-def { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: #047857; }
.dset-def .i { width: 12px; height: 12px; }
.dset-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 210 / 297; border: 1.5px dashed var(--line-2); border-radius: 10px; background: #fcfbf8; font: inherit; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.dset-add:hover { border-color: var(--ink); color: var(--ink); background: var(--card); }
.dset-add > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sunken); }
.dset-add > span .i { width: 18px; height: 18px; }
.dset-add b { font-size: var(--fs-sm); font-weight: 600; }
.px-tpl__head { flex-wrap: wrap; row-gap: 6px; } .px-tpl__head .px-tpl__name { flex: 1 1 100%; min-width: 0; }
.dl-more__h { margin: 18px 12px 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.dl-more a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: var(--fs-base); color: var(--text); text-decoration: none; }
.dl-more a:hover { background: var(--sunken); color: var(--ink); }
.dl-more a .i { width: 16px; height: 16px; color: var(--muted); }
/* Nieuw document: sjabloon kiezen in hetzelfde menu */
.ap-dtmenu .dt-tpl__h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px 2px; }
.ap-dtmenu .dt-tpl__h b { font: 700 var(--fs-md) var(--display); color: var(--ink); }
.ap-dtmenu .dt-tpl__sub { margin: 2px 10px 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ap-dtmenu .dt-tpl__l { display: flex; flex-direction: column; gap: 2px; min-width: 280px; }
.ap-dtmenu .dt-tpl__l > .ap-spin { margin: 12px auto; }
.ap-dtmenu .dt-tpl__l .px-swatch { width: 14px; height: 14px; flex: none; }
.ap-dtmenu .dt-tpl__def { margin-left: auto; font-style: normal; font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: #e3f7ec; color: #047857; }
.ap-dtmenu .dt-tpl__add { margin-top: 4px; border-top: 1px solid var(--line) !important; border-radius: 0 0 10px 10px !important; padding-top: 10px !important; }
.ap-dtmenu.is-tpl { width: 300px; max-width: calc(100vw - 16px); }
.ap-dtmenu .dt-tpl__h { justify-content: flex-start; }
.ap-dtmenu .dt-tpl__h b { flex: 1; margin: 0; text-align: left; white-space: nowrap; }
.ap-dtmenu .dt-tpl__l { min-width: 0; }
.ap-dtmenu .dt-tpl__l small { color: #047857; }
.ap-dtmenu .dt-tpl__add small { color: var(--muted) !important; }
.ap-dtmenu .dt-tpl__h > b { display: block; flex: 1 1 auto; text-align: left !important; margin: 0 0 0 4px !important; }

/* Document: korting per regel, korting op het totaal, weergave */
.px-ldisc { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.px-ldisc .px-in { width: 70px; height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: var(--fs-sm); }
.px-ldisc select.px-in { width: 50px; }
.px-disc { display: flex; align-items: center; gap: 6px; }
.px-disc .ap-in { flex: 1; min-width: 0; }
.px-segs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--sunken); }
.px-segs button { min-width: 34px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: 600 var(--fs-sm) var(--body); color: var(--muted); cursor: pointer; }
.px-segs button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.px-segs--full { display: flex; }
.px-segs--full button { flex: 1; }
.px-side__sec .ap-switch--row { margin: 8px 0 0; }
.px-hidnote { caption-side: top; text-align: left; margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; background: var(--sunken); font-size: var(--fs-xs); color: var(--muted); }
.px-side div.px-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.px-side div.px-field > span:first-child { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.px-side div.px-field .ap-in { height: 34px; }
.px-side div.px-field small { line-height: 1.4; }
.px-side .px-segs--full button { font-size: var(--fs-sm); white-space: nowrap; }

/* Sjabloon: onderdelen */
.tb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tb-row { border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .15s; }
.tb-row.is-open { border-color: var(--ink); }
.tb-row.is-off .tb-name b, .tb-row.is-off .tb-ic { opacity: .45; }
.tb-row__h { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; }
.tb-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--sunken); color: var(--ink); }
.tb-ic .i { width: 15px; height: 15px; }
.tb-name { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 2px 0; font: inherit; text-align: left; cursor: pointer; }
.tb-name:disabled { cursor: default; }
.tb-name b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.tb-name small { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tb-acts { display: flex; gap: 2px; flex: none; }
.tb-acts .ap-icon { width: 28px; height: 28px; }
.tb-acts .ap-icon .i { width: 14px; height: 14px; }
.tb-acts [data-beye]:not(.is-on) { color: var(--faint); }
.tb-set { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; }
.tb-img { display: flex; align-items: center; gap: 10px; }
.tb-img img, .tb-img > span { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--sunken); display: grid; place-items: center; color: var(--faint); }
.tb-terms { display: flex; flex-direction: column; gap: 6px; }
.tb-term { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; gap: 6px; align-items: center; }
.tb-term .dset-unit { height: 34px; }
.tb-terms__f { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
.tb-terms__f .is-ok { color: #047857; } .tb-terms__f .is-warn { color: #b45309; }
.tb-add { position: relative; margin-top: 8px; }
.tb-addlist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.tb-addlist button { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.tb-addlist button:hover { border-color: var(--ink); }
.tb-addlist .i { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--muted); }
.tb-addlist b { display: block; font-size: var(--fs-sm); color: var(--ink); }
.tb-addlist small { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
/* Extra onderdelen op het blad */
.px-xtext { margin: 18px 0; white-space: normal; line-height: 1.6; }
.px-xtext.is-empty, .px-ximg.is-empty { color: #b3ada0; border: 1px dashed #ddd6c8; border-radius: 6px; padding: 14px; text-align: center; }
.px-ximg { margin: 18px 0; } .px-ximg img { display: block; width: 100%; border-radius: 4px; }
.px-ximg.is-half { width: 50%; } .px-ximg.is-small { width: 28%; }
.px-xlogo { display: flex; margin: 18px 0; } .px-xlogo.is-center { justify-content: center; } .px-xlogo.is-right { justify-content: flex-end; }
.px-xlogo img { max-height: 90px; max-width: 60%; object-fit: contain; }
.px-xpage { position: relative; margin: 26px -60px; border-top: 2px dashed #e4dfd4; } .px-xpage span { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); padding: 0 8px; background: #fff; font-size: 11px; color: #a39d90; }
.px-xterms { margin: 22px 0; } .px-xterms h3 { margin: 0 0 8px; font-size: 14px; color: var(--acc); }
.px-xterms table { width: 100%; border-collapse: collapse; font-size: 13px; } .px-xterms td { padding: 6px 0; border-bottom: 1px solid #eee; } .px-xterms td.n { text-align: right; }
.px-tpl { grid-template-columns: 380px minmax(0, 1fr); }
.px-tpl__ctrl { min-width: 0; overflow-x: hidden; }
.px-tpl__set { min-width: 0; max-width: 100%; }
.tb-row, .tb-row__h { min-width: 0; }
.tb-acts [data-bmove] { opacity: 0; transition: opacity .15s; }
.tb-row:hover [data-bmove], .tb-row:focus-within [data-bmove] { opacity: 1; }
.tb-term { grid-template-columns: minmax(0, 1fr) 84px 28px; }
@media (max-width: 1100px) { .px-tpl { grid-template-columns: 340px minmax(0, 1fr); } }
.tb-term .dset-unit .ap-in { padding: 0 6px 0 10px; text-align: right; } .tb-term { grid-template-columns: minmax(0, 1fr) 92px 28px; } .px-tpl { grid-template-columns: 360px minmax(0, 1fr); }
.tb-hline { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; align-items: center; } .tb-img__b { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .tb-img img.is-logo { object-fit: contain; background: #fff; border: 1px solid var(--line); } .tb-set .px-field { display: flex; flex-direction: column; gap: 4px; } .tb-set .px-field > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.tb-set .px-field { align-items: stretch; text-align: left; } .tb-set .px-field > span { text-align: left; } .tb-terms__f { flex-wrap: wrap; gap: 6px 12px; } .tb-terms__f .ap-linkbtn { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .tb-terms__f .ap-linkbtn .i { width: 13px; height: 13px; } .tb-terms__f [data-hfoff] { color: var(--muted); font-size: var(--fs-xs); }
.px-tpl > * { min-height: 0; } .px-tpl__ctrl { min-height: 0; max-height: 100%; overflow-y: auto; } .px-tpl__prev { min-height: 0; overflow-y: auto; }
.px-tpl__ctrl, .px-tpl__prev, .ap-fx__side, .ap-fx__main { position: relative; } .ap-switch { position: relative; }

/* Sjabloon ontwerpen op het blad */
.px-blk { position: relative; margin: 0 -14px; padding: 4px 14px; border-radius: 8px; outline: 1.5px solid transparent; transition: outline-color .15s, background .15s; }
.px-blk:hover { outline-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.px-blk.is-drag { opacity: .4; }
.px-blk.is-over-top { box-shadow: inset 0 3px 0 var(--acc); } .px-blk.is-over-bot { box-shadow: inset 0 -3px 0 var(--acc); }
.px-blk__grip { position: absolute; left: -26px; top: 8px; display: grid; place-items: center; width: 20px; height: 26px; border-radius: 6px; color: #a39d90; cursor: grab; opacity: 0; transition: opacity .15s; }
.px-blk__grip .i { width: 14px; height: 14px; }
.px-blk:hover .px-blk__grip { opacity: 1; }
.px-blk__grip:active { cursor: grabbing; }
.px-ins { position: absolute; left: 50%; bottom: -11px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; padding: 0; border: 1px solid #e2dccf; border-radius: 50%; background: #fff; font: 600 15px/1 var(--body); color: #8a8477; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; }
.px-blk:hover .px-ins { opacity: 1; transform: none; }
.px-ins:hover { border-color: var(--acc); color: #111; }
.px-ce { outline: none; border-radius: 4px; cursor: text; transition: background .15s; }
.px-ce:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.px-ce:focus { background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 40%, transparent); }
.px-celine { display: block; min-height: 1.4em; }
.px-ce.is-empty:empty::before, .px-xtext.px-ce:empty::before { content: attr(data-ph); color: #b3ada0; }
.px-ceadd { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 3px; padding: 0; border: 1px dashed #d6cfc0; border-radius: 50%; background: none; font: 600 13px/1 var(--body); color: #a39d90; cursor: pointer; opacity: 0; transition: opacity .15s; }
.px-from:hover .px-ceadd, .px-ceadd:focus-visible { opacity: 1; }
.px-ceadd:hover { border-color: var(--acc); color: #111; }
.px-insmenu { position: fixed; z-index: 1000; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 280px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 14px 34px rgba(0,0,0,.14); animation: popIn .16s cubic-bezier(.2,.7,.2,1) both; }
.px-insmenu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: 500 var(--fs-sm) var(--body); color: var(--ink); text-align: left; cursor: pointer; }
.px-insmenu button:hover { background: var(--sunken); }
.px-insmenu .i { width: 15px; height: 15px; color: var(--muted); }

/* Sjabloon: rustige groepen die open- en dichtklappen */
.tg { border-bottom: 1px solid rgba(0,0,0,.06); }
.tg > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; list-style: none; cursor: pointer; font: 700 var(--fs-md) var(--display); color: var(--ink); }
.tg > summary::-webkit-details-marker { display: none; }
.tg > summary .i { width: 16px; height: 16px; color: var(--muted); transition: transform .18s; }
.tg[open] > summary .i { transform: rotate(180deg); }
.tg__b { display: flex; flex-direction: column; gap: 10px; padding: 0 2px 16px; }
.tg__l { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.tg .ap-switch--row { margin: 0; }
.tg .tb-name { justify-content: center; min-height: 30px; }
.tb-addlist button { align-items: center; }
.px-tpl__set > .tg:first-child > summary { padding-top: 6px; }
/* Kop: elke regel apart verslepen */
.px-hl { position: relative; display: block; }
.px-hl__grip { position: absolute; left: -18px; top: 1px; font-style: normal; font-size: 11px; letter-spacing: -2px; color: #b3ada0; cursor: grab; opacity: 0; transition: opacity .15s; user-select: none; }
.px-hl:hover .px-hl__grip { opacity: 1; }
.px-hl.is-drag { opacity: .4; }
.px-hl.is-over { box-shadow: inset 0 2px 0 var(--acc); }
/* Invulvelden in een sjabloon */
.px-tok { display: inline-block; margin: 1px 0; padding: 0 6px; border: 1px dashed color-mix(in srgb, var(--acc) 55%, #ccc); border-radius: 4px; background: color-mix(in srgb, var(--acc) 10%, #fff); font-size: .92em; color: #6b665c; white-space: nowrap; }
.px-tok b { color: #2b2a27; font-weight: 600; }
.px-to--tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.px-insmenu--one { grid-template-columns: 1fr; width: 240px; }

/* Document: koppelingen met contactpersoon, organisatie en deal */
.px-links { display: flex; flex-direction: column; gap: 6px; }
.px-link { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.px-link > .i { width: 15px; height: 15px; flex: none; color: var(--muted); }
.px-link__l { flex: none; width: 104px; font-size: var(--fs-sm); color: var(--muted); }
.px-link__v { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; }
.px-link__v b { font-size: var(--fs-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-link__v small { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-link__v:hover b { text-decoration: underline; }
.px-link__add { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: 600 var(--fs-sm) var(--body); color: var(--ink); cursor: pointer; }
.px-link__add:hover { background: var(--sunken); }
.px-link__add .i { width: 13px; height: 13px; }
.px-pick { position: fixed; z-index: 1000; width: 300px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 16px 40px rgba(0,0,0,.14); animation: popIn .16s cubic-bezier(.2,.7,.2,1) both; }
.px-pick__q { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; }
.px-pick__q .i { width: 15px; height: 15px; color: var(--muted); }
.px-pick__q input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; outline: none; }
.px-pick__l { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; margin: 6px 0; }
.px-pick__l button, .px-pick__new button { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.px-pick__l button:hover, .px-pick__new button:hover { background: var(--sunken); }
.px-pick__l b { font-size: var(--fs-sm); color: var(--ink); }
.px-pick__l small { font-size: var(--fs-xs); color: var(--muted); }
.px-pick__none { margin: 8px 10px; font-size: var(--fs-sm); color: var(--muted); }
.px-pick__new { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.px-pick__new button { flex-direction: row; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.px-pick__new .i { width: 14px; height: 14px; }
/* Kop en documentgegevens naast elkaar, elk apart versleepbaar */
.px-row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.px-row2 > * { min-width: 0; }
.px-head--from, .px-head--meta { display: block; border: 0; padding: 0; margin: 0; }
.px-row2 + * { margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--acc); }
.px-paper > .px-head--meta, .px-paper > .px-blk > .px-head--meta { display: flex; justify-content: flex-end; }
.px-no { width: 150px; text-align: right; font-variant-numeric: tabular-nums; }

/* Kop en documentgegevens: één nette rij met een lijn eronder, zonder rand rond het volgende onderdeel */
.px-row2 + * { margin-top: 0; padding-top: 0; border-top: 0; }
.px-row2 { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 2px solid var(--acc); align-items: start; }
.px-row2 .px-meta { text-align: right; }
.px-row2 .px-meta dl { justify-items: end; }
.px-to--tpl > span, .px-to--tpl .px-hl { display: block; margin: 2px 0; }
.px-to--tpl .px-ceadd { margin-top: 4px; }
.px-to--tpl:hover .px-ceadd { opacity: 1; }
/* Ongedaan maken */
.px-tpl__head { align-items: center; }
.px-undo { flex: none; }
/* Lijst: verwijderen bij een rij */
.px-row { position: relative; }
.px-rowdel { width: 30px; height: 30px; flex: none; opacity: 0; transition: opacity .15s; }
.px-row:hover .px-rowdel, .px-rowdel:focus-visible { opacity: 1; }
.px-rowdel:hover { color: var(--err); }
/* Klik op een onderdeel in de lijst: het licht even op op het blad */
.tb-name { cursor: pointer; }
.tb-row:hover { border-color: var(--line-2); }
.px-blk.is-flash { animation: pxFlash 1.4s ease-out; }
@keyframes pxFlash { 0%, 30% { outline-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); } 100% { outline-color: transparent; background: transparent; } }
/* Documentgegevens: labels en waarden in twee rechte kolommen */
.px-meta dl { display: grid !important; grid-template-columns: auto auto; column-gap: 16px; row-gap: 6px; justify-content: end; align-items: center; margin: 8px 0 0; }
.px-meta dl > div { display: contents; }
.px-meta dt { margin: 0; text-align: right; color: #7a756b; white-space: nowrap; }
.px-meta dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-meta .px-date, .px-meta .px-no { width: 128px; height: auto; padding: 0; border: 0; background: none; text-align: right; font: inherit; font-weight: 600; color: inherit; }
.px-meta .px-date::-webkit-calendar-picker-indicator { margin-left: 4px; opacity: .5; cursor: pointer; }
.px-meta .px-date::-webkit-datetime-edit { display: inline-flex; justify-content: flex-end; }
.px-tok { cursor: text; } .px-tok.is-sel { background: color-mix(in srgb, var(--acc) 35%, #fff); border-style: solid; border-color: var(--acc); }

/* Tekstbalk boven het blad */
.px-tpl__prevbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.px-fmt { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.px-fmt.is-idle { opacity: .55; }
.px-fmt button { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 7px; background: none; font: 600 15px/1 var(--body); color: var(--ink); cursor: pointer; }
.px-fmt button:hover { background: var(--sunken); }
.px-fmt button.is-on { background: var(--ink); color: #fff; }
.px-fmt button .i { width: 16px; height: 16px; }
.px-fmt__sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.px-fmt__fs { min-width: 26px; text-align: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--muted); }
.px-blk.is-fmt { outline-color: var(--acc); }
/* Witruimte slepen */
.px-gap { position: absolute; left: 30%; right: 30%; top: -5px; z-index: 3; height: 10px; border-radius: 5px; cursor: ns-resize; opacity: 0; transition: opacity .15s; }
.px-gap::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 2px; background: var(--acc); }
.px-blk:hover .px-gap, .px-blk.is-sizing .px-gap { opacity: 1; }
.px-xsp { position: relative; }
.px-blk .px-xsp { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--acc) 8%, transparent) 6px 12px); border-radius: 4px; }
.px-xsp em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: 11px; color: #a39d90; pointer-events: none; }
.px-xsp__h { position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; cursor: ns-resize; }
.px-xsp__h::after { content: ""; position: absolute; left: 40%; right: 40%; top: 3px; height: 3px; border-radius: 2px; background: var(--acc); opacity: .6; }
/* Sjablonen verwijderen in de lijsten */
.dt-tpl__row { position: relative; display: flex; align-items: center; }
.dt-tpl__row > button:first-child { flex: 1; min-width: 0; }
.dt-tpl__del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0 !important; border: 0; border-radius: 7px; background: var(--card) !important; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; }
.dt-tpl__del .i { width: 14px; height: 14px; }
.dt-tpl__row:hover .dt-tpl__del, .dt-tpl__del:focus-visible { opacity: 1; }
.dt-tpl__del:hover { color: var(--err); }

/* Sjabloon: geen lijst meer, wel de instellingen van het gekozen onderdeel */
.tb-tip { margin: 4px 0 12px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.tb-sel { margin: 4px 0 12px; border: 1px solid var(--ink); border-radius: 12px; background: var(--card); }
.tb-sel__h { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px 10px; }
.tb-sel__h b { flex: 1; font-size: var(--fs-sm); color: var(--ink); }
.tb-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.tb-hidden > span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.tb-hidden button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px dashed var(--line-2); border-radius: var(--r-pill); background: none; font: 500 var(--fs-xs) var(--body); color: var(--muted); cursor: pointer; }
.tb-hidden button:hover { border-color: var(--ink); color: var(--ink); }
.tb-hidden .i { width: 13px; height: 13px; }
.px-tpl__set > .tb-add { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.px-blk__hide { position: absolute; left: -26px; top: 36px; display: grid; place-items: center; width: 20px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: #a39d90; cursor: pointer; opacity: 0; transition: opacity .15s; }
.px-blk__hide .i { width: 13px; height: 13px; }
.px-blk:hover .px-blk__hide { opacity: 1; }
.px-blk__hide:hover { color: var(--err); background: #fff; }

/* Sjabloon: logo opladen linksboven op het blad */
.px-logobox { position: relative; align-self: flex-start; display: inline-flex; }
.px-logoup { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 8px; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.px-logoup:not(.has-logo) { height: 56px; padding: 0 16px; border: 1.5px dashed #cfd3da; color: #6b7280; font-size: 13px; font-weight: 600; background: #fafbfc; }
.px-logoup:not(.has-logo):hover { border-color: var(--px-acc, #111); color: #111; background: #f3f4f6; }
.px-logoup:not(.has-logo) .i { width: 16px; height: 16px; }
.px-logoup.has-logo { padding: 4px; margin: -4px; outline: 1.5px dashed transparent; outline-offset: 0; }
.px-logoup.has-logo:hover { outline-color: #cfd3da; background: rgba(0,0,0,.02); }
.px-logodel { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; display: grid; place-items: center; opacity: 0; transition: opacity .18s ease; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.px-logodel .i { width: 12px; height: 12px; }
.px-logobox:hover .px-logodel, .px-logodel:focus-visible { opacity: 1; }
.px-logodel:hover { color: #b91c1c; border-color: #fecaca; }

/* Sjabloon: titel en labels van het documentblok rechtstreeks aanpassen */
.px-lab { outline: none; border-radius: 4px; padding: 0 3px; margin: 0 -3px; cursor: text; transition: background .15s ease, box-shadow .15s ease; }
.px-lab:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.px-lab:focus { background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--acc) 60%, transparent); }
.px-auto { color: #9aa0a8; font-style: italic; }
.px-to__note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: #8a9099; }
.px-to__note .i { width: 13px; height: 13px; flex: none; }

/* Document: klant kiezen uit je contacten, herkennen of nieuw bewaren */
.px-rel { margin: 4px 0 10px; }
.px-rel__pick { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 360px; padding: 9px 12px; border: 1.5px dashed #d4d8de; border-radius: 10px; background: #fafbfc; color: #4b5563; font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease; }
.px-rel__pick:hover { border-color: var(--acc); background: #fff; }
.px-rel__pick .i { width: 15px; height: 15px; flex: none; }
.px-rel__pick span { font-weight: 600; color: #111; }
.px-rel__pick em { font-style: normal; color: #9aa0a8; }
.px-rel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.px-rel__on { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--acc) 10%, #fff); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }
.px-rel__on .i { width: 16px; height: 16px; flex: none; }
.px-rel__on > span { display: flex; flex-direction: column; line-height: 1.25; }
.px-rel__on b { font-size: 13px; }
.px-rel__on small { font-size: 11.5px; color: #6b7280; }
.px-rel__btn { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #4b5563; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.px-rel__btn:hover { background: #f3f4f6; color: #111; }
.px-rel__x { width: 26px; height: 26px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: #9aa0a8; cursor: pointer; }
.px-rel__x:hover { background: #fef2f2; color: #b91c1c; }
.px-rel__x .i { width: 13px; height: 13px; }
.px-relhint { display: flex; flex-direction: column; gap: 2px; max-width: 420px; }
.px-relhint:empty { display: none; }
.px-relhint { margin: 2px 0 6px; padding: 4px; border-radius: 10px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 6px 18px rgba(0,0,0,.06); animation: pxHintIn .16s ease; }
@keyframes pxHintIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.px-relhint button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: none; font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.px-relhint button:hover { background: #f5f6f8; }
.px-relhint button .i { width: 15px; height: 15px; flex: none; color: #6b7280; }
.px-relhint button > span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.px-relhint b { font-size: 13px; }
.px-relhint small { font-size: 11.5px; color: #8a9099; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-relhint em { font-style: normal; font-size: 12px; font-weight: 600; color: #4b5563; }
.px-relhint .is-new { border-top: 1px solid #f0f1f3; border-radius: 0 0 7px 7px; }
.px-rel { flex-wrap: nowrap; }
.px-rel__pick { max-width: 440px; white-space: nowrap; }
.px-rel__pick em { margin-left: auto; padding-left: 12px; }
.px-rel__on { min-width: 0; }
.px-rel__on small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.px-rel__btn, .px-rel__x { flex: none; white-space: nowrap; }

/* Opmaak van een onderdeel werkt door op alle tekst erin (ook velden, titels en labels) */
.st-b, .st-b :is(*, input, textarea, select) { font-weight: 700 !important; }
.st-i, .st-i :is(*, input, textarea, select) { font-style: italic !important; }
.st-c :is(*, input, textarea, select):not(.px-tok):not(.px-tok *) { color: inherit !important; }
.st-c :is(input, textarea)::placeholder { color: inherit; opacity: .45; }
.st-ff :is(*, input, textarea, select) { font-family: inherit !important; }
.st-al :is(*, input, textarea) { text-align: inherit !important; }
.st-al :is(.px-from, .px-to, .od-from, .od-to, .px-meta, .od-meta) { align-items: var(--st-ai) !important; }
/* Tekstbalk: lettertype en kleur */
.px-fmt__ff { height: 28px; max-width: 118px; padding: 0 22px 0 8px; border: 0; border-radius: 6px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 13px; -webkit-appearance: none; appearance: none; font: inherit; font-size: 13px; font-weight: 500; color: #111; cursor: pointer; }
.px-fmt__ff:hover { background-color: #f3f4f6; }
.px-fmt__c { position: relative; display: grid; place-items: center; width: 30px; height: 28px; border-radius: 6px; cursor: pointer; }
.px-fmt__c:hover { background: #f3f4f6; }
.px-fmt__a { font-weight: 700; font-size: 14px; line-height: 1; padding-bottom: 2px; border-bottom: 3px solid var(--c, transparent); box-shadow: 0 2px 0 -1px #d1d5db; }
.px-fmt__c input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.px-fmt.is-idle :is(select, label) { opacity: .45; pointer-events: none; }
/* Sjabloonvoorbeeld: zoals de klant het ziet als regelprijzen of het totaal verborgen staan */
.px-noprices .px-pc { display: none; }
.px-nototal .px-tot > div { display: none; }
.px-nototal .px-tot .px-hidnote, .px-noprices .px-hidnote { display: block; }
.st-al :is(.px-to, .px-from) { max-width: none !important; width: 100%; }

/* Bedrijfsinstellingen in Documenten */
.bset-main { overflow-y: auto; }
.bset-in { max-width: 860px; margin: 0 auto; padding: 28px 32px 40px; }
.bset-nav a.is-on { background: var(--soft, #f3f2ee); color: var(--ink, #111); font-weight: 600; }
.dset-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.bset-addr { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) !important; }
@media (max-width: 760px) { .bset-in { padding: 18px 16px 30px; } .dset-grid--3, .bset-addr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } }
/* Hulptekst onder het veld, zodat alle invulvakken op één lijn staan */
.dset-grid .ap-field { display: flex; flex-direction: column; }
.dset-grid .ap-field__l { order: 1; }
.dset-grid .ap-field > :is(input, select, textarea, span, .dset-no, .dset-unit) { order: 2; }
.dset-grid .ap-field__h { order: 3; margin: 6px 0 0; }
.bset-nav a.is-on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
/* Hulptekst onder het veld, zodat alle invulvakken op één lijn staan */
.dset-grid .ap-field { display: flex; flex-direction: column; }
.dset-grid .ap-field__l { order: 1; }
.dset-grid .ap-field > :is(input, select, textarea, span, .dset-no, .dset-unit) { order: 2; }
.dset-grid .ap-field__h { order: 3; margin: 6px 0 0; }
.bset-nav a.is-on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }

/* Bedrijfsinstellingen: één paneel, secties met een lijn ertussen */
.bset-in { max-width: 820px; }
.bset-panel { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 14px; overflow: hidden; }
.bset-head { display: flex; align-items: center; gap: 16px; padding: 24px 28px; border-bottom: 1px solid rgba(0,0,0,.07); }
.bset-ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--soft, #f3f2ee); flex: none; }
.bset-ic .i { width: 26px; height: 26px; }
.bset-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bset-head b { font: 700 18px/1.25 var(--display, inherit); }
.bset-head small { font-size: 14px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; }
.bset-sec { padding: 22px 28px; }
.bset-sec + .bset-sec { border-top: 1px solid rgba(0,0,0,.07); }
.bset-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; }
.bset-full { grid-column: 1 / -1; }
.bset-grid .ap-field { margin: 0; }
.bset-save { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 14px 28px; border-top: 1px solid rgba(0,0,0,.07); background: rgba(255,255,255,.96); backdrop-filter: blur(6px); }
@media (max-width: 640px) { .bset-grid { grid-template-columns: minmax(0, 1fr); } .bset-sec, .bset-head { padding-left: 18px; padding-right: 18px; } }
/* Documenten in dezelfde stijl */
.dset--flat { gap: 0 !important; display: block; }
.dset--flat > .dset-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 22px 28px !important; background: transparent !important; }
.dset--flat > .dset-card + .dset-card { border-top: 1px solid rgba(0,0,0,.07) !important; }
.dset--flat .dset-card__h > span { display: none; }
.dset--flat .dset-card__h h2 { font-size: 16px; }
.dset--flat .dset-grid, .dset--flat .dset-grid--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.dset--flat .ap-row--sticky { margin: 0 !important; padding: 14px 28px; border-top: 1px solid rgba(0,0,0,.07); background: rgba(255,255,255,.96); justify-content: flex-end; }
.dset-fmtown { margin-top: 8px; }
.dset-text { margin-top: 18px; }

/* Documentnummer: automatisch, en een formaat opgebouwd uit labels */
.fmt-next { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line, #e5e2da); border-radius: 12px; background: var(--soft, #f7f6f2); }
.fmt-next b { font: 600 15px/1 var(--mono, ui-monospace, monospace); letter-spacing: .01em; }
.fmt-auto { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 600; color: #2f6b4f; }
.fmt-auto .i { width: 13px; height: 13px; }
.fmt-next .ap-linkbtn { font-size: 13px; }
.fmt-nextin { display: flex; align-items: center; gap: 12px; }
.fmt-nextin .dset-no { flex: 1; }
.fmt-box { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line, #e5e2da); border-radius: 12px; background: #fff; font: 500 15px/1.6 var(--mono, ui-monospace, monospace); outline: none; cursor: text; transition: border-color .15s, box-shadow .15s; white-space: pre-wrap; }
.fmt-box:focus { border-color: var(--ink, #111); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.fmt-box.is-bad { border-color: #e0a3a3; }
.fmt-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; margin: 0 1px; border-radius: 7px; background: #fff4cc; border: 1px solid #f1d27a; color: #5b4a12; font: 600 12.5px/1 Inter, system-ui, sans-serif; user-select: none; cursor: default; }
.fmt-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fmt-add button { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px dashed #d4d1c7; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #4b5563; cursor: pointer; transition: background .15s, border-color .15s; }
.fmt-add button:hover { background: #fff; border-color: #b9b5a8; color: #111; }
.fmt-add .i { width: 12px; height: 12px; }

/* Oogje: zichtbaar of verborgen voor je klant */
.px-eye { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 6px; vertical-align: middle; border: 0; border-radius: 6px; background: none; color: #9aa0a8; cursor: pointer; transition: background .15s, color .15s; }
.px-eye:hover { background: #f3f4f6; color: #111; }
.px-eye .i { width: 15px; height: 15px; }
.px-eye.is-off { color: #b45309; background: #fff7ed; }
.px-tot { position: relative; }
.px-tot > .px-eye { position: absolute; top: 0; left: -32px; margin: 0; }
.px-tot.is-hidden > :not(.px-eye) { opacity: .4; }
.is-noprice .px-pc:not(.px-eyecell) { opacity: .4; }
.is-noprice .px-eyecell { color: inherit; }
/* Labels altijd boven het vak, hulptekst eronder */
.dset-grid .ap-field > * { order: 2; }
.dset-grid .ap-field > .ap-field__l { order: 1 !important; }
.dset-grid .ap-field > .ap-field__h { order: 3 !important; }

/* Documentnummer formaat: keuzelijst die openschuift */
.nf { position: relative; }
.nf-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--line, #e5e2da); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.nf-btn:hover { border-color: #c9c5b9; }
.nf.is-open .nf-btn { border-color: var(--ink, #111); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.nf-btn b { font: 600 15px/1 var(--mono, ui-monospace, monospace); white-space: nowrap; }
.nf-btn small { flex: 1; min-width: 0; font-size: 12.5px; color: #8a9099; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-btn > .i { width: 16px; height: 16px; flex: none; color: #6b7280; transition: transform .2s ease; }
.nf.is-open .nf-btn > .i { transform: rotate(180deg); }
.nf-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: top; transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.nf.is-open .nf-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.nf-list { display: flex; flex-direction: column; }
.nf-list button { display: grid; grid-template-columns: minmax(0, 1fr) 18px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-radius: 9px; background: none; font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.nf-list button:hover { background: #f5f6f8; }
.nf-list b { font: 600 14px/1.3 var(--mono, ui-monospace, monospace); }
.nf-list small { grid-row: 2; font-size: 12px; color: #8a9099; }
.nf-list .i { grid-row: 1 / span 2; grid-column: 2; width: 16px; height: 16px; color: #2f6b4f; opacity: 0; }
.nf-list .is-on { background: #f5f6f8; }
.nf-list .is-on .i { opacity: 1; }
.nf-own { margin-top: 6px; padding: 12px 10px 6px; border-top: 1px solid #f0f1f3; display: flex; flex-direction: column; gap: 10px; }
.nf-own__h { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a9099; }
.nf-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.nf-row > span { font-size: 13px; font-weight: 600; color: #374151; }
.nf-row .ap-in { height: 34px; }
.nf-seg { display: flex; padding: 3px; gap: 2px; border-radius: 9px; background: #f3f4f6; }
.nf-seg button { flex: 1; height: 28px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #6b7280; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.nf-seg button:hover { color: #111; }
.nf-seg button.is-on { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Gekoppelde klant: gegevens netjes ingevuld */
.px-tofill { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 4px; }
.px-tofill b { font-size: 15px; }
.px-tofill span { color: #4b5563; }
.px-tofill__none { color: #9aa0a8 !important; font-style: italic; }
.px-toedit { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px 5px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #6b7280; cursor: pointer; transition: background .15s, color .15s; }
.px-toedit:hover { background: #f3f4f6; color: #111; }
.px-toedit .i { width: 13px; height: 13px; }
.px-to--filled { display: flex; flex-direction: column; }

/* Koppelingen naast de offerte: contactpersoon, organisatie en deal */
.px-lks { margin: 6px -20px 0; border-top: 1px solid rgba(0,0,0,.07); }
.px-lk { padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,.07); }
.px-lk h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink, #111); }
.px-lk__add { display: block; width: 100%; padding: 10px 12px; border: 1px dashed transparent; border-radius: 10px; background: none; font: inherit; font-size: 13.5px; color: #8a9099; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.px-lk__add:hover:not(:disabled) { background: #fff; border-color: #d4d1c7; color: #111; }
.px-lk__add:disabled { cursor: default; }
.px-lk__on { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid rgba(0,0,0,.07); }
.px-lk__ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--soft, #f3f2ee); flex: none; }
.px-lk__ic .i { width: 15px; height: 15px; }
.px-lk__on a { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 1.3; }
.px-lk__on a:hover b { text-decoration: underline; }
.px-lk__on b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-lk__on small { font-size: 12px; color: #8a9099; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-lk__x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: #9aa0a8; cursor: pointer; flex: none; }
.px-lk__x:hover { background: #fef2f2; color: #b91c1c; }
.px-lk__x .i { width: 13px; height: 13px; }

/* Koppelen: zoeken onder het blok zelf */
.px-pick.is-inline { position: static; width: auto; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; animation: pxHintIn .16s ease; }
.px-pick.is-inline .px-pick__q { margin-bottom: 8px; }
.px-pick.is-inline .px-pick__l { max-height: 216px; overflow-y: auto; border: 1px solid rgba(0,0,0,.07); border-bottom: 0; border-radius: 10px 10px 0 0; background: #fff; padding: 4px; }
.px-pick.is-inline .px-pick__new { border: 1px solid rgba(0,0,0,.07); border-radius: 0 0 10px 10px; background: #fff; padding: 4px; margin: 0; }
.px-pick__newbig { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 10px 10px 12px !important; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #111; text-align: left; cursor: pointer; }
.px-pick__newbig:hover { background: #f5f6f8; }
.px-pick__newbig > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-pick__newbig > i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #f0efea; }
.px-pick__newbig > i .i { width: 15px; height: 15px; }

/* Sjablonenlijst: rustig */
.tl-row > button { min-height: 38px; padding: 8px 12px !important; gap: 8px; font-size: 14px; }
.tl-row > button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-def { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--soft, #f3f2ee); color: #6b7280; }
.tl-row .dt-tpl__del { opacity: 0; transition: opacity .15s; }
.tl-row:hover .dt-tpl__del, .tl-row:focus-within .dt-tpl__del { opacity: 1; }

/* Ongedaan maken: knop met tekst */
.px-undobtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 1px solid rgba(0,0,0,.09); border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.px-undobtn:hover { border-color: rgba(0,0,0,.18); color: #111; background: #fafafa; }
.px-undobtn .i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-tpl__head { flex-wrap: wrap; }
.px-tpl__head .px-undobtn { order: 3; }

/* Meerdere bladen: elk blad apart, in A4-verhouding */
.px-sheets { display: flex; flex-direction: column; gap: 28px; }
.px-paper.is-sheet { position: relative; width: 100%; aspect-ratio: 210 / 297; }
.px-sheets .px-paper.is-sheet + .px-paper.is-sheet { animation: none; }
.px-pgno { position: absolute; right: 24px; bottom: 16px; font-size: 11px; color: #a39d90; }
.px-xpage { position: static; display: flex; align-items: center; gap: 6px; margin: 0 0 6px; border: 0; font-size: 12px; font-weight: 600; color: #a39d90; }
.px-xpage span { position: static; transform: none; padding: 0; background: none; font-size: 12px; color: inherit; }
.px-xpage .i { width: 14px; height: 14px; }
@media print { .px-sheets { gap: 0; } .px-paper.is-sheet { aspect-ratio: auto; break-after: page; } .px-pgno { display: none; } }

/* Zelfgetekende icoontjes */
.px-svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Zwevend venster (korting, kalender) */
.px-pop { position: fixed; z-index: 90; width: 320px; max-width: calc(100vw - 16px); border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.14); animation: pxPopIn .16s ease; }
.px-pop--wide { width: 380px; }
.px-pop--menu { width: 260px; padding: 6px; }
.px-pop--cal { width: 290px; padding: 12px; }
@keyframes pxPopIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.px-pop__menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-radius: 9px; background: none; font: inherit; text-align: left; cursor: pointer; }
.px-pop__menu button:hover, .px-pop__menu button:focus-visible { background: #f5f6f8; outline: none; }
.px-pop__menu .i { width: 17px; height: 17px; flex: none; color: #374151; }
.px-pop__menu span { display: flex; flex-direction: column; line-height: 1.3; }
.px-pop__menu b { font-size: 14px; }
.px-pop__menu small { font-size: 12px; color: #8a9099; }
.px-pop__h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; }
.px-pop__h b { font-size: 15px; }
.px-pop__x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; color: #6b7280; cursor: pointer; }
.px-pop__x:hover { background: #f3f4f6; color: #111; }
.px-pop__x .i { width: 15px; height: 15px; }
.px-pop__b { padding: 10px 16px; display: flex; flex-direction: column; gap: 12px; }
.px-pop__scroll { max-height: 340px; overflow-y: auto; }
.px-pop__f { display: flex; flex-direction: column; gap: 5px; }
.px-pop__f > span:first-child { font-size: 12.5px; font-weight: 600; color: #374151; }
.px-pop__in { position: relative; display: block; }
.px-pop__in .ap-in { width: 100%; padding-right: 30px; }
.px-pop__in i { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: #8a9099; }
.px-pop__f2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #f0f1f3; }
.px-pop__f2 > span:last-child { display: flex; gap: 8px; }
.px-pop__del { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #b91c1c; cursor: pointer; padding: 4px 0; }
.px-pop__line { display: flex; flex-direction: column; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; }
.px-pop__line:last-child { border-bottom: 0; padding-bottom: 0; }
.px-pop__line.is-cleared { opacity: .55; }
.px-pop__lh { display: flex; align-items: center; gap: 8px; min-width: 0; }
.px-pop__lh b { font-size: 13.5px; flex: none; }
.px-pop__lh small { flex: 1; min-width: 0; font-size: 12px; color: #8a9099; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-pop__trash { width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: #fef2f2; color: #dc2626; display: grid; place-items: center; cursor: pointer; }
.px-pop__trash:hover { background: #fee2e2; }
.px-pop__trash .i { width: 14px; height: 14px; }
.px-pop__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }

/* Korting toevoegen onder de totalen */
.px-discbar { display: flex; justify-content: flex-end; margin: 10px 0 4px; }
.px-discadd { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #111; cursor: pointer; transition: background .15s; }
.px-discadd:hover { background: #f5f6f8; }
.px-discadd > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f0efea; }
.px-discadd > i .i { width: 16px; height: 16px; }

/* Datum: knop met kalender */
.px-dbtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: #111; cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.px-dbtn:hover { border-color: #c9ccd2; }
.px-dbtn[aria-expanded="true"], .px-dbtn:focus-visible { border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,.06); outline: none; }
.px-dbtn .i { width: 15px; height: 15px; color: #4b5563; }
.px-meta dd .px-dbtn { margin: -4px 0; }
.px-cal__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.px-cal__h b { font-size: 14px; text-transform: capitalize; }
.px-cal__h button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; cursor: pointer; color: #374151; }
.px-cal__h button:hover { background: #f3f4f6; }
.px-cal__h .i { width: 16px; height: 16px; }
.px-cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.px-cal__wd { text-align: center; font-size: 11.5px; color: #8a9099; padding: 4px 0; }
.px-cal__g button { height: 34px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: #111; cursor: pointer; transition: background .12s; }
.px-cal__g button:hover { background: #f3f4f6; }
.px-cal__g button.is-out { color: #b4b8bf; }
.px-cal__g button.is-today { box-shadow: inset 0 0 0 1px #d1d5db; }
.px-cal__g button.is-on { background: #111; color: #fff; }
.px-cal__f { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f1f3; }
.px-cal__f button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #374151; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.px-cal__f button:hover { background: #f3f4f6; }

/* Datum in het documentblok: zelfde maat als het nummer, kader pas bij aanwijzen */
.px-meta dd .px-dbtn { height: auto; margin: 0 -6px 0 0; padding: 1px 6px; gap: 6px; border-color: transparent; border-radius: 6px; background: none; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.px-meta dd .px-dbtn .i { width: 13px; height: 13px; color: #9aa0a8; }
.px-meta dd .px-dbtn .i:last-child { display: none; }
.px-meta dd .px-dbtn:hover, .px-meta dd .px-dbtn:focus-visible { background: #f5f6f8; border-color: transparent; box-shadow: none; }
.px-meta dd .px-no { text-align: right; }

/* Kop: wat nog ontbreekt (enkel zichtbaar voor jou) */
.px-miss { display: inline-block; margin: 2px 0; text-decoration: none; }
.px-miss .px-tok { opacity: .75; cursor: pointer; }
.px-miss:hover .px-tok { opacity: 1; }
.px-logomiss { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-bottom: 8px; padding: 6px 12px; border: 1.5px dashed #d4d8de; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #6b7280; text-decoration: none; transition: border-color .15s, color .15s; }
.px-logomiss:hover { border-color: var(--acc); color: #111; }
.px-logomiss .i { width: 13px; height: 13px; }

/* Korting toevoegen: zelfde stijl als de andere knoppen op het blad */
.px-discbar { justify-content: flex-end; margin: 6px 0 0; }

/* Voorschot in de balk */
.px-depbox { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; animation: pxHintIn .16s ease; }
.px-deprow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.px-depq { display: flex; gap: 6px; flex-wrap: wrap; }
.px-depq button { height: 28px; padding: 0 11px; border: 1px solid rgba(0,0,0,.09); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #4b5563; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.px-depq button:hover { border-color: rgba(0,0,0,.2); color: #111; }
.px-depq button.is-on { background: #111; border-color: #111; color: #fff; }
.px-depsum { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--soft, #f3f2ee); font-size: 12.5px; line-height: 1.45; color: #4b5563; }
.px-depsum b { color: #111; }
.px-depnote { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: #8a9099; }
.px-depnote .i { width: 13px; height: 13px; color: #2f6b4f; }
.px-depnote { display: block; } .px-depnote .i { vertical-align: -2px; margin-right: 4px; }

/* Acties: hoofdknop met een menu ernaast */
.px-acts { position: relative; display: flex; gap: 0; }
.px-acts .px-actmain { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; justify-content: center; }
.px-actmore { display: grid; place-items: center; width: 44px; border: 0; border-left: 1px solid rgba(0,0,0,.12); border-radius: 0 12px 12px 0; background: var(--brand, #ffc21a); color: #111; cursor: pointer; transition: filter .15s; }
.px-actmore:hover { filter: brightness(.96); }
.px-actmore .i { width: 17px; height: 17px; transition: transform .2s; }
.px-actmore[aria-expanded="true"] .i { transform: rotate(180deg); }
.px-acts .ap-btn--ghost + .px-actmore { background: #fff; border: 1px solid var(--line, #e5e2da); border-left: 0; }
.px-actmore.is-wide { flex: 1; display: flex; justify-content: center; gap: 8px; height: 44px; border-radius: 12px; border: 1px solid var(--line, #e5e2da); background: #fff; font: inherit; font-weight: 600; }
.px-actmenu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.12); animation: pxPopIn .16s ease; }
.px-actmenu > :is(button, a) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: #111; text-align: left; text-decoration: none; cursor: pointer; }
.px-actmenu > :is(button, a):hover, .px-actmenu > :is(button, a):focus-visible { background: #f5f6f8; outline: none; }
.px-actmenu .i { width: 16px; height: 16px; color: #6b7280; flex: none; }
.px-actmenu .is-danger, .px-actmenu .is-danger .i { color: #b91c1c; }
.px-actmenu hr { margin: 5px 4px; border: 0; border-top: 1px solid #f0f1f3; }

/* Documenten: tabel met kolommen, statussen onderaan rechts */
.dl-wrap { display: flex; flex-direction: column; min-height: 100%; }
.dl-scroll { flex: 1; overflow-x: auto; padding: 18px 22px 0; }
.dl-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.dl-t thead th { position: sticky; top: 0; z-index: 1; padding: 0; background: #f7f7f5; border-bottom: 1px solid rgba(0,0,0,.07); text-align: left; font-weight: 600; white-space: nowrap; }
.dl-t thead th:first-child { border-top-left-radius: 12px; } .dl-t thead th:last-child { border-top-right-radius: 12px; }
.dl-th { display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 13px 14px; border: 0; background: none; font: inherit; color: #374151; cursor: pointer; }
.dl-t th.n .dl-th { justify-content: flex-end; }
.dl-th .i { width: 13px; height: 13px; opacity: 0; transition: opacity .15s; }
.dl-th:hover .i, .dl-th.is-on .i { opacity: 1; }
.dl-th.is-on { color: #111; }
.dl-t tbody tr { cursor: pointer; transition: background .12s; }
.dl-t tbody tr:hover, .dl-t tbody tr:focus-visible { background: #fafaf8; outline: none; }
.dl-t td { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.05); vertical-align: middle; white-space: nowrap; color: #374151; }
.dl-t td.n { text-align: right; font-variant-numeric: tabular-nums; }
.dl-t td.n b { color: #111; }
.dl-no { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.dl-no b { font: 600 13.5px/1.2 var(--mono, ui-monospace, monospace); color: #111; }
.dl-kind { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.dl-kind.is-quote { background: #fff4cc; color: #7a5b00; }
.dl-kind.is-invoice { background: #e6f0fb; color: #1f4e79; }
.dl-kind.is-credit { background: #fdecea; color: #8a3b2e; }
.dl-client { display: flex; flex-direction: column; max-width: 260px; }
.dl-client b { color: #111; overflow: hidden; text-overflow: ellipsis; }
.dl-client small { font-size: 12px; color: #8a9099; overflow: hidden; text-overflow: ellipsis; }
.dl-late { color: #b91c1c !important; font-weight: 600; }
.dl-mail { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #4b5563; }
.dl-mail .i { width: 14px; height: 14px; }
.dl-mail.is-seen { color: #2f6b4f; }
.dl-mail.is-none { color: #b4b8bf; }
.dl-acts { text-align: right; }
.dl-acts .ap-icon { opacity: .5; transition: opacity .15s; }
.dl-t tbody tr:hover .dl-acts .ap-icon { opacity: 1; }
.dl-acth { width: 80px; }
.dl-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: auto; padding: 12px 22px; border-top: 1px solid rgba(0,0,0,.07); background: rgba(255,255,255,.96); backdrop-filter: blur(6px); }
.dl-count { font-size: 12.5px; color: #8a9099; }
.dl-stats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dl-stat { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; color: #374151; cursor: pointer; transition: border-color .15s, background .15s; }
.dl-stat:hover { border-color: rgba(0,0,0,.2); }
.dl-stat i { width: 8px; height: 8px; border-radius: 50%; background: #9aa0a8; }
.dl-stat.is-draft i { background: #9aa0a8; } .dl-stat.is-open i { background: #3b82f6; } .dl-stat.is-accepted i { background: #22a06b; } .dl-stat.is-late i { background: #dc2626; } .dl-stat.is-paid i { background: #2f6b4f; }
.dl-stat b { font-weight: 700; color: #111; }
.dl-stat small { font-size: 12px; color: #8a9099; }
.dl-stat.is-on { background: #111; border-color: #111; color: #fff; }
.dl-stat.is-on b, .dl-stat.is-on small { color: #fff; }

/* Sjablonen: meerdere tegelijk verwijderen */
.ap-dl__head { gap: 8px; }
.tl-selbtn { margin-left: auto; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #6b7280; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.tl-selbtn:hover { background: #f3f4f6; color: #111; }
.ap-dl__head .tl-selbtn + .ap-ibx__add { margin-left: 0; }
.is-picking .tl-row { display: flex; align-items: center; gap: 4px; }
.is-picking .tl-row > button { flex: 1; min-width: 0; }
.is-picking .dt-tpl__del { display: none !important; }
.tl-chk { display: grid; place-items: center; width: 30px; height: 30px; flex: none; cursor: pointer; }
.tl-chk input { width: 16px; height: 16px; accent-color: #111; cursor: pointer; }
.tl-chk input:disabled { opacity: .35; cursor: not-allowed; }
.tl-row.is-picked > button { background: #f3f2ee; }
.tl-bulk { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px 10px 10px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 6px 18px rgba(0,0,0,.06); font-size: 12.5px; color: #4b5563; animation: pxHintIn .16s ease; }
.tl-bulkdel { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
.tl-bulkdel:disabled { opacity: .45; }
.tl-bulkdel .i { width: 14px; height: 14px; }
/* Tabel compacter, in een witte kaart */
.dl-scroll { padding: 16px 16px 0; }
.dl-t { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; font-size: 13px; }
.dl-t thead th { background: #f7f7f5; }
.dl-th { padding: 11px 10px; }
.dl-t td { padding: 10px 10px; }
.dl-t tbody tr:last-child td { border-bottom: 0; }
.dl-client { max-width: 200px; }
.dl-acth { width: 64px; }
.dl-mail { font-size: 12px; }
@media (max-width: 1280px) { .dl-t th:nth-child(4), .dl-t td:nth-child(4), .dl-t th:nth-child(8), .dl-t td:nth-child(8) { display: none; } }
.dl-mailh { width: 40px; padding: 0 10px !important; color: #6b7280; } .dl-mailh .i { width: 14px; height: 14px; vertical-align: middle; }
.dl-mail { justify-content: center; } .dl-mail .i { width: 16px; height: 16px; }
.dl-acth { width: 56px; } .dl-acts .ap-icon { width: 28px; height: 28px; }
.dl-client { max-width: 180px; }
@media (max-width: 1280px) { .dl-t th:nth-child(4), .dl-t td:nth-child(4) { display: table-cell; } .dl-t th:nth-child(5), .dl-t td:nth-child(5) { display: none; } }
.dl-acth .ap-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Documenten: status onderaan in de linkerbalk */
.ap-fx__side { display: flex; flex-direction: column; }
.dl-side { margin-top: auto; padding: 14px 4px 4px; display: flex; flex-direction: column; gap: 2px; }
.dl-side:empty { display: none; }
.dl-side__h { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a9099; }
.dl-side__h .ap-linkbtn { font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.dl-srow { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13px; color: #374151; text-align: left; cursor: pointer; transition: background .15s; }
.dl-srow:hover { background: rgba(0,0,0,.04); }
.dl-srow.is-on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); color: #111; font-weight: 600; }
.dl-srow i { width: 8px; height: 8px; border-radius: 50%; background: #9aa0a8; }
.dl-srow.is-open i { background: #3b82f6; } .dl-srow.is-accepted i { background: #22a06b; } .dl-srow.is-late i { background: #dc2626; } .dl-srow.is-paid i { background: #2f6b4f; }
.dl-srow em { font-style: normal; font-weight: 700; color: #111; min-width: 16px; text-align: right; }
.dl-srow small { font-size: 12px; color: #8a9099; min-width: 64px; text-align: right; }
.dl-side__f { display: flex; justify-content: space-between; margin-top: 6px; padding: 10px 10px 2px; border-top: 1px solid rgba(0,0,0,.07); font-size: 12.5px; color: #6b7280; }
.dl-side__f b { color: #111; }

/* Bekeken door je klant */
.px-seen { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft, #f3f2ee); }
.px-seen .i { width: 18px; height: 18px; flex: none; color: #8a9099; }
.px-seen > span { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.px-seen b { font-size: 13.5px; }
.px-seen small { font-size: 12px; color: #6b7280; }
.px-seen.is-seen { background: #ecf7f1; }
.px-seen.is-seen .i { color: #2f6b4f; }
.px-seen.is-seen b { color: #1f5a3f; }
.dl-mail em { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 2px; }
.dl-srow.is-declined i { background: #c2410c; }

/* ---------- Documenten-overzicht, verfijnd ---------- */
.dl2 { padding: 34px 40px 40px; max-width: 1180px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.dl2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.dl2-head h1 { margin: 0; font: 700 30px/1.1 var(--display, inherit); letter-spacing: -.02em; color: #141414; }
.dl2-head p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.dl2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); }
.dl2-kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 18px 0; }
.dl2-kpi + .dl2-kpi { padding-left: 22px; border-left: 1px solid rgba(0,0,0,.08); }
.dl2-kpi span { font-size: 12px; font-weight: 500; color: var(--muted); }
.dl2-kpi b { font: 600 22px/1.15 var(--display, inherit); letter-spacing: -.01em; color: #141414; font-variant-numeric: tabular-nums; }
.dl2-kpi small { font-size: 12px; color: var(--faint); }
.dl2 .dl-scroll { padding: 0; overflow-x: auto; }
.dl2-t { background: transparent; border: 0; border-radius: 0; font-size: 13.5px; }
.dl2-t thead th { position: static; background: transparent !important; border-bottom: 1px solid rgba(0,0,0,.08); border-radius: 0 !important; }
.dl2-t .dl-th { padding: 0 12px 10px 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.dl2-t .dl-th.is-on { color: #141414; }
.dl2-t td { padding: 14px 12px 14px 0; border-bottom: 1px solid rgba(0,0,0,.055); color: var(--text); }
.dl2-t tbody tr { transition: background .15s ease; }
.dl2-t tbody tr:hover { background: rgba(0,0,0,.018); }
.dl2-t tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 #141414; }
.dl2-t td:first-child { padding-left: 10px; }
.dl2-t thead th:first-child .dl-th { padding-left: 10px; }
.dl2-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dl-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.dl2-t .dl-client { max-width: 280px; }
.dl2-t .dl-client b { font-size: 14px; font-weight: 600; color: #141414; }
.dl2-t .dl-client small { font-size: 12.5px; color: var(--muted); }
.dl2-no { font-variant-numeric: tabular-nums; color: var(--text); }
.dl-due { display: flex; flex-direction: column; line-height: 1.35; }
.dl-due small { font-size: 12px; color: var(--faint); }
.dl-due small.is-soon { color: #b45309; }
.dl-due small.is-late { color: #c62828; font-weight: 600; }
.dl-muted { color: #c2c5ca; }
.dl2-amt { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-variant-numeric: tabular-nums; }
.dl2-amt b { font-size: 14px; font-weight: 600; color: #141414; }
.dl2-amt small { font-size: 12px; color: var(--faint); }
.dl-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.dl-st i { width: 7px; height: 7px; border-radius: 50%; background: #b8bcc3; box-shadow: 0 0 0 3px rgba(184,188,195,.18); }
.dl-st.is-sent i, .dl-st.is-viewed i { background: #3b6fd8; box-shadow: 0 0 0 3px rgba(59,111,216,.14); }
.dl-st.is-accepted i, .dl-st.is-paid i { background: #177048; box-shadow: 0 0 0 3px rgba(31,138,91,.14); }
.dl-st.is-overdue i, .dl-st.is-expired i { background: #d23b3b; box-shadow: 0 0 0 3px rgba(210,59,59,.14); }
.dl-st.is-declined i, .dl-st.is-cancelled i { background: #c2410c; box-shadow: 0 0 0 3px rgba(194,65,12,.12); }
.dl-st.is-overdue { color: #b42323; }
.dl-seen { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #177048; font-variant-numeric: tabular-nums; }
.dl-seen .i { width: 15px; height: 15px; }
.dl-seen.is-wait { color: #b8bcc3; }
.dl2-seenh { width: 52px; }
.dl2-t .dl-acts .ap-icon { opacity: 0; }
.dl2-t tbody tr:hover .dl-acts .ap-icon, .dl2-t tbody tr:focus-within .dl-acts .ap-icon { opacity: .7; }
.dl2-t .dl-acts .ap-icon:hover { opacity: 1 !important; }
@media (max-width: 1100px) { .dl2 { padding: 24px 20px; } .dl2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl2-kpi:nth-child(3) { padding-left: 0; border-left: 0; } .dl2-kpi:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.08); } }

/* Toegankelijke tekst die je niet ziet */
.ap-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Lucht tussen bedrag en status */
.dl2-t td.n, .dl2-t th.n .dl-th { padding-right: 36px; }
.dl2-t th.n .dl-th { justify-content: flex-end; }

/* Zoeken en filters */
.dl2-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dl2-search { flex: 1; max-width: 420px; position: relative; display: flex; align-items: center; height: 40px; padding: 0 12px; gap: 8px; border: 1px solid rgba(0,0,0,.1); border-radius: 11px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.dl2-search:focus-within { border-color: #141414; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.dl2-search .i { width: 16px; height: 16px; color: var(--muted); flex: none; }
.dl2-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 14px; color: #141414; }
.dl2-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #f1f2f4; display: grid; place-items: center; cursor: pointer; color: #6b7280; }
.dl2-x .i { width: 12px; height: 12px; }
.dl2-fwrap { position: relative; }
.dl2-fbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid rgba(0,0,0,.1); border-radius: 11px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: #141414; cursor: pointer; transition: border-color .15s, background .15s; }
.dl2-fbtn:hover { border-color: rgba(0,0,0,.22); }
.dl2-fbtn .i { width: 17px; height: 17px; }
.dl2-fbtn.has { border-color: #141414; }
.dl2-fbtn em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #141414; color: #fff; font-size: 11.5px; display: grid; place-items: center; }
.dl2-fpop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 340px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.14); animation: pxPopIn .16s ease; display: flex; flex-direction: column; gap: 16px; }
.dl2-fsec b { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #6b7280; }
.dl2-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dl2-opt { height: 30px; padding: 0 12px; border: 1px solid rgba(0,0,0,.1); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 500; color: #374151; cursor: pointer; transition: all .15s; }
.dl2-opt:hover { border-color: rgba(0,0,0,.25); }
.dl2-opt.is-on { background: #141414; border-color: #141414; color: #fff; }
.dl2-range { display: flex; align-items: center; gap: 8px; }
.dl2-range > span:not(.dl2-dash) { position: relative; flex: 1; }
.dl2-range i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: #9aa0a8; }
.dl2-range input { width: 100%; height: 36px; padding: 0 10px 0 24px; border: 1px solid rgba(0,0,0,.12); border-radius: 9px; font: inherit; font-size: 13.5px; outline: none; box-sizing: border-box; }
.dl2-range input:focus { border-color: #141414; }
.dl2-dash { color: #9aa0a8; }
.dl2-fpop footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #f0f1f3; }
.dl2-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 16px; }
.dl2-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: #ecebe6; font: inherit; font-size: 12.5px; font-weight: 600; color: #141414; cursor: pointer; }
.dl2-chip:hover { background: #e2e0d9; }
.dl2-chip .i { width: 12px; height: 12px; color: #6b7280; }

/* Filtervenster */
.fm-ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(20,20,20,.32); backdrop-filter: blur(2px); animation: fmIn .18s ease; }
.fm-ov.is-out { animation: fmOut .16s ease forwards; }
@keyframes fmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fmOut { to { opacity: 0; } }
.fm { width: min(760px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.25); animation: pxPopIn .2s ease; overflow: hidden; }
.fm-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; }
.fm-h b { font: 700 18px/1.2 var(--display, inherit); }
.fm-x { width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; display: grid; place-items: center; cursor: pointer; color: #6b7280; }
.fm-x:hover { background: #f3f4f6; color: #111; }
.fm-x .i { width: 16px; height: 16px; }
.fm-b { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 300px; border-top: 1px solid #f0f1f3; overflow: auto; }
.fm-tabs { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid #f0f1f3; background: #fafaf9; }
.fm-tabs button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: #4b5563; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.fm-tabs button:hover { background: rgba(0,0,0,.04); color: #111; }
.fm-tabs button.is-on { background: #fff; color: #111; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 2px 0 0 #141414; }
.fm-tabs .i { width: 17px; height: 17px; flex: none; }
.fm-tabs span { flex: 1; }
.fm-tabs em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #141414; color: #fff; font-size: 11px; display: grid; place-items: center; }
.fm-pane { padding: 18px 22px 22px; }
.fm-pane h3 { margin: 0 0 16px; font-size: 15px; }
.fm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; }
.fm-f { display: flex; flex-direction: column; gap: 8px; }
.fm-f > span:first-child { font-size: 12.5px; font-weight: 600; color: #6b7280; }
.fm-in { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 11px; transition: border-color .15s, box-shadow .15s; }
.fm-in:focus-within { border-color: #141414; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.fm-in .i { width: 16px; height: 16px; color: #9aa0a8; }
.fm-in input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14px; background: none; }
.fm-seg { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: #f3f4f6; }
.fm-seg button { flex: 1; height: 36px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #6b7280; cursor: pointer; transition: all .15s; }
.fm-seg button:hover { color: #111; }
.fm-seg button.is-on { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fm-dates { display: flex; align-items: center; gap: 8px; }
.fm-dates > i { font-style: normal; color: #9aa0a8; }
.fm-dates input { flex: 1; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 11px; font: inherit; font-size: 13.5px; outline: none; box-sizing: border-box; }
.fm-dates input:focus { border-color: #141414; }
.fm-eur { position: relative; flex: 1; display: flex; }
.fm-eur > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: #9aa0a8; }
.fm-eur input { padding-left: 24px; }
.fm-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-quick button { height: 30px; padding: 0 12px; border: 1px solid rgba(0,0,0,.1); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 500; color: #374151; cursor: pointer; }
.fm-quick button:hover { border-color: rgba(0,0,0,.25); }
.fm-quick button.is-on { background: #141414; border-color: #141414; color: #fff; }
.fm-checks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fm-check { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid rgba(0,0,0,.09); border-radius: 11px; cursor: pointer; transition: border-color .15s, background .15s; }
.fm-check:hover { border-color: rgba(0,0,0,.2); }
.fm-check:has(input:checked) { border-color: #141414; background: #fafaf9; }
.fm-check input { width: 16px; height: 16px; accent-color: #141414; margin: 0; }
.fm-check > i { font-style: normal; display: inline-flex; }
.fm-check span { flex: 1; font-size: 14px; font-weight: 500; }
.fm-check em { font-style: normal; font-size: 12.5px; color: #9aa0a8; }
.fm-f2 { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid #f0f1f3; }
.fm-f2 > span { display: flex; gap: 8px; }
@media (max-width: 640px) { .fm-b { grid-template-columns: 1fr; } .fm-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #f0f1f3; } .fm-grid, .fm-checks { grid-template-columns: 1fr; } }

/* Uploaden: knoppen in de kop */
.dl2-acts { display: flex; gap: 8px; }
.dl2-acts .ap-btn .i { width: 17px; height: 17px; }
/* Uploadvenster */
.fm--upl { width: min(860px, 100%); }
.fm-upl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; padding: 18px 22px; border-top: 1px solid #f0f1f3; overflow: auto; }
.fm-upl__prev { display: flex; flex-direction: column; gap: 8px; }
.fm-upl__prev iframe, .fm-upl__prev img { width: 100%; height: 380px; border: 1px solid #ececea; border-radius: 12px; background: #f7f7f5; object-fit: contain; }
.fm-upl__prev small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-upl__f { display: flex; flex-direction: column; gap: 14px; }
.fm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fm-f > span em { font-style: normal; font-weight: 400; color: var(--faint); }
.fm-txt { width: 100%; height: 42px; padding: 0 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 11px; background: #fff; font: inherit; font-size: 14px; color: #141414; outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.fm-txt:focus { border-color: #141414; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.fm-eur .fm-txt { padding-left: 24px; }
@media (max-width: 700px) { .fm-upl { grid-template-columns: 1fr; } .fm-upl__prev iframe, .fm-upl__prev img { height: 240px; } }
/* Opgeladen document in de app */
.px-upl { max-width: 860px; margin: 0 auto; border-radius: 14px; background: #fff; box-shadow: var(--sh, 0 10px 30px rgba(0,0,0,.08)); overflow: hidden; }
.px-upl header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f0f1f3; }
.px-upl__ic { width: 38px; height: 38px; border-radius: 10px; background: #f3f2ee; display: grid; place-items: center; flex: none; }
.px-upl__ic .i { width: 18px; height: 18px; }
.px-upl__n { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.px-upl__n b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-upl__n small { font-size: 12px; color: var(--muted); }
.px-upl iframe { display: block; width: 100%; height: calc(100vh - 200px); min-height: 520px; border: 0; background: #f7f7f5; }
.px-upl img { display: block; width: 100%; height: auto; }

/* Veld met een fout */
input.is-bad, .is-bad { border-color: #e0a3a3 !important; box-shadow: 0 0 0 3px rgba(210,59,59,.08) !important; }
.fmt-err { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; color: #b42323; animation: pxHintIn .16s ease; }

/* Documenten selecteren */
.dl2-ck { width: 34px; padding-left: 10px !important; padding-right: 0 !important; }
.dl2-ck input { width: 16px; height: 16px; margin: 0; accent-color: #141414; cursor: pointer; opacity: .55; transition: opacity .15s; }
.dl2-t tr:hover .dl2-ck input, .dl2-ck input:checked, .dl2-t thead .dl2-ck input { opacity: 1; }
.dl2-t thead th.dl2-ck { vertical-align: top; padding-top: 1px !important; }
.dl2-t td.dl2-ck + td { padding-left: 4px !important; }
.dl2-t tbody tr.is-picked { background: #f6f5f0; }
.dl2-t tbody tr.is-picked td:first-child { box-shadow: inset 2px 0 0 #141414; }
.dl2-t td:first-child { padding-left: 10px; }
.dl2-bulk { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 12px 10px 16px; border-radius: 12px; background: #141414; color: #fff; animation: pxHintIn .16s ease; }
.dl2-bulk b { font-size: 13.5px; }
.dl2-bulk .ap-linkbtn { color: rgba(255,255,255,.75); }
.dl2-bulk .ap-linkbtn:hover { color: #fff; }
.dl2-bulkdel { background: #fff !important; color: #b42323 !important; border: 0 !important; }
.dl2-bulkdel .i { width: 14px; height: 14px; }
.dl2-t thead th.dl2-ck { vertical-align: middle; padding: 0 0 10px 10px !important; } .dl2-t thead th.dl2-ck + th .dl-th { padding-left: 4px; }

/* Selecteren zoals in een mailbox: het rondje wordt een vinkje bij aanwijzen */
.dl2-avck { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; }
.dl2-avck input { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; accent-color: #141414; cursor: pointer; opacity: 0; transition: opacity .12s; }
.dl2-avck .dl-av { transition: opacity .12s; }
.dl2-t tbody tr:hover .dl2-avck input, .dl2-t.is-picking .dl2-avck input, .dl2-avck input:focus-visible { opacity: 1; }
.dl2-t tbody tr:hover .dl2-avck .dl-av, .dl2-t.is-picking .dl2-avck .dl-av { opacity: 0; }
.dl2-thc { position: relative; }
.dl2-ckall { position: absolute; left: 18px; top: 0; width: 18px; height: 18px; margin: 0; accent-color: #141414; cursor: pointer; opacity: 0; transition: opacity .12s; }
.dl2-t thead:hover .dl2-ckall, .dl2-t.is-picking .dl2-ckall, .dl2-ckall:focus-visible { opacity: 1; }
.dl2-thc .dl-th { padding-left: 56px !important; }

/* Statusblok links, verfijnd */
.dl-side { padding: 0; }
.dls { margin: 0 4px 4px; padding: 16px 14px 10px; border-radius: 14px; background: #fff; border: 1px solid rgba(0,0,0,.06); }
.dls-top { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.dls-top small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.dls-top b { font: 700 22px/1.15 var(--display, inherit); letter-spacing: -.01em; color: #141414; font-variant-numeric: tabular-nums; }
.dls-top span { font-size: 12px; color: var(--faint); }
.dls-bar { display: flex; gap: 2px; height: 6px; margin-bottom: 10px; border-radius: 999px; overflow: hidden; background: #f1f1ef; }
.dls-bar i { display: block; min-width: 4px; }
.dls-bar .is-draft, .dls-row.is-draft > i { background: #c3c6cc; }
.dls-bar .is-open, .dls-row.is-open > i { background: #3b6fd8; }
.dls-bar .is-accepted, .dls-row.is-accepted > i { background: #177048; }
.dls-bar .is-late, .dls-row.is-late > i { background: #d23b3b; }
.dls-bar .is-declined, .dls-row.is-declined > i { background: #c2410c; }
.dls-bar .is-paid, .dls-row.is-paid > i { background: #2f6b4f; }
.dls-list { display: flex; flex-direction: column; margin: 0 -6px; }
.dls-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; border: 0; border-radius: 9px; background: none; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.dls-row:hover { background: #f7f7f5; }
.dls-row.is-on { background: #f3f2ee; box-shadow: inset 2px 0 0 #141414; }
.dls-row > i { width: 8px; height: 8px; border-radius: 3px; }
.dls-row span { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; font-weight: 500; color: #374151; }
.dls-row em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.dls-row b { font-size: 13px; font-weight: 600; color: #141414; font-variant-numeric: tabular-nums; }
.dls-all { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 0; border-top: 1px solid #f1f1ef; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #4b5563; cursor: pointer; }
.dls-all:hover { color: #141414; }

/* ---------- Offertes en facturen: eigentijds, met een eigen kleur per soort ---------- */
.dl2 { --k: #e8a317; --k-soft: #fff5dc; --k-ink: #7a5300; }
.dl2.is-invoice { --k: #4f5fe0; --k-soft: #eceefe; --k-ink: #2d3796; }
.dl2.is-credit { --k: #d0573a; --k-soft: #fdeee9; --k-ink: #85301c; }
.dl2-title { display: flex; align-items: center; gap: 14px; }
.dl2-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--k-soft); color: var(--k-ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.dl2-ic .i { width: 22px; height: 22px; }
.dl2-head h1 { font-size: 28px; }
.dl2-head p { margin-top: 3px; }
/* Kerncijfers als tegels */
.dl2-kpis { gap: 12px; border: 0; margin-bottom: 22px; }
.dl2-kpi, .dl2-kpi + .dl2-kpi { position: relative; padding: 16px 18px 18px; border: 1px solid rgba(0,0,0,.06); border-left: 1px solid rgba(0,0,0,.06); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03); overflow: hidden; }
.dl2-kpi b { font-size: 24px; margin-top: 2px; }
.dl2-kpi.is-main { background: #141414; border-color: #141414; box-shadow: 0 12px 28px -14px rgba(0,0,0,.45); }
.dl2-kpi.is-main span { color: rgba(255,255,255,.62); }
.dl2-kpi.is-main b { color: #fff; }
.dl2-kpi.is-main small { color: rgba(255,255,255,.55); }
.dl2-kpi.is-main::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--k) 55%, transparent), transparent 70%); opacity: .55; pointer-events: none; }
.dl2-prog { display: block; height: 4px; margin-top: 12px; border-radius: 999px; background: #f0efea; overflow: hidden; }
.dl2-prog > i { display: block; height: 100%; border-radius: inherit; background: var(--k); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.dl2-kpi.is-main .dl2-prog { background: rgba(255,255,255,.12); }
@media (max-width: 1100px) { .dl2-kpi:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.06); } .dl2-kpi:nth-child(3) { border-left: 1px solid rgba(0,0,0,.06); padding-left: 18px; } }
/* Zoekbalk en filters, iets steviger */
.dl2-search, .dl2-fbtn { height: 42px; border-radius: 12px; border-color: rgba(0,0,0,.08); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
/* Tabel in een kaart */
.dl2 .dl-scroll { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.18); padding: 6px 10px 4px; }
.dl2-t thead th { border-bottom-color: rgba(0,0,0,.06); }
.dl2-t .dl-th { padding-top: 12px; padding-bottom: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.dl2-t td { padding-top: 15px; padding-bottom: 15px; }
.dl2-t tbody tr:last-child td { border-bottom: 0; }
.dl2-t tbody tr { border-radius: 12px; }
.dl2-t tbody tr:hover { background: color-mix(in srgb, var(--k) 5%, #fff); }
.dl2-t tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--k); }
.dl2-t tbody tr.is-picked { background: color-mix(in srgb, var(--k) 8%, #fff); }
.dl2-t tbody tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--k); }
.dl2-t .dl-client b { font-size: 14.5px; }
.dl2-amt b { font-size: 14.5px; }
.dl-av { box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
/* Status: zacht label met bolletje */
.dl-st { padding: 4px 10px 4px 8px; border-radius: 999px; background: #f3f4f6; font-size: 12.5px; font-weight: 600; }
.dl-st i { box-shadow: none; width: 6px; height: 6px; }
.dl-st.is-sent, .dl-st.is-viewed { background: #ebf1fd; color: #2c55b0; }
.dl-st.is-accepted, .dl-st.is-paid { background: #e6f5ee; color: #1b7048; }
.dl-st.is-overdue, .dl-st.is-expired { background: #fdecec; color: #b42323; }
.dl-st.is-declined, .dl-st.is-cancelled { background: #fdf0e8; color: #a8410f; }
.dl-st.is-draft { background: #f1f1ef; color: var(--text); }
/* Knoppen in de kop */
.dl2.is-invoice .dl2-acts .ap-btn--primary { background: var(--k); border-color: var(--k); color: #fff; box-shadow: 0 2px 0 color-mix(in srgb, var(--k) 70%, #000); }
.dl2-bulk { background: #141414; }
/* Gelijke tegels, kaart niet uitrekken, tabel past */
.dl2-kpis { align-items: stretch; }
.dl2-kpi small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl2-kpi .dl2-prog { margin-top: auto; }
.dl2-kpi { justify-content: flex-start; }
.dl2-kpi small + .dl2-prog { margin-top: 12px; }
.dl2 .dl-scroll { flex: none; }
.dl2 { padding: 30px 28px 36px; max-width: 1240px; }
.dl2-t { table-layout: auto; }
.dl2-t .dl-client { max-width: 210px; }
.dl2-t td { padding-right: 10px; }
.dl2-t td.n, .dl2-t th.n .dl-th { padding-right: 22px; }
.dl2-t .dl-acts { padding-right: 6px; }

/* Kop van offertes en facturen: sober, zonder icoontje */
.dl2-ic { display: none; }
.dl2-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dl2-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--k); }

/* Nieuwe relatie */
.cf { width: min(640px, 100%); }
.cf-b { padding: 4px 22px 18px; overflow: auto; border-top: 1px solid #f0f1f3; }
.cf-type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 6px; }
.cf-type button { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.cf-type button:hover { border-color: rgba(0,0,0,.2); }
.cf-type button.is-on { border-color: #141414; background: #fafaf9; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.cf-type .i { width: 22px; height: 22px; flex: none; color: #4b5563; }
.cf-type button.is-on .i { color: #141414; }
.cf-type span { display: flex; flex-direction: column; line-height: 1.3; }
.cf-type b { font-size: 14.5px; }
.cf-type small { font-size: 12px; color: var(--muted); }
.cf-sec { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 4px; }
.cf-sec + .cf-sec { border-top: 1px solid #f3f3f1; margin-top: 10px; }
.cf-sec h3 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.cf-full { width: 100%; }
.cf-notes { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.cf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 5px 8px; border: 1px solid rgba(0,0,0,.12); border-radius: 11px; background: #fff; cursor: text; transition: border-color .15s, box-shadow .15s; }
.cf-tags:focus-within { border-color: #141414; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.cf-taginp { flex: 1; min-width: 140px; height: 30px; border: 0; outline: none; font: inherit; font-size: 14px; background: none; }
.cf-tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 8px; background: #f1efe8; font-size: 13px; font-weight: 600; color: #141414; animation: pxHintIn .14s ease; }
.cf-tag button { width: 20px; height: 20px; border: 0; border-radius: 6px; background: none; display: grid; place-items: center; cursor: pointer; color: #6b7280; }
.cf-tag button:hover { background: rgba(0,0,0,.08); color: #111; }
.cf-tag .i { width: 11px; height: 11px; }
.cf .ap-err { margin: 12px 0 0; }
.cf [hidden] { display: none !important; }
@media (max-width: 560px) { .cf-type { grid-template-columns: 1fr; } }
.dl2-eyebrow i { display: none; }
.cf .fm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } .cf .fm-row > * { margin: 0 !important; padding: 0 !important; border: 0 !important; } .fm-upl .fm-row { margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* ---------- Statistieken: één verhaal van bezoek tot betaald geld ---------- */
.st3 { --k: #e8a317; --k-soft: #fff5dc; padding: 30px 28px 40px !important; }
.st3-top { margin-bottom: 20px; }
.st3-top h1 { margin: 0; font: 700 28px/1.1 var(--display, inherit); letter-spacing: -.02em; color: #141414; }
.st3-top p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.st3-kpis { margin-bottom: 16px; }
.st3-kpis small.is-up { color: #177048; font-weight: 600; }
.st3-kpis small.is-down { color: #c62828; font-weight: 600; }
.st3-kpis .is-main small.is-up { color: #6ee7a8; }
.st3-kpis .is-main small.is-down { color: #ff9b9b; }
.st3-card { margin-bottom: 16px; padding: 20px 22px; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.16); }
.st3-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.st3-h h2 { margin: 0; font-size: 16px; font-weight: 700; color: #141414; }
.st3-h p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.st3-h .is-up { color: #177048; font-weight: 600; } .st3-h .is-down { color: #c62828; font-weight: 600; }
.st3-funnel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.st3-funnel li { position: relative; display: flex; flex-direction: column; gap: 4px; }
.st3-f__bar { position: relative; height: 120px; border-radius: 12px; background: #f6f5f1; overflow: hidden; display: flex; align-items: flex-end; }
.st3-f__bar i { display: block; width: 100%; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 85%, #fff), var(--k)); transition: height .6s cubic-bezier(.2,.8,.2,1); }
.st3-funnel li:last-child .st3-f__bar i { background: linear-gradient(180deg, #2fae75, #177048); }
.st3-funnel b { margin-top: 6px; font: 700 20px/1.1 var(--display, inherit); color: #141414; font-variant-numeric: tabular-nums; }
.st3-funnel span { font-size: 12.5px; color: #6b7280; }
.st3-funnel em { position: absolute; top: 8px; left: -16px; z-index: 1; padding: 2px 7px; border-radius: 999px; background: #141414; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; transform: translateX(-50%); left: -6px; }
.st3-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.st3-two .st3-card { margin-bottom: 16px; }
.st3-list { margin: 0; padding: 0; list-style: none; }
.st3-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; padding: 11px 0; border-top: 1px solid #f3f3f1; }
.st3-list li:first-child { border-top: 0; padding-top: 0; }
.st3-list span { font-size: 13.5px; font-weight: 500; color: #374151; }
.st3-list b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 16px; font-weight: 700; color: #141414; font-variant-numeric: tabular-nums; }
.st3-list small { font-size: 12px; color: var(--faint); }
.st3-list li.is-bad b, .st3-list li.is-bad small { color: #c62828; }
.st3 .st2-chart { margin: 0; }
@media (max-width: 1100px) { .st3-two { grid-template-columns: 1fr; } .st3-funnel { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .st3-funnel em { display: none; } }
/* Rode rand enkel voor invulvakken */
.is-bad:not(input):not(select):not(textarea) { box-shadow: none !important; }
.st3-list li.is-bad { border-color: #f3f3f1 !important; }
.st3-list li.is-bad:first-child { border-color: transparent !important; }
/* Trechter: percentage onder elke stap */
.st3-funnel em { position: static; transform: none; align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: #f3f2ee; color: #4b5563; font-style: normal; font-size: 11.5px; font-weight: 600; }
.st3-funnel em.is-start { background: none; padding-left: 0; color: var(--faint); font-weight: 500; }
.st3-kpis .dl2-kpi b { font-size: 26px; }

/* ---------- Automatiseringen: zelfde opbouw als documenten ---------- */
.az3 .az2-main { --k: #6b4bd6; padding: 30px 28px 40px; max-width: 1240px; box-sizing: border-box; }
.az3-head { margin-bottom: 20px; }
.az3-kpis { margin-bottom: 18px; }
.az3-kpis .dl2-kpi.is-bad b, .az3-kpis .dl2-kpi.is-bad small { color: #c62828; }
.az3-kpis .dl2-kpi.is-ok small { color: #177048; }
.az3-card { padding: 6px; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.16); }
.az3-card .az2-rows { margin: 0; }
.az3-card .az2-row { padding: 14px 14px; border-radius: 12px; border: 0; border-bottom: 1px solid #f3f3f1; background: transparent; box-shadow: none; transition: background .15s; }
.az3-card .az2-row:last-child { border-bottom: 0; }
.az3-card .az2-row:hover { background: color-mix(in srgb, var(--k) 5%, #fff); }
.az3-card .az2-ic--c { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); box-shadow: none; }
.az3-card .az2-row__t b { font-size: 14.5px; }
.az3-card .az2-row.is-off { opacity: .6; }
.az3 .az2-hint { margin-top: 12px; color: var(--faint); font-size: 12.5px; }
.az3 .az2-empty { padding: 40px 20px; border: 1px dashed rgba(0,0,0,.12); border-radius: 18px; background: #fff; }
.az3-card .ap-frows, .az3-card .az2-rows { border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; border-radius: 0 !important; }

/* Automatiseringen: start en stappen kiezen (groepen met kaartjes) */
.az3-pick { display: flex; flex-direction: column; gap: 22px; }
.az3-sec h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #141414; }
.az3-sec h3::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.08); }
.az3-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.az3-opt { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.az3-opt:hover { border-color: rgba(0,0,0,.16); box-shadow: 0 6px 16px -10px rgba(0,0,0,.25); transform: translateY(-1px); }
.az3-opt.is-on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.az3-opt.is-soon { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.az3-opt__ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--c); color: #fff; }
.az3-opt__ic .i { width: 19px; height: 19px; }
.az3-opt__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.az3-opt__t b { font-size: 14px; font-weight: 600; color: #141414; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az3-opt__t small { font-size: 12.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az3-opt__on { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.az3-opt__on .i { width: 11px; height: 11px; }
.az3-smart { padding: 14px; border: 1px solid #e3dcfb; border-radius: 16px; background: linear-gradient(180deg, #f7f4ff, #fbfaff); }
.az3-smart h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #141414; }
.az3-smart__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #8b5cf6, #c026d3); color: #fff; }
.az3-smart__ic .i { width: 16px; height: 16px; }
.az3-smart .az3-opt { border-color: #e8e2fb; }
@media (max-width: 520px) { .az3-opts { grid-template-columns: 1fr; } }
.az2-work.has-panel { grid-template-columns: minmax(0, 1fr) min(640px, 52vw); } @media (max-width: 1100px) { .az2-work.has-panel { grid-template-columns: minmax(0, 1fr) 460px; } .az3-opts { grid-template-columns: 1fr; } } .az3-opt { padding: 12px; }

/* Eenvoud: zoeken en filters pas als er genoeg is */
.cl-bar--few .cl-chips, .cl-bar--few .cl-search, .cl-bar--few .cl-sort, .cl-bar--few .cl-view { display: none !important; }
.ix2-none .ix2-seg, .ix2-none .ix2-boxes, .ix2-none .ix2-tools { display: none !important; }

/* Opdracht: fasebalk met namen onder elk bolletje */
.ap-dp__steps li::before { top: 13px; margin-top: 0; }
.ap-dp__steps button, .ap-dp__steps li.is-cur button { flex-direction: column; gap: 5px; height: auto; padding: 6px 6px 2px; border-radius: 8px; background: none; max-width: 100%; }
.ap-dp__steps i, .ap-dp__steps li.is-cur i { display: block; flex: none; }
.ap-dp__steps li.is-cur i { width: 16px; height: 16px; margin-top: -1px; background: var(--c); border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.ap-dp__steps span, .ap-dp__steps li.is-cur span { display: block; max-width: 100%; font: 500 12px/1.3 var(--body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-dp__steps li.is-done span { color: var(--ink-2, var(--text)); }
.ap-dp__steps li.is-cur span { font-weight: 700; color: var(--ink); }
/* Afronden: één knop met een keuzemenu */
.dp-fin { position: relative; }
.dp-finbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font: 600 var(--fs-base) var(--body); color: var(--ink); cursor: pointer; }
.dp-finbtn .i { width: 14px; height: 14px; }
.dp-finbtn:hover { border-color: var(--line-3, #c9c5b9); }
.dp-finbtn.is-won { background: #00b85c; border-color: #00b85c; color: #fff; }
.dp-finbtn.is-lost { background: #ff3b30; border-color: #ff3b30; color: #fff; }
.dp-finmenu, .ibx-menu { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; min-width: 230px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.12); animation: pxPopIn .16s ease; }
.dp-finmenu button, .ibx-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.dp-finmenu button:hover, .ibx-menu button:hover { background: #f5f6f8; }
.dp-finmenu .i, .ibx-menu .i { width: 16px; height: 16px; flex: none; color: #6b7280; }
.dp-finmenu .is-won .i { color: #00a352; } .dp-finmenu .is-lost .i { color: #e5372c; }
.dp-finmenu span, .ibx-menu span { display: flex; flex-direction: column; line-height: 1.3; }
.dp-finmenu b, .ibx-menu b { font-size: 13.5px; color: #141414; }
.dp-finmenu small, .ibx-menu small { font-size: 12px; color: #8a9099; }
.ibx-more { position: relative; }

/* Dashboard: drie cijfers en Te doen */
.db-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.db-cols--one { display: block !important; }
.db-cols--one .db-todaywrap { max-width: none; }
.db-more { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 2px 0; font-size: 13.5px; }
.db-more a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted, #6b7280); text-decoration: none; }
.db-more a:hover { color: var(--ink, #111); }
.db-more .i { width: 13px; height: 13px; }
@media (max-width: 760px) { .db-flow--3 { grid-template-columns: 1fr !important; } }

/* Automatisch opslaan: één vaste statustekst */
.ap-saved { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12.5px; font-weight: 500; color: #177048; }
.ap-saved::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ap-saved.is-bad { color: #c62828; }
.bset-head { position: relative; }
.bset-state { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); margin: 0; }
.dset-state { position: sticky; bottom: 12px; float: right; margin: 12px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--card, #fff); box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* Pipeline: één menu Weergave */
.ap-dtmenu__hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }

/* Documenten: twee tegels, klikbaar als filter */
.dl2-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.dl2-kpis--2 .dl2-kpi { font: inherit; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.dl2-kpis--2 .dl2-kpi:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); }
.dl2-kpis--2 .dl2-kpi:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dl2-kpis--2 .dl2-kpi.is-on:not(.is-main) { border-color: #141414; box-shadow: inset 0 0 0 1px #141414; }
.dl2-kpis--2 .dl2-kpi.is-main.is-on { box-shadow: 0 0 0 3px rgba(20,20,20,.18); }
.dl2-kpis--2 .dl2-kpi:nth-child(n) { border-top: 1px solid rgba(0,0,0,.06); }
.dl2-kpis--2 .dl2-kpi.is-main { border-color: #141414; }
@media (max-width: 560px) { .dl2-kpis--2 { grid-template-columns: 1fr !important; } }
.az3-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { .az3-kpis { grid-template-columns: 1fr !important; } }

/* Offerte: incl./excl. btw naast Korting toevoegen */
.px-discbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.px-discbar .px-inclsw { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.px-discbar .px-inclsw .i { width: 14px; height: 14px; }
.px-discbar .px-inclsw:hover { color: var(--ink); }
.ws-pv__test { margin-left: auto; margin-right: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; }
.ws-pv__test .i { width: 13px; height: 13px; }
.ws-pv__test:hover { border-color: var(--ink); }

/* Aanvraag › Gegevens: gewone label/waarde-rijen, zoals in de opdracht (geen vakjes in een kaart) */
.ap-ld4__grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.ap-ld4__f { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
.ap-ld4__f:last-child { border-bottom: 0; }
.ap-dp .ap-ld4__f { border-bottom: 0; padding: 7px 0; }

/* Geel alleen voor de hoofdknop en het merk: actief menu neutraal, grafieklijn in inkt */
.ap-nav a.is-on, .ap-snav a.is-on, .ap-tabbar a.is-on, .ap-tabbar button.is-on { background: rgba(20, 20, 20, .06) !important; box-shadow: none !important; color: var(--ink); }
.ap-snav a.is-on .i, .ap-nav a.is-on .i { color: var(--ink) !important; }
.ap-snav a.is-on::before { background: var(--ink) !important; }
.ap-area__l.is-y { stroke: #141414; } .ap-area__a.is-y { fill: rgba(20, 20, 20, .07); }
.ap-area__legend i.is-y { background: #141414; }
.ap-dtmenu [data-m=sort] > .i:last-child, .ap-dtmenu [data-m=period] > .i:last-child { transform: rotate(-90deg); }
@media (max-width: 760px) { .dl-side { display: none !important; } }

/* ---------- Verfijning binnen de bestaande stijl ---------- */
/* Knoppen: overal dezelfde hoogte per maat, zodat knoppen naast elkaar exact gelijk staan */
.ap-btn { min-height: 40px; }
.ap-btn--sm { min-height: 32px; }
.ap-btn--lg { min-height: 48px; }
/* Toetsenbord: altijd zichtbaar waar je bent */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }
/* Voorbeeldgegevens: rustig in de huisstijl in plaats van een blauw blok */
.ap-demo-mini { background: #fff; border-color: var(--line); color: var(--text); box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.ap-demo-mini .i { color: var(--y-deep); }
.ap-demo-mini button { color: var(--ink); }
/* Documenten: laatste kolom niet tegen de rand, bedragen netjes onder elkaar */
.dl2-t td:last-child, .dl2-t th:last-child { padding-right: 16px; }
.dl2-t td.n, .dl2-t td.n * { font-variant-numeric: tabular-nums; }
.dl2-t tbody tr:hover { background: rgba(255, 194, 26, .05); }
/* Minder beweging als de gebruiker dat vraagt */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Pipeline: bedrag met uitleg */
.ap-dt__sum { display: inline-flex !important; flex-direction: column; justify-content: center; gap: 1px; padding: 0 0 0 14px !important; margin-left: 4px; border-left: 1px solid var(--line); line-height: 1.15; background: none !important; }
.ap-dt__sum small { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .01em; white-space: nowrap; }
.ap-dt__sum b { font: 700 15px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-dt__sum { flex-direction: row !important; align-items: baseline; gap: 8px !important; } .ap-dt__sum small { font-size: 13px; }
.dl2-t td:has(> .dl-seen), .dl2-t td:has(> .dl-mail) { padding-right: 18px !important; white-space: nowrap; }

.az2-menu .is-danger, .az2-menu .is-danger .i { color: var(--err); }
.az2-menu .is-danger small { color: var(--muted); }

/* ---------- AI-agents: overzicht ---------- */
.ag-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 20px; }
.ag-head h1 { margin: 0; font: 700 28px/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ag-head p { margin: 4px 0 0; font-size: var(--fs-base); color: var(--muted); }
.ag-rows { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ag-row { display: grid; grid-template-columns: 44px minmax(0, 1.6fr) 120px repeat(3, 84px) 52px 32px; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; transition: background .15s; }
.ag-row + .ag-row { border-top: 1px solid var(--line); }
.ag-row:hover, .ag-row:focus-visible { background: rgba(255, 194, 26, .05); outline: none; }
.ag-row.is-off .ag-row__av img { filter: grayscale(1); opacity: .6; }
.ag-row__av { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--y-soft); }
.ag-row__av i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--line-3); box-shadow: 0 0 0 2px #fff; }
.ag-row__av i.is-on { background: #177046; }
.ag-row__name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-row__name b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.ag-row__name small { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-row__ch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text); }
.ag-row__ch .i { width: 15px; height: 15px; color: var(--muted); }
.ag-row__st { display: flex; flex-direction: column; gap: 1px; }
.ag-row__st b { font: 700 var(--fs-lg) var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ag-row__st small { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 900px) { .ag-row { grid-template-columns: 44px minmax(0, 1fr) 52px 32px; } .ag-row__ch, .ag-row__st { display: none; } }

/* ---------- AI-agents: schrijfvlak ---------- */
.ag-write { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ag-write__tabs { display: flex; align-items: center; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); }
.ag-write__tabs [role=tab] { position: relative; border: 0; background: none; padding: 10px 12px 12px; font: 600 var(--fs-md) var(--body); color: var(--muted); cursor: pointer; }
.ag-write__tabs [role=tab].is-on { color: var(--ink); }
.ag-write__tabs [role=tab].is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.ag-count { font-size: var(--fs-sm); color: var(--muted); padding-bottom: 6px; }
.ag-count.is-long { color: #a35a00; }
.ag-write__pane { padding: 18px 20px 20px; }
.ag-write__help { margin: 0 0 12px; font-size: var(--fs-base); color: var(--muted); line-height: 1.5; }
.ag-write__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 1fr); gap: 20px; align-items: start; }
.ag-ta { min-height: 150px; font-size: 15px; line-height: 1.6; resize: vertical; }
.ag-ins, .ag-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ag-ins small, .ag-starters small { width: 100%; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.ag-ins button { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 var(--fs-sm) var(--body); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.ag-ins button .i { width: 12px; height: 12px; color: var(--muted); }
.ag-ins button:hover { border-color: var(--line-2); background: var(--soft); }
.ag-starters button { width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font: 400 var(--fs-base)/1.5 var(--body); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.ag-starters button:hover { border-color: var(--ink); background: #fff; }
.ag-prev { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.ag-prev__top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.ag-prev__top span { display: flex; flex-direction: column; line-height: 1.2; }
.ag-prev__top b { font-size: var(--fs-base); color: var(--ink); }
.ag-prev__top small { font-size: var(--fs-xs); color: var(--muted); }
.ag-prev__av { display: grid !important; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #25d366; color: #fff; font-weight: 700; font-size: 13px; }
.ag-prev__body { padding: 16px 14px 18px; min-height: 140px; }
.ag-prev__msg { margin: 0; max-width: 92%; padding: 9px 12px; border-radius: 4px 12px 12px 12px; font-size: 14px; line-height: 1.5; color: #111; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.ag-prev__empty { color: var(--muted); font-style: italic; }
.ag-prev__cap { display: block; padding: 0 14px 10px; font-size: var(--fs-xs); color: var(--muted); }
.ag-prev.is-wa { background: #efeae2; }
.ag-prev.is-wa .ag-prev__top { background: #f0f2f5; border-bottom: 1px solid #e3e3e3; }
.ag-prev.is-wa .ag-prev__msg { background: #fff; }
.ag-prev.is-mail { background: #fff; }
.ag-prev.is-mail .ag-prev__top { border-bottom: 1px solid var(--line); }
.ag-prev.is-mail .ag-prev__top .i { width: 18px; height: 18px; color: var(--muted); }
.ag-prev.is-mail .ag-prev__msg { box-shadow: none; padding: 0; max-width: none; }
.ag-prev .ag-var { background: #fff1c2; color: #7a5b00; border-radius: 4px; padding: 0 3px; }
.ag-right { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1100px) { .ag-write__grid { grid-template-columns: 1fr; } }
.ag-right { overflow-y: auto; }
.ag-write { flex: none; }
.ag-chat { flex: none; min-height: 440px; }
.ag-starters .ag-var { background: none; padding: 0; color: inherit; font-weight: 600; }

/* Dashboard: verbinding tussen de stappen als een klein rond knopje op de naad */
.db-flow { gap: 14px; }
.db-step:not(:last-child)::after { content: ""; right: -18px; top: 50%; z-index: 2; width: 22px; height: 22px; border: 0; border-radius: 50%; transform: translateY(-50%); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736e66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 1px rgba(30,25,10,.08), 0 2px 6px rgba(30,25,10,.08); }
@media (max-width: 760px) { .db-step:not(:last-child)::after { display: none; } }

/* ---------- Opdracht: fasebalk met pijlen (afgewerkt groen, huidige fase zwart) ---------- */
.ap-dp__bar { padding-top: 12px !important; padding-bottom: 12px !important; }
.ap-dp__steps { gap: 0; align-items: stretch; }
.ap-dp__steps li { flex: 1; margin-left: -6px; }
.ap-dp__steps li:first-child { margin-left: 0; }
.ap-dp__steps li::before, .ap-dp__steps li::after { display: none !important; }
.ap-dp__steps button, .ap-dp__steps li.is-cur button {
  width: 100%; height: 34px !important; flex-direction: row !important; gap: 6px !important; padding: 0 20px !important; border-radius: 0 !important; background: #ecebe7 !important;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%); transition: background-color .15s;
}
.ap-dp__steps li:first-child button { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); border-radius: 17px 0 0 17px !important; }
.ap-dp__steps li:last-child button { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%); border-radius: 0 17px 17px 0 !important; }
.ap-dp__steps li:only-child button { clip-path: none; border-radius: 17px !important; }
.ap-dp__steps button:hover { background: #dedcd5 !important; }
.ap-dp__steps i, .ap-dp__steps li.is-cur i { display: none !important; }
.ap-dp__steps span, .ap-dp__steps li.is-cur span { display: block !important; max-width: 100%; font: 500 12.5px/1 var(--body) !important; color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-dp__steps li.is-done button { background: #2e844a !important; }
.ap-dp__steps li.is-done button:hover { background: #276f3e !important; }
.ap-dp__steps li.is-done span { color: #fff !important; }
.ap-dp__steps li.is-cur button { background: var(--ink) !important; }
.ap-dp__steps li.is-cur span { color: #fff !important; font-weight: 600 !important; }

/* ---------- Lijsten: compacter, met kolomlijnen (sneller scannen) ---------- */
.dl2-t thead th { background: #fafaf8 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.dl2-t thead th + th { border-left: 1px solid var(--line) !important; }
.dl2-t .dl-th { padding: 9px 10px !important; }
.dl2-t td { padding: 10px 10px !important; }
.dl2-t td + td { box-shadow: inset 1px 0 0 #f0eee9; }
.ap-dtab thead th { background: #fafaf8; }
.ap-dtab thead th + th { border-left: 1px solid var(--line); }
.ap-dtab td + td { box-shadow: inset 1px 0 0 #f0eee9; }

/* Documenten: dezelfde letters als de andere lijsten (geen hoofdletters met spatiëring, geen bovenlabel) */
.dl2-t .dl-th { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted) !important; }
.dl2-t .dl-th.is-on { color: var(--ink) !important; font-weight: 600 !important; }
.dl2-eyebrow { display: none !important; }

/* Cijfers overal hetzelfde: geen vaste cijferbreedte op Documenten en de offerte (oogde als een ander lettertype) */
.dl2 *, .dls *, .px *, .px-side *, .dl-t * { font-variant-numeric: normal !important; }
.dl2-t td { font-size: 14px; }

.dl2-t td, .dl2-t .dl-th { padding-left: 8px !important; padding-right: 8px !important; }
.dl2-t td:first-child, .dl2-t th:first-child .dl-th { padding-left: 10px !important; }
.dl2-t .dl-client { max-width: 230px; }

.dl2-t { width: 100%; }
.dl2-t tbody td:first-child { width: 36%; max-width: 0; }
.dl2-t .dl-client { max-width: 100%; min-width: 0; overflow: hidden; }
.dl2-t .dl-client b, .dl2-t .dl-client small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ---------- Offertes en facturen: één lijn bovenaan, zoekbalk over de volle breedte, tabel strak ---------- */
.dl2-head { align-items: center !important; }
.dl2-bar { display: flex !important; align-items: center; gap: 10px; width: 100%; }
.dl2-bar .dl2-search { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
.dl2-bar .dl2-fwrap { flex: none; }
.dl2 .dl-scroll { width: 100%; }
.dl2-t { width: 100% !important; table-layout: auto; }
/* lijnen: kop en rijen exact dezelfde kolomlijnen */
.dl2-t thead th + th, .dl2-t td + td { border-left: 1px solid #ece9e2 !important; box-shadow: none !important; }
.dl2-t td + td { box-shadow: none !important; }
.dl2-t thead th:last-child, .dl2-t tbody td:last-child { border-left: 0 !important; width: 72px; }
.dl2-t .dl-th--plain { display: block; padding: 9px 8px !important; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.dl2-t .dl2-seenh { width: 1%; }
.dl2-t tbody td:nth-last-child(2) { width: 1%; white-space: nowrap; }
/* vaste kolombreedtes: Klant krijgt de rest van de ruimte */
.dl2-t { table-layout: fixed !important; }
.dl2-t tbody td:first-child { width: auto !important; max-width: none !important; }
.dl2-t thead th:nth-child(1) { width: auto; }
.dl2-t thead th:nth-child(2) { width: 112px; }
.dl2-t thead th:nth-child(3) { width: 132px; }
.dl2-t thead th:nth-child(4) { width: 132px; }
.dl2-t thead th:nth-child(5) { width: 150px; }
.dl2-t thead th:nth-child(6) { width: 92px; }
.dl2-t thead th:nth-child(7) { width: 76px; }
.dl2-t td { overflow: hidden; }
/* kolommen smaller zodat Klant genoeg ruimte heeft naast het menu Documenten */
.dl2 { padding-left: 24px !important; padding-right: 24px !important; }
.dl2-t thead th:nth-child(2) { width: 100px; }
.dl2-t thead th:nth-child(3) { width: 116px; }
.dl2-t thead th:nth-child(4) { width: 120px; }
.dl2-t thead th:nth-child(5) { width: 128px; }
.dl2-t thead th:nth-child(6) { width: 80px; }
.dl2-t thead th:nth-child(7) { width: 64px; }
.dl2-t .dl-client { overflow: hidden; }

/* status met bekeken ernaast; kolommen: Klant (rest), Datum, Geldig tot, Bedrag, Status, acties */
.dl2-stseen { display: inline-flex; align-items: center; gap: 10px; }
.dl2-t thead th:nth-child(5) { width: 176px; }
.dl2-t thead th:nth-child(6) { width: 64px; }
.dl2-t thead th:nth-child(7) { width: auto; }

/* ---------- Offertes/facturen: tabel op één lijn (nummer, klant, datum, vervaldatum, excl., incl., status, bekeken, acties) ---------- */
.dl2-t { table-layout: auto !important; }
.dl2-t thead th, .dl2-t td { border-left: 0 !important; box-shadow: none !important; width: auto !important; }
.dl2-t thead th { background: #f7f6f2 !important; border-top: 0 !important; border-bottom: 1px solid var(--line) !important; }
.dl2-t .dl-th, .dl3-th { display: flex; align-items: center; gap: 4px; padding: 13px 10px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; }
.dl2-t th.n .dl-th { justify-content: flex-end; }
.dl3-c, .dl3-c .dl3-th { text-align: center; justify-content: center; }
.dl2-t td { padding: 0 10px !important; height: 60px; border-bottom: 1px solid var(--line) !important; white-space: nowrap; color: var(--text); font-size: 14px; vertical-align: middle; }
.dl2-t td:first-child, .dl2-t th:first-child { padding-left: 14px !important; }
.dl2-t td:last-child { padding-right: 10px !important; }
.dl2-t tbody tr:last-child td { border-bottom: 0 !important; }
.dl3-ck { width: 34px; }
.dl3-ck input { width: 16px; height: 16px; accent-color: var(--ink); opacity: 0; transition: opacity .15s; cursor: pointer; }
.dl2-t tbody tr:hover .dl3-ck input, .dl2-t.is-picking .dl3-ck input, .dl3-ck input:checked, .dl2-t thead .dl3-ck input:hover, .dl2-t thead .dl3-ck input:checked { opacity: 1; }
.dl2-t thead .dl3-ck input { opacity: .55; }
.dl3-num { color: #2f6fdb; font-weight: 600; }
.dl2-t tbody tr:hover .dl3-num { text-decoration: underline; text-underline-offset: 3px; }
.dl3-num.is-draft { color: var(--muted); font-weight: 500; }
.dl3-cli { max-width: 240px; overflow: hidden; text-overflow: ellipsis; color: var(--ink) !important; font-weight: 500; }
.dl3-tot { font-weight: 600; color: var(--ink); }
.dl3-late { color: var(--err); font-weight: 600; }
.dl2-t td.dl3-c .dl-seen { justify-content: center; }
.dl2-t tbody tr:hover td { background: #fbfaf7; }
.dl3-menu .is-danger, .dl3-menu .is-danger .i { color: var(--err); }
/* tabel: de kop-checkbox staat gewoon in zijn kolom, geen kolomlijnen, compacter zodat alles past */
.dl2-t thead .dl3-ck .dl2-ckall { position: static !important; opacity: .55; width: 16px; height: 16px; }
.dl2-t thead .dl3-ck .dl2-ckall:hover, .dl2-t thead .dl3-ck .dl2-ckall:checked, .dl2-t.is-picking thead .dl2-ckall { opacity: 1; }
.dl2-t thead th + th, .dl2-t td + td, .dl2-t thead th:last-child, .dl2-t tbody td:last-child { border-left: 0 !important; box-shadow: none !important; }
.dl2-t td { padding: 0 8px !important; font-size: 13.5px; }
.dl2-t .dl-th, .dl2-t .dl3-th { padding: 12px 8px !important; font-size: 12.5px !important; }
.dl2-t td:first-child, .dl2-t th:first-child { padding-left: 12px !important; padding-right: 0 !important; }
.dl3-cli { max-width: 200px; }
.dl2-t .dl-st { white-space: nowrap; }
/* Documenten: het menu links iets smaller, zodat de tabel de breedte heeft */
.ap-fx:has(.dl2):not(.is-closed) { grid-template-columns: 236px minmax(0, 1fr); }
/* tabel tot in de hoeken van de kaart; menu Documenten terug op zijn breedte */
.ap-fx:has(.dl2):not(.is-closed) { grid-template-columns: 300px minmax(0, 1fr); }
.dl2 .dl-scroll { padding: 0 !important; overflow: hidden; border-radius: 14px; }
.dl2-t { border-collapse: collapse; }
.dl2-t thead th:first-child { border-top-left-radius: 14px; }
.dl2-t thead th:last-child { border-top-right-radius: 14px; }
.dl2-t td:first-child, .dl2-t th:first-child { padding-left: 16px !important; }
.dl2-t td:last-child, .dl2-t th:last-child { padding-right: 12px !important; }
.dl2-t .dl3-th .i { width: 16px; height: 16px; color: var(--muted); }
.dl2-t td.dl3-c, .dl2-t th.dl3-c { padding-left: 4px !important; padding-right: 4px !important; }
.dl2 { padding-left: 20px !important; padding-right: 20px !important; }
/* nog net genoeg ruimte voor alle kolommen */
.ap-fx:has(.dl2):not(.is-closed) { grid-template-columns: 264px minmax(0, 1fr); }
.ap-fx:has(.dl2) .ap-fx__side { padding-left: 16px; padding-right: 16px; }
.ap-fx:has(.dl2) .dls-row { gap: 8px; }
.ap-fx:has(.dl2) .dls-row span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl2-t td, .dl2-t .dl-th, .dl2-t .dl3-th { padding-left: 6px !important; padding-right: 6px !important; }
.dl2-t td:first-child, .dl2-t th:first-child { padding-left: 14px !important; padding-right: 0 !important; width: 30px !important; }
.dl2-t td:last-child, .dl2-t th:last-child { padding-right: 10px !important; }

/* Facturen en creditnota's: gewoon de Beavr-kleuren (geen blauw of oranje) */
.dl2.is-invoice, .dl2.is-credit { --k: #e8a317; --k-soft: #fff5dc; --k-ink: #7a5300; }
.dl2.is-invoice .dl2-acts .ap-btn--primary, .dl2.is-credit .dl2-acts .ap-btn--primary { background: var(--y) !important; border-color: var(--y) !important; color: var(--ink) !important; box-shadow: inset 0 -2px 0 rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06) !important; }
.dl-kind.is-invoice { background: #fff5dc; color: #7a5300; }
/* Nummer: geen blauw, wel duidelijk een link */
.dl3-num { color: var(--ink) !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--y-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dl3-num.is-draft { color: var(--muted) !important; text-decoration: none; font-weight: 500; }
/* compactere statuslabels in de lijst */
.dl2-t .dl-st { padding: 3px 9px !important; font-size: 12px !important; gap: 5px; }
.dl3-cli { max-width: 150px !important; }
.dl2-t td { font-size: 13px !important; } .dl2-t td, .dl2-t .dl-th, .dl2-t .dl3-th { padding-left: 5px !important; padding-right: 5px !important; } .dl2-t td:first-child, .dl2-t th:first-child { padding-left: 12px !important; padding-right: 0 !important; } .dl2-t td:last-child, .dl2-t th:last-child { padding-right: 10px !important; }
.dl3-num { text-decoration: none !important; } .dl2-t tbody tr:hover .dl3-num { text-decoration: underline !important; text-decoration-color: currentColor !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; }
.dl2-t td:nth-child(8) { text-align: center; } .dl2-t thead th:nth-child(8) .dl-th { justify-content: center; }

/* Instellingen › Calculators: Design en Tracking als subtabbladen */
.ap-subtabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.ap-subtabs a { padding: 7px 14px; border-radius: 9px; font-size: var(--fs-base); font-weight: 600; color: var(--muted); text-decoration: none; }
.ap-subtabs a.is-on { background: var(--ink); color: #fff; }
.ap-subtabs a:not(.is-on):hover { color: var(--ink); background: var(--soft); }

/* Prijzen › Regels & formules */
.lg { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.lg-lead { margin: 0 0 18px; max-width: 760px; }
.lg-sec { margin: 0 0 26px; }
.lg-sec__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.lg-sec__h h3 { margin: 0; font-size: 16px; }
.lg-sec__h p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-base); }
.lg-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: var(--fs-base); }
.lg-var, .lg-rule { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 10px; }
.lg-var__h, .lg-rule__h { display: flex; align-items: center; gap: 8px; }
.lg-name { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); padding: 4px 6px; margin-left: -6px; border-radius: 7px; }
.lg-name:hover, .lg-name:focus { background: var(--soft); outline: none; }
.lg-eq { color: var(--muted); font-weight: 600; }
.lg-val { font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; background: var(--soft); white-space: nowrap; }
.lg-unit { width: 74px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; }
.lg-expr { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; align-items: center; margin: 10px 0 8px; padding: 8px; border-radius: 10px; background: var(--soft); }
.lg-ph { color: var(--muted); font-size: 13px; padding: 0 4px; }
.lg-tok { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); }
.lg-tok .i { width: 11px; height: 11px; opacity: 0; transition: opacity .12s; }
.lg-tok:hover .i { opacity: .6; }
.lg-tok:hover { border-color: #d9534f; }
.lg-tok--q { background: #fff5dc; border-color: #f3dc9e; }
.lg-tok--v { background: #eaf3ec; border-color: #c6e0cd; }
.lg-tok--op { background: transparent; border-color: transparent; font-size: 15px; padding: 5px 4px; }
.lg-tok--n { font-variant-numeric: tabular-nums; }
.lg-pal { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lg-add, .lg-cond select, .lg-act select, .lg-ti select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); max-width: 100%; }
.lg-op { min-width: 34px; height: 32px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; padding: 0 8px; }
.lg-op:hover, .lg-num button:hover { background: var(--soft); }
.lg-num { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lg-num input { width: 76px; border: 0; padding: 6px 8px; font: inherit; font-size: 13px; }
.lg-num button { border: 0; border-left: 1px solid var(--line); background: #fff; font-weight: 700; padding: 0 10px; cursor: pointer; }
.lg-rule { border-left: 4px solid var(--line); }
.lg-rule.is-hit { border-left-color: #2e844a; }
.lg-rule.is-off { opacity: .55; }
.lg-hit { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--soft); }
.lg-hit.is-on { color: #1f6b38; background: #e3f2e7; }
.lg-if, .lg-then { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 10px; }
.lg-kw { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 9px; }
.lg-kw--then { color: var(--ink); }
.lg-conds { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lg-cond { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lg-cond select[data-cf=src] { max-width: 260px; }
.lg-and { border: 0; background: var(--ink); color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 7px; cursor: pointer; }
.lg-always { font-weight: 600; padding: 6px 0; }
.lg-addc { font-size: 13px; }
.lg-x .i { width: 14px; height: 14px; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lg-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.lg-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.lg-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lg-act .pz-m input { width: 90px; }
.lg-sw { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; cursor: pointer; }
.lg-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lg-sw span { position: absolute; inset: 0; border-radius: 999px; background: #d6d3cc; transition: background .15s; pointer-events: none; }
.lg-sw span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.lg-sw input:checked + span { background: #2e844a; }
.lg-sw input:checked + span::after { transform: translateX(14px); }
.lg-sw input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.lg-tpl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.lg-tpl > span { font-size: 13px; color: var(--muted); margin-right: 2px; }
.lg-tplb { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed #c9c5bb; background: transparent; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); }
.lg-tplb:hover { background: #fff; border-style: solid; }
.lg-tplb .i { width: 13px; height: 13px; }
.lg-side { position: sticky; top: 16px; }
.lg-test { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; max-height: calc(100vh - 140px); overflow: auto; }
.lg-test h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; }
.lg-test h3 .i { width: 15px; height: 15px; }
.lg-in { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lg-ti { display: flex; flex-direction: column; gap: 5px; }
.lg-ti__l { font-size: 13px; font-weight: 600; }
.lg-ti select { width: 100%; }
.lg-ti .pz-m input { width: 100%; }
.lg-res { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.lg-res small { color: var(--muted); font-size: 12px; }
.lg-res b { font-size: 22px; letter-spacing: -.01em; }
.lg-vals { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); font-size: 13px; }
.lg-vals li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.lg-vals span { color: var(--muted); }
.ap-rlines li.is-rule b { color: var(--ink); }
@media (max-width: 1100px) { .lg { grid-template-columns: 1fr; } .lg-side { position: static; } .lg-test { max-height: none; } }
@media (max-width: 600px) { .lg-if, .lg-then { grid-template-columns: 1fr; gap: 4px; } .lg-kw { padding-top: 0; } .lg-var__h { flex-wrap: wrap; } }
.lg .pz-m { flex: 0 0 auto; width: 130px; height: 36px; }
.lg-ti .pz-m { width: 100%; }
.lg-add, .lg-cond select, .lg-act select, .lg-ti select { height: 36px; border-radius: 10px; padding: 0 10px; }
.lg-op, .lg-num { height: 36px; border-radius: 10px; }
.lg-unit { height: 34px; }
.lg-main, .lg-side { min-width: 0; }
@media (max-width: 1100px) { .lg { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .lg-cond select[data-cf=src] { max-width: 100%; flex: 1 1 100%; } .lg-act select[data-af=kind] { flex: 1 1 100%; } .lg-var, .lg-rule { padding: 12px; } }
@media (max-width: 600px) { .lg-if, .lg-then { grid-template-columns: minmax(0, 1fr); } .lg-cond, .lg-conds { max-width: 100%; min-width: 0; } }
@media (max-width: 600px) { .lg-rule__h { flex-wrap: wrap; } .lg-rule__h .lg-name { flex: 1 1 100%; } }
/* Documenten links: enkel de statussen, zonder bolletjes of bedragen */
.dls--plain .dls-row { grid-template-columns: minmax(0, 1fr) auto; }
.dls--plain .dls-row span { display: block; }
.dls--plain .dls-row em { line-height: 1; align-self: center; }
/* Statussen links: zelfde kleuren als de labels in de lijst, als zacht label (geen bolletjes) */
.dls--plain .dls-row span { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.dls--plain .dls-row.is-draft span { background: #f1f1ef; color: var(--text); }
.dls--plain .dls-row.is-open span { background: #ebf1fd; color: #2c55b0; }
.dls--plain .dls-row.is-accepted span, .dls--plain .dls-row.is-paid span { background: #e6f5ee; color: #1b7048; }
.dls--plain .dls-row.is-late span { background: #fdecec; color: #b42323; }
.dls--plain .dls-row.is-declined span { background: #fdf0e8; color: #a8410f; }
/* Statuskleuren: volle kleuren met witte tekst, zonder bolletje (links en in de lijst hetzelfde) */
.dl-st i { display: none !important; }
.dl-st, .dl2-t .dl-st { padding: 4px 10px !important; color: #fff !important; font-weight: 600; }
.dl-st.is-draft, .dls--plain .dls-row.is-draft span { background: #6b7280 !important; color: #fff !important; }
.dl-st.is-sent, .dl-st.is-viewed, .dls--plain .dls-row.is-open span { background: #2563eb !important; color: #fff !important; }
.dl-st.is-accepted, .dl-st.is-paid, .dls--plain .dls-row.is-accepted span, .dls--plain .dls-row.is-paid span { background: #16a34a !important; color: #fff !important; }
.dl-st.is-overdue, .dl-st.is-expired, .dls--plain .dls-row.is-late span { background: #dc2626 !important; color: #fff !important; }
.dl-st.is-declined, .dl-st.is-cancelled, .dls--plain .dls-row.is-declined span { background: #ea580c !important; color: #fff !important; }
.dl2-title h1 { display: flex; align-items: center; gap: 10px; } .dl2-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: #e9e7e1; color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* Statistieken in dezelfde stijl als Documenten: zelfde zijbalk, kop met knop rechts, witte kaarten als de tabel */
@media (min-width: 901px) { .ap-fx:has(.st3):not(.is-closed) { grid-template-columns: 264px minmax(0, 1fr); } }
.ap-fx:has(.st3) .ap-fx__side { padding: 22px 16px 56px; }
.st3.ap-fx__main { padding: 52px 46px 76px; }
.st3 > * { max-width: 1140px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.st3-top--row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.st3-top--row h1 { margin: 0; }
.st3-top--row .ap-btn { height: 44px; }
/* Kerncijfers: één witte kaart met vier vakken, geen donkere tegel of gloed */
.st3 .st3-kpis, .st3 .st2-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 16px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.18); overflow: hidden; }
.st3 .st3-kpis .dl2-kpi, .st3 .st2-tile { padding: 18px 20px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; }
.st3 .st3-kpis .dl2-kpi + .dl2-kpi, .st3 .st2-tile + .st2-tile { border-left: 1px solid rgba(0,0,0,.06) !important; }
.st3 .st3-kpis .dl2-kpi::before, .st3 .st3-kpis .dl2-kpi::after { display: none !important; }
.st3 .st3-kpis .dl2-kpi span, .st3 .st2-tile small { font-size: 12.5px; font-weight: 600; color: var(--muted) !important; }
.st3 .st3-kpis .dl2-kpi b, .st3 .st2-tile b { font: 700 24px/1.15 var(--display, inherit); color: #141414 !important; letter-spacing: -.01em; }
.st3 .st3-kpis .dl2-kpi small { color: var(--muted) !important; }
.st3 .st3-kpis .dl2-kpi small.is-up { color: #16a34a !important; } .st3 .st3-kpis .dl2-kpi small.is-down { color: #dc2626 !important; }
/* Kaarten zoals de tabel: zelfde rand, hoek en een kopstrook in de tabelkleur */
.st3 .st3-card, .st3 .st2-block { padding: 0 22px 20px; border-radius: 14px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.18); background: #fff; overflow: hidden; }
.st3 .st3-h { margin: 0 -22px 16px; padding: 12px 22px; background: #f7f6f2; border-bottom: 1px solid rgba(0,0,0,.06); align-items: center; }
.st3 .st3-h h2 { font-size: 14px; font-weight: 600; }
.st3 .st3-h p { margin: 2px 0 0; font-size: 12.5px; }
.st3 .st2-block { padding-top: 20px; }
/* Trechter: volle kleuren, geen verloop */
.st3 .st3-f__bar i { background: var(--y, #f5b400) !important; }
.st3 .st3-funnel li:last-child .st3-f__bar i { background: #16a34a !important; }
@media (max-width: 900px) { .st3.ap-fx__main { padding: 24px 16px 60px; } .st3 .st3-kpis, .st3 .st2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st3 .st3-kpis .dl2-kpi:nth-child(3), .st3 .st2-tile:nth-child(3) { border-left: 0 !important; } .st3 .st3-kpis .dl2-kpi:nth-child(n+3), .st3 .st2-tile:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.06) !important; } }
.st3 > * { flex-shrink: 0; }
.ap-fx .st3.ap-fx__main { padding: 52px 46px 76px !important; }
@media (max-width: 900px) { .ap-fx .st3.ap-fx__main { padding: 24px 16px 60px !important; } }

/* Statistieken: bezoeken per pagina */
.ap-area__l.is-green { stroke: #16a34a; } .ap-area__a.is-green { fill: rgba(22,163,74,.1); } .ap-area__legend i.is-green { background: #16a34a; }
.st4-pages { list-style: none; margin: 0; padding: 0; }
.st4-pages li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) 48px 44px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.055); font-size: 13.5px; }
.st4-pages li:last-child { border-bottom: 0; }
.st4-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.st4-bar { height: 10px; border-radius: 999px; background: #f1efe9; overflow: hidden; }
.st4-bar i { display: block; height: 100%; border-radius: 999px; background: var(--y, #f5b400); }
.st4-pages li.is-end .st4-bar i { background: #16a34a; }
.st4-pages li.is-start .st4-l { font-weight: 600; }
.st4-pages b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: #141414; }
.st4-pages small { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.st4-pages li.st4-g { display: block; padding: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 0; }
.st4-none { margin: 0; }
@media (max-width: 600px) { .st4-pages li { grid-template-columns: minmax(0, 1fr) 44px; } .st4-bar { grid-column: 1 / -1; grid-row: 2; } .st4-pages small { display: none; } }
.st3 .ap-area__l.is-y { stroke: #f5b400 !important; } .st3 .ap-area__a.is-y { fill: rgba(245,180,0,.14) !important; } .st3 .ap-area__legend i.is-y { background: #f5b400 !important; } .st3 .ap-area__l.is-green { stroke: #16a34a !important; }

/* Statistieken: periode kiezen met twee maanden en snelle keuzes */
.st-rp { position: fixed; z-index: 80; display: flex; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; box-shadow: 0 18px 50px -18px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.05); overflow: hidden; }
.st-rp__cal { position: relative; display: flex; gap: 22px; padding: 16px 18px 18px; }
.st-rp__nav { position: absolute; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.1); border-radius: 9px; background: #fff; cursor: pointer; color: var(--ink); }
.st-rp__nav .i { width: 15px; height: 15px; }
.st-rp__nav.is-prev { left: 14px; } .st-rp__nav.is-next { right: 14px; }
.st-rp__nav:disabled { opacity: .35; cursor: default; }
.st-rp__m b { display: block; text-align: center; font-size: 14px; font-weight: 700; line-height: 32px; margin-bottom: 8px; text-transform: lowercase; }
.st-rp__g { display: grid; grid-template-columns: repeat(7, 40px); row-gap: 4px; }
.st-rp__g em { font-style: normal; text-align: center; font-size: 12.5px; color: var(--muted); padding-bottom: 6px; }
.st-rp__g button, .st-rp__g span { height: 38px; display: grid; place-items: center; font: inherit; font-size: 13.5px; border: 0; background: none; color: var(--ink); }
.st-rp__g span.is-out { color: #cfccc4; }
.st-rp__g button { cursor: pointer; border-radius: 9px; }
.st-rp__g button:hover:not(:disabled) { background: #f3f2ee; }
.st-rp__g button:disabled { color: #cfccc4; cursor: default; }
.st-rp__g button.is-today { font-weight: 700; }
.st-rp__g button.is-in { background: #fff5d6; border-radius: 0; }
.st-rp__g button.is-lo, .st-rp__g button.is-hi { background: var(--y, #f5b400); color: #141414; font-weight: 700; border-radius: 9px; }
.st-rp__side { display: flex; flex-direction: column; gap: 2px; min-width: 210px; padding: 16px 12px; border-left: 1px solid rgba(0,0,0,.07); }
.st-rp__side h4 { margin: 6px 10px 10px; font-size: 14px; font-weight: 700; }
.st-rp__side button { text-align: left; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; background: none; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.st-rp__side button:hover { background: #f7f6f2; }
.st-rp__side button.is-on { background: #f5f4f0; border-color: #e8e4db; font-weight: 600; }
@media (max-width: 760px) { .st-rp { flex-direction: column; max-width: calc(100vw - 16px); } .st-rp__cal > div:first-of-type { display: none; } .st-rp__side { border-left: 0; border-top: 1px solid rgba(0,0,0,.07); flex-direction: row; flex-wrap: wrap; min-width: 0; } .st-rp__side h4 { width: 100%; margin: 0 4px 4px; } .st-rp__g { grid-template-columns: repeat(7, 38px); } }

.st3-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.st3-acts .ap-btn .i:last-child:not(:first-child) { width: 14px; height: 14px; opacity: .6; }
.st-devm button span { display: inline-flex; align-items: center; gap: 9px; }
.st-devm button span .i { width: 16px; height: 16px; }
@media (max-width: 600px) { .st3-top--row { flex-wrap: wrap; } .st3-acts { width: 100%; justify-content: flex-start; } }

/* Statistieken: wat klanten antwoorden */
.st4-ans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.st4-q h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: #141414; }
.st4-q h3 small { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.st4-q ul { list-style: none; margin: 0; padding: 0; }
.st4-q li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 42px; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--text); }
.st4-q li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st4-q li b { text-align: right; font-variant-numeric: tabular-nums; color: #141414; }
.st4-q li.is-top > span:first-child { font-weight: 600; color: #141414; }
/* Inzichten */
.st4-tipl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st4-tipl li { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; background: #f7f6f2; border-left: 4px solid #9aa0a8; }
.st4-tipl li.is-good { border-left-color: #16a34a; } .st4-tipl li.is-warn { border-left-color: #f5b400; } .st4-tipl li.is-info { border-left-color: #2563eb; }
.st4-tips #aiOut:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.06); }
.st4-aihint { margin: 12px 0 0; }
@media (max-width: 900px) { .st4-ans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .st4-q li { grid-template-columns: minmax(0, 1fr) 60px 38px; } .st3 .st3-h { flex-wrap: wrap; gap: 10px; } }
.st-devm button > span { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 9px !important; } .st-devm button > span b { display: inline !important; } .st-devm button > span .i { margin: 0 !important; }

/* Dashboard: wie wacht op je, wat staat er ingepland, doet je calculator zijn werk */
.db2-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.18); padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.db2-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.db2-h h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: #141414; }
.db2-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--y, #f5b400); color: #141414; font-size: 12.5px; font-weight: 700; }
.db2-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.db2-link:hover { color: #141414; } .db2-link .i { width: 14px; height: 14px; }
.db2-empty { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.db2-empty .i { width: 16px; height: 16px; color: #16a34a; flex: none; }
.db2-reqs, .db2-visits { list-style: none; margin: 0; padding: 0; }
.db2-req { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px auto; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,.055); }
.db2-req:first-child { border-top: 0; padding-top: 4px; }
.db2-req__main { min-width: 0; text-decoration: none; color: inherit; }
.db2-req__main b { display: block; font-size: 14.5px; color: #141414; }
.db2-req__main small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db2-req__main em { font-style: normal; font-weight: 700; color: #dc2626; }
.db2-req__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #141414; }
.db2-req__wait { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.db2-req__wait .i { width: 14px; height: 14px; }
.db2-req.is-late .db2-req__wait { color: #dc2626; font-weight: 700; }
.db2-req__acts { display: flex; gap: 6px; justify-content: flex-end; }
.db2-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; font-weight: 600; color: #141414; text-decoration: none; }
.db2-more .i { width: 14px; height: 14px; }
.db2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.db2-grid > .db2-card { margin-bottom: 16px; }
.db2-visit { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(0,0,0,.055); }
.db2-visit:first-child { border-top: 0; padding-top: 2px; }
.db2-visit__when b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.db2-visit__when small { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.db2-visit__who { min-width: 0; text-decoration: none; color: inherit; }
.db2-visit__who b { display: block; font-size: 14px; }
.db2-visit__who small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db2-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db2-num { display: flex; flex-direction: column; gap: 3px; padding: 4px 14px; min-width: 0; }
.db2-num:first-child { padding-left: 0; } .db2-num + .db2-num { border-left: 1px solid rgba(0,0,0,.06); }
.db2-num span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.db2-num b { font: 700 24px/1.15 var(--display, inherit); color: #141414; }
.db2-num small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.db2-num small.is-up { color: #16a34a; font-weight: 600; } .db2-num small.is-down { color: #dc2626; font-weight: 600; }
.db2-big { display: block; font: 700 30px/1.1 var(--display, inherit); color: #141414; letter-spacing: -.01em; }
.db2-sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.db2-tiptxt { margin: 0; padding: 12px 14px; border-radius: 10px; background: #f7f6f2; border-left: 4px solid #9aa0a8; font-size: 13.5px; line-height: 1.55; }
.db2-tiptxt.is-good { border-left-color: #16a34a; } .db2-tiptxt.is-warn { border-left-color: #f5b400; } .db2-tiptxt.is-info { border-left-color: #2563eb; }
@media (max-width: 1000px) { .db2-req { grid-template-columns: minmax(0, 1fr) auto; } .db2-req__wait { grid-column: 2; grid-row: 1; } .db2-req__price { grid-column: 1; grid-row: 2; font-size: 13px; } .db2-req__acts { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } }
@media (max-width: 800px) { .db2-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 480px) { .db2-nums { grid-template-columns: minmax(0, 1fr); } .db2-num, .db2-num:first-child { padding: 8px 0; } .db2-num + .db2-num { border-left: 0; border-top: 1px solid rgba(0,0,0,.06); } }
.db2-grid { align-items: start; }

/* Dashboard: zelfde stijl als Documenten en Statistieken */
.db2 .db2-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.18); overflow: hidden; }
.db2-tile { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; text-decoration: none; color: inherit; transition: background .15s; min-width: 0; }
.db2-tile + .db2-tile { border-left: 1px solid rgba(0,0,0,.06); }
.db2-tile:hover { background: #fbfaf7; }
.db2-tile span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.db2-tile b { font: 700 26px/1.15 var(--display, inherit); color: #141414; letter-spacing: -.01em; }
.db2-tile small { font-size: 12px; color: var(--muted); }
.db2-tile small.is-up { color: #16a34a; font-weight: 600; } .db2-tile small.is-down { color: #dc2626; font-weight: 600; }
.db2-tile.is-alert { box-shadow: inset 0 3px 0 #dc2626; }
.db2-tile.is-alert small { color: #dc2626; font-weight: 600; }
.db2 .db2-card { padding: 0 20px 16px; overflow: hidden; }
.db2 .db2-h { margin: 0 -20px 14px; padding: 12px 20px; background: #f7f6f2; border-bottom: 1px solid rgba(0,0,0,.06); }
.db2 .db2-h h2 { font-size: 14px; font-weight: 600; }
.db2-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; flex: none; }
.db2 .db2-req { grid-template-columns: 36px minmax(0, 1fr) auto 96px auto; gap: 14px; }
.db2 .db2-req:first-child { padding-top: 2px; }
.db2-pill { display: inline-block; font-style: normal; padding: 4px 10px; border-radius: 999px; background: #6b7280; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.db2-pill.is-late { background: #dc2626; }
.db2 .db2-req.is-late .db2-req__wait { color: inherit; }
.db2 .db2-nums { padding-top: 2px; }
@media (max-width: 1000px) { .db2 .db2-req { grid-template-columns: 36px minmax(0, 1fr) auto; } .db2 .db2-req__wait { grid-column: 3; grid-row: 1; } .db2 .db2-req__price { grid-column: 2; grid-row: 2; } .db2 .db2-req__acts { grid-column: 1 / -1; } }
@media (max-width: 700px) { .db2 .db2-strip { grid-template-columns: minmax(0, 1fr); } .db2-tile + .db2-tile { border-left: 0; border-top: 1px solid rgba(0,0,0,.06); } }

/* Aanvragen: overzicht rechts zolang je niets geopend hebt (vroeger het dashboard) */
.ibx-ovwrap { padding: 26px 28px 40px; overflow: auto; height: 100%; box-sizing: border-box; }
.ibx-ov__hello { margin: 0 0 18px; }
.ibx-ov__hello small { display: block; font-size: 12.5px; color: var(--muted); text-transform: capitalize; margin-bottom: 2px; }
.ibx-ov__hello h2 { margin: 0; font: 700 24px/1.2 var(--display, inherit); letter-spacing: -.01em; color: #141414; }
.ibx-ov .db2-strip { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
.ibx-ov .db2-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ibx-ov .db2-tile:hover { background: transparent; }
.ibx-ov .db-start { margin-bottom: 16px; }

/* Automatiseringen in de stijl van Documenten */
@media (min-width: 901px) { .ap-fx:has(.az2-main):not(.is-closed) { grid-template-columns: 264px minmax(0, 1fr) !important; } }
.ap-fx:has(.az2-main) .ap-fx__side { padding: 22px 16px 56px; }
.ap-fx .az2-main.ap-fx__main { padding: 52px 46px 76px !important; }
.az2-main > * { max-width: 1140px; margin-left: auto !important; margin-right: auto !important; }
.az2-main .az3-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.az2-main .az3-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 28px/1.1 var(--display, inherit); letter-spacing: -.02em; color: #141414; }
.az3-card { background: #fff; border: 1px solid rgba(0,0,0,.06) !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.18) !important; overflow: hidden; padding: 0 !important; }
.az3-table .az3-th, .az3-table .az2-row { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 190px 90px 56px 36px; align-items: center; gap: 14px; padding: 0 16px !important; }
.az3-table .az3-th { height: 44px; background: #f7f6f2; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13px; font-weight: 600; color: var(--muted); }
.az3-table .az2-rows { margin: 0 !important; padding: 0 !important; }
.az3-table .az2-row { min-height: 62px; border: 0 !important; border-top: 1px solid rgba(0,0,0,.055) !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
.az3-table .az2-row:first-child { border-top: 0 !important; }
.az3-table .az2-row:hover { background: #fbfaf7 !important; }
.az3-table .az2-row.is-off { opacity: 1; }
.az3-table .az2-row.is-off .az2-row__t b, .az3-table .az2-row.is-off .az2-chain { opacity: .5; }
.az3-table .az2-ic--c { width: 32px; height: 32px; border-radius: 9px; background: var(--c) !important; color: #fff !important; }
.az3-table .az2-ic--c .i { color: #fff !important; }
.az3-table .az2-chain { justify-self: start; }
.az3-table .az2-row__stat { font-variant-numeric: tabular-nums; font-weight: 600; color: #141414; }
.az3-alert { display: flex; align-items: center; gap: 8px; width: 100%; margin: -10px 0 16px; padding: 11px 14px; border: 0; border-radius: 10px; background: #dc2626; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.az3-alert .i { width: 15px; height: 15px; }
.az2-log.az3-card { list-style: none; margin: 0; }
.az2-log.az3-card > li { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,.055); margin: 0; border-radius: 0; background: transparent; }
.az2-log.az3-card > li:first-child { border-top: 0; }
@media (max-width: 900px) { .ap-fx .az2-main.ap-fx__main { padding: 24px 16px 60px !important; } .az3-table .az3-th { display: none !important; } .az3-table .az2-row { grid-template-columns: 34px minmax(0, 1fr) auto 36px; } .az3-table .az2-chain, .az3-table .az2-row__stat { display: none; } .az2-main .az3-head { flex-wrap: wrap; } }
.az2-main > * { width: 100%; box-sizing: border-box; }
.az3-table .az2-row__stat { text-align: left; justify-self: start; }
.az2-main .az2-tpls { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
.az2-main .az2-cats { justify-content: flex-start; }
/* Sjablonen: categorieen als tabbalk zonder gekleurde bolletjes */
.az2-main .az2-cats--page { display: inline-flex !important; flex-wrap: wrap; gap: 4px !important; width: auto !important; max-width: 100%; padding: 4px; margin-bottom: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.az2-main .az2-cats--page button { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 7px 13px !important; border-radius: 9px !important; font-size: 13.5px; font-weight: 600; color: var(--muted) !important; }
.az2-main .az2-cats--page button i { display: none !important; }
.az2-main .az2-cats--page button em { font-style: normal; margin-left: 4px; opacity: .7; }
.az2-main .az2-cats--page button:hover { color: var(--ink) !important; background: var(--soft) !important; }
.az2-main .az2-cats--page button.is-on { background: var(--ink) !important; color: #fff !important; }
.az2-main .az2-cats--page { margin-left: 0 !important; margin-right: auto !important; }

/* Bouwplek: een stap meteen verwijderen met de prullenbak naast de kaart */
.az2-nwrap { position: relative; display: flex; justify-content: center; padding: 0 54px; margin: 0 -54px; }
.az2-rm { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; box-shadow: var(--sh); }
.az2-rm .i { width: 16px; height: 16px; }
.az2-nwrap:hover .az2-rm, .az2-rm:focus-visible { opacity: 1; }
.az2-rm:hover { color: #dc2626; border-color: #dc2626; }
@media (hover: none) { .az2-rm { opacity: 1; } }
@media (max-width: 600px) { .az2-rm { left: auto; right: 8px; top: 8px; transform: none; width: 30px; height: 30px; } .az2-nwrap { padding: 0; margin: 0; } .az2-nwrap--mini { padding-right: 44px; margin-right: -44px; } .az2-nwrap--mini .az2-rm { right: 0; top: 50%; transform: translateY(-50%); } }
/* Wanneer: Meteen of Later */
.az2-time__seg { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.az2-time__seg button { border: 0; background: transparent; padding: 8px 18px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.az2-time__seg button.is-on { background: var(--ink); color: #fff; }
.az2-time__own { display: flex !important; align-items: center; gap: 8px; margin-top: 12px; }
.az2-time__own > span { font-size: 14px; font-weight: 600; }
.az2-time__own input { width: 90px !important; }
.az2-time__own select { width: auto !important; min-width: 120px; }
.az2-time .az2-check { margin-top: 12px; }
.az2-time { align-items: flex-start; } .az2-time__seg { align-self: flex-start; width: auto !important; }
.az2-time .az2-time__seg { display: flex !important; width: fit-content !important; max-width: 100%; }

/* Bouwplek: Bouwen / Geschiedenis */
.az2-etabs { display: inline-flex; gap: 4px; padding: 3px; margin-left: 14px; background: #f3f2ee; border-radius: 10px; }
.az2-etabs button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.az2-etabs button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.az2-hist { flex: 1; overflow: auto; background: var(--bg, #f5f4f0); }
.az2-hist__in { max-width: 900px; margin: 0 auto; padding: 36px 24px 60px; }
.az2-hist__load { padding: 40px; text-align: center; }
.az2-hist__in .az3-head { display: flex; align-items: center; margin-bottom: 18px; }
.az2-hist__in .az3-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 24px/1.1 var(--display, inherit); }
.az3-runs { list-style: none; }
.az3-run { border-top: 1px solid rgba(0,0,0,.055); }
.az3-run:first-child { border-top: 0; }
.az3-run > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; list-style: none; }
.az3-run > summary::-webkit-details-marker { display: none; }
.az3-run > summary:hover { background: #fbfaf7; }
.az3-run > summary .i { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.az3-run[open] > summary .i { transform: rotate(180deg); }
.az3-run__who b { display: block; font-size: 14px; }
.az3-run__who small, .az3-run__why { font-size: 12.5px; color: var(--muted); }
.az3-st { font-style: normal; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: #6b7280; white-space: nowrap; }
.az3-st.is-ok { background: #16a34a; } .az3-st.is-wait { background: #2563eb; } .az3-st.is-bad { background: #dc2626; } .az3-st.is-off { background: #6b7280; }
.az3-run ol { list-style: none; margin: 0; padding: 4px 16px 14px 16px; border-top: 1px dashed rgba(0,0,0,.06); }
.az3-run li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 6px 0; font-size: 13px; }
.az3-run li time { color: var(--muted); font-variant-numeric: tabular-nums; }
.az3-run li.is-bad span { color: #dc2626; font-weight: 600; }
.az2-hist__note { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.az2-hist__note .i { width: 14px; height: 14px; }
.az2-stopclose { margin-top: 10px; }
.az2-stopclose small { display: block; margin-top: 2px; line-height: 1.45; }
@media (max-width: 700px) { .az2-etabs { margin-left: 6px; } .az3-run > summary { grid-template-columns: minmax(0, 1fr) auto 16px; } .az3-run__why { display: none; } .az3-run li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Bouwplek: vertakking (Ja hieronder verder, Nee met eigen stappen) */
.az2-mini.is-logic { background: #fff; border-color: #141414; }
.az2-fork { position: relative; display: grid; grid-template-columns: 400px 340px; gap: 56px; transform: translateX(198px); margin-top: 6px; }
.az2-fork__yes { position: relative; display: flex; justify-content: center; }
.az2-fork__yes::before { content: ""; position: absolute; top: 0; bottom: -10px; left: 50%; width: 2px; background: var(--line-2, #d9d5cc); transform: translateX(-1px); }
.az2-fork__no { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 30px; }
.az2-fork__no::before { content: ""; position: absolute; top: 12px; left: -256px; width: calc(256px + 50%); height: 2px; background: var(--line-2, #d9d5cc); }
.az2-fork__no::after { content: ""; position: absolute; top: 12px; left: 50%; width: 2px; height: 18px; background: var(--line-2, #d9d5cc); transform: translateX(-1px); }
.az2-fork__tag { position: relative; z-index: 1; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; }
.az2-fork__tag.is-yes { background: #16a34a; margin-top: 4px; }
.az2-fork__tag.is-no { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); background: #dc2626; }
.az2-fork__no .az2-nwrap .az2-node, .az2-fork__no .az2-node--sm { width: 340px; }
.az2-node--sm { min-height: 60px; }
.az2-fork__no > .az2-link:first-of-type { display: none; }
/* Voorwaarden */
.az2-rules { display: flex; flex-direction: column; gap: 10px; }
.az2-rules__h { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.az2-r { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.az2-r__join { align-self: flex-start; margin: -2px 0 2px; border: 0; background: #141414; color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 8px; cursor: pointer; }
.az2-r__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.az2-r__row .ap-in, .az2-r__val .ap-in { height: 38px; font-size: 13.5px; }
.az2-r__val { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.az2-r__val:empty { display: none; }
.az2-r__n { width: 140px; }
.az2-r__and { font-size: 13px; color: var(--muted); }
.az2-r__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.az2-chip2 { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.az2-chip2.is-on { background: #141414; border-color: #141414; color: #fff; }
.az2-nohint { display: flex; gap: 6px; align-items: flex-start; }
.az2-nohint .i { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.az2-seg3 { flex-wrap: wrap; }
@media (max-width: 800px) { .az2-fork { grid-template-columns: minmax(0, 1fr); transform: none; gap: 10px; width: min(400px, calc(100vw - 48px)); } .az2-fork__no::before { display: none; } .az2-fork__no { padding: 30px 12px 6px; border: 1px dashed #dc2626; border-radius: 14px; } .az2-fork__no .az2-nwrap .az2-node, .az2-fork__no .az2-node--sm { width: 100%; } }
.az2-fork__yes { align-items: flex-start; }
.az2-fork__tag { height: auto; line-height: 1.4; align-self: flex-start; }
.az2-fork__yes .az2-fork__tag { align-self: flex-start; }
.az2-mini { max-width: min(400px, calc(100vw - 48px)); }
.az2-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Bouwplek: samenvatting, controle en testen */
.az2-sum { position: absolute; z-index: 3; top: 14px; left: 14px; max-width: min(560px, calc(100% - 28px)); padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh); font-size: 13px; line-height: 1.5; color: var(--text); pointer-events: auto; }
.az2-sum b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.az2-check-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; white-space: nowrap; }
.az2-check-btn .i { width: 14px; height: 14px; }
.az2-check-btn.is-ok { background: #16a34a; } .az2-check-btn.is-warn { background: #d97706; } .az2-check-btn.is-err { background: #dc2626; }
.az2-issues { max-width: 380px; }
.az2-issues button { align-items: flex-start !important; white-space: normal !important; text-align: left; }
.az2-issues button b { font-weight: 500 !important; line-height: 1.45; }
.az2-issues button.is-err .i { color: #dc2626; } .az2-issues button.is-warn .i { color: #d97706; }
.az2-issues__ok { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; font-size: 13.5px; }
.az2-issues__ok .i { color: #16a34a; width: 16px; height: 16px; }
.az2-test { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.az2-test > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid rgba(0,0,0,.06); }
.az2-test > li:first-child { border-top: 0; }
.az2-test__ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #16a34a; color: #fff; }
.az2-test__ic .i { width: 15px; height: 15px; }
.az2-test > li.is-wait .az2-test__ic, .az2-test > li.is-trigger .az2-test__ic, .az2-test > li.is-branch .az2-test__ic { background: #141414; }
.az2-test > li.is-bad .az2-test__ic, .az2-test > li.is-stop .az2-test__ic { background: #dc2626; }
.az2-test > li.is-note .az2-test__ic { background: #6b7280; }
.az2-test b { display: block; font-size: 13.5px; line-height: 1.4; }
.az2-test small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.az2-test p { margin: 4px 0 0; font-size: 12.5px; color: var(--text); white-space: pre-line; background: #f7f6f2; border-radius: 8px; padding: 8px 10px; }
.az2-test p.az2-test__bad { background: #dc2626; color: #fff; font-weight: 600; }
.az2-test__rows { list-style: none; margin: 6px 0 0; padding: 0; }
.az2-test__rows li { display: flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 2px 0; }
.az2-test__rows .i { width: 13px; height: 13px; color: #16a34a; }
.az2-test__rows li.is-bad .i { color: #dc2626; }
.az3-table .az2-row__stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.az3-table .az2-row__stat small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
@media (max-width: 800px) { .az2-sum { display: none; } .az2-check-btn { padding: 0 9px; } .az2-check-btn:not(.is-err) { font-size: 0; gap: 0; } }
.az2-sum { top: auto; bottom: 14px; max-width: min(460px, calc(100% - 200px)); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: default; }
.az2-sum:hover { -webkit-line-clamp: unset; }
.az2-test__rows b { display: inline !important; font-size: 12.5px !important; }
.az2-test__rows span { line-height: 1.45; }
.az2-sum { display: block; -webkit-line-clamp: unset; max-height: none; } .az2-sum span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .az2-sum:hover span { -webkit-line-clamp: unset; }
@media (min-width: 761px) { .dx-items__head, .dx-items__row { grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr) 210px 130px 84px 36px; } }
.dx-items__row .ap-money { position: relative; display: block; } .dx-items__row .ap-money > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); pointer-events: none; } .dx-items__row .ap-money input { padding-left: 24px !important; width: 100%; }

/* Prijslijst in de stijl van Documenten */
@media (min-width: 901px) { .ap-fx:has(.pl-main):not(.is-closed) { grid-template-columns: 264px minmax(0, 1fr) !important; } }
.ap-fx:has(.pl-main) .ap-fx__side { padding: 22px 16px 56px; }
.ap-fx .pl-main.ap-fx__main { padding: 52px 46px 76px !important; }
.pl-main > * { max-width: 1140px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.pl-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 28px/1.1 var(--display, inherit); letter-spacing: -.02em; color: #141414; }
.pl-intro { margin: 0 auto 22px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pl-nav__h { margin: 16px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint, #9a958a); }
.pl-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -24px rgba(0,0,0,.18); overflow: hidden; }
.pl-th, .pl-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px 150px 84px 112px; gap: 12px; align-items: center; padding: 0 16px; }
.pl-th { height: 44px; background: #f7f6f2; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13px; font-weight: 600; color: var(--muted); }
.pl-row { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid rgba(0,0,0,.055); align-items: start; }
.pl-row:first-of-type { border-top: 0; }
.pl-row .ap-in { height: 38px; font-size: 13.5px; }
.pl-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-name b { font-size: 14px; color: #141414; padding-top: 2px; }
.pl-name small { font-size: 12.5px; color: var(--muted); }
.pl-name--edit .pl-desc { height: 32px !important; font-size: 12.5px !important; }
.pl-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #141414; color: #fff; font-size: 11.5px; font-weight: 600; }
.pl-tag .i { width: 12px; height: 12px; }
.pl-unit { font-size: 13.5px; padding-top: 9px; }
.pl-price { display: flex; flex-direction: column; padding-top: 6px; }
.pl-price b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pl-price small { font-size: 12px; color: var(--muted); }
.pl-money { position: relative; display: block; }
.pl-money > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); pointer-events: none; }
.pl-money input { padding-left: 24px !important; width: 100%; }
.pl-go { justify-self: end; white-space: nowrap; }
.pl-del { justify-self: end; margin-top: 4px; }
.pl-row.is-calc { background: #fbfaf7; }
.pl-empty { display: flex; gap: 14px; align-items: flex-start; padding: 22px; background: #fff; border: 1px dashed rgba(0,0,0,.14); border-radius: 14px; }
.pl-empty > .i { width: 22px; height: 22px; color: var(--y-deep, #e8a317); flex: none; }
.pl-empty b { font-size: 15px; }
.pl-empty p { margin: 4px 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) { .ap-fx .pl-main.ap-fx__main { padding: 24px 16px 60px !important; } .pl-th { display: none; } .pl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pl-name { grid-column: 1 / -1; } .pl-go, .pl-del { justify-self: start; } }

/* Prijslijst: rustige velden (kader pas bij aanwijzen of typen), groep als eigen kolom */
.pl-th, .pl-row { grid-template-columns: minmax(0, 1fr) 150px 150px 130px 80px 112px; }
.pl-row { align-items: center; }
.pl-inl { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; color: var(--ink); padding: 5px 8px; margin-left: -8px; transition: border-color .12s, background .12s; }
.pl-inl:hover { border-color: var(--line); background: #fff; }
.pl-inl:focus { outline: none; border-color: #141414; background: #fff; }
.pl-inl--b { font-size: 14px; font-weight: 600; }
.pl-inl--s { font-size: 12.5px; color: var(--muted); padding-top: 2px; padding-bottom: 2px; }
.pl-inl--g { font-size: 13px; }
.pl-inl::placeholder { color: #b9b4a8; }
.pl-name--edit { gap: 0; }
.pl-grp { font-size: 13px; color: var(--muted); }
.pl-unit, .pl-price { padding-top: 0; }
.pl-del { margin-top: 0; }
@media (max-width: 900px) { .pl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pl-inl--g, .pl-grp { grid-column: 1 / -1; } }

.pl-th, .pl-row { grid-template-columns: minmax(0, 1fr) 150px 120px 80px 112px; }
.pl-sub { display: flex; gap: 6px; align-items: center; }
.pl-sub .pl-inl--s { flex: 1 1 auto; }
.pl-sub .pl-inl--g { flex: 0 0 130px; margin-left: 0; }
@media (max-width: 900px) { .pl-sub { flex-wrap: wrap; } .pl-sub .pl-inl--g { flex: 1 1 100%; margin-left: -8px; } }

/* Prijslijst: één pagina, één lijst */
.pl-one .pl-main { padding: 40px 32px 76px; }
.pl-search { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; min-width: 240px; }
.pl-search .i { width: 16px; height: 16px; color: var(--muted); }
.pl-search input { border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; width: 100%; }
.pl-head .dl2-acts { display: flex; gap: 10px; align-items: center; }
@media (max-width: 900px) { .pl-one .pl-main { padding: 24px 16px 60px; } .pl-head { flex-wrap: wrap; } .pl-head .dl2-acts { width: 100%; } .pl-search { flex: 1; min-width: 0; } }

/* Calculators: echte preview bovenaan elke kaart */
.cl-prev { position: relative; overflow: hidden; background: #f3f2ee; aspect-ratio: 16 / 10; height: auto !important; }
.cl-prev iframe { position: absolute; top: 0; left: 0; width: 1200px; height: 750px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.cl-prev__link { position: absolute; inset: 0; z-index: 1; }
.cl-prev__open { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #141414; color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; opacity: 0; transition: opacity .15s; }
.cl-prev__open .i { width: 14px; height: 14px; }
.cl-card:hover .cl-prev__open, .cl-prev__open:focus-visible { opacity: 1; }
@media (hover: none) { .cl-prev__open { opacity: 1; } }
.cl-prev iframe { width: 720px; height: 450px; }

/* Vragen: soort prijs als keuzelijst onder elk antwoord */
.ap-ptype { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ap-ptype > span { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ap-ptype select { max-width: 260px; height: 38px; font-size: 13.5px; }
.rc__rec { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 0; font-size: 13px; }
.rc__rec span { color: var(--muted); }

/* Vragen: prijs onder elk antwoord, over de volle breedte */
.ws .ap-orow--stack { display: grid; grid-template-columns: 20px 48px minmax(0, 1fr) 32px; grid-template-areas: "grip thumb main del" ". price price price"; row-gap: 10px; align-items: center; }
.ws .ap-orow--stack > .ap-grip { grid-area: grip; } .ws .ap-orow--stack > .ap-othumb { grid-area: thumb; } .ws .ap-orow--stack > .ap-orow__main { grid-area: main; min-width: 0; } .ws .ap-orow--stack > .ap-orow__del { grid-area: del; }
.ws .ap-orow--stack > .ap-orow__price { grid-area: price; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f7f6f2; }
.ws .ap-orow--stack.is-noprice > .ap-orow__price { display: none; }
.ws .ap-orow__price .ap-pf__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.ws .ap-pf .pz-step { width: auto; height: 38px; }
.ws .ap-pf .pz-step output { min-width: 130px; text-align: center; }

.ws .ap-ptype select { max-width: none; width: 280px; }

/* Vragen: basisprijs bij de grootte-vraag */
.ap-base { margin-top: 14px; border: 1px solid #f3dc9e; background: #fffbef; }
.ap-base .ap-pf__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 10px; }
.ap-opthead { display: flex; align-items: center; gap: 12px; }
.ap-opthead .ap-szauto { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.ap-opthead .ap-szauto .i { width: 14px; height: 14px; }

.ws .ap-orow__price:has(.ap-autoprice) { flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px; }
.ws .ap-orow__price .ap-autoprice { display: inline-block; width: auto; padding: 7px 12px; font-weight: 700; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.ws .ap-orow__price:has(.ap-autoprice) .ap-pf { flex-direction: row; align-items: center; gap: 10px; }
.ws .ap-orow__price:has(.ap-autoprice) .ap-pf__note { text-align: left; }

.ap-base--svc { margin: 16px 0; }
.ap-base--svc h3 small { font-size: 12px; font-weight: 500; margin-left: 6px; }

/* Prijs onder een antwoord: één rustige regel */
.ws .ap-orow--stack > .ap-orow__price { display: block; padding: 0; background: transparent; border-radius: 0; }
.ap-pl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ap-pl .ap-in { height: 34px; font-size: 13.5px; }
.ap-pl__sel { width: 190px !important; }
.ap-pl__of { width: auto !important; max-width: 200px; }
.ap-money--c { position: relative; display: inline-block; width: 96px; flex: none; }
.ap-money--c > i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: var(--muted); pointer-events: none; }
.ap-money--c input { width: 100% !important; padding-left: 22px !important; height: 34px; }
.ap-pl__d, .ap-pl__plus { color: var(--muted); font-size: 13px; }
.ap-pl__u { font-size: 13px; color: var(--muted); }
.ap-pl__k { font-size: 13px; color: var(--muted); }
.ap-pl__warn { font-size: 12.5px; color: #dc2626; font-weight: 600; }
.ap-pl .ap-autoprice { padding: 0; border: 0; background: transparent; font-weight: 700; font-size: 13.5px; }
.ap-pl__step { height: 34px; }
.ap-pl__step button { width: 32px; }
.ws .ap-orow__price:has(.ap-autoprice) { padding: 0; }
/* Basisprijs en startprijs: één regel */
.ap-baseline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ap-baseline > b { font-size: 14px; margin-right: 6px; }
.ap-baseline .ap-in { height: 34px; }

/* Antwoord en prijs naast elkaar op één regel */
.ws .ap-orow--stack { grid-template-columns: 20px 48px minmax(160px, 1fr) auto 32px; grid-template-areas: "grip thumb main price del"; column-gap: 12px; }
.ws .ap-orow--stack > .ap-orow__price { display: flex; justify-content: flex-end; }
.ap-pl { justify-content: flex-end; }
.ap-pl .ap-in, .ap-pl__sel { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 32px; }
.ap-pl__sel { padding-left: 10px !important; padding-right: 28px !important; width: 180px !important; }
.ap-pl__step { display: inline-flex; align-items: center; width: auto !important; height: 34px; overflow: hidden; }
.ap-pl__step button { width: 32px; height: 100%; border: 0; background: transparent; font-size: 16px; cursor: pointer; }
.ap-pl__step output { min-width: 112px; padding: 0 6px; text-align: center; font-size: 13px; font-weight: 600; }
@media (max-width: 900px) {
  .ws .ap-orow--stack { grid-template-columns: 20px 48px minmax(0, 1fr) 32px; grid-template-areas: "grip thumb main del" ". price price price"; }
  .ws .ap-orow--stack > .ap-orow__price, .ap-pl { justify-content: flex-start; }
}

@media (min-width: 901px) { .ap-pl { flex-wrap: nowrap; white-space: nowrap; } .ws .ap-orow--stack > .ap-orow__price { min-width: 0; } }

/* Prijs per antwoord: leest als een zin */
.ap-pl__sel { width: 250px !important; }
.ap-pl__k { font-weight: 600; color: var(--text, #1a1a1a); margin-right: 2px; }
.ap-pl__step output b { font-weight: 700; }

/* Vragenlijst links: breder, elke vraag op 1 regel */
@media (min-width: 1101px) { .ws .ap-q { grid-template-columns: 360px minmax(0, 1fr); } }
.ws .ap-tree__q > button { width: 100%; align-items: center; }
.ws .ap-tree__q > button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }

.ws .ap-pl select.ap-pl__sel { width: 270px !important; max-width: none; flex: none; }
@media (min-width: 1101px) { .ws .ap-q { grid-template-columns: 400px minmax(0, 1fr); } }

/* Grootte-vraag: manieren als aan/uit-tegels */
.qw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qw__o { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; user-select: none; }
.qw__o input { position: absolute; opacity: 0; pointer-events: none; }
.qw__o b { font-weight: 600; }
.qw__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--sunken, #f3f2ee); color: var(--muted); }
.qw__ic .i { width: 15px; height: 15px; }
.qw__o.is-on { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.qw__o.is-on .qw__ic { background: #111; color: #fff; }
.qw__o:focus-within { outline: 2px solid #f5b400; outline-offset: 2px; }
.ap-baseline--in { margin: 14px 0 0; padding: 0; border: 0; background: transparent; }
.ap-rate .ap-rate__row { margin-top: 14px; }

/* Grootte-vraag: groottes + één optie eronder */
.ap-extra { margin-top: 14px; }
.ap-extra .ap-baseline--in { margin-top: 14px; padding-left: 52px; }
.ap-extra .qm__tip { margin-top: 12px; }
.ap-extra .ap-rate__unit { width: 90px !important; height: 34px; }
/* Tekstvak-optie: geen kaart, gewoon een kleine regel */
.ap-qnote { margin-top: 14px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.ap-qnote .ap-switch--row b { font-size: 13.5px; font-weight: 500; color: var(--muted); }

.ap-extra .ap-switch--row + .ap-switch--row { margin-top: 12px; }
.ap-extra__why { margin: 14px 0 0 52px; }
.ap-extra .ap-baseline--in { margin-top: 8px; }

.ap-extra { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 20px !important; }
.ap-extra > .ap-switch--row { display: flex; margin: 0 !important; }
.ap-extra .ap-extra__why, .ap-extra .ap-baseline--in, .ap-extra .qm__tip { margin: 0 !important; }
.ap-extra .ap-extra__why { padding-left: 52px; margin-top: 4px !important; }

.ap-extra { margin: 0 0 22px; }

/* Dienst: grote foto bovenaan, naam eronder */
.ws .ap-svcform { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.ws .ap-svcform .ap-photo { width: 100%; height: auto; aspect-ratio: 16 / 6; max-height: 260px; border-radius: 14px; }
.ws .ap-svcform .ap-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Dienst: grote foto (4:3, zoals de klant ze ziet) naast de naam */
.ws .ap-svcform { flex-direction: row; align-items: center; gap: 24px; }
.ws .ap-svcform .ap-photo { width: 300px; aspect-ratio: 4 / 3; max-height: none; height: auto; }
@media (max-width: 900px) { .ws .ap-svcform { flex-direction: column; align-items: stretch; } .ws .ap-svcform .ap-photo { width: 100%; } }

/* Dienstfoto: middelgroot, scherp genoeg */
.ws .ap-svcform .ap-photo { width: 200px; }

.ap-note.ap-extra { display: flex; align-items: center; gap: 10px; padding: 14px 16px !important; }
.ap-note.ap-extra > span { flex: 1; }

/* Procent zelf intikken */
.ap-pl__pct { position: relative; display: inline-flex; align-items: center; }
.ap-pl__pct input { width: 64px !important; height: 32px !important; border: 0 !important; border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; text-align: center; padding: 0 16px 0 4px !important; font-weight: 600; background: #fff; -moz-appearance: textfield; }
.ap-pl__pct input::-webkit-outer-spin-button, .ap-pl__pct input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ap-pl__pct i { position: absolute; right: 8px; font-style: normal; font-size: 13px; color: var(--muted); pointer-events: none; }
.ws .ap-pl select.ap-pl__dir { width: 120px !important; flex: none; padding-left: 10px !important; }

/* Calculatorkaart: foto i.p.v. voorbeeldpagina */
.cl-prev__link { position: absolute; inset: 0; display: block; }
.cl-prev__link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-prev__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); background: var(--sunken, #f3f2ee); }
.cl-prev__ph .i { width: 28px; height: 28px; }
/* Cijfers: van welke calculator */
.cl-kpiw { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cl-kpisel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cl-kpisel select { width: auto !important; min-width: 200px; height: 34px; font-size: 13.5px; padding: 0 30px 0 10px !important; }
@media (max-width: 900px) { .cl-kpiw { align-items: stretch; } }

.ws .ap-qmeta:not(:has(.ap-switch)) { display: none; }

/* Vraag: antwoorden als losse kaarten + paneel rechts voor het gekozen antwoord */
@media (min-width: 1101px) { .ws .ap-q { grid-template-columns: 320px minmax(0, 1fr); } }
.ap-qgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.ap-qgrid__main { min-width: 0; }
@media (max-width: 1180px) { .ap-qgrid { grid-template-columns: minmax(0, 1fr); } .ap-aopt { position: static !important; } }
.ws .ap-olist { border: 0; border-radius: 0; overflow: visible; background: transparent; }
.ws #opts { display: flex; flex-direction: column; gap: 10px; }
.ws #opts > .ap-orow.ap-orow--stack { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 14px 14px 8px; cursor: pointer;
  grid-template-columns: 20px 48px minmax(0, 1fr) 32px; grid-template-areas: "grip thumb main del" ". price price price"; row-gap: 12px; transition: border-color .15s, box-shadow .15s; }
.ws #opts > .ap-orow.ap-orow--stack:hover { border-color: #cfccc4; }
.ws #opts > .ap-orow.ap-orow--stack.is-sel { border-color: #111; box-shadow: 0 0 0 1px #111; }
.ws #opts > .ap-orow--stack > .ap-orow__price { justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--line); cursor: default; }
.ws #opts .ap-pl { justify-content: flex-start; }
.ws .ap-orow__d { font-size: 12.5px; color: var(--muted); padding-left: 2px; }
.ws .ap-olist__add { margin-top: 10px; border: 1px dashed var(--line-2, #d9d5cb); border-radius: 14px; background: transparent; }
.ap-aopt { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ap-aopt__k { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ap-aopt__f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.ap-aopt__f small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.ap-aopt__f textarea { resize: vertical; min-height: 70px; font: inherit; font-weight: 400; padding: 8px 10px; }
.ap-aopt__img { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sunken, #f3f2ee); }
.ap-aopt__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-aopt__img > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.ap-aopt__img > b { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: 13.5px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.ap-aopt__img:not(:has(img)) > b { display: none; }
.ap-aopt__acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-aopt__rm { color: #dc2626 !important; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.ap-aopt__rm .i { width: 14px; height: 14px; }

.ws #opts .ap-orow__del { opacity: 1 !important; visibility: visible !important; color: #b4b0a6; align-self: start; }
.ws #opts .ap-orow__del:hover { color: #dc2626; }

/* Paneel "Antwoord": tabs Foto / Uitleg */
.ap-aopt { gap: 12px; }
.ap-aopt__head { display: flex; flex-direction: column; gap: 4px; }
.ap-aopt__sub { margin: 0; font-size: 13px; color: var(--muted); }
.ap-aopt__tabs { display: flex; gap: 22px; margin-top: 4px; border-bottom: 1px solid var(--line); }
.ap-aopt__tabs button { padding: 8px 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ap-aopt__tabs button.is-on { color: var(--ink, #111); border-bottom-color: var(--ink, #111); }
.ap-aopt__help { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.ap-aopt__pick { width: 100%; justify-content: center; }
.ap-btn--dark { background: #111; color: #fff; border: 1px solid #111; }
.ap-btn--dark:hover { background: #2a2a2a; }
.ap-aopt__cap { margin: 4px 0 0; font-size: 12.5px; font-style: italic; color: var(--muted); text-align: center; }
.ap-aopt__card { width: 78%; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.ap-aopt__card .ap-aopt__img { border-radius: 0; }
.ap-aopt__lbl { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 13px; }
.ap-aopt__lbl i { width: 14px; height: 14px; flex: none; border: 1.5px solid #9a968c; border-radius: 50%; }
.ap-aopt__lbl b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-aopt__rm { align-self: center; }
.ap-aopt__note { font-weight: 400; font-size: 12px; color: var(--muted); line-height: 1.4; }
.ap-aopt__acts { display: none; }

/* Paneel: AI-knop, teller, stijl */
.ap-aopt__pick + .ap-aopt__pick { margin-top: -4px; }
.ap-aopt__use { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: -2px 0 0; padding: 5px 10px; border-radius: 999px; background: #f1f0ec; font-size: 12px; color: var(--muted); }
.ap-aopt__use .i { width: 13px; height: 13px; }
.ap-aopt__card { position: relative; }
.ap-aopt__card.is-ov .ap-aopt__lbl { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 26px; color: #fff; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.72)); justify-content: center; }
.ap-aopt__card.is-ov .ap-aopt__lbl i { border-color: currentColor; }
.ap-aopt__card.is-ov--light .ap-aopt__lbl { color: #111; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.94)); }
.ap-aopt__radios { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 400; font-size: 13.5px; }
.ap-aopt__radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* Vraag-opties / antwoord-opties (paneel rechts) */
.ap-aopt__q, .ap-aopt__a { display: flex; flex-direction: column; gap: 12px; }
.ap-aopt__q[hidden], .ap-aopt__a[hidden], .ap-aopt__pane[hidden] { display: none !important; }
.ap-aopt__pane { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.ap-aopt__tabs { gap: 18px; overflow-x: auto; }
.ap-aopt__tabs button { white-space: nowrap; }
.ap-aopt__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.ap-aopt__back .i { width: 14px; height: 14px; transform: rotate(180deg); }
.ap-aopt__back:hover { color: var(--ink, #111); }
.ap-aopt__cond { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: #f6f5f1; }
.ap-aopt__cond > b { font-size: 14px; }
.ap-aopt__cond .ap-logic { margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.ap-aopt__cond .ap-logic > h3 { display: none; }
.ap-aopt [data-slot="vid"] .ap-vidbox { margin: 0; }
.ap-aopt [data-slot="num"] .ap-extra { margin: 4px 0 0 !important; padding: 14px !important; border-radius: 12px; }
.ap-aopt [data-slot="num"] .ap-extra .ap-baseline--in { padding-left: 0; flex-wrap: wrap; }
.ap-ck { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; }
.ap-ck input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #111; flex: none; }
.ap-ck span { display: flex; flex-direction: column; gap: 2px; }
.ap-ck b { font-size: 14px; font-weight: 600; }
.ap-ck small { font-size: 12.5px; color: var(--muted); }
.ap-ck + .ap-ck { border-top: 1px dashed var(--line); padding-top: 12px; }
/* Prijsvelden met label erboven */
.ws #opts .ap-pl { align-items: flex-end; gap: 10px; }
.ap-plf { display: inline-flex; flex-direction: column; gap: 5px; }
.ap-plf > small { font-size: 12px; font-weight: 600; color: var(--ink-2, #3a3a3a); }
.ws #opts .ap-pl__k, .ws #opts .ap-pl__d { display: none; }
.ws #opts .ap-pl__u, .ws #opts .ap-pl__plus { padding-bottom: 8px; }
.ws #opts .ap-pl select.ap-pl__sel { width: 230px !important; }
.ws #opts .ap-money--c { width: 120px; }

.ap-aopt [data-slot="vid"] .ap-field__l, .ap-aopt [data-slot="vid"] .ap-field__h { display: none; }
.ap-aopt [data-slot="vid"] .ap-video__in { display: flex; gap: 6px; }
.ap-aopt [data-slot="vid"] .ap-video__in .ap-in { flex: 1; min-width: 0; font-size: 13.5px; }
.ap-aopt__cond .ap-logic h3 { display: none !important; }
.ap-aopt__cond .ap-switch--row b { font-size: 13.5px; }
.ws #opts .ap-pl select.ap-pl__sel { width: 270px !important; }

/* ===== Vragen-editor: alles netjes uitgelijnd ===== */
/* Kaart: bovenste rij (foto, naam, vuilbak) op één lijn, prijsrij precies onder de foto */
.ws #opts > .ap-orow.ap-orow--stack { grid-template-columns: 18px 48px minmax(0, 1fr) 32px; column-gap: 14px; padding: 14px 16px 16px 10px; align-items: center; }
.ws #opts > .ap-orow--stack > .ap-grip { align-self: center; }
.ws #opts > .ap-orow--stack > .ap-orow__del { align-self: center; justify-self: end; }
.ws #opts > .ap-orow--stack > .ap-othumb { width: 48px; height: 48px; }
.ws #opts > .ap-orow--stack > .ap-orow__main { justify-content: center; min-height: 48px; }
.ws #opts > .ap-orow--stack > .ap-orow__price { grid-column: 2 / -1; padding-top: 14px; }
/* Prijsvelden: even brede kolommen, labels op één lijn */
.ws #opts .ap-pl { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 12px; width: 100%; }
.ws #opts .ap-plf { flex: 1 1 0; min-width: 0; }
.ws #opts .ap-plf:first-of-type { flex: 1.4 1 0; }
.ws #opts .ap-pl select.ap-pl__sel, .ws #opts .ap-pl select.ap-pl__dir { width: 100% !important; }
.ws #opts .ap-plf .ap-money--c { width: 100%; }
.ws #opts .ap-plf .ap-pl__step { width: 100% !important; display: flex; }
.ws #opts .ap-plf .ap-pl__step .ap-pl__pct { flex: 1; }
.ws #opts .ap-plf .ap-pl__step .ap-pl__pct input { width: 100% !important; }
.ws #opts .ap-pl .ap-in, .ws #opts .ap-pl__step { height: 38px !important; }
.ws #opts .ap-money--c input { height: 38px !important; }
.ws #opts .ap-pl__u, .ws #opts .ap-pl__plus { flex: none; padding-bottom: 10px; white-space: nowrap; }
.ws #opts .ap-pl__warn { flex: none; align-self: center; }
@media (max-width: 900px) { .ws #opts .ap-pl { flex-wrap: wrap; } .ws #opts .ap-plf { flex: 1 1 140px; } }
/* Midden: rustige vraagkop */
.ws .ap-qgrid__main .ap-qhelp:placeholder-shown { display: none; }
.ws .ap-qgrid__main .ap-qtitle { margin-bottom: 4px; }
.ws .ap-qgrid__main .ap-qhelp { margin-bottom: 0; }
.ws .ap-qgrid__main .ap-opthead { margin-top: 24px; }
.ws .ap-qgrid__main .ap-pmode__hint { margin: 4px 0 14px; }
/* Paneel: alles op dezelfde linkerlijn, gelijke afstanden */
.ap-aopt { padding: 20px; gap: 0; }
.ap-aopt__q, .ap-aopt__a, .ap-aopt__pane { gap: 16px; }
.ap-aopt__note, .ap-aopt__help, .ap-aopt__sub { margin: 0 !important; padding: 0 !important; text-indent: 0; }
.ap-aopt__f { gap: 4px; }
.ap-aopt__f > .ap-in, .ap-aopt__f > textarea, .ap-aopt__f > .ap-aopt__radios { margin-top: 4px; }
.ap-aopt__f > span { font-size: 13.5px; }
.ap-aopt__tabs { margin: 0; }
.ap-aopt__tabs button { padding: 10px 0; }
.ap-aopt .ap-in { height: 40px; font-size: 14px; }
.ap-aopt textarea.ap-in { height: auto; }
.ap-aopt__pick { height: 40px; }
.ap-aopt__cond, .ap-aopt [data-slot="num"] .ap-extra { padding: 16px !important; }
.ap-aopt [data-slot="num"] .ap-extra .ap-switch--row { gap: 12px; }
.ap-aopt__card { width: 100%; }

.ws #opts .ap-plf:first-of-type { flex: 1 1 0; }
.ws #opts .ap-plf:has(select[data-pk]) { flex: 1.6 1 0; }

/* Stijl van de foto: drie gelijke knoppen naast elkaar */
.ap-aopt__radios { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px !important; margin: 6px 0 0 !important; padding: 0; }
.ap-aopt__radios label { position: relative; display: flex !important; align-items: center; justify-content: center; height: 38px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; color: var(--ink-2, #3a3a3a); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.ap-aopt__radios label:hover { border-color: #cfccc4; }
.ap-aopt__radios input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ap-aopt__radios label:has(input:checked) { border-color: #111; background: #111; color: #fff; }
.ap-aopt__radios label:has(input:focus-visible) { outline: 2px solid #f5b400; outline-offset: 2px; }
/* Hulpteksten en velden in het paneel: dezelfde linkerlijn */
.ap-aopt__f, .ap-aopt__f > * { margin-left: 0 !important; padding-left: 0; }
.ap-aopt__f > .ap-in, .ap-aopt__f > textarea { padding-left: 12px !important; }
.ap-aopt__f .ap-aopt__note { display: block; }
.ap-aopt__rm { margin: -4px 0 0; }

/* Geen gele focusrand rond de stijlknoppen */
.ap-aopt__radios label, .ap-aopt__radios label:has(input:focus-visible), .ap-aopt__radios label:focus-within, .ap-aopt__radios input:focus, .ap-aopt__radios input:focus-visible { outline: none !important; box-shadow: none !important; }

/* Vraag-opties: getal, tekstblok, voorwaarden */
.ap-aopt__sub2 { display: flex; flex-direction: column; gap: 12px; margin: -4px 0 4px 28px; }
.ap-aopt__two { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ap-aopt__two .ap-money--c { flex: 1; width: auto; }
.ap-aopt__up { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.ap-aopt__up .i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #16a34a; }
.ap-aopt__up a { color: var(--ink, #111); text-decoration: underline; }
.ap-aopt__ex { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-2, #3a3a3a); }
.ap-aopt__ex ol { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ap-aopt__ex li { line-height: 1.45; color: var(--muted); }
.ap-aopt__ck-off { opacity: .5; }
.ap-qgrid__main.is-info .ap-olist, .ap-qgrid__main.is-info .ap-opthead, .ap-qgrid__main.is-info .ap-pmode__hint { display: none !important; }
.ap-infonote { margin-top: 18px; }

.ap-aopt__tabs { justify-content: space-between; gap: 8px; overflow: visible; }
.ap-aopt__tabs button { font-size: 13.5px; }
.ap-aopt [data-slot="num"]:empty { display: none; }
.ap-aopt__pane > .ap-ck ~ .ap-ck { border-top: 1px dashed var(--line); padding-top: 12px; }

/* Toeklappen: vragenlijst links en opties rechts */
.ws .ap-q { position: relative; }
.ap-fold { position: absolute; z-index: 4; top: 64px; display: grid; place-items: center; width: 22px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: color .15s, border-color .15s; }
.ap-fold:hover { color: var(--ink, #111); border-color: #cfccc4; }
.ap-fold--l { left: calc(320px + 8px - 11px); }
.ws .ap-q.is-foldl { grid-template-columns: 0 minmax(0, 1fr) !important; }
.ws .ap-q.is-foldl > .ap-tree { display: none; }
.ws .ap-q.is-foldl > .ap-fold--l { left: -4px; }
.ap-qgrid { position: relative; }
.ap-fold--r { right: calc(300px + 12px - 11px); top: 40px; }
.ap-qgrid.is-foldr { grid-template-columns: minmax(0, 1fr) 0; column-gap: 0; }
.ap-qgrid.is-foldr > .ap-aopt { display: none; }
.ap-qgrid.is-foldr > .ap-fold--r { right: -18px; }
@media (max-width: 1180px) { .ap-fold--r { display: none; } .ap-qgrid.is-foldr > .ap-aopt { display: flex; } }
@media (max-width: 1100px) { .ap-fold--l { display: none; } .ws .ap-q.is-foldl > .ap-tree { display: block; } }

/* Getalveld: eenheid, grenzen, kaart */
.ap-aopt__mini { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ap-aopt__mini > small { font-size: 12px; font-weight: 600; color: var(--ink-2, #3a3a3a); }
.ap-aopt__mini .ap-in:disabled, .ap-aopt .ap-in:disabled { background: #f1f0ec; color: var(--muted); cursor: not-allowed; }
.ap-aopt__sep { height: 0; border-top: 1px dashed var(--line); margin: 2px 0; }
.ap-aopt__chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ap-aopt__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.ap-aopt__chips .i { width: 13px; height: 13px; }
.ap-aopt__chips .is-ok { background: #e9f7ee; color: #166534; }
.ap-aopt__chips .is-no { background: #fdecec; color: #991b1b; }
.ap-aopt__pane > .ap-aopt__sep + .ap-ck { border-top: 0 !important; padding-top: 4px !important; }
/* Toeklappen links: het midden schuift netjes naar links */
.ws .ap-q.is-foldl > .ap-qed { grid-column: 2; }

/* ===== Paneel rechts: ruimer, alles op één lijn ===== */
.ap-qgrid { grid-template-columns: minmax(0, 1fr) 360px; }
.ap-fold--r { right: calc(360px + 12px - 11px); }
.ap-qgrid.is-foldr { grid-template-columns: minmax(0, 1fr) 0; }
.ap-aopt { padding: 24px 24px 28px; }
.ap-aopt__q, .ap-aopt__a { gap: 18px; }
.ap-aopt__pane { gap: 22px; padding-top: 6px; }
.ap-aopt__head { gap: 6px; }
.ap-aopt__k { font-size: 12px; }
.ap-aopt__sub, .ap-aopt__help { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ap-aopt__tabs button { font-size: 14px; padding: 12px 0; }
/* Velden: label, hulptekst, invoer, met vaste afstanden */
.ap-aopt__f { gap: 6px; }
.ap-aopt__f > span { font-size: 14.5px; font-weight: 600; color: var(--ink, #111); }
.ap-aopt__note { font-size: 13px !important; line-height: 1.45; color: var(--muted); }
.ap-aopt__f > .ap-in, .ap-aopt__f > textarea, .ap-aopt__f > select { margin-top: 4px; }
.ap-aopt .ap-in { height: 44px; font-size: 14.5px; border-radius: 10px; }
.ap-aopt textarea.ap-in { height: auto; min-height: 96px; padding-top: 10px !important; }
/* Onderdelen onder een vinkje: volle breedte, niet ingesprongen */
.ap-aopt__sub2 { margin: 0 !important; gap: 20px; }
.ap-aopt__mini { gap: 6px; margin-top: 10px; }
.ap-aopt__mini > small { font-size: 12.5px; }
.ap-aopt__two { gap: 10px; margin-top: 4px; }
.ap-aopt__two .ap-money--c input { height: 44px !important; }
/* Vinkjes: vak links, tekst ernaast, uitleg eronder op dezelfde lijn */
.ap-ck { gap: 14px; padding: 0 !important; border-top: 0 !important; }
.ap-ck input { width: 20px; height: 20px; margin-top: 1px; border-radius: 5px; }
.ap-ck b { font-size: 14.5px; }
.ap-ck small { font-size: 13px; line-height: 1.45; margin-top: 4px; }
.ap-aopt__pane > .ap-ck ~ .ap-ck { border-top: 0; padding-top: 0; }
.ap-aopt__sep { margin: 2px 0; border-top: 1px dashed var(--line); }
/* Labels onder "Woning als vertrekpunt": uitgelijnd met de tekst van het vinkje */
.ap-aopt__chips { gap: 8px; margin: -10px 0 0 34px; }
.ap-aopt__chips span { padding: 6px 12px; font-size: 13px; gap: 8px; }
.ap-aopt__chips .i { width: 15px; height: 15px; }
/* Voorwaarden-kaart en voorbeeld */
.ap-aopt__cond { padding: 18px !important; gap: 8px; }
.ap-aopt__ex { padding-top: 18px; font-size: 13.5px; }
@media (max-width: 1320px) { .ap-qgrid { grid-template-columns: minmax(0, 1fr) 320px; } .ap-fold--r { right: calc(320px + 12px - 11px); } }
@media (max-width: 1180px) { .ap-qgrid { grid-template-columns: minmax(0, 1fr); } }

/* Weergave: video en voorwaarden zoals het voorbeeld */
.ap-aopt [data-slot="vid"] .ap-video__in { flex-wrap: wrap; gap: 8px; }
.ap-aopt [data-slot="vid"] .ap-video__in .ap-in { flex: 1 1 100%; }
.ap-aopt [data-slot="vid"] .ap-video__in label.ap-btn { order: 2; }
.ap-aopt__pill { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin: -10px 0 0; padding: 7px 12px; border-radius: 999px; background: #f1f0ec; font-size: 13px; color: var(--ink-2, #3a3a3a); }
.ap-aopt__pill .i { width: 15px; height: 15px; color: var(--muted); }
.ap-aopt__cond { padding: 20px !important; gap: 10px !important; border-radius: 14px; }
.ap-aopt__cond > b { font-size: 17px; font-weight: 600; }
.ap-aopt__condbtn { align-self: flex-start; margin-top: 4px; }
.ap-aopt__condbtn:disabled { opacity: .55; cursor: not-allowed; }
.ap-aopt__up { margin-top: 6px !important; font-size: 13.5px !important; color: var(--ink-2, #3a3a3a) !important; }

/* Prijslabels altijd tonen (oude regel voor smalle schermen verborg ze) */
.ws #opts .ap-plf > small { display: block !important; }
/* Keuze: zoals het voorbeeld */
.ap-aopt__intro { display: flex; flex-direction: column; gap: 10px; }
.ap-aopt__intro .ap-aopt__help { font-size: 14.5px; line-height: 1.55; color: var(--ink-2, #3a3a3a); }
.ap-aopt__cks { display: flex; flex-direction: column; gap: 20px; margin-top: 6px; }
.ap-aopt__cks .ap-ck b { font-weight: 500; font-size: 15px; color: var(--ink-2, #3a3a3a); }
.ap-aopt__cks .ap-ck small { font-size: 13.5px; }
.ap-aopt__cks.is-off { opacity: .45; pointer-events: none; }
.ap-ck input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 1.5px solid #b9b5ab; border-radius: 6px; background: #fff; display: grid; place-content: center; cursor: pointer; transition: border-color .15s, background .15s; }
.ap-ck input[type=checkbox]::after { content: ""; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.ap-ck input[type=checkbox]:checked { background: #111; border-color: #111; }
.ap-ck input[type=checkbox]:checked::after { opacity: 1; }
.ap-ck input[type=checkbox]:hover { border-color: #111; }

/* Getal: zelfde stijl als Keuze */
.ap-aopt__pane .ap-ck b { font-weight: 500; font-size: 15px; color: var(--ink-2, #3a3a3a); }
.ap-aopt__pane .ap-ck small { font-size: 13.5px; }
.ap-aopt__pane > .ap-aopt__sep { margin: 4px 0; }

/* Getalveld-details: zoals het voorbeeld (rustige labels, vlakke velden, ruime stippellijnen) */
.ap-aopt [data-qp="num"] .ap-aopt__sub2 { gap: 26px; }
.ap-aopt [data-qp="num"] .ap-aopt__f > span { font-weight: 500; font-size: 15.5px; color: var(--ink-2, #2a2a2a); }
.ap-aopt [data-qp="num"] .ap-aopt__note { font-size: 13.5px !important; margin-top: 2px !important; }
.ap-aopt [data-qp="num"] .ap-aopt__mini { margin-top: 12px; gap: 8px; }
.ap-aopt [data-qp="num"] .ap-aopt__mini > small { font-size: 13px; font-weight: 500; color: var(--ink-2, #3a3a3a); }
.ap-aopt [data-qp="num"] .ap-in { height: 48px; border-radius: 6px; font-weight: 400; }
.ap-aopt [data-qp="num"] .ap-aopt__two { margin-top: 8px; }
.ap-aopt [data-qp="num"] .ap-money--c input { height: 48px !important; border-radius: 6px; }
.ap-aopt [data-qp="num"] .ap-aopt__sep { margin: 8px 0; border-top-color: #e4e1d9; }
.ap-aopt [data-qp="num"] .ap-ck b { font-weight: 500; font-size: 15.5px; }
.ap-aopt [data-qp="num"] .ap-ck input[type=checkbox] { border-radius: 5px; }

.ap-aopt__target { width: 100%; height: 48px !important; border-radius: 6px !important; margin-top: -6px; font-size: 15px; }

/* ===== Vragen-editor: drie gelijke kolommen, één ritme ===== */
:root { --ed-side: 340px; --ed-gap: 20px; --ed-pad: 24px; --ed-r: 16px; --ed-in: 44px; --ed-inr: 10px; }
@media (max-width: 1440px) { :root { --ed-side: 320px; } }
@media (max-width: 1320px) { :root { --ed-side: 300px; } }
/* Kolommen: links en rechts even breed, gelijke tussenruimte */
@media (min-width: 1101px) { .ws .ap-q { grid-template-columns: var(--ed-side) minmax(0, 1fr) !important; gap: var(--ed-gap) !important; align-items: start; } }
.ws .ap-qed:has(> .ap-qgrid) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.ap-qgrid { grid-template-columns: minmax(0, 1fr) var(--ed-side) !important; gap: var(--ed-gap) !important; align-items: start; }
.ap-qgrid.is-foldr { grid-template-columns: minmax(0, 1fr) 0 !important; gap: 0 !important; }
@media (max-width: 1180px) { .ap-qgrid { grid-template-columns: minmax(0, 1fr) !important; } }
/* Drie kaarten met dezelfde stijl, rand, ronding en binnenruimte */
.ws .ap-tree, .ap-qgrid__main, .ap-aopt { background: var(--card, #fff); border: 1px solid var(--line) !important; border-radius: var(--ed-r) !important; box-shadow: none !important; }
.ws .ap-tree { padding: var(--ed-pad) 16px !important; }
.ap-qgrid__main { padding: var(--ed-pad) calc(var(--ed-pad) + 4px) calc(var(--ed-pad) + 4px); }
.ap-aopt { padding: var(--ed-pad) !important; }
/* Zijkolommen blijven in beeld en scrollen zelf */
@media (min-width: 1101px) {
  .ws .ap-tree, .ap-aopt { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
}
/* Koppen links en rechts: identiek */
.ws .ap-tree__h, .ap-aopt__k { margin: 0 0 14px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .07em !important; text-transform: uppercase; color: var(--muted) !important; }
.ws .ap-tree__h { padding: 0 8px; }
.ap-aopt__head { gap: 0 !important; }
.ap-aopt__head .ap-aopt__sub { margin-top: -6px !important; }
/* Vragenlijst links: één lettergrootte, gelijke rijen */
.ws .ap-tree__row, .ws .ap-tree__q > button { min-height: 40px; }
.ws .ap-tree__q > button { font-size: 14px !important; padding: 8px 10px !important; }
.ws .ap-tree__svc > .ap-tree__row { font-size: 15px; }
.ws .ap-tree__num { width: 22px; height: 22px; font-size: 11.5px; }
/* Midden */
.ap-qgrid__main .ap-qtitle { font-size: 24px; }
.ap-qgrid__main .ap-opthead h3, .ap-qgrid__main .ap-opthead .ap-h4 { font-size: 16px; }
.ap-qgrid__main .ap-pmode__hint { font-size: 13.5px; }
.ws #opts > .ap-orow.ap-orow--stack { border-radius: 14px; padding: 16px 18px 18px 12px; }
.ws #opts .ap-opt__label { font-size: 15px !important; font-weight: 600; }
.ws #opts .ap-orow__d { font-size: 13.5px; }
.ws #opts .ap-plf > small { font-size: 12.5px !important; }
.ws #opts .ap-pl .ap-in, .ws #opts .ap-pl__step, .ws #opts .ap-money--c input { height: var(--ed-in) !important; border-radius: var(--ed-inr) !important; font-size: 14.5px !important; }
.ws #opts .ap-pl__step { overflow: hidden; }
.ws #opts .ap-pl__step .ap-pl__pct input { border-radius: 0 !important; }
.ws .ap-olist__add { height: 52px; border-radius: 14px; font-size: 14.5px; }
/* Rechts: dezelfde veldhoogte en ronding als in het midden */
.ap-aopt .ap-in, .ap-aopt [data-qp="num"] .ap-in, .ap-aopt [data-qp="num"] .ap-money--c input, .ap-aopt__target { height: var(--ed-in) !important; border-radius: var(--ed-inr) !important; font-size: 14.5px !important; }
.ap-aopt textarea.ap-in { height: auto !important; }
.ap-aopt__pick { height: var(--ed-in) !important; border-radius: var(--ed-inr) !important; }
.ap-aopt__f > span, .ap-aopt [data-qp="num"] .ap-aopt__f > span { font-size: 14.5px !important; font-weight: 600 !important; color: var(--ink, #111) !important; }
.ap-aopt__note, .ap-aopt [data-qp="num"] .ap-aopt__note { font-size: 13px !important; }
.ap-aopt__help, .ap-aopt__intro .ap-aopt__help { font-size: 14px !important; line-height: 1.55 !important; color: var(--ink-2, #3a3a3a) !important; }
.ap-aopt .ap-ck b, .ap-aopt__pane .ap-ck b, .ap-aopt__cks .ap-ck b, .ap-aopt [data-qp="num"] .ap-ck b { font-size: 14.5px !important; font-weight: 600 !important; color: var(--ink, #111) !important; }
.ap-aopt .ap-ck small { font-size: 13px !important; }
.ap-aopt [data-qp="num"] .ap-aopt__mini > small { font-size: 12.5px !important; }
/* Toeklapknoppen precies in het midden van de tussenruimte */
.ap-fold { top: 22px !important; }
.ap-fold--l { left: calc(var(--ed-side) + var(--ed-gap) / 2 - 11px) !important; }
.ap-fold--r { right: calc(var(--ed-side) + var(--ed-gap) / 2 - 11px) !important; }
.ws .ap-q.is-foldl > .ap-fold--l { left: -11px !important; }
.ap-qgrid.is-foldr > .ap-fold--r { right: -11px !important; }

.ap-aopt__a .ap-aopt__tabs { justify-content: flex-start; gap: 28px; }
.ap-aopt__back { margin-bottom: 2px; }

/* Dienst-pagina: vragen in het midden, dienst-opties rechts */
.ap-svc__meta { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.ap-svc__t { margin: 0 0 6px; font-size: 24px; }
.ap-svc__sub { margin: 0 0 22px; font-size: 14px; color: var(--muted); }
.ap-svcgrid .ap-qsum__h { margin: 22px 0 12px; font-size: 16px; }
.ap-svcgrid .ap-qsum { margin: 0; }
.ap-svcgrid .ap-qsum button { min-height: 68px; padding: 12px 16px; }
.ap-svcgrid .ap-qsum button span { font-size: 15px; font-weight: 600; }
.ap-svcgrid .ap-qsum button small { font-size: 13px; font-weight: 400; }
.ap-svc__add { display: flex; align-items: center; gap: 8px; width: 100%; height: 52px; margin-top: 12px; padding: 0 16px; border: 1px dashed var(--line-2, #d9d5cb) !important; border-radius: 14px; background: transparent; font: inherit; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.ap-svc__add:hover { color: var(--ink, #111); background: var(--sunken, #f6f5f1); }
.ap-svc__add .i { width: 16px; height: 16px; }
.ap-svc__photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: 6px; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--sunken, #f3f2ee); cursor: pointer; }
.ap-svc__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-svc__photo:not(:has(img)) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }
.ap-svc__photo .ap-photo__edit { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12.5px; opacity: 1; }
.ap-svc__del { align-self: flex-start; height: var(--ed-in, 44px); }
.ap-svcgrid.is-foldr > .ap-aopt { display: none; }

.ap-aopt.ap-svcopt { display: flex; flex-direction: column; gap: 20px !important; }
.ap-svcopt .ap-aopt__head { margin-bottom: -4px; }
.ap-svcopt .ap-aopt__sep { margin: 0; }
.ap-svcopt .ap-svc__del { margin: -6px 0 0 -12px; }

/* ===== Toeklappen: knop in de hoek van de kaart, ingeklapt een smalle strook ===== */
.ap-fold { width: 30px !important; height: 30px !important; top: 15px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--muted) !important; font-size: 20px !important; line-height: 1 !important; z-index: 5; }
.ap-fold:hover { background: var(--sunken, #f1f0ec) !important; color: var(--ink, #111) !important; }
/* Links: rechtsboven in de vragenlijst */
.ap-fold--l { left: calc(var(--ed-side) - 30px - 12px) !important; }
.ws .ap-q.is-foldl { grid-template-columns: 54px minmax(0, 1fr) !important; }
.ws .ap-q.is-foldl > .ap-tree { display: block !important; min-height: 60px; padding: 0 !important; overflow: hidden; }
.ws .ap-q.is-foldl > .ap-tree > * { display: none !important; }
.ws .ap-q.is-foldl > .ap-fold--l { left: 12px !important; }
/* Rechts: rechtsboven in het paneel */
.ap-fold--r { right: 12px !important; }
.ap-aopt__head, .ap-aopt__back { padding-right: 34px; }
.ap-qgrid.is-foldr { grid-template-columns: minmax(0, 1fr) 54px !important; gap: var(--ed-gap) !important; }
.ap-qgrid.is-foldr > .ap-aopt { display: block !important; min-height: 60px; padding: 0 !important; overflow: hidden; }
.ap-qgrid.is-foldr > .ap-aopt > * { display: none !important; }
.ap-qgrid.is-foldr > .ap-fold--r { right: 12px !important; }
@media (max-width: 1180px) { .ap-qgrid.is-foldr { grid-template-columns: minmax(0, 1fr) !important; } .ap-qgrid.is-foldr > .ap-aopt > * { display: revert !important; } }

/* Video-info: één nette regel */
.ap-aopt__pill { margin: -8px 0 0 !important; padding: 6px 12px 6px 10px !important; white-space: nowrap; font-size: 13px !important; line-height: 1.2; border-radius: 999px; background: #f1f0ec; color: var(--ink-2, #3a3a3a); }
.ap-aopt__pill .i { width: 15px; height: 15px; flex: none; }
/* Voorwaarden: zelfde vormen als de rest */
.ap-aopt__cond { padding: 20px !important; gap: 10px !important; border-radius: 14px !important; background: #f6f5f1; border: 1px solid var(--line); }
.ap-aopt__cond > b { font-size: 16px !important; font-weight: 600; color: var(--ink, #111); }
.ap-aopt__cond .ap-aopt__note { font-size: 13.5px !important; line-height: 1.5; }
.ap-aopt__condbtn { height: 40px; padding: 0 16px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff !important; font-size: 14px !important; font-weight: 500; margin: 4px 0 2px; }

/* Soort prijs overal even breed, ook als er geen bedragen naast staan */
.ws #opts .ap-pl > .ap-plf:has(select[data-pk]) { flex: 0 0 calc((100% - 24px) * 1.6 / 3.6) !important; max-width: calc((100% - 24px) * 1.6 / 3.6); }
/* Video: knop even hoog als het veld */
.ap-video__in label.ap-btn, .ap-aopt [data-slot="vid"] .ap-video__in label.ap-btn { height: var(--ed-in, 44px) !important; padding: 0 16px !important; border-radius: var(--ed-inr, 10px) !important; display: inline-flex; align-items: center; }
.ws .ap-qed .ap-video__in .ap-in { height: var(--ed-in, 44px); }
/* Startscherm: geen kaart in een kaart */
.ws .ap-qed > .ap-card { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.ws .ap-qed:not(:has(> .ap-qgrid)) { padding: var(--ed-pad, 24px) calc(var(--ed-pad, 24px) + 4px) !important; border: 1px solid var(--line) !important; border-radius: var(--ed-r, 16px) !important; }
.ws .ap-qed:not(:has(> .ap-qgrid)) .ap-in { min-height: var(--ed-in, 44px); border-radius: var(--ed-inr, 10px); }

/* ===== Paneel Vraag-opties: één ritme in alle tabbladen ===== */
.ap-aopt__pane { gap: 24px !important; padding-top: 8px !important; }
.ap-aopt__f { gap: 4px !important; }
.ap-aopt__f > .ap-in, .ap-aopt__f > textarea, .ap-aopt__f > select, .ap-aopt__f > .ap-aopt__two, .ap-aopt__f > .ap-video, .ap-aopt [data-slot="vid"] .ap-video { margin-top: 8px !important; }
.ap-aopt__note { display: block; line-height: 1.45 !important; }
/* Video: veld en knop naast elkaar, even hoog */
.ap-aopt [data-slot="vid"] .ap-video__in { flex-wrap: nowrap !important; gap: 8px !important; }
.ap-aopt [data-slot="vid"] .ap-video__in .ap-in { flex: 1 1 auto !important; min-width: 0; }
.ap-aopt [data-slot="vid"] .ap-video__in label.ap-btn { flex: none; order: 0 !important; }
.ap-aopt [data-slot="vid"] .ap-field { margin: 0; }
.ap-aopt__pill { margin: -12px 0 0 !important; }
/* Stippellijnen: overal dezelfde afstand */
.ap-aopt__pane > .ap-aopt__sep, .ap-aopt [data-qp="num"] .ap-aopt__sep { margin: 0 !important; }
/* Vinkjes: vakje op de eerste regel, tekst netjes eronder */
.ap-ck { align-items: flex-start !important; }
.ap-ck input[type=checkbox] { margin-top: 0 !important; }
.ap-ck span { gap: 3px !important; }
.ap-ck b { line-height: 22px; }
.ap-aopt__cks { gap: 22px !important; margin-top: 0 !important; }
/* Tekstblok-voorbeeld */
.ap-aopt__ex { margin: 0 !important; padding-top: 22px !important; font-size: 14px !important; }
.ap-aopt__ex b { font-weight: 600; }
.ap-aopt__ex ol { margin-top: 10px !important; gap: 8px !important; }
.ap-aopt__ex li { font-size: 13.5px; }
/* Voorwaarden-kaart volle breedte in de kolom */
.ap-aopt__cond { margin: 0 !important; }

/* Tekst in het paneel: nette regelafbreking, geen los woord op de laatste regel */
.ap-aopt, .ap-aopt * { text-wrap: pretty; }
.ap-aopt__help, .ap-aopt__sub, .ap-aopt__note, .ap-ck small, .ap-ck b { text-wrap: balance; }

/* Meerdere kosten: tweede rij met dezelfde kolommen */
.ws #opts .ap-orow__price:has(.ap-pl--2) { display: flex; flex-direction: column; gap: 12px; }
.ws #opts .ap-pl--2 > .ap-plf--per { flex: 0 0 calc((100% - 24px) * 1.6 / 3.6) !important; max-width: calc((100% - 24px) * 1.6 / 3.6); }
.ws #opts .ap-pl--2 select { width: 100% !important; height: var(--ed-in, 44px); border-radius: var(--ed-inr, 10px); }

.ws #opts .ap-pl--2 { display: flex !important; flex-wrap: nowrap; align-items: flex-end !important; gap: 12px; width: 100%; }
.ws #opts .ap-pl--2 .ap-plf--per select, .ws #opts .ap-pl--2 select.ap-in { height: 44px !important; max-height: 44px !important; min-height: 0 !important; padding: 0 30px 0 12px !important; font-size: 14.5px !important; }

/* Menu "Meer" in de editor: nette rijen met icoon en naam */
.ws-moremenu { min-width: 260px; padding: 6px !important; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.ws-moremenu a { display: flex !important; align-items: center; gap: 12px; height: 42px; padding: 0 12px !important; border-radius: 10px; color: var(--ink, #111) !important; text-decoration: none !important; font-size: 14px; font-weight: 500; white-space: nowrap; }
.ws-moremenu a:hover, .ws-moremenu a:focus-visible { background: var(--sunken, #f3f2ee); outline: none; }
.ws-moremenu a .i { width: 18px; height: 18px; flex: none; color: var(--muted); }
.ws-moremenu a span { flex: 1; }
.ws-moremenu a.is-on { background: var(--sunken, #f3f2ee); font-weight: 600; }
.ws-moremenu a.is-on .i:last-child { color: var(--ink, #111); }

.ws-moremenu { width: max-content; max-width: calc(100vw - 16px); min-width: 240px; }

/* Resultaat-editor: voorbeeld van het keuze-overzicht */
.ap-rprev__sum { margin: 14px 0 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: left; background: #fff; }
.ap-rprev__sum > div { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ap-rprev__sum > div span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: underline; }
.ap-rprev__sum > div .i { width: 12px; height: 12px; }
.ap-rprev__sum ul { list-style: none; margin: 0; padding: 2px 12px; }
.ap-rprev__sum li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0eee9; font-size: 12px; }
.ap-rprev__sum li:last-child { border-bottom: 0; }
.ap-rprev__sum li span { color: var(--muted); }
.ap-rprev__sum li b { font-weight: 600; text-align: right; }

/* ===== Resultaat bewerken zoals een offerte ===== */
.rsx { display: grid; grid-template-columns: minmax(0, 1fr) var(--ed-side, 340px); gap: var(--ed-gap, 20px); align-items: start; }
@media (max-width: 1180px) { .rsx { grid-template-columns: minmax(0, 1fr); } }
.rsx-canvas { padding: 32px; border: 1px solid var(--line); border-radius: var(--ed-r, 16px); background: #f6f5f1; }
.rsx-side { position: sticky; top: 16px; }
.rsx-page { --acc: var(--rp, #111); max-width: 640px; margin: 0 auto; padding: 40px 44px 36px; border-radius: 14px; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.06); text-align: center; color: #2b2a27; }
.rsx-hint { display: inline-flex; align-items: center; gap: 6px; margin: -16px 0 22px; padding: 6px 12px; border-radius: 999px; background: #f6f5f1; font-size: 12.5px; color: var(--muted); }
.rsx-hint .i { width: 13px; height: 13px; }
.rsx-h { margin: 0 0 10px; font: 800 30px/1.15 "Plus Jakarta Sans", sans-serif; color: #111; letter-spacing: -.01em; }
.rsx-sub { font-size: 15.5px; line-height: 1.55; color: #55524b; white-space: pre-line; }
.px-ce:empty::before { content: attr(data-ph); color: #b3ada0; }
/* Blokken met naam en oogje bij hover */
.rsx-b { position: relative; margin-top: 18px; padding: 4px; border-radius: 12px; outline: 1px dashed transparent; transition: outline-color .15s; }
.rsx-b:hover { outline-color: #d9d5cb; }
.rsx-b__bar { position: absolute; top: -12px; right: 8px; z-index: 2; display: none; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11.5px; color: var(--muted); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.rsx-b:hover > .rsx-b__bar, .rsx-b.is-off > .rsx-b__bar { display: inline-flex; }
.rsx-eye { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink, #111); cursor: pointer; }
.rsx-eye:hover { background: #f1f0ec; }
.rsx-eye .i { width: 14px; height: 14px; }
.rsx-b.is-off > :not(.rsx-b__bar) { opacity: .3; filter: grayscale(1); pointer-events: none; }
.rsx-b.is-off { outline-color: #e2ded5; }
/* Keuzes */
.rsx-sum { border: 1px solid var(--line); border-radius: 12px; text-align: left; overflow: hidden; }
.rsx-sum__h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rsx-sum__h span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: underline; font-size: 13px; }
.rsx-sum__h .i { width: 13px; height: 13px; }
.rsx-sum ul { list-style: none; margin: 0; padding: 2px 16px; }
.rsx-sum li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f0eee9; font-size: 13.5px; }
.rsx-sum li:last-child { border-bottom: 0; }
.rsx-sum li span { color: #6b675f; } .rsx-sum li b { font-weight: 600; text-align: right; }
/* Prijs */
.rsx-price { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px; border-radius: 14px; border: 2px solid var(--rp); background: color-mix(in srgb, var(--rp) 14%, #fff); }
.rp-outline .rsx-price { background: #fff; }
.rp-solid .rsx-price { background: var(--rp); color: var(--rp-t); }
.rp-solid .rsx-price .rsx-price__val, .rp-solid .rsx-price small { color: var(--rp-t); }
.rp-plain .rsx-price { border: 0; background: none; padding: 8px 0 0; }
.rsx-price__lbl { font-size: 14px; font-weight: 600; padding: 0 6px; }
.rsx-price__val { font: 800 40px/1.1 "Plus Jakarta Sans", sans-serif; color: #111; }
.rsx-price__rec { font-size: 14px; font-weight: 600; }
.rsx-price small { font-size: 12.5px; color: #6b675f; }
/* Knoppen */
.rsx-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rsx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--rc); color: var(--rc-t, #fff); font-weight: 700; font-size: 15px; }
.rsx-btn .i { width: 16px; height: 16px; }
.rsx-btn--ghost { background: #fff; color: #111; border: 1.5px solid #d9d5cb; }
.rsx-btn .px-ce { padding: 2px 4px; }
.rsx-btn .px-ce:hover, .rsx-btn .px-ce:focus { background: rgba(255,255,255,.18); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.rsx-thanks { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #15803d; font-weight: 600; font-size: 14.5px; }
.rsx-thanks .i { width: 16px; height: 16px; flex: none; }
.rsx-b--thanks .rsx-b__bar { display: none; }
.rsx-b--thanks:hover .rsx-b__bar { display: inline-flex; padding-right: 10px; }
/* Uitleg */
.rsx-exp { padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; text-align: left; cursor: text; font-size: 14.5px; line-height: 1.6; }
.re-tinted .rsx-exp { background: color-mix(in srgb, var(--rp) 8%, #fff); border-color: transparent; }
.re-plain .rsx-exp { border: 0; padding: 4px 2px; }
.rsx-exp:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rp) 35%, transparent); }
.rsx-exp h2, .rsx-exp h3 { font-size: 17px; margin: 10px 0 6px; } .rsx-exp ul { padding-left: 20px; margin: 6px 0; }
.rsx-exp__ta { width: 100%; min-height: 160px; font: 13.5px/1.55 ui-monospace, Menlo, Consolas, monospace; resize: none; margin-top: 8px; }
.rsx-empty { margin: 0; color: #b3ada0; }
.rsx-disc { font-size: 13px; color: #6b675f; }
.rsx-again { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; text-decoration: underline; color: #2b2a27; }
.rsx-again .i { width: 15px; height: 15px; }
/* Paneel */
.rsx-color { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.rsx-color input[type=color] { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.rsx-color span { flex: 1; display: flex; flex-direction: column; } .rsx-color b { font-size: 14px; } .rsx-color small { font-size: 12.5px; color: var(--muted); }
.rsx-look { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.rsx-seg { display: grid !important; grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.rsx-side .rs-auto { display: flex; flex-direction: column; gap: 10px; }

/* Resultaat: blokken verplaatsen en toevoegen */
.rsx-list { display: flex; flex-direction: column; }
.rsx-b__bar { gap: 2px !important; padding: 2px 4px !important; }
.rsx-b__n { padding: 0 6px 0 2px; font-weight: 600; color: var(--ink-2, #3a3a3a); }
.rsx-grip { display: grid; place-items: center; width: 22px; height: 24px; color: var(--muted); cursor: grab; }
.rsx-grip svg { width: 12px; height: 12px; }
.rsx-eye--del { color: #dc2626 !important; }
.rsx-b.is-drag { opacity: .35; }
.rsx-b.is-over { box-shadow: 0 -3px 0 0 var(--rp, #111); }
.rsx-b.is-over.is-after { box-shadow: 0 3px 0 0 var(--rp, #111); }
.rsx-add { display: flex; justify-content: center; margin-top: 22px; }
.rsx-add__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px dashed #d6cfc0; border-radius: 999px; background: #fff; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.rsx-add__btn:hover { color: var(--ink, #111); border-color: #b9b2a3; }
.rsx-add__btn .i { width: 15px; height: 15px; }
.rsx-addmenu { z-index: 60; }
.rsx-text { text-align: left; font-size: 15px; line-height: 1.6; white-space: pre-line; padding: 4px 6px; }
.rsx-note { padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--rp) 12%, #fff); border-left: 4px solid var(--rp); text-align: left; }
.rsx-note__t { font-size: 14.5px; line-height: 1.55; white-space: pre-line; }
.rsx-img { position: relative; margin: 0; }
.rsx-img img { display: block; width: 100%; border-radius: 12px; }
.rsx-img__pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 16 / 9; border: 1px dashed #d6cfc0; border-radius: 12px; background: #faf9f6; font: inherit; color: var(--muted); cursor: pointer; }
.rsx-img__pick .i { width: 22px; height: 22px; }
.rsx-img__chg { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.rsx-img__chg .i { width: 14px; height: 14px; }
.rsx-img__cap { display: block; margin-top: 8px; font-size: 13.5px; color: #6b675f; }
.rsx-video { display: flex; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 16 / 9; border-radius: 12px; background: #1a1a1a; color: #fff; font-size: 13.5px; }
.rsx-video .i { width: 18px; height: 18px; }
.rsx-sum__t, .rsx-sum__e { padding: 1px 4px; }
.rsx-b--price, .rsx-b--thanks { }

/* Resultaat-editor: lettertypes en icoontjes */
.rsx-page[style*="--rfont"] { font-family: var(--rfont), system-ui, sans-serif; }
.rsx-page[style*="--rhfont"] .rsx-h, .rsx-page[style*="--rhfont"] .rsx-price__val, .rsx-page[style*="--rhfont"] .rsx-exp h2, .rsx-page[style*="--rhfont"] .rsx-exp h3 { font-family: var(--rhfont), system-ui, sans-serif; }
.rsx-page.is-noic .rsx-thanks > .i, .rsx-page.is-noic .rsx-again > .i, .rsx-page.is-noic .rsx-sum__h span > .i, .rsx-page.is-noic .rsx-btn > .i { display: none; }
/* Paneel: ruimte onder de tabbladen */
.rsx-side .ap-aopt__pane { padding-top: 18px !important; }

.rsx-side .ap-aopt__tabs { justify-content: flex-start; gap: 28px; }

/* ===== Minder witruimte ===== */
/* Menu begint bovenaan, onder de zoekbalk */
.ap-side .ap-snav { margin-block: 18px auto !important; }
/* Statistieken: geen zijkolom meer, alles in één brede kolom */
.ap-fx.st2x { grid-template-columns: minmax(0, 1fr) !important; }
.ap-fx.st2x > .ap-fx__side { display: none !important; }
.ap-fx.st2x > .ap-fx__main { max-width: 1200px; margin: 0 auto; width: 100%; padding-top: 28px; }
/* Calculators: compacte kop, knop bij de titel */
.cl-head { align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.cl-kpiw { flex-direction: row !important; align-items: center !important; gap: 12px !important; }
.cl-kpisel span { display: none; }
.cl-bar--few { margin: 0 0 20px !important; justify-content: flex-start !important; }
.cl-bar--few .ap-grow { display: none; }
/* Koppelingen en andere instellingen: kaarten over de volle breedte, twee naast elkaar */
.ap-account .ap-narrow, .ap-acc .ap-narrow { max-width: none; }

/* Koppelingen: kaarten naast elkaar over de volle breedte */
.ap-intg { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.ap-intg > .ap-card { max-width: none !important; margin: 0 !important; }

/* Calculators: kop met knop rechts, cijfers in één nette strook */
.cl-head2 { display: flex !important; align-items: center !important; justify-content: space-between; gap: 20px; margin-bottom: 20px !important; }
.cl-head2 .ap-btn--primary { flex: none; height: 44px; padding: 0 18px; }
.cl-strip { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: stretch; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card, #fff); overflow: hidden; }
.cl-strip__sel { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 20px; border-right: 1px solid var(--line); }
.cl-strip__sel small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cl-strip__sel select { width: 100% !important; height: 40px; border-radius: 10px; font-size: 14px; }
.cl-strip__m { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cl-strip__m .cl-kpi { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 22px; margin: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; min-width: 0; }
.cl-strip__m .cl-kpi + .cl-kpi { border-left: 1px solid var(--line) !important; }
.cl-strip__m .cl-kpi b { font-size: 26px; line-height: 1.1; }
.cl-strip__m .cl-kpi span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cl-bar--few { display: none !important; }
@media (max-width: 900px) { .cl-strip { grid-template-columns: 1fr; } .cl-strip__sel { border-right: 0; border-bottom: 1px solid var(--line); } .cl-strip__m { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .cl-strip__m .cl-kpi + .cl-kpi { border-left: 0 !important; } }

.cl-strip { grid-template-columns: 300px minmax(0, 1fr); }

/* Periode kiezen in de cijferstrook */
.cl-per { position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0; color: var(--muted); cursor: pointer; }
.cl-per .i { width: 14px; height: 14px; flex: none; pointer-events: none; }
.cl-per select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0 2px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2, #3a3a3a); cursor: pointer; }
.cl-per select:focus-visible { outline: 2px solid #f5b400; outline-offset: 2px; border-radius: 4px; }

/* Calculators: kaarten in het midden */
.cl-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 20px; }
.cl-grid > .cl-card { width: 300px; flex: none; }

.cl-grid { margin-top: 16px; }

/* Calculators: links uitgelijnd, met ruimte onder de titel */
.cl-grid { justify-content: flex-start !important; margin-top: 36px !important; }

/* Menu verticaal in het midden van de zijbalk */
.ap-side .ap-snav { margin-block: auto !important; }

/* Kaart: gepubliceerd op … */
.cl-pub { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.cl-pub i { width: 7px; height: 7px; border-radius: 50%; background: #b9b5ab; }
.cl-pub.is-on i { background: #16a34a; }

/* Waarschuwingen bovenaan (e-mail bevestigen, proef voorbij, pakket vol) */
.ap-banners:empty { display: none; }
.ap-banners { display: grid; gap: 10px; margin: 0 0 20px; }
.ap-banners .ap-note { margin: 0; }
.ap-banners--ibx { margin: 0 16px 12px; font-size: 13px; }

/* Calculators op de gsm: kaart over de volle breedte (geen lege strook rechts) */
@media (max-width: 640px) { .cl-grid > .cl-card { width: 100%; } }


/* Design: stijlen als rustige rijen (symmetrisch, geen losse kaart onderaan) */
.sd-themes { display: flex !important; flex-direction: column; gap: 6px !important; }
.sd-theme { flex-direction: row !important; align-items: center; gap: 12px !important; min-height: 48px; padding: 0 14px !important; position: relative; }
.sd-theme__sw { display: flex; gap: 0 !important; flex: none; }
.sd-theme__sw i { flex: none !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; box-shadow: 0 0 0 2px var(--card), inset 0 0 0 1px rgba(0,0,0,.08) !important; }
.sd-theme__sw i + i { margin-left: -6px; }
.sd-theme b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-theme > .i { width: 16px; height: 16px; flex: none; color: var(--ink); opacity: 0; }
.sd-theme.is-on > .i { opacity: 1; }
.sd-theme--mine > .i { margin-right: 0; }
.sd-theme--mine:hover > .i, .sd-theme--mine:focus-within > .i { opacity: 0; }
.sd-theme__del { top: 50% !important; right: 10px !important; transform: translateY(-50%); }
.sd-mine { gap: 10px !important; margin-top: 16px; padding-top: 16px !important; }
.sd-mine__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.sd-mine__top .sd-save__open { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.sd-mine__top .sd-save__open .i { width: 14px; height: 14px; }
.sd-mine .sd-tip { line-height: 1.45; }
.sd-mode p .sd-acct { display: inline; padding: 0; font-size: inherit; }

/* ---------- Concierge ---------- */
.cg { max-width: 1320px; }
.cg-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.cg-sub { margin: 6px 0 0; color: var(--muted); max-width: 560px; }
.cg-on { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; flex: none; }
.cg-on b { display: block; font-size: 14.5px; } .cg-on small { display: block; font-size: 12.5px; color: var(--muted); }
.cg-test { margin: 0 0 16px !important; }
.cg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; position: relative; }
.cg-kpi { padding: 16px 20px; } .cg-kpi + .cg-kpi { border-left: 1px solid var(--line); }
.cg-kpi b { display: block; font-size: 24px; line-height: 1.15; } .cg-kpi span { font-size: 13px; color: var(--muted); }
.cg-kpis > small { position: absolute; top: 10px; right: 14px; font-size: 11.5px; color: var(--faint); }
.cg-grid { display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cg-panel { border: 1px solid var(--line); border-radius: 18px; background: var(--card); overflow: hidden; }
.cg-tabs { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cg-tabs button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cg-tabs button.is-on { background: var(--ink); color: #fff; }
.cg-tabs .ap-saved { margin-left: auto; font-size: 12px; color: var(--faint); }
.cg-body { display: flex; flex-direction: column; gap: 18px; padding: 20px; }
.cg-f { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cg-f > span { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink); }
.cg-f > span em { font-style: normal; font-weight: 500; color: var(--faint); }
.cg-f > small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cg-f .ap-in { width: 100%; }
.cg-row { display: flex; gap: 8px; } .cg-row .ap-in { flex: 1; min-width: 0; } .cg-row .ap-btn { flex: none; }
.cg-know { min-height: 360px; resize: vertical; padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.55; }
.cg-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-col { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.cg-col.is-on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.cg-col--own { background: conic-gradient(#e44, #ec3, #4c6, #39e, #a4e, #e44); overflow: hidden; }
.cg-col--own input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cg-code { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 12px; background: #14171c; }
.cg-code code { flex: 1; min-width: 0; color: #e8eaee; font-size: 12.5px; line-height: 1.5; word-break: break-all; }
.cg-how { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cg-how li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 14px; font-size: 13.5px; } .cg-how li + li { border-top: 1px solid var(--line); }
.cg-how span { color: var(--muted); }
.cg-tip { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); } .cg-tip .i { width: 16px; height: 16px; }
.cg-chats { display: grid; gap: 8px; max-height: 620px; overflow: auto; }
.cg-chat { border: 1px solid var(--line); border-radius: 14px; }
.cg-chat summary { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; cursor: pointer; list-style: none; }
.cg-chat summary::-webkit-details-marker { display: none; }
.cg-chat__q { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-chat__m { font-size: 12.5px; color: var(--muted); } .cg-chat__m em { font-style: normal; color: #b42318; }
.cg-msgs { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.cg-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.cg-msg--u { align-self: flex-end; background: var(--ink); color: #fff; }
.cg-msg--a { background: var(--soft, #f4f3ef); }
.cg-msg.is-down { box-shadow: inset 0 0 0 1px #f1b4ad; } .cg-msg small { display: block; margin-top: 6px; color: #b42318; font-size: 12px; }
.cg-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--muted); } .cg-empty .i { width: 24px; height: 24px; }
.cg-empty b { color: var(--ink); }
.cg-pv { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); overflow: hidden; }
.cg-pv__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cg-pv__stage { display: grid; place-items: center; height: min(760px, calc(100vh - 150px)); background: #f3f2ee; background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px); background-size: 16px 16px; }
.cg-pv__stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.cg-pv__stage.is-mobile iframe { width: 390px; height: calc(100% - 32px); border-radius: 28px; box-shadow: 0 0 0 8px #14171c, 0 20px 40px -20px rgba(0,0,0,.4); }
@media (max-width: 1100px) { .cg-grid { grid-template-columns: 1fr; } .cg-pv { position: static; } .cg-kpis { grid-template-columns: 1fr 1fr; } .cg-kpi:nth-child(3) { border-left: 0; } .cg-kpi:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .cg-head { flex-direction: column; align-items: stretch; } .cg-pv__stage.is-mobile iframe { width: 100%; border-radius: 0; box-shadow: none; } .cg-tabs { overflow-x: auto; } }

/* Concierge: tabbladen gelijk verdeeld, code leesbaar, voorbeeld op echte breedte */
.cg-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px !important; }
.cg-tabs button { padding: 0 8px !important; white-space: nowrap; }
.cg-state { margin: 0; padding: 10px 20px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); text-align: right; }
.cg-code code { padding: 0 !important; background: none !important; border: 0 !important; color: #e8eaee !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cg-f small code { padding: 1px 5px; border-radius: 5px; background: var(--soft, #f4f3ef); font-size: 12px; }
.cg-pv__stage { position: relative; overflow: hidden; }
.cg-pv__stage.is-desktop { display: block; }
.cg-test .i { flex: none; }

/* Productschakelaar: Calculator | Concierge */
.ap-prodbox { padding: 0 2px; margin: 4px 0 12px; }
.ap-prod { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: var(--soft, #efede7); border: 1px solid var(--line); }
.ap-prod a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 8px; border-radius: 9px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, box-shadow .15s; }
.ap-prod a .i { width: 16px; height: 16px; flex: none; }
.ap-prod a:hover { color: var(--ink); }
.ap-prod a.is-on { background: var(--card, #fff); color: var(--ink); box-shadow: 0 1px 2px rgba(20,23,28,.08), 0 0 0 1px var(--line); }
.ap-prod a:focus-visible { outline: 2px solid #f5b400; outline-offset: 1px; }
.ap-layout[data-side="icons"] .ap-prod { grid-template-columns: 1fr; }
.ap-layout[data-side="icons"] .ap-prod span { display: none; }
.ap-mprod { display: none; }
.ap-mtop .ap-mprod { display: block; flex: 1; min-width: 0; max-width: 260px; margin: 0 auto; }
.ap-mtop .ap-prod a { min-height: 32px; font-size: 13px; }
.cg-brand { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.cg-brand .i { width: 14px; height: 14px; }

/* Concierge: waar vroegen bezoekers naar, en labels per gesprek */
.cg-topics { margin: 0 0 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cg-topics header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cg-topics header b { font-size: 15px; } .cg-topics header span { font-size: 12.5px; color: var(--muted); }
.cg-topics ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cg-topics li { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: 12px; font-size: 13.5px; }
.cg-topics i { height: 8px; border-radius: 99px; background: var(--soft, #f1efe9); overflow: hidden; }
.cg-topics i b { display: block; height: 100%; border-radius: 99px; background: var(--ink); }
.cg-topics em { font-style: normal; color: var(--muted); text-align: right; font-size: 12.5px; }
.cg-chat__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cg-chat__tags:empty { display: none; }
.cg-tag { padding: 1px 8px; border-radius: 99px; background: var(--soft, #f1efe9); color: var(--muted); font-style: normal; font-size: 11.5px; font-weight: 600; }
.cg-tag--hot { background: #fde8d8; color: #a33a0b; }
.cg-tag--warm { background: #fff3cf; color: #7a5600; }
.cg-tag--urgent { background: #fde2e1; color: #b42318; }
@media (max-width: 640px) { .cg-topics li { grid-template-columns: 90px 1fr; } .cg-topics em { display: none; } }

/* Concierge als product: opstart, overzicht, gemiste vragen, gesprekken en kennis per onderdeel */
.cg-card { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 18px 20px; min-width: 0; }
.cg-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cg-card h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.cg-card header p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cg-none { margin: 0; padding: 14px 0 4px; font-size: 13px; color: var(--muted); }
.cg-count { flex: none; min-width: 24px; padding: 2px 8px; border-radius: 99px; background: var(--err-soft); color: var(--err); font-size: 12px; font-weight: 700; text-align: center; }
.cg-empty--sm { padding: 18px 8px; }
.cg-empty--sm .i { color: var(--ok); }

/* Opstart */
.cg-start { margin: 0 0 20px; padding: 20px 22px; background: linear-gradient(180deg, var(--y-faint), var(--card) 70%); border-color: #f1e2b4; }
.cg-start h2 { font-size: 17px; }
.cg-start__n { flex: none; font-size: 13px; color: var(--muted); } .cg-start__n b { font-size: 18px; color: var(--ink); }
.cg-start__bar { display: block; height: 6px; margin: 0 0 14px; border-radius: 99px; background: var(--hover); overflow: hidden; }
.cg-start__bar b { display: block; height: 100%; border-radius: 99px; background: var(--y); transition: width .3s; }
.cg-start ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cg-start li { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.cg-start li > div b { display: block; font-size: 13.5px; } .cg-start li > div small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cg-start li .ap-btn { margin-top: auto; align-self: flex-start; }
.cg-start__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; }
.cg-start li.is-done { background: var(--soft); } .cg-start li.is-done .cg-start__dot { background: var(--ok-soft); color: var(--ok); }
.cg-start li.is-done > div b { color: var(--muted); }
.cg-start__dot .i { width: 15px; height: 15px; }

/* Overzicht */
.cg-dash { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cg-gaps { grid-row: span 2; }
.cg-gaps ul, .cg-hot ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cg-gaps li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cg-gap__q { flex: 1; min-width: 200px; } .cg-gap__q b { display: block; font-size: 13.5px; line-height: 1.45; } .cg-gap__q small { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); }
.cg-gap__act { display: flex; gap: 6px; flex: none; }
.cg-ans { display: grid; gap: 8px; flex-basis: 100%; }
.cg-ans textarea { width: 100%; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 10px 12px; }
.cg-ans > div { display: flex; gap: 6px; }
.cg-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 150px; }
.cg-bars > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.cg-bars i { position: relative; display: flex; align-items: flex-end; width: 100%; max-width: 22px; min-height: 2px; border-radius: 6px 6px 3px 3px; background: var(--ink); overflow: hidden; }
.cg-bars i b { display: block; width: 100%; background: var(--y); }
.cg-bars span { font-size: 10.5px; color: var(--faint); }
.cg-hot li a { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.cg-hot li a:hover b { text-decoration: underline; }
.cg-hot li b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cg-hot li small { font-size: 12px; color: var(--faint); }
.cg-topics2 ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cg-topics2 li { display: grid; grid-template-columns: 90px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 13px; }
.cg-topics2 i { height: 8px; border-radius: 99px; background: var(--hover); overflow: hidden; } .cg-topics2 i b { display: block; height: 100%; border-radius: 99px; background: var(--ink); }
.cg-topics2 em { font-style: normal; text-align: right; color: var(--muted); font-size: 12.5px; }
.cg-tag--lead { background: var(--ok-soft); color: var(--ok-ink); }
.cg-tag--miss { background: var(--err-soft); color: var(--err); }

/* Gesprekken: lijst links, gesprek rechts */
.cgc { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cgc__list { padding: 0; overflow: hidden; position: sticky; top: 16px; }
.cgc__tools { display: grid; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); }
.cgc__search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--sunken); }
.cgc__search .i { width: 16px; height: 16px; color: var(--faint); flex: none; }
.cgc__search input { flex: 1; min-width: 0; height: 36px; border: 0; background: none; outline: 0; font: inherit; font-size: 13.5px; }
.cgc__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cgc__chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cgc__chips button em { font-style: normal; font-weight: 600; color: var(--faint); }
.cgc__chips button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .cgc__chips button.is-on em { color: rgba(255,255,255,.7); }
.cgc__list ul { margin: 0; padding: 6px; list-style: none; max-height: calc(100vh - 290px); overflow: auto; }
.cgc__list li button { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.cgc__list li button:hover { background: var(--soft); }
.cgc__list li button.is-on { background: var(--hover); }
.cgc__list li b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgc__list li small { font-size: 12px; color: var(--faint); }
.cgc__list .cg-none { padding: 18px 16px; }
.cgc__detail { padding: 0; overflow: hidden; }
.cgc__head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cgc__head > div { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cgc__head h2 { margin: 0; font-size: 16px; line-height: 1.35; }
.cgc__head p { margin: 0; font-size: 12.5px; color: var(--muted); } .cgc__head p a { color: inherit; }
.cgc__back { display: none !important; }
.cgc__msgs { padding: 20px; max-height: calc(100vh - 290px); overflow: auto; }
.cg-msg__up { display: flex !important; align-items: center; gap: 4px; color: var(--ok) !important; } .cg-msg__up .i { width: 13px; height: 13px; }
.cg-fix { display: grid; gap: 10px; max-width: 88%; margin: -2px 0 6px; padding: 12px 14px; border: 1px dashed #f1b4ad; border-radius: 12px; background: #fffaf9; }
.cg-fix p { display: flex; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); } .cg-fix p .i { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--err); }
.cg-fix.is-done { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ok-soft); background: var(--ok-soft); color: var(--ok-ink); font-size: 13px; } .cg-fix.is-done .i { width: 16px; height: 16px; }

/* Kennis per onderdeel */
.cg-qual { display: flex; align-items: center; gap: 16px; padding: 16px; }
.cg-qual h2 { font-size: 14.5px; } .cg-qual p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cg-ring { --p: 0; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--y) calc(var(--p) * 1%), var(--hover) 0); }
.cg-ring b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); font-size: 13px; font-weight: 800; }
.cg-modes { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: var(--sunken); }
.cg-modes button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cg-modes button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20,18,12,.08); }
.cg-modes em { margin-left: auto; padding-right: 8px; font-style: normal; font-size: 12px; color: var(--faint); }
.cg-ks { display: grid; gap: 10px; }
.cg-k { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.cg-k.is-filled { background: var(--soft); }
.cg-k__h { display: flex; align-items: center; gap: 8px; } .cg-k__h b { font-size: 13.5px; }
.cg-k__h .i { width: 16px; height: 16px; color: var(--muted); } .cg-k__h .i:last-child:not(:first-child) { margin-left: auto; color: var(--ok); }
.cg-k > small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cg-k textarea { width: 100%; resize: vertical; padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.55; }
.cg-faq { display: grid; gap: 8px; }
.cg-faq__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cg-faq__row input { grid-column: 1; font-weight: 600; }
.cg-faq__row textarea { grid-column: 1; }
.cg-faq__row .ap-btn { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.cg-faq__add { justify-self: start; }
.cg-k__note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Inbouwen: staat hij al op de website? */
.cg-seen { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.cg-seen > .i { flex: none; width: 20px; height: 20px; color: var(--muted); }
.cg-seen > div { flex: 1; min-width: 0; } .cg-seen b { display: block; font-size: 13.5px; } .cg-seen small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cg-seen.is-ok { border-color: var(--ok-soft); background: var(--ok-soft); } .cg-seen.is-ok > .i { color: var(--ok); }
.cg-offnote { display: flex; gap: 8px; margin: 0 !important; } .cg-offnote .i { flex: none; }
.cg-pv__hint { margin-right: auto; font-size: 12.5px; color: var(--faint); }

@media (max-width: 1200px) { .cg-start ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .cg-dash { grid-template-columns: minmax(0, 1fr); } .cg-gaps { grid-row: auto; } }
@media (max-width: 900px) {
  .cgc { grid-template-columns: minmax(0, 1fr); }
  .cgc__list { position: static; }
  .cgc.has-sel .cgc__list { display: none; }
  .cgc:not(.has-sel) .cgc__detail { display: none; }
  .cgc__back { display: inline-flex !important; flex: none; }
  .cgc__head { flex-wrap: wrap; }
  .cgc__list ul, .cgc__msgs { max-height: none; }
}
@media (max-width: 640px) { .cg-start ol { grid-template-columns: minmax(0, 1fr); } .cg-pv__hint { display: none; } .cg-fix, .cg-msg { max-width: 100%; } .cg-bars { gap: 3px; } }

/* Concierge: overzicht in twee kolommen, lijsten blijven binnen hun kaart, gesprek op de gsm */
.cg-dash { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cg-dash__col { display: grid; gap: 16px; min-width: 0; }
.cg-gaps { grid-row: auto; }
.cg-hot ul, .cg-hot li, .cg-hot li a { min-width: 0; }
.cg-hot ul { grid-template-columns: minmax(0, 1fr); }
.cg-faq__row input.ap-in { font-size: 13.5px; height: 38px; }
.ap-mtop .ap-prod a .i { display: none; }
@media (max-width: 1000px) { .cg-dash { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .cgc__head { flex-direction: column; align-items: stretch; gap: 10px; }
  .cgc__head .cgc__back { align-self: flex-start; }
  .cgc__head > a.ap-btn { align-self: flex-start; }
}
/* Concierge: je bedrijf laten inlezen (website + internet) */
.cg-learn { display: grid; gap: 12px; padding: 16px; border: 1px solid #f1e2b4; border-radius: 16px; background: linear-gradient(180deg, var(--y-faint), var(--card)); }
.cg-learn__h { display: flex; gap: 12px; align-items: flex-start; }
.cg-learn__h > .i { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--y); color: var(--ink); }
.cg-learn h2 { margin: 0; font-size: 14.5px; } .cg-learn__h p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cg-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.cg-chk input { width: 16px; height: 16px; accent-color: var(--ink); }
.cg-chk input:disabled + span { color: var(--faint); }
.cg-learn__last { font-size: 12px; line-height: 1.45; color: var(--faint); }
.cg-prog { display: grid; gap: 6px; margin: 0; padding: 10px 12px; list-style: none; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.cg-prog li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cg-prog i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); }
.cg-prog li.is-busy { color: var(--ink); font-weight: 600; } .cg-prog li.is-busy i { border-color: var(--y) var(--y) var(--line) var(--line); animation: cgspin .8s linear infinite; }
.cg-prog li.is-ok { color: var(--ok-ink); } .cg-prog li.is-ok i { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.cg-prog li.is-err { color: var(--err); } .cg-prog li.is-err i { border-color: var(--err); }
@keyframes cgspin { to { transform: rotate(360deg); } }
/* Concierge-overzicht: raster van 2 x 2 met gelijke hoogtes, nette lege staat, voorbeeldgegevens */
.cg-dash2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.cg-dash2 > .cg-card { display: flex; flex-direction: column; }
.cg-dash2 > .cg-card > header { min-height: 44px; }
.cg-none2 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: var(--soft); text-align: center; }
.cg-none2 .i { width: 20px; height: 20px; color: var(--faint); }
.cg-none2 b { font-size: 13.5px; color: var(--ink); } .cg-none2 span { max-width: 300px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cg-dash2 .cg-gaps li:first-child, .cg-dash2 .cg-hot li:first-child a { border-top: 0; padding-top: 0; }
.cg-dash2 .cg-bars { flex: 1; min-height: 150px; }
.cg-demo-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13px; line-height: 1.45; color: var(--text); }
.cg-demo-note .i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.cg-demo-tag { flex: none; padding: 2px 9px; border-radius: 99px; background: var(--y-soft); color: var(--y-ink); font-style: normal; font-size: 11.5px; font-weight: 700; }
.cg-is-demo .cg-kpi b, .cg-is-demo .cg-card ul, .cg-is-demo .cg-bars { opacity: .82; }
.cg-is-demo .cg-gap__act .ap-btn:disabled { opacity: .6; cursor: default; }
.cg-is-demo .cg-hot li a { pointer-events: none; }
@media (max-width: 1000px) { .cg-dash2 { grid-template-columns: minmax(0, 1fr); } }
/* Concierge: Kennis en Inbouwen zonder voorbeeld, op volle breedte */
.cg-grid--one { grid-template-columns: minmax(0, 880px); }
.cg-grid--one { grid-template-columns: minmax(0, 1fr); }
.cg-pv__stage { height: min(760px, calc(100vh - 250px)); min-height: 420px; }

/* Koppelingen: je eigen calculator of formulier */
.ap-intake { display: grid; gap: 12px; }
.ap-intake__st { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sunken); font-size: 13px; color: var(--muted); }
.ap-intake__st .i { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.ap-intake__st.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
.ap-intake__how { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-intake__how > div { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.ap-intake__how b { font-size: 13.5px; } .ap-intake__how span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ap-intake__how .ap-btn { margin-top: auto; align-self: flex-start; }
.ap-intake pre.ap-code { white-space: pre-wrap; word-break: break-all; }
@media (max-width: 640px) { .ap-intake__how { grid-template-columns: 1fr; } }.ap-intg > .ap-intake { grid-column: 1 / -1; max-width: none; }
.ap-intake > p.ap-small { max-width: 720px; margin: 0; }
.ap-intake .ap-copyrow { max-width: 720px; }
.ap-intake__how { max-width: 720px; }

/* Documenten: waar maak je je facturen? */
.dset-inv .dset-invopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px 18px; }
.dset-invopts label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.dset-invopts label:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dset-invopts input { margin-top: 3px; accent-color: var(--ink); }
.dset-invopts b { display: block; font-size: 13.5px; } .dset-invopts small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 640px) { .dset-inv .dset-invopts { grid-template-columns: 1fr; } }.dset-inv { max-width: 978px; margin-bottom: 16px; }