#sidebarMenu {
    width: 250px;
    transition: transform 0.3s ease-in-out;
}

@media (max-width: 768px) {
    #sidebarMenu {
        position: absolute;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        z-index: 1050;
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
}

#sidebarMenu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform 0.3s ease-in-out;
}

.select2-container.is-invalid .select2-selection {
    border: 1px solid #dc3545 !important;
    border-radius: 0.25rem;
}

#header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
}

#module-status, #module-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

    #module-status .logout {
        margin-left: 10px;
    }

.nav-item.dropdown {
    margin-left: 15px;
}
#header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 15px;
    color: white;
}

.user-dropdown-toggle {
    font-size: 15px;
    cursor: pointer;
}

.dropdown-menu a.dropdown-item {
    font-size: 14px;
}

#notifBadge {
    font-size: 11px;
    padding: 2px 6px;
}
/* Make top bar items align right */
#header-box {
    display: flex;
    justify-content: flex-end !important;
    align-items: center;
    padding-right: 20px;
}

/* Username color fix */
.text-user {
    /*color: #222 !important;  dark text */
    color: #007bff !important; /* Bootstrap primary blue */
}

    .text-user:hover {
        color: #0056b3 !important; /* slightly darker on hover */
    }

/* Ensure caret icon is visible too */
#userDropdown i {
    color: #222 !important;
}

.question-row:hover {
    background: #f8f9fa;
}
.answer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
    gap: 8px;
}

@media (max-width: 768px) {
    .answer-grid {
        grid-template-columns: repeat(2, 1fr); /* fall back to 2-column layout */
    }
}

.selectable-card {
    cursor: pointer;
    border-radius: 10px;
    transition: 0.25s;
    padding: 10px;
}

.selectable-card.selected {
    border: 2px solid #0d6efd;
    background: #e7f1ff;
}
.selectable-card.selected {
    border: 2px solid #0d6efd;
    background: #e7f1ff;
}
/* Keep dropdowns inline and align badge relative to bell */
.header-actions .dropdown {
    display: inline-block;
    vertical-align: middle;
}

/* Notification icon wrapper */
.notification-icon {
    position: relative;
    display: inline-block;
}

/* Fine tune badge position */
.notif-badge {
    position: absolute;
    top: -4px; /* tweak as needed */
    right: -6px; /* tweak as needed */
    transform: translate(30%, -30%);
    font-size: 0.65rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    z-index: 1050;
}