/* body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f2f5;
    
} */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* THÊM DÒNG NÀY - Đảm bảo không có thanh cuộn ngang */
}

.layout-wrapper {
    display: flex; /* Quan trọng: Sidebar và main-content-wrapper sẽ nằm cạnh nhau */
    min-height: 100vh;
    width: 100%;
}

.main-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Cho phép nó chiếm hết không gian chiều ngang còn lại sau sidebar */
    min-width: 0; /* Rất quan trọng với flexbox: cho phép flex item co lại */
    background-color: #f0f2f5;
}

.content-and-footer-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
    /* Có thể thêm overflow-x: hidden; tại đây nếu bạn muốn đảm bảo không có gì tràn ra khỏi khu vực nội dung chính */
    /* overflow-x: hidden; */
}

.content-area {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 20px; /* Giữ padding ở đây */
    flex-grow: 1;
    /* Đảm bảo content-area không bị tràn, nếu cần, thêm overflow-x: hidden; */
    /* overflow-x: hidden; */
}

/* General layout for desktop */
.layout-wrapper {
    display: flex;
    min-height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent horizontal scroll when sidebar is open on mobile */
    position: relative; /* For overlay positioning */
}

.main-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* transition: margin-left 0.3s ease; */ /* Removed as we're using width: 100% on mobile */
}

.content-and-footer-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.content-area {
    flex-grow: 1;
    padding: 20px;
    background-color: #f8f9fa; /* Light background for content */
}


.sidebar-search-bar {
    display: flex; /* Dùng flexbox để sắp xếp input và icon */
    align-items: center; /* Căn giữa theo chiều dọc */
    padding: 0 20px; /* Padding hai bên */
    margin-bottom: 20px; /* Khoảng cách với phần thông báo */
    gap: 10px;
    /* Loại bỏ width: 50px; ở đây để flex-grow của input hoạt động */
}

.sidebar-search-bar input {
    flex-grow: 1; /* Cho phép input chiếm hết không gian còn lại */
    padding: 10px 15px; /* Padding input: trên dưới 10px, trái phải 15px */
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* Bo tròn vừa phải */
    font-size: 0.95rem;
    color: #4a5568;
    background-color: #ffffff; /* Nền trắng cho input */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100px;
}

.sidebar-search-bar input::placeholder {
    color: #a0aec0; /* Màu placeholder */
}

.sidebar-search-bar input:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
}

.sidebar-search-bar .search-icon { /* Đặt icon bên cạnh input */
    color: #a0aec0;
    font-size: 1rem;
    cursor: pointer;
    /* Không cần position: absolute nữa vì dùng flexbox */
}

/* Responsive cho Sidebar (cập nhật phần search bar) */
@media (max-width: 992px) {
    /* ... (giữ nguyên các style responsive khác) ... */

    /* Điều chỉnh search bar khi sidebar thu gọn */
    .sidebar-search-bar {
        padding: 0 5px; /* Giảm padding */
        margin-bottom: 10px;
        justify-content: center; /* Căn giữa khi chỉ còn icon */
    }
    .sidebar-search-bar input {
        display: none; /* Ẩn input khi sidebar thu gọn */
    }
    .sidebar-search-bar .search-icon {
        margin: auto; /* Căn giữa icon khi input ẩn */
        font-size: 1.1em; /* Tăng kích thước icon lên một chút */
    }
}

.sidebar-user-actions {
    display: flex;
    flex-direction: column; /* Xếp các hành động theo cột */
    padding: 0 10px; /* Padding phù hợp với sidebar menu items */
    margin-bottom: 20px; /* Khoảng cách với phần user-info */
}

.sidebar-user-actions .icon-wrapper { /* Để bọc icon và text Thông báo */
    position: relative;
    cursor: pointer;
    padding: 12px 10px; /* Padding cho từng mục hành động */
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 15px; /* Khoảng cách giữa icon và text */
    color: #4a5568; /* Màu chữ mặc định */
    text-decoration: none; /* Đảm bảo link không gạch chân */
    font-size: 1rem;
    font-weight: 500;
}

.sidebar-user-actions .icon-wrapper:hover {
    background-color: #e2e8f0;
    color: #2d3748;
    transform: translateX(5px);
}

.sidebar-user-actions .icon-wrapper i {
    font-size: 1.1em;
    color: #a0aec0; /* Màu icon mặc định */
}

.sidebar-user-actions .icon-wrapper .badge {
    position: absolute;
    top: 8px; /* Điều chỉnh vị trí badge */
    right: 15px; /* Điều chỉnh vị trí badge */
    background-color: #e53e3e;
    color: white;
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 0.6em;
    min-width: 12px;
    text-align: center;
    line-height: 1;
    border: 1px solid #ffffff;
}
.close-sidebar-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    display: none; /* Hidden by default on desktop */
}

/* Overlay when sidebar is open on mobile */
.layout-wrapper.sidebar-open::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: 999; /* Below sidebar, above main content */
    display: block; /* Show only when sidebar is open */
}


/* --- Media Queries for Mobile Devices --- */
@media (max-width: 991.98px) { /* Bootstrap's 'lg' breakpoint */
    .layout-wrapper {
        flex-direction: column; /* Stack sidebar and main content */
    }

    .hamburger-menu-btn,
    .close-sidebar-btn {
        display: block; /* Show hamburger and close button on mobile */
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -250px; /* Hide sidebar off-screen */
        width: 250px;
        height: 100vh;
        z-index: 1000; /* Ensure sidebar is on top */
        transition: left 0.3s ease-in-out;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* Add shadow for effect */
    }

    .sidebar.active {
        left: 0; /* Slide in sidebar */
    }

    .sidebar .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
    }

    .main-content-wrapper {
        margin-left: 0; /* No margin-left on mobile */
        width: 100%; /* Take full width */
    }

    /* Adjust padding for content to not be under hamburger button */
    .content-area {
        padding-top: 60px; /* Enough space for fixed header/hamburger */
    }
}

/* Optional: Further adjustments for smaller screens if needed */
@media (max-width: 575.98px) { /* Bootstrap's 'sm' breakpoint */
    .hamburger-menu-btn {
        top: 10px;
        left: 10px;
        padding: 6px 10px;
        font-size: 1em;
    }
}