:root {
    --sidebar-bg: #ffffff;
    --sidebar-text: #0f172a;
    --sidebar-muted: #64748b;
    --sidebar-accent: var(--blue);
    --sidebar-border: #e5e7eb;
    --sidebar-ring: rgba(0, 81, 228, 0.25);
    --sidebar-overlay: rgba(0, 0, 0, 0.45);
    --sidebar-item-hover: #f8fafc;
    --sidebar-item-active: #e2e8f0;
}

/* Sidebar Module - Standalone */
.sidebar_module {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr;
}

    .sidebar_module.open {
        pointer-events: auto;
    }

    .sidebar_module .sidebar_overlay {
        position: absolute;
        inset: 0;
        background: var(--sidebar-overlay);
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar_module.open .sidebar_overlay {
        opacity: 1;
    }

.sidebar_drawer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(400px, 92vw);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    transform: translateX(-100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: grid;
    grid-template-rows: auto 1fr;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.sidebar_module.open .sidebar_drawer {
    transform: translateX(0);
    opacity: 1;
}

/* Mobile full width */
@media (max-width: 768px) {
    .sidebar_drawer {
        width: 100vw;
    }
}

/* Sidebar Buttons */
.sidebar_module .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    text-decoration: none;
    line-height: 1.25;
    min-height: 2.5rem;
}

    .sidebar_module .btn:hover {
        transform: translateY(-1px);
        border-color: var(--sidebar-accent);
        background: var(--sidebar-item-hover);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .sidebar_module .btn:active {
        transform: translateY(0);
    }

    .sidebar_module .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--sidebar-ring);
    }

.sidebar_module .btn-primary {
    background: var(--sidebar-accent);
    color: white;
    border-color: var(--sidebar-accent);
}

    .sidebar_module .btn-primary:hover {
        background: var(--strong-blue);
        border-color: var(--strong-blue);
    }

/* Circular close button */
.sidebar_module .btn-close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    padding: 0;
    border: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .sidebar_module .btn-close:hover {
        transform: translateY(-1px);
        border-color: var(--sidebar-accent);
        background: var(--sidebar-item-hover);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .sidebar_module .btn-close:active {
        transform: translateY(0);
    }

    .sidebar_module .btn-close svg {
        width: 1.125rem;
        height: 1.125rem;
    }

/* Header */
.sidebar_header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
    position: relative;
}

    .sidebar_header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--sidebar-border) 50%, transparent 100%);
    }

    .sidebar_header .sidebar_header_left,
    .sidebar_header .sidebar_header_right {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }

.sidebar_title {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sidebar-text);
    letter-spacing: -0.025em;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    min-width: 0;
    line-height: 1.2;
    word-wrap: break-word;
    hyphens: auto;
}

/* Ẩn nút Back ở giao diện đầu */
.sidebar_header .sidebar_header_left button[hidden] {
    display: none !important;
}

/* Views */
.sidebar_views {
    position: relative;
    overflow: hidden;
    background: var(--sidebar-bg);
}

.sidebar_view {
    padding: 1rem;
    padding-bottom: 3.125rem; /* 50px */
    min-height: calc(100dvh - 80px - 3.125rem); /* Trừ đi padding-bottom */
    overflow: auto;
    position: relative;
}

    .sidebar_view::after {
        content: '';
        display: block;
        height: 3.125rem; /* 50px */
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }

/* Swipe states */
.sidebar_views.state-root .sidebar_view_root {
    transform: translateX(0);
}

.sidebar_views.state-root .sidebar_view_sub {
    transform: translateX(100%);
}

.sidebar_views.state-sub .sidebar_view_root {
    transform: translateX(-100%);
}

.sidebar_views.state-sub .sidebar_view_sub {
    transform: translateX(0);
}

.sidebar_view_root,
.sidebar_view_sub {
    position: absolute;
    inset: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quick Actions Section */
.sidebar_quick_actions {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar_quick_actions_title {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--sidebar-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 0.5rem;
}

    .sidebar_quick_actions_title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 2rem;
        height: 2px;
        background: var(--sidebar-accent);
        border-radius: 1px;
    }

.sidebar_quick_actions_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.sidebar_quick_action_item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: var(--sidebar-bg);
    position: relative;
    overflow: hidden;
    min-height: 40px;
}

    .sidebar_quick_action_item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, var(--sidebar-accent) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .sidebar_quick_action_item:hover {
        background: var(--sidebar-item-hover);
        border-color: var(--sidebar-border);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

        .sidebar_quick_action_item:hover::before {
            opacity: 0.05;
        }

    .sidebar_quick_action_item:active {
        transform: translateY(0);
        background: var(--sidebar-item-active);
    }

    .sidebar_quick_action_item .sidebar_quick_action_thumb {
        width: 40px;
        height: 40px;
        border-radius: 0.625rem;
        background: var(--sidebar-item-hover);
        border: 1px solid var(--sidebar-border);
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
        color: #1e3a8a; /* Navy blue color for icons */
    }

        .sidebar_quick_action_item .sidebar_quick_action_thumb svg {
            color: #1e3a8a; /* Navy blue color for icons */
        }

        .sidebar_quick_action_item .sidebar_quick_action_thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: inherit;
        }

        .sidebar_quick_action_item .sidebar_quick_action_thumb::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
            border-radius: inherit;
        }

    .sidebar_quick_action_item .sidebar_quick_action_label {
        font-weight: 500;
        font-size: 0.8125rem;
        color: var(--sidebar-text);
        line-height: 1.25;
        flex: 1;
        min-width: 0;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        word-wrap: break-word;
        hyphens: auto;
    }

/* Sections */
.sidebar_section {
    margin-bottom: 1.5rem;
}

    .sidebar_section:last-child {
        margin-bottom: 0;
    }

.sidebar_section_title {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--sidebar-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 0.5rem;
}

    .sidebar_section_title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 2rem;
        height: 2px;
        background: var(--sidebar-accent);
        border-radius: 1px;
    }

/* Item Grid */
.sidebar_item_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.sidebar_item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: var(--sidebar-bg);
    position: relative;
    overflow: hidden;
    min-height: 40px;
}

    .sidebar_item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, var(--sidebar-accent) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .sidebar_item:hover {
        background: var(--sidebar-item-hover);
        border-color: var(--sidebar-border);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

        .sidebar_item:hover::before {
            opacity: 0.05;
        }

    .sidebar_item:active {
        transform: translateY(0);
        background: var(--sidebar-item-active);
    }

    .sidebar_item .sidebar_item_thumb {
        width: 40px;
        height: 40px;
        border-radius: 0.625rem;
        background: var(--sidebar-item-hover);
        border: 1px solid var(--sidebar-border);
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
    }

        .sidebar_item .sidebar_item_thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: inherit;
        }

        .sidebar_item .sidebar_item_thumb::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
            border-radius: inherit;
        }

    .sidebar_item .sidebar_item_label {
        font-weight: 500;
        font-size: 0.8125rem;
        color: var(--sidebar-text);
        line-height: 1.25;
        flex: 1;
        min-width: 0;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        word-wrap: break-word;
        hyphens: auto;
    }

    .sidebar_item .sidebar_item_chev {
        margin-left: auto;
        opacity: 0.4;
        transition: opacity 0.2s ease;
        flex-shrink: 0;
    }

    .sidebar_item:hover .sidebar_item_chev {
        opacity: 0.7;
    }

/* Columns */
.sidebar_columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding-bottom: 50px;
}

.sidebar_col {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

    .sidebar_col .sidebar_col_title {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--sidebar-text);
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--sidebar-border);
        margin-bottom: 0.5rem;
    }

    .sidebar_col .sidebar_col_list {
        display: grid;
        gap: 0.25rem;
    }

        .sidebar_col .sidebar_col_list .sidebar_item {
            padding: 0.5rem;
            border-radius: 0.5rem;
            align-items: center;
            min-height: 40px;
        }

            .sidebar_col .sidebar_col_list .sidebar_item .sidebar_item_thumb {
                width: 32px;
                height: 32px;
                border-radius: 0.375rem;
            }

            .sidebar_col .sidebar_col_list .sidebar_item .sidebar_item_label {
                font-size: 0.75rem;
                overflow: visible;
                text-overflow: unset;
                white-space: normal;
                word-wrap: break-word;
                hyphens: auto;
            }

/* Responsive */
@media (max-width: 800px) {
    .sidebar_columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sidebar_header {
        padding: 1rem;
        gap: 0.5rem;
    }

    .sidebar_view {
        padding: 0.875rem;
    }

    .sidebar_section_title,
    .sidebar_quick_actions_title {
        font-size: 0.8125rem;
        margin-bottom: 0.625rem;
    }

    .sidebar_item,
    .sidebar_quick_action_item {
        padding: 0.625rem;
        min-height: 55px;
    }

        .sidebar_item .sidebar_item_thumb,
        .sidebar_quick_action_item .sidebar_quick_action_thumb {
            width: 36px;
            height: 36px;
        }

    .sidebar_col .sidebar_col_list .sidebar_item {
        min-height: 45px;
    }

    .sidebar_title {
        font-size: 0.8125rem;
        line-height: 1.3;
    }
}

/* Custom scrollbar */
.sidebar_view::-webkit-scrollbar {
    width: 6px;
}

.sidebar_view::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar_view::-webkit-scrollbar-thumb {
    background: var(--sidebar-border);
    border-radius: 3px;
}

    .sidebar_view::-webkit-scrollbar-thumb:hover {
        background: var(--sidebar-muted);
    }

/* Animation enhancements */
@keyframes sidebar_slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar_section,
.sidebar_quick_actions {
    animation: sidebar_slideIn 0.3s ease-out;
}

    .sidebar_section:nth-child(2),
    .sidebar_quick_actions + .sidebar_section:nth-child(2) {
        animation-delay: 0.1s;
    }

    .sidebar_section:nth-child(3),
    .sidebar_quick_actions + .sidebar_section:nth-child(3) {
        animation-delay: 0.2s;
    }

/* Loading State */
.sidebar_loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    gap: 1rem;
}

.sidebar_loading_spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--sidebar-border);
    border-top: 2px solid var(--sidebar-accent);
    border-radius: 50%;
    animation: sidebar_spin 1s linear infinite;
}

@keyframes sidebar_spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.sidebar_loading_text {
    color: var(--sidebar-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Error State */
.sidebar_error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    gap: 1rem;
}

.sidebar_error_icon {
    font-size: 2rem;
    opacity: 0.6;
}

.sidebar_error_text {
    color: var(--sidebar-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.sidebar_error_retry {
    margin-top: 0.5rem;
}

/* Empty State */
.sidebar_empty_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    gap: 1rem;
}

.sidebar_empty_icon {
    font-size: 3rem;
    opacity: 0.4;
}

.sidebar_empty_text {
    color: var(--sidebar-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Hamburger Menu Button */
.sidebar_hamburger_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    background: var(--blue);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .sidebar_hamburger_btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        background: var(--strong-blue);
    }

    .sidebar_hamburger_btn:active {
        transform: translateY(0);
    }

    .sidebar_hamburger_btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar_hamburger_btn:hover::before {
        opacity: 1;
    }

    .sidebar_hamburger_btn .hamburger_line {
        width: 1.25rem;
        height: 2px;
        background: white;
        border-radius: 1px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 1px 0;
    }

    .sidebar_hamburger_btn:hover .hamburger_line {
        transform: scaleX(1.1);
    }

        .sidebar_hamburger_btn:hover .hamburger_line:nth-child(1) {
            transform: translateY(2px) scaleX(1.1);
        }

        .sidebar_hamburger_btn:hover .hamburger_line:nth-child(3) {
            transform: translateY(-2px) scaleX(1.1);
        }

    /* Focus state for accessibility */
    .sidebar_hamburger_btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--sidebar-ring), 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* Active state animation */
    .sidebar_hamburger_btn:active .hamburger_line {
        transform: scaleX(0.9);
    }

        .sidebar_hamburger_btn:active .hamburger_line:nth-child(1) {
            transform: translateY(1px) scaleX(0.9);
        }

        .sidebar_hamburger_btn:active .hamburger_line:nth-child(3) {
            transform: translateY(-1px) scaleX(0.9);
        }