/* Django admin native calendar & clock popups + Flatpickr (global fixes) */

/* Prevent ICAM .module table chrome from breaking popup calendars */
.module:not(.calendarbox):not(.clockbox) table,
#content-main .module:not(.calendarbox):not(.clockbox) table {
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: white !important;
}

.module:not(.calendarbox):not(.clockbox) th,
.module:not(.calendarbox):not(.clockbox) td {
  border-color: color-mix(in oklch, var(--admin-border), white 30%) !important;
  padding: 0.65rem 0.85rem !important;
}

/* Restore Django calendar / clock popup layout */
.calendarbox.module,
.clockbox.module {
  z-index: 1200 !important;
  margin: 0 !important;
  font-size: 0.8rem !important;
  width: 20em !important;
  max-width: calc(100vw - 1.5rem) !important;
  text-align: center !important;
  background: #fff !important;
  color: var(--admin-foreground, #111827) !important;
  border: 1px solid color-mix(in oklch, var(--admin-border), white 18%) !important;
  border-radius: calc(var(--admin-radius) * 0.95) !important;
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 20%) inset,
    0 14px 36px -14px color-mix(in oklch, var(--admin-primary), transparent 55%) !important;
  overflow: hidden !important;
}

.calendarbox .calendar,
.calendarbox .calendar table,
.clockbox .timelist {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100% !important;
  background: #fff !important;
}

.calendarbox .calendar th,
.calendarbox .calendar td,
.clockbox .timelist li {
  padding: 0 !important;
  border-color: color-mix(in oklch, var(--admin-border), white 35%) !important;
}

.calendarbox .calendar caption,
.calendarbox h2,
.clockbox h2 {
  margin: 0 !important;
  padding: 0.55rem 0.65rem !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: color-mix(in oklch, var(--admin-primary), black 8%) !important;
  background: color-mix(in oklch, var(--admin-accent-soft), white 48%) !important;
  border: 0 !important;
}

.calendarbox .calendar td a,
.clockbox .timelist a,
.calendar-shortcuts a,
.calendar-cancel a {
  display: block !important;
  padding: 0.4rem 0.35rem !important;
  font-weight: 600 !important;
  color: color-mix(in oklch, var(--admin-primary), black 10%) !important;
  text-decoration: none !important;
}

.calendarbox .calendar td a:hover,
.clockbox .timelist a:hover,
.calendar-shortcuts a:hover,
.calendar-cancel a:hover {
  background: color-mix(in oklch, var(--admin-accent-soft), white 35%) !important;
  color: var(--admin-primary) !important;
}

.calendarbox .calendar td.selected a {
  background: var(--admin-primary) !important;
  color: #fff !important;
}

.calendar-shortcuts {
  padding: 0.45rem 0.35rem !important;
  border-top: 1px solid color-mix(in oklch, var(--admin-border), white 28%) !important;
  background: #fff !important;
}

.calendar-cancel {
  margin: 0 !important;
  padding: 0.35rem 0 !important;
  border-top: 1px solid color-mix(in oklch, var(--admin-border), white 28%) !important;
}

.calendarnav-previous,
.calendarnav-next {
  opacity: 0.85;
}

/* Flatpickr popup — used on Meet session / attendance forms */
.flatpickr-calendar {
  z-index: 1200 !important;
  border-radius: calc(var(--admin-radius) * 0.95) !important;
  border: 1px solid color-mix(in oklch, var(--admin-border), white 18%) !important;
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 20%) inset,
    0 14px 36px -14px color-mix(in oklch, var(--admin-primary), transparent 55%) !important;
  font-family: inherit !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
.flatpickr-weekday {
  background: color-mix(in oklch, var(--admin-accent-soft), white 48%) !important;
  color: color-mix(in oklch, var(--admin-primary), black 10%) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--admin-primary) !important;
  border-color: var(--admin-primary) !important;
}

.flatpickr-day.today {
  border-color: color-mix(in oklch, var(--admin-primary), white 35%) !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: color-mix(in oklch, var(--admin-accent-soft), white 30%) !important;
}