/* LabMu UI adapter (opt-in) · flatpickr 4.6 in the LabMu look (adapters/flatpickr.js): the field keeps the labmu-ui
   input, with a calendar or clock icon where the browser's own was; the calendar is a .ui-menu like the select2 list.
   Load after flatpickr.min.css and labmu-ui.css. */
.flatpickr-alt { padding-right: 38px; cursor: pointer; background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596A80' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18'/%3E%3C/svg%3E"); }
.flatpickr-alt.is-time { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596A80' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.flatpickr-alt::placeholder { color: var(--muted); }

.flatpickr-calendar { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--paper); box-shadow: var(--shadow); font-family: var(--font); color: var(--ink); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-calendar.arrowBottom { margin-top: -4px; }
.flatpickr-months .flatpickr-month { height: 44px; color: var(--ink); fill: var(--ink); }
.flatpickr-current-month { padding-top: 10px; font-size: 15px; font-weight: 600; }
.flatpickr-current-month .cur-month { font-weight: 600; }
.flatpickr-current-month input.cur-year { font-weight: 600; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { height: 44px; padding: 13px 12px; color: var(--muted); fill: var(--muted); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary); }
span.flatpickr-weekday { color: var(--muted); font-weight: 600; font-size: 12px; }
.flatpickr-day { border-radius: 8px; color: var(--ink); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--hover); border-color: var(--hover); color: var(--primary); }
.flatpickr-day.today { border-color: var(--primary-border); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--primary-light); border-color: var(--primary-border); color: var(--primary-pressed); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #A6B1C2; }
.flatpickr-day.flatpickr-disabled:hover { background: none; border-color: transparent; }
.flatpickr-time { border-top: 0; }
.flatpickr-calendar.hasTime.noCalendar .flatpickr-time { height: 48px; line-height: 48px; }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator { color: var(--ink); font-weight: 600; font-size: 16px; }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--hover); }
.flatpickr-time input::selection { background: var(--primary-light); color: var(--primary-pressed); }
/* the up/down arrows stay in view: a phone has no hover to show them */
.flatpickr-time .numInputWrapper span { opacity: 1; }
.flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--muted); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--muted); }

/* an optional field: Hapus under the calendar empties it */
.flatpickr-clear { display: block; width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-input) var(--r-input); background: none; color: var(--primary); font: 600 14px var(--font); cursor: pointer; }
.flatpickr-clear:hover { background: var(--hover); color: var(--primary-pressed); }