body {
    padding-top: 56px;
}

/* Sidebar is hidden off-screen by default */
#sidebar {
    position: fixed;
    left: -250px;
    top: 56px;
    width: 250px;
    height: 100%;
    background: #343a40;
    transition: left 0.3s ease-in-out;
    padding-top: 20px;
    overflow-y: auto;
    visibility: hidden;
    z-index: 1050; /* Ensure it's above content on mobile */
}

/* Sidebar menu items */
#sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Sidebar links */
#sidebar ul li {
    width: 100%;
}

#sidebar ul li button {
    text-align: left;
    color: white;
    background: #343a40;
    text-decoration: none;
    display: block;
    padding: 20px;
    width: 100%;
    border: none;
    margin: 0;
    box-sizing: border-box;
}

#sidebar ul li button:hover {
    background: #495057;
}

/* Open Sidebar - Make visible & move into view */
#sidebar.sidebar-active {
    left: 0;
    visibility: visible;
}

/* Fade menu items in */
#sidebar.sidebar-active ul {
    opacity: 1;
}

/* Content default (mobile-first: no shift) */
#content {
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    margin-left: 20px;
    padding: 20px;
    width: calc(100% - 20px);
}

/* Content shift only on large screens */
@media (min-width: 992px) {
    #content.sidebar-active {
        margin-left: 260px;
        width: calc(100% - 260px);
    }
}

/* Sidebar overlays content on small screens */
@media (max-width: 991.98px) {
    #content.sidebar-active {
        margin-left: 0;
        width: 100%;
    }
}

/* Ensure department box spans full width */
.department-box,
.ticketView-box {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
    box-sizing: border-box;
}

/* Ensure department dropdown toggle button is also full width */
.department-box .btn,
.ticketView-box .btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    display: block;
    box-sizing: border-box; 
}

/* Dropdown menu styling to match sidebar */
.department-dropdown,
.ticketView-dropdown {
    position: relative;
    width: 100%;
    background: #343a40;
    border: none;
    padding: 0px;
    margin-top: 10px;
    list-style: none;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000;
    box-sizing: border-box;
}

.department-dropdown li,
.ticketView-dropdown li {
    width: 100%;
}

.department-dropdown li button,
.ticketView-dropdown li button {
    width: 100%;
    background: none;
    border: none;
    color: white;
    text-align: left;
    padding: 10px;
    cursor: pointer;
}

/* Show dropdown when active */
.department-box.active .department-dropdown,
.ticketView-box.active .ticketView-dropdown {
    display: block;
    opacity: 1;
}

/* department and ticketView separator */
.department-separator,
.ticketView-separator {
    border: 0;
    height: 1px;
    background: #6c757d;
    margin: 10px 0;
}

/* Style links in sidebar like buttons */
#sidebar .sidebar-link {
    display: block;
    width: 100%;
    padding: 20px;
    color: white;
    background: #343a40;
    text-decoration: none;
    box-sizing: border-box;
}

#sidebar .sidebar-link:hover {
    background: #495057;
    color: white;
}