/* VueUI 后台管理模板：全局样式（布局壳 / 页面骨架 / 通用组件 / Element 统一覆盖）。
   页面独有样式在 css/views/*.css，由对应视图模块经 util.loadCss 按需注入；
   FileExplorer 组件样式在 css/components/file-explorer.css，由组件模块自载。 */

/* ---------- 主题变量 ---------- */
:root {
  /* 主题色：松绿 #315e50（对齐登录页参考站），经 Element Plus CSS 变量覆盖全套主色梯度。
     换主题色只需改 --app-primary 一处 */
  --app-primary: #315e50;
  --el-color-primary: var(--app-primary);
  --el-color-primary-light-3: color-mix(in srgb, var(--app-primary) 70%, #ffffff);
  --el-color-primary-light-5: color-mix(in srgb, var(--app-primary) 50%, #ffffff);
  --el-color-primary-light-7: color-mix(in srgb, var(--app-primary) 30%, #ffffff);
  --el-color-primary-light-8: color-mix(in srgb, var(--app-primary) 20%, #ffffff);
  --el-color-primary-light-9: color-mix(in srgb, var(--app-primary) 10%, #ffffff);
  --el-color-primary-dark-2: color-mix(in srgb, var(--app-primary) 80%, #000000);

  /* ---------- 中性色随主题色染色 ----------
     登录页气质的中性色（墨绿文案 / 米绿侧栏 / 暖白底 / 描边）不再写死，而是把主题色
     低比例染入中性基底：默认松绿 #315e50 下逐项校准至 ≈ 登录页值（#243c33 / #eeeee5 /
     #fdfdfb / #e7e8df），换任意主题色后整站色温自动跟随。 */
  --app-warm: color-mix(in srgb, var(--app-primary) 2%, #fffefb);   /* 暖白：页面底 */
  --app-cream: color-mix(in srgb, var(--app-primary) 8%, #fefbf2);  /* 米绿：侧栏/浅填充 */
  --app-ink: color-mix(in srgb, var(--app-primary) 42%, #1a231e);   /* 墨绿：主文案 */
  --app-muted: color-mix(in srgb, var(--app-primary) 14%, #6f7363); /* 次级文案 */
  --app-line: color-mix(in srgb, var(--app-primary) 8%, #f7f4eb);   /* 描边 */
  --app-card: #ffffff;                                              /* 卡片/输入底 */
  /* 柔和色调阴影（替代黑系）：卡片常态 / 悬浮加深 / 选中项主色投影 */
  --app-shadow-soft: 0 1px 4px color-mix(in srgb, var(--app-ink) 6%, transparent);
  --app-shadow-lift: 0 3px 14px color-mix(in srgb, var(--app-ink) 10%, transparent);
  --app-active-shadow: 0 5px 12px color-mix(in srgb, var(--app-primary) 18%, transparent);
  /* 选中实底：主色混白提亮（菜单/页签选中同款；换主题色自动跟随） */
  --app-active-solid: color-mix(in srgb, var(--app-primary) 70%, #ffffff);

  /* ---------- Element 变量映射：全站组件自动跟随染色 ---------- */
  --el-bg-color-page: var(--app-warm);
  --el-bg-color: var(--app-card);
  --el-bg-color-overlay: var(--app-card);
  --el-text-color-primary: var(--app-ink);
  --el-text-color-regular: color-mix(in srgb, var(--app-ink) 78%, var(--app-muted));
  --el-text-color-secondary: color-mix(in srgb, var(--app-muted) 82%, var(--app-warm));
  --el-text-color-placeholder: color-mix(in srgb, var(--app-muted) 55%, var(--app-warm));
  --el-text-color-disabled: color-mix(in srgb, var(--app-muted) 45%, var(--app-warm));
  --el-border-color: color-mix(in srgb, var(--app-line) 80%, var(--app-muted));
  --el-border-color-light: color-mix(in srgb, var(--app-line) 88%, var(--app-muted));
  --el-border-color-lighter: var(--app-line);
  --el-border-color-extra-light: color-mix(in srgb, var(--app-line) 55%, var(--app-warm));
  --el-fill-color: color-mix(in srgb, var(--app-cream) 70%, var(--app-warm));
  --el-fill-color-light: color-mix(in srgb, var(--app-cream) 45%, var(--app-warm));
  --el-fill-color-lighter: color-mix(in srgb, var(--app-cream) 28%, var(--app-warm));
  --el-fill-color-blank: var(--app-card);
  /* 基础圆角 4→6px：输入框/按钮/下拉轻柔化一档（不是卡片那种大圆角） */
  --el-border-radius-base: 6px;

  /* 内容区内边距：四周留白统一由布局内容区(.layout-scroll)提供，页面自身不再设置 */
  --page-padding: 15px;
  /* 全局排版基准 */
  --app-font-size: 14px;
  --app-line-height: 1.6;
}

html.dark {
  /* 暗色模式（EasiMove 同款）：EP 的 dark 变量表作用于 html.dark（优先级高于 :root），
     会把 --el-color-primary 重置回默认蓝，必须在此重新声明主色及梯度（与暗底混合） */
  --el-color-primary: var(--app-primary);
  --el-color-primary-dark-2: color-mix(in srgb, var(--app-primary) 80%, #000000);
  --el-color-primary-light-3: color-mix(in srgb, var(--app-primary) 70%, #1c1c22);
  --el-color-primary-light-5: color-mix(in srgb, var(--app-primary) 50%, #1c1c22);
  --el-color-primary-light-7: color-mix(in srgb, var(--app-primary) 30%, #1c1c22);
  --el-color-primary-light-8: color-mix(in srgb, var(--app-primary) 20%, #1c1c22);
  --el-color-primary-light-9: color-mix(in srgb, var(--app-primary) 10%, #1c1c22);

  /* 暗色中性色：同一套「主题色染入基底」公式，基底换深色（对齐登录页暗色
     #1b201b / #141714 / #20261f / #2a312b / #e4eae1 / #98a392） */
  --app-warm: color-mix(in srgb, var(--app-primary) 4%, #131411);   /* ≈ #141714 */
  --app-cream: color-mix(in srgb, var(--app-primary) 6%, #1a1c18);  /* ≈ #1b201b */
  --app-ink: color-mix(in srgb, var(--app-primary) 10%, #f8faf1);   /* ≈ #e4eae1 */
  --app-muted: color-mix(in srgb, var(--app-primary) 12%, #a6ac9b); /* ≈ #98a392 */
  --app-line: color-mix(in srgb, var(--app-primary) 8%, #292d28);   /* ≈ #2a312b */
  --app-card: color-mix(in srgb, var(--app-primary) 7%, #1f221b);   /* ≈ #20261f */
  --app-shadow-soft: 0 1px 4px rgba(0, 0, 0, .3);
  --app-shadow-lift: 0 3px 14px rgba(0, 0, 0, .4);
  --app-active-shadow: 0 5px 12px color-mix(in srgb, var(--app-primary) 26%, transparent);
  --app-active-solid: color-mix(in srgb, var(--app-primary) 64%, #ffffff);

  /* EP 变量映射（暗色重申一遍压过 EP dark 表） */
  --el-bg-color-page: var(--app-warm);
  --el-bg-color: var(--app-card);
  --el-bg-color-overlay: color-mix(in srgb, var(--app-primary) 9%, #272a23);
  --el-text-color-primary: var(--app-ink);
  --el-text-color-regular: color-mix(in srgb, var(--app-ink) 62%, var(--app-muted));
  --el-text-color-secondary: var(--app-muted);
  --el-text-color-placeholder: color-mix(in srgb, var(--app-muted) 55%, var(--app-warm));
  --el-text-color-disabled: color-mix(in srgb, var(--app-muted) 40%, var(--app-warm));
  --el-border-color: color-mix(in srgb, var(--app-line) 80%, var(--app-muted));
  --el-border-color-light: color-mix(in srgb, var(--app-line) 88%, var(--app-muted));
  --el-border-color-lighter: var(--app-line);
  --el-border-color-extra-light: color-mix(in srgb, var(--app-line) 55%, var(--app-warm));
  --el-fill-color: color-mix(in srgb, var(--app-cream) 70%, var(--app-warm));
  --el-fill-color-light: color-mix(in srgb, var(--app-cream) 45%, var(--app-warm));
  --el-fill-color-lighter: color-mix(in srgb, var(--app-cream) 28%, var(--app-warm));
  --el-fill-color-blank: var(--app-card);

  /* 暗色下菜单 hover/父级激活的主色文字提亮（原值 #315e50 系深绿，压深底不可读） */
  --app-primary-text: color-mix(in srgb, var(--app-primary) 55%, #dfe5da);
}
html.dark .layout-aside .el-menu-item:not(.is-active):hover,
html.dark .layout-aside .el-sub-menu__title:hover,
html.dark .layout-aside .el-sub-menu.is-active > .el-sub-menu__title { color: var(--app-primary-text); }

html, body, #app { height: 100%; margin: 0; }
/* 文本选中：主色浅染（登录页式的柔和选中观感） */
::selection { background: color-mix(in srgb, var(--app-primary) 22%, transparent); }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
    'Segoe UI', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', sans-serif;
  font-size: var(--app-font-size);
  font-variant-numeric: tabular-nums;
  line-height: var(--app-line-height);
  letter-spacing: -0.01em;
  color: var(--el-text-color-primary);
  background: var(--el-bg-color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Element 组件全局统一（字号对齐基准、观感柔化） ---------- */
.el-table { font-size: 13.5px; }
.el-table .cell { padding: 0 10px; }
/* 表头底色：浅灰填充随主题自适应；固定列表头显式对齐（EP 会用白底盖掉） */
.el-table th.el-table__cell { background-color: var(--el-fill-color-light); font-weight: 600; color: var(--el-text-color-regular); }
.el-table th.el-table__cell.el-table-fixed-column--right,
.el-table th.el-table__cell.el-table-fixed-column--left { background-color: var(--el-fill-color-light); }
/* 表格更紧凑：单元格上下内边距从默认 8px 收到 5px */
.el-table .el-table__cell { padding: 5px 0; }
.el-table td.el-table__cell, .el-table th.el-table__cell { border-bottom-color: var(--el-border-color-extra-light); }
.el-table .el-table__row { transition: background-color .15s ease; }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background: var(--el-fill-color-light); }
.el-form-item__label { font-size: 13.5px; }
.el-button { font-size: 13.5px; }
/* 主按钮：登录页主按钮同款柔色投影 + 悬停微上浮、按压回弹（链接/文字按钮除外） */
.el-button--primary:not(.is-link):not(.is-text) { box-shadow: 0 2px 6px color-mix(in srgb, var(--app-primary) 16%, transparent); }
.el-button--primary:not(.is-link):not(.is-text):not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--app-primary) 22%, transparent);
}
.el-button--primary:not(.is-link):not(.is-text):not(:disabled):active { transform: translateY(0) scale(.99); }
/* 弹窗/抽屉标题：ledger-header 同款主题色竖条，全站标题语言统一 */
.el-dialog__title::before, .el-drawer__title::before {
  content: ''; display: inline-block; width: 3px; height: 14px; border-radius: 2px;
  background: var(--el-color-primary); margin-right: 8px; vertical-align: -2px;
}
.el-dialog__body { line-height: var(--app-line-height); }
.el-dialog__title { font-weight: 600; color: var(--el-text-color-primary); }
.el-tag { font-weight: 500; }
.el-card { --el-card-padding: 15px; border-radius: 5px; box-shadow: var(--app-shadow-soft); }
.el-card__header, .el-card__footer { padding: 12px 15px; }
.el-card__header { font-weight: 600; color: var(--el-text-color-primary); }
.el-descriptions__label { background: var(--el-fill-color-light); font-weight: 500; }
.el-empty__description p { color: var(--el-text-color-secondary); }
/* 行可点击表格（日志详情抽屉等） */
.clickable-rows .el-table__row { cursor: pointer; }

/* 浏览器自动填充强加底色覆盖 */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--el-input-bg-color, #fff) inset;
  -webkit-text-fill-color: var(--el-input-text-color, #303133);
  caret-color: var(--el-input-text-color, #303133);
  transition: background-color 5000s ease-in-out 0s;
}

/* ---------- 页面骨架：page-fill（所有页面统一包裹） ---------- */
/* 满高页面：自身不滚动为常态（高度 100%），内容默认不伸展；
   满高单元（表格面板等）占满剩余高度、内部自滚；内容整体超高时页面自身滚动兜底 */
.page-fill {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--page-padding);
  overflow-x: hidden; /* el-row 负 margin 等不触发页面横向滚动；表格横向滚动由 el-table 自理 */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--app-muted) 40%, transparent) transparent;
}
.page-fill::-webkit-scrollbar { width: 6px; height: 6px; }
.page-fill::-webkit-scrollbar-thumb { border-radius: 3px; background: color-mix(in srgb, var(--app-muted) 40%, transparent); }
.page-fill::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--app-muted) 60%, transparent); }
.page-fill::-webkit-scrollbar-track { background: transparent; }
/* 普通子元素不伸不缩（工具条/统计行/弹层锚点）；槽内直接子元素的纵向间距统一交给骨架 gap */
.page-fill > *, .page-fill__top > *, .page-fill__bottom > * { flex: none; margin-top: 0 !important; margin-bottom: 0 !important; }
.page-fill__top, .page-fill__bottom { display: flex; flex-direction: column; gap: var(--page-padding); }
/* 满高单元：有剩余空间则分摊占满；保底 220px 防压扁，空间不足时由页面内滚承接 */
.page-fill > .fill-card, .page-fill > .fm-body { flex: 1 0 0; min-height: 220px; }
/* 纯列表面板（data-list）不设保底：表格区压缩内滚到任意剩余高度 */
.page-fill > .data-list { flex: 1; min-height: 0; }
.fill-card { display: flex; flex-direction: column; overflow: hidden; }
.fill-card > .el-card__header { flex: none; }
.fill-card > .el-card__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 满高表格容器：占满剩余高度（el-table 传 height="100%" 后表头固定、行区内部滚动） */
.full-table { flex: 1; min-height: 0; }

/* ---------- 卡内页头：主题色竖条 + 标题 + 同行一句介绍（ledger-header） ---------- */
.ledger-header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ledger-header__name {
  display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600;
  margin: 0; line-height: 1.4; white-space: nowrap; flex-shrink: 0;
}
.ledger-header__name::before {
  content: ''; flex-shrink: 0; width: 3px; height: 16px; border-radius: 2px;
  background: var(--el-color-primary);
}
.ledger-header__hint {
  font-size: 12px; color: var(--el-text-color-regular); margin: 0; line-height: 1.4;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 标题行右侧主操作区（新建/保存等按钮右对齐钉在标题行） */
.ledger-header__action { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
.ledger-header__action .el-radio-button__inner { height: 32px; display: inline-flex; align-items: center; }

/* 卡片标题：图标 + 文案 + 提示 + 右侧附加（详情/仪表盘卡头共用） */
.card-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.card-title__icon { color: var(--el-color-primary); font-size: 14px; }
.card-title__text::before {
  content: ''; display: inline-block; width: 3px; height: 13px; border-radius: 2px;
  background: var(--el-color-primary); margin-right: 7px; vertical-align: -2px;
}
.card-title__hint { color: var(--el-text-color-secondary); font-weight: 400; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title__count, .card-title__action { margin-left: auto; flex-shrink: 0; }
.card-title__count { color: var(--el-color-primary); font-weight: 500; font-size: 12px; }

/* ---------- data-list：通用列表卡片（TablePanel） ---------- */
/* 整个组件（页头+搜索区+表格+分页）包成白底圆角卡片，与页面灰底区分 */
.data-list {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  background: var(--app-card); border: 1px solid var(--app-line);
  border-radius: 5px; padding: 15px; box-sizing: border-box;
  box-shadow: var(--app-shadow-soft); transition: box-shadow .2s ease;
}
.data-list:hover { box-shadow: var(--app-shadow-lift); }
.data-list__header { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--el-border-color-lighter); }
.data-list__search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.data-list__search .page-actions, .data-list__search .toolbar { margin-bottom: 0; }
.data-list__body { flex: 1; min-height: 0; }
.data-list__footer { flex: none; margin-top: 10px; }
/* 表格观感：表头浅灰底、边框线弱化、行悬浮走浅填充色 */
.data-list .el-table { --el-table-header-bg-color: var(--el-fill-color-light); --el-table-border-color: var(--el-border-color-lighter); }
.data-list .el-table th.el-table__cell { font-weight: 600; color: var(--el-text-color-regular); }
.data-list .el-table { --el-table-row-hover-bg-color: var(--el-fill-color-light); }
/* 操作列按钮排布紧凑并统一压成小尺寸 */
.data-list .el-table .el-button + .el-button { margin-left: 3px; }
.data-list .el-table .el-button-group .el-button + .el-button { margin-left: 0; }
.data-list .el-table .data-list__actions .el-button { height: 22px; padding: 5px 6px; font-size: 12px; }
.data-list .el-table .data-list__actions .el-button.is-link,
.data-list .el-table .data-list__actions .el-button.is-text { height: auto; padding: 2px 4px; }
/* 加载遮罩贴合圆角并略微透出底层数据 */
/* 遮罩跟随主题底色（写死白色在暗色模式下刺眼） */
.data-list .el-loading-mask { border-radius: 5px; background-color: color-mix(in srgb, var(--el-bg-color) 75%, transparent); }
/* 分页器文案颜色弱化 */
.data-list__pager { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- 应用壳（layout）：可拖拽侧栏 + 面包屑顶栏 + 页签栏 + 内滚内容区 ----------
   气质对齐登录页：米绿侧栏 / 暖白顶栏页签 / 墨绿文案，中性色随主题色染色（见 :root） */
.layout { height: 100%; }
.layout-aside {
  position: relative;
  background: var(--app-cream); border-right: 1px solid var(--app-line);
  display: flex; flex-direction: column; overflow: hidden;
}
/* 侧栏右下角登录页同款极淡装饰圆弧（藏在内容之下，给米绿底一点层次） */
.layout-aside::after {
  content: ''; position: absolute; right: -110px; bottom: -140px; z-index: 0;
  width: 300px; height: 300px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--app-ink) 7%, transparent);
  pointer-events: none;
}
/* 侧栏点缀：登录页星尘同款 ✦（静态一枚，菜单拖窄成竖排时隐藏避让图标） */
.layout-aside::before {
  content: '✦'; position: absolute; top: 74px; right: 14px; z-index: 0;
  font-size: 13px; color: color-mix(in srgb, var(--app-ink) 12%, transparent);
  pointer-events: none;
}
.layout-aside:has(.layout-menu--compact)::before { display: none; }
.layout-aside > * { position: relative; z-index: 1; }
.layout-aside__resizer {
  flex-shrink: 0; width: 4px; margin-left: -2px; z-index: 10; cursor: col-resize;
  background: var(--el-border-color-lighter); transition: background-color .2s;
}
.layout-aside__resizer:hover, .layout-aside__resizer.is-dragging { background-color: var(--app-primary); }

.layout-logo {
  position: relative;
  height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  overflow: hidden; white-space: nowrap; flex-shrink: 0;
}
/* logo 区底部分隔：两端渐隐发丝线（与顶栏/页签/侧栏 footer 同语言） */
.layout-logo::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--app-line), transparent);
}
.layout-logo__mark {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: var(--app-primary);
  box-shadow: var(--app-active-shadow);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--el-color-white); transition: transform .3s ease;
}
.layout-logo__mark svg { width: 19px; height: 19px; }
.layout-logo:hover .layout-logo__mark { transform: rotate(20deg) scale(1.06); }
.layout-logo__text { color: var(--app-ink); font-size: 17px; font-weight: 750; letter-spacing: .5px; line-height: 1.15; }
.layout-logo__sub { color: var(--app-muted); font-size: 9px; letter-spacing: 1.5px; line-height: 1.15; margin-top: 2px; }
.layout-logo--mini { justify-content: center; padding: 0 8px; }
.layout-logo--mini .layout-logo__meta { display: none; }

.layout-aside .el-menu { border-right: none; padding: 10px var(--menu-padding-x, 12px); background: transparent; flex: 1; overflow-x: hidden; overflow-y: auto; }
/* 胶囊形菜单项（尺寸/形状定制，配色交给 Element 默认样式）；一级项与子项共用 */
.layout-aside .el-menu-item, .layout-aside .el-sub-menu__title {
  height: 40px; line-height: 40px; margin-bottom: 2px;
  padding: 0 var(--menu-item-padding-x, 16px) !important;
  border-radius: 10px; font-size: var(--menu-font-size, 14px); white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.layout-aside .el-menu-item:not(.is-active), .layout-aside .el-sub-menu__title { color: var(--el-text-color-primary); }
/* hover：主题色 10% 染入米绿底（--el-fill-color 与侧栏米绿几乎同色，看不出悬停，故单独加染） */
.layout-aside .el-menu-item:not(.is-active):hover, .layout-aside .el-sub-menu__title:hover {
  background: color-mix(in srgb, var(--app-primary) 10%, var(--app-cream)); color: var(--el-color-primary);
}
/* 选中项：主色实底白字（混白提亮一档）+ 登录按钮同款柔和色投影（呼应登录页主按钮的选中语言） */
.layout-aside .el-menu-item.is-active {
  background: var(--app-active-solid); color: #fff; font-weight: 600;
  box-shadow: var(--app-active-shadow);
}
/* 菜单项图标（排除 sub-menu 展开箭头——箭头有 EP 原生的绝对定位/旋转规则，不能被这里的
   宽度/hover-transform 波及，否则箭头跳到别处） */
.layout-aside .el-menu-item .el-icon:not(.el-sub-menu__icon-arrow),
.layout-aside .el-sub-menu__title .el-icon:not(.el-sub-menu__icon-arrow) {
  width: 28px; height: 28px; margin-right: 10px; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease;
}
.layout-aside .el-menu-item:not(.is-active) .el-icon:not(.el-sub-menu__icon-arrow),
.layout-aside .el-sub-menu__title .el-icon:not(.el-sub-menu__icon-arrow) { color: var(--el-text-color-primary); }
/* 悬停时图标跟随条目主色（上面的显式色会压住继承，需单独放开） */
.layout-aside .el-menu-item:not(.is-active):hover .el-icon:not(.el-sub-menu__icon-arrow),
.layout-aside .el-sub-menu__title:hover .el-icon:not(.el-sub-menu__icon-arrow) { color: inherit; }
.layout-aside .el-menu-item.is-active .el-icon:not(.el-sub-menu__icon-arrow) { color: inherit; }
/* 图标微交互：悬停轻放，选中轻弹 */
.layout-aside .el-menu-item:hover .el-icon:not(.el-sub-menu__icon-arrow),
.layout-aside .el-sub-menu__title:hover .el-icon:not(.el-sub-menu__icon-arrow) { transform: scale(1.2); }
.layout-aside .el-menu-item.is-active .el-icon:not(.el-sub-menu__icon-arrow) { transform: scale(1.1); }
/* 展开态子菜单容器：缩去掉胶囊间距、透出分组结构 */
.layout-aside .el-menu .el-menu { padding: 0; }
.layout-aside .el-sub-menu .el-menu-item { margin-bottom: 2px; }
/* 二级子项缩进：只比一级略进一点（13px），与一级文字大致齐平 */
.layout-aside .el-menu .el-menu .el-menu-item {
  padding-left: calc(var(--menu-item-padding-x, 16px)  + 13px) !important;
}
/* 展开箭头：通用 .el-icon 规则已用 :not() 排除箭头，这里只恢复 EP 被覆盖的显示；
   垂直居中与展开旋转走 EP 原生规则（top:50% + margin-top:-6px + rotateZ） */
.layout-aside .el-sub-menu__title .el-icon.el-sub-menu__icon-arrow {
  display: inline-flex; width: inherit; height: auto; margin: -6px 0 0;
}
/* 展开/激活时箭头翻转（vendored element-plus.css 未含此规则，补齐） */
.layout-aside .el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow,
.layout-aside .el-sub-menu.is-active > .el-sub-menu__title .el-sub-menu__icon-arrow {
  transform: rotateZ(180deg);
}
/* 子项选中时父级分组的"淡选中"态：主题色文字 + 明显可辨的主题底染（比 hover 再深一档），
   不做实底/阴影（与叶子节点的完整选中样式区分层级） */
.layout-aside .el-sub-menu.is-active > .el-sub-menu__title {
  background: color-mix(in srgb, var(--el-color-primary) 16%, var(--app-cream));
  color: var(--el-color-primary);
  font-weight: 600;
}
.layout-aside .el-sub-menu.is-active > .el-sub-menu__title:hover {
  background: color-mix(in srgb, var(--el-color-primary) 20%, var(--app-cream));
  color: var(--el-color-primary);
}
.layout-aside .el-sub-menu.is-active > .el-sub-menu__title .el-icon:not(.el-sub-menu__icon-arrow) {
  color: var(--el-color-primary);
}
/* 竖排紧凑模式（侧栏 <120px）：标题竖排后箭头收小挂右上角（隐藏会让人不知道分组可展开） */
.layout-aside .layout-menu--compact .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: inline-flex;
  right: 2px; top: 4px; margin: 0; font-size: 10px;
}

/* 竖排紧凑模式（侧栏拖窄 <120px）：图标在上、文字在下；二级菜单窄栏下仅显示图标 */
.layout-aside .layout-menu--compact { padding: 10px var(--menu-padding-x, 8px); }
.layout-aside .layout-menu--compact .el-menu-item, .layout-aside .layout-menu--compact .el-sub-menu__title {
  height: auto; min-height: 40px; line-height: normal; flex-direction: column;
  justify-content: center; gap: 1px; padding: 5px var(--menu-padding-x, 8px) !important;
  border-radius: 8px; font-size: var(--menu-font-size, 12px);
}
.layout-aside .layout-menu--compact .el-menu-item .el-icon,
.layout-aside .layout-menu--compact .el-sub-menu__title .el-icon { width: 32px; height: 32px; margin-right: 0; font-size: 22px; }
/* 竖排紧凑模式下二级子项同样居中竖排（撤销上面的缩进） */
.layout-aside .layout-menu--compact .el-menu .el-menu-item {
  padding-left: var(--menu-padding-x, 8px) !important;
}
/* 竖排选中项：与常规模式同款选中实底 */
.layout-aside .layout-menu--compact .el-menu-item.is-active { background: var(--app-active-solid); }

.layout-aside__footer {
  height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--el-text-color-placeholder); font-size: 11px; letter-spacing: .5px;
  position: relative; flex-shrink: 0;
}
/* 底部版本号上方的渐隐分隔线 */
.layout-aside__footer::after {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(to right, transparent, var(--el-border-color-lighter), transparent);
}

/* 顶栏：暖白毛玻璃 + 面包屑（分区胶囊 + 页名）+ 右侧动作；底边用两端渐隐的发丝线
   （呼应侧栏 footer 的渐隐分隔线，比通栏实线轻一档） */
.layout-header {
  position: relative;
  height: 56px; background: color-mix(in srgb, var(--app-warm) 88%, transparent);
  backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--page-padding, 15px);
}
.layout-header::after, .tabnav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--app-line) 12%, var(--app-line) 88%, transparent);
  pointer-events: none;
}
.layout-crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
/* 分区胶囊：登录页入口徽章同款（浅主底 + 主色细描边，6px 圆角小方片） */
.layout-crumb__zone {
  height: 22px; padding: 0 9px; border-radius: 6px; flex: none; box-sizing: border-box;
  background: color-mix(in srgb, var(--app-primary) 7%, var(--app-warm));
  border: 1px solid color-mix(in srgb, var(--app-primary) 16%, var(--app-line));
  color: var(--el-color-primary);
  font-size: 12px; display: inline-flex; align-items: center; letter-spacing: .5px;
}
.layout-crumb__sep { width: 1px; height: 12px; background: var(--el-border-color-light); flex: none; }
.layout-crumb__page { color: var(--el-text-color-primary); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-actions { display: flex; align-items: center; gap: 16px; flex: none; }

/* 顶栏时钟：日期弱化（字距拉开，收成底噪）+ 时间加重 */
.layout-clock { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.layout-clock__date { font-size: 12px; letter-spacing: .3px; color: var(--el-text-color-secondary); }
.layout-clock__time { font-size: 14px; font-weight: 600; color: var(--el-text-color-primary); }

.layout-action {
  width: 28px; height: 28px; border-radius: 4px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--el-text-color-regular);
  cursor: pointer; transition: background-color .2s, color .2s, transform .15s;
}
.layout-action:hover { background: var(--el-fill-color); color: var(--el-color-primary); transform: translateY(-1px); }
.layout-action:active { transform: translateY(0) scale(.92); }
/* 主题色入口：仿 el-color-picker 默认触发器（边框圆角色块，点开取色面板 + 命名色板） */
.theme-trigger {
  width: 24px; height: 24px; padding: 4px; box-sizing: border-box;
  display: inline-flex; border: 1px solid var(--el-border-color); border-radius: 5px;
  cursor: pointer; transition: border-color .2s;
}
.theme-trigger:hover { border-color: var(--el-color-primary); }
.theme-trigger__color { flex: 1; border-radius: 3px; }
/* 取色面板：隐藏底部颜色码输入行（只用调色盘取色；面板 teleport 到 body，全局选择器收口） */
.el-color-picker-panel__footer { display: none; }
/* 预设色板：10 列色块网格（tooltip 提示来源软件） */
.theme-swatches {
  display: grid; grid-template-columns: repeat(10, minmax(0, 22px));
  justify-content: space-between; gap: 7px; margin-top: 14px;
}
.theme-swatch {
  width: 100%; aspect-ratio: 1; border-radius: 5px; cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--el-text-color-primary) 12%, transparent);
  transition: transform .15s;
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.is-active {
  box-shadow: 0 0 0 2px var(--el-bg-color-overlay), 0 0 0 4px var(--el-color-primary);
}
.layout-user {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  border-radius: 4px; padding: 3px 6px; margin: -3px -6px; transition: background-color .2s;
}
.layout-user:hover { background: var(--el-fill-color-light); }
.layout-user:focus, .layout-user:focus-visible { outline: none; }
.layout-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--app-primary);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--app-primary) 30%, transparent);
  color: var(--el-color-white); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.layout-user:hover .layout-avatar { transform: scale(1.1); box-shadow: 0 2px 8px color-mix(in srgb, var(--app-primary) 45%, transparent); }
.layout-user__name { font-size: 13px; color: var(--el-text-color-primary); }

/* 页签栏（tabnav）：暖白底 + 渐隐发丝线分区，页签垂直居中 */
.tabnav { position: relative; display: flex; align-items: center; height: 40px; background: var(--app-warm);
  padding: 0 var(--page-padding, 15px); flex-shrink: 0; }
.tabnav-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; display: flex; align-items: center; gap: 6px; }
.tabnav-scroll::-webkit-scrollbar { height: 4px; }
.tabnav-scroll::-webkit-scrollbar-thumb { border-radius: 2px; background: color-mix(in srgb, var(--app-muted) 40%, transparent); }
/* 非激活页签：米绿底 + 常规描边（不用白底加重描边，也不用无框纯文字） */
.tabnav-item {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 4px; background: var(--app-cream);
  color: var(--el-text-color-regular); font-size: 12px; line-height: 1;
  cursor: pointer; user-select: none; white-space: nowrap; flex: none;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
/* 非激活页签悬停：不铺底色/不投影（反馈：悬浮观感像阴影），只提字色 */
.tabnav-item:hover { background: transparent; color: var(--el-color-primary); }
/* 激活页签：与菜单选中同款选中实底白字 */
.tabnav-item.is-active { color: #fff; background: var(--app-active-solid); font-weight: 600; box-shadow: var(--app-active-shadow); }
.tabnav-item__icon { font-size: 13px; flex: none; }
.tabnav-item__title { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tabnav-item__close {
  font-size: 13px; border-radius: 50%; padding: 1px; flex: none; display: inline-flex;
  transition: transform .2s ease, color .15s, background-color .15s;
}
.tabnav-item__close:hover { color: var(--el-color-white); background: var(--el-color-danger); transform: rotate(90deg); }
.tabnav-actions { display: flex; align-items: center; gap: 8px; padding-left: 12px; flex: none; }
.tabnav-action {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--el-border-color-lighter);
  background: var(--el-bg-color); display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--el-text-color-regular); cursor: pointer;
}
.tabnav-action:hover { color: var(--el-color-primary); border-color: var(--el-color-primary-light-5); }

/* 内容区：滚动移到内层 layout-scroll，外层 overflow hidden */
.layout-main { padding: 0; position: relative; overflow: hidden; }
.layout-scroll {
  height: 100%; overflow: auto; box-sizing: border-box;
  padding: var(--page-padding, 15px);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--app-muted) 40%, transparent) transparent;
}
.layout-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.layout-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: color-mix(in srgb, var(--app-muted) 40%, transparent); }
.layout-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--app-muted) 60%, transparent); }
.layout-scroll::-webkit-scrollbar-track { background: transparent; }

/* 路由切换过渡：淡入 + 轻微上移 */
.page-enter-active, .page-leave-active { transition: opacity .14s ease, transform .14s ease; }
.page-enter-from { opacity: 0; transform: translateY(8px); }
.page-leave-to { opacity: 0; transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .page-enter-active, .page-leave-active { transition: none; }
}

/* 布局壳首屏入场编排：登录页同款错峰 rise（KeepAlive 下仅首次挂载播放一次） */
@media (prefers-reduced-motion: no-preference) {
  .layout-logo, .layout-aside .el-menu, .layout-aside__footer,
  .layout-header .layout-crumb, .layout-header .layout-actions, .tabnav {
    animation: app-rise .5s cubic-bezier(.2, .8, .2, 1) backwards;
  }
  .layout-logo { animation-delay: .05s; }
  .layout-header .layout-crumb { animation-delay: .08s; }
  .layout-aside .el-menu { animation-delay: .1s; }
  .layout-header .layout-actions { animation-delay: .14s; }
  .layout-aside__footer { animation-delay: .16s; }
  .tabnav { animation-delay: .18s; }
}
@keyframes app-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 跨页通用小件 ---------- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.page-actions { margin-bottom: 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* flex 子元素允许收缩：长 mono 路径等宽内容不把工具条撑出横向溢出 */
.page-actions > *, .toolbar > * { min-width: 0; }
.secret-alert { margin-bottom: 12px; }
.warn { color: var(--el-color-danger); }
.cfg-hint { margin-left: 10px; font-size: 12px; color: var(--el-text-color-placeholder); line-height: 1.5; }
/* 等高行卡片：列跟随行高（dashboard/profile 等左右布局页共用） */
.eq-row.grow > .el-col { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.eq-row { align-items: stretch; }
.eq-row > .el-col { display: flex; min-height: 0; }
.eq-row > .el-col > .el-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.eq-row > .el-col > .el-card > .el-card__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 卡片头内的 ledger-header 标题行：与下方工具条留距 + 底部分隔线（与 data-list 页头同款） */
.el-card__header > .ledger-header { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--el-border-color-lighter); }

/* ---------- 右键菜单（layout 页签 / 文件管理等共用） ---------- */
.ctx-menu { position: fixed; z-index: 3000; background: var(--app-card); border: 1px solid var(--app-line);
  border-radius: 8px; box-shadow: 0 6px 22px color-mix(in srgb, var(--app-ink) 14%, transparent); padding: 5px; min-width: 150px;
  animation: ctx-in .1s ease-out; }
@keyframes ctx-in { from { opacity: 0; transform: scale(.97) translateY(-2px); } to { opacity: 1; } }
.ctx-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px;
  color: var(--el-text-color-primary); border-radius: 5px; cursor: pointer; }
.ctx-item:hover { background: var(--el-color-primary-light-9); color: var(--el-color-primary); }
.ctx-item .el-icon { font-size: 14px; color: var(--el-text-color-secondary); }
.ctx-item:hover .el-icon { color: var(--el-color-primary); }
.ctx-item.danger { color: var(--el-color-danger); }
.ctx-item.danger .el-icon { color: var(--el-color-danger); }
.ctx-item.danger:hover { background: var(--el-color-danger-light-9, #fef0f0); }
.ctx-divider { height: 1px; background: var(--el-border-color-lighter); margin: 4px 8px; }

/* 全局按钮间隔收紧：EP 默认 .el-button + .el-button margin-left:12px 太宽（操作列多按钮放不下），统一 3px */
.el-button + .el-button { margin-left: 3px; }

/* 全局 small 按钮左右 padding 收紧（EP 默认 11px）：操作列等密集场景不至于过宽 */
.el-button--small { padding: 5px 5px; }

/* 全局抽屉头部下边距收紧：EP 默认约 22px 过大（header 与 body 内容脱节），统一 10px */
.el-drawer__header { margin-bottom: 10px; }