:root {
            /* Updated primary color for selection based on user's CSS */
            --primary: #007bff; 
            --info: #17a2b8;
            --success: #28a745;
        }

        /* ------------------------------------- */
        /* CALENDAR STYLING */
        /* ------------------------------------- */

        .container {
            max-width: 1200px;
        }
        
        #calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        
        .day {
            text-align: center;
            padding: 12px 5px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s, border 0.2s;
            font-weight: 500;
            min-height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Days of Week Header */
        .day.header { 
            font-weight: bold; 
            background: #e9ecef;
            color: #495057; 
            cursor: default;
        }

        /* Unavailable Days (Events/Full Bookings) */
        .day.event { 
            background: #f8d7da;
            color: #721c24;
            cursor: not-allowed; 
            border: 1px dashed #f5c6cb;
            opacity: 0.7;
        }
        /* Partially Booked/Informational Day */
        .day.meeting { 
            background: #cce5ff;
            color: #004085; 
        }
        /* Past Days */
        .day.past { 
            background: #f8f9fa;
            color: #adb5bd;
            cursor: not-allowed; 
        }

        /* Hover State for bookable days */
        .day:hover:not(.event):not(.past):not(.selected) { 
            background: #e9f7ff;
        }

        /* Selected Day (Uses --primary as per user's style update) */
        .day.selected {
            background: var(--primary); 
            color: white;
            box-shadow: 0 0 0 2px var(--primary);
            font-weight: bold;
        }

        /* Today's Date */
        .day.today:not(.past):not(.event):not(.selected) {
            border: 2px solid var(--success);
            font-weight: bold;
        }

        /* ------------------------------------- */
        /* SIDE CONTAINER SLOTS STYLING */
        /* ------------------------------------- */
        
        /* Custom style for clickable time slot badges */
        .slot-item {
            cursor: pointer; 
            padding: 10px 15px; 
            font-size: 0.9rem; 
            transition: all 0.2s;
            /* Updated border color to reflect user's primary color choice */
            border: 1px solid var(--primary); 
            color: var(--primary);
            font-weight: 600;
            background-color: #f0f8ff; 
        }
        .slot-item:hover {
            background-color: var(--primary) !important;
            color: white !important;
            transform: translateY(-1px);
        }
        .slot-item.selected {
            background-color: var(--primary) !important;
            color: white !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-weight: bold;
        }

        /* Floating Label fixes for select (kept for modern look) */
        .form-select-lg {
            padding-top: 1.625rem !important;
            padding-bottom: 0.625rem !important;
        }