/**
 * Futuristic calendar / date-time picker theme (app-wide)
 * Covers: bootstrap-datepicker, xdsoft datetimepicker, FullCalendar, daterangepicker, bootstrap timepicker
 */
:root {
  --fx-cal-bg: linear-gradient(165deg, #f4f8ff 0%, #ffffff 48%, #f7f5ff 100%);
  --fx-cal-surface: rgba(255, 255, 255, 0.92);
  --fx-cal-border: rgba(99, 102, 241, 0.16);
  --fx-cal-text: #1e293b;
  --fx-cal-muted: #94a3b8;
  --fx-cal-accent: #6366f1;
  --fx-cal-accent-2: #3b82f6;
  --fx-cal-gradient: linear-gradient(135deg, #7c3aed 0%, #6366f1 48%, #3b82f6 100%);
  --fx-cal-shadow: 0 18px 48px rgba(79, 70, 229, 0.16), 0 6px 18px rgba(15, 23, 42, 0.08);
  --fx-cal-radius: 22px;
  --fx-cal-radius-sm: 12px;
}

/* -------------------------------------------------------------------------- */
/* Bootstrap Datepicker                                                       */
/* -------------------------------------------------------------------------- */
.datepicker,
.datepicker-dropdown.dropdown-menu {
  padding: 14px 14px 12px !important;
  border: 1px solid var(--fx-cal-border) !important;
  border-radius: var(--fx-cal-radius) !important;
  background: var(--fx-cal-bg) !important;
  box-shadow: var(--fx-cal-shadow) !important;
  color: var(--fx-cal-text) !important;
  z-index: 10050 !important;
  overflow: hidden;
}

.datepicker-dropdown:before,
.datepicker-dropdown:after {
  display: none !important;
}

.datepicker table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
}

.datepicker td,
.datepicker th {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  border: 0 !important;
  color: var(--fx-cal-text) !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.datepicker th.datepicker-switch,
.datepicker .datepicker-switch {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  border-radius: var(--fx-cal-radius-sm) !important;
}

.datepicker th.prev,
.datepicker th.next,
.datepicker th.cw,
.datepicker .prev,
.datepicker .next {
  color: var(--fx-cal-accent) !important;
  border-radius: 999px !important;
}

.datepicker th.prev:hover,
.datepicker th.next:hover,
.datepicker th.datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .datepicker-switch:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #4f46e5 !important;
}

.datepicker thead tr:first-child th {
  padding-bottom: 6px;
}

.datepicker thead tr:nth-child(2) th,
.datepicker .dow {
  color: var(--fx-cal-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker table tr td span:hover {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4338ca !important;
  cursor: pointer;
  transform: scale(1.04);
}

.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #cbd5e1 !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  background: rgba(59, 130, 246, 0.14) !important;
  background-image: none !important;
  color: #1d4ed8 !important;
  box-shadow: inset 0 0 0 1.5px rgba(59, 130, 246, 0.45);
  filter: none !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background: var(--fx-cal-gradient) !important;
  background-image: var(--fx-cal-gradient) !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.35);
  filter: none !important;
  border: 0 !important;
}

.datepicker table tr td span {
  width: 54px !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 2px !important;
  border-radius: 999px !important;
}

.datepicker tfoot th,
.datepicker .datepicker-days tfoot th.clear,
.datepicker .datepicker-days tfoot th.today,
.datepicker-dropdown .datepicker-days tfoot th {
  color: var(--fx-cal-accent) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
}

.datepicker tfoot th:hover {
  background: rgba(99, 102, 241, 0.1) !important;
}

/* -------------------------------------------------------------------------- */
/* xdsoft / jQuery DateTimePicker                                             */
/* -------------------------------------------------------------------------- */
.xdsoft_datetimepicker {
  padding: 12px !important;
  border: 1px solid var(--fx-cal-border) !important;
  border-radius: var(--fx-cal-radius) !important;
  background: var(--fx-cal-bg) !important;
  box-shadow: var(--fx-cal-shadow) !important;
  color: var(--fx-cal-text) !important;
  font-family: inherit !important;
  overflow: hidden;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
  width: 260px !important;
  margin-left: 0 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar th,
.xdsoft_datetimepicker .xdsoft_calendar td {
  background: transparent !important;
  border: 0 !important;
  color: var(--fx-cal-text) !important;
  font-weight: 600 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
  color: var(--fx-cal-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.xdsoft_datetimepicker .xdsoft_calendar td > div {
  border-radius: 999px !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover > div,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current > div,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today > div {
  box-shadow: none !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover > div {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4338ca !important;
  transform: scale(1.05);
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today > div {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #1d4ed8 !important;
  box-shadow: inset 0 0 0 1.5px rgba(59, 130, 246, 0.4) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current > div,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > .xdsoft_current {
  background: var(--fx-cal-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.32) !important;
  font-weight: 700 !important;
}

.xdsoft_datetimepicker .xdsoft_label {
  background: transparent !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_month > span:hover,
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_year > span:hover,
.xdsoft_datetimepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_next:hover {
  color: var(--fx-cal-accent) !important;
}

.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next {
  border-radius: 999px !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker {
  margin-left: 10px !important;
  border-left: 1px solid rgba(99, 102, 241, 0.12) !important;
  width: 90px !important;
}

.xdsoft_datetimepicker .xdsoft_time_box {
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  overflow: hidden;
}

.xdsoft_datetimepicker .xdsoft_time_box > div > div {
  border-top: 0 !important;
  color: var(--fx-cal-text) !important;
  border-radius: 10px;
  margin: 2px 4px;
}

.xdsoft_datetimepicker .xdsoft_time_box > div > div:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #4338ca !important;
}

.xdsoft_datetimepicker .xdsoft_save_selected,
.xdsoft_datetimepicker button {
  background: var(--fx-cal-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.28);
}

/* -------------------------------------------------------------------------- */
/* Bootstrap Timepicker                                                       */
/* -------------------------------------------------------------------------- */
.bootstrap-timepicker-widget,
.bootstrap-timepicker-widget.dropdown-menu {
  border: 1px solid var(--fx-cal-border) !important;
  border-radius: var(--fx-cal-radius) !important;
  background: var(--fx-cal-bg) !important;
  box-shadow: var(--fx-cal-shadow) !important;
  padding: 10px !important;
  overflow: hidden;
}

.bootstrap-timepicker-widget table td input {
  border-radius: 999px !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: none !important;
}

.bootstrap-timepicker-widget table td a {
  color: var(--fx-cal-accent) !important;
  border-radius: 999px !important;
}

.bootstrap-timepicker-widget table td a:hover {
  background: rgba(99, 102, 241, 0.1) !important;
}

/* -------------------------------------------------------------------------- */
/* Daterangepicker                                                            */
/* -------------------------------------------------------------------------- */
.daterangepicker {
  border: 1px solid var(--fx-cal-border) !important;
  border-radius: var(--fx-cal-radius) !important;
  background: var(--fx-cal-bg) !important;
  box-shadow: var(--fx-cal-shadow) !important;
  padding: 8px !important;
  overflow: hidden;
}

.daterangepicker .calendar-table {
  background: transparent !important;
  border: 0 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.in-range,
.daterangepicker .ranges li.active {
  background: var(--fx-cal-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 999px !important;
}

.daterangepicker td.in-range {
  border-radius: 0 !important;
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4338ca !important;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
  border-radius: 999px !important;
}

.daterangepicker .drp-buttons .btn,
.daterangepicker .ranges li {
  border-radius: 999px !important;
}

.daterangepicker .drp-buttons .btn.applyBtn {
  background: var(--fx-cal-gradient) !important;
  border: 0 !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* FullCalendar (dashboard)                                                   */
/* -------------------------------------------------------------------------- */
.fc {
  --fc-border-color: rgba(99, 102, 241, 0.12);
  --fc-button-bg-color: transparent;
  --fc-button-border-color: rgba(99, 102, 241, 0.25);
  --fc-button-text-color: #4338ca;
  --fc-button-hover-bg-color: rgba(99, 102, 241, 0.1);
  --fc-button-hover-border-color: rgba(99, 102, 241, 0.35);
  --fc-button-active-bg-color: #6366f1;
  --fc-today-bg-color: rgba(59, 130, 246, 0.08);
  font-family: inherit;
}

.fc,
#calendar,
.fc-view-container,
.fc-view {
  border-radius: 18px;
}

.fc-toolbar h2,
.fc-toolbar-title {
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em;
}

.fc-button,
.fc-state-default,
.fc-button-primary {
  border-radius: 999px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background: #fff !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  color: #4338ca !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.fc-button:hover,
.fc-state-hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.14) !important;
}

.fc-state-active,
.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
  background: var(--fx-cal-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.fc-day-header,
.fc-col-header-cell,
.fc-col-header-cell-cushion,
.fc th.fc-day-header,
.fc th.fc-widget-header {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 0.05em;
  padding: 10px 0 !important;
}

.fc-day-header a,
.fc-col-header-cell a,
.fc-col-header-cell-cushion,
.fc th.fc-day-header span,
.fc th.fc-widget-header span {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.fc-event,
.fc-event-dot {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--fx-cal-gradient) !important;
  box-shadow: 0 6px 14px rgba(99, 102, 241, 0.25);
}

.fc-day.fc-today,
.fc-daygrid-day.fc-day-today {
  background: rgba(59, 130, 246, 0.07) !important;
}

.fc-unthemed td.fc-today,
.fc-unthemed th.fc-today {
  background: rgba(59, 130, 246, 0.07) !important;
}

.fc-unthemed .fc-content,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-row,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-list-heading td {
  border-color: rgba(99, 102, 241, 0.1) !important;
}

/* -------------------------------------------------------------------------- */
/* Dark theme compatibility                                                   */
/* -------------------------------------------------------------------------- */
html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .datepicker-dropdown.dropdown-menu,
html[data-theme="dark"] .xdsoft_datetimepicker,
html[data-theme="dark"] .bootstrap-timepicker-widget,
html[data-theme="dark"] .daterangepicker {
  --fx-cal-bg: linear-gradient(165deg, #1a2238 0%, #121826 55%, #1b1530 100%);
  --fx-cal-text: #e2e8f0;
  --fx-cal-muted: #94a3b8;
  --fx-cal-border: rgba(165, 180, 252, 0.18);
  --fx-cal-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  color: var(--fx-cal-text) !important;
}

html[data-theme="dark"] .datepicker th.datepicker-switch,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label,
html[data-theme="dark"] .fc-toolbar h2 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new {
  color: #64748b !important;
}

html[data-theme="dark"] .fc-button,
html[data-theme="dark"] .fc-state-default {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #c7d2fe !important;
}

/* Flatpickr (School Guide Book live call) */
.flatpickr-calendar,
.flatpickr-calendar.ruby-fx-flatpickr,
.flatpickr-calendar.open {
  z-index: 2147483646 !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(124, 58, 237, 0.12), transparent 55%),
    radial-gradient(100% 70% at 100% 100%, rgba(59, 130, 246, 0.14), transparent 50%),
    linear-gradient(165deg, #f8fbff 0%, #ffffff 45%, #f5f3ff 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 22px 56px rgba(79, 70, 229, 0.22),
    0 8px 20px rgba(15, 23, 42, 0.1) !important;
  overflow: hidden;
  padding: 12px 12px 10px !important;
  animation: ruby-fx-cal-in 0.28s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@keyframes ruby-fx-cal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.flatpickr-calendar.ruby-fx-flatpickr::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(99, 102, 241, 0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 18%, rgba(59, 130, 246, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 78%, rgba(16, 185, 129, 0.28) 0 1px, transparent 2px);
  opacity: 0.55;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #0f172a !important;
  font-weight: 750 !important;
  fill: #0f172a !important;
  letter-spacing: 0.02em;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.12);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: #fff !important;
}

.flatpickr-weekdays .flatpickr-weekday {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.flatpickr-day {
  border-radius: 999px !important;
  font-weight: 650;
  color: var(--fx-cal-text);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(99, 102, 241, 0.14) !important;
  border-color: transparent !important;
  color: #4338ca !important;
  transform: scale(1.06);
}

.flatpickr-day.today {
  border-color: rgba(59, 130, 246, 0.55) !important;
  background: rgba(59, 130, 246, 0.12) !important;
  color: #1d4ed8 !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--fx-cal-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(99, 102, 241, 0.35), 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.flatpickr-time {
  border-top: 1px solid rgba(99, 102, 241, 0.12) !important;
  margin-top: 6px;
  padding-top: 8px !important;
  max-height: none !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  font-weight: 750 !important;
  color: #4338ca !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 12px !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:after,
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-bottom-color: #6366f1;
  border-top-color: #6366f1;
}

.flatpickr-time .flatpickr-time-separator {
  color: #6366f1 !important;
  font-weight: 800;
}