/* ============================================================
   ZG-ERP 视觉风格覆盖层  (Navy Blue / Indigo 主题)
   ------------------------------------------------------------
   写法：只在 layout/header.html 的原有 <style> 之后挂一个 <link>，
   不改动任何业务模板 DOM。撤销 = 删掉那一行 <link>。
   版本：v=20260927G（改样式必须 bump 版本号，否则浏览器缓存不生效）
   ============================================================ */

/* ===== 0. 字体：思源黑体 Noto Sans SC =====
   src 里先 local() 再 url()：装了思源就用本机字体（零网络开销），
   没装才从 CDN 拉中文字体子集，保证任何一台电脑都不掉字。 */
@font-face {
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Noto Sans SC"), local("Source Han Sans SC"), local("Source Han Sans CN"),
         local("Noto Sans CJK SC"), local("思源黑体"),
         url("https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.2.5/files/noto-sans-sc-chinese-simplified-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local("Noto Sans SC Medium"), local("Source Han Sans SC Medium"), local("思源黑体 Medium"),
         url("https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.2.5/files/noto-sans-sc-chinese-simplified-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Noto Sans SC Bold"), local("Source Han Sans SC Bold"), local("思源黑体 Bold"),
         url("https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.2.5/files/noto-sans-sc-chinese-simplified-700-normal.woff2") format("woff2");
}

/* ===== 1. 设计令牌（覆盖 header.html 里的 :root） ===== */
:root {
    /* 思源黑体优先，逐级回退 */
    --font-sans: "Noto Sans SC", "Source Han Sans SC", "Source Han Sans CN", "Noto Sans CJK SC",
                 "思源黑体", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* 主色：蓝紫 Indigo-Blue */
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: #DBE7FE;
    --primary-fg: #1D4ED8;
    --primary-50: #EFF4FF;

    /* 侧边栏：深海军蓝 */
    --sidebar-bg: #1E2A4E;
    --sidebar-fg: #B7C3E4;
    --sidebar-hover: #2A3A66;
    --sidebar-user-bg: #182242;
    --sidebar-group: #6C7BA6;
    --sidebar-width: 232px;

    /* 语义色 */
    --success: #059669;      --success-bg: #DCF5EA;
    --warning: #D97706;      --warning-bg: #FDE8C8;
    --danger:  #DC2626;      --danger-bg:  #FEE2E2;
    --info:    #2563EB;      --info-bg:    #DBE7FE;
    --running: #7C3AED;      --running-bg: #EDE7FE;   /* 执行中 */
    --ship:    #F97316;      --ship-bg:    #FFEADB;   /* 待发货 */
    --draft:   #64748B;      --draft-bg:   #F1F4F9;   /* 草稿 */

    /* 中性色 */
    --bg: #F6F8FC;
    --surface: #FFFFFF;
    --surface-2: #EEF1F7;
    --border: #E2E8F0;
    --muted: #64748B;
    --muted-2: #94A3B8;
    --text: #33415C;
    --title: #0F1E3D;

    /* 圆角 / 阴影 / 间距 */
    --r-ctrl: 8px;
    --r-btn: 9px;
    --r-card: 14px;
    --r-pill: 18px;
    --shadow-card: 0 1px 2px rgba(15,30,61,.04), 0 4px 16px rgba(15,30,61,.05);
    --shadow-pop: 0 10px 32px rgba(15,30,61,.12);
    --gap: 16px;
}

/* ===== 2. 全局排版 ===== */
* { box-sizing: border-box; }
/* Bootstrap 的字体变量一并接管，按钮/表单/下拉等才不会各自 fallback */
html { --bs-body-font-family: var(--font-sans); --bs-font-sans-serif: var(--font-sans); }

/* 用 html body 提高一级优先级：工作台等页面在 body 里又写了一次 body{background:#f5f7fa}，
   普通 body 选择器会被它盖掉 */
html body {
    background: var(--bg);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* 这些元素 Bootstrap 不走继承 or 模板写死过字体，逐个接管 */
.btn, input, select, textarea, button, optgroup,
.form-control, .form-select, .form-label, .input-group-text,
.modal, .modal-title, .dropdown-menu, .dropdown-item, .tooltip, .popover,
.table, .badge, .nav-link, .nav-tabs .nav-link, .alert, .page-link,
.pagination-info, .card-header, .wg-title {
    font-family: var(--font-sans);
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
h1, h2, h3, h4, h5 { color: var(--title); font-weight: 700; }
hr { border-color: var(--border); opacity: .6; }
code { font-size: 12.5px; color: #C2410C; background: #FFF7ED; padding: 2px 6px; border-radius: 4px; }

/* ===== 3. 侧边栏（深海军蓝） ===== */
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    border-right: none;
    box-shadow: 1px 0 0 rgba(255,255,255,.04);
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar .brand {
    height: 60px;
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: var(--sidebar-bg);
}
.sidebar .nav { padding: 12px 10px; }
.sidebar .nav-link {
    color: var(--sidebar-fg);
    padding: 9px 12px;
    border-radius: var(--r-btn);
    font-size: 13.5px;
    font-weight: 500;
    margin: 2px 0;
}
.sidebar .nav-link:hover { color: #FFFFFF; background: var(--sidebar-hover); }
/* 选中态：主色实心 + 图标文字同转白（顶层与二级必须一致）
   ⚠ 踩过的坑：原 header.html 里 `.sidebar .nav-link.sub.active { color:#1e293b }` 带 4 个类名，
   优先级高于 `.sidebar .nav-link.active`（3 个）。只写后者时，二级菜单选中会变成
   「蓝底 + 深蓝字 + 白图标」的花脸，顶层（工作台）却是白字 —— 两级不一致。
   所以这里把 `.sub.active` 一起显式列出来压掉它。 */
.sidebar .nav-link.active,
.sidebar .nav-link.sub.active {
    color: #FFFFFF;
    background: var(--primary);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(37,99,235,.32);
}
.sidebar .nav-link.active:hover,
.sidebar .nav-link.sub.active:hover { background: var(--primary-hover); color: #FFFFFF; }
.sidebar .nav-link i { color: #93B4FD; margin-right: 10px; width: 18px; text-align: center; font-size: 15px; }
.sidebar .nav-link.active i,
.sidebar .nav-link.sub.active i { color: #FFFFFF; }
/* 实心色块本身已是选中标识，原来那条 3px 左侧竖条在新样式下多余 */
.sidebar .nav-link.active::before,
.sidebar .nav-link.sub.active::before { display: none; }
.sidebar .nav-section {
    color: var(--sidebar-group);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 16px 12px 6px;
}
.sidebar .nav-section:hover { color: #B7C3E4; }
.sidebar .nav-section i { color: var(--sidebar-group); }
.sidebar .nav-link.sub { padding-left: 40px; font-size: 13px; }
.sidebar .user-block {
    background: var(--sidebar-user-bg);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 12px 16px;
}
.sidebar .user-block .avatar { background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); }
.sidebar .user-block .name { color: #FFFFFF; font-weight: 600; }
.sidebar .user-block .role { color: var(--sidebar-group); }

/* ===== 4. 顶栏 / 用户菜单 / 通知 / Toast ===== */
.topbar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(15,30,61,.03);
    height: 56px;
    padding: 0 24px;
}
.topbar input[type="text"] {
    height: 34px !important;
    width: 240px !important;
    padding: 0 12px 0 32px !important;
    border-radius: var(--r-pill) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    font-size: 13px !important;
    transition: all .15s;
}
.topbar input[type="text"]:focus {
    background: #FFFFFF !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
    outline: none;
}
.topbar > div > a[href="/notification"] { color: var(--muted) !important; transition: color .15s; }
.topbar > div > a[href="/notification"]:hover { color: var(--primary) !important; }
.topbar a[href="/notification"] span { background: var(--danger) !important; font-weight: 600; }
.topbar .dropdown > a > div:first-child {
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
    font-weight: 600;
}
.topbar .dropdown-menu { border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-pop); padding: 6px; }
.topbar .dropdown-item { font-size: 13px; border-radius: 8px; padding: 7px 12px; color: var(--text); }
.topbar .dropdown-item:hover { background: var(--primary-50); color: var(--primary-hover); }

/* Toast（原系统只有 class 没有样式，这里补齐） */
.toast-fixed {
    position: fixed;
    top: 16px; right: 24px;
    z-index: 1080;
    min-width: 260px;
    max-width: 380px;
    animation: zgToastIn .28s ease-out;
}
@keyframes zgToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.toast-fixed .alert { border-radius: 12px !important; border: none !important; box-shadow: var(--shadow-pop) !important; font-size: 13.5px; }
.toast-fixed .alert-success { background: var(--success-bg); color: #065F46; }
.toast-fixed .alert-danger { background: var(--danger-bg); color: #991B1B; }
#jsToast .alert { margin-bottom: 10px; box-shadow: var(--shadow-pop); border-radius: 12px; border: none; }

/* ===== 5. 卡片 / 页面容器 ===== */
.main-content { padding: 24px; }
.card {
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.card-header {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 15px;
    color: var(--title);
    border-bottom: 1px solid var(--border);
    background: transparent;
    border-radius: var(--r-card) var(--r-card) 0 0 !important;
}
.card-body { padding: 20px; }
.card-footer { background: transparent; border-top: 1px solid var(--border); padding: 14px 20px; }
.card-header.has-bar::before { background: var(--primary); height: 15px; }
.card-header.has-bar > i { color: var(--primary); }
.search-bar { border-radius: var(--r-card); border: 1px solid var(--border); background: #FFFFFF; padding: 16px 20px; box-shadow: var(--shadow-card); }

/* 页头 */
.page-head { margin-bottom: 20px; }
.page-title { font-size: 20px; font-weight: 700; color: var(--title); letter-spacing: -.01em; }
.page-subtitle { font-size: 13px; color: var(--muted); }
.section-title i { color: var(--primary); }

/* ===== 6. 统计卡 / 工作台 KPI ===== */
.stat-card,
body .kpi-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FBFF 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    transition: all .2s;
}
.stat-card:hover,
body .kpi-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15,30,61,.10); border-color: #93B4FD; }
.stat-card .stat-value,
body .kpi-value { color: var(--title); font-variant-numeric: tabular-nums; }
.stat-card .stat-icon { background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); color: #FFFFFF; border-radius: 12px; }
body .kpi-icon { border-radius: 12px; box-shadow: 0 4px 12px rgba(15,30,61,.14); }
body .kpi-label { color: var(--muted); }
body .ring::before { background: #FFFFFF; }
body .welcome-card {
    background: linear-gradient(120deg, #1E2A4E 0%, #2563EB 100%);
    border-radius: var(--r-card);
    box-shadow: 0 8px 24px rgba(30,42,78,.18);
}
body .welcome-card h3 { color: #FFFFFF; }
body .welcome-card .sub, body .welcome-card .tip { color: rgba(255,255,255,.72); }
body .fun-badge { background: rgba(255,255,255,.16); color: #FFFFFF; border: 1px solid rgba(255,255,255,.22); }
body .quick-btn {
    background: rgba(255,255,255,.14) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: var(--r-btn);
    font-weight: 600;
}
body .quick-btn:hover { background: #FFFFFF !important; color: var(--primary-hover) !important; box-shadow: 0 6px 16px rgba(15,30,61,.22); }
body .chart-card, body .info-card { border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
body .chart-title::before { background: var(--primary); }
body .chart-title, body .info-head .title { color: var(--title); }
body .info-head .more { color: var(--primary); }
body .badge-blue { background: var(--info-bg); color: var(--primary-hover); }
body .badge-green { background: var(--success-bg); color: #047857; }
body .badge-yellow { background: var(--warning-bg); color: #B45309; }
body .badge-red { background: var(--danger-bg); color: #B91C1C; }
body .badge-gray { background: var(--draft-bg); color: var(--muted); }

/* 统计条（列表页筛选联动） */
.stat-chip {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,30,61,.03);
}
a.stat-chip:hover { border-color: #93B4FD; box-shadow: 0 4px 14px rgba(37,99,235,.10); }
.stat-chip.active { border-color: var(--primary); background: var(--primary-50); }
.stat-chip .chip-icon.tone-blue { background: var(--info-bg); color: var(--primary-hover); }
.stat-chip .chip-icon.tone-green { background: var(--success-bg); color: #047857; }
.stat-chip .chip-icon.tone-amber { background: var(--warning-bg); color: #B45309; }
.stat-chip .chip-icon.tone-red { background: var(--danger-bg); color: #B91C1C; }
.stat-chip .chip-value { color: var(--title); }

/* ===== 7. 按钮 ===== */
.btn { border-radius: var(--r-btn); font-size: 13px; font-weight: 500; padding: 8px 16px; }
.btn-primary, .btn-success, .btn-info {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(37,99,235,.18);
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-info:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 4px 14px rgba(37,99,235,.26);
    color: #FFFFFF;
}
.btn-outline-secondary { border-color: var(--border); color: var(--text); background: #FFFFFF; }
.btn-outline-secondary:hover { background: var(--surface-2); border-color: #CBD5E1; color: var(--title); }
.btn-outline-primary { color: var(--primary); border-color: #93B4FD; }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #FFFFFF; }
.btn-secondary { background: var(--draft); border-color: var(--draft); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn-link { color: var(--primary); }
.btn-check:checked + .btn, .btn.active { background: var(--primary); border-color: var(--primary); }

/* ===== 8. 表单 / 筛选 ===== */
.form-label { font-size: 13px; color: var(--text); font-weight: 500; margin-bottom: 6px; }
.form-control, .form-select {
    border-radius: var(--r-ctrl);
    border: 1px solid var(--border);
    font-size: 13px;
    padding: 8px 12px;
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.form-control::placeholder { color: var(--muted-2); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.14); }
.input-group-text { border-radius: var(--r-ctrl); border-color: var(--border); background: var(--surface-2); color: var(--muted); font-size: 13px; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.nav-pills .nav-link { color: var(--muted); border-radius: var(--r-btn); font-size: 13px; font-weight: 500; }
.nav-pills .nav-link.active { background: var(--primary); color: #FFFFFF; }
.nav-tabs .nav-link { color: var(--muted); font-size: 13.5px; font-weight: 500; border-radius: 0; }
.nav-tabs .nav-link.active { color: var(--primary-hover); border-bottom: 2px solid var(--primary); font-weight: 600; }

/* ===== 9. 表格 ===== */
.table { font-size: 13.5px; }
.table > thead th,
.table thead th {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 16px;
    white-space: nowrap;
}
.table thead.table-light th { background: var(--surface-2) !important; }
.table td { padding: 13px 16px; border-color: #F1F5F9; vertical-align: middle; }
.table tbody tr:hover { background: var(--primary-50); transform: none; }
.table .badge { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-pill); }
.table .num, .table .mono { font-variant-numeric: tabular-nums; }
.table a.td-link:hover { color: var(--primary-hover); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--primary-50); }
.table-clean thead th { background: transparent !important; border-bottom: 1.5px solid var(--border) !important; }
.table-clean tbody tr:hover { background: var(--primary-50); }

/* ===== 10. 徽章 / 状态 ===== */
.badge { font-weight: 500; font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); }
.badge.bg-primary { background: var(--primary-light) !important; color: var(--primary-hover) !important; }
.badge.bg-success { background: var(--success-bg) !important; color: #047857 !important; }
.badge.bg-warning { background: var(--warning-bg) !important; color: #B45309 !important; }
.badge.bg-danger  { background: var(--danger-bg) !important; color: #B91C1C !important; }
.badge.bg-info    { background: var(--info-bg) !important; color: var(--primary-hover) !important; }
.badge.bg-secondary { background: var(--draft-bg) !important; color: var(--muted) !important; }
.badge.has-dot .dot { width: 6px; height: 6px; }
.bg-primary { background: var(--primary) !important; }
.bg-success { background: var(--success) !important; }
.bg-warning { background: var(--warning) !important; }
.bg-danger { background: var(--danger) !important; }
.bg-info { background: var(--info) !important; }
.text-primary { color: var(--primary) !important; }

/* 单据页头状态胶囊 */
.page-head-status { border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.page-head-status.st-amber { background: var(--warning-bg); color: #B45309; }
.page-head-status.st-green { background: var(--success-bg); color: #047857; }
.page-head-status.st-blue { background: var(--info-bg); color: var(--primary-hover); }
.page-head-status.st-red { background: var(--danger-bg); color: #B91C1C; }
.page-head-status.st-gray { background: var(--draft-bg); color: var(--muted); }
.doc-no { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; }

/* ===== 11. 分页 ===== */
.pagination-wrap, .pagination-wrapper {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 12px 20px;
    box-shadow: var(--shadow-card);
}
/* ⚠ 关键：ThinkPHP 的 Bootstrap 分页驱动吐出来的是「无类名」结构 ——
     <ul class="pagination"><li class="disabled"><span>上一页</span></li>
     <li class="active"><span>1</span></li><li><a href="...">2</a></li><li><a>下一页</a></li></ul>
     <li class="disabled"><span>共 12 条 / 2 页</span></li>   ← 多出来的兄弟节点，在 <ul> 外面
   既没有 .page-item 也没有 .page-link。只写 .page-link 会全部落空
   —— 这就是「分页没有分页按钮」的根因。所以直接以 li/a/span 为目标。 */
.pagination {
    display: flex; align-items: center; gap: 6px;
    list-style: none; padding: 0; margin: 0;
}
.pagination > li { display: flex; }
.pagination > li > a,
.pagination > li > span,
.pagination .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 9px;
    border: 1px solid var(--border); border-radius: var(--r-ctrl);
    background: #FFFFFF; color: var(--text);
    font-size: 13px; font-weight: 500; line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    font-variant-numeric: tabular-nums;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination .page-link:hover {
    border-color: var(--primary); color: var(--primary);
    background: var(--primary-50); text-decoration: none;
}
/* 当前页：品牌蓝实心 */
.pagination > li.active > span,
.pagination .page-item.active .page-link {
    background: var(--primary); border-color: var(--primary); color: #FFFFFF;
    font-weight: 600; box-shadow: 0 2px 8px rgba(37,99,235,.24);
}
/* 上一页 / 下一页：定宽方块（箭头由 zg-ui-enhance.js 换成图标，脚本没跑时留文字也不破版） */
.pagination > li > a.zg-pag-nav,
.pagination > li > span.zg-pag-nav { padding: 0; min-width: 28px; }
.zg-pag-arrow { font-size: 18px; line-height: 1; transform: translateY(-1px); }
/* 禁用态（上一页在第 1 页） */
.pagination > li.disabled > span {
    color: var(--muted-2); background: var(--surface-2);
    border-color: var(--border); cursor: not-allowed;
}
.pagination > li.disabled > a { color: var(--muted-2); }
/* 省略号 */
.pagination > li.zg-pag-dots > span {
    border-color: transparent; background: transparent; color: var(--muted-2); min-width: 20px; padding: 0 2px;
}
/* 分页驱动多吐出来的「共 X 条 / Y 页」，是 <ul> 的兄弟节点，单独给样式 */
.pagination-controls > li,
.pagination-wrap > li {
    list-style: none; display: flex; align-items: center;
    margin: 0 0 0 12px;
    color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.page-limit-select { border-radius: var(--r-ctrl); border: 1px solid var(--border); }
.page-limit-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }

/* 分页条容器。物料页模板原本在这里手写了一个「10 / 页」下拉，与统一分页组件里的
   条数选择器重复（同一屏两个下拉、且它多占一行把分页卡挤到下一行）。
   该重复控件已从模板中移除；下面两条规则作为兜底保留，用于其它可能再犯的页面。 */
.pagination-bar { display: flex; justify-content: flex-end; align-items: flex-end; }
.pagination-bar > .zg-pag-dup { display: none; }
.pagination-bar:has(.pagination-wrapper) > select:not(.page-limit-select):not(.zg-limit-select) { display: none; }
.pagination-bar > .pagination-wrapper { flex: 1 1 auto; }
.pagination-bar > .zg-limit-wrap { margin-left: auto; }

/* ===== 12. 详情页 ===== */
.detail-grid { gap: 18px 24px; }
.detail-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.detail-value { font-size: 14px; color: var(--text); }
.detail-item.boxed { background: var(--surface-2); border: 1px solid #E6EAF2; border-radius: 10px; padding: 10px 14px; }
.stat-mini { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.stat-mini .stat-value { color: var(--title); }
/* 审批 / 进度时间轴 */
.step-circle, .timeline-dot { background: var(--primary); }
@keyframes zgPulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.45); } 100% { box-shadow: 0 0 0 8px rgba(37,99,235,0); } }
.step-node.active .step-circle { animation: zgPulse 2s infinite; }

/* ===== 13. 导入 / 导出 ===== */
/* 上传区：把普通 file input 做成可点击的虚线拖放区外观 */
.modal-body input[type="file"].form-control,
input[type="file"].zg-drop {
    border: 1.5px dashed #93B4FD !important;
    background: var(--primary-50) !important;
    border-radius: 12px !important;
    padding: 18px 14px !important;
    color: var(--muted);
}
.modal-body input[type="file"].form-control:hover { background: var(--primary-light) !important; }
/* 导入结果统计条 */
.import-summary { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.import-summary .ok { color: #047857; font-weight: 600; }
.import-summary .warn { color: #B45309; font-weight: 600; }
.import-summary .skip { color: var(--muted); font-weight: 600; }
.import-summary strong { font-size: 16px; font-variant-numeric: tabular-nums; }
/* 导入告警折叠块 */
details.import-warn {
    background: var(--warning-bg);
    border: 1px solid #F5D9A8;
    color: #92400E;
    border-radius: 12px;
}
details.import-warn > summary { color: #92400E; }
.import-warn-chip {
    background: rgba(180,83,9,.12);
    color: #92400E;
    border: 1px solid rgba(180,83,9,.26);
    border-radius: var(--r-pill);
}
/* 进度条 */
.progress { background: var(--surface-2); border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.progress-bar { background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%); }
.progress-bar.bg-success { background: var(--success); }
.progress-bar.bg-danger { background: var(--danger); }
/* 导入表：右上角操作按钮组 */
.op-btns { display: inline-flex; gap: 6px; }
.op-btns .btn { border-radius: var(--r-btn); }
.op-select { min-width: 150px; }

/* ===== 14. 弹窗 / 提示 / 空状态 ===== */
.modal-content { border-radius: var(--r-card); border: none; box-shadow: 0 24px 60px rgba(15,30,61,.18); }
.modal-header { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; }
.modal-title { font-size: 16px; font-weight: 600; color: var(--title); }
.alert { border-radius: 12px; border: none; font-size: 13px; }
.alert-success { background: var(--success-bg); color: #065F46; }
.alert-danger { background: var(--danger-bg); color: #991B1B; }
.alert-warning { background: var(--warning-bg); color: #92400E; }
.alert-info { background: var(--info-bg); color: var(--primary-hover); }
.empty-state .icon { background: var(--surface-2); color: var(--muted-2); border-radius: 16px; }
.skeleton { background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%); background-size: 200% 100%; }
.loading-spinner { border-top-color: var(--primary); }
.dropdown-menu { border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-pop); }
.tooltip-inner { font-size: 12px; border-radius: 6px; }
.material-search-dropdown { box-shadow: var(--shadow-pop) !important; border-radius: 12px !important; }

/* ===== 15. 滚动条 / 打印 / 响应式 ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

@media print {
    .sidebar, .topbar, .page-actions, .toast-fixed { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
}

@media (max-width: 768px) {
    .main-content { padding: 16px; }
    .topbar { padding: 0 16px; }
    .topbar input[type="text"] { width: 140px !important; }
}

/* ===== 16. 登录页（auth/login.html 单独引入本文件） ===== */
body:has(.login-wrapper) {
    background: radial-gradient(ellipse at 18% 18%, #22355C 0%, #0F1E3D 72%) !important;
}
body:has(.login-wrapper) .login-wrapper {
    width: 920px;
    height: 500px;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(6,14,32,.55);
}
body:has(.login-wrapper) .login-left {
    background: linear-gradient(160deg, #26355C 0%, #1E2A4E 55%, #33468A 100%);
    padding: 44px 44px 36px;
}
body:has(.login-wrapper) .login-left h1 { font-size: 32px; letter-spacing: 2px; }
body:has(.login-wrapper) .login-right { padding: 56px 52px; }
body:has(.login-wrapper) .login-right h2 { color: var(--title); }
body:has(.login-wrapper) .form-control-login {
    background: #F6F8FC;
    border: 1px solid var(--border);
    border-radius: 10px;
    height: 44px;
}
body:has(.login-wrapper) .form-control-login:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}
body:has(.login-wrapper) .btn-login {
    background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 10px;
    height: 46px;
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(37,99,235,.28);
}
body:has(.login-wrapper) .btn-login:hover { background: var(--primary-hover); }
body:has(.login-wrapper) .toggle-pwd:hover { color: var(--primary); }
body:has(.login-wrapper) .alert-error { background: var(--danger-bg); border: 1px solid #F7C9C4; color: #B91C1C; border-radius: 10px; }
body:has(.login-wrapper) .demo-hint { color: var(--muted-2); }

/* ============================================================
   以下配套 public/js/zg-ui-enhance.js（侧边栏折叠 / 每页条数 / 详情页明细分页）
   ============================================================ */

/* ===== 17. 侧边栏折叠 232 → 64 ===== */
.topbar .zg-nav-toggle {
    margin-right: auto;
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: #FFFFFF;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.topbar .zg-nav-toggle:hover { color: var(--primary); border-color: #93B4FD; background: var(--primary-50); }
body.zg-collapsed { --sidebar-width: 64px; }
body.zg-collapsed .sidebar { overflow-x: hidden; }
body.zg-collapsed .sidebar .brand { padding: 0; justify-content: center; }
body.zg-collapsed .sidebar .brand img { margin-right: 0 !important; }
body.zg-collapsed .sidebar .brand span { display: none; }
/* 文字用 font-size:0 隐藏（菜单项里是裸文本节点，包不了 span），图标单独把字号写回来 */
body.zg-collapsed .sidebar .nav-link {
    font-size: 0;
    padding: 10px 0;
    text-align: center;
    white-space: nowrap;
}
body.zg-collapsed .sidebar .nav-link i { font-size: 17px; margin-right: 0; width: auto; }
body.zg-collapsed .sidebar .nav-link.sub { padding-left: 0; }
body.zg-collapsed .sidebar .nav-link.active::before { display: none; }
body.zg-collapsed .sidebar .nav-section { font-size: 0; padding: 10px 0; justify-content: center; }
body.zg-collapsed .sidebar .nav-section > i:first-child { font-size: 16px; margin-right: 0; width: auto; }
body.zg-collapsed .sidebar .nav-section i.ms-auto { display: none; }
body.zg-collapsed .sidebar .user-block { justify-content: center; padding: 12px 0; gap: 0; }
body.zg-collapsed .sidebar .user-block > div:last-child { display: none; }
@media (max-width: 768px) {
    .topbar .zg-nav-toggle { display: none; }
}

/* ===== 18. 每页条数下拉（含旧式 .pagination-wrap 的补注入） ===== */
.pagination-controls { gap: 10px; }
.page-limit-select { border-radius: var(--r-ctrl); border: 1px solid var(--border); background: #FFFFFF; }
.zg-limit-wrap { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; font-size: 13px; color: var(--muted); }
.zg-limit-select {
    height: 32px; padding: 0 6px;
    border: 1px solid var(--border); border-radius: var(--r-ctrl);
    background: #FFFFFF; color: var(--text); font-size: 13px; cursor: pointer;
}
.zg-limit-select:hover { border-color: #CBD5E1; }
.zg-limit-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.12); outline: none; }

/* ============================================================
   20. 浅色主题（顶栏按钮自由切换，三态：浅色 / 经典深蓝 / 跟随系统）
   ------------------------------------------------------------
   机制：zg-ui-enhance.js 第 6 模块只负责在 <html> 上写 data-theme="light|dark"，
   配色 100% 由 CSS 变量完成，脚本里不出现任何颜色值。
   浅色主题只重定义「外壳」变量（侧栏 / 底色 / 卡片 / 文字 / 边框），
   语义色、圆角、阴影、间距一律沿用 —— 保证两套主题下
   状态色、控件尺寸、留白节奏完全一致，切过去不会有"另一个系统"的割裂感。
   防闪烁：header.html / login.html 的 <head> 里有一段前置脚本，
   在样式生效前就把 data-theme 打上，否则刷新会先闪一下深色。
   ============================================================ */

html[data-theme="light"] {
    /* 侧边栏：深海军蓝 → 白 */
    --sidebar-bg: #FFFFFF;
    --sidebar-fg: #5A6B8C;
    --sidebar-hover: #EFF4FF;
    --sidebar-user-bg: #F5F8FD;
    --sidebar-group: #9AA9C2;

    /* 内容区：略提亮，与白色侧栏拉开层次 */
    --bg: #F5F7FC;
    --surface: #FFFFFF;
    --surface-2: #F2F5FA;
    --border: #E4E9F2;
    --muted: #64748B;
    --muted-2: #94A3B8;
    --text: #33415C;
    --title: #0F1E3D;
}

/* --- 侧边栏（浅色下要逐个改：原规则里有 #FFFFFF / #93B4FD 等硬编码） --- */
html[data-theme="light"] .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    box-shadow: 1px 0 0 var(--border);
}
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb { background: rgba(15,30,61,.18); }
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(15,30,61,.34); }
html[data-theme="light"] .sidebar .brand {
    color: var(--title);
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .sidebar .nav-link:hover {
    color: var(--primary-hover);
    background: var(--sidebar-hover);
}
/* 未选中项的图标：深蓝底上用亮蓝，白底上要压深一点才看得清 */
html[data-theme="light"] .sidebar .nav-link:not(.active) i { color: #7E97C9; }
html[data-theme="light"] .sidebar .nav-section:hover { color: var(--primary); }
html[data-theme="light"] .sidebar .user-block {
    background: var(--sidebar-user-bg);
    border-top: 1px solid var(--border);
}
html[data-theme="light"] .sidebar .user-block .name { color: var(--title); }
html[data-theme="light"] .sidebar .user-block .role { color: var(--muted); }

/* --- 工作台欢迎区：深蓝渐变 → 亮蓝渐变（文字仍为白色，对比度足够） --- */
html[data-theme="light"] body .welcome-card {
    background: linear-gradient(120deg, #3B82F6 0%, #6366F1 100%);
    box-shadow: 0 8px 24px rgba(37,99,235,.20);
}

/* --- 登录页 --- */
html[data-theme="light"] body:has(.login-wrapper) {
    background: linear-gradient(135deg, #EEF3FC 0%, #DFE7F6 100%) !important;
}
html[data-theme="light"] body:has(.login-wrapper) .login-wrapper {
    box-shadow: 0 30px 80px rgba(15,30,61,.18);
}
html[data-theme="light"] body:has(.login-wrapper) .login-left {
    background: linear-gradient(150deg, #3B82F6 0%, #2563EB 55%, #6366F1 130%);
}
/* 亮蓝渐变上标题要用白色（全局 h1 规则给的是 --title 深色，深浅主题都要压这一处） */
body:has(.login-wrapper) .login-left h1,
body:has(.login-wrapper) .login-left p {
    color: #FFFFFF;
}
/* 亮蓝渐变上卖点勾选图标提亮一档 */
html[data-theme="light"] body:has(.login-wrapper) .feature-list li i { color: #DBEAFE; }

/* --- 切换按钮（顶栏内 / 登录页浮动两用） --- */
.zg-theme-toggle {
    margin-right: 10px;
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--surface);
    color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.zg-theme-toggle:hover {
    color: var(--primary); border-color: #93B4FD; background: var(--primary-50);
}
.zg-theme-float {
    position: fixed; right: 20px; top: 18px; z-index: 1090;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer; box-shadow: var(--shadow-pop);
    transition: all .15s;
}
.zg-theme-float:hover { color: var(--primary); border-color: #93B4FD; background: var(--primary-50); }

/* ===== 19. 详情页明细前端分页 ===== */
.zg-detail-pager {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    padding: 12px 2px 2px; font-size: 13px; color: var(--muted);
}
.zg-detail-pager .pinfo strong { color: var(--title); font-variant-numeric: tabular-nums; }
.zg-detail-pager .pbtn {
    border: 1px solid var(--border); background: #FFFFFF;
    border-radius: var(--r-btn); padding: 4px 12px;
    font-size: 12.5px; color: var(--text); cursor: pointer; transition: all .15s;
}
.zg-detail-pager .pbtn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.zg-detail-pager .pbtn:disabled { opacity: .45; cursor: not-allowed; }
@media print { .zg-detail-pager { display: none !important; } }