body { background: #f3f5f8; }

.kleurbol {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    margin-right: .45rem;
    vertical-align: -.05rem;
}

.werknemer-keuze { max-height: 220px; overflow-y: auto; }

/* --- Kalender in Outlook-stijl --- */
#kalender { --fc-today-bg-color: #e7f1ff; --fc-border-color: #dee2e6; }
#kalender .fc-toolbar-title { font-size: 1.35rem; text-transform: capitalize; }
#kalender .fc-col-header-cell-cushion { text-transform: capitalize; font-weight: 600; color: #495057; text-decoration: none; }
#kalender .fc-daygrid-day-number { color: #495057; text-decoration: none; font-size: .95rem; }
#kalender .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { background: #0d6efd; color: #fff; border-radius: 4px; padding: 0 .4rem; margin: 2px; }
#kalender .fc-daygrid-day-frame { min-height: 110px; }
#kalender .fc-daygrid-day:hover { background: rgba(13, 110, 253, .04); cursor: pointer; }
#kalender .fc-day-sat, #kalender .fc-day-sun { background: #fafbfc; }
#kalender .fc-daygrid-block-event { border-radius: 3px; font-size: .8rem; }
#kalender .fc-daygrid-block-event .fc-event-main { padding: 1px 4px; white-space: normal; }
#kalender .fc-daygrid-block-event .fc-event-main-frame { display: block; }
#kalender .fc-daygrid-block-event .fc-event-time { display: inline; font-weight: 600; margin-right: .3em; }
#kalender .fc-daygrid-block-event .fc-event-title-container,
#kalender .fc-daygrid-block-event .fc-event-title { display: inline; }
#kalender .fc-daygrid-week-number { background: transparent; color: #adb5bd; font-size: .7rem; text-decoration: none; }
#kalender .fc-timegrid-event { font-size: .8rem; }
#kalender .fc-event { cursor: pointer; }
#kalender .fc-col-header-cell a, #kalender .fc-timegrid-axis a { text-decoration: none; }

@media (max-width: 767.98px) {
    #kalender .fc-toolbar { flex-direction: column; gap: .5rem; }
    #kalender .fc-toolbar-title { font-size: 1.1rem; }
    #kalender .fc-daygrid-day-frame { min-height: 70px; }
}

/* --- Huisstijl per klant (kleur uit config.php) --- */
.btn-primary {
    --bs-btn-bg: var(--pb-kleur); --bs-btn-border-color: var(--pb-kleur);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pb-kleur) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--pb-kleur) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--pb-kleur) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--pb-kleur) 75%, #000);
    --bs-btn-disabled-bg: var(--pb-kleur); --bs-btn-disabled-border-color: var(--pb-kleur);
}
.btn-outline-primary {
    --bs-btn-color: var(--pb-kleur); --bs-btn-border-color: var(--pb-kleur);
    --bs-btn-hover-bg: var(--pb-kleur); --bs-btn-hover-border-color: var(--pb-kleur);
    --bs-btn-active-bg: var(--pb-kleur); --bs-btn-active-border-color: var(--pb-kleur);
}
.navbar { border-bottom: 3px solid var(--pb-kleur); }
#kalender { --fc-today-bg-color: color-mix(in srgb, var(--pb-kleur) 10%, #fff); }
#kalender .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { background: var(--pb-kleur); }
#kalender .fc-button-primary { --fc-button-bg-color: #343a40; --fc-button-border-color: #343a40; --fc-button-active-bg-color: var(--pb-kleur); --fc-button-active-border-color: var(--pb-kleur); }

.merk-logo { height: 28px; width: auto; margin-right: .5rem; vertical-align: -6px; }
.merk-logo-groot { height: 40px; vertical-align: -10px; }
.merk-org { font-weight: 400; opacity: .75; }
.merk-org::before { content: "· "; }

.demo-balk { background: #fff3cd; color: #664d03; text-align: center; font-size: .85rem; padding: .35rem 1rem; border-bottom: 1px solid #ffe69c; }