/* 慧眼护农 3.4.1 管理后台样式（拆分 2/4）：全局滚动条 + 侧边栏菜单覆盖 + 导航管理 + 主题设置页 */
/* 由 admin.css 等价拆分而来，模板按原顺序 <link> 顺次引入，整体等价单文件 */

/* ========== 全局滚动条统一（6px 圆角） ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--app-scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }

/* 侧边栏滚动条（跟随主题变量） */
.sidebar ::-webkit-scrollbar-thumb { background: var(--app-sidebar-scrollbar-thumb); }
.sidebar ::-webkit-scrollbar-thumb:hover { background: var(--app-sidebar-scrollbar-thumb-hover); }

/* ========== 侧边栏菜单覆盖 — 消除分层感 + 圆角高亮 + 平滑过渡 ========== */
/* 将 TDesign 菜单各层容器背景全部透明，避免多层背景叠加产生分层感 */
.sidebar .t-default-menu,
.sidebar .t-default-menu__inner,
.sidebar .t-menu,
.sidebar .t-menu--scroll,
.sidebar .t-menu__sub,
.sidebar .t-submenu { background: transparent !important; border: none !important; box-shadow: none !important; }
.sidebar .t-default-menu { width: 100% !important; }
/* 覆盖 TDesign 内联 height:100%：菜单内容自然撑高，滚动统一交给 .sidebar-menu */
.sidebar .t-default-menu { height: auto !important; }
.sidebar .t-menu--scroll { overflow: visible; }
.sidebar .t-menu { width: 100%; padding: 0; }

/* 菜单项：圆角 + Discord 风回弹过渡（背景+位移一起动，Q 弹丝滑） */
.sidebar .t-menu__item,
.sidebar .t-submenu .t-menu__item {
    color: var(--app-sidebar-menu-text); border-radius: var(--app-radius-md); margin: 2px 0;
    transition: background var(--app-duration-fast) var(--app-ease-standard),
                color var(--app-duration-fast) var(--app-ease-standard),
                transform var(--app-duration-base) var(--app-ease-spring);
}
.sidebar .t-menu__item:hover { background: var(--app-sidebar-menu-hover-bg); color: var(--app-sidebar-menu-text-active); transform: translateX(2px); }
.sidebar .t-menu__item:active { transform: translateX(2px) scale(0.98); }
.sidebar .t-menu__item.t-is-active {
    background: var(--app-sidebar-menu-active-bg); color: var(--app-sidebar-menu-text-active); font-weight: 500;
}
/* 子菜单缩进项高亮与普通项一致 */
.sidebar .t-submenu__item.t-is-active { background: var(--app-sidebar-menu-active-bg); color: var(--app-sidebar-menu-text-active); }
/* 箭头颜色跟随侧边栏主题变量，确保深色/明亮模式均可见 */
.sidebar .t-fake-arrow { color: var(--app-sidebar-menu-text); }
.sidebar .t-fake-arrow path { stroke: var(--app-sidebar-menu-text); stroke-opacity: 1; }

/* 内容区 t-select 箭头深色模式兑容（TDesign SVG 内联 stroke="black" 不跟随主题） */
.page-content .t-fake-arrow path { stroke: var(--app-text-placeholder); stroke-opacity: 1; }

/* ========== 导航管理：两栏可视编辑器 ========== */
/* 导航卡片容器 */
.nav-card { padding: 0; overflow: hidden; }
#page-app > .nav-card > .t-card__body {
    overflow: hidden; display: flex; flex-direction: column; min-height: 0;
}
.nav-card .t-tabs {
    border-bottom: 1px solid var(--app-border); flex-shrink: 0;
}
.nav-card .t-tabs__content {
    padding: 0;
}

/* 导航编辑器两栏布局 */
.nav-editor { display: flex; gap: 0; align-items: stretch; flex: 1; min-height: 0; overflow: hidden; }
.nav-editor__left {
    width: 320px; flex-shrink: 0; background: var(--app-bg-container);
    border-right: 1px solid var(--app-border);
    padding: 16px;
    display: flex; flex-direction: column; overflow: hidden;
}
.nav-editor__left-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; flex-shrink: 0;
}
.nav-editor__left-title { font-size: var(--app-font-size-lg); font-weight: 600; color: var(--app-text-primary); }
.nav-editor__left .t-loading__parent { flex: 1; overflow-y: auto; min-height: 0; }
.nav-editor__left > .nav-tree {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
    scrollbar-gutter: stable; padding-right: 4px;
}
.nav-editor__right {
    flex: 1; min-width: 0; background: var(--app-bg-page);
    padding: 20px 24px; overflow-y: auto;
}
.nav-editor__placeholder { color: var(--app-text-placeholder); padding: 60px 0; text-align: center; }
.nav-editor__actions { display: flex; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--app-border); }

/* 菜单树（可拖拽） */
.nav-tree { display: flex; flex-direction: column; gap: 1px; }
.nav-tree__item {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--app-radius-sm); cursor: pointer;
    border: 2px solid transparent; transition: all 0.15s;
    position: relative;
}
.nav-tree__item:hover { background: var(--app-tree-hover); }
.nav-tree__item.is-active { background: var(--app-brand-light); border-color: var(--app-brand-color); }
.nav-tree__item.is-drag-over-sibling { 
    border-color: var(--app-brand-color); border-style: dashed;
    background: var(--app-brand-light);
}
.nav-tree__item.is-drag-over-child {
    border-color: var(--app-success); border-style: dashed; 
    background: var(--app-success-light-weak);
    box-shadow: inset 24px 0 0 -1px var(--app-success-light-hover);
}
.nav-tree__item.is-drag-over-child::after {
    content: '\2192 拖入为子级';
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--app-success); font-weight: 600;
    background: var(--app-success-light-mid); padding: 2px 8px; border-radius: 4px;
}
.nav-tree__mover { color: var(--app-text-placeholder); cursor: grab; flex-shrink: 0; }
.nav-tree__icon { color: var(--app-text-secondary); font-size: 18px; flex-shrink: 0; }
.nav-tree__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--app-font-size-md); }
.nav-tree__empty { color: var(--app-text-placeholder); padding: 40px 0; text-align: center; font-size: 13px; }
.nav-tree__item .t-tag { font-size: 11px; padding: 2px 8px; flex-shrink: 0; }

/* 图标选择器字段 */
.icon-field {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-md);
    cursor: pointer; transition: border-color 0.15s; width: 100%;
}
.icon-field:hover { border-color: var(--app-brand-color); }
.icon-field__preview { font-size: 20px; color: var(--app-brand-color); }
.icon-field__text { flex: 1; color: var(--app-text-primary); font-size: var(--app-font-size-md); }
.icon-field__arrow { color: var(--app-text-placeholder); font-size: 16px; }

/* 图标选择器弹窗 */
/* 图标选择器栅格（支持 1200+ 图标，无横滚） */
.icon-picker__grid {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
    max-height: 420px; overflow-y: auto; overflow-x: hidden; padding: 8px;
    border: 1px solid var(--app-border); border-radius: var(--app-radius-md);
}
.icon-picker__item {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1; border-radius: var(--app-radius-sm); cursor: pointer;
    border: 2px solid transparent; transition: all 0.15s;
}
.icon-picker__item:hover { background: var(--app-bg-container); }
.icon-picker__item.is-selected {
    border-color: var(--app-brand-color); 
    background: var(--app-brand-light);
}
.icon-picker__empty {
    text-align: center; color: var(--app-text-placeholder); padding: 40px 0;
}

/* 表单帮助文字 */
.form-help-text { font-size: var(--app-font-size-sm); color: var(--app-text-secondary); margin-top: var(--app-spacing-xs); }

/* 缓存管理页面：栅格卡片布局，一行最多 4 个，宽度不足时自动换行 */
.cache-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 48px) / 4)), 1fr));
}
.cache-list-item {
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    padding: 16px; border: 1px solid var(--app-border); border-radius: var(--app-radius-md);
    background: var(--app-bg-container);
}
.cache-list-item-info { flex: 1; margin-right: 0; }
.cache-list-item-title { font-size: var(--app-font-size-md); font-weight: 500; color: var(--app-text-primary); }
.cache-list-item-desc { font-size: var(--app-font-size-sm); color: var(--app-text-secondary); margin-top: var(--app-spacing-xs); }

/* 主题设置页面：三 Tab（官网 / 后台管理端 / 农户端） + 主题卡片网格 */
/* ========== 主题设置页面样式 ========== */
/* 整体布局：左侧竖向导航 + 右侧内容区（包裹在 t-card 内） */
.theme-page {
    padding: 0;
}
.theme-card-wrapper :deep(.t-card__body) {
    padding: 0 !important;
}
.theme-layout {
    display: flex;
    min-height: 480px;
    overflow: hidden;
}

/* 左侧导航栏 */
.theme-sidebar {
    width: 240px;
    background: var(--app-bg-page);
    border-right: 1px solid var(--app-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.theme-sidebar-header {
    padding: var(--app-spacing-lg) var(--app-spacing-md);
    font-size: var(--app-font-size-lg);
    font-weight: 600;
    color: var(--app-text-primary);
    border-bottom: 1px solid var(--app-border);
}
.theme-sidebar-menu {
    padding: var(--app-spacing-sm) 0;
    flex: 1;
    overflow-y: auto;
}
.theme-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--app-spacing-md) var(--app-spacing-md);
    margin: 2px 0;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}
.theme-menu-item:hover {
    background: var(--app-bg-container);
}
.theme-menu-item.is-active {
    background: var(--app-bg-container);
    color: var(--app-brand-color);
    border-left-color: var(--app-brand-color);
    font-weight: 600;
}
.theme-menu-item-text {
    font-size: var(--app-font-size-md);
}
.theme-menu-item-badge {
    background: var(--app-brand-light);
    color: var(--app-brand-color);
    font-size: var(--app-font-size-sm);
    padding: 2px 6px;
    border-radius: var(--app-radius-sm);
    font-weight: 500;
}

/* 右侧内容区 */
.theme-main {
    flex: 1;
    padding: var(--app-spacing-lg);
    min-width: 0;
    overflow-y: auto;
}

.theme-loading { 
    padding: var(--app-spacing-xl) var(--app-spacing-lg);
    text-align: center; 
}
.theme-grid {
    display: grid;
    gap: var(--app-spacing-lg);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.theme-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--app-border); border-radius: var(--app-radius-md);
    background: var(--app-bg-container); overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.theme-card:hover { 
    box-shadow: var(--app-shadow-2); 
    transform: translateY(-2px);
}
.theme-card.is-active { 
    border-color: var(--app-brand-color); 
    box-shadow: 0 0 0 2px var(--app-brand-light);
}
.theme-card-preview {
    position: relative; aspect-ratio: 16 / 9; background: var(--app-bg-page);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.theme-card-preview img { width: 100%; height: 100%; object-fit: cover; }
.theme-card-preview-empty { font-size: var(--app-font-size-sm); color: var(--app-text-placeholder); }
.theme-card-badge { position: absolute; top: 12px; right: 12px; }
.theme-card-body { padding: var(--app-spacing-md); flex: 1; }
.theme-card-title { font-size: var(--app-font-size-md); font-weight: 600; color: var(--app-text-primary); }
.theme-card-meta { font-size: var(--app-font-size-sm); color: var(--app-text-secondary); margin-top: var(--app-spacing-xs); }
.theme-card-desc {
    font-size: var(--app-font-size-sm); color: var(--app-text-placeholder); margin-top: var(--app-spacing-sm);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.theme-card-actions {
    display: flex; justify-content: flex-end; gap: var(--app-spacing-sm);
    padding: var(--app-spacing-md); border-top: 1px solid var(--app-border);
    background: var(--app-bg-page);
}

/* 官网主题控制器页面（四 Tab 配置面板，对齐 system-settings 风格） */
.site-controller { padding: 0; }
/* 修复 Tabs 导航栏切换到后两个 Tab 时自动滚动偏移 */
.site-controller .t-tabs__nav-scroll {
    overflow: visible !important;
}
.site-controller .t-tabs__nav-wrap {
    transform: none !important;
}
.sc-footer-list {
    display: flex; flex-direction: column; gap: var(--app-spacing-md);
}
.sc-footer-group .t-card__header {
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    background: var(--app-bg-card);
}
.sc-footer-group__head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.sc-footer-group__title {
    font-size: var(--app-font-size-md); font-weight: 600; color: var(--app-text-primary);
}