/* 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;
}