/* Sidebar CSS */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px; /* Chiều rộng của sidebar */
    height: 100%;
    background-color: #164397; /* Màu nền tối, giống navbar-dark */
    color: #fff;
    z-index: 1050; /* Đảm bảo sidebar nằm trên các nội dung khác */
    transform: translateX(-100%); /* Ẩn sidebar ban đầu (trượt sang trái) */
    transition: transform 0.3s ease-in-out; /* Hiệu ứng trượt mượt mà */
    box-shadow: 2px 0 5px rgba(0,0,0,0.5); /* Đổ bóng */
    overflow-y: auto; /* Cho phép cuộn nếu menu dài */
    display: none; /* Mặc định ẩn trên desktop */
}



    /* Hiển thị sidebar khi có class 'open' */
    .sidebar.open {
        transform: translateX(0);
    }

/* Header trong sidebar */
.sidebar-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

    .sidebar-header .sidebar-title {
        margin: 0;
    }

    .sidebar-header .close-sidebar-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: white;
        cursor: pointer;
    }

/* Styling cho menu trong sidebar */
.sidebar-nav .navbar-nav {
    padding-top: 10px;
}

.sidebar-nav .nav-item .nav-link {
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    display: block;
}


/* Styling cho dropdown trong sidebar (chúng sẽ hoạt động như accordion) */
.sidebar-nav .dropdown-menu {
    display: none !important; /* Đảm bảo nó LUÔN ẨN theo mặc định */
    position: static; /* Quan trọng để dropdown hiển thị nội tuyến */
    float: none;
    width: auto;
    margin-top: 0;
    border: none;
    background-color: #fff; /* Màu nền nhẹ cho các mục con */
    border-radius: 0;
    padding-left: 15px; /* Thụt lề cho các mục con */
    box-shadow: none;
}

    .sidebar-nav .dropdown-menu .dropdown-item {
        color: black;
        padding: 8px 15px;
    }


        .sidebar-nav .dropdown-menu .dropdown-item:hover {
            background-color: #fff; /* Xanh đậm */
            color: black;
        }

    .sidebar-nav .dropdown-menu.show {
        display: block !important; /* Đảm bảo nó LUÔN HIỆN khi có 'show' */
        /* ... các style khác như background-color: #ed1c24; ... */
    }

/* Overlay CSS (lớp phủ mờ) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Màu đen trong suốt */
    z-index: 1040; /* Đặt giữa sidebar và nội dung chính */
    display: none; /* Mặc định ẩn */
}

    .overlay.active {
        display: block;
    }

/* Ngăn cuộn trang khi sidebar mở */
body.no-scroll {
    overflow: hidden;
}

/* Media Queries để điều khiển hiển thị trên các kích thước màn hình */
@media (max-width: 575.98px) { /* Cho màn hình extra small (xs) của Bootstrap */
    /* Hiển thị sidebar và ẩn navbar truyền thống */
    .sidebar {
        display: block; /* Hiển thị sidebar trên mobile */
    }

    /*.navbar-expand-sm {*/ /* Class của navbar truyền thống của bạn */
    /*display: none !important;*/ /* Ẩn navbar truyền thống trên mobile */
    /*}*/
    /* Đảm bảo nút toggler sidebar luôn hiển thị trên mobile */
    .navbar-toggler {
        display: block; /* Hoặc display: inline-block */
    }
}

@media (min-width: 576px) { /* Cho màn hình small (sm) và lớn hơn của Bootstrap */
    /* Ẩn sidebar và overlay trên desktop */
    .sidebar, .overlay {
        display: none !important;
        transform: translateX(-100%) !important; /* Đảm bảo ẩn hẳn */
    }
    /* Hiển thị navbar truyền thống trên desktop */
    .navbar-expand-sm {
        display: flex !important; /* Hiện navbar truyền thống trên desktop */
    }

    body.no-scroll {
        overflow: auto; /* Bật lại cuộn trang */
    }
}


/* Styling cho mũi tên dropdown trong sidebar */
.sidebar-nav .dropdown-toggle .dropdown-arrow {
    float: right; /* Đẩy mũi tên sang phải */
    transition: transform 0.3s ease-in-out; /* Tạo hiệu ứng xoay mượt mà */
    margin-top: 5px; /* Điều chỉnh vị trí dọc nếu cần */
    margin-left: 5px; /* Khoảng cách với chữ */
}

/* Xoay mũi tên khi dropdown menu được mở */
.sidebar-nav .dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg); /* Xoay 180 độ khi mở */
}

#sidebarToggle {
    margin-left: 10px; /* Điều chỉnh giá trị âm này để di chuyển sang trái. Ví dụ: -5px, -15px */
}



/* Style cho dropdown item khi được click */
.sidebar-nav .dropdown-menu .dropdown-item.clicked-active {
    background-color: #164397; /* Màu nền xanh đậm, giống màu active của navbar */
    color: #fff; /* Chữ màu trắng */
}

    /* Đảm bảo rằng style hover (nếu có) không ghi đè lên clicked-active */
    /* Nếu bạn muốn clicked-active ưu tiên hơn hover, có thể dùng !important hoặc tăng specificity */
    .sidebar-nav .dropdown-menu .dropdown-item.clicked-active:hover {
        background-color: #164397; /* Giữ nguyên màu khi hover nếu đã active */
        color: #fff;
    }

.sidebar-nav .dropdown-toggle {
    /* Các padding, màu chữ mặc định, v.v. của bạn */
    color: #fff; /* Chữ mặc định trắng */
    /* ... (các style khác) ... */
    /* MỚI: Thêm transition cho màu nền và màu chữ */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
/* Style cho dropdown-toggle (mục cha) khi nó đang mở */
.sidebar-nav .dropdown-toggle[aria-expanded="true"] {
    background-color: #ed1c24; /* Màu nền đỏ bạn muốn */
    color: #fff; /* Chữ màu trắng để nổi bật trên nền đỏ */
}

/* MỚI: Style cho dropdown-toggle (mục cha) khi vừa ACTIVE VÀ EXPANDED */
/* Thêm class 'active' vào selector để tăng độ ưu tiên */
/* Nếu class 'active' nằm trên thẻ LI (nav-item) cha: */
.sidebar-nav .nav-item.active .dropdown-toggle[aria-expanded="true"] {
    background-color: #ed1c24 !important; /* Đảm bảo màu đỏ áp dụng */
    color: #fff !important; /* Đảm bảo chữ trắng áp dụng */
}

/* Nếu class 'active' có thể nằm trực tiếp trên thẻ A (dropdown-toggle): */
.sidebar-nav .dropdown-toggle.active[aria-expanded="true"] {
    background-color: #ed1c24 !important; /* Đảm bảo màu đỏ áp dụng */
    color: #fff !important; /* Đảm bảo chữ trắng áp dụng */
}