/**
 * Nexts Sidebar Navigation
 * - Wider item spacing
 * - Active item: light blue background + blue accent bar (right)
 */

:root,
[data-theme="light"] {
    --nexts-sidebar-active-bg: #eef4ff;
    --nexts-sidebar-active-text: #2563eb;
    --nexts-sidebar-active-accent: #2563eb;
    --nexts-sidebar-hover-bg: #f5f8ff;
    --nexts-sidebar-section-color: #9ca3af;
    --nexts-sidebar-item-gap: 8px;
    --nexts-sidebar-item-padding-y: 8px;
    --nexts-sidebar-item-padding-x: 10px;
    --nexts-sidebar-item-min-height: 40px;
    --nexts-sidebar-section-margin-top: 16px;
}

[data-theme="dark"] {
    --nexts-sidebar-active-bg: rgba(37, 99, 235, 0.18);
    --nexts-sidebar-active-text: #60a5fa;
    --nexts-sidebar-active-accent: #3b82f6;
    --nexts-sidebar-hover-bg: rgba(37, 99, 235, 0.1);
    --nexts-sidebar-section-color: #9ca3af;
}

/* ── Layout & spacing ── */

.body-sidebar-container .body-sidebar {
    font-size: var(--text-sm) !important;
    gap: 18px;
}

.body-sidebar-container .body-sidebar-top {
    font-size: var(--text-sm) !important;
    gap: var(--nexts-sidebar-item-gap);
}

.body-sidebar-container .sidebar-items {
    display: flex;
    flex-direction: column;
}

.body-sidebar-container .sidebar-item-container {
    margin-bottom: 2px;
}

.body-sidebar-container .standard-sidebar-item {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

.body-sidebar-container .standard-sidebar-item .item-anchor {
    min-height: var(--nexts-sidebar-item-min-height) !important;
    height: auto !important;
    padding: var(--nexts-sidebar-item-padding-y) var(--nexts-sidebar-item-padding-x) !important;
    border-radius: 0 !important;
}

.body-sidebar-container .standard-sidebar-item .sidebar-item-icon {
    padding: 4px !important;
    border-radius: 0 !important;
}

/* ── Section headers (TRANG CHỦ, BÁO CÁO, …) ── */


.body-sidebar-container .section-item:first-child {
    margin-top: 0;
}

.body-sidebar-container .section-break,
.body-sidebar-container .section-break .sidebar-item-label {
    color: var(--nexts-sidebar-section-color) !important;
    text-transform: uppercase;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    padding-top: 4px;
    padding-bottom: 4px;
}

.body-sidebar-container .section-break {
    min-height: auto !important;
    pointer-events: none;
}

/* ── Default item typography ── */

.body-sidebar-container .sidebar-item-label,
.body-sidebar-container .item-anchor,
.body-sidebar-container .onboarding-sidebar,
.body-sidebar-container .onboarding-sidebar span,
.body-sidebar-container .collapse-sidebar-link {
    font-size: var(--text-sm) !important;
}

.body-sidebar-container .standard-sidebar-item .item-anchor {
    color: var(--ink-gray-8);
}

/* ── Hover ── */

.body-sidebar-container .standard-sidebar-item:not(.active-sidebar):has(a:not(.section-break)):hover,
.body-sidebar-container .standard-sidebar-item.hover:not(.active-sidebar) {
    background-color: var(--nexts-sidebar-hover-bg) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── Active / selected item ── */

.body-sidebar-container .standard-sidebar-item.active-sidebar {
    background-color: var(--nexts-sidebar-active-bg) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative;
    border-right: 3px solid var(--nexts-sidebar-active-accent) !important;
}

.body-sidebar-container .standard-sidebar-item.active-sidebar .item-anchor,
.body-sidebar-container .standard-sidebar-item.active-sidebar .sidebar-item-label {
    color: var(--nexts-sidebar-active-text) !important;
    font-weight: 500;
}

.body-sidebar-container .standard-sidebar-item.active-sidebar .sidebar-item-icon,
.body-sidebar-container .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
.body-sidebar-container .standard-sidebar-item.active-sidebar .sidebar-item-icon use {
    color: var(--nexts-sidebar-active-text) !important;
    stroke: var(--nexts-sidebar-active-text) !important;
}

/* ── Sidebar header (workspace title) ── */

.body-sidebar-container .sidebar-header,
.body-sidebar-container .sidebar-header.hover,
.body-sidebar-container .sidebar-header.active-sidebar {
    border-radius: 0 !important;
    margin-bottom: 4px;
}

.body-sidebar-container .sidebar-header .header-title,
.body-sidebar-container .sidebar-header .sidebar-item-label {
    font-size: var(--text-sm) !important;
}

.body-sidebar-container .sidebar-header .header-subtitle {
    font-size: var(--text-xs) !important;
}

.body-sidebar-container .sidebar-header .sidebar-item-icon,
.body-sidebar-container .sidebar-header .header-logo {
    border-radius: 0 !important;
}

.body-sidebar-container .sidebar-header.hover:not(.active-sidebar) {
    background-color: var(--nexts-sidebar-hover-bg) !important;
    box-shadow: none !important;
}

.body-sidebar-container .sidebar-header.active-sidebar {
    background-color: var(--nexts-sidebar-active-bg) !important;
    box-shadow: none !important;
    border-right: 3px solid var(--nexts-sidebar-active-accent) !important;
}

.body-sidebar-container .sidebar-header.active-sidebar .header-title,
.body-sidebar-container .sidebar-header.active-sidebar .sidebar-item-label {
    color: var(--nexts-sidebar-active-text) !important;
}

/* ── Bottom section (user, onboarding) ── */

.body-sidebar-container .dropdown-navbar-user .sidebar-user-button,
.body-sidebar-container .dropdown-navbar-user .sidebar-user-button.user-menu-active,
.body-sidebar-container .onboarding-sidebar,
.body-sidebar-container .promotional-banner,
.body-sidebar-container .sidebar-item-control .drop-icon,
.body-sidebar-container .sidebar-toggle-btn {
    border-radius: 0 !important;
}

.body-sidebar-container .dropdown-navbar-user .sidebar-user-button:hover,
.body-sidebar-container .dropdown-navbar-user .sidebar-user-button.user-menu-active {
    background-color: var(--nexts-sidebar-hover-bg) !important;
    box-shadow: none !important;
}

.body-sidebar-container .avatar-name-email,
.body-sidebar-container .avatar-name-email span {
    font-size: var(--text-sm) !important;
}

.body-sidebar-container .avatar-name-email .text-secondary {
    font-size: var(--text-xs) !important;
}

.body-sidebar-container .sidebar-user-button .avatar,
.body-sidebar-container .sidebar-user-button .avatar-frame,
.body-sidebar-container .sidebar-user-button .avatar img {
    border-radius: 0 !important;
}

/* ── Collapsed sidebar (icon-only, ~50px) ── */

.body-sidebar-container:not(.expanded) .standard-sidebar-item .sidebar-item-label,
.body-sidebar-container:not(.expanded) .standard-sidebar-item .sidebar-item-control,
.body-sidebar-container:not(.expanded) .standard-sidebar-item .sidebar-item-suffix,
.body-sidebar-container:not(.expanded) .section-item,
.body-sidebar-container:not(.expanded) .sidebar-header .title-container,
.body-sidebar-container:not(.expanded) .sidebar-header .drop-icon {
    display: none !important;
}

.body-sidebar-container:not(.expanded) .standard-sidebar-item {
    width: 100%;
    overflow: hidden;
}

.body-sidebar-container:not(.expanded) .standard-sidebar-item .item-anchor {
    padding: 8px 0 !important;
    justify-content: center !important;
    min-height: 36px !important;
}

.body-sidebar-container:not(.expanded) .standard-sidebar-item .sidebar-item-icon {
    padding: 0 !important;
    margin: 0 !important;
}

.body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar,
.body-sidebar-container:not(.expanded) .standard-sidebar-item.hover:not(.active-sidebar),
.body-sidebar-container:not(.expanded) .standard-sidebar-item:not(.active-sidebar):hover {
    border-right: none !important;
    border-left: none !important;
}

.body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar {
    box-shadow: inset -3px 0 0 var(--nexts-sidebar-active-accent) !important;
}

.body-sidebar-container:not(.expanded) .sidebar-header {
    padding: 8px 0 !important;
    justify-content: center !important;
}

.body-sidebar-container:not(.expanded) .sidebar-header.active-sidebar {
    border-right: none !important;
    box-shadow: inset -3px 0 0 var(--nexts-sidebar-active-accent) !important;
}

.body-sidebar-container:not(.expanded) .sidebar-header .sidebar-item-icon {
    margin: 0 auto !important;
}