/* ==========================================================================
   Mobella - herontwerp EnterTreatments.cshtml (portal/MakeAppointmentByEmployee)
   -------------------------------------------------------------------------
   Gebaseerd op de ECHTE code (Areas/Portal/Views/Portal/EnterTreatments.cshtml,
   Areas/Portal/Models/ProfessionalSearchViewModel.cs, TreatmentGroupRecord.cs
   en wwwroot/js/Portal/EnterTreatments.js).

   Belangrijk: de bestaande classes "bg-info" (niet gekozen) en "bg-success"
   (wel gekozen) worden NIET verwijderd - EnterTreatments.js wisselt deze
   classes om bij te houden of een behandeling is geselecteerd. Deze CSS
   voegt alleen de class "mob-treatment-row" toe (in de view) en overschrijft
   daarmee het uiterlijk, zonder de JS aan te raken.

   Plaats dit bestand in wwwroot/css/ en laad het NA bootstrap.css /
   mobellastyle.css.
   ========================================================================== */

:root{
  --mob-purple:#4c176e;
  --mob-mauve:#7c517a;
  --mob-mauve-tint:#f3ecf2;
  --mob-mauve-border:#e3d3e1;
  --mob-selected-tint:#ece4f5;
  --mob-selected-border:#c9b6dd;
  --mob-border:#e6e2ea;
  --mob-text-primary:#212529;
  --mob-text-secondary:#5f5e5a;
  --mob-text-muted:#8a8880;
  --mob-surface-1:#f8f7fa;
  --mob-surface-2:#ffffff;
  --mob-radius:10px;
}

/* ---------- Behandelingen-grid (vervangt col-12 col-md-6 col-lg-4,
   voorkomt dat een categorie met weinig items er "los" onder een andere
   categorie bij komt te hangen) ---------- */

#treatmentForms.mob-treatment-groups{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin:0 0 24px;
}
@media (min-width: 640px){
  #treatmentForms.mob-treatment-groups{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 992px){
  #treatmentForms.mob-treatment-groups{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- Categorie-koptekst met icoon (i.p.v. losse gecentreerde h5) ---------- */

.mob-treatment-group-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--mob-border);
}
.mob-treatment-group-header h5{
  font-size:15px;
  font-weight:600;
  color:var(--mob-purple);
  text-align:left;
  margin:0;
}
.mob-cat-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--mob-selected-tint);
  color:var(--mob-purple);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  flex-shrink:0;
}

/* ---------- "Toon meer" / "Toon minder" progressive disclosure per categorie ---------- */

/* 31-08-2026: .mob-treatment-row.row (regel ~219) won op specificiteit, dus stonden alle rijen altijd open en deed "Toon meer" niets. Daarom hier dezelfde klassen erbij. */
.mob-treatment-row.row.mob-extra-treatment{ display:none; }
.mob-treatment-row.row.mob-extra-treatment.mob-show{ display:flex; }
.mob-show-more-wrap{ text-align:center; margin:2px 0 4px; }
.mob-show-more-link{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:var(--mob-mauve);
  text-decoration:none;
  padding:6px 4px;
}
.mob-show-more-link:hover{ color:var(--mob-purple); text-decoration:underline; }

/* ---------- Lidvoordeel-banner (uitleg waarom sommige behandelingen dubbel voorkomen) ---------- */

.mob-member-banner{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--mob-mauve-tint);
  border:1px solid var(--mob-mauve-border);
  border-radius:var(--mob-radius);
  padding:10px 14px;
  margin:0 0 16px;
  font-size:13px;
  color:var(--mob-text-secondary);
}
.mob-member-banner .material-icons{ font-size:18px; color:var(--mob-mauve); flex-shrink:0; }

/* ---------- Sticky kop met lopende teller + categorie-navigatie, blijft bovenaan zichtbaar
   tijdens het scrollen zodat je niet naar beneden hoeft om je voortgang te zien ---------- */

.mob-sticky-top{
  position:sticky;
  top:0;
  z-index:15;
  background:var(--mob-surface-2);
  padding-top:4px;
  margin:0 -16px 8px;
  padding-left:16px;
  padding-right:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

/* ---------- Zoekveld voor behandelingen (live client-side filter) ---------- */

.mob-treatment-search{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--mob-surface-1);
  border:1px solid var(--mob-border);
  border-radius:999px;
  padding:8px 14px;
  margin:6px 0 4px;
}
.mob-treatment-search .material-icons{
  font-size:18px;
  color:var(--mob-text-muted);
  flex-shrink:0;
}
.mob-treatment-search input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  padding:0;
  font-size:14px;
  color:var(--mob-text-primary);
}
.mob-treatment-search input:focus{ outline:none; box-shadow:none; }
.mob-treatment-search-clear{
  border:none;
  background:none;
  padding:0;
  display:flex;
  align-items:center;
  cursor:pointer;
  flex-shrink:0;
}
.mob-treatment-search-clear .material-icons{
  font-size:16px;
  color:var(--mob-text-muted);
  margin:0;
}
.mob-treatment-search-clear:hover .material-icons{ color:var(--mob-purple); }

.mob-no-search-results{
  text-align:center;
  color:var(--mob-text-muted);
  font-size:14px;
  padding:20px 0;
}

/* Overschrijven de normale rij/groep-styling ongeacht welke display-waarde die zet, zodat het
   zoekfilter altijd wint - los van de bestaande mob-extra-treatment/mob-show toggle-status. */
.mob-search-hidden{ display:none !important; }
.mob-search-shown{ display:flex !important; }
.mob-sticky-top .mob-treatments-live-summary{
  margin-bottom:0;
  padding:8px 0;
}

/* Balk met teller + bevestig-knop naast elkaar bovenaan - zo kan je ook zonder scrollen naar
   beneden al doorgaan naar het kiezen van een moment. */
.mob-sticky-top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mob-sticky-top-bar .mob-treatments-live-summary{
  text-align:left;
  padding:8px 0;
  margin-bottom:0;
}
.mob-confirm-btn-top{
  flex-shrink:0;
  white-space:nowrap;
  border-radius:var(--mob-radius);
  background-color:var(--mob-purple);
  border-color:var(--mob-purple);
  padding:8px 16px;
  font-size:13px;
  font-weight:500;
}
.mob-confirm-btn-top:disabled{
  background-color:var(--mob-mauve-tint);
  border-color:var(--mob-mauve-border);
  color:var(--mob-text-muted);
}

/* ---------- Losse behandelingsregel (overschrijft .row.bg-info/.bg-success) ---------- */

.mob-treatment-row.row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 8px !important;
  padding:10px 12px;
  border-radius:var(--mob-radius);
  border:1px solid var(--mob-mauve-border);
  border-left:3px solid var(--mob-mauve-border);
  transition:border-color .12s, background-color .12s, box-shadow .12s;
}
.mob-treatment-row.row.bg-info{ background-color:var(--mob-mauve-tint) !important; }
.mob-treatment-row.row.bg-success{
  background-color:var(--mob-selected-tint) !important;
  border-color:var(--mob-selected-border);
  border-left-color:var(--mob-purple);
  box-shadow:0 2px 8px rgba(76,23,110,.08);
}

.mob-treatment-info{ text-align:left; min-width:0; }
.mob-treatment-name{
  display:block;
  font-size:14px;
  color:var(--mob-text-primary);
}
.mob-treatment-row.row.bg-success .mob-treatment-name{ color:var(--mob-purple); font-weight:600; }
.mob-treatment-price{
  display:block;
  font-size:13px;
  color:var(--mob-text-muted);
  margin-top:2px;
}
.mob-treatment-row.row.bg-success .mob-treatment-price{ color:var(--mob-mauve); }

/* ---------- Aantal-stepper (min / aantal / plus) ---------- */

.mob-qty-stepper{ gap:6px; flex-shrink:0; }
.mob-qty-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--mob-surface-2);
  border:1px solid var(--mob-mauve-border);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex-shrink:0;
}
.mob-qty-btn .material-icons{ font-size:18px; color:var(--mob-mauve); }
.mob-treatment-row.row.bg-success .mob-qty-btn.mob-qty-add{ background:var(--mob-purple); border-color:var(--mob-purple); }
.mob-treatment-row.row.bg-success .mob-qty-btn.mob-qty-add .material-icons{ color:#fff; }
.mob-qty-value{
  display:inline-block;
  min-width:16px;
  text-align:center;
  font-weight:600;
  color:var(--mob-purple);
  font-size:14px;
}

/* ---------- Bevestig-balk onderaan: vast op mobiel zodat de knop altijd
   bereikbaar is, ongeacht hoeveel behandelingen er staan ---------- */

#frmConfirmTreatments.mob-confirm-bar{
  position:sticky;
  bottom:0;
  background:var(--mob-surface-2);
  border-top:1px solid var(--mob-border);
  padding:14px 16px;
  margin:0 -16px;
  box-shadow:0 -4px 14px rgba(0,0,0,.05);
  z-index:20;
}
#frmConfirmTreatments.mob-confirm-bar #btnConfirmTreatments{
  width:100%;
  padding:14px;
  border-radius:var(--mob-radius);
  font-weight:500;
  background-color:var(--mob-purple);
  border-color:var(--mob-purple);
}
#frmConfirmTreatments.mob-confirm-bar #btnConfirmTreatments:disabled{
  background-color:var(--mob-mauve-tint);
  border-color:var(--mob-mauve-border);
  color:var(--mob-text-muted);
}

/* Lopende teller + totaalbedrag, in dezelfde sticky balk als de knop - zo blijft je
   voortgang zichtbaar terwijl je verder scrolt door de behandelingen. */
.mob-treatments-live-summary{
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:var(--mob-purple);
  margin-bottom:8px;
}

/* ---------- Categorie-snelnavigatie - blijft zichtbaar tijdens het scrollen (sticky),
   zodat hij ook echt als navigatie werkt i.p.v. alleen bovenaan de pagina te staan. ---------- */

.mob-cat-nav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:6px 0 10px;
}
.mob-cat-nav::-webkit-scrollbar{ display:none; }
.mob-cat-nav a{
  flex-shrink:0;
  font-size:13px;
  padding:8px 14px;
  border-radius:20px;
  border:1px solid var(--mob-border);
  color:var(--mob-text-secondary);
  text-decoration:none;
  white-space:nowrap;
}

/* ===== KIES-KNOP REDESIGN START (27-08-2026) =====
   Testers snapten de lege rondjes niet: het waren de min-knoppen, die altijd
   zichtbaar waren maar leeg zolang er niets gekozen was. Zolang een behandeling
   niet gekozen is (.bg-info) tonen we alleen nog een duidelijke knop "Kies";
   zodra er iets gekozen is (.bg-success) verschijnt de normale - 1 + teller.
   Terugdraaien: verwijder alles tussen START en END. */

.mob-treatment-row.bg-info .mob-qty-btn:not(.mob-qty-add),
.mob-treatment-row.bg-info .mob-qty-value {
    display: none !important;
}

.mob-treatment-row.bg-info .mob-qty-add .material-icons {
    display: none !important;
}

.mob-treatment-row.bg-info .mob-qty-add {
    width: auto !important;
    min-width: 68px;
    height: 34px;
    padding: 0 16px !important;
    border: 1.5px solid #5b3d8f !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.mob-treatment-row.bg-info .mob-qty-add::after {
    content: "Kies";
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    color: #5b3d8f;
}

.mob-treatment-row.bg-info .mob-qty-add:hover {
    background: #5b3d8f !important;
}

.mob-treatment-row.bg-info .mob-qty-add:hover::after {
    color: #fff;
}
/* ===== KIES-KNOP REDESIGN END ===== */