/* Compact month selection for Diensten and Financiën. Date fields keep their calendar. */
#monthPickerLabel[hidden],#monthPickerYearRow[hidden],#dateToday[hidden]{display:none}
#datePicker[data-mode="month"]{width:min(380px,calc(100vw - 24px));background:#fff;border:1px solid #dce5df;border-radius:22px}
#datePicker[data-mode="month"] .date-picker-head{padding:22px 20px 6px;background:transparent}
#datePicker[data-mode="month"] .date-picker-head h2{margin:0;color:#263d34;font-size:20px;font-weight:700;line-height:1.3}
#datePicker[data-mode="month"] #dateSelection,#datePicker[data-mode="month"] .date-month-select{display:none}
#datePicker[data-mode="month"] .date-month-nav{padding:16px 20px 12px;gap:10px}
#datePicker[data-mode="month"] .date-month-nav>button{width:44px;height:44px;min-height:44px;border:1px solid #dfe7e1;border-radius:12px;background:#f3f6f3;color:#254b3c;font-size:26px;line-height:1}
#datePicker[data-mode="month"] .date-month-nav>button:disabled{opacity:.35;cursor:default}
#monthPickerLabel{flex:1;text-align:center;font-size:19px;font-weight:650;line-height:1.3;min-width:0;color:#254b3c}
#monthPickerYearRow{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 20px 10px}
#monthPickerYearRow label{font-size:12px;color:#6a7870;margin:0}
#monthPickerYear{width:96px;min-height:40px;padding:6px 10px;background:#fff;border:1px solid #dfe7e1;border-radius:10px;font-size:14px;color:#3a5346;margin:0}
#datePicker[data-mode="month"] .month-options{padding:0 20px 20px;gap:8px;margin:0}
#datePicker[data-mode="month"] .month-options button{min-height:44px;border-radius:11px;border:1px solid #e2e9e3;background:#f6f8f5;font-size:13px;font-weight:500;color:#355043;padding:9px 3px;line-height:1.25;touch-action:manipulation}
#datePicker[data-mode="month"] .month-options button[aria-current="date"]{border-color:#7a9a86}
#datePicker[data-mode="month"] .month-options button[aria-pressed="true"]{background:#254b3c;border-color:#254b3c;color:#fff;font-weight:650;box-shadow:0 2px 5px #254b3c18}
#datePicker[data-mode="month"] .time-picker-actions{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #e5ebe6;padding:14px 16px;gap:8px}
#datePicker[data-mode="month"] .time-picker-actions button{border-radius:11px;min-height:44px;font-size:13px;margin:0}
#datePicker[data-mode="month"] button:focus-visible,#monthPickerYear:focus-visible{outline:2px solid #749883;outline-offset:3px}
@media(max-width:350px){
 #datePicker[data-mode="month"] .date-picker-head{padding:18px 14px 4px}
 #datePicker[data-mode="month"] .date-month-nav{padding:14px}
 #datePicker[data-mode="month"] .month-options{padding:0 14px 16px;gap:6px}
 #monthPickerYearRow{padding-right:14px}
 #monthPickerLabel{font-size:17px}
 #datePicker[data-mode="month"] .time-picker-actions{padding:12px 10px;gap:6px}
}