/* Redesign van het Wachtlijst/Wil-eerder afspraakformulier (Views/Calendar/AppointmentFormPartial.cshtml).
   Dit formulier wordt als modal geladen (#modAppointment, gedefinieerd in Views/Shared/CalendarModals.cshtml)
   en die modal wordt op meerdere plekken gebruikt: /Calendar, /Calendar/CreateAppointmentFromClient en
   /Employee/Agenda. Het zit dus BUITEN de .mob-appointment-page scope van
   mobella-CreateAppointment-redesign.css (die scope zit alleen om de pagina-inhoud van Index.cshtml, niet om
   de modal), en krijgt hier daarom zijn eigen scope + eigen kopie van dezelfde design-tokens (kleuren/radius/
   schaduw), zodat het overal waar deze modal verschijnt consistent oogt met de rest van de moderne pagina's.

   CSS-only: de enige markup-wijziging is het toevoegen van de class "mob-waitlist-form" aan de bestaande
   <form id="AppointmentForm">-tag in AppointmentFormPartial.cshtml (zelfde patroon als eerder .mob-appointment-page
   aan een bestaande wrapper-div is toegevoegd) - geen andere HTML/JS-wijzigingen, om te voorkomen dat de
   uitgebreide bestaande JS-logica die op specifieke ID's/structuur leunt (UserInput, formChanged, etc.) breekt.
   De gele/grijze/lavendel achtergrondkleuren (Common.AppointmentColor / WaitinglistAppointmentColorFullAlpha /
   WantsEarlierColor) blijven functioneel de status aangeven (nieuwe afspraak / wachtlijst / wil eerder) en
   worden bewust behouden, maar in een rustiger/moderner jasje. */

.mob-waitlist-form{
  --mwf-purple:#4c176e;
  --mwf-accent:#805bc1;
  --mwf-border:#ece8f0;
  --mwf-text-primary:#241a2b;
  --mwf-text-secondary:#655e6b;
  --mwf-text-muted:#9891a0;
  --mwf-surface-1:#faf9fb;
  --mwf-surface-2:#ffffff;
  --mwf-radius-lg:18px;
  --mwf-radius:14px;
  --mwf-radius-sm:10px;
  --mwf-radius-pill:999px;
  --mwf-shadow-sm:0 1px 2px rgba(76,23,110,.06);
  --mwf-yellow:#fff9d6;
  --mwf-yellow-border:#f0e6a0;

  background-color:var(--mwf-yellow) !important;
  border-radius:var(--mwf-radius-lg);
  border:1px solid var(--mwf-yellow-border);
  padding:18px !important;
  font-size:13.5px;
  color:var(--mwf-text-primary);
}

/* Labels: uppercase, klein, gedempt - zelfde stijl als de rest van de site (mobella-CreateAppointment-redesign.css) */
.mob-waitlist-form label,
.mob-waitlist-form .control-label,
.mob-waitlist-form .form-check-label{
  font-size:10.5px;
  color:var(--mwf-text-secondary);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
  margin-bottom:4px;
}

/* Inputs/selects/textareas */
.mob-waitlist-form .form-control,
.mob-waitlist-form .form-select{
  border-radius:var(--mwf-radius-sm) !important;
  border-color:var(--mwf-border);
  font-size:13.5px;
  background-color:var(--mwf-surface-2);
}
.mob-waitlist-form .form-control:focus,
.mob-waitlist-form .form-select:focus{
  border-color:var(--mwf-accent);
  box-shadow:0 0 0 .15rem rgba(128,91,193,.18);
}
.mob-waitlist-form .form-control:disabled,
.mob-waitlist-form .form-control[readonly]{
  background-color:var(--mwf-surface-1);
  color:var(--mwf-text-muted);
}

/* "Wachtlijst"/"Wil eerder"-knoppen: pill-vorm i.p.v. hoekige Bootstrap-knop. De inline achtergrondkleur die
   AppointmentFormPartial.cshtml op de "Wil eerder"-knop zet (Common.WantsEarlierColor) blijft functioneel
   (die geeft de knop zijn eigen herkenbare lavendel-tint) en wordt hier bewust niet overschreven. */
.mob-waitlist-form #btnWaitinglist,
.mob-waitlist-form #btnWantsEarlier{
  border-radius:var(--mwf-radius-pill) !important;
  font-weight:600;
  border:1px solid var(--mwf-border) !important;
  padding:10px 18px;
  transition:filter .15s ease;
}
.mob-waitlist-form #btnWaitinglist:hover,
.mob-waitlist-form #btnWantsEarlier:hover{
  filter:brightness(0.96);
}

/* De grijze "Wachtlijst"- en lavendel "Wil eerder"-subpanelen: rustig kader i.p.v. vlak gekleurd blok */
.mob-waitlist-form > .p-2[style*="background-color"]{
  border-radius:var(--mwf-radius) !important;
  border:1px solid var(--mwf-border);
  margin-bottom:12px;
}
.mob-waitlist-form > .p-2[style*="background-color"] h5{
  font-size:13px;
  font-weight:700;
  color:var(--mwf-purple);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:10px;
}

/* Klant-geschiedenis-knop: ronde paarse icoonknop i.p.v. standaard groene Bootstrap-knop */
.mob-waitlist-form .btn-success{
  background-color:var(--mwf-purple) !important;
  border-color:var(--mwf-purple) !important;
  border-radius:var(--mwf-radius-pill) !important;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(76,23,110,.25);
}

/* Contactinfo (telefoon/mobiel/e-mail) als nette chips i.p.v. losse iconen op een rij */
.mob-waitlist-form #divClientContactInfo{
  gap:8px;
}
.mob-waitlist-form #divClientContactInfo > div{
  display:flex;
  align-items:center;
  gap:5px;
  background-color:var(--mwf-surface-2);
  border:1px solid var(--mwf-border);
  border-radius:var(--mwf-radius-pill);
  padding:6px 14px;
}
.mob-waitlist-form #divClientContactInfo .material-icons{
  font-size:16px;
  color:var(--mwf-purple);
}
.mob-waitlist-form #divClientContactInfo a{
  color:var(--mwf-text-primary);
  text-decoration:none;
  font-size:12.5px;
}
.mob-waitlist-form #divClientContactInfo a:hover{
  color:var(--mwf-purple);
}

/* "Belangrijk (alleen zichtbaar voor planners!)"-tekstvak: zachter rood, ronde hoeken i.p.v. felle Bootstrap alert-danger */
.mob-waitlist-form .importanttextbox{
  border-radius:var(--mwf-radius-sm) !important;
  background-color:#fdf1f1 !important;
  border:1px solid #f3d4d4 !important;
  color:#8a2b2b;
}

/* Radio's (Ambulant/Salon, Alleen door mij/Geen voorkeur) als nette pill-toggle i.p.v. kale Bootstrap-radio's */
.mob-waitlist-form .form-check-inline,
.mob-waitlist-form .form-check{
  background-color:var(--mwf-surface-2);
  border:1px solid var(--mwf-border);
  border-radius:var(--mwf-radius-pill);
  padding:6px 14px 6px 10px;
  margin-right:8px;
  display:inline-flex;
  align-items:center;
}
.mob-waitlist-form .form-check-input:checked{
  background-color:var(--mwf-purple);
  border-color:var(--mwf-purple);
}
.mob-waitlist-form .form-check-label{
  margin-bottom:0;
  text-transform:none;
  font-weight:500;
  font-size:12.5px;
  color:var(--mwf-text-primary);
  letter-spacing:normal;
}

/* "Datum/Van/tot/Afkomst" en "Herhaal"- en reistijdvelden: subtiel kader zodat ze als groep herkenbaar zijn,
   zonder de bestaande grid-structuur/ID's aan te passen. */
.mob-waitlist-form #divTimeInfo,
.mob-waitlist-form #divRepeat,
.mob-waitlist-form #divTravelInfo{
  background-color:var(--mwf-surface-2);
  border:1px solid var(--mwf-border);
  border-radius:var(--mwf-radius);
  padding:12px 12px 2px 12px !important;
  margin-left:1px;
  margin-bottom:14px;
}

/* "Leeg laten voor oneindig herhalen"-hint en andere cursieve hints: minder schreeuwerig */
.mob-waitlist-form [style*="font-style:italic"]{
  color:var(--mwf-text-muted);
  font-size:11.5px;
}

/* Iets meer lucht tussen rijen, in lijn met de rest van de moderne pagina's */
.mob-waitlist-form .row{
  margin-bottom:10px;
}


/* ===== AFSPRAAKSCHERM KLEUR EN LEESBAARHEID START (27-08-2026) =====
   Verzoek Dennis: het geel weg en een kleur in de stijl van de rest van de
   software, plus een groter en duidelijker lettertype. Het geel zat al in een
   variabele, dus dit is puur een herdefinitie - geen nieuwe opmaakregels.
   Geldt voor de pop-up in de agenda en voor CreateAppointmentFromClient,
   want beide gebruiken AppointmentFormPartial. Dus ook gelijk voor
   professional en planner.
   Terugdraaien: alles tussen START en END weghalen. */

.mob-waitlist-form{
    --mwf-yellow:#f4f1f9;
    --mwf-yellow-border:#e4dcf0;
    font-size:15px;
}

.mob-waitlist-form label{
    font-size:12px;
    color:var(--mwf-text-secondary);
}

.mob-waitlist-form .form-control,
.mob-waitlist-form .form-select,
.mob-waitlist-form input{
    font-size:14.5px;
}

.mob-waitlist-form .form-check-label{
    font-size:14px;
}

/* ===== AFSPRAAKSCHERM KLEUR EN LEESBAARHEID END ===== */




/* ===== AFSPRAAKSCHERM TYPOGRAFIE START (27-08-2026, opnieuw gedaan met het scherm erbij) =====
   Eerste poging raakte alleen label-elementen en invoervelden, waardoor er een
   allegaartje ontstond. Gemeten in het echte scherm stonden er zes maten door
   elkaar: 10,5px (control-label), 11,5px (cursieve hint), 12,5px (links),
   15px (vinkje-labels), 15,5px (waarden) en 18px (de knoppen Wachtlijst en
   Wil eerder). Nu nog twee: 12,5px voor labels en hints, 15,5px voor alles wat
   waarde of knop is. Iconen blijven ongemoeid.
   De labels stonden bovendien 10,5px grijs; die zijn nu donker en vet, en
   springen even ver in als de tekst in het veld eronder.
   Terugdraaien: alles tussen START en END weghalen. */

.mob-waitlist-form{
    font-size:15.5px;
    color:var(--mwf-text-primary);
}

.mob-waitlist-form .control-label{
    font-size:12.5px;
    font-weight:700;
    color:var(--mwf-text-primary);
    letter-spacing:.02em;
    padding-left:13.5px;
    margin-bottom:4px;
}

.mob-waitlist-form .form-control,
.mob-waitlist-form .form-select,
.mob-waitlist-form textarea{
    font-size:15.5px;
}

.mob-waitlist-form .form-control:not([readonly]),
.mob-waitlist-form .form-select,
.mob-waitlist-form textarea{
    color:var(--mwf-text-primary);
}

.mob-waitlist-form .form-check-label{
    font-size:15.5px;
    color:var(--mwf-text-primary);
}

.mob-waitlist-form .btn{
    font-size:15.5px;
}

.mob-waitlist-form [style*="font-style:italic"],
.mob-waitlist-form em,
.mob-waitlist-form i:not(.material-icons){
    font-size:12.5px;
}


.mob-waitlist-form .btn span{
    font-size:inherit;
}

.mob-waitlist-form input:not([type=checkbox]):not([type=radio]){
    font-size:15.5px;
}

/* ===== AFSPRAAKSCHERM TYPOGRAFIE END ===== */


/* ===== AFSPRAAKSCHERM CONTRAST EN UITLIJNING START (27-08-2026) =====
   Drie punten van Dennis:
   1. De waarden in de alleen-lezen velden (reistijd, reisafstand) waren zo licht
      dat ze nauwelijks te lezen waren. Nu donkerder, maar nog steeds lichter dan
      een veld waar je wel in kunt typen, zodat dat verschil zichtbaar blijft.
   2. Het blok "Belangrijk (alleen zichtbaar voor planners)" moest roder.
   3. De uitlijning: "Reisafstand voor" past niet op een regel en viel over twee
      regels, waardoor dat invoerveld lager stond dan de drie ernaast. Labels
      krijgen nu de hoogte van twee regels, dus de velden staan altijd op een lijn,
      of het label nu een of twee regels beslaat.
   Terugdraaien: alles tussen START en END weghalen. */

.mob-waitlist-form .control-label{
    min-height:2.4em;
}

.mob-waitlist-form .form-control[readonly],
.mob-waitlist-form input[readonly],
.mob-waitlist-form input:disabled,
.mob-waitlist-form .form-control:disabled{
    color:#565060;
    -webkit-text-fill-color:#565060;
    opacity:1;
}

.mob-waitlist-form .importanttextbox,
.mob-waitlist-form textarea.importanttextbox{
    color:#b3261e;
    -webkit-text-fill-color:#b3261e;
    border-color:#e2a49e;
    background-color:#fdeeec;
    font-weight:500;
}

/* ===== AFSPRAAKSCHERM CONTRAST EN UITLIJNING END ===== */

/* ===== NASLAG OP CONTRAST EN UITLIJNING START (27-08-2026) =====
   1. min-height van 2,4em was net te krap: een label van twee regels werd 38px
      en duwde zijn veld 5px omlaag. Met een vaste regelhoogte klopt het wel.
   2. Het Belangrijk-blok verloor van de readonly-regel, die specifieker is.
      Daarom hier met !important, en meteen buiten de pop-up ook, zodat het
      blok in het linkerpaneel dezelfde rode tint krijgt.
   Terugdraaien: alles tussen START en END weghalen. */
.mob-waitlist-form .control-label{
    line-height:1.25;
    min-height:2.5em;
}
.importanttextbox{
    color:#b3261e !important;
    -webkit-text-fill-color:#b3261e !important;
    background-color:#fdeaea !important;
    border-color:#e6a8a8 !important;
}
/* ===== NASLAG OP CONTRAST EN UITLIJNING END ===== */

/* ===== REISVELDEN OP EEN LIJN START (27-08-2026) =====
   Reisafstand voor loopt over twee regels en zijn veld bleef daardoor 5px
   verschoven. De rij zelf (#divTravelInfo) lijnt nu op de onderkant uit, dus
   de vier velden staan op een lijn hoe lang het label ook is. Bewust alleen
   deze rij: de Herhaal-rij heeft een hint onder Tot en moet juist bovenaan
   uitlijnen.
   Terugdraaien: alles tussen START en END weghalen. */
.mob-waitlist-form #divTravelInfo{
    align-items:flex-end;
}
/* ===== REISVELDEN OP EEN LIJN END ===== */

/* ===================================================================
   Issue 189 - het afsprakenformulier in losse blokken (05-09-2026).
   Wens van Dennis: het scherm oogt als een groot blok terwijl het vier
   losse blokken zijn. Kaarten met een kopbalk, uitklapmenus die ALTIJD
   dicht staan (ook als er iets in staat - de planner bepaalt zelf wat
   ze openklapt), en meer contrast op de veldranden.
   De id's en klassen in de views zijn bewust ongemoeid gelaten:
   Calendar.js doet show()/hide() op #divTimeInfo, #divTravelInfo,
   .divCorrection, #divClientExtra en #divClientImportantExtra.
   =================================================================== */
.mob-ab-blok{
  background:#fff;
  border:1px solid #cec6de;
  border-radius:16px;
  margin:0 0 14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(36,24,48,.05);
}
.mob-ab-kop{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  background:#faf9fc;
  border-bottom:1px solid #cec6de;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  color:#3d1a58;
}
.mob-ab-kop .mob-ab-tel{
  margin-left:auto;
  font-size:12px;
  font-weight:500;
  color:#585070;
}
.mob-ab-body{padding:14px 16px 4px}
.mob-ab-body > .row:last-child{margin-bottom:0}

/* Uitklapper. Staat altijd dicht bij het openen van het scherm. */
details.mob-ab-uit{
  border-top:1px solid #cec6de;
  background:#fff;
}
details.mob-ab-uit > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  font-size:13.5px;
  font-weight:700;
  color:#3d1a58;
  user-select:none;
}
details.mob-ab-uit > summary::-webkit-details-marker{display:none}
details.mob-ab-uit > summary::before{
  content:"\203A";
  display:inline-block;
  width:14px;
  text-align:center;
  font-size:19px;
  line-height:1;
  transform:rotate(90deg);
  transition:transform .15s ease;
}
details.mob-ab-uit[open] > summary::before{transform:rotate(-90deg)}
details.mob-ab-uit > summary:hover{background:#faf9fc}
details.mob-ab-uit > .mob-ab-uitbody{padding:0 16px 10px}

/* Meer contrast: de veldrand was #ece8f0 en viel weg tegen het wit. */
.mob-waitlist-form .mob-ab-blok .form-control,
.mob-waitlist-form .mob-ab-blok .form-select,
.mob-ab-blok .form-control,
.mob-ab-blok .form-select{
  border-width:1.5px;
  border-color:#9c88bd;
  min-height:42px;
}
.mob-waitlist-form .mob-ab-blok .form-control:disabled,
.mob-waitlist-form .mob-ab-blok .form-control[readonly],
.mob-ab-blok .form-control:disabled,
.mob-ab-blok .form-control[readonly]{
  border-color:#cec6de;
  background-color:#f5f3f8;
}
.mob-ab-blok .control-label{color:#585070}

/* Aantekening bij de klant: vaste hoogte, scrollt van binnen.
   Een lange aantekening mag het blok niet uit elkaar trekken. */
.mob-ab-blok textarea#ClientExtra,
.mob-ab-blok textarea#ClientImportantExtra{
  height:118px;
  min-height:118px;
  overflow-y:auto;
  resize:vertical;
  line-height:1.45;
}
.mob-ab-blok textarea#Description{
  min-height:96px;
  resize:vertical;
}

/* Uitklapper voor het correctieblok. Hier kan geen <details> omdat elke rij
   links een invulveld en rechts een totaal heeft: de totalen moeten zichtbaar
   blijven, de invulvelden niet. Daarom een schakelaar die alleen de linker
   kolommen toont. De klasse divCorrection blijft overal staan, zodat
   Calendar.js het hele blok kan blijven tonen en verbergen. */
.mob-ab-tgl{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.mob-ab-tgl-lab{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 -16px 6px;
  padding:10px 16px;
  border-top:1px solid #cec6de;
  border-bottom:1px solid #cec6de;
  cursor:pointer;
  font-size:13.5px;
  font-weight:700;
  color:#3d1a58;
  user-select:none;
}
.mob-ab-tgl-lab:hover{background:#faf9fc}
.mob-ab-tgl-lab::before{
  content:"\203A";
  display:inline-block;
  width:14px;
  text-align:center;
  font-size:19px;
  line-height:1;
  transform:rotate(90deg);
  transition:transform .15s ease;
}
.mob-ab-tgl:checked ~ .mob-ab-tgl-lab::before{transform:rotate(-90deg)}
.mob-ab-tgl:not(:checked) ~ .row .mob-ab-corrveld{display:none}
.mob-ab-tgl:not(:checked) ~ .row .mob-ab-corrtotaal{flex:0 0 100%;max-width:100%}

/* --- Bijgeschaafd na de eerste blik van Dennis op test (05-09) ---
   1. De groepskaders om Datum/Van/Tot, Herhaal en de reisvelden komen uit de
      vorige redesign. Binnen een kaart zijn ze dubbelop: een kader in een
      kader, en de rijen lijnen niet meer op een lijn uit. Binnen .mob-ab-blok
      gaan ze eruit; de kaart doet dat werk nu.
   2. Onder het laatste veld stond maar 4px tot de kaartrand.
   3. Telefoon en e-mail stonden als een brede grijze pil midden in het blok.
      De pil-opmaak trof de kolom in plaats van de losse chips. Nu een kader
      gelijk aan de andere velden, links uitgelijnd, met zichtbare links. */
.mob-ab-body #divTimeInfo,
.mob-ab-body #divRepeat,
.mob-ab-body .divTravelInfo,
.mob-ab-uitbody #divRepeat{
  background:none;
  border:0;
  padding:0 !important;
  margin-left:0;
  margin-right:0;
}
.mob-ab-body{padding:14px 16px}
.mob-ab-body > .row{margin-bottom:14px}
.mob-ab-body > .row:last-child{margin-bottom:0}

/* Telefoon, mobiel en e-mail: een kader gelijk aan de andere velden. */
.mob-ab-body #divClientContactInfo{
  margin-left:0;
  margin-right:0;
  margin-bottom:14px;
}
.mob-ab-body #divClientContactInfo > div{
  justify-content:flex-start !important;
  flex-wrap:wrap;
  gap:8px 22px;
  min-height:42px;
  padding:6px 12px;
  background:#fff;
  border:1.5px solid #9c88bd;
  border-radius:10px;
}
.mob-ab-body #divClientContactInfo > div > div{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  background:none;
  border:0;
}
.mob-ab-body #divClientContactInfo a{
  font-size:14px;
  text-decoration:underline;
}
.mob-ab-body #divClientContactInfo a:empty{display:none}

/* De knop naar de afsprakenhistorie stond halverwege het label te zweven;
   nu lijnt hij onderaan uit met het invoerveld ernaast. */
.mob-ab-body a.btn.mt-4{
  align-self:flex-end;
  margin-top:0;
}

/* Ambulant/Salon en het adres op een lijn, adres in een eigen vlak. */
.mob-ab-body #divLocationInfo{
  margin-left:0;
  margin-right:0;
  align-items:center;
}
.mob-ab-body #divClientAddress{
  background:#ece4f5;
  border-radius:10px;
  padding:10px 14px;
  line-height:1.35;
}

/* De schakelaar Correctie door korting hoort onder de totalen te staan, net
   zoals Herhaal onder het afspraakblok. In de HTML moet hij vooraan staan
   (de CSS-schakelaar werkt alleen vooruit), dus hier zetten we hem visueel
   naar onderen. */
.mob-ab-blok.divCorrection > .mob-ab-body{
  display:flex;
  flex-direction:column;
}
.mob-ab-blok.divCorrection > .mob-ab-body > .row{order:1}
.mob-ab-blok.divCorrection > .mob-ab-body > .mob-ab-tgl-lab{
  order:2;
  margin:10px -16px -14px;
  border-bottom:0;
}

/* Behandelingen en producten: de container is zelf de kaart, want Calendar.js
   vult hem aan met losse regels. Vandaar de padding op de directe kinderen
   in plaats van een body-div. */
.mob-ab-lijst > *{padding-left:16px;padding-right:16px}
.mob-ab-lijst > *:last-child{padding-bottom:12px}
.mob-ab-lijst > .mob-ab-kop{margin-bottom:8px}
details.mob-ab-lijst{border-top:1px solid #cec6de}
details.mob-ab-lijst > summary{padding-left:16px;padding-right:16px}
.mob-ab-lijst hr{margin:10px 0;border-color:#cec6de}
.mob-ab-lijst h5{font-size:14px;font-weight:700;color:#3d1a58;margin:0 0 6px}

/* De behandelings- en productregels staan buiten <form id="AppointmentForm">,
   dus de labelopmaak van de vorige redesign raakt ze niet. Hier gelijkgetrokken. */
.mob-ab-lijst .control-label{
  display:block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#585070;
  margin-bottom:4px;
}
.mob-ab-lijst .form-control,
.mob-ab-lijst .form-select{
  border:1.5px solid #9c88bd;
  border-radius:10px;
  min-height:42px;
  font-size:13.5px;
}

/* --- Derde ronde (05-09) ---
   Adres onder telefoon en e-mail, in hetzelfde soort kader: de klantgegevens
   bij elkaar. De adreskolom is de enige col-lg-5 in die rij. */
.mob-ab-body #divLocationInfo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-left:0;
  margin-right:0;
}
.mob-ab-body #divLocationInfo > .col-lg-5{
  order:-1;
  flex:0 0 100%;
  max-width:100%;
  padding-left:0;
  padding-right:0;
  margin-bottom:14px;
}
.mob-ab-body #divClientAddress{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  background:#fff;
  border:1.5px solid #9c88bd;
  border-radius:10px;
  padding:9px 12px;
}

/* Reisvelden op volgorde reistijd voor - reistijd na - afstand voor - afstand
   na, met de eenheid in het veld en het vinkje Reistijd negeren op dezelfde
   regel. */
.mob-ab-body .divTravelInfo{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
}
.mob-ab-body .divTravelInfo > div{flex:1 1 110px}
.mob-ab-body .divTravelInfo > div:nth-child(1){order:1}
.mob-ab-body .divTravelInfo > div:nth-child(2){order:3}
.mob-ab-body .divTravelInfo > div:nth-child(3){order:2}
.mob-ab-body .divTravelInfo > div:nth-child(4){order:4}
.mob-ab-body .divTravelInfo .form-group{position:relative}
.mob-ab-body .divTravelInfo .form-group::after{
  position:absolute;
  right:12px;
  bottom:13px;
  font-size:12px;
  color:#585070;
  pointer-events:none;
}
.mob-ab-body .divTravelInfo > div:nth-child(1) .form-group::after,
.mob-ab-body .divTravelInfo > div:nth-child(3) .form-group::after{content:"min"}
.mob-ab-body .divTravelInfo > div:nth-child(2) .form-group::after,
.mob-ab-body .divTravelInfo > div:nth-child(4) .form-group::after{content:"km"}
.mob-ab-body .divTravelInfo > div .form-control{padding-right:38px}
.mob-ab-body .divTravelInfo > .mob-ab-negeer{
  order:5;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:10px;
  white-space:nowrap;
}
.mob-ab-body .mob-ab-negeer .form-check-label{
  margin:0;
  font-size:12.5px;
  font-weight:600;
  text-transform:none;
  letter-spacing:normal;
}

/* Totalen is nu zelf een uitklapper; de kopbalk is de summary. */
details.mob-ab-tot > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
}
details.mob-ab-tot > summary::-webkit-details-marker{display:none}
details.mob-ab-tot > summary::after{
  content:"\203A";
  margin-left:auto;
  width:14px;
  text-align:center;
  font-size:19px;
  line-height:1;
  transform:rotate(90deg);
  transition:transform .15s ease;
}
details.mob-ab-tot[open] > summary::after{transform:rotate(-90deg)}
details.mob-ab-tot > summary:hover{background:#f3f0f8}

/* Het betaalmiddelblok van de professional zat met p-2 (8px) tegen de rand.
   Meer lucht, en de labels lijnen uit met de velden (de control-label had
   13,5px extra inspringing uit de vorige redesign). */
#AppointmentForm .divFinance,
#AppointmentOccurenceForm .divFinance{
  padding:16px !important;
  border-radius:16px;
}
#AppointmentForm .divFinance .control-label,
#AppointmentOccurenceForm .divFinance .control-label{padding-left:0}

/* --- Vierde ronde (05-09), betaalmiddelblok van de professional ---
   Het vinkje bij "Klant weigert om te betalen" zakte onder het label door.
   Label en vinkje blijven nu op een regel, en het vak met het betaalmiddel is
   op een breed scherm wat smaller zodat de twee opties ernaast passen. */
#AppointmentForm .divFinance .mf-betaalstatus .form-group,
#AppointmentOccurenceForm .divFinance .mf-betaalstatus .form-group{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
}
#AppointmentForm .divFinance .mf-betaalstatus .form-check-label,
#AppointmentOccurenceForm .divFinance .mf-betaalstatus .form-check-label{margin:0}
#AppointmentForm .divFinance .mf-betaalstatus input[type="checkbox"],
#AppointmentOccurenceForm .divFinance .mf-betaalstatus input[type="checkbox"]{
  flex:0 0 auto;
  margin:0;
}
@media (min-width:992px){
  #AppointmentForm .divFinance > .row > .col-lg-4:first-child,
  #AppointmentOccurenceForm .divFinance > .row > .col-lg-4:first-child{
    flex:0 0 24%;
    max-width:24%;
  }
  #AppointmentForm .divFinance > .row > .mf-betaalstatus,
  #AppointmentOccurenceForm .divFinance > .row > .mf-betaalstatus{
    flex:0 0 38%;
    max-width:38%;
  }
}

/* De hint "Schatting gereden kilometers" was grijs (die kleur komt van de
   cursieve-hint-regel uit de vorige redesign); in dit blok gewoon zwart. */
#AppointmentForm .divFinance [style*="font-style:italic"],
#AppointmentOccurenceForm .divFinance [style*="font-style:italic"]{
  color:#1d1228;
}

/* De knoprij en de uitklapper Factuurgeschiedenis staan nu strak onder elkaar,
   want de kop met het icoon is in dit scherm weg. */
#AppointmentForm .divFinance .row.mb-3:last-of-type,
#AppointmentOccurenceForm .divFinance .row.mb-3:last-of-type{margin-bottom:6px !important}

/* Ambulant en Salon: meer lucht in en tussen de knoppen. */
.mob-ab-blok .form-check-inline,
.mob-ab-blok .form-check{
  padding:9px 18px 9px 14px;
  margin-right:14px;
  margin-bottom:6px;
  gap:9px;
}

/* Keuzelijsten zien er in dit scherm uit als een gewoon invoervak. Zelfde
   pijltje als in wwwroot/css/mobella-select-pijl.css (MyFinance en Mijn
   instellingen), maar hier begrensd tot de blokken van het afsprakenscherm -
   in lijn met het besluit van 05-09 om dit per scherm te doen. */
.mob-ab-blok select.form-control,
#AppointmentForm .divFinance select.form-control,
#AppointmentOccurenceForm .divFinance select.form-control{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235C5870' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:15px;
}

/* ===== BEHANDELINGS- EN PRODUCTENLIJST NIET AFKNIPPEN START (07-09-2026) =====
Melding van de planners op live: bij de tweede behandeling valt het keuzelijstje
half weg en je kunt niet scrollen. Bij producten net zo.
Oorzaak: .mob-ab-blok heeft overflow:hidden voor de ronde hoeken, en dat knipt
ook het keuzelijstje af dat onder het invoerveld uitklapt. Wat overblijft is een
streepje van een regel; scrol je daarop, dan gaat het wieltje in die vrijwel
onzichtbare lijst in plaats van in de pagina. Vandaar beide klachten.
Alleen de twee kaarten met een lijst krijgen overflow:visible; de andere blokken
blijven ongemoeid. De ronde bovenhoeken komen daarom op de kopbalk zelf te
staan, want dat is het enige kind met een eigen achtergrond.
Terugdraaien: alles tussen START en END weghalen. */
.mob-ab-blok.mob-ab-lijst{overflow:visible}
.mob-ab-blok.mob-ab-lijst > .mob-ab-kop{
border-top-left-radius:16px;
border-top-right-radius:16px;
}
/* ===== BEHANDELINGS- EN PRODUCTENLIJST NIET AFKNIPPEN END ===== */