/* 全局样式：语义色、首屏、登录页背景、顶栏、多页签、内容区、主题抽屉。

   我们自己的面板、顶栏、页签一律走下面的语义色变量，不再写死颜色：
   亮 / 暗两套只要改变量值即可，避免「背景变了文字没变」导致整片内容隐形。
   暗色由 ThemeService 切 antd 官方 dark.css，同时给 <body> 加 erp-dark 触发覆盖值。
   主色直接读 AntDesign 的变量，抽屉里改主色时自定义类跟着一起变。 */
:root {
    --erp-surface: #ffffff;                     /* 面板、卡片、顶栏底色 */
    --erp-surface-alt: #fafafa;                 /* 表头、行悬停等次级底色 */
    --erp-layout-bg: #f5f6fa;                   /* 内容区底色 */
    --erp-border: #f0f0f0;                      /* 分割线 */
    --erp-border-strong: #d9d9d9;               /* 输入控件描边 */
    --erp-divider: rgba(0, 0, 0, 0.06);         /* 下拉内部分隔线 */
    --erp-text: rgba(0, 0, 0, 0.85);            /* 主文本 */
    --erp-text-secondary: rgba(0, 0, 0, 0.65);  /* 次文本 */
    --erp-text-tertiary: rgba(0, 0, 0, 0.45);   /* 弱化文本 */
    --erp-hover-bg: rgba(0, 0, 0, 0.04);        /* 悬停底色 */
    --erp-hover-bg-soft: rgba(0, 0, 0, 0.02);   /* 更弱的悬停底色 */
    --erp-primary: var(--ant-primary-color, #1677ff);
    --erp-tab-active-bg: rgba(22, 119, 255, 0.06); /* 激活页签的浅色底 */
    --erp-primary-bg: rgba(22, 119, 255, 0.08); /* 主色极浅底 */
    --erp-radius: 6px;
}

body.erp-dark {
    --erp-surface: #1f1f1f;
    --erp-surface-alt: #262626;
    --erp-layout-bg: #141414;
    --erp-border: #303030;
    --erp-border-strong: #434343;
    --erp-divider: rgba(255, 255, 255, 0.12);
    --erp-text: rgba(255, 255, 255, 0.88);
    --erp-text-secondary: rgba(255, 255, 255, 0.65);
    --erp-text-tertiary: rgba(255, 255, 255, 0.55);
    --erp-hover-bg: rgba(255, 255, 255, 0.08);
    --erp-hover-bg-soft: rgba(255, 255, 255, 0.04);
    --erp-tab-active-bg: rgba(22, 119, 255, 0.18);
    --erp-primary-bg: rgba(22, 119, 255, 0.22);
}

/* antd 的 dark.css 没有把「禁用态文字」与「危险色」调亮：
   亮色下的禁用文字是 0.3 白、危险文字是深红 #a61d24，放到 #141414 / #1f1f1f 上几乎看不见，
   操作列的「修改 / 删除」会整片糊掉。这里在暗色下单独提亮。 */
body.erp-dark .ant-btn[disabled],
body.erp-dark .ant-btn[disabled] > span {
    color: rgba(255, 255, 255, 0.55);
}

body.erp-dark .ant-btn-dangerous:not([disabled]),
body.erp-dark .ant-btn-dangerous:not([disabled]) > span,
body.erp-dark .ant-typography-danger {
    color: #ff7875;
}

body.erp-dark .ant-btn-dangerous:not([disabled]):hover,
body.erp-dark .ant-btn-dangerous:not([disabled]):hover > span {
    color: #ffa39e;
}

/* 占位文字与面包屑分隔符用的是 0.3 / 0.45 白，深底上同样偏暗。 */
body.erp-dark .ant-select-selection-placeholder,
body.erp-dark .ant-input::placeholder,
body.erp-dark .ant-input-number-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

body.erp-dark .ant-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.55);
}

/* Message / Notification 的底板是写死的白底黑字，暗色下会变成一块突兀的白条。 */
body.erp-dark .ant-message-notice-content,
body.erp-dark .ant-notification-notice {
    background: var(--erp-surface);
    color: var(--erp-text);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 首屏加载页 / 登录页：整屏磨砂背景（100% 视口铺满） ---------- */

/* 全屏底：作为模糊色斑与磨砂蒙版的定位容器。 */
.app-loading,
.login-page {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 启动加载页：底色「蓝（左上）→ 紫（右下）」。 */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #eef4ff 0%, #f7f8fc 48%, #f3f0ff 100%);
}

/* 登录页底色：与加载页互换，改为「紫（左上）→ 蓝（右下）」。 */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(135deg, #f3f0ff 0%, #f8f7fd 48%, #eef4ff 100%);
}

/* 模糊色斑层：伪元素 + 多重径向渐变，绝对定位不参与弹性布局。
   径向渐变自带柔和边缘，无需再叠 filter: blur。 */
.app-loading::before,
.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 加载页色斑：左上蓝、右下紫。rgba 收尾避免 Safari 把 transparent 插值成灰色。 */
.app-loading::before {
    background:
        radial-gradient(620px 620px at 6% 0%, rgba(91, 140, 255, 0.5), rgba(91, 140, 255, 0) 68%),
        radial-gradient(700px 700px at 98% 104%, rgba(169, 140, 255, 0.5), rgba(169, 140, 255, 0) 68%);
}

/* 登录页色斑：左上紫、右下蓝，与加载页互为镜像。 */
.login-page::before {
    background:
        radial-gradient(620px 620px at 6% 0%, rgba(169, 140, 255, 0.5), rgba(169, 140, 255, 0) 68%),
        radial-gradient(700px 700px at 98% 104%, rgba(91, 140, 255, 0.5), rgba(91, 140, 255, 0) 68%);
}

/* 底部现代磨砂蒙版：backdrop-filter 让下层色斑呈现毛玻璃质感。 */
.app-loading::after,
.login-page::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 38%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 55%, rgba(255, 255, 255, 0.72) 100%);
    backdrop-filter: blur(40px) saturate(160%);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    /* 顶部渐隐遮罩：让模糊强度平滑过渡，避免出现生硬分界线。 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}

.app-loading-body,
.app-loading-footer {
    position: relative;
    z-index: 2;
}

.app-loading-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-loading-title {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 16px;
}

/* Spin 提示文字与指示器之间的留白（index.html 静态骨架与 <Spin Tip> 共用）。 */
.app-loading-body .ant-spin-text {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.45);
}

/* 全局加载遮罩：AntDesign <Spin> + 自建全屏覆盖层（1.6.2 的 Spin 没有 FullScreen 参数）。 */
.erp-global-mask {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
}

body.erp-dark .erp-global-mask {
    background: rgba(0, 0, 0, 0.55);
}

.erp-global-mask .ant-spin-text {
    margin-top: 10px;
    font-size: 13px;
    color: var(--erp-text-secondary);
}

.app-loading-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    color: rgba(0, 0, 0, 0.45);
}

.app-loading-footer img {
    width: 24px;
    height: 24px;
}

/* 登录表单容器：置于色斑与磨砂蒙版之上，宽度自适应视口。 */
.login-box {
    position: relative;
    z-index: 2;
    width: min(400px, 100%);
}

/* ---------- 顶栏：左侧操作区 + 面包屑 ---------- */

.erp-header-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    min-width: 0;
    height: 100%;
}

/* 左侧操作区：固定宽度（不收缩），面包屑变长也不会挤动按钮。 */
.erp-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
}

.erp-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 16px;
    color: var(--erp-text);
    cursor: pointer;
    transition: color 0.2s;
}

.erp-header-action:hover {
    color: var(--ant-primary-color);
}

/* 面包屑：紧跟左侧操作区，超长时内部省略而不是换行。 */
.erp-breadcrumb {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

.erp-breadcrumb > ol {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.erp-breadcrumb > ol > li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.erp-breadcrumb .ant-breadcrumb-link,
.erp-breadcrumb .ant-breadcrumb-separator {
    white-space: nowrap;
}

/* 链路文字统一次要色（antd 链接默认主色，这里要「面包屑」观感）。 */
.erp-breadcrumb .ant-breadcrumb-link {
    color: var(--erp-text-secondary);
}

.erp-breadcrumb .ant-breadcrumb-link > a {
    color: inherit;
    transition: color 0.2s;
}

.erp-breadcrumb .ant-breadcrumb-link > a:hover {
    color: var(--ant-primary-color);
}

/* 当前页（末级）：加重并与可跳转层级区分；过长省略而不是换行。 */
.erp-breadcrumb > ol > li:last-child {
    min-width: 0;
    overflow: hidden;
}

.erp-breadcrumb > ol > li:last-child .ant-breadcrumb-link {
    overflow: hidden;
    color: var(--erp-text);
    font-weight: 500;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .erp-header-bar {
        gap: 8px;
    }

    .erp-header-actions {
        gap: 12px;
    }

    /* 窄屏隐藏首页面包屑，保留信息量更大的当前链路 */
    .erp-breadcrumb > ol > li:first-child {
        display: none;
    }
}

/* ---------- 顶栏：图标按钮与用户区 ---------- */

.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 6px;
    font-size: 16px;
    color: var(--erp-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.action:hover {
    background: var(--erp-hover-bg);
    color: var(--erp-primary);
}

/* 侧栏底部的折叠按钮：折叠入口已放在顶栏，隐藏避免重复。 */
.ant-pro-sider-collapsed-button {
    display: none;
}

.header-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--erp-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.header-action:hover {
    background: var(--erp-hover-bg);
    color: var(--erp-primary);
}

.header-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.header-user:hover {
    background: var(--erp-hover-bg);
}

.header-user-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
}

.header-user-name {
    max-width: 140px;
    overflow: hidden;
    font-size: 14px;
    color: var(--erp-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 用户下拉头部的资料卡与分隔线。 */
.user-card {
    padding: 2px 0;
}

.user-card-name {
    font-weight: 600;
    color: var(--erp-text);
}

.user-card-desc {
    font-size: 12px;
    color: var(--erp-text-tertiary);
}

.menu-divider {
    height: 1px;
    margin: 2px 0;
    background: var(--erp-divider);
}

/* 固定下拉宽度：保证整行用户名完整展示。 */
.erp-user-dropdown .ant-dropdown-menu {
    min-width: 240px;
}

.erp-user-dropdown .ant-dropdown-menu-item {
    padding: 6px 12px;
}

.erp-user-dropdown .user-card-name {
    max-width: none;
    white-space: nowrap;
}

/* ---------- 顶部固定多页签 ---------- */

/* 页签 + 内容区整体容器：负外边距抵消 ProLayout 内容区默认的 24px 外边距，使页签栏贴顶满宽。 */
.erp-page-wrap {
    margin: -24px;
}

/* 页签栏：白底 + 底部 1px 分隔线，扁平无阴影。
   用 stretch 让页签撑满栏高，使激活指示条能贴在栏底分隔线上。 */
.erp-tabs-bar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
}

/* 页签列表：超出宽度时横向滚动，不换行。 */
.erp-tabs-list {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.erp-tabs-list::-webkit-scrollbar {
    height: 0;
}

/* 单个页签：扁平化——无边框、无圆角、无实心填充，状态只靠文字色与底部指示条表达。 */
.erp-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 100%;
    padding: 0 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    color: var(--erp-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s, background-color 0.2s;
}

.erp-tab:hover {
    color: var(--erp-primary);
    background: var(--erp-hover-bg-soft);
}

/* 底部指示条：默认透明，激活时显示。 */
.erp-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--erp-primary);
    opacity: 0;
    transition: opacity 0.2s;
}

.erp-tab-active {
    color: var(--erp-primary);
    background: var(--erp-tab-active-bg);
}

.erp-tab-active::after {
    opacity: 1;
}

.erp-tab-title {
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 页签关闭图标：默认弱化，悬停页签时提亮。 */
.erp-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 10px;
    color: var(--erp-text-tertiary);
    opacity: 0.45;
    transition: opacity 0.2s, color 0.2s;
}

.erp-tab:hover .erp-tab-close {
    opacity: 1;
}

.erp-tab-close:hover {
    color: #ff4d4f;
}

/* 用户手工固定的页签：标题前的小图钉，顺带解释它为什么没有关闭按钮。 */
.erp-tab-pin {
    flex: none;
    font-size: 11px;
    color: var(--erp-text-tertiary);
}

.erp-tab-active .erp-tab-pin {
    color: var(--erp-primary);
}

/* 「更多」入口：扁平方形，悬停浅灰底。 */
.erp-tabs-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    align-self: center;
    width: 28px;
    height: 28px;
    margin: 2px 0;
    font-size: 14px;
    line-height: 1;
    color: var(--erp-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.erp-tabs-more > .anticon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.erp-tabs-more:hover {
    background: var(--erp-hover-bg);
    color: var(--erp-primary);
}

/* 每个页签外面套了一层 antd 的右键触发器 div（.ant-dropdown-trigger）：
   让包装层也撑满栏高且不参与收缩，否则页签一多会被压扁而不是横向滚动。 */
.erp-tabs-bar .ant-dropdown-trigger {
    display: flex;
    align-items: center;
    flex: none;
}

/* 页签右键菜单与「更多」菜单：antd 下拉菜单项默认不是 flex，图标会紧贴文字。 */
.erp-tab-menu .ant-dropdown-menu-item,
.erp-tabs-more-menu .ant-dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.erp-tabs-more-menu {
    min-width: 180px;
    max-height: 360px;
    overflow-y: auto;
}

.erp-tabs-more-title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- 内容区 ---------- */

/* 高度由 JS 在首次渲染时计算一次并写死；四周统一 5px 内边距。 */
.erp-page-body {
    padding: 5px;
    overflow: auto;
    background: var(--erp-layout-bg);
}

/* 清零 ProLayout 自带的页容器外边距（含 -24px 负外边距）与内容子容器的 24px 外边距，
   保证页面内容距窗口边缘就是 .erp-page-body 的 5px。
   必须用后代选择器：children-content 并不是 page-container 的直接子级。 */
#erp-page-body .ant-pro-page-container,
#erp-page-body .ant-pro-page-container-children-content {
    margin: 0;
}

/* 页面标题已由顶部多页签统一展示，隐藏 PageContainer 自带页头，避免与页签标题重复。 */
.erp-page-body .ant-pro-page-container-warp {
    display: none;
}

/* 页脚整体移除：同时屏蔽 ProLayout 未传 FooterRender 时回退的默认页脚。 */
.ant-pro-global-footer {
    display: none;
}

/* ProLayout 顶栏底色写死白色：整站暗色时官方 dark.css 会把文字转成浅色，
   白底 + 浅色文字 = 顶栏按钮与用户名全部隐形，这里改成跟随语义色反转。 */
.ant-pro-global-header {
    background: var(--erp-surface);
}

/* 混合布局的顶栏本身是深色，文字与图标必须反白。 */
.ant-pro-global-header-layout-mix {
    background-color: #001529;
}

.ant-pro-global-header-layout-mix .action,
.ant-pro-global-header-layout-mix .header-action,
.ant-pro-global-header-layout-mix .header-user-name {
    color: rgba(255, 255, 255, 0.85);
}

.ant-pro-global-header-layout-mix .action:hover,
.ant-pro-global-header-layout-mix .header-action:hover,
.ant-pro-global-header-layout-mix .header-user:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- 登录页 ---------- */

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.login-brand-logo {
    width: 48px;
    height: 48px;
}

.login-brand-title {
    font-size: 22px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
}

.login-brand-desc {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.45);
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
}

.login-remember-text {
    margin-left: 8px;
    color: var(--erp-text-secondary);
}

.login-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    /* 给固定在视口底部的页脚留出空间，避免两者在矮屏上叠在一起 */
    margin-bottom: 64px;
    color: rgba(0, 0, 0, 0.45);
}

.login-more span {
    cursor: pointer;
}

.login-footer {
    /* 钉在视口底部，体现 100% 全屏布局；置于磨砂蒙版之上。 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
}

.login-footer-copy {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.45);
}

.login-footer-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.3);
}

/* ---------- 主题设置抽屉 ---------- */

.erp-setting {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.erp-setting-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--erp-text-secondary);
    font-size: 12px;
    background: var(--erp-layout-bg);
    border-radius: 6px;
}

.erp-setting-title {
    margin-bottom: 10px;
    color: var(--erp-text);
    font-size: 14px;
}

.erp-thumb-list {
    display: flex;
    gap: 12px;
}

.erp-thumb {
    cursor: pointer;
}

/* 缩略图画布：用渐变画出「侧栏 / 顶栏」的位置，一眼看出布局差异。 */
.erp-thumb-preview {
    position: relative;
    width: 64px;
    height: 46px;
    overflow: hidden;
    background-color: var(--erp-surface);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    --erp-sider: #d9d9d9;
    --erp-top: #d9d9d9;
}

.erp-thumb-side {
    background-image: linear-gradient(to right, var(--erp-sider) 0 16px, var(--erp-surface) 16px);
}

.erp-thumb-mix {
    background-image:
        linear-gradient(to bottom, var(--erp-top) 0 14px, transparent 14px),
        linear-gradient(to right, var(--erp-sider) 0 16px, var(--erp-surface) 16px);
}

.erp-thumb-dark {
    --erp-sider: #001529;
    --erp-top: #001529;
}

.erp-thumb-active .erp-thumb-preview {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--erp-primary);
}

.erp-thumb-check {
    position: absolute;
    top: 3px;
    right: 4px;
    color: var(--erp-primary);
    font-size: 13px;
}

.erp-thumb-label {
    margin-top: 6px;
    color: var(--erp-text-secondary);
    font-size: 12px;
    text-align: center;
}

.erp-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.erp-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 22px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.erp-color-active {
    box-shadow: 0 0 0 2px var(--erp-surface), 0 0 0 3px var(--erp-primary);
}

.erp-setting-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erp-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--erp-text);
}

/* ---------- 菜单搜索 ---------- */

.erp-menu-search {
    cursor: pointer;
}

.erp-menu-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- 工具栏 ---------- */

.erp-page-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--erp-surface);
    padding-bottom: 8px;
}

.erp-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.erp-toolbar-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.erp-toolbar-keyword {
    width: 260px;
}

.erp-toolbar-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
}

.erp-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--erp-text-secondary);
}

.erp-toolbar-field-actions {
    display: flex;
    gap: 8px;
}

.erp-toolbar-selected {
    color: var(--erp-text-tertiary);
    font-size: 13px;
}

/* ---------- 表单与表格 ---------- */

.erp-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erp-form-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.erp-form-item > label {
    font-size: 13px;
    color: var(--erp-text-secondary);
}

.erp-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.erp-pager {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
}

.erp-antd-table .ant-table-thead > tr > th {
    background: var(--erp-surface-alt);
}

/* 表格容器：撑满页面容器，滚动条留在表格体内，表头固定。
   关键点：从 .ant-table-wrapper 到 .ant-table-body 每一层都要 flex + min-height:0，
   缺任何一层，flex 子项都会按内容高度撑开，表格就会溢出到页面容器外面。 */
.erp-table-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 240px;
}

/* 表格外还套了 spin 加载层（.ant-table-spin-wrapper → 匿名 div → .ant-spin-container），
   这几层默认不是 flex，高度链会断在「内容高度」上，必须逐层补齐才能把剩余高度传给表格体。 */
.erp-table-wrap > .ant-table-wrapper,
.erp-table-wrap .ant-table-spin-wrapper,
.erp-table-wrap .ant-table-spin-wrapper > div,
.erp-table-wrap .ant-spin-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.erp-table-wrap .ant-table {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.erp-table-wrap .ant-table-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.erp-table-wrap .ant-table-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.erp-table-wrap .erp-pager {
    flex: none;
}

.erp-content-card {
    background: var(--erp-surface);
    border-radius: var(--erp-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 100%;
}

/* 卡片内除表格外的部分（搜索工具栏等）按内容高度，剩下的全给表格，
   表格才能在卡片内滚动而不是把卡片撑高溢出页面容器。 */
.erp-content-card > *:not(.erp-table-wrap) {
    flex: none;
}

.erp-content-card > .erp-table-wrap {
    flex: 1;
    min-height: 0;
}

/* 表格头部条：左侧 HeaderStart（如类别路径面包屑）+ 右上角「列设置」齿轮，同一行两端对齐 */
.erp-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 2px 0 6px;
}

.erp-table-head-start {
    flex: 1;
    min-width: 0;
}

/* 列设置浮层：显示 / 列名 / 宽度(px) / 对齐 的可编辑表格。
   注意：antd 的 .ant-dropdown 容器只有定位，背景/内边距/圆角只在 .ant-dropdown-menu 上，
   我们塞的是自定义 div，必须自己补面板底色，否则浮层透明、表格内容会从下面透出来。 */
.erp-col-settings {
    padding: 2px 0;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

body.erp-dark .erp-col-settings {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.erp-col-settings-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
}

.erp-col-settings-table th,
.erp-col-settings-table td {
    padding: 5px 10px;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--erp-border);
}

.erp-col-settings-table thead th {
    color: var(--erp-text-secondary);
    font-weight: 500;
    background: var(--erp-surface-alt);
    white-space: nowrap;
}

.erp-col-settings-table tbody tr:last-child td {
    border-bottom: none;
}

.erp-col-settings-table tbody tr.erp-col-dragging {
    opacity: 0.45;
}

/* 拖拽手柄：6 点阵列（纯 CSS 绘制，不依赖图标资源） */
.erp-col-settings-table .erp-col-drag-cell {
    width: 28px;
    text-align: center;
}

.erp-col-drag {
    display: inline-block;
    width: 12px;
    height: 16px;
    cursor: move;
    background-image: radial-gradient(var(--erp-text-tertiary) 1.4px, transparent 1.5px);
    background-size: 6px 6px;
    background-repeat: repeat;
}

.erp-col-settings-table .erp-col-visible {
    width: 56px;
    text-align: center;
}

.erp-col-settings-table .erp-col-title {
    min-width: 120px;
    color: var(--erp-text);
}

.erp-col-settings-table .erp-col-width {
    width: 96px;
}

.erp-col-settings-table .erp-col-align {
    width: 104px;
}

/* antd 默认 .ant-checkbox-wrapper{align-items:baseline} 且 .ant-checkbox{top:0.2em}，
   勾选框与文字会错位，这里改成垂直居中并清零偏移。 */
.erp-col-settings .ant-checkbox-wrapper {
    align-items: center;
}

.erp-col-settings .ant-checkbox {
    top: 0;
}

/* 行内操作：默认隐藏，悬停行时淡入（对齐标准设计的内联图标操作） */
.erp-row-actions {
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.erp-antd-table tbody tr:hover .erp-row-actions {
    opacity: 1;
}

/* 左侧类别面板头部：标题 + 搜索/新增图标按钮 */
/* 类别树面板：标题独占一行（下方分割线）+ 搜索框/放大镜/新增 挤在一行（标准设计） */
.erp-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--erp-border);
}

.erp-cat-title {
    font-size: 15px;
    font-weight: 600;
}

.erp-cat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.erp-cat-search-box {
    flex: 1;
    min-width: 0;
}

.erp-cat-search-box .ant-input-affix-wrapper,
.erp-cat-search-box .ant-input {
    width: 100%;
}

/* 表格头部左侧（ErpTable HeaderStart）显示「全部 / 一级 / 二级」类别路径，无底色、与右上角列设置齿轮同一行。
   上半部分是可点击的上级（回退筛选），末级是当前节点（不可点）。 */
.erp-cat-path {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 13px;
}

.erp-cat-path .ant-breadcrumb {
    font-size: 13px;
}

.erp-cat-path .ant-breadcrumb-link {
    color: var(--erp-primary);
    cursor: pointer;
}

.erp-cat-path .ant-breadcrumb-link:hover {
    opacity: 0.8;
}

.erp-cat-path .erp-cat-path-current .ant-breadcrumb-link {
    color: var(--erp-text);
    cursor: default;
}

.erp-cat-path .erp-cat-path-current .ant-breadcrumb-link:hover {
    opacity: 1;
}

/* 类别树（antd Tree）：整行可选中 + 悬停显示行内操作 */
.erp-cat-tree.ant-tree,
.erp-cat-tree .ant-tree-list,
.erp-cat-tree .ant-tree-node-content-wrapper {
    width: 100%;
}

.erp-cat-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.erp-cat-tree .erp-cat-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-cat-tree .ant-tree-treenode:hover .erp-row-actions,
.erp-cat-tree .ant-tree-treenode-selected .erp-row-actions {
    opacity: 1;
}

/* 左侧「客户 / 供应商」列表（价格维护页）：可点击选中行 */
.erp-party-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--erp-radius);
    cursor: pointer;
    transition: background 0.15s ease;
}

.erp-party-item:hover {
    background: var(--erp-surface-alt);
}

.erp-party-item-active,
.erp-party-item-active:hover {
    background: var(--erp-primary-weak, #e6f4ff);
}

.erp-party-item-name {
    font-size: 14px;
    color: var(--erp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-party-item-code {
    font-size: 12px;
    color: var(--erp-text-tertiary);
}

/* ---------- 滚动条 ---------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- 未处理异常提示条 ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: #ffe58f;
    z-index: 1000;
}