body {
    background-color: #f8f9fa;
}

.container {
    max-width: 600px;
}

h2, h4 {
    color: #343a40;
}

#auth-section, #timesheet-section, #expense-section, #payslip-section {
    margin-top: 20px;
}

/* Ensure the dropdown is scrollable when there are more than 5 messages */
#messageDropdownContainer {
    max-height: 300px; /* Limit height to 300px */
}

/* Remove padding from dropdown menu to use space efficiently */
.dropdown-menu {
    padding: 0;

}

/* Make message items more compact and align content */
.message-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 8px;  /* Compact padding */
    font-size: 0.85rem;  /* Smaller font size */
}

/* Icon container with a fixed width to prevent large gaps */
.message-icon {
    flex-shrink: 0;  /* Prevent icon from shrinking */
    margin-right: 5px;  /* Minimal margin for spacing */
}

/* Truncate long titles, but don't let them take too much space */
.message-title {
    flex-grow: 1;    /* Allow the title to grow */
    flex-shrink: 1;  /* Allow the title to shrink */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* Truncate after a certain length */
    margin-right: 5px;  /* Small margin for spacing */
}

/* Sender name and date container with fixed width */
.text-muted {
    flex-grow: 0;  /* Prevent sender and date from expanding too much */
    flex-shrink: 1;  /* Allow shrinking if space is tight */
    margin-right: 5px;  /* Minimal margin between elements */
    font-size: 0.8rem;  /* Smaller font for metadata */
}


/* New (unread) message icon color */
.message-icon-new {
    color: darkblue;
}

/* Read message icon color */
.message-icon-read {
    color: grey;
}

.status-chip {
    top: 100px;    /* Adjust this value to control top spacing */
    right: 100px;  /* Adjust this value to control right spacing */
    padding: 0.4em 0.75em;  /* Add padding inside the chip for a better look */
    font-size: 0.85rem;     /* Slightly smaller font for the chip */
}

 /* Ensure navbar stretches across full width */
 .full-width-navbar {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.navbar {
    background-color: #191970 !important; /* Midnight Blue */
    color: white !important;
}