/*
 * datepicker.css
 * Gedeelde Materialize datepicker stijlen — frontpage + registratie stap 2
 * Brand: #B14F7F / #c649b8
 *
 * Aanpak: native <select> elements getoond, Materialize FormSelect custom UI verborgen.
 * De monkey-patch in de pagina-JS voorkomt dat M.FormSelect.init() de selects wrapt,
 * waardoor er geen DOM-jitter optreedt bij navigatie naar vorige/volgende maand.
 * stopPropagation op mousedown/click van de selects (in onDraw) voorkomt dat de
 * datepicker-container's e.preventDefault() de native dropdown blokkeert.
 */

/* === Modal container === */
.datepicker-modal     { background: none !important; box-shadow: none !important; }
.datepicker-container { background: #fff; }
.datepicker-calendar-container { background: #fff !important; }

/* === Paarse datumkop === */
.datepicker-date-display { background-color: #B14F7F !important; color: #fff !important; }
.datepicker-date-display .year-text,
.datepicker-date-display .date-text { color: #fff !important; opacity: 1 !important; }

/* === Controls (maand/jaar rij) === */
.datepicker-controls {
    color: #333 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    padding-bottom: 6px !important;
}
.datepicker-controls .month-prev,
.datepicker-controls .month-next { color: #B14F7F !important; }

/* Ruimte tussen maand- en jaarselectie */
.datepicker-controls .selects-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.datepicker-controls .select-wrapper {
    display: inline-block !important;
}

/* Native selects: zichtbaar via onDraw JS; vet, paarse pijl, geen rand */
.datepicker-controls select {
    display: inline-block !important;
    visibility: visible !important;
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23B14F7F' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    padding: 0 18px 0 0 !important;
    min-width: 6.5em !important;
}
.datepicker-controls select.orig-select-year { min-width: 3.8em !important; }

/* Verberg Materialize FormSelect custom UI (monkey-patch voorkomt aanmaak) */
.datepicker-controls .select-wrapper input.select-dropdown,
.datepicker-controls .select-wrapper ul.dropdown-content,
.datepicker-controls .select-wrapper .caret { display: none !important; }

/* === Kalendertabel === */
.datepicker-table thead th { color: #555 !important; }
.datepicker-table td     { color: #333 !important; }
.datepicker-table td.is-today { color: #B14F7F !important; font-weight: 700; }
.datepicker-table td.is-selected,
.datepicker-table td.is-selected:hover {
    background-color: #B14F7F !important;
    color: #fff !important;
    border-radius: 50%;
}
.datepicker-table td.is-disabled,
.datepicker-table td.is-outside-current-month { color: #bbb !important; }
.datepicker-table td:not(.is-selected):not(.is-disabled):not(.is-empty):hover {
    background: #f0e6ed;
    border-radius: 50%;
}

/* === Footer knoppen === */
.datepicker-footer .confirmation-btns .btn-flat {
    color: #B14F7F !important;
    font-weight: 600;
}