/*
 * Flatpickr brand theming — overrides Flatpickr's default blue (#569ff7).
 *
 * Resolves the dynamic theme colour ($theme_color) set by the Super Admin:
 *   - Admin/web panel emits --theme-color   (:root in layouts/include.blade.php)
 *   - Public/student side emits --primary-color (:root in web/footer.blade.php)
 * Both map to $theme_color. The var() fallback chain picks whichever exists on
 * the current side, defaulting to #38A3A5. Must be loaded AFTER flatpickr.min.css.
 */
.flatpickr-calendar {
    --fp-theme: var(--theme-color, var(--primary-color, #38A3A5));
    --fp-theme-soft: color-mix(in srgb, var(--fp-theme) 15%, #fff);
}

/* Selected day + range endpoints */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--fp-theme);
    border-color: var(--fp-theme);
    color: #fff;
}

/* Connector bar between range endpoints */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -10px 0 0 var(--fp-theme);
    box-shadow: -10px 0 0 var(--fp-theme);
}

.flatpickr-day.week.selected {
    -webkit-box-shadow: -5px 0 0 var(--fp-theme), 5px 0 0 var(--fp-theme);
    box-shadow: -5px 0 0 var(--fp-theme), 5px 0 0 var(--fp-theme);
}

/* Today */
.flatpickr-day.today {
    border-color: var(--fp-theme);
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--fp-theme);
    border-color: var(--fp-theme);
    color: #fff;
}

/* Hover / keyboard focus on non-selected days — light brand tint */
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    background: var(--fp-theme-soft);
    border-color: var(--fp-theme-soft);
}

/* Days inside a selected range */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    background: var(--fp-theme-soft);
    border-color: var(--fp-theme-soft);
    -webkit-box-shadow: -5px 0 0 var(--fp-theme-soft), 5px 0 0 var(--fp-theme-soft);
    box-shadow: -5px 0 0 var(--fp-theme-soft), 5px 0 0 var(--fp-theme-soft);
}

/* Month navigation arrows on hover */
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--fp-theme);
}

/* Time picker: number / AM-PM cells on hover & focus */
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--fp-theme-soft);
}