/**
 * ========================================================
 * FLATPICKR DATE PICKER STYLING (RSA COMPONENT)
 * Consistent with form inputs - matching backgrounds & borders
 * ========================================================
 */
/* Flatpickr input styling - match other form inputs (left aligned, vertical middle, 44px height) */
.flatpickr-input,
input.flatpickr-input,
.form-control.flatpickr-input,
.flatpickr-date,
.flatpickr-time,
.flatpickr-time-index,
#edit_session_date,
#pastSessionDate {
  text-align: left !important;
  padding: 0 0.9375rem !important;
  height: var(--bs-control-height, 44px) !important;
  min-height: var(--bs-control-height, 44px) !important;
  line-height: calc(var(--bs-control-height, 44px) - 2px) !important;
  vertical-align: middle !important;
  background-color: var(--bs-input-filled-bg, rgba(0, 0, 0, 0.06)) !important;
  color: var(--bs-body-color) !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: var(--bs-input-border-radius, var(--bs-card-border-radius, 1rem)) !important;
  box-shadow: none !important;
}

.flatpickr-input:focus,
input.flatpickr-input:focus,
.form-control.flatpickr-input:focus,
#edit_session_date:focus,
#pastSessionDate:focus {
  background-color: var(--bs-input-filled-bg-focus, rgba(0, 0, 0, 0.09)) !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Flatpickr Wrapper & Calendar Popup Container - Pure Modern Theme (Matching Dropdown) */
.flatpickr-wrapper {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}

.flatpickr-calendar {
  border-radius: var(--bs-card-border-radius, 1.25rem) !important;
  border: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.08)) !important;
  background-color: var(--bs-paper-bg, #ffffff) !important;
  box-shadow: var(--bs-dropdown-box-shadow) !important;
  overflow: hidden !important;
  z-index: 99999 !important;
  animation: none !important;
  transition: none !important;
}

.flatpickr-calendar.animate.open,
.flatpickr-calendar.open {
  animation: none !important;
  transition: none !important;
}

/* Precise 8px floating gap matching dropdown menu & popover (upwards & downwards) */
.flatpickr-calendar.arrowTop,
.flatpickr-calendar.static.arrowTop {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.flatpickr-calendar.arrowBottom,
.flatpickr-calendar.static.arrowBottom {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none !important;
}

/* Remove background color from month, weekdays, days, dropdowns, and arrow containers */
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar span.flatpickr-weekday,
.flatpickr-calendar .flatpickr-weekdaycontainer,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .numInputWrapper,
.flatpickr-calendar .numInputWrapper input,
.flatpickr-calendar .numInputWrapper input.cur-year,
.flatpickr-calendar input.cur-year,
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .dayContainer {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Header, Month, Year & Arrows - Pure Monochrome (#2b2b2b) */
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.flatpickr-calendar .flatpickr-current-month span.cur-month,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  color: var(--bs-heading-color) !important;
  font-weight: 600 !important;
  fill: var(--bs-heading-color) !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: var(--bs-paper-bg, #ffffff) !important;
  color: var(--bs-heading-color) !important;
}

.flatpickr-calendar span.flatpickr-weekday {
  color: var(--bs-secondary-color, #444444) !important;
  font-weight: 600 !important;
}

/* Flatpickr Year Input - Clean borderless & transparent */
.flatpickr-calendar .numInputWrapper,
.flatpickr-calendar .numInputWrapper input,
.flatpickr-calendar .numInputWrapper input.cur-year,
.flatpickr-calendar input.cur-year,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .numInputWrapper:hover,
.flatpickr-calendar .numInputWrapper:focus,
.flatpickr-calendar .numInputWrapper:focus-within,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:focus,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:focus-within,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year:hover,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year:focus,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year:active,
.flatpickr-calendar input.cur-year:hover,
.flatpickr-calendar input.cur-year:focus,
.flatpickr-calendar input.cur-year:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
}

.flatpickr-calendar .numInputWrapper,
.flatpickr-calendar .numInputWrapper span,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover span,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Disabled Dates in Light Mode - Readable Muted Monochrome Grey (Not Invisible) */
.flatpickr-calendar .flatpickr-day.disabled,
.flatpickr-calendar .flatpickr-day.notAllowed,
.flatpickr-calendar .flatpickr-day.prevMonthDay.disabled,
.flatpickr-calendar .flatpickr-day.nextMonthDay.disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  color: var(--bs-secondary-color, #888888) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

/* Dark Mode Flatpickr Overrides - Pure Monochrome Dark (Matching Sleek Dropdowns) */
[data-bs-theme="dark"] .flatpickr-calendar,
.dark-style .flatpickr-calendar {
  background-color: var(--bs-dropdown-bg, var(--bs-paper-bg, #1e1e1e)) !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: var(--bs-dropdown-box-shadow) !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekdays,
[data-bs-theme="dark"] .flatpickr-calendar span.flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekdaycontainer,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper input,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar input.cur-year,
.dark-style .flatpickr-calendar .flatpickr-days,
.dark-style .flatpickr-calendar .flatpickr-weekdays,
.dark-style .flatpickr-calendar span.flatpickr-weekday,
.dark-style .flatpickr-calendar .flatpickr-weekdaycontainer,
.dark-style .flatpickr-calendar .flatpickr-month,
.dark-style .flatpickr-calendar .flatpickr-months,
.dark-style .flatpickr-calendar .flatpickr-current-month,
.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark-style .flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.dark-style .flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
.dark-style .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.dark-style .flatpickr-calendar .flatpickr-current-month input.cur-year,
.dark-style .flatpickr-calendar .numInputWrapper,
.dark-style .flatpickr-calendar .numInputWrapper input,
.dark-style .flatpickr-calendar .numInputWrapper input.cur-year,
.dark-style .flatpickr-calendar input.cur-year {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg,
.dark-style .flatpickr-calendar .flatpickr-current-month,
.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark-style .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year,
.dark-style .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.dark-style .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.dark-style .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.dark-style .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.dark-style .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #222222 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper input,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper:hover,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper:focus,
[data-bs-theme="dark"] .flatpickr-calendar .numInputWrapper:focus-within,
.dark-style .flatpickr-calendar .numInputWrapper,
.dark-style .flatpickr-calendar .numInputWrapper input,
.dark-style .flatpickr-calendar .numInputWrapper input.cur-year,
.dark-style .flatpickr-calendar .numInputWrapper:hover,
.dark-style .flatpickr-calendar .numInputWrapper:focus,
.dark-style .flatpickr-calendar .numInputWrapper:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .flatpickr-calendar span.flatpickr-weekday,
.dark-style .flatpickr-calendar span.flatpickr-weekday {
  color: #bbbbbb !important;
  font-weight: 600 !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day:not(.disabled):not(.notAllowed):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay),
.dark-style .flatpickr-calendar .flatpickr-day:not(.disabled):not(.notAllowed):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
  color: #ffffff !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* ALL Disabled & Prev/Next Month Dates in Dark Mode - Uniform Muted Grey (#666666 / opacity 1) */
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.disabled,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.notAllowed,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay,
.dark-style .flatpickr-calendar .flatpickr-day.disabled,
.dark-style .flatpickr-calendar .flatpickr-day.notAllowed,
.dark-style .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.dark-style .flatpickr-calendar .flatpickr-day.prevMonthDay,
.dark-style .flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: #666666 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* FLATPICKR ACTIVE/SELECTED DATE STYLING (DIRECT SOLID PRIMARY ORANGE, NO BORDER, NO SHADOW) */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.selected,
.dark-style .flatpickr-calendar .flatpickr-day.selected {
  background: var(--bs-primary) !important;
  background-color: var(--bs-primary) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* FLATPICKR TODAY (HARI INI) STYLING - Outline border only when not selected */
.flatpickr-calendar .flatpickr-day.today:not(.selected),
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.today:not(.selected),
.dark-style .flatpickr-calendar .flatpickr-day.today:not(.selected) {
  border: 1px solid var(--bs-primary) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--bs-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ========================================================
 * FLATPICKR TIME-ONLY PICKER (noCalendar) - SEAMLESS RADIUS & INNER FIT
 * Fixes double background peek / outer corner rounding mismatches
 * ======================================================== */
.flatpickr-calendar.noCalendar.hasTime {
  width: auto !important;
  min-width: 160px !important;
  max-width: 190px !important;
  padding: 0 !important;
  border-radius: var(--bs-dropdown-border-radius, 0.75rem) !important;
  overflow: hidden !important;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  border-radius: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 4px !important;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time .numInputWrapper {
  height: 44px !important;
  background: transparent !important;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time input {
  height: 44px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
}

[data-bs-theme="dark"] .flatpickr-calendar.noCalendar.hasTime .flatpickr-time input {
  color: #ffffff !important;
}

/* Mobile touch protection for Flatpickr Time Inputs */
.flatpickr-time,
.flatpickr-time-index {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Ensure Flatpickr calendar popup inside modal has highest z-index */
.modal .flatpickr-calendar,
.bottom-sheet-modal .flatpickr-calendar {
  z-index: 100000 !important;
}