/* Custom scrollbar, if needed */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #d8b4fe; /* a lighter pink/purple */
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #c084fc; /* a slightly darker pink/purple */
        }
        /* Modal styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            display: flex; /* Use flex to center content */
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 500px;
            position: relative;
        }
        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
        }
        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
         /* Calendar specific styles */
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
            border: 1px solid #e2e8f0; /* gray-200 */
            border-radius: 0.5rem; /* rounded-lg */
            overflow: hidden;
        }
        .calendar-day-header {
            background-color: #f8fafc; /* gray-50 */
            padding: 0.75rem;
            text-align: center;
            font-weight: 500;
            font-size: 0.75rem; /* text-xs */
            color: #4a5568; /* gray-700 */
            border-bottom: 1px solid #e2e8f0;
        }
        .calendar-day {
            background-color: #fff;
            min-height: 120px; /* Adjust as needed */
            padding: 0.5rem;
            border-right: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
            position: relative;
            cursor: pointer; /* To indicate clickable for adding events */
        }
        .calendar-day:nth-child(7n) { /* Remove right border for last column */
            border-right: none;
        }
        .calendar-day:nth-last-child(-n + 7) { /* Remove bottom border for last row (approx) */
            border-bottom: none;
        }
        .calendar-day.other-month {
            background-color: #f1f5f9; /* gray-100 */
            color: #94a3b8; /* gray-400 */
        }
        .calendar-day.current-day {
            outline: 2px solid #ec4899; /* pink-500 */
            outline-offset: -2px;
            z-index: 10; /* Bring current day to front if needed for outline visibility */
        }
        .day-number {
            font-weight: 600;
            font-size: 0.875rem; /* text-sm */
            margin-bottom: 0.5rem;
            text-align: right;
        }
        .event-list {
            list-style: none;
            padding: 0;
            margin-top: 0.5rem;
            font-size: 0.75rem; /* text-xs */
            overflow-y: auto;
            max-height: 80px; /* Adjust as needed */
        }
        .event-item {
            background-color: #fbcfe8; /* pink-200 */
            color: #831843; /* pink-900 */
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            margin-bottom: 0.25rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .event-item.type-meeting {
             background-color: #bfdbfe; /* blue-200 */
             color: #1e40af; /* blue-900 */
        }
        .event-item.type-holiday {
             background-color: #d1fae5; /* green-200 */
             color: #065f46; /* green-900 */
        }
        @media(max-width:786px){
            .header{
                margin-top: 56px;
            }
        }
        @media(max-width:430px){
            .header{
                margin-top: 56px;
            }
        }