/* static/css/components/admin-sidebar.css */
/* 管理后台侧边栏样式：移动端抽屉与桌面固定布局 */
/* 原因：确保移动端默认折叠与平滑过渡，避免抖动与滚动穿透 */
/* 相关文件：views/admin/sidebar.html, static/js/components/admin-sidebar.js, views/base.html */

/* 基础样式 */
#admin-sidebar {
    --admin-sidebar-text-primary: hsl(from var(--color-text-primary) h 0% l);
    --admin-sidebar-text-secondary: hsl(from var(--color-text-secondary) h 0% l);
    transition: transform 200ms ease;
}

#admin-sidebar[data-sidebar-view="context"] [data-sidebar-root-title],
#admin-sidebar[data-sidebar-view="context"] [data-sidebar-root-nav] {
    display: none;
}

#admin-sidebar[data-sidebar-view="root"] [data-sidebar-context],
#admin-sidebar[data-sidebar-view="root"] [data-sidebar-show-root] {
    display: none;
}

html.admin-sidebar-precontext #admin-sidebar[data-sidebar-has-context][data-sidebar-view="root"] [data-sidebar-root-title],
html.admin-sidebar-precontext #admin-sidebar[data-sidebar-has-context][data-sidebar-view="root"] [data-sidebar-root-nav] {
    display: none;
}

html.admin-sidebar-precontext #admin-sidebar[data-sidebar-has-context][data-sidebar-view="root"] [data-sidebar-context] {
    display: flex;
}

html.admin-sidebar-precontext #admin-sidebar[data-sidebar-has-context][data-sidebar-view="root"] [data-sidebar-show-root] {
    display: inline-flex;
}

/* Admin 转场由 public-detail-transition.js 移动正文真实 DOM，导航和壁纸保持原位。
   不给玻璃容器命名独立快照：非 none 的 view-transition-name 即使在静止时也会
   建立 backdrop root，使 Sidebar ::before / Navbar 背景层无法采样外部壁纸。 */

.admin-sidebar-context-back {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    color: var(--admin-sidebar-text-secondary);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-sidebar-context-back:hover {
    color: var(--admin-sidebar-text-primary);
    background: var(--color-inner-active-surface);
}

.admin-sidebar-context-back:focus-visible,
.admin-sidebar-context-link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.admin-sidebar-context {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.admin-sidebar-context-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.25rem 0.75rem 0.5rem 1.5rem;
    padding: 0.625rem 0.75rem;
    color: var(--admin-sidebar-text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-sidebar-context-title .ti {
    color: var(--color-accent);
    font-size: 1.125rem;
}

.admin-sidebar-context-nav {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 0.75rem 0.75rem 1.5rem;
}

.admin-sidebar-context-nav ul {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-sidebar-context-link {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--admin-sidebar-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease;
}

.admin-sidebar-context-link:hover {
    color: var(--color-text-primary);
    background: var(--color-inner-active-surface);
}

.admin-sidebar-context-link.is-active,
.admin-sidebar-context-link[aria-current="page"] {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    font-weight: 600;
}

#admin-sidebar .sidebar-item:not(.active):not(.is-active):not([aria-current="page"]),
#admin-sidebar .sidebar-child-item:not(.is-active) {
    color: var(--admin-sidebar-text-primary);
}

#admin-sidebar .sidebar-section-title {
    color: var(--admin-sidebar-text-secondary);
}

.sidebar-header-row {
    min-height: 2.5rem;
}

.toggle-sidebar-control {
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.toggle-sidebar-control:hover {
    color: var(--color-text-primary);
    background-color: var(--color-inner-active-surface);
}

.toggle-sidebar-control:focus {
    outline: none;
}

.toggle-sidebar-control:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* 仅菜单区 nav 内图标走主题 Token；#sidebar-header 等品牌区保留 Tailwind（如 text-white），避免盖过蓝底对比 */
#admin-sidebar nav .ti {
    color: var(--admin-sidebar-text-secondary);
}

#admin-sidebar nav a:hover .ti,
#admin-sidebar nav a.active .ti,
#admin-sidebar nav a[aria-current="page"] .ti {
    color: var(--accent-color);
}

/* 侧栏滚动容器优化 */
#admin-sidebar nav {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
}

/* 仅在桌面端启用 scrollbar-gutter */
@media (min-width: 1024px) {
    #admin-sidebar nav {
        scrollbar-gutter: stable;
    }
}

/* 桌面端：正常显示 */
@media (min-width: 1024px) {
    #admin-sidebar {
        transform: translateX(0);
    }

    #admin-sidebar.sidebar-collapsed .sidebar-header-title,
    #admin-sidebar.sidebar-collapsed .sidebar-text,
    #admin-sidebar.sidebar-collapsed .sidebar-badge,
    #admin-sidebar.sidebar-collapsed .sidebar-chevron,
    #admin-sidebar.sidebar-collapsed .sidebar-section-row,
    #admin-sidebar.sidebar-collapsed .sidebar-divider,
    #admin-sidebar.sidebar-collapsed .sidebar-group-toggle,
    #admin-sidebar.sidebar-collapsed .sidebar-children,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-header-title,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-text,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-badge,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-chevron,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-section-row,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-divider,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-group-toggle,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-children {
        display: none !important;
    }

    #admin-sidebar.sidebar-collapsed [data-sidebar-context],
    #admin-sidebar.sidebar-collapsed [data-sidebar-show-root],
    html.admin-sidebar-precollapsed #admin-sidebar [data-sidebar-context],
    html.admin-sidebar-precollapsed #admin-sidebar [data-sidebar-show-root] {
        display: none;
    }

    #admin-sidebar.sidebar-collapsed [data-sidebar-root-nav],
    html.admin-sidebar-precollapsed #admin-sidebar [data-sidebar-root-nav] {
        display: block;
    }

    #admin-sidebar.sidebar-collapsed #sidebar-header,
    html.admin-sidebar-precollapsed #admin-sidebar #sidebar-header {
        padding-inline: 0.75rem;
    }

    #admin-sidebar.sidebar-collapsed .sidebar-header-row,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-header-row {
        justify-content: center;
    }

    #admin-sidebar.sidebar-collapsed nav,
    html.admin-sidebar-precollapsed #admin-sidebar nav {
        padding-inline: 0.75rem;
        scrollbar-gutter: auto;
    }

    #admin-sidebar.sidebar-collapsed .sidebar-item,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-item {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.5rem;
        min-height: 2.5rem;
        margin-inline: auto;
        padding: 0;
        gap: 0;
        justify-content: center;
        text-align: center;
    }

    #admin-sidebar.sidebar-collapsed .sidebar-group-row,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-group-row {
        width: 2.5rem;
        margin-inline: auto;
    }

    #admin-sidebar.sidebar-collapsed .sidebar-icon,
    html.admin-sidebar-precollapsed #admin-sidebar .sidebar-icon {
        margin: 0;
        font-size: 1.125rem;
    }
}

/* 移动端：默认隐藏，通过 Tailwind 类控制显示 */
@media (max-width: 1023px) {
    #admin-sidebar {
        /* 配合外部组件的 -translate-x-full 类 */
        transform: translateX(-100%);
    }
    
    /* 外部组件移除 -translate-x-full 时显示 */
    #admin-sidebar:not(.-translate-x-full) {
        transform: translateX(0) !important;
    }
}

/* 桌面端布局适配 - 已由 layout.css 统一管理，避免重复定义 */

/* 移动端重置 */
@media (max-width: 1023px) {
    .admin-layout-container {
        margin-left: 0 !important;
    }
}

/* 打印时隐藏 */
@media print {
    #admin-sidebar,
    #mobile-toggle-sidebar,
    #sidebar-overlay {
        @apply hidden;
    }
    
    .admin-layout-container {
        margin-left: 0 !important;
    }
}

/* ========== 折叠子菜单 ========== */

/* 子菜单容器：默认收起 */
.sidebar-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease-out, opacity 150ms ease-out;
    opacity: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 展开状态 */
.sidebar-group.is-open > .sidebar-children {
    max-height: 500px;
    opacity: 1;
    transition: max-height 300ms ease-in, opacity 200ms ease-in;
}

/* 箭头旋转 */
.sidebar-group.is-open > .sidebar-group-row .sidebar-group-toggle .sidebar-chevron {
    transform: rotate(90deg);
}

/* 父级默认入口在当前页面分组时的样式 */
.sidebar-group-link.is-active {
    color: var(--accent-color);
    background-color: color-mix(in srgb, var(--color-accent) 5%, transparent);
}

/* 子菜单有激活项时，父级取消背景 */
.sidebar-group:has(.sidebar-child-item.is-active) > .sidebar-group-row .sidebar-group-link {
    background-color: transparent;
}

/* 子菜单项样式 */
.sidebar-child-item {
    transition: background-color 150ms ease, color 150ms ease;
}

#admin-sidebar .sidebar-item:focus:not(:focus-visible),
#admin-sidebar .sidebar-group-toggle:focus:not(:focus-visible),
#admin-sidebar .sidebar-child-item:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

#admin-sidebar .sidebar-item:focus-visible,
#admin-sidebar .sidebar-group-toggle:focus-visible,
#admin-sidebar .sidebar-child-item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

#mobile-toggle-sidebar:focus:not(:focus-visible) {
    outline: none;
    box-shadow: var(--shadow-md);
}

#mobile-toggle-sidebar:focus-visible {
    outline: none;
    box-shadow:
        var(--shadow-md),
        inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    #admin-sidebar,
    #admin-sidebar *,
    #mobile-toggle-sidebar,
    #sidebar-overlay {
        transition: none !important;
    }
}

body.reduced-motion #admin-sidebar,
body.reduced-motion #admin-sidebar *,
body.reduced-motion #mobile-toggle-sidebar,
body.reduced-motion #sidebar-overlay {
    transition: none !important;
}

/* 子菜单项悬停/激活时圆点变色 */
.sidebar-child-item:hover .sidebar-child-dot,
.sidebar-child-item.is-active .sidebar-child-dot {
    background-color: var(--accent-color);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* 激活的子菜单项 */
.sidebar-child-item.is-active {
    color: var(--accent-color);
    font-weight: 600;
    background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

/* 父级默认入口与独立展开箭头 */
.sidebar-group-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2.5rem;
    flex: 0 0 2rem;
    margin-left: 0.125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    border: none;
    border-radius: 0.375rem;
    background: none;
}

.sidebar-group-toggle:hover {
    color: var(--color-text-primary);
    background-color: var(--color-inner-active-surface);
}

/* 折叠箭头颜色走主题 */
#admin-sidebar .sidebar-chevron {
    color: var(--admin-sidebar-text-secondary);
}

#admin-sidebar .sidebar-group.is-open > .sidebar-group-row .sidebar-group-toggle .sidebar-chevron {
    color: var(--accent-color);
}

/* 父级默认入口与展开按钮的图标颜色 */
#admin-sidebar .sidebar-group-toggle:hover .ti,
#admin-sidebar .sidebar-group.is-open > .sidebar-group-row .sidebar-group-link .ti {
    color: var(--accent-color);
}