/* ==========================================================================
   Mobella - herontwerp MakeAppointment.cshtml (portal/MakeAppointment)
   -------------------------------------------------------------------------
   Behandelingen-overzicht (TreatmentsSummaryPartial) en de "zoek beste optie"
   / "volledige agenda"-keuze. Gebruikt dezelfde kleurvariabelen als
   mobella-EnterTreatments-redesign.css / mobella-Portal-Index-redesign.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;
}

/* ---------- Kaart-layout (herontwerp obv gedeeld voorbeeld) ---------- */

.mob-appointment-card{
  max-width:640px;
  margin:0 auto 16px;
  background:var(--mob-surface-2);
  border:1px solid var(--mob-border);
  border-radius:16px;
  padding:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}

/* ---------- Professional-kop (EmployeeShortInfo) ---------- */

.mob-employee-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.mob-employee-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:2px solid var(--mob-mauve-tint);
}
.mob-employee-header-text h5{
  margin:0;
  font-weight:700;
  font-size:18px;
  color:var(--mob-text-primary);
}
.mob-employee-function{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:2px;
  font-size:13px;
  color:var(--mob-text-muted);
}
.mob-employee-function .material-icons{ font-size:16px; color:var(--mob-mauve); }

/* ---------- Behandelingen-overzicht (TreatmentsSummaryPartial) ---------- */

.mob-treatments-summary{
  margin:0 0 20px;
  background:var(--mob-surface-1);
  border:1px solid var(--mob-border);
  border-radius:var(--mob-radius);
  padding:14px 16px;
}
.mob-treatments-summary-label-header{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--mob-purple);
  margin-bottom:6px;
}
/* Wijzig-behandeling-linkje (zie briefing/taak #122) - subtiel, geen uppercase/tracking van de
   headerlabel zelf, alleen het potlood-icoontje. */
.mob-treatments-summary-edit-link{
  color:var(--mob-mauve);
  display:inline-flex;
  align-items:center;
  text-transform:none;
  letter-spacing:normal;
}
.mob-treatments-summary-edit-link .material-icons{
  font-size:16px;
}
.mob-treatments-summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--mob-text-secondary);
  padding:6px 0;
}
.mob-treatments-summary-label{ display:flex; align-items:center; gap:8px; text-align:left; }
.mob-treatments-summary-icon{ font-size:18px; color:var(--mob-mauve); flex-shrink:0; }
.mob-treatments-summary-amount{ white-space:nowrap; color:var(--mob-text-primary); }
.mob-treatments-summary-total{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid var(--mob-border);
  font-weight:600;
  color:var(--mob-purple);
  font-size:15px;
}

/* ---------- Sectiekop met icoon ("Boek eenvoudig een afspraak.") ---------- */

.mob-section-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 14px;
}
.mob-section-header .material-icons{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--mob-selected-tint);
  color:var(--mob-purple);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.mob-section-header h5{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--mob-text-primary);
}

/* ---------- Zoek beste optie / volledige agenda ---------- */

#divBestOptions, #divFullAgenda{
  margin:0 auto;
}

/* Rij met zoekknop + "zoek vanaf"-select - los van elkaar met duidelijke ruimte i.p.v. tegen
   elkaar aan geplakt, en op smalle schermen breekt de select gewoon naar een nieuwe regel. */
.mob-search-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
}
.mob-search-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:var(--mob-radius);
  background-color:var(--mob-purple);
  border-color:var(--mob-purple);
  padding:11px 18px;
  font-weight:500;
}
.mob-search-btn .material-icons{ font-size:18px; }
.mob-search-from{
  display:flex;
  align-items:center;
  gap:8px;
}
.mob-search-from label{
  margin:0;
  font-size:14px;
  color:var(--mob-text-secondary);
  white-space:nowrap;
}
.mob-search-from select{
  width:auto;
  min-width:130px;
}

#lnkShowFullAgenda, #lnkShowBestOptions{
  color:var(--mob-purple);
  font-size:14px;
  text-decoration:underline;
}

/* ---------- Beschikbare momenten: 3 beste opties als kaarten ---------- */

.mob-best-options-grid{
  align-items:stretch !important;
}
.mob-best-option-card{
  flex:1 1 160px;
  min-width:160px;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px;
  border:1px solid var(--mob-border);
  border-radius:var(--mob-radius);
  padding:14px 16px;
  background:var(--mob-surface-2);
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.mob-best-option-card:hover{
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  border-color:var(--mob-option-color, var(--mob-mauve-border));
}
.mob-best-option-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:color-mix(in srgb, var(--mob-option-color, var(--mob-purple)) 16%, white);
  color:color-mix(in srgb, var(--mob-option-color, var(--mob-purple)) 75%, black);
}
.mob-best-option-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--mob-text-primary);
}
.mob-best-option-row .material-icons{
  font-size:16px;
  color:var(--mob-purple);
}
/* Reistijd voor/na op het kaartje (zie briefing/taak #114-#118,120) - zelfde opzet als de interne
   Calendar-pagina (mobella-best-option-cards.css), maar met de portal-eigen themavariabelen. */
.mob-best-option-traveltime{
  font-size:12px;
  color:var(--mob-text-secondary, #655e6b);
  gap:4px;
}
.mob-best-option-traveltime .material-icons{
  font-size:14px;
  color:var(--mob-text-secondary, #655e6b);
}
.mob-best-option-traveltime-arrow{
  font-size:12px !important;
  vertical-align:middle;
}

/* ---------- Weekoverzicht: dezelfde 3 opties hierboven, nu in een compacte maand-mini-kalender ----------
   Puur ter oriëntatie (waar in de maand vallen de 3 opties), geen volledige datumkiezer - die staat
   al verderop in #divFullAgenda. Daarom zijn alleen de 3 optie-dagen interactief; de rest is grijs
   en niet-klikbaar, en de kalender blijft bewust kort (geen uur-voor-uur grid). */

.mob-week-overview{
  /* 31-08-2026: even breed als de optiekaarten erboven, zodat de tekst leesbaar is
     en er ruimte is voor weeknummers. */
  margin:0 auto;
  border:1px solid var(--mob-border);
  border-radius:var(--mob-radius);
  padding:8px;
  background:var(--mob-surface-2);
}
.mob-week-overview .fc{ font-size:14px; }
.mob-week-overview .fc-toolbar{ margin-bottom:6px; }
.mob-week-overview .fc-toolbar-title{ font-size:14px; font-weight:600; color:var(--mob-purple); }
.mob-week-overview .fc-col-header-cell{ font-size:12px; text-transform:uppercase; color:var(--mob-text-muted); }
.mob-week-overview .fc-daygrid-day-number{ font-size:13px; padding:6px; }
.mob-week-overview .fc-event{ cursor:pointer; border:none; font-weight:600; font-size:12px; padding:1px 4px; }
/* Dagen die niet bij een van de 3 opties horen - lichtgrijs en niet-klikbaar, puur context. */
.mob-week-overview .fc-daygrid-day.mob-week-day-inactive{ background:var(--mob-surface-1); }
.mob-week-overview .fc-daygrid-day.mob-week-day-inactive .fc-daygrid-day-number{ color:var(--mob-text-muted); }
/* De 3 optie-dagen - lichte tint zodat ze opvallen tussen de grijze dagen. */
.mob-week-overview .fc-daygrid-day.mob-week-day-active{ background:var(--mob-selected-tint); }
.mob-week-overview .fc-daygrid-day.mob-week-day-active .fc-daygrid-day-number{ font-weight:700; color:var(--mob-purple); }

/* ---------- Scheidingslijn + telefoon/contact-sectie ---------- */

.mob-divider{
  border:none;
  border-top:1px solid var(--mob-border);
  margin:0 0 16px;
}
.mob-contact-card{ padding-top:0; }
.mob-contact-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.mob-contact-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--mob-selected-tint);
  color:var(--mob-purple);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.mob-contact-title{ font-weight:600; color:var(--mob-text-primary); font-size:15px; }
.mob-contact-sub{ font-size:13px; color:var(--mob-text-muted); margin-top:2px; }
.mob-contact-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mob-tel-link{
  font-weight:600;
  color:var(--mob-purple);
  text-decoration:none;
  font-size:15px;
}
.mob-contact-actions .btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.mob-contact-actions .btn .material-icons{ font-size:16px; }

/* ---------- Vertrouwen-footer ---------- */

.mob-trust-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:12px;
  color:var(--mob-text-muted);
  margin:0 0 8px;
}
.mob-trust-footer .material-icons{ font-size:14px; }
.mob-week-overview .fc-daygrid-week-number{ font-size:10px; color:var(--mob-text-muted); background:transparent; padding:2px 4px; }
.mob-week-overview .fc-daygrid-day-top{ flex-direction:row; justify-content:flex-end; }