:root {
    /*    --These are the calendar colours-- */
    --council-primary: var(--main-color);
    --council-secondary: rgb(222, 226, 230);
    --council-light: var(--alt-color-light);
    --council-border: #dee2e6;
    --council-text: #333;
    --council-muted: #333;
    --council-success: #28a745;
    --council-warning: #ffc107;
}

#calendar {
    border: 1px solid var(--council-border);
}

        /* Event details panel */
        .event-details-panel {
            border: 1px solid var(--council-border);
        }

        .event-details-panel h3 {
            color: var(--council-primary);
            border-bottom: 2px solid var(--council-border);
        }

        .event-details-panel p {
            color: var(--council-text);
        }

        .event-details-panel strong {
            color: var(--council-primary);
        }

        .event-details-placeholder {
            color: var(--council-muted);
            border: 2px dashed var(--council-border);
            background: var(--council-light);
        }

        .event-details-placeholder h4 {
            color: var(--council-primary);
        }

        .close-details {

            color: var(--council-muted);
           
        }

        .close-details:hover {
            color: var(--council-primary);
            background-color: var(--council-light);
        }

        /* Header styling to match council branding */
        .fc .fc-toolbar {
            background: var(--council-light);
            border: 1px solid var(--council-border);
            
        }

        .fc .fc-toolbar-title {
            color: var(--council-primary);
           
        }

        /* Button styling to match council theme */
        .fc .fc-button-primary {
            background-color: var(--council-primary);
            border-color: var(--council-primary);
            
        }

        .fc .fc-button-primary:hover {
            background-color: var(--council-secondary);
            border-color: var(--council-secondary);
        }

        .fc .fc-button-primary:active,
        .fc .fc-button-primary.fc-button-active {
            background-color: var(--council-secondary);
            border-color: var(--council-secondary);
        }

        /* Day grid styling */
        .fc .fc-daygrid-day {
            border: 1px solid var(--council-border);
        }

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

        .fc .fc-col-header-cell {
            background-color: var(--council-light);
            border: 1px solid var(--council-border);
            color: var(--council-primary);
        }

        /* Event styling */
        .fc .fc-timegrid-event{
            background-color: var(--council-primary);
        }

        .fc .fc-event {
            /* background-color: var(--council-secondary); */
            border-color: var(--council-light);
            color: var(--council-primary);
        }

         .fc .fc-event.fc-daygrid-event:hover {
            background-color: white;
            box-shadow: 0 0 0 2px white, 0 0 0 4px var(--council-secondary);
        }

        .fc .fc-event:hover {
            background-color: var(--council-primary);
        }

        .fc .fc-event.fc-daygrid-event.selected {
            background-color: white;
            box-shadow: 0 0 0 2px white, 0 0 0 4px var(--council-secondary);
        }

        .fc .fc-event.fc-list-event.selected {
            background-color: white;
            box-shadow: 0 0 0 2px white, 0 0 0 4px var(--council-secondary);
        }

        .fc .fc-event.selected {
            background-color: var(--council-primary);
            box-shadow: 0 0 0 2px white, 0 0 0 4px var(--council-secondary);
        }

        /* List view styling */
        .fc .fc-list-table {
            border: 1px solid var(--council-border);
        }

        .fc .fc-list-day-cushion {
            background-color: var(--council-light);
            color: var(--council-primary);
           
        }

        .fc .fc-list-event-dot {
            background-color: var(--council-primary);
            border-color: var(--council-primary);
        }

        .fc .fc-daygrid-event-dot {
            background-color: var(--council-primary);
        } 

        .fc .fc-list-event-title {
            color: var(--council-text);
            font-size: 13px !important;
            text-align: left !important;
            vertical-align: middle !important;
        }

        .fc .fc-list-event-time {
            color: var(--council-muted);
            vertical-align: middle !important;
        }

        .fc .fc-list-event:hover {
            background-color: var(--council-light);
        }
        .fc .fc-day-today .fc-daygrid-day-number {
            background-color: var(--council-secondary);  
        }

        /* Loading state */
        .calendar-loading {
            color: var(--council-muted);
        }


        /* This is for compact events */

            .upcoming-events {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                background: #fff;
                border-radius: 8px;
                border: 1px solid #e1e5e9;
                overflow: hidden;
                max-width: 400px;
            }

            .events-header {
                background: #f8f9fa;
                padding: 12px 16px;
                font-weight: 600;
                color: #495057;
                border-bottom: 1px solid #e1e5e9;
                font-size: 14px;
            }

            .event-item {
                display: flex;
                align-items: center;
                padding: 12px 16px;
                border-bottom: 1px solid #f1f3f4;
                gap: 12px;
            }

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

            .event-item:hover {
                background: #f8f9fa;
            }

            .event-date {
                text-align: center;
                min-width: 60px;
                flex-shrink: 0;
            }

            .when {
                font-size: 12px;
                font-weight: 600;
                color: #6c757d;
                text-transform: uppercase;
                line-height: 1;
            }

            .time {
                font-size: 13px;
                color: #007bff;
                font-weight: 500;
                margin-top: 2px;
            }

            .event-details {
                flex: 1;
                min-width: 0; /* Allows text to truncate */
            }

            .event-title {
                font-size: 14px;
                font-weight: 500;
                color: #212529;
                line-height: 1.3;
                margin-bottom: 2px;
                
                /* Truncate long titles */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .event-location {
                font-size: 12px;
                color: #6c757d;
                
                /* Truncate long locations */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .loading, .error, .no-events {
                padding: 20px;
                text-align: center;
                color: #6c757d;
                font-size: 14px;
            }

            .error {
                color: #dc3545;
            }

            /* Responsive */
            @media (max-width: 480px) {
                .upcoming-events {
                    max-width: 100%;
                }
                
                .event-item {
                    padding: 10px 12px;
                }
                
                .event-date {
                    min-width: 50px;
                }
            }