/* Bootstrap Calendar CSS for EasyCalendar */
/* Clean, minimal styling with proper spacing */

/* Calendar table container to contain spacing */
.easycalendar-bootstrap5 .calendar-table-wrapper {
    overflow: hidden;
    margin: 0 -8px;
}

/* Calendar table spacing */
.easycalendar-bootstrap5 .calendar-table {
    border-collapse: separate;
    border-spacing: 8px;
    table-layout: fixed;
    width: 100%;
    margin: 0 8px;
}

.easycalendar-bootstrap5 .calendar-table th,
.easycalendar-bootstrap5 .calendar-table td {
    padding: 0;
    width: 14.28%; /* 100% / 7 days */
}

.easycalendar-bootstrap5 .calendar-table.bcfj-month-with-weeknumbers th,
.easycalendar-bootstrap5 .calendar-table.bcfj-month-with-weeknumbers td {
    width: 12.5%; /* 100% / 8 columns (7 days + week number) */
}

.easycalendar-bootstrap5 .bcfj-week-number {
    width: 12.5% !important;
}

/* Calendar day cells - clean design */
.easycalendar-bootstrap5 .calendar-day {
    position: relative;
    text-align: center;
    vertical-align: middle;
    background: transparent;
    cursor: default;
}

/* Only show pointer cursor when editing is allowed */
.easycalendar-bootstrap5 .calendar-day.clicableday {
    cursor: pointer;
}

.easycalendar-bootstrap5 .calendar-day:hover {
    /* No hover effects */
}

.easycalendar-bootstrap5 .calendar-day.bcfj-today .day-content {
    /* No borders or shadows for today */
}

.easycalendar-bootstrap5 .calendar-day.history:hover {
    /* No hover effects */
}

/* Day content container */
.easycalendar-bootstrap5 .day-content {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.easycalendar-bootstrap5 .day-content.single-color {
    /* Background color applied via inline style */
}

.easycalendar-bootstrap5 .day-content.changeover {
    background: linear-gradient(135deg, 
        var(--color1, #f8f9fa) 0%, 
        var(--color1, #f8f9fa) 48%, 
        transparent 48%, 
        transparent 52%, 
        var(--color2, #e9ecef) 52%, 
        var(--color2, #e9ecef) 100%);
}

/* JavaScript will set CSS custom properties for dynamic colors */

.easycalendar-bootstrap5 .day-number {
    color: var(--bs-body-color);
    z-index: 2;
    position: relative;
}

/* Legend changeover colors */
.easycalendar-bootstrap5 .legend .legenditemcolorpreview .change-over-1 {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.easycalendar-bootstrap5 .legend .legenditemcolorpreview .change-over-2 {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.easycalendar-bootstrap5 .legend .legenditemcolorpreview .date-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    line-height: 1.25rem;
    font-size: 0;
}

/* Cell loading spinner - improved UX */
.easycalendar-bootstrap5 .calendar-day.cell-loading {
    opacity: 0.7;
}

.easycalendar-bootstrap5 .cell-spinner {
    display: inline-block;
    height: 100%;
}

.easycalendar-bootstrap5 .cell-spinner .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.1em;
}

/* Navigation button loading states */
.easycalendar-bootstrap5 .bcfj-calendar-prev-month.nav-loading,
.easycalendar-bootstrap5 .bcfj-calendar-next-month.nav-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Date picker loading state */
.easycalendar-bootstrap5 .bcfjdatepicker.datepicker-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Disable text selection */
.calendar-no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Calendar month animations - default hidden */
.easycalendar-bootstrap5 .bcfj-calendar-month {
    opacity: 1; /* Default visible for no animation */
}

/* Animation delays for staggered effect */
.easycalendar-bootstrap5 .bcfj-calendar-month:nth-child(1) { animation-delay: 0.1s; }
.easycalendar-bootstrap5 .bcfj-calendar-month:nth-child(2) { animation-delay: 0.2s; }
.easycalendar-bootstrap5 .bcfj-calendar-month:nth-child(3) { animation-delay: 0.3s; }
.easycalendar-bootstrap5 .bcfj-calendar-month:nth-child(4) { animation-delay: 0.4s; }
.easycalendar-bootstrap5 .bcfj-calendar-month:nth-child(5) { animation-delay: 0.5s; }
.easycalendar-bootstrap5 .bcfj-calendar-month:nth-child(6) { animation-delay: 0.6s; }

/* Fade Up Animation */
.easycalendar-bootstrap5.animation-fade-up .bcfj-calendar-month {
    opacity: 0;
    animation: fadeUpCalendar 0.6s ease-in-out forwards;
}

/* Fade Down Animation */
.easycalendar-bootstrap5.animation-fade-down .bcfj-calendar-month {
    opacity: 0;
    animation: fadeDownCalendar 0.6s ease-in-out forwards;
}

/* Fade Left Animation */
.easycalendar-bootstrap5.animation-fade-left .bcfj-calendar-month {
    opacity: 0;
    animation: fadeLeftCalendar 0.6s ease-in-out forwards;
}

/* Fade Right Animation */
.easycalendar-bootstrap5.animation-fade-right .bcfj-calendar-month {
    opacity: 0;
    animation: fadeRightCalendar 0.6s ease-in-out forwards;
}

/* Zoom In Animation */
.easycalendar-bootstrap5.animation-zoom-in .bcfj-calendar-month {
    opacity: 0;
    animation: zoomInCalendar 0.6s ease-in-out forwards;
}

/* Flip In Animation */
.easycalendar-bootstrap5.animation-flip-in .bcfj-calendar-month {
    opacity: 0;
    animation: flipInCalendar 0.8s ease-in-out forwards;
}

/* Keyframe Definitions */
@keyframes fadeUpCalendar {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDownCalendar {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeftCalendar {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRightCalendar {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomInCalendar {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes flipInCalendar {
    from { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
    to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}