/* Full Calendar CSS */
#calendar {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    padding: 15px 0 10px 0;
    gap: 10px;
    border: 1px solid var(--kiwanis-blue);
    border-radius: 0.6em;
    /* background-color: #000000; */
    /* min-width: 624px; */
}

#calendarElement {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    overflow: visible;
}

.fc {
    .fc-view {
        border-top: 1px solid var(--kiwanis-blue);
        border-left: 0;
        border-right: 0;
        
        &.fc-list {
            border-bottom: 1px solid var(--kiwanis-blue);
        }

        table .fc-scrollgrid-sync-table {
            border-bottom: 1px solid var(--kiwanis-blue);
        }
    }

    /* Toolbar header */
    .fc-toolbar.fc-header-toolbar {
        display: flex;
        flex-wrap: wrap;
        row-gap: 5px;
        column-gap: 20px;
        padding: 0 20px 7px 20px;
        margin: 0;
        justify-content: space-between;
    }

    .fc-toolbar-chunk {
        font-size: 1em;

        @media all and (max-width: 767px) {
            &:has(.fc-today-button) {
                order: 1;
            }
            
            &:has(.fc-toolbar-title) {
                order: 3;
                font-size: clamp(0.5em, calc((200vw - 384px) / 576px * 1em), 1em);
                flex-basis: 100%;
            }

            &:has(.fc-dayGridMonth-button) {
                order: 2;
                flex-basis: 0;
            }

            &:has(+ .fc-toolbar-chunk .fc-listWeek-button.fc-button-active) .fc-toolbar-title {
                font-size: clamp(1.5em, calc((100vw - 768px) / 768px * 3em + 3em), 3em);
            }
        }

        @media all and (768px <= width <= 991px) {
            &:has(.fc-today-button) {
                order: 1;
            }

            &:has(.fc-dayGridMonth-button) {
                order: 2;
            }
            
            &:has(.fc-toolbar-title) {
                order: 3;
                flex-basis: 100%;
            }

            &:has(+ .fc-toolbar-chunk .fc-listWeek-button.fc-button-active) .fc-toolbar-title {
                font-size: clamp(1.8em, calc((200vw - 768px) / 576px * 3em), 3em);
            }
        }
        
        &:has(+ .fc-toolbar-chunk .fc-listWeek-button.fc-button-active) {
            font-size: 0.75em;
        }

        .fc-prev-button, .fc-dayGridMonth-button {
            border-radius: 1.2em 0 0 1.2em;
            text-transform: capitalize;
        }

        .fc-next-button, .fc-listWeek-button {
            border-radius: 0 1.2em 1.2em 0;
            text-transform: capitalize;
        }

        .fc-today-button {
            border-radius: 1.2em;
            text-transform: capitalize;
        }

        .fc-toolbar-title {
            padding: 0;
            font-size: 3em;
            text-align: center;
        }

        .fc-button-primary, .fc-today-button {
            background-color: var(--kiwanis-blue);
            border-color: #000000;
            color: #FAE0A7;
        }

        .fc-today-button:disabled, .fc-button-primary:not(:disabled).fc-button-active  {
            opacity: 100%;
            background-color: var(--kiwanis-gold);
            color: var(--kiwanis-blue);
            box-shadow: 0;
            outline: 0;
        }
    }

    /* Month View */
    .fc-daygrid-body {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .fc-col-header {
        background-color: var(--kiwanis-blue);
    }

    .fc-col-header-cell {
        font-size: 1.5em;
    }
    
    .fc-col-header-cell-cushion {
        color: #FFFFFF;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: .07em;
    }

    .fc-daygrid-day-number {
        color: var(--kiwanis-blue);
        text-decoration: none;
        padding: 4px 6px 0 0;
    }

    .fc-daygrid-block-event {
        min-height: 0;
        height: 1.6em;
        overflow: hidden;
        transition: transform 0.3s ease-in-out;
        line-height: 1.3em;
    }

    /* Needed for event blocks to pop out of the edges. */
    .fc-scroller, .fc-scroller-harness {
        overflow: visible !important;
    }

    /* Default event block */
    .fc-h-event {
        background-color: var(--kiwanis-blue);
        border: 1px solid var(--kiwanis-blue);;
        border-radius: 6px;
    }

    .fc-event-main {
        .fc-event-main-frame {
            width: max-content;
            padding-left: 2px;

            .fc-event-time {
                overflow: visible;
                margin: 0;
            }

            .fc-event-title-container {
                padding-right: 0.1em;
            }
        }
    }

    @media all and (max-width: 767px) {
        .fc-col-header-cell {
            font-size: clamp(1em, calc((200vw - 384px) / 576px * 1.5em), 1.5em);
        }

        .fc-daygrid-day-number {
            padding: 2px 3px 0 0;
            font-size: clamp(0.7em, calc((200vw - 767px) / 767px * 1.7em), 1em);
        }
    }

    .fc-day-other {
        background-color: lightgray;
    }

    .fc-more-link {
        text-decoration: none;
        color: black;
        font-weight: bold;
    }

    /* Hide FullCalendar's popover */
    .fc-popover {
        visibility: hidden !important;
    }

    /* List view */
    .fc-list-day-text, .fc-list-day-side-text, .fc .fc-list-event-title a, .fc-list-event-time {
        color: var(--kiwanis-blue);
        text-decoration: none;
    }

    .fc-listWeek-view {
        overflow: hidden;
    }
     
    .fc-list-table {
            border-bottom: 1px solid var(--kiwanis-blue);
        > tbody > tr:not(:first-child) > th > .fc-list-day-cushion {
            border-top: 1px solid var(--kiwanis-blue);
        }
    }

    .fc-list-event {
        border-top: 1px solid rgb(from var(--kiwanis-blue) r g b / 0.1);;
        border-color: 50%;
    }

    tr.fc-list-event {
        display: flex;
        &:hover {
            background-color: var(--kiwanis-gold);
            td {
                background-color: var(--kiwanis-gold);
            }
        }
        
        > * {
            border: 0;
        }
    
        .fc-list-event-time {
            width: 165px;
        }

        .fc-list-event-graphic{
            padding-left: 0;
            z-index: 1;
        }

        .fc-list-event-title {
            .modal-tag {
                margin-right: 0.5em;
            }

            span.event-badges > .badge {
                position: relative;
                top: -1px;
            }

            > a {
                display: inline-block;
            }
        }
    }

    .fc-list-empty {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;

        .fc-list-empty-cushion {
            margin: 1em;
            font-size: clamp(1em, calc((100vw - 768px) / 768px * 2em + 2em), 2em);
            text-align: center;
        }
    }
    
    /* Multi-day events */
    .fc-h-event:not(.fc-event-end) {
        clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
        margin-right: -5px;

        .fc-event-title-container {
            padding-right: 0.5em;
        }
    }

    .fc-h-event:not(.fc-event-start) {
        clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
        margin-left: -5px;
        padding-left: 5px;
    }

    .fc-h-event:not(.fc-event-start):not(.fc-event-end) {
        clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
    }
}

/* Also for Month View */
.fc-theme-standard tr > th {
    border-color: white;
}

.fc-theme-standard tr > td {
    border-color: var(--kiwanis-blue);
}

/* Remove some borders, leaving behind the internal borders */
.fc-theme-standard tr > th:last-of-type, .fc-theme-standard tr > td:last-of-type {
    border-right-width: 0;
}

.fc-theme-standard tr > th, .fc-theme-standard tr > td:last-of-type {
    border-bottom-width: 0;
}

.fc-theme-standard .fc-scrollgrid {
    border: 0;
}

#calendarAddBtnContainer {
    display: flex;
    gap: 2.5%;
    padding-left: 15px;
    padding-right: 10px;
    
    .calendarAddBtnTitle {
        font-weight: bold;
    }

    .calendarAddBtn {
        background-color: var(--kiwanis-blue);
        border-color: #000000;
        
        &:hover {background-color: #99CAEA !important;}
        &:active {background-color: var(--kiwanis-gold) !important;}
    }
}

/* Custom Popover */
#calendarPopoverContainer {
    position: relative;
}

.calendar-popover {
    z-index: 5;
    min-width: 150px;
    width: 20%;
    background: white;
    border: 1px solid var(--kiwanis-blue);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    
    /* Bubble in */
    transform-origin: center center;
    animation: calendarPopoverIn 0.2s ease-out;

    /* Fade out */
    &.closing {
        animation: calendarPopoverOut 0.15s ease-in forwards;
    }
}

@keyframes calendarPopoverIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    70% {
        opacity: 1;
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes calendarPopoverOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.calendar-popover-header {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    background-color: whitesmoke;
    border-bottom: 1px solid lightgray;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 10px 10px 0 0;
}

.calendar-popover-title {
    grid-column: 2;
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--kiwanis-blue);

    .calendar-popover-title-weekday {
        padding-top: 5px;
        font-size: 1em;
        line-height: 1em;
    }

    .calendar-popover-title-day {
        font-size: 2em;
        line-height: 1em;
    }
}

.calendar-popover-close {
    margin: 10px 10px 0 0;
    grid-column: 3;
    justify-self: right;
    border: 0;
    cursor: pointer;
    color: grey;

    &:hover {
        color: black;
    }
}

.calendar-popover-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px;
}

.calendar-popover-event {
    display: block;

    padding: 5px 10px;

    color: var(--kiwanis-blue);
    text-decoration: none;

    cursor: pointer;
}

.calendar-popover-event:hover {
    background-color: var(--kiwanis-gold);
}