/* Redesign van het agendascherm (Views/Employee/Agenda.cshtml), gebruikt door /Employee/Agenda (planner)
en /Employee/MyAgenda (professional). CSS-only: de enige markup-wijziging is de class "mob-agenda-page"
op de bestaande <div class="row"> die de filterkolom en de agendakolom bevat - zelfde patroon als
.mob-appointment-page en .mob-waitlist-form. Geen wijziging aan ID's, structuur of JS, omdat FullCalendar
en de agenda-JS daarop leunen. Dezelfde design-tokens als de overige redesign-stylesheets.

Let op: FullCalendar draait hier met het bootstrap5-thema, dus de toolbarknoppen hebben "btn btn-primary"
en de actieve viewknop krijgt "active" - niet de standaard fc-button/fc-button-active-classes. */

.mob-agenda-page{
--mag-purple:#4c176e;
--mag-purple-dark:#3c1257;
--mag-accent:#805bc1;
--mag-accent-soft:#f3eefb;
--mag-border:#ece8f0;
--mag-text-primary:#241a2b;
--mag-text-secondary:#655e6b;
--mag-text-muted:#9891a0;
--mag-surface-1:#faf9fb;
--mag-surface-2:#ffffff;
--mag-radius-lg:18px;
--mag-radius:14px;
--mag-radius-sm:10px;
--mag-radius-pill:999px;
--mag-shadow-sm:0 1px 2px rgba(76,23,110,.06);

color:var(--mag-text-primary);
}

/* ---------- Linkerkolom: het afspraakfilter als kaart ---------- */
.mob-agenda-page #divAppointmentFilter{
background-color:var(--mag-surface-2);
border:1px solid var(--mag-border);
border-radius:var(--mag-radius-lg);
box-shadow:var(--mag-shadow-sm);
padding:16px;
}
.mob-agenda-page #divAppointmentFilter label,
.mob-agenda-page #divAppointmentFilter .control-label{
font-size:10.5px;
color:var(--mag-text-secondary);
text-transform:uppercase;
letter-spacing:.04em;
font-weight:700;
margin-bottom:4px;
}
.mob-agenda-page .form-control,
.mob-agenda-page .form-select{
border-radius:var(--mag-radius-sm);
border-color:var(--mag-border);
font-size:13.5px;
}
.mob-agenda-page .form-control:focus,
.mob-agenda-page .form-select:focus{
border-color:var(--mag-accent);
box-shadow:0 0 0 .15rem rgba(128,91,193,.18);
}
/* De gekleurde deelblokken in het filter rustiger kaderen */
.mob-agenda-page .appointmentpart{
border-radius:var(--mag-radius);
padding:12px 10px 4px 10px;
margin:0 0 12px 0;
}

/* ---------- Knoppen: pill-vorm in de huisstijl ---------- */
.mob-agenda-page .btn{
border-radius:var(--mag-radius-pill);
font-weight:600;
font-size:13.5px;
}
/* Knopgroepen (navigatie, week/dag) blijven aan elkaar zitten */
.mob-agenda-page .btn-group > .btn:first-child:not(:last-child){
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.mob-agenda-page .btn-group > .btn:last-child:not(:first-child){
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.mob-agenda-page #AgendaButtons .btn-outline-dark{
border-color:var(--mag-border);
color:var(--mag-purple);
background-color:var(--mag-surface-2);
box-shadow:var(--mag-shadow-sm);
padding:12px 18px;
transition:background-color .15s ease,border-color .15s ease;
}
.mob-agenda-page #AgendaButtons .btn-outline-dark:hover{
background-color:var(--mag-accent-soft);
border-color:var(--mag-accent);
color:var(--mag-purple);
}
.mob-agenda-page #WantsEarlierItems > .btn-primary,
.mob-agenda-page #WaitinglistItems > .btn-primary{
background-color:var(--mag-accent-soft);
border:1px solid var(--mag-border);
color:var(--mag-purple);
padding:12px 18px;
}
.mob-agenda-page #WantsEarlierItems > .btn-primary:hover,
.mob-agenda-page #WaitinglistItems > .btn-primary:hover{
background-color:#e9e0f8;
border-color:var(--mag-accent);
color:var(--mag-purple);
}
.mob-agenda-page #divShowFirstOption .btn-success{
background-color:var(--mag-purple);
border-color:var(--mag-purple);
box-shadow:0 2px 8px rgba(76,23,110,.25);
padding:10px 20px;
}
.mob-agenda-page #divShowFirstOption .btn-success:hover{
background-color:var(--mag-purple-dark);
border-color:var(--mag-purple-dark);
}
.mob-agenda-page #divShowFirstOption label{
font-size:12.5px;
color:var(--mag-text-secondary);
}

/* ---------- Filterbalk boven de agenda ---------- */
.mob-agenda-page #CalendarFilter > .row{
background-color:var(--mag-surface-1);
border:1px solid var(--mag-border);
border-radius:var(--mag-radius);
margin:12px 0 !important;
padding:10px 6px !important;
}
.mob-agenda-page #CalendarFilter .form-check-label{
font-size:12.5px;
color:var(--mag-text-primary);
}
.mob-agenda-page .form-check-input:checked{
background-color:var(--mag-purple);
border-color:var(--mag-purple);
}
.mob-agenda-page .form-check-input:focus{
border-color:var(--mag-accent);
box-shadow:0 0 0 .15rem rgba(128,91,193,.18);
}

/* ---------- Agendatoolbar ---------- */
.mob-agenda-page .fc-header-toolbar{
margin-bottom:12px !important;
}
.mob-agenda-page .fc-toolbar-title,
.mob-agenda-page h2.fc-toolbar-title{
font-size:17px;
font-weight:700;
color:var(--mag-purple);
letter-spacing:-.01em;
}
/* Week/Dag als segmented control: de gekozen weergave is gevuld, de andere licht */
.mob-agenda-page .fc .fc-timeGridWeek-button:not(.active),
.mob-agenda-page .fc .fc-timeGridDay-button:not(.active){
background-color:var(--mag-surface-2) !important;
border:1px solid var(--mag-border) !important;
color:var(--mag-purple) !important;
box-shadow:none;
}
.mob-agenda-page .fc .fc-timeGridWeek-button:not(.active):hover,
.mob-agenda-page .fc .fc-timeGridDay-button:not(.active):hover{
background-color:var(--mag-accent-soft) !important;
}
.mob-agenda-page .fc .fc-timeGridWeek-button.active,
.mob-agenda-page .fc .fc-timeGridDay-button.active{
background-color:var(--mag-purple) !important;
border-color:var(--mag-purple) !important;
color:#fff !important;
}

/* ---------- Agendaraster ---------- */
.mob-agenda-page .fc{
--fc-border-color:var(--mag-border);
--fc-today-bg-color:#f7f3fd;
font-size:12.5px;
}
.mob-agenda-page .fc .fc-scrollgrid{
border-radius:var(--mag-radius);
overflow:hidden;
box-shadow:var(--mag-shadow-sm);
}
.mob-agenda-page .fc .fc-col-header-cell{
background-color:var(--mag-surface-1);
padding:8px 4px;
}
.mob-agenda-page .fc .fc-col-header-cell-cushion{
color:var(--mag-text-secondary);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.04em;
text-decoration:none;
}
.mob-agenda-page .fc .fc-timegrid-axis-cushion,
.mob-agenda-page .fc .fc-timegrid-slot-label-cushion{
color:var(--mag-text-muted);
font-size:11px;
}
.mob-agenda-page .fc .fc-timegrid-axis-cushion{
font-weight:600;
}
.mob-agenda-page .fc .fc-timegrid-slot-minor{
border-top-style:none;
}

/* ---------- Afspraakblokken ----------
De achtergrondkleuren komen uit de code (soort/status) en worden bewust niet overschreven. */
.mob-agenda-page .fc .fc-event{
border-radius:var(--mag-radius-sm);
border:none;
box-shadow:var(--mag-shadow-sm);
padding:1px 2px;
}
.mob-agenda-page .fc .fc-event .fc-event-title{
font-weight:600;
}
.mob-agenda-page .fc .fc-event .fc-event-time{
font-size:11px;
opacity:.9;
}
.mob-agenda-page .fc .miniicons{
font-size:14px;
vertical-align:middle;
}
.mob-agenda-page .fc .fc-list-event td{
font-size:12.5px;
}

/* ---------- Meldingen ---------- */
.mob-agenda-page .alert{
border-radius:var(--mag-radius);
border-color:var(--mag-border);
}


/* ===== SCHUIFJE WORDT VINKJE START (27-08-2026) =====
   Verzoek Dennis: "Alleen beschikbare momenten" was het enige schuifje in de
   balk; de twee ernaast zijn vinkjes. Nu alle drie hetzelfde.
   Scope: alleen div.form-switch.d-flex uit Views/Shared/Calendar.cshtml.
   Het schuifje in Views/Employee/MyAccount.cshtml (form-check form-switch)
   blijft dus ongemoeid.
   Terugdraaien: alles tussen START en END weghalen. */

.form-switch.d-flex{
    padding-left:0;
}

.form-switch.d-flex .form-check-input{
    width:1.15em;
    height:1.15em;
    margin-left:0;
    margin-right:.5em;
    border-radius:.25em;
    background-image:none;
    background-position:center;
    background-size:contain;
    transition:none;
}

.form-switch.d-flex .form-check-input:checked{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-position:center;
}

/* ===== SCHUIFJE WORDT VINKJE END ===== */

/* ===== VINKJE BREEDTE GELIJKTREKKEN START (27-08-2026) =====
   De breedte werd elders overschreven (2,4em), waardoor het vinkje een liggend
   blokje bleef in plaats van een vierkantje zoals de twee ernaast. 15,75px is
   exact de maat van Toon afspraken en Toon reistijd.
   Terugdraaien: alles tussen START en END weghalen. */
.form-switch.d-flex .form-check-input{
    width:15.75px !important;
    height:15.75px !important;
}
/* ===== VINKJE BREEDTE GELIJKTREKKEN END ===== */

/* ===== VINKJE UITLIJNEN START (28-08-2026) =====
   De twee vinkjes ernaast zitten in een kolom die zelf .form-check is; die klasse
   vervangt de standaard kolommarge. Dit blokje mist die klasse en hield de marge
   van 13,5px over, waardoor het op mobiel zichtbaar naar rechts sprong.
   Oplossing: het blokje precies die marge naar links halen, uitgedrukt in de
   Bootstrap-variabele zelf, zodat het op elke schermbreedte klopt.
   Terugdraaien: alles tussen START en END weghalen. */
.form-switch.d-flex{ padding-left:0 !important; margin-left:calc(var(--bs-gutter-x) * -0.5) !important; }
.form-switch.d-flex .form-check-input{ margin-left:0 !important; margin-right:0 !important; }
/* ===== VINKJE UITLIJNEN END ===== */