/* Events Calendar Styles - Based on Figma Design */

#events-calendar {
    font-family: inherit;
}

/* On mobile: allow scrolling to prevent overflow */
@media (max-width: 63.9375rem) {
    #events-calendar .fc-scroller {
        overflow: auto !important;
        max-height: 100% !important;
    }
}

/* On desktop: disable scrolling - make it fit content */
@media (min-width: 64rem) {
    #events-calendar {
        overflow: visible !important;
    }
    
    #events-calendar .fc-scroller {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    #events-calendar .fc-scroller-harness {
        overflow: visible !important;
        height: auto !important;
    }
    
    #events-calendar .fc-scrollgrid {
        height: auto !important;
    }
    
    #events-calendar .fc-scrollgrid-section {
        height: auto !important;
    }
}

/* Header with month/year and navigation arrows */
#events-calendar .fc-header-toolbar {
    margin-bottom: 16px;
    padding: 0 .5rem;
}


#events-calendar .fc-toolbar-title {
    font-size: 1.375rem;
    font-weight: 500;
    text-align: center;
    color: #1B1B1B;
    text-transform: capitalize;
}

#events-calendar .fc-button-group {
    display: flex;
    gap: .5rem;
}

#events-calendar .fc-button {
    background: transparent;
    border: none;
    padding: .25rem .5rem;
    color: #1B1B1B;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
}

/* Hide default button text/content */
#events-calendar .fc-prev-button .fc-icon,
#events-calendar .fc-next-button .fc-icon {
    display: none;
}

/* Prev button - left arrow SVG */
#events-calendar .fc-prev-button::before {
    content: '';
    display: block;
    width: 1.375rem;
    height: 1.0625rem;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='17' viewBox='0 0 22 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.4023 8.20081L1.40234 8.2008M1.40234 8.2008L8.77076 15.7008M1.40234 8.2008L8.77076 0.700807' stroke='%23032352' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Next button - right arrow SVG */
#events-calendar .fc-next-button::before {
    content: '';
    display: block;
    width: 1.375rem;
    height: 1.0625rem;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='17' viewBox='0 0 22 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8.20081H20M20 8.20081L12.6316 0.700806M20 8.20081L12.6316 15.7008' stroke='%23032352' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#events-calendar .fc-button:hover {
    opacity: 0.7;
}

#events-calendar .fc-button:focus {
    box-shadow: none;
}

#events-calendar .fc-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Day names header (PON, WT, ŚR, etc.) */
#events-calendar .fc-col-header-cell {
    padding: .5rem 0;
    border: none;
}

#events-calendar .fc-col-header-cell-cushion {
    font-size: 1rem;
    color: #6B7280;
    text-transform: uppercase;
    padding: 0;
}

/* Calendar grid */
#events-calendar .fc-daygrid {
    border: none;
}

#events-calendar .fc-daygrid-day {
    border: none;
    padding: 4px;
}

#events-calendar .fc-daygrid-day-frame {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem 0;
}

/* Day numbers */
#events-calendar .fc-daygrid-day-number {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-body);
    padding: .25rem;
    width: 100%;
    text-align: center;
    position: relative;
}


/* Dates from previous/next month (grayed out) */
#events-calendar .fc-day-other .fc-daygrid-day-number {
    color: #70767e;
    font-weight: 400;
}

/* Weekend dates (lighter gray) */
#events-calendar .fc-day-sat .fc-daygrid-day-number,
#events-calendar .fc-day-sun .fc-daygrid-day-number {
    color: #70767e;
    font-weight: 400;
}

/* Selected date - circular outline */
#events-calendar .fc-day-selected .fc-daygrid-day-number,
#events-calendar .fc-day-today .fc-daygrid-day-number {
    position: relative;
    z-index: 1;
}

#events-calendar .fc-day-selected .fc-daygrid-day-number::before,
#events-calendar .fc-day-today .fc-daygrid-day-number::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: .125rem solid #1B1B1B;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* Remove default FullCalendar selected background */
#events-calendar .fc-day-selected {
    background-color: transparent !important;
}

/* Hover effect on dates */
#events-calendar .fc-daygrid-day:hover .fc-daygrid-day-number {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

/* Event dots - blue dots below dates with events */
#events-calendar .fc-daygrid-day-events {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#events-calendar .fc-event {
    background: #1B4D7A !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: .375rem !important;
    height: .375rem !important;
    border-radius: 50% !important;
    position: relative !important;
    display: inline-block !important;
}

#events-calendar .fc-event-main {
    width: .375rem;
    height: .375rem;
    padding: 0;
    margin: 0;
}

/* Hide event titles, show only dots */
#events-calendar .fc-event-title {
    display: none !important;
}

/* Ensure day frame can contain events */
#events-calendar .fc-daygrid-day-frame {
    position: relative;
    padding-bottom: .5rem;
}

/* Clickable dates */
#events-calendar .fc-daygrid-day {
    cursor: pointer;
}

/* Remove default FullCalendar borders and backgrounds */
#events-calendar .fc-theme-standard td,
#events-calendar .fc-theme-standard th {
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
}

#events-calendar .fc-scrollgrid {
    border: none !important;
}

#events-calendar .fc-scrollgrid-section {
    border: none !important;
}

#events-calendar .fc-scrollgrid-section table {
    border: none !important;
}

/* Remove all borders from calendar cells */
#events-calendar .fc-day,
#events-calendar .fc-daygrid-day,
#events-calendar .fc-daygrid-day-top,
#events-calendar .fc-col-header-cell,
#events-calendar .fc-col-header,
#events-calendar table,
#events-calendar table td,
#events-calendar table th {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
}

/* Remove borders from scrollgrid inner elements */
#events-calendar .fc-scrollgrid-sync-table,
#events-calendar .fc-scrollgrid-sync-inner {
    border: none !important;
}

/* Remove today button if exists */
#events-calendar .fc-today-button {
    display: none;
}

/* Remove background from today's date - multiple selectors for better specificity */
#events-calendar .fc-day-today,
#events-calendar .fc-daygrid-day.fc-day-today,
#events-calendar .fc .fc-daygrid-day.fc-day-today {
    background-color: transparent !important;
    background: transparent !important;
}

/* Add dot below dates that have events - only for days with class has-events */
#events-calendar .fc-daygrid-day.has-events .fc-daygrid-day-frame::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: .5rem;
    height: .5rem;
    background-color: #032352;
    border-radius: 50%;
    display: block;
    z-index: 1;
}

/* Hide the old event dots */
#events-calendar .fc-event {
    display: none !important;
    visibility: hidden !important;
}

.fc .fc-day-other .fc-daygrid-day-top {
    opacity: 1 !important;
}