/*
 * _nav.css — 导航
 * ===============
 *
 * 覆盖范围：
 * - 侧边菜单树 .layui-nav-tree（一级菜单、二级菜单、激活态、悬停态、左侧色条）
 * - 顶部 Tab 切换器 .layui-tab / .layui-nav-top
 * - 下拉菜单 .layui-nav-child / .layui-dropdown
 * - 面包屑 .layui-breadcrumb
 */

/* === 侧边菜单树 ===
 * 重要：保留 SwiftAdmin 原 .layui-side-menu 的 layout 约定：
 *   - .layui-nav-item a { padding-left: 45px; }
 *   - .layui-nav-item .layui-icon { position: absolute; left: 20px; }
 * 不能改 display 为 flex（会破坏图标绝对定位），只覆盖颜色和激活态视觉
 */
html[data-skin="dark"] .layui-nav-tree,
html[data-skin="dark"] .layui-side-menu {
    background: transparent;
}

/* 一级菜单 a：在 swiftadmin 原 layout 基础上加大尺寸（更大气）。
 * height 56 + 0 padding-top/bottom，让菜单条更通透
 */
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-item > a,
html[data-skin="dark"] .layui-nav-tree .layui-nav-item > a {
    color: var(--text-2) !important;
    background-color: transparent;
    height: 52px;
    line-height: 52px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 56px;
    padding-right: 36px;
    font-size: 15px;
    letter-spacing: 0.3px;
    transition: color 0.2s, background 0.2s;
}

/* 折叠态：sidebar 收窄到 60px，文字隐藏，图标必须居中
 * （原 swiftadmin 折叠态规则会处理大部分，这里只保证 padding 不挤出）
 */
html[data-skin="dark"] .layadmin-side-shrink .layui-side-menu .layui-nav .layui-nav-item > a {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-item > a:hover,
html[data-skin="dark"] .layui-nav-tree .layui-nav-item > a:hover {
    background-color: var(--bg-3) !important;
    color: var(--text-1) !important;
}

/* 激活态：只改背景色 + 文字色，不加色条 / 渐变。完全不动 layout */
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-this,
html[data-skin="dark"] .layui-nav-tree .layui-this {
    background-color: transparent !important;
    background-image: none !important;
}

html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-itemed > a,
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-this > a,
html[data-skin="dark"] .layui-nav-tree .layui-nav-item.layui-nav-itemed > a,
html[data-skin="dark"] .layui-nav-tree .layui-this > a,
html[data-skin="dark"] .layui-nav-tree .layui-this > a:hover {
    background-color: var(--primary-soft) !important;
    background-image: none !important;
    color: var(--primary) !important;
}

/* layui-nav-bar 是 layui 默认的滑动指示条（absolute 浮动），swiftadmin 已 background:none 隐藏，
 * 但保险起见再覆盖一次 */
html[data-skin="dark"] .layui-nav-tree .layui-nav-bar,
html[data-skin="dark"] .layui-side-menu .layui-nav-bar {
    background: transparent !important;
    display: none !important;
}

/* 图标：swiftadmin 设置了 position:absolute left:20px，但没设 top，
 * 导致图标贴顶不居中。加 top:50% + translateY 让图标垂直居中。
 * 同时调整 left:24 配合 a 的 padding-left:56 让 icon 在文字左边有合适间距。
 */
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-item .layui-icon,
html[data-skin="dark"] .layui-nav-tree .layui-nav-item > a > .layui-icon {
    color: var(--text-3);
    font-size: 17px;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    transition: color 0.2s;
}

/* 折叠态：图标居中显示在 60px 宽的 sidebar 内 */
html[data-skin="dark"] .layadmin-side-shrink .layui-side-menu .layui-nav .layui-nav-item .layui-icon {
    left: 50%;
    transform: translate(-50%, -50%);
}

html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-itemed > a .layui-icon,
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-this > a .layui-icon,
html[data-skin="dark"] .layui-nav-tree .layui-this > a > .layui-icon {
    color: var(--primary);
}

/* === 二级菜单 === */
html[data-skin="dark"] .layui-nav-tree .layui-nav-child,
html[data-skin="dark"] .layui-side-menu .layui-nav-child,
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-item .layui-nav-child {
    background: var(--bg-1) !important;
}

/* 二级菜单 a：padding-left 与一级菜单文字起点 (56px) 完全对齐；
 * 一级菜单：icon 在 left:24，a padding-left:56，文字从 56px 开始
 * 二级菜单：::before 小圆点在 left:24（与一级 icon 位置一致），a padding-left:56 文字从 56px 开始
 * 这样视觉上一级文字和二级文字在同一垂直线上，且圆点和图标也对齐
 */
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a,
html[data-skin="dark"] .layui-nav-tree .layui-nav-child dd a {
    color: var(--text-2) !important;
    background-color: transparent;
    height: 42px;
    line-height: 42px;
    padding-left: 56px;
    padding-right: 36px;
    font-size: 14px;
    position: relative;
    transition: color 0.2s, background 0.2s;
}

/* 二级菜单项前的圆点装饰已移除（按用户反馈） */

html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a:hover,
html[data-skin="dark"] .layui-nav-tree .layui-nav-child dd a:hover {
    background-color: var(--bg-3) !important;
    color: var(--text-1) !important;
}

html[data-skin="dark"] .layui-nav-tree .layui-nav-child dd.layui-this,
html[data-skin="dark"] .layui-side-menu .layui-nav-child dd.layui-this {
    background-color: transparent !important;
    background-image: none !important;
}

html[data-skin="dark"] .layui-nav-tree .layui-nav-child dd.layui-this a,
html[data-skin="dark"] .layui-side-menu .layui-nav-child dd.layui-this a {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

/* 折叠/展开箭头
 *
 * SwiftAdmin 用 .layui-nav.arrow2/arrow3 用 layui-icon 字体（content: "\e61a" / "\e654"）
 * 渲染箭头，不是 layui 默认的 border 三角形。
 * 之前用 border-color 覆盖会跟字体方案冲突（border 0、width:10 height:6/10），导致箭头看不见。
 * 这里只覆盖颜色（字体图标用 color 控制），不动 border / width / height / transform。
 */
html[data-skin="dark"] .layui-nav-tree .layui-nav-more,
html[data-skin="dark"] .layui-nav.arrow2 .layui-nav-more,
html[data-skin="dark"] .layui-nav.arrow3 .layui-nav-more,
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-more {
    color: var(--text-3);
    /* 不覆盖 border、width、height、margin、transform，由 swiftadmin style.css 控制 */
}

/* 字体图标方案下的 :before 颜色 */
html[data-skin="dark"] .layui-nav.arrow2 .layui-nav-more:before,
html[data-skin="dark"] .layui-nav.arrow3 .layui-nav-more:before {
    color: var(--text-3);
}

/* 激活/展开态变青色 */
html[data-skin="dark"] .layui-nav-tree .layui-nav-itemed > a .layui-nav-more,
html[data-skin="dark"] .layui-nav.arrow2 .layui-nav-itemed > a > .layui-nav-more,
html[data-skin="dark"] .layui-nav.arrow3 .layui-nav-itemed > a > .layui-nav-more,
html[data-skin="dark"] .layui-side-menu .layui-nav .layui-nav-itemed > a .layui-nav-more {
    color: var(--primary);
}

html[data-skin="dark"] .layui-nav.arrow2 .layui-nav-itemed > a > .layui-nav-more:before,
html[data-skin="dark"] .layui-nav.arrow3 .layui-nav-itemed > a > .layui-nav-more:before {
    color: var(--primary);
}

/* arrow3 模式下 :before 是一根白色横杆（rgba(255,255,255,.7)），暗色下需要改成 primary */
html[data-skin="dark"] .layui-nav.arrow3 .layui-nav-itemed > a > .layui-nav-more:before {
    background-color: var(--primary) !important;
}

/* （之前的"折叠态 text-align: center"已移除，由 swiftadmin 默认折叠 layout 维持） */

/* === 后台主框架多 Tab 切换器（SwiftAdmin 实际 DOM） ===
 *
 * Tab 由 layui-admin JS 动态创建在 .layui-body > .layui-tab > .layui-tab-title 内，
 * 不是我之前以为的 .layui-nav-top。
 * 原 CSS 给 .layui-tab-title 设置了 background-color: #fff、box-shadow，浅色。
 * 这里完整覆盖为暗色 + 胶囊式 tab。
 */
html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title {
    background: var(--bg-1) !important;
    box-shadow: 0 1px 0 var(--border) inset, 0 1px 8px rgba(0, 0, 0, 0.3) !important;
    border: 0;
    padding: 0 80px 0 var(--space-4);
}

html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li {
    background: transparent;
    color: var(--text-2);
    border-right: 1px solid var(--divider);
    transition: background var(--transition-base), color var(--transition-base);
}

html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li:hover {
    background: var(--bg-3) !important;
    color: var(--text-1);
}

html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this {
    background: var(--bg-2) !important;
    color: var(--primary);
}

html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this:after {
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    height: 2px;
}

html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this span,
html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this cite {
    color: var(--primary) !important;
}

/* Tab 左侧小圆点（active 状态高亮） */
html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li em.circle {
    background-color: var(--text-3) !important;
}

html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this .circle {
    background-color: var(--primary) !important;
    box-shadow: 0 0 6px var(--primary-glow);
}

/* Tab 关闭按钮 */
html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li .layui-tab-close {
    color: var(--text-3);
    background: transparent;
    transition: all var(--transition-base);
}

html[data-skin="dark"] .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li .layui-tab-close:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

/* === Tab 左右滚动控制按钮（.swiftadmin-tabs-control） ===
 *
 * SwiftAdmin Tab 栏右侧浮 3 个圆角按钮：上一个 / 下一个 / 关闭其他。
 * 原 CSS 用 background-color: white 浮在白色 Tab 上。
 * 暗色皮下需要覆盖为暗色 + 强调色悬停。
 */
html[data-skin="dark"] .layui-layout-admin .layui-body .swiftadmin-tabs-control {
    background-color: var(--bg-2) !important;
    border-left: 1px solid var(--border) !important;
    color: var(--text-2);
    transition: all var(--transition-base);
}

html[data-skin="dark"] .layui-layout-admin .layui-body .swiftadmin-tabs-control:hover {
    background-color: var(--bg-3) !important;
    color: var(--primary);
}

html[data-skin="dark"] .layui-layout-admin .layui-body .swiftadmin-tabs-control .layui-icon {
    color: inherit;
}

/* 左侧的 prev/left 控制器：right border 改为左边的 border */
html[data-skin="dark"] .layui-layout-admin .layui-body .layui-icon-prev,
html[data-skin="dark"] .layui-layout-admin .layui-body .layui-icon-left {
    border-right: 1px solid var(--border) !important;
    border-left: none !important;
}

/* === Tab 选择下拉（.swiftadmin-tabs-select） === */
html[data-skin="dark"] .swiftadmin-tabs-select.layui-nav .layui-nav-item a {
    color: var(--text-2);
}

html[data-skin="dark"] .swiftadmin-tabs-select.layui-nav .layui-nav-item a:hover,
html[data-skin="dark"] .swiftadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this,
html[data-skin="dark"] .swiftadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this a {
    background-color: var(--bg-3) !important;
    color: var(--primary) !important;
}

html[data-skin="dark"] .swiftadmin-tabs-select.layui-nav .layui-nav-child {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

/* SwiftAdmin 自带的 tab 切换器变体（.swiftadmin-tabs / .layui-tab-admin） */
html[data-skin="dark"] .swiftadmin-tabs,
html[data-skin="dark"] .layui-layout-admin .swiftadmin-tabs {
    background: var(--bg-1) !important;
    border-bottom: 1px solid var(--border);
}

html[data-skin="dark"] .swiftadmin-tabs .layui-tab {
    background: transparent;
}

html[data-skin="dark"] .swiftadmin-tabs .layui-tab-title {
    background: var(--bg-1) !important;
    box-shadow: 0 1px 0 var(--border) inset !important;
}

html[data-skin="dark"] .swiftadmin-tabs .layui-tab-title li {
    background: transparent !important;
    color: var(--text-2);
    border-right: 1px solid var(--divider);
}

html[data-skin="dark"] .swiftadmin-tabs .layui-tab-title li:hover {
    background: var(--bg-3) !important;
    color: var(--text-1);
}

html[data-skin="dark"] .swiftadmin-tabs .layui-tab-title li.layui-this {
    background: var(--bg-2) !important;
    color: var(--primary);
}

html[data-skin="dark"] .swiftadmin-tabs .layui-tab-title li.layui-this:after {
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%) !important;
    height: 2px !important;
}

/* === 顶栏下拉菜单 .layui-nav-child（用户菜单等） ===
 * 注意：选择器不依赖 .layui-nav，因为 layui 可能把下拉移到 body 末尾。
 * 用 html[data-skin="dark"] .layui-nav-child 起头。
 * #userHome 是头部用户菜单的 ID（顶栏点头像后弹出的下拉）。
 */
html[data-skin="dark"] .layui-nav-child,
html[data-skin="dark"] #userHome.layui-nav-child {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-2) 0;
    min-width: 140px;
}

html[data-skin="dark"] .layui-nav-child::before {
    border-bottom-color: var(--bg-elevated) !important;
}

/* 下拉项文字 — 覆盖 layui 默认 #333 / #666 */
html[data-skin="dark"] .layui-nav .layui-nav-child dd,
html[data-skin="dark"] .layui-nav-child dd {
    line-height: 36px;
}

html[data-skin="dark"] .layui-nav .layui-nav-child dd a,
html[data-skin="dark"] .layui-nav-child dd a,
html[data-skin="dark"] #userHome dd a {
    color: var(--text-1) !important;
    padding: 0 var(--space-4);
    height: 36px;
    line-height: 36px;
    font-size: var(--font-size-sm);
    background: transparent !important;
    transition: background var(--transition-fast), color var(--transition-fast);
}

html[data-skin="dark"] .layui-nav .layui-nav-child dd a:hover,
html[data-skin="dark"] .layui-nav-child dd a:hover,
html[data-skin="dark"] #userHome dd a:hover {
    background: var(--bg-3) !important;
    color: var(--primary) !important;
}

html[data-skin="dark"] .layui-nav .layui-nav-child dd.layui-this,
html[data-skin="dark"] .layui-nav-child dd.layui-this {
    background: var(--primary-soft) !important;
}

html[data-skin="dark"] .layui-nav .layui-nav-child dd.layui-this a,
html[data-skin="dark"] .layui-nav-child dd.layui-this a {
    color: var(--primary) !important;
    background: transparent !important;
}

html[data-skin="dark"] .layui-nav .layui-nav-child hr,
html[data-skin="dark"] .layui-nav-child hr {
    border: 0;
    border-top: 1px solid var(--divider);
    margin: var(--space-2) 0;
}

/* === Dropdown 组件（layui dropdown） === */
html[data-skin="dark"] .layui-dropdown {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
}

html[data-skin="dark"] .layui-dropdown-menu li {
    color: var(--text-1);
    padding: 0 var(--space-4);
    height: 36px;
    line-height: 36px;
}

html[data-skin="dark"] .layui-dropdown-menu li:hover {
    background: var(--bg-3);
    color: var(--primary);
}

/* === 面包屑（含顶栏 .layui-breadcrumb-header 路径指示器） === */
html[data-skin="dark"] .layui-breadcrumb a,
html[data-skin="dark"] .layui-layout-admin .layui-header .layui-breadcrumb-header,
html[data-skin="dark"] .layui-layout-admin .layui-header .layui-breadcrumb-header a {
    color: var(--text-2);
}

html[data-skin="dark"] .layui-breadcrumb a:hover {
    color: var(--primary);
}

html[data-skin="dark"] .layui-breadcrumb a:last-child,
html[data-skin="dark"] .layui-breadcrumb a:last-child:hover {
    color: var(--text-1);
}

html[data-skin="dark"] .layui-breadcrumb span[lay-separator],
html[data-skin="dark"] .layui-layout-admin .layui-header .layui-breadcrumb-header span {
    color: var(--text-3);
    margin: 0 var(--space-2);
}

/* === Tab 内容区（业务页面 .layui-tab） === */
html[data-skin="dark"] .layui-tab {
    margin: 0;
}

html[data-skin="dark"] .layui-tab-title {
    border-bottom: 1px solid var(--border);
    background: transparent;
    height: 42px;
    white-space: nowrap;
}

html[data-skin="dark"] .layui-tab-title li {
    color: var(--text-2);
    font-weight: 400;
    transition: color var(--transition-base);
}

html[data-skin="dark"] .layui-tab-title li:hover {
    color: var(--text-1);
}

html[data-skin="dark"] .layui-tab-title .layui-this {
    color: var(--primary);
    font-weight: 500;
}

/* layui-tab-brief（业务页面常用的"简洁 tab"风格）默认 .layui-this 用 #16baaa，
 * 选择器是 .layui-tab-brief>.layui-tab-title .layui-this(0,0,3,0)，比我们的
 * .layui-tab-title .layui-this(0,0,2,2 含 html[data-skin]) 优先级实际相当，
 * 但为保险起见用更具体的 selector 强制覆盖 */
html[data-skin="dark"] .layui-tab-brief > .layui-tab-title li {
    color: var(--text-2);
    font-weight: 400;
}

html[data-skin="dark"] .layui-tab-brief > .layui-tab-title li:hover {
    color: var(--text-1);
}

html[data-skin="dark"] .layui-tab-brief > .layui-tab-title .layui-this {
    color: var(--primary) !important;
    font-weight: 500;
}

html[data-skin="dark"] .layui-tab-brief > .layui-tab-title .layui-this:after {
    border-bottom-color: var(--primary) !important;
}

html[data-skin="dark"] .layui-tab-title .layui-this::after {
    border-color: transparent transparent var(--primary);
    border-bottom-color: var(--primary);
    height: 42px;
    border-radius: 0;
}

html[data-skin="dark"] .layui-tab-content {
    padding: var(--space-5) 0;
}

/* Tab 卡片模式 */
html[data-skin="dark"] .layui-tab-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    box-shadow: var(--shadow-card);
}

html[data-skin="dark"] .layui-tab-card > .layui-tab-title {
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

html[data-skin="dark"] .layui-tab-card > .layui-tab-title li.layui-this {
    background: var(--bg-2);
    color: var(--primary);
}

html[data-skin="dark"] .layui-tab-card > .layui-tab-title li.layui-this::after {
    border-top-color: var(--primary);
    border-bottom: 0;
}