/* ============================================================
   星晟大数据管理系统 v5.0 - 公共零件层样式（ui.css）

   ⛔ 这是什么
   全站**唯一**的「卡片」与「页签」外观定义处。
   和 js 那边的 `static/js/core/ui.js`（弹窗/提示/分页）配套 ——
   js 管行为，本文件管长相。

   ⛔ 铁律（2026-09-14 系统统一化·第 4 批「收卡片 / Tab」确立）
   1. 颜色只许写 `var(--xxx)`，变量唯一定义处 = `static/css/tokens.css`。
   2. 新页面要卡片就用 `.ui-card`，要页签就用 `.ui-tabs` + `.ui-tab`，
      **不要再新写一套** `xxx-card` / `xxx-tab-btn`。
   3. **老类名一律保留做别名**（见下方选择器列表）——
      老页面一行都不用改，外观自动跟统一的走。这就是「随时停、能回滚」。

   ⛔ 本批（09-14）统一了哪些
   - 卡片（10 套 → 1 套外观）：
     `.ui-card` / Bootstrap `.card` / `.wh-card`（仓库）/ `.archive-card`（档案）
     / `.kb-card`（知识库）；
     再加所有「基于 Bootstrap `.card` 的变体」（`.stock-card` / `.stat-kpi-card`
     / `.person-card` / `.advance-person-card` / `.history-month-card`）自动跟着走；
     `.kpi-card` / `.chart-card` / `.login-card` 属**专用卡片**（各自有独特排版），
     本批不动它们内部，只保证它们和统一卡片"看着是一家人"。
   - 页签（7 套 → 1 套外观）：
     自造按钮页签 `.records-tab-btn` / `.archive-tab-btn` / `.stock-detail-tab-btn`
     （库存详情），与 Bootstrap 的 `.nav-tabs`（设置 / 工资 / 库存详情 4 处）
     **统一成同一种"药丸"样式**。
     ⛔ 2026-09-14 系统统一化·第 6 批：`.warehouse-tab-btn` 已删 —— 它属"仓库页第二套
     旧实现"（`switchWarehouseTab` / `loadWarehouseCards`），那套已整段不可达；
     `.warehouse-detail-tab-btn` 随模块改名对齐成 `.stock-detail-tab-btn`
     —— 菜单名 = 页面 key = 后端模块名 = `stock`。

   ⛔ 给后来 AI 的接手须知
   - 本文件必须**在 bootstrap.min.css 之后**加载（要盖住 Bootstrap 的 `.nav-tabs` 默认样式）。
     模板里放在 `knowledge.css` 之后即可。
   - 卡片网格（`.card-grid` / `.archive-card-grid` / `.kb-cards` 的列数与间距）
     **本批没动** —— 它们带 `@media` 响应式规则，改选择器顺序会把移动端断点搞坏，
     留到后续批次单独处理。
   - `.ui-card-hover`（悬停抬起）只给"可点击的卡片"用；
     Bootstrap 的 `.shadow-sm` 带 `!important`，会盖掉悬停阴影，故 `.stock-card` 不参与抬起。
   ============================================================ */

/* ==================== 一、卡片（统一外观） ==================== */
/* 统一的是"容器外观"：底色 / 边框 / 圆角 / 阴影 / 文字色。
   内部排版（头部、统计格、操作按钮…）仍由各家自己的子元素规则负责。 */
.ui-card,
.card,
.wh-card,
.archive-card,
.kb-card {
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    color: var(--text-primary);
}

/* 自带内边距的卡片（Bootstrap `.card` 靠 `.card-body` 撑，不在此列，避免双重内边距） */
.ui-card,
.wh-card,
.archive-card,
.kb-card {
    padding: var(--s-3);
}

/* 卡片的"零件"（新页面按这个结构写） */
.ui-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.ui-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.ui-card-body { color: var(--text-secondary); }
.ui-card-foot {
    margin-top: auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* 悬停抬起：只给"点了会跳转/打开详情"的卡片 */
.ui-card-hover:hover,
.wh-card:hover,
.archive-card:hover,
.kb-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: var(--primary-light);
}

/* ==================== 二、页签（统一外观） ==================== */
/* 统一成同一种"药丸"页签：外层一条浅色底板，里面若干圆角按钮，选中填主色。 */
.ui-tabs,
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 6px;
    box-shadow: var(--sh-1);
}
/* Bootstrap 的 `<li class="nav-item">` 自带负外边距，药丸排法用不上，归零 */
.nav-tabs .nav-item { margin-bottom: 0; }

.ui-tab,
.nav-tabs .nav-link {
    padding: 8px 16px;
    margin: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--f-md);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.ui-tab:hover,
.nav-tabs .nav-link:hover {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: var(--primary-light);
}
.ui-tab.active,
.nav-tabs .nav-link.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
/* 按钮类页签的默认字体（`<button>` 不继承 body 字体） */
.ui-tab,
.records-tab-btn,
.archive-tab-btn,
.stock-detail-tab-btn {
    font-family: inherit;
}

/* ==================== 时间线（工资配置历史）==================== */
/* ⛔ 2026-09-16 补：`salary-pages.js` 的「历史配置记录」子页签一直在输出
   `.timeline` / `.timeline-item` / `.timeline-marker` / `.timeline-content` 这四个类名，
   但**全项目 CSS 里一个都搜不到** ⇒ 那段时间线其实完全没有样式（裸文字堆在一起）。
   这里补齐，颜色全部走设计变量，不写硬编码色。 */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border-light);
}
.timeline-item { position: relative; margin-bottom: 14px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-marker {
    position: absolute;
    left: -26px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border-strong);
}
.timeline-item.timeline-current .timeline-marker {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}
.timeline-content {
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 10px 14px;
}
.timeline-item.timeline-current .timeline-content { border-color: var(--primary-light); }

/* ==================== 档案智能选择下拉（录入表单）—— 六类档案统一三列 ==================== */
.ss-dropdown {
    width: 100%;
    max-height: 200px;
    border: 1px solid var(--border-subtle);
}
.ss-dropdown.ss-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 582px;
    max-width: calc(100vw - 24px);
    max-height: 300px;
}
.ss-dropdown.ss-flip { left: auto; right: 0; }
.ss-dropdown > li {
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ss-dropdown > li:last-child { border-bottom: 0; }
.ss-dropdown > li.ss-full { grid-column: 1 / -1; }

/* 窄屏（手机）自动退回单列，避免挤成一团 */
@media (max-width: 700px) {
    .ss-dropdown.ss-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-height: 200px;
    }
}


/* ============================================================
   KPI 数字卡片（统一外观）· 2026-10-03

   ⛔ **全站 KPI 数字卡片唯一的外观来源** —— 同时管两处：
     · 统计分析页：`stat-kpi-card`（竖排：数字在上、说明在下）
     · 仪表盘：`kpi-tile`（横排：左边图标、右边数字+说明）
   统一的是**视觉语言**（圆角 / 阴影 / 悬停 / 顶部色条 / 字号），
   **排布各页可以不同** —— 这正是「看着是一家人，但各干各的活」。

   沿革：09-14 第 3 批先把统计页 25 处内联按原值搬成类（外观没动）；
        同日梓晨看过「统一前后对照预览图」后拍板「换，你的更好看」
        ⇒ 本次把统计页与仪表盘统一到这一套。
        （仪表盘原来用 `.card border-0 shadow-sm`：圆角也是 16，但**没有悬停、没有顶部色条**，
          阴影走 Bootstrap 的 `.shadow-sm`，和统计页那套不是一回事。）

   ⛔ 改这里 = 改全站 KPI 卡片长相，动之前先想清楚。
   ============================================================ */
.kpi-tile,
.stat-kpi-card {
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(8, 145, 178, 0.06);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
    text-align: left;
}
/* ⛔ 内边距两套不同，**故意分开写**：
   · 仪表盘的 `.kpi-tile` 里面套着 Bootstrap `.card-body`（自带内边距）⇒ 这里必须为 0，
     否则会变成「双重留白」（实测会多出 16~20px）。
   · 统计页的 `.stat-kpi-card` 是光板卡片、没有 card-body ⇒ 内边距由它自己给。 */
.kpi-tile { padding: 0; }
.stat-kpi-card { padding: 16px 20px; }
/* 顶部 3px 色条：统一用 ::before（不占盒模型，两套同机制） */
.kpi-tile::before,
.stat-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: var(--primary);
}
.kpi-tile:hover,
.stat-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(8, 145, 178, 0.12);
}

/* 颜色修饰 —— 两套卡片共用同一组名字（c-xxx），改色只改这里 */
.kpi-tile.c-primary::before, .stat-kpi-card.c-primary::before { background: var(--primary); }
.kpi-tile.c-info::before,    .stat-kpi-card.c-info::before    { background: var(--info); }
.kpi-tile.c-green::before,   .stat-kpi-card.c-green::before   { background: var(--green); }
.kpi-tile.c-amber::before,   .stat-kpi-card.c-amber::before   { background: var(--amber); }
.kpi-tile.c-purple::before,  .stat-kpi-card.c-purple::before  { background: var(--purple); }
.kpi-tile.c-pink::before,    .stat-kpi-card.c-pink::before    { background: var(--pink); }
.kpi-tile.c-red::before,     .stat-kpi-card.c-red::before     { background: var(--red); }

/* 统计页竖排用：数字 + 说明（仪表盘用自己的内联结构，不依赖这两个类） */
.stat-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.stat-kpi-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* 统计页 KPI 一排的网格 */
.stats-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
/* 图表卡片：统计页 4 个图表外面那层 .card 的额外外观 */
.stat-card {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* 图表容器高度（改前 4 处都写死 300px） */
.chart-box { height: 300px; }