/* Calendar container styling */
#calendar {
    margin-top: 20px;
    background-color: var(--bg-tertiary);
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-primary);
}

/* FullCalendar Dark Theme Overrides */
.fc {
    color: var(--text-primary);
}

.fc-theme-standard .fc-scrollgrid {
    border-color: var(--border-primary);
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--border-primary);
}

.fc-col-header-cell {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.fc-daygrid-day {
    background-color: var(--bg-tertiary);
}

.fc-daygrid-day:hover {
    background-color: var(--bg-hover);
}

.fc-day-today {
    background-color: var(--accent-primary-bg-10) !important;
}

.fc-daygrid-day-number {
    color: var(--text-primary);
}

/* Filter controls styling */
.filter-group {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.filter-group label {
    display: block;
    margin: 10px 0;
    font-size: 14px;
    color: var(--text-primary);
}

.filter-group input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
    accent-color: var(--accent-primary);
}

/* Event styling */
.fc-event {
    background-color: #1DB954 !important;
    border-color: #1DB954 !important;
    cursor: pointer;
    transition: opacity 0.2s;
    overflow: hidden !important;
}

.fc-event:hover {
    opacity: 0.9;
}

/* Event content container */
.event-content {
    overflow: hidden;
    padding: 2px 4px;
    line-height: 1.3;
}

.event-reasons {
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 0;
}

.event-venue {
    font-weight: 600;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-artists {
    font-size: 0.9em;
    margin-bottom: 2px;
    color: rgba(255,255,255,0.95);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reasons-list {
    color: rgba(255,255,255,0.9);
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure day cells don't overflow */
.fc-daygrid-day-events {
    overflow: hidden;
}

/* Style the "more" link */
.fc-daygrid-more-link {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 0.85em;
    margin-top: 2px;
}

.fc-daygrid-more-link:hover {
    background-color: var(--bg-hover) !important;
}

/* Modal styling */
.event-modal {
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    background: var(--bg-secondary);
}

.event-modal::backdrop {
    background-color: var(--overlay-dark);
}

.modal-content {
    padding: 20px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-primary);
}

.modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5em;
}

.close-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 5px 10px;
    transition: color var(--transition-base);
}

.close-button:hover {
    color: var(--text-primary);
}

.modal-body {
    color: var(--text-primary);
}

.event-date {
    color: var(--text-secondary);
    margin-bottom: 15px;
    font-size: 1.1em;
}

.show-rating {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: var(--color-success);
    font-weight: 500;
}

.artists-list {
    margin-top: 15px;
}

.artists-list h3 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.artist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-primary);
}

.artist-item:last-child {
    border-bottom: none;
}

.artist-name {
    font-weight: 500;
    color: var(--text-primary);
}

.spotify-link {
    color: var(--color-success);
    text-decoration: none;
    position: relative;
    padding-left: 20px;
    transition: color var(--transition-base);
}

.spotify-link:hover {
    color: var(--color-success-hover);
    text-decoration: underline;
}

.spotify-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="%231DB954" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.artist-rating {
    color: var(--color-success);
}

/* Toolbar customization */
.fc-toolbar-title {
    font-size: 1.4em !important;
    color: var(--text-primary);
}

.fc-button-primary {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

.fc-button-primary:hover {
    background-color: var(--color-success-hover) !important;
    border-color: var(--color-success-hover) !important;
}

.fc-button-primary:disabled {
    background-color: var(--bg-active) !important;
    border-color: var(--border-primary) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    #calendar {
        padding: 10px;
    }
    
    .fc-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .event-modal {
        width: 95%;
        margin: 10px;
    }

    .modal-content {
        padding: 15px;
    }

    .modal-header h2 {
        font-size: 1.2em;
    }
}