public/style.css

/* Custom styles for better scrollbar and modal backdrop */
            /* Desktop layout */
            @media (min-width: 768px) {
                body {
 display: flex; /* Use flexbox for desktop layout */
                }
            } 
            body {
 height: 100vh;
 position: relative;
            background-color: #f3f4f6; /* Light gray background */
            }
            /* Ẩn tất cả section */
            .content-section {
            display: none;
            }
            /* Chỉ show section được gắn .active */
            .content-section.active,
            .content-section:target {
            display: block;
            }
            .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
            justify-content: center; /* Center content horizontally */
            align-items: center; /* Center content vertically */
            padding: 1rem; /* Add some padding for smaller screens */
            }
 #confirmModal {
 z-index: 1050; /* Ensure confirm modal is always on top of other modals */
            }
            .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            width: 90%; /* Responsive width */
            max-width: 500px; /* Max width for larger screens */
            }
            @media (min-width: 768px) {
            .modal-content {
            width: 50%;
            }
            }
            /* Custom scrollbar for kanban columns */
            .kanban-column {
            max-height: calc(100vh - 250px); /* Adjust based on header/footer height */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            }
            .kanban-column::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera*/
            }
            /* Active sidebar item styling (from original HTML) */
            .sidebar-item.active {
            background-color: rgba(255, 255, 255, 0.2); /* Light background for active item */
            color: white; /* White text for active item */
            font-weight: 600; /* Semi-bold for active item */
            }
            .sidebar-item.active i {
            color: white; /* White icon for active item */
            }
            /* Dropdown styling for top right menu (from original HTML) */
            .dropdown-menu {
            display: none;
            }
            .dropdown:hover .dropdown-menu {
            display: block;
            }
            .admin-only {
            display: none; /* Đảm bảo các phần tử admin-only bị ẩn ban đầu */
            }

            /* Custom styles for responsive sidebar */
            /* Styles for screens smaller than md (max-width: 767px) */
            @media (max-width: 767px) {
                #sidebar {
 position: fixed;
 left: 0;
 display: block !important; /* Ensure the sidebar is displayed on small screens */
                    top: 0;
                    z-index: 50; /* Ensure sidebar is above the overlay */
                    height: 100vh;
                    flex-shrink: 0; /* Prevent the sidebar from shrinking in a flex container */
                    transform: translateX(-100%);
                    transition: transform 0.3s ease-in-out;
                }
                /* Show sidebar when sidebar-open class is on the body */
                body.sidebar-open #sidebar {
                    transform: translateX(0);
                }
                /* Show and dim overlay when sidebar-open class is on the body */
                body.sidebar-open #sidebar-overlay {
                    opacity: 0.5;
                    /* display: block; */ /* Tailwind's `hidden` utility handles this based on breakpoint */
                    display: block; /* Show the overlay */
                    pointer-events: auto; /* Enable pointer events on overlay when sidebar is open */
                }
 #main-content {
 overflow: visible; /* Allow content to overflow when sidebar is fixed */
 }

            }
            /* Styles for screens md and larger (min-width: 768px) */
            @media (min-width: 768px) {
 #sidebar {
 width: 256px; /* Fixed width for sidebar on desktop */
                }
 #main-content {
 flex-grow: 1; /* Allow main content to take the remaining space */
 overflow-y: auto; /* Enable scrolling for main content */
 }
            }