.sidebar {
    background-color: #2d3748; /* Dark gray */
    color: #e2e8f0; /* Light gray */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}

/* For WebKit browsers (Chrome, Safari) */
.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar .nav-link {
    color: #a0aec0; /* Lighter gray for links */
}

.sidebar .nav-link.active {
    background-color: #4a5568; /* Slightly lighter dark gray for active link */
    color: #ffffff; /* White text for active link */
}

.calendar-section {
    background-color: #2d3748;
    border-radius: 0.5rem;
}

.calendar-section #calendar-container {
    background-color: #2d3748;
    color: #e2e8f0;
}

.calendar-chip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 0; /* Behind the day number */
}

.calendar-chip-day {
    background-color: rgba(60, 108, 177, 1); /* Blue */
    border: 1px solid white;
}

.calendar-chip-scheduled {
    background-color: rgba(121, 127, 24, 1); /* Green */
}

.calendar-chip-deadline {
    background-color: rgba(168, 68, 50, 0.8); /* Red */
}

.calendar-chip-both {
    background: linear-gradient(to right, #4CAF50 50%, #f44336 50%); /* Green and Red for both */
}

.calendar-chip-meeting {
    background-color: rgba(255, 204, 0, 0.63); /* Yellow for meetings */
}

.calendar-chip-scheduled-meeting {
    background: linear-gradient(to right, rgba(121, 127, 24, 1) 50%, rgba(255, 204, 0, 0.8) 50%); /* Green and Yellow */
}

.calendar-chip-deadline-meeting {
    background: linear-gradient(to right, rgba(168, 68, 50, 0.8) 50%, rgba(255, 204, 0, 0.8) 50%); /* Red and Yellow */
}

.calendar-chip-all {
    background: linear-gradient(to right, rgba(121, 127, 24, 1) 33%, rgba(168, 68, 50, 0.8) 33%, rgba(168, 68, 50, 0.8) 66%, rgba(255, 204, 0, 0.8) 66%); /* Green, Red, Yellow for all */
}

.urgent-tasks-section ul {
    list-style: none;
    padding: 0;
}

.urgent-tasks-section li {
    padding: 0;
    border-bottom: none;
}

.urgent-tasks-section li:last-child {
    border-bottom: none;
}

.urgent-notification {
    display: block;
    /*background-color: #dc2626;*/ /* Red-700 */
    background-color: rgba(168, 68, 50, 0.8);
    color: white;
    padding: 0.75rem;
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.2s ease-in-out;
    width: 90%;
}

.urgent-notification:hover {
    background-color: #b91c1c; /* Red-800 */
}

.urgent-notification .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.urgent-notification .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Context Menu Styles */
.context-menu {
    position: fixed;
    background-color: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    /*padding: 0.5rem 0;*/
}

.context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.context-menu li {
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 13.5px;
    display: flex; /* Enable flexbox for icon and text alignment */
    align-items: center; /* Vertically align items */
}

.context-menu li:hover {
    background-color: #4a5568;
}

.context-menu li.has-hover-color:hover {
    color: var(--hover-color);
}

.context-menu li.has-hover-color:hover .menu-icon svg {
    fill: var(--hover-color); /* Change SVG fill color on hover */
}

.context-menu .menu-icon {
    margin-right: 0.5rem; /* Space between icon and text */
    display: flex; /* Ensure SVG is treated as a flex item */
    align-items: center; /* Vertically align SVG */
}

.context-menu .menu-icon svg {
    width: 16px; /* Adjust as needed */
    height: 16px; /* Adjust as needed */
    fill: #e2e8f0; /* Default SVG color */
}

.context-menu.hidden {
    display: none;
}

.context-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -0.5rem; /* Align with the parent item */
    background-color: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1100; /* Ensure it appears above the parent menu */
    width: 100%;
}

.context-menu li > .submenu.submenu-visible {
    display: block;
}

.context-menu li.has-submenu::after {
    content: '▶';
    position: absolute;
    right: 0.5rem;
    color: #a0aec0;
    font-size: 0.8rem;
}

.context-menu .submenu.submenu-left {
    left: auto;
    right: 100%;
}

.context-menu li.has-submenu.submenu-left::after {
    content: '◀';
    right: auto;
    left: 0.5rem;
}

.filter-hidden {
    display: none;
}

.table-icon-image {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
}

.table-icon-emoji {
    font-size: 20px;
    line-height: 24px;
    display: inline-block;
    text-align: center;
    width: 24px;
}

/* Collapsible Menu */
#main-nav-container ul > li {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: transparent; /* Ensure non-active items are transparent */
    border-radius: 6px;
}

#main-nav-container ul > li.active-link {
    max-height: 42px; /* Set to the natural height of your link */
}

#main-nav-container:hover ul > li {
    max-height: 42px; /* Expand all items on hover */
}

#main-nav-container ul > li.active-link:hover {
    /* Optional: different hover for the active link if needed */
}

/* Ensure the active link itself has the right styles when it's the only one visible */
#main-nav-container ul > li.active-link a {
    /* Styles for the active link */
}